第6章創(chuàng)建Web站點(diǎn)學(xué)習(xí)目標(biāo)：認(rèn)識(shí)Dreamweaver工作界面掌握站點(diǎn)的創(chuàng)建和管理主要內(nèi)容6.1Dreamweaver的工作界面6.2創(chuàng)建和管理本地站點(diǎn)

6.1Dreamweaver的工作界面Dreamweaver是集網(wǎng)站管理和網(wǎng)頁(yè)制作于一身的可視化網(wǎng)頁(yè)編輯軟件，利用它可以不用編寫代碼就能輕而易舉地制作出跨越平臺(tái)、跨越瀏覽器的充滿活力的網(wǎng)頁(yè)。為了能夠更好的使用Dreamweaver，我們首先來了解一下Dreamweaver工作界面的基本元素。如圖6-1所示操作界面布局結(jié)構(gòu)緊湊、合理，界面由菜單欄、插入欄、文檔編輯窗口、屬性面板以及浮動(dòng)面板等組成。

6.1Dreamweaver的工作界面

6.1Dreamweaver的工作界面6.1.1菜單欄菜單欄包括文件、編輯、查看、插入記錄、修改、文本、命令、站點(diǎn)、窗口和幫助10個(gè)菜單?？梢酝ㄟ^菜單欄中的命令來完成某項(xiàng)特定的操作。6.1.2插入欄插入欄位于菜單欄的下方，該欄內(nèi)放置的是經(jīng)常用到的對(duì)象和工具，在編輯網(wǎng)頁(yè)時(shí)能夠方便的應(yīng)用這些對(duì)象和工具以提高編寫的效率。6.1.3浮動(dòng)面板組浮動(dòng)面板組位于工作界面的右側(cè)，面板集中了CSS、應(yīng)用程序、標(biāo)簽檢查器、文件等面板，是網(wǎng)頁(yè)制作、站點(diǎn)管理常用的工具。這些面板都可以展開或折疊，也可以根據(jù)自己的習(xí)慣自由的組合面板。

6.1Dreamweaver的工作界面6.1.4屬性面板屬性面板能夠顯示在文檔窗口中所選對(duì)象的屬性，并能夠通過該面板來修改相關(guān)屬性。如果在文檔窗口中選擇了表格，那么屬性面板中顯示表格的相關(guān)屬性。6.1.5文檔窗口文檔窗口主要用于文檔的顯示、創(chuàng)建和編輯，可以在代碼、拆分、設(shè)計(jì)三種視圖中分別查看文檔。6.2創(chuàng)建和管理本地站點(diǎn)站點(diǎn)是由一組相關(guān)網(wǎng)頁(yè)以及有關(guān)的文件、腳本、數(shù)據(jù)庫(kù)等內(nèi)容組成的有機(jī)集合體。根據(jù)站點(diǎn)存放的位置不同可以把站點(diǎn)分為本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。要制作一個(gè)完整的、能夠提供給用戶通過網(wǎng)絡(luò)訪問的網(wǎng)站，首先需要在本地磁盤上編寫，這種放置在本地磁盤上的站點(diǎn)被稱為本地站點(diǎn)。把制作好的本地站點(diǎn)通過網(wǎng)絡(luò)傳輸?shù)交ヂ?lián)網(wǎng)Web服務(wù)器里的站點(diǎn)被稱之為遠(yuǎn)程站點(diǎn)。Dreamweaver具有管理本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的強(qiáng)大功能，利用Dreamweaver對(duì)站點(diǎn)的管理能力，能夠盡可能的減少錯(cuò)誤，如路徑錯(cuò)誤、連接錯(cuò)誤等。本地站點(diǎn)其實(shí)質(zhì)是一個(gè)建立在本地磁盤根目錄下的文件夾，在建立比較大的網(wǎng)站時(shí)，可以在本地站點(diǎn)下建立若干個(gè)文件夾用來分類保存文件或按欄目保存文件。6.2.1創(chuàng)建本地站點(diǎn)在創(chuàng)建站點(diǎn)之前，首先要根據(jù)網(wǎng)站的規(guī)劃確定好要建立的站點(diǎn)結(jié)構(gòu)，然后依據(jù)站點(diǎn)規(guī)劃創(chuàng)建站點(diǎn)，這樣創(chuàng)建的站點(diǎn)不僅便于后續(xù)網(wǎng)頁(yè)的創(chuàng)建，而且也便也網(wǎng)站的維護(hù)和更新管理。關(guān)于站點(diǎn)的規(guī)劃請(qǐng)參閱本教材的相關(guān)部分，根據(jù)我們將要建設(shè)的網(wǎng)站，確定的網(wǎng)站結(jié)構(gòu)如圖6-7所示。6.2.1創(chuàng)建本地站點(diǎn)在站點(diǎn)結(jié)構(gòu)中，css文件夾用于保存網(wǎng)站的CSS樣式文件，database文件夾用于保存數(shù)據(jù)庫(kù)文件，flash文件夾保存flash等多媒體文件，images文件夾保存主頁(yè)index.html文件中用用到的圖片，其它文件夾（wskx、dcnews等）用于保存子頁(yè)面文件以及子頁(yè)面用到的資源等，如wskx文件夾保存“網(wǎng)上看校”子頁(yè)面的文件。6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：(續(xù))6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：(續(xù))6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：(續(xù))6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：(續(xù))6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：(續(xù))6.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的具體操作步驟如下：(續(xù))6.2.2管理本地站點(diǎn)Dreamweaver提供了對(duì)站點(diǎn)進(jìn)行多方面的的管理能力，如打開、編輯、刪除、復(fù)制等。1. 編輯站點(diǎn)創(chuàng)建站點(diǎn)之后，如果要對(duì)站點(diǎn)進(jìn)行修改，可以通過“管理站點(diǎn)”對(duì)話框編輯站點(diǎn)，具體操作步驟如下。(1) 執(zhí)行“站點(diǎn)”|“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框，如圖所示。1. 編輯站點(diǎn)(2) 在“管理站點(diǎn)”對(duì)話框中選擇要編輯的站點(diǎn)，單擊【編輯】按鈕，打開“蘋果的味道的站點(diǎn)定義為”對(duì)話框，在對(duì)話框中單擊“高級(jí)”選項(xiàng)卡，在“分類”中選擇相應(yīng)的分類項(xiàng)進(jìn)行修改，如設(shè)置“默認(rèn)圖像文件夾”的路徑等操作，如圖所示。6.2.2管理本地站點(diǎn)1. 編輯站點(diǎn)(3) 修改完成后，單擊【確定】按鈕，返回到“管理站點(diǎn)”對(duì)話框，再單擊【完成】按鈕，即可完成對(duì)站點(diǎn)的編輯工作。6.2.2管理本地站點(diǎn)2. 刪除站點(diǎn)如果不需要使用Dreamweaver對(duì)站點(diǎn)進(jìn)行操作，可以通過“管理站點(diǎn)”對(duì)話框刪除站點(diǎn)，具體操作步驟如下：（1）執(zhí)行“站點(diǎn)”|“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框。（2）在“管理站點(diǎn)”對(duì)話框中，單擊選擇要?jiǎng)h除的站點(diǎn)，如“myweb”站點(diǎn)，如圖6-18所示。6.2.2管理本地站點(diǎn)2. 刪除站點(diǎn)（3）單擊【刪除】按鈕，彈出提示對(duì)話框，詢問是否要?jiǎng)h除選擇站點(diǎn)，如圖6-19所示。

（4）單擊【是】按鈕，即可刪除站點(diǎn)。再單擊【完成】按鈕，完成站點(diǎn)刪除工作。技術(shù)要點(diǎn)：通過“管理站點(diǎn)”對(duì)話框刪除站點(diǎn)操作，僅僅是把站點(diǎn)從Dreamweaver中刪除，而并沒有刪除站點(diǎn)存儲(chǔ)在磁盤上的文件夾。6.2.2管理本地站點(diǎn)3. 復(fù)制站點(diǎn)如果用戶已經(jīng)創(chuàng)建了一個(gè)站點(diǎn)，而且還要?jiǎng)?chuàng)建多個(gè)與此站點(diǎn)結(jié)構(gòu)相同或相似的站點(diǎn)，那么就可以利用站點(diǎn)復(fù)制功能。復(fù)制站點(diǎn)的具體操作步驟如下：（1）執(zhí)行“站點(diǎn)”|“管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對(duì)話框。（2）在“管理站點(diǎn)”對(duì)話框中，單擊選擇要復(fù)制的站點(diǎn)，如“德承科技學(xué)院”站點(diǎn)，單擊【復(fù)制】按鈕，即可復(fù)制該站點(diǎn)，如圖6-20所示。6.2.2管理本地站點(diǎn)4. 創(chuàng)建子文件創(chuàng)建了站點(diǎn)后，可以在站點(diǎn)下建立若干個(gè)文件夾用來分類保存文件或按欄目保存文件。創(chuàng)建子文件夾的具體操作如下。（1）在浮動(dòng)面板組中單擊“文件”面板，文件面板上顯示當(dāng)前建立的站點(diǎn)。（2）在站點(diǎn)上單擊右鍵，彈出一個(gè)快捷菜單，在快捷菜單選擇“新建文件夾”命令，如圖6-21所示。6.2.2管理本地站點(diǎn)4. 創(chuàng)建子文件（3）執(zhí)行“新建文件夾”命令后，在站點(diǎn)下出現(xiàn)一個(gè)文件夾，給文件夾起一個(gè)便于識(shí)別的名字，在空白處單擊確認(rèn)，如圖6-22所示。6.2.2管理本地站點(diǎn)5. 創(chuàng)建網(wǎng)頁(yè)在創(chuàng)建好站點(diǎn)后，就可以創(chuàng)建網(wǎng)頁(yè)了。在Dreamweaver中，創(chuàng)建網(wǎng)頁(yè)的方法比較多，一般常用的方法有：（1）啟動(dòng)Dreamweaver后，窗口中會(huì)出現(xiàn)一個(gè)啟動(dòng)界面，單擊“新建”選項(xiàng)下的“HTML”項(xiàng)，即可創(chuàng)建網(wǎng)頁(yè)，如圖6-23所示。6.2.2管理本地站點(diǎn)5. 創(chuàng)建網(wǎng)頁(yè)（2）執(zhí)行“文件”|“新建”命令，彈出“新建文檔”對(duì)話框，單擊選擇“空白頁(yè)”選項(xiàng)卡，在“頁(yè)面類型”選項(xiàng)中選擇“HTML”項(xiàng)，單擊【創(chuàng)建】按鈕，即可創(chuàng)建網(wǎng)頁(yè)，如圖6-24所示。6.2.2管理本地站點(diǎn)5. 創(chuàng)建網(wǎng)頁(yè)（3）打開浮動(dòng)面板中的文件面板，在站點(diǎn)上單擊彈出一個(gè)快捷菜單，選擇“新建網(wǎng)頁(yè)”命令，即可創(chuàng)建網(wǎng)頁(yè)，如圖6-25所示。6.2.2管理本地站點(diǎn)5.2.8表單標(biāo)記<form>例5-11創(chuàng)建一個(gè)簡(jiǎn)單的表單(續(xù))<textareacols=40name=textfield3rows=4></textarea></font></td></tr><tralign=middlebgcolor=#ffcc00><tdcolspan=2><fontsize=2>填寫完成后，選擇下面的提交按鈕提交表單。</font></td></tr><tralign=middle><tdcolspan=2><inputname=submittype=submi