创建纯 CSS 模板

Barrie M. North 由 Prentice Hall 出版 ISBN-10: 0137012314

本章摘录自 Barrie North 的畅销书《Joomla! 1.5: A User’s Guide: Building a Successful Joomla! Powered Website》的第二版。由 Prentice Hall Professional 出版，ISBN 0137012314，2009 年 6 月。版权所有 © 2009 Barrie M. North。另有全新配套视频教程，由 Barrie North 主讲，名为“Joomla! 基础”。您可以在出版商网站上观看示例视频片段：www.informit.com/title/0137017812. 

本章内容

本章将引导您完成创建 Joomla 模板的步骤。具体来说，您将创建一个使用层叠样式表 (CSS) 来实现布局的模板，而无需使用表格。这是一种理想的方法，因为它使模板代码更容易通过万维网联盟 (W3C) 标准的验证。它还倾向于加载速度更快，更易于维护，并且在搜索引擎中的表现更好。这些问题将在课程后面的内容中详细讨论。本课程涵盖以下主题：

• 什么是 Joomla 模板？Joomla 模板执行哪些功能？没有内容的模板与其内容添加到 CMS 中的模板有何区别？
• 本地主机设计过程与静态 HTML 或 XHTML 网页设计过程有何不同？
• 无表格设计在 Joomla 中有什么影响？W3C 标准、可用性和可访问性之间有什么关系？
• Joomla 模板由哪些文件组成？它们执行什么功能？
• 如何创建源顺序的三列布局，而不是使用表格？
• 应与 Joomla 一起使用的基本 CSS 样式是什么？Joomla 核心使用的默认样式是什么？
• 如何放置和设置模块的样式？有哪些新的圆角技术？
• 如何制定一个简单的策略来生成精简的 CSS 菜单，以模仿使用 JavaScript 开发的菜单效果？
• 如何控制列的显示时机，并在没有内容时将其隐藏？
• 创建 Joomla 1.5 模板的正确步骤是什么？

免责声明一二三 - 这可能是本书中最具技术性的章节。要成功完成本章，您需要对 XHTML 和 CSS 有扎实的掌握；例如，您需要理解 float 的作用以及如何清除它。

如果您不确定自己是否具备创建 Joomla 模板所需的技能，我强烈建议您从 Joomlashack.com 下载一个模板。是的，我推荐我自己运营的模板公司，而不是众多存在的公司。在 Joomlashack，我们专注于创建无冗余、简单的模板，易于理解和定制。学习的一个好方法是下载我们的一个免费模板，并尝试逆向工程它，看看它是如何工作的。

什么是 Joomla! 模板？

Joomla 模板是 Joomla CMS 内的一系列文件，用于控制内容的呈现。Joomla 模板不是一个网站；它也不被认为是完整的网站设计。模板是查看 Joomla 网站的基本基础设计。为了产生“完整”网站的效果，模板与存储在 Joomla 数据库中的内容协同工作。图 9.1 展示了这种示例。

有内容和无内容的模板。

图 9.1 的 A 部分显示了带有示例内容的模板。B 部分显示了在原始 Joomla 安装中内容很少或没有内容时的模板。模板经过样式设置，当您的内容插入后，它会自动继承模板中定义的样式表，例如链接样式、菜单、导航、文本大小和颜色等。

请注意，与内容相关的图像（人物照片）不是模板的一部分，但标题是。

使用像 Joomla 这样的 CMS 模板有许多优点。

• Joomla 会负责将内容放置到页面中。您可以通过输入新文章来为现有的博客页面添加新信息。模板及其 CSS 确保其在样式上与其他网站内容保持一致。
• 内容和呈现是完全分离的，尤其是当 CSS 用于布局时（而不是在 index.php 文件中使用表格）。这是确定网站是否符合现代 Web 标准的主要标准之一。在符合标准的网站中，表格的 HTML 标签仅用于呈现表格数据，而不是用于将页面布局成列。
• 您可以应用一个新模板，从而立即获得一个全新的网站外观。这可能涉及内容和模块的不同定位，以及颜色和图形。

您至少需要了解的 - 现代网站通过使用模板和 CSS 来分离内容和呈现。在 Joomla 中，模板控制内容的呈现。

本地主机设计过程

您在 Joomla 驱动的网站上看到的网页不是静态的；它是从数据库中存储的内容动态生成的。当数据库中的内容发生更改时，显示该内容的所有页面都会立即更改。您看到的页面是通过模板中的各种 PHP 命令生成的，这些命令会查询数据库。由于模板看起来像是代码行而不是内容，因此在设计阶段会带来一些困难。

现在普遍使用“所见即所得”(WYSIWYG) HTML 编辑器，例如 Dreamweaver，这样您就不需要编写 HTML 代码了。然而，在使用此类编辑器时，Joomla 模板设计过程是不可能的，因为 WYSIWYG 编辑器无法显示和编辑动态页面。因此，您必须手动编写模板及其 CSS，并通过服务器页面上的 PHP 查看输出页面，在您进行更改时频繁刷新。如果连接速度足够快，这可以是 Web 服务器，但大多数设计师会在自己的计算机上使用本地服务器，或称本地主机——一种在您的计算机上提供网页的软件，例如第二章“下载和安装 Joomla!”中描述的本地主机设置。

创建网页没有“正确的方法”；您如何做取决于您的背景。那些更偏向图形的人倾向于在 Photoshop 等图形程序中制作一个页面的“图像”，然后将图像分解，以便可以在 Web 上使用（称为切片和切割）。更偏向技术的设计师通常会直接进入 CSS，开始编写字体、边框和背景的代码。但是，正如前面提到的，作为 Joomla 模板设计师，您受到限制，因为您无法在同一编辑器中立即看到代码的效果。因此，您可以使用以下修改后的设计过程：

1. 让一个加载了内容的本地主机服务器在后台运行以“运行”Joomla。
2. 使用编辑器编辑 HTML 和 CSS，然后将更改保存到服务器。
3. 在浏览器中查看受您的编辑影响的页面。
4. 返回步骤 2。

您至少需要了解的 - 创建模板时，您必须在服务器上“运行”Joomla，以便进行更改并刷新生成的页面以进行检查。

本地主机服务器选项

在第二章中，您了解了如何安装一个可以在您的计算机上运行的 Web 服务器 (WampServer)。要继续本章的学习，您需要安装 WampServer。如果您还没有这样做，请继续安装。我在这里等着。

提示 - 使设计过程更高效的一个有用技巧是服务一个您正在设计的网页，然后将生成的源代码从浏览器复制粘贴到编辑器中。例如，一旦设置了布局的 CSS，您就可以使用本地主机服务器来服务页面，然后您可以查看页面的源代码。然后，您可以将源代码复制粘贴到您的编辑器中，然后您可以轻松地使用 CSS 对页面进行样式设置，而无需经过前面描述的步骤循环。完成编辑后，您可以将完善的 CSS 样式复制回服务器。

在托管的 Web 服务器上，您可以在后端编辑 HTML 模板和 CSS 文件，同时在浏览器的另一个标签页中打开前端。当您保存更改时，您可以简单地刷新前端视图以查看效果。

使用本地主机设置，您还可以方便地直接访问文件，并使用您选择的编辑器进行编辑。当您保存更改时，无需关闭编辑器，就可以在浏览器中刷新前端视图并查看效果。

免费的 XHTML 编辑器 - 除了 Dreamweaver 等商业编辑器外，还有一些免费编辑器可用。Nvu 是一个不错的选择，它内置了验证功能，并且是 100% 开源的。这意味着任何人都可以免费下载 Nvu (net2.com/nvu/download.html)。您甚至可以下载源代码并进行特殊更改（如果需要）。

提示 - 在使用 Firefox 设计模板时，您可以使用三个非常有用的附加工具：Web Developer toolbar、Firebug 和 ColorZilla。

W3C 和无表格设计

可用性、可访问性和搜索引擎优化 (SEO) 是如今描述 Internet 上高质量网页的常用术语。实际上，可用性、可访问性和 SEO 之间存在显著的重叠，一个展示了其中一种特性的网页通常也具备其他两种特性（见图 9.2）。实现这三个目标的最简单方法是使用 W3C Web 标准中概述的框架。

例如，视力不好的人可以通过屏幕阅读器轻松阅读使用语义 HTML 或 XHTML（XHTML 解释文档内容，而不是其外观）构建的网站。搜索引擎爬虫也可以轻松阅读。Google 在读取网站时实际上是“盲”的；就像它在使用屏幕阅读器一样。

可用性、可访问性和 SEO 之间的重叠。

Web 标准为所有 Web 浏览器提供了一套通用的“规则”，用于显示网页。推动这些标准的主要组织是 W3C，其总监 Tin Berners-Lee 被认为是在 1989 年发明了 Web。

为了理解 Web 标准的由来，了解一些历史很有帮助。许多网页实际上是为旧版浏览器设计的。为什么？自万维网诞生以来，浏览器一直在不断发展。每一代都引入了新功能，制造商也为这些功能想出了不同、有时是专有的标签（名称）。每个浏览器在实现相同的基本 HTML 语言时，往往都有不同的语法或“方言”和怪癖。新浏览器出现了，旧浏览器消失了（还记得 Netscape 吗？）。

当前的 W3C 标准旨在（希望）推动制造商发布更多符合标准的浏览器，这些浏览器能够读取相同的语言并更一致地显示页面，以便设计师能够针对单一通用平台进行设计。

另一个令人困扰的因素是，历史上，不同的浏览器制造商（如微软）倾向于让他们的浏览器以略微不同的方式解释 HTML/XHTML。这导致 Web 设计人员不得不设计他们的网站来支持旧版浏览器而不是新版浏览器。设计师和网站所有者经常认为，让网页在这些“遗留”浏览器中正常显示很重要。为网页代码制定的 W3C 标准是为了实现一致性而开发的。采用 W3C Web 标准的网站为使其可访问、可用并针对搜索引擎进行优化奠定了良好的基础。将这些视为您房屋的建筑规范：使用它们建造的网站更坚固、更安全，并且符合用户的期望。您可以使用 W3C 的 HTML 验证服务 (validator.w3.org) 来检查您的页面。它简单且免费（只需确保在尝试验证代码时使用正确的 DOCTYPE；见http://www.compassdesigns.net/tutorials/82-installing-joomla-doctype-and-the-blank-joomla-template.html）。最简单地说，符合 W3C 验证的网站很可能也使用语义 HTML 或 XHTML，并通过 CSS 分离内容和呈现。

问五位设计师什么是 Web 标准，您会得到五种不同的答案。但大多数人都同意 Web 标准是基于使用有效的代码，无论是 HTML 还是 XHTML（或其他），并按照最新版本标准的规定进行。

语义正确的代码

如前所述，语义正确意味着网页中的 HTML 或 XHTML 标签仅描述内容，而不描述呈现。特别是，这意味着 H1 标签、H2 标签等的结构化组织，并且仅将表格用于表格数据，而不是用于布局。Joomla 模板设计师在纯粹语义正确性方面略有妥协的一个领域是为两列或三列布局的左侧和右侧列命名的约定，即 left 和 right，而不是更语义正确的 sidebar 或 sidecolumn。如果这些仅仅是模板 PHP 中使用的位置名称，那么它们在技术上是正确的。如果它们也被用于定义 HTML 和 CSS 中匹配的类，那么拥有与显示页面左侧列相关的所有内容都命名或分类为 left，这是一种可原谅的便利。在接下来的示例中，您将看到 left 位置被 styled 为 sidebar 类，right 被 styled 为 sidebar-2，这是语义正确的代码。

层叠样式表 (CSS)

与使代码语义正确密切相关的是使用 CSS 来控制网页的外观和布局。CSS 是一种简单的机制，用于向 Web 文档添加样式（例如，字体、颜色、间距）（见http://www.w3.org/Style/CSS/）。CSS 与 HTML 和 XHTML 代码并行存在，允许您将内容（代码）与呈现（CSS）完全分离。要亲眼看看这一点，请访问 CSS Zen Garden (http://www.csszengarden.com)，这是一个网站，通过更改 CSS 文件，同一 XHTML 内容可以以不同且独特的方式显示。生成的页面看起来大不相同，但核心内容完全相同。

目前，设计 Joomla 驱动的网站在满足验证标准方面面临着相当大的挑战。在 Joomla 的第一系列版本 1.0.X 中，代码使用了大量的表格来输出其页面。这并不是真正使用 CSS 进行呈现，也不会产生语义正确的代码。许多组件和模块的第三方开发者仍在使用表格来生成他们的布局，这加剧了这个问题。

幸运的是，Joomla 核心开发团队认识到了 Joomla 的这个问题。在 Joomla 1.5 中，模板设计师可以完全覆盖核心输出（称为视图），并剥离表格或自定义布局——按照他们想要的方式。

在创建模板时，仍然可以采取措施确保其可访问性（例如，可伸缩的字体大小）、可用性（清晰的导航）和搜索引擎优化（源顺序）。

您至少需要了解的 - 创建有效的模板应该是过程，而不是目标。目的是使您的模板对人类和爬虫尽可能可访问，而不是获得一个有效的标记徽章。

创建简单模板：CSSTemplateTutorialStep1

要理解模板的内容，让我们先看一个空白的 Joomla 模板。

注意 - 您可以通过两种方式使用本章。您可以从新文件开始，输入此处显示的的代码来逐步构建模板。这个过程耗时且容易出错。相反，您可以参考 http://www.joomlabook.com 提供的模板。有四个模板，每个模板对应本章相关章节末尾的开发阶段。下载与您正在阅读的章节相匹配的示例模板，然后您可以跟着做。

您还可以通过在本地主机中安装这四个模板来跟随学习，这样您就可以在前端实时查看您的编辑和测试。

模板文件组成

本节回顾了设置模板文件的手动过程。通常，您将使用 Joomla 安装程序安装模板，该安装程序会处理所有这些步骤。

在构建自己的模板时，您需要以协调的方式设置几个文件和文件夹。模板需要包含各种文件和文件夹。这些文件必须放置在 Joomla 安装的 /templates/ 目录下，每个模板都放在一个为此模板指定的文件夹中。如果您有两个名为 Element 和 Voodoo 的模板已安装，您的目录将如下所示：

/templates/element
/templates/voodoo

请注意，模板的目录名必须与模板的名称相同——在本例中是 element 和 voodoo。这些名称区分大小写，不应包含空格。

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

/element/templateDetails.xml
/element/index.php

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

这是一个 XML 格式的元数据文件，它告诉 Joomla 在加载使用此模板的网页时需要哪些其他文件。（请注意大写的 D。）它还详细说明了作者、版权以及构成模板的文件（包括使用的任何图像）。当使用管理后台的扩展安装程序安装模板时，此文件的最后一个用途是解压缩和安装模板。

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

此文件在 Joomla 模板中最为重要。它布局网站并告诉 Joomla CMS 在哪里放置不同的组件和模块。它是 PHP 和 HTML/XHTML 的组合。

几乎所有模板都使用其他文件。按照惯例（尽管 Joomla 核心不要求），命名和定位它们如下：

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

这些只是示例。表 9.1 列出了模板中常见的文件。

表 9.1 CSS-आधारित模板所需的核心文件

templateDetails.xml

templateDetails.xml 文件充当清单或打包列表，其中包含模板所有文件或文件夹的列表。它还包括作者和版权等信息。其中一些详细信息将在管理后台的模板管理器中显示。XML 文件示例如下：

注意 - 如果您正在跟随学习并一边阅读一边创建模板，此时，您应该打开一个文本编辑器，创建一个名为 templateDetails.xml 的文件，并确保它包含此处显示的的代码。

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
      <name>TemplateTutorial15</name>
      <creationDate>August 2007</creationDate>
      <author>Barrie North</author>
      <copyright>GPL</copyright>
      <authorEmail> compassdesigns@gmail.com </authorEmail>
      <authorUrl>www.compassdesigns.net</authorUrl>
      <version>1.0</version>
      <description>First example template for Chapter 9 of the Joomla
Book</description>
      <files>
            <filename>index.php</filename>
            <filename>templateDetails.xml</filename>
            <filename>favicon.ico</filename>
            <folder>css/</folder>
            <folder>images/</folder>
            <folder>js/</folder>
       </files>
      <positions>
            <position>user1</position>
            <position>top</position>
            <position>left</position>
            <position>banner</position>
            <position>right</position>
            <position>footer</position>
      </positions>
      <params>
            <param name="colorVariation" type="list" default="white"
label="Color Variation" description="Color variation to use">
                  <option value="blue">Blue</option>
                  <option value="red">Red</option>
            </param>
      </params>
</install>

让我们看看其中一些行是什么意思：

• <install version="1.5" type="template">——XML 文档的内容是后端安装程序的说明。type="template" 选项告诉安装程序您正在安装一个模板，并且它是用于 Joomla 1.5。
• <name>TemplateTutorial15</name>——此行定义模板的名称。您在此处输入的名称也将用于在 templates 目录中创建目录。因此，它不应包含文件系统无法处理的任何字符，例如空格。如果您是手动安装，则需要创建一个名称与模板名称完全相同的目录。
• <creationDate>August 2007</creationDate>——这是模板的创建日期。它是一个自由格式字段，可以是任何内容，例如 May 2005、08-June-1978、01/01/2004 等。
• <author>Barrie North</author>——这是此模板作者的姓名，很可能是您的姓名。
• <copyright>GPL</copyright>——任何版权信息都放在此元素中。
• <authorEmail>compassdesigns@gmail.com</authorEmail>——这是可以联系到此模板作者的电子邮件地址。
• <authorUrl>http://www.compassdesigns.net</authorUrl>——这是作者网站的 URL。
• <version>1.0</version>——这是模板的版本。
• <files></files>——这是模板中使用的各种文件的列表。模板中使用的文件使用 `<filename>` 和 `<folder>` 标签进行布局，如下所示：

  <files>
       <filename>index.php</filename>
       <filename>templateDetails.xml</filename>
       <filename>favicon.ico</filename>
   <folder>css/</folder>
   <folder>images/</folder>
   <folder>js/</folder>
  </files>

  “files”部分包含所有通用文件，例如模板的 PHP 源或模板预览的缩略图。此部分中列出的每个文件都包含在 `<filename> </filename>` 标签中。您也可以包含整个文件夹，例如图像文件夹，方法是使用 `<folder>` 标签。

• <positions></positions>——这显示了模板中可用的模块位置。它是页面位置的列表，例如 top、left 和 right，在模板中定义，可以使用模块管理器的“位置”下拉菜单来显示模块。此列表中的位置名称必须与 index.php 中为每个列出位置生成内容的 PHP 代码完全匹配。
• <params></params>——此部分描述了可以在后端设置并作为全局变量传递的参数，以实现高级模板功能，例如更改模板的配色方案。

index.php

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

注意 - 如果您正在跟随学习并一边阅读一边创建模板，此时，您应该打开一个文本编辑器，创建一个名为 index.php 的文件，并确保它包含以下代码片段。

让我们看看实现有效模板的一个关键部分：index.php 文件顶部的 DOCTYPE。这是放在每个网页顶部的代码。在我们页面的顶部，模板中有这个：

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

第一个 PHP 语句只是确保文件不被直接访问以提高安全性。

网页 DOCTYPE 是网页由浏览器显示的基本组成部分之一——各种 HTML 标签如何处理，以及更重要的是，浏览器如何解释 CSS。以下来自 alistapart.com 的观察应该能让您更深入地理解：

[W3C 网站上关于 DOCTYPE 的信息] 是为技术人员编写的。当我说的“技术人员”时，我不是指像你我这样的普通 Web 专业人士。我指的是让其他人看起来像“她收到邮件”的第一天奶奶的技术人员。

您可以使用几种 DOCTYPE。基本上，DOCTYPE 告诉浏览器使用哪个版本的 HTML 设计页面，它是否包含一些旧代码，或者是否也包含 XML，因此如何解释页面。这里“strict”和“transitional”这两个词开始被提及（通常是 float:left 和 float:right），以指示是否包含旧代码。基本上，自从 Web 诞生以来，不同的浏览器对各种 HTML 标签和 CSS 版本都有不同程度的支持。例如，Internet Explorer 不会理解 min-width 命令来设置最小页面宽度。为了复制一个效果，使其在所有浏览器中显示相同，您有时不得不使用浏览器特定的“hack”来弥补每个浏览器对发布标准的遵循程度的不足。

Strict 意味着 HTML（或 XHTML）将按照标准规定进行解释。Transitional DOCTYPE 意味着页面将被允许一些约定俗成的差异（例如，继续使用已弃用的标签）。

为了增加复杂性，有一种叫做“quirks”模式的东西。如果 DOCTYPE 是错误的、过时的或不存在的，浏览器就会进入 quirks 模式。这是为了向后兼容，因此 Internet Explorer 6，例如，将像 Internet Explorer 4 一样渲染页面。

不幸的是，人们有时会意外地进入 quirks 模式。这通常发生在两种方式：

• 他们使用 WC3 网页上的 DOCTYPE 声明，并且链接最终成为 DTD/xhtml1-strict.dtd，这是一个在 WC3 服务器上的相对链接。您需要完整的路径，如上所示。
• Microsoft 设置了 Internet Explorer 6，以便您可以拥有有效的页面但处于 quirks 模式。当在 DOCTYPE 之前有一个 xml 声明时，就会发生这种情况。

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->
language; ?>" lang="<?php echo $this->language; ?>" >

关于 Internet Explorer 6 quirks 模式的信息很重要。在本章中，您仅为 Internet Explorer 6 及更高版本设计，并且需要确保它在标准模式下运行，以最大程度地减少以后需要进行的 hack。

注意 - 使页面符合标准，以便您在页面底部看到有效的 xhtml，不需要真正困难的编码或难以理解的标签。它仅仅意味着您使用的代码遵循规则——它与您所说的 DOCTYPE 相匹配。就是这样！仅此而已。

将您的站点设计为符合标准，在某个层面上可以归结为“说你做什么”，然后“做你所说的”。

以下是一些有用的链接，可以帮助您理解 DOCTYPE 和 quirks 模式：

• http://www.quirksmode.org/css/quirksmode.html

• http://www.alistapart.com/stories/doctype

• http://www.w3.org/QA/2002/04/Web-Quality

让我们看看 index.php 文件头部的结构；您希望它尽可能简洁，但仍足够用于生产站点。您将使用的头部信息如下：

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo
$this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/template.css" type="text/css" />

</head>

这一切意味着什么？

我们已经讨论了 index.php 文件中 DOCTYPE 语句的影响。`<?php echo $this->language; ?>` 代码从全局配置中的站点语言设置中提取语言。

下一行用于包含更多头部信息：

<jdoc:include type="head" /> 

此代码片段将在生成的页面中插入全局配置中设置的所有头部信息。在默认安装中，它包括此处显示的标签：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="title" content="Home Page" />
  <meta name="author" content="Administrator" />
  <meta name="description" content="Joomla! - the dynamic portal engine
and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content
Management" />
  <title>Home Page</title>
  <link href="/templates/yourtemplate/favicon.ico"
		rel="shortcut icon" type="image/x-icon" />


  <script type="text/javascript" src="https:////yoursite/
media/system/js/mootools.js"></script>
  <script type="text/javascript" src="https:////yoursite/
media/system/js/caption.js"></script>

此头部信息中的大部分内容是即时生成的，特定于某人正在查看的页面（文章）。它包括许多元标签、favicon、任何 RSS feed URL 以及一些标准 JavaScript 文件。

头部中的最后几行提供了指向 Joomla 通用页面以及此模板的 CSS 文件的链接：

<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/
css/template.css" type="text/css" />

前两个文件，*system.css* 和 *general.css*，包含一些通用的 Joomla 样式。最后一个是所有模板的 CSS，这里称为 template.css。PHP 代码 `<?php echo $this->template ?>` 返回当前模板的名称。以这种方式编写而不是编写实际路径，使代码更通用。当您创建新模板时，您可以只复制此行（以及整个头部代码），而不必担心编辑任何内容。

模板 CSS 可以包含任意数量的文件，例如针对不同浏览器的条件文件，以及针对打印等不同媒体的文件。添加以下代码可以检测并添加一个额外的 CSS 文件，该文件针对 Internet Explorer 6 的怪癖：

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]-->

接下来的示例是使用模板参数的技术的一部分。在这种情况下，在模板管理器中选择的一个颜色方案会加载一个与所选颜色同名的 CSS 文件。

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/
css/<?php echo $this->params->get('colorVariation'); ?>.css"
type="text/css" />

它可能会生成这个：

<link rel="stylesheet" href="templates/voodoo/css/blue.css"
type="text/css" />

Joomla! 页面正文

现在 <head> 部分已经设置好，我们可以继续处理 <body> 标签了。创建您的第一个模板将很容易！准备好了吗？

要创建模板，您只需要使用 Joomla 语句来插入 mainbody 的内容，以及任何您想要的模块：

<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
</body>

模板包含以下内容，以相对合理的查看顺序排列：

• 站点名称
• 顶部模块
• 左侧模块
• 面包屑导航栏
• 主内容
• 右侧模块
• 底部模块

此时（如果预览），站点看起来并不令人印象深刻（见图 9.3）。

一个未 styled 的模板。

您至少需要了解的 - 最基本的模板只是显示 Joomla 模块和 mainbody（组件）。在基于 CSS 的模板中，布局和设计由 CSS 完成，而不是由模板完成。

您希望尽可能接近语义标记。从 Web 的角度来看，这意味着页面可以被任何人阅读——浏览器、爬虫或屏幕阅读器。语义布局是可访问性的基石。

注意 - 您目前拥有的模板只是语义布局的*潜力*。如果您继续将随机模块放在随机位置，就会一团糟。CMS 站点的一个重要考虑因素是，模板的好坏取决于内容的填充。这常常让试图验证其站点的设计人员感到困惑。

请注意，您使用了一系列用于创建此输出的 Joomla 特定命令中的第一个：

<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />

PHP echo 语句只是输出 configuration.php 文件中的一个字符串。在这里，您使用的是站点名称；您也可以轻松使用以下内容：

The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();?>

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

此行插入组件的输出。具体是哪个组件将由链接的菜单项决定。

<jdoc:include type="component" />

注意 - 有趣的是，您可以插入多个组件输出的实例。我不确定您为什么会想这样做，但您可以！

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

<jdoc:include type="modules" name="right" />

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

<jdoc:include type="modules" name="location" style="option" />

我们将在本章后面的“模板中的模块”一节中介绍各种样式选项。

CSSTEMPLATETUTORIALSTEP1 - 此时，您拥有一个非常基础的模板。

我创建了一个可安装的模板，可从 http://www.joomlabook.com 获取：CSSTemplateTutorialStep1.zip。通过打开此文件，您可以安装一个仅包含两个文件：index.php 和 templateDetails.xml 的模板。在这些文件中，我删除了对其他文件的引用，以提供最简化的输出，没有 CSS。这是一个有用的诊断模板；您可以安装它并跟踪组件或模块中出现的错误。

使用 CSS 创建无表格布局：CSSTemplateTutorialStep2

在本节中，您将使用纯 CSS 为 Joomla 模板创建三列布局。您还将将其制作成“jello”布局。Web 页面布局有三种主要类型：固定、流体和 jello——它们都指的是页面宽度的控制方式。固定布局的宽度设置为某个固定值。流体布局可以根据浏览器窗口的大小进行增长和缩小，而 jello 布局是流体的，但介于某些最小和最大值之间。

页面宽度是一个问题，因为人们上网时使用的浏览器分辨率有很多。大多数（79%）使用 1024x768 及以上分辨率（见 http://www.upsdell.com/BrowserNews/stat_trends.htm#res）。就在几年前，流体布局为了最大的灵活性而更受欢迎。然而，现在许多用户拥有（2000+ 像素）的大屏幕。流体布局变得难以阅读，因为人眼无法正确扫描超过 960 像素的行。因此，我现在更倾向于使用 jello 布局。

典型的设计可能会使用表格来布局页面。表格作为一种快速解决方案很有用，因为您只需将列的宽度设置为百分比即可。然而，表格也有几个缺点。例如，与 CSS 布局相比，表格有很多额外的代码。这会导致更长的加载时间（冲浪者不喜欢）以及在搜索引擎中表现更差。代码的大小可能翻倍，不仅是标记，还有“spacer GIFs”，即放置在表格每个单元格中的 1x1 透明图像，以防止单元格折叠。即使是大公司有时也会陷入表格陷阱。

使用表格进行布局的网站存在几个主要问题：

• 它们难以维护。要更改某些内容，您必须弄清楚所有表格标签，如 <tr> 和 <td>，都在做什么。使用 CSS，只需检查几行代码。
• 内容无法源顺序。许多 Web 冲浪者不是在浏览器中查看网页。那些使用文本浏览器或屏幕阅读器的人从左上角到右下角阅读页面。这意味着他们首先看到头部和左侧列（对于三列布局）中的所有内容，然后才看到中间列，那里是重要内容。另一方面，CSS 布局允许“源顺序”内容，这意味着内容可以在代码/源中重新排列。也许您最重要的网站访问者是 Google，它在所有意图和目的上都使用屏幕阅读器。

让我们用 CSS 看看我们的布局。您可以通过几种方式使用 CSS 来定位元素（内容）。作为快速介绍，一个好的来源是 Brainjar 的“CSS 定位”（见http://www.brainjar.com/css/positioning/）。

如果您是 CSS 新手，您可能想至少阅读一本 CSS 入门指南。这里有一些建议：

• Kevin Hale 的《当前 CSS 布局技术概述》（见http://www.particletree.com/features/an-overview-of-current-css-layout-techniques/）
• htmldog 的《CSS 入门指南》（见http://www.htmldog.com/guides/cssbeginner/）
• yourhtmlsource.com（见http://www.yourhtmlsource.com/stylesheets/）

您至少需要了解的 - 现代 Web 设计使用 CSS 而不是表格来定位元素。学习起来有难度，但值得投资。有许多（非 Joomla）资源可以帮助您。

在本章中，您将使用 floats 来定位您的内容。最基本地说，您的模板可能看起来像图 9.4 所示。它仍然不是很吸引人，但让我们看看不同部分是关于什么的。

CSS 样式在文件的 head 中定义，以显示正在发生的事情，但通常它们包含在一个外部文件中，页面链接到该文件，例如本章前面提到的 template.css 文件。

基本模板布局。

在图 9.4 中，每一列——左、中、右——都有自己的元素。每个元素都向左浮动并具有一个加起来为 100% 的百分比宽度。页脚上的 clear:both 样式告诉浏览器停止浮动，并使页脚跨越所有三列。（在构建本章的第二个模板时，您将需要使用更高级的清除技术。）

为了改进布局并为内容增加一些空间，您需要添加一些列间距，通常称为“gutter”。不幸的是，这里有一个问题。您可能知道 Internet Explorer 通常无法正确解释 CSS。一个问题是它以独特的方式计算宽度。您可以通过不在此类具有宽度的元素上使用任何 padding 或 border 来解决此问题。为了获得 gutter，您实际上是添加了另一个更窄的 <div> 元素，该元素适合列内。

添加到 CSS 的是：

.inside {padding:10px;}

index.php 的结果 <body> 代码如下：

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <?php echo $mainframe->getCfg('sitename');?>
      <jdoc:include type="modules" name="top" />
    </div>
  </div><!--end of header-->
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" />
    </div>
  </div><!--end of sidebar-->
  <div id="content">
    <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div><!--end of mainbody content-->
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" />
    </div>
  </div><!--end of sidebar-2-->
  <div id="footer">
    <div class="inside">
Powered by <a href="https://joomla.net.cn">Joomla!</a>. Valid <a
 href="http://validator.w3.org/check/referer">XHTML</a> and <a
 href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
    </div>
  </div><!--end of footer-->
</div><!--end of wrap-->
</body>

template.css 文件看起来像这样：

/*Compass Design template.css CSS file*/
body {}

#wrap {
   min-width:760px;
   max-width:960px;
   }

#header {}

#sidebar {float:left;width:20%; overflow:hidden }

#content {float:left;width:60%; overflow:hidden }

#sidebar-2 {float:left;width:20%; overflow:hidden }

#footer {clear:both;}

.inside {padding:10px;}

CSS 简写 - 通过使用“简写”，可以减少 CSS 代码量。一个例子是应用于元素的 padding 和 margin 样式，其中以下内容：

margin-top:5px;
margin-bottom:5px;
margin-left:10px;
margin-right:10px;

可以全部替换为：

margin: 5px 10px; 

每个样式定义的开头都有简写样式。在您弄清楚样式后，您可以填写简写版本并删除长版本。

例如，margin 的简写语法如下：

margin: margin-top | margin-right | margin-bottom | margin-left

例如，这是 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;

您可以访问 home.no.net/junjun/html/shorthand.html 阅读更多关于此语法的信息。

这种简单的布局非常适合学习如何将 CSS 与 Joomla 结合使用，因为它展示了 CSS 相对于基于表格的布局的两个优点：代码量更少，并且更易于维护。本质上，它表示将页面适配到 760 到 960 像素宽的空间；将标题显示为全宽，然后将空间分成一列占总宽度的 20%，然后是占 60% 的一列，然后是占 20% 的最后一列。之后，将页脚显示为全宽。对于适合这些空间内的内容，为其提供 10 像素的 padding。

然而，这种简单的布局是按照您在屏幕上看到内容的顺序进行观众排序，而不是源排序，将最重要的内容放在生成的 HTML 源的开头，同时在屏幕上具有相同的观众排序外观，左列显示在（也就是说，在左侧）中心列之前。为此，您必须使用一种更高级的布局，称为嵌套浮动。

源顺序布局比重要内容出现在代码靠后的布局在 SEO 方面表现更好。从 Joomla 站点的角度来看，重要内容是来自 mainbody 组件的内容。目前，为了保持 CSS 简单，我们将坚持这种观众排序布局，并将在本章后面更改为源排序布局。

默认 CSS

到目前为止，所有的 CSS 都只关于布局，这将创建一个纯粹的页面。所以让我们添加一些格式设置：

/* template.css CSS file*/
body {
   text-align:center; /*center hack*/
   }
#wrap {
   min-width:760px;
   max-width:960px;
   width: auto !important; /*IE6 hack*/
   width:960px; /*IE6 hack*/
   margin:0 auto; /*center hack*/
   text-align:left; /*center hack*/
   }
#header {}
#sidebar {float:left;width:20%; overflow:hidden }
#content {float:left;width:60%; overflow:hidden }
#sidebar-2 {float:left;width:20%; overflow:hidden }
#footer {clear:both;}
.inside {padding:10px;}

这里，您使用一个小 hack 来居中文档。您必须这样做，因为 Internet Explorer 不能准确解释 CSS。对于符合标准的浏览器，您可以使用 margin:0 10%; 来居中文档，或 margin:auto;，但 Internet Explorer 不识别它，因此您将整个页面的“文本”居中作为居中“wrap”<div> 的方式，然后在 wrap <div> 内部将文本对齐回左侧。

为了庆祝 Internet Explorer 7 对 min/max width 的支持，您可以添加最小和最大宽度。请注意，您必须为不支持这些设置的 Internet Explorer 6 添加一个小的 hack——它将完全忽略 !important 声明行，并使用普通的固定 960 像素宽度。

注意 - 在百分比宽度中定义列，然后在容器 div 中设置固定宽度，这可能看起来很奇怪。嗯，这里有几件事情正在发生：

• 在固定宽度容器内拥有流体列使模板非常灵活。如果您添加宽度更改按钮，您只需要更改一个值。

• 您仍然有一个最大宽度，所以为什么不完全流体化？现在 Web 上的许多用户都有巨大的屏幕。可用性研究表明，超过 960 像素宽度的文本行很难阅读，因为眼睛必须走很长的路才能到达下一行。限制流体性使站点更易于使用和访问。

真正的排版规则是将文本列的最大宽度限制在约 60 个字符的长度。网上有很多关于以 em 为单位定义宽度的讨论，这样如果字体设置得更大，列的宽度可能会扩展，中心列的字体将超过 580 像素（960 像素的 60%，减去 10 像素的 padding）。对“fluid v. liquid v. elastic CSS layouts”进行 Google 搜索，您会发现大量关于排版的细微之处。为了简单起见，我们将使用 960 像素作为整个正文宽度，并为中心列设置一个适合 580 像素的字体大小。

您向列添加了一个新样式，overflow:hidden，这使得页面在减小宽度时“断开”得更一致。

当您开始使用 CSS 处理排版时，您应该设置一些整体样式并包含一个*全局重置*。

/*Compass Design typography css */

* {
   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%;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   line-height:1.3;
   }

全局重置的目的是覆盖每个浏览器中不同的默认设置，并获得一个干净、一致的起点，无论页面在哪种浏览器上显示。所有元素的 margin 和 padding 都设置为零，然后所有块级元素都设置了 bottom 和 bottom margin。这有助于实现浏览器的一致性。（上面的第一个 CSS 选择器称为*星号选择器*，它在 Internet Explorer 6 中也起到了通用选择器的作用。）您可以在 http://www.clagnut.com/blog/1287/ 和 http://www.leftjustified.net/journal/2004/10/19/global-ws-reset/ 上阅读更多关于全局重置的信息。字体大小设置为 76% 以尝试获得跨浏览器更一致的字体大小。所有字体大小都以 em 为单位设置。设置 line-height:1.3 有助于提高可读性。当以 em 为单位设置字体和行高时，页面会更加可访问，因为查看者可以根据自己的偏好调整字体大小，并且页面会重排并保持可读性。这将在 http://www.thenoodleincident.com/tutorials/typography/template.html 中进一步讨论。

如果您为头部、侧边栏和内容容器添加一些背景颜色，您将看到如图 9.5 所示的内容。

带有排版的简单模板。

请注意，侧边栏列未到达页脚。这是因为它们仅延伸到其内容所在的位置；左侧和右侧的白色空间表示侧边栏不存在。如果您有一个所有三列都有白色背景的模板，那就没有问题。您将使用这种方法，并且会在模块周围加上框。如果您想要等高的彩色列或带框的列，您需要使用一个可以垂直平铺的背景图像。这种技术称为*伪列*，在 http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html 和 http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/ 中进行了描述。

Joomla 特定 CSS

尽管 Joomla 1.5 具有覆盖核心输出的功能，但其默认渲染仍然使用大量表格来输出 mainbody 的内容。与这些表格一起，可以使用 CSS 类分配来设置页面样式。基于社区成员的一些研究，表 9.2 显示了当前的 CSS 样式类列表。请注意，它不包括通用的网页样式，例如 H1、H2、p、ul、a、form 等。

表 9.2 Joomla 1.5 中的默认 CSS 样式类

表 9.2 中的许多样式类实际上具有可比的 CSS 样式，这些样式在其定义中更为具体。基本上，更具体的规则会覆盖不太具体的规则。例如：

a {color:blue;}
a:link {color:red;}

.contentheading {color:blue;}
div.contentheading {color:red;}

链接的颜色和 .contentheading 的颜色将是红色的，因为该规则更具体（因为 .contentheading 包含在 `<div>` 中）。

在 Joomla 模板的情况下，您通常会看到更具体的规则。当类位于表格上时，这种情况经常发生。这里有更多示例：

.moduletable
table.moduletable

.moduletable 是包装模块的 `<div>` 的名称。table.moduletable 将仅将样式应用于具有 class="moduletable" 的表格。 .moduletable 将应用样式，无论该类位于哪个元素上。

考虑这些示例：

a.contentpagetitle:link
.contentpagetitle a:link

a.contentpagetitle:link 将样式应用于任何具有 .contentpagetitle 类的 a 标签，该标签是链接。 .contentpagetitle a:link 将样式应用于 .contentpagetitle 内的任何链接元素。

特异性不容易理解；以下网站详细讨论了特异性：

• http://www.htmldog.com/guides/cssadvanced/specificity/
• http://www.meyerweb.com/eric/css/link-specificity.html
• http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

目前，尽管您的模板的 index.php 文件不包含任何表格标签，但生成的页面包含多个表格。这是因为 Joomla 1.5 有一个名为模板覆盖的新功能（稍后将详细介绍），该功能消除了布局中的表格；然而，为了与模板设计者保持向后兼容，Joomla 会将其输出为默认值。如前所述，这会减慢页面速度并使其更难更新。为了减少表格数量，当您调用模块时，您需要使用 jdoc:include 语句中的样式参数。

您至少需要了解的 - Joomla 会在网页代码中输出特定的元素，包括 ID 和类。这些元素是可以预测的，并可用于使用 CSS 设置设计样式。

模板中的模块

当在 index.php 文件中调用模块时，有几种显示选项。语法如下：

<jdoc:include type="modules" name="location" style="option" />

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

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

<table cellpadding="0" cellspacing="0" class="moduletable<?php echo
$params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
 <tr>
  <th valign="top">
   <?php echo $module->title; ?>
  </th>
 </tr>
<?php endif; ?>
 <tr>
  <td>
   <?php echo $module->content; ?>
  </td>
 </tr>
 </table>

OPTION="horz" 使模块水平显示。每个模块都在一个包装表格的单元格中输出。以下显示了我们使用“horz”选项时 Joomla 的输出：

<table cellspacing="1" cellpadding="0" border="0" width="100%">
 <tr>
  <td valign="top">
   <?php modChrome_table($module, $params, $attribs); ?>
  </td>
 </tr>
</table>

OPTION="xhtml" 使模块显示为简单的 div 元素，标题在 H3 标签中。以下显示了我们使用“xhtml”选项时 Joomla 的输出：

<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
 <h3><?php echo $module->title; ?></h3>
<?php endif; ?>
 <?php echo $module->content; ?>
</div>

OPTION="rounded" 使模块显示为允许例如可拉伸圆角的格式。如果使用了 $style，则 `<div>` 的名称从 moduletable 更改为 module。以下显示了我们使用“rounded”选项时 Joomla 的输出：

<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
 <div>
  <div>
   <div>
    <?php if ($module->showtitle != 0) : ?>
     <h3><?php echo $module->title; ?></h3>
    <?php endif; ?>
   <?php echo $module->content; ?>
   </div>
  </div>
 </div>
</div>

OPTION="none" 使模块显示为原始输出，不包含任何元素和标题。这里有一个例子：

echo $module->content;

如您所见，CSS 选项（xhtml 和 rounded）的代码更精简，这使得设置网页样式更容易。我不建议使用 table（默认）或 horz 选项（后缀），除非绝对需要。

如果您查看前面显示的 modules.php 文件，您将看到模块的所有这些可用选项。添加自己的也很容易；这是 Joomla 1.5 新的模板功能的一部分。（我们将在本章后面的“模板覆盖”一节中更详细地介绍这一点。）

要开发模板，您可以将模块样式 xhtml 应用于 index.php 中的所有模块。

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div><!--end of header-->
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div><!--end of sidebar-->
  <div id="content">
    <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div><!--end of mainbody content-->
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div><!--end of sidebar-2-->
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div><!--end of footer-->
  </div><!--end of wrap-->
</body>

注意 - 您不能将这些模块样式应用于 <jdoc:include type="component" />，因为它不是一个模块。

您至少需要了解的 - 在 Joomla 1.5 中，您可以完全自定义模块的输出，或者通过为每个模块位置设置样式选项来使用预构建的输出。所有这些选项都称为模块 chrome。

让我们移除布局 div 的背景，并添加一些 CSS 来设置模块的样式，使其标题带有边框和背景。

您的 CSS 文件中的排版部分现在应如下所示：

/*Compass Design typography CSS*/

* {
   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%;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   line-height:1.3;
   margin:1em 0;
   }
#wrap{
   border:1px solid #999;
   }
#header{
   border-bottom: 1px solid #999;
   }
#footer{
   border-top: 1px solid #999;
   }
a{
   text-decoration:none;
   }
a:hover{
   text-decoration:underline;
   }
h1,.componentheading{
   font-size:1.7em;
   }
h2,.contentheading{
   font-size:1.5em;
   }
h3{
   font-size:1.3em;
   }
h4{
   font-size:1.2em;
   }
h5{
   font-size:1.1em;
   }
h6{
   font-size:1em;
   font-weight:bold;
   }
#footer,.small,.createdate,.modifydate,.mosimage_caption{
   font:0.8em Arial,Helvetica,sans-serif;
   color:#999;
   }
.moduletable{
   margin-bottom:1em;
   padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
   }
.moduletable h3{
   background:#666;
   color:#fff;
   padding:0.25em 0;
   text-align:center;
   font-size:1.1em;
   margin:0 -10px 0.5em -10px;
   /*negative padding to pull h3 back out from .moduletable padding*/ }

这里您为使用 style="xhtml" 生成的模块添加了特定的样式规则，因此每个模块都生成了一个类为 .moduletable 的 `<div>`，并且模块的标题在 `<div>` 内显示在 `<h3>` 标签中。

注意 - 默认 Joomla 安装中的几个菜单在模块属性中带有 _menu 的菜单后缀。为了让一切正常工作，在本例中已删除了该参数。

您创建的排版 CSS 现在会产生如图 9.6 所示的结果。

带有模块和标题样式的基本模板。

模板中的菜单

您在第五章“创建菜单和导航”中看到，菜单的渲染方式有很多设置。

同样，使用 CSS 列表而不是表格可以减少代码量和简化标记。在将模块管理器参数设置为使所有菜单都呈现为*列表*后，您只有 12 个表格（您将看到如何使用 Joomla 1.5 覆盖功能删除其余表格）。请记住，列表设置在 Joomla 1.5 中使用；flat list 来自 Joomla 1.0 并将被弃用。列表也比表格好，因为文本浏览器、屏幕阅读器、不支持 CSS 的浏览器、关闭 CSS 的浏览器和搜索引擎机器人更容易访问您的内容。

使用 CSS 进行菜单的另一个优点是，在各种 CSS 开发人员站点上有大量示例代码。让我们来看其中一个，看看如何使用它。

maxdesign.com 上的一个网页提供了 30 多个菜单的选择，所有菜单都使用相同的底层代码（见http://www.css.maxdesign.com.au/listamatic/index.htm）。它被称为 Listamatic。代码中有一个细微的差异，您需要更改它才能将这些菜单改编到 Joomla。

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

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

这意味着有一个包含的 `<div>` 称为 navcontainer，而 `<ul>` 的 ID 为 navlist。要复制这种效果在 Joomla 中，您需要某种包含的 `<div>`。您可以通过使用模块后缀来实现这一点。回想一下，具有 style="xhtml" 的模块的输出如下：

<div class="moduletable">
  <h3>...Module_Title...</h3>
  ...Module_Content...
</div>

如果您添加一个名为 menu 的模块后缀，它将被添加到 moduletable 类中，如下所示：

<div class="moduletablemenu">
  <h3>...Module_Title...</h3>
  ...Module_Content...
</div>

因此，当从 Listamatic 中选择一个菜单时，您需要将 CSS 中的 navcontainer 类样式替换为 moduletablemenu。

注意 - 模块后缀在一定程度上模糊了站点设计和站点管理之间的界限。Joomla 核心进一步开发的目标之一是清晰地分离这些角色。这意味着这些角色在 Joomla 1.5 之后的未来版本中可能会被弃用。

这种模块类后缀的使用很有用。它允许不同颜色的框，只需简单更改模块类后缀即可。

您至少需要了解的 - 最好始终使用列表选项来输出菜单。然后，您可以利用许多可用的免费资源来获取用于将列表显示为导航菜单的 CSS。

对于您的站点，假设您想使用 Mark Newhouse 的 List 10（见http://www.css.maxdesign.com.au/listamatic/vertical10.htm）。您的 CSS 将如下所示：

.moduletablemenu{
   padding:0;
   color: #333;
   margin-bottom:1em;
   }
.moduletablemenu h3 {
   background:#666;
   color:#fff;
   padding:0.25em 0;
   text-align:center;
   font-size:1.1em;
   margin:0;
   border-bottom:1px solid #fff;
   }
.moduletablemenu ul{
   list-style: none;
   margin: 0;
   padding: 0;
   }
.moduletablemenu li{
   border-bottom: 1px solid #ccc;
   margin: 0;
   }
.moduletablemenu li a{
   display: block;
   padding: 3px 5px 3px 0.5em;
   border-left: 10px solid #333;
   border-right: 10px solid #9D9D9D;
   background-color:#666;
   color: #fff;
   text-decoration: none;
   }
html>body .moduletablemenu li a {
   width: auto;
   }
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
   border-left: 10px solid #1c64d1;
   border-right: 10px solid #5ba3e0;
   background-color: #2586d7;
   color: #fff;
   }

然后，您需要将要使用此 CSS 规则集 styled 的任何菜单模块添加到模块后缀 menu（此处无下划线）。这将生成如图 9.7 所示的菜单。

带有菜单样式的基本模板。

提示 - 在尝试使特定菜单正常工作时，请创建默认的 Joomla 安装，然后查看构成主菜单的代码。将此代码复制粘贴到 HTML 编辑器（如 Dreamweaver）中。将所有链接替换为 #，然后您可以添加 CSS 规则，直到达到所需的效果。创建样式的菜单代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.moduletablemenu{

 ...  your menu testing css ...

}
-->
</style>
</head>
<body>
<div class="moduletablemenu">
<h3>Main Menu</h3>
<ul class="mainmenu">
  <li id="current" class="item1 active"><a href="#">Home</a></li>
  <li class="item2"><a href="#">Joomla! Overview</a></li>
  <li class="item3"><a href="#">What's New in 1.5?</a></li>
  <li class="item4"><a href="#">Joomla! License</a></li>
  <li class="item5"><a href="#">More about Joomla!</a></li>
  <li class="item6"><a href="#">FAQ</a></li>
  <li class="item7"><a href="#">The News</a></li>
  <li class="item8"><a href="#">Web Links</a></li>
  <li class="item9"><a href="#">News Feeds</a></li>
</ul>
</div>
</body>
</html>

CSS 被嵌入而不是链接，以方便编辑。

隐藏列

到目前为止，您的布局是您始终有三列，无论这些列中是否放置了任何内容。从 CMS 模板的角度来看，这并没有太大用处。在静态站点中，内容永远不会改变，但您希望让您的站点管理员能够放置内容，而无需担心编辑 CSS 布局。您希望能够自动关闭一列或在没有内容显示时将其折叠。

Joomla 1.5 提供了一种简便的方法来计算为特定位置生成内容的模块数量，以便您可以添加一些 PHP 测试这些计数，并隐藏任何空的列或类似的未使用的 `<div>` 容器并相应地调整布局。模块的 PHP if 测试语法如下：

<?php if($this->countModules('condition')) : ?>
   do something
<?php else : ?>
   do something else
<?php endif; ?>

有四种可能的条件。例如，让我们计算图 9.7 中模块的数量。您可以在 index.php 中的某个位置插入此代码：

left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>

因此，如果我们在此模板中插入此代码，使用示例 Joomla 内容可能会得到以下结果：

• countModules('left')——此返回 4，因为左侧有四个模块。
• countModules('left and right')——此返回 1，因为左侧和右侧都有一个模块。（两个测试都为真（> 0），因此 and 测试 true and true 是逻辑真。）
• countModules('left or right')——此返回 1，因为左侧或右侧有一个模块。（两个测试都为真（> 0），因此 or 测试 o true or true 是逻辑真。）
• countModules('left + right')——此返回 7，因为它将左右两侧模块的数量相加。

在这种情况下，您需要使用允许您计算特定位置（例如右侧列）存在的模块数量的函数。如果右侧列没有内容，您可以调整列的大小以填充该空间。

有几种方法可以做到这一点。您可以将条件语句放在 body 中以不显示内容，然后为内容设置不同的样式，具体取决于哪些列存在。为了尽可能简单，您可以在 head 标签中使用一系列条件语句来（重新）定义一些 CSS 样式：

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

结果是设置一个名为 contentwidth 的 PHP 变量，其值为一个您可以稍后使用的数字：

• 如果没有 left 或 right，则中心列显示为 100%。
• 如果 left 或 right 中有内容，则中心列显示为 80%。
• 如果 left 和 right 中都有内容，则中心列显示为 60%。

在这三种情况下，侧边栏（或多个侧边栏）都可以 styled 为相同的 20% 宽度。

然后您需要将 content div 中的 index.php 文件更改为：

<div id="content<?php echo $contentwidth; ?>">

然后您将 template.css 更改为：

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

head 中的 PHP 条件语句必须出现在链接到 template.css 文件的行之后。这是因为如果存在两个相同的 CSS 样式规则，最后一个将覆盖所有其他规则。

您也可以通过让 if 语句导入子 CSS 文件来完成此操作。

提示 - 当您尝试排除条件语句的故障时，可以在 index.php 中添加一行代码，如下所示，以显示计算值：

This content column is <?php echo $contentwidth; ?>% wide

您已经完成了一半，但现在您已经扩展了中心列的宽度，以容纳任何空的（即将隐藏的）侧边栏。

隐藏模块代码

创建可折叠列时，最好设置模块，使其在没有内容时不会生成。如果您不这样做，页面将包含空的 `<div>`，这可能导致跨浏览器问题。

为了不生成空的 `<div>`，您可以使用以下 if 语句：

<?php if($this->countModules('left')) : ?>
<div id="sidebar">
  <div class="inside">
    <jdoc:include type="modules" name="left" style="xhtml" />
  </div>
</div>
<?php endif; ?>

当您使用此代码时，如果 position left 中没有发布任何内容，那么 <div id="sidebar">；及其中的所有内容都不会包含在生成的页面中。

使用这些技术处理左右列，您的 index.php 文件现在如下所示：

注意 - 我们还需要为面包屑模块添加一个 include，即显示当前页面和路径的模块。请注意，要有面包屑，该位置的代码需要包含在 index.php 文件中，并且还需要将面包屑发布为一个模块。

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo
$this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/
css/template.css" type="text/css" />
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

</head>

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div><!--end of header-->

  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div><!--end of sidebar-->
  <?php endif; ?>

  <div id="content<?php echo $contentwidth; ?>">
    <div class="inside">
      <jdoc:include type="modules" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />
    </div>
  </div><!--end of content-->

<?php if($this->countModules('right')) : ?>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div><!--end of sidebar-2-->
  <?php endif; ?>
  <?php if($this->countModules('footer')) : ?>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
  </div><!--end of footer-->
  <?php endif; ?>
</div><!--end of wrap-->
</body>
</html>

您至少需要了解的 - 当没有内容时，像列或模块位置这样的元素可以被隐藏（或折叠）。您可以通过使用条件 PHP 语句来控制列代码是否生成，以及链接到其他内容的链接是否链接到不同的 CSS 样式来实现这一点，您可以修改类名或加载一个完全替代的 CSS 文件。

我推荐一种略有不同的方式来生成页脚。在示例中，它被硬编码到 index.php 文件中，这使得更改变得困难。现在，管理后台的“footer”模块显示 Joomla 版权信息，并且不容易编辑。将自定义 HTML 或 XHTML 模块放在一个名为 bottom 的位置会更有意义，这样站点管理员就可以更轻松地更改它。如果您想创建自己的页脚，只需取消发布该模块并创建一个自定义 HTML 模块，其中包含您想要的任何语言。

在这种情况下，您将替换这个：

<jdoc:include type="modules" name="footer" style="xhtml" />

用这个：

<jdoc:include type="modules" name="bottom" style="xhtml" />

您还必须记住将此位置添加到 templateDetails.xml 文件中。

提示 - Joomla 中与模块相关的名称有几个：banner、left、right、user1、footer 等。需要认识到的一点是，这些名称不一定对应于任何特定位置。模块的位置完全由模板设计者控制，正如您所见。将模块放在与名称相关的某个位置是惯例，但并非必需。

本节创建的基本模板展示了一些创建 Joomla 模板的基本原则。

CSSTEMPLATETUTORIALSTEP2 - 您现在拥有一个基本但功能齐全的模板。添加了一些简单的排版，但更重要的是，您创建了一个纯 CSS 布局，该布局具有动态的可折叠列。

我创建了一个可安装的模板，可从 http://www.joomlabook.com 获取：CSSTemplateTutorialStep2.zip。

现在您已经完成了基础知识，可以使用您学到的技术创建一个稍微更具吸引力的模板。

制作真实的 Joomla! 1.5 模板：CSSTemplateTutorialStep3

您需要从一个设计稿开始。设计稿（comp），是composition的缩写，是指一个建议设计的图画或模型，它将成为模板的基础。在本节中，您将使用 Bold 模板，该模板由 Joomlashack（http://www.joomlashack.com）的首席设计师 Casey Lee 捐赠，您可以在图 9.8 中看到它。

来自 Joomlashack 的设计稿。

切片与分割

过程的下一步是切片。您需要使用图形程序创建小的切片图像，这些图像可用于模板中。注意元素在需要时如何可以调整大小很重要。（我选择的图形应用程序是 Fireworks，因为它比 Photoshop 更适合网页设计，而不是印刷设计）。

这个过程本身可能就是一整本书的内容。要了解如何分割设计，您可以查看 Fireworks 中模板的源 PNG 文件，您将能够看到切片。

设置模块位置

Bold 模板将为特定模块提供一些特定的位置，与标准 Joomla 安装略有不同。为了确保您在处理此模板时正确设置模块，您需要指定以下位置：

• User1 用于搜索模块
• User2 用于顶部菜单
• Top 用于新闻闪报或自定义 HTML 模块

在这些位置不应发布任何其他内容。（快速扫描模块管理器中的位置分配，并根据需要重新定位或禁用模块。）

标题

标题图像顶部有一个微弱的响声。我们将图像设置为无平铺背景，然后为其分配匹配的填充颜色。这样，标题就可以垂直缩放，如果您需要的话（例如，如果字体大小调整）。您还需要将任何文本的颜色更改为白色，以便它能在黑色背景上显示。

您还将为搜索框使用另一个背景图像。您需要使用 CSS 特异性来定位正确的输入。您还可以使用相对定位元素内的绝对定位来精确地将搜索框放置在您想要的位置。仅使用单个图像，该图像不会随文本大小调整而缩放。这需要一个顶部和底部图像，以及所谓的滑动门技术——这又是留给您的一个练习！

这是我们必须添加以样式化标题的 CSS。

#header {
   color:#fff;
   background:#212121 url(../images/header.png) no-repeat;
   position:relative;
   }
#header h1 {
   font-family:Arial, Helvetica, sans-serif small-caps;
   font-variant:small-caps;
   font-stretch:expanded;
   padding-left:20px;
   }
#header input {
   background:url(../images/search.png) no-repeat;
   border:0;
   height:22px;
   width:168px;
   padding:2px;
   font:1em Arial, Helvetica, sans-serif;
   }
#header .search {
   position:absolute;
   top:20px;
   right:20px;
   }

这里没有使用图形徽标；您使用的是纯文本。主要原因是搜索引擎无法读取图像。您可以进行一些巧妙的图像替换，但我将其留给您自己完成。

标题现在的样子如图 图 9.9 所示。

标题图像背景。

接下来，您需要实现一种技术来在流式列上显示背景：滑动门。

列背景

回想一下，当您在列上设置颜色背景时，颜色并未一直延伸到页脚。这是因为 div 元素——在这种情况下是 sidebar 和 sidebar-2——只有内容那么高。它不会增长以填充容器元素。

您必须使用一种称为滑动假列的技术，其中您实际上创建了两个宽图像，它们会相互滑动。您需要创建两个新容器来容纳背景。通常，您可以将其应用于包含我们整个页面内容的 #wrap div，但在这里，我们使用一个额外的（浪费的）容器来说明目的。

有关完整的描述，您可以查阅这两个指南：

• alistapart.com/articles/fauxcolumns/
• http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58

在这种情况下，最大宽度是 960 像素，所以您从一个该宽度的图像开始。在图像源文件中，它是 slidingcolumns.png。然后您导出两个切片（您可以使用相同的切片，只需隐藏/显示侧面图像），一个宽度为 960 像素，其中包含一个 192 像素的图像用于左侧列背景，另一个宽度为 960 像素，其中包含一个 196 像素的图像用于右侧列背景。

注意 - 左侧图像需要一个白色背景以“长尾”到右侧，右侧需要一个透明背景以“长尾”到左侧。您可以导出图像时修改背景颜色。

192 像素来自哪里？它是 960 的 20%（因为列的宽度是 20%）。

您使用 background-position 属性将图像放置在正确的位置。在这里，您使用的是压缩的 CSS 格式，所以它们是 background 属性的一部分。

#leftfauxcol {
   background:url(../images/leftslidingcolumn.png) 20% 0;
   }
#rightfauxcol {
   background:url(../images/rightslidingcolumn.png) 80% 0;
   }

在您的 index.php 文件中，您只需在 wrap 中添加一个内部容器。

<div id="wrap">
  <?php if($this->countModules('left')) : ?>
  <div id="leftfauxcol">
    <?php endif; ?>
    <?php if($this->countModules('right')) : ?>
    <div id="rightfauxcol">
      <?php endif; ?>
      <div id="header">

您还需要对 closing divs 添加一个条件。

<?php if($this->countModules('right')) : ?>
    </div><!--end of rightfauxcol-->
    <?php endif; ?>
    <?php if($this->countModules('left')) : ?>
  </div><!--end of leftfauxcol-->
  <?php endif; ?>
</div><!--end of wrap-->

您还必须在页脚和底部模块/元素上设置背景；否则，将显示列背景。

#footer {
   background:#212121;
   color:#fff;
   text-align:right;
   clear:both;
   }
#bottom {
   background:#333;
   color:#666;
   padding:10px 50px;
   }

您需要清除浮动，以便浮动容器（假列）能够延伸到页面底部。实现此目的的最佳方法是使用 :after 属性（参见 http://www.positioniseverything.net/easyclearing.html）。但随着 Internet Explorer 7 的发布，此方法将无法完全正常工作。

已经找到了一些解决方案（参见 http://www.quirksmode.org/css/clearing.html 和 http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/）。您可以使用浮动（几乎）所有内容选项（参见 http://www.orderedlist.com/articles/clearing-floats-the-fne-method/）。

因此，您向 #footer 添加了一个简单的 clear:both，并向 fauxcol wrappers 添加了浮动。

/*Compass Design ie6only.css CSS*/
#leftfauxcol {
   float:left;
   width:100%;
   }
#rightfauxcol {
   float:left;
   width:100%;
   }
#footer {
   float:left;
   width:100%;
   }

注意 - 这对于 IE6 将无法完全正常工作，但 IE6 本来就不理解我们的 min/max 宽度，因此会尝试以流式方式布局，从而破坏布局。

灵活的模块

让我们更深入地研究通过设置显示选项来调整模块外观，并讨论“chrome”的概念。“Chrome”是为内容赋予风格化外观的昵称，Joomla 提供了一些内置功能，可以帮助您从布局中移除表格，并添加一些漂亮的 chrome。在您的设计中，顶部位置有一个大的初始模块块。您不知道所需文本的高度是多少。为了解决这个问题，您将模块 jdoc:include 语句放入一个容器元素中，并为其设置与图像相同的背景颜色。这与您用于标题的策略相同。

<?php if($this->countModules('top')) : ?>
<div id="top">
  <div class="inside">
    <jdoc:include type="modules" name="top" style="xhtml" />
  </div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>

注意 - 此代码使用条件 else 语句插入非折叠占位符内容（一个不换行空格），这样如果顶部模块位置没有内容，通常由模块生成的全尺寸橙色预览图像也不会在那里。那里将是一个几乎为空的容器，其中包含一点背景图像和 20 像素的垂直填充。这纯粹是为了美观。

CSS 需要使用 CSS 特异性来为 .top 模块样式，以覆盖前面定义的通用 moduletable 样式。这些新样式专门影响 id 为 top 的 div 的后代元素（类为 moduletable），并将覆盖为类为 moduletable 的元素设置的任何相反的样式属性。

#top {
   background:#ea6800 url(../images/teaser.png) no-repeat;
   padding:10px;
   }
#top .moduletable h3 {
   color:#fff;
   background:none;
   text-align:left;
   font:2.5em Arial, Helvetica, sans-serif normal;
   padding:0;
   margin:0;
   font-stretch:expanded
   }
#top .moduletable{
   font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
   color:#fff;
   margin:0;
   padding:0;
   border:0;
   }

现在让我们关注一些排版。

排版

许多链接需要是白色的，因此您可以全局定义它们，然后修改中心列的颜色。

a:link,a:visited {
   text-decoration:underline;
   color:#fff;
   }
a:hover {
   text-decoration:none;
   }
#content60 a:link,#content60 a:visited,#content80 a:link,
	#content80 a:visited,#content100 a:link,#content100 a:visited {
   color:#000;
   }

设计有一个风格化的按钮。您可以通过使用设计稿中的背景图像来创建它。它是一个水平平铺的细长切片。

.button {
   border:#000 solid 1px;
   background:#fff url(../images/buttonbackground.png) repeat-x;
   height:25px;
   margin:4px 0;
   padding:0 4px;
   cursor:hand;
   }

对于表格，例如常见问题列表，您可以通过重复使用用于预览的图像来轻松添加背景。

注意 - 重用图像可以节省图像下载量，从而加快页面加载速度。

.sectiontableheader {
   background:url(../images/teaser.png);
   padding:5px;
   color:#fff;
   font:1.2em bold Arial, Helvetica, sans-serif;
   }

模块只需要简单的重新定义以及对内边距和外边距的调整。

/* Module styling */
.moduletable {
   margin-bottom:1em;
   color:#fff;
   font-size:1.1em;
   }
.moduletable h3 {
   font:1.3em Tahoma,Arial,Helvetica,sans-serif;
   background:#000;
   color:#ccc;
   text-align:left;
   margin:0 -10px;
   padding:5px 10px;
   }

菜单，一如既往，需要大量的样式 CSS。在这里，您应该尽可能保持简单。您可以切一个包含项目符号和下划线的单个图像。请注意，通过将模块后缀 menu 应用于您想要此外观的任何菜单模块来开启样式设置。

/*Menu Styling*/
.moduletablemenu {
   margin-bottom:1em;
   }
.moduletablemenu h3 {
   font:1.3em Tahoma,Arial,Helvetica,sans-serif;
   background:#000;
   color:#ccc;
   text-align:left;
   margin:0 -10px;
   padding:5px 10px;
   }
.moduletablemenu ul {
   list-style:none;
   margin:5px 0;
   }
.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
   height:24px;
   font:14px Tahoma,Arial, Helvetica, sans-serif;
   margin:10px 0;
   padding:0 0 0 10px;
   }
.moduletablemenu a:link,.moduletablemenu a:visited {
   color:#fff;
   display:block;
   text-decoration:none;
   padding-left:5px;
   }
.moduletablemenu a:hover {
   text-decoration:none;
   color:#fff;
   background:#ADADAD;
   }

最后是右上角的标签菜单。作为无障碍倡导者，您希望将其设置为标签会随着字体大小调整而缩放。幸运的是，已经开发出一种技术来实现这一点；它实际上与您用于列的技术相同：再次是滑动门（参见 http://www.alistapart.com/articles/slidingdoors/）！

您还可以尝试对模板进行一些速度优化，并仅使用一个图像来处理“门”的左侧和右侧，以及开/关状态。这被称为使用精灵图（参见 http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites）。

CSS 并不难；您只需要调整开状态下图像背景的垂直位置。

/*Tab Menu Styling*/
.moduletabletabs {
   font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
   }
.moduletabletabs ul {
    list-style:none;
   float:right;
   margin:0;
   padding:0;
   background:#212121;
   width:100%;
   }
.moduletabletabs li {
   float:right;
   background:url(../images/tabs.png) no-repeat 0 -4px;
   margin:0;
   padding:0 0 0 12px;
   }
.moduletabletabs a:link,.moduletabletabs a:visited {
   float:left;
   display:block;
   color:#000;
   background:url(../images/tabs.png) no-repeat 100% -4px;
   text-decoration:none;
   margin:0;
   padding:7px 18px 5px 9px;
   }
.moduletabletabs #current {
   background:url(../images/tabs.png) no-repeat 0 -84px;
   }
.moduletabletabs #current a {
   color:#fff;
   background:url(../images/tabs.png) no-repeat 100% -84px;
   }

您还需要将模块后缀 tabs 添加到您正在使用的菜单模块中。

如果您回顾原始设计，您会注意到这些标签上有图标。由于您已经在使用两个背景图像，一个在 li 上，一个在链接上，因此您需要第三个元素来放置图标背景。您可以通过使用 span 来实现这一点，但由于这是高级 CSS 杂耍，我将其留作家庭作业。

注意 - 由于模板的 XML 文件使用文件夹来存储 CSS 和图像，因此您无需编辑它来添加这些新文件，因为它们将自动被拾取并安装。

完成的模板应如图 图 9.10 所示。

具有排版的先进模板。

您需要知道的最基本内容 - 创建一个生产级的 Joomla 模板更多的是图形设计和 CSS 操作问题，而不是一些特殊的 Joomla 知识。

CSSTEMPLATETUTORIALSTEP3 - 您现在有一个基于设计稿（或设计）的模板。添加了一些简单的排版，但更重要的是，您创建了一个纯 CSS 布局，该布局具有动态的可折叠列和时尚的标签菜单。

我创建了一个可安装的模板，可从 http://www.joomlabook.com 获取：CSSTemplateTutorialStep3.zip。

现在您已经完成了基础知识，让我们开始深入研究 Joomla 1.5 模板可能的一些高级功能。

高级模板功能：CSSTemplateTutorialStep4

Joomla 1.5 提供了一些高级模板功能，极大地扩展了模板的可能性。您在本课中已经看到一个例子：创建模块自定义 chrome 的能力。

接下来，我们将研究模板参数和模板覆盖。

模板参数

Joomla 1.5 的新功能是为模板添加了模板参数。模板参数允许您从管理后台选项中向模板传递变量。

您可以向模板添加相对简单的参数功能。在 templateDetails.xml 文件中，添加以下内容：

<params>
<param name="template_width" type="list" default="1"
label="Template Width" description="Width style of the template">
   <option value="2">Fluid with maximum and minimum </option>
   <option value="1">Medium</option>
   <option value="0">Small</option>
  </param>
</params>

您还需要在模板文件夹中创建一个名为 params.ini 的文件。Joomla 需要此文件，它可以是空白文件，用于存储您的设置。例如，前面示例的 .INI 文件在设置为 Medium 时将如下所示：

template_width=1

您需要确保此文件是可写的，以便可以进行更改。当您使用模板管理器打开模板进行编辑时，Joomla 会报告参数文件是否可编辑。如果不可编辑，并且您的模板需要接受参数，则需要在 Cpanel 中更改其权限。不幸的是，Joomla 中存在一个 bug，在某些条件下，Joomla 会认为文件不可写，即使它实际上是可写的。您需要进行测试，而不是依赖界面文本。

您还需要将 params.ini 作为文件添加到 templateDetails.xml 文件列表中。

在该模板的模板管理器中，您将看到参数的设置，如 图 9.11 所示。

管理后台中的模板参数。

基于您上面创建的参数，您可以看到它是一个简单的下拉列表，有三个选项。要将选项显示为单选按钮，并对选择进行更多详细说明，templateDetails.xml 文件中的 param 部分可以如下所示：

<param name="template_width" type="radio" default="0" label="Template
Width" description="Change width setting of template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>

为了让模板宽度参数生效，请将 index.php 文件中的 body 标签更改为以下内容：

然后将以下内容添加到 CSS 文件中，替换 #wrap 之前的样式：

body.width_0 div#wrap {
width: 760px;
}
body.width_1 div#wrap {
width: 960px;
}
body.width_2 div#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
width:960px;
}
#wrap {
text-align:left;
margin:0 auto;
}

这样您就有三个选项：固定窄宽度、固定宽宽度和流式版本。

以这种方式使用模板参数为您提供了模板几乎任何方面的灵活性——宽度、颜色等——所有这些都通过条件 PHP 控制，以选择不同的 CSS 样式。

模板覆盖

Joomla 1.5 中模板最强大的新功能可能是能够轻松覆盖核心输出。您通过名为模板文件的新的输出文件来实现这一点，这些文件对应于每个单独组件和模块的布局视图。Joomla 在每种情况下都会检查模板文件夹中是否存在覆盖文件，如果找到，它将使用该文件而不是该模块或组件的正常内置模板。

覆盖结构

主核心中的所有布局视图和模板都位于 /tmpl/ 文件夹中。组件的路径与模块略有不同，因为模块基本上只有一个视图。这是一个例子：

modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_user/views/login/tmpl/
components/com_user/views/register/tmpl/
components/com_content/views/article/tmpl/
components/com_content/views/section/tmpl/

所有组件和模块的基本结构是 View[ra]Layout[ra]Templates。

表 9.3 展示了一些示例；请注意，模块只有一个视图。

表 9.3 覆盖示例

特定布局通常涉及多个模板文件。它们遵循通用的命名约定（请参阅表 9.4）。

表 9.4 覆盖命名约定

覆盖模块

每个模块都有一个名为 tmpl 的文件夹，其中包含其模板。里面是创建输出的 PHP 文件。这是一个例子：

/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php

前三个示例是新闻闪报的三个布局，基于选择的模块选项，而 _item.php 文件是所有这三个布局共用的通用布局模板。如果您打开该文件，您会发现：

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
      <td class="contentheading<?php echo $params->get( 'moduleclass_sfx' );
?>" width="100%">
      <?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
            <a href="<?php echo $item->linkOn;?>" class="contentpagetitle
<?php echo $params->get( 'moduleclass_sfx' ); ?>">
                  <?php echo $item->title;?>
            </a>
       <?php else : ?>
            <?php echo $item->title; ?>
      <?php endif; ?>
      </td>
</tr>
</table>
<?php endif; ?>

<?php if (!$params->get('intro_only')) :
      echo $item->afterDisplayTitle;
endif; ?>

<?php echo $item->beforeDisplayContent; ?>

<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
      <tr>
            <td valign="top" colspan="2"><?php echo $item->text; ?></td>
      </tr>
</table>
<?php if (isset($item->linkOn) && $item->readmore) :
      echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>';
endif; ?>

您可以更改此文件以移除表格，并用 `

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
      <div class="contentheading<?php echo $params->get( 'moduleclass_sfx' );
?>">
      <?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
            <a href="<?php echo $item->linkOn;?>" class="contentpagetitle
<?php echo $params->get( 'moduleclass_sfx' ); ?>">
                  <?php echo $item->title;?>
            </a>
       <?php else : ?>
            <?php echo $item->title; ?>
       <?php endif; ?>
       </div>
</div>
<?php endif; ?>

<?php if (!$params->get('intro_only')) :
      echo $item->afterDisplayTitle;
endif; ?>

<?php echo $item->beforeDisplayContent; ?>

<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php echo $item->text; ?>
</div>
<?php if (isset($item->linkOn) && $item->readmore) :
      echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>';
endif; ?>

templates/templatetutorial15bold/html/mod_newsflash/_item.php

/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/frontpage
/components/com_content/views/section

/components/com_content/views/category/tmpl/blog.php
/components/com_content/views/category/tmpl/blog_item.php
/components/com_content/views/category/tmpl/blog_links.php
/components/com_content/views/category/tmpl/default.php
/components/com_content/views/category/tmpl/default_items.php

templates/templatetutorial15bold/html/com_content/category/blog_item.php