Css Şablon Oluşturma ( Css Template)

17 Ağustos 2012 Cuma

Css Şablon Oluşturma ( Css Template)

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..

Hiç yorum yok:

Yorum Gönder

Not: Yalnızca bu blogun üyesi yorum gönderebilir.