Nasıl Yapılır??
Kaynak: www.hackerfriend.tr.gg
(Düzenlenmiştir..)
1. Adım: Tasarım Resimlerini oluşturmak
Bir tasarımı oluştururken öncelikle o tasarımı aklınızda bitirmiş olmanız gerekir. Önce aklınızda bir takım şeyler oluşturun, sonra bilgisayarınızın başına oturarak onu hayata geçirin. Tasarımların ilk aşaması resimdir. Öncelikle resimler oluşturalım, sonra bu resimleri sitemize yerleştirmeye başlayalım.Arkaplan resmini hazırlayalım..
_____
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.
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...
_____
2. Adım: Şablonu oluşturmak
c-) Arka planı oluşturduktan sonra bu tasarıma bir başlık ekleyerek devam edelim. Başlık için de bir katman oluşturaralım.
#baslik {
width: 845px;
height: 150px;
background: url(https://img.webme.com/pic/h/hackerfriend/hayalimbaslik.jpg);
border: 3px solid #4699C3;
}
Şablonumuza başlık eklerken koda dikkat ederseniz resimin boyutlarını belirttim. Etrafına kenarlık ekledim. Kenarlık boyutunu 3px, rengini de başlığa uygun tonlardan seçtim. Renk kodlarını buradan bulabilirsiniz.
Bu haliyle sitemizin görünümü buradaki gibi olacak.
TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
<div id="baslik"></div>
TASARIM ALTINDAKİ YAZI
</div>
CSS KODU
Burayı tıklayınız...
_____
d-) Şablonumuza başlığımızı da ekledik. Şimdi sıra sayfalarımızın gözükeceği içerik kısmını oluşturmak. Tasarım konusunda henüz yolun başında olan arkadaşlar kodlara dikkat edin, mantığı kavramaya çalışın.
#ust {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/ustsablon.png);
}
#orta {
width:845px;
background: url(https://img.webme.com/pic/h/hackerfriend/ortasablon.png);
}
#alt {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/altsablon.png);
float: left;
}
Orta kısımda yükseklik değerini vermiyoruz. Çünkü yükseklik değeri sayfların uzunluğuna göre kendisi oluşacak. Alt kısımda da koda float: left ekliyoruz. Çünkü TR.GG'nin orjinal katmanları nedeniyle IE tarayıcılarında kaymalar olabiliyor. float: left koduyla bunun önüne geçiyoruz.
Bu haliyle sitemizin görünümü buradaki gibi olacak.
TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
<div id="baslik"></div>
<div id="ust"></div>
<div id="orta">
TASARIM ALTINDAKİ YAZI
</div>
<div id="alt"></div>
</div>
CSS KODU
Burayı tıklayınız...
_____
e-) Sıra geldi ince ayarlar yapmaya. Eğer metinlerin, resimlerin (yani nesnelerin) katman içinde sağa, sola, üste ve alta uzak kalmasını istiyorsak padding ayarlarını yapmak gerekecek. Katmanların kendi aralarında uzaklıklarını ayarlamak istersek margin ayarlarını yapmak gerekiyor. Bu da katmanın dışa olan uzaklık ayarı demektir. Resmi inceleyin, daha sonra kodlara bakarak anlamaya çalışın.
Margin özellikleri için burayı, padding özellikleri için de burayı inceleyiniz. Şimdi bir önceki sayfada verdiğimiz kodda küçük ince ayarlar yapacağız.
#ust {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/ustsablon.png);
margin: 50px 0 0 0;
}
#orta {
width:795px;
background: url(https://img.webme.com/pic/h/hackerfriend/ortasablon.png);
padding: 0 25px 0 25px;
}
#alt {
width:845px;
height:131px;
background: url(https://img.webme.com/pic/h/hackerfriend/altsablon.png);
float: left;
}
Üst kısmı yukarıdan (yani başlıktan) 50px uzaklaştırdık. Orta kısımda da nesneleri sağdan ve soldan 25px uzaklaştırdık.
Toplamda 845px olan orta kısım genişliğini 50px düşürdük. Çünkü padding olarak sağdan 25px soldan 25px olmak üzere 50px uzaklık verdik. Bu durumda orta kısım genişliği 795px'e düştü.
Eğer bunu formüllersek:
Katman Genişlik Değeri + Toplam Padding Değeri = Resim Genişlik Değeri
795px + 50px = 845px
En çok kullanılan margin ve padding kodlaması 4'lü değerlerin yan yana verilmesidir. Yani şu şekilde:
margin: 5px 20px 15px 10px;
padding: 10px 15px 20px 5px
Sırasıyla üst, sağ, alt , sol uzaklıklardır. (top right bottom left)
margin: top right bottom left;
padding: üst sağ alt sol
Bu haliyle sitemizin görünümü buradaki gibi olacak.
TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim>
<div id="baslik"></div>
<div id="ust"></div>
<div id="orta">
TASARIM ALTINDAKİ YAZI
</div>
<div id="alt"></div>
</div>
CSS KODU
Burayı tıklayınız...
_____
3. Adım: Menü oluşturmak
TR.GG'de bir CSS tasarım yaparken kullanıcıların en çok zorlandığı yerin menü olduğu çoğu kez tarafıma iletildi. CSS menü yapmak için benim sizlere tavsiyem bu hizmeti veren siteleri kullanmak. Oturup sıfırdan kod yazmak yerine, hazır kodları kendinize göre değiştirebilirsiniz. Hazır menüler için aşağıdaki siteleri ziyaret edebilirsiniz.
1. Dynamicdrive
2. Alvit
3. CSS Menu Maker
4. Bilgi Servisim (İlgili linkte ücretsiz olarak programı indirebilirsiniz. Programla basit CSS menüler oluşturulabiliyor.)
Eğer elinizde hazır menünüz varsa bunu sitenize direkt olarak uygulayabilirsiniz. Ben bu örneğimiz için bu sayfadaki menüyü sitemize uygulayacağım.
• Menüdeki resimleri kendi siteme yükledim.
• CSS kodundaki style etiketlerini kaldırarak kendi sitemdeki CSS kodu kısmına yapıştırdım.
• Son olarak menümüz için bir katman oluşturalım. Menüyü bu katman içerisine koyacağız.
#sitemenum{
width:845px;
}
Uyguladığımız menüyü bu katman arasına yerleştirdim.
<div id="sitemenum">
<div class="animatedtabs">
<ul>
<li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İçerik Kısmı</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Menüyü Yapmak</span></a></li>
</ul>
</div>
</div>
<div id="sitemenum">
<div class="animatedtabs">
<ul>
<li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İçerik Kısmı</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Menüyü Yapmak</span></a></li>
</ul>
</div>
</div>
#sitemenum{
width:845px;
position: fixed;
}
Bu haliyle sitemizin görünümü buradaki gibi olacak.
Eğer menünün nasıl sabit durduğunu görmek isterseniz burayı tıklayınız...
***Katmanların renklerine dikkat edin. Bir sonraki sayfada resmi inceleyin***
TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim">
<div id="baslik"></div>
<div id="sitemenum">
<div class="animatedtabs">
<ul>
<li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İçerik Kısmı</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
<li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Menüyü Yapmak</span></a></li>
</ul>
</div>
</div>
<div id="ust"></div>
<div id="orta">
TASARIM ALTINDAKİ YAZI
</div>
<div id="alt"></div>
</div>
CSS KODU
Burayı tıklayınız...
_____
Son Adım: Sitenize makyaj yapmak, ek özellikler eklemek.
Bu adımı anlatmadan önce ne yaptık kısaca bir resim üzerinde özetlemeye çalışacağım. Katmanların renklerine ve bitiş yerlerine dikkat edin!
Sitenize ek özellikler eklemek size kalmış bir durum. Tıpkı tasarımı yapmak gibi bu da tamamen hayal gücünüze ve yeteneğinize bağlı. Ek özellikler için aşağıdaki iki sayfamız sizlere faydalı olacaktır. Sözüm meclisten dışarı, bu sitede gördüğünüz bir çok şeyin cevabı bu sayfalarda zaten mevcut iken bazı arkadaşların e-postalar ve özel mesajlar atmasına anlam veremiyorum. Lütfen biraz okuma ve araştırma alışkanlığı edinin.
• Web Dersleri
• Hazır Kodlar
Şimdilik bu kadar, sevgiler, saygılar.