melody

          成為最優(yōu)秀的自己
          數(shù)據(jù)加載中……
          轉(zhuǎn) 建立 立體表格
           表格是網(wǎng)頁內(nèi)應(yīng)用較多的東東,但一般我們只是用它來定位網(wǎng)頁中的模塊和排版文字。其實(shí)表格用好了還可以做出很多漂亮的效果,如圖一,承載文字的表格有一種看似立體的感覺。下面就來介紹一下這種立體表格的制作方法。


          圖一

            表格有立體的感覺的全是因?yàn)樵诒砀竦挠疫吅拖逻呌袦\黑色的陰影。所以我們只要實(shí)現(xiàn)了陰影就可以實(shí)現(xiàn)這種效果?,F(xiàn)在我們就開始具體講述制作過程。在Frontpage2000中新建一個(gè)表格,選擇菜單“表格”-“屬性”-“表格”,在窗口內(nèi)將表格的寬度設(shè)置為150象素;高度設(shè)置為200象素;邊框粗細(xì)設(shè)置為0;將單元格邊距設(shè)置為0,而單元格間距為1,如圖二所示。


          圖二

            完成以上設(shè)置后將表格的背景色設(shè)置為黑色,但表格內(nèi)的單元格的背景色設(shè)置為白色,完成以后就回出現(xiàn)如圖三所示的單象素黑色邊框效果。


          圖三

            接下來的工作就是要為右邊和下邊的黑色邊框制作陰影,我們使用CSS樣式的功能來實(shí)現(xiàn)。在圖二所示的選項(xiàng)窗口內(nèi)點(diǎn)擊“樣式”按鈕繼續(xù)選擇“格式”-“邊框”。在邊框與陰影選項(xiàng)框內(nèi),分別將樣式選擇為“實(shí)線”;顏色選擇為“灰色”;并在預(yù)覽選項(xiàng)內(nèi)將下邊和右邊的邊框應(yīng)用按鈕選中,如圖四所示。


          圖四

            點(diǎn)擊“預(yù)覽”,你要的立體表格效果就出來了。(注明:我們?cè)谥谱鞒鰜淼淖罱K效果可能和圖一所示略有出入,這是因?yàn)槲覀兪紫戎谱鞒隽巳鐖D三的單象素黑色邊框,這樣做的效果會(huì)更明顯,更有立體感。)

            在這里我們還給出在Dreamweaver內(nèi)定義的樣式代碼,因?yàn)镕rontpage和Dreamweaver的代碼機(jī)制有差別,相對(duì)之下Dreamweaver對(duì)樣式代碼寫得更規(guī)范更合理。表格代碼如下:

          <TABLE width="150" height="200" cellpadding="0" cellspacing="1" bgcolor="#000000" style="border-right-width:2px;border-bottom-width :2px;border-right-style : solid;border-bottom-style : solid;border-right-color : #a7a7a7;border-bottom-color : #a7a7a7;">

            其中style以后的為樣式代碼“border-right-width”和“border-bottom-width”以后的2px代表陰影邊框的寬度為2象素,border-right-color和border-bottom-color以后的#a7a7a7代表陰影線框的顏色代碼,你也可以使用其他的顏色代碼替換(具體請(qǐng)參照HTML顏色表)。試著自己改變一下,根據(jù)你的需要制作效果。

          posted on 2008-03-20 16:48 meilody 閱讀(141) 評(píng)論(0)  編輯  收藏


          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 金乡县| 宝山区| 吕梁市| 呼和浩特市| 宝丰县| 邮箱| 宝应县| 比如县| 收藏| 大化| 贵定县| 惠东县| 郁南县| 晋江市| 崇明县| 桐梓县| 陆河县| 东港市| 刚察县| 资溪县| 云林县| 偃师市| 洛川县| 泗阳县| 定安县| 三原县| 高邑县| 拜泉县| 象州县| 波密县| 耿马| 方正县| 绍兴县| 抚远县| 万安县| 永吉县| 湖州市| 东丽区| 赞皇县| 毕节市| 上思县|