1

4 Ocak 2012 / Çarşamba

Renk uyumunu seçmek için google→colorschemedesigner http://colorschemedesigner.com/

RGB ye tıklayınca bir pencere çıkıyor

2

O pencereye rengimizin kodunu girince ayarlar gözüküyor.Örneğin 0B6E9E için

Bu rengin kontrastı için Complementine tıklıyoruz

3

Sayfaya dis,onun içine banner,menu,icerik,altlik divlerini ekliyoruz.Bunların içine bir şeyler girince

divler arası boşluğun değişmemesi için divlerin dışına boşluğa tıklayıp New CSS rule deyip

Tag → p → Margin=0 yapıyoruz.

Menunun içine Ana Sayfa hakkımızda İletişim yazıp Aşağıda Properties panelindeki link bölmesine

tıklayıp AltGr+3 ile # işareti vererek link yapıyoruz. Linklerden birinin üstüne gelip tıklayınca aşağıda

<a> özelliğine tıklayıp etkinleştiriyoruz ve New CSS Rule deyip

Margin Right = 15px deyip yazıların aralığını açıyoruz.

Menu divine girip Padding ine 20 px yapıyoruz.Ki yazılar divin içine ortralansın.

4

5 Ocak 2012 / Perşembe

Yeni site tanımlayıp disdiv,içine banner,altına menu,altına icerik, altına altlik divlerini ekliyoruz.

Disdivin genişliği 900px,içine eklenen divlere genişlik vermiyoruz ve ortalama yapmıyoruz. Dis divin

içine ortalanarak otomatik olarak yerleştiriliyor.

Diyelim yanlış div ekledik. Sağdan CSS styles panelinden siliyoruz.Sahnemizde div e gelip tıklayıp

aşağıdan onu etkinleştirip onu da siliyoruz.div içine bölüm ekleyip sağa, sola yaslamak için box

içindeki Float kullanılıyor. http://www.bostancihem.k12.tr/dwdiv2.pdf

icerik div imizin içine 500px genişliğinde ve sola yaslalı sol divini ekleyeceğiz.

Insert div tag → After start of tag → <div id=”solicerik”> →ID : sol → New CSS rule → #solicerik→OK

Box →width : 500px → Float : Left →OK

5

Bunun yanına sağ div i ekleyeceğiz

Insert div tag → After tag → <div id=”solicerk”> →ID : sagicerik → New CSS rule → #sagicerik→OK

Box →width : 350px → Float : Right →OK

Dikkat : Float kullanılınca son kullanılan div den sonra temizlik Div’i kullanılmalı . yoksa sol veya sağ

divler içine ekleme yapınca dışarı taşar.

6

Insert div tag → After tag → <div id=”sagicerik”> →ID : temizlik → New CSS rule → #temizlik→OK

Box → Clear : both →OK

7

Banner içine çeşitli divler ekleyip içlerine resim , logo, v.s. ekleyeceğim ama bunları istediğim gibi

taşıyıp ayarlayabilmek için banner divinin içine girip positioningini relative yapacağız.

Bannerin içine div ekleyip positioningini absolute yapıyoruz.

Insert div tag → After start of tag → <div id=”banner”> →ID : resim1 → New CSS rule → #resim1→OK

Positioning : Absolute

8

Resim1 divini istediğim yere taşıyorum büyüklüğüne kenarından çekiştirerek değiştirebilirim.

Slogan için de ekleme yapacağız.

Insert div tag → After start of tag → <div id=”banner”> →ID : slogan → New CSS rule → #slogan→OK

Positioning : Absolute→OK

Diyelim slogan div inin içine yazdıklarımız banner divinin dışına taştı , banner div i genişlemez onun

için banneri taşmayacağız.

9

Diyelimki logo için bir genişlik ayarladım ve o kadar genişlikte logo ekleyeceğim.

Sahneyi Print Screen yapıp photoshop açıyoruz.

File → New yapınca belgemiz kadar büyüklükte sayfayı otomatik olarak açıyor

Ctrl+V ile sahnemizi yapıştırıyoruz.

10

Crop tool ile logomuz kadar yeri seçip enter yapıyoruz. LOGO yazıyoruz.(font : Segeo Script)

Layer 1 i ve Background katmanlarını siliyoruz. Böylece yazı katmanını transparan yapmış oluyoruz ve

bunu .png olarak kaydediyoruz.Daha sonra, Dreamweaver da logo divimizin içine image olarak

ekliyoruz.Divin içindeki açıklama yazılarını siliyoruz.

11

Live viev yapıyoruz

Bunu sürükleyerek istediğim yere taşıyabiliyorum

Bunu başka yerlere de taşıyabilirim. Peki farkı ne ? banneri başka yere götürünce bu da onunla

birlikte gelir.

Body mizin arka planı gradientli renk olsun istiyoruz. Önce küçük bir çubuğa istediğimiz renk geçişini

yapıyoruz.Body tag i açıp Background da resmi seçiyoruz.repeat:x yapıp Apply diyoruz.Back-ground

color olarak alttaki rengi seçiyorum

12