靜態(tài)網(wǎng)頁設(shè)計與制作 課件 第3章 構(gòu)建本地站點

項目三

構(gòu)建本地站點任務(wù)1

站點概述任務(wù)2構(gòu)建本地站點任務(wù)3管理本地站點和站點文件任務(wù)4站點發(fā)布任務(wù)1

站點概述任務(wù)引入小明已經(jīng)對網(wǎng)頁設(shè)計的基礎(chǔ)知識有了一定的了解，接下來就可以進行網(wǎng)頁的設(shè)計，為了便于網(wǎng)民的訪問和設(shè)計主隊網(wǎng)站的管理，在進行網(wǎng)頁設(shè)計之前首先需要建立一個屬于網(wǎng)站的站點文件和服務(wù)器，那么什么是Internet服務(wù)器和本地計算機，什么是本地站點和遠端站點呢？知識準(zhǔn)備一、Internet服務(wù)器和本地計算機Internet服務(wù)器是網(wǎng)絡(luò)上一種為客戶端計算機提供各種Internet服務(wù)（包括WWW、FTP、e-mail等）的高性能計算機，在網(wǎng)絡(luò)操作系統(tǒng)的控制下，將與其相連的硬盤、磁帶、打印機、Modem及各種專用通訊設(shè)備提供給網(wǎng)絡(luò)上的客戶站點共享，也能為網(wǎng)絡(luò)用戶提供集中計算、信息發(fā)表及數(shù)據(jù)管理等服務(wù)。一般來說，網(wǎng)民訪問網(wǎng)站其實就是訪問服務(wù)器里的資料對于瀏覽網(wǎng)頁的用戶來說，他們使用的計算機被稱作本地計算機。本地計算機和Internet服務(wù)器之間通過各種線路進行連接，以實現(xiàn)相互的通信。二、本地站點與遠端站點在理解了Internet服務(wù)器和本地計算機的概念之后，了解遠端站點和本地站點就很容易了。嚴(yán)格地說，站點是一種文檔的磁盤組織形式，由文檔和文檔所在的文件夾組成。設(shè)計良好的網(wǎng)站通常具有科學(xué)的結(jié)構(gòu)，利用不同的文件夾，將不同的網(wǎng)頁內(nèi)容分門別類地保存。結(jié)構(gòu)良好的網(wǎng)站，不僅便于管理，也便于更新。在Internet上瀏覽網(wǎng)頁，就是用瀏覽器打開存儲于Internet服務(wù)器上的HTML文檔及其他相關(guān)資源。基于Internet服務(wù)器的不可知特性，通常將存儲于Internet服務(wù)器上的站點稱作遠端站點。利用Dreamweaver2021，可以對位于Internet服務(wù)器上的站點文檔直接進行編輯和管理。但這在很多時候非常不便，例如網(wǎng)絡(luò)速度和網(wǎng)絡(luò)的不穩(wěn)定性等，都會對管理和編輯操作帶來影響。既然位于Internet服務(wù)器上的站點仍然是以文件和文件夾作為基本要素的磁盤組織形式，那么，能不能首先在本地計算機的磁盤上構(gòu)建出整個網(wǎng)站的框架，編輯相應(yīng)的文檔，然后再放置到Internet服務(wù)器上呢？答案是可以的，這就是本地站點的概念。利用Dreamweaver2021，用戶可以在本地計算機上創(chuàng)建站點的框架，從整體上對站點全局進行把握。站點設(shè)計完畢之后，再利用各種上傳工具（例如FTP程序）將本地站點上載到Internet服務(wù)器上，形成遠端站點。任務(wù)2構(gòu)建本地站點任務(wù)引入在了解了服務(wù)器和站點的相關(guān)概念之后，接下來小明開始建立新站點，那么如何建立一個新站點，如何為站點設(shè)置服務(wù)器呢？知識準(zhǔn)備下面以建立本地站點café的簡單實例演示創(chuàng)建新站點的具體步驟，本例執(zhí)行以下步驟：（1）啟動Dreamweaver2021，執(zhí)行“站點”/“管理站點”命令，彈出“管理站點”對話框，如圖所示。（2）單擊“新建站點”按鈕，或直接執(zhí)行“站點”/“新建站點”命令，彈出如圖所示的“站點設(shè)置對象”對話框。（3）輸入站點名稱café和本地站點文件夾路徑，然后單擊“保存”按鈕，即可新建一個站點。（4）單擊“站點設(shè)置對象”對話框左側(cè)的“高級設(shè)置”分類，然后在展開的子菜單中選擇“本地信息”，如圖所示。（5）在“站點設(shè)置對象”對話框中單擊“服務(wù)器”類別，在如圖所示的對話框中單擊“添加新服務(wù)器”按鈕，添加一個新服務(wù)器，如圖所示。（6）在“服務(wù)器名稱”文本框中，指定新服務(wù)器的名稱。（7）在“連接方法”下拉菜單中選擇連接到服務(wù)器的方式。如圖所示?！罢军c設(shè)置”對話框“站點設(shè)置”對話框

選擇連接服務(wù)器的方法

設(shè)置“更多選項”（8）如果選擇連接方式為“本地/網(wǎng)絡(luò)”，則單擊“服務(wù)器文件夾”右側(cè)的文件夾圖標(biāo)按鈕，指定存儲站點文件的文件夾所在的路徑。（9）在“WebURL”文本框中，輸入站點的URL。（10）單擊“保存”按鈕關(guān)閉“基本”屏幕。然后在“服務(wù)器”類別中，指定剛添加或編輯的服務(wù)器為遠程服務(wù)器或測試服務(wù)器。如圖所示。（11）在“站點設(shè)置對象”對話框的“服務(wù)器”類別中單擊“添加新服務(wù)器”按鈕，添加一個新服務(wù)器，或選擇一個已有的測試服務(wù)器，然后單擊“編輯現(xiàn)有服務(wù)器”按鈕。（12）在如圖所示的對話框中根據(jù)需要指定“基本”選項，然后單擊“高級”按鈕，如圖所示。指定服務(wù)器類型

設(shè)置遠程服務(wù)器和測試服務(wù)器（13）在測試服務(wù)器中，選擇要用于Web應(yīng)用程序的服務(wù)器模型。如圖所示。（14）根據(jù)需要設(shè)置是否將動態(tài)文件自動同步到測試服務(wù)器。默認為自動同步。（15）單擊“保存”按鈕關(guān)閉“高級”屏幕。然后在“服務(wù)器”類別中，指定剛才作為測試服務(wù)器添加或編輯的服務(wù)器。（16）單擊對話框中的“保存”按鈕，返回“管理站點”對話框。此時對話框中會顯示剛剛創(chuàng)建的本地站點。任務(wù)3管理本地站點和站點文件任務(wù)引入在建立了站點之后，小明就可以根據(jù)自己的需要對本地站點進行多方面的管理，也可以對站點文件或文件夾進行管理，那么小明要如何實現(xiàn)這么操作呢？知識準(zhǔn)備在Dreamweaver2021中，可以對本地站點進行多方面的管理。利用“文件”面板，可以對本地站點的文件和文件夾進行創(chuàng)建、刪除、移動和復(fù)制等操作。一、管理站點對站點的常用操作主要包括打開本地站點、編輯站點、刪除站點以及復(fù)制站點。下面分別進行介紹。1．打開本地站點（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板，如圖所示。（2）在“文件”面板左上角的下拉列表中，可以選擇需要的站點，如圖所示，即可打開相應(yīng)的站點。“文件”面板

選擇站點2．編輯站點創(chuàng)建站點之后，如果對站點的某些定義不滿意，還可以對站點屬性進行編輯。方法如下：（1）執(zhí)行“站點”/“管理站點”命令，彈出“管理站點”對話框。（2）選擇需要編輯的站點，單擊“編輯”按鈕，彈出“站點設(shè)置對象”對話框。（3）重新設(shè)置站點的屬性。3．刪除站點如果不再需要某個本地站點，可以將其從站點列表中刪除，刪除站點的步驟如下：（1）執(zhí)行“站點”/“管理站點”命令，彈出“管理站點”對話框。（2）選擇需要刪除的站點，單擊“刪除”按鈕，彈出一個對話框，提示用戶本操作不能通過執(zhí)行“編輯”/“撤消”命令的辦法恢復(fù)。（3）單擊“是”，即可刪除選中站點。4．復(fù)制站點（1）執(zhí)行“站點”/“管理站點”命令，彈出“管理站點”對話框。（2）選擇需要復(fù)制的站點，單擊“復(fù)制”按鈕，即可將該站點復(fù)制。二、操作站點文件或文件夾無論是創(chuàng)建空白的文檔，還是利用已有的文檔構(gòu)建站點，都可能需要對站點中的文件夾或文件進行操作。下面簡要介紹利用“文件”面板對本地站點的文件夾和文件進行創(chuàng)建、刪除、移動和復(fù)制等操作。1．新建站點文件在本地站點中新建文件或文件夾的操作步驟如下：（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板。（2）單擊“文件”面板左上角的下拉列表，選擇需要新建文件或文件夾的站點。（3）單擊“文件”管理面板右上角的選項按鈕，選擇“文件”/“新建文件”或“新建文件夾”命令新建一個文件或文件夾。2．刪除站點文件如果要從本地文件列表面板中刪除文件，可以按照如下方法進行操作：（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板。（2）單擊“文件”面板左上角的下拉列表選擇文件所在的站點。（3）選中要刪除的文件或文件夾。（4）按Delete鍵，系統(tǒng)出現(xiàn)一個“提示”對話框，詢問是否確定要刪除文件或文件夾。（5）單擊“是”按鈕，即可將文件或文件夾從本地站點中刪除。3．重命名站點文件（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板。（2）單擊“文件”面板左上角的站點下拉列表，選擇要重命名的文件或文件夾所在的站點。（3）在文件列表中選中要重命名的文件或文件夾，然后單擊文件或文件夾的名稱，使其名稱區(qū)域處于可編輯狀態(tài)。（4）輸入文件或文件夾的新名稱，然后單擊面板空白區(qū)域，或按Enter鍵，即可重命名文件或文件夾。4．編輯站點文件（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板。（2）在“文件”面板左上角的站點下拉列表中選擇要編輯的文件所在的站點。（3）雙擊需要編輯的文件圖標(biāo)，即可在Dreamweaver2021的文檔窗口中打開此文件，對文件進行編輯。（4）文件編輯完畢，保存文檔，即可對本地站點中的文件進行更新。5．移動/復(fù)制文件和文件夾（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板。（2）在“文件”面板左上角的站點下拉列表中選擇要移動或復(fù)制的文件所在的站點。（4）選中目的文件夾，執(zhí)行“編輯”/“粘貼”命令，即可將文件或文件夾移動或復(fù)制到相應(yīng)的文件夾中。此外，使用鼠標(biāo)拖動也可以實現(xiàn)文件或文件夾的移動操作。方法如下：1）在“文件”面板的本地站點文件列表中選中要移動的文件或文件夾。2）按下鼠標(biāo)左鍵拖動選中的文件或文件夾，然后移動到目標(biāo)文件夾上，如圖所示，釋放鼠標(biāo)。3）單擊“更新文件”對話框中的“更新”按鈕，即可更新文件中的鏈接信息。6．刷新本地站點文件列表（1）執(zhí)行“窗口”/“文件”命令，打開“文件”面板。（2）單擊“文件”面板左上角的站點下拉列表，選擇要刷新文件列表的站點。（3）單擊“文件”面板底部的“刷新”按鈕，即可對本地站點的文件列表進行刷新。任務(wù)4站點發(fā)布任務(wù)引入網(wǎng)頁建好之后就需要發(fā)布，只有上傳到服務(wù)器才能供用戶訪問，因此在發(fā)布之前首先要建立遠程站點來連接遠程服務(wù)器，那么如何配置遠程站點，如何實現(xiàn)網(wǎng)頁文件的上傳、下載與同步更新呢？知識準(zhǔn)備網(wǎng)站建好之后，下一步就是將文件上傳到服務(wù)器進行發(fā)布。遠程文件夾是存儲文件的位置，Dreamweaver將此文件夾稱為遠程站點。因此，在發(fā)布站點之前，必須先配置遠程站點，并能夠訪問遠程Web服務(wù)器。一、配置遠程站點配置遠程站點的步驟如下：（1）執(zhí)行“站點”/“管理站點”命令，打開“管理站點”對話框。（2）選中要上傳的站點，然后單擊“編輯”按鈕，在彈出的對話框左側(cè)的“分類”中選擇“服務(wù)器”選項。（3）單擊“添加新服務(wù)器”按鈕，在彈出的對話框的“連接方式”下拉列表中選擇連接到遠程站點的方式。（4）切換到“高級”頁面，設(shè)置遠程站點文件的維護選項。如圖所示。

配置服務(wù)器信息

配置服務(wù)器信息2（5）單擊“保存”按鈕，添加的服務(wù)器添加到服務(wù)器列表中。選中“遠程”對應(yīng)的單選按鈕，如圖所示。（6）設(shè)置完畢，單擊“保存”按鈕關(guān)閉對話框，完成遠程站點的配置。二、上傳、下載與同步更新上傳和下載是在互聯(lián)網(wǎng)上傳輸文件的專門術(shù)語。通常，用戶把自己計算機上的文件拷貝到遠程計算機上的過程，稱作上傳；相反，用戶從某臺遠程計算機上拷貝文件到自己計算機上的過程，稱作下載。1．上傳站點文件（1）依照前面介紹的步驟配置遠程站點之后，單擊“文件”面板右上角的選項按鈕，在彈出的下拉菜單中選擇“查看”/“展開文件面板”命令，可以顯示本地和遠端站點。如圖所示。（2）單擊遠端文件列表中的“單擊此處”，或單擊“連接到遠程服務(wù)器”按鈕，將站點與遠程服務(wù)器接通，此時，“遠程服務(wù)器”窗格中將顯示遠程服務(wù)器中的文件目錄，如圖所示。展開的“文件”面板

顯示本地和遠端站點（3）在“文件”面板的“本地文件”窗格中選擇本地文件夾，然后拖動到“遠程服務(wù)器”窗格中的某個文件夾中；或從“本地文件”窗格中選擇文件，然后單擊“上傳文件”按鈕，Dreamweaver2021會將所有站點文件上傳到指定服務(wù)器的遠程文件夾。2．下載站點文件執(zhí)行以下操作之一可以下載站點文件：（1）在“遠程服務(wù)器”窗格中選擇需要下載的文件，然后拖動到“本地文件”窗格中的某個文件夾中。（2）在“遠程服務(wù)器”窗格中右擊要下載的文件，然后從彈出的快捷菜單中選擇“獲取”命令。3．遠程站點與本地站點同步利用Dreamweaver的站點同步功能可以輕松修正這種問題，方便用戶進行站點更新維護。步驟如下：（1）執(zhí)行“站點”/“站點選項”/“同步站點范圍”菜單命令，或單擊展開的“文件”面板上的“同步”按鈕，打開“與遠程服務(wù)器同步”對話框。如圖所示。（2）在“同步”下拉列表框中選擇同步的范圍，當(dāng)前整個站點或當(dāng)前選中文件。（3）在“方向”下拉列表框中設(shè)置文件同步的方式。（4）如果要將本地上沒有的遠程站點上的文件刪除，則選中“刪除本地驅(qū)動器上沒有的遠端文件”復(fù)選框。（5）單擊“預(yù)覽”按鈕即可開始同步設(shè)置。如果存在需要更新的文件，將彈出“同步”對話框，顯示需要同步的文件列表。選中文件左側(cè)的“上傳”按鈕，即可完成同步。（6）如果同步完成，或沒有需要同步的文件，則顯示如圖所示的“同步”對話框，單擊“確定”按鈕關(guān)閉對話框。至此，遠程站點文件與本機文件的同步完成。“與遠程服務(wù)器同步”對話框

“同步”對話框項目總結(jié)項目實戰(zhàn)實戰(zhàn)一在本機上創(chuàng)建站點bz（1）執(zhí)行“站點”｜“管理站點”命令，彈出“管理站點”對話框.（2）單擊“新建站點”按鈕，在彈出的對話框中選擇“站點”分類，然后輸入站點名稱bz，并指定本地站點文件夾的路徑。（3）單擊“高級設(shè)置”分類，