Tad 教材網 - 線上書籍

:::

\[972\]CSS打造XOOPS佈景
===================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/bluefish/11.zip)

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

**二、先將背景弄出來**  
 1.把畫面縮到50%，然後選取所有物件，拉出視窗外成為新圖檔。  
 2.原底圖可另存新檔到xxx\_themes\_01/images/bg.jpg。  
 3.若想縮小底圖，可選「魔術棒工具」，設成![](http://tad0616.net/uploads/tad_book3/image/bluefish/tad014.png) ，然後在白色區域點一下，於選取區按右鍵→改選未選取部份，然後將選取部份拉出成新檔，儲存即可。

**三、製作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.為讓內容可以和背景融合，我們需要透明背景。開新圖檔，透明背景，大小選「使用中影像」，把剛剛拉出來的新圖檔，用![](http://tad0616.net/uploads/tad_book3/image/bluefish/tad015.png) 全選並複製所有物件，然後到透明圖貼上。  
 2.用剪裁工具，裁下標題，以下均用png格式存檔到xxx\_themes\_01/images/。  
 3.接著復原剪裁，把標題部份物件都先刪掉，並裁出主內容區的背景圖。  
 4.一樣復原剪裁，最後裁出頁尾部份。

<div style="float: right;" width="300">![](http://tad0616.net/uploads/tad_book3/image/bluefish/head.png)  
 ![](http://tad0616.net/uploads/tad_book3/image/bluefish/content_bg.png)  
 ![](http://tad0616.net/uploads/tad_book3/image/bluefish/foot.png)</div>**五、拼湊主畫面成網頁**

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.原則上，我們會把剛做的三張圖都當作背景放入儲存格中。除了中間部份，頭尾部份的圖都是不重複，並且要根據圖檔高度指定好儲存格高度。

![](http://tad0616.net/uploads/tad_book3/image/bluefish/dd.png)

**六、製作各個區塊呈現區**  
 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吧！

![](http://tad0616.net/uploads/tad_book3/image/bluefish/aa.png)

![](http://tad0616.net/uploads/tad_book3/image/bluefish/bb.png)

![](http://tad0616.net/uploads/tad_book3/image/bluefish/cc.png)

:::