本教程將引導(dǎo)您完成從頭開始創(chuàng)建 joomla 模板的必要步驟。我們將涵蓋每一個細(xì)節(jié)；那么讓我們開始吧！
本教程摘自最近發(fā)布的“Joomla! 1.6：用戶指南”，由 Pearson 提供。
游戲計劃
- 什么是 Joomla 模板？ Joomla 模板有哪些功能？沒有內(nèi)容的模板和內(nèi)容添加到 cms 的模板有什么區(qū)別？
- 本地主機設(shè)計流程與靜態(tài) html 網(wǎng)頁設(shè)計流程有何不同？
- Joomla 中的無表格設(shè)計有何影響？W3C 標(biāo)準(zhǔn)、可用性和可訪問性之間有何關(guān)系？
- Joomla 模板由哪些文件組成，它們執(zhí)行哪些功能？
- 如何使用 css 而不是表格來創(chuàng)建按源順序排列的三列布局？
- Joomla 應(yīng)該使用哪些基本 CSS 樣式，Joomla 核心使用哪些默認(rèn)樣式？
- 如何放置模塊并設(shè)計其樣式？圓角有哪些新技術(shù)？
- 制作模仿 JavaScript 開發(fā)的菜單效果的精簡 CSS 菜單的簡單策略是什么？
- 如何控制列的顯示時間以及在不存在內(nèi)容時隱藏列的時間？
- 創(chuàng)建 Joomla 1.6 模板的正確步驟是什么？
什么是 Joomla!模板？
Joomla 模板是 Joomla CMS 中控制內(nèi)容呈現(xiàn)的一系列文件
Joomla 模板是 Joomla CMS 中控制內(nèi)容呈現(xiàn)的一系列文件。 Joomla 模板不是一個網(wǎng)站；它是一個網(wǎng)站。它也不被認(rèn)為是一個完整的網(wǎng)站設(shè)計。模板是查看 Joomla 網(wǎng)站的基本設(shè)計。為了產(chǎn)生“完整”網(wǎng)站的效果，該模板與 Joomla 數(shù)據(jù)庫中存儲的內(nèi)容密切配合。
模板經(jīng)過樣式設(shè)計，以便在插入內(nèi)容時，它會自動繼承模板中定義的樣式表的樣式，例如鏈接樣式、菜單、導(dǎo)航、文本大小和顏色等。
像 Joomla 一樣，使用 CMS 模板具有許多優(yōu)點：
- Joomla 完成將內(nèi)容放入頁面的所有工作。您只需鍵入新文章即可將新信息添加到現(xiàn)有博客頁面。模板及其 CSS 確保其在風(fēng)格上與網(wǎng)站上的其他內(nèi)容保持一致。
- 內(nèi)容和表示完全分離，特別是當(dāng) CSS 用于布局時（而不是在 index.php 文件中使用表格）。這是確定網(wǎng)站是否符合現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)的主要標(biāo)準(zhǔn)之一。在符合標(biāo)準(zhǔn)的網(wǎng)站中，表格的 HTML 標(biāo)記保留用于顯示表格數(shù)據(jù)，而不是將頁面布置到列中。
- 您可以立即應(yīng)用新模板，從而為網(wǎng)站帶來全新的外觀。這可能涉及放置內(nèi)容和模塊以及顏色和圖形的不同位置。
本地主機設(shè)計流程
您在 Joomla 支持的網(wǎng)站上看到的網(wǎng)頁不是靜態(tài)的；它是根據(jù)數(shù)據(jù)庫中存儲的內(nèi)容動態(tài)生成的。當(dāng)數(shù)據(jù)庫中的內(nèi)容發(fā)生更改時，顯示該內(nèi)容的所有頁面都會立即更改。您看到的頁面是通過模板中查詢數(shù)據(jù)庫的各種 PHP 命令創(chuàng)建的。由于模板看起來像是代碼行而不是內(nèi)容，因此在設(shè)計階段會遇到一些困難。
沒有“正確的方法”來創(chuàng)建網(wǎng)頁。
現(xiàn)在使用“所見即所得”(WYSIWYG) HTML 編輯器（例如 dreamweaver）很常見，因此您無需編寫 HTML 代碼。然而，在Joomla模板設(shè)計過程中使用這樣的編輯器是不可能的，因為所見即所得編輯器無法顯示和編輯動態(tài)頁面。因此，您必須手動編寫模板及其 CSS 代碼，并在進行更改時經(jīng)常刷新的服務(wù)頁面上查看 PHP 的輸出頁面。如果連接足夠快，這可能是一個 Web 服務(wù)器，但大多數(shù)設(shè)計人員在自己的計算機上使用本地服務(wù)器或本地主機 – 一個為計算機上的網(wǎng)頁提供服務(wù)的軟件，例如第 1 章中描述的本地主機設(shè)置2、“下載并安裝Joomla！”
創(chuàng)建網(wǎng)頁沒有“正確的方法”；你如何做取決于你的背景。那些更喜歡圖形的人傾向于在圖形程序（例如 photoshop）中制作頁面的“圖像”，然后分解圖像，以便將它們用于 Web（稱為切片和切塊）。更多基于技術(shù)的設(shè)計師通常直接跳入 CSS 并開始對字體、邊框和背景進行編碼。然而，正如剛才提到的，作為 Joomla 模板設(shè)計者，您受到以下事實的限制：您無法立即在同一個編輯器中看到編碼的效果。因此，您可以使用以下修改后的設(shè)計流程：
- 讓本地主機服務(wù)器加載在后臺運行的內(nèi)容以“運行”Joomla。
- 使用編輯器對 HTML 和 CSS 進行編輯，然后將更改保存到服務(wù)器。
- 在網(wǎng)絡(luò)瀏覽器中查看受您的編輯影響的頁面。
本地主機服務(wù)器選項
要繼續(xù)學(xué)習(xí)本教程，您需要安裝 WampServer。如果您還沒有這樣做，請繼續(xù)安裝。我就在這里等。
在托管 Web 服務(wù)器上，您可以在后端編輯 HTML 模板和 CSS 文件，同時在瀏覽器的另一個選項卡中打開前端。保存更改時，您只需刷新前端視圖即可查看影響。
通過本地主機設(shè)置，您可以更加方便地直接訪問文件并使用您選擇的編輯器進行編輯。保存更改后，無需關(guān)閉編輯器，您就可以刷新瀏覽器中的前端視圖并查看影響。
W3C 和無表設(shè)計
可用性、可訪問性和搜索引擎優(yōu)化 (SEO) 都是當(dāng)今互聯(lián)網(wǎng)上用來描述高質(zhì)量網(wǎng)頁的短語。事實上，可用性、可訪問性和 SEO 之間存在大量重疊，并且展示其中一個特征的網(wǎng)頁通常同時具備這三個特征。實現(xiàn)這三個目標(biāo)的最簡單方法是使用 W3C Web 標(biāo)準(zhǔn)中規(guī)定的框架。
例如，視力不佳的人可以通過屏幕閱讀器輕松閱讀使用 HTML 語義構(gòu)建的網(wǎng)站。它也可以很容易地被搜索引擎蜘蛛讀取。谷歌實際上在如何閱讀網(wǎng)站方面是盲目的；就像使用屏幕閱讀器一樣。
網(wǎng)絡(luò)標(biāo)準(zhǔn)制定了一組通用的“規(guī)則”，供所有網(wǎng)絡(luò)瀏覽器用來顯示網(wǎng)頁。推動這些標(biāo)準(zhǔn)的主要組織是 W3C，其主管 Tim Berners-Lee 因在 1989 年發(fā)明了 Web 而受到贊譽。
要了解網(wǎng)絡(luò)標(biāo)準(zhǔn)的來源，了解一些歷史會有所幫助。許多網(wǎng)頁實際上是為舊版瀏覽器設(shè)計的。為什么？自萬維網(wǎng)誕生以來，瀏覽器不斷發(fā)展。每一代都推出了新功能，制造商為這些功能提出了不同的、有時是專有的標(biāo)簽（名稱）。每個瀏覽器往往有不同的語法或“方言”，以及實現(xiàn)相同基本 HTML 語言的怪癖。新的瀏覽器已經(jīng)出現(xiàn)，一些舊的瀏覽器已經(jīng)消失（還記得 Netscape 嗎？）。
當(dāng)前的 W3C 標(biāo)準(zhǔn)有助于（希望）推動制造商發(fā)布更兼容的瀏覽器，這些瀏覽器可以讀取相同的語言并更一致地顯示頁面，以便設(shè)計人員可以針對單一通用平臺進行設(shè)計。
另一個復(fù)雜的因素是，從歷史上看，不同的瀏覽器制造商（例如 microsoft）傾向于讓他們的瀏覽器以稍微不同的方式解釋 HTML。因此，網(wǎng)頁設(shè)計師必須設(shè)計他們的網(wǎng)站以支持舊版瀏覽器而不是新瀏覽器。設(shè)計師和網(wǎng)站所有者通常認(rèn)為網(wǎng)頁在這些“舊版”瀏覽器中正確顯示非常重要。制定網(wǎng)頁代碼的 W3C 標(biāo)準(zhǔn)是為了實現(xiàn)一致性。包含 W3C 網(wǎng)絡(luò)標(biāo)準(zhǔn)的網(wǎng)站擁有良好的基礎(chǔ)，可以使其自身易于訪問、可用并針對搜索引擎進行優(yōu)化。將這些視為您房屋的建筑規(guī)范：用它們構(gòu)建的網(wǎng)站更強大、更安全，并且符合用戶的期望。您可以使用 W3C 的 HTML 驗證服務(wù) (validator.w3.org) 檢查您的頁面。它簡單且免費（只需確保在嘗試驗證代碼時使用正確的 DOCTYPE 即可。最簡單的是，滿足 W3C 驗證的網(wǎng)站也可能使用語義 HTML，并使用 CSS 將其內(nèi)容與表示分離。
詢問五位設(shè)計師網(wǎng)絡(luò)標(biāo)準(zhǔn)是什么，您將得到五種不同的答案。但大多數(shù)人都同意網(wǎng)絡(luò)標(biāo)準(zhǔn)基于使用有效代碼，無論是 HTML（還是其他），按照最新版本標(biāo)準(zhǔn)中指定的方式。
語義正確的代碼
語義正確意味著網(wǎng)頁中的 HTML 標(biāo)記僅描述內(nèi)容，而不描述表示
如前所述，語義正確意味著網(wǎng)頁中的 HTML 標(biāo)記僅描述內(nèi)容，而不描述表示。特別是，這意味著 H1 標(biāo)簽、H2 標(biāo)簽等的結(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)站在滿足驗證標(biāo)準(zhǔn)方面面臨著相當(dāng)大的挑戰(zhàn)。
目前，設(shè)計由 Joomla 提供支持的網(wǎng)站在滿足驗證標(biāo)準(zhǔn)方面面臨著相當(dāng)大的挑戰(zhàn)。在 Joomla 版本的第一個系列 1.0.X 中，代碼使用大量表格來輸出其頁面。這并不是真正使用 CSS 進行演示，也不會生成語義上正確的代碼。許多組件和模塊的第三方開發(fā)人員仍在使用表格來生成布局，這一事實使這個問題變得更加復(fù)雜。
幸運的是，Joomla 核心開發(fā)團隊認(rèn)識到了 Joomla 的這個問題。在 Joomla 1.5 中，模板設(shè)計者可以完全覆蓋核心的輸出（稱為視圖）并以他們想要的任何方式刪除表格或自定義布局。
創(chuàng)建模板時仍需小心，以確保其可訪問（例如，可縮放字體大小）、可用（清晰的導(dǎo)航）以及針對搜索引擎進行了優(yōu)化（已排序的源代碼）。
創(chuàng)建簡單模板：第 1 步
要了解模板的內(nèi)容，我們首先查看一個空白的 Joomla 模板。
模板文件組件
本節(jié)回顧設(shè)置模板文件的手動過程。通常，您可以使用 Joomla 安裝程序來安裝模板，它會處理所有這些步驟。
在構(gòu)建自己的模板時，您需要以協(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 核心腳本調(diào)用它們的方式。第一個是模板 XML 文件。
這是一個 XML 格式的元數(shù)據(jù)文件，它告訴 Joomla 在加載使用此模板的網(wǎng)頁時還需要哪些其他文件。 （注意大寫的 D。）它還詳細(xì)說明了作者、版權(quán)以及構(gòu)成模板的文件（包括使用的任何圖像）。
此文件的最后一個用途是在管理后端使用擴展安裝程序時解壓并安裝模板。
第二個關(guān)鍵文件是生成頁面的主要模板文件，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 像素高）。安裝模板后，該模板將充當(dāng)預(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 文件充當(dāng)清單或裝箱清單，其中包括屬于模板的所有文件或文件夾的列表。它還包括作者和版權(quán)等信息。其中一些詳細(xì)信息顯示在模板管理器的管理后端中。這里顯示了 XML 文件的示例：
<?xml version="1.0" encoding="utf-8"?>nbsp;install?PUBLIC?"-//Joomla!?1.6//Dtd?template?1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <install><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>?<config><fields><fieldset><field 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></p></install>
讓我們看看其中一些行的含義：
-
— 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é)中列出的每個文件都由
-
– 這顯示模板中可用的模塊位置。它是模板中定義的頁面位置列表，例如頂部、左側(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('_JEXEC') or die; ?>nbsp;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 標(biāo)記，更重要的是，瀏覽器如何解釋 CSS。 A List Apart 的以下觀察應(yīng)該可以澄清一些事情：
您可以使用多個 DOCTYPE。基本上，DOCTYPE 告訴瀏覽器使用什么版本的 HTML 來設(shè)計頁面，是否有一些遺留代碼或還包含 XML，以及如何解釋頁面。
這里開始出現(xiàn)“嚴(yán)格”和“過渡”一詞（通常為 Float:left 和 float:right），以指示是否包含遺留代碼。本質(zhì)上，自從 Web 誕生以來，不同的瀏覽器對各種 HTML 標(biāo)簽和 CSS 版本都有不同程度的支持。例如，Internet Explorer 6 或更低版本將無法理解用于設(shè)置最小頁面寬度的 min-width 命令。要復(fù)制效果以使其在所有瀏覽器中顯示相同的效果，有時必須在 CSS 中使用特定于瀏覽器的“技巧”，以彌補每個瀏覽器遵守已發(fā)布標(biāo)準(zhǔn)的缺陷。
嚴(yán)格意味著 HTML 將完全按照標(biāo)準(zhǔn)的規(guī)定進行解釋。過渡性 DOCTYPE 意味著該頁面將允許與標(biāo)準(zhǔn)存在一些商定的差異（例如，繼續(xù)使用已停止使用的標(biāo)簽）。
讓事情變得復(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，以便您可以擁有有效的頁面，但處于怪異模式。當(dāng)您將 xml 聲明放在 DOCTYPE 之前而不是之后時，就會發(fā)生這種情況。
接下來是一個 XML 語句（在 DOCTYPE 之后）：
我剛剛向您提供的有關(guān) Internet Explorer 6 怪異模式的信息非常重要。在本教程中，您僅針對 Internet Explorer 6 及更高版本進行設(shè)計，并且需要確保它在標(biāo)準(zhǔn)模式下運行，以最大程度地減少您稍后必須執(zhí)行的操作。
我們看一下index.php文件頭的結(jié)構(gòu)；您希望它盡可能小，但仍然足以滿足生產(chǎn)站點的需要。您將使用的標(biāo)頭信息如下：
nbsp;html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> language;??>"?lang="<?php echo $this->language;??>"?> <include></include>baseurl? ?>/templates/system/css/system.css"?type="text/css"?/> baseurl? ?>/templates/system/css/general.css"?type="text/css"?/> baseurl??>/templates/template??>/css/template.css"?type="text/css"?/>
這一切意味著什么？
我們已經(jīng)討論了 index.php 文件中 DOCTYPE 語句的含義。 語言; ?
$app = Jfactory::getApplication(); 是一個變量，允許您獲取各種參數(shù)（例如站點名稱）并在模板中使用它們。下一行用于包含更多標(biāo)頭信息：
此代碼片段將在生成的頁面（即您的前端）中插入全局配置中設(shè)置的所有標(biāo)頭信息。在默認(rèn)安裝中，它包括此處顯示的標(biāo)簽：
?<meta><meta><meta><meta><meta><meta the><meta open><title>Home</title><link type="application/rss+xml"><link rel="alternate">
大部分標(biāo)題信息都是即時創(chuàng)建的，特定于某人正在查看的頁面（文章）。它包括許多元標(biāo)記和任何 RSS 源 URL。
標(biāo)題中的最后幾行提供了 Joomla 生成的頁面的 CSS 文件鏈接，以及此模板中的 CSS 文件：
<link>baseurl? ?>/templates/system/css/system.css"?type="text/css"?/> <link>baseurl? ?>/templates/system/css/general.css"?type="text/css"?/> <link>baseurl??>/templates/<?php echo $this->template??>/css/template.css"?type="text/css"?/>
前兩個文件，system.css 和general.css，包含一些通用的 Joomla 樣式。最后一項是模板的所有CSS，這里稱為template.css。 PHP 代碼 template ?> 返回當(dāng)前模板的名稱。以這種方式編寫而不是編寫實際路徑會使代碼更加通用。當(dāng)您創(chuàng)建新模板時，您只需復(fù)制此行（以及整個標(biāo)題代碼）即可，而不必?fù)?dān)心編輯任何內(nèi)容。
模板 CSS 可以包含任意數(shù)量的文件，例如針對不同瀏覽器和不同媒體（例如打印）的條件文件。例如，以下代碼檢測并添加一個針對 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>baseurl??>/templates/<?php echo $this->template??>/css/<?php echo $this->params- >get('colorVariation');??>.css"?type="text/css"?/>
它可能會生成以下內(nèi)容：
<link type="text/css">
Joomla!頁面正文
仍然在 index.php 文件中，現(xiàn)在頁面的
部分已設(shè)置，我們可以繼續(xù)處理 body 標(biāo)記。創(chuàng)建您的第一個模板將會很容易！準(zhǔn)備好了嗎？
要創(chuàng)建模板，您所需要做的就是使用 Joomla 語句插入主體內(nèi)容以及您想要的任何模塊：
<?php echo $app->getCfg('sitename');?><br><include></include><include></include><include></include><include></include><include></include><include></include><include></include>
該模板包含以下內(nèi)容，按合理的邏輯查看順序排列：
- 網(wǎng)站名稱
- 頂級模塊
- 左側(cè)模塊
- 面包屑欄
- 主要內(nèi)容
- 正確的模塊
- 頁腳模塊
- 調(diào)試模塊
此時（如果您預(yù)覽它，請確保它是默認(rèn)模板），該網(wǎng)站看起來不太令人驚嘆。
您希望盡可能接近語義標(biāo)記。從網(wǎng)絡(luò)的角度來看，這意味著任何人都可以閱讀頁面——瀏覽器、蜘蛛或屏幕閱讀器。語義布局是可訪問性的基石。
請注意，您使用了 Joomla 特有的多個命令中的第一個來創(chuàng)建此輸出：
<?php echo $app->getCfg('sitename');?><br><include></include><include></include><include></include><include></include><include></include><include></include><include></include>
PHP echo 語句只是從 configuration.php 文件中輸出一個字符串。在這里，您使用站點名稱；您可以輕松地使用以下內(nèi)容：
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 輸出。
該行插入組件的輸出。它是什么組件將由鏈接的菜單項確定：
此行插入模塊位置的輸出：
該行為所有位置設(shè)置為右側(cè)的模塊生成內(nèi)容。為這些模塊生成的內(nèi)容按照模塊管理器的順序列中設(shè)置的順序放置在頁面中。這是完整的語法：
<include></include>
使用 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寬度模板。我堅信它們最適合當(dāng)今的網(wǎng)絡(luò)。四年前，很多人還在使用 800px 寬度的屏幕。 fluid 寬度的要點是，您可以擁有一個在 1024px 屏幕中看起來不錯的網(wǎng)頁，但仍然可以縮小到仍在使用的較小屏幕。
現(xiàn)在，屏幕的趨勢卻相反。人們正在使用巨大的屏幕； 32% 的瀏覽 Joomlahack.com 的人使用的分辨率超過 1024px。
有了這些大屏幕和 960px 寬度布局，你會遇到一個新問題——可讀性。研究表明，當(dāng)您瀏覽 960px 時，屏幕上的可讀性會下降。所以 fluid 的寬度會填滿那個大屏幕，并且 a) 看起來很愚蠢，b) 會減慢你的閱讀速度。
典型的設(shè)計可能使用表格來布局頁面。表格作為一種快速解決方案非常有用，因為您只需將列的寬度設(shè)置為百分比即可。然而，表格也有一些缺點。例如，與 CSS 布局相比，表格有很多額外的代碼。這會導(dǎo)致加載時間更長（沖浪者不喜歡）和搜索引擎性能較差。代碼的大小大約可以加倍，不僅可以使用標(biāo)記，還可以使用“間隔 GIF”，即放置在表格的每個單元格中的 1×1 透明圖像，以防止單元格折疊。即使是大公司有時也會陷入桌子陷阱。
基于表格的布局問題
- 它們很難維護。要更改某些內(nèi)容，您必須弄清楚所有表標(biāo)記（例如 tr 和 td）正在做什么。使用 CSS，只需檢查幾行。
- 內(nèi)容無法按來源訂購。許多網(wǎng)絡(luò)沖浪者不會在瀏覽器上看到網(wǎng)頁。使用文本瀏覽器或屏幕閱讀器查看的用戶從左上角到右下角閱讀頁面。這意味著他們首先查看標(biāo)題和左列（對于三列布局）中的所有內(nèi)容，然后再到達重要內(nèi)容所在的中間列。另一方面，CSS 布局允許“按源排序”內(nèi)容，這意味著可以在代碼/源中重新排列內(nèi)容。也許您最重要的網(wǎng)站訪問者是 Google，它出于各種目的使用屏幕閱讀器。
當(dāng)談到 CSS 布局時，出現(xiàn)了一種使用新框架的趨勢。這個想法是使用一組一致的 CSS 來創(chuàng)建布局，然后維護該組以解決瀏覽器兼容性等各種問題。對于此模板，我們將采用 Nathan Smith 開發(fā)的 960 網(wǎng)格系統(tǒng)。它仍然不是很令人興奮，但讓我們看看不同部分的含義。
使用 960 網(wǎng)格系統(tǒng)，您只需用一個類指定您想要的網(wǎng)格有多大。在此示例中，我使用 12 列網(wǎng)格，因此要使標(biāo)頭橫跨 960px 的整個寬度，請在 index.php 中使用：
<div></div>
對于我們的三列，我們在容器內(nèi)添加網(wǎng)格，如下所示：
<include></include><include></include><include></include><include></include>
請注意，具有 10px 列間距（通常稱為裝訂線）的內(nèi)容已經(jīng)有了一些喘息空間。這一切都是由聰明的 960 CSS 網(wǎng)格框架自動完成的，并且所有瀏覽器問題（是的，我們指的是您，Internet Explorer）都得到了處理。
index.php主要代碼如下：
getCfg('sitename');?>
<include></include><include></include><include></include><include></include><include></include><include></include>
在此示例中，我將 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ā)展了這種按源排序的概念。
默認(rèn)CSS
到目前為止，所有 CSS 都只是關(guān)于布局，這使得頁面變得簡單。因此，讓我們添加一些格式，將 CSS 放置在名為typography.css 的新文件中。記得將其添加到index.php文件中！
當(dāng)您開始使用 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; ?}
全局重置的目的是覆蓋每個瀏覽器中不同的默認(rèn)設(shè)置，并獲得一個干凈、一致的起點，無論頁面顯示在哪個瀏覽器上。
所有內(nèi)容都被賦予零邊距和填充，然后所有塊級元素都被賦予底部和底部邊距。這有助于實現(xiàn)瀏覽器的一致性。 （上面的第一個 CSS 選擇器稱為星形選擇器，即使在 Internet Explorer 6 中，它也可以充當(dāng)通用選擇器。）您可以在此處和此處閱讀有關(guān)全局重置的更多信息。
您將字體大小設(shè)置為 76% 以嘗試在各個瀏覽器中獲得更一致的字體大小。然后在 ems 中設(shè)置所有字體大小。設(shè)置 line-height:1.3 有助于提高可讀性。當(dāng)您在 ems 中設(shè)置字體和行高時，頁面將更易于訪問，因為查看者將能夠根據(jù)自己的喜好調(diào)整字體大小，并且頁面將重排并保持可讀。此處將對此進行進一步討論。
如果您要向標(biāo)題、側(cè)邊欄和內(nèi)容容器添加一些背景顏色，您會看到如下所示的內(nèi)容。
請注意，側(cè)欄未到達頁腳。這是因為它們僅延伸到其內(nèi)容；如果左側(cè)和右側(cè)的空間為白色，則側(cè)列不存在。
如果您的模板的所有三列都是白色背景，那么這沒有問題。您將使用這種方法，并且模塊周圍會有方框。如果您想要彩色或帶有方框的等高列，則必須使用某種技術(shù)使列具有相同的高度。一種常見的解決方案是使用 JavaScript 腳本來動態(tài)計算和設(shè)置高度。
模板中的模塊
當(dāng)在 index.php 文件中調(diào)用模塊時，有多種顯示方式的選項。語法如下：
<include></include>
樣式是可選的，在 templates/system/html/modules.php 中定義。目前，默認(rèn)的 modules.php 文件包含以下布局選項：table、horz、xhtml、rounded 和 none。讓我們簡要了解一下每個選項所需的代碼行：
OPTION=”table” (默認(rèn)顯示)模塊顯示在一列中。如果我們使用 “table” 選項，下面顯示了 Joomla 的輸出。請注意，PHP 語句將被實際內(nèi)容替換：
| title;??> |
|---|
| content;??> |
OPTION=”horz” 使模塊水平顯示。每個模塊都在包裝器表的單元格中輸出。如果我們使用 “horz” 選項，以下顯示了 Joomla 的輸出：
?
OPTION=”xhtml” 使模塊顯示為簡單的 div 元素，標(biāo)題位于 H3 中
標(biāo)簽。如果我們使用 “xhtml” 選項，以下顯示了 Joomla 的輸出：
<div>get('moduleclass_sfx');??>"> <div>get('moduleclass_sfx');??>"> <?php if ($module->showtitle?!=?0)?:??> <h3> <?php echo $module->title;??></h3> <?php endif; ?><?php echo $module->content;??> </div> <p>OPTION="rounded" 使模塊以允許可拉伸圓角等的格式顯示。如果使用 $style，則 div 名稱從 moduletable 更改為 module。如果我們使用 "rounded" 選項，以下顯示了 Joomla 的輸出：</p> <pre class="brush:php;toolbal:false;"><div>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” 使模塊顯示為不包含任何元素和標(biāo)題的原始輸出。
如您所見，CSS 選項（xhtml 和 rounded）的代碼更加簡潔，這使得設(shè)計網(wǎng)頁樣式變得更加容易。除非絕對需要，否則我不建議使用選項（后綴）表（默認(rèn)）或 horz。
如果您檢查前面顯示的 modules.php 文件，您將看到模塊中存在的所有這些選項。添加您自己的內(nèi)容很容易；這是 Joomla 1.6 新模板功能的一部分。
要開發(fā)模板，您可以將模塊樣式xhtml放在index.php中的所有模塊上：
getCfg('sitename');?><div></div>
<include></include><div></div><include></include><include></include><include></include><include></include><include></include>
讓我們從布局 div 中刪除背景，并添加一些 CSS 來設(shè)置模塊的樣式，其中包含模塊標(biāo)題的邊框和背景。
我們將以下內(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 類的
標(biāo)記中。
您創(chuàng)建的排版 CSS 現(xiàn)在會產(chǎn)生如下所示的結(jié)果。
模板中的菜單
同樣，使用 CSS 列表而不是表格可以減少代碼并簡化標(biāo)記。將 CSS 用于菜單的其他優(yōu)點之一是，各種 CSS 開發(fā)人員網(wǎng)站上都有大量示例代碼。讓我們看一下其中一個并看看如何使用它。
maxdesign.com 的網(wǎng)頁有三十多個菜單可供選擇，所有菜單都使用相同的底層代碼。它被稱為Listamatic。您必須更改代碼才能使這些菜單適應(yīng) Joomla。
這些基于列表的菜單使用以下通用代碼結(jié)構(gòu)：
<div>? <ul> <li><a>Item?one</a></li> <li><a>Item?two</a></li> <li><a>Item?three</a></li> <li><a>Item?four</a></li> <li><a>Item?five</a></li> </ul> </div>
這意味著有一個名為 navcontainer 的封閉
- 有一個 id of navlist。要在 Joomla 中復(fù)制此效果，您需要某種封閉的
- 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è)位置的模塊加在一起。
- 現(xiàn)代網(wǎng)站通過使用一種稱為級聯(lián)樣式表 (CSS) 的技術(shù)將內(nèi)容與演示分離。在 Joomla 中，模板及其 CSS 文件控制內(nèi)容的呈現(xiàn)。
- 創(chuàng)建模板時，它有助于讓 Joomla 在本地主機服務(wù)器上“運行”，這樣您就可以使用您喜歡的編輯器在文件級別進行更改，并在瀏覽器中刷新頁面輸出以查看影響。
- 創(chuàng)建有效的模板應(yīng)該是一條路徑，而不是一個目標(biāo)。我們的想法是讓模板盡可能易于人類和蜘蛛使用，而不是為了獲得有效標(biāo)記的徽章。
- 最基本的模板只是加載 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è)置菜單的樣式和動畫。
- 當(dāng)列或模塊位置等元素中沒有內(nèi)容時，可以隱藏（或折疊）這些元素。這是使用條件 PHP 語句來完成的，該語句控制與未使用的模塊及其容器關(guān)聯(lián)的任何代碼是否包含在生成的頁面中；它還可以鏈接到不同的 CSS 樣式以相應(yīng)地調(diào)整布局。
- 創(chuàng)建生產(chǎn) Joomla 模板更多的是圖形設(shè)計和 CSS 操作的問題，而不是一些特殊的 Joomla 知識。
<div> <h3>...Module_Title...</h3> ...Module_Content...? </div>
如果添加一個名為 menu 的模塊后綴，它將被添加到 moduletable 類中，如下所示：
<div> <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)容永遠(yuǎn)不會改變，但您希望網(wǎng)站管理員能夠?qū)?nèi)容放入任何列中，而不必?fù)?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('condition'))?:??> do?something <?php else : ?> do?something?else <?php endif; ?>
有四種可能的情況。例如，我們來統(tǒng)計一下圖 9.7 中的模塊數(shù)量。您可以將此代碼插入到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 內(nèi)容獲得以下結(jié)果：
在這種情況下，您需要使用允許您對特定位置（例如右列）中存在的模塊進行計數(shù)的函數(shù)。如果右欄沒有發(fā)布內(nèi)容，您可以調(diào)整欄大小來填充該空間。
有多種方法可以做到這一點。您可以將條件語句放在正文中以不顯示內(nèi)容，然后根據(jù)其中的列使用不同的內(nèi)容樣式。我們將利用網(wǎng)格系統(tǒng)，并根據(jù)一些計算簡單地傳遞網(wǎng)格的大小。
在標(biāo)頭中，我們定義幾個變量以確保它們具有默認(rèn)值。
$leftcolgrid=?"3"; $rightcolgrid=?"3";
在模板的 HTML 中，我們可以使用這些變量來設(shè)置網(wǎng)格類：
"> <include></include>"> <include></include><include></include>"> <include></include>
您會注意到我們正在回顯 colgrid 值，然后進行簡單的計算來查找主列，因為我們知道它們的總數(shù)必須為 12。
然后我們可以使用 countModules 函數(shù)來查找一些值。在我們的頭腦中我們插入：
<?php if ($this->countModules('left')?==?0):?> <?php $leftcolgrid = "0";?><?php endif; ?><?php if ($this->countModules('right')?==?0):?> <?php $rightcolgrid = "0";?><?php endif; ?>
請注意，我們正在檢查左右位置是否有零個模塊，因為我們已經(jīng)將默認(rèn)網(wǎng)格大小設(shè)置為 3。我們也可以通過真/假檢查而不是數(shù)值來完成此檢查（零）。
您已經(jīng)完成了一半，但現(xiàn)在您已經(jīng)擴展了中心列的寬度以容納任何空的（即將隱藏）側(cè)列。
隱藏模塊代碼
創(chuàng)建可折疊列時，最好將模塊設(shè)置為在沒有內(nèi)容時不生成。如果不這樣做，頁面中將包含空 div，這可能會導(dǎo)致跨瀏覽器問題。
為了不生成空 div，請使用以下 if 語句：
countModules('left'))?:??> "> <include></include>
當(dāng)您使用此代碼時，如果left位置沒有發(fā)布任何內(nèi)容，則
對左列和右列使用這些技術(shù)，您的 index.php 文件現(xiàn)在如下所示：
nbsp;html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">language; ?>"?lang="language;??>"?> <include></include>baseurl? ?>/templates/system/css/system.css"?type="text/css"?/> baseurl? ?>/templates/system/css/general.css"?type="text/css"?/> baseurl??>/templates/template??>/css/layout.css"?type="text/css"?/> baseurl??>/templates/template??>/css/typography.css"?type="text/css"?/> countModules('left')?==?0):?> countModules('right')?==?0):?> getCfg('sitename');?>
<include></include> <div></div> countModules('left'))?:??> "> <include></include> "> <include></include><include></include> countModules('right'))?:??> "> <include></include> <div></div> <include></include> <include></include>
本節(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è)計進行切片，您可以查看圖像文件夾并查看切片。
標(biāo)題
標(biāo)題圖像頂部有微弱的漸變。我們將圖像作為未處理的背景放入，然后在其后面分配匹配的填充顏色。這樣，如果需要，標(biāo)題可以垂直縮放（例如，如果調(diào)整字體大小）。您還需要將任何類型的顏色更改為白色，以便它顯示在黑色背景上。
這是我們必須添加的 CSS 來設(shè)置標(biāo)題樣式。
#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; }
您在這里沒有使用圖形徽標(biāo)；你使用純文本。原因主要是搜索引擎無法讀取圖像。您可以進行一些漂亮的圖像替換，但我會將其作為練習(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; }
標(biāo)題現(xiàn)在如下所示：
接下來，您需要實現(xiàn)一種技術(shù)來在側(cè)欄上顯示背景。
列背景
回想一下，當(dāng)您在列上放置彩色背景時，顏色并沒有一直延伸到頁腳。這是因為 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)容代碼如下所示：
countModules('left'))?:??>"> <include></include>"> <include></include><include></include>countModules('right'))?:??>"> <include></include>在添加這些元素時，我們還可以在頁腳元素上添加背景。我們添加的 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 標(biāo)題的對角上。
由于此設(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)容的特殊類添加一些方便的圖標(biāo)處理：
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ù)雜性和功能。以下是我們審查的要點：
