学院首页 新闻频道 学院概况 网络学院 院系设置 师资介绍 教学成果 招生就业 实践基地 校园文化 视频 论坛
  ◎    网络学院首页
  ◎    影视动画
  ◎    动漫设计
  ◎    影视广告
  ◎    视觉传达
  ◎    环境艺术
  ◎    人物形象
  ◎    电脑艺术
  ◎    电视摄像
  ◎    电视制作
  ◎    多媒体
  ◎    摄影专业
  ◎    播音主持
  ◎    影视表演
  ◎    新闻采编
  ◎    编导专业
  ◎    电视网络
  ◎    电视制片
  ◎    师生交流
  ◎    意见采纳
  ◎    我要投稿
 
 
    您认为网络学院那些栏目仍然需要加强?
专业新闻
理念论文
软件教程
作品赏析
专业资源

  
    您最想了解哪一类型的专业知识?
理念文献
软件教程
素材资源
作品赏析

  



美化网页 制作精美圆角表格
作者:ezIT    文章来源:http://tech.163.com    点击数:    更新时间:2006-2-21

做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

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

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

①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。

②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后,保存为WEB所用格式即可。

③重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角。(如图2)

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

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

方法二:利用VML技术

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

①修改表识为

②在区域添加如下代码:

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

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

这里输入表格中的内容

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

这样,一个有投影的圆角表格就制作好了(如图4)。

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

文章录入:网络部03    责任编辑:网络部03 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
      相 关 文 章
    3DS MAX教程_用3DS MAX 制作苹果香蕉
    Photoshop 制作花色字
    用AE制作精美水晶地球
    Fireworks 制作铁锈字
    《洛奇帕拉丁》精美官方壁纸
    Photoshop做精美透明蜡烛
    Photoshop表现精美玻璃花瓶透明质感
     
    最新热门图片  

    论情爱图形在平面广告…

    浅析CI设计中的企业文…

    欧普艺术代表人物瓦萨…

    汉字的发生与平面中的…
    最 新 热 门
    最 新 推 荐
    关于我们 广告服务 法律声明 联系方式 常见问题 中国生活网 留言 论坛 帮助
    广播电影电视管理干部学院版权所有 Copyright 2001-2006 ARFT.net All Rights Reserved
    感谢动易网络科技有限公司友情提供技术支持,山西艺龙影视信息中心(有限公司)运营