使用 DreamWeaver 創建站點

本節知識點，將帶領同學們學習 Dreamweaver 設計網站的第一步：創建站點。而創建站點后，我們肯定不能一勞永逸，而是需要進一步對站點的屬性進行一些相應的設置，比如：設置站點的文件結構，設置站點的服務器地址。本小節的最后，將為大家講解如何在 Dreamweaver 上管理自己的站點，如何備份站點，又如何從外部導入站點。下面就請同學們跟隨本小節的腳步一起來學習一下如何創建站點吧！

1. 創建一個站點

首先，大家要了解站點的含義。站點，顧名思義，就是網站的根據點。從抽象角度講，我們可以把站點理解為網站的總稱。而從具象角度講，我們又可以理解網站文件的集中存放地。

1.1 新建站點

首先，我們先點擊 Dreamweaver CC 2018 主界面中的站點（S），在彈出的下拉列表中選擇第一項：新建站點（N）。

選擇新建站點后彈出界面如下圖：

1.2 填寫站點基本屬性

從圖片中我們可以看到該彈出界面的標題叫站點設置對象 未命名站點，該界面是一個左右分欄的展示結構，左面分別是：站點，服務器，CSS預處理器，高級設置。而我們今天主要是創建站點，因此先點擊左欄的站點，對應的右欄界面則需要我們填寫一下站點名稱，我們修改未命名站點為自己想要的站點名字。然后我們來點擊本地站點文件夾后面的文件圖標，選擇站點文件的存儲位置。

釋疑1：什么是站點文件的存儲位置？

站點文件的存儲位置，簡單講就是一個網站所有文件的集中存放地?，F在，你處于網頁的設計開發階段，網頁的所有文件都是存在于你的個人 PC，也就是你的個人電腦上的。而有一天，你的網站所有的功能開發完成，你是需要把網站放到各種操作系統（Linux，Window等）的服務器上的。屆時，你就需要把這個存儲位置換成相應服務器上的存儲位置。

繼續瀏覽這個界面我們可以看到，填寫站點名稱下方還有一個可勾選的選項：將 Git 存儲庫與此站點關聯。如果學習過我們的上一節 wiki 知識點《如何學習 Dreamweaver CC 2018》的同學，應該可以知道，我們在上一節中介紹到了 Dreamweaver CC 2018 版本的增強功能之一就是對 Git 的支持。如果，你已經有了自己的 Git 倉庫，不妨使用這個功能方便你實現協同開發。畢竟，現實生活中大多數的商業網站幾乎都不是一個人從頭到尾開發完成的，它有著一定的工作量，一般人很難獨立完成，多數人只是完成一個或幾個功能。

釋疑2：Git 是什么？

Git 即 Github 是世界知名開源源代碼倉庫，為全球數以萬計的開發者提供協同開發的便利。同時也是學生朋友們，編程愛好者很好的學習工具。

創建完站點后我們在 Dreamweaver 主界面右側可以發現創建好的站點就在此處。如下圖所示：

2. 創建站點文件結構

2.1 什么叫站點的文件結構？

一個網站站點不可能只有 HTML 頁面，可能還有 JSP 頁面，ASP 頁面，CSS 頁面，Javascript 腳本文件，圖片文件，Gif 圖片文件等。那么如何在一個站點（這里特指站點的“文件集中地”含義）下去歸類管理這些不同種類的文件呢？

這就涉及到了我們接下來要將的文件的站點結構。文件的站點結構就是將不同類型的文件，按功能相同/類型相同等共性，分類地存儲在站點下。比如，我的網站主要以頁面文件，圖片文件，腳本文件，樣式表文件四個部分組成。那么我就可以按照這種方式，在網站站點下創建四個文件夾pages，images，scripts，css。

2.2 實操演練

下面就跟隨我一起來操作創建站點的文件結構吧！

找到右側的文件面板，在已創建好的站點上點擊鼠標右鍵，新建文件夾，分別創建上述四個文件夾。如下圖所示

如此，就創建好了站點的文件結構，我們可以在四個文件夾上點擊鼠標右鍵，選擇創建文件，去創建諸如 html文件，jsp文件，css文件等類型的文件。

我們可以看到，整個網站的文件結構未來將是一個樹形的結構，這樣的樹形結構才是軟件開發領域更為常見的工程結構。同學們要多多理解這種文件結構的優勢。萬事萬物，不歸類則亂，這樣的樹形結構既能很好的定義工程結構，又可以幫助開發設計人員迅速尋找到想要找的文件，可謂妙處多多。

3.設置站點的服務器地址

3.1 學習背景

我們在實際開發站點的時候不可能都是存儲在本地計算機的，真正投入到生產的時候大多是在遠程服務器上的。因此我們需要學會為站點設置遠程服務器的地址。

3.2 實操演練

在本小節的第二個知識點中，我們已經知道創建站點界面中，有左右兩欄內容，其中左欄第二行服務器就是幫助我們設置站點的服務器地址的。我們接下來找到這一個選項，點擊它。我們可以看到對應的右側界面的左下角有一個加號，這個加號的功能就是添加服務器地址，點擊加號在打開的界面中我們依次填寫：服務器名稱，服務器的鏈接方法，對應連接方法的地址，服務器的用戶名，密碼等信息，填寫完畢后，即可設置好站點的服務器地址。如下圖所示：

實際應用中，我們可以設置多個站點地址，設置好的服務器地址，我們可以通過這些服務器進行文件的上傳和下載，十分方便。

4. 如何管理站點？如何備份站點？如何從外部導入站點？

4.1 學習背景

有一個問題不知道同學們是否考慮過 Dreamweaver 是如何管理多個站點的？難道 Dreamweaver 只能在創建的這唯一一個站點里操作？答案當然是否定的！下面我們就帶領同學學習如何管理站點。

這里的管理，不僅僅是對已在 Dreamweaver 內創建好的站點進行管理，還涉及到把 Dreamweaver 中創建好的站點導出到別處，或者導出到 Windows 操作系統的文件系統中。同時也要學習別人如果提供了一個站點文件夾，我們該如何操作才能導入到自己電腦上的 Dreamweaver 中來。

4.2 管理站點實操

我們鼠標左鍵單擊菜單欄中的站點，可以看到彈出的下拉菜單中原本新建站點的下面第二個選項就是管理站點。我們鼠標左鍵點擊這個管理站點。彈出的界面如下圖所示：

從上面的圖片可以看到，紅色框框中的部分就是我們要學習的幾個功能。首先我們看到有一個列表，分別以-01，-02結尾。

我們可以鼠標左鍵單擊任意一個站點，你會發現左下角的小圖標（減號，鉛筆，復制，導出）圖標會由不可選變為可選狀態。點擊減號就會刪除當前選中的站點，點擊鉛筆就會彈出創建站點時編輯站點信息的界面，點擊最后一個導出，則會讓你選擇導出位置，選擇完為止后點擊完成，即可輕松將你的網站導出到 Dreamweaver 外的制定文件目錄中去。

而導入站點則是由單獨的按鈕控制，我們可以看到圖片左下角有紅框的按鈕寫著導入站點。沒錯，點擊這個按鈕，在你的電腦文件系統中選擇站點文件夾，點擊完成，即可成功地從 Dreamweaver 外部導入一個站點到Dreamweaver 中來。

5. 小結

通過本小節知識點的學習，我們可以學習到從創建站點到管理站點，這其中還包含了設置站點的文件結構，設置站點的服務器地址等細節知識。萬丈高樓平地起，地基不牢不可以。搭建網站如同蓋樓，這一節的創建站點如同搭建樓房的基本結構，打下樓房的地基。結構創建的好，日后網站越來越大，才能管理的有條不紊，井井有條。筆者曾見過很多文件結構創建失誤，后期亂改導致項目結構極差，人員協調效率極慢的案例，還望各位同學通過本小節 wiki 的學習，能夠養成好習慣。

本節的重點是：

1. 創建站點；

2. 設置站點服務器地址。

本節的難點是：

1. 管理，備份站點；

2. 設置站點的文件結構。