DreamWeaver表格妙用-线框制作详解(5)_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

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

作者：闵涛文章来源：闵涛的学习笔记点击数：588 更新时间：2009/4/23 12:22:43

4> 隔距边框的制作

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

　　下面是相应的制作过程，（以制作三框隔距为例说明）

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

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

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

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

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

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

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

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

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

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程： DreamWeaver表格妙用-线框制作详解(4)

下一篇教程： Dreamweaver 4 简明教程(一、Dreamweaver 简介)

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……