İleti�Ÿim

BTA: Tema Üst Kısmının Hazırlanması

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 icon smile BTA: Tema Üst Kısmının Hazırlanması

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 icon smile BTA: Tema Üst Kısmının Hazırlanması

<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:

sitegorunus01 BTA: Tema Üst Kısmının Hazırlanması

Şu ana kadar yaptıklarımız

Benzeri bir sayfa ile karşılaşmışsanız, diğer derse geçebilirsiniz. icon smile BTA: Tema Üst Kısmının Hazırlanması



Etiketler: , ,

Benzer Yazilar


“BTA: Tema Üst Kısmının Hazırlanması” için 12 Yorum var

  1. Bence bu derslerin devam ettirmelisiniz gerçekten çok güzel anlatıyorsunuz.

  2. Serdar diyor ki:

    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?

  3. Mine Gür diyor ki:

    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 …

  4. Erkan diyor ki:

    Evet azda olsa Html ve Css bilmek lazım.

  5. Mehmet diyor ki:

    şimdi ne alaka dicen ama ben yine derdimi söyleyeyim belki derman bulurum :) beni schizo_ yolladı git derdinin dermanı orda dedi :)
    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 :) html kodlarıyla oynayarak o kısmın rengini değiştirmem mümkün müdür acep?

    • FeaRLeSs48 diyor ki:

      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 :)

  6. Tolgahan Demirayak diyor ki:

    Derslerin bittiği gün kendi temamla karşınızda olucam. Semih bu başlığı kesinlikle sonuna kadar götürmelisin :)

    İyi günler.

  7. oguzhan yılmaz diyor ki:

    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!…

  8. Semih diyor ki:

    Bunu çözmek için en azından biraz html ve css bilginiz olması iyi olur :)

  9. Semih diyor ki:

    İnşallah diyorum başka da bişey demiyorum… Memlekette olmam işleri biraz zorlaştırdı…

  10. Semih diyor ki:

    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]

  11. Mehmet diyor ki:

    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

Kendimi Şanslı Hissediyorum

Şansını denemek istiyorsan, yukarıya tıkla :)

WordPress Hosting

Duyuru

WP Uzmanı yeni yazarlarını arıyor. WPU üzerinden eklenti ve tema satışı yapabilirsiniz! Tek yapmanız gereken iletişime geçmek.

İletişime geç!


Selen Korkutan

website statistics