1.2 創(chuàng)建網(wǎng)站框架

所謂站點(diǎn)，可以看作一系列文檔的組合，這些文檔通過各種鏈接建立邏輯關(guān)聯(lián)。用戶在建立網(wǎng)站前必須要建立站點(diǎn)，修改某網(wǎng)頁內(nèi)容時，也必須打開站點(diǎn)，然后修改站點(diǎn)內(nèi)的網(wǎng)頁。在Dreamweaver CC 2018中，站點(diǎn)一詞是下列任意一項的簡稱。

Web站點(diǎn)：從訪問者的角度來看，Web站點(diǎn)是一組位于服務(wù)器上的網(wǎng)頁，使用Web瀏覽器訪問該站點(diǎn)的訪問者可以對其進(jìn)行瀏覽。

遠(yuǎn)程站點(diǎn)：從創(chuàng)作者的角度來看，遠(yuǎn)程站點(diǎn)是遠(yuǎn)程站點(diǎn)服務(wù)器上組成Web站點(diǎn)的文件。

本地站點(diǎn)：與遠(yuǎn)程站點(diǎn)上的文件對應(yīng)的本地磁盤上的文件。通常，先在本地磁盤上編輯文件，然后將它們上傳到遠(yuǎn)程站點(diǎn)的服務(wù)器上。

Dreamweaver CC 2018站點(diǎn)定義：本地站點(diǎn)的一組定義特性，以及有關(guān)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)對應(yīng)方式的信息。

在做任何工作之前都應(yīng)該制訂工作計劃并畫出工作流程圖，建立網(wǎng)站也是如此。在動手建立站點(diǎn)之前，需要先調(diào)查研究，記錄客戶所需的服務(wù)，然后以此規(guī)劃出網(wǎng)站的功能結(jié)構(gòu)圖（即設(shè)計草圖）及其設(shè)計風(fēng)格以體現(xiàn)站點(diǎn)的主題。另外，還要規(guī)劃站點(diǎn)導(dǎo)航系統(tǒng)，避免瀏覽者在網(wǎng)頁上迷失方向，找不到要瀏覽的內(nèi)容。

1.2.1 站點(diǎn)管理器

站點(diǎn)管理器的主要功能包括新建站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)以及導(dǎo)入和導(dǎo)出站點(diǎn)。若要管理站點(diǎn)，必須打開“管理站點(diǎn)”對話框。

打開“管理站點(diǎn)”對話框有以下幾種方法。

（1）選擇“站點(diǎn) > 管理站點(diǎn)”命令。

（2）選擇“窗口 > 文件”命令，彈出“文件”面板，如圖1-17所示。單擊“桌面”選項，在彈出的下拉列表中選擇“管理站點(diǎn)”命令，如圖1-18所示。

“管理站點(diǎn)”對話框如圖1-19所示。在“管理站點(diǎn)”對話框中，通過“新建站點(diǎn)”按鈕、“編輯當(dāng)前選定的站點(diǎn)”按鈕、“復(fù)制當(dāng)前選定的站點(diǎn)”按鈕和“刪除當(dāng)前選定的站點(diǎn)”按鈕，可以新建一個站點(diǎn)、修改選擇的站點(diǎn)、復(fù)制選擇的站點(diǎn)、刪除選擇的站點(diǎn)。通過對話框的“導(dǎo)出當(dāng)前選定的站點(diǎn)”按鈕和“導(dǎo)入站點(diǎn)”按鈕，用戶可以將站點(diǎn)導(dǎo)出為STE文件，也可以將其他站點(diǎn)的STE文件導(dǎo)入Dreamweaver CC 2018。這樣，用戶就可以在不同的計算機(jī)和不同版本的Dreamweaver軟件之間移動站點(diǎn)，或者與其他用戶共享。

在“管理站點(diǎn)”對話框中選擇一個具體的站點(diǎn)，然后單擊“完成”按鈕，“文件”面板中就會出現(xiàn)站點(diǎn)的縮略圖。

1.2.2 定義新站點(diǎn)

在Dreamweaver CC 2018中，站點(diǎn)通常包含兩部分，即本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。本地站點(diǎn)是本地計算機(jī)上的一組文件，遠(yuǎn)程站點(diǎn)是遠(yuǎn)程Web服務(wù)器上的一個位置。用戶將本地站點(diǎn)中的文件發(fā)布到網(wǎng)絡(luò)上的遠(yuǎn)程站點(diǎn)上，使公眾可以訪問它們。在Dreamweaver CC 2018中創(chuàng)建Web站點(diǎn)時，通常先在本地磁盤上創(chuàng)建本地站點(diǎn)，然后創(chuàng)建遠(yuǎn)程站點(diǎn)，再將這些網(wǎng)頁的副本上傳到一個遠(yuǎn)程Web服務(wù)器上，使公眾可以訪問它們。本節(jié)只介紹如何創(chuàng)建本地站點(diǎn)。

創(chuàng)建本地站點(diǎn)的步驟如下。

（1）選擇“站點(diǎn) > 管理站點(diǎn)”命令，彈出“管理站點(diǎn)”對話框。

（2）在對話框中單擊“新建站點(diǎn)”按鈕，彈出“站點(diǎn)設(shè)置對象”對話框，在左側(cè)選擇“站點(diǎn)”選項，設(shè)置站點(diǎn)名稱，并指定站點(diǎn)文件夾，如圖1-20所示；展開“高級設(shè)置”選項，選擇“本地信息”選項，根據(jù)需要設(shè)置站點(diǎn)，如圖1-21所示。

“本地信息”選項各項參數(shù)的作用如下。

“默認(rèn)圖像文件夾”選項：在文本框中輸入此站點(diǎn)默認(rèn)圖像文件夾的路徑，或者單擊“瀏覽文件夾”按鈕，在彈出的“選擇圖像文件夾”對話框中選擇默認(rèn)圖像文件夾。在將非站點(diǎn)圖像添加到網(wǎng)頁中時，圖像會被自動添加到當(dāng)前站點(diǎn)的默認(rèn)圖像文件夾中。

“鏈接相對于”選項組：選擇“文檔”選項，表示使用文檔相對路徑來鏈接；選擇“站點(diǎn)根目錄”選項，表示使用站點(diǎn)根目錄相對路徑來鏈接。

“Web URL”選項：在文本框中輸入創(chuàng)建的站點(diǎn)將使用的URL。

“區(qū)分大小寫的鏈接檢查”選項：選擇此復(fù)選框，則對要區(qū)分大小寫的鏈接進(jìn)行檢查。

“啟用緩存”選項：指定是否創(chuàng)建本地緩存以提高鏈接和執(zhí)行站點(diǎn)管理任務(wù)的速度。若選擇此復(fù)選框，則創(chuàng)建本地緩存。

1.2.3 創(chuàng)建子文件夾

建立站點(diǎn)后，可在“文件”面板中創(chuàng)建子文件夾。

新建子文件夾的具體操作步驟如下。

（1）在“文件”面板中選擇站點(diǎn)。

（2）通過以下幾種方法新建子文件夾。

① 單擊面板右上方的菜單按鈕，在彈出的菜單中選擇“文件 > 新建文件夾”命令。

② 用鼠標(biāo)右鍵單擊站點(diǎn)，在彈出的菜單中選擇“新建文件夾”命令。

（3）輸入新子文件夾的名稱。

一般情況下，若站點(diǎn)不復(fù)雜，可直接將網(wǎng)頁存放在站點(diǎn)的根目錄下，并在站點(diǎn)根目錄中按照資源的種類建立不同的子文件夾來存放不同的資源。例如，用“image”子文件夾存放站點(diǎn)中的圖像文件，用“media”子文件夾存放站點(diǎn)的多媒體文件等。若站點(diǎn)復(fù)雜，需要根據(jù)板塊要實(shí)現(xiàn)的功能，在站點(diǎn)根目錄中按板塊創(chuàng)建子文件夾來存放不同的網(wǎng)頁，這樣可以方便網(wǎng)站設(shè)計者修改網(wǎng)站。

1.2.4 創(chuàng)建和保存網(wǎng)頁

創(chuàng)建站點(diǎn)后，用戶需要創(chuàng)建網(wǎng)頁來組織要展示的內(nèi)容。合理的網(wǎng)頁名稱非常重要，一般網(wǎng)頁文件的名稱應(yīng)容易理解，能反映網(wǎng)頁的內(nèi)容。

在網(wǎng)站中有一個特殊的網(wǎng)頁，這個網(wǎng)頁就是首頁，每個網(wǎng)站必須有一個首頁。每當(dāng)訪問者在瀏覽器的地址欄中輸入網(wǎng)站地址時，會自動打開網(wǎng)站的首頁，如在瀏覽器的地址欄中輸入“www.ptpress.com.cn”時會自動打開人民郵電出版社網(wǎng)站的首頁。一般情況下，首頁的文件名為index.htm、index.html、index.asp、default.asp、default.htm或default.html。

在標(biāo)準(zhǔn)的Dreamweaver CC 2018環(huán)境下，建立和保存網(wǎng)頁的操作步驟如下。

（1）選擇“文件 > 新建”命令，或按Ctrl+N組合鍵，彈出“新建文檔”對話框，選擇“新建文檔”選項，在“文檔類型”列表中選擇“HTML”選項，在“框架”選項框中選擇“無”選項卡，各選項的設(shè)置如圖1-22所示。

（2）設(shè)置完成后，單擊“創(chuàng)建”按鈕，彈出文檔窗口，新文檔在該窗口中打開，如圖1-23所示。根據(jù)需要，在文檔窗口中選擇不同的視圖模式來設(shè)計網(wǎng)頁。

文檔窗口有3種視圖模式，這3種視圖模式的作用如下。

“代碼”視圖：對于有編程經(jīng)驗的網(wǎng)頁設(shè)計師而言，可在“代碼”視圖中查看、修改和編寫網(wǎng)頁代碼，以實(shí)現(xiàn)特殊的網(wǎng)頁效果。“代碼”視圖的效果如圖1-24所示。

“設(shè)計”視圖：以所見即所得的方式顯示所有網(wǎng)頁元素。“設(shè)計”視圖的效果如圖1-25所示。

“拆分”視圖：將文檔窗口分為上、下兩部分，下方是代碼窗格，顯示代碼；上方是設(shè)計窗格，顯示網(wǎng)頁元素及其在頁面中的分布。在此視圖中，網(wǎng)頁設(shè)計者可以通過在設(shè)計窗格中單擊網(wǎng)頁元素的方式，快速定位到要修改的網(wǎng)頁元素代碼，并進(jìn)行代碼的修改，或在“屬性”面板中修改網(wǎng)頁元素的屬性。“拆分”視圖的效果如圖1-26所示。

（3）網(wǎng)頁設(shè)計完成后，選擇“文件 > 保存”命令，彈出“另存為”對話框，在“文件名”文本框中輸入網(wǎng)頁的名稱，如圖1-27所示，設(shè)置文檔保存路徑為站點(diǎn)文件夾，單擊“保存”按鈕即可。