Dreamweaver網(wǎng)頁設(shè)計課件

1、 利用Dreamweaver可以非常方便地創(chuàng) 建和管理站點（創(chuàng)建站點詳見第3章），還 可以對站點中的網(wǎng)頁和相關(guān)資源進行管理。 本章的重點內(nèi)容是檢查站點和上傳網(wǎng)頁。 Dreamweaver 提供了多項功能用來檢查和測試站點，其中包括預(yù)覽頁面和檢 查瀏覽器兼容性，以及運行各種報告等。 15.1.1檢查站點鏈接 一個網(wǎng)站往往包括很多超級鏈接，制作過程中不可避免地會出現(xiàn)這樣或那樣的 鏈接錯誤。因此必須在發(fā)布網(wǎng)站之前對整個網(wǎng)站進行一下鏈接檢查。檢查站點 鏈接步驟如下： （1）打開站點，這里選擇站點“myweb”，執(zhí)行【站點】-【檢查站點范圍的 鏈接】命令，打開“鏈接檢查器”面板，如圖15-1所示，最下面

2、信息欄提示一 些站點文件概要信息。默認打開“斷掉的鏈接”項，可以看到本站點有不少斷 掉的鏈接，讀者這時就要注意進一步檢查了。 圖15-1顯示斷掉的鏈接 （2）在“鏈接檢查器”面板的“顯示”項后選擇“外部鏈接” 選項，如圖15-2所示。 圖15-2顯示外部鏈接 （3）在“鏈接檢查器”面板的“顯示”項后選擇“孤立文件” 選項，如圖15-3所示。 圖15-3顯示孤立文件 15.1.2檢查瀏覽器的兼容性 “檢查目標(biāo)瀏覽器”功能是對文檔中的代碼進行測試，檢查是否存在目標(biāo) 瀏覽器所不支持的任何標(biāo)簽、屬性、CSS 等。注意：此檢查對文檔不作任 何方式的更改。目標(biāo)瀏覽器檢查可提供有關(guān)三個級別的潛在問題信息：錯

3、 誤信息、警告信息和告知性信息，其中若發(fā)現(xiàn)錯誤信息必須修改網(wǎng)頁。檢 查目標(biāo)瀏覽器步驟如下： （1）打開站點“myweb”下的文檔，比如“index.html”。 （2）執(zhí)行【文件】-【檢查頁】-【檢查目標(biāo)瀏覽器】命令。顯示“目標(biāo) 瀏覽器檢查”面板，如圖15-4所示。 圖15-4 錯誤、警告和告知性信息 （3）可以看到檢查結(jié)果沒有“錯誤”信息，只有“警告”和“告知性” 信息。這里只是檢查了文件“index.html”，其它文件的檢查請讀者自 己完成。 15.1.3使用站點報告 讀者可以對當(dāng)前文檔、選定的文件或整個站點的工作流程或HTML屬性（包 括輔助功能）運行站點報告。運行報告可以改進工作流程

4、、測試站點以及檢 查輔助功能。生成站點報告步驟如下： （1）執(zhí)行【站點】-【報告】命令，顯示“報告”對話框，如圖15-5所示 圖15- 5“報告”對話框 （2）若要在“工作流程”部分中運行報告，可以選擇以下任何報告： 取出者：創(chuàng)建一個報告，列出某特定小組成員取出的所有文檔。 設(shè)計備注：創(chuàng)建一個報告，列出選定文檔或站點的所有設(shè)計備注。 最近修改：創(chuàng)建一個報告，列出在指定時間段內(nèi)發(fā)生更改的文件。 （3）若要在“HTML報告”部分中運行報告，可以選擇以下任何報告： 可合并嵌套字體標(biāo)簽：創(chuàng)建一個報告，列出所有可以為清理代碼而合并的嵌 套字體標(biāo)簽。 輔助功能：創(chuàng)建一個報告，列出您的內(nèi)容與輔助功能準(zhǔn)則之間

5、的沖突。 沒有替換文本：創(chuàng)建一個報告，列出所有沒有替換文本的img標(biāo)簽。 多余的嵌套標(biāo)簽：創(chuàng)建一個報告，列出應(yīng)該清理的嵌套標(biāo)簽。 可移除的空標(biāo)簽：創(chuàng)建一個報告，列出所有可以為清理 HTML 代碼而移除 的空標(biāo)簽。 無標(biāo)題文檔：創(chuàng)建一個報告，列出在選定參數(shù)中找到的所有無標(biāo)題的文檔。 選擇要報告的類別和要運行的報告類型后，如圖15-6所示，單擊“運行”按 鈕。 圖15-6 設(shè)置“報告”對話框 （4）根據(jù)所選擇報告的內(nèi)容，結(jié)果列表出現(xiàn)在“站點報告”面板中，如 圖15-7所示，同時還會打開一個瀏覽器窗口，其中列出詳細的報告內(nèi)容， 如圖15-8所示。 圖15- 7 “站點報告”面板 圖15-8 報告內(nèi)容

6、 分辯率測試 瀏覽器用戶可能使用14英寸、15英寸、17英寸，甚至更大尺寸的顯 示器。因此顯示器屏幕分辨率設(shè)置也有所不同，比如800600 像素，1024768像素等等。要保持分辯率兼容性，就要在不同 的分辨率下查看網(wǎng)頁。如圖15-9和15-10所示，分別是在 800600像素分辯率和1024768像素分辯率下瀏覽網(wǎng)頁 “index.html”的效果。讀者如果發(fā)現(xiàn)網(wǎng)頁有不兼容的內(nèi)容，一定 要進一步修改完善。 圖15-9 800600分辯率 圖15-10 1024768分辯率 主頁空間很容易申請，請讀者自行申請。假設(shè)從空間供應(yīng)商處得到如下信 息：“您申請的空間已經(jīng)開設(shè)成功。同時系統(tǒng)分配您一個三級

7、域名，您現(xiàn) 在可以通過立即投入使用。 FTP帳 號:shumazm您可以給您的虛擬主機綁定自己的域名，并且把域名解析到IP 地址:3”。 注意：每個空間供應(yīng)商所給信息不盡相同，但是一般都包括FTP主機、帳 號、密碼這3項。 網(wǎng)頁制作出來之后必須上傳到Web服務(wù)器上才能夠讓更多的人欣賞到。上 傳網(wǎng)頁步驟如下： （1）執(zhí)行【站點】-【管理站點】命令，打開“管理站點”對話框，如圖 15-13所示。 圖15- 13“管理站點”對話框 （2）選擇站點“myweb”，然后單擊“編輯”按鈕，顯示“myweb的站點定 義為”對話框，切換到“高級”選項卡，選擇“分類”中的“遠程信息”選

8、項，選擇“遠程信息”的“訪問”項后的下拉列表中的“FTP”選項。如圖 15-14所示。 圖15-14 “myweb的站點定義為”對話框 （3）在“FTP主機”項后面的文本框中輸入FTP主機的域名或者IP地址， 這里輸入“3”；在“主機目錄”項后面的文本框中輸入“/”； 在“登錄”項后面的文本框中輸入“shumazm”。在“密碼”項后面的文本 框中輸入密碼。除了“主機目錄”選項外，其它3個選項都是必須的。 （4）“myweb的站點定義為”對話框的其它各個選項設(shè)置如圖15-15所示。 圖15- 15“myweb的站點定義為”對話框 （5）單擊“確定”按鈕，返回“管理站點”對

9、話框，單擊“完成”按鈕，完 成設(shè)置。 （6）在“文件”面板中單擊“連接到遠端主機”按鈕，顯示“后臺文件活動- myweb”對話框，如圖15-16所示。 圖15- 16“后臺文件活動-myweb”對話框 7）在“文件”面板中，單擊“展示以顯示本地和遠端站點”按鈕，打開的 窗口中左面顯示“遠端站點”，右面顯示“本地文件”，如圖15-17所示。 選擇“遠端站點”中的文件“index.htm”后，刪除之（因為我們要上傳自己 制作的首頁文件“index.html”，以免引起沖突）。在“本地文件”中選擇站 點“myweb”，然后單擊“上傳文件”按鈕，顯示信息“您確定要上傳整個站 點嗎？”（如圖15-18所

10、示），單擊“確定”按鈕。 圖15-17 左面顯示“遠端站點”，右面顯示“本地文件” 圖15-18 提示上傳信息 （8）在上傳過程中，顯示“后臺文件活動-myweb”對話框，對話框顯示 正在上傳文件的名稱和大小，如圖15-19所示。上傳時間取決于站點文件 的多少，上傳完畢后，窗口顯示如圖15-20所示。 圖15- 19 “后臺文件活動-myweb”對話框 圖15-20 上傳完畢后，窗口顯示內(nèi)容左右一致 （9）在瀏覽器中輸入地址“”后，就可以瀏覽網(wǎng)頁了，如圖15-21所示。 （10）這樣就可以在任何一臺連接到Internet的計算機上瀏覽該網(wǎng)站了。 網(wǎng)頁必須經(jīng)過諸如檢查站點鏈接狀態(tài)、檢查瀏覽器兼容性和頁面分辯率兼容 性測試等幾個步驟后，才能上傳到遠程服務(wù)器上，供瀏覽器用戶欣賞。 理論鞏固 填空題 （1）目標(biāo)瀏覽器檢查可提供