和joomla模板开发死磕

学习使用Joomla进行网站开发与管理随着互联网的迅速发展，网站已成为人们获取信息、交流和展示自己的重要渠道。

如今，越来越多的企业和个人开始意识到拥有自己的网站的重要性，于是网站开发和管理的需求也日益增加。

对于那些没有专业编程知识的人来说，学习一些简单易用的网站开发工具成为了首选，而Joomla就是其中一个被广泛应用的开源内容管理系统。

Joomla是一个强大的网站开发框架，拥有丰富的功能和灵活的扩展性。

从安装到配置，再到使用和管理，Joomla都提供了详细的指导文档和丰富的在线社区，使得学习和掌握该系统变得相对容易。

下面将介绍一些学习使用Joomla进行网站开发与管理的基础知识。

首先，学习Joomla前，你需要了解一些基本的网站开发常识，比如HTML、CSS和PHP等。

虽然Joomla提供了用户友好的后台管理界面，但了解这些基本知识仍然有助于你更好地理解和修改网站的布局和风格。

其次，了解Joomla的安装和配置是学习的第一步。

你需要下载最新的Joomla 安装包，并将其解压到你的Web服务器目录下。

通过访问该目录下的安装脚本，你可以根据提示完成Joomla的基本配置，比如数据库连接和网站名称等。

完成这一步后，你就可以通过访问你的网站URL来运行Joomla了。

接下来，你需要熟悉Joomla的后台管理界面。

通过登录后台，你可以访问和管理网站的各种功能和模块。

在后台管理中，你可以添加和编辑文章、创建分类和菜单、安装和管理扩展等等。

Joomla提供了丰富的功能和选项，你可以根据自己的需求来进行配置和调整。

在学习Joomla期间，你还应该了解一些常用的扩展和模板。

扩展是Joomla的强大功能之一，你可以通过安装和配置不同的扩展来为网站增加各种额外的功能。

比如，你可以安装一个图片展示的扩展，让你的网站更加生动和吸引人。

同时，模板也是非常重要的，它决定了网站的整体布局和样式。

Joomla提供了一些默认的模板，你也可以根据需要下载和安装其他的模板。

【开发篇】Joomla模块+组件开发简介Joomla!是一套在国内外相当知名的内容管理系统（Content Management System, CMS），它属于Portal（企业入口网站）类型，顾名思义，就是比较适合作为商业类型的网站程序。

Joomla!是使用PHP语言加上MySQL数据库所开发的软件系统，可以在Linux、Windows、MacOSX等各种不同的平台上执行。

目前是由Open Source Matters ()这个开放源码组织进行开发与支持。

我用Joomla框架开发项目已有1年多，所以对于joomla还是有些了解的。

下面我将给大家介绍下我在以前项目中开发的一个比较有用的模块功能，以及相关技术与基本思想。

网站的实例与显示效果可以参考/网站主页上的focus on 模块，当然，我要解说一下，不然你是发现不了什么效果的。

这个模块的功能根据后台的功能在所有存储在jos_content表里的文章中，选出你要显示在前台的文章标题，可以编辑模块来实现对这些文章进行排序，增加新文章，删除文章的操作，这样你只要在后台选择你想要发布的文章就可以显示在页面上了。

实现方式大家要是开发过joomla的话应该知道，joomla中模块里的xml配置文件有params 参数的设置，而其中type的类型是否起作用，是根据目录/libraries/joomla/html/parameter/element/ 文件夹下的文件所决定的，所以这样我们可以参考这些文件写出一个我们自己定义的类型出来。

所以，只要明白这个，这个模块就可以很容易的实现了。

思路做法：自定义类型，生成一个弹框的按钮，用iframe 连接到自己写的component 中，component中对文章进行增，删，改，查的操作等等。

然后把选中的文章ID 跟排序顺序放到你自定义的类型value里面，模块中取得值进行处理。

基本就是这样。

其实模块写起来很简单，主要还是所调用的component组件的处理比较麻烦。

使用Joomla创建在线课程网站的详细指南及优缺点解析Joomla是一种功能强大且流行的内容管理系统（CMS），它可以用于创建各种类型的网站，包括在线课程网站。

本文将提供一个详细的指南，以帮助您了解如何使用Joomla创建一个高效的在线课程网站，并针对使用Joomla的优缺点进行解析。

一、Joomla介绍Joomla是一套免费、开源且易于使用的内容管理系统，它允许您轻松创建和管理网站。

它提供了丰富的插件和模板库，使您能够定制自己的网站。

作为一个功能强大的CMS，Joomla在创建在线课程网站方面具备很多潜力。

二、设置Joomla要开始创建在线课程网站，首先您需要下载和安装Joomla。

您可以从Joomla官方网站上下载最新版本的Joomla，并按照官方提供的安装指南进行安装。

安装完成后，您将能够访问Joomla的后台管理界面。

三、选择合适的模板在Joomla的后台管理界面中，您可以选择合适的模板来呈现您的在线课程网站。

Joomla提供了大量的免费和付费模板供您选择，您可以根据自己的需求和喜好选择一个适合您网站主题的模板。

选择合适的模板非常重要，因为它将为用户提供最佳的网站体验。

四、安装和配置扩展插件Joomla提供了各种扩展插件，可以增加您网站的功能和特性。

在创建在线课程网站时，您可以安装和配置相关的扩展插件，以便添加课程管理、学生注册和登录、在线论坛等功能。

在Joomla的后台管理界面中，您可以搜索并安装适合您需求的插件，并根据插件提供的指南进行配置。

五、创建并管理课程内容在Joomla中，您可以使用“文章”功能来创建和管理您的课程内容。

您可以创建不同的文章，并将其组织成课程模块。

每个课程模块可以包含课程介绍、课程大纲、教学资料等内容。

通过使用Joomla的文章功能，您可以轻松地组织和管理您的课程内容，为学生提供最佳的学习体验。

六、优缺点解析使用Joomla创建在线课程网站有以下优点：1. 简单易用：Joomla提供了直观的用户界面和易于理解的功能，使得创建和管理在线课程网站变得简单。

第一章Joomla!扩展开发：概况你以前开发过动态网站但你的朋友告诉你有关Joomla!的事，所以你决定试一试。

从美食网上那些著名的厨师中得到灵感后，你想建立一个简单的关于餐厅的网站。

这个网站的安装比你期望要建立的内容管理系统要快速和平稳。

当你找到一个精美的模板并添加了一些菜单和一些内容后，你开始考虑增加一些新的特性可以给你带来更多的访问量，甚至是利润。

之后，你安装了购物车来买书，一个论坛来收集意见和一些边栏广告。

为什么扩展JoomlaJoomla!不但能够处理内容文章，而且允许你干净整合各种复杂的应用。

开发者为Joomla!开发各种扩展，如购物车、论坛、职位发布等。

所有这些扩展能够运行在单个数据库、模板和核心。

我们开发出来的扩展，界面是完全统一的。

当你正确地开发扩展后，你就不用登录数据库和做其他基本的配置。

另外，你也可以分发你自己开发的扩展给别人与别人分享你的成果，不需要另外的编程和数据库操作。

自定义VS 扩展Joomla!的代码是设计成可扩展的而不是直接修改它的核心代码。

当有升级版本或者有补丁的时候，Joomla!才会升级它本身的核心代码，而你的扩展是不会被覆盖的。

如何扩展JoomlaJoomla!支持三类扩展，每一类都有其特殊的用途。

组件组件是最基本的，组件就是你所看到的页面的主要部分。

Joomla!的设计是为每个页面加载和运行一个组件。

因此，Joomla!核心的内容管理功能本身也是一个组件(例如: com_content)。

组件通常有强大的后台管理功能。

后台通常用来创建和更新数据库记录。

你也可以通过它允许网站管理员去上传图片或者视频文件。

模块相对于组件而言，一个页面可以有很多的模块。

模块一般由边栏的元素或者是内容菜单组成，模块显示组件的内容，但它们不是页面的主要内容。

Joomla! 也支持不需要编程的内容模块(例如: 自定义模块)。

模块后台的控制是有限的，一般由一些基本的格式组成。

插件当网站需要插入一些代码来实现某些逻辑时，可以由插件实现（以前叫做Mambot）。

joomla 模板Joomla 模板。

Joomla 是一款非常受欢迎的开源内容管理系统（CMS），它可以帮助用户轻松创建和管理网站内容。

而在 Joomla 中，模板则扮演着非常重要的角色，它决定了网站的外观和用户体验。

本文将介绍 Joomla 模板的基本概念、常见类型以及如何选择和定制适合自己网站的模板。

首先，让我们来了解一下 Joomla 模板的基本概念。

模板是用来控制网站外观的文件集合，它包括 HTML、CSS、JavaScript 等文件，通过这些文件来定义网站的布局、颜色、字体等方面。

Joomla 的模板采用了响应式设计，可以适应不同设备上的显示，从而提供更好的用户体验。

在 Joomla 中，常见的模板类型包括前端模板和后端模板。

前端模板是用户访问网站时看到的页面，它决定了网站的外观和交互方式；而后端模板则是用来管理网站后台的界面，包括文章管理、用户管理等功能。

选择一个适合自己网站的 Joomla 模板非常重要。

首先，要考虑模板的设计风格是否与自己网站的定位和内容相符合，比如，如果是企业网站，就需要选择简洁大方、专业的模板；如果是个人博客，就可以选择更加个性化、轻松活泼的模板。

其次，要考虑模板的响应式设计和浏览器兼容性，确保网站能够在不同设备上正常显示和使用。

另外，还要考虑模板的功能和扩展性，是否支持自定义布局、自定义颜色等功能，以及是否能够方便地集成其他 Joomla 扩展。

如果找不到满足自己需求的 Joomla 模板，也可以考虑定制一个。

定制模板可以根据自己的需求来调整布局、颜色、字体等方面，从而实现个性化的网站设计。

在定制模板时，可以参考一些优秀的Joomla 模板，从中借鉴设计灵感和最佳实践，同时也要注意保持网站的整体风格和一致性。

总之，Joomla 模板在网站建设中起着至关重要的作用，它不仅影响着网站的外观和用户体验，还关系着网站的功能和扩展性。

因此，选择和定制适合自己网站的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!的模板系统并告诉你能做些什么。

模板的作用是什么?模板控制了站点的总体显示和布局。

它结合站点CSS提供了整合各种通用元素、模块和组件的架构。

站点的前台和后台都有模板。

当 Joomla! 首次安装时它自动包含了几个模板。

在其他网站你能找到更多模板。

某些模板是免费的，某些则需要购买。

另外，某些开发者可提供模板定制。

你当然也能自己开发模板。

模板通过模板管理器来管理，后者可在你站点管理后台的扩展菜单上找到。

Joomla!为何使用模板？一个初学者的真正指南！Joomla!设计的方式是剥离出核心任务，涉及生成使用软件高效维护的网站。

任务之一就是创建站点美学（外观、感觉和布局）。

这包括诸如在给定页面放置何种内容元素（组件、模块和插件）的决策。

当生成一个web页面，多数元素的定位仍保持不变（菜单，横幅定位，边栏等）。

此外，你期望为每个页面创建同样的外观（字体，头部样式，色彩设计等）。

站点的某些单元你也许想通过改变口味来提示这些页面的不同用途（例如博客单元）。

这需要一些规划，但是一旦你确定了整站的布局，你需要自己生成每个内容页。

这就需要模板了。

你可以单独为每个页面书写代码，或为站点的每个主体单元使用模板，这样当你需要创建一个新页面的时候你就只需要“填空”了。

好，也许这不是很简单，但是教程就是设计用来引导你有效使用模板，从如何开始使用模板，到如何创建自己的模板结束。

1. 使用Joomla! 提供的模板之一2. 从互联网下载免费模板3. 如果需要可考虑付费模板总结–模板控制了站点的外观，并且简化了你创建新页面的工作。

更多细节请参阅下章，“我能对模板做些什么？”模板用来操控提交给浏览器的内容的方式。

这里有些方法你可以用来部署到你的Joomla!站点。

布局模板就是设定你站点主体布局设计的地方。

这包括放置多种不同的元素（组件，模块和插件），它们组合成不同类型的内容。

例如：1. 不同的菜单(你可以从现有选项选择，也可以创建自己的菜单)2. 广告横幅3. 投票4. 页面的主体单元(你可以选择不同的样式比如典型的博客布局或一个新文章等等)如果模板设计用来提供选择，你就能“动态”地改变站点内容布置，或许把主菜单放到页面的右侧或左侧。

使用Joomla构建一个功能强大的商业网站的步骤Joomla是一种广泛使用的内容管理系统(CMS)，它提供了一系列便利的工具和功能，可以帮助用户快速构建强大的商业网站。

以下是使用Joomla构建一个功能强大的商业网站的步骤：1. 下载和安装Joomla首先，你需要访问Joomla官方网站并下载最新版的Joomla软件包。

将软件包解压缩，并将文件上传到你的服务器。

然后在浏览器中输入你的网站域名，按照安装向导的指示进行Joomla的安装。

2. 配置Joomla基本设置一旦Joomla安装完毕，你需要进行一些基本的配置。

在Joomla 的后台管理界面，你可以设置网站名称、描述、时区、语言等基本设置。

此外，你还可以选择是否启用搜索引擎优化(SEO)以提升网站在搜索引擎中的排名。

3. 安装并配置模板Joomla提供了许多免费和付费的模板供用户选择。

你可以在Joomla的官方模板库或其他第三方网站上找到合适的模板。

下载并安装你选择的模板，并在Joomla后台管理界面激活该模板。

然后，你可以对模板进行一些自定义设置，如颜色、布局、字体等，以满足你的商业网站需求。

4. 创建网站结构与导航在Joomla中，你可以使用“菜单”来创建网站的结构和导航。

导航菜单可以帮助用户快速浏览和访问网站的不同页面。

你可以创建主菜单和子菜单，并设置菜单项的链接、文本和样式。

通过精心设计和组织菜单，你可以使用户轻松找到他们所需的信息。

5. 添加和管理内容一个商业网站需要有丰富的内容，Joomla提供了方便的工具来添加和管理内容。

你可以创建文章、图片、视频等多种类型的内容，并对其进行分类和标签化。

另外，你还可以为内容添加标签、插件和模块，以增加交互性和功能性。

6. 安装并配置扩展插件Joomla拥有众多的扩展插件，可以增加网站的功能和特性。

你可以在Joomla的扩展库中找到各种类型的插件，如社交分享、在线支付、图形统计等。

选择和安装适合你商业网站需求的插件，并根据插件提供的文档进行配置。

Joomla 模块开发模块是页面扩展轻量级方式，相对组件更为灵活。

模块通常用来做页面中不太复杂的一小块，并且能够跨越不同的组件。

有时候模块可以跟组件密切联系，比如说最新新闻模块，这个模块显示来自com_content组件的最新的条目，由于它是一个模块，所以它甚至可以在com_content组件没有激活的情况下使用。

站点的菜单是模块，而这些模块作为Joomla和核心应用，并没有和任何组件相关联。

模块不必和任何特定的事情相关联，并且可以是你想在一些页面上显示的静态html,text。

怎样编写模块Hello World Module - Basic Module模块是页面扩展轻量级方式，相对组件更为灵活。

模块通常用来做页面中不太复杂的一小块，并且能够跨越不同的组件。

在Joomla的标准安装后，你可以看到许多模块的例子，菜单，最新新闻，登录框等等这个教程阐述如何编写一个简单的Hello world 模块，通过这个教程，你可以学到一个模块的基本文件结构。

而通过基本机构可以扩展生成更为复杂的模块。

文件架构标准的模块开发共有四个基本文件，mod_helloworld.php - 模块的主入口，主要执行一些必须的初始化工作，调用helper或缺必要的数据，并引入模板。

mod_helloworld.xml - 这个文件主要包含模块的信息，主要定义安装时必须的文件以及模块的参数。

helper.php - 这个文件包含helper 类，这个类主要用来获取模块要显示的信息（通常是从数据库或其他的源）tmpl/default.php - 模块的模板，这个文件采用返回的数据生成页面要显示的html创建mod_helloworld.phpmod_helloworld.php 主要进行以下工作：引入文件，文件包含是获取必要数据的类调用合适的helper类，并返回数据。

引入模板The helper class is defined in our helper.php file. This file is included with a require_once statement:helper 类在中定义，这个文件通过require_once 声明来引入：require_once( dirname(__FILE__).DS.'helper.php' );我们的helper类现在还没定义，但是以后你可以看到，包含一个方法getHello()。

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的组合。

使用Joomla搭建在线艺术课程网站的指南及优缺点评价引言：在当今数字化时代，线上教育逐渐成为一种重要的学习方式。

针对艺术教育领域，搭建一个功能齐全、易于管理的在线艺术课程网站是非常重要的。

本文将介绍如何使用Joomla来构建一个在线艺术课程网站，并对其优缺点进行评价。

一、Joomla简介：Joomla是一款开源的内容管理系统，通过它可以轻松地构建和管理各种类型的网站。

Joomla具有丰富的扩展功能，用户可以根据自己的需求选择并安装相应的组件、模块和插件。

这使得Joomla成为搭建在线艺术课程网站的一个理想选择。

二、Joomla的安装和基本设置：1. 下载和安装Joomla：首先，需要从官方网站下载Joomla最新版本的安装文件。

下载完成后，按照提示进行安装。

安装完成后，可以通过访问网址，进入Joomla的后台管理界面。

2. 基本设置：进入Joomla后台管理界面后，需要进行一些基本设置，例如设置网站名称、描述、默认语言以及选择合适的模板等等。

这些设置可以根据自己的需求来调整，以满足网站的整体风格和用户体验。

三、创建课程分类和页面：1. 创建课程分类：在Joomla中，可以使用“分类”功能来对课程进行分类和组织。

可以根据不同的艺术类型或者课程主题，创建相应的分类。

通过创建课程分类，可以更好地对课程进行管理，方便用户浏览和选择。

2. 创建课程页面：在相应的分类下，可以创建具体的课程页面。

在创建课程页面时，需要填写相关信息，如课程的标题、简介、讲师信息等等。

同时，可以上传与课程相关的图片或者视频等媒体文件，以提供更好的学习体验。

四、用户管理和权限设置：1. 用户管理：在Joomla中，可以对用户进行注册和管理。

通过用户管理功能，可以为每个用户创建独立的账号，以便于用户进行登录、课程购买和学习记录查看等操作。

2. 权限设置：为了增加网站的安全性，可以通过Joomla的权限设置功能对不同用户的操作权限进行限制。

手把手教你使用Joomla进行电子商务网站开发一、Joomla与电子商务网站开发简介Joomla是一款开源的内容管理系统（CMS），可用于构建各种类型的网站，包括电子商务网站。

本章将介绍Joomla的基本概念和优点，并介绍如何开始使用Joomla进行电子商务网站开发。

Joomla是一种基于PHP语言和MySQL数据库的网站开发平台。

它提供了丰富的功能和强大的扩展性，使得开发人员可以快速构建功能完备的网站。

与其他CMS相比，Joomla具有更大的灵活性和高度的可定制性。

二、安装和配置Joomla在开始使用Joomla开发电子商务网站之前，首先需要安装和配置Joomla。

本章将介绍如何下载和安装Joomla，并配置基本的网站设置。

这些设置包括网站名称、描述、语言等。

安装Joomla非常简单。

首先，从官方网站下载Joomla的最新版本。

然后，将下载的文件解压到网站根目录。

接下来，通过浏览器访问网站，按照安装向导的步骤设置数据库和管理员账号。

三、选择合适的电子商务插件Joomla本身提供了基本的网站功能，但如果需要构建一个电子商务网站，则需要安装相应的插件。

本章将介绍几种常用的电子商务插件，并选择一个适合的插件。

一种常用的电子商务插件是VirtueMart。

VirtueMart是一款功能强大的电子商务扩展，提供了购物车、支付系统、产品目录等功能。

它与Joomla的整合非常紧密，容易安装和配置。

四、创建产品目录和购物车创建产品目录是电子商务网站开发的重要一步。

本章将介绍如何使用Joomla创建产品目录，并将产品添加到目录中。

同时，还将介绍如何创建购物车功能，使用户可以方便地选择和购买产品。

在Joomla中，可以通过插件或模块来创建产品目录和购物车。

首先，需要创建一个产品目录，包括产品名称、描述、价格等信息。

然后，可以使用插件或模块将产品目录展示在网站的合适位置上。

购物车功能可以通过插件实现，使用户可以将产品添加到购物车中，并进行结算。

你以前开发过动态网站但你的朋友告诉你有关Joomla!的事，所以你决定试一试。

从美食网上那些著名的厨师中得到灵感后，你想建立一个简单的关于餐厅的网站。

这个网站的安装比你期望要建立的内容管理系统要快速和平稳。

当你找到一个精美的模板并添加了一些菜单和一些内容后，你开始考虑增加一些新的特性可以给你带来更多的访问量，甚至是利润。

之后，你安装了购物车来买书，一个论坛来收集意见和一些边栏广告。

为什么扩展JoomlaJoomla!不但能够处理内容文章，而且允许你干净整合各种复杂的应用。

开发者为Joomla!开发各种扩展，如购物车、论坛、职位发布等。

所有这些扩展能够运行在单个数据库、模板和核心。

我们开发出来的扩展，界面是完全统一的。

当你正确地开发扩展后，你就不用登录数据库和做其他基本的配置。

另外，你也可以分发你自己开发的扩展给别人与别人分享你的成果，不需要另外的编程和数据库操作。

自定义 VS 扩展Joomla!的代码是设计成可扩展的而不是直接修改它的核心代码。

当有升级版本或者有补丁的时候，Joomla!才会升级它本身的核心代码，而你的扩展是不会被覆盖的。

如何扩展JoomlaJoomla!支持三类扩展，每一类都有其特殊的用途。

组件组件是最基本的，组件就是你所看到的页面的主要部分。

Joomla!的设计是为每个页面加载和运行一个组件。

因此，Joomla!核心的内容管理功能本身也是一个组件(例如: com_content)。

组件通常有强大的后台管理功能。

后台通常用来创建和更新数据库记录。

你也可以通过它允许网站管理员去上传图片或者视频文件。

模块相对于组件而言，一个页面可以有很多的模块。

模块一般由边栏的元素或者是内容菜单组成，模块显示组件的内容，但它们不是页面的主要内容。

Joomla! 也支持不需要编程的内容模块(例如: 自定义模块)。

模块后台的控制是有限的，一般由一些基本的格式组成。

插件当网站需要插入一些代码来实现某些逻辑时，可以由插件实现（以前叫做Mambot）。

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 [举报]感谢，学习了发评论随时随地抢沙发！心动开奖分秒有礼物插入表情登录名：密码：找回密码注册记住登录状态建议在网吧/公用电脑上取消该选项昵称：验证码：请点击后输入验证码收听验证码匿名评论发评论以上网友发言只代表其个人观点，不代表新浪网的观点或立场。

Joomla模板制作实战教程【一】-创建一个简单的模板Joomla绝对是一款优秀的CMS相较一些国产CMS她始终不能占据优势地位，很多人说Joomla做模板难、Joomla不支持静态生成、Joomla执行效率低等等，但其实Joomla团队为这些东西做了很多的功夫，细细研究不难发现，Joomla模板只需要会Html+CSS就行了，Joomla的静态生成其实就是System-cache （缓存插件），当做足了优化之后，Joomla的执行效率是相当可观的，如本站（优化的方法会在后面的教程中提及）话说Joomla模板难做，这是很多入门的学习者遇上的足以让他放弃Joomla的门槛，那么我要说的是Joomla模板一点不难，它的难点根本不在于"是否会PHP，而是在于不敢钻研的心，那么为了砍掉这个所谓的“门槛”，我将为大家带来这个系列的模板实战教程。

做之前我们必须要准备这几样东西！11、持之以恒的心22、必要的HTML+CS基础知识33、熟悉了Joomla的使用方法、工作原理44、一丝不苟的工作态度。

55、认认真真的看好教程，不要急着复制粘贴。

开始我们的模板制作（以Joomla为例，完结之后会推出Joomla相关教程）安装好Joomla，在templates/目录下建立一个我们要制作的模板文件夹，命名为jk_joomlask ，这时候在后台我们尚且看不到有jk_joomlask 的这个模板选项。

*Joomla网站系统是基于utf-8编码编写的，所以以下所有操作的文件都务必保存为utf-8 编码。

第一步我们需要让其在Joomla后台中显示这个模板选项，创建文件，不要担心会不会xml，很简单，根据官方文档给出的说明，照着写便是：<xml version ="" encoding ="utf-8" >VDOCTYPE in stall PUBLIC "- All Rights Reserved.#@lice nse - Copyrighted Commercial Software#Author: JOOMLASK#Websites: This file may not be redistributed in whole or significant part.*//* */body{background : #fff ;color: #00O;font-family :Tahoma, Geneva, sans-serif ;line-height : ;font-size : 12px;}/*global*/#jk_wrapper {}/*定义每个框架的宽度、居中对齐*/#jk_wrapper .main {width : 1000px; margin : 0 auto ; }/*定义需要设定固定高度的DIV高度*/#jk_header .main { height :70px; background :black ;}#jk_nav .main { height : 63px; background :red ;}#jk_ad_top .main { height : 90px; background :yellow ;} #jk_body .main { height : 800px; background :blue ; } #jk_bottom .main { height : 170px ; background :green ;} 上述样式是给大框加进行了大体上的设定，并附加了颜色加以区分，在后面的控制中我们会把这些背景色全部去掉。