在這個(gè)教程里,我們將一步步的制作一個(gè)具體的JOOMLA模板,JOOMLA是一個(gè)強(qiáng)大的開放代碼的CMS(內(nèi)容管理系統(tǒng)),并且她有著廣泛的在線社團(tuán)的支持.這里強(qiáng)調(diào),我們將不使用table(表單);而是使用cascading style sheets (CSS) 建立模板.這種方式的最終目的是為了更加適應(yīng)World Wide Web Consortium (W3C) 的標(biāo)準(zhǔn).這也促進(jìn)其更快的被裝載load(不知是指瀏覽器還是搜索引擎)和更容易被搜索引擎收錄.在后面的說明中我們再詳細(xì)的討論.
?

本指導(dǎo)手冊包括下面的章節(jié):

* 什么是JOOMLA模板? 解釋怎樣執(zhí)行JOOMLA模板和比較沒有內(nèi)容的普通模板和CMS(內(nèi)容管理系統(tǒng))的模板有什么區(qū)別.
* 本地編輯模板的過程.主要解釋設(shè)計(jì)的過程與靜態(tài)的web頁面有什么不同
* W3C標(biāo)準(zhǔn)和無表單設(shè)計(jì).主要討論在JOOMLA中進(jìn)行無table(表單)設(shè)計(jì)和W3C標(biāo)準(zhǔn)有什么關(guān)系.
* JOOMLA模板的組成.JOOMLA的模板文件組成和模板中那些過程被執(zhí)行.
* 使用cascading style sheets (CSS)布局.主要討論如何使用CSS布局來取代table布局.
* 默認(rèn)JOOMLA樣式表.介紹一些基本的JOOMLA的CSS應(yīng)用.怎么調(diào)用強(qiáng)大的JOOMLA內(nèi)核.
* Modules組件.怎樣布置你的組件和一些技巧.
* Menus菜單.使用CSS建立一些簡單的類似于JS編出來的菜單.
* Hiding Columns(隱藏列表).怎樣控制Columns和隱藏一些沒有內(nèi)容的Columns.
* 總結(jié)
* 附錄.一些有用的鏈接和資源.

?

第一節(jié):模板組成
為了理解JOOMLA模板的目錄結(jié)構(gòu), 我們將著眼于一個(gè)空白的JOOMLA模板. 不同的文件和文件夾組成了JOOMLA的一個(gè)具體模板. 這些文件必須被放置在 /templates 的JOOMLA安裝目錄下. 比如,我們安裝了兩個(gè)模板,我們的目錄結(jié)構(gòu)看上去就是這樣的:

/templates/JS_Smoothportal
/templates/JS_Synergy

大家注意模板的名稱必須就是 /templates 目錄下文件夾的名稱,在這個(gè)例子中就是 JS_Smoothportal 和 JS_Synergy. 很顯然,這些名字最好是能反應(yīng)出模板的風(fēng)格或者出處.

在一個(gè)具體模板的目錄下,有以下關(guān)鍵文件:

/JS_Smoothportal/templateDetails.xml
/JS_Smoothportal/index.php

這兩個(gè)文件的文件名必須定義的和JOOMLA核心腳本預(yù)定義的完全相同.

* templateDetails.xml
(注意字母”D”大寫) 一個(gè)XML格式的文件告訴JOOMLA核心在使用當(dāng)前模板時(shí)的文件清單. 這里也描述了作者;文件名稱;copyright信息;甚至包括模板使用的圖片文件的清單. 最后一次使用該文件也就是我們在管理后臺對該模板進(jìn)行安裝的時(shí)候.
* index.php
這個(gè)文件也是最重要的文件. 它對整站進(jìn)行布局并且告訴JOOMLA內(nèi)核何處放置組件和模塊.它往往是一種PHP與(X)HTML的”混合體”.

絕大多數(shù)的模板也使用了一些”附加文件”. 一般會像下面的定義(盡管JOOMLA內(nèi)核沒有要求):

/JS_Smoothportal/template_thumbnail.png
/JS_Smoothportal/css/template_css.css
/JS_Smoothportal/images/ logo.png

* template_thumbnail.png
當(dāng)前模板的瀏覽器截圖(通常使用140*90像素尺寸). 安裝模板完畢以后,這張圖片會以”縮略圖”的形式在后臺模板管理器中展示.
* css/template_css.css
模板的CSS文件. 文件夾的路徑是可以選擇的,但是你必須對它進(jìn)行指定. 注意文件名和路徑是在index.php中指定的. 你可以取一個(gè)你喜歡的名字. 通常文件名反映使用狀況, 我們在后面闡述這種命名方法在多個(gè)CSS文件使用時(shí)的優(yōu)點(diǎn).
* images/logo.png
在模板里面有很多圖片文件. 一般的我們把這些圖片歸理至一個(gè)文件夾,而這個(gè)例子中我們只有一個(gè)文件logo.png

你可以用管理后臺安裝zip格式的上傳好的文件,也可以手動的在服務(wù)器上copy文件,但是你必須把他們放置在 yoursite.com/templates目錄下.

templateDetails.xml格式

templateDetails.xml 必須包括模板使用的所有文件. 它也包括了作者和版權(quán)信息等內(nèi)容. 在后臺的模板管理器這些信息將會被展示,下面是一個(gè)XML文件的例子:

<mosinstall type=”template” version=”1.0.x”>
<name>YourTemplate</name>
<creationDate>March 06</creationDate>
<author>Barrie North</author>
<copyright>GNU/GPL</copyright>
<authorEmail> compassdesigns@gmail.com 這個(gè) E-mail 地址已經(jīng)被防止灌水惡意程序保護(hù)，您需要激活 Java Script 才能觀看 This e-mail address is being protected from spam bots, you need JavaScript enabled to view it </authorEmail> <authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description> An example template that shows a basic xml details file </description>
<files>
<filename>index.php</filename>
<filename>js/ie.js</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/header.png</filename>
<filename>images/background.png</filename>
<filename>template_thumbnail.png</filename>
</images>
<css> <filename>css/base.css</filename>
<filename>css/norightcol.css</filename>
<filename>css/template_css.css</filename>
</css>
</mosinstall>

讓我們來解釋這些行的意義:

* mosinstall
這個(gè)命令參數(shù)是安裝程式的指令. 參數(shù) type=”template” 告訴安裝程序我們安裝的是一個(gè)模板
* name:
定義你模板的名稱. 這個(gè)名稱會在安裝模板的時(shí)候以目錄夾名的形式被安裝在模板目錄下. 因此這個(gè)name不能包括文件系統(tǒng)不能處理的字符, 比如空格. 如果是手動安裝, 你就必須在JOOMLA模板目錄下手動創(chuàng)建一個(gè)與這個(gè)name一致的目錄夾.
* creationDate:
模板建立的日期. 自由填寫比如你可以填寫 May 2005, 08-June-1978, 01/01/2004 etc.
* author:
這個(gè)模板設(shè)計(jì)者的名稱 - 比如你的名字
* copyright:
版權(quán)信息的內(nèi)容. 這里 Licensing Primer for Developers & Designers 可以找到JOOMLA相關(guān)的內(nèi)容.
* authorEmail:
作者郵件信息Email.
* authorURL:
作者站點(diǎn)
* version:
模板版本
* files:
“files” 部分聲明的是這個(gè)模板包括的PHP文件或者縮略圖文件. 每個(gè)文件被列出在<filename>與</filename>之間,包括完整的路徑. 它也可以包括一些附加文件, 這里的例子我們看到的是一個(gè)次模板使用的一個(gè)JS文件.
* images:
所有的圖片文件 在這個(gè)部分被列出. 所有圖片文件在你模板目錄下的完整路徑將包含在<filename>與</filename>之間. 比如: 如果你的模板目錄是’YourTemplate’,所有的圖片文件在’images’下,它是在’YourTemplate’下的目錄,那么有效的路徑就是:<filename>images/my_image.jpg</filename>
* css:
樣式表被顯示與此部分. 同樣也在<filename>與</filename>之間定義,這個(gè)定義對于多樣式表將非常重要,我們將在下面的內(nèi)容里討論.

The index.php

究竟是那些內(nèi)容在index.php文件中呢?它應(yīng)該是一個(gè)關(guān)于網(wǎng)站次模板的布局外觀的(X)HTML和PHP的混合體

首先我們看到是下面一段有效模板的文檔定義,文檔類型的表述在這段頂部定義,這段代碼在所有的頁面文件首部都會出現(xiàn),在例子模板的index.php頂部,我們看到下列代碼:

<!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”
lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”>

一個(gè)具體頁面要被瀏覽器呈現(xiàn),文檔類型描述 “DOCTYPE”是最基礎(chǔ)的部分,特別的,如何讓瀏覽器解讀CSS. 為了給你一個(gè)直觀的解釋alistapart.com上面有這樣一段:

[W3C關(guān)于”doctypes”就是:] “written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.?”(他媽的這句真拗口,字面意思:小丑寫給小丑.我說的小丑,不是說像你我一樣專業(yè)的網(wǎng)站,我是指一些除你我以外類似一個(gè)老太太收到了一封電子郵件—–anthax)

總 之,有幾種文檔類型你可以使用. 首先, doctype定義告訴瀏覽器如何解讀頁面.這里單詞”strict”(嚴(yán)格的) and “transitional”(過度的)開始獲取浮動范圍(float:left and float:right 通常). 實(shí)質(zhì)上,自從WWW誕生以來,不同瀏覽器對CSS都有不同的支持. 比如, IE瀏覽器不明白 “min-width” 命令是設(shè)置一個(gè)最小頁面寬度. 另外一方面你必須對CSS進(jìn)行 “hacks” .

strict(嚴(yán)格的)的意思就是html(or xhtml)必須嚴(yán)格按照標(biāo)準(zhǔn)規(guī)范執(zhí)行.而transitional(過渡的)意思就是默許一些和標(biāo)準(zhǔn)不同的語法.

上面的設(shè)置可能會把事情搞復(fù)雜,比如存在一些”雙關(guān)”模式語法,如果”doctype”定義的不合適或者錯(cuò)誤了,瀏覽器不能解讀,就會進(jìn)入”雙關(guān)”模式,嘗試所謂的”逆向兼容”,類似于IE,瀏覽器會在版本較低時(shí)”偽裝頁面”.

很不幸,大家偶爾也會在”雙關(guān)模式”上發(fā)生錯(cuò)誤,有下面兩種情況:

使用 doctype 聲明 straight (嚴(yán)格) 模式來自W3C, 結(jié)尾標(biāo)識為:

DTD/xhtml1-strict.dtd

除了這是一個(gè)WC3 server的鏈接. 你必須在上面的聲明加上完整的路徑.

* Microsoft set up IE6 so you could have valid pages, but be in quirks mode. This happens by having an “xml prolog” put before the doctype.

<?xml version=”1.0″ encoding=”iso-8859-1″?>

IE6.0的”雙關(guān)模式”非常重要. 本指導(dǎo)手冊都是為IE6+設(shè)計(jì)的, 我們必須確信它運(yùn)行于標(biāo)準(zhǔn)模式下這將讓我們后期的修改工作最小化.XML智能語言幾乎沒有競爭, 我們將關(guān)注JOOMLA的最新版本在此方面的變化.

讓網(wǎng)頁符合標(biāo)準(zhǔn), 當(dāng)你看見”valid xhtml” 標(biāo)記出現(xiàn)并不是意味這復(fù)雜的代碼和難以理解的標(biāo)簽. 它只是告訴你doctype類型, 是的,不用考慮太多,標(biāo)準(zhǔn)化你的站點(diǎn),這取決與你怎樣去做.

一些有用的鏈接:

* http://www.quirksmode.org/css/quirksmode.html
* http://www.alistapart.com/stories/doctype
* http://www.w3.org/QA/2002/04/Web-Quality
* http://forum.joomla.org/index.php/topic,7537.0.html
* http://forum.joomla.org/index.php/topic,6048.0.html

還有其他什么內(nèi)容在index.php里面?

讓我們來看看頭部的結(jié)構(gòu), 我們盡量將其簡化, 但是一個(gè)完成的站點(diǎn)模板index.php中必須包含一些內(nèi)容. 通常header里面是這樣的:

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
<!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” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”
<head>
<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type=”text/javascript”> </script>
<!–http://www.bluerobot.com/web/css/fouc.asp–>
<link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>

這些都是什么意思呢?

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>

這里是判斷文件是否可以被訪問.

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
<!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” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”
<head>

在上面這段. “<?php echo _LANGUAGE; ?>” 設(shè)定了整站的語言.

<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />

設(shè)定使用的字符集, _ISO 是一個(gè)我們用來定義編碼字符集的特定常量.

<?php if ($my->id) { initEditor(); } ?>

當(dāng)一個(gè)用戶登錄你的網(wǎng)站,判斷變量my是否”非零”. 如果一個(gè)注冊用戶登錄,那么一個(gè)默認(rèn)的”所見即所得”編輯器被自動裝載,當(dāng)然是在你的允許設(shè)置下,你也可以事先就裝載編輯器, 但是非法的或者一般游客是沒有必要的. .

<?php mosShowHead(); ?>

Header信息是全局配置的集合. 它包括了下面的標(biāo)簽(默認(rèn)安裝):

* <title>A Complete Guide to Creating a Joomla Template </title>
* <meta name=”description” content=”Installing Joomla, doctype and the blank joomla template” />
* <meta name=”keywords” content=”installing joomla, joomla doctype, blank joomla tempate” />
* <meta name=”Generator” content=”Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved.” />
* <meta name=”robots” content=”index, follow” />
* <link rel=”shortcut icon” xhref=”images/favicon.ico” />

<script type=”text/javascript”> </script>

To stop a bug, that being a flash of un-styled content. Details courtesy of Blue Robot. Note this can be any script file, so if we add one, we can remove this line.

<link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />

這行是模板CSS樣式文件的鏈接. PHP 代碼 <?php echo $cur_template; ?> 返回當(dāng)前模板名稱. 這種用變量傳遞模板名稱的方法很靈活,不用在你手工設(shè)置模板的時(shí)候還要再來修改具體的模板名稱.

你也將看到, 在 temmplate_css.css 文件里, 我們將使用@import 來處理 Netscape 4 訪問時(shí)的異常. 使用老版本的瀏覽器不能打開CSS腳本,如果你要求兼容老版本的瀏覽器, 我們將要有很多CSS HACKS.
一個(gè)空白JOOMLA模板的BODY

這會非常簡單,準(zhǔn)備好了么?

<body>
<!– 1 –><?php echo $mosConfig_sitename;?>
<!– 2 –><?php mospathway()?>
<!– 3 –><?php mosLoadModules(’top’);?>
<!– 4 –><?php mosLoadModules(’left’);?>
<!– 5 –><?php mosMainBody();?>
<!– 6 –><?php mosLoadModules(’right’);?>
<!– 7 –><?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ );?>
</body>
</html>

這里是這樣一個(gè)順序:

1. 站點(diǎn)名稱
2. pathway
3. top module
4. left modules
5. main content
6. right modules
7. 默認(rèn)的footer module

最后是盡可能的實(shí)現(xiàn)”語意相關(guān)”. 考慮到不同的”瀏覽對象”, 瀏覽器;網(wǎng)絡(luò)蜘蛛;或者是一般瀏覽者. 這方面的思考是站點(diǎn)”易接近”的基礎(chǔ).

沒有什么比”語意相關(guān)”更重要. 如果設(shè)計(jì)者隨意的定義自由的模塊, 你會有很多麻煩. 關(guān)于CMS站點(diǎn)的重要考慮, 模板是管理內(nèi)容布局的不二選擇. 這也是很多設(shè)計(jì)者努力讓其站點(diǎn)”有效化”的原因.

轉(zhuǎn)自http://www.gzit8.com/show/4.html

總結(jié)

以上是生活随笔為你收集整理的Joomla模板制作教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。