本教程将引导您完成从头开始创建joomla模板的必要步骤。我们将涵盖每一个细节；那么让我们开始吧！
本教程摘自最近发布的“Joomla!1.6：用户指南”，由Pearson提供。
游戏计划
- 什么是Joomla模板？Joomla模板有哪些功能？没有内容的模板和内容添加到CMS的模板有什么区别？
- 本地主机设计流程与静态HTML网页设计流程有何不同？
- Joomla中的无表格设计有何影响？W3C标准、可用性和可访问性之间有何关系？
- Joomla模板由哪些文件组成，它们执行哪些功能？
- 如何使用CSS而不是表格来创建按源顺序排列的三列布局？
- Joomla应该使用哪些基本CSS样式，Joomla核心使用哪些默认样式？
- 如何放置模块并设计其样式？圆角有哪些新技术？
- 制作模仿JavaScript开发的菜单效果的精简CSS菜单的简单策略是什么？
- 如何控制列的显示时间以及在不存在内容时隐藏列的时间？
- 创建Joomla1.6模板的正确步骤是什么？
什么是Joomla!模板？
Joomla模板是JoomlaCMS中控制内容呈现的一系列文件
Joomla模板是JoomlaCMS中控制内容呈现的一系列文件。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模板设计者，您受到以下事实的限制：您无法立即在同一个编辑器中看到编码的效果。因此，您可以使用以下修改后的设计流程：
- 让本地主机服务器加载在后台运行的内容以“运行”Joomla。
- 使用编辑器对HTML和CSS进行编辑，然后将更改保存到服务器。
- 在网络浏览器中查看受您的编辑影响的页面。
本地主机服务器选项
要继续学习本教程，您需要安装WampServer。如果您还没有这样做，请继续安装。我就在这里等。
在托管Web服务器上，您可以在后端编辑HTML模板和CSS文件，同时在浏览器的另一个选项卡中打开前端。保存更改时，您只需刷新前端视图即可查看影响。
通过本地主机设置，您可以更加方便地直接访问文件并使用您选择的编辑器进行编辑。保存更改后，无需关闭编辑器，您就可以刷新浏览器中的前端视图并查看影响。
W3C和无表设计
可用性、可访问性和搜索引擎优化(SEO)都是当今互联网上用来描述高质量网页的短语。事实上，可用性、可访问性和SEO之间存在大量重叠，并且展示其中一个特征的网页通常同时具备这三个特征。实现这三个目标的最简单方法是使用W3CWeb标准中规定的框架。
例如，视力不佳的人可以通过屏幕阅读器轻松阅读使用HTML语义构建的网站。它也可以很容易地被搜索引擎蜘蛛读取。谷歌实际上在如何阅读网站方面是盲目的；就像使用屏幕阅读器一样。
网络标准制定了一组通用的“规则”，供所有网络浏览器用来显示网页。推动这些标准的主要组织是W3C，其主管TimBerners-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）完全分离。
要查看此操作的实际效果，请查看CSSZenGarden，该网站仅通过更改CSS文件即可以不同且独特的方式显示相同的HTML内容。生成的页面看起来非常不同，但核心内容完全相同。
目前，设计由Joomla提供支持的网站在满足验证标准方面面临着相当大的挑战。
目前，设计由Joomla提供支持的网站在满足验证标准方面面临着相当大的挑战。在Joomla版本的第一个系列1.0.X中，代码使用大量表格来输出其页面。这并不是真正使用CSS进行演示，也不会生成语义上正确的代码。许多组件和模块的第三方开发人员仍在使用表格来生成布局，这一事实使这个问题变得更加复杂。
幸运的是，Joomla核心开发团队认识到了Joomla的这个问题。在Joomla1.5中，模板设计者可以完全覆盖核心的输出（称为视图）并以他们想要的任何方式删除表格或自定义布局。
创建模板时仍需小心，以确保其可访问（例如，可缩放字体大小）、可用（清晰的导航）以及针对搜索引擎进行了优化（已排序的源代码）。
创建简单模板：第1步
要了解模板的内容，我们首先查看一个空白的Joomla模板。
模板文件组件
本节回顾设置模板文件的手动过程。通常，您可以使用Joomla安装程序来安装模板，它会处理所有这些步骤。
在构建自己的模板时，您需要以协调的方式设置多个文件和文件夹。模板需要包含各种文件和文件夹。这些文件必须放置在Joomla安装的/templates/目录中，每个文件都放置在为该模板指定的文件夹中。如果您安装了两个名为Element和Voodoo的模板，您的目录将如下所示：
