本教程将引导您完成从头开始创建joomla模板的必要步骤。我们将涵盖每一个细节；那么让我们开始吧！
本教程摘自最近发布的“Joomla!1.6：用户指南”，由Pearson提供。
Joomla模板是JoomlaCMS中控制内容呈现的一系列文件。Joomla模板不是一个网站；它是一个网站。它也不被认为是一个完整的网站设计。模板是查看Joomla网站的基本设计。为了产生“完整”网站的效果，该模板与Joomla数据库中存储的内容密切配合。
模板经过样式设计，以便在插入内容时，它会自动继承模板中定义的样式表的样式，例如链接样式、菜单、导航、文本大小和颜色等。
像Joomla一样，使用CMS模板具有许多优点：
您在Joomla支持的网站上看到的网页不是静态的；它是根据数据库中存储的内容动态生成的。当数据库中的内容发生更改时，显示该内容的所有页面都会立即更改。您看到的页面是通过模板中查询数据库的各种PHP命令创建的。由于模板看起来像是代码行而不是内容，因此在设计阶段会遇到一些困难。
没有“正确的方法”来创建网页。
现在使用“所见即所得”(WYSIWYG)HTML编辑器（例如Dreamweaver）很常见，因此您无需编写HTML代码。然而，在Joomla模板设计过程中使用这样的编辑器是不可能的，因为所见即所得编辑器无法显示和编辑动态页面。因此，您必须手动编写模板及其CSS代码，并在进行更改时经常刷新的服务页面上查看PHP的输出页面。如果连接足够快，这可能是一个Web服务器，但大多数设计人员在自己的计算机上使用本地服务器或本地主机-一个为计算机上的网页提供服务的软件，例如第1章中描述的本地主机设置2、“下载并安装Joomla！”
创建网页没有“正确的方法”；你如何做取决于你的背景。那些更喜欢图形的人倾向于在图形程序（例如Photoshop）中制作页面的“图像”，然后分解图像，以便将它们用于Web（称为切片和切块）。更多基于技术的设计师通常直接跳入CSS并开始对字体、边框和背景进行编码。然而，正如刚才提到的，作为Joomla模板设计者，您受到以下事实的限制：您无法立即在同一个编辑器中看到编码的效果。因此，您可以使用以下修改后的设计流程：
要继续学习本教程，您需要安装WampServer。如果您还没有这样做，请继续安装。我就在这里等。
在托管Web服务器上，您可以在后端编辑HTML模板和CSS文件，同时在浏览器的另一个选项卡中打开前端。保存更改时，您只需刷新前端视图即可查看影响。
通过本地主机设置，您可以更加方便地直接访问文件并使用您选择的编辑器进行编辑。保存更改后，无需关闭编辑器，您就可以刷新浏览器中的前端视图并查看影响。
可用性、可访问性和搜索引擎优化(SEO)都是当今互联网上用来描述高质量网页的短语。事实上，可用性、可访问性和SEO之间存在大量重叠，并且展示其中一个特征的网页通常同时具备这三个特征。实现这三个目标的最简单方法是使用W3CWeb标准中规定的框架。
例如，视力不佳的人可以通过屏幕阅读器轻松阅读使用HTML语义构建的网站。它也可以很容易地被搜索引擎蜘蛛读取。谷歌实际上在如何阅读网站方面是盲目的；就像使用屏幕阅读器一样。
网络标准制定了一组通用的“规则”，供所有网络浏览器用来显示网页。推动这些标准的主要组织是W3C，其主管TimBerners-Lee因在1989年发明了Web而受到赞誉。
当前的W3C标准有助于（希望）推动制造商发布更兼容的浏览器，这些浏览器可以读取相同的语言并更一致地显示页面，以便设计人员可以针对单一通用平台进行设计。
另一个复杂的因素是，从历史上看，不同的浏览器制造商（例如Microsoft）倾向于让他们的浏览器以稍微不同的方式解释HTML。因此，网页设计师必须设计他们的网站以支持旧版浏览器而不是新浏览器。设计师和网站所有者通常认为网页在这些“旧版”浏览器中正确显示非常重要。制定网页代码的W3C标准是为了实现一致性。包含W3C网络标准的网站拥有良好的基础，可以使其自身易于访问、可用并针对搜索引擎进行优化。将这些视为您房屋的建筑规范：用它们构建的网站更强大、更安全，并且符合用户的期望。您可以使用W3C的HTML验证服务(validator.w3.org)检查您的页面。它简单且免费（只需确保在尝试验证代码时使用正确的DOCTYPE即可。最简单的是，满足W3C验证的网站也可能使用语义HTML，并使用CSS将其内容与表示分离。
询问五位设计师网络标准是什么，您将得到五种不同的答案。但大多数人都同意网络标准基于使用有效代码，无论是HTML（还是其他），按照最新版本标准中指定的方式。
语义正确意味着网页中的HTML标记仅描述内容，而不描述表示
CSS与HTML代码并行存在，让您可以将内容（代码）与表示（CSS）完全分离。
要查看此操作的实际效果，请查看CSSZenGarden，该网站仅通过更改CSS文件即可以不同且独特的方式显示相同的HTML内容。生成的页面看起来非常不同，但核心内容完全相同。
目前，设计由Joomla提供支持的网站在满足验证标准方面面临着相当大的挑战。
目前，设计由Joomla提供支持的网站在满足验证标准方面面临着相当大的挑战。在Joomla版本的第一个系列1.0.X中，代码使用大量表格来输出其页面。这并不是真正使用CSS进行演示，也不会生成语义上正确的代码。许多组件和模块的第三方开发人员仍在使用表格来生成布局，这一事实使这个问题变得更加复杂。
幸运的是，Joomla核心开发团队认识到了Joomla的这个问题。在Joomla1.5中，模板设计者可以完全覆盖核心的输出（称为视图）并以他们想要的任何方式删除表格或自定义布局。
创建模板时仍需小心，以确保其可访问（例如，可缩放字体大小）、可用（清晰的导航）以及针对搜索引擎进行了优化（已排序的源代码）。
要了解模板的内容，我们首先查看一个空白的Joomla模板。
本节回顾设置模板文件的手动过程。通常，您可以使用Joomla安装程序来安装模板，它会处理所有这些步骤。
在构建自己的模板时，您需要以协调的方式设置多个文件和文件夹。模板需要包含各种文件和文件夹。这些文件必须放置在Joomla安装的/templates/目录中，每个文件都放置在为该模板指定的文件夹中。如果您安装了两个名为Element和Voodoo的模板，您的目录将如下所示：
模板目录下有两个关键文件：
此文件的最后一个用途是在管理后端使用扩展安装程序时解压并安装模板。
第二个关键文件是生成页面的主要模板文件，index.php。
该文件是Joomla模板中最重要的文件。它对站点进行布局并告诉JoomlaCMS在哪里放置不同的组件和模块。它是PHP和HTML的组合。
几乎所有模板都使用附加文件。按照惯例（尽管Joomla核心不要求）对它们进行命名和定位，如此处所示的名为Element的模板所示。
/element/template_thumbnail.png--模板的Web浏览器屏幕截图（通常缩小到约140像素宽x90像素高）。安装模板后，该模板将充当预览图像，在Joomla管理模板管理器中可见。
/element/params.ini--一个文本文件，用于存储模板具有的任何参数的值。
/element/css/template.css--模板的CSS。文件夹位置是可选的，但您必须指定它在index.php文件中的位置。你可以随心所欲地称呼它。通常，会使用显示的名称，但稍后您会发现拥有其他CSS文件也有优势。
/element/images/logo.png——模板附带的任何图像。同样出于组织原因，大多数设计师将它们放在图像文件夹中。这里我们有一个名为logo.png的图像文件作为示例。
模板中使用的内容使用和标签进行布局，如下所示：
-这显示模板中可用的模块位置。它是模板中定义的页面位置列表，例如顶部、左侧和右侧，可以使用模块管理器的位置下拉菜单将模块设置为显示在其中。此列表中的职位名称必须与为index.php内每个列出的职位生成内容的PHP代码精确匹配。——这部分描述了可以在后端设置并作为全局变量传递的参数，以允许高级模板功能，例如更改模板的配色方案。index.phppindex.php文件中到底有什么？它是HTML和PHP的组合，决定了页面布局和呈现的所有内容。
让我们看一下实现有效模板的关键部分：index.php文件顶部的DOCTYPE。这是每个网页顶部的一段代码。在我们页面的顶部，将其放入模板中：
网页DOCTYPE是浏览器如何显示网页的基本组成部分之一-如何处理各种HTML标记，更重要的是，浏览器如何解释CSS。AListApart的以下观察应该可以澄清一些事情：
您可以使用多个DOCTYPE。基本上，DOCTYPE告诉浏览器使用什么版本的HTML来设计页面，是否有一些遗留代码或还包含XML，以及如何解释页面。
这里开始出现“严格”和“过渡”一词（通常为float:left和float:right），以指示是否包含遗留代码。本质上，自从Web诞生以来，不同的浏览器对各种HTML标签和CSS版本都有不同程度的支持。例如，InternetExplorer6或更低版本将无法理解用于设置最小页面宽度的min-width命令。要复制效果以使其在所有浏览器中显示相同的效果，有时必须在CSS中使用特定于浏览器的“技巧”，以弥补每个浏览器遵守已发布标准的缺陷。
严格意味着HTML将完全按照标准的规定进行解释。过渡性DOCTYPE意味着该页面将允许与标准存在一些商定的差异（例如，继续使用已停止使用的标签）。
让事情变得复杂的是，有一种叫做“怪癖”模式的东西。如果DOCTYPE错误、过时或不存在，浏览器将进入怪异模式。这是向后兼容的尝试，因此InternetExplorer6会像InternetExplorer4一样呈现页面。
不幸的是，人们有时会意外地陷入怪癖模式。它通常以两种方式发生：
接下来是一个XML语句（在DOCTYPE之后）：
我们看一下index.php文件头的结构；您希望它尽可能小，但仍然足以满足生产站点的需要。您将使用的标头信息如下：
我们已经讨论了index.php文件中DOCTYPE语句的含义。语言;
$app=Jfactory::getApplication();是一个变量，允许您获取各种参数（例如站点名称）并在模板中使用它们。下一行用于包含更多标头信息：
此代码片段将在生成的页面（即您的前端）中插入全局配置中设置的所有标头信息。在默认安装中，它包括此处显示的标签：
标题中的最后几行提供了Joomla生成的页面的CSS文件链接，以及此模板中的CSS文件：
模板CSS可以包含任意数量的文件，例如针对不同浏览器和不同媒体（例如打印）的条件文件。例如，以下代码检测并添加一个针对InternetExplorer6怪癖的附加CSS文件（我们将在此处将其排除在工作示例之外）：
要创建模板，您所需要做的就是使用Joomla语句插入主体内容以及您想要的任何模块：
此时（如果您预览它，请确保它是默认模板），该网站看起来不太令人惊叹。
您希望尽可能接近语义标记。从网络的角度来看，这意味着任何人都可以阅读页面——浏览器、蜘蛛或屏幕阅读器。语义布局是可访问性的基石。
请注意，您使用了Joomla特有的多个命令中的第一个来创建此输出：
该行插入组件的输出。它是什么组件将由链接的菜单项确定：
此行插入模块位置的输出：
该行为所有位置设置为右侧的模块生成内容。为这些模块生成的内容按照模块管理器的顺序列中设置的顺序放置在页面中。这是完整的语法：
几年前，fluid宽度模板风靡一时。辅助功能人员喜欢它们，抓住浏览器窗口的一角并看到所有内容滑动真是太酷了。
但是现在，我不制作fluid模板，而是专注于fixed宽度模板。我坚信它们最适合当今的网络。四年前，很多人还在使用800px宽度的屏幕。fluid宽度的要点是，您可以拥有一个在1024px屏幕中看起来不错的网页，但仍然可以缩小到仍在使用的较小屏幕。
现在，屏幕的趋势却相反。人们正在使用巨大的屏幕；32%的浏览Joomlahack.com的人使用的分辨率超过1024px。
有了这些大屏幕和960px宽度布局，你会遇到一个新问题——可读性。研究表明，当您浏览960px时，屏幕上的可读性会下降。所以fluid的宽度会填满那个大屏幕，并且a)看起来很愚蠢，b)会减慢你的阅读速度。
当谈到CSS布局时，出现了一种使用新框架的趋势。这个想法是使用一组一致的CSS来创建布局，然后维护该组以解决浏览器兼容性等各种问题。对于此模板，我们将采用NathanSmith开发的960网格系统。它仍然不是很令人兴奋，但让我们看看不同部分的含义。
使用960网格系统，您只需用一个类指定您想要的网格有多大。在此示例中，我使用12列网格，因此要使标头横跨960px的整个宽度，请在index.php中使用：
对于我们的三列，我们在容器内添加网格，如下所示：
index.php主要代码如下：
按源排序的布局对于SEO效果更好。
但是，这个简单的布局是按照您在屏幕上看到内容的顺序在代码中排序的。将最重要的内容放置在生成的HTML源代码的开头，但在屏幕上仍具有相同的按查看器排序的外观，即左侧列显示在中心列之前（即左侧），这不是“源排序”.
按源代码排序的布局比重要内容出现在代码后期的布局更适合SEO。从Joomla网站的角度来看，重要的内容是来自主体组件的内容。目前，为了保持CSS简单，我们将坚持使用这种按查看器排序的布局，并在本文后面更改为按源排序的布局。许多商业模板（例如Joomlahack的模板）进一步发展了这种按源排序的概念。
到目前为止，所有CSS都只是关于布局，这使得页面变得简单。因此，让我们添加一些格式，将CSS放置在名为typography.css的新文件中。记得将其添加到index.php文件中！
当您开始使用CSS进行排版时，您应该设置一些整体样式并包括一个简单的全局重置：
所有内容都被赋予零边距和填充，然后所有块级元素都被赋予底部和底部边距。这有助于实现浏览器的一致性。（上面的第一个CSS选择器称为星形选择器，即使在InternetExplorer6中，它也可以充当通用选择器。）您可以在此处和此处阅读有关全局重置的更多信息。
您将字体大小设置为76%以尝试在各个浏览器中获得更一致的字体大小。然后在ems中设置所有字体大小。设置line-height:1.3有助于提高可读性。当您在ems中设置字体和行高时，页面将更易于访问，因为查看者将能够根据自己的喜好调整字体大小，并且页面将重排并保持可读。此处将对此进行进一步讨论。
如果您要向标题、侧边栏和内容容器添加一些背景颜色，您会看到如下所示的内容。
请注意，侧栏未到达页脚。这是因为它们仅延伸到其内容；如果左侧和右侧的空间为白色，则侧列不存在。
如果您的模板的所有三列都是白色背景，那么这没有问题。您将使用这种方法，并且模块周围会有方框。如果您想要彩色或带有方框的等高列，则必须使用某种技术使列具有相同的高度。一种常见的解决方案是使用JavaScript脚本来动态计算和设置高度。
当在index.php文件中调用模块时，有多种显示方式的选项。语法如下：
OPTION="table"(默认显示)模块显示在一列中。如果我们使用"table"选项，下面显示了Joomla的输出。请注意，PHP语句将被实际内容替换：
标签。如果我们使用"xhtml"选项，以下显示了Joomla的输出：
如您所见，CSS选项（xhtml和rounded）的代码更加简洁，这使得设计网页样式变得更加容易。除非绝对需要，否则我不建议使用选项（后缀）表（默认）或horz。
如果您检查前面显示的modules.php文件，您将看到模块中存在的所有这些选项。添加您自己的内容很容易；这是Joomla1.6新模板功能的一部分。
要开发模板，您可以将模块样式xhtml放在index.php中的所有模块上：
我们将以下内容添加到排版中。您的CSS文件现在应该如下所示：
您创建的排版CSS现在会产生如下所示的结果。
同样，使用CSS列表而不是表格可以减少代码并简化标记。将CSS用于菜单的其他优点之一是，各种CSS开发人员网站上都有大量示例代码。让我们看一下其中一个并看看如何使用它。
maxdesign.com的网页有三十多个菜单可供选择，所有菜单都使用相同的底层代码。它被称为Listamatic。您必须更改代码才能使这些菜单适应Joomla。
这些基于列表的菜单使用以下通用代码结构：
模块类后缀的使用很有用。只需简单更改模块类后缀即可使用不同颜色的框。
对于您的网站，假设您想要使用MarkNewhouse的列表10（请参见此处）。你的CSS看起来像这样：
到目前为止，您的布局始终具有三列，无论这些列中是否有任何内容。从CMS模板的角度来看，这并不是很有用。在静态网站中，内容永远不会改变，但您希望网站管理员能够将内容放入任何列中，而不必担心编辑CSS布局。您希望能够自动关闭某列，或者在没有内容显示的情况下将其折叠。
Joomla1.6提供了一种简单的方法来计算为特定位置生成内容的模块数量，以便您可以添加对这些计数的一些PHP测试并隐藏任何空列或类似的未使用的div容器，并相应地调整布局。PHPif模块测试语法如下：
在这种情况下，您需要使用允许您对特定位置（例如右列）中存在的模块进行计数的函数。如果右栏没有发布内容，您可以调整栏大小来填充该空间。
有多种方法可以做到这一点。您可以将条件语句放在正文中以不显示内容，然后根据其中的列使用不同的内容样式。我们将利用网格系统，并根据一些计算简单地传递网格的大小。
在标头中，我们定义几个变量以确保它们具有默认值。
然后我们可以使用countModules函数来查找一些值。在我们的头脑中我们插入：
您已经完成了一半，但现在您已经扩展了中心列的宽度以容纳任何空的（即将隐藏）侧列。
创建可折叠列时，最好将模块设置为在没有内容时不生成。如果不这样做，页面中将包含空div，这可能会导致跨浏览器问题。
为了不生成空div，请使用以下if语句：
对左列和右列使用这些技术，您的index.php文件现在如下所示：
现在您已经完成了基础知识，您可以使用您学到的技术创建一个稍微更具吸引力的模板。
您需要从一个比较开始。合成图是构图的缩写，是作为模板基础的拟议设计的绘图或模型。
在本节中，我们将使用DanCedarholm的《BulletproofWebDesign》一书中的设计。我衷心推荐这本书，因为它为一些CSS技术提供了出色的基础，这些技术对于创建Joomla模板非常有用。
我们将使用其中一些技术来构建这个真实的模板。
该过程的下一步是切片。您需要使用图形程序创建可在模板中使用的小切片图像。重要的是要注意元素如何在需要时调整大小。（我选择的图形应用程序是Fire-works，因为我发现它比Photoshop更适合网页设计（而不是印刷设计）。）
这个过程本身就可以写满一整本书。要了解如何对设计进行切片，您可以查看图像文件夹并查看切片。
标题图像顶部有微弱的渐变。我们将图像作为未处理的背景放入，然后在其后面分配匹配的填充颜色。这样，如果需要，标题可以垂直缩放（例如，如果调整字体大小）。您还需要将任何类型的颜色更改为白色，以便它显示在黑色背景上。
这是我们必须添加的CSS来设置标题样式。
我们使用最后一个模板中的“顶部”模块位置来发送消息。为了给它一些样式，我们可以添加
接下来，您需要实现一种技术来在侧栏上显示背景。
回想一下，当您在列上放置彩色背景时，颜色并没有一直延伸到页脚。这是因为div元素（在本例中为sidebar和sidebar-2）仅与内容一样高。它不会增长以填充包含元素。这是基于网格的系统的弱点；我们必须使用一些JavaScript来获取侧栏的背景。
请注意，我们必须更改脚本中引用的列/元素以与我们的相匹配。我们还将添加另一个包含块元素“maincolbck”来保存主列内容顶部的黄色褪色背景。
我们在index.php中的主要内容代码如下所示：
countModules('left')):>">
由于此设计没有水平菜单，因此我们在考虑侧面模块时也会考虑菜单样式。
我们的CSS看起来像这样：
Joomla1.6中的CSS排版得到了极大的简化。Joomla的早期版本对输出的各个部分有独特的类，例如“contentheading”。在Joomla1.6中，输出使用更多可识别的类，如H1、H2等，并且完全无表。
让我们设置这些元素的样式：
此摘录通过了四个模板示例，每次都增加了复杂性和功能。以下是我们审查的要点：