1. Adım: Önce sitenin başlık, içerik, menü ve benzeri katmanları çerçeve olarak oluşturuyoruz.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="iso-8859-9" /> <title>HTML5 Site Şablonu</title> </head> <body> <div> <header> <p>Logo ve Slogan Metni</p> </header> <aside> <nav> <p>Ana Sayfa</p> <p>Resimler</p> <p>Videolar</p> </nav> </aside> <article> <section>Burada resimler, yazılar, bilgiler verilecek...</section> <p>içerik içerik içerik içerik içerik içerik içerik içerik çerik içerik içerik içerik içerik içerik içerik içerik içerik içerik içerik içerik içerik </p> </article> <aside> <p>Arama</p> <p>Reklamlar</p> <p>Son Haberler</p> <p>İstatistikler</p> </aside> <footer> <p>Webmaster ve diğer iletişim bilgileri buradadır.</p> </footer> </div> </body> </html>
Bu hali ile tarayıcıda düz bir halde içerik gelir. Artık CSS ile adım adım düzenlemeler yapalım.
2. Adım: Tüm sayfayı kapsayan ve başlık olan en üstteki katmanın CSS’lerini düzenleyelim.
<style type="text/css">
body {
font-family:Verdana, Geneva, sans-serif;
margin:0px;
}
#kapsayici{
background-color:#999;
margin: 10px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:800px;
}
header{
padding:10px;
background-color:#06C;
text-align:center;
}
</style>
Banner kapsayıcının içini tamamen kaplıyor, rengi mavi ve metin ortalı olarak ayarlanmıştır.
3. Adım: Menü, içerik ve sağ kısım kolonlara ayrılacaktır.
#menu {
margin-top:10px;
padding:10px;
background-color:#0C3;
width:150px;
float:left;
}
Menü sol tarafa yapıştırıldı. Genişliği 150 piksel ve yeşil bir renk verilir.
4. Adım: Sayfa içeriğinin olacağı katman ortada olacak şekilde düzenlenir.
article {
margin-top:10px;
margin-left:10px;
padding:10px;
background-color:#C93;
width:400px;
float:left;
}
5. Adım: Sağ tarafa reklam, arama ve benzeri işler için alan kazandıralım.
#sagAlan {
margin-top:10px;
padding:10px;
background-color:#F96;
width:170px;
float:right;
}
Reklam alanı sağa dayalı, 170 piksel genişliktedir.
HTML5 şimdilik Safari ve Chrome ile düzgün görüntüleniyor. Internet Explorer 9 ve Firefox 4 ile HTML5 daha rahat çalışabilecektir. Önümüzdeki 5 yıl içinde birçok site artık HTML5 ile yapılacaktır. Şimdilik “Adobe Dreamweaver CS5” yeni dosya yaparken HTML5 türü seçmemize izin verse de, kod kısmında yardımcı olamıyor ve önizleme (Design ve Live View) tam çalışmıyor.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="iso-8859-9" />
<title>HTML5 Site Şablonu</title>
<style type="text/css">
body {
font-family:Verdana, Geneva, sans-serif;
margin:0px;
}
#kapsayici {
background-color:#999;
margin: 10px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:800px;
}
header {
padding:10px;
background-color:#06C;
text-align:center;
}
#menu {
margin-top:10px;
padding:10px;
background-color:#0C3;
width:150px;
float:left;
}
article {
margin-top:10px;
margin-left:10px;
padding:10px;
background-color:#C93;
width:400px;
float:left;
}
#sagAlan {
margin-top:10px;
padding:10px;
background-color:#F96;
width:170px;
float:right;
}
.temizleyici {
clear:both;
}
footer {
margin-top:10px;
padding:1px;
background-color:#F9C;
text-align:center;
}
</style>
</head>
<body>
<div id="kapsayici">
<header>
<p>Logo ve Slogan Metni</p>
</header>
<aside id="menu">
<nav>
<p>Ana Sayfa</p>
<p>Resimler</p>
<p>Videolar</p>
</nav>
</aside>
<article>
<section>Burada resimler, yazılar, bilgiler verilecek...</section>
<p>içerik içerik içerik içerik içerik içerik içerik içerik çerik içerik içerik içerik içerik içerik içerik içerik içerik içerik içerik içerik içerik </p>
</article>
<aside id="sagAlan">
<p>Arama</p>
<p>Reklamlar</p>
<p>Son Haberler</p>
<p>İstatistikler</p>
</aside>
<div>class="temizleyici"</div>
<footer>
<p>Webmaster ve diğer iletişim bilgileri buradadır.</p>
</footer>
</div>
</body>
</html>
Tarık BAĞRIYANIK 
makalenızı okudum bende kendı tasarımımda boyle bır yapı kullanıyorum ama benım ıstedıgım soyle bırse sol ve sagdakı bloklar onerk verıyorum 200 er px olsun bunların toplamını ana genıslıkten cıkardıgın zaman ortadakı ıcerık kısmına yenı degerı atamasını sıtıyorudm farklı bır deyısle ortadakı ıcerık kısmına px cınsınden deger vermek yerıne 100% deger almanısı yada otomatık olarak sag ve sol ksımdan arda kalan kısma otomatık yayılmasını sıtıyorum bunu nasıl yaparız acaba tsk’ler
css ile ilgili bir şeyler buldum=
ortadaki div’in stiline yazılabilir…
min-width: 100px;
max-width: 500px;
http://stackoverflow.com/questions/4012504/calculate-width-of-div-within-viewport JQuery ile boyut hesaplanabilir
css hesaplama:
http://www.w3.org/TR/css3-values/#calc sadece Firefox4 ve IE9 ile çalışıyor
width:calc(100% – 400px);
width: -moz-calc(100% – 400px);