使用 Joomla 创建模板：分步

本教程将引导您完成从头开始创建 joomla 模板的必要步骤。我们将涵盖每一个细节；那么让我们开始吧！

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

---

游戏计划

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

---

什么是 Joomla!模板？

Joomla 模板是 Joomla CMS 中控制内容呈现的一系列文件

Joomla 模板是 Joomla CMS 中控制内容呈现的一系列文件。 Joomla 模板不是一个网站；它是一个网站。它也不被认为是一个完整的网站设计。模板是查看 Joomla 网站的基本设计。为了产生“完整”网站的效果，该模板与 Joomla 数据库中存储的内容密切配合。

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

像 Joomla 一样，使用 CMS 模板具有许多优点：

• Joomla 完成将内容放入页面的所有工作。您只需键入新文章即可将新信息添加到现有博客页面。模板及其 CSS 确保其在风格上与网站上的其他内容保持一致。
• 内容和表示完全分离，特别是当 CSS 用于布局时（而不是在 index.php 文件中使用表格）。这是确定网站是否符合现代网络标准的主要标准之一。在符合标准的网站中，表格的 HTML 标记保留用于显示表格数据，而不是将页面布置到列中。
• 您可以立即应用新模板，从而为网站带来全新的外观。这可能涉及放置内容和模块以及颜色和图形的不同位置。

---

本地主机设计流程

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

没有“正确的方法”来创建网页。

现在使用“所见即所得”(WYSIWYG) HTML 编辑器（例如 Dreamweaver）很常见，因此您无需编写 HTML 代码。然而，在Joomla模板设计过程中使用这样的编辑器是不可能的，因为所见即所得编辑器无法显示和编辑动态页面。因此，您必须手动编写模板及其 CSS 代码，并在进行更改时经常刷新的服务页面上查看 PHP 的输出页面。如果连接足够快，这可能是一个 Web 服务器，但大多数设计人员在自己的计算机上使用本地服务器或本地主机 - 一个为计算机上的网页提供服务的软件，例如第 1 章中描述的本地主机设置2、“下载并安装Joomla！”

创建网页没有“正确的方法”；你如何做取决于你的背景。那些更喜欢图形的人倾向于在图形程序（例如 Photoshop）中制作页面的“图像”，然后分解图像，以便将它们用于 Web（称为切片和切块）。更多基于技术的设计师通常直接跳入 CSS 并开始对字体、边框和背景进行编码。然而，正如刚才提到的，作为 Joomla 模板设计者，您受到以下事实的限制：您无法立即在同一个编辑器中看到编码的效果。因此，您可以使用以下修改后的设计流程：

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

本地主机服务器选项

要继续学习本教程，您需要安装 WampServer。如果您还没有这样做，请继续安装。我就在这里等。

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

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

W3C 和无表设计

可用性、可访问性和搜索引擎优化 (SEO) 都是当今互联网上用来描述高质量网页的短语。事实上，可用性、可访问性和 SEO 之间存在大量重叠，并且展示其中一个特征的网页通常同时具备这三个特征。实现这三个目标的最简单方法是使用 W3C Web 标准中规定的框架。

例如，视力不佳的人可以通过屏幕阅读器轻松阅读使用 HTML 语义构建的网站。它也可以很容易地被搜索引擎蜘蛛读取。谷歌实际上在如何阅读网站方面是盲目的；就像使用屏幕阅读器一样。

网络标准制定了一组通用的“规则”，供所有网络浏览器用来显示网页。推动这些标准的主要组织是 W3C，其主管 Tim Berners-Lee 因在 1989 年发明了 Web 而受到赞誉。

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

当前的 W3C 标准有助于（希望）推动制造商发布更兼容的浏览器，这些浏览器可以读取相同的语言并更一致地显示页面，以便设计人员可以针对单一通用平台进行设计。

另一个复杂的因素是，从历史上看，不同的浏览器制造商（例如 Microsoft）倾向于让他们的浏览器以稍微不同的方式解释 HTML。因此，网页设计师必须设计他们的网站以支持旧版浏览器而不是新浏览器。设计师和网站所有者通常认为网页在这些“旧版”浏览器中正确显示非常重要。制定网页代码的 W3C 标准是为了实现一致性。包含 W3C 网络标准的网站拥有良好的基础，可以使其自身易于访问、可用并针对搜索引擎进行优化。将这些视为您房屋的建筑规范：用它们构建的网站更强大、更安全，并且符合用户的期望。您可以使用 W3C 的 HTML 验证服务 (validator.w3.org) 检查您的页面。它简单且免费（只需确保在尝试验证代码时使用正确的 DOCTYPE 即可。最简单的是，满足 W3C 验证的网站也可能使用语义 HTML，并使用 CSS 将其内容与表示分离。

询问五位设计师网络标准是什么，您将得到五种不同的答案。但大多数人都同意网络标准基于使用有效代码，无论是 HTML（还是其他），按照最新版本标准中指定的方式。

语义正确的代码

语义正确意味着网页中的 HTML 标记仅描述内容，而不描述表示

如前所述，语义正确意味着网页中的 HTML 标记仅描述内容，而不描述表示。特别是，这意味着 H1 标签、H2 标签等的结构化组织，并且仅将表格用于表格数据，而不用于布局。 Joomla 模板设计者在纯粹的语义正确性上稍微妥协的一个领域是，将两列或三列布局的左列和右列命名为“左”和“右”，而不是语义上更正确的侧边栏或侧栏。如果这些只是模板 PHP 中使用的位置名称，那么它们在技术上是正确的。如果它们还用于定义 HTML 和 CSS 中的匹配类，那么将与显示页面左列相关的所有内容命名为或分类为 left 是一种可以原谅的方便。在下面的示例中，您将看到左侧的位置使用类侧边栏进行样式设置，右侧的位置是 sidebar-2，这是语义上正确的代码。

层叠样式表 (CSS)

与使代码在语义上正确密切相关的是使用 CSS 来控制网页的外观和布局。 CSS 是一种向 Web 文档添加样式（例如字体、颜色、间距）的简单机制。

CSS 与 HTML 代码并行存在，让您可以将内容（代码）与表示（CSS）完全分离。

要查看此操作的实际效果，请查看 CSS Zen Garden，该网站仅通过更改 CSS 文件即可以不同且独特的方式显示相同的 HTML 内容。生成的页面看起来非常不同，但核心内容完全相同。

目前，设计由 Joomla 提供支持的网站在满足验证标准方面面临着相当大的挑战。

目前，设计由 Joomla 提供支持的网站在满足验证标准方面面临着相当大的挑战。在 Joomla 版本的第一个系列 1.0.X 中，代码使用大量表格来输出其页面。这并不是真正使用 CSS 进行演示，也不会生成语义上正确的代码。许多组件和模块的第三方开发人员仍在使用表格来生成布局，这一事实使这个问题变得更加复杂。

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

创建模板时仍需小心，以确保其可访问（例如，可缩放字体大小）、可用（清晰的导航）以及针对搜索引擎进行了优化（已排序的源代码）。

---

创建简单模板：第 1 步

要了解模板的内容，我们首先查看一个空白的 Joomla 模板。

模板文件组件

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

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

/templates/element
/templates/voodoo

登录后复制