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