當前位置:才華齋>設計>網頁設計>

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

網頁設計 閱讀(1.04W)
  在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文件中的連結。