Posted on 2010-09-22 00:30
石子路口 閱讀(258)
評(píng)論(0) 編輯 收藏 所屬分類:
網(wǎng)頁(yè)制作
這是最常用也是最通用的方法,它能很好地適應(yīng)各種瀏覽器和不同分辨率,大部分網(wǎng)頁(yè)都使用這種方法。
①先用Photoshop等作圖軟件繪制一個(gè)圓角矩形,再用“矩形選框工具”選取左上交的圓角部分(如圖1),復(fù)制它。
②不要取消選取,直接新建一副圖像,Photoshop會(huì)根據(jù)選取部分的高度、寬度自動(dòng)設(shè)置新建圖像的大小。張貼后,保存為WEB所用格式即可。
③重復(fù)步驟②,分別用“水平翻轉(zhuǎn)”工具和“垂直翻轉(zhuǎn)”工具,保存另外三個(gè)方向的圓角。(如圖2)
④打開(kāi)網(wǎng)頁(yè)制作軟件,這里以Dreamweaver為例。插入一個(gè)一行三列的表格,設(shè)置其CellPad、CellSpace和Border屬性值都為0。在第一列插入圖片1.gif,第三列插入圖片3.gif,并設(shè)置單元格的高度和寬度與圖片一致。設(shè)置第二列的背景顏色為與圓角圖片一致的顏色,設(shè)置寬度為整個(gè)表格的寬度減去兩個(gè)圖片的寬度,并打開(kāi)源代碼察看器,刪除這列中的字符” ”(Dreamweaver會(huì)自動(dòng)在每個(gè)單元格中插入此字符,若不刪除會(huì)撐大表格)。依葫蘆畫(huà)瓢,做好下半部分的圓角。
⑤再已插入的兩個(gè)表格中間再插入一個(gè)一行三列同寬的的表格,CellPad、CellSpace和Border屬性值都為0,寬度為100%。設(shè)置第一列和第三列背景顏色為與圓角圖片一致的顏色,寬度為1像素,并打開(kāi)源代碼察看器,刪除這兩列中的字符” ”。到這,一個(gè)圓角表格就做好了,您可以在第二列中添加您想要的內(nèi)容。(如圖3)
轉(zhuǎn)載于:http://tech.163.com/05/0922/09/1U8AMVOV00091589.html