ENGİN KOÇ

CSS İle Web Site Şablonu Oluşturmak

Yazar: DJ_ENGiN | Kategori: WEB TASARIM

Eski zamanlarda html tasarımlar hazırlanırken tablolar kullanılırdı. Table-lar tr-ler td-ler; bütün tablo kodları hep içiçer girerdi. Hatta bazen istediğini şeyleri yapmakta gerçektende çok zorlanırdınız. Bu durumları zamanında bende yaşadım. Tablo eklendiğinde sağ kolonu uzatırsını solda uzaması gerekir. Resim eklersiniz kötü görünür vs. gibi sorunler CSS tasarımlar oluşturulmaya başlandığından bu yana ortadan kalktı.

CSS çok güzel bir yardımcı web programa dili diyebiliriz. Bu makalemizde ise en basit yoldan CSS ile web site tasarım şablonunun iskeletini oluşturacağız. Classları kullanarak istediğimiz şekilde basit bir şablonu oluşturacağız. Şimdi aşağıdaki resimde şablonun genel yapısını görüyorsunuz.

Büyük boyutta görmek için üzerine tıklayınız.

Yukarıdaki yapıyı oluşturan ilgili kodlar aşağıdaki gibidir. Gerekli açıklamalar en kısa şekilde kodlar arasındaki açıklama satırları ile belirtilmiştir. Uygulamanın demosunu incelemek için buraya tıklayabilirsiniz. Download etmek için burayı kullanabilirsiniz. Aşağıdaki kodları alıp direk olarak bir html sayfasına yapıştırarakda deneyebilirsiniz.

<style>
body {
margin:0 auto;
width:850px; /* genişliği */
background-color:#ececec; /* arkaplan rengi */
}
.logo_ust {
background-color:#fff; /* arkaplan rengi */
height:90px; /* yüksekliği */
width:850px; /* genişliği */
}
.ust_kisim {
background-color:#666;
height:230px; /* yüksekliği */
width:850px; /* genişliği */
}

.sol_kolon {
background-color:#EEE; /* arkaplan rengi */
float:left; /* sola doğru hizalama */
height:auto; /* yüksekliği */
width:200px; /* genişliği */
}
.sag_kolon {
background-color:#fff; /* arkaplan rengi */
float:right; /* sağa doğru hizalama */
height:auto; /* yüksekliği */
width:650px; /* genişliği */
}
.alt_kisim {
background-color: #D7D5D5; /* arkaplan rengi */
clear:right;
height:30px; /* yüksekliği */
width:850px; /* genişliği */
}

</style>

<div class=”logo_ust”>logo üst alanı</div>
<div class=”ust_kisim”> üst kısım
</div>
<div class=”sol_kolon”>sol kolon</div>
<div class=”sag_kolon”>sağ kolon </div>
<div class=”alt_kisim”>alt alan</div>