JTY/B4/D7 - Alt 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:31
Yazar: enxdesign
Gösterim: 11215

Sitemizin üst ve orta bölümü bitti. Şimdi ise alt bölümünü hazırlamaya başlayalım. Bunun yine her bölümde yaptığım gibi 2 adet class tanımlaması yapıyorum.

 <div class="footer-alt"> 
<div class="footer-alt-ic"> 
 
 </div>
 </div>
Bu hazırladığım classlar içerisine aşağıdaki kodları yerleştireceğim. Şablona baktığımızda footer bölümünün 2 parçadan oluştuğunu göreceksiniz. Orta bölümde yaptığım gibi burada da footer-sol ve footer-sag şeklinde iki class tanımlaması yapıyorum.

.footer-sol class tanımlaması içerisine .alt-sol şeklinde bir modül pozisyonu oluşturuyorum. Burada copyright tarzında bir modül yayınlayacağım.

 <div class="footer-sol">
<jdoc:include type="modules" name="alt-sol" style="xhtml" />
 </div>
.footer-sag class tanımlaması içerisine de yukarıda yaptığım gibi .alt-sag şeklinde bir modül pozisyonu oluşturdum. Burada da artık bir modül yayınlayabilirim. 
<div class="footer-sag">
 as<jdoc:include type="modules" name="alt-sag" style="xhtml" />
 </div>
Sitemizin index.php'sinde kod yazımı aşağıdaki 2 kodu da yazdıktan sonra tamamlanıyor. Birincisi ilk olarak yazdığımız anagovde sınıfının kapatılması, diğeri de html bölümünün kapatılması. 
</div>
</html>
index.php dosyamızı kaydediyoruz ve css tanımlamalarını yapmak üzere template.css dosyasını açıyoruz.

Kontrol amaçlı olarak baştan beri yazdığımız tüm kodları tekrar yazıyorum. Kendi yazdığınız kodlarla karşılaştırabilirsiniz. 

<?php
/**
 * @package Joomla.Site
 * @copyright Copyright (C) 2012 JoomlaEkip tarafından joomla.gen.tr için hazırlanmıştır. Kullanımı ve dağıtımı serbesttir.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
JHtml::_('behavior.framework', true);
$app = JFactory::getApplication();
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
 <head>
 <jdoc:include type="head" />
 <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
 </head>
<body>
 
<div id="anagovde">
 <div class="ust-bg-orta">
 <div class="ustmenu">
 <jdoc:include type="modules" name="ustmenu" style="xhtml" /> 
 </div>
 </div>
 <div style="clear: both;"></div>
<div class="logo-dis">
 <div class="logo">
 <a href="/index.php" >
 <img src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>"/>
 </a>
 </div>
 </div>
 <div style="clear: both;"></div>
<div class="anamenu-orta">
 <div class="anamenu-ic">
 <div class="anamenu">
 <jdoc:include type="modules" name="anamenu" style="xhtml" />
 </div>
 </div>
 </div>
 <div style="clear: both;"></div>
 
 <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>
<div class="footer-alt"> 
 <div class="footer-alt-ic"> 
 <div class="footer-sol">
 <jdoc:include type="modules" name="alt-sol" style="xhtml" />
 </div> 
 
 <div class="footer-sag">
 <jdoc:include type="modules" name="alt-sag" style="xhtml" />
 </div>
 </div>
 </div>
 
</div>
</body>
</html>
 

Alt bölüm için XHTML kodlamasını tamamladık, şimdi CSS sayfasına geçelim. >>

 

Joomla! Öğreniyorum

Güncel Joomla! Sürümleri

Joomla! İle İlgili Herşey

Joomla! Eklentileri

Site Bilgileri

google+

rss