Web Tasarım ve Programlama Sitesi

Bu yazıda CSS kullanarak Template oluşturma işlemi açıklanmıştır. Aşağıdaki şekilde biçimlendirilmiş divlerin sayfadaki yerleşimi gösterilmiştir. Template oluşturmak için gerekli kodlar resmin altında anlatılmıştır.

CSS ile Web Sitesi Oluşturmak için Gerekli CSS Kodları (CSS Örnekleri) :

#sayfa{
          width:760px;   /*sayfa genişliği 760 px*/
          text-align:left; /*sayfa içindeki yazıların tamamı sola hizalı olsun*/
          padding:0; /*sayfa alanı ile içindeki alanlar arasında mesafe olmasın*/
          margin-top:0px; /*sayfanın üst tarafında boşluk olmasın*/
          margin-right:auto; /*sayfanın sağındaki boşluk otomatik ayarlansın*/
          margin-bottom:0px; /*sayfanın altında boşluk olmasın*/
          margin-left:auto; /*sayfanın solunda otomatik boşluk olsun*/
}

#ustalan {   /*Sitenin üst bölümü burada tanımlanmaktadır.*/
width:760px; /*Sitenin üzt bölümünün genişliği*/
}

#menu { /*Menüler burada biçimlendiriliyor. */
float:left; /*Menünün sol tarafta bulunması sağlanıyor.*/
width=200; /*Menü genişliği 200 px olarak belirleniyor.*/
}

#anabolum{     /*icerik ve banner bölümlerini içinde barındıracak bölüm*/
float:right;        /*menu sola hizalanırken bu bölüm sağa hizalanır. Bu bölümün sağa
                          hizalanması ile icerik ve banner alanları menünün sağında olurlar*/
width:560px;    /* #menu+#anabolum toplam sayfa genişliğine eşit olmalıdır. #menu 200
                              ise #anabolum (icerik+banner) 560 (sayfa-menu) olmalıdır.*/
}

#icerik {  /*#banner ile birlikte #anabolum u oluşturan bölüm. */
float:left;  /*anabolum içinde sol tarafta bulunacaktır. menu nün soluna geçemez. Çünkü
                     anabolum float:right ile menünün sağına aktarılmıştır. burdaki left
                     anabolum içinde icerik in banner a göre solda olmasını sağlar. */
width:360; /*Genişlik 360 px olarak belirleniyor. Bunun anlamı anabolum icin
                        belirtillen 560 px in 360 px i bu alanda kullanılıyor. Kalan 200 px ise
                        banner alanında kullanılacak. */
}

#banner { /*banner alanı burada biçimlendiriliyor.*/
float:right; /*banner anabolum içinde sağa hizalanıyor. Yani icerik in sağında olacak*/
width:200px; /*icerikten kalan 200 px banner için kullanılıyor.*/
}

#altbolum { /*Resimde görünmeyen bu bölüm en alttaki footer bölümüdür. Telif
                         hakkı gibi bilgilerin olduğu bölümdür.*/
width:760px; /*Sayfa genişliği ile aynı genişliktedir.*/
clear:both; /*Float etkilerinden kurtulmak ve üstteki alanların altında kalmak için
                        kullanılmıştır.*/
}

CSS’i Kullanacak Ana Sayfa Kodları :

<div id=”sayfa”>  /*diğer div ler bu divin içindedir*/
        <div id=”ustalan”> burası üst alan </div>
        <div id=”menu”>Menü Bölümü</div>
        <div id=”anabolum”>     /*bu div icerik ve banner ı kapsar*/
                <div id=”icerik”>Burası içerik bölümü</div>
                <div id=”banner”>Banner bölümü</div>
        </div>
        <div id=”altbolum”> Burası alt bölüm </div>
</div>