手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>Dreamweaver>列表

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

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!
在DreamWeaver里,表格被更多的应用在布局网页,定位内容上。其实除了这些“大功能”的运用,通过各种变通的方法,表格还能实现很多在设计中一般难以达到的效果,下面将要给大家展示的“线框”制作就是个很好的例子,当然他的巧妙运用还远不止此。


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


1> 跨幅细线的制作


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


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


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


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


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





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


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



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



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


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



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



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

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!