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

2008-02-23 06:14:22来源：互联网阅读 ()

在DreamWeaver里，表格被更多的应用在布局网页，定位内容上。其实除了这些“大功能”的运用，通过各种变通的方法，表格还能实现很多在设计中一般难以达到的效果，下面将要给大家展示的“线框”制作就是个很好的例子，当然他的巧妙运用还远不止此。

　　“线框”对象在网页中是经常见到的，比如一条细线，一个方框等等都在包含之列。在某些效果的协调制作中，“线框”的修饰是必不可少的。然而让我们很遗憾的是，许多主流网页设计工具中都没有提供比较直接简便的线框制作功能。在这种情况下，利用其他元素来间接实现就显得尤为重要了。
1> 跨幅细线的制作

首先，我想大家应该理解下这里“跨幅细线”的概念，而很重要的一点就体现在“细”上，这也是我们要通过表格来实现他的原因所在。

接触过网页设计的网友都知道，在HTML（超文本传输语言）中，有一个

--------------------------------------------------------------------------------

的标记，这个标记是用来制作“水平线”对象的，那么您一定问了，水平线
不就是细线么？为什么还要用表格去作他呢？

　　的确，水平线是用来制作线条的，包括横幅和竖幅的效果，他都能够实现。但以现在的应用来看，水平线根本达到不了我们所需要的细度，也即真正Height=1pixels的效果。

下面是一组通过水平线制作的细线图示：

[ 相关贴图 ]

其中前两个明显看上去要粗糙的多，而后面的已在属性（Properties）板上手动设定高度为1的显然也不是很符合我们的需要，并且水平线要更改颜色的话，必须到源代码中才能够实现，使用起来不是很方便，明白了上面这些，我们看一下通过表格怎么达到更好的效果。

　　单击“Object”面板中的“表格”图标或选择菜单“Insert”-“Table”，在网页中适当的位置插入一个高，宽均为1的表格对象。如图

[ 相关贴图 ]

DreamWeaver表格妙用-线框制作详解(二)
将Width的显示状态从“Percent”更改为代表实际大小的“Pixels”，这样避免在窗口放缩时引起的错乱，OK，同时在网页编辑窗口中用鼠标选定表格，属性板如下：

[ 相关贴图 ]

这是默认状态下的表格属性配置，将其中的“Border”，“CellPad”，“CellSpace”值全部设定为0。

　　鼠标在表格内部空点，这时属性板已自动转换到单元格的属性配置窗口，将单元格的“Bg”设定为“红色”（为最终细线的颜色，可自由配置），同时把“H”配置为“1”，如图

[ 相关贴图 ]

单击编辑窗口左上的“Show code view”按钮进入源代码窗口，将代码<td></td>之间的“ ”去掉，现在能够看看效果了。

[ 相关贴图 ]

此外，您能够通过调整表格的“Width”值控制细线的长度。类似的方法，还能够制作出竖幅细线。
DreamWeaver表格妙用-线框制作详解(三)
2> 细线边框的制作
细线边框是网页中定位区分内容常用的一种方法，配合特定图片的使用，往往能够达到不错的效果，那么如何制作细线边框呢？

　　大家都知道，所谓细线边框，大体外观上就是个简单的1行1列表格，那么我们直接把表格对象的Border值设定为1不就能够了吗？请看下面的制作效果：

　　同样在网页中指定位置插入一个单行单列的表格，用鼠标单击表格外框的任何一个部位以选中他，在属性板中将“Border”值设定为1，也能够同时将另外的“CellPad”和“CellSpace”置零，如图：

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有