11. 把圖片製成網頁

一、建立佈景目錄
1.建立一個資料夾，如xxx_themes_01，用來放置所有佈景相關檔案。
2.在佈景資料夾下建立images，用來放置圖檔。

二、先將背景弄出來
1.把畫面縮到50%，然後選取所有物件，拉出視窗外成為新圖檔。
2.原底圖可另存新檔到xxx_themes_01/images/bg.jpg。
3.若想縮小底圖，可選「魔術棒工具」，設成 ，然後在白色區域點一下，於選取區按右鍵→改選未選取部份，然後將選取部份拉出成新檔，儲存即可。

三、製作theme.html（XOOPS佈景主架構檔）
1.若XOOPS為UTF8，theme.html檔亦需用UTF8編碼。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
2.製作CSS檔，如：style.css，並於佈景檔中引入：
<link rel="stylesheet" type="text/css" media="all"  href="style.css" />

四、切割主畫面
1.為讓內容可以和背景融合，我們需要透明背景。開新圖檔，透明背景，大小選「使用中影像」，把剛剛拉出來的新圖檔，用 全選並複製所有物件，然後到透明圖貼上。
2.用剪裁工具，裁下標題，以下均用png格式存檔到xxx_themes_01/images/。
3.接著復原剪裁，把標題部份物件都先刪掉，並裁出主內容區的背景圖。
4.一樣復原剪裁，最後裁出頁尾部份。

五、拼湊主畫面成網頁

1.利用1x3表格，將圖檔合併起來。我們替表格及儲存格命名，以進行CSS設定。
<table cellspacing="0" cellpadding="0" id="content_all" >
<tr><td id="content_head"></td></tr>
<tr><td id="content_main"></td></tr>
<tr><td id="content_foot"></td></tr></table>
2.原則上，我們會把剛做的三張圖都當作背景放入儲存格中。除了中間部份，頭尾部份的圖都是不重複，並且要根據圖檔高度指定好儲存格高度。

六、製作各個區塊呈現區
1.XOOPS2.3共有八個區塊呈現區，您可自訂之。請在content_main插入4x5或3x5的表格，並未每個儲存格命名。
<table border=1 align="center" id="show_zone">
<tr><td rowspan=5 id='blocks_l'>左</td><td id='blocks_ucl'>上中左</td><td id='blocks_ucr'>上中右</td></tr>
<tr><td colspan=2 id='blocks_uc'>上中</td></tr>
<tr><td id='blocks_dcl'>下中左</td><td id='blocks_dcr'>下中右</td></tr>
<tr><td colspan=2 id='blocks_dc'>下中</td></tr>
<tr><td colspan=2 id='content'>主內容區</td></tr>
</table>
2.接著，就請替這些區域來設定CSS吧！