Web tasarımına yeni başlayanlar veya
Css de hazır şablona ihtiyac duyanlar için hazırladıgım bir kaç basit
Css şablonu sizlerle paylasmak istiyorum.
Css şablonları kullanarak kısa sürede websitesi olusturabilirsiniz.Tabi
Css kullanmanın yanı sıra javascript ,ajax ,flash vb programları kullanarak sitenizi daha dinamik bir hale getirebilirsiniz.Ama webtasarımının temeli
Xhtml ve Css ile başlar .O yüzden temel düzeyde olsa dahi
xhtml ve css kullanmayı bilmelisiniz.
Resimde görmüş oldugunuz
Css şablonun kodlarını aşagıda bulabilir.Ve bu kodları kullanarak css şablon olusturabilirisiniz.Kendinize gore düzenleyerek farklı bir
Css şablonda olusturmanız mumkün.
 |
| Css Şablon ( Css Template) |
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#footer {
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #3CF;
}
html, body {
height: 100%;
}
#outerWrapper {
margin: 0px auto -4em;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header {
width: 100%;
background-color: #39F;
}
#contentWrapper {
width: 100%;
overflow: auto;
}
#sidebar {
width: 200px;
float: left;
background-color: #36C;
height: auto;
}
#content {
width: 760px;
float: right;
background-color: #369;
}
#right {
width: 380px;
margin-right: auto;
margin-left: auto;
float: right;
}
#left {
float: left;
width: 380px;
margin-right: auto;
margin-left: auto;
}
</style>
- Yukarıdaki kodlar Css için isterseniz bu kodları harici bir css dosyasıyla kullanırsınız. Yada Html dosyanızın içinde html kodlarıyla birlikte kullanırsınız.Css i tanımlamanın 3-4 çeşit yontemi vardır.
</head>
<body>
<div id="outerWrapper">
<div id="header">
<p>Content for id "header" Goes Here</p>
<p> </p>
</div>
<div id="contentWrapper">
<div id="sidebar">
<p>Content for id "sidebar" Goes Here</p>
</div>
<div id="content">
<p>Content for id "content" Goes Here </p>
<div id="lipsum">
<p> </p>
</div>
<div id="left">
<p>Content for id "left" Goes Here</p>
<p> </p>
</div>
<div id="right">
<p>Content for id "right" Goes Here</p>
</div>
</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
<div id="footer">
</div>
/body>
</html>
- Buradaki kodlarımız da html kodlarıdır.Olsuturdugumuz Css divleri tanımlamamız gerektiginden bu kodları yazmak zorundayız.
Ben arka plan renklerini divler belirgin olsun diye renkli yaptım.Yani arka plan renklerini kaldırmanız sizin acınızdan daha faydalı durum olur.Ayrıca Sidebar divinin yüksekligini kendiniz ayarlayabilirsiniz..Burdaki kodları kullandıgınız takdirde resimdeki sablonun aynısını elde edersiniz.Tabi bu sadece basit bir şablondur yeni baslayan arkadaslara umarım faydalı olur..
