|
Joomla模板CSS解析 Joomla模板CSS解析 【助你更好的了解Joomla模板】
高手可以略過此貼了 ：）
如果自己需要改模板的話，先要了解以下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)站名稱
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)的底部模塊 這就是一個結(jié)構(gòu)化的語義標(biāo)記(semantic markup)的典型例子。它的目的十分單純和明確：讓任何人在瀏覽器端可以閱讀網(wǎng)頁的內(nèi)容，讓任何瀏覽器都沒有障礙地展現(xiàn)網(wǎng)頁的全部內(nèi)容，讓任何網(wǎng)頁閱讀裝置如網(wǎng)絡(luò)蜘蛛都可以準(zhǔn)確地抓取網(wǎng)頁信息。語義標(biāo)記是奠定網(wǎng)站親和度(accessibility)的基石。
有了這樣一個結(jié)構(gòu)化的語義標(biāo)記邏輯框架并不等于大功告成。Joomla!的模板世界豐富多彩，變幻詭譎。這些層出不窮的主題都不是由一個模子刻出來的。世界上也沒有哪個設(shè)計師能把大千世界鑲嵌進(jìn)一個千篇一律的模板里。每誕生一個新主題，第一件要做的事情，就是跑到W3C的官方網(wǎng)站去驗證網(wǎng)頁代碼(xml和css)的合法性。
二、CSS布局
我們打算用CSS來謀劃一個三欄布局的Joomla模板，而且這個三欄布局是可變寬窄的(fluid)。頁面的寬窄布局迄今有兩種主要的模式，一種是固定寬窄(fixed)，還有一種就是可變寬窄。這兩種布局模式都是控制頁面寬度的。
頁面的寬窄一直是困擾設(shè)計師的問題。由于人們使用不同分辨率的瀏覽器，在設(shè)計頁面時不得不考慮分辨率和人們的瀏覽習(xí)慣等因素。大約20%的沖浪者使用800X600分辨率，這個數(shù)字正在下降。76%的人使用1024X768分辨率，這是主流趨勢(數(shù)據(jù)來源：www.)。采用可變寬窄的頁面布局意味著你的網(wǎng)頁既不會在1024分辨率下變得很窄，同時也可以在低分辨率的顯示器上獲得完美展現(xiàn)。
我們用float來給內(nèi)容定位。下面是template_css.css文件的內(nèi)容：
QUOTE:
<?php defined( ‘_VALID_MOS‘ ) or die( ‘Direct Access to this location is not allowed.‘ ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>" <head> <meta http-equiv="Content-Type" c /> <?php if ($my->id) { initEditor(); } ?> <?php mosShowHead(); ?> <script type="text/javascript"> </script> <!--http://www./web/css/fouc.asp--> <link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"> <!-- #wrap {width:80%;} #header {} #sidebar {float:left;width:20%;} #content {float:left;width:60%;} #sidebar-2 {float:left;width:20%;} #footer {clear:both;} --> </style> </head> <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,簡稱CSS)是template_css.css文件，它統(tǒng)領(lǐng)全局，是網(wǎng)頁整體布局的靈魂。CSS將所有的元素視為一個盒子(box)，由內(nèi)容(content)、留白(padding)、外框(border)與邊界(margin)所組成。在此例中，全部內(nèi)容都被裝填到一個叫“盒子”或“元素”的容器中。 Joomla中的CSS圖示： 轉(zhuǎn)載請保留出處，謝謝！此帖轉(zhuǎn)自智聯(lián)網(wǎng)信[http://bbs./]原帖地址：http://bbs./viewthread.php?tid=20616 |
|
|
