- 相關(guān)推薦
在Dreamweaver MX中如何應用“占位圖形”
Dreamweaver是集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)代碼編輯器。利用對HTML、CSS、JavaScript等內容的支持，設計師和程序員可以在幾乎任何地方快速制作和進(jìn)行網(wǎng)站建設。以下是小編為大家整理的在Dreamweaver MX中如何應用“占位圖形”，僅供參考，大家一起來(lái)看看吧。
在Dreamweaver MX中如何應用“占位圖形”
“占位圖形”顧名思義是在準備好將最終圖形添加到 Web 頁(yè)之前使用的臨時(shí)圖形。使用它可以在沒(méi)有理想的圖形的情況下先行制作Web頁(yè)面——在需要使用圖形的地方插入一個(gè)占位圖形先“占領(lǐng)”著(zhù)“地盤(pán)”。
一、插入占位圖形
將光標定在需要插入圖形的地方;選擇：插入——圖像占位符即出現圖像占位符對話(huà)框。
設定好各項參數后點(diǎn)擊“確定”即將占位圖形插入到了頁(yè)面中。
上面顯示了名稱(chēng)和大小。察看源代碼發(fā)現增加了一個(gè)包含空 src 屬性的圖像標簽。
二、替換占位圖形
1.當頁(yè)面設計好以后，我們就需要使用正確的圖形來(lái)替換到占位圖形。在用DreamweaverMX(簡(jiǎn)稱(chēng)Dreamweaver MX)中選中占位圖形并打開(kāi)屬性面板，點(diǎn)擊“創(chuàng )建”按鈕。則Dreamweaver MX就會(huì )啟動(dòng)FireworksMX(簡(jiǎn)稱(chēng)Fireworks MX)并自動(dòng)建立好一個(gè)和占位圖形同樣大小的空白畫(huà)布等待圖形設計師的“操刀制作”。
2.在Fireworks MX中制作好所需的圖形并且優(yōu)化過(guò)后，點(diǎn)擊畫(huà)布上邊的“完成”按鈕。
在出現的“另存為”對話(huà)框中給存檔的png文件取一個(gè)文件名然后保存(這樣便于以后修改);在隨后彈出的“導出”對話(huà)框中做好相關(guān)設定后“保存”該文件。
3.切換至Dreamweaver MX，我們發(fā)現占位圖形已經(jīng)被替換了。察看代碼，發(fā)現已經(jīng)自動(dòng)插入了src的地址，其余的大小，alt等參數均保持原狀。
三、需要注意的
如果在Fireworks MX中繪制了熱區并添加了鏈接，Fireworks MX將不會(huì )刪除已經(jīng)在Dreamweaver MX中添加到圖像占位符的鏈接;但是如果在Fireworks MX中的圖像上繪制了一個(gè)切片，則將在替換占位圖形時(shí)刪除Dreamweaver MX文檔中的鏈接。
用Dreamweaver為網(wǎng)頁(yè)進(jìn)行優(yōu)化
1、合理調用CSS
進(jìn)行網(wǎng)頁(yè)設計時(shí)，運用樣式表單CSS來(lái)對頁(yè)面元素進(jìn)行布置，可以大大地減少HTML代碼，這點(diǎn)我們已經(jīng)很清楚。
方法:
(1)是選定對象，從右鍵菜單中選擇定義好的樣式加入; (2)是從樣式面板中為對象選擇樣式;
(3)是在標簽選擇器上的某標簽上單擊右鍵選擇樣式。
這三種方法雖然獲得的頁(yè)面效果一樣，但由于第一種方法會(huì )在HTML代碼中產(chǎn)生一個(gè)“span”標簽，如果過(guò)多地使用必定會(huì )使網(wǎng)頁(yè)源文件大大增肥，影響下載的速度。因此調用CSS時(shí)，應采用第二、第三種方法。
2、為服務(wù)器減負
在交互網(wǎng)頁(yè)中，用戶(hù)常用表單向服務(wù)器提交數據，等待服務(wù)器的數據處理、返回瀏覽器……等待的過(guò)程是很令人心煩的。為此，我們在進(jìn)行網(wǎng)頁(yè)編輯時(shí)，也有必要為服務(wù)器作個(gè)考慮。Dreamweaver中制作網(wǎng)頁(yè)，能為服務(wù)器減負的工作有一項做得較出色，就是對用戶(hù)所提交的表單的合法性進(jìn)行驗證，只需在瀏覽器端進(jìn)行，不必返回到服務(wù)器驗證，既減輕了服務(wù)器的負擔，又讓瀏覽者少一份傷心的等待。
方法:選中表單，打開(kāi)“行為”面板，點(diǎn)擊“+”號選“驗證表單”，然后進(jìn)行設置即可。順便提醒，這個(gè)驗證過(guò)程實(shí)際上是使用JavaScript在瀏覽器端作驗證。在Dreamweaver里進(jìn)行上述操作時(shí)，它會(huì )把這段JavaScript代碼放在網(wǎng)頁(yè)頭部與之中，這樣必定會(huì )使頁(yè)面的完全顯示時(shí)間變長(cháng)，因為瀏覽器要先下載這段代碼才下載其他頁(yè)面元素。因此，最好在Dreamweaver中打開(kāi)代碼編輯器，把這段腳本程序剪貼到源代碼的最后邊，讓其在最后下載。另外，我們在為網(wǎng)頁(yè)加入JavaScript腳本特效時(shí)，你如果不希望頁(yè)面出現時(shí)馬上生效，也不妨這樣設置。
3、自我“減肥”
目前網(wǎng)頁(yè)“減肥茶”很多，我們隨處都可找到，而在Dreamweaver中，我們不必四處找“減肥茶”，利用其自身的“減肥”功能足可以使網(wǎng)頁(yè)“苗條怡人”。
方法:在“命令”菜單下選擇“清除多余的HTML”，即可進(jìn)行設置對網(wǎng)頁(yè)冗余代碼進(jìn)行清除。
4、合理應用表格
我們不但要為服務(wù)器減負，對使用的瀏覽器我們更需要減負，也就是要盡可能地縮短瀏覽器對頁(yè)面的解析時(shí)間，上面提及的JavaScript腳本加入就是一個(gè)例子。影響瀏覽器對頁(yè)面解析的還有表格，因為瀏覽器對表格的解析時(shí)間與表格的大小、復雜程度成正比，而我們在Dreamweaver中為了版式的安排，都是通過(guò)加入大量的表格來(lái)進(jìn)行定位的，有些人甚至在大表格中套入多重的小表格，這實(shí)質(zhì)上也是在加大瀏覽器的負擔，使頁(yè)面呈現時(shí)間大大加長(cháng)。為此在使用表格時(shí)，應盡量將表格打散，并要盡可能地避免表格的層層相套。
【在Dreamweaver MX中如何應用“占位圖形”】相關(guān)文章：
Dreamweaver MX的小技巧08-08
怎么設置Dreamweaver占位符05-15
Dreamweaver如何創(chuàng )建圖形提交按鈕03-15
關(guān)于Dreamweaver中模板的應用02-12
Dreamweaver中應用CSS的技巧05-15
PPT文件中如何插入圖片占位符04-11
在Dreamweaver中如何使用模板04-29