JTY/B4/D5 - Orta Bölüm XHTML Kodu Yazımı

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

Orta bölümü kapsayıcı 2 adet div tanımlaması yapıyoruz. Biri id="orta", diğeri ise id="orta-bolge" şeklinde. İlk iki tanımlama yukarıda da yaptığımız gibi siteyi ortada çıkartmak için yapıldı. Css tanımlamasını yazarken detaylı olarak anlatacağız.

Burada ayrıca dikkat ettiyseniz id ve class olarak 2 farklı tanımlama yapılmış. id yada class olarak tanımlamanızda css yazımındaki karakter farkı haricinde bir fark olmamakla beraber id tanımları bir sitede sadece bir bölüm için kullanırken, class tanımlaması için çok kez kullanılabilir. Buradaki tüm tanımları class ile de yapabilirdik, fakat kullanımda farklılık olmadığı belirtmek için özel olarak kullandık.

<div id="orta">
<div id="orta-bolge">
Bölümlendirmemizi başlattıktan sonra 2 sütunlu bir tema yaptığımız için öncelikle orta-sol ve orta-sag şeklinde birer class açıyoruz. 
<div class="orta-sol">
 
 </div>
 
 
 <div class="orta-sag"> 
 
 </div>
Bu iki class'ı yazdıktan sonra css dosyamız içerisinde yapacağımız tanımlama ile birini sola, diğerini sağa yaslayacağız. Şimdi bu iki bölüm içerisine neler yazacağımızı görelim.

Burada bir modül pozisyonunun kodlarını görüyoruz. Php ile başlayan <?php if($this->countModules('reklam1')) : ?> bu kodda reklam1 pozisyonu yayında değilse ilk yazdığımız kod ile <?php endif; ?> kodu arasındakileri gösterme demiş oluyoruz. Eğer reklam1 pozisyonunda bir modül varsa gösterilecek.
 <?php if($this->countModules('reklam1')) : ?>
<div class="reklam">
 <jdoc:include type="modules" name="reklam1" style="xhtml" />
 </div>
 <?php endif; ?>
Modül pozisyonu ardından sitemizin ana içeriklerinin görüleceği ve dersin başında bahsettiğimiz iki kodu class="icerik" tanımlasıyla yazıyoruz. 
 <div class="icerik">
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 </div>
Yine bir modül pozisyonu ekliyoruz. Buradaki pozisyon yukarıda yazdığımız ile aynı. Sadece php kodu içerisindeki tanım ile name bölümündeki tanım aynı olmalı.
<?php if($this->countModules('reklam2')) : ?>
<div class="reklam">
 <jdoc:include type="modules" name="reklam2" style="xhtml" />
 </div>
 <?php endif; ?>
Burada tanımladığımız 3 farklı bölümü yukarıda tanımladığımız 
<div class="orta-sol"> </div>
kodları arasına yazıyoruz ve diğer sütuna geçiyoruz.

Burada tanımlamasını yapacağımız kodları yukarıda bahsettiğim 

<div class="orta-sag"> </div>
kodları arasına yazacağız. Yukarıda 2 sefer kullandığımız standart modül pozisyonu ekleme kodlarını burada da kullanıyoruz. 
<div class="orta-sag-modul"> 
<?php if($this->countModules('sag')) : ?>
 <jdoc:include type="modules" name="sag" style="xhtml" />
 <?php endif; ?>
 </div> 
 <div style="clear: both;"></div>
Sütun tanımlamalarımız da bittiğine göre yukarıda açtığımız 2 adet div'i kapatmayı unutmuyoruz.
</div>
</div>
Yukarıda yazdığımız kodların tamamına aşağıdan ulaşabilirsiniz.  
<div id="orta">
 <div id="orta-bolge">
 <div class="orta-sol">
 
 <?php if($this->countModules('reklam2')) : ?>
 <div class="reklam">
 <jdoc:include type="modules" name="reklam1" style="xhtml" />
 </div>
 <?php endif; ?>
 
 <div class="icerik">
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 </div>
 
 <?php if($this->countModules('reklam2')) : ?>
 <div class="reklam">
 <jdoc:include type="modules" name="reklam2" style="xhtml" />
 </div>
 <?php endif; ?>
 </div>
 
 <div class="orta-sag">
 <div class="orta-sag-modul"> 
 <?php if($this->countModules('sag')) : ?>
 <jdoc:include type="modules" name="sag" style="xhtml" />
 <?php endif; ?>
 </div>
 </div> 
 <div style="clear: both;"></div>
 </div>
 </div>

Şimdi burada yazdığımız XHTML kodlarının CSS tanımlamalarını yapmak için diğer bölüme geçelim. >>

 

Joomla! Öğreniyorum

Güncel Joomla! Sürümleri

Joomla! İle İlgili Herşey

Joomla! Eklentileri

Site Bilgileri

google+

rss