Tad 教材網 - 線上書籍

:::

11. 把圖片製成網頁

13. 設定區塊外觀 next

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

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

**一、加入XOOPS佈景檔頭**  
 1.請開啟教材包中的「檔頭.txt」，並將裡頭所有內容複製起來。  
 2.開啟theme.html，貼上並覆蓋<body>之前（含<body>）的所有HTML語法。

**二、加入XOOPS佈景語法**  
 1.請開啟教材包中的「樣板碼.txt」，並將裡頭所有內容依序複製起來。  
 2.將複製起來的語法複製到theme.html中，並覆蓋原先標示的中文。

**三、建立基本的區塊呈現區樣板檔（block.html）**  
 1.區塊區域樣板檔不見得要有，也可直接做到them.html裡頭，但這樣容易導致theme.html不易維護，所以大多獨立出來。  
 2.您可以針對八個區域做八個不同的區塊呈現區樣板檔，也可以做一個大家一起用。  
 3.區塊呈現區樣板只有兩個樣板碼：  
 (1) 區塊標題：<{$block.title}>  
 (2) 區塊內容：<{$block.content}> （區塊內容另外有區塊本身樣板控制）  
 4.建議寫法如下：有標題，則秀出套樣式的標題及內容，若無，則秀出不套樣式的內容：

5.接著修改style.css加入 . blockTitle 以及 . blockContent 的樣式設定。 **四、套用佈景**  
 1.建議加入「版面風格」區塊，方便切換佈景，並記得到偏好設定將新的佈景加入選項。  
 2.修改基本CSS，如使用者選單（id="usermenu"）或主選單（id="mainmenu"）

<table border="1" cellpadding="1" cellspacing="1" height="134" width="441"> <tbody> <tr> <td valign="top">\#usermenu a,#mainmenu a{  
 display: block;  
 font-size: 12px;  
 text-decoration: none;  
 color: #4169E1;  
 margin:3px;  
 padding:2px;  
 }</td> <td valign="top">\#usermenu a:hover ,#mainmenu a:hover{  
 color: White;  
 background-color: #3F74A2;  
 }</td> </tr> </tbody> </table>

3.若要垂直靠上（如id="content"），請加入「vertical-align:top;」即可。 **五、有區塊才顯示（避免一堆無謂的空白）**  
 1.有「上中區塊」才顯示（若網站沒套用任何區快到上中區塊呈現區，則整區消失）：

<table border="1" cellpadding="1" cellspacing="1" height="38" width="342"> <tbody> <tr> <td><{if $xoBlocks.page\_topcenter}>區塊樣板語法<{/if}></td> </tr> </tbody> </table>

(1) 上左區塊：$xoBlocks.page\_topleft  
 (2) 上右區塊：$xoBlocks.page\_topright  
 (3) 上中區塊：$xoBlocks.page\_topcenter  
 (4) 下左區塊：$xoBlocks.page\_bottomleft  
 (5) 下右區塊：$xoBlocks.page\_bottomright  
 (6) 下中區塊：$xoBlocks.page\_bottomcenter  
 (7) 左區塊：$xoBlocks.page\_left  
 (8) 右區塊：$xoBlocks.page\_right

:::