joomla模板开发
在這篇文章中，我們將制作一個(gè)具體的JOOMLA模板，并且我們摒棄傳統(tǒng)的table的方式，而采用div+css的方式建立Joomla!模板，這將更加符合w3c組織的標(biāo)準(zhǔn)，同時(shí)有利于搜索引擎收錄。
在這篇文章中，我們主要涉及到以下這些方面：
? 什么是JOOMLA模板??
本地編輯模板的過程.?
W3C標(biāo)準(zhǔn)和無表單設(shè)計(jì).?
JOOMLA模板的組成.
使用cascading style sheets (CSS)布局.
怎樣布置你的組件和一些技巧.
Menus菜單.使用CSS建立一些簡單的類似于JS編出來的菜單.?
怎樣控制Columns和隱藏一些沒有內(nèi)容的Columns.
什么是JOOMLA的模板? 通過Joomla!模板你能做什么？
JOOMLA模板是整個(gè)網(wǎng)站的外觀基礎(chǔ)設(shè)計(jì),JOOMLA模板負(fù)責(zé)傳遞JOOMLA核心數(shù)據(jù)的展示. 下面我們來看一個(gè)例子:
這張圖 B 標(biāo)簽展示一個(gè)了全新JOOMLA安裝后的界面.但當(dāng)你插入具體內(nèi)容的時(shí)候模板被賦予了一種樣式,這個(gè)樣式繼承了JOOMLA模板中定義的鏈接樣式,菜單, 導(dǎo)航,文本尺寸,顏色等內(nèi)容.使用類似JOOMLA這樣的CMS(內(nèi)容管理器)的模板能夠?qū)崿F(xiàn)完全的與內(nèi)容分離。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
老外的原文實(shí)在太冗長了，其實(shí)原文的第三章就是說的工具選擇，dreamweaver+photoshop，等等，我估計(jì)咱們就沒老外那么錢多，還是哪里能省點(diǎn)就省點(diǎn)吧。
第四章主要是說模板開發(fā)的原則：最主要就是采用css+div ，地球人都知道啦，現(xiàn)在哪個(gè)大的站點(diǎn)不是css+div的，好處么做個(gè)人站點(diǎn)的基本都知道。另外就是一些xhtml的標(biāo)簽要語義相關(guān)等的要求，這里不贅述了。
?
我們來看看這張圖，說的很清晰，什么是好的網(wǎng)站？一個(gè)好的網(wǎng)站離不開三個(gè)要素，一是用戶體驗(yàn)，二是可訪問性,三是SEO，三者能有效結(jié)合才是一個(gè)好的站點(diǎn)。所以在Joomla! 模板開發(fā)上要遵守的基本原則其實(shí)就是這三個(gè)原則，這也是w3c的標(biāo)準(zhǔn)。
下一篇文章，我們來重點(diǎn)說說Joomla! 1.5模板的重點(diǎn)要素和基本開發(fā)過程。
我們來看看這張圖，說的很清晰，什么是好的網(wǎng)站？一個(gè)好的網(wǎng)站離不開三個(gè)要素，一是用戶體驗(yàn)，二是可訪問性,三是SEO，三者能有效結(jié)合才是一個(gè)好的站點(diǎn)。所以在Joomla! 模板開發(fā)上要遵守的基本原則其實(shí)就是這三個(gè)原則，這也是w3c的標(biāo)準(zhǔn)。
下一篇文章，我們來重點(diǎn)說說Joomla! 1.5模板的重點(diǎn)要素和基本開發(fā)過程。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
模板的構(gòu)成
每個(gè)模板都包含一系列的文件和圖片，放在Joomla! 系統(tǒng)的 /templates/目錄下，如下所示我們安裝了兩個(gè)模板，一是element,一是voodoo，要注意的是模板的名稱與目錄的名稱一致。
/templates/element/templates/voodo
在一個(gè)模板目錄中，必須有關(guān)鍵文件：
/element/templateDetails.xml/element/index.php
這兩個(gè)文件的名稱和位置要完全遵守規(guī)則，以便Joomla!系統(tǒng)調(diào)用。
templateDetails.xml這是XML格式文件，主要用來通知Joomla!系統(tǒng)加載這個(gè)模板的時(shí)候有那些文件，同時(shí)也描述了作者、版權(quán)信息等等;還有模板使用的圖片文件的清單. 同時(shí)這個(gè)文件也是安裝文件.
index.php
這是最重要的文件.它通知JOOMLA系統(tǒng)如何布局組件和模塊.它是一種PHP與(X)HTML的"混合體".大多數(shù)模板還使用其他的一些文件，通常以如下方式命名和放置：
/element/css/template_css.css
/element/images/logo.png
接下來，讓我們注意看看各個(gè)文件：
/element/template_thumbnail.png
當(dāng)前模板的瀏覽器截圖(通常使用140*90像素尺寸).安裝模板完畢以后,這張圖片會以"縮略圖"的形式在后臺模板管理器中展示.
/element/css/template_css.css
模板的CSS文件
/element/images/logo.png
通常模板開發(fā)人員會將土坯昂都放在images目錄下，這里我們只有一個(gè)文件logo.png。
templateDetails.xml格式
templateDetails.xml 必須包括模板使用的所有文件. 它也包括了作者和版權(quán)信息等內(nèi)容. 在后臺的模板管理器這些信息將會被展示,下面是一個(gè)XML文件的例子:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<version>1.0</version>
<creationDate>December 06</creationDate>
<author>Barrie North</author>
<authorEmail>
type="text/javascript" language="JavaScript">
/n compassdesigns@gmail.comtype="text/javascript" language="JavaScript">
</authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<copyright>GPL</copyright>
<description><![CDATA[three column template]]></description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somefile.js</filename>
<filename>images/threecol-1.jpg</filename>
<filename>images/threecol-2.jpg</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<params>
<param name="showComponent" type="radio" default="1" label="Show Component" description="Show/Hide the component output">
<option value="0">No</option>
<option value="1">Yes</option>
</param>
</params>
</install>
讓我們來解釋這些行的意義:
<install version="1.5" type="template">
XML文檔是后臺installer的指示， 參數(shù) type="template" 告訴安裝程序安裝的是一個(gè)模板。
<name>TemplateTutorial15</name>
模板的名稱，因?yàn)槊Q用來創(chuàng)建目錄，所以不能有不符合目錄要求的字符。
<creationDate>December 06</creationDate>
模板建立的日期.
<author>Barrie North</author>
模板開發(fā)人員
<copyright>GPL</copyright>
版權(quán)信息
<authorEmail> type="text/javascript" language="JavaScript"> /n compassdesigns@gmail.com type="text/javascript" language="JavaScript"> </authorEmail>
開發(fā)人員的郵件地址
<authorUrl>www.compassdesigns.net</authorUrl>
作者站點(diǎn)
<version>1.0</version>
版本信息
<files>
這部分聲明模板包括的PHP文件和圖片文件. 每個(gè)文件被列出在<filename>與</filename>之間。
index.php
index.php是(X)HTML和PHP的混合體，它決定了網(wǎng)站的外觀呈現(xiàn)。
我們首先來看頁面頭部的DOCTYPE定義，DOCTYPE決定了瀏覽器如何頁面，特別是如何解釋CSS。
<!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; ?>" dir="<?php echo $this->direction; ?>" >
具體的DOCTYPE選擇這里不翻譯了，請看docs.joomla.org上的：
http://docs.joomla.org/Recommended_DocTypes
http://docs.joomla.org/References_about_DocTypes
?讀取我們設(shè)置的語言環(huán)境。
<jdoc:include type="head" />
這句話引入了頁面的header部分。header部分通常代碼如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Joomla! 1.5 template tutorial </title>
<link href="/index.php?format=feed&type=rss" _fcksavedurl=""/index.php?format=feed&type=rss"" mce_href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" mce_href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/templates/ja_purity/favicon.ico" mce_href="/templates/ja_purity/favicon.ico" rel="shortcut icon" type="image/x-icon" />
這里包含了幾個(gè)meta標(biāo)簽。
<?php echo $this->template;?>/css/template_css.css 這句話引入了模板CSS文件。
一個(gè)空白JOOMLA模板
<body><?php echo $mainframe->getCfg(’sitename’);?>
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
</body>
</html>
盡管這個(gè)模板完成了，可是看起來并不是令人激動。這個(gè)模板定義了如下部分：
站點(diǎn)名稱
頂部區(qū)域
左邊區(qū)域
正文部分（組件）
右部區(qū)域
現(xiàn)在模板看來如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
現(xiàn)在我們創(chuàng)建三欄式的JOOMLA模板，而且這個(gè)三欄布局彈性的。頁面寬度一直是一個(gè)問題,大約17%的瀏覽者使用800*600的分辨率. 79%的人使用1024*768以上或者更高的分辨率 ，采用彈性布局可以避免頁面在1024分辨率下顯得過窄，同時(shí)在更小的分辨率先也能正常瀏覽。
通常,設(shè)計(jì)者喜歡用table來進(jìn)行布局,表格可以方便的使用"百分比"模式進(jìn)行欄寬度設(shè)置,但是這種方法有下列弊端:
與CSS布局相比table布局有很多"額外代碼".
搜索引擎也不易接受.
代碼通常是CSS布局的雙倍尺寸
還有圖像占位 "spacer gifs"在使用table時(shí)也是問題.
采用table布局不容易維護(hù)。
即使一些大的網(wǎng)站也存在tables布局的問題，比如disney.co.uk website.
現(xiàn)在我們來開始CSS布局吧，如果你是CSS的初學(xué)者你最好看下 "beginners guide to CSS". 這里推薦:
Kevin Hale’s - An Overview of Current CSS Layout Techniques
htmldog’s CSS Beginner’s Guide
Mulder’s Stylesheets Tutorial
yourhtmlsource.com
來看看template_css.css,基本上全部的CSS代碼都集中在這個(gè)文件中，而所有的內(nèi)容都防止在#wrap的div內(nèi)。大約占據(jù)視覺寬度的80%。我們要實(shí)現(xiàn)的效果如下圖：
?
小貼士：
CSS 縮寫
通常有可能對某些CSS代碼進(jìn)行 "縮寫"，從而減少代碼量. 我們來看一個(gè)關(guān)于 padding 和 margin 的例子
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
可以這樣寫:
margin: 5px 10px;
每種樣式定義幾乎都可以"縮寫". 當(dāng)你完成樣式表, 用"縮寫"去替換掉比較復(fù)雜的書寫格式,比如標(biāo)準(zhǔn)格式關(guān)于font:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
這里有個(gè)例子:
font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;
變成這樣:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;
http://home.no.net/
這里是相關(guān)資料的鏈接 An Introduction to CSS shorthand properties 關(guān)于語法.
左/中/右三欄都被給出了它們自己的元素. 每部分都向左靠并形成"100%"屏幕寬度. clear:both 頁腳的div跨越三欄,實(shí)現(xiàn)100%寬度.
為了使布局美觀, 讓每部分內(nèi)容周圍有一定的空間, 我們需要加入一些"欄空間", 被稱為"gutter". 很不幸,這里會發(fā)生一個(gè)問題. 由于IE沒有正確的解析border(box框架，有興趣的可以看看相關(guān)的書籍，譯者)，我們這里采用在區(qū)域之間再加上一個(gè)div來解決區(qū)域之間的空隙問 題. 下面是代碼：
<body><div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg(’sitename’);?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’left’)) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’right’)) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules(’footer’)) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>
添加inside類:
.inside {padding:10px;}
這種簡單的布局方式是我們使用CSS定義JOOMLA模板的好方法. 這樣的方式帶來兩個(gè)優(yōu)點(diǎn), 代碼短和容易控制. 然而,這并不是所謂的合理的代碼順序. 我們必須使用一些類似于 "nested float"的高級CSS技巧.合理代碼順序有助于搜索引起收錄，而目前的布局顯然重要的組件的內(nèi)容會最后出現(xiàn)。雖然這優(yōu)點(diǎn)復(fù) 雜，compassdesigns.com有一個(gè)文件來說明如何創(chuàng)建這樣的文件，這里不再詳細(xì)說明了。
默認(rèn)的Joomla CSS
到目前為止，我們的CSS都是關(guān)于布局的，這樣的頁面看起來是一點(diǎn)也不生動漂亮，接下來，我們加入一個(gè)格式CSS代碼。先來添加兩個(gè)定義，代碼如下：
body {text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
width: auto !important; /*IE6 hack*/
width:960px; /*IE6 hack*/
margin:0 auto; /*center hack*/
text-align:left; /*center hack*/
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden; }
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
#sidebar-2 {float:left;width:20%; overflow:hidden;}
#footer {clear:both;}
.inside {padding:10px;}
首先我們使用一些小技巧，保持頁面居中。這主要是由于IE6,IE7的問題。（具體還是參考CSS文檔吧，譯者）
小貼士：
我們定義column的寬度是百分比，而他們的容器div是固定寬度的，這可能看起來很奇怪，其實(shí)這是有好處的，一是更加靈活的彈性布局，如果我們要改變寬度，我們僅僅需要改動一個(gè)數(shù)值。
接下來的CSS我們做了一些全局性的設(shè)置，代碼如下：
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.1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3em;
}
#header {
background:#0099FF;
}
#footer {
background:#0099FF;
}
#main-body {
background: #CC0000;
}
#sidebar-2 {
background:#009933;
}
#content {
background: #999999;
}
#sidebar {
background: #009933;
}
每元素都被設(shè)定為"0"margin 和 "0" padding ,然后所有的塊被定義了底部邊距. 你可以在這里找到關(guān)于全局定義的相關(guān)內(nèi)容clagnut and left-justified.
字體大小被設(shè)置成76.1%. 這也是為了在不同瀏覽器訪問時(shí)自適應(yīng)屏幕分辨率. 字體的單位都設(shè)置成 em. 字高 line-height:1.3em 設(shè)定更便于閱讀. 這意味著頁面可以適應(yīng)不同訪問者的不同頁面分辨率. 這里有詳細(xì)的討論:
An experiment in typography at The Noodle Incident (Owen Briggs)
最后我們加入背景顏色設(shè)定,得到下圖的顯示效果.
?
請注意邊欄并沒有達(dá)到它們的底部. 我們看到左右欄各有一個(gè)紅色和白色的空白區(qū)域. 如果我們設(shè)定整個(gè)模板的背景色是白色. 如果你想要三欄的背景色都填滿，那么要使用背景圖片垂直堆砌。 這種技術(shù)被稱為"Faux Columns" ，Douglas Bowman and Eric Meyer創(chuàng)造的.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
盡管Joomla!可以通過模板重構(gòu)核心輸出的任何內(nèi)容，然后渲染器仍然可能在內(nèi)容中輸出部分table,這些CSS對于模板開發(fā)者來說也是相當(dāng)重要的。根據(jù)一些社區(qū)的研究，這些CSS標(biāo)記清單如下：
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen??
.contenttoc??
.createdate??
.fase4rdf??
.footer??
.frontpageheader??
.inputbox??
.latestnews??
.mainlevel??
.message??
.modifydate??
.module??
.moduletable??
.mostread??
.newsfeed??
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper
關(guān)于這張清單請注意.
我們看到的很多設(shè)計(jì)有其自定義的CSS布局設(shè)計(jì). 一些定義的是有優(yōu)先順序的.
比如:
a {color:blue;} a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}
鏈接的顏色和 .contentheading 的顏色將是紅色的, 定義是特殊的(as .contentheading 是包含在一個(gè) <div> 里面的)
在我們的模板例子中, 你常常會看到一些特殊的規(guī)則. 比如一個(gè)class 出現(xiàn)于 table. 下面是例子:
.moduletable table.moduletable
.moduletable 是一個(gè)包含組件的<div>的名字. table.moduletable 將應(yīng)用一個(gè)樣式到 table 類型是 ="moduletable" on it.
.moduletable 將應(yīng)用自己的樣式而不考慮 class 里面的定義.
a.contentpagetitle:link .contentpagetitle a:link
a.contentpagetitle:將應(yīng)用樣式只要有 a .contentpagetitle 標(biāo)記的class 鏈接上.
.contentpagetitle a:link 會應(yīng)用所有的INSIDE .contentpagetitle 鏈接.
這并不難理解, 這常常使絕大多數(shù)的樣式應(yīng)用比較容易,你也不希望看到有很多的特例.
一些有價(jià)值的鏈接:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
此刻我們的模板使用了很多 table, 實(shí)際上12個(gè) 這會導(dǎo)致頁面訪問慢. 為了減少 table 我們在使用 jdoc:include調(diào)用模塊的時(shí)候要使用 $style參數(shù)。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
在實(shí)際閱讀本文之前，建議閱讀一些關(guān)于Joomla!模板的基礎(chǔ)知識，請參考：http://www.maycode.com/index.php/hotspot/28-joomla/475-joomla-template.html ，如果在閱讀中遇到問題，也請現(xiàn)在上述文章中尋找答案。
關(guān)于Jdoc的相關(guān)資源，請參考http://www.maycode.com/index.php/hotspot/28-joomla/286-joomla-template.html
在index.php中調(diào)用模塊的語法如下：
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
style是可選的，可選值定義在modules/templates/modules.php（我的版本中在templates/system /html/modules.php，也許原文有誤，譯者）中。style的可取值有 table,horz,xhtml，rounded,none,outline等，具體的表現(xiàn)形式請參考：http://www.maycode.com/index.php/hotspot/28-joomla/333-joomla-template.html 。
（原文中給出了這幾種風(fēng)格的源代碼，這里就省略了，譯者）
你可以看到style取值為xhtml或者rounded時(shí)候，源代碼更加簡潔，更適合CSS，我們也推薦這兩種，而且不是必要的時(shí)候不要使用table和horz.
打開modules.php文件，你可以看到所有的風(fēng)格，你設(shè)置可以自由的添加自己的風(fēng)格，以下的代碼是xhtml的實(shí)現(xiàn)：
function modChrome_xhtml($module, &$params, &$attribs){
if (!empty ($module->content)) : ?>
<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>
<?php endif;
}
你可以自由的改變這個(gè)風(fēng)格。（不過如果你想添加自己的風(fēng)格，應(yīng)該參考http://docs.joomla.org/Applying_custom_module_chrome ，直接修改核心代碼總是不爽的，譯者）
對于我們的模板制作，我們選擇xhtml風(fēng)格。全部代碼如下：
<body><div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg(’sitename’);?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’left’)) : ?>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">
<div class="inside">
<div id="pathway">
<jdoc:include type="module" name="breadcrumbs" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’right’)) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules(’footer’)) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="raw" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>
注意，我們不能在<jdoc:include type="component"> 中設(shè)置style，因?yàn)槟K并不支持。
將模塊設(shè)置為xhtml風(fēng)格，可以把table的數(shù)量減少為14個(gè)，接下來我們添加一個(gè)foemat控制的CSS.
同樣還將添加 <H1> 標(biāo)簽，對于SEO的非常有幫助的。現(xiàn)在我們的CSS代碼看起來如下：
/*typography*/ * {margin:0;
padding:0;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 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;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#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*/ }
現(xiàn)在頁面的效果看起來如下：
這一章中我們主要說了如何設(shè)置模塊，下一章我們來看看菜單處理。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
前文我們曾經(jīng)說過，頁面中table可以減少到12個(gè)，現(xiàn)在頁面中還有14個(gè)table,接下來我們來處理菜單，從而達(dá)到減少table的目的，剩下的12個(gè)table，如果不改變核心代碼的話，是無法減少的。
我們要將菜單的風(fēng)格設(shè)為 flat。（要在管理員界面的module manager中，對mainmenu模塊修改，通常設(shè)置為flat,譯者），現(xiàn)在頁面中就只有12個(gè)table了。
接下來我們修改關(guān)于菜單的格式控制，添加代碼如下：
/*Menu Styling*/ .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;
}
現(xiàn)在整個(gè)頁面的效果如下圖：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
?
到目前為止，我們的模板采用三列結(jié)構(gòu)布局，而不管這一列中是否有內(nèi)容。對于一個(gè)CMS網(wǎng)站來說是沒有什么益處的，因?yàn)檫@部分內(nèi)容不發(fā)生變化。但是因?yàn)樾枰芾韱T能夠改變模塊的位置，所有我們需要能夠自動關(guān)閉或者折疊起一列來。這就是列隱藏。
在這篇文章中http://www.maycode.com/index.php/hotspot/28-joomla/406-joomla-template.html 我們提到了Joomla! 1.5模板的新特征，請參考。在Joomla! 1.5的模板開發(fā)中，我們采用countModules來判斷是夠某列有模塊需要顯示。
通常的代碼如下：
<?php if($this->countModules(’left’)) : ?>do something
<?php else : ?>
do something
<?php endif; ?>
countModules支持關(guān)系運(yùn)算以及部分?jǐn)?shù)學(xué)運(yùn)算，以下是例子：
countModules(’left’) //如果left有模塊顯示，則返回1
countModules(’left and right’) //left和right都有模塊顯示，返回1
countModules(’left or right’) //left或right之一模塊顯示，返回1
countModules(’left + right’) //left和right都有模塊顯示，返回1
使用這個(gè)函數(shù)，我們就可以實(shí)現(xiàn)隱藏不需要的列。
通常有集中方式來實(shí)現(xiàn)，我們這里在頁面的頭部進(jìn)行計(jì)算，代碼如下：
<?phpif($this->countModules(’left and right’) == 0) $contentwidth = "100";
if($this->countModules(’left or right’) == 1) $contentwidth = "80";
if($this->countModules(’left and right’) == 1) $contentwidth = "60";
?>
這樣，如果左右都沒有模塊顯示，那么我們采用100%列寬，如果左或者右右一列顯示，那么我們采用80%列寬，如果都有，那么我們采用60%列寬。
同時(shí)，我們把內(nèi)容部分改為：
<div id="content<?php echo $contentwidth; ?>">
這樣我們就選擇了合適的列寬。
同時(shí)，我們在template_css.css文件中添加：
#content60 {float:left;width:60%;overflow:hidden;}#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
隱藏空的模塊：
同樣我們也需要隱藏空的模塊，示例代碼如下：
<?php if($this->countModules(’left’)) : ?><div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>
這樣，如果左邊如果沒有模塊，那么 id=sidebar 自然也不會出現(xiàn)了。
至此，我們就完成了一個(gè)基本模板的開發(fā)過程，接下來我們給出一個(gè)真是模板的開發(fā)過程。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
到目前為止，我們創(chuàng)建一個(gè)簡單的基本模板，這個(gè)模板的創(chuàng)建過程體現(xiàn)了實(shí)際模板的整個(gè)創(chuàng)建過程的所有環(huán)節(jié)。
總結(jié)
以上是生活随笔為你收集整理的joomla模板开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SuperMap GIS 倾斜摄影数据优
- 下一篇： Pushmail让邮件随身飞