本教程将引导您完成从头开始创建 Joomla 模板的必要步骤。我们将涵盖每一个细节；那么让我们开始吧！
本教程摘自最近发布的“Joomla! 1.6：用户指南”，由 Pearson 提供。
Joomla 模板是 Joomla CMS 中控制内容呈现的一系列文件
Joomla 模板是 Joomla CMS 中控制内容呈现的一系列文件。 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 之间存在大量重叠，并且展示其中一个特征的网页通常同时具备这三个特征。实现这三个目标的最简单方法是使用 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 是一种向 Web 文档添加样式（例如字体、颜色、间距）的简单机制。
CSS 与 HTML 代码并行存在，让您可以将内容（代码）与表示（CSS）完全分离。
要查看此操作的实际效果，请查看 CSS Zen Garden，该网站仅通过更改 CSS 文件即可以不同且独特的方式显示相同的 HTML 内容。生成的页面看起来非常不同，但核心内容完全相同。
目前，设计由 Joomla 提供支持的网站在满足验证标准方面面临着相当大的挑战。
目前，设计由 Joomla 提供支持的网站在满足验证标准方面面临着相当大的挑战。在 Joomla 版本的第一个系列 1.0.X 中，代码使用大量表格来输出其页面。这并不是真正使用 CSS 进行演示，也不会生成语义上正确的代码。许多组件和模块的第三方开发人员仍在使用表格来生成布局，这一事实使这个问题变得更加复杂。
幸运的是，Joomla 核心开发团队认识到了 Joomla 的这个问题。在 Joomla 1.5 中，模板设计者可以完全覆盖核心的输出（称为视图）并以他们想要的任何方式删除表格或自定义布局。
创建模板时仍需小心，以确保其可访问（例如，可缩放字体大小）、可用（清晰的导航）以及针对搜索引擎进行了优化（已排序的源代码）。
要了解模板的内容，我们首先查看一个空白的 Joomla 模板。
本节回顾设置模板文件的手动过程。通常，您可以使用 Joomla 安装程序来安装模板，它会处理所有这些步骤。
在构建自己的模板时，您需要以协调的方式设置多个文件和文件夹。模板需要包含各种文件和文件夹。这些文件必须放置在 Joomla 安装的 /templates/
目录中，每个文件都放置在为该模板指定的文件夹中。如果您安装了两个名为 Element 和 Voodoo 的模板，您的目录将如下所示：
/templates/element
/templates/voodoo
请注意，模板的目录名称必须与模板的名称相同 - 在本例中为 element 和 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 像素宽 x 90 像素高）。安装模板后，该模板将充当预览图像，在 Joomla 管理模板管理器中可见。
/element/params.ini -- 一个文本文件，用于存储模板具有的任何参数的值。
/element/css/template.css -- 模板的 CSS。文件夹位置是可选的，但您必须指定它在index.php 文件中的位置。你可以随心所欲地称呼它。通常，会使用显示的名称，但稍后您会发现拥有其他 CSS 文件也有优势。
/element/images/logo.png——模板附带的任何图像。同样出于组织原因，大多数设计师将它们放在图像文件夹中。这里我们有一个名为 logo.png 的图像文件作为示例。
templateDetails.xml 文件充当清单或装箱清单，其中包括属于模板的所有文件或文件夹的列表。它还包括作者和版权等信息。其中一些详细信息显示在模板管理器的管理后端中。这里显示了
XML 文件的示例：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"
"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="1.6" type="template">
<name>960TemplateTutorialStep1</name>
<creationDate>1/10/10</creationDate>
<author>Barrie North</author>
<authorEmail>contact@compassdesigns.net</authorEmail>
<authorUrl>http://www.compassdesigns.net</authorUrl>
<copyright>Copyright (C) 2005 - 2010 Barrie North</copyright>
<license>GPL</license> <version>1.6.0</version>
<description>The first of 4 tutorial templates from Joomla 1.6 - A User's Guide</description>
<files> <filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files> <positions>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions></p> <p>
<config> <fields name="params">
<fieldset name="basic">
<field name="colorVariation" type="list" default="white" label="Color Variation" description="Base Color of template">
<option value="blue">blue</option>
<option value="red">red</option>
</field>
</fieldset>
</fields>
</config>
</install></p>
让我们看看其中一些行的含义：
模板中使用的布局使用 <filename> 和 <folder> 标记，如下所示
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>
“文件”部分包含所有通用文件，例如模板的 PHP 源文件或模板预览的缩略图。本节中列出的每个文件都由 <filename> </filename>标签括起来。您还可以使用 <folder> 标记包含整个文件夹，例如图像文件夹。
index.php 内每个列出的职位生成内容的 PHP 代码精确匹配。
index.phpindex.php 文件中到底有什么？它是 HTML 和 PHP 的组合，决定了页面布局和呈现的所有内容。
让我们看一下实现有效模板的关键部分：index.php 文件顶部的 DOCTYPE。这是每个网页顶部的一段代码。在我们页面的顶部，将其放入模板中：
<?php /** * @copyrightCopyright (C) 2005 - 2010 Barrie North. * @licenseGPL */ defined('_JEXEC') or die; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第一个 PHP 语句仅显示版权/许可证，并确保文件不会被直接访问以确保安全。
网页 DOCTYPE 是浏览器如何显示网页的基本组成部分之一 - 如何处理各种 HTML 标记，更重要的是，浏览器如何解释 CSS。 A List Apart 的以下观察应该可以澄清一些事情：
您可以使用多个
DOCTYPEs。基本上，DOCTYPE告诉浏览器使用什么版本的 HTML 来设计页面，是否有一些遗留代码或还包含 XML，以及如何解释页面。
这里开始出现严格和过渡的词语（通常是 float:left 和 float:right），以指示是否包含遗留代码。本质上，自从 Web 诞生以来，不同的浏览器对各种
HTML 标签和 CSS 版本都有不同程度的支持。例如，Internet Explorer 6 或更低版本将无法理解用于设置最小页面宽度的 min-width
命令。要复制效果以使其在所有浏览器中显示相同的效果，有时必须在 CSS 中使用特定于浏览器的“技巧”，以弥补每个浏览器遵守已发布标准的缺陷。
严格意味着 HTML 将完全按照标准的规定进行解释。过渡性 DOCTYPE 意味着该页面将允许与标准存在一些商定的差异（例如，继续使用已停止使用的标签）。
让事情变得复杂的是，有一种叫做“怪癖”模式的东西。如果 DOCTYPE 错误、过时或不存在，浏览器将进入怪异模式。这是向后兼容的尝试，因此 Internet Explorer 6 会像
Internet Explorer 4 一样呈现页面。
不幸的是，人们有时会意外地陷入怪癖模式。它通常以两种方式发生：
DOCTYPE 声明，链接最终为 DTD/xhtml1-strict.dtd，这是 WC3 服务器上的相对链接。您需要完整路径，如前面所示。
DOCTYPE
之前而不是之后时，就会发生这种情况。接下来是一个 XML 语句（在 DOCTYPE 之后）：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
我刚刚向您提供的有关 Internet Explorer 6 怪异模式的信息非常重要。在本教程中，您仅针对 Internet Explorer 6 及更高版本进行设计，并且需要确保它在标准模式下运行，以最大程度地减少您稍后需要执行的操作。
我们看一下index.php文件头的结构；您希望它尽可能小，但仍然足以满足生产站点的需要。您将使用的标头信息如下：
<?php
/** * @copyrightCopyright (C) 2005 - 2010 Barrie North.
* * @licenseGPL */
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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="//m.sbmmt.com/link/0f83556a305d789b1d71815e8ea4f4b0" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/template.css" type="text/css" /> </head>
这一切意味着什么？
我们已经讨论了 index.php 文件中 DOCTYPE 语句的含义。
<?php echo $this->language; ?> 代码从全局配置中的站点语言设置中提取语言。
$app = Jfactory::getApplication(); 是一个变量，允许您获取各种参数（例如站点名称）并在模板中使用它们。下一行用于包含更多标头信息：
<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="rights" content="" />
<meta name="language" content="en-GB" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.6 - Open Source Content Management" />
<title>Home</title> <link href="/Joomla_1.6/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/Joomla_1.6/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
大部分标题信息都是即时创建的，特定于某人正在查看的页面（文章）。它包括许多元标记和任何 RSS 源 URL。
标题中的最后几行提供了 Joomla 生成的页面的 CSS 文件链接，以及此模板中的 CSS 文件：
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/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 可以包含任意数量的文件，例如针对不同浏览器和不同媒体（例如打印）的条件文件。例如，以下代码检测并添加一个针对 Internet Explorer 6 怪癖的附加 CSS 文件（我们将在此处将其排除在工作示例之外）：
<!--[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="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
它可能会生成以下内容：
<link rel="stylesheet" href="/templates/960TemplateTutorialStep1/css/red.css" type="text/css" />
仍然在 index.php 文件中，现在页面的 <head> 部分已设置，我们可以继续处理 body 标记。创建您的第一个模板将会很容易！准备好了吗？
要创建模板，您所需要做的就是使用 Joomla 语句插入主体内容以及您想要的任何模块：
<body>
<?php echo $app->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" />
<jdoc:include type="modules" name="debug" />
</body>
该模板包含以下内容，按合理的逻辑查看顺序排列：
此时（如果您预览它，请确保它是默认模板），该网站看起来不太令人惊叹。
您希望尽可能接近语义标记。从网络的角度来看，这意味着任何人都可以阅读页面——浏览器、蜘蛛或屏幕阅读器。语义布局是可访问性的基石。
请注意，您使用了 Joomla 特有的多个命令中的第一个来创建此输出：
<body>
<?php echo $app->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" />
<jdoc:include type="modules" name="debug" />
</body>
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 语句插入来自模块或组件的各种类型的 HTML 输出。
该行插入组件的输出。它是什么组件将由链接的菜单项确定： <jdoc:include type="component" />
此行插入模块位置的输出：<jdoc:include type="modules" name="right" />
该行为所有位置设置为右侧的模块生成内容。为这些模块生成的内容按照模块管理器的顺序列中设置的顺序放置在页面中。这是完整的语法：
<jdoc:include type="modules" name="location" style="option" />
在本节中，您将使用纯 CSS 为 Joomla 模板制作三列布局。您还将使其成为“fixed”布局。网页
layout 分为三种主要类型：fixed、fluid 和 jello，它们都是指如何控制页面的宽度。
fixed 布局的宽度设置为某个 fixed 值。 fluid 布局可以根据浏览器窗口放大和缩小。 fluid 但介于一些最小值和最大值之间。 几年前，fluid 宽度模板风靡一时。辅助功能人员喜欢它们，抓住浏览器窗口的一角并看到所有内容滑动真是太酷了。
但是现在，我不制作 fluid 模板，而是专注于 fixed 宽度模板。我坚信它们最适合当今的网络。四年前，很多人还在使用 800px
宽度的屏幕。 fluid 宽度的要点是，您可以拥有一个在 1024px 屏幕中看起来不错的网页，但仍然可以缩小到仍在使用的较小屏幕。
现在，屏幕的趋势却相反。人们正在使用巨大的屏幕； 32% 的浏览 Joomlahack.com 的人使用的分辨率超过
1024px。
有了这些大屏幕和 960px 宽度布局，你会遇到一个新问题——可读性。研究表明，当您浏览 960px 时，屏幕上的可读性会下降。所以
fluid 的宽度会填满那个大屏幕，并且看起来很愚蠢，会减慢你的阅读速度。
典型的设计可能使用表格来布局页面。表格作为一种快速解决方案非常有用，因为您只需将列的宽度设置为百分比即可。然而，表格也有一些缺点。例如，与 CSS 布局相比，表格有很多额外的代码。这会导致加载时间更长（冲浪者不喜欢）和搜索引擎性能较差。代码的大小大约可以加倍，不仅可以使用标记，还可以使用“间隔 GIF”，即放置在表格的每个单元格中的 1x1 透明图像，以防止单元格折叠。即使是大公司有时也会陷入桌子陷阱。
tr 和 td）正在做什么。使用 CSS，只需检查几行。当谈到 CSS 布局时，出现了一种使用新框架的趋势。这个想法是使用一组一致的 CSS 来创建布局，然后维护该组以解决浏览器兼容性等各种问题。对于此模板，我们将采用 Nathan Smith 开发的 960 网格系统。它仍然不是很令人兴奋，但让我们看看不同部分的含义。
使用 960 网格系统，您只需用一个类指定您想要的网格有多大。在此示例中，我使用 12 列网格，因此要使标头横跨 960px 的整个宽度，请在 index.php 中使用：
<div id="header" class="container_12"></div>
对于我们的三列，我们在容器内添加网格，如下所示：
<div id="content" class="container_12">
<div id="" class="grid_3 ">
<jdoc:include type="modules" name="left" />
</div> <div id="" class="grid_6">
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
</div> <div id="" class="grid_3">
<jdoc:include type="modules" name="right" />
</div> </div>
请注意，10px 列间距（通常称为装订线）的内容已经有了一些喘息空间。这一切都是由聪明的 960 CSS 网格框架自动完成的，并且所有浏览器问题（是的，我们指的是您，Internet
Explorer）都得到了处理。
index.php主要代码如下：
<body> <div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" /> </div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules" name="left" />
</div> <div id="maincolumn" class="grid_6">
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" /> </div>
<div id="sidebar-2" class="grid_3">
<jdoc:include type="modules" name="right" />
</div> </div>
<div id="footer" class="container_12">
<jdoc:include type="modules" name="footer" />
</div> <jdoc:include type="modules" name="debug" />
</body>
在此示例中，我将 CSS 文件重命名为 layout.css。使用 960 网格框架，我们很少需要接触这个文件，并且可以尽可能地压缩它。 layout.css
文件的关键部分如下所示：
.container_12 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.alpha {
margin-left:0 !important;
}
.omega {
margin-right:0 !important;
}
.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 {
display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px;
}
.container_12.grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
} .container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}
很简单，所有内容都向左浮动，并且各种网格大小根据其所需的宽度设置。它是一个 12 列的网格，因此，例如 grid_6 表示六列，即 460 像素 - 全宽度减去填充。这个简单的布局非常适合学习如何在 Joomla 中使用 CSS，因为它显示了 CSS 相对于基于表格的布局的两个优点：代码更少，并且更易于维护。
按源排序的布局对于 SEO 效果更好。
但是，这个简单的布局是按照您在屏幕上看到内容的顺序在代码中排序的。将最重要的内容放置在生成的 HTML 源代码的开头，但在屏幕上仍具有相同的按查看器排序的外观，即左侧列显示在中心列之前（即左侧），这不是“源排序” .
按源代码排序的布局比重要内容出现在代码后期的布局更适合 SEO。从 Joomla 网站的角度来看，重要的内容是来自主体组件的内容。目前，为了保持 CSS 简单，我们将坚持使用这种按查看器排序的布局，并在本文后面更改为按源排序的布局。许多商业模板（例如 Joomlahack 的模板）进一步发展了这种按源排序的概念。
到目前为止，所有 CSS 都只是关于布局，这使得页面变得简单。因此，让我们添加一些格式，将 CSS 放置在名为typography.css 的新文件中。记得将其添加到index.php文件中！
当您开始使用 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;
}
全局重置的目的是覆盖每个浏览器中不同的默认设置，并获得一个干净、一致的起点，无论页面显示在哪个浏览器上。
所有内容都被赋予零边距和填充，然后所有块级元素都被赋予底部和底部边距。这有助于实现浏览器的一致性。 （上面的第一个 CSS 选择器称为星形选择器，即使在 Internet Explorer 6 中，它也可以充当通用选择器。）您可以在此处和此处阅读有关全局重置的更多信息。
您将字体大小设置为 76% 以尝试在各个浏览器中获得更一致的字体大小。然后在 ems 中设置所有字体大小。设置 line-height:1.3
有助于提高可读性。当您在 ems 中设置字体和行高时，页面将更易于访问，因为查看者将能够根据自己的喜好调整字体大小，并且页面将重排并保持可读。此处将对此进行进一步讨论。
如果您要向标题、侧边栏和内容容器添加一些背景颜色，您会看到如下所示的内容。
请注意，侧栏未到达页脚。这是因为它们仅延伸到其内容；如果左侧和右侧的空间为白色，则侧列不存在。
如果您的模板的所有三列都是白色背景，那么这没有问题。您将使用这种方法，并且模块周围会有方框。如果您想要彩色或带有方框的等高列，则必须使用某种技术使列具有相同的高度。一种常见的解决方案是使用 JavaScript 脚本来动态计算和设置高度。
当在 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'); ?>">
<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" 使模块显示为不包含任何元素和标题的原始输出。
如您所见，CSS 选项（xhtml 和 rounded）的代码更加简洁，这使得设计网页样式变得更加容易。除非绝对需要，否则我不建议使用选项（后缀）表（默认）或
horz。
如果您检查前面显示的 modules.php 文件，您将看到模块存在的所有这些选项。添加您自己的内容很容易；这是 Joomla 1.6 新模板功能的一部分。
要开发模板，您可以将模块样式 xhtml 放在 index.php 中的所有模块上：
<body> <div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" style="xhtml" />
</div> <div class="clear"></div>
<div id="content" class="container_12">
<div id="sidebar" class="grid_3 ">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div> <div id="maincolumn" class="grid_6">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div> <div id="sidebar-2" class="grid_3">
<jdoc:include type="modules" name="right" style="xhtml" />
</div> </div>
<div class="clear"></div>
<div id="footer" class="container_12">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div> <jdoc:include type="modules" name="debug" />
</body>
让我们从布局 div 中删除背景，并添加一些 CSS 来设置模块的样式，其中包含模块标题的边框和背景。
我们将以下内容添加到排版中。您的 CSS 文件现在应该如下所示：
#header{
font-size:2em;
}
#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*/
ul.actions li{
float:right;
list-style:none;
border:0;
}
ul.actions li a img{
border:0;
}
在这里，您为使用 style="xhtml" 生成的模块添加了特定的样式规则，因此生成的每个模块都具有类 .moduletable 的
同样，使用 CSS 列表而不是表格可以减少代码并简化标记。将 CSS 用于菜单的其他优点之一是，各种 CSS 开发人员网站上都有大量示例代码。让我们看一下其中一个并看看如何使用它。
maxdesign.com 的网页有三十多个菜单可供选择，所有菜单都使用相同的底层代码。它被称为Listamatic。您必须更改代码才能使这些菜单适应 Joomla。
这些基于列表的菜单使用以下通用代码结构：
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="//m.sbmmt.com/m/faq/#" id="current">Item one</a></li>
<li><a href="//m.sbmmt.com/m/faq/#">Item two</a></li>
<li><a href="//m.sbmmt.com/m/faq/#">Item three</a></li>
<li><a href="//m.sbmmt.com/m/faq/#">Item four</a></li>
<li><a href="//m.sbmmt.com/m/faq/#">Item five</a></li>
</ul>
</div>
这意味着有一个名为 navcontainer 的封闭
到目前为止，您的布局始终具有三列，无论这些列中是否有任何内容。从 CMS 模板的角度来看，这并不是很有用。在静态网站中，内容永远不会改变，但您希望网站管理员能够将内容放入任何列中，而不必担心编辑 CSS 布局。您希望能够自动关闭某列，或者在没有内容显示的情况下将其折叠。
Joomla 1.6 提供了一种简单的方法来计算为特定位置生成内容的模块数量，以便您可以添加对这些计数的一些 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 内容获得以下结果：
在这种情况下，您需要使用允许您对特定位置（例如右列）中存在的模块进行计数的函数。如果右栏没有发布内容，您可以调整栏大小来填充该空间。
有多种方法可以做到这一点。您可以将条件语句放在正文中以不显示内容，然后根据其中的列使用不同的内容样式。我们将利用网格系统，并根据一些计算简单地传递网格的大小。
在标头中，我们定义几个变量以确保它们具有默认值。
$leftcolgrid= "3";
$rightcolgrid= "3";
在模板的 HTML 中，我们可以使用这些变量来设置网格类：
<div id="content" class="container_12">
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div> <div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>"> <jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
您会注意到我们正在回显 colgrid 值，然后进行简单的计算来查找主列，因为我们知道它们的总数必须为 12。
然后我们可以使用 countModules 函数来查找一些值。在我们的头脑中我们插入：
<?php if ($this->countModules('left') == 0):?>
<?php $leftcolgrid = "0";?>
<?php endif; ?>
<?php if ($this->countModules('right') == 0):?>
<?php $rightcolgrid = "0";?>
<?php endif; ?>
请注意，我们正在检查左右位置是否有零个模块，因为我们已经将默认网格大小设置为 3。我们也可以通过真/假检查而不是数值来完成此检查（零）。
您已经完成了一半，但现在您已经扩展了中心列的宽度以容纳任何空的（即将隐藏）侧列。
创建可折叠列时，最好将模块设置为在没有内容时不生成。如果不这样做，页面中将包含空 div，这可能会导致跨浏览器问题。
为了不生成空 div，请使用以下 if 语句：
<?php if($this->countModules('left')) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
<?php endif; ?>
当您使用此代码时，如果 left 位置没有发布任何内容，则 <div id="sidebar">;此外，其中的所有内容都不会包含在生成的页面中。
对左列和右列使用这些技术，您的 index.php 文件现在如下所示：
<?php
/**
* * @copyrightCopyright (C) 2005 - 2010 Barrie North.
* * @licenseGPL */
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$leftcolgrid= "3";
$rightcolgrid = "3";
?>
<!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="//m.sbmmt.com/link/0f83556a305d789b1d71815e8ea4f4b0" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" />
<?php if ($this->countModules('left') == 0):?>
<?php $leftcolgrid= "0";?> <?php endif; ?>
<?php if ($this->countModules('right') == 0):?>
<?php $rightcolgrid= "0";?>
<?php endif; ?>
</head>
<body>
<div id="header" class="container_12">
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" style="xhtml" />
</div> <div class="clear"></div>
<div id="content" class="container_12">
<?php if($this->countModules('left')) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml"/>
</div>
<?php endif; ?>
<div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" /> </div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
</div>
<div class="clear"></div>
<div id="footer" class="container_12">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div> <jdoc:include type="modules" name="debug" />
</body>
</html>
本节中创建的基本模板展示了创建 Joomla 模板的一些基本原则。
现在您已经完成了基础知识，您可以使用您学到的技术创建一个稍微更具吸引力的模板。
您需要从一个比较开始。合成图是构图的缩写，是作为模板基础的拟议设计的绘图或模型。
在本节中，我们将使用 Dan Cedarholm 的《Bulletproof Web Design》一书中的设计。我衷心推荐这本书，因为它为一些 CSS 技术提供了出色的基础，这些技术对于创建 Joomla 模板非常有用。
我们将使用其中一些技术来构建这个真实的模板。
该过程的下一步是切片。您需要使用图形程序创建可在模板中使用的小切片图像。重要的是要注意元素如何在需要时调整大小。 （我选择的图形应用程序是 Fire-works，因为我发现它比 Photoshop 更适合网页设计（而不是印刷设计）。）
这个过程本身就可以写满一整本书。要了解如何对设计进行切片，您可以查看图像文件夹并查看切片。
标题图像顶部有微弱的渐变。我们将图像作为未处理的背景放入，然后在其后面分配匹配的填充颜色。这样，如果需要，标题可以垂直缩放（例如，如果调整字体大小）。您还需要将任何类型的颜色更改为白色，以便它显示在黑色背景上。
这是我们必须添加的 CSS 来设置标题样式。
#header {
border-bottom: 3px solid #87B825;
background: #B4E637 url(../images/header-bg.gif) repeat-x top left;
}
#header h1 {
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url(../images/bulls-eye.gif) no-repeat top left;
}
您在这里没有使用图形徽标；你使用纯文本。原因主要是搜索引擎无法读取图像。您可以进行一些漂亮的图像替换，但我会将其作为练习留给您自己完成。
我们使用最后一个模板中的“顶部”模块位置来发送消息。为了给它一些样式，我们可以添加
#message {
font-size: 90%;
color: #cc9;
text-align: center;
background: #404530 url(../images/message-bg.gif) repeat-x top left;
}
#message .moduletable {
padding:1px 10px;
}
标题现在如下所示：
接下来，您需要实现一种技术来在侧栏上显示背景。
回想一下，当您在列上放置彩色背景时，颜色并没有一直延伸到页脚。这是因为 div 元素（在本例中为 sidebar 和
sidebar-2）仅与内容一样高。它不会增长以填充包含元素。这是基于网格的系统的弱点；我们必须使用一些 JavaScript 来获取侧栏的背景。
有许多脚本可以计算列的高度并使它们相等。我们将使用 Dynamic Drive 中的一个：http://www.dynamicdrive.com/csslayouts/equalcolumns.js。
请注意，我们必须更改脚本中引用的列/元素以与我们的相匹配。我们还将添加另一个包含块元素“maincolbck”来保存主列内容顶部的黄色褪色背景。
我们在index.php中的主要内容代码如下所示：
<div id="content" class="container_12">
<div id="maincolbck">
<?php if($this->countModules('left')) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml" />
</div> <?php endif; ?>
<div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" /> </div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
</div>
<div class="clear">
</div>
在添加这些元素时，我们还可以在页脚元素上添加背景。我们添加的 CSS 是：
#content {
font-size: 95%;
color: #333;
line-height: 1.5em;
background: url(../images/content-bg.gif) repeat-x top left;
}
#maincolbck {
background: url(../images/wrap-bg.gif) repeat-y top right;
}
#footer {
background: #828377 url(../images/footer-bg.gif) repeat-x top left;
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 .moduletable {
margin: 10px 0 10px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #fff url(../images/box-b.gif) no-repeat bottom right;
}
#sidebarh3,#sidebar-2h3 {
margin: 0; padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: normal;
color: #693;
background: url(../images/box-t.gif) no-repeat top left;
}
#sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul {
margin: 0;
padding: 0 12px;
}
sidebar 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%;
color: #663;
font-weight: normal;
}
h1 {
font-size:2em;
line-height:1;
margin-bottom:0.5em;
}
h2 {
font-size:1.5em;
margin-bottom:0.75em;
}
h3 {
font-size:1.25em;
line-height:1;
margin-bottom:1em;
}
h4 {
font-size:1.1em;
line-height:1.25;
margin-bottom:1.25em;
}
我们还可以为可应用于内容的特殊类添加一些方便的图标处理：
p.info {
background: #F8FAFC url(../images/info.png) center no-repeat;
background-position: 15px 50%;
/* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #B5D4FE;
border-bottom: 2px solid #B5D4FE;
}
p.warn {
background: #FFF7C0 url(../images/warn.png) center no-repeat;
background-position: 15px 50%;
/* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #F7D229;
border-bottom: 2px solid #F7D229;
}
p.alert {
background: #FBEEF1 url(../images/exc.png) center no-repeat;
background-position: 15px 50%;
/* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}
ul.checklist li {
list-style:none;
background: url(../images/tick.png) no-repeat 0 4px;
line-height: 24px;
padding-left: 20px;
}
完成的模板应如下所示
此摘录通过了四个模板示例，每次都增加了复杂性和功能。以下是我们审查的要点：
mainbody 组件，最好按源代码顺序加载。布局和设计是 CSS 的一部分，而不是模板的一部分。以上就是创建 Joomla 模板的分步指南的详细内容，更多请关注php中文网其它相关文章！
已抢27253个
抢
已抢14700个
抢
已抢7393个
抢
已抢9271个
抢
已抢18358个
抢
已抢7129个
抢