首页 | 网页设计 | w3c标准 | flash动画 | 平面设计 | 经典文章 | 特约专题 | 资源下载 | 健康频道 | 重庆品牌网站 | 留言簿 | 
技术文章  资源下载 经典素材  社区论坛
   
 您现在的位置: vi设计在线 >> 经典文章 >> 网页设计 >> 网页设计师教程 >> 正文  
  制作精美圆角表格         
[ 作者:陈老师    转贴自:本站原创    点击数:9769    更新时间:2005/11/28    文章录入:admin

减小字体 增大字体

 

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

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

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

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

  

 



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

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

  



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

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

  

 

[1] [2]  下一页

 上一篇文章: 网页制作小技巧:还网页链接“清白”
 下一篇文章: 点析网站发展三阶段
发表评论】【告诉好友】【打印此文】【关闭窗口


技术文章  资源下载
经典素材  社区论坛
 中大型美容美发店老…[1060]
 重庆多达学习俄语培…[2288]
 重庆恒祥广告有限公…[1990]
 重庆市南方阻燃电线…[2402]
 重庆舞美灯光音响有…[3144]
 重庆德鼎滤油机有限…[1908]
 重庆民生建材有限公…[2349]
 重庆集元科技有限公…[4128]
 重庆倍润商贸有限公…[2015]
 重庆腾达展览有限公…[3081]
 帝一网络创始人宣…--[3177]
 重庆vi设计在线祝…--[2740]
 重庆帝一网络书生…--[2854]
 馋嘴鸭的起伏和经…--[2999]
 机器感觉“卡”的…--[2929]
 ActionScript3打造…--[5756]
 在ASP文件中读取H…--[7238]
 vi设计经典案例--[63824]
 帅到掉渣-爆笑版勇…--[7065]
 一个女孩写的经典…--[6826]
没有相关文章
 (只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    没有任何评论
设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 重庆网站建设 | 
版权所有: vi设计在线  © 2005-2018 网站备案序号:渝ICP备06003824号
技术支持:帝一网络(重庆网站建设专家)