[972]CSS打造XOOPS佈景

1. 玩玩CSS前的熱身

CSS 是什麼？
1. CSS是Cascading Style Sheets的縮寫，亦即「串接樣式表」之意。
2. CSS是用來控制網頁外觀的。
為什麼要用CSS？
1. 因為網頁的HTML控制外觀能力有限，所以靠CSS來補足其不足。
2. 可達到內文和外觀分開的功能，亦可讓網頁結構更清楚、簡單。
要用CSS需要什麼工具？
1. 什麼都不用，只要有個「純文字編輯器」即可，什麼作業系統或瀏覽器都無所謂。
2. 功力夠的，可以用Windows的「計事本」；想要更方便些，可以用TopStyle lite ，免費的CSS編輯器。
學CSS需要什麼背景知識？
1. 需要有網頁編輯的經驗，最好能夠熟悉HTML語法，因為CSS可以說是和HTML結合在一起的。
BlueFish的優點
1. 跨平台的中文自由軟體，Windows下或Linux下都可以免費安裝使用。
2. 有完整的精靈畫面，可以快速產生原始碼，讓您眼見為憑，方便學習。
BlueFish的設定，第一次安裝請進行以下設定
1. 讓中文可以正常，字型請選擇「MingLiU 11」。
2. 設定您的工作目錄（因為BlueFish的工作目錄似乎不是很正常...）
BlueFish好用的熱鍵
1. 「F3」：會自動判斷游標所在的語法，並叫出精靈對話框供您設定。
2. 「Ctrl+>」：向右縮排。
3. 「Ctrl+>」：向左縮排。
HTML基礎認知
1. 網頁其實只是由一堆HTML標籤所組成副檔名為.html的純文字檔。
2. HTML是寫網頁的基本「語法」，而非程式語言。
3. 網頁中的首頁，預設名稱為index.html，利用瀏覽器就可看見網頁效果。
4. 學HTML不要死記，只要知道要做什麼效果，可以用什麼標籤，或者某標籤的用途為何，這樣就可以了！

[972]CSS打造XOOPS佈景

2. 文字的CSS外觀排版（上）

一、CSS的用法有三種（視用途不同決定）

二、CSS選擇器（適用於內嵌CSS、連結CSS）

三、CSS的單位

四、CSS技巧

1.格式化您的網頁

2.讓背景置中，並垂直延伸
background-image: url(bg.png);
background-position: center;
background-repeat: repeat-y;

3.加上標題背景顏色及改變位置
color: gray;
background-color: #ECECEC;
padding:4px 20px;
margin-bottom:50px;

4.設定段落行高，並改變段落文字顏色
line-height: 2.2em;
color:#404040;

5.加上每行的底線（利用span為in-line的特性達成）
border-bottom: 1px dotted #99CC00;
font-size:0.8em;
padding-left:2em;
padding-bottom:4px;

[972]CSS打造XOOPS佈景

3. 文字的CSS外觀排版（下）

一、針對段落字首做處理
1.善用擬態元件

二、避免每一段行首都被縮兩個字

三、自製文字底圖外觀

四、加入圖片、圖說外觀樣式

五、CSS 排版觀念：Box Model

圖片來源：http://blog.roodo.com/jaceju/archives/100724.html

[972]CSS打造XOOPS佈景

4. CSS的圖片設計

一、製作圓角矩形底圖

底圖作法和第二節課的作法相似，但這次要分為上、中、下三部份。
您必須先測量好原來的中間空白處有多大，這樣CSS就可以不用做太多調整。（可用FireFox的WebDeveloper擴充套件中的「其他功能→顯示尺規」來測量）
詳細作法如下：

此區到時會以影片播放來呈現

二、製作圓角矩形的頁面

在page的上下方，各加上一個div，並分別命名為header、foot，如：<div class="header"></div>
另外body通常也要設成「margin: 0px;」不然原先的底圖會露一點出來～

.header{ margin: 0px; height:51px; background-image: url(header.png); background-position: center; background-repeat: no-repeat; }	對應class= header 邊距： 0像素高度： 51像素 //只要不超過圖片高度即可背景圖： header.png 背景位置：水平置中背景重複方式：不重複
.foot{ margin: 0px; height:48px; background-image: url(foot.png); background-position: center; background-repeat: no-repeat; }	對應class= foot 邊距： 0像素高度： 48像素 //只要不超過圖片高度即可背景圖： header.png 背景位置：水平置中背景重複方式：不重複
body{ 原先設定...略 margin: 0px; }	對應<body> 邊距： 0像素

三、將同樣的樣式套用到別頁

其他頁面若有相同的結構，那麼可以直接套用。
將中的語法獨立存成 xxx.css 檔。
利用以下語法將CSS檔引入，此語法貼在中即可。
<link rel="stylesheet" type="text/css" href="xxx.css">
此乃CSS「連結」的用法，優先權最低，但作用範圍最廣

四、實力測驗～

請將demo2.txt，作成網頁，然後讓它套用之前的外觀。其中圖片請讓它向左對齊。

[972]CSS打造XOOPS佈景

4-1 demo.html 原始碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Big5">
<title></title>
<style>
    body{
        background-image: url(bg.png);
        background-position: center;
        background-repeat: repeat-y;
        background-color:#6F963C;
        margin:0px;
    }
    #all{
        text-align:center;
    }
    .page{
        width: 660px;
        margin: 0px auto;
        background-position: center bottom;
        background-repeat: no-repeat;
    text-align:left;
    }
    h1{
        color: gray;
        background-color: #ECECEC;
        padding:4px 20px;
        margin-bottom:50px;
    }

    p{
        line-height: 2.2em;
        color:#404040;
        text-align:justify;
        text-justify:inter-ideograph;
    }

    span{
        border-bottom: 1px dotted #99CC00;
        font-size:0.8em;
        padding-left:2em;
        padding-bottom:4px;
    }
    .header{
        height:62px;
        background-image: url(header.png);
        background-position: center;
        background-repeat: none;
    }
    .foot{
        height:88px;
        background-image: url(foot.png);
        background-position: center;
        background-repeat: none;
    }
    .pic {
        float: right;
        margin:10px;
        background-color: #000000;
        padding:4px;
    }
    .pic_txt {
        color: yellow;
        font-size: 12px;
        margin-top:6px;
    }

    img {
        border: 1px solid gray;
    }

</style>
</head>
<body>
    <div id="all">
        <div class="header"></div>
        <div class="page">
        <h1>CSS的歷史</h1>

        <div class="pic">
            <img src="Bert_Bos.jpg" width="250" height="375" border="0" alt="Bert_Bos">
            <div class="pic_txt">伯特·波斯（Bert Bos）</div>
        </div>

        <p><span>從1990年代初HTML被發明開始樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。</span></p>

        <p><span>但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。</span></p>

        <p><span>1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。</span></p>

        <p><span>當時已經有過一些樣式表語言的建議了，但CSS是第一個含有「層疊」的主意的。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。</span></p>

        <p><span>哈坤于1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。</span></p>

        <p><span>1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·里雷。這個工作組開始討論第一版中沒有涉及到的問題，其結果是1998年5月出版的第二版要求。到2004年為止，第三版還未出版。</span></p>
        </div>

        <div class="foot"></div>
    </div>
</body>
</html>

[972]CSS打造XOOPS佈景

5. 用CSS改造連結

一、基本知識：

1.擬元件（Pseudo-elements）建立一個抽象的網頁元件，例如「段落第一行」或者「段落第一個字」，而且也提供另一個方法來套用樣式到一個不存在的內容。（:before 及 :after）。

2.擬類別（Pseudo-classes）通常是動態的，也就是和使用者的操作互動有關的的一個狀態，例如滑鼠移過（:hover）這類的狀態。

二、把連結變成按鈕

1.加入連結：<a href="demo.html" class="menu">CSS的歷史</a>

2.「!important」是用來獲取優先權的，但IE不支援，因此常用來作為FF與IE分開設定樣式的密技。

三、若是改用圖片

[972]CSS打造XOOPS佈景

6. 不同瀏覽器用不同CSS

一、引入網頁檔
1.下載 jquery.js 以及 jquery.inc-5.pack.js，把這兩個檔放到和您的網頁同一目錄。接著，在您網頁的 </head> 前加入以下兩行：
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.inc-5.pack.js">
2.在您的網頁，要插入檔案內容的地方，置入以下語法：
<div class="inc:欲引入檔案.html">備註文字</div>
3.您也可以作成互動式的即時產生內容：
<div onclick="$(this).inc('欲引入檔案.html');">秀在畫面的圖文</div>

二、分別設定IE、FireFox的外觀（FF在上，IE在下）
1.有些情況下，同一個CSS屬性，在不同瀏覽器中卻有不同的呈現外觀。為了讓各種瀏覽器都有相同外觀，我們可能需要針對各個瀏覽器來設定 CSS。以下是最簡單的設法（順序要對！#在下）：
color: red;   給FireFox用的，因為FF知道#是註解，故不執行下面一行。
#color: blue;   給IE用的，因為IE看不懂#，所以會傻傻的執行之。

2.另外也可以用「!important」，而「!important」必須先出現。
color: red !important;   給FireFox用的，因為FF知道!important要優先執行，故不管下面怎麼改都不會執行。
color: blue;   給IE用的，因為IE看不懂!important，所以還是會傻傻的執行之。

三、分別設定IE5、IE6、IE7、FireFox樣式
1.利用IE瀏覽器的專屬功能，可以針對瀏覽器版本不同，執行不同CSS
(1) 
(2) 
(3) 
(4) 
(5) 
(6)

四、實戰：
1.請利用現有文章結構，搭配CSS，做一個空白的網頁樣板，方便日後套用。
2.沒有內容的時候，page區塊中的元件會超過page範圍，看起來不好看！如何讓他在沒有內容的時候，可以維持一定高度。而當有內容的時候，又不至於影響其外觀？

↓

3.提示：使用min-height屬性搭配height，min-height屬性只有FirFox有效，IE無效！如何讓IE也會有「最低高度」的效果？

[972]CSS打造XOOPS佈景

7. 用CSS改變表格外觀

一、在CSS檔中引入CSS檔

1.CSS檔中，除了設定樣式外，還可以引入其他的CSS檔。
2.語法：@import url(table.css);

二、表格的幾個HTML標籤

1.水平合併儲存格，請用colspan屬性，例如：<td colspan="3"></td>
2.垂直合併儲存格，請用rowspan屬性，例如：<td rowspan="2"></td>

三、讓表格有細線框

四、讓元件內的文字垂直至中技巧

五、組合背景技巧

六、去除左右框線

七、最後成果

[972]CSS打造XOOPS佈景

8. 用CSS設計版面布局

一、先規劃好版面配置區塊（要切分成幾個顯示區域？）

1.我們可用<div>，配合 id 屬性來把畫面分為幾個部份。

二、設定各區的CSS（若想看見框線，請自行加上 border:1px設定）

三、製作標題底圖（讓圖片上也可以隨意放置文字及圖片）

四、在標題中放置圖形連結（讓DIV的圖片往下對齊，圖下還要有文字）

1.先把圖片往<div>裡面塞，然後將圖片加上連結，接著，再去設定樣式即可。

五、頁尾CSS設定（外加上去）

[972]CSS打造XOOPS佈景

9. XOOPS佈景結構

一、XOOPS的樣板

1.XOOPS採用Smarty樣板引擎。
2.所謂樣板，就是html檔。
3.在XOOPS中，樣板到處都有，XOOPS的外觀就是由以下樣板組成的。
(1) 佈景樣板：/themes/佈景/*.html
(2) 模組樣板：/modules/模組/templates
(3) 區塊樣板：/modules/模組/templates/blocks
4.模組樣板以及區塊樣板是由模組提供，安裝模組時，會將其樣板讀入資料庫，以利線上編輯或控管。

二、XOOPS的佈景目錄

1.XOOPS的佈景目錄在themes下，一個資料夾就是一套佈景。上傳佈景時，將佈景上傳到themes下即可。
2.所謂佈景，就是由theme.html以及CSS檔、圖檔，組合而成的。
3.theme.html規範著整個網站的畫面布局結構，此檔無法由線上編輯。
4.為了不讓theme.html太複雜，有時後會將某區域的樣板獨立出來，所以，除了theme.html以外，佈景目錄下還會有一堆其他的html檔。

三、XOOPS的佈景設定

1.安裝佈景時，請到後台「一般設定→基本參數設定」，進行以下動作：
(1) 選取「用戶可選擇的佈景」，選越多，用戶可選用的佈景越多。
(2) 「預設佈景」則是網站預設使用的佈景。
(3) 「從/themes/yourtheme/templates更新模組的樣板文件」指的是不去讀取樣板快取檔，而是直接去讀佈景，理論上，效能會比較不好（其實沒什麼感覺），但修改佈景時會比較容易。
2.「控制面板界面」指的就是後台樣板，和我們的佈景檔沒多大關係。
3.「預設樣板組」指的就是模組提供的模組樣板以及區塊樣板組合，未來要修改區塊外觀以及模組外觀時才用得到。

四、製作XOOPS的佈景流程

1.先設計好一個完整的網頁→把網頁變成XOOPS樣板→套用後進行CSS微調。
2.新增一組「樣板組」複本，開始修改各區塊或模組外觀，以配合佈景風格。

五、XOOPS的佈景網站

1.http://themes.ck2tw.net/(中)
2.http://www.eduweb.com.tw/xoops/html/(中)
3.http://web.center.mlc.edu.tw/modules/mydownloads/viewcat.php?cid=5(中)
4.http://cmsfamily.cn/modules/mydownloads/viewcat.php?op=&cid=1(中)
5.http://demo.2bcool.net/index.php(日+英)
6.http://hello.oceannet.jp (日)
7.http://xoopsfactory.com/(英)
8.http://www.7dana.com/download/pafiledb.php?action=category&id=1 (英)
9.http://www.xoops.org/modules/news/index.php?storytopic=3 (英)
10.http://www.xoops.org/modules/library/viewcat.php?cid=1 (英)

[972]CSS打造XOOPS佈景

10. 製作佈景基本影像檔

一、製作底圖

1.底圖原則：可以無限往下延伸！
2.淡出：把原圖的某一部份變淡（通常用來將圖逐漸變成單一顏色，可和底色融合）
(1) 「編輯→淡出」：由上往下↓淡出，左黑右白（越黑越透明）
(2) 最後會有個選取區，我們可在選取區中填色。
3.填色：「編輯→填充」選擇白色（或想要的底色）
4.擴大底框：在原圖不變的狀況下，擴大圖形，底色可選剛剛填充之顏色。
(1) 「調整→擴大底框」：先把底圖的高度擴大到1100左右（下方加個300左右）。

二、製作主要畫面區（圓角矩形）

1.製作一個寬度約760的圓角矩形（高度不限），可加上四周陰影。

三、製作斜紋標題圖片

1.開啟一個5x5，底色為黑色的新檔案。顯示模式可調大到1200
2.選擇畫筆，將筆頭大小設為1，柔邊為0，顏色為白色，拉條斜線，並存成xx.png。
3.開啟要當標題的圖片，並裁成一個寬約720的圖片。我們準備加入斜紋。
4.「編輯→填充→影像」選擇xx.png，「合併」選「重疊」，「透明度」設70左右。
5.在上面打上標題文字。

四、製作區塊外觀

1.開啟「百寶箱→資料庫→影像→大自然」，將喜歡的圖拉到左邊編輯區。
2.點選該圖，「調整→調整大小」，「套用到」選「選取的物件」，設寬約50。

[972]CSS打造XOOPS佈景

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吧！

[972]CSS打造XOOPS佈景

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

[972]CSS打造XOOPS佈景

13. 設定區塊外觀

一、設定透明度（IE、FF皆適用）

1.透明度可以有效的讓物件和背景融合，數值越小，越不透明；反之，越大越透明。
2.此外，套用透明度時，需有明確的寬度設定，否則IE會沒有作用。

filter:alpha(opacity=30); /* IE */
-moz-opacity:0.3; /* Moz + FF */
opacity: 0.3; /* 支援CSS3的瀏覽器*/

二、輪流套用顏色

1.<{cycle}>是smarty的特殊函數，可以讓您輪流秀出設定值。
2.將<div class="block_title">改為<div class="<{cycle values="block_title,block_title_r,block_title_g,block_title_b"}>">
3.在CSS檔中，分別設新增block_title_r、block_title_g、block_title_b樣式。
4.補充：<{counter}>則是可以依序加上編號。

三、處理png透明圖在IE6的問題

1.將iepngfix.zip解壓，取出iepngfix.htc、blank.gif放到根目錄。
2.在CSS檔中，有套用到png圖的地方，加入：behavior: url(iepngfix.htc);

四、套用不同區塊設定（以中間區塊為例）

1.將block.html樣板檔複製一份，並改名為block_c.html。
2.修改block_c.html的內容，成為您想要的外觀版面。
3.在佈景中，要引入實體檔案，需用佈景標籤：
(1) 若檔案在根目錄<{xoAppUrl iepngfix.htc}>
(2) 若檔案在佈景目錄<{xoImgUrl images/btc1.png}>

<{if $block.title}>
<table cellspacing="0" cellpadding="0" class="block_title_c">
<tr>
<td style='width:61px;'><img src="<{xoImgUrl images/btc1.png}>"></td>
<td style='width:100%;background-image:url(<{xoImgUrl images/btc2.png}>);'><{$block.title}></td>
<td style='width:13px;'><img src="<{xoImgUrl images/btc3.png}>"></td></tr>
<tr><td colspan=3><{$block.content}></td></tr>
</table>
<{else}>
<{$block.content}>
<{/if}>

4.修改theme.html中，要改套用新樣板的區塊呈現區，修改其引入檔為block_c.html。
5.修改style.css，針對不同區域的的外觀做設定。

table.block_title_c{
border-collapse:collapse;
padding: 0px;
border:none;
margin:0px;
}

table.block_title_c td{
behavior: url(iepngfix.htc);
}

table.block_title_c td img{
behavior: url(iepngfix.htc);
}

[972]CSS打造XOOPS佈景

14. 整合登入及使用者選單

一、把登入區塊整合到佈景上

1.先檢視登入區塊的語法，將<form></form>間的所有語法複製起來，並整理之。
2.若不會整理，可直接套用教材包裡頭的「登入語法.txt」。
3.form的action要改為<{xoAppUrl /user.php}>（也就是2.3.x的佈景寫法）
4.xoops_redirect登入後轉向則改成<{$xoops_requesturi}>即可。
5.立即註冊路徑：<{xoAppUrl /register.php}>
6.密碼遺失路徑：<{xoAppUrl /user.php#lost}>

二、把其他的樣板引入theme.html

1.為了避免theme.html過於複雜，建議把一些區域的樣板作成獨立的html檔，然後引入到theme.html中使用即可。
2.引入的語法：<{includeq file="$theme_name/login.html"}>

三、判斷是否有登入

1.用來判斷是否為以註冊會員，若是嗅出使用者選單，若不是秀出登入畫面：
<{if $xoops_isuser}>使用者選單語法<{else}>登入語法<{/if}>

四、秀出使用者選單（相容2.2.x及2.3.x的寫法）

1.<a href="<{$xoops_url}>/user.php" >查看帳號</a>
2.<a href="<{$xoops_url}>/edituser.php">編輯帳號</a>
3.<a href="<{$xoops_url}>/notifications.php"">通知</a>
4.<a href="<{$xoops_url}>/user.php?op=logout" ">登出</a>

五、判斷是否秀出為管理員，若是秀出管理登入畫面：

<{if $xoops_isadmin}>
<a href="<{xoAppUrl /admin.php}>">管理介面</a>
<{/if}>

六、判斷有沒有私人信息

<{xoInboxCount assign=pmcount}>
<{if $pmcount}>
<a href="<{xoAppUrl viewpmsg.php}>">您有 <{$pmcount}> 封信</a>
<{else}>
<a href="<{xoAppUrl viewpmsg.php}>">收件箱</a>
<{/if}>

七、插入小插圖

1.若插圖放在佈景下的images中，那麼，可用{xoImgUrl images/檔名}>來插圖。
2.<img src="<{xoImgUrl images/power_off.png}>" hspace="3" align="absmiddle">
3.hspace為HTML的插圖屬性，意思是圖片左右兩側的間距。
4.align是用來對齊的，absmiddle可以做到絕對垂直置中對齊。

[972]CSS打造XOOPS佈景

15. XOOPS的CSS設定

一、主選單

1.id="mainmenu"（整個主選單）
(1) class="menuTop"（第一個選項，通常是回首頁）
(2) class="menuMain"（一般主選項）
(3) class="menuSub"（次選項）

二、使用者選單（若已內建到佈景，則可略過）

1.id="usermenu"（整個使用者選單）
(1) class="menuTop"（第一個選項）
(2) class="highlight"（有新信時）

三、表格框線部份（評論區、「新會員」或「張貼者排行」區塊就會用到）

1.class="outer"（表格外框）
2.class="head"（表格頭）
3.class="foot"（表格尾）
4.class="odd"（奇數列）
5.class="even"（偶數列，建議盡量設成有顏色，因為常被拿來當工具列底色）

四、XOOPS基本CSS範例（xoops.css）

1.請在style.css中用「@import url(xoops.css);」引入之。

#mainmenu a {
display: block;
margin: 6px 2px;
text-decoration: none;
color:rgb(0,51,102);
}

#mainmenu a:hover {
background-image: url(images/xx.png);
background-position: 0px;
background-repeat: no-repeat;
color:rgb(255,0,51);
}

#mainmenu a.menuTop {
padding-left: 8px;
color:rgb(255,51,0);
background-image: none;
}

#mainmenu a.menuMain {
padding-left: 18px;
}

#mainmenu a.menuSub {
padding-left: 36px;
color:rgb(0,102,102);
}

#mainmenu a.menuSub:hover {
background-position: 18px;
}

.outer {
border: 1px solid silver;
border-collapse:collapse;
}

.head {
background-color: rgb(153,153,51);
padding: 5px;
color:rgb(255,255,255);
font-weight: bold;
}

.foot {
background-color: rgb(153,153,51);
padding: 5px;
color:rgb(255,255,255);
font-weight: bold;
}

.even {
background-color: rgb(255,255,255);
padding: 5px;
}

.odd {
background-color: rgb(225,255,196);
padding: 5px;
}

tr.even td {
background-color: rgb(255,255,255);
padding: 5px;
}

tr.odd td {
background-color: rgb(225,255,196);
padding: 5px;
}

[972]CSS打造XOOPS佈景

16. 設計模組畫面樣板

一、模組樣板基本概念

1.模組樣板位置：/modules/模組/templates/*.html
2.裝模組時，XOOPS會將模組樣板存入資料庫，以便從「後台→模板管理」來控制之。
3.改模組樣板有兩種方式：
(1) 徹底的改：直接修改「模組/templates/*.html」，上傳，更新模組即可。
(2) 安全的改：線上新增一樣板組，到偏好設定改用新樣板組，然後修改樣板組即可。
a.「後台→模板管理→新樣板組名稱」
b.「後台→系統選項→一般設定→基本參數設定→預設樣板組」

二、設計頁面跳轉畫面

1.跳轉頁面樣板檔案：「modules/system/templates/system_redirect.html」
2.修改完，上傳，更新模組即可。

三、快速把<div>加上圓角

1.http://www.dillerdesign.com/experiment/DD_roundies/
2.將DD_roundies_0.0.1a-min.js放到佈景資料夾中。
3.要套上圓角的<div>加上「class="樣式名稱"」，然後，在<head>中加入：
<script src="<{$xoops_url}>/themes/佈景資料夾/DD_roundies_0.0.1a-min.js"></script>
<script>
DD_roundies.addRule('.樣式名稱', 10);
</script>

四、簡易修改模組外觀

1.不見得每個模組都有套用樣板，即使有套用樣板，其可修改的程度也不同，端視該模組頁面套用的樣板的精細程度。
2.像底下這種是最混的，但也最好改（底下就是插入一個標題圖片，圖片是先直接放到該模組的images中）：
<{$toolbar}>
<img src="<{$xoops_url}>/modules/tad_cbox/images/cbox.png">
<{$css}>
<{$content}>

3.越精細，代表修改彈性越大，但相對的也越複雜。
4.樣板中，除了<{$xxx}>這樣的樣板標籤不能修改外，其餘的都可以自行修改！

五、使用「自訂樣板組」的必須特別注意！

1.網站使用自訂樣板組者，若是後來有修改模組或區塊的樣板，那麼，上傳後，即使是更新模組也是無效果的。
2.此時，您可以進到樣板組的設定畫面，並直接編輯之，或者將樣板全部刪除，然後重新產生之，若不產生也沒關係，XOOPS會自動讀取 default 樣板組。
3.樣板組修改後，可自行下載儲存，日後需要時，亦可上傳重複使用，也可分享給他人使用。

[972]CSS打造XOOPS佈景

17. 修改區塊外觀

一、新增一組樣板組

1.「後台→模板管理→新樣板組名稱」
2.「後台→系統選項→一般設定→基本參數設定→預設樣板組」

二、找到想修改的區塊（以「線上用戶」為例）

1.「後台→區塊管理→（找到要修改的區塊）→編輯→編輯樣板」
2.可以直接在線上修改「HTML樣板」的內容，亦可複製到文件編輯器修改完再貼上。
3.除<{$block.lang_xxx}>語系（可隨意修改）外，可透過比對得知樣板標籤之用途：
(1) <{$block.online_total}> 是總人數，亦即「2人線上」
(2) <{$block.online_members}> 是會員人數，亦即「會員: 1」
(3) <{$block.online_guests}> 是遊客人數，亦即「遊客: 1」
(4) <{$block.online_names}> 則是會員名稱，亦即「tad」

三、標題空白，則不秀出區塊標題

1.編輯block.html

<{if $block.title}>
原設定
<{else}>
<{$block.content}>
<{/if}>

改裝前

改裝後

1. 玩玩CSS前的熱身

CSS 是什麼？

為什麼要用CSS？

要用CSS需要什麼工具？

學CSS需要什麼背景知識？

BlueFish的優點

BlueFish的設定，第一次安裝請進行以下設定

BlueFish好用的熱鍵

HTML基礎認知

2. 文字的CSS外觀排版（上）

一、CSS的用法有三種（視用途不同決定）

二、CSS選擇器（適用於內嵌CSS、連結CSS）

三、CSS的單位

四、CSS技巧

3. 文字的CSS外觀排版（下）

4. CSS的圖片設計

4-1 demo.html 原始碼

5. 用CSS改造連結

一、基本知識：

二、把連結變成按鈕

三、若是改用圖片

6. 不同瀏覽器用不同CSS

7. 用CSS改變表格外觀

一、在CSS檔中引入CSS檔

二、表格的幾個HTML標籤

三、讓表格有細線框

四、讓元件內的文字垂直至中技巧

五、組合背景技巧

六、去除左右框線

七、最後成果

8. 用CSS設計版面布局

一、先規劃好版面配置區塊（要切分成幾個顯示區域？）

二、設定各區的CSS（若想看見框線，請自行加上 border:1px設定）

三、製作標題底圖（讓圖片上也可以隨意放置文字及圖片）

四、在標題中放置圖形連結（讓DIV的圖片往下對齊，圖下還要有文字）

五、頁尾CSS設定（外加上去）

9. XOOPS佈景結構

一、XOOPS的樣板

二、XOOPS的佈景目錄

三、XOOPS的佈景設定

四、製作XOOPS的佈景流程

五、XOOPS的佈景網站

10. 製作佈景基本影像檔

一、製作底圖

二、製作主要畫面區（圓角矩形）

三、製作斜紋標題圖片

四、製作區塊外觀

11. 把圖片製成網頁

12. 將網頁變成佈景

13. 設定區塊外觀

一、設定透明度（IE、FF皆適用）

二、輪流套用顏色

三、處理png透明圖在IE6的問題

四、套用不同區塊設定（以中間區塊為例）

14. 整合登入及使用者選單

一、把登入區塊整合到佈景上

二、把其他的樣板引入theme.html

三、判斷是否有登入

四、秀出使用者選單（相容2.2.x及2.3.x的寫法）

五、判斷是否秀出為管理員，若是秀出管理登入畫面：

六、判斷有沒有私人信息

七、插入小插圖

15. XOOPS的CSS設定

一、主選單

二、使用者選單（若已內建到佈景，則可略過）

三、表格框線部份（評論區、「新會員」或「張貼者排行」區塊就會用到）

四、XOOPS基本CSS範例（xoops.css）

16. 設計模組畫面樣板

一、模組樣板基本概念

二、設計頁面跳轉畫面

三、快速把<div>加上圓角

四、簡易修改模組外觀

五、使用「自訂樣板組」的必須特別注意！

17. 修改區塊外觀

一、新增一組樣板組

二、找到想修改的區塊（以「線上用戶」為例）

三、標題空白，則不秀出區塊標題