Şimdi stil2.css ve index3.html dosyamızı geliştirelim ve genel hatlarıyla sayfa görüntümüzü belirleyelim. İndex3.html dosyamızın kodları aşağıdaki gibi olacaktır.
İndex3.html de eklediğimiz bazı class lar var. Eğer index3.html dosyasındaki classlardan atladığınız olursa sayfada kaymalar olabilir. O yüzden eklediğim etiketlerin yanına index3.html de eklendi yazdım.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”tr” lang=”tr”>
<head>
<title>Tema Deneme 2</title>
<script type=”text/javascript” src=”"></script>
<style type=”text/css” media=”screen”>
@import url(“stil2.css”);
</style>
</head>
<body>
<a name=”top”></a>
<div id=”container”>
<div id=”header”>
<h1>Eray USTA.Com Tema Deneme</h1>
<p><em>Tema Yazalım 
</em></p>
<div id=”date”>Lorem İpsum</div> <!–// Burda index3.html de date id si çağırılmıştır–>
</div>
<div id=”container2″>
<div id=”container3″>
<div id=”content”>
<h2 class=”thisMonth”>Blog Yazılarının Genel Başlığı</h2> <!–// Burda index3.html de this month class ı çağırılmıştır–>
<h2><a href=”#”>Yazı Başlığı</a></h2>
<p>Yazar: <a href=”#”/>yazar ismi</a></p>
<div><!–//Yazı–>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus. In euismod tellus id ante. Ut lectus. Nunc adipiscing. Praesent luctus, massa quis vulputate rhoncus, justo turpis mollis dolor, nec blandit nisl mauris et pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a eros nec orci volutpat vestibulum. Ut pellentesque sagittis metus.</p>
<p><a href=”#”>Devamını Oku »</a></p>
</div><!–//Yazı–>
<div class=”comments”><div class=”commentIcon”> Yorum Yok </div><a href=”#”>Yorum Yaz</a></div>
<!–//Üst satırda index3.html de eklenen commenticon classı vardır–>
</div><
<!– #sol sidebar –>
<div id=”sidebarLT”>
<h2 class=”features”>Sol siderbar: Son Yazılar</h2> <!–// Burda index3.html de features class ı çağırılmıştır–>
<ul class=”tocNav”> <!–// Burda ve aşağıdaki 2 tane ul etiketinde index3.html de tocnav class ı çağırılmıştır–>
<li><a href=”#”>Yazı 01 Lorem ipsum dolor sit amet consectetuer adipiscing elit</a></li>
<li><a href=”#”>Yazı 02 Lorem ipsum dolor sit amet</a></li>
<li><a href=”#”>Yazı 03 Lorem ipsum</a></li>
</ul>
<h2 class=”columns”>Kategori</h2> <!–// Burda index3.html de columns class ı çağırılmıştır–>
<ul class=”tocNav”>
<li><a href=”#”>Kategori 01 Lorem ipsum dolor sit amet consectetuer</a></li>
<li><a href=”#”>Kategori 02 Lorem ipsum dolor sit amet</a></li>
<li><a href=”#”>Kategori 03 Lorem ipsum dolor sit amet consectetuer adipiscing elit.</a></li>
</ul>
<h2 class=”pastIssues”>Arşiv</h2><!–// Burda index3.html de pastissues class ı çağırılmıştır–>
<ul class=”tocNav”>
<li><a href=”#”>Aralık</a></li>
<li><a href=”#”>Kasım</a></li>
<li><a href=”#”>Ekim</a></li>
</ul>
</div><!–//sidebarLT –>
</div><!–//container3–>
<!– #sağ sidebar –>
<div id=”sidebarRT”>
<div>Etiket bulutu, <br/>linkler, <br/>reklam veya diğer eklentiler.</div>
</div><!–//sidebarRT –>
<div id=”pushbottom”> </div> <!–// Burda index3.html de pussbottom id si çağırılmıştır–>
</div><!–//container2–>
<div id=”top_navlist”>
<h2>Ana Menü</h2>
<ul id=”navlist”><!–// Burda index3.html de navlist id si çağırılmıştır–>
<li class=”current_page_item”><a href=”#”>Ana Sayfa/a></li>
<li><a href=”#”>Hakkımda</a></li>
<li><a href=”#”>Referans</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>
</div><!–//top_navlist–>
<div id=”footer”>
<div id=”footerRight”><!–// Burda index3.html de footer 2 ye ayrılmıştır footer left ve footer right olarak çağırılmıştır–>
<h3>Footer Bilgileri</h3>
<p>
<a href=”#”>link 01</a> |
<a href=”#”>link 02</a> |
<a href=”#”>link 03</a> |
<a href=”#”>link 04</a> |
<a href=”#”>link 05</a><br />
</p>
</div><!–//footer sağ kısmı kod sonu–>
<div id=”footerLeft”>
<p>
Eray USTa Tema Deneme powered by
<a href=”http://wordpress.org/”>WordPress</a>
</p>
</div><!–//footer sol kısmı kod sonu–>
</div><!–//footer–>
</div><!–//container–>
</body>
</html>
Stil2 css kodlarımız ise şu şekilde olacaktır.
/*
Eray USTA Tema Tasarımı
*/
/*////////// GENEL TANIMLAMALAR //////////*/
body {
margin: 0px;
}
/* Genel kısmın boyutlarını yazı tipini ve rengini ayarlıyoruz.*/
#container {
margin: 0 auto;
width: 900px;
border: 1px solid #666666;
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:16px;
color: #666666;
}
#container2 {
border: 1px solid #0000ff;
}
#container3 {
width: 670px;
float:left;
border: 1px solid #ff0000;
}
/*///////// GENEL YAZI AYARLARI//////////*/
h1, h4 {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
}
h2, h3{
font-family: Georgia, Times, serif;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 22px;
line-height:24px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
p {
margin-bottom: 18px;
}
a {
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
a:visited {}
/*////////// HEADER KISMI //////////*/
/*yüksekliği 300 genişliği 930 olarak header kısmın kodlarını yazıyoruz*/
#header {
border: 1px solid #00ff00;
width: 930px;
height: 300px;
}
/*İlerde headerda kullanacağımız p li ve h2 etiketlerini tanımlıyoruz.*/
#header p, #header h1, #header h2/**/ {
}
/*////////// CONTENT KISMI//////////*/
#content {
margin:0 10px;
width: 420px;
float:left;
border: 1px solid #333333;
}
/*////////// SIDEBAR KISMI //////////*/
/*Float etiketi ile sağ ve sol siderbarı diğer kolondan ayırıyoruz.*/
#sidebarLT {
margin:0;
width:200px;
border: 1px solid #ff9900;
float:right;
}
#sidebarRT {
margin:0 10px;
width: 200px;
float: right;
border: 1px solid #0000ff;
}
/*////////// NAV KISMI//////////*/
/* Yazılarımızın çıktığı nav kısmında gerekli etiketlerin tanımlamalarını yapıyoruz.*/
#top_navlist {
position: absolute;
top: 240px;
width: 900px;
text-align:right;
border: 1px solid #003333;
}
#top_navlist h2{
display: none;
}
#navlist{
padding: 10px 10px;
margin-left: 0;
border-bottom: 1px solid #778;
font-weight: bold;
}
#navlist li{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a{
padding: 11px 30px;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
/*Nav etiketinde kullanılacak linklerin tanımlamalarını yapıyoruz.*/
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover{
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li.current_page_item a{
background: white;
border-bottom: 1px solid white;
}
/*TOC Nav*/
.tocNav{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
.tocNav li{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
.tocNav li a { text-decoration: none; }
/*////////// LAZIM OLABİLECEKLER //////////*/
/*////////// FORMLAR//////////*/
/*////////// FOOTER KISMI //////////*/
/*Footer kısmını 2 ye bölüyoruz. sağ kısımda linkler sol taraftada copright bilgileri olacak*/
#pushbottom{
clear:both;
}
#footer {
border: 1px solid #000033;
height: 85px;
}
#footer h3{
display:none;
}
#footerRight{
margin: 0 10px 0 0;
width:430px;
float:right;
text-align: center;
border: 1px solid #552200;
}
#footerLeft{
margin: 0 0 0 10px;
width: 430px;
float:left;
text-align:center;
border: 1px solid #332200;
}
/*Renklendirme Kodları: Bu kodlar stil 3 de genel yazı renklendirme kısmına alınacaktır.*/
.thisMonth{
margin-top: 0;
height: 56px;
line-height: 85px;
background-color: #9E745E;
font-size: 42px;
font-weight: normal;
color: #ffffff;
}
.features{
margin-top: 0;
height: 46px;
line-height: 70px;
background-color: #9E9C76;
font-size: 36px;
font-weight: normal;
color: #ffffff;
}
.columns{
margin-top: 0;
height: 46px;
line-height: 70px;
background-color: #253A59;
font-size: 36px;
font-weight: normal;
color: #ffffff;
}
.pastIssues{
margin-top: 0;
font-family: Georgia, Times, serif;
font-size: 31px;
font-weight: normal;
color: #305669;
}
/*////////// RESİM KISMI//////////*/
Sayfamız şimdi kendi bölümlerine ayrılmış oldu. Şimdi ise biraz renklendirme yapalım. Kullanacağımız renk paleti aşağıdaki renklere sahip olacaktır.
light-grey-blue: .#8BA8BA – Arkaplan
med-tan .#9E9C76: - Header kısmı
light-tan .#C5BBA0 – header kısmı 2
dark-blue .#253A59 – header kısmı3
white .#FFFFFF – yazıların arka planı
dark-reddish .#784B2C – linkler
light-reddish .#9E745E – linkin üzerine gelindiğinde
blue-green .#527382 – bazı kısımlar
black .#000000 – yazı
Şimdi stil2.css dosyamıza renk paletimizden seçtiğimiz renklerle oluşturduğumuz kodları ekleyelim.
.thisMonth{
margin-top: 0;
height: 56px;
line-height: 85px;
background-color: #9E745E;
font-size: 42px;
font-weight: normal;
color: #ffffff;
}
.features{
margin-top: 0;
height: 46px;
line-height: 70px;
background-color: #9E9C76;
font-size: 36px;
font-weight: normal;
color: #ffffff;
}
.columns{
margin-top: 0;
height: 46px;
line-height: 70px;
background-color: #253A59;
font-size: 36px;
font-weight: normal;
color: #ffffff;
}
.pastIssues{
margin-top: 0;
font-family: Georgia, Times, serif;
font-size: 31px;
font-weight: normal;
color: #305669;
}
Şimdi sayfamızın görüntüsü şu şekilde olacak.
Bir sonraki yazıda görüşmek üzere
@gNcWebmaster uyarını dikkata alacağım teşekkür ederim. İlerleyen günlerde de css ve xhtml olan bir tasarımı wordpress e çevirmeyi videolu olarak analatacağım