XOOPS佈景製作
精美圖示網站:http://www.vistaicons.com/
搜尋圖示網站:http://www.iconfinder.com/
搜尋圖示網站:http://findicons.com/
PhotoImpact 12 試用版下載(用來繪製版型)
DreamWeaver 8 試用版下載(用來製作樣板)
1. 製作XOOPS的佈景流程:
(1) 「後台→一般設定→基本參數設定 」將「從/themes/yourtheme/ templates更新模組的樣板文件 」選「是」。
(2) 先設計好一個完整的網頁→把網頁變成XOOPS樣板→套用後進行CSS微調。
(3) 新增一組「樣板組」複本,開始修改各區塊或模組外觀,以配合佈景風格。
2. 建立一個資料夾,如theme2010,用來放置所有佈景相關檔案。
(1) 在佈景資料夾下建立img,用來放置圖檔。
(2) 建立theme.html
a. 開啟新檔案並存為theme.html,編碼需符合網站編碼,如:UTF-8
b. CSS檔請獨立出來,並存至css目錄下,例如css/style.css。
3. 設計所需圖檔
4. 規劃theme.html基本架構
(1) XOOPS2.3以後的佈景共有八個區塊放置區(2.2之前僅有5個放置區):
a. 「左區域」:放在版面左邊的區塊其顯示之位置。
b. 「上中區域」:放在版面上方中間的區塊其顯示之位置。
c. 「上中左區域」:放在版面上方中間左邊的區塊其顯示位置。
d. 「上中右區域」:放在版面上方中間右邊的區塊其顯示位置。
e. 「下中區域」:放在版面下方中間的區塊其顯示之位置。
f. 「下中左區域」:放在版面下方中間左邊的區塊其顯示位置。
g. 「下中右區域」:放在版面下方中間右邊的區塊其顯示位置。
h. 「右區域」:放在版面右邊的區塊其顯示之位置。
i. 「主要內容區」:秀出某模組的主畫面。
j. 「頁尾區」:此區會出現XOOPS的版權宣告。
k. 「廣告區」:非必須。
(2) 以上所有區域並沒有規定一定非得放在哪裡不可,您可自行決定擺放的位置,或者欲出現的欄位數。
5. 建立theme.html