1.2 創建網站框架

所謂站點，可以看作一系列文檔的組合，這些文檔通過各種鏈接建立邏輯關聯。用戶在建立網站前必須要建立站點，修改某網頁內容時，也必須打開站點，然后修改站點內的網頁。在Dreamweaver CS6中，“站點”一詞是下列任意一項的簡稱。

Web站點：從訪問者的角度來看，Web站點是一組位于服務器上的網頁，使用Web瀏覽器訪問該站點的訪問者可以對其進行瀏覽。

遠程站點：從創作者的角度來看，遠程站點是遠程站點服務器上組成Web站點的文件。

本地站點：與遠程站點上的文件對應的本地磁盤上的文件。通常，先在本地磁盤上編輯文件，然后將它們上傳到遠程站點的服務器上。

Dreamweaver CS6站點定義：本地站點的一組定義特性，以及有關本地站點和遠程站點對應方式的信息。

在做任何工作之前都應該制訂工作計劃并畫出工作流程圖，建立網站也是如此。在動手建立站點之前，需要先調查研究，記錄客戶所需的服務，然后以此規劃出網站的功能結構圖（即設計草圖）及其設計風格，以體現站點的主題。另外，還要規劃站點導航系統，避免瀏覽者在網頁上迷失方向，找不到要瀏覽的內容。

1.2.1 站點管理器

站點管理器的主要功能包括新建站點、編輯站點、復制站點、刪除站點及導入和導出站點。若要管理站點，必須打開“管理站點”對話框。

打開“管理站點”對話框的方法有以下兩種。

① 選擇“站點 > 管理站點”命令。

② 選擇“窗口 > 文件”命令，打開“文件”面板，如圖1-18所示。在“管理站點”選項的下拉列表中選擇“管理站點”選項，如圖1-19所示。

在“管理站點”對話框中，通過“新建站點”按鈕、“編輯當前選定的站點”按鈕、“復制當前選定的站點”按鈕和“刪除當前選定的站點”按鈕，可以新建一個站點、修改選擇的站點、復制選擇的站點和刪除選擇的站點。通過對話框中的“導出當前選定的站點”按鈕和“導入站點”按鈕，用戶可以將站點導出為XML文件，然后將其導入Dreamweaver CS6。這樣，用戶就可以在不同的計算機和產品版本之間移動站點，或者與其他用戶共享站點，如圖1-20所示。

在“管理站點”對話框中，選擇一個具體的站點，然后單擊“完成”按鈕，就會在“文件”面板的“文件”選項卡中出現站點管理器的縮略圖。

1.2.2 創建文件夾

建立站點前，要先在站點管理器中規劃站點文件夾。

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

（1）在站點管理器的右側窗口中單擊選擇站點。

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

① 選擇“文件 > 新建文件夾”命令。

② 用鼠標右鍵單擊站點，在彈出的菜單中選擇“新建文件夾”命令。

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

一般情況下，若站點不復雜，可直接將網頁存放在站點的根目錄下，并在站點根目錄中，按照資源的種類建立不同的文件夾存放不同的資源。例如，image文件夾存放站點中的圖像文件，media文件夾存放站點的多媒體文件等。若站點復雜，則需要根據實現不同功能的板塊，在站點根目錄中按板塊創建子文件夾存放不同的網頁，這樣可以方便網站設計者修改網站。

1.2.3 定義新站點

建立好站點文件夾后，用戶就可以定義新站點了。在Dreamweaver CS6中，站點通常包含兩部分，即本地站點和遠程站點。本地站點是本地計算機上的一組文件，遠程站點是遠程Web服務器上的一個位置。用戶將本地站點中的文件發布到網絡上的遠程站點，使公眾可以訪問它們。在Dreamweaver CS6中創建Web站點，通常先在本地磁盤上創建本地站點，然后創建遠程站點，再將這些網頁的副本上傳到一個遠程Web服務器上，使公眾可以訪問它們。本節只介紹如何創建本地站點。

1．創建本地站點的步驟

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

（2）在對話框中單擊“新建站點”按鈕，彈出“站點設置對象未命名站點2”對話框，在對話框中，設計者通過“站點”選項卡設置站點名稱，如圖1-21所示。單擊“高級設置”選項，在彈出的選項卡中根據需要設置站點，如圖1-22所示。

2．各選項的作用

“默認圖像文件夾”選項：在文本框中輸入此站點默認圖像文件夾的路徑，或者單擊“瀏覽文件夾”按鈕，在彈出的“選擇圖像文件夾”對話框中，查找到該文件夾。例如，將非站點圖像添加到網頁中時，圖像會自動添加到當前站點的默認圖像文件夾中。

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

“Web URL”選項：在文本框中，輸入已完成的站點將使用的URL。

“區分大小寫的鏈接檢查”選項：選擇此復選框，則對使用區分大小寫的鏈接進行檢查。

“啟用緩存”選項：指定是否創建本地緩存以提高鏈接和站點管理任務的速度。若選擇此復選框，則創建本地緩存。

1.2.4 創建和保存網頁

創建站點后，用戶需要創建網頁來組織要展示的內容。合理的網頁名稱非常重要，一般網頁文件的名稱應容易理解，能反映網頁的內容。

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

在標準的Dreamweaver CS6環境下，建立和保存網頁的操作步驟如下。

（1）選擇“文件 > 新建”命令，或按Ctrl+N組合鍵，彈出“新建文檔”對話框，選擇“空白頁”選項，在“頁面類型”選項框中選擇“HTML”選項，在“布局”選項框中選擇“無”選項，創建空白網頁，設置如圖1-23所示。

（2）設置完成后，單擊“創建”按鈕，彈出“文檔”窗口，新文檔在該窗口中打開。根據需要，在“文檔”窗口中選擇不同的視圖設計網頁，如圖1-24所示。

“文檔”窗口中有3種視圖方式，這3種視圖方式的作用如下。

“代碼”視圖：對于有編程經驗的網頁設計用戶而言，可在“代碼”視圖中查看、修改和編寫網頁代碼，以實現特殊的網頁效果，“代碼”視圖的效果如圖1-25所示。

“設計”視圖：以所見即所得的方式顯示所有網頁元素，“設計”視圖的效果如圖1-26所示。

“拆分”視圖：將文檔窗口分為左右兩部分，左側部分是代碼部分，顯示代碼；右側部分是設計部分，顯示網頁元素及其在頁面中的布局。在此視圖中，網頁設計用戶可通過在設計部分單擊網頁元素的方式，快速地定位到要修改的網頁元素代碼的位置，進行代碼的修改，或在“屬性”面板中修改網頁元素的屬性。“拆分”視圖的效果如圖1-27所示。

（3）網頁設計完成后，選擇“文件 > 保存”命令，彈出“另存為”對話框，在“文件名”選項的文本框中輸入網頁的名稱，如圖1-28所示，單擊“保存”按鈕，將該文檔保存在站點文件夾中。