Site Rehberi

TG Sitede sadece CSS ve kısmen Javascript dersleri bulunuyor.Javascript sadece ek özelliklerde kullandığım için %90 oranında CSS dersleri bulunuyor.Zaten tr.gg içinde en sade ve en açık yönlü kod dili CSS olduğu için diğer kod dilleriyle uğraşmanızı tavsiye etmem.Site hakkıda açıklama için.

» Burayı Tıklayın

CSS Tasarımlar

Boş Banner

icon Şimdilik bu bannere eklenecek bir oluşum düşünülmüyor sizdende istekler,düşünceler alabilirim.Bu banner hakkında fikir verin.Ve sizinde sitede imzanız olsun.

» İletişim için

TG The Codebreaker

5ktmn

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>İ&ccedil;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&uuml;y&uuml; Yapmak</span></a></li>
</ul>
</div>
</div>
 
Eğer şu an sitemizde olduğu gibi menüyü sayfalar yukarı aşağı kaydıkça sabit olarak görmek istiyorsak menü katmanına position: fixed eklemek yeterli. 

#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>İ&ccedil;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&uuml;y&uuml; 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... 

Dersin Devamı İçin Tıklayın...


Site Hiti 6264 ziyaretçi (10737 klik)
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=