用Dreamweaver精細(xì)化網(wǎng)頁中表格的外觀_Dreamweaver教程
表格無疑是網(wǎng)頁制作中最為重要的一個(gè)對(duì)象,因?yàn)橥ǔ5木W(wǎng)頁都是依靠表格來進(jìn)行版面布局和各元素組織的,它直接決定了網(wǎng)頁是否美觀,內(nèi)容組織是否清楚。但很多朋友經(jīng)常忽視對(duì)表格的研究,而把目光投向其他的層、圖片、特效等等,其實(shí)合理的利用表格可以方便的美化你得頁面,我們也經(jīng)常聽到有朋友抱怨表格作出的頁面單調(diào)、粗糙、缺乏變化,也經(jīng)常聽到有人問如何作出1個(gè)像素的表格邊框。其實(shí)在Dreamweaver中我們可以非常方便的精細(xì)化你的表格,從而使你的網(wǎng)頁更加美觀精細(xì)。我們將分下面三個(gè)方面介紹如何在Dreamweaver中精細(xì)化你的表格。
一、利用屬性面板。

(圖一)
首先我們需要了解兩個(gè)表格屬性面板上的參數(shù):CellPad和CellSpace。如圖一所示,CellPad是指表格中兩個(gè)單元格之間的距離,CellSpace是指每個(gè)單元格與它中間的內(nèi)容之間的間隔距離。通過改變這兩個(gè)參數(shù),并配合背景色彩的變化,可以方便的做出1像素的表格邊框。
1、使用Object面板插入一個(gè)表格,定義表格寬、高及行數(shù)和列數(shù)。注重此時(shí)Dreamweaver中插入表格的默認(rèn)CellPad和CellSpace、Border都為0。如圖二;

(圖二)
2、在屬性面板中定義表格的Border為0,CellPad為5(這項(xiàng)可使單元格中的內(nèi)容與單元格邊緣之間保持5個(gè)像素);CellSpace為1(此項(xiàng)使得單元格之間保持1個(gè)項(xiàng)素的間距)。如圖三;

(圖三)
3、設(shè)置表格的背景色#999999,如圖四;

(圖四)
4、設(shè)置單元格的背景色#FFFFFF,如圖五;

(圖五)
5、在瀏覽器中預(yù)覽一下效果,我們可以看到表格呈現(xiàn)一個(gè)像素的邊框,如圖六;

(圖六)
二、利用表格嵌套。
還是上面的主要原理,我們?cè)诶帽砀裰g的互相嵌套,就可以實(shí)現(xiàn)更多的效果。
1、首先我們繪制一個(gè)表格,參照前面的例子設(shè)定此表格的CellPad和CellSpace的數(shù)值和顏色。具體效果如圖七;

(圖七)
2、接下來繪制另一個(gè)單行單列的表格,設(shè)置CellPad=2,CellSpace=1具體參數(shù)如圖八;

(圖八)
3、將第一步中作好的表格移動(dòng)到第二步中的表格中,此時(shí)的表格外觀如圖九;

(圖九)
我們看到此表格具有雙線外框,單線內(nèi)框。
4、再修改第二步中的表格為單行雙列,在每個(gè)單元格中都放置一個(gè)第一步中的表格,最后的表格外觀如圖十;

(圖十)
三、利用樣式表美化表格。
1、直接重新定義<td>,樣式表的具體定義我不作介紹,定義表格邊框主要是在樣式編輯器的Border選項(xiàng)中,如圖十一;
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver精細(xì)化網(wǎng)頁中表格的外觀
。