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站点的重要考虑, 模板是管理内容布局的不二选择. 这也是很多设计者努力让其站点‖有效化‖的原因.。

joomla 模板

joom1a模板
Joom1a是一个开源的内容管理系统（CMS）,允许用户建立和维护网站。

Joom1a提供了丰富的功能和灵活的架构，可以方便地创建各种类型的网站，包括博客，新闻门户，电子商务网站等。

对于Joom1a网站，模板是用于定义网站外观和布局的文件集合。

模板通常包括HTM1.CSS和JavaScript,用于显示网站内容和样式。

Joom1a提供了一些默认的模板，但用户也可以下载和安装其他的模板来满足自己的需求。

以下是一些常见的Joom1a模板：
1.He1ixU1timate-He1ixU1timate是一个功能强大且灵活的模板框架，可以用于创建多种类型的Joom1a网站。

2.Astroid-Astroid是一个适用于Joom1a的优秀模板框架，它具有响应式设计和许多可定制的选项。

3.T3-T3是一个受欢迎的Joom1a模板框架，具有现代化的设计和丰富的功能。

4.YOOthemePro-YOOthemePro是一个强大的
Joom1a模板建立工具，具有直观的界面和灵活的布局选项。

5.GantryFramework-Gantry是一个流行的模板框架,可以用于快速创建现代化的Joom1a网站。

这只是一小部分Joom1a模板的例子，你可以在Joom1a官方网站或第三方市场上找到更多的模板来满足你的需求。

Joomla! 3.3 - 基础指南7：内容排版

Joomla! 3.3 - 基础指南7：内容排版在您学会创建内容后，您需要考虑的自然就是怎么显示内容。

首页标准的首页的菜单类型为“头版文章”。

当您通过菜单→菜单管理访问主菜单时，您可能会留意到那个小小的“主页”标记。

它的意思是这个菜单群里包含了首页链接（图1）。

图1: 包含首页链接的主菜单编辑首页链接时，您有多种配置选项。

“头版文章”菜单类型提供了头版头条、引言导读、多版块显示和链接导读等丰富的排版方式。

要理解“头版文章”这种排版，我们需要几篇文章。

为简明扼要起见，干脆拷贝您的第一篇文章。

拷贝的方法是“另存为副本”，或者通过批量拷贝：即选择要拷贝的目标文章然后点击下面的批处理按钮（图2）。

图2: 批量拷贝文章如果您有四五篇甚至更多的文章（别忘了要都设为“头版文章”），您就可以尝试不同风格的排版了。

依次点击菜单→主菜单→首页，找到“高级选项”标签，你可以看到默认是设置是：1篇头条文章、3篇引言分3列显示、页面中不带其它文章的标题链接（图3）。

图3: 首页的排版现在您的首页效果看起来如图4。

图4: 默认的首页分类和菜单Joomla提供两种结果来组织网站内容：分类和菜单。

每篇文章都属于一个分类。

分类可以无限极。

菜单可以指向某篇文章或者分类或者一系列文章，比如刚才示范的首页就对应于所有头版文章。

如您所知，Joomla的模板预设了一些位置。

位置的作用是让您可以为网站内容和导航等元素安排合理的排版。

Joomla内容展示机制是通过模板的各个预设位置显示出模块即组件里的某些内容而实现的。

Joomla网站的每个页面是由一个组件和数量没有限制的模块构成。

分类的创建和管理：内容→分类管理菜单的创建和管理：菜单→菜单管理（创建菜单的更多内容请回顾：第5章：关于用户、权限、模块和文章）顶部导航Joomla空白页面在默认模板的position-7这个位置有一个“主菜单”。

我们使用模板Protostar 时，position-7就在侧栏，但我们想要使主菜单显示在页面顶部。

Joomla搭建网站培训教程(多场景)

Joomla搭建网站培训教程一、引言Joomla是一款功能强大的开源内容管理系统（CMS），它允许用户轻松创建、管理和发布各种类型的网站。

Joomla具有丰富的功能和灵活性，适用于个人博客、企业网站、在线杂志等多种应用场景。

本教程将介绍如何使用Joomla搭建网站，包括环境准备、Joomla安装、网站配置、内容管理、模板选择和插件使用等方面的内容。

二、环境准备1.服务器环境：可以选择使用本地服务器环境或远程服务器环境。

本地服务器可以使用XAMPP、WAMP、MAMP等集成软件包，远程服务器可以选择云服务器或虚拟主机。

2.数据库环境：Joomla需要使用MySQL数据库来存储网站内容。

在本地服务器中，通常会集成MySQL数据库。

在远程服务器中，需要选择支持MySQL的数据库服务。

3.Web服务器：Joomla需要运行在Web服务器上，常用的Web 服务器软件有Apache、Nginx等。

在本地服务器中，通常会集成Web服务器。

在远程服务器中，需要选择支持PHP的Web服务器。

4.PHP环境：Joomla是基于PHP开发的，需要安装PHP环境。

建议使用PHP7.x版本，以确保兼容性和性能。

三、Joomla安装2.解压安装包：将的Joomla安装包解压到Web服务器的根目录下，例如htdocs或www目录。

4.设置数据库：在安装页面中，需要填写数据库信息，包括数据库名、用户名、密码等。

如果使用本地服务器，通常数据库信息已经预设好。

5.设置网站信息：在安装页面中，需要填写网站名称、管理员用户名、密码等信息。

6.完成安装：“安装”按钮，Joomla将自动完成安装过程。

安装完成后，将进入网站前台页面。

四、网站配置1.登录后台：在浏览器中输入网站地质/administrator，进入Joomla后台管理页面。

输入管理员用户名和密码，登录后台。

2.更改网站设置：在后台管理页面中，“系统”菜单，选择“全局设置”，可以更改网站名称、描述、关键词等基本信息。

joomla1.5模板的功能特点和基本设计思路

Joomla 1.5 模板的功能特点与基本设计思路Joomla1.5 的模板引擎比起Joomla 1.X时代有相当大的进步，在Joomla1.5中允许设计者为模板定制可选参数，这些参数对应不同的选项，例如修改模板背景颜色、字号大小、宽度… 。

用户可以在管理后台的模板管理里修改，参数值保存在模板根目录下的“params.ini”文件里。

重写代码功能也非常不错，这个新的功能提高了Joomla 模板的可访问性，他允许设计者重写Joomla核心组件与模块的HTML代码，在以前Joomla的组件与模块应用了大量的表格，做为一个现代网站，网页布局中已经很少使用表格了，我们通过这个重写代码的功能，可以去掉所有Joomla组件与模块中的表格。

Joomla1.5在默认安装下，里面有一个叫“Beez”的模板，他是重写代码的完美案例，如果想使用重写代码功能，可以参考这个模板。

在模板的根目录下，所有重写的组件、模块的代码都放在“html”文件夹里，Joomla 在加载模板时会查看这个文件夹，如果里面有组件与模块的HTML代码，那么Joomla会使用这个文件夹里的代码代替原组件与模块的HTML代码。

模板可用参数示例下面的文字介绍了设计制作Joomla 1.5模板的基本思路。

制作一个空白的Joomla 1.5 模板：name/index.phpname/templateDetails.xml这两个文件是必须的，并且文件名也必须与上面的例子相同，因为这两个文件是被joomla核心直接调用的，所以不能错。

templateDetails.xml，这个文件里的内容是告诉joomla使用这个模板时会被调用的其它所有文件，包括CSS，JS，图像文件等等。

这里要注意，D是大写的，同时它还包括，作者名称，版权等信息。

Index.php，这个文件是模板的核心文件，用它来告诉joomla，我们如何放置组件与模块。

它是php与(X)HTML的组合。

2024版Joomla教程(Joomla模板)

使用Joomla的模块管理器创建自定义模块，并在其中添加所需的功能代码。
调用自定义模块
在模板的适当位置插入自定义模块的占位符，以便在网页中显示该模块的内容。
使用Joomla插件
根据需要安装和配置Joomla插件，以扩展网站的功能。
优化性能加载速度
压缩CSS和JS文件
使用工具对CSS和JS文件进行压缩，以减少文件大小并加快加载速度。
2
它具有易于使用、灵活性和可扩展性强的特点，适合个人网站、企业网站、社区网站等多种类型。
3
Joomla提供了丰富的模板和扩展插件，用户可以根据自己的需求定制网站外观和功能。
Joomla历史与发展
01
Joomla起源于2000年代初的一个名为Mambo的开源项目。
02
由于Mambo项目内部纷争，部分核心开发者于2005年பைடு நூலகம்道扬镳，创建了Joomla项目。
安装和配置插件
上传插件文件
将下载的插件文件上传到Joomla网站的插件目录。
安装插件
在Joomla后台管理界面中，找到“扩展”->“插件” 选项，点击“安装”按钮上传并安装插件。
配置插件
安装完成后，找到已安装的插件并点击进入配置页面，根据需要进行相关设置。
常用插件推荐
JCE编辑器
一款功能强大的WYSIWYG编辑器，提供丰富的文本编辑和排版功能。
提高网站安全性措施
更新Joomla核心和扩展
定期更新Joomla核心和已安装的扩展，确保安全漏洞得到及时修复。
限制登录尝试次数
设置登录尝试次数限制，防止暴力破解攻击。
ABCD
使用强密码策略
要求用户设置复杂且不易猜测的密码，降低被破解的风险。

简易五步法创建Joomla框架模板

简易五步法创建Joomla框架模板本指南循序渐进、指导大家如何在几分钟的时间内，基于JEZ Thema、根据PSD设计来创建Joomla！1.5模板。

下面就是本免费基础教程。

我们应该通过下列步骤来建立一个全新的Joomla模板：1.建立开发环境2.分析原始图形化设计3.把原始图形化设计切片为小图片4.创建表示设计的样式表5.完成新创建的Joomla模板通过本指南逐步引导，我将告诉您如何在几分钟内、根据任意一个原始图形化设计来创建一个全新而独特的Joomla 模板。

一、建立开发环境在创建Joomla模板之前，基于JEZ theme base，请确保您的Joomla网站已下载并安装了JEZ Thema。

推荐您把Joomla! 1.5和JEZ Thema安装到本地服务器以更便于开发。

•不知道如何设立本地服务器吗？我推荐XAMPP，它是个完整的安装包，只消点击一下就能帮助您快速设立本地服务器。

然后，您需要下载并安装Joomla! 1.5的最新版。

•就像其他扩展一样，下载并安装JEZ Thema到您的Joomla站点：登录至管理员面板并打开扩展->安装/卸载，在打开的页面内点击浏览按钮并选择下载好的JEZ Thema包，然后点击上传文件&安装按钮。

完成上述步骤后，让我们看下JEZ Thema 的Joomla模板插件参数。

还是在Joomla 管理员面板，打开扩展->模板管理器，在已安装模板列表内选择JEZ Thema作为默认模板并点击它的名字来查看所有可用参数。

你会看到所有参数都是内联文档类型：点击每个参数旁的显示/隐藏详情链接即可阅读指示。

二、分析原始图形化设计本指南内我们将分析一个JEZ_Rego.psd的Photoshop设计图并据此创建Joomla模板。

在分析之前，我们看下JEZ theme base 的默认布局。

如下图所示。

我们将利用默认布局来创建一个Joomla模板。

您将在另外一个指南内（尚未撰写）领略到如何定制默认布局来迎合不同的个人需求。

Joomla入门教程

Joomla入门教程一、教学内容本节课的教学内容选自Joomla官方文档，主要介绍Joomla入门知识。

内容包括：Joomla简介、Joomla安装与配置、Joomla基本操作、Joomla组件、Joomla模板和Joomla扩展。

二、教学目标1. 让学生了解Joomla的基本概念和功能；2. 培养学生掌握Joomla的安装、配置和基本操作；3. 引导学生了解Joomla的组件、模板和扩展，并学会简单使用。

三、教学难点与重点重点：Joomla的安装与配置、基本操作、组件、模板和扩展的使用。

难点：Joomla的高级配置、组件的开发、模板的设计和扩展的编写。

四、教具与学具准备教具：投影仪、计算机；学具：计算机、网络。

五、教学过程1. 实践情景引入：介绍Joomla在现实生活中的应用场景，如企业网站、个人博客等；2. 知识讲解：讲解Joomla的基本概念和功能；3. 演示操作：演示Joomla的安装、配置和基本操作；4. 学生实践：学生自行安装Joomla，并进行基本操作；5. 讲解组件：讲解Joomla的组件及其功能；6. 学生实践：学生尝试使用Joomla的组件；7. 讲解模板：讲解Joomla的模板及其设计；8. 学生实践：学生尝试设计Joomla的模板；9. 讲解扩展：讲解Joomla的扩展及其编写；10. 学生实践：学生尝试编写Joomla的扩展。

六、板书设计板书设计如下：1. Joomla简介2. Joomla安装与配置3. Joomla基本操作4. Joomla组件5. Joomla模板6. Joomla扩展七、作业设计1. 简述Joomla的基本概念和功能；2. 简述Joomla的安装和配置过程；3. 简述Joomla的基本操作；4. 简述Joomla的组件及其功能；5. 简述Joomla的模板及其设计；6. 简述Joomla的扩展及其编写。

八、课后反思及拓展延伸课后反思：1. 学生对本节课知识的掌握情况；2. 教学过程中是否存在问题，如何改进；3. 学生的实践操作能力是否得到提高。

Joomla模板制作教程二

joomlajoomla模板制作joomla教程杂谈使用CSS进行布局我们将使用CSS对JOOMLA模板进行”三栏布局”.而且这个三栏布局是可变宽窄的(fluid)。

页面的宽窄布局迄今有两种主要的模式，一种是固定宽窄(fixed)，还有一种就是可变宽窄。

这两种布局模式都是控制页面宽度的。

页面宽度一直是一个问题,当人们访问你的站点的时候,. 最高分辨率往往得不到应用, 大约20%的浏览者使用800*600的分辨率.76%的人使用1024*768以上或者更高的分辨率(source:).这个统计结果表明你不仅要考虑大多数也要考虑那20%人可以正常浏览.通常,设计者喜欢用table来进行布局,表格可以方便的使用”百分比”模式进行栏宽度设置,但是这种方法有下列弊端:* 与CSS布局相比table布局有很多”额外代码”. 首当其冲的就是load时间(访问者反感) 搜索引擎也不易接受.代码通常是CSS布局的双倍尺寸,还有图像占位“spacer gifs”在使用table时也是问题. 请参考new website.* 表格不易控制difficult to maintain. 你做修改的时候要用td/tr标签做很多事情. 而CSS布局将会非常简单.* 内容无法source ordered(来源排序). 很多浏览者不是用浏览器而是用文本阅读器或者屏幕浏览器访问你的WEB.他们的阅读顺序是从左上到右下.首先他们看到的是左上栏(三栏布局来说) 而不是主要的中间栏. 而CSS使用一种所谓”source-ordered”排序内容,这意味着内容将在代码中由CSS布置. 可能你最重要的访问者就是GOOGLE了,它就是以一种屏幕阅读的方式工作的.让我们来看看使用CSS布局. 学习CSS知识有很多方法,这里推荐Brainjar’s CSS Positioning.如果你是CSS的初学者你最好看下”beginners guide to CSS”. 这里推荐:Kevin Hale‟s - An Overview of Current CSS Layout Techniqueshtmldog‟s CSS Beginner‟s GuideMulder‟s Stylesheets Tutorial我们将使用float 去定位我们的内容. 最基础的, 我们的模板文件看起来可能是这样:<?php defined( …_V ALID_MOS‟ ) or die( …Direct Access to this location is notallowed.‟ ); ?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transiti onal.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 xhref=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” /><style type=”text/css”> <!–#wrap {width:80%;}#header {}#sidebar {float:left;width:20%;}#content {float:left;width:60%;}#sidebar-2 {float:left;width:20%;}#footer {clear:both;}–> </style></head><body><div id=”wrap”><div id=”header”><?php echo $mosConfig_sitename; ?> <?php mospathway() ?></div><div id=”sidebar”><?php mosLoadModules(‟left‟);?></div><div id=”content”><?php mosLoadModules(‟top‟);?> <?php mosMainBody(); ?></div><div id=”sidebar-2″><?php mosLoadModules(‟right‟);?></div><div id=”footer”><?php include_once( $mosConfig_absolute_path .‟/includes/footer.php‟);?></div></div> <!–end of wrap–></body></html>CSS样式在这里被定义(CSS文件的具体路径), 但是具体内容还是在template_css.css 文件里面.所有定义被封装在一个类似于box的#wrap里面. 通常他们控制了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;这里是相关资料的链接An Introduction to CSS shorthand properties 关于语法.左/中/右三栏都被给出了它们自己的元素. 每部分都向左靠并形成”100%”屏幕宽度. clear:both 告诉浏览器停止浮动并且跨越三栏,实现100%宽度.为了使布局美观, 让每部分内容周围有一定的空间, 我们需要加入一些”栏空间”, 被称为”gutter”. 很不幸,这里会发生一个问题.这里有关于IE浏览器这方面特性的叙述Internet Explorer does not interpret CSS correctly.问题是计算宽度大家的方法不同. 解决这样的问题我们采用了一种not using any padding orborders on somethingthat has a width (不使用padding和borders标记)的方法. 在这一栏里面我们嵌套一个<div> 来实现gutter .下面就是例子:<div id=”sidebar”><div class=”inside”><?php mosLoadModules(‟left‟);?></div></div><div id=”content”><div class=”inside”><?php mosLoadModules(‟top‟);?><?php mosMainBody(); ?></div></div><div id=”sidebar-2″><div class=”inside”><?php mosLoadModules(‟right‟);?></div></div>在CSS样式表里面我们加入这样的设置来定义一个inside的含义:.inside {padding:10px;}这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法. 这样的方式带来两个优点, 代码短和容易控制. 然而,这并不是所谓的sourceordered . 我们必须使用一些类似于“nested float”的高级CSS技巧. 我们可以在Dan Cederholm 的书中得到更多的知识.Source ordered Three Column CSS Layout(资源排序三栏CSS布局)为了便于理解和说明,我们先看下最后的结论.[TO DO: PICTURE OF NESTED FLOAT HERE]下面的代码定义了这样的布局:页面被分割成两个主要的”浮动”块. 首先, #main-body 向左浮动, 其次, #sidebar-2 向右浮动. 代码中#main-body ”浮动”首先出现. 现在,在main-body 里面, 我们有另外两个”浮动”; #content 向右; #sidebar 向左.为了保证我们宽度设置的正确, #content”浮动”的代码放在前面.<div id=”wrap”><div id=”header”><?php echo $mosConfig_sitename; ?><?php mospathway() ?></div><div id=”main-body”><div id=”content”><div class=”inside”><?php mosLoadModules(‟top‟);?><?php mosMainBody(); ?></div></div><div id=”sidebar”><div class=”inside”><?php mosLoadModules(‟left‟);?></div></div></div> <!–end of main-body–><div id=”sidebar-2″><div class=”inside”><?php mosLoadModules(‟right‟);?></div></div><div id=”footer”> <?php include_once($mosConfig_absolute_path.‟/includes/footer.php‟);?></div></div> <!–end of wrap–>现在我们在代码内有这样的顺序:1. #content2. #sidebar3. #sidebar-2为了指明宽度, 我们需要计算一些尺寸. 比如我们打算让所有的栏边距为总宽(相对每个DIV)的25%. #sidebar-2 比较简单,只要设定width:25%. 然而, #sidebar 稍复杂,应为它的栏边距是基于其所在的<div> 的75%. 那么应该设置成33%.显然是这样, 33% 的75% = 25%#content 的宽度就是剩下的尺寸了.我们把它设置成66%. 最后的1%我们用来把它分割#content和#sidebar.样式表是这样的:#wrap {width:80%;}#header {} #footer {clear:both;}#main-body { float:left; width:75%; } #sidebar-2 { float:right; width:25%; }#content { float:right; width:66.5%; } #sidebar { float:left; width:33.5%; }.inside {padding:10px;}一些CSS设计者推荐使用一个小尺寸边栏去建立一个小的“gutter”. 这样可以帮助布局在IE中被破坏. 如果你希望如此你可以简单的设置#sidebar-2 到24%.如下面的模板代码. 它就像在一个收起的盒子里面并且可以COPY和放置在index.php文件里. 注意我们把CSS的具体语法从HEAD部分去掉了.我们把其内容用独立的CSS文件封装.<?php defined( …_V ALID_MOS‟ ) or die( …Direct Access to this location is notallowed.‟ ); ?><!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><body><div id=”wrap”><div id=”header”><?php echo $mosConfig_sitename; ?><?php mospathway() ?></div><div id=”main-body”><div id=”content”><div class=”inside”><?php mosLoadModules(‟top‟);?><?php mosMainBody(); ?></div></div><div id=”sidebar”><div class=”inside”><?php mosLoadModules(‟left‟);?></div></div></div> <!–end of main-body–><div id=”sidebar-2″><div class=”inside”><?php mosLoadModules(‟right‟);?></div></div><div id=”footer”> <?php include_once($mosConfig_absolute_path.‟/includes/footer.php‟);?></div></div> <!–end of wrap–></body> </html>{mostitle=The Default Joomla CSS}预设置的Joomla CSS完全用CSS实现布局看上去很遥远.它将给我们展示一个完美的页面, 现在我们将加入一些标准格式. 我们也会把所有的CSS代码从index.php文件分离,并把它们放入到一个独立的CSS文件当中.尽管这会让你的站点稍微有点慢, 因为你要为独立的CSS文件花费一定的开销, 它们都会在template_css.css 文件中引入, 下面是一个例子:@import url(”layout.css”);@import url(”customize.css”);早一些时间,我们使用@import 因为Netscape 4 不能理解这样的命令. 它也不理解CSS语法, 因此它会按照文本浏览器的方式来呈现结果.所有关于layout 的布局将在layout.css 文件中描述. 一旦这个文件被建立,当需要对此类样式做修改时只需要对次文件做相应的修改.color.css 主要是反映配色方案的. 我们可以很容易的对这些颜色设置进行“color packs”打包. 最后关于基本布局和JOOMLA样式都在customize.css 文件中定义.我们的layout.css 文件现在是这样的:body {text-align:center;}#wrap {width:80%;margin:0 auto;text-align:left;}#header {text-align:left;}#footer {clear:both;}#main-body {float:left;width:75%;}#sidebar-2 {float:right;width:25%;overflow:hidden;margin-left:-3px;}#content {float:right;width:66.5%;overflow:hidden;}#sidebar {float:left;width:33.5%;overflow:hidden;}.inside {padding:10px;}我们要对有居中对齐要求的页面进行一些小的Hack. 这主要是由于Internet Explorer浏览器. 对于大多数的浏览器只要这样定义margin:010%; 来居中对齐页面, 但是IE浏览器不能识别这样的设定. 因此我们必须先对齐整个页面的文本“然后再对齐此栏的背景?这里我们还定义了两个规则,一是在每栏定义一个overflow:hidden ,用来让页面分离减小其宽度,其次,我们加入了一个”压缩边界”设置sidebar-2. 这完全是为了适应IE浏览器在解释CSS时的缺陷.我们可以接受这种”仅仅为了IE”而做的Hack,* html #sidebar-2 {margin-left:-3px;}然而, hacks 通常带来问题. 总比(作者观点) 去适应所有的浏览器要好些, 毕竟, 它只有3个像素.在customize.css 文件的开始部分,我们将设置一些全局的定义通常叫做”global reset”.* {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 andleft-justified.字体大小被设置成76.1%. 这也是为了在不同浏览器访问时自适应屏幕分辨率. 字体的单位都设置成em. 字高line-height:1.3em设定更便于阅读. 这意味着页面可以适应不同访问者的不同页面分辨率. 这里有详细的讨论:An experiment in typography at The Noodle Incident (Owen Briggs)最后我们加入背景颜色设定,得到下图的显示效果.在Joomla 1.0.8默认自带演示安装完毕后, 这个模板的样子:1st version of blank joomla template请注意边栏并没有达到它们的底部. 这是因为要根据页面的具体内容, 我们看到左右栏各有一个红色和白色的空白区域. 如果我们设定整个模板的背景色是白色.我们如果需要给一个栏目加上一个BOX. 如果希望给块加上颜色, 或者单独封装, 你就要使用一个与标题垂直的背景. 这种技术被称为”Faux Columns”这里有详细描述Douglas Bowman and Eric Meyer.[TO DO: DESCRIPTION OF FAUX COLUMNS HERE]很遗憾, 在IE里面这种技术也带来了一些小麻烦. 某些情况下, 栏背景可能会小时消失. 通常叫做躲猫猫错误“Peekaboo bug”,这里有详细的描述Position Is Everything. 这里是解决办法Holly Hack (指定一个height 是1% 在使用IE时). 下面是IE6.0是使用!Important 进行修改的代码. 如果不进行这样的Hack,IE可能识别就有问题.#wrap{ border:1px solid #999; background: url(../images/threecol-r.gif) repeat-y75% 0; height:100% !Important;height:1%; }#wrap-inner { background: url(../images/threecol-l.gif) repeat-y 25.125% 0;height:100% !Important;height:1%; }请注意使用IE浏览器展示一些屏幕宽度小于600像素的情况, 布局会混乱. 我们也可以定义一个minimum width 来解决,不过这里就当成一个练习留给读者吧(!-_-) .Joomla 特定的CSS写这这些东西的时候, JOOMLA当前的稳定版本是 1.0.X series. 这个版本还是使用table来输出main body部分的重要模块.关于这些table的相关CSS信息. 下面是清单. 注意它不包括一些主要的页面标记H1, H2, p, ul, a, form 等等.#active_menu#blockrandom#contact_email_copy#contact_text#emailForm#mod_login_password#mod_login_remember#mod_login_username#poll#search_ordering#search_searchword#searchphraseall#searchphraseany#searchphraseexact#voteid1,#voteid2…..adminform.article_seperator.back_button.blog.blog_more.blogsection.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.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 链接.这并不难理解, 这常常使绝大多数的样式应用比较容易,你也不希望看到有很多的特例.一些有价值的链接:此刻我们的模板使用了很多table, 实际上多于20个! 早期, 这会导致页面访问慢和难以变更. 为了减少table 我们使用$style标记在index.php 中调用组件.分享到新浪微博阅读(840)┊评论(8)┊收藏(0)┊转载┊打印┊举报已投稿到：排行榜圈子转载列表：转载转载是分享博文的一种常用方式...前一篇：09joomla 模板后一篇：VIYO - January 09 Joomla Template评论重要提示：警惕虚假中奖信息，点击查看详情新浪开奖汽车手机马上领取[发评论]chengnuomima2009-03-13 18:51:48 [举报]欢迎指教新浪网友2009-03-13 18:52:58 [举报]joomla很好很强大新浪网友2009-03-13 18:53:58 [举报]感谢分享,共同交流新浪网友2009-03-13 18:54:32 [举报]好帖,请继续新浪网友2009-03-15 13:18:43 [举报]新浪网友2009-03-15 13:19:08 [举报]新浪网友2009-03-21 15:37:44 [举报]新浪网友2009-05-01 12:56:20 [举报]感谢，学习了发评论随时随地抢沙发！心动开奖分秒有礼物插入表情登录名：密码：找回密码注册记住登录状态建议在网吧/公用电脑上取消该选项昵称：验证码：请点击后输入验证码收听验证码匿名评论发评论以上网友发言只代表其个人观点，不代表新浪网的观点或立场。

joomla1.5模块开发和插件开发详解带实例

joomla1.5模块开发和插件开发详解带实例这是⼀个模块和插件开发实例详解⽂档,模块实现的是图⽚幻灯⽚⽅式切换,图⽚是⾃带的banner组件管理器来管理,对于图⽚可以只显⽰某⼀个分类下⾯的,切换⽅式可以选择多种,插件就是实现如何过滤⽂章中出现的email,凡是写了email的就⾃动过滤.从分析来看,是没有什么难度的,这⾥主要是开发的步骤,我在这⾥从开头到⼀个开发,打包成可以供所有joomla安装的zip⽂件为⽌,算是⼀个功能完成.　1.建⽴模块⽂件结构,样式如下图的⽂件结构Mod_banner模块⽂件夹,所有模块必须以mod_为前缀.banner就是模块名称Images⽂件夹,⽤来放样式中⽤的图⽚还有模块所需的jquery库,jquery插件,减少⽂件夹数量,就不单独建⽂件夹了.Tmpl 模块模版⽂件夹.Default.php 模版显⽰样式⽂件,必须的⽂件.Index.html 防⽌⽂件直接被调⽤,⽤于安全考虑.Helper.php 功能实现⽂件,⾥⾯主要写功能实现.Index.html 防⽌⽂件被直接调⽤,所有模块⽂件夹,⼦⽂件夹都应该加上这个⽂件.Mod_banner.php 模块⼊⼝⽂件,必须的⽂件Mod_banner.xml 参数配置和打包安装⽂件2.⽂件建⽴好以后,先来写xml这个⽂件吧,内容如下://后边是注释<?xml version="1.0" encoding="utf-8"?><install type="module" version="1.5.0"><name>Banner Change</name>//模块显⽰名称<author>Yoby</author>//作者<creationDate>2012 07</creationDate>//创建⽇期<copyright>Copyright (C) 2012 - 2020 Open Source Matters. All rights reserved.</copyright>//版权<license>/licenses/gpl-2.0.html GNU/GPL</license>//软件协议<authorEmail>logove@</authorEmail>//作者邮箱<authorUrl></authorUrl>//插件连接地址<version>1.5.0</version>//插件版本<description>Banner Change Module !</description>//模块功能描述<files>//⽤来描述模块的所有⽤到的⽂件,在安装的时候根据这个来复制到模块对应路径<filename module="mod_banner">mod_banner.php</filename> //⽂件<filename module="mod_banner">helper.php</filename><filename module="mod_banner">index.html</filename><folder>tmpl</folder> //⽂件夹,⼦⽂件和⽂件夹不⽤再次描述<folder>images</folder></files><params addpath="/administrator/components/com_banners/elements">//模块配置参数,addpath是⽤来加载组件⾥⾯定义的表单元素,这⾥是⼴告的分类<param name="change" type="list" default="0" label="Change Mode">//list列表类型表单元素,这⾥是⼴告切换样式,有3种默认,数字样式,按钮样式<option value="0">Default</option><option value="1">Number</option><option value="2">Button</option></param><param name="changetime" type="text" default="3000" label="Change Time (ms)"/>//⽂本框类型,这⾥是切换时间,微秒,1000为1秒<param name="adnumber" type="text" default="4" label="AD Number"/>//⼴告显⽰数量<param name="catid" type="category" section="com_banner" default="" label="Category" />//⼴告分类,这⾥⽤到了banner组件的⼴告分类<param name="width" type="text" default="468" label="AD Width"/>//显⽰⼴告宽度<param name="height" type="text" default="60" label="AD Height"/>//显⽰⼴告⾼度<param name="moduleclass_sfx" type="text" default="" label="Module Class Suffix"/>//模块显⽰样式附加类</params><params group="advanced"> //⾼级配置,⼀般模块都加上这个配置参数,保持和官⽅⼀样标准<param name="cache" type="list" default="0" label="Caching" description="Select whether to cache the content of this module"> //是否使⽤缓存<option value="1">Use global</option><option value="0">No caching</option></param><param name="cache_time" type="text" default="900" label="Cache Time" description="The time before the module is recached" />//缓存时间</params></install>3.mod_banner.php⽂件和helper.php⽂件编写Mod_banner.php是⼊⼝⽂件,模块就是从这⾥执⾏的,第⼀⾏代码 defined( '_JEXEC' ) or die( 'Restricted access' );这是为了防⽌⽂件被其他程序随便调⽤,出于安全考虑,所有joomla组件插件模块等php⽂件都应该开头写上这⼀⾏代码.第⼆⾏代码 require_once (dirname(__FILE__).DS.'helper.php');加载helper.php功能⽂件,⾥⾯定义了这个模块所实现的功能,主要是数据处理,最后返回数据处理结果.第三⾏ $list = modBannerHelper::getList($params);这⾥是返回helper.php⾥⾯函数 getlist结果,这⾥是⼴告数据不⼀样的模块,这⾥可以写不同的返回结果,最后⼀⾏,require(JModuleHelper::getLayoutPath('mod_banner'));通过助⼿类提供的函数加载模版,必须这样写,参数就是模块名称.每个组件的⼊⼝⽂件⾄少包括第⼀⾏,最后⼀⾏.第⼆⾏只有⽤到助⼿⽂件才需要写.第三⾏可以根据实际功能来写,还可以添加更多代码来实现.Helper.php⽂件是⼀个类,定义格式class modBannerHelper{function custom(){//content}}⾥⾯的⽅法就是⽤来做数据处理或功能的,返回值供模版使⽤.4.default.php,模块模版⽂件,主要就是前台显⽰布局,有些模块把所有的功能处理也写在这⾥,这个⽂件是模块必须的,⼀般混写HTML和PHP代码.5.总结模块开发:A.模块配置在xml⽂件中定义,在helper.php或default.php中调⽤,通过$params->get('custom')读取配置参数在程序中应⽤.B.数据处理中的数据库连接步骤;$db = JFactory::getDBO(); //建⽴数据库连接$query = "select * from #__table"; //SQL查询语句$db->setQuery($query); //执⾏查询$rs = $db->LoadObjectList();//得到结果集对象C.对建⽴好的模块压缩成zip⽂件,就得到了标准模块.6.截图后台参数说明,change module显⽰样式切换,有三种;change time⾃动切换时间,默认3s;ad number设置⼴告数量,对于数字有效;item类别,不选择就是所有⼴告类;Ad width,⼴告宽度,尽量和图⽚宽度⼀样Ad height,⼴告⾼度;Css,这⾥可以⽤⼀个类来些样式⾼级参数是设置缓存和时间的.前台样式图,三种⽂章内容邮箱地址过滤插件开发过程:1.定义插件⽂件,分别是插件⽂件filter.php和安装配置⽂件filter.xml.2.先来写配置⽂件,基本上joomla配置⽂件都有相似的地⽅,内容如下<?xml version="1.0" encoding="utf-8"?><install version="1.5" method="upgrade" type="plugin" group="content">//定义插件为content<name>Filter</name>//插件名字<creationDate>2012-07-31</creationDate>//插件⽇期<author>Yoby</author>//作者<authorEmail>baixy@</authorEmail>//邮箱<authorUrl></authorUrl>//⽹址<copyright>Copyright (C) 2012 Open Source Matters. All rights reserved.</copyright> //版权<license>GUN</license>//软件协议<version>1.0</version>//软件版本<description>This is filter email plugin !</description>//描述<files><filename plugin="filter">filter.php</filename>//安装⽂件,还有其他的都需要列出来</files><params>//配置参数列表,本插件没有⽤到,但是预留⼀个id<param name="exid" type="text" default="" label="ID" description="description" />//#⽂本框</params></install>基本上⼀个配置安装⽂件就完成了.接着是定义插件,内容模式如下:defined('_JEXEC') or die;//防⽌其他程序加载$mainframe->registerEvent('onPrepareContent', 'plgContentFilter');//注册⼀个事件,这⾥的onPrepareContent是输出⽂章之前触发事件function plgContentFilter(&$row, &$params, $page=0) //触发的函数{if (is_object($row)) {//判断是否是对象记录集return plgFilter($row->text, $params);}return plgFilter($row, $params);}function plgFilter(&$text, &$params){$text = preg_replace("/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/",'',$text); //正则替换邮箱为空return true;}3.将这两个⽂件压缩成zip格式,不需要⽂件夹,直接压缩,然后就可以安装了.截图如下后台编辑带有邮箱⽂章前台显⽰⾃动替换掉了邮箱最后附上⽂件树形结构图;内容中代码没有使⽤编辑器,需要代码插件的下载附件吧.包括开发⽂档哦.下载地址:最详细的开发⽂档,例⼦说明⼀切,还有注释,只适合新⼿,⽜⼈绕⾏!by Yoby编辑。