动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   DreamWeaver → 阅读文章

 DreamWeaver表格妙用-线框制作详解(5)

作者来源: 
阅读 数 285 人次 , 2006-4-19 16:08:00 

4> 隔距边框的制作


  “隔距边框”在网页中主要用来排列各个栏目或频道的项目列表用的,为了方便大家理解,笔者先把制作完成以后的效果图给大家展示下,如下:

DreamWeaver表格妙用-线框制作详解(5)


  下面是相应的制作过程,(以制作三框隔距为例说明)


  首先在网页中插入一个1行3列的表格对象,在插入过程中直接把“Border”设定为0,“CellSpace”设定为2,“CellPad”设定为1,如图


DreamWeaver表格妙用-线框制作详解(5)


  注意:在这里进行设置,同属性板中是完全等效的。


  鼠标按住左键不放,在各个单元格上拖动,同时选中3个单元格对象。在属性板中将其“Bgcolor”设定为“红色”,注意该颜色即隔距边框的颜色。


  为了实现隔距的效果,我们这里要用到“嵌套表格”的制作了。笔者先告诉大家一些设计“嵌套”表格时的注意事项,在单元格中插入表格时,最好预先将单元格内容的定位属性“Horz”(左右位置)及“Vert”(上下位置)分别设定为“Left”和“Top”,这样避免再次调节嵌套表格大小时的不必要的麻烦,直接拖拉右下角即可实现。如下

DreamWeaver表格妙用-线框制作详解(5)


  依次在三个单元格中插入一个表格对象,将“Border”,“CellSpace”,“CellPad”全部设定为“0”,同时在属性板中将每个表格的背景颜色均设定为同网页背景色“白色”,另外还有一点就是,将“Width”(宽)和“Height”(高)均设定为比例显示状态下的“100%”,这样可以使它根据大小自动充满整个单元格。


  现在可以预览查看效果了。


  在隔距边框的制作中,与细线边框的不同之处在于边框的宽度1是通过“CellPad”属性来实现的,而不是前面的“CellSpace”,这里的“CellPad”指的是单元格中内容与单元格的边界之间的距离,无疑本例中被我们作为内容插入的就是另外的三个表格。那么调整“CellSpace”可以改变各个边框的间距,比如“6”单位的效果


DreamWeaver表格妙用-线框制作详解(5)


  同样,类似的方法你可以制作出竖放的隔距边框。


  上面我们细致的剖析了几种网页中常见边框类型的制作过程,原理及调整方法。效果对比的形式相信更加有利于大家认识它们各自的差别,从而加深印象,当然更希望大家能够按照类似的设计思路找到更多的边框效果。

  
 本文Tagsdreamweaver  
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:DreamWeaver表格妙用-线框制作详解(4)
· 下一篇:DreamWeaver,经典50问(目录)
· Ultradev专题使用存储过程给子表格增加多个记录
· DW MX 2004新功能:浏览器检测
· DW MX 2004 CSS 属性详解
· 十六则Dreamweaver使用快技法
· Dreamweaver 2004 打造细线表格


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077