JTY/B4/D3 - Üst Kısım XHTML Kodu Yazımı

Bu habere oy verin
(1 oy verilmiş)
Detaylar
Kategori: Joomla CMS Tema - CSS
Yayın tarihi: Perşembe, 17 Mayıs 2012 15:09
Yazar: enxdesign
Gösterim: 15397

Önceki dersimizde template.css dosyasını tanımış ve tüm tanımlamalarımızı oraya yapacağımızdan bahsetmiştik. Ardından bir başka derste hazırladığımız temanın iskelet halini fireworks programını kullanarak istediğimiz site şekline sokmuştuk. Şimdi adım adım sitemizi hazırlayalım.

Öncelikle <body> tagının hemen altına genel bir çerçeve oluşturmakla işe başlıyoruz.  

<div id="anagovde">

Ardından üstteki menümüz için bir çerçeve oluşturuyoruz.
Burada üstmenü için 2 tane div sınıfı açtık ve joomlanın standart modül pozisyon kodunu yazıp, divleri kapattık. Ardından clear:both komutumuzu koymayı unutmuyoruz.
<div class="ust-bg-orta">
<div class="ustmenu">
<jdoc:include type="modules" name="ustmenu" style="xhtml" /> 
</div>
</div>
<div style="clear: both;"></div>
En üstteki menüden sonra logo içinde bir div tanımlaması yapıyoruz. Yine bunun için 2 tane div sınıfı açarak a tagı içerisinde img kodumuzu yazıyoruz.
<a href="/index.php" alt="Site adı"></a>
komutu ile logomuzu tıklanabilir yapıyoruz. 
<img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>"/>
komutu ile resmin gösterileceği yolu ayarlıyoruz. Burada karşımıza birkaç php kodu daha çıkıyor

Buradaki <?php echo $this->baseurl ?> kodu ile sitemizin adresini gösterttiriyoruz. Böylelikle farklı sitelere temayı yüklediğimizde hangi site ile çalışıyorsak o sitenin ismini otomatik almasını sağlıyoruz. 

Ardından resmin yer aldığı klasör yolunu yazmaya başlıyoruz. Burada templates/ 'den sonra <?php echo $this->template ?> şeklinde bir kod yazıyoruz. Bu kodda aynı baseurl kodu gibi temamızın ismini otomatik olarak göstermeye yarıyor. Yani temanızın adını değiştirdiğiniz de burada gösterilen kod kendiliğinden temanın yeni adını algılıyor. Tema ismini değiştirdiğinizde, kodları açıp tema isminin geçtiği yerleri tekrar düzeltmenize gerek bırakmıyor.

<img src="/<?php echo $this->baseurl ?>/templates/joomlaekip/images/logo.png" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>"/> 
Buradaki alt açıklamasına ise site logo resminin üzerine gelindiğinde görünecek yazıda sitemizin adının görünmesini istediğimiz için yukarıda belirttiğimiz şekilde <?php echo htmlspecialchars($app->getCfg('sitename')); ?> kodunu yazıyoruz. Bu kod yönetici panelinden site ismine ne yazdıysak onun gösterilmesini sağlıyor.

Yazdığımız kodları toplu şekilde görelim.

 <div class="logo-dis">
<div class="logo">
<a href="/index.php" >
<img src="/<?php echo $this->baseurl ?>/templates/joomlaekip/images/logo.png" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>"/>
</a>
</div>
</div>
<div style="clear: both;"></div>
En üstteki menü ve logo alanının ardından sitemizin anamenüsünü hazırlamaya geçiyoruz.

Yine üstmenü için 2 div sınıfı açıyoruz ve joomlanın standart modül pozisyon kodunu yazıp, divleri kapatıyoruz. Gördüğünüz gibi enüstmenüde yaptığımız işlemin aynısını yaptık. Sadece div sınıfları ve modül pozisyon ismi farklı.

Yazdığımız kodları toplu şekilde görelim.

<div class="anamenu-orta">
<div class="anamenu">
<jdoc:include type="modules" name="anamenu" style="xhtml" />
</div>
</div>
<div style="clear: both;"></div>
Bu adımları tamamladıktan sonra kodlamaya başlarken açtığımız genel çerçevenin kapatmasını ve html tagının kapatmasını unutmuyoruz. Daha sonraki adımları yazarken de bu kapatma taglarına dikkat edeceğiz. Bu 2 kapatma tagı sürekli olarak sayfanın en altında yer alacak.
</div>
</body>
</html>

Şimdi sayfamızın önizlemesini yapmadan önce css tanımlamalarımızı yapmak için template.css dosyamızı açalım. >>

 

Joomla! Öğreniyorum

Güncel Joomla! Sürümleri

Joomla! İle İlgili Herşey

Joomla! Eklentileri

Site Bilgileri

google+

rss