Joomla模板制作教程
?
本指導手冊包括下面的章節:
* 什么是JOOMLA模板? 解釋怎樣執行JOOMLA模板和比較沒有內容的普通模板和CMS(內容管理系統)的模板有什么區別.
* 本地編輯模板的過程.主要解釋設計的過程與靜態的web頁面有什么不同
* W3C標準和無表單設計.主要討論在JOOMLA中進行無table(表單)設計和W3C標準有什么關系.
* JOOMLA模板的組成.JOOMLA的模板文件組成和模板中那些過程被執行.
* 使用cascading style sheets (CSS)布局.主要討論如何使用CSS布局來取代table布局.
* 默認JOOMLA樣式表.介紹一些基本的JOOMLA的CSS應用.怎么調用強大的JOOMLA內核.
* Modules組件.怎樣布置你的組件和一些技巧.
* Menus菜單.使用CSS建立一些簡單的類似于JS編出來的菜單.
* Hiding Columns(隱藏列表).怎樣控制Columns和隱藏一些沒有內容的Columns.
* 總結
* 附錄.一些有用的鏈接和資源.
?
第一節:模板組成
為了理解JOOMLA模板的目錄結構, 我們將著眼于一個空白的JOOMLA模板. 不同的文件和文件夾組成了JOOMLA的一個具體模板. 這些文件必須被放置在 /templates 的JOOMLA安裝目錄下. 比如,我們安裝了兩個模板,我們的目錄結構看上去就是這樣的:
/templates/JS_Smoothportal
/templates/JS_Synergy
大家注意模板的名稱必須就是 /templates 目錄下文件夾的名稱,在這個例子中就是 JS_Smoothportal 和 JS_Synergy. 很顯然,這些名字最好是能反應出模板的風格或者出處.
在一個具體模板的目錄下,有以下關鍵文件:
/JS_Smoothportal/templateDetails.xml
/JS_Smoothportal/index.php
這兩個文件的文件名必須定義的和JOOMLA核心腳本預定義的完全相同.
* templateDetails.xml
(注意字母”D”大寫) 一個XML格式的文件告訴JOOMLA核心在使用當前模板時的文件清單. 這里也描述了作者;文件名稱;copyright信息;甚至包括模板使用的圖片文件的清單. 最后一次使用該文件也就是我們在管理后臺對該模板進行安裝的時候.
* index.php
這個文件也是最重要的文件. 它對整站進行布局并且告訴JOOMLA內核何處放置組件和模塊.它往往是一種PHP與(X)HTML的”混合體”.
絕大多數的模板也使用了一些”附加文件”. 一般會像下面的定義(盡管JOOMLA內核沒有要求):
/JS_Smoothportal/template_thumbnail.png
/JS_Smoothportal/css/template_css.css
/JS_Smoothportal/images/ logo.png
* template_thumbnail.png
當前模板的瀏覽器截圖(通常使用140*90像素尺寸). 安裝模板完畢以后,這張圖片會以”縮略圖”的形式在后臺模板管理器中展示.
* css/template_css.css
模板的CSS文件. 文件夾的路徑是可以選擇的,但是你必須對它進行指定. 注意文件名和路徑是在index.php中指定的. 你可以取一個你喜歡的名字. 通常文件名反映使用狀況, 我們在后面闡述這種命名方法在多個CSS文件使用時的優點.
* images/logo.png
在模板里面有很多圖片文件. 一般的我們把這些圖片歸理至一個文件夾,而這個例子中我們只有一個文件logo.png
你可以用管理后臺安裝zip格式的上傳好的文件,也可以手動的在服務器上copy文件,但是你必須把他們放置在 yoursite.com/templates目錄下.
templateDetails.xml格式
templateDetails.xml 必須包括模板使用的所有文件. 它也包括了作者和版權信息等內容. 在后臺的模板管理器這些信息將會被展示,下面是一個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 這個 E-mail 地址已經被防止灌水惡意程序保護，您需要激活 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
這個命令參數是安裝程式的指令. 參數 type=”template” 告訴安裝程序我們安裝的是一個模板
* name:
定義你模板的名稱. 這個名稱會在安裝模板的時候以目錄夾名的形式被安裝在模板目錄下. 因此這個name不能包括文件系統不能處理的字符, 比如空格. 如果是手動安裝, 你就必須在JOOMLA模板目錄下手動創建一個與這個name一致的目錄夾.
* creationDate:
模板建立的日期. 自由填寫比如你可以填寫 May 2005, 08-June-1978, 01/01/2004 etc.
* author:
這個模板設計者的名稱 - 比如你的名字
* copyright:
版權信息的內容. 這里 Licensing Primer for Developers & Designers 可以找到JOOMLA相關的內容.
* authorEmail:
作者郵件信息Email.
* authorURL:
作者站點
* version:
模板版本
* files:
“files” 部分聲明的是這個模板包括的PHP文件或者縮略圖文件. 每個文件被列出在<filename>與</filename>之間,包括完整的路徑. 它也可以包括一些附加文件, 這里的例子我們看到的是一個次模板使用的一個JS文件.
* images:
所有的圖片文件 在這個部分被列出. 所有圖片文件在你模板目錄下的完整路徑將包含在<filename>與</filename>之間. 比如: 如果你的模板目錄是’YourTemplate’,所有的圖片文件在’images’下,它是在’YourTemplate’下的目錄,那么有效的路徑就是:<filename>images/my_image.jpg</filename>
* css:
樣式表被顯示與此部分. 同樣也在<filename>與</filename>之間定義,這個定義對于多樣式表將非常重要,我們將在下面的內容里討論.
The index.php
究竟是那些內容在index.php文件中呢?它應該是一個關于網站次模板的布局外觀的(X)HTML和PHP的混合體
首先我們看到是下面一段有效模板的文檔定義,文檔類型的表述在這段頂部定義,這段代碼在所有的頁面文件首部都會出現,在例子模板的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; ?>”>
一個具體頁面要被瀏覽器呈現,文檔類型描述 “DOCTYPE”是最基礎的部分,特別的,如何讓瀏覽器解讀CSS. 為了給你一個直觀的解釋alistapart.com上面有這樣一段:
[W3C關于”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.?”(他媽的這句真拗口,字面意思:小丑寫給小丑.我說的小丑,不是說像你我一樣專業的網站,我是指一些除你我以外類似一個老太太收到了一封電子郵件—–anthax)
總 之,有幾種文檔類型你可以使用. 首先, doctype定義告訴瀏覽器如何解讀頁面.這里單詞”strict”(嚴格的) and “transitional”(過度的)開始獲取浮動范圍(float:left and float:right 通常). 實質上,自從WWW誕生以來,不同瀏覽器對CSS都有不同的支持. 比如, IE瀏覽器不明白 “min-width” 命令是設置一個最小頁面寬度. 另外一方面你必須對CSS進行 “hacks” .
strict(嚴格的)的意思就是html(or xhtml)必須嚴格按照標準規范執行.而transitional(過渡的)意思就是默許一些和標準不同的語法.
上面的設置可能會把事情搞復雜,比如存在一些”雙關”模式語法,如果”doctype”定義的不合適或者錯誤了,瀏覽器不能解讀,就會進入”雙關”模式,嘗試所謂的”逆向兼容”,類似于IE,瀏覽器會在版本較低時”偽裝頁面”.
很不幸,大家偶爾也會在”雙關模式”上發生錯誤,有下面兩種情況:
使用 doctype 聲明 straight (嚴格) 模式來自W3C, 結尾標識為:
DTD/xhtml1-strict.dtd
除了這是一個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的”雙關模式”非常重要. 本指導手冊都是為IE6+設計的, 我們必須確信它運行于標準模式下這將讓我們后期的修改工作最小化.XML智能語言幾乎沒有競爭, 我們將關注JOOMLA的最新版本在此方面的變化.
讓網頁符合標準, 當你看見”valid xhtml” 標記出現并不是意味這復雜的代碼和難以理解的標簽. 它只是告訴你doctype類型, 是的,不用考慮太多,標準化你的站點,這取決與你怎樣去做.
一些有用的鏈接:
* 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
還有其他什么內容在index.php里面?
讓我們來看看頭部的結構, 我們盡量將其簡化, 但是一個完成的站點模板index.php中必須包含一些內容. 通常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; ?>” 設定了整站的語言.
<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />
設定使用的字符集, _ISO 是一個我們用來定義編碼字符集的特定常量.
<?php if ($my->id) { initEditor(); } ?>
當一個用戶登錄你的網站,判斷變量my是否”非零”. 如果一個注冊用戶登錄,那么一個默認的”所見即所得”編輯器被自動裝載,當然是在你的允許設置下,你也可以事先就裝載編輯器, 但是非法的或者一般游客是沒有必要的. .
<?php mosShowHead(); ?>
Header信息是全局配置的集合. 它包括了下面的標簽(默認安裝):
* <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; ?> 返回當前模板名稱. 這種用變量傳遞模板名稱的方法很靈活,不用在你手工設置模板的時候還要再來修改具體的模板名稱.
你也將看到, 在 temmplate_css.css 文件里, 我們將使用@import 來處理 Netscape 4 訪問時的異常. 使用老版本的瀏覽器不能打開CSS腳本,如果你要求兼容老版本的瀏覽器, 我們將要有很多CSS HACKS.
一個空白JOOMLA模板的BODY
這會非常簡單,準備好了么?
<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>
這里是這樣一個順序:
1. 站點名稱
2. pathway
3. top module
4. left modules
5. main content
6. right modules
7. 默認的footer module
最后是盡可能的實現”語意相關”. 考慮到不同的”瀏覽對象”, 瀏覽器;網絡蜘蛛;或者是一般瀏覽者. 這方面的思考是站點”易接近”的基礎.
沒有什么比”語意相關”更重要. 如果設計者隨意的定義自由的模塊, 你會有很多麻煩. 關于CMS站點的重要考慮, 模板是管理內容布局的不二選擇. 這也是很多設計者努力讓其站點”有效化”的原因.
轉自http://www.gzit8.com/show/4.html
總結
以上是生活随笔為你收集整理的Joomla模板制作教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python从零写一个采集器:获取网页信
- 下一篇： requests爬虎妞