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

【摘要】Dreamweaver 8.0是一款優(yōu)秀的專業(yè)網(wǎng)站開(kāi)發(fā)軟件，其應(yīng)用范圍很廣，但對(duì)于初學(xué)網(wǎng)頁(yè)設(shè)計(jì)的人來(lái)說(shuō)不易掌握。文章就管理站點(diǎn)、網(wǎng)頁(yè)布局和網(wǎng)頁(yè)編輯三個(gè)方面的技巧來(lái)做詳細(xì)的闡述，為初學(xué)者提供幫助。

【關(guān)鍵詞】管理站點(diǎn)；內(nèi)框架布局；網(wǎng)頁(yè)編輯；頁(yè)面屬性；網(wǎng)站相冊(cè)

【中圖分類號(hào)】G40-57【文獻(xiàn)標(biāo)識(shí)碼】A 【論文編號(hào)】1009—8097（2008）13—0138—04

眾所周知，Dreamweaver 8.0是一款非常優(yōu)秀的專業(yè)網(wǎng)站開(kāi)發(fā)軟件，目前的版本已經(jīng)發(fā)展到CS3（即9.0版），由于8.0的普及使用范圍很廣，本文則以8.0為主來(lái)講解Dreamweaver的使用技巧（下文的Dreamweaver均指8.0版），讓網(wǎng)頁(yè)制作初學(xué)者更好的掌握該軟件的使用。

一 網(wǎng)站管理方面

一個(gè)Web站點(diǎn)內(nèi)一般有很多網(wǎng)頁(yè)文件、圖片，甚至Flash動(dòng)畫等，如不進(jìn)行管理歸檔，分散在硬盤的各個(gè)地方就無(wú)法方便地進(jìn)行網(wǎng)頁(yè)的發(fā)布。定義本地站點(diǎn)，就是在硬盤上建立一個(gè)目錄，將所有的網(wǎng)頁(yè)和相關(guān)的文件都放在里面，以便進(jìn)行網(wǎng)頁(yè)的制作和管理。

Dreamweaver提供了方便的站點(diǎn)管理工具，具體操作請(qǐng)參考相關(guān)教材，此處不再詳述。在這里需要注意的兩個(gè)技巧是：

1 是否使用服務(wù)器技術(shù)的選擇。

有的初學(xué)者認(rèn)為選擇“否， 我不想使用服務(wù)器技術(shù)”（圖1-1）和“是，我想使用服務(wù)器技術(shù)”中的“無(wú)”（圖1-2）的效果是一樣的，這是錯(cuò)誤的，兩者之間是有區(qū)別的，在于是否要通過(guò)服務(wù)器來(lái)調(diào)試瀏覽網(wǎng)頁(yè)，效果如圖1-3和圖1-4所示：

2 站點(diǎn)保存地址的準(zhǔn)確書寫

有很多初學(xué)者喜歡自己填寫網(wǎng)站保存的位置，如圖2-1所示。但由于路徑中的“/”“\\”的符號(hào)使用不當(dāng)也會(huì)造成Dreamweaver中的“資源”面板不可用。

之所以會(huì)出現(xiàn)這樣的錯(cuò)誤，這是因?yàn)榫W(wǎng)址中經(jīng)常會(huì)使用“/”，而且Dreamweaver在此方面沒(méi)有嚴(yán)格的說(shuō)明，故有很多初學(xué)者會(huì)將兩者混淆。

如果寫反了，即寫成了“/”，就會(huì)出現(xiàn)圖2-2所示的面板中無(wú)資源且操作按鈕不可用問(wèn)題，而圖2-3所示的為正常的“資源”面板狀態(tài)。

二 網(wǎng)頁(yè)布局方面

Dreamweaver給用戶提供了表格、布局表格、擴(kuò)展表格、層和框架布局等幾種方法來(lái)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，其中表格、布局表格是當(dāng)前工作最為流行的網(wǎng)頁(yè)布局方法。可惜美中不足的是表格沒(méi)有框架布局的指定打開(kāi)鏈接的功能，如何解決這樣的問(wèn)題呢？我們可以在表格的單元格中插入內(nèi)框架（iframe）的代碼就可以解決。但是對(duì)于大部分學(xué)習(xí)者來(lái)說(shuō)，使用HTML代碼來(lái)設(shè)計(jì)網(wǎng)頁(yè)是件很難的事。

Dreamweaver通過(guò)“標(biāo)簽選擇器”為我們提供了對(duì)內(nèi)框架代碼的可視化編輯，這樣就不用害怕給網(wǎng)頁(yè)添加代碼了。

1 使用“標(biāo)簽選擇器”插入內(nèi)框架[1]（iframe）

首先，執(zhí)行菜單命令“插入”/“標(biāo)簽”（快捷鍵Ctrl+E），就打開(kāi)圖3-1所示的“標(biāo)簽選擇器”對(duì)話框。

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

三 網(wǎng)頁(yè)編輯方面

網(wǎng)頁(yè)編輯主要是指文字和圖片等的編排，已有很多教材進(jìn)行了詳細(xì)闡述，本文將不再贅述。現(xiàn)在主要就網(wǎng)頁(yè)編輯中的幾個(gè)技巧來(lái)描述，希望可以幫助大家提高學(xué)習(xí)網(wǎng)頁(yè)制作的效率。

1“頁(yè)面屬性”設(shè)置

大多數(shù)情況下，我們可能不太會(huì)注意“頁(yè)面屬性”。但如果要想通過(guò)復(fù)制其他網(wǎng)頁(yè)中的文本內(nèi)容并保存網(wǎng)頁(yè)時(shí)，此時(shí)就會(huì)出現(xiàn)涉及編碼的警告對(duì)話框，如圖4-1所示，這就與“頁(yè)面屬性”的設(shè)置中的“標(biāo)題/編碼”（內(nèi)容如圖4-2）編碼有關(guān)了。

這里之所以講“頁(yè)面屬性”，就是希望大家能夠記住，我們的網(wǎng)頁(yè)是中文網(wǎng)頁(yè)，使用的編碼是“中文簡(jiǎn)體（GB2312）”，如果使用了其他編碼，很有可能會(huì)使網(wǎng)頁(yè)在顯示時(shí)會(huì)出現(xiàn)亂碼。同時(shí)還要提醒大家，使用Fireworks繪制導(dǎo)出的網(wǎng)頁(yè)在設(shè)計(jì)之前，一定要檢查網(wǎng)頁(yè)編碼是否為“中文簡(jiǎn)體（GB2312）”，這樣的做法是為了避免網(wǎng)頁(yè)在設(shè)計(jì)中出現(xiàn)亂碼而無(wú)法恢復(fù)。

2 創(chuàng)建網(wǎng)站相冊(cè)[2]

如何能夠快速的創(chuàng)建一個(gè)網(wǎng)站相冊(cè)呢？Dreamweaver為我們提供了更為快捷有效的方法，操作過(guò)程如下：

首先，執(zhí)行菜單命令“命令”/“創(chuàng)建網(wǎng)站相冊(cè)”，打開(kāi)“創(chuàng)建網(wǎng)站相冊(cè)”的對(duì)話框，并進(jìn)行相應(yīng)設(shè)置，結(jié)果如圖5-1所示。

相關(guān)參數(shù)設(shè)置說(shuō)明：

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

“目標(biāo)文件夾”：表示生成的網(wǎng)站相冊(cè)保存的位置；

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

“列”：表示首頁(yè)顯示縮略圖的列數(shù)。

其次，單擊“確定”按鈕后，Dreamweaver會(huì)自動(dòng)打開(kāi)Fireworks進(jìn)行圖片處理，并生成網(wǎng)站相冊(cè)。如果沒(méi)有安裝Fireworks的話，那就無(wú)法進(jìn)行網(wǎng)站相冊(cè)的制作了，由此可見(jiàn)，網(wǎng)頁(yè)制作三劍客是一個(gè)整體。完成的最終效果見(jiàn)圖5-2。

3 查找和替換的應(yīng)用

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

首先執(zhí)行“編輯”菜單中的“查找和替換”命令，打開(kāi)圖6-1所示的對(duì)話框：

相關(guān)設(shè)置參數(shù)說(shuō)明：

查找范圍：主要有“所選文字”、“當(dāng)前文檔”、“打開(kāi)的文檔”、“文件夾…”、“站點(diǎn)中選定的文件”和“整個(gè)當(dāng)前本地站點(diǎn)”。

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

保存和打開(kāi)：可以將當(dāng)前的查找條件設(shè)置以.dwr的文件格式來(lái)保存和重復(fù)打開(kāi)使用其他參數(shù)設(shè)置與Word相同，這里就不再詳述。

其次，在“查找”后的文本框中輸入“01-1.jpg”內(nèi)容，在“替換”后的文本框中輸入“北京與奧運(yùn)握手”內(nèi)容。如果只替換當(dāng)前文檔中的內(nèi)容，則“查找范圍”選擇“當(dāng)前文檔”；要全部替換的話，則可以選擇“整個(gè)當(dāng)前本地站點(diǎn)”。查找結(jié)果如圖6-2所示，網(wǎng)站相冊(cè)最終效果見(jiàn)圖6-3所示。希望大家能夠認(rèn)真研究該對(duì)話框的使用，要學(xué)會(huì)舉一反三。

小結(jié)

上述關(guān)于網(wǎng)頁(yè)制作的三個(gè)方面6個(gè)技巧，是本人在對(duì)網(wǎng)頁(yè)制作工具Dreamweaver的教學(xué)中總結(jié)出來(lái)的，希望能夠?yàn)檎趯W(xué)習(xí)網(wǎng)頁(yè)制作的人提供有效的幫助，同時(shí)希望大家在學(xué)習(xí)軟件時(shí)一定要認(rèn)真細(xì)致，學(xué)會(huì)總結(jié)，這樣才能更好地掌握軟件的使用技巧，使學(xué)習(xí)事半功倍。

參考文獻(xiàn)

[1] 莊王健.Dreamweaver Fireworks Flash 網(wǎng)頁(yè)設(shè)計(jì)三劍客 白金教程.北京:電子工業(yè)出版社，2006:57-61.

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