一、水平線法

　　1.在 Dreamweaver 中新建一個文檔，插入一條水平線，雙擊水平線，調出屬性面板。

　　2.在水平線的屬性面板上設置高度 H = 0 pixel。

　　3.Copy 此條水平線，在屬性面板中把 Shade 的勾點掉。

　　4.按 F12 進行預覽，請對比下面的（1）（2）源代碼及效果。

　　5.另外制作兩條 H = 1 pixels 的水平線，分別有 Shade 和 沒 Shade。

　　6.制作兩條 H = 2 pixels 的水平線，并定義顏色，分別有 Shade 和 沒 Shade。

　　7.制作兩條 H = 2 pixels 的水平線，顏色為缺省值，分別有 Shade 和 沒 Shade。

　　看了上面的幾種水平線效果，我們發現，當水平線的高度 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" 。然后在屬性面板中設置表格的背景色。

　　2.復制上面的表格，按 Ctrl + Tab 鍵進入源代碼窗口，把<td></td>中間的系統自動加入的“&nbsp;”刪除。

(2) 源代碼：

　　經過預覽對比，發現當把“&nbsp;”刪除后，表格就收縮了，設置的背景顏色也成了水平細線的顏色。必須注意的是，最好在設定了背景顏色時再把“&nbsp;”刪除，要不然在設計窗口中再改動顏色就麻煩了些。

三、背景法

　　背景法相對來說步驟就多了些，需要用到的軟件有 photoshop 及 Dreamweaver ，

1.在 Photoshop 中按 Ctrl + N 新建一個 1×1 pixel 大小的文件。

2.調整前景色，設置成需要做成直線的顏色，按 Alt + delete ，填充文件。

　　3.按快捷鍵 Ctrl + Alt + shift + S ，把文件保存為網頁圖象文件 bg.gif

　　4.打開 Dreamweaver ，新建一個文檔，點擊插入表格按鈕，插入一個單行單列的表格，設置如下：border="0" cellspacing="0" cellpadding="0"。

　　5.使表格處于選中狀態，調出屬性面板，點擊“bg”按鈕插入背景圖片“bg.gif”。下面把源代碼與效果都展示出來，讓大家作個比較，對效果實現的原理有更加深入的了解。

　　6.復制上面的表格，按 Ctrl + Tab 鍵進入源代碼窗口，把<td></td>中間的系統自動加入的“&nbsp;”刪除。

　　有些網頁中的制作可能同時設定了單元格或者表格的高度為 1 pixels ，其實可以不設。