萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> dreamweaver教程 >> 怎樣用Dreamweaver描摹圖像

怎樣用Dreamweaver描摹圖像

  Tracing Image(描摹圖像)是在Dreamweaver 2.0中增加的功能,但是在介紹Dreamweaver 4.0時,我們仍然要提起它。要很好地理解某個陌生的東西,一個好的方法就是將它和類似的但卻是已被人們所熟悉的東西做個深入而全方位的比較,所以,讓我們看看它和我們通常所說的背景圖像有哪些異同:

  相同點: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放入頁面中,然後照著這個圖像化的布局描就行了,這對於整體規劃復雜的頁面布局很有好處。

怎樣用Dreamweaver描摹圖像 三聯

  圖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中.

copyright © 萬盛學電腦網 all rights reserved