onelayout02
Hayalimdeki Site
Tek Sütun2. Adım: Şablonu oluşturmak
Oluşturacak olduğumuz şablonun temel görünümü şu şekilde olacak.
Oluşturduğumuz resimler arkaplan, başlık, üst kısım, orta kısım ve alt kısım olmak üzere 5 ayrı parçadır.
Kullanacağımız CSS kodlarının temel özellikleri için bu siteyi ziyaret etmenizi öneririm.
a-) Öncelikle CSS kodlarının en başına menü gizleme kodumuzu yapıştıralım.
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
b-) Sonra sitemizin gövdesini (body'sini) oluşturacağız. Gövdede tanımlayacağımız bütün özellikler sitemizi etkileyecek. Font biçimi, fontların boyutu, arka planı resmi yada rengi, sitenin ortalaması vs... Eğer siz başka bir kodla aksini belirtmezseniz bütün özellikler bu kısımdan gelir. Mesela tabloların font boyutunu 10px yaptınız ama body'de 12px olarak font boyutu belirlediniz. Bu durumda tablolar hariç sitenizdeki bütün yazılar 12px büyüklüğünde olacak. Şimdi body'yi oluşturalım.
* { padding: 0; margin: 0; }
body { font-family: Arial;
font-size: 12px;
background: url(https://img.webme.com/pic/h/hackerfriend/hayalimarkaplan.jpg) top center fixed;
}
Hemen arkasından tasarımızın düzgün ve ortalı durması için bir katman oluşturalım. CSS katmanları # ile başlar. Katman özellikleri { ile başlar ve } ile biter. Her katman özelliği arası noktalı virgül ; konur. Kodları inceleyerek daha iyi anlayabilirsiniz.
#tasarim {
margin: 0 auto;
width: 900px
}
Bu haliyle sitemizin görünümü buradaki gibi olacak.
TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
TASARIM ALTINDAKİ YAZI
</div>
CSS KODU
Burayı tıklayınız...