在網(wǎng)頁設(shè)計(jì)時(shí)通過設(shè)置表格背景圖像屬性可以制作一些圖像特效,例如,給圖像鑲邊、遮掩部分圖像實(shí)現(xiàn)圖像的虛化顯示等效果。本例就是利用這一方法實(shí)現(xiàn)制作圖像殘缺效果。
【操作步驟】
第1步,在主體表格的第2個(gè)單元格中插入一個(gè)20行20列的表格,設(shè)置大小為300×300像素。然后設(shè)置背景圖像。
設(shè)置表格屬性的代碼如下:
<table width="300" height="300" border="0" align="center" cellpadding="0" cellspacing="0" background="image/33.jpg">
第2步,拖選所有單元格,設(shè)置所有單元格大小為15×15像素,背景為白色,則把表格的背景圖像遮蓋住。
第3步,在上面雕刻,按住Ctrl鍵單擊選中要鏤空的單元格,然后在【背景】文本框中刪除設(shè)置的白色即可。利用這種方式可以創(chuàng)意設(shè)計(jì)出各種圖案和變形,猶如繪制像素畫。
立體表格主要通過網(wǎng)頁設(shè)計(jì)時(shí)的顏色的設(shè)置來實(shí)現(xiàn)。本例的立體表格效果如圖6.42所示。實(shí)現(xiàn)的具體步驟如下。
【操作步驟】
第1步,繼續(xù)以之前示例為基礎(chǔ),打開in-dex.html。選中插入的表格,設(shè)置主體表格的第3個(gè)單元格背景顏色為藍(lán)色(#667BD8),設(shè)置垂直對(duì)齊方式為頂端。
第2步,在該單元格中插入一個(gè)4行2列的表格,設(shè)置寬度為180像素,居中顯示
第3步,插入表格的第1行用來控制表格與頂部標(biāo)題欄的距離,合并第2行的兩個(gè)單元格,并設(shè)置合并單元格背景圖像,在設(shè)置之前應(yīng)把第2行高度設(shè)置為背景圖像的高度。
第4步,設(shè)置表格的最后一行和表格右側(cè)單元格為1像素高或?qū)挘尘邦伾珵榘咨?。并設(shè)置主體單元格背景顏色為淺藍(lán)色(#D6DFF7),高為200像素。
第5步,在設(shè)計(jì)網(wǎng)頁時(shí)以同樣的方式或復(fù)制上面制作的表格,就可以重復(fù)制作多個(gè)立體表格。
當(dāng)前文章標(biāo)題:藝術(shù)化處理圖像
當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/3115.html