【php精品源码栏目提醒】:本文主要为网学会员提供“【精品】joomla模板设计 - 其它资料”,希望对需要【精品】joomla模板设计 - 其它资料网友有所帮助,学习一下!
Joomla Template TutorialLast Updated Friday 04 August 2006在本教程中,我们将完成创建 joomla 模板这一步。
Joomla 是一个开放源代码 Content ManagementSystem CMS,该系统可以自由(真正的)使用并且由一个很强大的在线社区支持。
具体地说,我们将创建一个模板,使用 cascading style sheets(css)而不是表格来生产布局。
这是一个很合理的目标,因为它意味着模板代码会更容易符合 World Wide Web Consortium W3C标准。
它装载的更快,更容易维持并能在搜索引擎中执行地更好。
本教程稍后将讨论这些问题的细节,它包含以下章节。
-什么是 joomla 模板?阐述 joomla 模板执行的功能有哪些,不包含内容的模板与添加了内容到 CMS 的模板之间的区别。
-本地设计过程设计过程与设计一个静态(x)HTML 网页之间的不同之处。
-W3C 与无表格设计涉及到 joomla 中无表格设计和 W3C 标准,可用性与无障碍环境三者之间的关系。
-模板组件joomla 模板由什么文件组成,它们各具有什么功能。
-使用 CSS 创建布局如何使用 CSS 代替表格来创建一个源定 3 栏的布局-默认的 joolma CSS介绍基本的 CSS 样式,应该与 joomla 一起使用,还有被 joomla core 使用的类型预设名单。
-模块如何放置,包含圆角新技术的类型模块。
-菜单一个简单的策略用于生产精益的 CSS 菜单,模仿出那些用 javascript 写的菜单效果。
-隐藏栏目如何控制什么时候显示栏,当没有内容时隐藏栏。
-结论-附录 A:提示与技巧可变页宽度,圆角,文本成型模以及更多mospagebreak titleWhat is a Joomla Template什么是 joomla 模板?Joomla 模板就是在 joomla CMS 里面的一系列文件,用来控制内容的显示。
Joomla 模板既不是一个网站,也不是一个完整的网站设计。
该木板对于查看你的 joomla!网站是一个基础。
要生产出一个“完整”网站的效果,模板会和存储在 joomla 数据库中的内容密切合作。
以下你可看到一个这方面的例子:这个截图显示了与样本内容的使用。
图 B 显示了模板 ,它可能看着与一个原始 joomla 安装一起,几乎没有内容。
模板被格式化了,这样当你的内容被插入禁区时,将继承定义在模板中的样式表,比如连接类型 ,菜单,导航栏,文本大小和颜色等。
注意图片和内容是如何联系的(人们的相片),该内容不是模板的一部分,而在标题那的图片是模板的成分。
为一个 CMS 使用一个模板,就像 joomla 一样 ,有很多优点和缺点:-内容和外观完全分离,特别是当 CSS 用于布局时(因为反对在 index.
php 文件中存在表格).这是网站主要标准的一个符合现代网站标准.-一个新的模板因此对网站而言一个全新的外观可以立刻被应用上.这甚至可以和颜色图片一样有不同的内容地点/定位-如果一个网站内部想有不同的版面配置这很难实现.虽然不同的模板可以应用到不同的页面这种内置的功能并不可靠.大多数设计者选择使用各种
PHP 代码来显示/隐藏栏取决于是否在那个位置公布了内容.在提示与技巧中讨论到了.mospagebreak titleLocalhost Design Process本地设计过程你在强大的 joomla 网站上看到的页面并不是静态的.这就说明它是动态地从存储在数据库中的内容产生的.你所看到的页面是通过在模板中各种
PHP 命令创建的.这种设计阶段提出了一些困难.现在使用一个”所见即所得”WYSIWYG的 HTML 编辑器已经很普遍了比如 Dreamweaver.这就意味着设计者不需要再对 HTML 进行编码.而在 joomla 模板设计过程中这是不可能的.所见即所得编辑器不能显示一个动态网页.这说明设计者必须”用手”编写代码然后从一个服务端页面的
PHP 查看输出页面.只有 web 服务器拥有足够快速的连接但是大多数设计者使用他们自己电脑上的”local server”.这是一款服务于设计者自己电脑上网页的软件.没有办法”立刻”创建一个页面它取决于设计者自己的背景.那些更图形化的页面在图形软件中比如photoshop 制作页面的”形象”然后将图形分开来使用名为片和块.高技术的设计师往往直接跳到 CSS进行编码.然而上面我们提到joomla 模板设计者是受限制的 他不能在相同的编辑器中立刻看到她/他编码的效果.改进的设计过程如下:-在 HTML 编辑器中做出修改保存修改-在背景下由本地服务器来”运行”joolma-在网站浏览器中查看编辑-回到第一步本地服务器选项几个本地主机服务器可用:- JSAS - Joomla Stand Alone Server. WAMP支持个人电脑上 windows 系统下 joomla 的服务器.一个自身包含了 Apache-MySQL-
PHP 服务器.jsas.joomlasolutions.com- XAMPP在LinuxWindows Mac OS X和Solaris上安装Apache Distribution很简单.该包包含了Apache webserver MySQL SQLitePHP等.www.apachefriends.org/en/xampp.htmlJSAS确实有大量的广告在上面应该会吸引你.Easy CSS Styling是设计过程更有效的令人满意的技术是为你正在设计的网页服务然后拷贝粘贴源代码到一个编辑器中.例如一旦你的 CSS 布局成立你可以使用其中以个本地服务器来支持一个页面 View_Source然后将它拷贝粘贴到你的编辑器中现在你就可以很简单地使用 CSS 来为页面定义类型且不需要重复上述步骤.Some HTML Editor Options for Joomla Designers对于那些不能支付商业编辑器比如 Dreamweaver 的人这有一些免费的编辑器可用:Nvu 是一个坚实的选择并确认已经建成..它还是一个 Mambo/Joomla 的延伸会非常有用. Nvu 是 100的开放源代码.这就意味着任何人都欢迎来免费下载 Nvu如果要做特殊的修改的话还包含源代码.你可以从 Manboforge 得到延伸版.是在这里建立完整的项目.另外一个选在实际上也是一种验证 quotCSE HTML Validatorquot是集 HTMLXHTMLCSS链接拼写和无障碍环境检查于一体的验证.你可以在这里取得免费的 html 验证器版本.请记住这些都不是”所见即所得”的 html 编辑器.mospagebreak titleW3C and Tableless DesignW3C 与无表格设计可用性可访问性和搜索引擎优化都是用来形容今天万维网中高质量网页的词组现实中这三者之间存在大量的重叠一个网页演示了其中一个的特征也就显示了三者的特征.最简单的方法来达到这三个目标就是使用 W3C 网页标准中的 framework.例如一个xhtml 语义结构的网站xhtml 解释文件而不是它看来如何很容易让某些视力不好的人在一个屏幕阅读器中阅读.对于一个搜索引擎 spider 阅读也很简单.Google 在如何阅读你的网站方面是很盲目的.一个符合 W3C 网站标准的网站有一个更好的基础使其变得可访问可用以及搜索引擎优化.把这些想象成你家房子的建筑法规.一个拥有这些特性的网站会更强大更安全.你可以用 W3C HTML 验证服务来核查你的页面.免费的.最简单的,一个符合 W3C 验证的网站运用(x)html 语义结构并通过 CSS 将内容从外观中分离。
为了帮助你理解网站标准的来源,回顾历史是个好方法。
实际上很多网页是针对旧版本的浏览器设计的。
为什么?自从 www 开始后,浏览器不断地演变。
新版本已经出现而旧版本已经消失(还记得Netscape)。
另一个复杂的因素是,不同的浏览器制造商(比如微软)试图让他们的浏览器以稍微不同的方式去解释 html/xhtml。
这导致了网站设计师不得不设计他们的网站以支持旧版本的浏览器而不是新版本。
往往网页设计成与这些“遗留的”浏览器相匹配是必须的。
网站标准为所有的网页浏览器投入了一套共用的“规则”来显示一个网页。
而推动这些标准的主要组织就是 W3C,其负责人,Tim Berners-Lee 在 1989 年发明了 world wide web。
如果你问 5 个设计者:什么是 web 标准?将会有 5 个不同的答案。
但是大多数认为它们是基于以下内容的:-有效的代码,无论是 html 或者 xhtml(或其它)之前我们使用了一个创建结构代码的例子。
描述制作网页代码时的标准已经发展成就有连贯性。
在validator.w3.org 中检查你的代码很简单.当你验证你的代码时确保你使用了正确的 doctype.在 CompassDesign 上的这篇文章描述了一个有效的 joomla doctype.-代码语义正确我们前面提到要有语义即在网页中的xhtml 只描述内容而不是外观.特别是这就是指有结构组织h1/h2 等的标记和只用表格来存放表格数据而不布置一个网页.-Cascading Style Sheets CSS与有语义的代码密切相关的是使用 CSS 来控制外观和网页的布局.CSS 是添加样式例如字体颜色间距到 web 文件的一个简单机制. Source: www.w3.org/Style/CSS/. 它们存在与xhtml 类似之处这就可以让你将内容语义代码从外观CSS中完全分离. 有关这方面最好的例子是 CSS Zen Garden一个有相同语义的 xhtml 网站用不同的 CSS 样式以不同独特的方式成形.结果是很多网页看起来不一样但是却有相同的核心内容.设计 joomla 强大的网站要满足验证标准目前来说是相当大的挑战.在当前发布的一系列新闻中1.0.X使用了大量的表格来输出它的页面.它既不使用 CSS 来设计外观也不产生语义化正确的代码.这个问题与事实混合在一起也就是极少数的第三方开发者既使用 CSS也用表格来生成代码.然而无表格设计与valid 并不一样.它很有可能在网站上使用表格来验证 这会使其更难.在 joomla 论坛上有一个很有用的线程进入了解更多详情:轻松的手法从 joolma输出标准中清除一些表格.幸运的是 Joomla Core Development 团队意识到了 joolma 这个问题.当 1.5 版本中从核心内容中移除表格没有变化在 1.6 版本中已经定义了路线来记录地址.无论如何.当创建一个模板时核心内容仍然会采用这样它变得方便比如可升级的字体大小实用比如清晰的导航栏搜索引擎优化比如资源整齐.mospagebreak titleThe Template ComponentsThe Template Components 模板组件为了了解模板的内容.我们开始查看一个空白的 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这个文件是最重要的.它涉及网站并告诉 joomla CMS 在哪放置不同的组件和模块.它是
PHP 和xHTML的结合.几乎在所有的模块中额外的文件都会使用到.像如下显示的那样对它们进行命名和定位是常规:/JS_Smoothportal/template_thumbnail.png/JS_Smoothportal/css/template_css.css/JS_Smoothportal/images/logo.png- template_thumbnail.png一个网站浏览器模块的截图往往减小到大约宽 140 像素高 90 像素.安装完模板后功能”Previewimage”可在 joomla1 执行中看到.Template Manager.模板管理者- css/template_css.css模板的 CSS 样式.文件夹的位置是可选的但是你必须指定放在哪.请注意文件名称只有在引用到index.
php 文件中时是重要的.你可以随意称呼它.通常显示的名字会被用到但是我们稍后将看到存在其它 CSS 文件会有优势.- images/logo.png任意与模板匹配的图片.又是组织原因大部分设计师把它放到图片文件夹中.这里我们将 logo.png 图片文件作为例子.要添加模板再次存在于丰富的教程中你要到自己网站的管理端通过上传压缩文件安装模板.注意事实上你也可以一个个地添加文件而不是压缩文件的形式.你必须把它们放到你网站上的.com/templates中.templateDetails.xmltemplateDetails.xml必须包含模板组成部分的所有文件.以及作者和版权信息.有的显示在TemplateManager的管理员后端.如下是一个 xml 文件例子:ltmosinstall typequottemplatequot versionquot1.0.xquotgtltnamegtYourTemplatelt/namegtltcreationDategtMarch 06lt/creationDategtltauthorgtBarrie Northlt/authorgtltcopyrightgtGNU/GPLlt/copyrightgtltauthorEmailgtcompassdesignsgmail.comlt/authorEmailgtltauthorUrlgtwww.compassdesigns.netlt/authorUrlgtltversiongt1.0lt/versiongtltdescriptiongtAn example template that shows a basic xml details file lt/descriptiongtltfilesgtltfilenamegtindex.phplt/filenamegtltfilenamegtjs/ie.jslt/filenamegtltfilenamegttemplate_thumbnail.pnglt/filenamegtlt/filesgtltimagesgtltfilenamegtimages/header.pnglt/filenamegtltfilenamegtimages/background.pnglt/filenamegtltfilenamegttemplate_thumbnail.pnglt/filenamegtlt/imagesgtltcssgtltfilenamegtcss/base.csslt/filenamegtltfilenamegtcss/norightcol.csslt/filenamegtltfilenamegtcss/template_css.csslt/filenamegtlt/cssgtlt/mosinstallgt让我们来解释一下这些代码:- mosinstallXML 文件的内容用于安装说明。
选项类型 type“template”告诉安装者我们正在安装一个模板。
- name:定义你模板的名称。
你在这里输入的名字将被用来在模板目录中创建目录。
因此,它不应该包含文件系统不能识别的字符,比如空格。
如果手动安装,你要创建一个目录与模板名相同。
- creationDate:模 板 创 建 的 日 期 。
这 是 一 个 自 由 形 态 的 区 域 , 可 以 是 任 意 像 这 样 的 格 式 : May 200508-June-197801/01/2004 等。
- author:该模板作者的名字-大多时候是你的名字。
- copyright:任何版权信息都进入这一部分。
对于 Developers amp Designers 来说是一本许可证,能在 joomla 论坛找到。
- authorEmail:Email 地址,能找到该模板的作者。
- authorURL:作者网站的 URL- version:该模板的版本- files:“files”部分包含了所有通用的文件,像模板的
PHP 源文件,模板预览的缩略图。
每一个列出在这个部分的文件都由ltfilenamegt lt/filenamegt括起来。
还有一些额外的文件被包含进来,这里我们使用一个模板需要的 JavaScript 文件例子。
- images:所有模板使用的图片文件都列在图片区。
同样的,所有列出的文件由ltfilenamegt lt/filenamegt括起来。
文件的路径信息与模板的根目录息息相关,比如,如果你的模板在目录中名为YourTemplate,并且所有 的 图 片 在 YourTemplate 里 面 的 目 录 images 中 , 那 么 正 确 的 路 径 是ltfilenamegtimages/my_image.jpglt/filenamegt。
- css:样式表列在 CSS 区域。
同样的,文件名被包含在ltfilenamegt lt/filenamegt中,且它的路径与模板的根路径相关。
使用大量由主 template_css.css 导入的样式表会很有帮助的。
我们将在教程后面的内容中详细介绍。
The index.
php在 index.
php 中到底有什么?它是XHTML 和
PHP 的结合,决定有关布局和页面外观的一切。
首先我们会研究取得验证模板的关键部分,在 index.
php 文件顶端的 DOCTYPE。
这段代码在任意网页的顶端运行。
在我们页面的顶端,我们把这段代码放到模板中:ltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquotquothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgtlthtml xmlnsquothttp://www.w3.org/1999/xhtmlquotlangquotltphp echo _LANGUAGE gtquotxml:langquotltphp echo _LANGUAGE gtquotgt一个页面 DOCTYPE 是基本组件的一部分,基本组件是由浏览器显示网页的那一部分,特别是,浏览器如何解释 CSS.为了让你领悟从 alistapart.com 上观察显示:information on W3Cs site about doctypes is quot由 geeks 为 geeks 写的.当我说到 geeks 时我并不是说普通的网站专业人员像你和我.我是指那些在她收到邮件的第一天使我们这些人看起来像 Grandma 的人.无论如何有一些doctypes你可以使用.基本上doctype告诉浏览器如何解析页面.这里quotstrictquot andquottransitionalquot两个词开始四周浮动float:left and float:right通常.本质上讲自从有了WWW不同的浏览器在不同程度上支持CSS.这就说明比如 Internet Explorer不理解quotmin-widthquot命令是用来设置最小页宽.为了达到同样的效果.你必须使用CSS中的quothacksquot.Strict是指html或者xhtml将解析成和标准规定的完全一样.一个transitional doctype是指页面将允许一些与标准不同的地方.对于复杂的东西有一种名为quotquirksquot样式如果doctype是错误的过时的或者不存在的那么浏览器会进入quirks模式.这是一个与后端兼容的尝试,所以比如Internet Explorer,会呈现出假装成IE4的页面。
不幸的是,有时候人们会意外地结束quirks模式。
通常以两种方式发生:-他们直接从WC3页面使用doctype声明,链接因此中断:DTD/xhtml1-strict.dtd除了它是WC3服务器上一个相关的链接外。
你需要如上所示的完整路径。
微软建立了IE6,这样你就可以拥有有效的页面,但是是在quirks模式下。
将一个quotxml prologquot放在doctype前面后,这就会发生。
ltxml versionquot1.0quot encodingquotiso-8859-1quotgt关于IE6quirks模式部分是很重要的。
在本教程中我们将只为IE6设计,因此我们会确保它在标准模式下运行。
这样可以减少我们之后必须处理的hacks。
Xml prolog不管怎样都是没必要的,我们会注意之后joolma的发行情况然后把xml prolog停止掉。
要制作一个符合标准的页面,一个你能在顶端看到quotvalid xhtmlquot的页面,并不意味着很难编码,或者很难理解标签。
它仅仅说明你使用的代码与你说的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/topic7537.0.html- http://forum.joomla.org/index.
php/topic6048.0.html在 index.
php 中又是什么呢?首先让我们看看标题的结构,我们希望越小化越好,却仍然足够产生一个网站。
我们将使用的标题信息是:ltphp defined _VALID_MOS or die Direct Access to this location is not allowed. gtltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquotquothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgtlthtml xmlnsquothttp://www.w3.org/1999/xhtmlquot langquotltphp echo _LANGUAGE gtquotxml:langquotltphp echo _LANGUAGE gtquotltheadgtltmeta http-equivquotContent-Typequot contentquottext/html ltphp echo _ISO gtquot /gtltphpif my-gtid initEditorgtltphp mosShowHead gtltscript typequottext/javascriptquotgt lt/scriptgtlt--http://www.bluerobot.com/web/css/fouc.asp--gtltlink hrefquottemplates/ltphp echo cur_template gt/css/template_css.cssquot relquotstylesheetquottypequottext/cssquot mediaquotscreenquot /gtlt/headgt这些都是什么意思呢?ltphp defined _VALID_MOS or die Direct Access to this location is not allowed. gt确保文件不会被直接访问。
ltphp defined _VALID_MOS or die Direct Access to this location is not allowed. gtltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquotquothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgtlthtml xmlnsquothttp://www.w3.org/1999/xhtmlquot langquotltphp echo _LANGUAGE gtquotxml:langquotltphp echo _LANGUAGE gtquotltheadgt关于这个上面我们已经讲到。
quotltphp echo _LANGUAGE gtquot是从网站的整体配置上引入语言。
ltmeta http-equivquotContent-Typequot contentquottext/html ltphp echo _ISO gtquot /gt我们所使用的字符集,_ISO 是一个特殊的用来定义字符集编码的常量。
ltphpif my-gtid initEditorgt这是一个脚本变量,如果一个用户登录到你的网站时,它非零。
如果一个用户登录,WYSIWYG 编辑器被预载进来。
你可以,如果你愿意,经常预载该编辑器,但是总体上一个匿名的访客不需要添加内容。
这样可以为你的网站的普通浏览节省一些脚本 overhead。
ltphp mosShowHead gt标题信息再次在整体配置中设置。
它包含以下标记(在默认安装的情况下):lttitlegtA Complete Guide to Creating a Joomla Template lt/titlegt.