表格素有網(wǎng)頁(yè)設(shè)計(jì)“靈魂”之稱，當(dāng)然在標(biāo)準(zhǔn)設(shè)計(jì)過(guò)程中，很多效果可以直接使用CSS快速實(shí)現(xiàn)，但即便如此，其作用不可小視。下面結(jié)合實(shí)例介紹如何巧妙運(yùn)用表格、單元格屬性在網(wǎng)頁(yè)設(shè)計(jì)中富有創(chuàng)意的網(wǎng)頁(yè)布局效果。
圓角表格在網(wǎng)頁(yè)布局中使用頻率最高。由于表格沒(méi)有提供直接設(shè)置圓角的屬性，制作圓角表格需要間接方法來(lái)完成，實(shí)現(xiàn)圓角表格的方法有很多種，如圖像法、像素法、編程法，其中圖像法使用范圍最廣。用圖像制作圓角表格的步驟如下。
【操作步驟】
第1步，使用Photoshop設(shè)計(jì)左右對(duì)稱的圓角圖標(biāo)，設(shè)計(jì)寬度為8像素，高度為60像素，使用紅色（#DA2129）進(jìn)行填充，如圖6.27所示。
第2步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。在頁(yè)面中插入一個(gè)表格，主要設(shè)置：1行3列，大小為800×60像素，居中顯示。
提示：使用表格進(jìn)行網(wǎng)頁(yè)布局時(shí)，一般要設(shè)置【表格】對(duì)話框中的【邊框粗細(xì)】文本框、【單元格邊距】文本框和【單元格間距】文本框都為0。也可以在插入表格之后，在【屬性】面板中設(shè)置【填充】、【間距】和【邊框】文本框?yàn)?。
第3步，在表格兩端的單元格中分別插入圓角圖標(biāo)，并設(shè)置單元格寬度和圖標(biāo)寬度相同。在制作圓角圖標(biāo)時(shí)應(yīng)先設(shè)置好圖像大小和表格尺寸的配套。
第4步，設(shè)置中間單元格的背景顏色為深紅色，使其與和圓角圖標(biāo)顏色保持一致。
第5步，在中間單元格內(nèi)插入一個(gè)3行3列的表格。用該表格來(lái)布局標(biāo)題欄，第1列用來(lái)控制標(biāo)題與左側(cè)距離，中間列用來(lái)繪制白色豎線，第3列分別用來(lái)輸入標(biāo)題和導(dǎo)航欄目。
第6步，以同樣的方式在下面再插入一個(gè)表格，背景顏色設(shè)置為淺灰色，然后輸入深灰色的導(dǎo)航文本。
巧做表格細(xì)線制作網(wǎng)頁(yè)線條方法多樣，簡(jiǎn)單總結(jié)如下。
?使用圖像法：用Photoshop制作直線，然后插入網(wǎng)頁(yè)。
?在Dreamweaver中選擇【插入】|【水平線】命令插入，即使用<hr>標(biāo)簽繪制水平直線。
?用CSS定義元素邊框來(lái)制作直線，例如，div{border:solid 1px #FF0000;}代碼可以繪制紅色1像素寬的實(shí)線。
?通過(guò)設(shè)置表格邊框。上述方法各有利弊，可根據(jù)個(gè)人需要進(jìn)行選擇。在CSS之前，用表格制作細(xì)線比較常用。下面介紹一種獨(dú)特方法，通過(guò)設(shè)置單元格背景色來(lái)顯示直線，這種方法方便簡(jiǎn)單，又具有非常大的靈活性和實(shí)用性。
【操作步驟】
第1步，打開(kāi)6.4.1節(jié)操作網(wǎng)頁(yè)文檔in-dex.html。在標(biāo)題欄下面插入一個(gè)1行3列的表格，寬800像素，居中顯示，實(shí)現(xiàn)網(wǎng)頁(yè)主體的布局，即一欄三列的設(shè)計(jì)格局。
第2步，設(shè)置第1個(gè)單元格寬度為180像素，在該單元格中插入一個(gè)14行1列的表格，寬度為94%，居中顯示。
制作豎線
第1步，在第一個(gè)單元格中插入一個(gè)1行3列的表格，寬為100%，高為20像素。設(shè)置插入表格的第1個(gè)單元格寬為5像素。
第2步，由于Dreamweaver在網(wǎng)站建設(shè)插入表格時(shí)自動(dòng)在每個(gè)單元格中嵌入一個(gè)空格符號(hào) ，用來(lái)?yè)未髥卧?，?dāng)插入元素時(shí)，空格消失。所以在沒(méi)有輸入任何元素時(shí)，單元格最小寬度為10像素，最小高度為13像素。
第3步，當(dāng)要設(shè)置單元格高或?qū)挒樽钚≈禃r(shí)，就應(yīng)該把這些空格符號(hào) 清除掉，方法是把光標(biāo)置于該單元格內(nèi)或選中該單元格，再切換到【代碼】視圖，把<td width="5"> </td>代碼中的 刪除即可。
第4步，刪除空格符號(hào) 之后，設(shè)置的小單元格效果就可以立即顯示出來(lái)。然后設(shè)置第2個(gè)單元格寬度為1像素，背景顏色為淺灰色#DDDDDD，同樣也需要把代碼中的空格符號(hào) 刪除。這樣就可以制作一個(gè)短豎線效果。
第5步，通過(guò)設(shè)置第1個(gè)單元格的寬度來(lái)調(diào)整豎線的橫向位置；通過(guò)設(shè)置表格的高度來(lái)調(diào)整豎線的長(zhǎng)短；通過(guò)設(shè)置該單元格的寬度來(lái)調(diào)整豎線的寬度；通過(guò)設(shè)置該單元格的背景顏色來(lái)設(shè)置豎線的顏色。
2. 制作橫線
第1步，橫線的制作方法要簡(jiǎn)單點(diǎn)。選中第2行的單元格。然后在【屬性】面板中設(shè)置單元格高度為2像素，背景顏色為淺灰色#CCCCCC。
第2步，切換到【代碼】視圖，刪除單元格中的空格符號(hào) 。
第3步，以同樣的方式制作豎線和橫線，注意灰度和寬度的變化。
第4步，在這些直線單元格中輸入導(dǎo)航文本和圖像。
當(dāng)前文章標(biāo)題：案例實(shí)戰(zhàn)：應(yīng)用表格
當(dāng)前URL：http://mnamateurbaseball.com/news/wzzz/3114.html
上一篇：設(shè)置表格屬性
下一篇：藝術(shù)化處理圖像
