Ｄｒｅａｍｗｅａｖｅｒ８．０使用技巧

【摘要】Dreamweaver 8.0是一款優秀的專業網站開發軟件，其應用范圍很廣，但對于初學網頁設計的人來說不易掌握。文章就管理站點、網頁布局和網頁編輯三個方面的技巧來做詳細的闡述，為初學者提供幫助。

【關鍵詞】管理站點；內框架布局；網頁編輯；頁面屬性；網站相冊

【中圖分類號】G40-57【文獻標識碼】A 【論文編號】1009—8097（2008）13—0138—04

眾所周知，Dreamweaver 8.0是一款非常優秀的專業網站開發軟件，目前的版本已經發展到CS3（即9.0版），由于8.0的普及使用范圍很廣，本文則以8.0為主來講解Dreamweaver的使用技巧（下文的Dreamweaver均指8.0版），讓網頁制作初學者更好的掌握該軟件的使用。

一 網站管理方面

一個Web站點內一般有很多網頁文件、圖片，甚至Flash動畫等，如不進行管理歸檔，分散在硬盤的各個地方就無法方便地進行網頁的發布。定義本地站點，就是在硬盤上建立一個目錄，將所有的網頁和相關的文件都放在里面，以便進行網頁的制作和管理。

Dreamweaver提供了方便的站點管理工具，具體操作請參考相關教材，此處不再詳述。在這里需要注意的兩個技巧是：

1 是否使用服務器技術的選擇。

有的初學者認為選擇“否， 我不想使用服務器技術”（圖1-1）和“是，我想使用服務器技術”中的“無”（圖1-2）的效果是一樣的，這是錯誤的，兩者之間是有區別的，在于是否要通過服務器來調試瀏覽網頁，效果如圖1-3和圖1-4所示：

2 站點保存地址的準確書寫

有很多初學者喜歡自己填寫網站保存的位置，如圖2-1所示。但由于路徑中的“/”“\\”的符號使用不當也會造成Dreamweaver中的“資源”面板不可用。

之所以會出現這樣的錯誤，這是因為網址中經常會使用“/”，而且Dreamweaver在此方面沒有嚴格的說明，故有很多初學者會將兩者混淆。

如果寫反了，即寫成了“/”，就會出現圖2-2所示的面板中無資源且操作按鈕不可用問題，而圖2-3所示的為正常的“資源”面板狀態。

二 網頁布局方面

Dreamweaver給用戶提供了表格、布局表格、擴展表格、層和框架布局等幾種方法來進行網頁設計，其中表格、布局表格是當前工作最為流行的網頁布局方法。可惜美中不足的是表格沒有框架布局的指定打開鏈接的功能，如何解決這樣的問題呢？我們可以在表格的單元格中插入內框架（iframe）的代碼就可以解決。但是對于大部分學習者來說，使用HTML代碼來設計網頁是件很難的事。

Dreamweaver通過“標簽選擇器”為我們提供了對內框架代碼的可視化編輯，這樣就不用害怕給網頁添加代碼了。

1 使用“標簽選擇器”插入內框架[1]（iframe）

首先，執行菜單命令“插入”/“標簽”（快捷鍵Ctrl+E），就打開圖3-1所示的“標簽選擇器”對話框。

其次在“HTML標簽”/“頁元素”中選擇“iframe”標簽，然后單擊對話框中的“插入”按鈕，便可打開“iframe”標簽屬性設置的可視對話框，并進行相應的設置，源（src）表示為在該框架中要打開的指定路徑的網頁文件，這里是一個網站相冊，名稱（name）則表示框架的名稱為photo，寬度（width）和高度（height）表示內框架的顯示寬度和高度，如圖3-2所示。

三 網頁編輯方面

網頁編輯主要是指文字和圖片等的編排，已有很多教材進行了詳細闡述，本文將不再贅述。現在主要就網頁編輯中的幾個技巧來描述，希望可以幫助大家提高學習網頁制作的效率。

1“頁面屬性”設置

大多數情況下，我們可能不太會注意“頁面屬性”。但如果要想通過復制其他網頁中的文本內容并保存網頁時，此時就會出現涉及編碼的警告對話框，如圖4-1所示，這就與“頁面屬性”的設置中的“標題/編碼”（內容如圖4-2）編碼有關了。

這里之所以講“頁面屬性”，就是希望大家能夠記住，我們的網頁是中文網頁，使用的編碼是“中文簡體（GB2312）”，如果使用了其他編碼，很有可能會使網頁在顯示時會出現亂碼。同時還要提醒大家，使用Fireworks繪制導出的網頁在設計之前，一定要檢查網頁編碼是否為“中文簡體（GB2312）”，這樣的做法是為了避免網頁在設計中出現亂碼而無法恢復。

2 創建網站相冊[2]

如何能夠快速的創建一個網站相冊呢？Dreamweaver為我們提供了更為快捷有效的方法，操作過程如下：

首先，執行菜單命令“命令”/“創建網站相冊”，打開“創建網站相冊”的對話框，并進行相應設置，結果如圖5-1所示。

相關參數設置說明：

“源圖像文件夾”：表示提供用于制作相冊的圖片素材的位置；

“目標文件夾”：表示生成的網站相冊保存的位置；

“縮略圖大小”：表示首頁顯示圖片的大小；

“列”：表示首頁顯示縮略圖的列數。

其次，單擊“確定”按鈕后，Dreamweaver會自動打開Fireworks進行圖片處理，并生成網站相冊。如果沒有安裝Fireworks的話，那就無法進行網站相冊的制作了，由此可見，網頁制作三劍客是一個整體。完成的最終效果見圖5-2。

3 查找和替換的應用

在網站相冊中，我們需要將“01-1.jpg”文字替換成“北京與奧運握手”，這樣才能與奧運相冊的主題相吻合。Dreamweaver提供了類似Word中“查找和替換”的對話框，功能十分強大，我們就利用這個功能來完成這一操作。

首先執行“編輯”菜單中的“查找和替換”命令，打開圖6-1所示的對話框：

相關設置參數說明：

查找范圍：主要有“所選文字”、“當前文檔”、“打開的文檔”、“文件夾…”、“站點中選定的文件”和“整個當前本地站點”。

搜索：“源代碼”、“文本”、“文本（高級）”和“指定標簽”，不僅可以查找文本，還可以查找特定格式的文本和HTML代碼與指定標簽。

保存和打開：可以將當前的查找條件設置以.dwr的文件格式來保存和重復打開使用其他參數設置與Word相同，這里就不再詳述。

其次，在“查找”后的文本框中輸入“01-1.jpg”內容，在“替換”后的文本框中輸入“北京與奧運握手”內容。如果只替換當前文檔中的內容，則“查找范圍”選擇“當前文檔”；要全部替換的話，則可以選擇“整個當前本地站點”。查找結果如圖6-2所示，網站相冊最終效果見圖6-3所示。希望大家能夠認真研究該對話框的使用，要學會舉一反三。

小結

上述關于網頁制作的三個方面6個技巧，是本人在對網頁制作工具Dreamweaver的教學中總結出來的，希望能夠為正在學習網頁制作的人提供有效的幫助，同時希望大家在學習軟件時一定要認真細致，學會總結，這樣才能更好地掌握軟件的使用技巧，使學習事半功倍。

參考文獻

[1] 莊王健.Dreamweaver Fireworks Flash 網頁設計三劍客 白金教程.北京:電子工業出版社，2006:57-61.

[2] 陸瑩.網頁制作Dreamweaver MX 2004(M).上海:華東師范大學出版社，2007:128-131.