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*/
}
Yorum(0)
