教程/dreamweaver/提高 表格妙用-线框制作详解(5)

dreamweaver|教程|详解

隔距边框的制作

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

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

  首先在网页中插入一个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”单位的效果

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

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

时间: 2024-10-07 19:59:48

教程/dreamweaver/提高 表格妙用-线框制作详解(5)的相关文章

教程/dreamweaver/提高 表格妙用-线框制作详解(1)

dreamweaver|教程|详解 在DreamWeaver里,表格被更多的应用在布局网页,定位内容上.其实除了这些"大功能"的运用,通过各种变通的方法,表格还能实现很多在设计中一般难以达到的效果,下面将要给大家展示的"线框"制作就是一个很好的例子,当然它的巧妙运用还远不止此. "线框"对象在网页中是经常见到的,比如一条细线,一个方框等等都在包含之列.在某些效果的协调制作中,"线框"的修饰是必不可少的.然而让我们很遗憾的是,许

教程/dreamweaver/提高 表格妙用-线框制作详解(3)

dreamweaver|教程|详解 细线边框的制作 细线边框是网页中定位区分内容常用的一种方法,配合特定图片的使用,往往能够达到不错的效果,那么如何制作细线边框呢? 大家都知道,所谓细线边框,大体外观上就是一个简单的1行1列表格,那么我们直接把表格对象的Border值设定为1不就可以了吗?请看下面的制作效果: 同样在网页中指定位置插入一个单行单列的表格,用鼠标单击表格外框的任何一个部位以选中它,在属性板中将"Border"值设定为1,也可以同时将另外的"CellPad&quo

教程/dreamweaver/提高 表格妙用-线框制作详解(2)

dreamweaver|教程|详解 将Width的显示状态从"Percent"更改为代表实际大小的"Pixels",这样避免在窗口放缩时引起的错乱,OK,同时在网页编辑窗口中用鼠标选定表格,属性板如下: 这是默认状态下的表格属性设置,将其中的"Border","CellPad","CellSpace"值全部设定为0. 鼠标在表格内部空点,这时属性板已经自动切换到单元格的属性设置窗口,将单元格的"B

教程/dreamweaver/提高 表格妙用-线框制作详解(4)

dreamweaver|教程|详解 "粗"线边框的制作 有了上面介绍细线边框的制作基础,相信大家理解粗线边框就简单多了.粗线边框就是一种边框特别粗的效果,他往往配合其他网页元素来完成指定效果的. 在细线边框制作中,我们提到单纯将"Border"设定为1达不到"细化"要求,那么粗度应该没有问题了吧,很好,因此粗线边框的制作就有了两种方法. 方法一:利用Border来实现 选中已经插入的表格,在属性板中将"Border"值设定为&

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

dreamweaver|详解 在DreamWeaver里,表格被更多的应用在布局网页,定位内容上.其实除了这些"大功能"的运用,通过各种变通的方法,表格还能实现很多在设计中一般难以达到的效果,下面将要给大家展示的"线框"制作就是一个很好的例子,当然它的巧妙运用还远不止此. "线框"对象在网页中是经常见到的,比如一条细线,一个方框等等都在包含之列.在某些效果的协调制作中,"线框"的修饰是必不可少的.然而让我们很遗憾的是,许多主流

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

在DreamWeaver里,表格被更多的应用在布局网页,定位内容上.其实除了这些"大功能"的运用,通过各种变通的方法,表格还能实现很多在设计中一般难以达到的效果,下面将要给大家展示的"线框"制作就是一个很好的例子,当然它的巧妙运用还远不止此. "线框"对象在网页中是经常见到的,比如一条细线,一个方框等等都在包含之列.在某些效果的协调制作中,"线框"的修饰是必不可少的.然而让我们很遗憾的是,许多主流网页设计工具中都没有提供比较直

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

dreamweaver|详解 4> 隔距边框的制作 "隔距边框"在网页中主要用来排列各个栏目或频道的项目列表用的,为了方便大家理解,笔者先把制作完成以后的效果图给大家展示下,如下: 下面是相应的制作过程,(以制作三框隔距为例说明) 首先在网页中插入一个1行3列的表格对象,在插入过程中直接把"Border"设定为0,"CellSpace"设定为2,"CellPad"设定为1,如图 注意:在这里进行设置,同属性板中是完全等效

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

dreamweaver|详解 3> "粗"线边框的制作 有了上面介绍细线边框的制作基础,相信大家理解粗线边框就简单多了.粗线边框就是一种边框特别粗的效果,他往往配合其他网页元素来完成指定效果的. 在细线边框制作中,我们提到单纯将"Border"设定为1达不到"细化"要求,那么粗度应该没有问题了吧,很好,因此粗线边框的制作就有了两种方法. 方法一:利用Border来实现 选中已经插入的表格,在属性板中将"Border"值设

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

dreamweaver|详解 2> 细线边框的制作 细线边框是网页中定位区分内容常用的一种方法,配合特定图片的使用,往往能够达到不错的效果,那么如何制作细线边框呢? 大家都知道,所谓细线边框,大体外观上就是一个简单的1行1列表格,那么我们直接把表格对象的Border值设定为1不就可以了吗?请看下面的制作效果: 同样在网页中指定位置插入一个单行单列的表格,用鼠标单击表格外框的任何一个部位以选中它,在属性板中将"Border"值设定为1,也可以同时将另外的"CellPad&