1.1 網站開發概述

網站是按照一定的規則，使用HTML等工具制作的用于展示特定內容的相關網頁的集合。而網頁是指在瀏覽器上登錄一個網站后，看到的瀏覽器上的頁面。網頁是由文字、圖片、聲音等多媒體通過超鏈接的方式有機地組合起來的。因此，學習網站開發的基礎就是學習網頁制作。

1.1.1 網頁概述

網頁是用HTML編寫的一種文件，將這種文件放在Web服務器上可以讓在互聯網上的其他用戶瀏覽。比如訪問百度網站，看到的就是百度網站的網頁。網頁也是通過HTTP來傳遞給瀏覽者的。網站是網頁的集合，多個網頁可以共同組成一個網站。網站顯示的第一個網頁稱為首頁。

1.1.2 網頁構成元素

網頁的構成元素很豐富，可以是文字，也可以是圖片，甚至可以將一些多媒體文件（如音頻、視頻等）插入網頁里。網頁構成元素如下。

1. 文本

網頁信息主要以文本為主，這里指的文本是文本字，而非圖片中的文字。在網頁中可以通過字體、大小、顏色、底紋、邊框等選項來設置文本的屬性。中文文字常用宋體、9磅或12像素大小、黑色即可，顏色不要太雜亂。大段文本文字的排列，建議參考一些優秀雜志或報紙的樣式。

2. 圖像

圖像可以使網頁豐富多彩。網頁支持的圖像格式包括JPG、GIF和PNG等。常用圖形如下。

? Logo標志，是代表網站形象或欄目內容的標志性圖片，一般在網頁左上角。

? Banner廣告，用于宣傳站內某個欄目或者活動的廣告，一般以GIF動畫形式為主。

? 圖標，主要用于導航，在網頁中具有重要的作用，相當于路標。

? 背景圖，用來裝飾和美化網頁。

3. 超鏈接

超鏈接是網站的“靈魂”，它是從一個網頁指向另一個目的端的鏈接，如指向另一個網頁或者相同網頁上的不同位置。超鏈接可以指向一幅圖片、一個電子郵件地址、一個文件、一個程序或者本頁中的其他位置。超鏈接的載體可以是文本、圖片或者Flash動畫等。超鏈接廣泛存在于網頁的圖片和文字中，提供與圖片和文字相關內容的鏈接，在超鏈接上單擊，即可鏈接到相應地址（URL）的網頁。鼠標指針指向有鏈接的地方，默認會變成小手形狀。可以說，超鏈接是網頁的最大特色。

4. 表格

表格在網頁中的作用非常大，它可以用來布局網頁，設計各種精美的網頁效果，也可以用來組織和顯示數據。

5. 表單

表單主要用來收集用戶信息，實現瀏覽者與服務器之間的信息交互。

6. 導航條

導航條是一組超鏈接，方便用戶訪問網站內部各個欄目。導航條可以是文字，也可以是圖片，還可以使用Flash來制作。導航條可以顯示多級菜單和下拉菜單效果。

7. 其他元素

除了上面幾種網頁基本元素外，在頁面中可能還包括GIF動畫、Flash動畫、音頻、視頻、框架等。

1.1.3 網站建設流程

在創建網站之前首先要了解網站建設的基本流程，這樣可以明確網站的目標和方向，從而提高效率。

1. 網站需求分析

在建立網站時，首先要考慮客戶的各種需求，并以此為基礎建設網站項目。網站的需求分析一般包括以下幾點。

? 了解相關行業的市場情況，如在網上了解公司開展業務的市場情況。

? 了解主要競爭對手的情況。

? 了解網站建設的目的，是宣傳商品、進行電子商務，還是建立一個行業性網站。

? 了解用戶的實際情況，明確用戶需求。

? 進行市場調研，分析同類網站的優劣，并在此基礎上形成自己網站的大體架構。

2. 網站整體規劃

良好的規劃是創建成功網站的開始。在制作網頁前，要規劃好整個站點的風格、布局、服務對象等，并選擇適合的服務器、語言腳本和數據庫平臺。

? 規劃站點結構時，一般用文件夾保存文檔。要明確站點的每個文件、文件夾及其存在的邏輯關系。

? 文件夾命名要合理，要做到“見其名知其意”。

? 如果是多人合作開發，還要規劃好各自的內容，并注意統一風格，協調代碼。

3. 收集資料與素材

網站整體規劃好后，就要根據規劃的情況收集網頁制作中可能用到的資料和素材，通常包括文字資料、圖片素材、動畫素材、視頻素材等，并要將其分類保存。在收集資料時，要根據用戶的需求搜集建站的資料。整理好資料后，要根據這些資料搜集必要的設計素材。

4. 制作網頁

一個網站往往包含很多網頁，具體制作過程如下。

? 創建網頁框架：在整體上布局頁面，根據導航欄、主題按鈕等將頁面劃分為幾個區域。

? 制作導航欄：借助導航欄可以更加方便地瀏覽網站。

? 添加頁面對象：分別編輯各個頁面，將頁面對象添加到網頁的各個區域，并設置好格式。

? 設置鏈接：為頁面的相應部分設置鏈接，這樣，整個頁面就整合起來了。

5. 域名和服務器空間的申請

網站制作完成后，首先要注冊一個屬于自己的域名。有了域名之后，在世界的任何地方只要在瀏覽器上輸入地址，就能看到網站上的內容。一個好的域名擁有巨大的商業價值。

有了域名之后，還要有空間來存放網站的內容，因此，還要租用服務器空間。

6. 測試與發布網站

網站發布前要進行細致周密的測試，以保證正常瀏覽和使用。主要測試內容如下。

? 服務器的穩定性、安全性。

? 程序及數據庫測試、網頁兼容性測試，如瀏覽器、顯示器。

? 檢查文字、圖片、鏈接是否有錯誤。

7. 后期維護與網站推廣

上傳站點后，要定期對站點的內容進行更新與維護，更新與維護的內容如下。

? 服務器及相關軟硬件的維護，評估可能出現的問題，制訂響應時間。

? 數據庫維護，有效利用數據是網站維護的重要內容，因此要重視數據庫的維護。

? 內容的更新、調整等。

? 制訂網站維護的相關規定，將網站維護制度化、規范化。

1.1.4 網站開發軟件

用于網頁設計的工具軟件很多，本書將以Adobe公司的Dreamweaver CS6為開發工具進行講解，它也是最便于新手學習的軟件之一。下面講述Dreamweaver的使用方法。

打開Dreamweaver軟件，會出現一個程序啟動界面，如圖1.1所示。頁面分為3欄，第一欄為“打開最近的項目”，這里將呈現出之前打開過的歷史頁面。最下面的“打開…”用于打開文件夾，選擇要打開的頁面。第二欄為創建新項目，用于選擇新建頁面的語言環境。因為本書講述的是HTML方面的內容，所以應該選擇第一個HTML。第三欄為“主要功能”，用于介紹Dreamweaver軟件自帶的功能。

在“新建”選項欄中選擇HTML并單擊打開，進入程序工作頁面，如圖1.2所示。在這個頁面中可以采用4種視圖方式：代碼視圖、拆分視圖、設計視圖、實時視圖。設計師通常會選擇代碼視圖來編寫代碼，然后用設計視圖來查看代碼效果，而不是直接選擇設計視圖，用自帶的插件來完成頁面的制作。因為使用設計視圖設計的頁面，往往會產生很多的廢代碼和不符合Web標準的代碼。

打開程序工作頁面后，就可以在頁面中編寫HTML代碼了。