糯米文學吧

位置:首頁 > 設計 > 網頁設計

在Dreamweaver MX中如何應用“佔位圖形”

  在Dreamweaver MX中如何應用“佔位圖形”

“佔位圖形”顧名思義是在準備好將最終圖形添加到 Web 頁之前使用的臨時圖形。使用它可以在沒有理想的圖形的情況下先行製作Web頁面——在需要使用圖形的地方插入一個佔位圖形先“佔領”着“地盤”。

在Dreamweaver MX中如何應用“佔位圖形”

一、插入佔位圖形

將光標定在需要插入圖形的地方;選擇:插入>圖像佔位符即出現圖像佔位符對話框,如圖:

設定好各項參數後點擊“確定”即將佔位圖形插入到了頁面中,如圖:

上面顯示了名稱和大小。察看源代碼發現增加了一個包含空 src 屬性的圖像標籤。

二、替換佔位圖形

1.當頁面設計好以後,我們就需要使用正確的.圖形來替換到佔位圖形。在用DreamweaverMX(簡稱Dreamweaver MX)中選中佔位圖形並打開屬性面板,點擊“創建”按鈕。則Dreamweaver MX就會啟動FireworksMX(簡稱Fireworks MX)並自動建立好一個和佔位圖形同樣大小的空白畫布等待圖形設計師的“操刀製作”。

2.在Fireworks MX中製作好所需的圖形並且優化過後,點擊畫布上邊的“完成”按鈕。

在出現的“另存為”對話框中給存檔的png文件取一個文件名然後保存(這樣便於以後修改);在隨後彈出的“導出”對話框中做好相關設定後“保存”該文件。

3.切換至Dreamweaver MX,我們發現佔位圖形已經被替換了。察看代碼,發現已經自動插入了src的地址,其餘的大小,alt等參數均保持原狀,如圖:

呵呵,是不是很方便呀?從這裏我們也可以體會到“三劍客”的配合真的是無與倫比!

三、需要注意的

如果在Fireworks MX中繪製了熱區並添加了鏈接,Fireworks MX將不會刪除已經在Dreamweaver MX中添加到圖像佔位符的鏈接;但是如果在Fireworks MX中的圖像上繪製了一個切片,則將在替換佔位圖形時刪除Dreamweaver MX文檔中的鏈接。