占位图像 用户ID: 密码: 验证码: 登录 注册     占位图像
 
教育168搜索

a
频道信息
学前教育 基础教育
小学 初中
高中 高等教育
心理学 机械工程
园林 IT教育
办公软件 Director
Authorware 图形图象
FIREWORKS CORELDRAW
Maya PhotoShop
AutoCAD 3D
操作系统 Windows xp
Windows Vista Linux
Windows 2003 Windows 2000
FreeBSD 注册表
网站制作 FLASH
Dreamweaver CSS教程
装修设计 LightScape
装修风水 方案设计
英语 商务外语
素质教育 法制教育
企业培训
最新更新
·用Dreamweaver M
·Dreamweaver实用小
·Dreamweaver未必了
·Dreamweaver若干技
·Dreamweaver制作和
·Dreamweaver中空格
·Dreamweaver8对网
·用Dreamweaver制作
·Dreamweaver经典插
·Dreamweaver简单描
·通过Dreamweaver设
·学习Dreamweaver8
·Dreamweaver制作复
·用Dreamweaver8在
·利用Dreamweaver8
·Dreamweaver实例:
·Dreamweaver CS
·Dreamweaver插入F

点击排行
·使用ewebeditor上传
·DreamweaverCS3
·使用SoftArtisans
·巧用Dreamweaver轻
·扩展Dreamweaver:
·Dreamweaver8轻松
·在DW中插入Flash的参数
·Dreamweaver实用小
·Dreamweaver基础:
·Dreamweaver入门:
·如何用Dreamweaver
·用DreamweaverMX
·Dreamweaver CS
·Dreamweaver:从网
·用Dreamweaver8在
·Dreamweaver经典插
·关于Dreamweaver乱
·Dreamweaver教程:

在Dreamweaver中精细化你的表格外观
发布日期:2006-6-15  浏览:401次
关键字:

表格无疑是网页制作中最为重要的一个对象,因为通常的网页都是依靠表格来进行版面布局和各元素组织的,它直接决定了网页是否美观,内容组织是否清晰。但很多朋友常常忽视对表格的研究,而把目光投向其他的层、图片、特效等等,其实合理的利用表格可以方便的美化你得页面,我们也常常听到有朋友抱怨表格作出的页面单调、粗糙、缺乏变化,也常常听到有人问如何作出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像素,并将它附给

,此时表格外观如图十六;

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

关键字:

相关信息 用户评论
·用Dreamweaver MX创造网页鼠标样式
·Dreamweaver实用小技巧
·Dreamweaver未必了解的5个小技巧
·Dreamweaver若干技巧
·Dreamweaver制作和套用模板的技巧
·Dreamweaver中空格问题的探讨
·Dreamweaver8对网站文件进行检查和整理
·用Dreamweaver制作网页时关于文字自动换行的小技巧
·Dreamweaver经典插件下载
·Dreamweaver简单描述制作网页的基本步骤
·通过Dreamweaver设计网页时组织CSS的建议
·学习Dreamweaver8了解掌握CSS层叠样式表
·Dreamweaver制作复杂交换图像
·用Dreamweaver8在网页中插入Flash视频
·利用Dreamweaver8掌握网页代码基本格式
·Dreamweaver实例:随机播放背景音乐
·Dreamweaver CS3 新功能描述
·Dreamweaver插入Flash添加透明或其他参数

 

更多评论

验证码:
验证码