本文介绍了如何使用div+css的方式开发Joomla模板，遵循W3C标准，提高搜索引擎友好性。内容涵盖模板概念、本地编辑、W3C标准、模板构成、CSS布局、菜单设计、列隐藏技巧等，旨在创建符合用户体验、可访问性和SEO原则的网站。
在这篇文章中，我们将制作一个具体的JOOMLA模板，并且我们摒弃传统的table的方式，而采用div+css的方式建立Joomla!模板，这将更加符合w3c组织的标准，同时有利于搜索引擎收录。
在这篇文章中，我们主要涉及到以下这些方面：
什么是JOOMLA模板?
本地编辑模板的过程.
W3C标准和无表单设计.
JOOMLA模板的组成.
使用cascading style sheets (CSS)布局.
怎样布置你的组件和一些技巧.
Menus菜单.使用CSS建立一些简单的类似于JS编出来的菜单.
怎样控制Columns和隐藏一些没有内容的Columns.
什么是JOOMLA的模板? 通过Joomla!模板你能做什么？
JOOMLA模板是整个网站的外观基础设计,JOOMLA模板负责传递JOOMLA核心数据的展示. 下面我们来看一个例子:
这张图 B 标签展示一个了全新JOOMLA安装后的界面.但当你插入具体内容的时候模板被赋予了一种样式,这个样式继承了JOOMLA模板中定义的链接样式,菜单, 导航,文本尺寸,颜色等内容.使用类似JOOMLA这样的CMS(内容管理器)的模板能够实现完全的与内容分离。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
老外的原文实在太冗长了，其实原文的第三章就是说的工具选择，dreamweaver+photoshop，等等，我估计咱们就没老外那么钱多，还是哪里能省点就省点吧。
第四章主要是说模板开发的原则：最主要就是采用css+div ，地球人都知道啦，现在哪个大的站点不是css+div的，好处么做个人站点的基本都知道。另外就是一些xhtml的标签要语义相关等的要求，这里不赘述了。
我们来看看这张图，说的很清晰，什么是好的网站？一个好的网站离不开三个要素，一是用户体验，二是可访问性,三是SEO，三者能有效结合才是一个好的站点。所以在Joomla! 模板开发上要遵守的基本原则其实就是这三个原则，这也是w3c的标准。
下一篇文章，我们来重点说说Joomla! 1.5模板的重点要素和基本开发过程。
我们来看看这张图，说的很清晰，什么是好的网站？一个好的网站离不开三个要素，一是用户体验，二是可访问性,三是SEO，三者能有效结合才是一个好的站点。所以在Joomla! 模板开发上要遵守的基本原则其实就是这三个原则，这也是w3c的标准。
下一篇文章，我们来重点说说Joomla! 1.5模板的重点要素和基本开发过程。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
模板的构成
每个模板都包含一系列的文件和图片，放在Joomla! 系统的 /templates/目录下，如下所示我们安装了两个模板，一是element,一是voodoo，要注意的是模板的名称与目录的名称一致。
/templates/element
/templates/voodo
在一个模板目录中，必须有关键文件：
/element/templateDetails.xml
/element/index.php
这两个文件的名称和位置要完全遵守规则，以便Joomla!系统调用。
templateDetails.xml
这是XML格式文件，主要用来通知Joomla!系统加载这个模板的时候有那些文件，同时也描述了作者、版权信息等等;还有模板使用的图片文件的清单. 同时这个文件也是安装文件.
index.php
这是最重要的文件.它通知JOOMLA系统如何布局组件和模块.它是一种PHP与(X)HTML的"混合体".大多数模板还使用其他的一些文件，通常以如下方式命名和放置：
/element/template_thumbnail.png
/element/css/template_css.css
/element/images/logo.png
接下来，让我们注意看看各个文件：
/element/template_thumbnail.png
当前模板的浏览器截图(通常使用140*90像素尺寸).安装模板完毕以后,这张图片会以"缩略图"的形式在后台模板管理器中展示.
/element/css/template_css.css
模板的CSS文件
/element/images/logo.png
通常模板开发人员会将土坯昂都放在images目录下，这里我们只有一个文件logo.png。
templateDetails.xml格式
templateDetails.xml 必须包括模板使用的所有文件. 它也包括了作者和版权信息等内容. 在后台的模板管理器这些信息将会被展示,下面是一个XML文件的例子:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<version>1.0</version>
<creationDate>December 06</creationDate>
<author>Barrie North</author>
<authorEmail>
type="text/javascript" language="JavaScript">
/n compassdesigns@gmail.com type="text/javascript" language="JavaScript">
</authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<copyright>GPL</copyright>
<description><![CDATA[three column template]]></description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somefile.js</filename>
<filename>images/threecol-1.jpg</filename>
<filename>images/threecol-2.jpg</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<params>
<param name="showComponent" type="radio" default="1" label="Show Component" description="Show/Hide the component output">
<option value="0">No</option>
<option value="1">Yes</option>
</param>
</params>
</install>
让我们来解释这些行的意义:
<install version="1.5" type="template">
XML文档是后台installer的指示， 参数 type="template" 告诉安装程序安装的是一个模板。
<name>TemplateTutorial15</name>
模板的名称，因为名称用来创建目录，所以不能有不符合目录要求的字符。
<creationDate>December 06</creationDate>
模板建立的日期.
<author>Barrie North</author>
模板开发人员
<copyright>GPL</copyright>
版权信息
<authorEmail> type="text/javascript" language="JavaScript"> /n compassdesigns@gmail.com type="text/javascript" language="JavaScript"> </authorEmail>
开发人员的邮件地址
<authorUrl>www.compassdesigns.net</authorUrl>
作者站点
<version>1.0</version>
版本信息
<files>
这部分声明模板包括的PHP文件和图片文件. 每个文件被列出在<filename>与</filename>之间。
index.php
index.php是(X)HTML和PHP的混合体，它决定了网站的外观呈现。
我们首先来看页面头部的DOCTYPE定义，DOCTYPE决定了浏览器如何页面，特别是如何解释CSS。
<!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 " xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
具体的DOCTYPE选择这里不翻译了，请看docs.joomla.org上的：
http://docs.joomla.org/Recommended_DocTypes
http://docs.joomla.org/References_about_DocTypes
<?php echo $this->language; ?>
读取我们设置的语言环境。
<jdoc:include type="head" />
这句话引入了页面的header部分。header部分通常代码如下：
<base href="/http://www.maycode.com/ " />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Joomla! 1.5 template tutorial </title>
<link href="/index.php?format=feed&type=rss" _fcksavedurl=""/index.php?format=feed&type=rss"" mce_href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" mce_href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/templates/ja_purity/favicon.ico" mce_href="/templates/ja_purity/favicon.ico" rel="shortcut icon" type="image/x-icon" />
这里包含了几个meta标签。
<?php echo $this->template;?>/css/template_css.css 这句话引入了模板CSS文件。
一个空白JOOMLA模板
<body>
<?php echo $mainframe->getCfg(’sitename’);?>
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
</body>
</html>
尽管这个模板完成了，可是看起来并不是令人激动。这个模板定义了如下部分：
站点名称
顶部区域
左边区域
正文部分（组件）
右部区域
现在模板看来如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
现在我们创建三栏式的JOOMLA模板，而且这个三栏布局弹性的。页面宽度一直是一个问题,大约17%的浏览者使用800*600的分辨率. 79%的人使用1024*768以上或者更高的分辨率 ，采用弹性布局可以避免页面在1024分辨率下显得过窄，同时在更小的分辨率先也能正常浏览。
通常,设计者喜欢用table来进行布局,表格可以方便的使用"百分比"模式进行栏宽度设置,但是这种方法有下列弊端:
与CSS布局相比table布局有很多"额外代码".
搜索引擎也不易接受.
代码通常是CSS布局的双倍尺寸
还有图像占位 "spacer gifs"在使用table时也是问题.
采用table布局不容易维护。
即使一些大的网站也存在tables布局的问题，比如disney.co.uk website.
现在我们来开始CSS布局吧，如果你是CSS的初学者你最好看下 "beginners guide to CSS". 这里推荐:
Kevin Hale’s - An Overview of Current CSS Layout Techniques
htmldog’s CSS Beginner’s Guide
Mulder’s Stylesheets Tutorial
yourhtmlsource.com
来看看template_css.css,基本上全部的CSS代码都集中在这个文件中，而所有的内容都防止在#wrap的div内。大约占据视觉宽度的80%。我们要实现的效果如下图：
小贴士：
CSS 缩写
通常有可能对某些CSS代码进行 "缩写"，从而减少代码量. 我们来看一个关于 padding 和 margin 的例子
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
可以这样写:
margin: 5px 10px;
每种样式定义几乎都可以"缩写". 当你完成样式表, 用"缩写"去替换掉比较复杂的书写格式,比如标准格式关于font:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
这里有个例子:
font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;
变成这样:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;
http://home.no.net/
这里是相关资料的链接 An Introduction to CSS shorthand properties 关于语法.
左/中/右三栏都被给出了它们自己的元素. 每部分都向左靠并形成"100%"屏幕宽度. clear:both 页脚的div跨越三栏,实现100%宽度.
为了使布局美观, 让每部分内容周围有一定的空间, 我们需要加入一些"栏空间", 被称为"gutter". 很不幸,这里会发生一个问题. 由于IE没有正确的解析border(box框架，有兴趣的可以看看相关的书籍，译者)，我们这里采用在区域之间再加上一个div来解决区域之间的空隙问 题. 下面是代码：
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg(’sitename’);?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’left’)) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’right’)) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules(’footer’)) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>
添加inside类:
.inside {padding:10px;}
这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法. 这样的方式带来两个优点, 代码短和容易控制. 然而,这并不是所谓的合理的代码顺序. 我们必须使用一些类似于 "nested float"的高级CSS技巧.合理代码顺序有助于搜索引起收录，而目前的布局显然重要的组件的内容会最后出现。虽然这优点复 杂，compassdesigns.com有一个文件来说明如何创建这样的文件，这里不再详细说明了。
默认的Joomla CSS
到目前为止，我们的CSS都是关于布局的，这样的页面看起来是一点也不生动漂亮，接下来，我们加入一个格式CSS代码。先来添加两个定义，代码如下：
body {
text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
width: auto !important; /*IE6 hack*/
width:960px; /*IE6 hack*/
margin:0 auto; /*center hack*/
text-align:left; /*center hack*/
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden; }
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
#sidebar-2 {float:left;width:20%; overflow:hidden;}
#footer {clear:both;}
.inside {padding:10px;}
首先我们使用一些小技巧，保持页面居中。这主要是由于IE6,IE7的问题。（具体还是参考CSS文档吧，译者）
小贴士：
我们定义column的宽度是百分比，而他们的容器div是固定宽度的，这可能看起来很奇怪，其实这是有好处的，一是更加灵活的弹性布局，如果我们要改变宽度，我们仅仅需要改动一个数值。
接下来的CSS我们做了一些全局性的设置，代码如下：
/*typography*/
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76.1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3em;
}
#header {
background:#0099FF;
}
#footer {
background:#0099FF;
}
#main-body {
background: #CC0000;
}
#sidebar-2 {
background:#009933;
}
#content {
background: #999999;
}
#sidebar {
background: #009933;
}
每元素都被设定为"0"margin 和 "0" padding ,然后所有的块被定义了底部边距. 你可以在这里找到关于全局定义的相关内容clagnut and left-justified.
字体大小被设置成76.1%. 这也是为了在不同浏览器访问时自适应屏幕分辨率. 字体的单位都设置成 em. 字高 line-height:1.3em 设定更便于阅读. 这意味着页面可以适应不同访问者的不同页面分辨率. 这里有详细的讨论:
An experiment in typography at The Noodle Incident (Owen Briggs)
最后我们加入背景颜色设定,得到下图的显示效果.
请注意边栏并没有达到它们的底部. 我们看到左右栏各有一个红色和白色的空白区域. 如果我们设定整个模板的背景色是白色. 如果你想要三栏的背景色都填满，那么要使用背景图片垂直堆砌。 这种技术被称为"Faux Columns" ，Douglas Bowman and Eric Meyer创造的.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
尽管Joomla!可以通过模板重构核心输出的任何内容，然后渲染器仍然可能在内容中输出部分table,这些CSS对于模板开发者来说也是相当重要的。根据一些社区的研究，这些CSS标记清单如下：
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper
关于这张清单请注意.
我们看到的很多设计有其自定义的CSS布局设计. 一些定义的是有优先顺序的.
比如:
a {color:blue;} a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}
链接的颜色和 .contentheading 的颜色将是红色的, 定义是特殊的(as .contentheading 是包含在一个 <div> 里面的)
在我们的模板例子中, 你常常会看到一些特殊的规则. 比如一个class 出现于 table. 下面是例子:
.moduletable table.moduletable
.moduletable 是一个包含组件的<div>的名字. table.moduletable 将应用一个样式到 table 类型是 ="moduletable" on it.
.moduletable 将应用自己的样式而不考虑 class 里面的定义.
a.contentpagetitle:link .contentpagetitle a:link
a.contentpagetitle:将应用样式只要有 a .contentpagetitle 标记的class 链接上.
.contentpagetitle a:link 会应用所有的INSIDE .contentpagetitle 链接.
这并不难理解, 这常常使绝大多数的样式应用比较容易,你也不希望看到有很多的特例.
一些有价值的链接:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
此刻我们的模板使用了很多 table, 实际上12个 这会导致页面访问慢. 为了减少 table 我们在使用 jdoc:include调用模块的时候要使用 $style参数。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
在实际阅读本文之前，建议阅读一些关于Joomla!模板的基础知识，请参考：http://www.maycode.com/index.php/hotspot/28-joomla/475-joomla-template.html ，如果在阅读中遇到问题，也请现在上述文章中寻找答案。
关于Jdoc的相关资源，请参考http://www.maycode.com/index.php/hotspot/28-joomla/286-joomla-template.html
在index.php中调用模块的语法如下：
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
style是可选的，可选值定义在modules/templates/modules.php（我的版本中在templates/system /html/modules.php，也许原文有误，译者）中。style的可取值有 table,horz,xhtml，rounded,none,outline等，具体的表现形式请参考：http://www.maycode.com/index.php/hotspot/28-joomla/333-joomla-template.html 。
（原文中给出了这几种风格的源代码，这里就省略了，译者）
你可以看到style取值为xhtml或者rounded时候，源代码更加简洁，更适合CSS，我们也推荐这两种，而且不是必要的时候不要使用table和horz.
打开modules.php文件，你可以看到所有的风格，你设置可以自由的添加自己的风格，以下的代码是xhtml的实现：
function modChrome_xhtml($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get(’moduleclass_sfx’); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?> »</h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}
你可以自由的改变这个风格。（不过如果你想添加自己的风格，应该参考http://docs.joomla.org/Applying_custom_module_chrome ，直接修改核心代码总是不爽的，译者）
对于我们的模板制作，我们选择xhtml风格。全部代码如下：
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg(’sitename’);?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’left’)) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’right’)) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules(’footer’)) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>
注意，我们不能在<jdoc:include type="component"> 中设置style，因为模块并不支持。
将模块设置为xhtml风格，可以把table的数量减少为14个，接下来我们添加一个foemat控制的CSS.
同样还将添加 <H1> 标签，对于SEO的非常有帮助的。现在我们的CSS代码看起来如下：
/*typography*/
* {
margin:0;
padding:0;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px; /*negative padding to pull h3 back out from .moduletable padding*/ }
现在页面的效果看起来如下：
这一章中我们主要说了如何设置模块，下一章我们来看看菜单处理。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
前文我们曾经说过，页面中table可以减少到12个，现在页面中还有14个table,接下来我们来处理菜单，从而达到减少table的目的，剩下的12个table，如果不改变核心代码的话，是无法减少的。
我们要将菜单的风格设为 flat。（要在管理员界面的module manager中，对mainmenu模块修改，通常设置为flat,译者），现在页面中就只有12个table了。
接下来我们修改关于菜单的格式控制，添加代码如下：
/*Menu Styling*/
.moduletablemenu{
padding:0;
color: #333;
margin-bottom:1em;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
border-bottom:1px solid #fff;
}
.moduletablemenu ul{
list-style: none;
margin: 0;
padding: 0;
}
.moduletablemenu li{
border-bottom: 1px solid #ccc;
margin: 0;
}
.moduletablemenu li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body .moduletablemenu li a {
width: auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
现在整个页面的效果如下图：
到目前为止，我们的模板采用三列结构布局，而不管这一列中是否有内容。对于一个CMS网站来说是没有什么益处的，因为这部分内容不发生变化。但是因为需要管理员能够改变模块的位置，所有我们需要能够自动关闭或者折叠起一列来。这就是列隐藏。
在这篇文章中http://www.maycode.com/index.php/hotspot/28-joomla/406-joomla-template.html 我们提到了Joomla! 1.5模板的新特征，请参考。在Joomla! 1.5的模板开发中，我们采用countModules来判断是够某列有模块需要显示。
通常的代码如下：
<?php if($this->countModules(’left’)) : ?>
do something
<?php else : ?>
do something
<?php endif; ?>
countModules支持关系运算以及部分数学运算，以下是例子：
countModules(’left’) //如果left有模块显示，则返回1
countModules(’left and right’) //left和right都有模块显示，返回1
countModules(’left or right’) //left或right之一模块显示，返回1
countModules(’left + right’) //left和right都有模块显示，返回1
使用这个函数，我们就可以实现隐藏不需要的列。
通常有集中方式来实现，我们这里在页面的头部进行计算，代码如下：
<?php
if($this->countModules(’left and right’) == 0) $contentwidth = "100";
if($this->countModules(’left or right’) == 1) $contentwidth = "80";
if($this->countModules(’left and right’) == 1) $contentwidth = "60";
?>
这样，如果左右都没有模块显示，那么我们采用100%列宽，如果左或者右右一列显示，那么我们采用80%列宽，如果都有，那么我们采用60%列宽。
同时，我们把内容部分改为：
<div id="content<?php echo $contentwidth; ?>">
这样我们就选择了合适的列宽。
同时，我们在template_css.css文件中添加：
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
隐藏空的模块：
同样我们也需要隐藏空的模块，示例代码如下：
<?php if($this->countModules(’left’)) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
这样，如果左边如果没有模块，那么 id=sidebar 自然也不会出现了。
至此，我们就完成了一个基本模板的开发过程，接下来我们给出一个真是模板的开发过程。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
到目前为止，我们创建一个简单的基本模板，这个模板的创建过程体现了实际模板的整个创建过程的所有环节。
扫一扫
6372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
