使用 DreamWeaver 創(chuàng)建站點

本節(jié)知識點，將帶領(lǐng)同學(xué)們學(xué)習(xí) Dreamweaver 設(shè)計網(wǎng)站的第一步：創(chuàng)建站點。而創(chuàng)建站點后，我們肯定不能一勞永逸，而是需要進一步對站點的屬性進行一些相應(yīng)的設(shè)置，比如：設(shè)置站點的文件結(jié)構(gòu)，設(shè)置站點的服務(wù)器地址。本小節(jié)的最后，將為大家講解如何在 Dreamweaver 上管理自己的站點，如何備份站點，又如何從外部導(dǎo)入站點。下面就請同學(xué)們跟隨本小節(jié)的腳步一起來學(xué)習(xí)一下如何創(chuàng)建站點吧！

1. 創(chuàng)建一個站點

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

1.1 新建站點

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

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

1.2 填寫站點基本屬性

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

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

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

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

釋疑2：Git 是什么？

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

創(chuàng)建完站點后我們在 Dreamweaver 主界面右側(cè)可以發(fā)現(xiàn)創(chuàng)建好的站點就在此處。如下圖所示：

2. 創(chuàng)建站點文件結(jié)構(gòu)

2.1 什么叫站點的文件結(jié)構(gòu)？

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

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

2.2 實操演練

下面就跟隨我一起來操作創(chuàng)建站點的文件結(jié)構(gòu)吧！

找到右側(cè)的文件面板，在已創(chuàng)建好的站點上點擊鼠標(biāo)右鍵，新建文件夾，分別創(chuàng)建上述四個文件夾。如下圖所示

如此，就創(chuàng)建好了站點的文件結(jié)構(gòu)，我們可以在四個文件夾上點擊鼠標(biāo)右鍵，選擇創(chuàng)建文件，去創(chuàng)建諸如 html文件，jsp文件，css文件等類型的文件。

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

3.設(shè)置站點的服務(wù)器地址

3.1 學(xué)習(xí)背景

我們在實際開發(fā)站點的時候不可能都是存儲在本地計算機的，真正投入到生產(chǎn)的時候大多是在遠程服務(wù)器上的。因此我們需要學(xué)會為站點設(shè)置遠程服務(wù)器的地址。

3.2 實操演練

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

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

4. 如何管理站點？如何備份站點？如何從外部導(dǎo)入站點？

4.1 學(xué)習(xí)背景

有一個問題不知道同學(xué)們是否考慮過 Dreamweaver 是如何管理多個站點的？難道 Dreamweaver 只能在創(chuàng)建的這唯一一個站點里操作？答案當(dāng)然是否定的！下面我們就帶領(lǐng)同學(xué)學(xué)習(xí)如何管理站點。

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

4.2 管理站點實操

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

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

我們可以鼠標(biāo)左鍵單擊任意一個站點，你會發(fā)現(xiàn)左下角的小圖標(biāo)（減號，鉛筆，復(fù)制，導(dǎo)出）圖標(biāo)會由不可選變?yōu)榭蛇x狀態(tài)。點擊減號就會刪除當(dāng)前選中的站點，點擊鉛筆就會彈出創(chuàng)建站點時編輯站點信息的界面，點擊最后一個導(dǎo)出，則會讓你選擇導(dǎo)出位置，選擇完為止后點擊完成，即可輕松將你的網(wǎng)站導(dǎo)出到 Dreamweaver 外的制定文件目錄中去。

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

5. 小結(jié)

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

本節(jié)的重點是：

1. 創(chuàng)建站點；

2. 設(shè)置站點服務(wù)器地址。

本節(jié)的難點是：

1. 管理，備份站點；

2. 設(shè)置站點的文件結(jié)構(gòu)。