12. 將網頁變成佈景

一、加入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.建議寫法如下：有標題，則秀出套樣式的標題及內容，若無，則秀出不套樣式的內容：

<{if $block.title}>
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
<{else}>
<{$block.content}>
<{/if}>

5.接著修改style.css加入 . blockTitle 以及 . blockContent 的樣式設定。

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

#usermenu a,#mainmenu a{
    display: block;
    font-size: 12px;
    text-decoration: none;
    color: #4169E1;
    margin:3px;
    padding:2px;
}

#usermenu a:hover ,#mainmenu a:hover{
color: White;
background-color: #3F74A2;
}

3.若要垂直靠上（如id="content"），請加入「vertical-align:top;」即可。

五、有區塊才顯示（避免一堆無謂的空白）
1.有「上中區塊」才顯示（若網站沒套用任何區快到上中區塊呈現區，則整區消失）：

<{if $xoBlocks.page_topcenter}>區塊樣板語法<{/if}>

(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

11. 把圖片製成網頁