Tad 教材網 - 線上書籍

:::

\[1001\]XOOPS網站門面專業設計
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1001/03.pdf)

### 一、正確觀念

1. 版型不應該用Table來建立，而是應該用<div>這類的標籤來規劃版型。用表格會缺乏彈性，而且也不是新一代網站的正確作法，表格就應該拿來當作表格用。
2. 但若您不想花太多時間在喬位置，或者網站內容充滿變數，亦或是沒有打算利用CSS來換版型者，那麼，表格會是一個簡單省時的作法。
 
### 二、表格標籤<table></table>

1. 屬性：對齊 align（left,center,right）、背景色 bgcolor、邊框border、內邊距cellpadding、欄間距cellspacing、外框模式frame（void, above, below,hsides, lhs, rhs, vsides, box, border）、內框模式rules（none, groups,rows, cols, all）、表格摘要summary、寬度width
2. frame不能在IE中正確顯示 、rules不能在IE，Chrome或Safari中正確顯示。
 
### 三、橫列標籤<tr></tr>

1. 屬性：對齊 align（left, center, right, justify）、背景色 bgcolor、垂直對齊valign（top, middle, bottom, baseline）
2. <tr></tr>中至少要有一組<th></th>或<td></td>
 
### 四、儲存格標題<th></th>、儲存格內容<td></td>

1. 屬性：簡述abbr、對齊align（left, right, center, justify）、背景色 bgcolor、水平合併colspan 、高度 height、不斷行 nowrap、垂直合併rowspan、作用範圍scope（col, colgroup, row, rowgroup）、垂直對齊valign（top, middle, bottom,baseline）、寬度 width
 
### 五、表格標題<caption></caption>

1. 屬性：對齊 align（left, right, top, bottom）
 
### 六、圖片<img src="圖片" alt="說明">

1. 屬性：對齊 align（top, bottom, middle, left, right）、邊框 border、高度height、高度height、水平間距 hspace、垂直間距 vspace、寬度width
2. 網頁圖片支援三種規格jpg（全彩、壓縮、相片）、png（全彩、透明）、gif（256色、透明背景、動畫）
 
### 七、相對路徑、絕對路徑

1. 相對路徑（相對於自身html檔）較常用，絕對路徑通常為：http://網址/圖檔.jpg
 
### 八、HTML的顏色碼

1. HTML顏色是用十六進位（00~FF）的紅、綠、藍（RGB）之組合而成的。 例如：#FF0000為紅色，#808080為灰色，#000000為黑色，#FFFFFF為白色
2. 也可以直接寫顏色名，例如：red、gray、black、white等。
 
### 九、HTML長度單位

1. 長度不用寫單位，一般預設就是px（像素）。例如 <table width="640">
2. 也可以用百分比表示，例如：<table width="100%">
 
### 十、不錯的佈景網站

1. http://www.mezzoblue.com/zengarden/alldesigns/
2. http://www.cssdrive.com/
3. http://www.freecsstemplates.org/
4. http://www.templateworld.com/free\_templates.html
5. http://www.oswd.org
6. http://www.oswt.co.uk/index.html

:::