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 11 Yorum var
Bence bu derslerin devam ettirmelisiniz gerçekten çok güzel anlatıyorsunuz.
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