《多媒體技術(shù)與網(wǎng)頁設(shè)計(jì)》課件第18章

第18章Dreamweaver818.1Dreamweaver8的安裝和啟動(dòng)18.2Dreamweaver8的界面18.3網(wǎng)頁的基本操作18.4站點(diǎn)的規(guī)劃和創(chuàng)建

18.1Dreamweaver8的安裝和啟動(dòng)

18.1.1Dreamweaver8的安裝

(1)雙擊setup.exe文件。

(2)完成后彈出一個(gè)對(duì)話框，單擊“下一步”按鈕，彈出“許可證協(xié)議”對(duì)話框，選中“我接受該許可證協(xié)議中的條款”單選按鈕，如圖18.1所示。圖18.1“許可證協(xié)議”對(duì)話框

(3)單擊“下一步”按鈕，彈出“目標(biāo)文件夾和快捷方式”對(duì)話框，選中“創(chuàng)建快速啟動(dòng)欄快捷方式(僅限當(dāng)前用戶)”和“在桌面上創(chuàng)建快捷方式(針對(duì)所有用戶)”復(fù)選框，如圖18.2所示。圖18.2“目標(biāo)文件夾和快捷方式”對(duì)話框

(4)單擊“更改”按鈕，在彈出的“更改當(dāng)前目的地文件夾”對(duì)話框的“文件夾名稱”文本框中選擇需要安裝的路徑，如圖18.3所示，單擊“確定”按鈕返回“目標(biāo)文件夾和快捷方式”對(duì)話框。圖18.3“更改當(dāng)前目的地文件夾”對(duì)話框

(5)單擊“下一步”按鈕，彈出如圖18.4所示的“默認(rèn)編輯器”對(duì)話框，選中Dreamweaver8默認(rèn)編輯的文件類型復(fù)選框。圖18.4“默認(rèn)編輯器”對(duì)話框

(6)單擊“下一步”按鈕，彈出如圖18.5所示的“已做好安裝程序的準(zhǔn)備”對(duì)話框。圖18.5“已做好安裝程序的準(zhǔn)備”對(duì)話框

(7)單擊“安裝”按鈕，開始安裝軟件。安裝完畢后彈出如圖18.6所示的“InstallShieldWizard完成”對(duì)話框，單擊“完成”按鈕結(jié)束安裝。圖18.6Dreamweaver8安裝完成

18.1.2Dreamweaver8的打開

使用Dreamweaver8之前，應(yīng)該先打開它，其方法主要有以下幾種：

(1)選擇“開始”→“所有程序”→“Macromedia”→“MacromediaDreamweaver8”命令，如圖18.7所示。圖18.7選擇“開始”菜單命令

(2)雙擊桌面上的Dreamweaver8快捷方式，如圖18.8所示。圖18.8雙擊桌面上的圖標(biāo)

(3)單擊快速啟動(dòng)欄中的Dreamweaver8快捷方式，如圖18.9所示。圖18.9單擊快速啟動(dòng)欄中的圖標(biāo)第一次打開Dreamweaver8時(shí)，系統(tǒng)會(huì)自動(dòng)彈出一個(gè)“工作區(qū)設(shè)置”對(duì)話框，在對(duì)話框中可選擇工作區(qū)布局，在此選中“設(shè)計(jì)器”單選按鈕，如圖18.10所示。圖18.10“工作區(qū)設(shè)置”對(duì)話框單擊“確定”按鈕，系統(tǒng)會(huì)自動(dòng)彈出“Macromedia產(chǎn)品激活”對(duì)話框，在該對(duì)話框中選擇“我有一個(gè)序列號(hào)，我希望激活MacromediaDreamweaver”按鈕，如圖18.11所示。單擊“繼續(xù)”按鈕，在彈出的“輸入您的序列號(hào)”對(duì)話框中輸入序列號(hào)，如圖18.12所示。單擊“繼續(xù)”按鈕，將彈出注冊(cè)Dreamweaver信息窗口，如圖18.13所示。然后彈出注冊(cè)Dreamweaver對(duì)話框，單擊“以后提醒我”按鈕(如圖18.14所示)，進(jìn)入Dreamweaver8的工作界面，并顯示Dreamweaver8開始頁面。圖18.11注冊(cè)選擇圖18.12輸入序列號(hào)圖18.13注冊(cè)Dreamweaver信息窗口圖18.14注冊(cè)Dreamweaver對(duì)話框18.1.3Dreamweaver8的退出

選擇“文件”→“退出”命令或單擊窗口右上角的按鈕，可退出Dreamweaver8。

18.2Dreamweaver8的界面

打開Dreamweaver8后顯示一個(gè)開始頁，新建或打開一個(gè)網(wǎng)頁后將打開網(wǎng)頁編輯窗口，如圖18.15所示。圖18.15Dreamweaver8的界面

1.開始頁

在開始頁中可以進(jìn)行新建網(wǎng)頁、打開網(wǎng)頁以及查看幫助等操作，其界面如圖18.16所示。

(1)打開最近項(xiàng)目：顯示最近編輯過的文件，單擊即可打開相應(yīng)的文件。

(2)創(chuàng)建新項(xiàng)目：可以創(chuàng)建相應(yīng)類型的項(xiàng)目文件。

(3)從范例創(chuàng)建：可以按照范例創(chuàng)建相應(yīng)類型的項(xiàng)目文件。

(4)擴(kuò)展：?jiǎn)?dòng)DreamweaverExchangeManager，管理Dreamweaver的擴(kuò)展插件。圖18.16開始頁

2.菜單欄

Dreamweaver8的菜單欄中包含文件、編輯、查看和插入等10個(gè)菜單項(xiàng)。每個(gè)菜單項(xiàng)下面有一個(gè)下拉菜單，每個(gè)菜單下面又包含若干個(gè)命令，這些命令都有自己的形式，如圖18.17所示。圖18.17菜單命令的表現(xiàn)形式具體含義分別如下：

(1)黑色命令：表示當(dāng)前該命令是可用的。

(2)灰色命令：表示當(dāng)前該命令是不可用的。

(3)標(biāo)有復(fù)選標(biāo)記“”的命令：表示該命令是一種

可選擇命令。若前面出現(xiàn)“”標(biāo)記，表示該命令正在使用；若沒有“”標(biāo)記，則表示該命令不能使用。

(4)標(biāo)有三角形“”的命令：表示在該命令下還有下一級(jí)子菜單命令。

(5)標(biāo)有省略號(hào)“...”的命令：表示選擇該命令后會(huì)彈出一個(gè)相關(guān)的對(duì)話框。

(6)標(biāo)有快捷鍵的命令：表示該命令有一個(gè)快捷鍵，當(dāng)按下該快捷鍵時(shí)，即可執(zhí)行該命令。

3.插入欄

插入欄用于在頁面中插入各種類型的網(wǎng)頁元素，如鏈接、表格和圖片等，如圖18.18所示。單擊“常用”按鈕，在彈出的下拉菜單中可以選擇要插入的網(wǎng)頁元素的類型，如圖18.19所示。圖18.18插入欄圖18.19選擇插入類型

4.?“屬性”面板

通過“屬性”面板可以查看和更改當(dāng)前對(duì)象的屬性，如圖18.20所示。根據(jù)選擇對(duì)象的不同，“屬性”面板中的設(shè)置項(xiàng)目也不同。圖18.20“屬性”面板

5.浮動(dòng)面板組

浮動(dòng)面板組?？吭贒reamweaver8主界面的右側(cè)，如圖18.21所示。單擊浮動(dòng)面板名稱左側(cè)的圖標(biāo)即可顯示該浮動(dòng)面板的內(nèi)容，再單擊圖標(biāo)可以合攏面板，此時(shí)只顯示該浮動(dòng)面板的名稱。在Dreamweaver8中有許多浮動(dòng)面板，可以在“窗口”菜單項(xiàng)中選擇相應(yīng)的命令打開某個(gè)浮動(dòng)面板。圖18.21浮動(dòng)面板組

6.編輯窗口

編輯窗口由項(xiàng)目選擇標(biāo)簽、文檔工具欄、水平標(biāo)尺、垂直標(biāo)尺、編輯區(qū)域、狀態(tài)欄、垂直擴(kuò)展按鈕和水平擴(kuò)展按鈕構(gòu)成。當(dāng)新建或打開一個(gè)網(wǎng)頁時(shí)，會(huì)顯示如圖18.22所示的窗口。圖18.22編輯窗口

1)項(xiàng)目選擇標(biāo)簽

編輯窗口的左上角是項(xiàng)目選擇標(biāo)簽，當(dāng)打開多個(gè)網(wǎng)頁文件時(shí)，每個(gè)文件顯示一個(gè)標(biāo)簽，如圖18.23所示。單擊其中的一個(gè)標(biāo)簽會(huì)在編輯區(qū)域中顯示該文件的內(nèi)容。圖18.23項(xiàng)目選擇標(biāo)簽

2)文檔工具欄

文檔工具欄用于切換編輯區(qū)視圖模式、設(shè)置網(wǎng)頁標(biāo)

題、進(jìn)行標(biāo)簽驗(yàn)證以及在瀏覽器中瀏覽網(wǎng)頁，如圖18.24

所示。圖18.24文檔工具欄文檔工具欄中各選項(xiàng)的功能和含義如下：

(1)“代碼”按鈕：顯示代碼，并且可以在編輯窗口中輸入HTML代碼。

(2)“拆分”按鈕：顯示代碼和設(shè)計(jì)視圖。

(3)“設(shè)計(jì)”按鈕：顯示設(shè)計(jì)視圖，可以在編輯窗口中對(duì)頁面進(jìn)行設(shè)計(jì)。

(4)“標(biāo)題”文本框：設(shè)置網(wǎng)頁標(biāo)題。

(5)按鈕：瀏覽器檢查錯(cuò)誤。

(6)按鈕：驗(yàn)證標(biāo)簽。

(7)按鈕：管理文件。

(8)按鈕：預(yù)覽和調(diào)試網(wǎng)頁。

(9)按鈕：刷新視圖。

(10)按鈕：隱藏或顯示內(nèi)容、標(biāo)尺、網(wǎng)格和輔助線等對(duì)象。

(11)按鈕：隱藏或顯示可視化助理對(duì)象。

3)水平標(biāo)尺和垂直標(biāo)尺

(1)把鼠標(biāo)移動(dòng)到水平或垂直標(biāo)尺上，按住鼠標(biāo)左鍵不放，向下或向右拖動(dòng)鼠標(biāo)。

(2)此時(shí)會(huì)顯示一條綠色的輔助線，并隨著鼠標(biāo)移

動(dòng)，在鼠標(biāo)指針右下方會(huì)顯示輔助線的坐標(biāo)位置，當(dāng)?shù)竭_(dá)需要的位置時(shí)釋放鼠標(biāo)左鍵即可添加一條輔助線，如圖18.25所示。圖18.25添加輔助線

4)編輯區(qū)域

編輯區(qū)域是編輯網(wǎng)頁和編寫網(wǎng)頁代碼的區(qū)域，該區(qū)域有設(shè)計(jì)、代碼和拆分三種視圖模式。

(1)設(shè)計(jì)視圖：?jiǎn)螕粑臋n工具欄中的“設(shè)計(jì)”按鈕，可

將視圖模式切換到設(shè)計(jì)視圖模式，在該模式下可以編輯

網(wǎng)頁。

(2)代碼視圖：?jiǎn)螕粑臋n工具欄中的“代碼”按鈕，可將視圖模式切換到代碼模式，在該模式下可以編寫或修改網(wǎng)頁代碼，如圖18.26所示。圖18.26代碼視圖

(3)拆分視圖：?jiǎn)螕粑臋n工具欄中的“拆分”按鈕，可

將視圖模式切換到拆分視圖模式，在該模式下整個(gè)編輯區(qū)域分為上、下兩個(gè)部分，上邊是代碼視圖，下邊是設(shè)計(jì)視圖，如圖18.27所示。圖18.27拆分視圖

5)狀態(tài)欄

編輯區(qū)域的下方是狀態(tài)欄，包含標(biāo)簽選擇器、選取工具、手形工具、縮放工具、設(shè)置縮放比例下拉列表框、窗口大小欄和文件大小欄等項(xiàng)目，如圖18.28所示。圖18.28狀態(tài)欄

(1)標(biāo)簽選擇器：在標(biāo)簽選擇器中顯示了常用的HTML標(biāo)簽，運(yùn)用這些標(biāo)簽可以快速地選擇編輯區(qū)域中的某些項(xiàng)目。例如，要選擇表格中的一行，可使用鼠標(biāo)指針定位到該行中的任意一個(gè)單元格中，然后單擊標(biāo)簽選擇器中的<tr>。

(2)選取工具：?jiǎn)螕粼搱D標(biāo)，鼠標(biāo)變?yōu)樾螤?，可以選擇各種對(duì)象。

(3)手形工具：?jiǎn)螕粼搱D標(biāo)，鼠標(biāo)變?yōu)樾螤?，按住鼠?biāo)左鍵拖動(dòng)鼠標(biāo)，可以移動(dòng)整個(gè)設(shè)計(jì)視圖中網(wǎng)頁的位置，顯示隱藏的內(nèi)容。

(4)縮放工具：?jiǎn)螕粼搱D標(biāo)，鼠標(biāo)變?yōu)樾螤?，在設(shè)計(jì)視圖中單擊鼠標(biāo)左鍵可以放大顯示的內(nèi)容；按住Alt鍵，鼠標(biāo)將變?yōu)樾螤?，在設(shè)計(jì)視圖中單擊鼠標(biāo)左鍵可以縮小顯示的內(nèi)容。

(5)設(shè)置縮放比例下拉列表框：設(shè)置設(shè)計(jì)視圖的縮放比例，可以直接輸入縮放比例或單擊右側(cè)的按鈕，選擇其中的一個(gè)縮放比例。

(6)窗口大小欄：用于顯示當(dāng)前設(shè)置視圖的尺寸。

(7)文件大小欄：顯示當(dāng)前網(wǎng)頁文件的大小和下載需要的時(shí)間。

6)垂直擴(kuò)展按鈕和水平擴(kuò)展按鈕

編輯區(qū)域的右側(cè)是垂直擴(kuò)展按鈕，可顯示或隱藏編輯窗口右側(cè)的浮動(dòng)面板，擴(kuò)展編輯窗口的寬度。水平擴(kuò)展按鈕位于編輯區(qū)域的下方，顯示或隱藏編輯窗口下方的屬性面板，擴(kuò)展編輯窗口的高度。

18.3網(wǎng)頁的基本操作

有了對(duì)Dreamweaver8的初步認(rèn)識(shí)后，下面介紹新建網(wǎng)頁、設(shè)置網(wǎng)頁屬性、保存網(wǎng)頁、打開網(wǎng)頁和預(yù)覽網(wǎng)頁等基本操作。18.3.1新建網(wǎng)頁

(1)選擇“文件”→“新建”命令，彈出“新建文檔”對(duì)話

框，如圖18.29所示。

(2)在“類別”列表框中選擇網(wǎng)頁類別，如選擇“動(dòng)態(tài)頁”選項(xiàng)，此時(shí)在右側(cè)的列表框中將顯示動(dòng)態(tài)網(wǎng)頁的類型。

(3)單擊“創(chuàng)建”按鈕，即可新建指定類型的空白網(wǎng)頁。圖18.29“新建文檔”對(duì)話框18.3.2設(shè)置網(wǎng)頁屬性

新建網(wǎng)頁之后，還要對(duì)網(wǎng)頁的屬性進(jìn)行設(shè)置。選擇“修改”→“頁面屬性”命令，彈出“頁面屬性”對(duì)話框，在“分類”列表框中有“外觀”、“鏈接”、“標(biāo)題”、“標(biāo)題/編碼”和“跟蹤圖像”5個(gè)選項(xiàng)。

1.外觀設(shè)置

在“分類”列表框中選擇“外觀”選項(xiàng)，對(duì)話框右側(cè)將顯示相應(yīng)的參數(shù)設(shè)置選項(xiàng)，如圖18.30所示。其中各參數(shù)的含義如下：

(1)頁面字體：設(shè)置網(wǎng)頁中文字的字體，和按鈕分別設(shè)置文本為加粗和斜體格式。

(2)大?。涸O(shè)置文字的大小。

(3)文本顏色：設(shè)置文字的顏色，可以單擊按鈕，在彈出的顏色列表中選擇需要的顏色或直接在后面的文本框中輸入顏色的值。

(4)背景顏色：設(shè)置網(wǎng)頁中的背景顏色，可以單擊按鈕，在彈出的顏色列表中選擇需要的顏色或直接在后面的文本框中輸入顏色的值。

(5)背景圖像：設(shè)置網(wǎng)頁中的背景圖像，可以指定或選擇輸入背景圖片的路徑。

(6)重復(fù)：設(shè)置背景圖像的重復(fù)方式。

(7)左邊距：設(shè)置網(wǎng)頁內(nèi)容與瀏覽器左邊界的距離。

(8)右邊距：設(shè)置網(wǎng)頁內(nèi)容與瀏覽器右邊界的距離。

(9)上邊距：設(shè)置網(wǎng)頁內(nèi)容與瀏覽器上邊界的距離。

(10)下邊距：設(shè)置網(wǎng)頁內(nèi)容與瀏覽器下邊界的距離。圖18.30“外觀”設(shè)置選項(xiàng)

2.標(biāo)題設(shè)置

在“分類”列表框中選擇“標(biāo)題”選項(xiàng)，對(duì)話框右側(cè)將顯示相應(yīng)的參數(shù)設(shè)置選項(xiàng)，如圖18.31所示，其中各參數(shù)的含義如下：

(1)標(biāo)題字體：設(shè)置頁面標(biāo)題的字體。

(2)標(biāo)題1～標(biāo)題6：設(shè)置1級(jí)標(biāo)題至6級(jí)標(biāo)題的字體、大小和顏色。圖18.31“標(biāo)題”設(shè)置選項(xiàng)

3.標(biāo)題和編碼設(shè)置

在“分類”列表框中選擇“標(biāo)題/編碼”選項(xiàng)，對(duì)話框右側(cè)將顯示相應(yīng)的參數(shù)設(shè)置選項(xiàng)，如圖18.32所示，其中各參數(shù)的含義如下：

(1)標(biāo)題：設(shè)置網(wǎng)頁標(biāo)題。

(2)文檔類型：設(shè)置新建的網(wǎng)頁類型。

(3)編碼：設(shè)置頁面字體編碼類型。圖18.32“標(biāo)題/編碼”設(shè)置選項(xiàng)

4.跟蹤圖像設(shè)置

在“分類”列表框中選擇“跟蹤圖像”選項(xiàng)，對(duì)話框右側(cè)將顯示相應(yīng)的參數(shù)設(shè)置選項(xiàng)，如圖18.33所示，其中各參數(shù)的含義如下：

(1)跟蹤圖像：指定一幅圖像作為設(shè)計(jì)網(wǎng)頁時(shí)的參考圖像。

(2)透明度：設(shè)置跟蹤圖像的透明度。圖18.33“跟蹤圖像”設(shè)置選項(xiàng)

5.超級(jí)鏈接設(shè)置

在“分類”列表框中選擇“鏈接”選項(xiàng)，對(duì)話框右側(cè)將顯示相應(yīng)的參數(shù)設(shè)置選項(xiàng)，如圖18.34所示，其中各參數(shù)的含義如下：圖18.34“鏈接”設(shè)置選項(xiàng)

(1)鏈接字體：設(shè)置網(wǎng)頁中超級(jí)鏈接字體，和

按鈕分別可以設(shè)置超級(jí)鏈接的字體為加粗和斜體格式。

(2)大?。涸O(shè)置超級(jí)鏈接字體的大小。

(3)鏈接顏色：設(shè)置超級(jí)鏈接的顏色。

(4)變換圖像鏈接：設(shè)置鼠標(biāo)指針移動(dòng)到超級(jí)鏈接上時(shí)超級(jí)鏈接的顏色。

(5)已訪問鏈接：設(shè)置訪問后的超級(jí)鏈接顏色。

(6)活動(dòng)鏈接：設(shè)置正在訪問的超級(jí)鏈接顏色。

(7)下劃線樣式：設(shè)置超級(jí)鏈接的下劃線類型。18.3.3保存網(wǎng)頁

1.直接保存

選擇“文件”→“保存”命令即可保存當(dāng)前網(wǎng)頁。如果為新建的文檔，則執(zhí)行保存操作后會(huì)彈出“另存為”對(duì)話框，如圖18.35所示。選擇保存的位置，在“文件名”文本框中輸入名稱，單擊“保存”即可。圖18.35“另存為”對(duì)話框

2.另存網(wǎng)頁

對(duì)于打開的網(wǎng)頁，如果想保存為另外的名稱或保存在其它位置，就需要對(duì)網(wǎng)頁進(jìn)行另存為操作。其方法是：選擇“文件”→“另存為”命令，彈出“另存為”對(duì)話框，然后設(shè)置新的文件名或保存位置，再單擊“保存”按鈕即可。18.3.4打開網(wǎng)頁

要對(duì)已有的網(wǎng)頁進(jìn)行修改，在修改之前必須打開該網(wǎng)頁文件。打開網(wǎng)頁的方法主要有以下三種：

(1)選擇“文件”→“打開”命令或在開始頁中單擊“打開最近項(xiàng)目”欄中的“打開”超級(jí)鏈接，在彈出的“打開”對(duì)話框中選擇要打開的網(wǎng)頁文件，再單擊“打開”按鈕即可打開該網(wǎng)頁。

(2)在“文件”→“打開最近的文件”命令的子菜單中選擇一個(gè)最近打開的網(wǎng)頁，或在開始頁的“打開最近項(xiàng)目”欄中單擊一個(gè)最近使用過的網(wǎng)頁，即可打開該網(wǎng)頁。

(3)在“我的電腦”窗口中找到需要打開的網(wǎng)頁文件后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“使用Dreamweaver8編輯”命令，即可打開該文件。18.3.5預(yù)覽網(wǎng)頁

選擇“文件”→“在瀏覽器中預(yù)覽”→“IExplore8.0”命令或單擊文檔工具欄中的按鈕，可以對(duì)制作的網(wǎng)頁在瀏覽器中進(jìn)行預(yù)覽，在彈出的下拉菜單中選擇“預(yù)覽在IExplore8.0F12”命令即可打開IE瀏覽器預(yù)覽網(wǎng)頁。

18.4站點(diǎn)的規(guī)劃和創(chuàng)建

18.4.1規(guī)劃站點(diǎn)

Dreamweaver8提供了三種站點(diǎn)：本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測(cè)試站點(diǎn)。本地站點(diǎn)和遠(yuǎn)程站點(diǎn)可以實(shí)現(xiàn)在本地磁盤和Web服務(wù)器之間進(jìn)行文件傳輸，通過測(cè)試站點(diǎn)可以測(cè)試動(dòng)態(tài)站點(diǎn)。

(1)本地站點(diǎn)：是用戶工作的目錄，存放用戶網(wǎng)頁、素材等。在制作一般網(wǎng)頁時(shí)只需建立本地站點(diǎn)即可。

(2)遠(yuǎn)程站點(diǎn)：若不通過連接Internet就能對(duì)所建的站點(diǎn)進(jìn)行測(cè)試，可以在自己的計(jì)算機(jī)上創(chuàng)建遠(yuǎn)程站點(diǎn)以模擬真實(shí)的Web服務(wù)器環(huán)境。

(3)測(cè)試站點(diǎn)：主要在測(cè)試動(dòng)態(tài)頁面時(shí)使用，是Dreamweaver處理動(dòng)態(tài)頁面的文件夾。Dreamweaver用該文件夾生成動(dòng)態(tài)內(nèi)容，在工作時(shí)連接到數(shù)據(jù)庫(kù)。

建立站點(diǎn)前需要做以下準(zhǔn)備工作：

(1)規(guī)劃站點(diǎn)結(jié)構(gòu)：將不同的網(wǎng)頁內(nèi)容分別存在不同的文件夾中，這樣可更加合理地組織站點(diǎn)結(jié)構(gòu)，從而大大提高工作效率。一般情況下，在本地磁盤上創(chuàng)建一個(gè)文件夾，將該文件夾作為站點(diǎn)的根目錄，在設(shè)計(jì)過程中將所有的網(wǎng)頁都保存在該文件夾中。在站點(diǎn)發(fā)布時(shí)，只需將此文件夾中的所有內(nèi)容上傳到Web服務(wù)器上即可。如果站點(diǎn)結(jié)構(gòu)復(fù)雜，內(nèi)容較多，則還需建立子文件夾，以存放不同內(nèi)容的網(wǎng)頁。對(duì)文件和文件夾的命名也非常重要，好的名稱容易理解，能夠表達(dá)出網(wǎng)頁的內(nèi)容。對(duì)于文件和文件夾，可以采用相對(duì)應(yīng)的英文或拼音來命名，這樣看到其名字就大概知道其功能和作用。

(2)制作導(dǎo)航流程：完成站點(diǎn)規(guī)劃后，根據(jù)規(guī)劃的站點(diǎn)，可直接在紙上粗略地繪出導(dǎo)航流程圖，然后再仔細(xì)思考、修改。

(3)繪制頁面草圖：完成導(dǎo)航流程圖后，可以確定整個(gè)站點(diǎn)的頁面風(fēng)格，即設(shè)計(jì)站點(diǎn)的樣式和版面草圖。18.4.2創(chuàng)建和管理站點(diǎn)

當(dāng)所有的準(zhǔn)備工作完成后，就可以開始創(chuàng)建站點(diǎn)。在Dreamweaver8中可以通過“管理站點(diǎn)”對(duì)話框?qū)φ军c(diǎn)進(jìn)行創(chuàng)建和管理。

1.創(chuàng)建站點(diǎn)

Dreamweaver8具有站點(diǎn)創(chuàng)建和管理功能，使用此功能不僅可以創(chuàng)建單個(gè)文檔，還可以創(chuàng)建完整的Web站點(diǎn)。只有完成站點(diǎn)創(chuàng)建后，才可以在此基礎(chǔ)上制作網(wǎng)站，其具體操作步驟如下：

(1)進(jìn)入Dreamweaver8工作界面后，選擇“站點(diǎn)”→“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框。

(2)選擇“新建”→“站點(diǎn)”命令，如圖18.36所示。圖18.36“管理站點(diǎn)”對(duì)話框

(3)彈出“站點(diǎn)定義”對(duì)話框，在“您打算為您的站點(diǎn)起什么名字？”文本框中輸入站點(diǎn)名稱，如“dreamweaver”，如圖18.37所示。圖18.37輸入站點(diǎn)名稱

(4)單擊“下一步”按鈕，在彈出的對(duì)話框中選中“否，我不想使用服務(wù)器技術(shù)”單選按鈕，如圖18.38所示。圖18.38選擇是否使用服務(wù)器技術(shù)

(5)單擊“下一步”按鈕，選擇在開發(fā)過程中如何使用文件，這里選中“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器(推薦)”單選按鈕，在“您將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置?”文本框中輸入本地站點(diǎn)存儲(chǔ)的位置，如“F:\”，如圖18.39所示。圖18.39選擇文件放置位置

(6)單擊“下一步”按鈕，在彈出的對(duì)話框中的“您如何連接到遠(yuǎn)程服務(wù)器？”下拉列表框中選擇“無”選項(xiàng)，如圖18.40所示。圖18.40選擇如何連接到服務(wù)器

(7)單擊“下一步”按鈕，彈出如圖18.41所示的對(duì)話

框，單擊“完成”按鈕，完成本地站點(diǎn)的定義。圖18.41完成站點(diǎn)定義

(8)彈出“管理站點(diǎn)”對(duì)話框，在其左側(cè)列表框中將顯示名為“dreamweaver”的站點(diǎn)，如圖18.42所示。單擊“完成”按鈕完成本地站點(diǎn)的創(chuàng)建。圖18.42“管理站點(diǎn)”對(duì)話框

2.管理站點(diǎn)

站點(diǎn)創(chuàng)建完成之后，還要管理站點(diǎn)。站點(diǎn)管理主要

包括編輯站點(diǎn)、刪除站點(diǎn)、管理站點(diǎn)中的文件和文件夾

等操作。

1)編輯站點(diǎn)

站點(diǎn)管理可以對(duì)已經(jīng)創(chuàng)建的站點(diǎn)進(jìn)行屬性編輯，具體操作步驟如下：

(1)選擇“站點(diǎn)”→“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框，選擇要編輯的站點(diǎn)，例如選擇“dreamweaver”站點(diǎn)，如圖18.43所示。

圖18.43“管理站點(diǎn)”對(duì)話框

(2)單擊“編輯”按鈕，彈出“dreamweaver的站點(diǎn)定義為”對(duì)話框，如圖18.44所示。

(3)在該對(duì)話框中即可編輯站點(diǎn)，其操作過程和站點(diǎn)的創(chuàng)建方法相同，只要按照提示進(jìn)行操作即可。圖18.44“dreamweaver的站點(diǎn)定義為”對(duì)話框

2)刪除站點(diǎn)

若不需要某個(gè)站點(diǎn)，可以從站點(diǎn)列表中將該站點(diǎn)刪

除，其具體操作步驟如下：

(1)選擇“站點(diǎn)”→“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框，如圖18.45所示。在該對(duì)話框左側(cè)列表框中選擇要?jiǎng)h除的站點(diǎn)，單擊“刪除”按鈕。圖18.45“管理站點(diǎn)”對(duì)話框

(2)彈出如圖18.46所示的警告對(duì)話框，提示執(zhí)行本操作后將不能撤消