2. 用網頁編輯器製作佈景基本網頁

精美圖示網站：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