淺談dreamweaver網頁制作技巧及常見問題處理方法

天津國土資源和房屋職業學院 馬 莉

淺談dreamweaver網頁制作技巧及常見問題處理方法

天津國土資源和房屋職業學院 馬 莉

在計算機各項網絡技術中,網頁制作是必學的一項入門級技術,Dreamweaver軟件支持多腳本的語言,也是初學計算機技術者或者是網站開發工作者必選的一種軟件,但同時它也是帶給初級入門者很多困惑的一個軟件.使用Dreamweaver進行網頁制作時,有很多應用技巧的應用能達到事半功倍的效果,但也有很多易犯的錯誤容易被忽視.本文就對Dreamweaver網頁制作技巧和解決這些問題的方法進行探析,旨在為后續學習者提供參考借鑒.

Dreamweaver;網頁制作;技巧;問題;處理方法

Dreamweaver是一款網頁編輯器,深受網頁制作者與學習者的青睞.但是該軟件卻易學難用,實際使用時有很多情況下會讓使用者一籌莫展,這是因為Dreamweaver對細節與規范要求非常高,如果學習者粗心,制作較為隨意,就會發生一些意想不到的錯誤,使得于調試時很難下手.其實通過一些技巧的應用,有很多問題便會迎刃而解,而且如果能恰當應用制作技巧,還能實現對頁面的細節優化.下文就對這些常見問題與技巧方法做整理、總結.

一、網頁制作前的整體準備

(一)確定主題.網頁主題的確定范圍應該小,而且應表達直接、準確,應根據用戶需求確定網頁的主題,應依照瀏覽者的意愿進行定位,使網頁能夠滿足用戶需求.

(二)風格確定.網頁的創意與風格是較難把握的兩個內容,創意的獨特性和風格的迥異能展現出網頁的整體品質,對網站的發展有著巨大的影響力.網頁的創意多是來源于生活的積累,關鍵在于設計的用心.

(三)整體規劃.一個高質量的網頁設計,其規劃是需要完整的,欄目、板塊與導航欄等應做到清晰、明確.欄目的安排要緊扣主題;目錄和鏈接的結構要安排妥當,目錄層次不宜過多,一般控制在3層以內,鏈接可一對一、一對多兩種形式混用.

(四)上傳測試.網頁制作完成后要申請主頁進行上傳的工作,可選擇Dreamweaver自身的FTP功能作為上傳工具,上傳后做測試的工作,一旦發現問題要及時更正.

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

二、網頁制作技巧及問題的處理方法

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

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

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

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

Flash工具具有強大的動畫編輯功能,界面簡潔、功能強大,能夠實現把動畫、音效等完美的融合在一起,是動畫設計初學者和網頁制作人員的首選.將Flash插入到網頁中,能使頁面更為鮮活、生動.雖然Flash在當今有著廣泛的應用,但是該軟件也有一些操作技巧需要靈活運用,例如,如果想要插入的Flash動畫,其背景顏色會對網頁背景有一定遮擋,如何解決Flash背景色,使之變成透明色?

解決技巧:在網頁插入Flash后,在選定的基礎上,點擊【參數】按鈕,在彈出的退化框中輸入"wmode",【值】下輸入"transparent",之后選擇【確定】.這樣就可以使網頁中的Flash文件變為透明.

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

在Dreamweaver中輸入空格的這一問題已經是一個很普遍發生的問題,各種介紹、問題講述都涉及到這一內容.

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

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

路徑是相關元素和網頁之間架構的重要橋梁,一旦路徑錯誤,那么會導致網頁不能正常瀏覽,出現異常.在使用Dreamweaver做網頁設計時,普遍發生的路徑錯誤問題便是圖片鏈接錯誤,而這一直接后果便是導致瀏覽器不能顯示出圖片.發生該問題的誘因可能為:

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

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

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

表格可以說是一個又快捷、但是又難以調試的布局方式,這是因為表格方便、簡單,很容易學會,但是卻不容易掌握,會常發生混亂、錯位的問題.有一些初學者習慣使用單一表格的方法來給整個網頁的頁面進行布局,這種方法不僅不規范,而且很容易導致錯誤發生.這是因為表格每一個單元格之間都是存在密切的相關性的,在反復將其拆分、合并之后,很難記住到底是哪一個單元格設置了什么樣的寬度,哪一個單元格又會對其它布局內容帶來影響,諸如此類,問題便會接連出現.

正確的解決方法是:盡可能使用多個表格來做布局,盡量減少每個表格之間存在的關聯度,對較為復雜的內容欄目來說,應該做合理的嵌套,每一個不同的欄目都要相應使用一個獨立的表格.同時,注意不能隨便的挪動表格,切忌隨意更改單元格的高度與寬度.網頁的布局是一項細致性要求非常高的內容,無論是哪一個欄目的高度與寬度,都必須要提前進行測量,之后再做相應的設置,避免出錯.

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

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

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

Dreamweaver網頁設計中,圖文混排的問題是通常會發生的,主要表現為:圖片和文字堆積在一起,排版時由于錯位而無法對齊.比如說在欄目條中的一個單元格中,標題與小圖標共存,文字與圖標無法相互對應.對于這一問題的解決技巧,便是確定圖片為居中屬性,并做圖片左、右邊距的調整.

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

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

三、結束語

Dreamweaver是很多網頁制作者在網頁制作時的首選軟件,具有簡單、實用的優點,而針對其中容易忽略、常發生的一些問題,應當使用合適的技巧,不僅可以節約制作時間,而且還能提高網頁制作的質量.當然,網頁制作的學習也是一個漫長的過程,而Dreamweaver網頁制作技巧和出現的問題不止是上文中提到的這幾點,還有很多有待于做出深入的總結與研究.

[1]韓媛媛.淺談Dreamweaver在網頁設計中的應用[J].信息與電腦,2016,35(7):57-58.

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

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

[4]李遠華.任務驅動法在Dreamweaver網頁制作課程中的實踐與研究[J].現代職業教育,2016,18(23):286.