网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

   
专 题 栏 目
相 关 文 章

更换Windows7驱动器图标
静音浏览,让嘈杂的网页
添加信任白名单 加快网页
丰富资讯时尚高效 网页迅
网页上玩QQ WebQQ第三期
网页资源轻松提取 腾讯T
格调网收购Windows美化大
Adobe CS4网页制作套装测
下载:Vista美化工具Viz
QQ直播网页改版 QQLive3

 
美化网页 制作精美圆角表格           
美化网页 制作精美圆角表格
作者:陈鹏 文章来源:eNet 点击数: 更新时间:2009-9-12 9:07:27
 




 

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

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

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

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

  



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

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

  


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

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

  


  
热门推荐: 化繁为简 QQ最实用的六大绝招 QQ2005 Beta3功能抢先使用评测



  

  方法二:利用VML技术

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

  ①修改表识为

  ②在区域添加如下代码:

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

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

  这里输入表格中的内容

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

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

  


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

热门推荐: 化繁为简 QQ最实用的六大绝招 QQ2005 Beta3功能抢先使用评测


文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客