相同點：tracing image同背景圖像一樣是一幅存在于頁面背景中的圖像，我想這是它們惟一的相同之處了。

不同點：

1、tracing image不會被dreamweaver平鋪(對一個背景圖像來說，假如圖像尺寸小于頁面的尺寸就會被平鋪。)

2、可以指定tracing image的透明度。 3、tracing image只在dreamweaver中可見，在瀏覽器中它會被忽略。

4、當tracing image在dreamweaver中可見時，背景圖像和背景顏色將變為不可見。但有個開關可以讓你選擇要顯示tracing image還是背景圖像。

下面是一個顯示在文檔窗口中的tracing image(見圖1)。

做法如下：

1、首先，我們要制作一個模型圖像。你可以用你喜歡的任何一種圖像編輯應用程序來制作這個模型圖像，只要你最終將其保存為gif、jpg、jpeg或png格式就可以了。以后，我們將用這個模型圖像來作為建立頁面布局的向導。意思就是說，先設計并制作好一個已經圖像化的頁面布局，再將其作為tracing image放入頁面中，然后照著這個圖像化的布局描就行了，這對于整體規劃復雜的頁面布局很有好處。


圖1

2、接下來，我要把這個做好的圖像模型放入需要的頁面中。選擇“view →tracing image→load”，將出現一個對話框，找到你的圖像模型并選擇它，然后點擊[select]。

3、page properties對話框將緊接著出現，通過拖動滑塊指定圖像的透明度(transparent)，然后點擊[ok]。你可以在任何時候通過選擇“modify→page properties”，來選擇另一個tracing image或改變當前tracing image的透明度。

4、圖2是我將我的tracing image放入頁面后的樣子(我設置了透明度為70％)。


圖2

5、裝入tracing image后，觀察了一下，總覺得這個tracing image似乎沒有處于文檔的中心，因此，我決定要調整一下位置。選擇“view→tracing image→adjust position”。在彈出的對話框中輸入x和y軸的坐標值(默認位置為8，11)，然后點擊[ok]。

除了調整位置外，你還可以使用下列選項：

show(顯示)——用來隱藏和顯示tracing image，當tracing image隱藏時，背景圖像和背景顏色就可以顯示出來了(當然是在你設置了它們的前提下)。

align with selection(同選項對齊)——可以讓你將tracing image的左上角和某個你選中的對象的左上角對齊(需要先點選一個預備對齊的對象)。

reset position(復位)——可以把你的tracing image送回(x：0，y：0)的位置。

6、既然我們已經有了放置好的tracing image，可以照著它來繪制布局了。點擊對象調色板中的[layer]，拖放兩個層分別覆蓋tracing image中的綠色區域。

7、至此，你們可以看到，tracing image已經成功地輔助我完成了這個簡單的布局，當然，tracing image完全可以勝任遠比這復雜得多的頁面布局任務。但我的工作還沒有完成，我的設計是要在右邊的大的層中放置一臺數碼攝像機的圖片，而在左邊的小的層中放置對這臺攝像機的說明。分別在大層和小層中插入圖片和輸入文字后，頁面看起來是這樣的(見圖3)。

|||
圖3

8、好了，所有的工作都已經做完了。讓我們在瀏覽器中預覽一下吧(見圖4)。


圖4

完全不用擔心瀏覽器將如何看待tracing image，它在瀏覽器中既不會被顯示，也不會被下載，它只能顯示在dreamweaver中.