3.
表格、圖片與版型
一、正確觀念
- 版型不應該用Table來建立,而是應該用<div>這類的標籤來規劃版型。用表格會缺乏彈性,而且也不是新一代網站的正確作法,表格就應該拿來當作表格用。
- 但若您不想花太多時間在喬位置,或者網站內容充滿變數,亦或是沒有打算利用CSS來換版型者,那麼,表格會是一個簡單省時的作法。
二、表格標籤<table></table>
- 屬性:對齊 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
- frame不能在IE中正確顯示 、rules不能在IE,Chrome或Safari中正確顯示。
三、橫列標籤<tr></tr>
- 屬性:對齊 align(left, center, right, justify)、背景色 bgcolor、垂直對齊valign(top, middle, bottom, baseline)
- <tr></tr>中至少要有一組<th></th>或<td></td>
四、儲存格標題<th></th>、儲存格內容<td></td>
- 屬性:簡述abbr、對齊align(left, right, center, justify)、背景色 bgcolor、水平合併colspan 、高度 height、不斷行 nowrap、垂直合併rowspan、作用範圍scope(col, colgroup, row, rowgroup)、垂直對齊valign(top, middle, bottom,baseline)、寬度 width
五、表格標題<caption></caption>
- 屬性:對齊 align(left, right, top, bottom)
六、圖片<img src="圖片" alt="說明">
- 屬性:對齊 align(top, bottom, middle, left, right)、邊框 border、高度height、高度height、水平間距 hspace、垂直間距 vspace、寬度width
- 網頁圖片支援三種規格jpg(全彩、壓縮、相片)、png(全彩、透明)、gif(256色、透明背景、動畫)
七、相對路徑、絕對路徑
- 相對路徑(相對於自身html檔)較常用,絕對路徑通常為:http://網址/圖檔.jpg
八、HTML的顏色碼
- HTML顏色是用十六進位(00~FF)的紅、綠、藍(RGB)之組合而成的。 例如:#FF0000為紅色,#808080為灰色,#000000為黑色,#FFFFFF為白色
- 也可以直接寫顏色名,例如:red、gray、black、white等。
九、HTML長度單位
- 長度不用寫單位,一般預設就是px(像素)。例如 <table width="640">
- 也可以用百分比表示,例如:<table width="100%">
十、不錯的佈景網站
- http://www.mezzoblue.com/zengarden/alldesigns/
- http://www.cssdrive.com/
- http://www.freecsstemplates.org/
- http://www.templateworld.com/free_templates.html
- http://www.oswd.org
- http://www.oswt.co.uk/index.html