当前位置:主页 > 设计教程 > Dreamweaver > 正文

bet98博亿堂 首页_博亿堂官网首页|博亿堂bet98官网

来源:|作者:|时间:2011-07-12|人气:|编辑:

方法一:用图片制作圆角表格

这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。

①先用photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分,复制它。
②不要取消选取,直接新建一副图像,photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后,保存为WEB所用格式即可。

③重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角。
④打开网页制作软件,这里以Dreamweaver为例。插入一个一行三列的表格,设置其 CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif,第三列插入图片3.gif,并设置单元格的高度和宽度与图 片一致。设置第二列的背景颜色为与圆角图片一致的颜色,设置宽度为整个表格的宽度减去两个图片的宽度,并打开源代码察看器,删除这列中的字符” ” (Dreamweaver会自动在每个单元格中插入此字符,若不删除会撑大表格)。依葫芦画瓢,做好下半部分的圆角。

⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格,CellPad、 CellSpace和Border属性值都为0,宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色,宽度为1像素,并打开源代码察看 器,删除这两列中的字符” ”。到这,一个圆角表格就做好了,您可以在第二列中添加您想要的内容。

 

方法二:利用VML技术

用VML技术可以更容易地制作一个圆角表格,而且还有投影哦!

①修改表识为

②在区域添加如下代码:

〈style>〈br>v\:* {behavior: url(#default#VML);}〈br〉〈/style>

③在您要添加圆角表格的地方加入以下代码:br>

这里输入表格中的内容

您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。

这样,一个有投影的圆角表格就制作好了。


这种添加圆角表格的方法虽然很方便,但是它不能很好的适应每个浏览器版本,且在设计时是以层的方式现实,不利于版面设计,所以尽量使用第一种方法。

    最近更新
    简而精致的MILKO牛奶包装欣赏
    简而精致的MILKO牛奶包装欣赏 分 类: 包装设计
    日 期: 2015-07-14
    人 气: 93
    Irina Vinnik精美的童话书籍设计欣赏
    Irina Vinnik精美的童话书籍设计欣赏 分 类: 封面设计
    日 期: 2015-07-14
    人 气: 113
    LOnde戏剧艺术中心2015-2016宣传册设计
    L'Onde戏剧艺术中心2015-2016宣传册设计 分 类: 画册设计
    日 期: 2015-07-14
    人 气: 94
    耐克篮球探索主题立体字设计
    耐克篮球探索主题立体字设计 分 类: 字体设计
    日 期: 2015-07-14
    人 气: 96
    耐克Kobe release系列视觉设计
    耐克Kobe release系列视觉设计 分 类: bet98博亿堂 首页作品
    日 期: 2015-07-13
    人 气: 265