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