用Dreamweaver描摹圖像_Dreamweaver教程
相同點:Tracing Image同背景圖像一樣是一幅存在于頁面背景中的圖像,我想這是它們惟一的相同之處了。
不同點:
1、Tracing Image不會被Dreamweaver平鋪(對一個背景圖像來說,假如圖像尺寸小于頁面的尺寸就會被平鋪。)
2、可以指定Tracing Image的透明度。 3、Tracing Image只在Dreamweaver中可見,在瀏覽器中它會被忽略。
4、當(dāng)Tracing Image在Dreamweaver中可見時,背景圖像和背景顏色將變?yōu)椴豢梢姟5袀開關(guān)可以讓你選擇要顯示Tracing Image還是背景圖像。
下面是一個顯示在文檔窗口中的Tracing Image(見圖1)。
做法如下:
1、首先,我們要制作一個模型圖像。你可以用你喜歡的任何一種圖像編輯應(yīng)用程序來制作這個模型圖像,只要你最終將其保存為GIF、JPG、JPEG或PNG格式就可以了。以后,我們將用這個模型圖像來作為建立頁面布局的向?qū)АR馑季褪钦f,先設(shè)計并制作好一個已經(jīng)圖像化的頁面布局,再將其作為Tracing Image放入頁面中,然后照著這個圖像化的布局描就行了,這對于整體規(guī)劃復(fù)雜的頁面布局很有好處。
圖1
2、接下來,我要把這個做好的圖像模型放入需要的頁面中。選擇“View →Tracing Image→Load”,將出現(xiàn)一個對話框,找到你的圖像模型并選擇它,然后點擊[Select]。
3、Page Properties對話框?qū)⒕o接著出現(xiàn),通過拖動滑塊指定圖像的透明度(Transparent),然后點擊[OK]。你可以在任何時候通過選擇“Modify→Page Properties”,來選擇另一個Tracing Image或改變當(dāng)前Tracing Image的透明度。
4、圖2是我將我的Tracing Image放入頁面后的樣子(我設(shè)置了透明度為70%)。
圖2
5、裝入Tracing Image后,觀察了一下,總覺得這個Tracing Image似乎沒有處于文檔的中心,因此,我決定要調(diào)整一下位置。選擇“View→Tracing Image→Adjust Position”。在彈出的對話框中輸入X和Y軸的坐標(biāo)值(默認(rèn)位置為8,11),然后點擊[OK]。
除了調(diào)整位置外,你還可以使用下列選項:
Show(顯示)——用來隱藏和顯示Tracing Image,當(dāng)Tracing Image隱藏時,背景圖像和背景顏色就可以顯示出來了(當(dāng)然是在你設(shè)置了它們的前提下)。
Align with Selection(同選項對齊)——可以讓你將Tracing Image的左上角和某個你選中的對象的左上角對齊(需要先點選一個預(yù)備對齊的對象)。
Reset Position(復(fù)位)——可以把你的Tracing Image送回(X:0,Y:0)的位置。
6、既然我們已經(jīng)有了放置好的Tracing Image,可以照著它來繪制布局了。點擊對象調(diào)色板中的[Layer],拖放兩個層分別覆蓋Tracing Image中的綠色區(qū)域。
7、至此,你們可以看到,Tracing Image已經(jīng)成功地輔助我完成了這個簡單的布局,當(dāng)然,Tracing Image完全可以勝任遠比這復(fù)雜得多的頁面布局任務(wù)。但我的工作還沒有完成,我的設(shè)計是要在右邊的大的層中放置一臺數(shù)碼攝像機的圖片,而在左邊的小的層中放置對這臺攝像機的說明。分別在大層和小層中插入圖片和輸入文字后,頁面看起來是這樣的(見圖3)。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 用戶注冊的實現(xiàn)-Dreamweaver構(gòu)建Blog
- 入門:Dreamweaver8設(shè)計網(wǎng)頁背景實例講解
- DW MX 2004新功能:加密FTP
- 網(wǎng)頁設(shè)計制作須熟知的九大“要點”
- 數(shù)據(jù)庫的設(shè)計和連接-Dreamweaver構(gòu)建Blog
- Dreamweaver MX進階教程(十九)防止英文字符撐破表格
- 使用Dreamweaver輕松實現(xiàn)網(wǎng)頁中透明Flash效果
- 事件日歷-Dreamweaver構(gòu)建Blog
- 給用DW編寫CSS人的一些建議
- 教你如何用Dreamweaver制作特色分隔線
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver描摹圖像
。