本教學(xué)將引導(dǎo)您從頭開始建立 Joomla 範本的必要步驟。我們將涵蓋每一個細節(jié)；那麼讓我們開始吧！

本教學(xué)摘自最近發(fā)布的“Joomla! 1.6：用戶指南”，由 Pearson 提供。

遊戲計畫

• 什麼是 Joomla 模板？ Joomla 模板有哪些功能？沒有內(nèi)容的模板和內(nèi)容添加到 CMS 的模板有什麼不同？
• 本地主機設(shè)計流程與靜態(tài) HTML 網(wǎng)頁設(shè)計流程有何不同？
• Joomla 中的無表格設(shè)計有何影響？ W3C 標準、可用性和可近性之間有何關(guān)係？
• Joomla 範本由哪些檔案組成，它們執(zhí)行哪些功能？
• 如何使用 CSS 而不是表格來建立按來源順序排列的三列佈局？
• Joomla 應(yīng)該使用哪些基本 CSS 樣式，Joomla 核心使用哪些預(yù)設(shè)樣式？
• 如何放置模組並設(shè)計其樣式？圓角有哪些新技術(shù)？
• 製作模仿 JavaScript 開發(fā)的選單效果的精簡 CSS 選單的簡單策略是什麼？
• 如何控制列的顯示時間以及在不存在內(nèi)容時隱藏列的時間？
• 建立 Joomla 1.6 範本的正確步驟是什麼？

什麼是 Joomla!模板？

Joomla 範本是 Joomla CMS 中控制內(nèi)容呈現(xiàn)的一系列檔案

Joomla 範本是 Joomla CMS 中控制內(nèi)容呈現(xiàn)的一系列檔案。 Joomla 模板不是一個網(wǎng)站；它是一個網(wǎng)站。它也不被認為是一個完整的網(wǎng)站設(shè)計。模板是查看 Joomla 網(wǎng)站的基本設(shè)計。為了產(chǎn)生「完整」網(wǎng)站的效果，此範本與 Joomla 資料庫中儲存的內(nèi)容密切配合。

範本經(jīng)過樣式設(shè)計，以便在插入內(nèi)容時，它會自動繼承範本中定義的樣式表的樣式，例如連結(jié)樣式、選單、導(dǎo)覽、文字大小和顏色等。

就像 Joomla 一樣，使用 CMS 範本具有許多優(yōu)點：

• Joomla 完成將內(nèi)容放入頁面的所有工作。您只需鍵入新文章即可將新資訊新增至現(xiàn)有部落格頁面。模板及其 CSS 確保其在風(fēng)格上與網(wǎng)站上的其他內(nèi)容保持一致。
• 內(nèi)容和表示完全分離，特別是當 CSS 用於佈局時（而不是在 index.php 檔案中使用表格）。這是確定網(wǎng)站是否符合現(xiàn)代網(wǎng)路標準的主要標準之一。在符合標準的網(wǎng)站中，表格的 HTML 標記保留用於顯示表格數(shù)據(jù)，而不是將頁面佈置到列中。
• 您可以立即套用新模板，從而為網(wǎng)站帶來全新的外觀。這可能涉及放置內(nèi)容和模組以及顏色和圖形的不同位置。

本地主機設(shè)計流程

您在 Joomla 支援的網(wǎng)站上看到的網(wǎng)頁不是靜態(tài)的；它是根據(jù)資料庫中儲存的內(nèi)容動態(tài)產(chǎn)生的。當資料庫中的內(nèi)容發(fā)生變更時，顯示該內(nèi)容的所有頁面都會立即變更。您看到的頁面是透過範本中查詢資料庫的各種 PHP 命令建立的。由於模板看起來像是程式碼行而不是內(nèi)容，因此在設(shè)計階段會遇到一些困難。

沒有「正確的方法」來建立網(wǎng)頁。

現(xiàn)在使用「所見即所得」(WYSIWYG) HTML 編輯器（例如 Dreamweaver）很常見，因此您無需編寫 HTML 程式碼。然而，在Joomla模板設(shè)計過程中使用這樣的編輯器是不可能的，因為所見即所得編輯器無法顯示和編輯動態(tài)頁面。因此，您必須手動編寫模板及其 CSS 程式碼，並在進行更改時經(jīng)常刷新的服務(wù)頁面上查看 PHP 的輸出頁面。如果連接足夠快，這可能是一個Web 伺服器，但大多數(shù)設(shè)計人員在自己的電腦上使用本地伺服器或本地主機- 一個為電腦上的網(wǎng)頁提供服務(wù)的軟體，例如第1 章中描述的本地主機設(shè)置2、「下載並安裝Joomla！」

建立網(wǎng)頁沒有「正確的方法」；你如何做取決於你的背景。那些更喜歡圖形的人傾向於在圖形程式（例如 Photoshop）中製作頁面的“圖像”，然後分解圖像，以便將它們用於 Web（稱為切片和切塊）。更多基於技術(shù)的設(shè)計師通常直接跳入 CSS 並開始對字體、邊框和背景進行編碼。然而，正如剛才提到的，作為 Joomla 模板設(shè)計者，您受到以下事實的限制：您無法立即在同一個編輯器中看到編碼的效果。因此，您可以使用以下修改後的設(shè)計流程：

1. 讓本機主機伺服器載入在背景執(zhí)行的內(nèi)容以「執(zhí)行」Joomla。
2. 使用編輯器對 HTML 和 CSS 進行編輯，然後將變更儲存到伺服器。
3. 在網(wǎng)頁瀏覽器中查看受您的編輯影響的頁面。

本機主機伺服器選項

要繼續(xù)學(xué)習(xí)本教學(xué)課程，您需要安裝 WampServer。如果您還沒有這樣做，請繼續(xù)安裝。我就在這裡等。

在託管 Web 伺服器上，您可以在後端編輯 HTML 範本和 CSS 文件，同時在瀏覽器的另一個標籤中開啟前端。儲存變更時，您只需刷新前端視圖即可查看影響。

透過本機主機設(shè)置，您可以更方便地直接存取檔案並使用您選擇的編輯器進行編輯。儲存變更後，無需關(guān)閉編輯器，您就可以刷新瀏覽器中的前端視圖並查看影響。

W3C 和無表設(shè)計

可用性、可訪問性和搜尋引擎優(yōu)化 (SEO) 都是當今互聯(lián)網(wǎng)上用來描述高品質(zhì)網(wǎng)頁的短語。事實上，可用性、可訪問性和 SEO 之間存在大量重疊，而展示其中一個特徵的網(wǎng)頁通常同時具備這三個特徵。實現(xiàn)這三個目標的最簡單方法是使用 W3C Web 標準中規(guī)定的框架。

例如，視力不佳的人可以透過螢?zāi)婚喿x器輕鬆閱讀使用 HTML 語意建立的網(wǎng)站。它也可以很容易地被搜尋引擎蜘蛛讀取。谷歌實際上在如何閱讀網(wǎng)站方面是盲目的；就像使用螢?zāi)婚喿x器一樣。

網(wǎng)路標準制定了一組通用的“規(guī)則”，供所有網(wǎng)頁瀏覽器用來顯示網(wǎng)頁。推動這些標準的主要組織是 W3C，其主管 Tim Berners-Lee 因在 1989 年發(fā)明了 Web 而受到讚譽。

要了解網(wǎng)路標準的來源，了解一些歷史會有所幫助。許多網(wǎng)頁實際上是為舊版瀏覽器設(shè)計的。為什麼？自萬維網(wǎng)誕生以來，瀏覽器不斷發(fā)展。每一代都推出了新功能，製造商為這些功能提出了不同的、有時是專有的標籤（名稱）。每個瀏覽器往往有不同的語法或“方言”，以及實現(xiàn)相同基本 HTML 語言的怪癖。新的瀏覽器已經(jīng)出現(xiàn)，有些舊的瀏覽器已經(jīng)消失（還記得 Netscape 嗎？）。

目前的W3C 標準有助於（希望）推動製造商發(fā)布更相容的瀏覽器，這些瀏覽器可以讀取相同的語言並更一致地顯示頁面，以便設(shè)計人員可以針對單一通用平臺進行設(shè)計。

另一個複雜的因素是，從歷史上看，不同的瀏覽器製造商（例如 Microsoft）傾向於讓他們的瀏覽器以稍微不同的方式解釋 HTML。因此，網(wǎng)頁設(shè)計師必須設(shè)計他們的網(wǎng)站以支援舊版瀏覽器而不是新瀏覽器。設(shè)計師和網(wǎng)站所有者通常認為網(wǎng)頁在這些「舊版」瀏覽器中正確顯示非常重要。制定網(wǎng)頁代碼的 W3C 標準是為了實現(xiàn)一致性。包含 W3C 網(wǎng)路標準的網(wǎng)站擁有良好的基礎(chǔ)，可使其自身易於存取、可用並針對搜尋引擎進行最佳化。將這些視為您房屋的建築規(guī)範：用它們建造的網(wǎng)站更強大、更安全，並符合用戶的期望。您可以使用 W3C 的 HTML 驗證服務(wù) (validator.w3.org) 檢查您的頁面。它簡單且免費（只需確保在嘗試驗證程式碼時使用正確的DOCTYPE 即可。最簡單的是，滿足W3C 驗證的網(wǎng)站也可能使用語義HTML，並使用CSS 將其內(nèi)容與表示分離。

詢問五位設(shè)計師網(wǎng)路標準是什麼，您將得到五種不同的答案。但大多數(shù)人都同意網(wǎng)路標準是基於使用有效程式碼，無論是HTML（還是其他），按照最新版本標準中指定的方式。

語意正確的程式碼

語意正確意味著網(wǎng)頁中的HTML 標記僅描述內(nèi)容，而不描述表示

如前所述，語義正確意味著網(wǎng)頁中的HTML 標記僅描述內(nèi)容，而不描述表示。特別是，這意味著H1 標籤、H2 標籤等的結(jié)構(gòu)化組織，並且僅將表格用於表格數(shù)據(jù)，而不用於佈局。Joomla 模板設(shè)計者在純粹的語義正確性上稍微妥協(xié)的一個領(lǐng)域是，將兩列或三列佈局的左列和右列命名為“左”和“右”，而不是語義上更正確的側(cè)邊欄或側(cè)邊欄。如果這些只是模板PHP 中使用的位置名稱，那麼它們在技術(shù)上是正確的。如果它們也用於定義HTML 和CSS 中的匹配類，那麼將與顯示頁面左列相關(guān)的所有內(nèi)容命名為或分類為left 是一種可以原諒的方便。在下面的範例中，您將看到左側(cè)的位置使用類側(cè)邊欄進行樣式設(shè)置，右側(cè)的位置是sidebar- 2，這是語義上正確的程式碼。

層疊樣式表(CSS)

# 與使程式碼在語義上正確密切相關(guān)的是使用CSS 來控制網(wǎng)頁的外觀和佈局。 CSS是一種為Web 文件添加樣式（例如字體、顏色、間距）的簡單機制。

CSS 與HTML 程式碼並行存在，讓您可以將內(nèi)容（程式碼）與表示法（CSS）完全分離。

要查看此操作的實際效果，請查看CSS Zen Garden，該網(wǎng)站僅通過更改CSS 文件即可以不同且獨特的方式顯示相同的HTML 內(nèi)容。生成的頁面看起來非常不同，但核心內(nèi)容完全相同。

目前，設(shè)計由 Joomla 提供支援的網(wǎng)站在滿足驗證標準方面面臨相當大的挑戰(zhàn)。

目前，設(shè)計由 Joomla 提供支援的網(wǎng)站在滿足驗證標準方面面臨相當大的挑戰(zhàn)。在 Joomla 版本的第一個系列 1.0.X 中，程式碼使用大量表格來輸出其頁面。這並不是真正使用 CSS 進行演示，也不會產(chǎn)生語義上正確的程式碼。許多元件和模組的第三方開發(fā)人員仍在使用表格來產(chǎn)生佈局，這一事實使這個問題變得更加複雜。

幸運的是，Joomla 核心開發(fā)團隊意識到了 Joomla 的這個問題。在 Joomla 1.5 中，模板設(shè)計者可以完全覆蓋核心的輸出（稱為視圖）並以他們想要的任何方式刪除表格或自訂佈局。

在建立範本時仍需小心，以確保其可存取（例如，可縮放字體大小）、可用（清晰的導(dǎo)航）以及針對搜尋引擎進行了最佳化（已排序的原始程式碼）。

建立簡單模板：第 1 步

要了解模板的內(nèi)容，我們先查看一個空白的 Joomla 模板。

範本檔案元件

本節(jié)回顧設(shè)定範本檔案的手動流程。通常，您可以使用 Joomla 安裝程式來安裝模板，它會處理所有這些步驟。

在建立自己的模板時，您需要以協(xié)調(diào)的方式設(shè)定多個文件和資料夾。模板需要包含各種文件和資料夾。這些檔案必須放置在 Joomla 安裝的 /templates/ 目錄中，每個檔案都放置在為該模板指定的資料夾中。如果您安裝了兩個名為Element 和Voodoo 的模板，您的目錄將如下所示：

/templates/element
/templates/voodoo

請注意，模板的目錄名稱必須與模板的名稱相同- 在本例中為element 和voodoo。這些名稱區(qū)分大小寫且不應(yīng)包含空格。

範本目錄下有兩個關(guān)鍵檔案：

/element/templateDetails.xml
/element/index.php

這些檔案名稱和位置必須完全匹配，因為這是 Joomla 核心腳本呼叫它們的方式。第一個是模板 XML 檔。

這是一個 XML 格式的元資料文件，它告訴 Joomla 在載入使用此範本的網(wǎng)頁時還需要哪些其他文件。 （注意大寫的 D。）它還詳細說明了作者、版權(quán)以及構(gòu)成模板的文件（包括使用的任何圖像）。

此檔案的最後一個用途是在管理後端使用擴充功能安裝程式時解壓縮並安裝範本。

第二個關(guān)鍵文件是產(chǎn)生頁面的主要範本文件，index.php。

該檔案是 Joomla 範本中最重要的檔案。它對網(wǎng)站進行佈局並告訴 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 瀏覽器螢?zāi)唤貓D（通?？s小到約 140 像素寬 x 90 像素高）。安裝模板後，該模板將充當預(yù)覽映像，在 Joomla 管理模板管理器中可見。

/element/params.ini -- 一個文字文件，用於儲存範本具有的任何參數(shù)的值。

/element/css/template.css -- 模板的 CSS。資料夾位置是可選的，但您必須指定它在index.php 檔案中的位置。你可以隨心所欲地稱呼它。通常，會使用顯示的名稱，但稍後您會發(fā)現(xiàn)擁有其他 CSS 檔案也有優(yōu)勢。

/element/images/logo.png#－範本附帶的任何圖片。同樣出於組織原因，大多數(shù)設(shè)計師將它們放在圖像資料夾中。這裡我們有一個名為 logo.png 的映像檔作為範例。

templateDetails.xml

templateDetails.xml 檔案可作為清單或裝箱清單，其中包括屬於範本的所有檔案或資料夾的清單。它還包括作者和版權(quán)等資訊。其中一些詳細資訊顯示在範本管理器的管理後端中。這裡顯示了 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&#39;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>

讓我們看看其中一些行的含義：

• — XML 文檔的內(nèi)容是后端安裝程序的說明。選項 type="template" 告訴安裝程序您正在安裝模板并且它適用于 Joomla 1.6。
• 960TemplateTutorialStep1 — 此行定義模板的名稱。您在此處輸入的名稱還將用于在模板目錄中創(chuàng)建目錄。因此，它不應(yīng)包含任何文件系統(tǒng)無法處理的字符，例如空格。如果您手動安裝，則需要創(chuàng)建一個名稱與模板名稱相同的目錄。
• - 這是模板的創(chuàng)建日期。它是一個自由格式字段，可以是任何內(nèi)容，例如 May 2005、08-June-1978、01/01/2004 等。
• - 這是此模板作者的姓名 - 很可能是您的名字。
• - 任何版權(quán)信息都包含在該元素中。
• - 這是可以聯(lián)系到此模板作者的電子郵件地址。
• ——這是作者網(wǎng)站的 URL。
• —這是模板的版本。
• —這是模板中使用的各種文件的列表。文件

模板中使用的內(nèi)容使用 和 標簽進行布局，如下所示：

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>

“文件”部分包含所有通用文件，例如模板的 PHP 源文件或模板預(yù)覽的縮略圖。本節(jié)中列出的每個文件都由 tags 括起來。您還可以使用 標記包含整個文件夾，例如圖像文件夾。

• - 這顯示模板中可用的模塊位置。它是模板中定義的頁面位置列表，例如頂部、左側(cè)和右側(cè)，可以使用模塊管理器的位置下拉菜單將模塊設(shè)置為顯示在其中。此列表中的職位名稱必須與為 index.php 內(nèi)每個列出的職位生成內(nèi)容的 PHP 代碼精確匹配。
• ——這部分描述了可以在后端設(shè)置并作為全局變量傳遞的參數(shù)，以允許高級模板功能，例如更改模板的配色方案。

index.phpp

index.php 文件中到底有什么？它是 HTML 和 PHP 的組合，決定了頁面布局和呈現(xiàn)的所有內(nèi)容。

讓我們看一下實現(xiàn)有效模板的關(guān)鍵部分：index.php 文件頂部的 DOCTYPE。這是每個網(wǎng)頁頂部的一段代碼。在我們頁面的頂部，將其放入模板中：

<?php
	/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined(&#39;_JEXEC&#39;) or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

第一個 PHP 語句僅顯示版權(quán)/許可證，并確保文件不會被直接訪問以確保安全。

網(wǎng)頁 DOCTYPE 是瀏覽器如何顯示網(wǎng)頁的基本組成部分之一 - 如何處理各種 HTML 標記，更重要的是，瀏覽器如何解釋 CSS。 A List Apart 的以下觀察應(yīng)該可以澄清一些事情：

您可以使用多個 DOCTYPE?；旧?，DOCTYPE 告訴瀏覽器使用什么版本的 HTML 來設(shè)計頁面，是否有一些遺留代碼或還包含 XML，以及如何解釋頁面。

這里開始出現(xiàn)“嚴格”和“過渡”一詞（通常為 float:left 和 float:right），以指示是否包含遺留代碼。本質(zhì)上，自從 Web 誕生以來，不同的瀏覽器對各種 HTML 標簽和 CSS 版本都有不同程度的支持。例如，Internet Explorer 6 或更低版本將無法理解用于設(shè)置最小頁面寬度的 min-width 命令。要復(fù)制效果以使其在所有瀏覽器中顯示相同的效果，有時必須在 CSS 中使用特定于瀏覽器的“技巧”，以彌補每個瀏覽器遵守已發(fā)布標準的缺陷。

嚴格意味著 HTML 將完全按照標準的規(guī)定進行解釋。過渡性 DOCTYPE 意味著該頁面將允許與標準存在一些商定的差異（例如，繼續(xù)使用已停止使用的標簽）。

讓事情變得復(fù)雜的是，有一種叫做“怪癖”模式的東西。如果 DOCTYPE 錯誤、過時或不存在，瀏覽器將進入怪異模式。這是向后兼容的嘗試，因此 Internet Explorer 6 會像 Internet Explorer 4 一樣呈現(xiàn)頁面。

不幸的是，人們有時會意外地陷入怪癖模式。它通常以兩種方式發(fā)生：

• 他們直接使用來自 WC3 網(wǎng)頁的 DOCTYPE 聲明，鏈接最終為 DTD/xhtml1-strict.dtd，這是 WC3 服務(wù)器上的相對鏈接。您需要完整路徑，如前面所示。
• Microsoft 設(shè)置了 Internet Explorer 6，以便您可以擁有有效的頁面，但處于怪異模式。當您將 xml 聲明放在 DOCTYPE 之前而不是之后時，就會發(fā)生這種情況。

接下來是一個 XML 語句（在 DOCTYPE 之后）：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

我剛剛向您提供的有關(guān) Internet Explorer 6 怪異模式的信息非常重要。在本教程中，您僅針對 Internet Explorer 6 及更高版本進行設(shè)計，并且需要確保它在標準模式下運行，以最大程度地減少您稍后必須執(zhí)行的操作。

我們看一下index.php文件頭的結(jié)構(gòu)；您希望它盡可能小，但仍然足以滿足生產(chǎn)站點的需要。您將使用的標頭信息如下：

<?php
	/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined(&#39;_JEXEC&#39;) 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>

這一切意味著什么？

我們已經(jīng)討論了 index.php 文件中 DOCTYPE 語句的含義。 <?php echo $this->語言; ?< 代碼從全局配置中的站點語言設(shè)置中提取語言。

$app = Jfactory::getApplication(); 是一個變量，允許您獲取各種參數(shù)（例如站點名稱）并在模板中使用它們。下一行用于包含更多標頭信息：<jdoc :include type="head" />

此代碼片段將在生成的頁面（即您的前端）中插入全局配置中設(shè)置的所有標頭信息。在默認安裝中，它包括此處顯示的標簽：

 <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&amp;type=rss" rel="alternate" 
type="application/rss+xml" title="RSS 2.0" />
<link href="/Joomla_1.6/index.php?format=feed&amp;type=atom" 
rel="alternate" type="application/atom+xml" title="Atom 1.0" />

大部分標題信息都是即時創(chuàng)建的，特定于某人正在查看的頁面（文章）。它包括許多元標記和任何 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 ?> 返回當前模板的名稱。以這種方式編寫而不是編寫實際路徑會使代碼更加通用。當您創(chuàng)建新模板時，您只需復(fù)制此行（以及整個標題代碼）即可，而不必擔(dān)心編輯任何內(nèi)容。

模板 CSS 可以包含任意數(shù)量的文件，例如針對不同瀏覽器和不同媒體（例如打?。┑臈l件文件。例如，以下代碼檢測并添加一個針對 Internet Explorer 6 怪癖的附加 CSS 文件（我們將在此處將其排除在工作示例之外）：

<!--[if lte IE 6]>
	<link href="templates/<?php echo $this->template ?>/css/ieonly.css" 
	rel="stylesheet" type="text/css" />
<![endif]-->

下一個示例是使用模板參數(shù)的技術(shù)的一部分。在本例中，在模板管理器中選擇作為參數(shù)的顏色方案正在加載與所選顏色同名的 CSS 文件：

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
	echo $this->template ?>/css/<?php echo $this->params-
>get(&#39;colorVariation&#39;); ?>.css" type="text/css" />

它可能會生成以下內(nèi)容：

<link rel="stylesheet" href="/templates/960TemplateTutorialStep1/css/red.css"
type="text/css" />

Joomla!頁面正文

仍然在 index.php 文件中，現(xiàn)在頁面的 <head> 部分已設(shè)置，我們可以繼續(xù)處理 body 標記。創(chuàng)建您的第一個模板將會很容易！準備好了嗎？

要創(chuàng)建模板，您所需要做的就是使用 Joomla 語句插入主體內(nèi)容以及您想要的任何模塊：

<body>
	<?php echo $app->getCfg(&#39;sitename&#39;);?><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>

該模板包含以下內(nèi)容，按合理的邏輯查看順序排列：

• 網(wǎng)站名稱
• 頂級模塊
• 左側(cè)模塊
• 面包屑欄
• 主要內(nèi)容
• 正確的模塊
• 頁腳模塊
• 調(diào)試模塊

此時（如果您預(yù)覽它，請確保它是默認模板），該網(wǎng)站看起來不太令人驚嘆。

您希望盡可能接近語義標記。從網(wǎng)絡(luò)的角度來看，這意味著任何人都可以閱讀頁面——瀏覽器、蜘蛛或屏幕閱讀器。語義布局是可訪問性的基石。

請注意，您使用了 Joomla 特有的多個命令中的第一個來創(chuàng)建此輸出：

<body>
	<?php echo $app->getCfg(&#39;sitename&#39;);?><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 文件中輸出一個字符串。在這里，您使用站點名稱；您可以輕松地使用以下內(nèi)容：

The name of this site is <?php echo $mainframe->getCfg(&#39;sitename&#39;);?><br />
	The administrator email is <?php echo $mainframe->getCfg(&#39;mailfrom&#39;);?><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" />

該行為所有位置設(shè)置為右側(cè)的模塊生成內(nèi)容。為這些模塊生成的內(nèi)容按照模塊管理器的順序列中設(shè)置的順序放置在頁面中。這是完整的語法：

<jdoc:include type="modules"  name="location" style="option" />

使用 CSS 創(chuàng)建無表格布局：CSS 模板教程 - 步驟 2

在本節(jié)中，您將使用純 CSS 為 Joomla 模板制作三列布局。您還將使其成為“fixed”布局。網(wǎng)頁layouts主要有三種類型——fixed、fluid和jello——它們都是指如何控制頁面的寬度。

• fixed 布局的寬度設(shè)置為某個 fixed 值。
• fluid 布局可以根據(jù)瀏覽器窗口增大和縮小。
• 果凍布局是 fluid 但介于一些最小值和最大值之間。

幾年前，fluid 寬度模板風(fēng)靡一時。輔助功能人員喜歡它們，抓住瀏覽器窗口的一角并看到所有內(nèi)容滑動真是太酷了。

但是現(xiàn)在，我不制作fluid模板，而是專注于fixed寬度模板。我堅信它們最適合當今的網(wǎng)絡(luò)。四年前，很多人還在使用 800px 寬度的屏幕。 fluid 寬度的要點是，您可以擁有一個在 1024px 屏幕中看起來不錯的網(wǎng)頁，但仍然可以縮小到仍在使用的較小屏幕。

現(xiàn)在，屏幕的趨勢卻相反。人們正在使用巨大的屏幕； 32% 的瀏覽 Joomlahack.com 的人使用的分辨率超過 1024px。

有了這些大屏幕和 960px 寬度布局，你會遇到一個新問題——可讀性。研究表明，當您瀏覽 960px 時，屏幕上的可讀性會下降。所以 fluid 的寬度會填滿那個大屏幕，并且 a) 看起來很愚蠢，b) 會減慢你的閱讀速度。

典型的設(shè)計可能使用表格來布局頁面。表格作為一種快速解決方案非常有用，因為您只需將列的寬度設(shè)置為百分比即可。然而，表格也有一些缺點。例如，與 CSS 布局相比，表格有很多額外的代碼。這會導(dǎo)致加載時間更長（沖浪者不喜歡）和搜索引擎性能較差。代碼的大小大約可以加倍，不僅可以使用標記，還可以使用“間隔 GIF”，即放置在表格的每個單元格中的 1x1 透明圖像，以防止單元格折疊。即使是大公司有時也會陷入桌子陷阱。

基于表格的布局問題

• 它們很難維護。要更改某些內(nèi)容，您必須弄清楚所有表標記（例如 tr 和 td）正在做什么。使用 CSS，只需檢查幾行。
• 內(nèi)容無法按來源訂購。許多網(wǎng)絡(luò)沖浪者不會在瀏覽器上看到網(wǎng)頁。使用文本瀏覽器或屏幕閱讀器查看的用戶從左上角到右下角閱讀頁面。這意味著他們首先查看標題和左列（對于三列布局）中的所有內(nèi)容，然后再到達重要內(nèi)容所在的中間列。另一方面，CSS 布局允許“按源排序”內(nèi)容，這意味著可以在代碼/源中重新排列內(nèi)容。也許您最重要的網(wǎng)站訪問者是 Google，它出于各種目的使用屏幕閱讀器。

當談到 CSS 布局時，出現(xiàn)了一種使用新框架的趨勢。這個想法是使用一組一致的 CSS 來創(chuàng)建布局，然后維護該組以解決瀏覽器兼容性等各種問題。對于此模板，我們將采用 Nathan Smith 開發(fā)的 960 網(wǎng)格系統(tǒng)。它仍然不是很令人興奮，但讓我們看看不同部分的含義。

使用 960 網(wǎng)格系統(tǒng)，您只需用一個類指定您想要的網(wǎng)格有多大。在此示例中，我使用 12 列網(wǎng)格，因此要使標頭橫跨 960px 的整個寬度，請在 index.php 中使用：

<div id="header" class="container_12"></div>

對于我們的三列，我們在容器內(nèi)添加網(wǎng)格，如下所示：

<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 列間距（通常稱為裝訂線）的內(nèi)容已經(jīng)有了一些喘息空間。這一切都是由聰明的 960 CSS 網(wǎng)格框架自動完成的，并且所有瀏覽器問題（是的，我們指的是您，Internet Explorer）都得到了處理。

index.php主要代碼如下：

<body>
	<div id="header" class="container_12">
<?php echo $app->getCfg(&#39;sitename&#39;);?><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 網(wǎng)格框架，我們很少需要接觸這個文件，并且可以盡可能地壓縮它。 layout.css 文件的關(guān)鍵部分如下所示：

.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;
}

很簡單，所有內(nèi)容都向左浮動，并且各種網(wǎng)格大小根據(jù)其所需的寬度設(shè)置。它是一個 12 列的網(wǎng)格，因此，例如 grid_6 表示六列，即 460 像素 - 全寬度減去填充。這個簡單的布局非常適合學(xué)習(xí)如何在 Joomla 中使用 CSS，因為它顯示了 CSS 相對于基于表格的布局的兩個優(yōu)點：代碼更少，并且更易于維護。

按源排序的布局對于 SEO 效果更好。

但是，這個簡單的布局是按照您在屏幕上看到內(nèi)容的順序在代碼中排序的。將最重要的內(nèi)容放置在生成的 HTML 源代碼的開頭，但在屏幕上仍具有相同的按查看器排序的外觀，即左側(cè)列顯示在中心列之前（即左側(cè)），這不是“源排序” .

按源代碼排序的布局比重要內(nèi)容出現(xiàn)在代碼后期的布局更適合 SEO。從 Joomla 網(wǎng)站的角度來看，重要的內(nèi)容是來自主體組件的內(nèi)容。目前，為了保持 CSS 簡單，我們將堅持使用這種按查看器排序的布局，并在本文后面更改為按源排序的布局。許多商業(yè)模板（例如 Joomlahack 的模板）進一步發(fā)展了這種按源排序的概念。

默認CSS

到目前為止，所有 CSS 都只是關(guān)于布局，這使得頁面變得簡單。因此，讓我們添加一些格式，將 CSS 放置在名為typography.css 的新文件中。記得將其添加到index.php文件中！

當您開始使用 CSS 進行排版時，您應(yīng)該設(shè)置一些整體樣式并包括一個簡單的全局重置：

/*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;
 }

全局重置的目的是覆蓋每個瀏覽器中不同的默認設(shè)置，并獲得一個干凈、一致的起點，無論頁面顯示在哪個瀏覽器上。

所有內(nèi)容都被賦予零邊距和填充，然后所有塊級元素都被賦予底部和底部邊距。這有助于實現(xiàn)瀏覽器的一致性。 （上面的第一個 CSS 選擇器稱為星形選擇器，即使在 Internet Explorer 6 中，它也可以充當通用選擇器。）您可以在此處和此處閱讀有關(guān)全局重置的更多信息。

您將字體大小設(shè)置為 76% 以嘗試在各個瀏覽器中獲得更一致的字體大小。然后在 ems 中設(shè)置所有字體大小。設(shè)置 line-height:1.3 有助于提高可讀性。當您在 ems 中設(shè)置字體和行高時，頁面將更易于訪問，因為查看者將能夠根據(jù)自己的喜好調(diào)整字體大小，并且頁面將重排并保持可讀。此處將對此進行進一步討論。

如果您要向標題、側(cè)邊欄和內(nèi)容容器添加一些背景顏色，您會看到如下所示的內(nèi)容。

請注意，側(cè)欄未到達頁腳。這是因為它們僅延伸到其內(nèi)容；如果左側(cè)和右側(cè)的空間為白色，則側(cè)列不存在。

如果您的模板的所有三列都是白色背景，那么這沒有問題。您將使用這種方法，并且模塊周圍會有方框。如果您想要彩色或帶有方框的等高列，則必須使用某種技術(shù)使列具有相同的高度。一種常見的解決方案是使用 JavaScript 腳本來動態(tài)計算和設(shè)置高度。

模板中的模塊

當在 index.php 文件中調(diào)用模塊時，有多種顯示方式的選項。語法如下：

<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 語句將被實際內(nèi)容替換：

<table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params-
	>get(&#39;moduleclass_sfx&#39;); ?>">
<?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(&#39;moduleclass_sfx&#39;); ?>">
<div class="moduletable<?php echo $params->get(&#39;moduleclass_sfx&#39;); ?>">
<?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(&#39;moduleclass_sfx&#39;); ?>">
<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）的代碼更加簡潔，這使得設(shè)計網(wǎng)頁樣式變得更加容易。除非絕對需要，否則我不建議使用選項（后綴）表（默認）或 horz。

如果您檢查前面顯示的 modules.php 文件，您將看到模塊中存在的所有這些選項。添加您自己的內(nèi)容很容易；這是 Joomla 1.6 新模板功能的一部分。

要開發(fā)模板，您可以將模塊樣式xhtml放在index.php中的所有模塊上：

<body>
	<div id="header" class="container_12">
<?php echo $app->getCfg(&#39;sitename&#39;);?><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 來設(shè)置模塊的樣式，其中包含模塊標題的邊框和背景。

我們將以下內(nèi)容添加到排版中。您的 CSS 文件現(xiàn)在應(yīng)該如下所示：

#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" 生成的模塊添加了特定的樣式規(guī)則，因此每個模塊都生成了 .moduletable 類的 <div>，并且模塊的標題顯示在該 <div> 內(nèi)的

標記中。

您創(chuàng)建的排版 CSS 現(xiàn)在會產(chǎn)生如下所示的結(jié)果。

模板中的菜單

同樣，使用 CSS 列表而不是表格可以減少代碼并簡化標記。將 CSS 用于菜單的其他優(yōu)點之一是，各種 CSS 開發(fā)人員網(wǎng)站上都有大量示例代碼。讓我們看一下其中一個并看看如何使用它。

maxdesign.com 的網(wǎng)頁有三十多個菜單可供選擇，所有菜單都使用相同的底層代碼。它被稱為Listamatic。您必須更改代碼才能使這些菜單適應(yīng) Joomla。

這些基于列表的菜單使用以下通用代碼結(jié)構(gòu)：

<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 中復(fù)制此效果，您需要某種封閉的 <div>。您可以通過使用模塊后綴來實現(xiàn)這一點。回想一下，帶有 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。

模塊類后綴的使用很有用。只需簡單更改模塊類后綴即可使用不同顏色的框。

對于您的網(wǎng)站，假設(shè)您想要使用 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 規(guī)則設(shè)置樣式的菜單的任何模塊中。這會生成如下所示的菜單

隱藏列

到目前為止，您的布局始終具有三列，無論這些列中是否有任何內(nèi)容。從 CMS 模板的角度來看，這并不是很有用。在靜態(tài)網(wǎng)站中，內(nèi)容永遠不會改變，但您希望網(wǎng)站管理員能夠?qū)?nèi)容放入任何列中，而不必擔(dān)心編輯 CSS 布局。您希望能夠自動關(guān)閉某列，或者在沒有內(nèi)容顯示的情況下將其折疊。

Joomla 1.6 提供了一種簡單的方法來計算為特定位置生成內(nèi)容的模塊數(shù)量，以便您可以添加對這些計數(shù)的一些 PHP 測試并隱藏任何空列或類似的未使用的 div 容器，并相應(yīng)地調(diào)整布局。 PHP if 模塊測試語法如下：

<?php if($this->countModules(&#39;condition&#39;)) : ?>
do something
<?php else : ?>
do something else
<?php endif; ?>

有四種可能的情況。例如，我們來統(tǒng)計一下圖 9.7 中的模塊數(shù)量。您可以將此代碼插入到index.php中的某個位置：

left=<?php echo $this->countModules(&#39;left&#39;);?><br />
	left and right=<?php echo $this->countModules(&#39;left and right&#39;);?><br />
	left or right=<?php echo $this->countModules(&#39;left or right&#39;);?><br />
left + right=<?php echo $this->countModules(&#39;left + right&#39;);?>

因此，如果我們將此代碼插入到模板中，我們可能會通過示例 Joomla 內(nèi)容獲得以下結(jié)果：

• countModules('left') - 返回 3，因為左側(cè)有 3 個模塊。
• countModules('left and right') - 返回 1，因為左側(cè)和右側(cè)位置都有一個模塊。兩個測試都是正確的（>0）。
• countModules('left or right') - 返回 1，因為左側(cè)或右側(cè)位置有一個模塊。兩個測試都是正確的（>0）。
• countModules('left + right') - 返回 4，因為它將左側(cè)和右側(cè)位置的模塊加在一起。

在這種情況下，您需要使用允許您對特定位置（例如右列）中存在的模塊進行計數(shù)的函數(shù)。如果右欄沒有發(fā)布內(nèi)容，您可以調(diào)整欄大小來填充該空間。

有多種方法可以做到這一點。您可以將條件語句放在正文中以不顯示內(nèi)容，然后根據(jù)其中的列使用不同的內(nèi)容樣式。我們將利用網(wǎng)格系統(tǒng)，并根據(jù)一些計算簡單地傳遞網(wǎng)格的大小。

在標頭中，我們定義幾個變量以確保它們具有默認值。

$leftcolgrid= "3";
$rightcolgrid= "3";

在模板的 HTML 中，我們可以使用這些變量來設(shè)置網(wǎng)格類：

<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 值，然后進行簡單的計算來查找主列，因為我們知道它們的總數(shù)必須為 12。

然后我們可以使用 countModules 函數(shù)來查找一些值。在我們的頭腦中我們插入：

<?php
	if ($this->countModules(&#39;left&#39;) == 0):?>
	<?php $leftcolgrid = "0";?>
	<?php endif; ?>
	<?php
	if ($this->countModules(&#39;right&#39;) == 0):?>
	<?php $rightcolgrid = "0";?>
<?php endif; ?>

請注意，我們正在檢查左右位置是否有零個模塊，因為我們已經(jīng)將默認網(wǎng)格大小設(shè)置為 3。我們也可以通過真/假檢查而不是數(shù)值來完成此檢查（零）。

您已經(jīng)完成了一半，但現(xiàn)在您已經(jīng)擴展了中心列的寬度以容納任何空的（即將隱藏）側(cè)列。

隱藏模塊代碼

創(chuàng)建可折疊列時，最好將模塊設(shè)置為在沒有內(nèi)容時不生成。如果不這樣做，頁面中將包含空 div，這可能會導(dǎo)致跨瀏覽器問題。

為了不生成空 div，請使用以下 if 語句：

<?php if($this->countModules(&#39;left&#39;)) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules"  name="left"style="xhtml"/>
</div>
<?php endif; ?>

當您使用此代碼時，如果left位置沒有發(fā)布任何內(nèi)容，則<div id="sidebar">;此外，其中的所有內(nèi)容都不會包含在生成的頁面中。

對左列和右列使用這些技術(shù)，您的 index.php 文件現(xiàn)在如下所示：

<head>





countModules('left') == 0):?>


countModules('right') == 0):?>





getCfg('sitename');?>





<?php if($this->countModules(&#39;left&#39;)) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules"  name="left"style="xhtml"/>
</div>
<?php endif; ?>


<jdoc:include type="component" />

countModules('right')) : ?>

本節(jié)中創(chuàng)建的基本模板展示了創(chuàng)建 Joomla 模板的一些基本原則。

現(xiàn)在您已經(jīng)完成了基礎(chǔ)知識，您可以使用您學(xué)到的技術(shù)創(chuàng)建一個稍微更具吸引力的模板。

制作真正的 Joomla! 1.6 模板：960模板教程-步驟3

您需要從一個比較開始。合成圖是構(gòu)圖的縮寫，是作為模板基礎(chǔ)的擬議設(shè)計的繪圖或模型。

在本節(jié)中，我們將使用 Dan Cedarholm 的《Bulletproof Web Design》一書中的設(shè)計。我衷心推薦這本書，因為它為一些 CSS 技術(shù)提供了出色的基礎(chǔ)，這些技術(shù)對于創(chuàng)建 Joomla 模板非常有用。

我們將使用其中一些技術(shù)來構(gòu)建這個真實的模板。

切片和切塊

該過程的下一步是切片。您需要使用圖形程序創(chuàng)建可在模板中使用的小切片圖像。重要的是要注意元素如何在需要時調(diào)整大小。 （我選擇的圖形應(yīng)用程序是 Fire-works，因為我發(fā)現(xiàn)它比 Photoshop 更適合網(wǎng)頁設(shè)計（而不是印刷設(shè)計）。）

這個過程本身就可以寫滿一整本書。要了解如何對設(shè)計進行切片，您可以查看圖像文件夾并查看切片。

標題

標題圖像頂部有微弱的漸變。我們將圖像作為未處理的背景放入，然后在其后面分配匹配的填充顏色。這樣，如果需要，標題可以垂直縮放（例如，如果調(diào)整字體大?。?。您還需要將任何類型的顏色更改為白色，以便它顯示在黑色背景上。

這是我們必須添加的 CSS 來設(shè)置標題樣式。

#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;
}

您在這里沒有使用圖形徽標；你使用純文本。原因主要是搜索引擎無法讀取圖像。您可以進行一些漂亮的圖像替換，但我會將其作為練習(xí)留給您自己完成。

橫幅/消息模塊

我們使用最后一個模板中的“頂部”模塊位置來發(fā)送消息。為了給它一些樣式，我們可以添加

#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;
}

標題現(xiàn)在如下所示：

接下來，您需要實現(xiàn)一種技術(shù)來在側(cè)欄上顯示背景。

列背景

回想一下，當您在列上放置彩色背景時，顏色并沒有一直延伸到頁腳。這是因為 div 元素（在本例中為 sidebar 和 sidebar-2）僅與內(nèi)容一樣高。它不會增長以填充包含元素。這是基于網(wǎng)格的系統(tǒng)的弱點；我們必須使用一些 JavaScript 來獲取側(cè)欄的背景。

有許多腳本可以計算列的高度并使它們相等。我們將使用 Dynamic Drive 中的一個：http://www.dynamicdrive.com/csslayouts/equalcolumns.js。

請注意，我們必須更改腳本中引用的列/元素以與我們的相匹配。我們還將添加另一個包含塊元素“maincolbck”來保存主列內(nèi)容頂部的黃色褪色背景。

我們在index.php中的主要內(nèi)容代碼如下所示：

<div id="content" class="container_12">
	<div id="maincolbck">
<?php if($this->countModules(&#39;left&#39;)) : ?>
<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(&#39;right&#39;)) : ?>
<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;
}

這現(xiàn)在為我們提供了右列的漸變背景：

	 #footer {
background: #828377 url(../images/footer-bg.gif) repeat-x top left;
padding:1px 0;
}

靈活的模塊

設(shè)計模塊時，您需要考慮它們是否會垂直拉伸（如果其中包含更多內(nèi)容）、水平拉伸或兩者兼而有之。這里我們使用 Dan 書中包含的防彈設(shè)計原理。我們使用幾個簡單的背景圖像來創(chuàng)建在兩個軸上延伸的模塊背景。我們將一個背景放置在包含的 div 上，將另一個背景放置在 h3 標題的對角上。

由于此設(shè)計沒有水平菜單，因此我們在考慮側(cè)面模塊時也會考慮菜單樣式。

我們的 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;
}

現(xiàn)在讓我們關(guān)注一些排版。

版式

Joomla 1.6 中的 CSS 排版得到了極大的簡化。 Joomla 的早期版本對輸出的各個部分有獨特的類，例如“contentheading”。在 Joomla 1.6 中，輸出使用更多可識別的類，如 H1、H2 等，并且完全無表。

讓我們設(shè)置這些元素的樣式：

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;}

我們還可以為可應(yīng)用于內(nèi)容的特殊類添加一些方便的圖標處理：

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;
}

完成的模板應(yīng)如下所示

摘要

此摘錄通過了四個模板示例，每次都增加了復(fù)雜性和功能。以下是我們審查的要點：

• 現(xiàn)代網(wǎng)站通過使用一種稱為級聯(lián)樣式表 (CSS) 的技術(shù)將內(nèi)容與演示分離。在 Joomla 中，模板及其 CSS 文件控制內(nèi)容的呈現(xiàn)。
• 創(chuàng)建模板時，它有助于讓 Joomla 在本地主機服務(wù)器上“運行”，這樣您就可以使用您喜歡的編輯器在文件級別進行更改，并在瀏覽器中刷新頁面輸出以查看影響。
• 創(chuàng)建有效的模板應(yīng)該是一條路徑，而不是一個目標。我們的想法是讓模板盡可能易于人類和蜘蛛使用，而不是為了獲得有效標記的徽章。
• 最基本的模板只是加載 Joomla 模塊和 mainbody 組件，最好按源代碼順序加載。布局和設(shè)計是 CSS 的一部分，而不是模板的一部分。
• 現(xiàn)代網(wǎng)頁設(shè)計使用 CSS 而不是表格來定位元素。學(xué)習(xí)起來很困難，但值得投資。有許多（非 Joomla）資源可以提供幫助。
• Joomla 始終輸出網(wǎng)頁代碼中的特定元素、ID 和類。這些可以通過 CSS 進行預(yù)測并用于設(shè)計設(shè)計風(fēng)格。
• 模塊的輸出可以完全自定義，也可以使用預(yù)構(gòu)建的輸出選項，例如 xhtml。所有這些選項稱為模塊 chrome。
• 最好始終使用完全展開的列表選項進行菜單輸出。然后，您可以使用 Web 上的許多免費 CSS 資源來設(shè)置菜單的樣式和動畫。
• 當列或模塊位置等元素中沒有內(nèi)容時，可以隱藏（或折疊）這些元素。這是使用條件 PHP 語句來完成的，該語句控制與未使用的模塊及其容器關(guān)聯(lián)的任何代碼是否包含在生成的頁面中；它還可以鏈接到不同的 CSS 樣式以相應(yīng)地調(diào)整布局。
• 創(chuàng)建生產(chǎn) Joomla 模板更多的是圖形設(shè)計和 CSS 操作的問題，而不是一些特殊的 Joomla 知識。