在 Joomla 中创建模板：一步一步

本教程将引导您完成从头开始创建 joomla 模板所需的步骤。 我们将解释每一个细节。 让我们开始吧！

本教程摘自 Pearson 提供的最近发布的 Joomla! 1.6：用户指南。

游戏计划 什么是Joomla模板？Joomla模板有什么特点？没有内容的模板和有内容添加到CMS的模板有什么区别？它与传统的设计流程有何不同。 HTML 网页设计流程？ Joomla 中的无表格设计有何影响？ Joomla 模板具有什么功能？使用 CSS 而不是表格按源顺序进行布局？ Joomla 中需要使用的基础知识 什么是 Joomla 核心中使用的默认样式？ 如何排列和设计圆角模块？创建模仿 JavaScript 开发的菜单效果的准系统 CSS 菜单的简单策略是什么？创建 Joomla 1.6 模板的正确步骤 什么是 Joomla! 模板？

Joomla 模板是 Joomla CMS 中控制内容呈现的一组文件。 Joomla 模板不是网站。 这是一个网站。 此外，这不被认为是一个完整的网站设计。 模板是显示 Joomla 网站的基本设计。 为了创建“完整”网站的效果，模板与 Joomla 数据库中存储的内容紧密配合。

模板经过样式设计，以便在插入内容时，它们会自动继承模板中定义的样式表的样式，包括链接样式、菜单、导航、文本大小和颜色。

使用 Joomla 等 CMS 模板有很多好处。

Joomla 完成将您的内容放置在页面上的所有工作。 只需键入新帖子即可将新信息添加到现有博客页面。 模板及其 CSS 确保样式与网站上的其他内容保持一致。 特别是，在以下情况下，内容和呈现完全分开：当使用CSS进行布局时（而不是使用index.php文件中的表格）。 这是确定网站是否符合现代网络标准的主要标准之一。 在符合标准的网站中，表格 HTML 标记保留用于显示表格数据，而不是按列布置页面。 您可以立即应用新模板，让您的网站焕然一新。 这可能不仅包括颜色和图形，还包括将内容和模块放置在不同的位置。 Localhost 的设计过程

Joomla 支持的网站上显示的网页不是静态的。 它是根据数据库中存储的内容动态生成的。 当数据库中的内容发生更改时，显示该内容的所有页面都会立即更改。 您看到的页面是由模板中查询数据库的各种 PHP 命令创建的。 模板看起来像代码行而不是内容，这在设计阶段会产生一些问题。

如今，通常使用“所见即所得”(WYSIWYG) HTML 编辑器，例如 Dreamweaver，而无需编写任何 HTML 代码。 但是，所见即所得编辑器无法显示和编辑动态页面，因此您在设计 Joomla 模板时无法使用此类编辑器。 因此，您必须手动编写模板及其 CSS 代码，并将 PHP 输出页面显示在服务页面上，该页面会随着更改而频繁更新。 如果连接足够快，这可能是一个 Web 服务器，但大多数设计者更喜欢在计算机上使用本地服务器或本地主机（例如第 1.2 章中描述的本地主机配置）来运行 Web 页面服务软件。 “下载并安装 Joomla！”

创建网页没有“正确的方法”。 你如何做取决于你的背景。 喜欢图形的人倾向于在图形程序（例如 Photoshop）中创建页面的“图像”，然后将该图像切成碎片（称为切片和切块）以在 Web 上使用。 基于技术的设计师经常直接深入研究 CSS 并开始对字体、边框和背景进行编码。 然而，如前所述，Joomla 模板设计者的局限性在于他们无法立即在同一个编辑器中看到其编码的效果。 因此您可以使用以下修改后的设置：规划过程：

将后台运行的内容加载到本地主机服务器上，以使 Joomla“运行”。 使用编辑器编辑 HTML 和 CSS，并将更改保存到服务器。 在网络浏览器中查看受您的编辑影响的页面。 本地主机服务器选项

要继续本教程，您必须安装 WampServer。 如果您尚未执行此操作，请继续安装。 我会在这里等。

托管 Web 服务器允许您在后端编辑 HTML 模板和 CSS 文件，同时前端在浏览器的单独选项卡中打开。 保存更改后，您只需刷新前端视图即可查看影响。

本地主机配置使您可以轻松地直接访问文件并使用您选择的编辑器对其进行编辑。 保存更改后，您可以刷新浏览器中的前端视图并查看影响，而无需关闭编辑器。

W3C 和无表格设计

可用性、可访问性和搜索引擎优化 (SEO) 都是当今用于描述互联网上高质量网页的短语。 事实上，可用性、可访问性和 SEO 之间存在相当大的重叠，并且表现出任何这些特征的网页通常表现出所有这三个特征。 实现这三个目标的最简单方法是使用 W3C Web 标准中指定的框架。

例如，屏幕阅读器使视障人士可以更轻松地阅读使用 HTML 语义构建的网站。 它还可以很容易地被搜索引擎蜘蛛读取。 事实上，谷歌对网站的阅读方式视而不见。 这就像使用屏幕阅读器。

要了解网络标准的来源，了解一点历史会有所帮助。 许多网页实际上是为旧版浏览器设计的。 为什么？ 自万维网诞生以来，浏览器不断发展。 每一代都推出了新功能，制造商为此提出了不同的、有时甚至是独特的标签（名称）。 尽管每个浏览器都实现相同的基本 HTML 语言，但它往往具有不同的语法或“方言”和怪癖。 新的浏览器已经出现，一些旧的浏览器已经消失（还记得 Netscape 吗？）。

另一个复杂的因素是，历史上不同的浏览器制造商（例如微软）倾向于生产浏览器。浏览器对 HTML 的解释略有不同。 因此，网页设计师必须设计网站以支持旧版浏览器而不是新浏览器。 设计师和网站所有者经常发现他们的网页在这些“旧”浏览器中正确显示很重要。 开发网页代码的 W3C 标准是为了提供一致性。 采用 W3C Web 标准的网站为可访问、易于使用和针对搜索引擎优化奠定了良好的基础。 将这些视为您房屋的建筑标准。 使用它们构建的网站更强大、更安全、更符合用户期望。 您可以使用 W3C 的 HTML 验证服务 (validator.w3.org) 检查您的页面。 它简单且免费（在验证代码时确保使用正确的 DOCTYPE）。在最简单的情况下，满足 W3C 验证的网站使用语义 HTML 并将内容与表示分离。

正确的代码

如上所述，语义正确是指网页中的HTML标签仅描述内容而不是表现形式，具体是指仅使用H1标签、H2标签等结构化成分。使用表格。纯粹用于表格数据，而不是用于布局。在语义正确性方面存在轻微妥协的一个领域是将两列或三列布局的左列和右列命名为“左”和“右”，这两个列更重要。语义上正确。如果这些只是 PHP 模板中使用的位置名称，而不是侧边栏，如果它们还用于定义 HTML 和 CSS 中的匹配类，则命名与显示相关的所有内容，以便在页面左侧查​​看是可以接受的。像这样：在下面的示例中，左侧使用 Sidebar 类设置样式，右侧使用 Sidebar 类设置样式，您可以看到它是在 Sidebar 2 中设置的样式，这是语义上正确的代码。

层叠样式表 (CSS)

它是一种使用 CSS 添加样式（字体、颜色、间距等）到 Web 文档的简单机制，它与使代码在语义上正确相结合 >

请参阅。实际操作中，请查看 CSS Zen Garden，这是一个仅进行修改的网站。修改 CSS 文件，以不同且独特的方式显示相同的 HTML 内容。 生成的页面看起来非常不同，但核心内容完全相同。

目前，使用 Joomla 设计网站在满足验证标准方面面临着重大挑战。 在 Joomla 版本 1.0.X 的第一个系列中，代码使用许多表来输出页面。 这实际上并不是如何使用 CSS 的演示，也不会生成语义上正确的代码。 由于许多组件和模块的第三方开发人员仍然使用表格来生成布局，这一事实进一步加剧了这个问题。

幸运的是，Joomla 核心开发团队在 Joomla 中意识到了这个问题。 在 Joomla 1.5 中，模板设计者可以完全覆盖核心输出（称为视图）、删除表格并以他们喜欢的任何方式自定义布局。

创建模板时，确保它是可访问的（例如，可缩放的字体大小）、易于使用（清晰的导航）并且针对搜索引擎进行了优化（源代码已排序）。应采取措施确保

创建一个简单的模板：第 1 步

要了解该模板的含义，我们首先看一下空的 Joomla 模板。

模板文件组件

本节介绍手动设置模板文件的过程。 通常，您可以使用 Joomla 安装程序来安装模板，该安装程序会执行所有这些步骤。

如果您创建自己的模板，则需要协调和配置多个文件和文件夹。 模板必须包含各种文件和文件夹。 这些文件必须放置在 Joomla 安装的 /templates/ 目录中，并且每个文件都将放置在为该模板指定的文件夹中。 如果您安装了两个名为 Element 和 Voodoo 的模板，则目录为：

/templates/element/templates/voodoo

模板的目录名称与模板的名称相同，请注意。是必要的。 – 在这种情况下，元素和巫毒。 这些名称区分大小写且不能包含空格。

模板目录中有两个关键文件：

/element/tempLateDetails.xml/element/index.php

这些文件名和位置必须完全匹配，因为这是 Joomla 核心脚本调用它们的方式。 第一个是模板 XML 文件。

这是一个 XML 格式的元数据文件，它告诉 Joomla 在加载使用此模板的网页时需要其他文件。 （注意大写的 D。）它还详细说明了作者、版权和构成模板的文件，包括使用的任何图像。

该文件的最终用途是在管理后端使用扩展安装程序时解压并安装模板。

第二个关键文件是index.php，它是生成页面的主要模板文件。

此文件是 Joomla 模板中最重要的文件。 这会布置您的网站并告诉 Joomla CMS 在哪里放置各种组件和模块。 它是 PHP 和 HTML 的组合。

几乎所有模板都使用附件。 通常（尽管在 Joomla 核心中不需要）命名和放置它们，如此处名为 Element 的模板中所示。

/element/template_thumbnail.png/element/params.ini/element/css/template.css/element/images/logo.png

这些只是示例。 模板中的常见文件包括：

/element/template_thumbnail.png — 模板的 Web 浏览器屏幕截图（通常缩放至大约 140 像素宽和 90 像素高）。 安装模板后，它将充当预览图像并显示在 Joomla 管理模板管理器中。

/element/params.ini — 存储模板参数值的文本文件。

/element/css/template.css — 模板的 CSS。 文件夹位置是可选的，但必须在index.p 中指定。.hp 文件。 您可以将其命名为任何您喜欢的名称。 通常会使用显示名称，但稍后您会发现使用其他 CSS 文件也有好处。

/element/images/logo.png – 模板附带的图像。 此外，出于组织原因，大多数设计人员将图像放置在图像文件夹中。 例如，这是一个名为 logo.png 的图像文件。

templateDetails.xml

templateDetails.xml 文件充当清单或装箱清单，其中包含属于模板的所有文件或文件夹的列表。 它还包括作者和版权等信息。 其中一些详细信息在模板管理器的管理后端中可见。 下面是一个 XML 文件示例：

960TemplateTutorialStep1 1/10/10巴里·诺斯[email protected]://www.compassdesigns.net版权所有 (C) 2005 – 2010 Barrie NorthGPL1.6.0四个教程模板中自 Joomla 1.6 以来的第一个 – 用户指南index.phptemplateDetails.xmlparams.ini imagescss面包屑左右顶部 页脚调试

<p> 蓝色红色

让我们看一下其中一些行的含义：

— XML 文档的内容是后端安装程序的说明。 选项 type=”template” 告诉安装程序您正在安装模板并且它适用于 Joomla 1.6。 960TemplateTutorialStep1 — 此行定义模板的名称。 您在此处输入的名称也将用于在模板目录中创建目录。 因此，不要包含文件系统无法处理的字符，例如空格。 如果手动安装，则必须创建与模板同名的目录。 – 模板的创建日期。 这是一个自由格式字段，可以是任何内容，例如 May 2005、June 8, 1978 或 January 1, 2004。 – 这是该模板创建者的名字，也可能是您的名字。 – 该元素包含版权信息。 – 这可以链接到这个模板创建者的电子邮件地址。 ——作者网站的 URL。 ——这是模板版本。 -这是模板中使用的各种文件的列表。 文件

模板中使用的内容使用 和 标签进行布局，如下所示：

index.phptemplateDetails.xml参数.ini图像css

“文件”部分包含所有常用文件，例如模板的 PHP 源文件或模板预览的缩略图。 本节中列出的每个文件都被标签包围。 您还可以使用此标签来包含整个文件夹，例如图像文件夹。

– 指示模板内可用模块的位置。 这是在模板中定义的页面位置（顶部、左侧、右侧等）列表，可以使用模块管理器中的位置下拉菜单进行配置，以便模块显示。 此列表中的职位名称必须与为 index.php 中列出的每个职位生成内容的 PHP 代码完全匹配。 – 本节介绍可以在后端设置并作为全局变量传递的参数，以启用高级模板功能，例如更改模板的配色方案。 Index.phpp

index.php 文件到底包含什么？它是 HTML 和 PHP 的组合，决定了页面布局和呈现的所有内容。

让我们看一下index.php文件顶部的DOCTYPE，它是实现有效模板的关键元素。 这是每个网页顶部的代码。 在页面顶部，将其添加到您的模板中：

第一个 PHP 语句仅显示版权/许可证，并确保文件无法直接访问以确保安全。

网页的DOCTYPE决定了浏览器如何显示网页——它如何处理各种HTML标签，更重要的是它如何解释CSS，它是基本组件之一。 A List Apart 的以下观察应该可以澄清这一情况。

在这里，您将开始看到“严格”和“过渡”一词（通常是 float:left 和 float:right），以指示是否包含遗留代码。 基本上，自从网络诞生以来，不同的浏览器就支持不同版本的 HTML 标签和 CSS。 例如，Internet Explorer 6 及更早版本无法识别 min-width 命令，该命令设置最小页面宽度。 要在所有浏览器中复制看起来相同的效果，您可能需要在 CSS 中使用特定于浏览器的“技巧”来弥补每个浏览器在遵守已发布标准方面的缺点。

严格意味着 HTML 完全按照标准的规定进行解释。 临时 DOCTYPE 意味着页面可以容忍与标准一致的差异（例如，继续使用过时的标签）。

使事情变得复杂的是所谓的“怪癖”模式。 如果 DOCTYPE 错误、过时或丢失，浏览器就会进入奇怪的模式。 这是向后兼容的尝试，以便 Internet Explorer 6 能够以与 Internet Explorer 4 相同的方式显示页面。

不幸的是，有时人们会不小心陷入奇怪的模式。 这通常通过两种方式完成。

直接从 WC3 网页使用 DOCTYPE 声明，链接最终为 DTD/xhtml1-strict.dtd（WC3 服务器上的相对链接）。 如前所示，需要完整路径。 微软已经设置了Internet Explorer 6，以便它可以显示有效的页面，但它处于一种奇怪的模式。 当您将 XML 声明放在 DOCTYPE 之前而不是之后时，就会发生这种情况。

接下来是 XML 语句（在 DOCTYPE 之后）。

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=” 语言; ?>” lang=” language; ?>” >

描述 Internet Explorer 6 中的奇怪模式的信息非常重要。 本教程仅适用于 Internet Explorer 6 及更高版本。 为了最大限度地减少以后需要执行的工作，您应该确保 Internet Explorer 6 在标准模式下运行。

我们看一下index.php文件头的结构。 我希望它尽可能小，但对于生产站点来说它需要足够大。 使用的标头信息是：

<html xmlns=”http://www .w3.org/1999/xhtml” xml:lang=”语言 ?>” lang=”语言 ?>” ><link rel=”stylesheet” href=”baseurl ?>/templates/system/css/system.css” type=”text/css” />< link rel=”stylesheet” href=”baseurl ?>/templates/system/css/general.css” type=”text/css” /><link rel=”stylesheet” href=” baseurl ?>/templates/template?>/css/template.css” type=”text/css” />

这是什么意思？

我们已经在index.php中写过关于DOCTYPE语句的内容了文件的含义： Language; 代码从全局设置中的站点语言设置中提取语言

$app = Jfactory::getApplication() ;参数（例如站点名称）并在模板中使用它们以下行用于添加标头信息：

此代码片段。全局设置中设置的标头信息将被插入到生成的页面（即前端）

大多数标头信息都是动态创建的，由其他人完成。它特定于你在做什么。 页面（文章）。 这包括许多元标记和 RSS 提要 URL。

标题的最后几行包含指向 Joomla 生成的页面 CSS 文件和此模板的 CSS 文件的链接。

<link rel=”stylesheet” href= “baseurl ?>/templates/system/css/system.phpcss” type=”text/css” /><link rel=”stylesheet” href=”baseurl ?>/templates/system/css/general.css” type=”text/css” /><link rel=”stylesheet” href=”baseurl ?>/templates/template ?>/css/template.css” type=”text/css ” />

前两个文件system.css和general.css包含一些常见的Joomla样式。最后一项是模板的所有CSS，这里的PHP代码称为template.css并返回名称以这种方式编写而不是编写实际路径使代码更加通用，并且允许您编写这一行（无需担心编辑它和整个标头代码）。

< 模板 CSS 不能例如，以下代码针对 Internet Explorer 6 的怪癖（我们将排除它）：检测其他 CSS 文件并将其添加到：

以下示例是使用模板参数的技术的一部分。在本例中，颜色方案被选为模板内的参数. Manager 加载与所选颜色同名的 CSS 文件：

<link rel=”stylesheet” href=”baseurl ?>/templates/ template ?>/ css/params->get(‘colorvariation’); ?>.css” type=”text/css” />

如果生成如下内容则有：

Joomla! 页面的body

仍然是index.php现在各部分已设置完毕，您可以继续创建您的第一个模板，请使用 Joomla 语句和所需的模块：

getCfg( ‘站点名称’);?>

模板包含以下内容，按合理的逻辑显示顺序排列：

网站名称 顶部模块 左侧模块 面包屑栏 主要内容 正确模块 页脚模块 调试模块

当前（确保是默认模板（如果您预览它）该网站看起来不太好。

我们希望从网络角度尽可能接近语义标记毕竟，这。意味着任何人都可以阅读该页面，包括浏览器、蜘蛛和屏幕阅读器。

请注意，我们首先在命令中使用几个 Joomla 特定功能来创建此输出：

getCfg( ‘sitename’);?>

PHP echo 语句只是打印出configuration.php 文件中的字符串，这里我们只使用站点名称：名称为getCfg(‘sitename’);?>
管理员的电子邮件地址是getCfg(‘mailfrom’);?>
This 模板是getCfg(‘mailfrom’);?>This 模板是 Directory
URL 为

jdoc 语句插入来自模块或组件的各种类型的 HTML 输出。

该行插入组件的输出。 它是哪个组件由链接的菜单项确定：

此行插入模块位置的输出：

此行生成模块的内容，并将所有位置设置为右侧。 这些模块生成的内容将按照模块管理器中“顺序”列中设置的顺序放置在页面上。 完整的语法是：

使用 CSS 创建无表格布局：CSS 模板教程 – 步骤 2

本节中：创建 3 列布局使用纯 CSS 的 Joomla 模板。 它也可以是“固定”布局。 网页布局主要有三种类型（固定布局、流体布局和果冻布局），它们都涉及控制页面宽度的方法。

固定布局宽度设置为固定值。 流体布局可以根据浏览器窗口增大或缩小。 果冻的布局是流动的，但介于最小值和最大值之间。

几年前，流体宽度模板风靡一时。 无障碍人士喜欢这个。 能够抓住浏览器窗口的一角并看到所有内容滑出，真是太酷了。

但现在我们不再创建流体模板，而是专注于固定宽度模板。 我相信它们是最适合当今网络的。 四年前，很多人还在使用 800 像素宽屏。 流体宽度的要点是，您可以创建在 1024 像素屏幕上看起来很棒的网页，同时仍然可以缩小到使用的较小屏幕。

有了这些更大的屏幕和 960 像素宽的布局，您将面临新的挑战：可读性。 研究表明，以 960 像素观看会降低屏幕可读性。 因此，流体的宽度填满了一个大屏幕，这 a) 看起来很愚蠢，b) 减慢了阅读速度。

常见的设计可能会使用表格来布局页面。 表格是一种简单的解决方案，因为它们仅以百分比形式设置列宽。 然而，表格也有一些缺点。 例如，与 CSS 布局相比，表格有很多额外的代码。 结果是加载时间更长（冲浪者不喜欢这一点）和搜索引擎性能变慢。 除了标记之外，您还可以使用“间隔 GIF”将代码大小大致加倍，“间隔 GIF”是放置在每个表格单元格中的 1×1 透明图像，以防止单元格折叠。 即使是大公司也可能陷入办公桌陷阱。

基于表格的布局存在问题难以维护。 要更改任何内容，您需要知道所有表标签（tr、td 等）正在做什么。 如果您使用 CSS，只需检查几行即可。 内容无法按来源排序。 许多网络冲浪者并不在浏览器中查看网页。 使用文本浏览器或屏幕阅读器查看页面的用户从左上角到右下角阅读页面。 这意味着首先检查标题和左列中的所有内容（如果您有三列布局），然后再检查包含重要内容的中间列。 另一方面，CSS 布局允许您“按源排序”内容。 这意味着可以在代码/源代码中重新排列内容。 也许最重要的网站访问者是谷歌。 Google 将屏幕阅读器用于多种目的。

当谈到 CSS 布局时，我们倾向于使用较新的框架。 这个想法是使用一组一致的 CSS 创建布局，并维护该集以解决各种问题，例如浏览器兼容性。 该模板使用 Nathan Smith 开发的 960 网格系统。 目前还不是很有趣，但是让我们来看看各个部分。意义。

960 使用网格系统，您只需按类别指定网格大小即可。 此示例使用 12 列网格，因此要使标题跨越 960 像素的整个宽度，请在 index.php 中使用以下内容：

对于三列，在容器内添加一个网格，如下所示：

列间距为 10 像素的内容（通常称为装订线）请注意，您已经有了一些余地。 这一切都是由聪明人完成的960 CSS 网格框架自动运行并处理任何浏览器问题（是的，那就是 Internet Explorer）。

index.php主要代码为：

在此示例中，我们将 CSS 文件重命名为layout.css。 使用960网格框架，这个文件很少需要被触及，并且可以被尽可能地压缩。 layout.css 文件的重要部分如下所示：

.container_12 {margin-left:auto;margin-right:auto;width:960px;}.alpha {margin-left:0 ! important ;}。 欧米茄{ margin-right:0 !重要;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_12 {显示：内联；浮动：左；位置：相对；左边距：10 像素；右边距：10 像素；}.container_12 .grid_1 {宽度：60 像素；}.container_12 .grid_2 {宽度：140px;}.container_12 .grid_3 {宽度：220px;}.container_12 .grid_4 {宽度：300px;}.container_12 .grid_5 {宽度：380px;}.container_12 .grid_6 {宽度：460px;}.container_12 .grid_7 {宽度： 540px;}.container_12 .grid_8 {宽度：620px;}.container_12 .grid_9 {宽度：700px;}.container_12 .grid_10 {宽度：780px;}.container_12 .grid_11 {宽度：860px;}.container_12 .grid_1 2 { 宽度: 940px;}

这很简单，所有东西都向左浮动，并且根据所需的宽度设置各种网格大小。 这是一个 12 列网格，例如 grid_6 表示 6 列，即 460 像素 – 全宽减去填充。 这种简单的布局是学习如何在 Joomla 中使用 CSS 的好方法，因为它展示了 CSS 相对于基于表格的布局的两个优点：代码更少和维护更容易。

但是，这个简单的布局按照代码中的内容在屏幕上出现的顺序排列。 即使您将最重要的内容放在生成的 HTML 源代码的开头，对于屏幕上的每个查看器，排序看起来都是相同的，即左列位于中间列（即 left ）之前，而不是“来源排序”。 ” ” .

按源代码排序的布局比重要内容稍后出现在代码中的布局更有利于 SEO。 从Joomla网站的角度来看，重要的内容是主要组件的内容。 现在，为了保持 CSS 简单，我们将使用按查看器排序的布局，在本文后面我们将更改为按源排序的布局。 许多商业模板（例如 Joomlahack 的）通过源代码进一步实现了这一点。排序概念。

默认 CSS

到目前为止，所有 CSS 都是关于简化页面的布局。 因此，让我们添加一些格式并将 CSS 放入名为typography.css 的新文件中。 确保将其添加到您的index.php 文件中。

当您开始使用 CSS 进行排版时，您需要设置一些整体样式并包括简单的全局重置。

/*指南针设计排版 css */* { margin: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; }字体大小: 76%; height:1.3; }

所有内容都赋予零边缘填充和内边距，并且所有块级元素都赋予顶部和底部边距。 这有助于实现浏览器的一致性。 （上面的第一个 CSS 选择器称为星形选择器，也可用作 Internet Explorer 6 中的通用选择器。）有关全局重置的更多信息，请参阅此处和此处。

将字体大小设置为 76%，以使跨浏览器的字体大小更加一致。 然后以 em 为单位设置所有字体大小。 设置 line-height:1.3 可以提高可读性。 在 EM 中设置字体和行高，允许查看者根据自己的喜好调整字体大小，并重新排列页面以便于阅读，从而使页面更易于访问。 此处对此进行了更详细的解释。

向标题、侧边栏和内容容器添加背景颜色如下所示：显示什么。

请注意，侧边栏不会到达页脚。 这是因为它们只扩展到内容。 如果左右空格都是白色，则没有侧栏。

只要模板中的所有三列都有白色背景就可以了。 使用这种方法，模块周围会出现一个框。 如果您希望列具有相同的高度，包括彩色列或框，则需要使用某种技术使列具有相同的高度。 常见的解决方案是使用 JavaScript 脚本动态计算和设置高度。

模板中的模块

当您调用index.php 文件中的模块时，您可以选择不同的模块显示方式。 语法是：

样式是可选的，可以在 templates/system/html 中找到。 定义在/modules.php中。 默认的modules.php 文件当前包含以下布局选项：table、horz、xhtml、rounded 和none。 让我们快速浏览一下每个选项所需的代码行：

OPTION=”table”（默认显示） 模块按列显示。 下面是使用“table”选项时 Joomla 的输出。 请注意，PHP 语句将替换为实际内容：

<table cellpadding=”0″ cellpacing=”0″ class=”moduletableget(‘moduleclass_sfx’) ; ? > “>showtitle != 0) : ?>

title ?>

content;>

OPTION=”horz” 水平显示模块。 每个模块都输出到包装表中的一个单元格。 如果您使用“horz”选项，您将看到类似于以下内容的 Joomla 输出：

OPTION=”xhtml” 将模块显示为简单的 div 元素。 标题位于 H3

标记内。 下面显示了使用 ‘xhtml’ 选项时 Joomla 的输出：

<div class=”moduletableget(‘moduleclass_sfx’); ?>”><div class=”moduletableget(‘moduleclass_sfx’); >”>showtitle != 0) : ? >

title; ?>

content;>

OPTION=”rounded ” 展开角module 的格式允许圆形等。使用 $style 将 div 名称从 moduletable 更改为 module. 如果使用“rounded”选项，Joomla 的输出将如下所示：

<div class=”moduleget(‘moduleclass_sfx’); ?>”>

OPTION=”none” 使模块显示没有元素或标题的原始输出。

如您所见，CSS 选项（xhtml 和圆角）的代码非常干净，并且易于设置网页样式。 除非绝对必要，否则我们不建议使用选项（后缀）表（默认）或 horz。

如果您检查前面显示的modules.php 文件，您将看到所有这些选项都存在于模块中。 添加您自己的内容很容易。 这是 Joomla 1.6 中新模板功能的一部分。

要开发模板，您可以将模块样式xhtml放置在index.php中的所有模块中。

让我们从布局 div 中删除背景，并添加 CSS 以使用模块标题边框和背景设置模块样式。

以下内容已添加到布局中。 当前 CSS 文件它看起来像这样：

#header{ font-size:2em; }#footer{ border-top: 1pxsolid #999; }a{ 文字装饰：无； }a:hover{ 文字装饰：下划线；字体大小：1.7em; }h2,.contentHeading{ 字体大小：1.5em; }h3{ 字体大小：1.3em; }h4{ 字体大小：1.2em; }h6{ 字体大小：1em; }#footer,.small,.createdate,.modifydate,.mosimage_caption{ 字体：0.8em Arial，Helvetica，sans-serif 颜色：#999; margin -bottom:1em; padding:0 10px; /*边框:1px #CCC Solid; }.moduletable h3{ 背景:#fff; padding:0.25em 0; ; 字体大小: 1.1em; 边距: 0 -10px 0.5em -10px; /* 从 .moduletable 填充中提取 h3 */ ul.actions li{float :right;list-style:none;border: 0;} ul.actions li a img{border:0;}

这里我们将向使用 style=”xhtml” 生成的模块添加特定的样式规则。 这将从 .moduletable 类生成每个模块。

模块的标题出现在其中的标记中。 。

您创建的排版 CSS 将产生如下所示的结果。

模板菜单

同样，使用 CSS 列表而不是表格可以减少代码并简化标记。 将 CSS 用于菜单的另一个优点是各种 CSS 开发人员网站上提供了大量示例代码。 让我们看一下其中一个并看看如何使用它。

maxdesign.com 网页有 30 多个菜单，全部使用相同的基本代码。 它被称为Restamatic。 您需要修改代码以使这些菜单适应 Joomla。

这些基于列表的菜单使用以下通用代码结构：

这意味着有一个名为navcontainer的封闭

<div id=”sidebar-2″ class=”grid_”>

我们回显 colgrid 值并知道总和必须为 12，因此我们进行简单的计算来找到主列：

接下来，使用 countModules 函数查找一些值。

countModules(‘left’) == 0) :?> countModules(‘right’) == 0):?>

请注意，我们将默认网格大小设置为 3，因此我们正在检查左侧和右侧位置的模块。 您还可以使用真/假检查而不是数字来完成此操作。 （零）。

完成一半后，我扩大了中心列的宽度以容纳空的（容易隐藏的）侧列。

隐藏模块代码

创建可折叠列时，我们建议您将模块设置为如果没有内容则不生成。 如果您不这样做，您的页面将包含一个空 div，这可能会导致跨浏览器出现问题。

为了避免生成空 div，请使用以下 if 语句：

countModules(‘left’)) : ?><div id =” sidebar” class =”grid_”>

何时？使用这段代码，如果左侧位置没有放置任何内容，

<html xmlns="http://www.w3. org/1999/xhtml" xml:lang="语言;?>" lang="语言 ?>" ><link rel="stylesheet" href="baseurl ?>/templates/system/css/system.css" type="text/css" /><link rel="样式表" href="baseurl ?>/templates/system/css/general.css" type="text/css" /><link rel="stylesheet" href="baseurl ?>/templates/template ?> /css/layout.css" type="text/css" /><link rel="stylesheet" href="baseurl ?>/templates/template ? >/css/typography.css" type="text/css" />countModules('left') == 0):?> countModules('right') == 0):?> 
getCfg('sitename');?>
countModules('left')) : ?> <div id="sidebar" class="Grid_">
<div id="maincolumn;" class="grid_ ">

countModules(‘right’)) : ?><div id=”sidebar-2″ class=”grid_”>

基本模板涵盖了 Joomla 创建的基础知识。这里是一些模板。这个原则。

现在您已经了解了基础知识，您可以使用您学到的技术来创建更具吸引力的模板。

制作真正的 Joomla! 1.6 模板：960 模板教程 – 步骤 3

我们需要从比较开始。 构图（构图的缩写）是作为模板基础的拟议设计的绘图或模型。

本节使用 Dan Cedarholm 的《Bulletproof Web Design》一书中的设计。 我衷心推荐这本书，因为它为一些 CSS 技术提供了良好的基础，这些技术对于创建 Joomla 模板非常有用。

我们将使用其中一些技术来构建这个实际的模板。

切片和切块

该过程的下一步是切片。 您将需要使用图形程序来创建可在模板中使用的小切片图像。 重要的是要注意如何根据需要调整元素的大小。 （我选择的图形应用程序是 Fire-works，因为我相信它比 Photoshop 更适合网页设计（而不是印刷设计）。）

仅此一个过程就足以填充一本书。一整本书。 要查看设计的切片方式，请查看图像文件夹并查看切片。

标题

<p>标题图像的顶部有一个细渐变。 将图像放置为原始背景，并在其后面指定匹配的填充颜色。 这允许您在必要时垂直缩放标题（例如，通过调整字体大小）。 您还需要将任何颜色更改为白色，以便它显示在黑色背景上。

这是您需要添加的 CSS 来设置标题样式。

#header {border-bottom: 3px Solid #87B825;background: #B4E637 url(../images/header-bg.gif)repeat- x 左上角；}#header h1 {边距：0；填充：25px；字体系列：Georgia，衬线；字体大小：150%；颜色：#374C0E；背景：url(../images/bulls-eye. gif ) 左上角无重复；}

此处未使用图形徽标。 我正在使用纯文本。 主要原因是搜索引擎无法读取图像。 您可以进行一些不错的图像替换，但我会将其作为练习留给您自己完成。

横幅/消息模块

使用最后一个模板的“开始”模块位置发送消息。 要给它一些样式，您可以添加

#message {font-size: 90%;color: #cc9;text-align: center;background马苏。   #404530 你rl(../images/message-bg.gif)repeat-x top left;}#message .moduletable {padding:1px 10px;}

标题应该是：

Continue 接下来，我们需要实现一种在侧边栏中显示背景的技术。

列背景

请记住，当您在列上放置彩色背景时，该颜色不会延伸到页脚。 这是因为 div 元素（在本例中为 Sidebar 和 Sidebar 2）仅与内容一样高。 在满足其所包含的元素之前，它不会增长。 这是基于网格的系统的弱点。 要获取侧边栏背景，您需要使用 JavaScript。

有许多计算和均衡列高的脚本。 我使用 Dynamic Drive (http://www.dynamicdrive.com/csslayouts/equalcolumns.js) 中的一个。

请注意，您需要更改脚本中引用的列/元素以进行匹配。 还要添加另一个块元素“maincolbck”，以在主列内容上方保留黄色褪色背景。

index.php的主要内容代码为：

countModules(‘right’)) : ?><div id=”sidebar-2″ class=”grid_”>

添加这些元素时，还要添加背景添加内容这是我的CSS添加：

#content {font-size: 95%;color: #333;line-height: 1.5em;background: url(../images/content-bg .gif)repeat-x top left;} #maincolbck {背景：url(../images/wrap-bg.gif)repeat-y 右上角；}#footer {背景：#828377 url(../images/footer- bg.gif)repeat- x 左上角;padding:1px 0;}

这将为右列提供渐变背景：

#footer {background: #828377 url(../ images/footer-bg .gif)repeat -x top left; padding:1px 0;} 灵活的模块

设计模块时，可以选择模块是否可以垂直定向（如果包含更多内容）、水平定向，应该考虑是否会扩展到两者或两者。使用Dan 书中描述的防弹设计原则是创建一个跨越该 div 顶部两个轴的模块背景。该背景将放置在 h3 标题的对角。

此设计。没有水平菜单，因此在考虑侧模块时还要考虑

CSS 的样式如下：

#sidebar .moduletable,#sidebar-2 .modu。可出租{ 边距：10px 0 10px 0；填充：0 0 12px 0；字体大小：85%；行高：1.5em；颜色：#666；背景：#fff url(../images/box-b. gif) 不重复右下角;}#sidebarh3,#sidebar-2h3 {边距: 0;填充: 12px;字体系列: Georgia, serif;字体大小: 140%;字体粗细: 正常;颜色: #693;背景: url( ../images/box-t.gif) 左上角无重复；}#sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul {margin: 0;padding: 0 12px;}side bar ul li,#sidebar-2 ul li {margin: 0 0 0 12px;padding: 0 0 0 18px;list style: none;background: url(../images/li-bullet.gif) no-repeat 0 3px ;}

接下来，让我们关注排版。

排版

Joomla 1.6 中的 CSS 排版已得到极大简化。 以前版本的 Joomla 对于输出的不同部分有特定的类，例如“contentHeading”。 在 Joomla 1.6 中，输出使用更多可识别的类，如 H1、H2 等，并且完全是无表的。

让我们设置以下元素的样式：

h1, h2, h3, h4, h5, h6 {font-family: Georgia, serif;font-size: 150%；颜色：#663；字体粗细：正常；}h1 {字体大小：2em；行高：1；边距底部：0.5em；}h2 {字体大小：1.5em；边距底部： 0.75em;}h3 {字体大小：1.25em;行高：1;边距底部：1em;}h4 {字体大小：1.1em;行高：1.25;边距底部：1.25em;}

您还可以添加可应用于您的内容的有用图标处理的特殊类。

p.info {background: #F8FAFC url(../images/info.png) center no-repeat;background-position: 15px 50%; /* x-pos y-pos */text-align:左；填充：5px 20px 5px 45px；边框顶部：2px 实心#B5D4FE；边框底部：2px 实心#B5D4FE；}p.警告{背景：#FFF7C0 url(../images/warn.png) 中心无-重复;背景位置: 15px 50%; /* x-pos y-pos */text-align: left;padding: 5px 20px 5px 45px;边框顶部: 2px 实心 #F7D229;边框底部: 2px 实心 #F7D229 ;}p.alert {背景：#FBEEF1 url(../images/exc.png) 没有中心重复；b背景位置：15px 50%; /* x-pos y-pos */text-align: left;padding: 5px 20px 5px 45px;border-top: 2pxsolid #FEABB9;border-bottom: 2pxsolid #FEABB9;} ul .checklist li {list-style :none;background: url(../images/tick.png) no-repeat 0 4px;line-height: 24px;padding-left: 20px;}

完成的模板如下它看起来像这样。

摘要

此摘录描述了四个增加复杂性和功能性的模板示例。 以下是我们审查的要点：

现代网站使用一种称为级联样式表 (CSS) 的技术来分离内容和表示。 在 Joomla 中，模板及其 CSS 文件控制内容的呈现。 创建模板时，让 Joomla 在本地主机服务器上“运行”，以便您可以使用您喜欢的编辑器在文件级别进行更改并更新浏览器中的输出页面以查看影响。 创建有效的模板应该是一条路径，而不是一个目标。 这个想法不是为了获得有效标记的徽章，而是为了使模板尽可能易于人类和蜘蛛使用。 最基本的模板只是加载 Joomla 模块和主体组件，最好按源代码顺序加载。 布局和设计是 CSS 的一部分，而不是模板的一部分。 现代网页设计使用 CSS 来定位元素而不是表格。 学习起来很困难，但值得投资。 有许多（非 Joomla）资源可以提供帮助。 Joomla 总是在网页代码中输出某些元素、ID 和类。 这些可以通过 CSS 进行预测并用于设计您的设计风格。 该模块的输出可以完全自定义，或者您可以使用预构建的输出选项，例如 xhtml。 所有这些选项称为模块 chrome。 建议始终使用完全展开的列菜单输出的表格选项。 然后，您可以使用网络上提供的许多免费 CSS 资源来设置菜单的样式和动画。 当不存在内容时，可以隐藏（或折叠）列和模块位置等元素。 这是通过使用条件 PHP 语句来控制与未使用的模块及其容器关联的代码是否包含在生成的页面中来完成的。 您还可以链接到不同的 CSS 样式并相应地调整布局。 为 Joomla 创建生产模板更多的是使用图形设计和 CSS，而不是 Joomla 的任何特殊知识。

PHP快速学习视频免费教程（入门到精通）

如何开始学习PHP？ 如何快速学习PHP？别担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载