Dreamweaver ve CSS Kullanarak Site Tasarımı

Sitenin Bölümlerini Oluşturmak :


Yukarıdaki şekilde bölümler 1, 2, 3 ve 4 olarak isimlendirilmiştir. 1
üst bölümdür ve 3′ü (logo bölümünü) içinde barındırır. 2 alt bölümdür
ve 4′ü (içerik bölümünü) içinde barındırır.
Site için harici bir css oluşturun ve bütün css biçimlendirmelerini oradan çağırın.
1 Bölümü (Üst Bölüm) :

#ust olarak tanımlanmıştır. # işareti id selector’ü ifade eder.
Bunun anlamı bu biçimlendirmenin sadece bir defa kullanılacağıdır.
Dreamweaver ile oluşturulurken advanced seçilir ve name bölümüne #ust
yazılır.
Bu alanın css kodları aşağıda açıklamalı olarak verilmiştir.
#ust {
background-color: #B6B4B5; /* Zemin rengi*/
width: 100%; /*Alan genişliğinin içinde bulunduğu alanın genişliğine oranı. Bu alan hiçbir
alanın içinde olmadığı genişiği sayfa genişliği ile aynı olur.
height: 160px; /*Yükeskliği 16 pixel*/
border-bottom-width: thin; /*Alanın alt tarafına(bottom) thin(ince) genişiğinde(width)
kenarlık(border) ekler. */
border-bottom-style: solid; /*Alt tarafa eklencek çizginin sitili. solid (düz çizgi)*/
border-bottom-color: #E1E1E1; /*Alt tarafa eklenecek çizginin rengi*/
}
2 Bölümü (Alt Bölüm) :

İçerisinde üst menü, sol menüler ve içerik kısmını barındıran
bölüm. Üst bölüm ile çok benzerdir. Ana sayfade #ust çağrıldıktan sonra
bu bölüm (#ana) çağrılmalıdır.
#altbolum {
background-color: #CCCCCC; /*Zemin rengi*/
width: 100%; /*genişlik olarak ekranı tam kapsasın*/
}
3 Bölümü (Logo Bölümü) :

Bu bölüm 1 bölümünü içindedir. Bu bölümün genişliği %80 olarak
belirlenmiştir. Sayfaya ortalamak için kalan %20′lik bölüm sağ ve sol
tarafta boşluk olarak belirlenmiştir. Margin özelliği bir alanın içinde
bulunduğu alanla arasındaki mesafeyi belirler. Bu nedenle margin-left=10% ve margin-right=10%
ile alanın sağında ve solunda eşit uzaklıklar verilmiştir. Ayrıca
aşağıdaki kodda çok yer kaplayan kenarlık eklenme işlemidir. Alanın
sağına, soluna ve üstüne kenarlık eklenmiştir. Sadece alt tarafa
kenarlık eklenmemiştir.
#logo {
background-image: url(resimler/ustzemin.gif); /*Alana arka plan resmi eklenmiş*/
height: 140px; /*Alanın yüksekliği 140 pixel olarak ayarlanmış*/
width: 80%; /*Alanın genişliğinin içinde bulunduğu alana( 1 alanı) oranı yüzde 80*/
margin-right: 10%; /*Alanın içinde bulunduğu alana sağdan mesafasi %10*/
margin-left: 10%; /*logonun 1 alanına soldan mesafesi %10. %80+%10+%10=%100*/
margin-top: 20px; /*Alanın en üst noktası ile içinde bulunduğu alan arasındaki mesafe*/
border-top-width: 1px; /*Alanın üst kenarlığının genişliği 1 piksel*/
border-right-width: 1px; /*Sağ kenarlık genişliği*/
border-left-width: 1px; /*Sol kenarlık genişliği*/
border-top-style: solid; /*Üst kenarlık biçimi.*/
border-right-style: solid; /*Sağ kenarlık biçimi*/
border-left-style: solid; /*Sol kenarlık biçimi*/
border-top-color: #89919C; /*Üst kenarlık rengi*/
border-right-color: #89919C;
border-left-color: #89919C;
}
4 Bölümü (Menüler ve İçerik Bölümü):

Bu bölüm 2 bölümünün içindedir. Aynı logoda olduğu gibi genişliği
%80, sağ ve sol boşlukları %10 değerindedir. Bu sayede logo ile aynı
hizada olur.
#ana {
background-color: #FFFFFF; /*Zemin rengi beyaz*/
width: 80%; /*Genişiği içinde bulunduğu alanın (2 alanı) %80′i*/
margin-right: 10%; /*2 alanı ile sağdan mesafesi %10*/
margin-left: 10%; /*İçinde bulunduğu alan ile (2 alanı) soldan mesafesi %10*/
border: 1px solid #A7A8AA; /*Sağ, sol, alt ve üstte kenarlık oluşturulmuş. Kenarlığın
kalınlığı 1 px (piksel), tipi solid (düz çizgi), rengi #A7.. */
}