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

Dreamweaver
Dreamweaver MX进阶教程(十八)使用css样式制作细线表格
Dreamweaver MX进阶教程(二十二)制作反馈表单(email发送)
Dreamweaver MX进阶教程(二十)使用一象素透明图像固定单元格宽度
Dreamweaver MX进阶教程(十一)使用“层”布局网页
Dreamweaver MX进阶教程(十四)使用server-side include(服务器端包括)
Dreamweaver MX进阶教程(十五)插入具有辅助功能的表格
Dreamweaver MX进阶教程(十九)防止英文字符撑破表格
Dreamweaver MX进阶教程(十七)设置表格的属性
Dreamweaver MX进阶教程(十二)在居中页面使用层
DW MX 设计留言本实战(1)
DW MX 设计留言本实战(4)
DreamWeaver,经典50问(9)
DreamWeaver,经典50问(8)
DreamWeaver,经典50问(7)
DreamWeaver,经典50问(3)
DreamWeaver,经典50问(10)
DreamWeaver,经典50问(4)
DreamWeaver,经典50问(6)
巧用背景颜色和间距快速制作出细边线表格
DW MX 2004代码编辑新功能

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 46 ::
收藏到网摘: 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)

源代码: