首页  ·  知识 ·  网站开发
巧用Dreamweaver的线条美
佚名  goeway.com    编辑:dezai  图片来源:网络
最初制作网页的时候,用的是Frontpage98,运用它表格边框以及表格高低的设定,可以制出不同大小的线条;到了Frontpage 2000的时候,这个优点已经消失为繁杂的“
最初制作网页的时候,用的是Frontpage98,运用它表格边框以及表格高低的设定,可以制出不同大小的线条;到了Frontpage 2000的时候,这个优点已经消失为繁杂的“样式”设定了;而在Dreamweaver3中,我们还可以用明暗线来设置1px的细线框,但已经很不好召唤了,到了DW4,习惯了按按钮来操作的朋友,可能就找不着在哪里设置表格边框线条了。

  其实DW4还是可以设置边框线条的大小,以达到不同的效果的,对于熟悉源代码的高手来说,这当然不成问题,否则你就要知道一些技巧了。下面是goEway几位网页设计师的一些小技巧,或者能给对DW4还不熟悉的朋友一些帮助。

  用表格制作跨幅细线:

  制作网页的时候,一条细线,或者一个线框的运用频率都相当高,很多时候并不是使用“插入线条”就行的(虽然可以将插入线条设置到0.5这么细),这个时候就要懂得使用表格的边框设置。

  Step 1 插入一个一行一列的表格,将表格的“cellpad”、“cellspace”同时设置为“0”,“Border”不用说也是0了。

  Step 2 将单元格的“Bg”设置为你需要的线条颜色,表格的高度“H”设置为“1”。

  Step 3 查看源代码,将……中的“ ”删去,重新回到页面你就可以看到一条1px的细线,是跟这个表格一样长,不会有表框框宽的那小小的短缺现象出现了。

用表格设置细线框:

 

  在网页中,线框作为区分开不同的内容板块的线条经常会出现,但如果将表格边框宽度“Border”设置为“1”,那么必然会落得个“不会做网页”的评论,因为稍有美感的人都不会把表框设置得如此粗陋的,所以你要学会利用表格制作细线框。

  Step 1 插入一个一行一列的表格,将表格的“Border”、“Cellpad”设置为“0”,“Cellspace”设置为“1”。

  Step 2 设置表格的背景颜色“Bg”,如黑色“#000000”,注意这将是你要的线框颜色。

  Step 3 将单元格的内背景“Bg”设置为“#FFFFFF”,这样你将看到一个黑色线框,当然你也可以设置为其他的颜色,两种颜色由你去把握了。

  分列的隔距表格框:

 
 
 
 
 

  许多人在网站的首页导航栏都使用这种效果,是怎样做出来的呢?使用表格的嵌套就可以做出上面的隔距表格框效果。

  Step 1 插入一个一行五列的表格,将表格的属性设置为:Width=“500”,Border=“0”,Cellspacing=“2”Cellpadding=“1”(在插入表格的时候设置就可以了)。

  Step 2 将五个单元格的背景色均设置为:Bg=“#000000”。

  Step 3 在每个单元格内再插入一个表格,在属性面板上设置插入表格的属性为:Width=“100%”,Border=“0”,、Cellspacing=“0”,Cellpadding=“0”;height=“100%”。


  Step 4 将插入的表格的每个单元格的背景色设置为白色:Bg=“#FFFFFF”。这样你就看到一个分列的表格框了。

本文作者:佚名 来源:goeway.com
CIO之家 www.ciozj.com 微信公众号:imciow
    >>频道首页  >>网站首页   纠错  >>投诉
版权声明:CIO之家尊重行业规范,每篇文章都注明有明确的作者和来源;CIO之家的原创文章,请转载时务必注明文章作者和来源;
延伸阅读