- HTML5+CSS3+JavaScript+Bootstrap網站開發實用技術（第3版）
- 張大為 劉德山 崔曉松 張也非主編
- 3293字
- 2025-04-02 16:25:00
1.7 建立站點
建立網站之前，一般先建立站點。站點是某個網站的本地或遠程存儲位置，是存放網站所有網頁及各種素材的文件夾。
通過將本地文件夾映射為站點，可以有效地將網頁和素材組合起來，利用超鏈接從一個網頁跳轉到另一個網頁，實現對網站的瀏覽。建立站點是網站開發的第一步，后續的網站開發工作都在站點中進行，這有助于網站的開發和管理。下面以Dreamweaver環境為例，介紹站點的創建過程。在創建站點之前，先介紹一下Dreamweaver的工作環境。
1.7.1 Dreamweaver CS6介紹
Dreamweaver CS6是Adobe公司推出的一款集網頁制作和網站管理于一身的編輯工具。使用Dreamweaver CS6，既可以在代碼視圖狀態下書寫HTML代碼，也可以利用設計視圖提供的可視化環境進行開發。Dreamweaver CS6版本對HTML和CSS都有良好的語法提示功能，用戶使用起來非常方便。
1.Dreamweaver CS6的編輯窗口
Dreamweaver CS6的頁面編輯窗口主要包括菜單欄、文檔窗口，還包括屬性面板、插入面板、文件面板等面板組和一些可選的工具欄。圖1-11是Dreamweaver代碼視圖下的編輯窗口。
圖1-11 Dreamweaver CS6的編輯窗口
（1）文檔窗口
該窗口用于網頁代碼的輸入和編輯。在“設計”視圖下，網頁編輯的結果與最終在瀏覽器中顯示的效果近似。圖1-11所示為在代碼視圖下編輯網頁，所以顯示為一些代碼。
（2）工具欄
文檔窗口上方可以顯示各種工具欄，圖1-11中顯示的是“文檔工具欄”和“編碼工具欄”，這些工具欄可以通過執行【查看】/【工具欄】菜單命令顯示或隱藏。
文檔工具欄中的“代碼”“拆分”“設計”3個按鈕經常使用。通常，單擊【代碼】按鈕，文檔窗口工作在代碼視圖下，可以很方便地輸入HTML和CSS代碼；單擊【設計】按鈕，文檔窗口工作在設計視圖下，可以使用可視化方式完成網頁設計；如果單擊【拆分】按鈕，文檔窗口分為上、下兩部分，分別顯示代碼和頁面效果，方便初學者學習。
文檔工具欄還包括瀏覽器導航、編碼和樣式呈現工具欄。
2.浮動面板組
Dreamweaver通過面板為用戶提供大量的可用工具，執行菜單欄中“窗口”菜單中的命令，可以顯示和隱藏各種面板。這些面板不用時可以關閉，也可以折疊。最常用的面板是屬性面板，其他還包括插入面板、文件面板、行為面板等。
（1）屬性面板
屬性面板會隨著編輯的內容而變化。例如，如果選中網頁中的文字，將出現文字的屬性面板，其中包含了所要編輯文字的所有內容，包括字體、顏色、大小、連接、縮進等；如果選擇網頁中的圖片，將出現圖片的屬性面板，包括圖片的寬度、高度、文件鏈接地址等內容，如圖1-12所示。通過屬性面板，可以很方便地設置網頁元素的屬性。
圖1-12 屬性面板
（2）插入面板
插入面板的主要功能相當于插入菜單，主要是向網頁中插入一些對象，如表格、框架、圖像、層等，如圖1-13所示。插入面板是分類的，它通過一個下拉菜單，把要插入的選項都包括在面板中。
（3）其他面板
除此之外，針對不同的網頁元素還有其他若干面板，如行為面板、文件面板、歷史面板等。
3.創建第一個Dreamweaver文檔
Dreamweaver啟動后，執行【文件】/【新建】命令，打開“新建文檔”對話框，如圖1-14所示。它提供了一些可供使用的模板來創建文檔，這里使用最基本的一種，也是默認的一種。選擇【空白頁】中的【HTML】選項，然后單擊【創建】按鈕，就可以打開一個新的文檔窗口。這時，文檔還沒有命名，在編輯完成后要為它命名，并保存到本地的網站文件夾中。
圖1-13 插入面板
需要說明的是，對于新建的空白文檔，如果工作在設計視圖下，窗口中沒有顯示的內容；如果切換到“代碼”或“拆分”視圖下，會顯示自動生成的HTML代碼內容。實際上，即使是空白的網頁，網頁文件的代碼框架也已經存在了，如圖1-15所示。
圖1-14 “新建文檔”對話框
圖1-15 空白頁面的代碼窗口
代碼視圖中給出了基本的HTML框架，如<html>、<head>、<body>等。此外，還包含“文檔類型”聲明，如：
<!doctype html>
HTML的規范在不斷發展，在不同的HTML版本中，文檔類型聲明是不同的。文檔類型聲明的作用是告訴瀏覽器按照哪種具體的規范來解析和顯示這個頁面。盡管不同的語言版本之間有區別，但事實上它們的結構和元素基本是相同的，所以，在記事本文件中編寫HTML頁時，不書寫上面的代碼，大多數瀏覽器也能正常顯示網頁。
對于剛建完的空白頁，在設計視圖下，輸入文字并插入圖片后，可以得到圖1-16所示的網頁。當然，這只是一個網頁，如果要建設包括很多網頁的網站，就需要用到下面要講的站點的概念了。
圖1-16 在設計視圖下加入圖片后得到的網頁
1.7.2 Dreamweaver站點組成
使用Dreamweaver開發網站時，最好先建立站點，然后再具體制作網頁。通常站點由以下3個部分（文件夾）組成，具體取決于開發環境和所開發的Web站點類型。
（1）本地根文件夾
本地根文件夾用于存儲正在處理的文件。Dreamweaver將此文件夾稱為“本地站點”。此文件夾通常位于本地計算機上，但也可能位于網絡服務器上，存放著所有網頁及素材。
（2）遠程文件夾
遠程文件夾存儲用于測試、生產和協作等用途的文件。Dreamweaver在文件面板中將此文件夾稱為“遠程服務器”。遠程文件夾通常位于運行Web服務器的計算機上。遠程文件夾包含用戶從Internet訪問的文件。
（3）測試服務器文件夾
測試服務器文件夾是Dreamweaver用于處理動態網頁的文件夾。
制作網站時，通常先規劃網站的目錄結構，然后創建本地站點，制作網頁，完成后將本地站點上傳至遠程站點，最后測試發布。如果要定義Dreamweaver本地站點，只需設置一個本地文件夾。本地站點在開發過程中，還可以不斷調整。若要向Web服務器傳輸文件或開發Web應用程序，還必須添加遠程站點和測試服務器信息。通過本地文件夾和遠程文件夾的結合使用，可以在本地硬盤和Web服務器之間傳輸文件，輕松管理Dreamweaver站點中的文件。
1.7.3 創建站點
若要創建本地站點，只需指定用于存儲所有站點文件的本地文件夾。該本地文件夾可以位于本地計算機上，也可以位于Web服務器上。具體步驟如下。
①在本地計算機上創建要用于存儲站點文件的本地文件夾D:\Tourism，文件夾結構根據網站需要設計，將D:\Tourism作為本地根文件夾。
②在Dreamweaver窗口中執行【站點】/【新建站點】命令，在出現的“站點設置對象”對話框中輸入站點名稱。然后在“本地站點文件夾”文本框中，輸入用于存儲站點文件的本地文件夾的地址即可，如圖1-17所示。也可以單擊該文本框右側的瀏覽按鈕
，選擇相應的文件夾。
圖1-17 “站點設置對象”對話框
③單擊【保存】按鈕，關閉“站點設置對象”對話框，Dreamweaver中的本地站點就建成了。
④設置好站點文件夾后，可以在“站點設置對象”對話框中填寫服務器信息、版本控制信息和高級設置信息。其中，“服務器”信息用于指定遠程服務器上的遠程文件夾。在“高級設置”信息的“本地信息”中可以設置存儲站點圖像的文件夾、站點的鏈接方式和是否創建本地緩存以提高鏈接和站點管理任務的速度等內容。
⑤定義好本地站點之后，Dreamweaver窗口右側的“文件”面板就會顯示剛才定義站點的目錄結構，如圖1-18所示。可以在此面板中的站點目錄內新建文件或子文件夾，這與在資源管理器中的操作相同。這樣，就可以在站點中創建網頁文件，進行網站建設了。
圖1-18 “文件”面板
1.7.4 管理站點
Dreamweaver提供了站點管理功能。在“管理站點”對話框中，可以完成創建新站點、編輯現有站點、復制站點、刪除站點或者導入/導出站點工作。管理站點的具體操作如下。
①在Dreamweaver窗口中，執行【站點】/【管理站點】命令，彈出的“管理站點”對話框中列出了已經存在的站點名稱，如圖1-19所示。從列表中選擇某站點，單擊下方的相應管理選項，進行相應操作，然后單擊【完成】按鈕即可。
圖1-19 “管理站點”對話框
②“管理站點”窗口的主要功能如下。
?新建站點：創建新站點。單擊【新建站點】按鈕后，將會打開“站點設置”對話框，可以命名或指定新站點的位置。
?編輯站點：編輯用戶名、口令等信息以及當前Dreamweaver站點的服務器信息。在站點列表中選擇現有站點，然后單擊編輯站點圖標
，即可編輯當前站點。
?復制站點：創建當前站點的副本。若要復制站點，需要在站點列表中選擇該站點，然后單擊復制站點圖標
。復制的站點將會顯示在站點列表中，站點名稱后面會附加“復制”字樣。若要更改復制站點的名稱，請選中該站點，然后單擊編輯站點圖標。
?刪除站點：從Dreamweaver站點列表中刪除選定的站點及其所有設置信息，這并不會刪除實際站點文件。若要刪除站點，請在站點列表中選擇該站點，然后單擊刪除站點圖標
。
注意此操作是無法撤銷的。
?導入/導出站點：導入用XML描述的站點，或將選定站點導出為XML文件（*.ste）。導入功能僅導入以前導出的站點，并不可以通過導入站點文件來創建新的Dreamweaver站點。
- Mastering Spring MVC 4
- Twilio Best Practices
- Java程序員面試算法寶典
- Learn Scala Programming
- Python Network Programming Cookbook（Second Edition）
- HDInsight Essentials（Second Edition）
- 好好學Java：從零基礎到項目實戰
- iPhone應用開發從入門到精通
- OpenMP核心技術指南
- Java EE 8 and Angular
- SCRATCH編程課：我的游戲我做主
- LibGDX Game Development By Example
- Python編程：從入門到實踐（第2版）
- Unity與C++網絡游戲開發實戰：基于VR、AI與分布式架構
- Python for Secret Agents