網(wǎng)站設(shè)計(jì)離不開表格的應(yīng)用，深圳網(wǎng)站制作公司前端設(shè)計(jì)師在前面的文章中與各位分享過如何處理表格制作時屬性的問題，本文主要是通過實(shí)際操作的的方式繼續(xù)與各位分享我們的設(shè)計(jì)師在網(wǎng)頁設(shè)計(jì)時對于表格處理以及處理過程中需要注意的一些問題。
網(wǎng)站設(shè)計(jì)案例實(shí)戰(zhàn)：應(yīng)用表格
表格素有網(wǎng)頁設(shè)計(jì)“靈魂”之稱，當(dāng)然在標(biāo)準(zhǔn)設(shè)計(jì)過程中，很多效果可以直接使用css快速實(shí)現(xiàn)，但即便如此，其作用不可小視。下面深圳網(wǎng)頁設(shè)計(jì)師結(jié)合實(shí)例介紹如何巧妙運(yùn)用表格、單元格屬性設(shè)計(jì)富有創(chuàng)意的網(wǎng)頁布局效果。
1.網(wǎng)頁制作圓角表格
圓角表格在網(wǎng)頁布局中使用頻率最高。由于表格沒有提供直接設(shè)置圓角的屬性．制作圓角表格需要間接方法來完成，實(shí)現(xiàn)圓角表格的方法有很多種，如圖像法、像素法、編程法，其中圖像法使用范圍最廣。用圖像制作圓角表格的步驟如下。
【操作步驟】
第1步，使用Photoshop設(shè)計(jì)左右對稱的圓角圖標(biāo)，設(shè)計(jì)寬度為8像素，高度為60像素，使用紅色(#DA2129)進(jìn)行填充，如圖6.27所示。
第2步，啟動Dreamweaver．新建文檔，保存為index.html。在頁面中插入個表格，主要設(shè)置：1行3列，大小為800×60像素，居中顯示。
如圖6.28所示。
提示：使用表格進(jìn)行網(wǎng)頁布局時，一般要設(shè)置【表格】對話框中的【邊框粗細(xì)】文本框、【單元格邊距】文本框和【單元格司距】文本框都為0。也可以在插入表格之后，在【屬性】面板中設(shè)置【填充】、【『距】和【邊框】文本框?yàn)?。
第3步，在表格兩端的單元格中分別插入圓角圖標(biāo)，并設(shè)置單元格寬度和圖標(biāo)寬度相同，如圖6.29所示。在制作圓角圖標(biāo)時應(yīng)先設(shè)置好圖像大小和表格尺寸的配套。
第4步．設(shè)置中間單元格的背景顏色為源紅色，使其與和圓角國標(biāo)顏色保持致，如圖6.29所示。
網(wǎng)站設(shè)計(jì)表格處理實(shí)際操作案例示意圖插入圓角國標(biāo)和設(shè)置中間單元格背景色
第5步，在中間單元格內(nèi)插入個3行3列的表格。用該表格來布局標(biāo)題欄，第1列用來控制標(biāo)題與左側(cè)距離，中間列用來繪制白色豎線，3列分別用來輸入標(biāo)題和導(dǎo)航欄目，設(shè)置效果如圖6.30所示。
網(wǎng)頁設(shè)計(jì)表格處理示意圖6.30插入布局表格
第6步，以同樣的方式在下面再插入個表格，背景顏色設(shè)置為淺灰色，然后輸入深灰色的導(dǎo)航文本，如圖6.31所示。
網(wǎng)站設(shè)計(jì)表格圓角處理示意圖6.31制作灰色圓角表格
2.網(wǎng)站設(shè)計(jì)如何巧做表格細(xì)線
制作網(wǎng)頁線條方法多樣，簡單總結(jié)如下。
（1）使用圖像法：用Photoshop制作直線，然后插入網(wǎng)頁。
（2）在Dreamweaver中選擇【插入】【水平線】命令插入，即使用<hr>標(biāo)簽繪制水平直線。
（3）用css定義元素邊框來制作直線，例如，div{border:solidipx#FFOOOO，）代碼可以繪制紅色l像素寬的實(shí)線。
（4）通過設(shè)置表格邊框。
上述方法各有利弊．可根據(jù)個人需要進(jìn)行選擇。在css之前，用表格制作細(xì)線比較常用。下面介紹種獨(dú)特方法，通過設(shè)置單元格背景色來顯示直線，這種方法方便簡單，又具有非常大的靈活性和實(shí)用性。
【操作步驟】
第1步，打開操作網(wǎng)頁文檔index.html。在標(biāo)題欄下面插入個l行3列的表格，寬800像素．居中顯示．實(shí)現(xiàn)網(wǎng)頁王體的布局．即一欄三列的設(shè)計(jì)格局，如圖6.32所示。
網(wǎng)站設(shè)計(jì)對于表格西咸處理圖6.32插入主體表格
第2步，設(shè)置第1個單元格寬度為180像素，在該單元格中插入個14行1列的表格，寬度為94%．居中顯示，如圖6.33所示。
深圳網(wǎng)站設(shè)計(jì)公司對網(wǎng)頁如何處理表格圓角以及表格細(xì)線處理的技巧本文就介紹到這里，喜歡本站的朋友請持續(xù)關(guān)注本站。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。
