您好,欢迎来到素彩网!

DreamWeaver表格妙用-线框打造详解(一)

来源:sc115.com | 453 次浏览 | 2011-06-29

标签: Dreamweaver DreamWeaver表格妙用 线框制作详解 Dreamweaver教程

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


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


1>跨幅细线的制作


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


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


--------------------------------------------------------------------------------
的标记,这个标记是用来制作“水平线”对象的,那么你一定问了,水平线不就是细线么?为什么还要用表格去作它呢?


的确,水平线是用来制作线条的,包括横幅和竖幅的效果,它都可以实现。但以目前的应用来看,水平线根本达到不了我们所要求的细度,也即真正Height=1pixels的效果。


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





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


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



将Width的显示状态从“Percent”更改为代表实际大小的“Pixels”,这样避免在窗口放缩时引起的错乱,OK,同时在网页编辑窗口中用鼠标选定表格,属性板如下:



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


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



单击编辑窗口左上的“Showcodeview”按钮进入源代码窗口,将代码<td></td>之间的“”去掉,现在可以看看效果了。



此外,你可以通过调整表格的“Width”值控制细线的长度。类似的方法,还可以制作出竖幅细线。

搜索: Dreamweaver DreamWeaver表格妙用 线框制作详解 Dreamweaver教程 

最热-Dreamweaver综合教程

Dreamweaver 4.0,让我欢喜让我忧

Dreamweaver 2.0全接触

Dreamweaver 4.0密技

Micromedia Dreamweaver UltraDev 安装及使用教程(三)

利用DW插件改变IE浏览器滚动条(下)

网站更新短平快

层的应用及其定位(二)

用DREAMWAVER3.0打造网页的实例

轻松解决DW4的问题

Dreamweaver 4快速使用教程

Micromedia Dreamweaver UltraDev 安装及使用教程(二)

DW中如何使用Library

Dreamweaver技巧:朦胧就是美

素材
多种冰激凌和蛋糕PNG图标多种冰激凌和蛋糕PNG图标
精美蔬菜高清图片4精美蔬菜高清图片4
精美蔬菜高清图片2精美蔬菜高清图片2
精美蔬菜高清图片3精美蔬菜高清图片3
精美蔬菜高清图片1精美蔬菜高清图片1
景观效果图素材景观效果图素材
景观效果图素材景观效果图素材
手机高清图片手机高清图片
景观效果图素材景观效果图素材