Web Tasarım ve Programlama Sitesi

Bu yazıda tasarımı anlatılacak sitenin önizlemesini buradan görebilirsiniz. Tasarımda yüzdelik(%) değerler kullanıldığı için tarayıcı tam ekran değilken orta kısım alt tarafa kayacaktır.

Örnek site dreamweaver kullanılarak oluşturulmuştur. Bu sitenin bir sonraki aşaması da siteyi template haline getirmek fakat onuda yaparsam anlatımı çok zor olacağı için siteyi template haline getimedim. Bu yazıda tasarımı template’e çevirme anlatılmıştır.

Uygulamaya geçmeden önce Dreamweaver ile css uygulamalarını kategorilere göre anlatan yazıları okumanızı tavsiye ederim. Sağdaki menüden CSS kategorisini incelerseniz css oluşturma ile ilgili bilgileri bulabilirsiniz.

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.. */
}

Bu yazıya boş bir zamanında devam etcem ….