網(wǎng)頁設(shè)計與制作課件第10章

案例說明為確保各網(wǎng)頁在瀏覽器中均能正常顯示，各鏈接均能正常跳轉(zhuǎn)，在制作好網(wǎng)站后，還要對站點進(jìn)行本地測試。本案例主要學(xué)習(xí)網(wǎng)頁鏈接的檢查及修復(fù)等。案例一檢查和測試企業(yè)網(wǎng)站——測試網(wǎng)站相關(guān)知識Dreamweaver提供了“檢查鏈接”功能，使用該功能可以在打開的文檔或本地站點的某一部分或整個站點中快速檢查斷開的鏈接和未被引用的文件。一、檢查網(wǎng)頁鏈接當(dāng)要對站點中的某個或某幾個文檔進(jìn)行鏈接檢查時，可執(zhí)行以下操作。啟動DreamweaverCC，在“文件”面板中打開“blog”站點，選擇要檢查的文件或文件夾。步驟011．檢查站點中某部分的鏈接知識庫可以結(jié)合鍵盤上的【Shift】或【Ctrl】鍵同時選中多個文件或文件夾。例如，要選擇一組連續(xù)的文件，可按住【Shift】鍵，然后分別單擊第一個和最后一個文件。要選擇一組不連續(xù)的文件，可按住【Ctrl】鍵，然后分別單擊各個文件。在選中的文件或文件夾上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“檢查鏈接”>“選擇文件/文件夾”菜單，如右圖所示。步驟02檢查結(jié)果將顯示在文檔窗口下方的“鏈接檢查器”面板中，在其中的“顯示”下拉列表中可選擇要查看的鏈接類型，如下圖所示。步驟03三、網(wǎng)頁的本質(zhì)右鍵單擊站點根文件夾，在彈出的快捷菜單中選擇“檢查鏈接”>“整個本地站點”，如右圖所示。步驟012．檢查站點范圍的鏈接檢查結(jié)果同樣顯示在文檔窗口下方的“鏈接檢查器”面板中，如下圖所示。步驟02在“鏈接檢查器”面板中單擊按鈕，然后在下拉菜單中選擇“檢查整個當(dāng)前本地站點的鏈接”，同樣可以檢查站點范圍的鏈接。二、修復(fù)網(wǎng)頁鏈接修復(fù)網(wǎng)頁鏈接主要是指為有問題的鏈接重新設(shè)置鏈接文件，或找到鏈接文件，此處主要指前者。在“鏈接檢查器”中，雙擊出錯的文件名將打開“屬性”面板，同時在文檔編輯窗口中自動選擇出錯對象或打開出錯對象，如右圖所示。步驟01在打開的文檔中找到出錯的鏈接，檢查是鏈接語句錯誤還是鏈接文件丟失，并根據(jù)實際情況進(jìn)行修改。步驟02案例實施啟動DreamweaverCC，將本書附贈的“素材與實例/ch10”目錄下的“ydjt”文件夾拷貝至本地磁盤，并在Dreamweaver中新建站點“ydjt”。一、網(wǎng)頁、網(wǎng)站和主頁步驟01右鍵單擊站點根文件夾，在彈出的快捷菜單中選擇“檢查鏈接”>“整個本地站點”，則在文檔窗口下方的“鏈接檢查器”面板中顯示檢查結(jié)果，可以看到“斷掉的鏈接”大部分為“xwlist.html”，如下圖所示。步驟02案例實施在“斷掉的鏈接”列中雙擊第一項中的網(wǎng)頁名“index.html”，則在文檔編輯窗口下方顯示“屬性”面板，并在文檔編輯窗口中自動打開網(wǎng)頁“index.html”，如下圖所示。一、網(wǎng)頁、網(wǎng)站和主頁步驟03案例實施出現(xiàn)這種錯誤的原因是網(wǎng)站中不存在網(wǎng)頁“xwlist.html”，將本書附贈的“素材與實例\ch04\ydjt”目錄下的“xwlist.html”拷貝到網(wǎng)站根目錄下。一、網(wǎng)頁、網(wǎng)站和主頁步驟04在“文件”面板中單擊“刷新”按鈕，然后重新檢查鏈接，可以看到“鏈接檢查器”面板中沒有出現(xiàn)任何項。步驟05在“鏈接檢查器”面板中“顯示”下拉列表中選擇“外部鏈接”，則檢查結(jié)果中顯示網(wǎng)站中的所有外部鏈接，對其進(jìn)行逐一檢查，如下圖所示。步驟06案例實施在“鏈接檢查器”面板“顯示”下拉列表中選擇“孤立的文件”，則檢查結(jié)果中顯示網(wǎng)站中所有的孤立文件，對這些孤立文件進(jìn)行逐一檢查，看是否有需要鏈接到其他網(wǎng)頁的，如下圖所示。一、網(wǎng)頁、網(wǎng)站和主頁步驟07在檢查并修改完所有鏈接后，保存文檔，完成對網(wǎng)頁的本地測試。步驟08案例說明要使別人能通過互聯(lián)網(wǎng)訪問你的網(wǎng)站，就需要將其上傳到服務(wù)器上，并擁有一個屬于自己的域名。這就需要申請域名和虛擬空間。本案例主要介紹域名和虛擬空間的相關(guān)知識及其申請方法。案例二申請域名和虛擬空間——域名和虛擬空間相關(guān)知識域名可分為頂級域名（一級域名）、二級域名和三級域名等。頂級域名是由一個合法字符串加域名后綴組成，如、、；二級域名是指在頂級域名前再加一個主機名，如、；三級域名則是在二級域名的基礎(chǔ)上再加字符串，如。一、域名以com、net、gov、edu為后綴的域名稱為國際域名，這些不同的后綴分別代表了不同的機構(gòu)性質(zhì)。例如：com表示商業(yè)機構(gòu)、net表示網(wǎng)絡(luò)服務(wù)機構(gòu)、gov表示政府機構(gòu)、edu表示教育機構(gòu)。以cn為后綴的域名稱為國家域名，各個國家都有自己固定的國家域名。例如：cn代表中國、us代表美國、uk代表英國等。部分國家域名的后綴還包括“國際通用域”，如。二、虛擬空間所謂虛擬空間，是指網(wǎng)站文件所占用的連接到互聯(lián)網(wǎng)上的服務(wù)器空間。目前，服務(wù)商能夠提供的虛擬空間模式有三種：主機托管、主機租用和虛擬主機。主機托管是指用戶獨享Internet數(shù)據(jù)中心的一臺主機（服務(wù)器），由客戶自己進(jìn)行維護(hù)，或交由其他簽約人進(jìn)行遠(yuǎn)程維護(hù)；主機租用與主機托管的唯一區(qū)別就是前者的主機所有者為網(wǎng)絡(luò)服務(wù)商，而后者的主機所有者為客戶自己；虛擬主機是在一臺主機中運行的各個服務(wù)器程序，每個虛擬主機都有獨立的域名和IP地址，具有完整的Internet服務(wù)器功能。案例實施一、網(wǎng)頁、網(wǎng)站和主頁打開某網(wǎng)絡(luò)服務(wù)商網(wǎng)站（此處打開新網(wǎng)“/”網(wǎng)站），單擊“注冊”按鈕打開注冊頁面，使用手機或郵箱注冊為會員，如右圖所示。步驟01案例實施使用新注冊的會員名和密碼登錄網(wǎng)站，并進(jìn)入網(wǎng)站首頁，在首頁中間的文本框中輸入要注冊的域名，之后單擊“查域名”按鈕，如下圖所示。一、網(wǎng)頁、網(wǎng)站和主頁步驟02案例實施查詢結(jié)果顯示.com和.cn域名已被注冊，單擊沒被注冊的域名后面的“加入購物車”按鈕，將其加入購物車，如下圖所示。一、網(wǎng)頁、網(wǎng)站和主頁步驟03案例實施單擊網(wǎng)頁右側(cè)的“立即結(jié)算”按鈕，進(jìn)入結(jié)算頁面，單擊“接受協(xié)議，去結(jié)算”按鈕，付費后即注冊成功，如下圖所示。一、網(wǎng)頁、網(wǎng)站和主頁步驟04案例說明在對站點進(jìn)行測試，并申請了空間和域名后，就可以將其上傳到虛擬空間了。上傳網(wǎng)站通常使用FTP協(xié)議，以遠(yuǎn)程文件傳輸方式上傳?？梢允褂脤ｉT的FTP軟件（如LeapFTP和CuteFTP等）上傳文件，也可以使用Dreamweaver上傳，本案例主要介紹使用Dreamweaver發(fā)布網(wǎng)站的方法。案例三發(fā)布企業(yè)網(wǎng)站——發(fā)布網(wǎng)站相關(guān)知識無論是從本地站點上傳文件到遠(yuǎn)程服務(wù)器，還是從遠(yuǎn)程服務(wù)器取回文件，都應(yīng)事先建立本地站點和遠(yuǎn)程服務(wù)器之間的連接。為此，首先需要把申請的虛擬空間的信息設(shè)置到Dreamweaver對應(yīng)的站點中，然后才能通過Dreamweaver內(nèi)置的站點管理功能上傳或下載站點文件。一、連接服務(wù)器啟動DreamweaverCC，選擇“站點”>“管理站點”菜單，打開“管理站點”對話框。步驟01在站點列表中選擇一個站點（此處選擇“blog”），然后單擊“編輯當(dāng)前選定的站點”按鈕，如右圖所示。步驟02打開“站點設(shè)置對象blog”對話框，單擊左側(cè)的“服務(wù)器”鏈接，在右側(cè)打開相關(guān)設(shè)置項。單擊“添加新服務(wù)器”按鈕，如左圖所示。步驟03在FTP地址、用戶名和密碼文本框中分別填入空間服務(wù)商提供的FTP上傳地址、FTP上傳賬號和FTP上傳密碼，之后單擊“測試”按鈕，如右圖所示。步驟04顯示“成功連接到Web服務(wù)器”的提示框，單擊“確定”按鈕，如左圖所示。步驟05連續(xù)單擊“保存”按鈕，關(guān)閉“站點設(shè)置對象blog”對話框。打開“緩存重建”提示框，單擊“確定”按鈕，如右圖所示。步驟06回到“管理站點”對話框，單擊“完成”按鈕關(guān)閉對話框。步驟07二、上傳網(wǎng)站與服務(wù)器成功連接后，如果要從本地站點向服務(wù)器中上傳文件，可直接單擊“文件”面板中的“上傳文件”按鈕，此時系統(tǒng)會首先打開提示框，詢問用戶是否上傳整個站點。如果單擊“確定”按鈕，系統(tǒng)將開始連接服務(wù)器并顯示右圖所示的對話框，顯示上傳進(jìn)程。單擊“本地視圖”下拉列表，在下拉列表中選擇“遠(yuǎn)程服務(wù)器”，其中顯示了遠(yuǎn)程服務(wù)器上的文件列表，如下圖所示。如果希望只上傳某個文件或文件夾，可首先選中這些文件或文件夾，然后再單擊“上傳文件”按鈕。當(dāng)上傳的是一個HTML文檔，并且該文檔使用了一些圖像素材，或者鏈接了其他文檔，如果上傳時沒有選擇這些素材或文檔，Dreamweaver將彈出下圖所示的畫面，詢問用戶是否將這些相關(guān)文件一起上傳。如果選擇“是”，表示隨HTML文檔一起上傳這些相關(guān)文件；如果選擇“否”，表示只上傳HTML文檔。如果不做任何選擇，該對話框?qū)⒃?0秒后自動消除。三、下載網(wǎng)站要從遠(yuǎn)程服務(wù)器上取回文件，只需在選中文件后單擊“文件”面板中的“獲取文件”按鈕即可，如果沒選中任何文件，表示下載整個站點，此時將顯示提示對話框，如左圖所示。單擊“確定”按鈕，將顯示取回文件進(jìn)度指示對話框，如右圖所示。下載完后該對話框會自動消失。四、使用擴展“文件”面板管理文件上傳和取回為了更好地管理文件的上傳和取回，可以使用展開的“文件”面板。單擊“展開以顯示本地和遠(yuǎn)端站點”按鈕，可以展開“文件”面板。左邊的列表顯示了遠(yuǎn)程服務(wù)器中的目錄與文件，右邊的列表顯示了本地站點中的目錄與文件。知識庫成功上傳或獲取文件后，要記住單擊“文件”面板中的“刷新”按鈕來刷新當(dāng)前視圖。案例實施一、網(wǎng)頁、網(wǎng)站和主頁啟動DreamweaverCC，在“文件”面板中打開企業(yè)網(wǎng)站站點“ydjt”，雙擊面板上方的站點名稱“ydjt”，打開“站點設(shè)置對象ydjt”對話框，如下圖所示。步驟01案例實施一、網(wǎng)頁、網(wǎng)站和主頁單擊對話框左側(cè)的“服務(wù)器”鏈接，然后單擊右側(cè)下方的“添加新服務(wù)器”按鈕，在FTP地址、用戶名和密碼文本框中分別填入服務(wù)商提供的FTP上傳地址、FTP上傳賬號和FTP上傳密碼，之后單擊“測試”按鈕，如下圖所示。步驟02案例實施一、網(wǎng)頁、網(wǎng)站和主頁顯示“成功連接到Web服務(wù)器”的提示框，單擊“確定”按鈕即可。步驟03在接下來顯示的對話框中連續(xù)單擊“保存”按鈕