網(wǎng)站設(shè)計(jì)公司在前面的文章中與各位分享了網(wǎng)頁制作處理表格屬性的實(shí)際操作經(jīng)驗(yàn)分享，深圳網(wǎng)站設(shè)計(jì)公司今天主要與各位就網(wǎng)站制作豎線與圖像藝術(shù)化的處理經(jīng)驗(yàn)進(jìn)行分享。
網(wǎng)站設(shè)計(jì)豎線處理第1步，在第一個(gè)單元格中插入個(gè)1行3列的表格，寬為100%，高為20像素。設(shè)置插入表格的第1個(gè)單元格寬為5像素。
網(wǎng)站設(shè)計(jì)豎線處理第2步，由于Dreamweaver在插入表格時(shí)自動(dòng)在每個(gè)單元格中嵌入個(gè)空格符號(hào) ，，用來撐大單元格，當(dāng)插入元素時(shí)，空格消失。所以在沒有輸入任何元素時(shí)，單元格最小寬度為10像素，最小高度為13像素，如圖6-34所示（放大為400%后效果）。
網(wǎng)頁設(shè)計(jì)豎線處理示意圖6-34插入單元格最小寬和高
網(wǎng)站設(shè)計(jì)豎線處理第3步，當(dāng)要設(shè)置單元格高或?qū)挒樽钚≈禃r(shí)，就應(yīng)該把這些空格符號(hào) ．清除掉，方法是把光標(biāo)置于該單元格內(nèi)或選中該單元格，再切換到【代碼】視圖，把<tdwidth:”5”> ，</td>代碼中的 ，刪除即可，如圖6-35所示。
網(wǎng)頁設(shè)計(jì)豎線處理實(shí)操示意圖6-35插入單元格最小寬和高
網(wǎng)站設(shè)計(jì)豎線處理第4步，刪除空格符號(hào) ，之后，設(shè)置的小單元格效果就可以立即顯示出來。然后設(shè)置第2個(gè)單元格寬度為1像素，背景顏色為淺灰色#DDDDDD．同樣也需要把代碼中的空格符號(hào) ，刪除。這樣就可以制作個(gè)短豎線效果。
網(wǎng)站設(shè)計(jì)豎線處理第5步，通過設(shè)置第1個(gè)單元格的寬度來調(diào)整豎線的橫向位置；通過設(shè)置表格的高度來調(diào)整豎線的長(zhǎng)短；通過設(shè)置該單元格的寬度來調(diào)整豎
線的寬度；通過設(shè)置該單元格的背景顏色來設(shè)置豎線的顏色。
網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)之制作橫線
第1步，橫線的制作方法要簡(jiǎn)單點(diǎn)。選中第2行的單元格，如圖6-35所示。然后在【屬性】面板中設(shè)置單元格高度為2像素，背景顏色為淺灰色#ccccce。
第2步，切換到【代碼】視圖，刪除單元格中的空格符號(hào) ，。
第3步，以同樣的方式制作豎線和橫線，注意灰度和寬度的變化，效果如圖6.36所示
網(wǎng)站設(shè)計(jì)線條處理實(shí)操示意圖6.36制作富有變化的直線組合
第4步，在這些直線單元格中輸入導(dǎo)航文本和圖像，效果如圖6.37所示。
網(wǎng)站設(shè)計(jì)實(shí)操示意6.37左側(cè)導(dǎo)航欄目制作效果
網(wǎng)站設(shè)計(jì)如何藝術(shù)化處理圖像
通過設(shè)置表格背景圖像屬性可以制作些圖像特效，例如，給圖像鑲邊、遮掩部分圖像實(shí)現(xiàn)圖像的虛化顯示等效果。本例就是利用這個(gè)方法實(shí)現(xiàn)制作圖像殘缺效果，效果如圖6.38所示。
網(wǎng)站設(shè)計(jì)藝術(shù)化處理實(shí)操示意圖6.38表格制作的圖像特效
【操作步驟】
第1步，在主體表格的第2個(gè)單元格中插入個(gè)20行20列的表格，設(shè)置大小300×300像素。然后設(shè)置背景圖像，效果如圖6.39所示。設(shè)置表格屬性的代碼如下：
網(wǎng)站設(shè)計(jì)藝術(shù)化處理圖像實(shí)操示意圖6.39插入多行多列表格
第2步，拖選所有單元格，設(shè)置所有單元格大小為15×15像素，背景為白色，則把表格的背景圖像遮蓋住，如圖6.40所示。
第3步，在上面雕刻，按住Ctrl鍵單擊選中要鏤空的單元格，然后在【背景】文本框中刪除設(shè)置的白色即可，如圖6.41所示。利用這種方式可以創(chuàng)意設(shè)計(jì)出各種圖案和變形，猶如繪制像素畫。
深圳網(wǎng)站設(shè)計(jì)公司對(duì)于設(shè)計(jì)師如何處理表格豎線與藝術(shù)化處理圖像的實(shí)際操作經(jīng)驗(yàn)分享本文就到這里。下期我們會(huì)繼續(xù)就如何只做立體表格的經(jīng)驗(yàn)進(jìn)行分享。博納網(wǎng)絡(luò)編輯整理。
