joomla模板设计
Joomla模板制作基础教程-中文版
Joomla模板制作基础教程-中文版Joomla模板制作基础教程#01前言 (2)#02准备 (3)#03下载安装joomla (4)#04 预览joomla网站前台 (8)#05 joomla模板结构 (9)#06创建你的第一个模板 (11)#07使用你的模板 (12)#08增强你的模板 (15)#09 为模板增加更多的模块 (18)#10下一步学习建议 (21)#11下一步翻译计划 (21)#01前言课程简介：尽管网上的joomla模板很多，但是由于业务逻辑的不同，很难找到一款完全适合自己的模板。
创建一个joomla并不像你想象的那么难，可以说是零基础的同学，只要按照这个教程一步一步地学习，最后也可以制作一个不错的joomla模板，至少可以知道如何去修改现有的模板。
这个教程翻译自国外的一篇文章（囧，忘了具体是哪一篇了），在翻译的过程中根据国人的阅读习惯对教程进行了一些必要的修改，而且也补充了一些个人的理解。
在这个教程当中，你将学到joomla模板的基础知识，并在此基础上创建你的第一个joomla模板。
我们会一起快速地创建一个本地服务器来安装joomla，然后开始我们的joomla模板制作之旅。
译者简介：Rain（http://rain.gd），Joomla爱好者，在学习joomla的过程中深深地感受到joomla功能的强大，同时也发现国内joomla的学习资源很零散，joomla的中文社区不够活跃，新手在学习joomla的过程中如果遇到什么问题都很难及时地找到合适的解决方案。
就是在这种情况下，joomla粉丝网（）上线了，joomla粉丝网以非常简洁的论坛风格、清晰的版块设置、丰富的资源优势迅速被广大joomla爱好者所认可，现在，这个joomla中文社区逐渐地活跃了起来，每天都有宝贵的资源在这里分享。
所以，如果大家在学习这个课程的过程中遇到什么问题，可以去我的博客给我留言，也可以去joomla粉丝网（）寻求帮助。
Joomla必备模块（转自joomla8）
Joomla必备模块（转自joomla8）1.Akeeba Backup Core-joomla!网站备份组件。
不论是国内收费主机还是国外的收费主机甚至是免费主机，都必须考虑到数据安全问题。
没有哪个主机商可以保证你的网站数据不会丢失，况且很多时候由于我们自己的错误操作，也容易导致数据的丢失或者错误。
这就必须要有一个强大的备份组件来满足此要求了。
joomla8推荐使用Akeeba Backup，此备份组件可以让你在极短时间之内完成网站的备份，包括数据库的备份，并且在备份的过程中将在备份包中插入installation文件夹，这样你就可以像安装一个新网站的时候那样重新安装网站即可恢复网站了，非常简便。
同时Akeeba Backup也是网站搬家的高手，把备份数据包解压后重新安装到新的主机就可以完成网站搬家了，不论你有没有修改你的域名！所以，joomla8强烈推荐 Akeeba Backup为joomla网站必备组件第一位，而且joomla官方网站最受欢迎组件中Akeeba Backup也是排名第一的。
有了Akeeba Backup你还怕网站备份吗？享受网站备份和网站搬家的简单乐趣吧！下载地址：2.Xmap-joomla!网站地图组件我想每个joomla建站者都知道，真正的流量来自于搜索引擎！得到搜索引擎的喜爱，你就赢得了流量。
那怎么样才能让搜索引擎喜欢上你的 joomla网站呢？怎么才能搜索引擎快速收录你的joomla网站中的每个页面呢？当然就是在网站安装之后迅速安装Xmap，它能为你自动创建一个 XML格式的网站地图，然后你要做的就是把网站地图提交到Google，一般来说，提交过网站地图后，Google都会在24小时之内收录你的页面。
怎么样？心动不如行动！不过国内大部分用baidu，joomla8是讨厌baidu的，利欲熏心的baidu，不过xmap也可以迎合百度的需要，可以创建 html格式的网站地图页面提交到百度。
20个超棒的免费的响应式Joomla模板
20个超棒的免费的响应式Joomla模板20 个超棒的免费的响应式 Joomla 模板本文向你介绍 20 个响应式的 Joomla 免费模板，Joomla 是个内容管理系统，与Drupal 有点类似，并且每天都在进步。
Drupal 适合社区网站和博客，Joomla 则倾向于电子商务（阅读更多有关两者的区别）。
JF Calla ExteriorsDownload || DemoST HexagonDownload || DemoJF GrafeezeDownload || Demo ST BusinessDownload || Demo JSN MetroDownload || Demo JSN YoyoDownload || Demo JSN GlassDownload || Demo ST LokiDownload || Demo ST BirdsignDownload || Demo JM-LifestyleDownload || Demo JM-Business-MarketingDownload || Demo Beauty SalonDownload || Demo Valera J3Download || Demo TheKrakenDownload || Demo TX ZenithDownload || Demo ST OrddieDownload || Demo Clean LogicDownload || Demo Proto Joomla TemplateDownload || Demo Cirrus-GreenDownload || Demo SJ Joomla3 TemplateDownload || Demovia designdizzy你也许会喜欢•Joomla 3.2 发布，增加版本控制特性2个月前•Joomla 3.1 稳定版发布，内容管理系统8个月前•Joomla 2.5 和 3.0 版本之间 10 大差异11个月前。
Joomla! 入门
导读Joomla! 是一个人人都可以免费下载的开源内容管理系统（CMS）。
它是中小企业建站的理想选择。
不要让价格来困扰你——Joomla!是强大且稳定的，并且被越来越多的机构选择作为解决方案。
这样普遍的使用使得Joomla!作为一个CMS日益流行。
Google收录的Joomla页面数量的增长率是就一个明显的证据，其大约以每两个月翻一倍的速度在增加（见图片Figure P.1）。
Figure P.1 Joomla-像流行音乐一样随着Joomla!日渐成熟，它已经被越来越多的组织采用。
它最大的优点就是它的灵活性。
你可以很多地方看到它：公司λ学校和大学λλ在线的商业组织中小企业λ非营利性的社团组织λ政府部门λ企业内部与外部互联网合作λ个人与家庭的主页λλ社区门户杂志社与报社λ关于本书对于Joomla! 这个流行的、屡获大奖的开源CMS，本教程会教你用Joomla按你自己需求一步一步，最终开发出一个成功的站点。
本书阐述了对CMS的总体看法，同时也包含了关于内容的组织，编辑以及模板的主要概念。
最后，本书也涉及了一些普遍关注的话题，例如Joomla!如何能让搜索引擎优化(SEO)最佳化，什么资源能在Joomla!社区里获得。
本书致力于Joomla!最新的版本，也就是Joomla 1.5，是一个非常重要的CMS 更新版本。
本书的目标人群本书主要介绍如何使用Joomla! 1.5建立网站，不论是为自己还是为客户。
教程通俗易懂，读者不需要掌握很多技术术语，且不需要精通PHP，CSS等Web开发程序就可以学习。
本书里所解释的概念都很清晰、有条理，并且列举了很多实际例子。
如果你学完了所有章节，你就能独立架设各种不同的Joomla! 站了。
如何使用这本书这本书有几种使用方法：在开发站点的时候从头开始一章一章地学习这本书。
这本书在前面一些章节只是把开发中用的一些基础概念展示出来，但后面的一些章节帮助你理解更深入的概念。
你也可以把这本书当作参考书用。
2024版Joomla网站搭建教程及其适用场景和限制
用户角色权限划分及管理
用户角色设置
Joomla支持创建多种用户角色，并为不同角色分配不同的权限。例如，可以创建编辑 角色，并为其分配文章发布和修改的权限。
用户管理
可以对网站注册用户进行管理，包括查看用户信息、修改用户角色、删除用户等操作。
权限控制
通过用户角色和权限的设置，可以实现对网站内容的精细控制，确保不同用户只能访问 其被授权的内容。
组件应用 Joomla提供了丰富的组件库，可以根据需求选 择适合的组件，如文章列表、图片展示等。
模块应用 模块是Joomla中用于展示额外信息的工具，如 侧边栏、底部信息等。可以根据需求添加和配置 模块。
插件应用 插件可以为Joomla网站添加额外的功能，如社 交分享、SEO优化等。可以根据需求选择适合的 插件进行安装和配置。
Admin Tools
一款综合性的Joomla安全管理扩展，提供了多种安全功能，如后 台保护、文件权限管理、数据库备份等。
05
Joomla适用场景分析
个人博客或小型企业官网建设
简单易用
Joomla提供了丰富的模板和插件，使得个人用户可 以轻松搭建出专业、美观的网站。
灵活定制
Joomla支持模板和插件的定制开发，满足用户的个 性化需求。
强大的功能扩展性
Joomla拥有数千个扩展插件和模板，可轻松实现各种定制功能和设 计风格。
跨平台兼容性
Joomla可在多种服务器环境和操作系统上运行，具有良好的跨平台 兼容性。
活跃的社区支持
Joomla拥有庞大的全球用户社区，为开发者提供丰富的资源和支持。
安装Joomla前提条件
可靠的Web服务器
在安装向导中设置数据库连接、管理员账户等基本信 息。
Joomla! 3.3 - 基础指南4：Joomla设计、界面、颜色
Joomla! 3.3 - 基础指南4：Joomla设计、界面、颜色本系列教学转自 Cocoate免费书库，英文原著由Hagen Graf编写，中文翻译由Derek Joe完成模板是一个网站最重要的部分。
它为网站提供外观设计，并吸引新访客在您的网站逗留和浏览。
什么叫设计？设计作为名词，指的是通过一个计划或者绘画显示某事物的功能和前景，并在一定的环境达到某个特定的目标，并满足一系列的需求。
设计作为动词，指的是在一个设计环境下创造一个设计。
因此设计一词可以用于艺术（“纯直觉的”、“内在的”、“自然的”、“我们感觉合适的”）机械工程（一款新车的产品设计）生产制造（计划和执行）流程（业务流程建模）什么是页面布局？页面布局是“图片”设计的一部分工作，它主要解决一个页面的风格元素（如内容）以及这些元素的页面安排。
以Joomla的专业术语来说，页面布局就是在预定的模板位置安排Joomla 的模块和组件。
什么是颜色？颜色是人类的视觉财产，是我们称之为红色、绿色、蓝色等等视觉感觉的总称。
常有些特定的颜色与文化如国旗的颜色相关。
颜色的应用具有多样性，它们与文化的联系甚至与同一种文化不同年代的联系也是多元化的。
HTML颜色和CSS颜色有1600万种不同的颜色值。
它们由红色、绿色、蓝色混合而成，每种颜色的最小值是0，最大值是255。
这些值最终组合成超过1600万种不同的颜色（256 x 256 x 256）。
举例：黑色 = 16进制颜色中的#000000 = RGB颜色中的rgb（0,0,0）有几个工具（如color scheme designer）可以帮助你为你的网站找到正确的颜色（图3）。
图3：Color Scheme Designer（配色方案设计师）模板一个模板包含访问网站的人可以看到的重复性的元素。
使用一个模板编排这些元素，往往可以减少对图片设计技巧的要求，并且把背景元素的修改和其它常用前景内容元素的修改（或交替）的工作量降低最低。
Joomla数据库表段
Joomla数据库表段Joomla系统的数据库表一共35张表,这里解释一下每个表对应的大概功能,留作参考(排名不分先后：－）)1.jos_bannar/jos_bannarclient/jos_bannarfinish此三张表对应的组件为com_bannar，分别为广告条表／广告客户表／已到期的广告表.bannar 广告的管理对应这里三张表．2.jos_categories/jos_sections这两个表统释全局的分类，一个是分类，一个是单元除了对content内容分类之外，还包括两个核心组件的内容条目的分类也在这里定义，一个是weblink一个是rssfeed．所以这里他定义所有组件之中的分类，当然组件也完全可以不使用核心分类，如果需要的话．3.jos_content/jos_content_frontpage/jos_content_rating这三张表是大家最熟悉的所有CMS核心功能内容管理,内容表,首页内容表,内容评选表,这个的rating表包括总分，打分次数，后最后一次打分的ip4.jos_contact_details这张表是对应com_contact组件，联系人的详细信息都在这里．5.jos_components/jos_mambots/jos_modules/jos_modules_menu组件表，系统所有安装的组件都在这里，他定义了组件的连接，名称包括后台的．在安装一个新组件的时候会自动添加一条记录进来．手动删除组件的时候这里必须删除．jos_modules模块表主要记录模块的名称以及是否发布和发布的position位置．jos_modules_menu模块显示的菜单表，模块在哪个菜单上显示就在这里控制(注意模块在JOOMLA里面是可以指定显示在哪个菜单上的)．jos_mambots触发器表记录系统已经安装的触发器6.jos_menu表，菜单表新建任何菜单其实都是在这里增加一条数据，menutype记录菜单类型目前系统分为四种菜单mainmenu(主菜单),topmenu（顶菜单）,othermenu（其他菜单）,usermenu（用户菜单）7.jos_core_acl_aro/jos_core_acl_aro_groups/jos_core_acl_aro_sections/jos_core_acl_groups_aro _map/jos_groups这几张表用于存储用户的权限控制信息．具体Joomla的用户权限控制是采用的开源的phpGACL权限控制框架，详细信息可以参考phpGACL的文档．8.jos_messages/jos_messages_cfg用户站内消息系统(com_message)9.jos_newsfeed对应新闻种子组件(com_newsfeed)10jos_poll_data/jos_poll_date/poll_menu在线投票组件(com_poll)存储信息11jos_sessions用户访问时候的session记录，服务器端记录的信息．JOOMLA采用的是客制化的session 来标识身份12jos_template_positions/jos_templates_menu前者记录模板的所有位置例如user1/user2/等等的，后者定义模板与菜单之间的关系，这就是为什么joomla可以采用多模板机制，可以为不同的菜单分配不同的模板．13jos_users/jos_usertypes用户信息表，以及用户的类型．14jos_weblink记录组件com_weblink信息，这个组件的分类信息在jos_categories表中。
Joomla模板制作教程
Joomla模板制作教程在这个教程里,我们将一步步的制作一个具体的JOOMLA模板,JOOMLA是一个强大的开放代码的CMS(内容管理系统),并且她有着广泛的在线社团的支持.这里强调,我们将不使用table(表单);而是使用cascading style sheets (CSS) 建立模板.这种方式的最终目的是为了更加适应World Wide Web Consortium (W3C) 的标准.这也促进其更快的被装载load(不知是指浏览器还是搜索引擎)和更容易被搜索引擎收录.在后面的说明中我们再详细的讨论.本指导手册包括下面的章节:* 什么是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文件,但是你必须把他们放置在/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@这个E-mail 地址已经被防止灌水恶意程序保护，您需要激活Java Script 才能观看This e-mail address is being protected from spam bots, you need JavaScript enabled to view it </authorEmail><authorUrl></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‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd‖><html xmlns=‖/1999/xhtml‖lang=‖<?php echo _LANGUAGE; ?>‖ xml:lang=‖<?php echo _LANGUAGE; ?>‖>一个具体页面要被浏览器呈现,文档类型描述―DOCTYPE‖是最基础的部分,特别的,如何让浏览器解读CSS. 为了给你一个直观的解释上面有这样一段:[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类型, 是的,不用考虑太多,标准化你的站点,这取决与你怎样去做.一些有用的链接:* /css/quirksmode.html* /stories/doctype* /QA/2002/04/Web-Quality* /index.php/topic,7537.0.html* /index.php/topic,6048.0.html还有其他什么内容在index.php里面?让我们来看看头部的结构, 我们尽量将其简化, 但是一个完成的站点模板index.php中必须包含一些内容. 通常header里面是这样的:<?ph p defined( ‗_VALID_MOS‘ ) or die( ‗Direct Access to this location is not allowed.‘ ); ?> <!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd‖><html xmlns=‖/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(); } ?><?php mosShowHead(); ?><script type=‖text/javascript‖> </script><!–/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‖―/TR/xhtml1/DTD/xhtml1-transitional.d td‖><html xmlns=‖/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. pathway3. top module4. left modules5. main content6. right modules7. 默认的footer module最后是尽可能的实现‖语意相关‖. 考虑到不同的‖浏览对象‖, 浏览器;网络蜘蛛;或者是一般浏览者. 这方面的思考是站点‖易接近‖的基础.没有什么比‖语意相关‖更重要. 如果设计者随意的定义自由的模块, 你会有很多麻烦. 关于CMS站点的重要考虑, 模板是管理内容布局的不二选择. 这也是很多设计者努力让其站点‖有效化‖的原因.。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Joomla Template TutorialLast Updated Friday, 04 August 2006在本教程中，我们将完成创建joomla模板这一步。
Joomla是一个开放源代码Content Management System (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 title=What is a Joomla Template?}什么是joomla模板？Joomla模板就是在joomla CMS里面的一系列文件，用来控制内容的显示。
Joomla模板既不是一个网站，也不是一个完整的网站设计。
该木板对于查看你的joomla！网站是一个基础。
要生产出一个“完整”网站的效果，模板会和存储在joomla数据库中的内容密切合作。
以下你可看到一个这方面的例子：这个截图显示了与样本内容的使用。
图B显示了模板，它可能看着与一个原始joomla安装一起，几乎没有内容。
模板被格式化了，这样当你的内容被插入禁区时，将继承定义在模板中的样式表，比如连接类型，菜单，导航栏，文本大小和颜色等。
注意图片和内容是如何联系的（人们的相片），该内容不是模板的一部分，而在标题那的图片是模板的成分。
为一个CMS使用一个模板，就像joomla一样，有很多优点和缺点：-内容和外观完全分离，特别是当CSS用于布局时（因为反对在index.php文件中存在表格）.这是网站主要标准的一个,符合现代网站标准.-一个新的模板,因此对网站而言一个全新的外观可以立刻被应用上.这甚至可以和颜色图片一样有不同的内容地点/定位-如果一个网站内部想有不同的版面配置,这很难实现.虽然不同的模板可以应用到不同的页面,这种内置的功能并不可靠.大多数设计者选择使用各种PHP代码来显示/隐藏栏取决于是否在那个位置公布了内容.(在提示与技巧中讨论到了).{mospagebreak title=Localhost 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服务器. -XAMPP在Linux,Windows , Mac OS X和Solaris上安装Apache Distribution很简单.该包包含了Apache web server, MySQL, SQLite,PHP等./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得到延伸版.是在这里建立完整的项目.另外一个选在实际上也是一种验证, "CSE HTML Validator"是集HTML,XHTML,CSS,链接,拼写和无障碍环境检查于一体的验证.你可以在这里取得免费的html验证器版本.请记住,这些都不是”所见即所得”的html编辑器.{mospagebreak title=W3C and Tableless Design}W3C与无表格设计可用性,可访问性和搜索引擎优化都是用来形容今天万维网中高质量网页的词组,现实中,这三者之间存在大量的重叠,一个网页演示了其中一个的特征也就显示了三者的特征.最简单的方法来达到这三个目标就是使用W3C网页标准中的framework.例如,一个(x)html语义结构的网站(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（或其它）之前我们使用了一个创建结构代码的例子。
描述制作网页代码时的标准已经发展成就有连贯性。
在中检查你的代码很简单.当你验证你的代码时确保你使用了正确的doctype.在Compass Design上的这篇文章描述了一个有效的joomla doctype.-代码语义正确我们前面提到,要有语义,即在网页中的(x)html只描述内容,而不是外观.特别是这就是指有结构组织h1/h2等的标记和只用表格来存放表格数据,而不布置一个网页.-Cascading Style Sheets (CSS)与有语义的代码密切相关的,是使用CSS来控制外观和网页的布局.CSS是添加样式(例如字体,颜色,间距)到web文件的一个简单机制. (Source: /Style/CSS/). 它们存在与(x)html类似之处,这就可以让你将内容(语义代码)从外观(CSS)中完全分离. 有关这方面最好的例子是CSS Zen Garden,一个有相同语义的xhtml网站用不同的CSS样式以不同独特的方式成形.结果是很多网页看起来不一样但是却有相同的核心内容.设计joomla强大的网站,要满足验证标准目前来说是相当大的挑战.在当前发布的一系列新闻中,1.0.X,使用了大量的表格来输出它的页面.它既不使用CSS来设计外观,也不产生语义化正确的代码.这个问题与事实混合在一起,也就是极少数的第三方开发者既使用CSS,也用表格来生成代码.然而,无表格设计与valid并不一样.它很有可能在网站上使用表格来验证, 这会使其更难.在joomla论坛上有一个很有用的线程,进入了解更多详情:轻松的手法从joolma!输出标准中清除一些表格.幸运的是, Joomla Core Development团队意识到了joolma这个问题.当1.5版本中从核心内容中移除表格没有变化,在1.6版本中已经定义了路线来记录地址.无论如何.当创建一个模板时,核心内容仍然会采用,这样它变得方便(比如可升级的字体大小),实用(比如清晰的导航栏),搜索引擎优化(比如资源整齐).{mospagebreak title=The Template Components}The 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和(x)HTML的结合.几乎在所有的模块中,额外的文件都会使用到.像如下显示的那样对它们进行命名和定位是常规:/JS_Smoothportal/template_thumbnail.png/JS_Smoothportal/css/template_css.css/JS_Smoothportal/images/logo.png-template_thumbnail.png一个网站浏览器,模块的截图(往往减小到大约宽140像素,高90像素).安装完模板后,功能”Preview image”可在joomla1执行中看到.Template Manager.模板管理者- css/template_css.css模板的CSS样式.文件夹的位置是可选的,但是你必须指定放在哪.请注意,文件名称只有在引用到index.php文件中时是重要的.你可以随意称呼它.通常显示的名字会被用到,但是我们稍后将看到存在其它CSS文件会有优势.- images/logo.png任意与模板匹配的图片.又是组织原因,大部分设计师把它放到图片文件夹中.这里我们将logo.png图片文件作为例子.要添加模板(再次,存在于丰富的教程中),你要到自己网站的管理端,通过上传压缩文件安装模板.注意事实上你也可以一个个地添加文件(而不是压缩文件的形式).你必须把它们放到你网站上的.com/templates 中.templateDetails.xmltemplateDetails.xml必须包含模板组成部分的所有文件.以及作者和版权信息.有的显示在Template Manager的管理员后端.如下是一个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@</authorEmail><authorUrl></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>让我们来解释一下这些代码：-mosinstallXML文件的内容用于安装说明。