当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 水平细线的几种制作方法

Dreamweaver
Dreamweaver打造多彩文字链接
Dreamweaver基础技巧全面接触
Dreamweaver MX 2004从零开始(4)
Dreamweaver MX 2004设计留言本实战
Dreamweaver MX 2004从零开始(5)
Dreamweaver MX 2004从零开始(6)
Dreamweaver MX 2004从零开始(7)
Dreamweaver MX 2004 打造细线表格
在DW中插入Flash的参数详解
用Dreamweaver MX建设神奇网页图片超链接
Dreamweaver中实现flash的透明背景
DreamweaverMX打造留言本(二)
DreamweaverMX打造留言本(三)
DreamweaverMX打造留言本(四)
DreamweaverMX打造留言本(五)
Dreamweaver MX技巧汇粹
DreamwaverMX与ASP.NET(一)
DreamwaverMX与ASP.NET(二)
DreamwaverMX与ASP.NET(三)
DreamwaverMX与ASP.NET(四)

Dreamweaver 中的 水平细线的几种制作方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 36 ::
收藏到网摘: n/a

 

一、水平线法

  1.在 Dreamweaver 中新建一个文档,插入一条水平线,双击水平线,调出属性面板。

  2.在水平线的属性面板上设置高度 H = 0 pixel。

  3.Copy 此条水平线,在属性面板中把 Shade 的勾点掉。

  4.按 F12 进行预览,请对比下面的(1)(2)源代码及效果。

(1)


源代码:<hr size="0" color="#3366FF" noshade>

(2)


源代码: <hr size="0" color="#3366FF">

  5.另外制作两条 H = 1 pixels 的水平线,分别有 Shade 和 没 Shade。

(1)


源代码:<hr size="1" color="#3366FF" noshade>

(2)


源代码: <hr size="1" color="#3366FF">

  6.制作两条 H = 2 pixels 的水平线,并定义颜色,分别有 Shade 和 没 Shade。

(1)


源代码:<hr size="2" color="#3366FF" noshade>

(2)


源代码:<hr size="2" color="#3366FF">

  7.制作两条 H = 2 pixels 的水平线,颜色为缺省值,分别有 Shade 和 没 Shade。

(1)


源代码: <hr size="2" noshade>

(2)


源代码: <hr size="2">

  看了上面的几种水平线效果,我们发现,当水平线的高度 H 设为“0 pixel”和“1 pixel”时,无论水平线有没有 Shade (阴影),它在IE浏览器中都显示为 1 pixel 的细线。在论坛中曾经发现有些网友把高度H设置为小数数值,如:0.1之类的,以求达到 1 pixel 的细线的效果,实质上,在 Dreamweaver 网页编辑器里,属性面板是不能设置小数数值的,但如果我们直接在源代码里输入,属性面板就认了,可以显示出小数数值。同时,IE 浏览器把高度为 2 pixel 以下的水平线识别为 1pixel 。

  在制作水平线时我们制作了有 shade 和没有 shade 的,经过对比发现当水平线高度H为 2 pixels 以下时,shade 不起作用,只有到 2 pixels 以上时才看得到 shade 效果。

二、表格法

  表格在网页设计中常常用于定位,尤其是大型网站,表格多多,但由于它们的服务器强大,速度倒不会慢。

  在此介绍表格的另一妙用,制作水平细线。

  1.在 Dreamweaver 中,插入一个单行单列的表格,设置 border="0" cellspacing="0" cellpadding="0" 。然后在属性面板中设置表格的背景色。

(1)

 

源代码:

  2.复制上面的表格,按 Ctrl + Tab 键进入源代码窗口,把<td></td>中间的系统自动加入的“&nbsp;”删除。

(2)

源代码: