Dreamweaver MX網(wǎng)頁設(shè)計(jì)與制作課件：站點(diǎn)管理和第三方組件

站點(diǎn)管理和第三方組件●站點(diǎn)的定義●站點(diǎn)和網(wǎng)頁的關(guān)系●如何上傳站點(diǎn)到網(wǎng)絡(luò)服務(wù)器●使用第三方組件本章學(xué)習(xí)知識(shí)點(diǎn)5.1本地站點(diǎn)管理：軟件屋本章內(nèi)容目錄5.2遠(yuǎn)程站點(diǎn)管理：軟件屋5.3使用第三方組件：滑動(dòng)菜單（SlideMenu）5.4總結(jié)提高5.5本章習(xí)題5.1本地站點(diǎn)管理：軟件屋

5.1.1基本概念站點(diǎn)也稱網(wǎng)站，是互聯(lián)網(wǎng)中最小的環(huán)節(jié)，是一些通過超鏈接相互聯(lián)系的網(wǎng)頁集合。一般來說，用戶應(yīng)該首先在本地計(jì)算機(jī)上建立本地站點(diǎn)，設(shè)計(jì)合理的站點(diǎn)結(jié)構(gòu)和制作所有的網(wǎng)頁，進(jìn)行一系列的測(cè)試。在測(cè)試通過后，再將網(wǎng)頁上傳到Internet服務(wù)器上。l

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

編輯站點(diǎn)內(nèi)容使用文件面板5.1.2上機(jī)操作使用向?qū)?chuàng)建站點(diǎn)。在菜單欄中選擇【站點(diǎn)】|【新建站點(diǎn)】命令，彈出【未命名站點(diǎn)1的站點(diǎn)定義為】對(duì)話框。在對(duì)話框中【站點(diǎn)名稱】以及【本地根文件夾】后的文本框內(nèi)填入基本信息切換到【基本】選項(xiàng)卡下，繼續(xù)完成對(duì)站點(diǎn)的定義操作。單擊【下一步】按鈕，可以設(shè)置站點(diǎn)需要的服務(wù)器技術(shù)，由于這里是本地管理而且是靜態(tài)站點(diǎn)，所以選擇“否，我不想使用服務(wù)器技術(shù)”復(fù)選框

單擊【下一步】按鈕，可以設(shè)置該站點(diǎn)的編輯方式。有三個(gè)選項(xiàng)，單擊選擇【編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）】按鈕。其余的兩個(gè)選項(xiàng)需要網(wǎng)絡(luò)環(huán)境，在本書的下一節(jié)內(nèi)容中會(huì)介紹。在對(duì)話框中的【你將把網(wǎng)頁文件存儲(chǔ)在計(jì)算機(jī)的什么位置？】文本框內(nèi)填入路徑，或者單擊后面的【選擇文件】按鈕，在彈出的【選擇站點(diǎn)軟件屋2的本地根文件夾】對(duì)話框中選擇路徑

單擊【下一步】按鈕進(jìn)入【站點(diǎn)定義】對(duì)話框設(shè)置遠(yuǎn)程站點(diǎn)，如圖5.5所示。在【您如何連接到遠(yuǎn)程服務(wù)器】下拉列表中選擇“無”選項(xiàng)。

單擊【下一步】按鈕，進(jìn)入【站點(diǎn)定義】對(duì)話框，這個(gè)對(duì)話框?qū)⒘谐稣军c(diǎn)設(shè)置的所有屬性。包括站點(diǎn)的本地信息、遠(yuǎn)程信息和測(cè)試服務(wù)器信息。用戶可以在此查看核對(duì)站點(diǎn)的設(shè)置，如果有錯(cuò)誤，則可以單擊【上一步】返回進(jìn)行修改。

查看網(wǎng)站地圖

管理站點(diǎn)，可以對(duì)站點(diǎn)進(jìn)行的操作有添加、刪除、編輯、復(fù)制和導(dǎo)入導(dǎo)出。首先我們可以編輯站點(diǎn)。選擇【站點(diǎn)】|【編輯站點(diǎn)】，打開【編輯站點(diǎn)】對(duì)話框5.2遠(yuǎn)程站點(diǎn)管理：軟件屋

5.2.1基本概念DreamweaverMX不僅具有強(qiáng)大的網(wǎng)頁制作功能，而且在站點(diǎn)創(chuàng)建與管理方面功能同樣強(qiáng)大。DreamweaverMX提供的站點(diǎn)管理器可以全面實(shí)現(xiàn)對(duì)遠(yuǎn)程服務(wù)器的管理和控制。這一節(jié)將介紹有關(guān)網(wǎng)站的測(cè)試、上傳及維護(hù)，完成網(wǎng)站制作最后的一個(gè)步驟。l

站點(diǎn)鏈接測(cè)試l

修復(fù)站點(diǎn)鏈接優(yōu)化HTML源代碼5.2.2上機(jī)操作測(cè)試站點(diǎn)的兼容性。選擇菜單【文件】|【檢查頁】|【檢測(cè)目標(biāo)瀏覽器】命令，打開【目標(biāo)瀏覽器檢查】面板。在彈出的【檢查目標(biāo)瀏覽器】對(duì)話框中，選擇【MicrosoftInternetExplorer5.0】進(jìn)行檢查。

站點(diǎn)的鏈接測(cè)試。檢測(cè)網(wǎng)頁中是否包含斷開的鏈接是一個(gè)非常重要的醒目，如果網(wǎng)頁中存在這種錯(cuò)誤鏈接，一般很難手工查找到。Dreamweaver可以幫助用戶快速地檢查站點(diǎn)中的網(wǎng)頁的鏈接，避免出現(xiàn)錯(cuò)誤。首先選擇菜單【文件】|【檢查頁】|【檢查鏈接】命令，打開【鏈接檢查器】面板。單擊【鏈接檢查器】左上角的【檢查鏈接】按鈕，在彈出的菜單中選擇【為整個(gè)站點(diǎn)檢查鏈接】。在【鏈接檢查器】面板中會(huì)顯示檢查的結(jié)果

測(cè)試站點(diǎn)的合法性。選擇【文件】|【檢查頁】|【驗(yàn)證標(biāo)記】命令，打開【驗(yàn)證】面板

單擊【驗(yàn)證】面板左上角的三角形按鈕，在彈出的菜單中選擇相應(yīng)命令對(duì)整個(gè)站點(diǎn)進(jìn)行驗(yàn)證

生成站點(diǎn)報(bào)告，對(duì)網(wǎng)頁設(shè)計(jì)做出一些建議，幫助用戶修改網(wǎng)頁。選擇菜單中【站點(diǎn)】|【報(bào)告】命令，打開【報(bào)告】對(duì)話框

在【報(bào)告在】下拉列表中選擇【整個(gè)當(dāng)前本地站點(diǎn)】。在【選擇報(bào)告】區(qū)域中，選中“可移除的空標(biāo)簽”以及“多余的嵌套標(biāo)簽”前的復(fù)選框。單擊【運(yùn)行】按鈕，就會(huì)生成網(wǎng)站報(bào)告

上傳站點(diǎn)到服務(wù)器的步驟設(shè)置服務(wù)器信息。選擇菜單【窗口】|【文件】命令，打開【文件】面板，在【站點(diǎn)】下拉列表中選擇【編輯站點(diǎn)】命令，如圖5.20所示。打開【編輯站點(diǎn)】對(duì)話框

選擇【軟件屋】，并且單擊【按鈕】，重要就彈出【軟件屋的站點(diǎn)定義為】對(duì)話框，選擇高級(jí)選項(xiàng)卡中【分類】欄中的【遠(yuǎn)程服務(wù)信息】項(xiàng)，右側(cè)列出了有關(guān)遠(yuǎn)程服務(wù)器的一些信息。在【訪問】右邊的下拉菜單中選擇【FTP】模式。在相應(yīng)的各個(gè)文本框中填入對(duì)應(yīng)的文本，找到一個(gè)合法的FTP主機(jī)地址，并在【登陸】以及【密碼】文本框中填入相應(yīng)的數(shù)據(jù)就可以了。單擊【測(cè)試】按鈕對(duì)遠(yuǎn)程服務(wù)器進(jìn)行連接測(cè)試

鏈接到遠(yuǎn)端服務(wù)器。只要打開站點(diǎn)管理窗口，單擊工具欄中的【連接接到遠(yuǎn)端主機(jī)】按鈕。

文件上傳。首先選擇需要上傳的文件，單擊工具欄上的按鈕，于是開始上傳網(wǎng)頁

5.3使用第三方組件：滑動(dòng)菜單（SlideMenu）

5.3.1基本概念第三方組件就是可以添加到Dreamweaver程序中用來增強(qiáng)程序功能的軟件。其中包括可以添加到【插入】快捷欄以及【插入】菜單的HTML代碼，也包括可以添加到【命令】菜單的JavaScript命令?！盎瑒?dòng)菜單”只是眾多的第三方組件中的一員，使用此組件可以方便地制作出漂亮的滑動(dòng)菜單，并且適合作網(wǎng)絡(luò)站點(diǎn)的導(dǎo)航。MacromediaExtensionManager（擴(kuò)展管理器）在插件菜單中設(shè)置滑動(dòng)菜單基本屬性

5.3.2上機(jī)操作啟動(dòng)Macromedia擴(kuò)展管理器。在Dreamweaver中，執(zhí)行菜單欄中的【命令】|【擴(kuò)展管理】命令安裝滑動(dòng)菜單插件。單擊【Macromedia擴(kuò)展管理器】左上角的【安裝新的擴(kuò)展】按鈕，彈出【選擇要安裝的擴(kuò)展】對(duì)話框

繼續(xù)安裝插件。在彈出的免責(zé)許可聲明窗口下，單擊【接受】按鈕，在【Macromedia擴(kuò)展管理器】彈出窗口下方單擊【確定】按鈕

新建一個(gè)網(wǎng)頁文檔，并保存。在【插入】快捷欄中選擇【常用】選項(xiàng)，接下來左鍵單擊【MFX_SlideMenu】按鈕

在對(duì)話框中輸入需要插入的滑動(dòng)導(dǎo)航欄的基本屬性。從上向下的下拉菜單和文本框分別代表的意思是：菜單級(jí)數(shù)、菜單與頁面的上邊距、菜單與頁面的左邊距、子菜單相對(duì)主菜單的縮進(jìn)距離、菜單的滑動(dòng)速度、雙擊后是否關(guān)閉菜單

在代碼視圖中，通過修改代碼改變顏色默認(rèn)菜單顏色修改后菜單顏色5.4總結(jié)提高本章介紹了站點(diǎn)的本地管理和遠(yuǎn)程管理。利用Dreamweaver可以完成站點(diǎn)的上傳、更新、鏈接測(cè)試，找出其中的斷裂和錯(cuò)誤，并且及時(shí)對(duì)網(wǎng)頁設(shè)計(jì)中的謬誤進(jìn)行修正，確保網(wǎng)頁結(jié)構(gòu)的穩(wěn)健。第三方插件可以到網(wǎng)上進(jìn)行搜索下載，一般來說使用第三方插件可以大大提高Dreamweaver用戶制作網(wǎng)頁的效率。但是使用插件存在一些缺憾：使得網(wǎng)頁制作變得千篇一律，沒有自己的性格特點(diǎn)；和用戶自己設(shè)定的資源名稱發(fā)生沖突，軟件自動(dòng)關(guān)閉。

5.5本章習(xí)題1、在創(chuàng)建站點(diǎn)的時(shí)候，為了管理方便，建立文件夾應(yīng)該分好類。目前網(wǎng)站比較流行的存放圖片的文件夾命名為：A.sounds B.imagesC.templates D.classes2、設(shè)置遠(yuǎn)程服務(wù)器的時(shí)候，可