joomla模板制作.docx
《joomla模板制作.docx》由会员分享，可在线阅读，更多相关《joomla模板制作.docx（67页珍藏版）》请在冰豆网上搜索。
joomla模板制作
（转）JoomlaTemplateTutorial
LastUpdatedFriday,04August2006
在本教程中，我们将完成创建joomla模板这一步。
Joomla是一个开放源代码ContentManagementSystem（CMS），该系统可以自由（真正的）使用并且由一个很强大的在线社区支持。
具体地说，我们将创建一个模板，使用cascadingstylesheets（css）而不是表格来生产布局。
这是一个很合理的目标，因为它意味着模板代码会更容易符合WorldWideWebConsortium（W3C）标准。
它装载的更快，更容易维持并能在搜索引擎中执行地更好。
本教程稍后将讨论这些问题的细节，它包含以下章节。
-什么是joomla模板？
阐述joomla模板执行的功能有哪些，不包含内容的模板与添加了内容到CMS的模板之间的区别。
-本地设计过程
设计过程与设计一个静态（x）HTML网页之间的不同之处。
-W3C与无表格设计
涉及到joomla中无表格设计和W3C标准，可用性与无障碍环境三者之间的关系。
-模板组件
joomla模板由什么文件组成，它们各具有什么功能。
-使用CSS创建布局
如何使用CSS代替表格来创建一个源定3栏的布局
-默认的joolmaCSS
介绍基本的CSS样式，应该与joomla一起使用，还有被joomlacore使用的类型预设名单。
-模块
如何放置，包含圆角新技术的类型模块。
-菜单
一个简单的策略用于生产精益的CSS菜单，模仿出那些用javascript写的菜单效果。
-隐藏栏目
如何控制什么时候显示栏，当没有内容时隐藏栏。
-结论
-附录A：
提示与技巧
可变页宽度，圆角，文本成型模以及更多
{mospagebreaktitle=WhatisaJoomlaTemplate?
}
什么是joomla模板？
Joomla模板就是在joomlaCMS里面的一系列文件，用来控制内容的显示。
Joomla模板既不是一个网站，也不是一个完整的网站设计。
该木板对于查看你的joomla！
网站是一个基础。
要生产出一个“完整”网站的效果，模板会和存储在joomla数据库中的内容密切合作。
以下你可看到一个这方面的例子：
这个截图显示了与样本内容的使用。
图B显示了模板，它可能看着与一个原始joomla安装一起，几乎没有内容。
模板被格式化了，这样当你的内容被插入禁区时，将继承定义在模板中的样式表，比如连接类型，菜单，导航栏，文本大小和颜色等。
注意图片和内容是如何联系的（人们的相片），该内容不是模板的一部分，而在标题那的图片是模板的成分。
为一个CMS使用一个模板，就像joomla一样，有很多优点和缺点：
-内容和外观完全分离，特别是当CSS用于布局时（因为反对在index.php文件中存在表格）.这是网站主要标准的一个,符合现代网站标准.
-一个新的模板,因此对网站而言一个全新的外观可以立刻被应用上.这甚至可以和颜色图片一样有不同的内容地点/定位
-如果一个网站内部想有不同的版面配置,这很难实现.虽然不同的模板可以应用到不同的页面,这种内置的功能并不可靠.大多数设计者选择使用各种PHP代码来显示/隐藏栏取决于是否在那个位置公布了内容.（在提示与技巧中讨论到了）.
{mospagebreaktitle=LocalhostDesignProcess}
本地设计过程
你在强大的joomla网站上看到的页面并不是静态的.这就说明它是动态地从存储在数据库中的内容产生的.你所看到的页面是通过在模板中各种PHP命令创建的.这种设计阶段提出了一些困难.
现在使用一个”所见即所得”（WYSIWYG）的HTML编辑器已经很普遍了,比如Dreamweaver.这就意味着设计者不需要再对HTML进行编码.而在joomla模板设计过程中这是不可能的.所见即所得编辑器不能显示一个动态网页.这说明设计者必须”用手”编写代码,然后从一个服务端页面的PHP查看输出页面.只有web服务器拥有足够快速的连接,但是大多数设计者使用他们自己电脑上的”localserver”.这是一款服务于设计者自己电脑上网页的软件.
没有办法”立刻”创建一个页面,它取决于设计者自己的背景.那些更图形化的页面在图形软件中比如photoshop制作页面的”形象”,然后将图形分开来使用（名为片和块）.高技术的设计师往往直接跳到CSS进行编码.然而,上面我们提到,joomla模板设计者是受限制的,他不能在相同的编辑器中立刻看到她/他编码的效果.改进的设计过程如下:
-在HTML编辑器中做出修改,保存修改
-在背景下由本地服务器来”运行”joolma
-在网站浏览器中查看编辑
-回到第一步
本地服务器选项
几个本地主机服务器可用:
-JSAS-JoomlaStandAloneServer.WAMP
支持个人电脑上windows系统下joomla的服务器.一个自身包含了Apache-MySQL-PHP服务器.
-XAMPP
在Linux,Windows,MacOSX和Solaris上安装ApacheDistribution很简单.该包包含了Apachewebserver,MySQL,SQLite,PHP等.
www.apachefriends.org/en/xampp.html
JSAS确实有大量的广告在上面,应该会吸引你.
EasyCSSStyling
是设计过程更有效的令人满意的技术是为你正在设计的网页服务,然后拷贝粘贴源代码到一个编辑器中.例如,一旦你的CSS布局成立,你可以使用其中以个本地服务器来支持一个页面,View_Source,然后将它拷贝粘贴到你的编辑器中,现在你就可以很简单地使用CSS来为页面定义类型,且不需要重复上述步骤.
SomeHTMLEditorOptionsforJoomlaDesigners
对于那些不能支付商业编辑器比如Dreamweaver的人,这有一些免费的编辑器可用:
Nvu是一个坚实的选择,并确认已经建成..它还是一个Mambo/Joomla的延伸,会非常有用.Nvu是100%的开放源代码.这就意味着任何人都欢迎来免费下载Nvu,如果要做特殊的修改的话还包含源代码.你可以从Manboforge得到延伸版.是在这里建立完整的项目.
另外一个选在实际上也是一种验证,"CSEHTMLValidator"是集HTML,XHTML,CSS,链接,拼写和无障碍环境检查于一体的验证.你可以在这里取得免费的html验证器版本.
请记住,这些都不是”所见即所得”的html编辑器.
{mospagebreaktitle=W3CandTablelessDesign}
W3C与无表格设计
可用性,可访问性和搜索引擎优化都是用来形容今天万维网中高质量网页的词组,现实中,这三者之间存在大量的重叠,一个网页演示了其中一个的特征也就显示了三者的特征.最简单的方法来达到这三个目标就是使用W3C网页标准中的framework.
例如,一个（x）html语义结构的网站（xhtml解释文件,而不是它看来如何）很容易让某些视力不好的人在一个屏幕阅读器中阅读.对于一个搜索引擎spider阅读也很简单.Google在如何阅读你的网站方面是很盲目的.
一个符合W3C网站标准的网站有一个更好的基础使其变得可访问,可用以及搜索引擎优化.把这些想象成你家房子的建筑法规.一个拥有这些特性的网站会更强大,更安全.你可以用W3CHTML验证服务来核查你的页面.免费的.最简单的，一个符合W3C验证的网站运用（x）html语义结构并通过CSS将内容从外观中分离。
为了帮助你理解网站标准的来源，回顾历史是个好方法。
实际上很多网页是针对旧版本的浏览器设计的。
为什么？
自从www开始后，浏览器不断地演变。
新版本已经出现而旧版本已经消失（还记得Netscape?
）。
另一个复杂的因素是，不同的浏览器制造商（比如微软）试图让他们的浏览器以稍微不同的方式去解释html/xhtml。
这导致了网站设计师不得不设计他们的网站以支持旧版本的浏览器而不是新版本。
往往网页设计成与这些“遗留的”浏览器相匹配是必须的。
网站标准为所有的网页浏览器投入了一套共用的“规则”来显示一个网页。
而推动这些标准的主要组织就是W3C，其负责人，TimBerners-Lee在1989年发明了worldwideweb。
如果你问5个设计者：
什么是web标准？
将会有5个不同的答案。
但是大多数认为它们是基于以下内容的：
-有效的代码，无论是html或者xhtml（或其它）
之前我们使用了一个创建结构代码的例子。
描述制作网页代码时的标准已经发展成就有连贯性。
在validator.w3.org中检查你的代码很简单.当你验证你的代码时确保你使用了正确的doctype.在CompassDesign上的这篇文章描述了一个有效的joomladoctype.
-代码语义正确
我们前面提到,要有语义,即在网页中的（x）html只描述内容,而不是外观.特别是这就是指有结构组织h1/h2等的标记和只用表格来存放表格数据,而不布置一个网页.
-CascadingStyleSheets（CSS）
与有语义的代码密切相关的,是使用CSS来控制外观和网页的布局.CSS是添加样式（例如字体,颜色,间距）到web文件的一个简单机制.（Source:
www.w3.org/Style/CSS/）.它们存在与（x）html类似之处,这就可以让你将内容（语义代码）从外观（CSS）中完全分离.有关这方面最好的例子是CSSZenGarden,一个有相同语义的xhtml网站用不同的CSS样式以不同独特的方式成形.结果是很多网页看起来不一样但是却有相同的核心内容.
设计joomla强大的网站,要满足验证标准目前来说是相当大的挑战.在当前发布的一系列新闻中,1.0.X,使用了大量的表格来输出它的页面.它既不使用CSS来设计外观,也不产生语义化正确的代码.这个问题与事实混合在一起,也就是极少数的第三方开发者既使用CSS,也用表格来生成代码.然而,无表格设计与valid并不一样.它很有可能在网站上使用表格来验证,这会使其更难.在joomla论坛上有一个很有用的线程,进入了解更多详情:
轻松的手法从joolma!
输出标准中清除一些表格.
幸运的是,JoomlaCoreDevelopment团队意识到了joolma这个问题.当1.5版本中从核心内容中移除表格没有变化,在1.6版本中已经定义了路线来记录地址.
无论如何.当创建一个模板时,核心内容仍然会采用,这样它变得方便（比如可升级的字体大小）,实用（比如清晰的导航栏）,搜索引擎优化（比如资源整齐）.
{mospagebreaktitle=TheTemplateComponents}
TheTemplateComponents模板组件
为了了解模板的内容.我们开始查看一个空白的joolma模板.在这个文件中,包含了各种组成一个joolma模板的文件和文件夹.这些文件必须放在joolma安装程序的/templates目录下.因此,如果你安装了两个模板,我们的目录就会看起来像:
/templates/JS_Smoothportal
/templates/JS_Synergy
请注意模板的目录名必须和模板的名称一样.既然这样,JS_Smoothportal和JS_Synergy,很显然它们是区分大小写的,并且不包含空格.传统上最初的设计者或者名字是用作前缀,在模板的目录中,有很多重要的文件:
/JS_Smoothportal/templateDetails.xml
/JS_Smoothportal/index.php
这两个文件名和位置必须和joolma脚本调用时一致.
-templateDetails.xml
（记录大写的”D”）当装载一个使用该模板的网页时,一个XML格式的元数据文件会告诉joomla!
其他文件需要什么.它还详细介绍了作者,版权以及模板的组成文件（包括所有使用的图片）.最后使用该文件是在管理员端安装模板时.
-index.php
这个文件是最重要的.它涉及网站并告诉joomlaCMS在哪放置不同的组件和模块.它是PHP和（x）HTML的结合.
几乎在所有的模块中,额外的文件都会使用到.像如下显示的那样对它们进行命名和定位是常规:
/JS_Smoothportal/template_thumbnail.png
/JS_Smoothportal/css/template_css.css
/JS_Smoothportal/images/
logo.png
-template_thumbnail.png
一个网站浏览器,模块的截图（往往减小到大约宽140像素,高90像素）.安装完模板后,功能”Previewimage”可在joomla1执行中看到.
TemplateManager.模板管理者
-css/template_css.css
模板的CSS样式.文件夹的位置是可选的,但是你必须指定放在哪.请注意,文件名称只有在引用到index.php文件中时是重要的.你可以随意称呼它.通常显示的名字会被用到,但是我们稍后将看到存在其它CSS文件会有优势.
-images/logo.png
任意与模板匹配的图片.又是组织原因,大部分设计师把它放到图片文件夹中.这里我们将logo.png图片文件作为例子.
要添加模板（再次,存在于丰富的教程中）,你要到自己网站的管理端,通过上传压缩文件安装模板.注意事实上你也可以一个个地添加文件（而不是压缩文件的形式）.你必须把它们放到你网站上的.com/templates中.
templateDetails.xml
templateDetails.xml必须包含模板组成部分的所有文件.以及作者和版权信息.有的显示在TemplateManager的管理员后端.
如下是一个xml文件例子：
YourTemplate
March06
BarrieNorth
GNU/GPL
compassdesigns@
1.0
Anexampletemplatethatshowsabasicxmldetailsfile
index.php
js/ie.js
template_thumbnail.png
images/header.png
images/background.png
template_thumbnail.png
css/base.css
css/norightcol.css
css/template_css.css
让我们来解释一下这些代码：
-mosinstall
XML文件的内容用于安装说明。
选项类型type=“template”告诉安装者我们正在安装一个模板。
-name:
定义你模板的名称。
你在这里输入的名字将被用来在模板目录中创建目录。
因此，它不应该包含文件系统不能识别的字符，比如空格。
如果手动安装，你要创建一个目录与模板名相同。
-creationDate:
模板创建的日期。
这是一个自由形态的区域，可以是任意像这样的格式：
May2005,08-June-1978,01/01/2004等。
-author:
该模板作者的名字-大多时候是你的名字。
-copyright:
任何版权信息都进入这一部分。
对于Developers&Designers来说是一本许可证，能在joomla论坛找到。
-authorEmail:
Email地址，能找到该模板的作者。
-authorURL:
作者网站的URL
-version:
该模板的版本
-files:
“files”部分包含了所有通用的文件，像模板的PHP源文件，模板预览的缩略图。
每一个列出在这个部分的文件都由括起来。
还有一些额外的文件被包含进来，这里我们使用一个模板需要的JavaScript文件例子。
-images:
所有模板使用的图片文件都列在图片区。
同样的，所有列出的文件由括起来。
文件的路径信息与模板的根目录息息相关，比如，如果你的模板在目录中名为'YourTemplate'，并且所有的图片在'YourTemplate'里面的目录'images'中，那么正确的路径是images/my_image.jpg。
-css:
样式表列在CSS区域。
同样的，文件名被包含在中，且它的路径与模板的根路径相关。
使用大量由主template_css.css导入的样式表会很有帮助的。
我们将在教程后面的内容中详细介绍。
Theindex.php
在index.php中到底有什么？
它是（X）HTML和PHP的结合，决定有关布局和页面外观的一切。
首先我们会研究取得验证模板的关键部分，在index.php文件顶端的DOCTYPE。
这段代码在任意网页的顶端运行。
在我们页面的顶端，我们把这段代码放到模板中：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml"
lang="
phpecho_LANGUAGE;?
>"
xml:
lang="
phpecho_LANGUAGE;?
>">
一个页面DOCTYPE是基本组件的一部分，基本组件是由浏览器显示网页的那一部分，特别是，浏览器如何解释CSS.为了让你领悟,从上观察显示:
[informationonW3C'ssiteaboutdoctypesis]"由geeks为geeks写的.当我说到geeks时,我并不是说普通的网站专业人员像你和我.我是指那些在她收到邮件的第一天使我们这些人看起来像Grandma的人.
无论如何,有一些doctypes你可以使用.基本上,doctype告诉浏览器如何解析页面.这里"strict"and"transitional"两个词开始四周浮动（float:
leftandfloat:
right通常）.本质上讲,自从有了WWW,不同的浏览器在不同程度上支持CSS.这就说明,比如,InternetExplorer不理解"min-width"命令是用来设置最小页宽.为了达到同样的效果.你必须使用CSS中的"hacks".
Strict是指html（或者xhtml）将解析成和标准规定的完全一样.一个transitionaldoctype是指页面将允许一些与标准不同的地方.
对于复杂的东西,有一种名为"quirks"样式,如果doctype是错误的,过时的,或者不存在的,那么浏览器会进入quirks模式.这是一个与后端兼容的尝试，所以比如InternetExplorer，会呈现出假装成IE4的页面。
不幸的是，有时候人们会意外地结束quirks模式。
通常以两种方式发生：
-他们直接从WC3页面使用doctype声明，链接因此中断：
DTD/xhtml1-strict.dtd
除了它是WC3服务器上一个相关的链接外。
你需要如上所示的完整路径。
微软建立了IE6，这样你就可以拥有有效的页面，但是是在quirks模式下。
将一个"xmlprolog"放在doctype前面后，这就会发生。
xmlversion="1.0"encoding="iso-8859-1"?
>
关于IE6quirks模式部分是很重要的。
在本教程中我们将只为IE6+设计，因此我们会确保它在标准模式下运行。
这样可以减少我们之后必须处理的hacks。
Xmlprolog不管怎样都是没必要的，我们会注意之后joolma的发行情况然后把xmlprolog停止掉。
要制作一个符合标准的页面，一个你能在顶端看到"validxhtml"的页面，并不意味着很难编码，或者很难理解标签。
它仅仅说明你使用的代码与你说的doctype匹配。
仅此而已！
把你的网站设计成符合标准可以在一定程度上减少成说明你所做的，然后做你所说的。
一些有用的链接：
-http:
//www.quirksmode.org/css/quirksmode.html
-
-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中又是什么呢？
首先让我们看看标题的结构，我们希望越小化越好，却仍然足够产生一个网站。
我们将使用的标题信息是：
phpdefined（'_VALID_MOS'）ordie（'DirectAccesstothislocationisnotallowed.'）;?
>
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml"lang="
phpecho_LANGUAGE;?
>"
xml:
lang="
phpecho_LANGUAGE;?
>"
phpecho_ISO;?
>"/>
php
升级会员 