Joomla模板解析

上一篇 / 下一篇 2007-04-01 16:35:59 / 个人分类：joomla

一、语义标记
先看一个Joomla模板的index.php的空白body（head部分从略），都包含了哪些信息可供我们分析：

逻辑顺序一目了然：

1. name of the site 网站名称
2. the pathway 模块路径
3. top module 顶部模块
4. left modules 左侧模块
5. main content 主要内容
6. right modules 右侧模块
7. the default footer module 默认的底部模块

这就是一个结构化的语义标记(semantic markup)的典型例子。它的目的十分单纯和明确：让任何人在浏览器端可以阅读网页的内容，让任何浏览器都没有障碍地展现网页的全部内容，让任何网页阅读装置如网络蜘蛛都可以准确地抓取网页信息。语义标记是奠定网站亲和度(accessibility)的基石。

有了这样一个结构化的语义标记逻辑框架并不等于大功告成。Joomla!的模板世界丰富多彩，变幻诡谲。这些层出不穷的主题都不是由一个模子刻出来的。世界上也没有哪个设计师能把大千世界镶嵌进一个千篇一律的模板里。每诞生一个新主题，第一件要做的事情，就是跑到W3C的官方网站去验证网页代码(xml和css)的合法性。

二、CSS布局

我们打算用CSS来谋划一个三栏布局的Joomla模板，而且这个三栏布局是可变宽窄的(fluid)。页面的宽窄布局迄今有两种主要的模式，一种是固定宽窄(fixed)，还有一种就是可变宽窄。这两种布局模式都是控制页面宽度的。

页面的宽窄一直是困扰设计师的问题。由于人们使用不同分辨率的浏览器，在设计页面时不得不考虑分辨率和人们的浏览习惯等因素。大约20%的冲浪者使用800X600分辨率，这个数字正在下降。76%的人使用1024X768分辨率，这是主流趋势(数据来源：www.upsdell.com)。采用可变宽窄的页面布局意味着你的网页既不会在1024分辨率下变得很窄，同时也可以在低分辨率的显示器上获得完美展现。

我们用float来给内容定位。下面是template_css.css文件的内容：

<?phpdefined('_VALID_MOS')ordie('Direct Access to this location is not allowed.');?><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"lang="<?php echo _LANGUAGE; ?>"xml:
lang="<?php echo _LANGUAGE; ?>"<head>
<meta http-equiv="Content-Type"content="text/html; <?php echo _ISO; ?>"/><?phpif($my->id){initEditor();}?><?phpmosShowHead();?><scrīpt type="text/javascrīpt"></scrīpt><!--http://www.bluerobot.com/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"><?phpecho$mosConfig_sitename;?><?phpmospathway()?></div>  <div id="sidebar"><?phpmosLoadModules('left');?> 
</div>  
<div id="content"><?phpmosLoadModules('top');?><?phpmosMainBody();?></div>  
<div id="sidebar-2"><?phpmosLoadModules('right');?> 
</div>  
<div id="footer"><?phpinclude_once($mosConfig_absolute_path.'/includes/footer.php');?> 
</div>  
</div> 
<!--endof wrap-->  
</body> 
</html>

Joomla模板默认的层叠样式表(Cascading Style Sheet,简称CSS)是template_css.css文件，它统领全局，是网页整体布局的灵魂。CSS将所有的元素视为一个盒子(box)，由內容(content)、留白(padding)、外框(border)与边界(margin)所组成。在此例中，全部内容都被装填到一个叫“盒子”或“元素”的容器中。