Tad 教材網 - 線上書籍

:::

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

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/bluefish/04.zip)**一、製作圓角矩形底圖**

1. 底圖作法和第二節課的作法相似，但這次要分為上、中、下三部份。
2. 您必須先測量好原來的中間空白處有多大，這樣CSS就可以不用做太多調整。（可用FireFox的WebDeveloper擴充套件中的「其他功能→顯示尺規」來測量）
3. 詳細作法如下：
  <script src="http://tad0616.net/modules/tad_player/class/jw_player/swfobject.js" type="text/javascript"></script><div id="tad_player_container">此區到時會以影片播放來呈現</div> <script type="text/javascript">
var s1 = new SWFObject('http://tad0616.net/uploads/tad_player/mediaplayer.swf','mediaplayer','480','360','6');
s1.addParam('allowfullscreen','true');
s1.addVariable('width','480');
s1.addVariable('height','360');
s1.addVariable('file','http://tad0616.net/uploads/tad_player/80_photoimpact.flv');
s1.addVariable('image','http://tad0616.net/uploads/tad_player/80_photoimpact_new.jpg');
s1.addVariable('backcolor','0x000000');
s1.addVariable('frontcolor','0xFFFFFF');
s1.addVariable('lightcolor','0xFFFF00');
s1.addVariable('screencolor','0xFCFCFC');
s1.addVariable('autostart','false');
s1.addVariable('usefullscreen','true');

s1.write('tad_player_container');
</script>  
**二、製作圓角矩形的頁面**

1. 在page的上下方，各加上一個div，並分別命名為header、foot，如：<div class="header"></div>
2. 另外body通常也要設成「margin: 0px;」不然原先的底圖會露一點出來～
 
<table border="1" cellpadding="1" cellspacing="1" width="96%"> <tbody> <tr> <td valign="top">.header{  
 margin: 0px;  
 height:51px;  
 background-image: url(header.png);  
 background-position: center;  
 background-repeat: no-repeat;  
 }</td> <td valign="top">對應class= header  
 邊距： 0像素  
 高度： 51像素 //只要不超過圖片高度即可  
 背景圖： header.png  
 背景位置：水平置中  
 背景重複方式：不重複</td> </tr> <tr> <td valign="top">.foot{  
 margin: 0px;  
 height:48px;  
 background-image: url(foot.png);  
 background-position: center;  
 background-repeat: no-repeat;  
 }</td> <td valign="top">對應class= foot  
 邊距： 0像素  
 高度： 48像素 //只要不超過圖片高度即可  
 背景圖： header.png  
 背景位置：水平置中  
 背景重複方式：不重複</td> </tr> <tr> <td valign="top">body{  
 原先設定...略  
 margin: 0px;  
 }</td> <td valign="top">對應<body>  
   
 邊距： 0像素</td> </tr> </tbody> </table>

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

1. 其他頁面若有相同的結構，那麼可以直接套用。
2. 將<style type="text/css"></style>中的語法獨立存成 **xxx.css** 檔。
3. 利用以下語法將CSS檔引入，此語法貼在中即可。  
   <span style="background-color: rgb(255, 255, 0);"><link rel="stylesheet" type="text/css" href="**xxx.css**"></span>
4. 此乃CSS「連結」的用法，優先權最低，但作用範圍最廣
 
**四、實力測驗～**

1. 請將demo2.txt，作成網頁，然後讓它套用之前的外觀。其中圖片請讓它向左對齊。  
   ![](http://tad0616.net/uploads/tad_book3/image/bluefish/soft24.png)

:::