美化网页制作精美圆角表格

日　期：2007-03-25 来　源：站长信息网阅读:

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

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

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

①先用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）。

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

上一篇：JSP渐进学习教程1 下一篇：中国美女模特汤芳全集

收藏本文到:

查看全部建站技巧内容

JSP渐进学习教程1　 2007-03-25 10:38:26
客户端（client）与服务器端(server)的概念服务器：广义地说，服务器分两种（硬件服务器、软件服务器）硬件服务器：指相对PC机而言，性能和稳定性较好的、采用特殊硬件的...[阅读全文]
一个IP建多个Web站点--主机头名法　 2007-03-25 10:38:25
由于各种原因，我们有时候需要在一个IP地址上建立多个web站点，在IIS5中，我们可能通过简单的设置达到这个目标。在IIS中，每个 Web 站点都具有唯一的、由三个部分组成的标...[阅读全文]
DreamWeaver 超级技巧　 2007-03-25 10:38:23
DreamWeaver 超级技巧 1. 用Dreamweaver 4.0轻松设计会自动弹性调整的网页首先需要保证的是你的页面内容采用了表格的格式，然后打开你要编辑的页面，按“Ctrl+F6”或者菜...[阅读全文]
如何做好免费电影网站　 2007-03-25 10:38:22
2006年都过了一半了，一直都在东忙西忙的，今天忙里偷闲写一点东西来和朋友们一起探讨一下怎么来做好一个免费电影网站，其中大多是自己的一些对免费电影网站的一起看法和经...[阅读全文]
McAfee：08年将有40万种病毒严重病毒减少　 2007-03-25 10:38:20
IT安全公司McAfee表示，目前尽管大规模病毒泛滥的可能性已经很小，但恶意软件的数量却一直在不断增加，预计到2008年可达40万种。 McAfee周二在自己的安全威胁数据库中加入...[阅读全文]
Ebay高层变动其旗下PayPal部门总裁离职　 2007-03-25 10:38:19
Ebay公司日前高层发生了变动，其旗下的线上支付服务部门PayPal总裁杰夫.乔丹将离开公司。乔丹于1999年加盟eBay，在2000年到2004年期间，他一直主管eBay北美业务，从2004年...[阅读全文]
WEB设计经验　 2007-03-25 10:38:18
作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中心、产品目录、配置文件中心、搜索和注册等联机...[阅读全文]
网页在线播放器代码大全　 2007-03-25 10:38:16
.avi格式 object id=video width=400 height=200 border=0 classid=clsid:CFCDAA03-8BE4-11cf- B84B-0020AFBBCCFA param name=ShowDisplay value=0 param name=ShowControl...[阅读全文]
网站生成静态页面，及网站数据采集的攻、防原理和策略　 2007-03-25 10:38:13
关于本文：本着互联网共享主义精神，特写此文献给建站新手，授人以鱼，不如授人以渔，本文所讲的只是方法和原理，希望大家看完此文，能够从中得到些帮助和启发。本文从一...[阅读全文]
IIS安装配置全攻略　 2007-03-25 10:38:12
Windows 2000 Server、Windows 2000 Advanced Server 以及 Windows 2000 Professional 的默认安装都带有 IIS ，也可以在 Windows 2000 安装完毕后加装 IIS。 IIS 是微软出...[阅读全文]
百度总裁李彦宏教你创业七招　 2007-03-25 10:38:11
第一招：向前看两年当年李彦宏在美国抛弃唾手可得的博士帽，艰苦创业的时候，美国IT界最火的是电子商务。无数人拼了老命想要挤上这辆被看好的网络列车，甚至不惜抛掉自己...[阅读全文]
网页设计中的审美需求　 2007-03-25 10:38:10
网页设计是一们新兴的设计类和网络的交叉学科，近几年随着网络的发展而逐渐收到人们的重视，它本身以网络为载体,把各种信息以最快捷、方便的方式传达给受众。在这种标准的...[阅读全文]