本教學將引導您從頭開始建立 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>
讓我們看看其中一些行的含義：
模板中使用的内容使用
<files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>params.ini</filename> <folder>images</folder> <folder>css</folder> </files>
“文件”部分包含所有通用文件，例如模板的 PHP 源文件或模板预览的缩略图。本节中列出的每个文件都由
index.php 内每个列出的职位生成内容的 PHP 代码精确匹配。index.phppindex.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 的以下观察应该可以澄清一些事情：
您可以使用多个
DOCTYPE。基本上，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="<?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" /> </head>
这一切意味着什么？
我们已经讨论了 index.php 文件中 DOCTYPE 语句的含义。 <?php echo $this->语言; ?< 代码从全局配置中的站点语言设置中提取语言。
$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 代码 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”布局。网页layouts主要有三种类型——fixed、fluid和jello——它们都是指如何控制页面的宽度。
fixed 布局的宽度设置为某个 fixed 值。fluid 布局可以根据浏览器窗口增大和缩小。fluid 但介于一些最小值和最大值之间。几年前，fluid 宽度模板风靡一时。辅助功能人员喜欢它们，抓住浏览器窗口的一角并看到所有内容滑动真是太酷了。
但是现在，我不制作fluid模板，而是专注于fixed宽度模板。我坚信它们最适合当今的网络。四年前，很多人还在使用 800px 宽度的屏幕。 fluid 宽度的要点是，您可以拥有一个在 1024px 屏幕中看起来不错的网页，但仍然可以缩小到仍在使用的较小屏幕。
现在，屏幕的趋势却相反。人们正在使用巨大的屏幕； 32% 的浏览 Joomlahack.com 的人使用的分辨率超过
1024px。
有了这些大屏幕和 960px 宽度布局，你会遇到一个新问题——可读性。研究表明，当您浏览 960px 时，屏幕上的可读性会下降。所以 fluid 的宽度会填满那个大屏幕，并且 a) 看起来很愚蠢，b) 会减慢你的阅读速度。
典型的设计可能使用表格来布局页面。表格作为一种快速解决方案非常有用，因为您只需将列的宽度设置为百分比即可。然而，表格也有一些缺点。例如，与 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 类的 <div>，并且模块的标题显示在该 <div> 内的
您创建的排版 CSS 现在会产生如下所示的结果。
同样，使用 CSS 列表而不是表格可以减少代码并简化标记。将 CSS 用于菜单的其他优点之一是，各种 CSS 开发人员网站上都有大量示例代码。让我们看一下其中一个并看看如何使用它。
maxdesign.com 的网页有三十多个菜单可供选择，所有菜单都使用相同的底层代码。它被称为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>
这意味着有一个名为 navcontainer 的封闭 <div>，并且 <ul> 有一个 id of navlist。要在 Joomla 中复制此效果，您需要某种封闭的 <div>。您可以通过使用模块后缀来实现这一点。回想一下，带有 style="xhtml" is 的模块的输出如下：
<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。
模块类后缀的使用很有用。只需简单更改模块类后缀即可使用不同颜色的框。
对于您的网站，假设您想要使用 Mark Newhouse 的列表 10（请参见此处）。你的 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 规则设置样式的菜单的任何模块中。这会生成如下所示的菜单
到目前为止，您的布局始终具有三列，无论这些列中是否有任何内容。从 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 文件现在如下所示：