BTA Serisi nin konularından olan “HTML Olarak Temanın Hazırlanması” ve bu konuyla ilgili olarak, üst kısım hazırlığını inceliyoruz. Bu dersi inceleyerek, tasarımdaki üst kısmın nasıl yapılacağını öğrenebilirsiniz.
Faydalı bir ders olacağından şüpheniz olmasın 
HTML Dosyasını Oluşturalım
Öncelikle ilk yapmamız gereken bir HTML dosyası oluşturmak.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BTA Tema Çalışması</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="wrapper"><!-- sayfa ortalaması yapacak --> <div id="header"> <div class="top"><img src="logo.jpg" class="logo" /> <h1><a href="#">Award Winning Hosts</a></h1> Customer Rated & Reviewed Web Hosts</div> <div class="menu"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Sayfa 1</a></li> <li><a href="#">Sayfa 2</a></li> <li><a href="#">Sayfa 3</a></li> </ul> </div> </div> <!-- header bitti --></div> </body> </html>
Yukarıda yaptıklarımızı açıklayalım:
<link rel="stylesheet" type="text/css" href="style.css" />
kodu ile daha sonra hazırlayacağımız stil dosyasını saymıza entegre ettik.
<div id="wrapper">
kodu ile önceki konuda bahsettiğim gibi, bütün her şeyi kapsayacak olan genel bir katman oluşturduk. Bu katman diğer nesneleri sayfaya ortalayacak ve arkaplanı beyaz renkte olacak.
<div id="header">
kodu ile üst kısmın başlangıcını yaptık.
<img src="logo.jpg" class="logo" />
kodu ile logomuzu üst kısma ekledik ve css sınıfı olarak logo ismini verdik.
<h1><a href="#">Award Winning Hosts</a></h1> Customer Rated & Reviewed Web Hosts
kodu ile sayfamızın ismini ve açıklamasını yazdık. Diğer siteye benzemesi açısından o sitenin açıklamalarını aldım
<div class="menu"> <ul> <li><a href="#">Anasayfa</a></li> <li><a href="#">Sayfa 1</a></li> <li><a href="#">Sayfa 2</a></li> <li><a href="#">Sayfa 3</a></li> </ul> </div>
kodu ile sayfaları listeledik.
Daha sonra oluşturduğumuz katmanları kapattık. (</div>)
Şu ana kadar yaptıklarınızı kaydettiğinizde şöyle bir ekran ile karşılacaksınız:
Şu ana kadar yaptıklarımız
Benzeri bir sayfa ile karşılaşmışsanız, diğer derse geçebilirsiniz.
“BTA: Tema Üst Kısmının Hazırlanması” için 12 Yorum var
Bence bu derslerin devam ettirmelisiniz gerçekten çok güzel anlatıyorsunuz.
Merhaba, bir wordpress teması çıkardım ve temanın tüm her yerini orijinal wordpress default olarak gelen tema kodları ile yer değiştirip hallettim ancak sağ tarafta ki sidebar için sorunlar yaşıyorum. Nasıl yapmam gerektiğini bir türlü bulamadım.
Benim yapmak istediğim sidebarda ki UL şeklinde ki noktalamalardan kurtulmak. Bunun için CSS de kod yazıp halletmeye çalışıyorum ancak ID olarak CSS’ yi sınıflandırıyorum bundan dolayı mı olmuyor acaba?
Birde sağ sütuna herhangi bir Widget eklediğimde ikinci eklenen ayrı şekilde gelmeyip yine eklenen widget içine geliyor. Yani sizin yan tarafta bulunan widgetler gibi ayrı ayrı olmasını istiyorum ancak bir türlü yapamadım.
Bizimle paylaşabilir misin?
Merhaba,
Dreamweaver’da bir site ve bir blog olarak proje odevim var.Bende blog’umda c# programlama dilini anlaticam fakat program orneklerim icin http://www.wpuzmani.com/bta-tema-ust-kisminin-hazirlanmasi/ sitede olduğu gibi bir çerçeve ve numaralandırılmış olmasını istiyorum. Wordpress’den blog açtım. Bu konuda detaylı yardımcı olursanız çok ama çok sevinirim.
Şimdiden teşekkür ederim.
İyi Çalışmalar …
Evet azda olsa Html ve Css bilmek lazım.
şimdi ne alaka dicen ama ben yine derdimi söyleyeyim belki derman bulurum
beni schizo_ yolladı git derdinin dermanı orda dedi 
html kodlarıyla oynayarak o kısmın rengini değiştirmem mümkün müdür acep?
hocam ben şimdi derdimi kısaca anlatayım: ben bir blogger kullanıcısıyım. bir blogger teması var (http://btemplates.com/2009/03/19/marco-2/) bu tema hoşuma gitti ancak kayıtların yollandığı beyaz kısım sinirlerimi bozdu
peki bir bilgim yok ama
şöyle bir kod war ordan o “#FFFFFF” (beyaz renk kodu) FFFFFF gördüğün yere “black veya $000000″ yazıp denesene kardeşim
Derslerin bittiği gün kendi temamla karşınızda olucam. Semih bu başlığı kesinlikle sonuna kadar götürmelisin
İyi günler.
hocam güzel anlatıyorsunuz
fakat takıldığım noktalar var bu 1.ders vs. ama
bu stil dosyasında content pixelleri vs. yazıyor baya karışık diğer dersleri ne zmn yayımlarsınız $imdiden teşekkürler!…
Bunu çözmek için en azından biraz html ve css bilginiz olması iyi olur
İnşallah diyorum başka da bişey demiyorum… Memlekette olmam işleri biraz zorlaştırdı…
Hadi schizo_ nun hatrı olsun
şu satırı bul:
[css]
.post {width: 660px;
margin:0 0 18px 0px;
background: #fff url(http://3.bp.blogspot.com/_XByc9SCisZM/ScH0jcJaGkI/AAAAAAAABio/-j3bX9hW1O8/s1600/2wnmcrt.jpg.png) repeat-x bottom left;
padding-bottom: 4px;border:1px solid #111;
}
[/css]
değiştir:
[css]
.post {width: 660px;
margin:0 0 18px 0px;
background: #000;
padding-bottom: 4px;border:1px solid #111;
}
[/css]
Usta adamın hali başka oluyor ya
deneme yanılma yoluyla çözerim diye akşamdan beri bütün colorları değiştirdim ya 
işi ustasına bıraksana ne uğraşıyon 
tekrardan teşekkürler