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

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

1. 創(chuàng)建一個(gè)站點(diǎn)

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

1.1 新建站點(diǎn)

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

選擇新建站點(diǎn)后彈出界面如下圖：

1.2 填寫站點(diǎn)基本屬性

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

釋疑1：什么是站點(diǎn)文件的存儲(chǔ)位置？

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

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

釋疑2：Git 是什么？

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

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

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

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

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

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

2.2 實(shí)操演練

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

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

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

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

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

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

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

3.2 實(shí)操演練

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

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

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

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

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

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

4.2 管理站點(diǎn)實(shí)操

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

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

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

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

5. 小結(jié)

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

本節(jié)的重點(diǎn)是：

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

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

本節(jié)的難點(diǎn)是：

1. 管理，備份站點(diǎn)；

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