天津國土資源和房屋職業(yè)學(xué)院 馬 莉

淺談dreamweaver網(wǎng)頁制作技巧及常見問題處理方法

天津國土資源和房屋職業(yè)學(xué)院 馬 莉

在計(jì)算機(jī)各項(xiàng)網(wǎng)絡(luò)技術(shù)中,網(wǎng)頁制作是必學(xué)的一項(xiàng)入門級技術(shù),Dreamweaver軟件支持多腳本的語言,也是初學(xué)計(jì)算機(jī)技術(shù)者或者是網(wǎng)站開發(fā)工作者必選的一種軟件,但同時(shí)它也是帶給初級入門者很多困惑的一個(gè)軟件.使用Dreamweaver進(jìn)行網(wǎng)頁制作時(shí),有很多應(yīng)用技巧的應(yīng)用能達(dá)到事半功倍的效果,但也有很多易犯的錯(cuò)誤容易被忽視.本文就對Dreamweaver網(wǎng)頁制作技巧和解決這些問題的方法進(jìn)行探析,旨在為后續(xù)學(xué)習(xí)者提供參考借鑒.

Dreamweaver;網(wǎng)頁制作;技巧;問題;處理方法

Dreamweaver是一款網(wǎng)頁編輯器,深受網(wǎng)頁制作者與學(xué)習(xí)者的青睞.但是該軟件卻易學(xué)難用,實(shí)際使用時(shí)有很多情況下會(huì)讓使用者一籌莫展,這是因?yàn)镈reamweaver對細(xì)節(jié)與規(guī)范要求非常高,如果學(xué)習(xí)者粗心,制作較為隨意,就會(huì)發(fā)生一些意想不到的錯(cuò)誤,使得于調(diào)試時(shí)很難下手.其實(shí)通過一些技巧的應(yīng)用,有很多問題便會(huì)迎刃而解,而且如果能恰當(dāng)應(yīng)用制作技巧,還能實(shí)現(xiàn)對頁面的細(xì)節(jié)優(yōu)化.下文就對這些常見問題與技巧方法做整理、總結(jié).

一、網(wǎng)頁制作前的整體準(zhǔn)備

(一)確定主題.網(wǎng)頁主題的確定范圍應(yīng)該小,而且應(yīng)表達(dá)直接、準(zhǔn)確,應(yīng)根據(jù)用戶需求確定網(wǎng)頁的主題,應(yīng)依照瀏覽者的意愿進(jìn)行定位,使網(wǎng)頁能夠滿足用戶需求.

(二)風(fēng)格確定.網(wǎng)頁的創(chuàng)意與風(fēng)格是較難把握的兩個(gè)內(nèi)容,創(chuàng)意的獨(dú)特性和風(fēng)格的迥異能展現(xiàn)出網(wǎng)頁的整體品質(zhì),對網(wǎng)站的發(fā)展有著巨大的影響力.網(wǎng)頁的創(chuàng)意多是來源于生活的積累,關(guān)鍵在于設(shè)計(jì)的用心.

(三)整體規(guī)劃.一個(gè)高質(zhì)量的網(wǎng)頁設(shè)計(jì),其規(guī)劃是需要完整的,欄目、板塊與導(dǎo)航欄等應(yīng)做到清晰、明確.欄目的安排要緊扣主題;目錄和鏈接的結(jié)構(gòu)要安排妥當(dāng),目錄層次不宜過多,一般控制在3層以內(nèi),鏈接可一對一、一對多兩種形式混用.

(四)上傳測試.網(wǎng)頁制作完成后要申請主頁進(jìn)行上傳的工作,可選擇Dreamweaver自身的FTP功能作為上傳工具,上傳后做測試的工作,一旦發(fā)現(xiàn)問題要及時(shí)更正.

(五)維護(hù)管理.網(wǎng)頁內(nèi)容需不斷的更新來提高訪問量,并定期做維護(hù)檢測的工作來提高工作效率.如果網(wǎng)頁內(nèi)容一成不變,久而久之會(huì)失去大量的瀏覽者.

二、網(wǎng)頁制作技巧及問題的處理方法

(一)"#"空鏈接頁面置頂問題解決技巧

空鏈接是指:僅有鏈接形式但是沒有鏈接對象的這種鏈接.在空鏈接中,所鏈接的目標(biāo)URL通常情況下是以"#"進(jìn)行表示的.但是如果是在瀏覽器上查看網(wǎng)頁,當(dāng)單擊了這一形式的空鏈接,那么它便會(huì)自動(dòng)的將當(dāng)前頁面重置到網(wǎng)頁的頂端去,而這也會(huì)嚴(yán)重影響到用戶正常使用.

若在進(jìn)行空鏈接的設(shè)置時(shí),使用代碼"javascript:void(null)"來替代原有的"#",便可以有效解決這一問題.

(二)解決Flash背景顏色問題的技巧

Flash工具具有強(qiáng)大的動(dòng)畫編輯功能,界面簡潔、功能強(qiáng)大,能夠?qū)崿F(xiàn)把動(dòng)畫、音效等完美的融合在一起,是動(dòng)畫設(shè)計(jì)初學(xué)者和網(wǎng)頁制作人員的首選.將Flash插入到網(wǎng)頁中,能使頁面更為鮮活、生動(dòng).雖然Flash在當(dāng)今有著廣泛的應(yīng)用,但是該軟件也有一些操作技巧需要靈活運(yùn)用,例如,如果想要插入的Flash動(dòng)畫,其背景顏色會(huì)對網(wǎng)頁背景有一定遮擋,如何解決Flash背景色,使之變成透明色?

解決技巧:在網(wǎng)頁插入Flash后,在選定的基礎(chǔ)上,點(diǎn)擊【參數(shù)】按鈕,在彈出的退化框中輸入"wmode",【值】下輸入"transparent",之后選擇【確定】.這樣就可以使網(wǎng)頁中的Flash文件變?yōu)橥该?

(三)解決空格輸入的技巧方法

在Dreamweaver中輸入空格的這一問題已經(jīng)是一個(gè)很普遍發(fā)生的問題,各種介紹、問題講述都涉及到這一內(nèi)容.

在Dreamweaver中,對空格輸入有"全角"文字狀態(tài)下的這一要求,而很多操作者在進(jìn)行網(wǎng)頁制作時(shí)往往會(huì)忽略掉這一細(xì)節(jié)之處,在半角模式下就進(jìn)行輸入,因此出現(xiàn)問題.另外也可以通過其它一些技巧來進(jìn)行空格的錄入,比如:直接于源代碼中加入代表著空格的" "這一HTML代碼.

(四)處理路徑錯(cuò)誤問題的技巧方法

路徑是相關(guān)元素和網(wǎng)頁之間架構(gòu)的重要橋梁,一旦路徑錯(cuò)誤,那么會(huì)導(dǎo)致網(wǎng)頁不能正常瀏覽,出現(xiàn)異常.在使用Dreamweaver做網(wǎng)頁設(shè)計(jì)時(shí),普遍發(fā)生的路徑錯(cuò)誤問題便是圖片鏈接錯(cuò)誤,而這一直接后果便是導(dǎo)致瀏覽器不能顯示出圖片.發(fā)生該問題的誘因可能為:

第一,如果瀏覽器頁面呈空白狀,而且沒有任何對話框提示,應(yīng)查看圖片名稱,首先應(yīng)排除圖片名稱是否命名為漢字,其次應(yīng)該確定圖片格式是否存在問題,Dreamweaver所插入的圖片要求必須是JPG模式的.

第二,若瀏覽器有提示"小紅叉",那么應(yīng)該檢查圖片的路徑,正確的路徑設(shè)置是"/images/solar.jpg",代表是父級目錄images下的solar.jpg圖片.而錯(cuò)誤的路徑是"file:///e:Documents/solar.jpg",它是代表為E盤Document下的solar.jpg圖片,代表圖片沒有在站點(diǎn)的文件夾中.而解決的方法便是把圖片相應(yīng)的移動(dòng)到站點(diǎn)文件夾中去.

(五)解決表格混亂問題的方法

表格可以說是一個(gè)又快捷、但是又難以調(diào)試的布局方式,這是因?yàn)楸砀穹奖?、簡?很容易學(xué)會(huì),但是卻不容易掌握,會(huì)常發(fā)生混亂、錯(cuò)位的問題.有一些初學(xué)者習(xí)慣使用單一表格的方法來給整個(gè)網(wǎng)頁的頁面進(jìn)行布局,這種方法不僅不規(guī)范,而且很容易導(dǎo)致錯(cuò)誤發(fā)生.這是因?yàn)楸砀衩恳粋€(gè)單元格之間都是存在密切的相關(guān)性的,在反復(fù)將其拆分、合并之后,很難記住到底是哪一個(gè)單元格設(shè)置了什么樣的寬度,哪一個(gè)單元格又會(huì)對其它布局內(nèi)容帶來影響,諸如此類,問題便會(huì)接連出現(xiàn).

正確的解決方法是:盡可能使用多個(gè)表格來做布局,盡量減少每個(gè)表格之間存在的關(guān)聯(lián)度,對較為復(fù)雜的內(nèi)容欄目來說,應(yīng)該做合理的嵌套,每一個(gè)不同的欄目都要相應(yīng)使用一個(gè)獨(dú)立的表格.同時(shí),注意不能隨便的挪動(dòng)表格,切忌隨意更改單元格的高度與寬度.網(wǎng)頁的布局是一項(xiàng)細(xì)致性要求非常高的內(nèi)容,無論是哪一個(gè)欄目的高度與寬度,都必須要提前進(jìn)行測量,之后再做相應(yīng)的設(shè)置,避免出錯(cuò).

(六)處理頁面分辨率的方法

在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí),有很多時(shí)候都會(huì)發(fā)生這樣的情況:在本地電腦上頁面顯示是正常的,但是一旦換了臺電腦,網(wǎng)頁的界面就會(huì)或變寬、或變窄,不僅不具美感,而且會(huì)影響到用戶瀏覽.而針對這一問題,關(guān)鍵原因在于網(wǎng)頁分辨率的設(shè)置是不統(tǒng)一的,而解決的技巧為:于Dreamweaver文檔窗口的右下角,點(diǎn)擊選擇分辨率的大小,確定適宜尺寸,于彈出的菜單中,選中當(dāng)前頁面指定的分辨率,之后便可以實(shí)現(xiàn)在不同電腦瀏覽下網(wǎng)頁都會(huì)統(tǒng)一了.

(七)圖文混排問題的處理方法

Dreamweaver網(wǎng)頁設(shè)計(jì)中,圖文混排的問題是通常會(huì)發(fā)生的,主要表現(xiàn)為:圖片和文字堆積在一起,排版時(shí)由于錯(cuò)位而無法對齊.比如說在欄目條中的一個(gè)單元格中,標(biāo)題與小圖標(biāo)共存,文字與圖標(biāo)無法相互對應(yīng).對于這一問題的解決技巧,便是確定圖片為居中屬性,并做圖片左、右邊距的調(diào)整.

(八)不同版本的Dreamweaver界面及功能的不同

目前,市面上所使用的Dreamweaver版本繁多,在使用過程中究竟應(yīng)該選擇哪個(gè)版本比較好,對于初學(xué)者來說大家都會(huì)有這樣的問題.從最早的Dreamweaver1.0到目前的Dreamweaver CC每個(gè)版本各有優(yōu)缺點(diǎn);當(dāng)然大部分情況下,新版本是在老版本的基礎(chǔ)上做了一定的修改及提升.就軟件的穩(wěn)定性而言,Dreamweaver8.0界面簡潔,比cs版占用系統(tǒng)資源低得多;功能比較全,雖然相對來說軟件版本較老,但適于初學(xué)者的使用.另外,CS4之前的版本,大多適應(yīng)表格框架的網(wǎng)頁,所對應(yīng)的語言是html4;CS4開始,提高了對于層和CSS控制的支持.無論使用哪一種軟件版本,最終所實(shí)現(xiàn)的目標(biāo)都是相同的,只要能完成預(yù)期網(wǎng)頁的制作就可以,所以大家在選擇時(shí),應(yīng)該更加注重自己在使用過程中的使用習(xí)慣及使用技巧的熟練度.選擇自己能夠得心應(yīng)手的工具軟件.

三、結(jié)束語

Dreamweaver是很多網(wǎng)頁制作者在網(wǎng)頁制作時(shí)的首選軟件,具有簡單、實(shí)用的優(yōu)點(diǎn),而針對其中容易忽略、常發(fā)生的一些問題,應(yīng)當(dāng)使用合適的技巧,不僅可以節(jié)約制作時(shí)間,而且還能提高網(wǎng)頁制作的質(zhì)量.當(dāng)然,網(wǎng)頁制作的學(xué)習(xí)也是一個(gè)漫長的過程,而Dreamweaver網(wǎng)頁制作技巧和出現(xiàn)的問題不止是上文中提到的這幾點(diǎn),還有很多有待于做出深入的總結(jié)與研究.

[1]韓媛媛.淺談Dreamweaver在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].信息與電腦,2016,35(7):57-58.

[2]王艷.Dreamweaver網(wǎng)頁制作技巧與問題處理[J].電腦編程技巧與維護(hù),2016,22(19):70-72.

[3]樊小春.16條Dreamweaver網(wǎng)頁制作的操作技巧[J].計(jì)算機(jī)與網(wǎng)絡(luò),2014,24(21):36-37.

[4]李遠(yuǎn)華.任務(wù)驅(qū)動(dòng)法在Dreamweaver網(wǎng)頁制作課程中的實(shí)踐與研究[J].現(xiàn)代職業(yè)教育,2016,18(23):286.