首 页 网络编程
网页制作 图形图象 操作系统 冲浪宝典
软件教学 认证考试

网络安全 网络办公 行业资讯 评测对比
您当前位置:站长天空 -> 操作系统-> Windows 2003教程
在dreamweaver中精细化你的表格外观_dreamweaver教程
作者:网友供稿 点击:0
推荐
西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!可在线rar解压,自动数据恢复设置虚拟目录等.免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金
站内搜索
文章页数:[1] 

表格无疑是网页制作中最为重要的一个对象,因为通常的网页都是依靠表格来进行版面布局和各元素组织的,它直接决定了网页是否美观,内容组织是否清晰。但很多朋友常常忽视对表格的研究,而把目光投向其他的层、图片、特效等等,其实合理的利用表格可以方便的美化你得页面,我们也常常听到有朋友抱怨表格作出的页面单调、粗糙、缺乏变化,也常常听到有人问如何作出1个像素的表格边框。其实在Dreamweaver中我们可以非常方便的精细化你的表格,从而使你的网页更加美观精细。我们将分下面三个方面介绍如何在Dreamweaver中精细化你的表格。

一、利用属性面板。


图一
首先我们需要了解两个表格属性面板上的参数:CellPad和CellSpace。如图一所示,CellPad是指表格中两个单元格之间的距离,CellSpace是指每个单元格与它中间的内容之间的间隔距离。通过改变这两个参数,并配合背景色彩的变化,可以方便的做出1像素的表格边框。
  1、使用Object面板插入一个表格,定义表格宽、高及行数和列数。注意此时Dreamweaver中插入表格的默认CellPad和CellSpace、Border都为0。如图二;

图二
2、在属性面板中定义表格的Border为0,CellPad为5(这项可使单元格中的内容与单元格边缘之间保持5个像素);CellSpace为1(此项使得单元格之间保持1个项素的间距)。如图三; 

图三
3、设置表格的背景色#999999,如图四; 

4、设置单元格的背景色#FFFFFF,如图五;

图五
5、在浏览器中预览一下效果,我们可以看到表格呈现一个像素的边框,如图六; 

图六

二、利用表格嵌套。
  还是上面的主要原理,我们在利用表格之间的互相嵌套,就可以实现更多的效果。
  1、首先我们绘制一个表格,参照前面的例子设定此表格的CellPad和CellSpace的数值和颜色。具体效果如图七; 

图七
 2、接下来绘制另一个单行单列的表格,设置CellPad=2,CellSpace=1具体参数如图八; 

图八
3、将第一步中作好的表格移动到第二步中的表格中,此时的表格外观如图九;

图九
我们看到此表格具有双线外框,单线内框。
  4、再修改第二步中的表格为单行双列,在每个单元格中都放置一个第一步中的表格,最后的表格外观如图十;

图十

的重新定义,单独定义一个.tdstyle样式,具体参数如图十三;

  注意在这里我们定义了顶端和下端的边框宽度为1像素,左右两边的为0。
  4、最后的表格效果见图十四;

(图十五)
  此时表格呈现类似立体的效果。
  6、上面这个表格感觉不太完美,整个表格的右边和下方无边框。我们可以再定义一个样式.table1,定义此样式的四边都为1像素,并将它附给 ,此时表格外观如图十六;

小结:合理利用上面介绍的表格技巧,可以非常方便的创造各种常见的表格样式,从而达到美化你的页面的目的。而样式表的运用更加扩充了表格的样式外观,配合高浏览器的支持,可以实现更加多样的效果,如虚线、立体线、等等。个人感觉在商业网站的设计中,更多的使用表格可以整加页面层次,同时可以使页面简洁大方,但也要提醒大家在表格嵌套时的嵌套层次不要超过三层。


文章整理:站长天空 网址:http://www.z6688.com/
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

文章页数:[1] 


放大字体显示 缩小字体显示 打印文章 推荐给朋友
热门文章
·c#自定义控件开发实例(1)-.NET教程,C#语言
·为DataGrid添加CheckBox控件-.NET教程,组件控件开发
·windows 2003 64位正式版抢先体验
·显示你个性的鼠标指针-网页设计,HTML/CSS
·水晶报表中子报表的数据绑定问题-.NET教程,报表/图形/Office
·windows 2003组策略和安全模板的应用
·快速关闭windows 2003的三种方法
·数据库设计范式(实例)-数据库专栏,SQL Server
·windows 2003服务器防止海洋木马的安全设置
·《用C#和数据库实现无限级分类法》修正程序-.NET教程,C#语言
最新文章
·对.net framework 反射的反思_asp.net技巧
·google工具条要跟pagerank说再见?_google推广
·windows vista为什么不允许两个用户同时登录_windows vista
·田锋林:seo博客细节调整_seo网站优化
·将ssh与php相连接 确保传输数据的安全_php技巧
·photoshop照片合成实例:添加烟花_photoshop教程
·深入了解flash as中的setinterval方法_flash教程
·feedburner的rss广告收益分析_网赚技巧
·如何允许google的抓取工具访问我的需要登录的网页_网赚技巧
·王通:adsense出现的一些严重问题_网赚技巧
相关主题
  • 在dreamweaver中插入有颜色的直线_dreamweaver教程
  • 在dreamweaver中如何使用library_dreamweaver教程
  • 在dreamweaver中应用css样式表技巧两则_dreamweaver教程
  • 在Dreamweaver MX中应用“占位图形”-网页设计,Dreamweaver
  • 在Dreamweaver中自动设置网页的水平线颜色-网页设计,Dreamweaver
  • 西部数码虚拟主机

    友情链接
    CNNIC 西部数码
    万网 自助建站
    虚拟主机 asp空间
    域名注册 域名
    域名申请 主页空间
    论坛空间 网站空间
    国际域名 虚拟空间
    空间租用 DDOS防火墙
    成都主机托管 四川主机托管
    主机租用 服务器租用
    网站目录 自助建站
    虚拟主机 网址大全
    软件下载
    自助链接
    虚拟主机资讯 特价虚拟主机
    版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
    关于我们:站长天空:专业提供最新的站长资讯、在线教程、虚拟主机权威评测、虚拟主机性能对比、网站制作教程,开发教程,站长工具。包括网页制作教程、冲浪宝典、编程参考、操作系统、软件教学、行业动态等。
    特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
    发表评论 打印  刷新     关闭