本指导手册包括下面的章节:
* 什么是JOOMLA模板? 解释怎样执行JOOMLA模板和比较没有内容的普通模板和CMS(内容管理系统)的模板有什么区别.
* 本地编辑模板的过程.主要解释设计的过程与静态的web页面有什么不同
* W3C标准和无表单设计.主要讨论在JOOMLA中进行无table(表单)设计和W3C标准有什么关系.
* JOOMLA模板的组成.JOOMLA的模板文件组成和模板中那些过程被执行.
* 使用cascading style sheets (CSS)布局.主要讨论如何使用CSS布局来取代table布局.
* 默认JOOMLA样式表.介绍一些基本的JOOMLA的CSS应用.怎么调用强大的JOOMLA内核.
* Modules组件.怎样布置你的组件和一些技巧.
* Menus菜单.使用CSS建立一些简单的类似于JS编出来的菜单.
* Hiding Columns(隐藏列表).怎样控制Columns和隐藏一些没有内容的Columns.
* 总结
* 附录.一些有用的链接和资源.
第一节:模板组成
为了理解JOOMLA模板的目录结构, 我们将着眼于一个空白的JOOMLA模板. 不同的文件和文件夹组成了JOOMLA的一个具体模板. 这些文件必须被放置在 /templates 的JOOMLA安装目录下. 比如,我们安装了两个模板,我们的目录结构看上去就是这样的:
/templates/JS_Smoothportal
/templates/JS_Synergy
大家注意模板的名称必须就是 /templates 目录下文件夹的名称,在这个例子中就是 JS_Smoothportal 和 JS_Synergy. 很显然,这些名字最好是能反应出模板的风格或者出处.
在一个具体模板的目录下,有以下关键文件:
/JS_Smoothportal/templateDetails.xml
/JS_Smoothportal/index.php
这两个文件的文件名必须定义的和JOOMLA核心脚本预定义的完全相同.
* templateDetails.xml
(注意字母”D”大写) 一个XML格式的文件告诉JOOMLA核心在使用当前模板时的文件清单. 这里也描述了作者;文件名称;copyright信息;甚至包括模板使用的图片文件的清单. 最后一次使用该文件也就是我们在管理后台对该模板进行安装的时候.
* index.php
这个文件也是最重要的文件. 它对整站进行布局并且告诉JOOMLA内核何处放置组件和模块.它往往是一种PHP与(X)HTML的”混合体”.
绝大多数的模板也使用了一些”附加文件”. 一般会像下面的定义(尽管JOOMLA内核没有要求):
/JS_Smoothportal/template_thumbnail.png
/JS_Smoothportal/css/template_css.css
/JS_Smoothportal/images/ logo.png
* template_thumbnail.png
当前模板的浏览器截图(通常使用140*90像素尺寸). 安装模板完毕以后,这张图片会以”缩略图”的形式在后台模板管理器中展示.
* css/template_css.css
模板的CSS文件. 文件夹的路径是可以选择的,但是你必须对它进行指定. 注意文件名和路径是在index.php中指定的. 你可以取一个你喜欢的名字. 通常文件名反映使用状况, 我们在后面阐述这种命名方法在多个CSS文件使用时的优点.
* images/logo.png
在模板里面有很多图片文件. 一般的我们把这些图片归理至一个文件夹,而这个例子中我们只有一个文件logo.png
你可以用管理后台安装zip格式的上传好的文件,也可以手动的在服务器上copy文件,但是你必须把他们放置在 yoursite.com/templates目录下.
templateDetails.xml格式
templateDetails.xml 必须包括模板使用的所有文件. 它也包括了作者和版权信息等内容. 在后台的模板管理器这些信息将会被展示,下面是一个XML文件的例子:
<mosinstall type=”template” version=”1.0.x”>
<name>YourTemplate</name>
<creationDate>March 06</creationDate>
<author>Barrie North</author>
<copyright>GNU/GPL</copyright>
<authorEmail> compassdesigns@gmail.com 这个 E-mail 地址已经被防止灌水恶意程序保护，您需要激活 Java Script 才能观看 This e-mail address is being protected from spam bots, you need JavaScript enabled to view it </authorEmail> <authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description> An example template that shows a basic xml details file </description>
<files>
<filename>index.php</filename>
<filename>js/ie.js</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/header.png</filename>
<filename>images/background.png</filename>
<filename>template_thumbnail.png</filename>
</images>
<css> <filename>css/base.css</filename>
<filename>css/norightcol.css</filename>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
让我们来解释这些行的意义:
* mosinstall
这个命令参数是安装程式的指令. 参数 type=”template” 告诉安装程序我们安装的是一个模板
* name:
定义你模板的名称. 这个名称会在安装模板的时候以目录夹名的形式被安装在模板目录下. 因此这个name不能包括文件系统不能处理的字符, 比如空格. 如果是手动安装, 你就必须在JOOMLA模板目录下手动创建一个与这个name一致的目录夹.
* creationDate:
模板建立的日期. 自由填写比如你可以填写 May 2005, 08-June-1978, 01/01/2004 etc.
* author:
这个模板设计者的名称 - 比如你的名字
* copyright:
版权信息的内容. 这里 Licensing Primer for Developers & Designers 可以找到JOOMLA相关的内容.
* authorEmail:
作者邮件信息Email.
* authorURL:
作者站点
* version:
模板版本
* files:
“files” 部分声明的是这个模板包括的PHP文件或者缩略图文件. 每个文件被列出在<filename>与</filename>之间,包括完整的路径. 它也可以包括一些附加文件, 这里的例子我们看到的是一个次模板使用的一个JS文件.
* images:
所有的图片文件 在这个部分被列出. 所有图片文件在你模板目录下的完整路径将包含在<filename>与</filename>之间. 比如: 如果你的模板目录是’YourTemplate’,所有的图片文件在’images’下,它是在’YourTemplate’下的目录,那么有效的路径就是:<filename>images/my_image.jpg</filename>
* css:
样式表被显示与此部分. 同样也在<filename>与</filename>之间定义,这个定义对于多样式表将非常重要,我们将在下面的内容里讨论.
The index.php
究竟是那些内容在index.php文件中呢?它应该是一个关于网站次模板的布局外观的(X)HTML和PHP的混合体
首先我们看到是下面一段有效模板的文档定义,文档类型的表述在这段顶部定义,这段代码在所有的页面文件首部都会出现,在例子模板的index.php顶部,我们看到下列代码:
<!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; ?>”>
一个具体页面要被浏览器呈现,文档类型描述 “DOCTYPE”是最基础的部分,特别的,如何让浏览器解读CSS. 为了给你一个直观的解释alistapart.com上面有这样一段:
[W3C关于”doctypes”就是:] “written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™”(他妈的这句真拗口,字面意思:小丑写给小丑.我说的小丑,不是说像你我一样专业的网站,我是指一些除你我以外类似一个老太太收到了一封电子邮件—–anthax)
总 之,有几种文档类型你可以使用. 首先, doctype定义告诉浏览器如何解读页面.这里单词”strict”(严格的) and “transitional”(过度的)开始获取浮动范围(float:left and float:right 通常). 实质上,自从WWW诞生以来,不同浏览器对CSS都有不同的支持. 比如, IE浏览器不明白 “min-width” 命令是设置一个最小页面宽度. 另外一方面你必须对CSS进行 “hacks” .
strict(严格的)的意思就是html(or xhtml)必须严格按照标准规范执行.而transitional(过渡的)意思就是默许一些和标准不同的语法.
上面的设置可能会把事情搞复杂,比如存在一些”双关”模式语法,如果”doctype”定义的不合适或者错误了,浏览器不能解读,就会进入”双关”模式,尝试所谓的”逆向兼容”,类似于IE,浏览器会在版本较低时”伪装页面”.
很不幸,大家偶尔也会在”双关模式”上发生错误,有下面两种情况:
使用 doctype 声明 straight (严格) 模式来自W3C, 结尾标识为:
DTD/xhtml1-strict.dtd
除了这是一个WC3 server的链接. 你必须在上面的声明加上完整的路径.
* Microsoft set up IE6 so you could have valid pages, but be in quirks mode. This happens by having an “xml prolog” put before the doctype.
<?xml version=”1.0″ encoding=”iso-8859-1″?>
IE6.0的”双关模式”非常重要. 本指导手册都是为IE6+设计的, 我们必须确信它运行于标准模式下这将让我们后期的修改工作最小化.XML智能语言几乎没有竞争, 我们将关注JOOMLA的最新版本在此方面的变化.
让网页符合标准, 当你看见”valid xhtml” 标记出现并不是意味这复杂的代码和难以理解的标签. 它只是告诉你doctype类型, 是的,不用考虑太多,标准化你的站点,这取决与你怎样去做.
一些有用的链接:
* http://www.quirksmode.org/css/quirksmode.html
* http://www.alistapart.com/stories/doctype
* http://www.w3.org/QA/2002/04/Web-Quality
* http://forum.joomla.org/index.php/topic,7537.0.html
* http://forum.joomla.org/index.php/topic,6048.0.html
还有其他什么内容在index.php里面?
让我们来看看头部的结构, 我们尽量将其简化, 但是一个完成的站点模板index.php中必须包含一些内容. 通常header里面是这样的:
<?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.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; ?>” />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type=”text/javascript”> </script>
<!–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” />
</head>
这些都是什么意思呢?
<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
这里是判断文件是否可以被访问.
<?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.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>
在上面这段. “<?php echo _LANGUAGE; ?>” 设定了整站的语言.
<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />
设定使用的字符集, _ISO 是一个我们用来定义编码字符集的特定常量.
<?php if ($my->id) { initEditor(); } ?>
当一个用户登录你的网站,判断变量my是否”非零”. 如果一个注册用户登录,那么一个默认的”所见即所得”编辑器被自动装载,当然是在你的允许设置下,你也可以事先就装载编辑器, 但是非法的或者一般游客是没有必要的. .
<?php mosShowHead(); ?>
Header信息是全局配置的集合. 它包括了下面的标签(默认安装):
* <title>A Complete Guide to Creating a Joomla Template </title>
* <meta name=”description” content=”Installing Joomla, doctype and the blank joomla template” />
* <meta name=”keywords” content=”installing joomla, joomla doctype, blank joomla tempate” />
* <meta name=”Generator” content=”Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved.” />
* <meta name=”robots” content=”index, follow” />
* <link rel=”shortcut icon” xhref=”images/favicon.ico” />
<script type=”text/javascript”> </script>
To stop a bug, that being a flash of un-styled content. Details courtesy of Blue Robot. Note this can be any script file, so if we add one, we can remove this line.
<link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />
这行是模板CSS样式文件的链接. PHP 代码 <?php echo $cur_template; ?> 返回当前模板名称. 这种用变量传递模板名称的方法很灵活,不用在你手工设置模板的时候还要再来修改具体的模板名称.
你也将看到, 在 temmplate_css.css 文件里, 我们将使用@import 来处理 Netscape 4 访问时的异常. 使用老版本的浏览器不能打开CSS脚本,如果你要求兼容老版本的浏览器, 我们将要有很多CSS HACKS.
一个空白JOOMLA模板的BODY
这会非常简单,准备好了么?
<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. 站点名称
2. pathway
3. top module
4. left modules
5. main content
6. right modules
7. 默认的footer module
最后是尽可能的实现”语意相关”. 考虑到不同的”浏览对象”, 浏览器;网络蜘蛛;或者是一般浏览者. 这方面的思考是站点”易接近”的基础.
没有什么比”语意相关”更重要. 如果设计者随意的定义自由的模块, 你会有很多麻烦. 关于CMS站点的重要考虑, 模板是管理内容布局的不二选择. 这也是很多设计者努力让其站点”有效化”的原因.
转自http://www.gzit8.com/show/4.html