Joomla模板CSS解析
Joomla模板CSS解析
【助你更好的了解Joomla模板】
高手可以略過(guò)此貼了 ：）
如果自己需要改模板的話，先要了解以下Joomla的模板的特色，于是找了些教程，自學(xué)... ...
QUOTE:
<body>
<!-- 1 --><?php echo $mosConfig_sitename;?>
<!-- 2 --><?php mospathway()?>
<!-- 3 --><?php mosLoadModules(‘top‘);?>
<!-- 4 --><?php mosLoadModules(‘left‘);?>
<!-- 5 --><?php mosMainBody();?>
<!-- 6 --><?php mosLoadModules(‘right‘);?>
<!-- 7 --><?php include_once( $mosConfig_absolute_path .‘/includes/footer.php‘ );?>
</body>
</html>
邏輯順序一目了然：
1. name of the site 網(wǎng)站名稱(chēng)
2. the pathway 模塊路徑
3. top module 頂部模塊
4. left modules 左側(cè)模塊
5. main content 主要內(nèi)容
6. right modules 右側(cè)模塊
7. the default footer module 默認(rèn)的底部模塊
這就是一個(gè)結(jié)構(gòu)化的語(yǔ)義標(biāo)記(semantic markup)的典型例子。它的目的十分單純和明確：讓任何人在瀏覽器端可以閱讀網(wǎng)頁(yè)的內(nèi)容，讓任何瀏覽器都沒(méi)有障礙地展現(xiàn)網(wǎng)頁(yè)的全部?jī)?nèi)容，讓任何網(wǎng)頁(yè)閱讀裝置如網(wǎng)絡(luò)蜘蛛都可以準(zhǔn)確地抓取網(wǎng)頁(yè)信息。語(yǔ)義標(biāo)記是奠定網(wǎng)站親和度(accessibility)的基石。
有了這樣一個(gè)結(jié)構(gòu)化的語(yǔ)義標(biāo)記邏輯框架并不等于大功告成。Joomla!的模板世界豐富多彩，變幻詭譎。這些層出不窮的主題都不是由一個(gè)模子刻出來(lái)的。世界上也沒(méi)有哪個(gè)設(shè)計(jì)師能把大千世界鑲嵌進(jìn)一個(gè)千篇一律的模板里。每誕生一個(gè)新主題，第一件要做的事情，就是跑到W3C的官方網(wǎng)站去驗(yàn)證網(wǎng)頁(yè)代碼(xml和css)的合法性。
二、CSS布局
我們打算用CSS來(lái)謀劃一個(gè)三欄布局的Joomla模板，而且這個(gè)三欄布局是可變寬窄的(fluid)。頁(yè)面的寬窄布局迄今有兩種主要的模式，一種是固定寬窄(fixed)，還有一種就是可變寬窄。這兩種布局模式都是控制頁(yè)面寬度的。
頁(yè)面的寬窄一直是困擾設(shè)計(jì)師的問(wèn)題。由于人們使用不同分辨率的瀏覽器，在設(shè)計(jì)頁(yè)面時(shí)不得不考慮分辨率和人們的瀏覽習(xí)慣等因素。大約20%的沖浪者使用800X600分辨率，這個(gè)數(shù)字正在下降。76%的人使用1024X768分辨率，這是主流趨勢(shì)(數(shù)據(jù)來(lái)源：
www.upsdell.com)。采用可變寬窄的頁(yè)面布局意味著你的網(wǎng)頁(yè)既不會(huì)在1024分辨率下變得很窄，同時(shí)也可以在低分辨率的顯示器上獲得完美展現(xiàn)。
我們用float來(lái)給內(nèi)容定位。下面是template_css.css文件的內(nèi)容：
<body>
<div id="wrap">
<div id="header">
<?php echo $mosConfig_sitename; ?> <?php mospathway() ?>
</div>
<div id="sidebar">
<?php mosLoadModules(‘left‘);?>
</div>
<div id="content">
<?php mosLoadModules(‘top‘);?> <?php mosMainBody(); ?>
</div>
<div id="sidebar-2">
<?php mosLoadModules(‘right‘);?>
</div>
<div id="footer">
<?php include_once( $mosConfig_absolute_path .‘/includes/footer.php‘);?>
</div>
</div> <!--end of wrap-->
</body>
</html>
Joomla模板默認(rèn)的層疊樣式表(Cascading Style Sheet,簡(jiǎn)稱(chēng)CSS)是template_css.css文件，它統(tǒng)領(lǐng)全局，是網(wǎng)頁(yè)整體布局的靈魂。CSS將所有的元素視為一個(gè)盒子(box)，由內(nèi)容(content)、留白(padding)、外框(border)與邊界(margin)所組成。在此例中，全部?jī)?nèi)容都被裝填到一個(gè)叫“盒子”或“元素”的容器中。
