線上書籍

Home

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

aa_1.png