網(wǎng)頁制作教程

蘭義湧 王向華 編著

內(nèi) 容 簡 介

本書從網(wǎng)頁制作所涉及的背景知識出發(fā)，以圖文并茂的方式，通過實例對 HTML 基礎(chǔ)

知識進行講解，在此基礎(chǔ)上，對 Dreamweaver、Fireworks、Flash 等網(wǎng)頁制作工具分別進行

了詳細的介紹和說明。內(nèi)容循序漸進，便于初學(xué)者逐步了解和掌握網(wǎng)頁制作的方法和步驟。

本書注重實際動手能力的培養(yǎng)，以實例的形式對各知識點進行分析講解，引導(dǎo)讀者

更好地掌握網(wǎng)頁制作技巧和相關(guān)工具的使用方法。

本書適合作為高等院校網(wǎng)頁制作課程的指導(dǎo)教程，也可作為網(wǎng)頁制作愛好者的參考書。

圖書在版編目（CIP）數(shù)據(jù)

網(wǎng)頁制作教程 / 蘭義湧, 王向華編著. — 北京 :

中國鐵道出版社, 2015.6

ISBN 978-7-113-20469-3

Ⅰ. ①網(wǎng)… Ⅱ. ①蘭… ②王… Ⅲ. ①網(wǎng)頁制作工具

－教材 Ⅳ. ①TP393.092

中國版本圖書館 CIP 數(shù)據(jù)核字(2015)第 115649 號

書 名：網(wǎng)頁制作教程

作 者：蘭義湧 王向華 編著

策 劃：魏 娜 讀者熱線：400-668-0820

責(zé)任編輯：周海燕 賈淑媛

封面設(shè)計：劉 穎

封面制作：白 雪

責(zé)任校對：湯淑梅

責(zé)任印制：李 佳

出版發(fā)行：中國鐵道出版社（100054，北京市西城區(qū)右安門西街 8 號）

網(wǎng) 址：http:// www.51eds.com

印 刷：北京鑫正大印刷有限公司

版 次：2015 年 6 月第 1 版 2015 年 6 月第 1 次印刷

開 本：787 mm×960 mm 1/16 印張：12.5 字數(shù)：238 千

書 號：ISBN 978-7-113-20469-3

定 價：25.00 元

版權(quán)所有 侵權(quán)必究

凡購買鐵道版圖書，如有印制質(zhì)量問題，請與本社教材圖書營銷部聯(lián)系調(diào)換。電話：（010）63550836

打擊盜版舉報電話：（010）51873659

前 言

foreword

隨著個人計算機的普及和計算機網(wǎng)絡(luò)的廣泛應(yīng)用，基于互聯(lián)網(wǎng)的萬維網(wǎng)以超乎尋常

的速度蓬勃發(fā)展，在短短的二十多年里，已滲透到了人類社會的方方面面，造就了知識

大爆炸的信息時代。在萬維網(wǎng)出現(xiàn)以前，人們一般通過紙質(zhì)媒體（報紙、雜志、書信等）

和有聲媒體（電視、廣播、電話等）進行知識獲取和信息交流?；ヂ?lián)網(wǎng)的發(fā)展，對現(xiàn)今

人們的生活方式產(chǎn)生了巨大影響。如今，在互聯(lián)網(wǎng)上人們不但可以瀏覽新聞、查閱資料、

聊天交流、玩游戲等，還可以通過互聯(lián)網(wǎng)進行商品交易、網(wǎng)上辦公、網(wǎng)上購物等，這些

功能給人們的現(xiàn)實生活帶來了極大的便利。

在這種背景下，了解和掌握網(wǎng)頁的設(shè)計與制作便成了當(dāng)下許多人的愿望，為此，我

們編寫了此教程，希望可以引導(dǎo)對網(wǎng)頁制作感興趣的朋友了解網(wǎng)頁設(shè)計的基本方法和步

驟。本書結(jié)合作者多年來的網(wǎng)頁設(shè)計實踐，既有基礎(chǔ)知識，又注重實際操作，以圖文并

茂的方式為初學(xué)者提供簡單易懂的講解。希望讀者通過學(xué)習(xí)本書能夠?qū)W(wǎng)頁設(shè)計有基本

了解，并可以自己動手完成網(wǎng)頁的設(shè)計與制作。

本書共 6 章：

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ)。介紹了網(wǎng)頁設(shè)計的一些基礎(chǔ)知識，對互聯(lián)網(wǎng)（Internet）、萬

維網(wǎng)（WWW）進行了比較詳細的介紹，同時對于本教程將要涉及的一些背景知識也給予

了介紹，其中包括 HTML、URL、HTTP、IP 地址、DNS 以及瀏覽器、Web 服務(wù)器等；

分析了網(wǎng)頁的特征、網(wǎng)頁的基本元素和網(wǎng)頁設(shè)計的基本原則；對一些常用的網(wǎng)頁制作工

具和輔助工具也做了簡要介紹。

第 2 章 HTML 簡介。主要介紹了 HTML 的基本概念及其語法。HTML 標(biāo)記是 HTML

語言的基礎(chǔ)。通過介紹 HTML 標(biāo)記符，使讀者基本了解和掌握使用 HTML 設(shè)計和制作網(wǎng)

頁（包括文字、圖像、鏈接、表格、表單、框架等）的方法。

第 3 章 Dreamweaver 入門。本章主要介紹 Dreamweaver CS5 的新增特性、工作界

面、站點設(shè)置及建立等，通過本章的學(xué)習(xí)，讀者可以對 Dreamweaver 的功能有一個全面

的了解。

第 4 章 Dreamweaver 使用詳解。本章詳細介紹了利用 Dreamweaver 創(chuàng)建站點及文

檔的方法，通過本章的學(xué)習(xí)，讀者可以較為熟練地創(chuàng)建各種布局的頁面。

第 5 章 Fireworks 制作圖片。本章主要介紹了 Fireworks 基礎(chǔ)知識，主要內(nèi)容包括

文本的編輯與運用、編輯圖像、Web 圖像處理和圖像優(yōu)化與導(dǎo)出。

第 6 章 Flash 制作動畫。本章從動畫基本概念入手，講述了 Flash CS5 中主要面板

的使用，以實例講述了基本類型動畫的制作方法，這也是本章的重點內(nèi)容。Flash 動畫以

其體積小、交互功能強而廣為流行，但制作動畫時也必須對動畫進行優(yōu)化，盡可能將其

尺寸減小，以適應(yīng)不同的網(wǎng)絡(luò)環(huán)境。

本書主要有如下特點：

（1）注重背景知識。網(wǎng)頁制作看似簡單，但如果要制作一個高質(zhì)量的網(wǎng)頁，還需要

有一定的背景知識。

（2）結(jié)構(gòu)清晰。首先介紹了網(wǎng)頁制作的基礎(chǔ)，之后主要對網(wǎng)頁制作工具進行了詳細

的講解。

（3）圖文并茂。本書以圖文并茂的方式為初學(xué)者提供簡單易懂的講解。

本書由蘭義湧、王向華編著。在編寫過程中得到了學(xué)校同事、出版社編輯的大力支

持，在此一并表示感謝。編者力求在編寫過程中嚴謹細致、精益求精，但由于水平有限，

書中難免有不足之處，敬請讀者諒解，同時歡迎廣大讀者批評指正。

編者

2015 年 5 月

目 錄

contents

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) ........................................................................................ 1

1.1 Internet 與 WWW ................................................................................................... 1

1.1.1 Internet 的概念........................................................................................... 1

1.1.2 WWW 概述 ................................................................................................ 2

1.1.3 網(wǎng)頁和網(wǎng)站................................................................................................ 5

1.1.4 萬維網(wǎng)的運行原理和流程 ......................................................................... 5

1.2 背景知識介紹........................................................................................................ 6

1.2.1 IP 地址....................................................................................................... 6

1.2.2 DNS 域名系統(tǒng)............................................................................................ 9

1.2.3 瀏覽器 ......................................................................................................11

1.2.4 Web 服務(wù)器...............................................................................................12

1.3 網(wǎng)頁設(shè)計的基礎(chǔ)知識 ...........................................................................................14

1.3.1 網(wǎng)頁的基本特征 .......................................................................................14

1.3.2 網(wǎng)頁的基本構(gòu)成元素................................................................................15

1.3.3 網(wǎng)頁設(shè)計的基本原則................................................................................17

1.4 網(wǎng)頁制作工具概述 ...............................................................................................19

1.4.1 網(wǎng)頁設(shè)計的常用工具................................................................................19

1.4.2 網(wǎng)頁設(shè)計的輔助工具................................................................................20

本章小結(jié)......................................................................................................................20

習(xí)題 .............................................................................................................................21

第 2 章 HTML 簡介 .......................................................................................... 23

2.1 HTML 基本概念....................................................................................................23

2.2 HTML 文檔結(jié)構(gòu)....................................................................................................23

2.2.1 HTML 文檔基本結(jié)構(gòu) ................................................................................23

2.2.2 編寫第一個 HTML 頁面 ...........................................................................24

2.3 HTML 基礎(chǔ)標(biāo)記....................................................................................................25

2.3.1 網(wǎng)頁頭部標(biāo)記 ...........................................................................................25

2.3.2 文檔主體標(biāo)記 ...........................................................................................27

2 網(wǎng)頁制作教程

2.3.3 段落標(biāo)記...................................................................................................30

2.3.4 圖片標(biāo)記...................................................................................................31

2.3.5 超鏈接標(biāo)記...............................................................................................32

2.3.6 列表標(biāo)記...................................................................................................33

2.3.7 表單標(biāo)記...................................................................................................35

2.3.8 表格標(biāo)記...................................................................................................38

2.3.9 框架標(biāo)記...................................................................................................41

2.3.10 其他一些常用標(biāo)記 .................................................................................42

本章小結(jié)......................................................................................................................45

習(xí)題 .............................................................................................................................45

第 3 章 Dreamweaver 入門 .............................................................................. 48

3.1 Dreamweaver 基礎(chǔ).................................................................................................48

3.1.1 Dreamweaver 概述 .....................................................................................48

3.1.2 Dreamweaver 工作界面 .............................................................................49

3.1.3 Dreamweaver 創(chuàng)建 Web 站點的流程 .........................................................50

3.1.4 了解工作區(qū)...............................................................................................52

3.1.5 設(shè)置 Dreamweaver 站點 ............................................................................54

3.1.6 創(chuàng)建和打開文檔 .......................................................................................55

3.2 Dreamweaver 建站實例 .........................................................................................56

3.2.1 設(shè)置站點和項目文件................................................................................56

3.2.2 創(chuàng)建基于表格的頁面布局 ........................................................................58

3.2.3 向頁面添加內(nèi)容 .......................................................................................59

3.2.4 使用 CSS 設(shè)置頁面格式 ..........................................................................61

3.2.5 發(fā)布站點...................................................................................................64

本章小結(jié)......................................................................................................................67

習(xí)題 .............................................................................................................................68

第 4 章 Dreamweaver 使用詳解 ....................................................................... 69

4.1 Dreamweaver 的站點管理 .....................................................................................69

4.1.1 創(chuàng)建站點...................................................................................................69

4.1.2 管理站點...................................................................................................69

4.2 創(chuàng)建和編輯文檔...................................................................................................73

4.2.1 創(chuàng)建文檔...................................................................................................73

目錄 3

4.2.2 設(shè)置頁面屬性 ...........................................................................................73

4.3 向頁面添加內(nèi)容...................................................................................................74

4.3.1 插入文本...................................................................................................74

4.3.2 插入特殊字符 ...........................................................................................75

4.3.3 插入圖像...................................................................................................76

4.3.4 插入多媒體對象 .......................................................................................77

4.3.5 建立超鏈接...............................................................................................80

4.4 頁面布局 ..............................................................................................................82

4.4.1 使用表格...................................................................................................83

4.4.2 使用布局視圖和擴展表格視圖 ................................................................86

4.4.3 使用框架...................................................................................................91

4.5 網(wǎng)頁模板與網(wǎng)頁樣式 ...........................................................................................95

4.5.1 模板及樣式的作用 ...................................................................................95

4.5.2 使用模板...................................................................................................95

4.5.3 CSS 樣式基礎(chǔ)..........................................................................................102

4.5.4 使用 Dreamweaver 設(shè)計 CSS ...................................................................104

4.6 層與行為 ............................................................................................................116

4.6.1 層的基本概念 .........................................................................................116

4.6.2 層的基本操作 .........................................................................................116

4.6.3 層的屬性設(shè)置 .........................................................................................118

4.6.4 認識“行為” .........................................................................................122

4.6.5 Dreamweaver 的內(nèi)置“行為” ................................................................123

4.7 建立表單 ............................................................................................................130

4.7.1 創(chuàng)建表單.................................................................................................130

4.7.2 添加表單域.............................................................................................131

4.7.3 處理表單.................................................................................................135

4.7.4 表單制作實例 .........................................................................................135

4.8 測試和發(fā)布網(wǎng)站.................................................................................................139

4.8.1 測試網(wǎng)站.................................................................................................139

4.8.2 發(fā)布網(wǎng)站.................................................................................................141

本章小結(jié)....................................................................................................................144

習(xí)題 ...........................................................................................................................144

4 網(wǎng)頁制作教程

第 5 章 Fireworks 制作圖片 ........................................................................... 146

5.1 Fireworks 基礎(chǔ) ....................................................................................................146

5.1.1 位圖與矢量圖 .........................................................................................146

5.1.2 Fireworks 工作界面.................................................................................147

5.1.3 Fireworks 基本操作.................................................................................148

5.1.4 常用面板介紹 .........................................................................................148

5.2 文本的編輯與運用 .............................................................................................149

5.3 編輯圖像 ............................................................................................................150

5.3.1 矢量圖編輯.............................................................................................150

5.3.2 位圖編輯.................................................................................................152

5.4 Web 圖像處理 ....................................................................................................154

5.4.1 圖像熱點.................................................................................................154

5.4.2 圖像切片.................................................................................................154

5.4.3 制作按鈕.................................................................................................155

5.4.4 制作彈出菜單 .........................................................................................158

5.5 圖像優(yōu)化與導(dǎo)出.................................................................................................159

5.5.1 優(yōu)化圖像.................................................................................................159

5.5.2 導(dǎo)出圖像.................................................................................................160

5.5.3 Fireworks 與 Dreamweaver 的協(xié)作...........................................................162

本章小結(jié)....................................................................................................................163

習(xí)題 ...........................................................................................................................163

第 6 章 Flash 制作動畫 .................................................................................. 165

6.1 Flash 基礎(chǔ)...........................................................................................................165

6.1.1 Flash CS5 簡介 ........................................................................................165

6.1.2 Flash CS5 工作界面 ................................................................................165

6.2 Flash 設(shè)計基礎(chǔ) ...................................................................................................167

6.2.1 時間軸 ....................................................................................................167

6.2.2 幀 ............................................................................................................168

6.2.3 圖層 ........................................................................................................168

6.2.4 時間軸特效.............................................................................................169

6.2.5 常用面板.................................................................................................170

6.3 Flash 簡單動畫制作 ...........................................................................................170

目錄 5

6.3.1 Flash 動畫的基本類型 ............................................................................170

6.3.2 制作動畫的一般過程..............................................................................171

6.4 創(chuàng)建動畫 ............................................................................................................171

6.4.1 逐幀動畫.................................................................................................171

6.4.2 補間（運動補間）動畫..........................................................................172

6.4.3 補間（形狀補間）動畫..........................................................................175

6.4.4 軌跡動畫.................................................................................................176

6.4.5 蒙版動畫.................................................................................................178

6.5 聲音的使用 ........................................................................................................182

6.5.1 聲音類型.................................................................................................182

6.5.2 聲音導(dǎo)入及屬性設(shè)置..............................................................................182

6.6 影片優(yōu)化與發(fā)布.................................................................................................183

6.6.1 優(yōu)化影片.................................................................................................184

6.6.2 發(fā)布影片.................................................................................................184

本章小結(jié)....................................................................................................................187

習(xí)題 ...........................................................................................................................188

參考文獻 ......................................................................................................... 189

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ)

在網(wǎng)頁出現(xiàn)以前，人們一般通過紙質(zhì)媒體（報紙、雜志、書信等）和有聲媒體（電

視、廣播、電話等）進行知識獲取和信息交流。進入 20 世紀 90 年代，隨著網(wǎng)絡(luò)技術(shù)的

發(fā)展和個人計算機的普及，一種新型的信息呈現(xiàn)方式應(yīng)運而生，那就是萬維網(wǎng)（World

Wide Web，WWW）。自它誕生之日起，即以超乎尋常的速度蓬勃發(fā)展，在短短的二十多

年里，便滲透到了人類社會的方方面面，造就了知識大爆炸的信息時代。而組成萬維網(wǎng)

的基本單元便是一個個網(wǎng)頁。為此，本章就網(wǎng)頁涉及的一些背景知識進行介紹。

1.1 Internet 與 WWW

1.1.1 Internet 的概念

1．Internet 簡介

Internet，又稱因特網(wǎng)，是由網(wǎng)絡(luò)與網(wǎng)絡(luò)相互連通而形成的龐大網(wǎng)絡(luò)，這些網(wǎng)絡(luò)以一

組通用的協(xié)議為基礎(chǔ)，互連成邏輯上單一的國際性網(wǎng)絡(luò)。這種將計算機網(wǎng)絡(luò)互相聯(lián)接在

一起的方法稱為“網(wǎng)絡(luò)互聯(lián)”，在此基礎(chǔ)上發(fā)展出覆蓋全世界的全球性網(wǎng)絡(luò)，稱為互聯(lián)網(wǎng)，

即互聯(lián)網(wǎng)是“網(wǎng)絡(luò)的網(wǎng)絡(luò)”。在這個網(wǎng)絡(luò)中有交換機、路由器等網(wǎng)絡(luò)設(shè)備，也包含各種不

同的連接鏈路、種類繁多的服務(wù)器和數(shù)不盡的計算機和終端設(shè)備。

互聯(lián)網(wǎng)始于 1969 年的美國，其前身是 ARPANET（阿帕網(wǎng)，美國國防部研究計劃署網(wǎng)絡(luò)），

起初服務(wù)于美國軍方，后來又成為連接大學(xué)及高等院校計算機的學(xué)術(shù)系統(tǒng)，逐步發(fā)展成為一個

覆蓋五大洲 150 多個國家的開放型全球計算機網(wǎng)絡(luò)系統(tǒng)，擁有許多服務(wù)商。普通計算機用戶只

需要一臺個人計算機，用電話線通過調(diào)制解調(diào)器和因特網(wǎng)服務(wù)商連接，便可進入互聯(lián)網(wǎng)。

在如今的日常生活中，互聯(lián)網(wǎng)已經(jīng)滲透到人們生活中的方方面面，使用互聯(lián)網(wǎng)可以

將信息瞬間發(fā)送給千里之外的人們，它是信息社會的基礎(chǔ)。

2．Internet 運行原理

互聯(lián)網(wǎng)是一個龐大的計算機網(wǎng)絡(luò)，可如何實現(xiàn)網(wǎng)絡(luò)中計算機之間的數(shù)據(jù)傳輸呢？

這主要依賴于 Internet 專門使用的一種計算機網(wǎng)絡(luò)通信協(xié)議 TCP/IP，通過該協(xié)議可以

2 網(wǎng)頁制作教程

確保數(shù)據(jù)安全、可靠地到達指定的目的地。TCP/IP 分兩部分：TCP（Transmission Control

Protocol，傳輸控制協(xié)議）和 IP（Internet Protocol，網(wǎng)間協(xié)議），TCP/IP 所采用的通信

方式是分組交換。所謂分組交換，簡單說，就是數(shù)據(jù)在傳輸時分成若干段，每個數(shù)據(jù)

段稱為一個數(shù)據(jù)包。TCP/IP 的基本傳輸單位就是數(shù)據(jù)包，TCP 和 IP 既可以聯(lián)合使用，

也可以與其他協(xié)議一起工作，它們在數(shù)據(jù)傳輸過程中主要完成以下功能：

① 首先由 TCP 把數(shù)據(jù)分成若干數(shù)據(jù)包，給每個數(shù)據(jù)包寫上序號，以便接收端能夠根

據(jù)序號將數(shù)據(jù)還原成原來的格式。

② IP 給每個數(shù)據(jù)包寫上發(fā)送主機和接收主機的地址，一旦寫上源地址和目的地址，數(shù)

據(jù)包就可以在物理網(wǎng)上傳送了。IP 還具有利用路由算法進行路由選擇的功能。

③ 這些數(shù)據(jù)包可以通過不同的傳輸途徑（路由）進行傳輸，由于路徑不同，加上其

他的原因，可能出現(xiàn)順序顛倒、數(shù)據(jù)丟失、數(shù)據(jù)失真甚至重復(fù)的現(xiàn)象。這些問題都由 TCP

來處理，它具有檢查和處理錯誤的功能，必要時還可以請求發(fā)送端重發(fā)。

簡言之，IP 負責(zé)數(shù)據(jù)的傳輸，而 TCP 負責(zé)數(shù)據(jù)的可靠性。為此，一臺計算機若想要

加入到互聯(lián)網(wǎng)中，成為互聯(lián)網(wǎng)中的一員，就必須遵循 TCP/IP，否則它將無法與其他計算

機進行數(shù)據(jù)交互。

3．互聯(lián)網(wǎng)的應(yīng)用

隨著互聯(lián)網(wǎng)的普及，它對現(xiàn)今人們的生活方式產(chǎn)生了巨大的影響。如今，在互聯(lián)網(wǎng)

上，人們不但可以瀏覽新聞、查閱資料、聊天交流、玩游戲等，而且可以通過互聯(lián)網(wǎng)進

行商品交易、網(wǎng)上辦公、網(wǎng)上購物等，這些功能給人們的現(xiàn)實生活帶來了極大的便利。

從目前互聯(lián)網(wǎng)服務(wù)功能來劃分，主要有以下功能類別：

① 通信（微信、QQ、E-mail 等）。

② 社交（Facebook、微博、人人網(wǎng)、QQ 空間、博客、論壇等）。

③ 休閑娛樂（網(wǎng)游、優(yōu)酷視頻網(wǎng)等）。

④ 新聞資訊（騰訊網(wǎng)、網(wǎng)易新聞網(wǎng)、新浪網(wǎng)、搜狐網(wǎng)等信息門戶網(wǎng)站）。

⑤ 網(wǎng)上貿(mào)易（網(wǎng)購、售票、轉(zhuǎn)賬匯款、工農(nóng)貿(mào)易）。

⑥ 資源共享（各類信息資源的下載）。

⑦ 網(wǎng)絡(luò)計算（大數(shù)據(jù)、云服務(wù)等）。

1.1.2 WWW 概述

1．WWW 簡介

WWW 是環(huán)球信息網(wǎng)的縮寫（亦作 Web、WWW、W3，英文全稱為 World Wide Web），

中文譯名為“萬維網(wǎng)”或“環(huán)球網(wǎng)”等，常簡稱為 Web。萬維網(wǎng)依托于 Internet，是 Internet

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 3

提供的一項網(wǎng)絡(luò)信息服務(wù)。

萬維網(wǎng)從運行結(jié)構(gòu)上分為 Web 客戶端和 Web 服務(wù)器程序。Web 客戶端（瀏覽器）

可以訪問瀏覽 Web 服務(wù)器上的資源。 Web 是一個由許多互相鏈接的超文本組成的系統(tǒng)，

通過互聯(lián)網(wǎng)訪問，在這個系統(tǒng)中，每個有用的事物，稱為“資源”，并且由一個全局的

“統(tǒng)一資源定位符”（Uniform Resource Identifier，URI）標(biāo)識，這些資源通過超文本傳輸

協(xié)議（Hypertext Transfer Protocol，HTTP）來傳送給客戶端用戶，而后者通過單擊鏈接

來獲取資源。

萬維網(wǎng)的發(fā)明者蒂姆·伯納斯·李在 1994 年 10 月于麻省理工學(xué)院（MIT）計算機科

學(xué)實驗室成立了萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，簡稱 W3C），又稱 W3C 理事會，

主要負責(zé)萬維網(wǎng)標(biāo)準和規(guī)則的制定。

2．超文本傳輸協(xié)議（HTTP）

HTTP 是 Hypertext Transfer Protocol 的縮寫，即超文本傳輸協(xié)議。 顧名思義，HTTP

提供了訪問超文本信息的功能，是 Web 瀏覽器和 Web 服務(wù)器之間的應(yīng)用層通信協(xié)議。

HTTP 是分布式的、通用的、面向?qū)ο蟮膮f(xié)議。通過擴展命令，它還可以用于類似的任務(wù)，

如域名服務(wù)或分布式面向?qū)ο笙到y(tǒng)。萬維網(wǎng)使用 HTTP 傳輸各種超文本頁面和數(shù)據(jù)。

HTTP 會話過程包括 4 個步驟：

① 建立連接：客戶端的瀏覽器向服務(wù)器端發(fā)出建立連接的請求，服務(wù)器端給出響應(yīng)

就可以建立連接了。

② 發(fā)送請求：客戶端按照協(xié)議的要求通過連接向服務(wù)器端發(fā)送自己的請求內(nèi)容。

③ 給出應(yīng)答：服務(wù)器按照客戶端的要求給出應(yīng)答，把結(jié)果（HTML 文件）返回給客

戶端。

④ 關(guān)閉連接：客戶端接到應(yīng)答后關(guān)閉連接。

HTTP 是基于 TCP/IP 的協(xié)議，它不僅保證正確傳輸超文本文檔，還確定傳輸文檔中

的哪一部分，以及哪部分內(nèi)容首先顯示等。

3．統(tǒng)一資源定位符（URL）

統(tǒng)一資源定位符（Uniform Resource Locator，URL）是一個負責(zé)給萬維網(wǎng)資源進行準

確定位的系統(tǒng)，有時又稱“統(tǒng)一資源標(biāo)識符”。每個 Web 資源都必須有唯一的 URL，它

包含的信息指出資源的位置以及瀏覽器應(yīng)該怎么處理它。它最初是由蒂姆·伯納斯·李

發(fā)明用來作為萬維網(wǎng)的地址，現(xiàn)在已經(jīng)被萬維網(wǎng)聯(lián)盟編制為互聯(lián)網(wǎng)標(biāo)準 RFC1738。

基本的 URL 應(yīng)該包含模式（或稱協(xié)議）、服務(wù)器名稱（或 IP 地址）、路徑和文件名等

信息，基本結(jié)構(gòu)如圖 1-1 所示。

4 網(wǎng)頁制作教程

圖 1-1 URL 的基本結(jié)構(gòu)

（1）第一部分

模式/協(xié)議（scheme）：它告訴瀏覽器如何處理將要打開的文件。最常用的模式是超文

本傳輸協(xié)議（HTTP），其他協(xié)議如下：

https：用安全套接字傳送的超文本傳輸協(xié)議。

ftp：文件傳輸協(xié)議。

mailto：電子郵件地址。

file：當(dāng)?shù)赜嬎銠C或網(wǎng)上分享的文件。

news：Usenet 新聞組。

gopher：Gopher 協(xié)議。

telnet：Telnet 協(xié)議。

（2）第二部分

文件所在服務(wù)器的名稱或 IP 地址，后面是到達這個文件的路徑和文件本身的名稱。

服務(wù)器的名稱或 IP 地址后面有時還跟一個冒號和一個端口號（如:8080）。路徑部分包含

等級結(jié)構(gòu)的路徑定義，一般來說，不同部分之間以斜線（/）分隔，有時候，URL 以斜杠

“/”結(jié)尾，而沒有給出文件名，在這種情況下，URL 引用路徑中最后一個目錄中的默認

文檔（如 index.html 或 default.htm）。

如對于 http://www.pku.edu.cn/about/bdjj.jsp 這個 URL 來說，http://表明了協(xié)議類型是

HTTP，www.pku.edu.cn 是服務(wù)器名稱（也稱域名），about/bdjj.jsp 指明了路徑/文件名?？?/p>

戶端用戶通過這個 URL 可以準確找到相關(guān)的文件資源。

4．超文本標(biāo)記語言（HTML）

HTML 的英文全稱為 Hypertext Markup Language，即超文本標(biāo)記語言，是萬維網(wǎng)資源

呈現(xiàn)給客戶端用戶的一種表現(xiàn)方式?！俺谋尽本褪侵赋宋淖滞?，頁面還可以包含圖片、

鏈接，以及音樂、程序等非文字元素。超文本標(biāo)記語言是標(biāo)準通用標(biāo)記語言（SGML）下

的一個應(yīng)用，也是一種規(guī)范，一種標(biāo)準。它通過標(biāo)記符號來標(biāo)記要顯示在網(wǎng)頁中的各個

部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器

如何顯示其中的內(nèi)容（如：文字如何處理、布局如何安排、圖片如何顯示等）。瀏覽器按

順序執(zhí)行網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫錯誤的標(biāo)記將不

第一部分 第二部分

協(xié)議類型:// 服務(wù)器名稱:端口號/路徑/文件名

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 5

指出其錯誤，也不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出

錯部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會有不完全相同的解

釋，因而可能會有不同的顯示效果。

超文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強大，支持不同數(shù)據(jù)格式的文件嵌入，

這也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特點如下所述：

① 簡易性：超文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。

② 可擴展性：超文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能、增加標(biāo)記符等要求，超

文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。

③ 平臺無關(guān)性：超文本標(biāo)記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)盛行的另

一個原因。

④ 通用性：HTML 是網(wǎng)絡(luò)的通用語言，是一種簡單、通用的標(biāo)記語言。它允許網(wǎng)頁

制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無

論使用的是什么類型的計算機或瀏覽器。

1.1.3 網(wǎng)頁和網(wǎng)站

網(wǎng)頁是網(wǎng)站的基本信息單位，是 WWW 的基本文檔。它由文字、圖片、動畫、聲音

等多種媒體信息以及鏈接組成，是用 HTML 編寫的。通過鏈接實現(xiàn)與其他網(wǎng)頁或網(wǎng)站的

關(guān)聯(lián)和跳轉(zhuǎn)，網(wǎng)頁文件的擴展名一般為.html、.htm、.asp、.aspx、.php 或.jsp 等。

網(wǎng)站就是指在互聯(lián)網(wǎng)上，根據(jù)一定的規(guī)則，使用 HTML 等語言制作的用于展示特定

內(nèi)容的相關(guān)網(wǎng)頁的集合，是由眾多不同內(nèi)容的網(wǎng)頁構(gòu)成，網(wǎng)頁的內(nèi)容可體現(xiàn)網(wǎng)站的全部

功能。通常把進入網(wǎng)站首先看到的網(wǎng)頁稱為首頁或主頁。新浪、網(wǎng)易、搜狐就是國內(nèi)比

較知名的大型門戶網(wǎng)站。人們可以通過瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）

或者享受網(wǎng)站提供的其他服務(wù)。

1.1.4 萬維網(wǎng)的運行原理和流程

當(dāng)我們訪問萬維網(wǎng)上的網(wǎng)頁時，到底是經(jīng)過了怎樣的流程呢？進入萬維網(wǎng)上的一

個網(wǎng)頁，或者訪問其他網(wǎng)絡(luò)資源時，通常首先要在瀏覽器上輸入想訪問網(wǎng)頁的統(tǒng)一資

源定位符 URL，或者通過超鏈接方式鏈接到那個網(wǎng)頁或網(wǎng)絡(luò)資源。之后，根據(jù) URL

的服務(wù)器名稱內(nèi)容，域名服務(wù)器將其解析成網(wǎng)絡(luò)可以識別的對應(yīng) IP 地址。接下來根

據(jù)網(wǎng)頁文件名稱向解析到的 IP 地址所在服務(wù)器發(fā)送一個 HTTP 請求。在通常情況下，

HTML 文本、圖片和構(gòu)成該網(wǎng)頁的一切其他文件很快會被逐一請求并發(fā)送回用戶瀏覽

器。瀏覽器接下來的工作是把 HTML、CSS 和其他接收到的文件所描述的內(nèi)容，加上

圖像、鏈接和其他必須的資源，顯示給用戶。這些就構(gòu)成了所看到的“網(wǎng)頁”。

6 網(wǎng)頁制作教程

總體來說，WWW 采用客戶機/服務(wù)器（B/S）的工作模式，工作流程具體如下：

① 用戶使用瀏覽器或其他程序建立客戶機與服務(wù)器連接，并發(fā)送瀏覽請求。

② Web 服務(wù)器接收到請求后，返回信息到客戶機并呈現(xiàn)給用戶。

③ 通信完成，關(guān)閉連接。

1.2 背景知識介紹

1.2.1 IP 地址

1．IP 地址的概念

在了解 IP 地址之前，先介紹一下 IP。IP 是 Internet Protocol 的縮寫，意思是“網(wǎng)

絡(luò)之間互連的協(xié)議”，也就是為計算機網(wǎng)絡(luò)相互連接進行通信而設(shè)計的協(xié)議。在互聯(lián)

網(wǎng)中，它是能使連接到網(wǎng)上的所有計算機網(wǎng)絡(luò)實現(xiàn)相互通信的一套規(guī)則。任何廠家生

產(chǎn)的計算機系統(tǒng)，只要遵守 IP 就可以與互聯(lián)網(wǎng)互連互通。正是因為有了 IP，互聯(lián)網(wǎng)

才得以迅速發(fā)展成為世界上最大的、開放的計算機通信網(wǎng)絡(luò)。因此，IP 也可以叫作“互

聯(lián)網(wǎng)協(xié)議”。

IP 中還有一個非常重要的內(nèi)容，那就是給互聯(lián)網(wǎng)上的每臺計算機和其他設(shè)備都規(guī)定

了一個唯一的地址，即 IP 地址（Internet Protocol Address），它是一種在 Internet 上給主機

編址的方式，也稱為網(wǎng)際協(xié)議地址。常見的 IP 地址，分為 IPv4 與 IPv6 兩大類（如不特

別標(biāo)示，本教程所說的 IP 地址一般指 IPv4 地址）。

IP 地址就像是我們的家庭住址一樣，如果你要寫信給一個人，你就要知道他（她）

的地址，這樣郵遞員才能把信送到。計算機發(fā)送信息就好比是郵遞員，它必須知道唯一

的“家庭地址”才不至于把信送錯人家。只不過我們的地址是使用文字來表示的，而計

算機的地址用二進制數(shù)字來表示。好比我們的電話通信系統(tǒng)，在電話通信中，電話用戶

是靠電話號碼來識別的，同樣，在網(wǎng)絡(luò)中為了區(qū)別不同的計算機，也需要給計算機指定

一個連網(wǎng)專用號碼，這個號碼就是“IP 地址”。

IPv4 地址是一個 32 位的二進制數(shù)，通常被分割為 4 個“8 位二進制數(shù)”（也就是 4

個字節(jié)）。IP 地址通常用“點分十進制”表示成（a.b.c.d）的形式，其中，a,b,c,d 都是 0

到 255 之間的十進制整數(shù)。如：點分十進制 IP 地址 192.168.1.1，實際上是 32 位二進制

數(shù) 11000110.10101000.00000001.00000001。

2．IP 地址編址方案

根據(jù) IP 地址的概念可知，IPv4 地址的范圍用點分十進制可表示為 0.0.0.0 到

255.255.255.255，一共有 232 個 IP 地址。為了有效地利用這些 IP 地址資源，相關(guān)機構(gòu)制

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 7

定了 IP 地址編址方案，將 IP 地址分成了網(wǎng)絡(luò)號和主機號兩部分，設(shè)計者就必須決定每部

分包含多少位。網(wǎng)絡(luò)號的位數(shù)直接決定了可以分配的網(wǎng)絡(luò)數(shù)（計算方法：2 網(wǎng)絡(luò)號位數(shù)-2）；

主機號的位數(shù)則決定了網(wǎng)絡(luò)中最大的主機數(shù)（計算方法：2 主機號位數(shù)

-2）。然而，由于整個

互聯(lián)網(wǎng)所包含的網(wǎng)絡(luò)規(guī)?？赡鼙容^大，也可能比較小，最后選擇了一種靈活的方案：將

IP 地址空間劃分成不同的類別，每一類具有不同的網(wǎng)絡(luò)號位數(shù)和主機號位數(shù)，即將 IP 地

址空間劃分為了 A、B、C、D、E 五類，其中 A、B、C 是基本類，D、E 類作為多播和保

留使用。

（1）A 類 IP 地址

一個 A 類 IP 地址是指，在 IP 地址的四段號碼中，第一段號碼為網(wǎng)絡(luò)號碼，剩下的

三段號碼為本地計算機的號碼。如果用二進制表示 IP 地址的話，A 類 IP 地址就由 1 字節(jié)

的網(wǎng)絡(luò)地址和 3 字節(jié)主機地址組成，同時網(wǎng)絡(luò)地址的最高位必須是“0”。A 類 IP 地址中

網(wǎng)絡(luò)的標(biāo)識長度為 8 位，主機標(biāo)識的長度為 24 位，A 類網(wǎng)絡(luò)地址數(shù)量較少，有 126 個網(wǎng)

絡(luò) ， 每 個網(wǎng)絡(luò)可以 容納主 機 數(shù) 達 1 600 多 萬 臺 。 A 類 IP 地 址 范 圍 為 1.0.0.0 到

126.255.255.255。最后一個是廣播地址。A 類 IP 地址的子網(wǎng)掩碼為 255.0.0.0，每個網(wǎng)絡(luò)

支持的最大主機數(shù)為 2563

-2=16 777 214 臺。

（2）B 類 IP 地址

一個 B 類 IP 地址是指，在 IP 地址的四段號碼中，前兩段號碼為網(wǎng)絡(luò)號碼。如果用

二進制表示 IP 地址的話，B 類 IP 地址就由 2 字節(jié)的網(wǎng)絡(luò)地址和 2 字節(jié)主機地址組成，網(wǎng)

絡(luò)地址的最高位必須是“10”。B 類 IP 地址中網(wǎng)絡(luò)的標(biāo)識長度為 16 位，主機標(biāo)識的長度

也為 16 位，B 類網(wǎng)絡(luò)地址適用于中等規(guī)模的網(wǎng)絡(luò)，有 16 384 個網(wǎng)絡(luò)，每個網(wǎng)絡(luò)所能容納

的計算機數(shù)為 6 萬多臺。B 類 IP 地址范圍從 128.0.0.0 到 191.255.255.255。最后一個是廣

播 地 址 。 B 類 IP 地 址 的 子 網(wǎng) 掩 碼 為 255.255.0.0 ， 每 個網(wǎng)絡(luò) 支 持 的 最 大 主 機數(shù)為

2562

-2=65 534 臺。

（3）C 類 IP 地址

一個 C 類 IP 地址是指，在 IP 地址的四段號碼中，前三段號碼為網(wǎng)絡(luò)號碼，剩下的

一段號碼為本地計算機的號碼。如果用二進制表示 IP 地址，C 類 IP 地址就由 3 字節(jié)的網(wǎng)

絡(luò)地址和 1 字節(jié)主機地址組成，網(wǎng)絡(luò)地址的最高位必須是“110”。C 類 IP 地址中網(wǎng)絡(luò)的

標(biāo)識長度為 24 位，主機標(biāo)識的長度為 8 位，C 類網(wǎng)絡(luò)地址數(shù)量較多，有 209 萬余個網(wǎng)絡(luò)。

適用于小規(guī)模的局域網(wǎng)絡(luò)，每個網(wǎng)絡(luò)最多只能包含 254 臺計算機。C 類 IP 地址范圍為

192.0.0.0 到 223.255.255.255。C 類 IP 地址的子網(wǎng)掩碼為 255.255.255.0，每個網(wǎng)絡(luò)支持的

最大主機數(shù)為 256-2=254 臺。

（4）D 類 IP 地址

D 類 IP 地址在歷史上被叫作多播地址（Multicast Address），即組播地址。在以太網(wǎng)

8 網(wǎng)頁制作教程

中，多播地址命名了一組應(yīng)該在這個網(wǎng)絡(luò)中接收到一個分組的站點。多播地址的最高位

必須是“1110”，范圍從 224.0.0.0到239.255.255.255。

（5）E 類 IP 地址

IP 地址中凡是以“11110”開頭的 E 類 IP 地址都保留用于將來和實驗使用，范圍從

240.0.0.0 到 255.255.255.254。

表 1-1 所示為 IP 地址各類別網(wǎng)絡(luò)數(shù)和主機數(shù)列表。

表 1-1 IP 地址各類別網(wǎng)絡(luò)數(shù)和主機數(shù)列表

IP 地址分類 第一字節(jié)范圍 固定最高位 網(wǎng)絡(luò)位 網(wǎng)絡(luò)數(shù) 主機位 主機數(shù)

A 0～127 0 8 126 24 16 777 214

B 128~191 10 16 16 384 16 65 534

C 192~223 110 24 2 097 152 8 254

D 224~239 1110 組播地址

E 240～255 11110 保留給實驗用

（6）特殊 IP 和私有 IP

每一個字節(jié)都為0的地址（0.0.0.0）對應(yīng)于當(dāng)前主機。IP 地址中的每一個字節(jié)都為 1

的 IP 地址（255.255.255.255）是當(dāng)前子網(wǎng)的廣播地址。IP 地址中不能以十進制“127”作

為開頭，該類地址中數(shù)字 127.0.0.1 到 127.255.255.255 用于回路測試，如：126.0.0.1 可以

代表本機 IP 地址，用“http://126.0.0.1”就可以測試本機中配置的 Web 服務(wù)器。

在 IP 地址 3 種基本類型里，各保留了 3 個區(qū)域作為私有地址，其地址范圍如下：

① A類地址：10.0.0.0～10.255.255.255

② B 類地址：172.16.0.0～172.31.255.255

③ C 類地址：192.168.0.0～192.168.255.255

這些私有 IP 地址只能在某個機構(gòu)或單位內(nèi)部使用，無法通過網(wǎng)際路由與遠程的主機

進行連接通信。

3．下一代 IP 地址：IPv6

現(xiàn)有的互聯(lián)網(wǎng)是在 IPv4 協(xié)議的基礎(chǔ)上運行的。IPv6 是下一版本的互聯(lián)網(wǎng)協(xié)議，也

可以說是下一代互聯(lián)網(wǎng)的協(xié)議，它的提出最初是因為隨著互聯(lián)網(wǎng)的迅速發(fā)展，IPv4 定

義的有限地址空間將被耗盡，而地址空間的不足必將妨礙互聯(lián)網(wǎng)的進一步發(fā)展。為了

擴大地址空間，擬通過 IPv6 重新定義地址空間。IPv4 采用 32 位地址長度，只有大約

43 億個地址，在 2011 年 2 月 3 日 IPv4 已分配完畢，而 IPv6 采用 128 位地址長度，幾

乎可以不受限制地提供地址。按保守方法估算 IPv6 實際可分配的地址，整個地球的每

平方米面積上仍可分配 1 000 多個地址。在 IPv6 的設(shè)計過程中除解決了地址短缺問題

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 9

以外，還考慮了在 IPv4 中解決不好的其他一些問題，主要有端到端 IP 連接、服務(wù)質(zhì)

量、安全性、多播、移動性、即插即用等。

與 IPv4 相比，IPv6 主要有如下一些優(yōu)勢。第一，明顯地擴大了地址空間。IPv6 采用

128 位地址長度，幾乎可以不受限制地提供 IP 地址，從而確保了端到端連接的可能性。

第二，提高了網(wǎng)絡(luò)的整體吞吐量。由于 IPv6 的數(shù)據(jù)包可以遠遠超過 64 KB，應(yīng)用程序可

以利用最大傳輸單元，獲得更快、更可靠的數(shù)據(jù)傳輸，同時在設(shè)計上改進了選路結(jié)構(gòu)，

采用簡化的報頭定長結(jié)構(gòu)和更合理的分段方法，使路由器加快數(shù)據(jù)包處理速度，提高了

轉(zhuǎn)發(fā)效率，從而提高網(wǎng)絡(luò)的整體吞吐量。第三，使得整個服務(wù)質(zhì)量得到很大改善。報頭

中的業(yè)務(wù)級別和流標(biāo)記通過路由器的配置可以實現(xiàn)優(yōu)先級控制和服務(wù)質(zhì)量保障，從而極

大地改善了 IPv6 的服務(wù)質(zhì)量。第四，安全性有了更好的保證。采用網(wǎng)際協(xié)議安全（IPSec）

可以為上層協(xié)議和應(yīng)用提供有效的端到端的安全保證，能提高在路由器水平上的安全性。

第五，支持即插即用和移動性。設(shè)備接入網(wǎng)絡(luò)時通過自動配置可自動獲取 IP 地址和必要

的參數(shù)，實現(xiàn)即插即用，簡化了網(wǎng)絡(luò)管理，易于支持移動結(jié)點。而且 IPv6 不僅從 IPv4 中

借鑒了許多概念和術(shù)語，它還定義了許多移動 IPv6 所需的新功能。第六，更好地實現(xiàn)了

多播功能。在 IPv6 的多播功能中增加了“范圍”和“標(biāo)志”，限定了路由范圍和可以區(qū)分

永久性與臨時性地址，更有利于多播功能的實現(xiàn)。

隨著互聯(lián)網(wǎng)的飛速發(fā)展和互聯(lián)網(wǎng)用戶對服務(wù)水平要求的不斷提高，IPv6 在全球?qū)?/p>

會越來越受到重視。但實際上，目前并不急于推廣 IPv6，只需在現(xiàn)有的 IPv4 基礎(chǔ)上

將 32 位擴展 8 位到 40 位，即可解決 IPv4 地址不夠的問題，這樣一來可用地址數(shù)就擴

大了 256 倍。

1.2.2 DNS 域名系統(tǒng)

互聯(lián)網(wǎng)中的主機都擁有一個自己的 32 位二進制 IP 地址，雖然用點分十進制法

進行了簡化， 類似 210.31.1.10，但這還是 不容易記住。 如果能夠用一個具有 一定意

義的名字來表示該 IP 主機，那就比較方 便記憶了 。正如我們每個 人都有唯一的身份

證號碼一樣，我們一般不去記憶這 些號碼，而是記住這個人的姓名，若想知道某個

人的身份證號碼，則可以通過一套戶籍管理系統(tǒng)來查詢姓名和 身份證號碼之間的對

應(yīng)關(guān)系。在互聯(lián)網(wǎng)中，也建立了 一套這樣的系統(tǒng)，建立主機名和其 IP 之間的對應(yīng)關(guān)

系，由此便產(chǎn)生 了域名服務(wù)系統(tǒng)（Domain Name Service），域名就 是指主機在互聯(lián)網(wǎng)

中 的名稱。

互聯(lián)網(wǎng)上的域名就相當(dāng)于現(xiàn)實生活中的門牌號碼一樣，可以在紛繁蕪雜的網(wǎng)絡(luò)世界

里準確無誤地把我們指引到要訪問的站點。在互聯(lián)網(wǎng)發(fā)展之初并沒有域名，有的只是 IP

地址。由于當(dāng)時互聯(lián)網(wǎng)主要應(yīng)用在科研領(lǐng)域，使用者非常少，所以記憶這樣的數(shù)字并不

10 網(wǎng)頁制作教程

是非常困難。但是隨著時間的推移，連入互聯(lián)網(wǎng)的計算機越來越多，需要記憶的 IP 地址

也越來越多，記憶這些數(shù)字串變得越來越困難，于是域名應(yīng)運而生。域名就是對應(yīng)于 IP

地 址 的用于在互聯(lián)網(wǎng)上 標(biāo) 識機器的有 意 義 的 字 符 串 。 例 如 CNNIC 的 域 名

WWW.CNNIC.NET.CN，比起 IP 地址而言就更形象，也更容易記憶。

為了便于大家進一步了解域名的實質(zhì)，有必要在這里談?wù)動蛎捏w系結(jié)構(gòu)。從

WWW.CNNIC.NET.CN 這個域名來看，它是由幾個不同的部分組成的，這幾個部分彼此

之間具有層次關(guān)系。其中最后的.CN 是域名的第一層，.NET 是第二層，.CNNIC 是真正

的域名，處在第三層，當(dāng)然還可以有第四層，如：INNER.CNNIC.NET.CN，至此可以看

出，域名從后到前的層次結(jié)構(gòu)類似于一個倒立的樹形結(jié)構(gòu)。其中第一層的.CN 叫做地理

頂級域名。

目前互聯(lián)網(wǎng)上的域名體系中共有三類頂級域名。

一 是地理頂級域名，共有 243 個國家和地區(qū)的 代碼，例如.CN 代表中國，.JP 代

表日本，.UK 代表英國等。

另一類是類別頂級域名，共有 7 個 ，.COM（公司），.NET（網(wǎng)絡(luò)機構(gòu)），.ORG

（ 組織機構(gòu)），.EDU（美國教育），.GOV（美國政府部門），.ARPA（美國軍方），.INT

（國際組織）。由于互聯(lián)網(wǎng)最初是在美國發(fā)展起來的，所以最初 的域名體系也主要供

美國使用，所以.GOV，.EDU，.ARPA 雖然都是頂級域名，但卻是美國使用的，只

有.COM，.NET，.ORG 成 為供全球使用的頂級域名。 相對于地理頂級域名來說， 這

些頂級域名都是根據(jù)不同的類別來區(qū)分的 ，所以稱之為類別頂級域名。

隨著互聯(lián)網(wǎng)的不斷發(fā)展，新的頂級域名也根據(jù)實際需要不斷被擴充到現(xiàn)有的域名體

系中來。新增加的頂級域名是.BIZ（商業(yè)），.COOP（合作公司），.INFO（信息行業(yè)），.AERO

（航空業(yè)），.PRO（專業(yè)人士），.MUSEUM（博物館行業(yè)），.NAME（個人）。

在這些頂級域名下，還可以再根據(jù)需要定義次一級的域名，如在我國的頂級域名.CN

下又設(shè)立了.COM，.NET，.ORG，.GOV，.EDU，以及我國各個行政區(qū)劃的字母代表，如.BJ

代表北京，.SH 代表上海等。

圖 1-2 所示為國際域名結(jié)構(gòu)示意圖。

實際上，DNS 是一種能夠?qū)崿F(xiàn)名字解析的分層結(jié)構(gòu)數(shù)據(jù)庫系統(tǒng)，它有各基本組成部

分：域名空間、域名服務(wù)器和地址轉(zhuǎn)換請求程序。所謂域名服務(wù)器實際上就是裝有域名

系統(tǒng)的主機。當(dāng)域名服務(wù)器收到本地某臺主機發(fā)來的地址轉(zhuǎn)換請求時，先判斷該地址是

否屬于本地子域，若是本地子域的域名，則直接從庫中取出對應(yīng)地址，否則，將地址轉(zhuǎn)

換請求轉(zhuǎn)給上一層域名服務(wù)器，并接收上一層域名服務(wù)器送來的對應(yīng)地址。有了域名服

務(wù)系統(tǒng)，凡是域名空間中有定義的域名，都可以有效地轉(zhuǎn)換為 IP 地址。同樣，IP 地址也

可以通過 DNS 轉(zhuǎn)換為域名。

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 11

圖 1-2 國際域名結(jié)構(gòu)示意圖

1.2.3 瀏覽器

對于瀏覽器，相信大家都不會陌生，只要有上網(wǎng)經(jīng)歷的朋友都應(yīng)該使用過某種瀏覽

器。瀏覽器是指可以顯示由 HTML 編寫的網(wǎng)頁文件，并讓用戶與這些文件交互的一種軟

件，它是萬維網(wǎng)最重要的客戶端軟件。

大部分瀏覽器支持除了 HTML 之外的各種格式，例如 JPEG、PNG、GIF 等圖像格式，

并且能夠擴展支持眾多的插件（plug-ins）。另外，許多瀏覽器還支持其他的 URL 類型

及其相應(yīng)的協(xié)議，如 FTP、Gopher、HTTPS（HTTP 協(xié)議的加密版本）。HTTP 內(nèi)容類型

和 URL 協(xié)議規(guī)范允許網(wǎng)頁設(shè)計者在網(wǎng)頁中嵌入圖像、動畫、視頻、聲音、流媒體等。

進入 21 世紀，隨著互聯(lián)網(wǎng)的發(fā)展，瀏覽器作為互聯(lián)網(wǎng)的入口，已經(jīng)成為各大軟件巨

頭的必爭之地，競爭十分激烈。國內(nèi)網(wǎng)民計算機上常見的網(wǎng)頁瀏覽器有 Internet Explorer、

Google Chrome、Firefox、360 瀏覽器、QQ 瀏覽器、Safari、Opera、百度瀏覽器、搜狗瀏覽

器、獵豹瀏覽器、UC 瀏覽器、傲游瀏覽器、世界之窗瀏覽器等，瀏覽器是最經(jīng)常使用到

的客戶端程序。以下就幾種主要的瀏覽器進行簡要介紹。

（1）Internet Explorer

Internet Explorer（IE）是微軟操作系統(tǒng)捆綁的軟件之一，大多數(shù)網(wǎng)民都在使用 IE，

這要感謝它對 Web 站點強大的兼容性。最新版本的 Internet Explorer 包括 Metro 界面、

HTML5、CSS3 以及大量的安全更新。

（2）Chrome

Chrome 是由 Google 公司開發(fā)的網(wǎng)頁瀏覽器，瀏覽速度在眾多瀏覽器中走在前列，屬

…

根域名服務(wù)

地理頂級域 類別頂級域 新增頂級域

類別域名 行政區(qū)域名

.us .cn … .com .net … …

.com .net .BJ .SH …

.BIZ .IN

12 網(wǎng)頁制作教程

于高端瀏覽器。Chrome 采用 BSD 許可證授權(quán)并開放源代碼，開源計劃名為 Chromium。

Chrome 瀏覽器已經(jīng)成為網(wǎng)民最喜歡使用的瀏覽器之一。

（3）Firefox

Mozilla Firefox（火狐瀏覽器）目前是市場占有率第三的瀏覽器，僅次于微軟的 Internet

Explorer 和 Google 的 Chrome。最新版的 Firefox 新增了類型推斷，再次大幅提高了

JavaScript 引擎的渲染速度，使得很多富含圖片、視頻、游戲以及 3D 圖片的富網(wǎng)站和網(wǎng)

絡(luò)應(yīng)用能夠更快地加載和運行。

（4）Opera

Opera 瀏覽器，是一款由挪威 Opera Software ASA 公司制作的支持多頁面標(biāo)簽式瀏覽

的跨平臺瀏覽器，可以在 Windows、Mac 和 Linux 三個操作系統(tǒng)平臺上運行。Opera 瀏覽

器創(chuàng)始于 1995 年 4 月，到 2015 年 1 月 28 日，官方發(fā)布的個人計算機用的最新版本為

Opera 27。

（5）360 瀏覽器

360 瀏覽器（360 Browser）是 360 安全中心推出的一款基于 IE 和 Chrome 雙內(nèi)核的瀏

覽器，是世界之窗開發(fā)者鳳凰工作室和 360 安全中心合作的產(chǎn)品。它和 360 安全衛(wèi)士、

360 殺毒等軟件產(chǎn)品一同成為 360 安全中心的系列產(chǎn)品。360 安全瀏覽器擁有全國最大的

惡意網(wǎng)址庫，采用惡意網(wǎng)址攔截技術(shù)，可自動攔截掛馬、欺詐、網(wǎng)銀仿冒等惡意網(wǎng)址。

其獨創(chuàng)沙箱技術(shù)，在隔離模式，即使訪問木馬也不會感染。

（6）QQ 瀏覽器

QQ 瀏覽器（QQ Browser）是一款采用 Trident 和 Webkit 雙引擎的網(wǎng)頁瀏覽器。QQ 瀏

覽器是一款由騰訊公司自主研發(fā)的新一代瀏覽器，采用單核模式，集超小安裝包和超強

穩(wěn)定性于一身，訪問網(wǎng)頁速度也得到進一步優(yōu)化。正式外發(fā)版將智能支持 IE 內(nèi)核，有效

提升網(wǎng)頁兼容性，減少系統(tǒng)漏洞。其目的是為用戶打造一款快速、穩(wěn)定、安全、網(wǎng)絡(luò)化

的優(yōu)質(zhì)瀏覽器。目前其最新版本為 8.1。

（7）傲游瀏覽器

傲游瀏覽器（Maxthon Browser）基于 IE 內(nèi)核，并在其之上有創(chuàng)新，其插件比 IE 更

豐富。

1.2.4 Web 服務(wù)器

Web 服務(wù)器是指安裝在 Internet 上具有獨立 IP 地址的計算機中，并可以向 Internet

上的客戶端提供 WWW、E-mail 和 FTP 等各種 Internet 服務(wù)的服務(wù)器端軟件，它能為客戶

端用戶的請求提供所需文檔。當(dāng) Web 瀏覽器（客戶端）連到服務(wù)器上并請求文件時，Web

服務(wù)器將處理該請求并將文件反饋到該瀏覽器上，附帶的信息會告訴瀏覽器如何查看該

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 13

文件（即文件類型）。Web 服務(wù)器使用 HTTP 與客戶機瀏覽器進行信息交流。

在 UNIX 和 Linux 平臺下使用最廣泛的免費 Web 服務(wù)器是 Apache和Nginx 服務(wù)器，

而 Windows 平臺 NT/2000/2003 使用 IIS 的 Web 服務(wù)器。在選擇 Web 服務(wù)器時應(yīng)考慮的本

身特性因素有：性能、安全性、日志和統(tǒng)計、虛擬主機、代理服務(wù)器、緩沖服務(wù)和集成

應(yīng)用程序等，下面介紹幾種常用的 Web 服務(wù)器。

（1）IIS

Microsoft 的 Web 服務(wù)器產(chǎn)品為 Internet Information Services（IIS）。IIS 是允許在公共

Intranet 或 Internet 上發(fā)布信息的 Web 服務(wù)器。IIS 是目前最流行的 Web 服務(wù)器產(chǎn)品之一，

很多著名的網(wǎng)站都是建立在 IIS 的平臺上。IIS 提供了一個圖形界面的管理工具，稱為

Internet 服務(wù)管理器，可用于監(jiān)視、配置和控制 Internet 服務(wù)。

IIS 是一種 Web 服務(wù)組件，其中包括 Web 服務(wù)器、FTP 服務(wù)器、NNTP 服務(wù)器和 SMTP

服務(wù)器，分別用于網(wǎng)頁瀏覽、文件傳輸、新聞服務(wù)和郵件發(fā)送等方面，它使得在網(wǎng)絡(luò)（包

括互聯(lián)網(wǎng)和局域網(wǎng)）上發(fā)布信息成了一件很容易的事。它提供 ISAPI（Intranet Server API）

作為擴展 Web 服務(wù)器功能的編程接口；同時，它還提供一個 Internet 數(shù)據(jù)庫連接器，可

以實現(xiàn)對數(shù)據(jù)庫的查詢和更新。

（2）Apache

Apache 是世界上用得最多的 Web 服務(wù)器，市場占有率達 60%左右。它源于 NCSAhttpd

服務(wù)器，當(dāng) NCSA WWW 服務(wù)器項目停止后，那些使用 NCSA WWW 服務(wù)器的人們開始交

換用于此服務(wù)器的補丁，這也是 apache 名稱的由來。世界上很多著名的網(wǎng)站都是 Apache

的產(chǎn)物，它的成功之處主要在于它的源代碼開放、支持跨平臺的應(yīng)用（可以運行在幾乎

所有的 UNIX、Windows、Linux 系統(tǒng)平臺上）以及它的可移植性等方面。

（3）Tomcat

Tomcat 是一個開放源代碼、運行 Servlet 和 JSP Web 應(yīng)用軟件的基于 Java 的 Web 應(yīng)

用軟件容器。Tomcat Server 是根據(jù) Servlet 和 JSP 規(guī)范進行執(zhí)行的，因此就可以說 Tomcat

Server 也實行了 Apache-Jakarta 規(guī)范，且比絕大多數(shù)商業(yè)應(yīng)用軟件服務(wù)器要好。

（4）kangle

kangle Web 服務(wù)器（簡稱：kangle）是一款跨平臺、功能強大、安全穩(wěn)定、易操作的

高性能 Web 服務(wù)器和反向代理服務(wù)器軟件。此外，kangle 也是一款專為做虛擬主機研發(fā)

的 Web 服務(wù)器。實現(xiàn)虛擬主機獨立進程、獨立身份運行。用戶之間安全隔離，一個用戶

出問題不影響其他用戶。安全支持 PHP、ASP、ASP.NET、Java、Ruby 等多種動態(tài)開發(fā)

語言。

（5）WebSphere

WebSphere Application Server 是一種功能完善、開放的 Web 應(yīng)用程序服務(wù)器，是 IBM

14 網(wǎng)頁制作教程

電子商務(wù)計劃的核心部分，它是基于 Java 的應(yīng)用環(huán)境，用于建立、部署和管理 Internet

和 Intranet Web 應(yīng)用程序。這一整套產(chǎn)品進行了擴展，以適應(yīng) Web 應(yīng)用程序服務(wù)器的需

要，范圍從簡單到高級，直到企業(yè)級。

（6）WebLogic

BEA WebLogic Server 是一種多功能、基于標(biāo)準的 Web 應(yīng)用服務(wù)器，為企業(yè)構(gòu)建自己

的應(yīng)用提供了堅實的基礎(chǔ)。各種應(yīng)用開發(fā)、部署所有關(guān)鍵性的任務(wù)，無論是集成各種系統(tǒng)

和數(shù)據(jù)庫，還是提交服務(wù)、跨 Internet 協(xié)作，起始點都是 BEA WebLogic Server。由于它

具有全面的功能、對開放標(biāo)準的遵從性、多層架構(gòu)、支持基于組件的開發(fā)，基于 Internet

的企業(yè)都選擇它來開發(fā)、部署最佳的應(yīng)用。

（7）JBoss

是一個基于 Java EE 的開放源代碼的應(yīng)用服務(wù)器。JBoss 代碼遵循 LGPL 許可，可以

在任何商業(yè)應(yīng)用中免費使用，而不用支付費用。JBoss 是一個管理 EJB 的容器和服務(wù)器，

支持 EJB 1.1、EJB 2.0和EJB 3 的規(guī)范。但 JBoss 核心服務(wù)不包括支持 Servlet/JSP 的 Web

容器，一般與 Tomcat 或 Jetty 綁定使用。

1.3 網(wǎng)頁設(shè)計的基礎(chǔ)知識

1.3.1 網(wǎng)頁的基本特征

網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁，各有各的特征，在 Web 出現(xiàn)的早期，網(wǎng)站以靜態(tài)頁

面為主，現(xiàn)在隨著互聯(lián)網(wǎng)的發(fā)展和網(wǎng)站設(shè)計技術(shù)的提高，動態(tài)頁面已經(jīng)成為網(wǎng)站的主流。

1．靜態(tài)網(wǎng)頁概述

靜態(tài)網(wǎng)頁的網(wǎng)址形式通常是以.htm、.html、.shtml、.xml 等為擴展名的。靜態(tài)網(wǎng)頁，

一般來說是最簡單的 HTML 網(wǎng)頁，服務(wù)器端和客戶端是一樣的，而且沒有腳本和小程序，

所以它的內(nèi)容是固定的。在 HTML 格式的網(wǎng)頁上，也可以出現(xiàn)各種動態(tài)的效果，如.GIF

格式的動畫、Flash、滾動字母等，這些“動態(tài)效果”只是視覺上的，與下面將要介紹的

動態(tài)網(wǎng)頁是不同的概念。

2．靜態(tài)網(wǎng)頁的特點

① 靜態(tài)網(wǎng)頁每個網(wǎng)頁都有一個固定的 URL，且網(wǎng)頁 URL 以.htm、.html、.shtml 等常

見形式為擴展名，一般不出現(xiàn)“？”字符。

② 網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到 Web 服務(wù)器上，無論是否有用戶訪問，每個靜態(tài)網(wǎng)頁的內(nèi)容

都是保存在 Web 服務(wù)器上的，也就是說，靜態(tài)網(wǎng)頁是實實在在保存在服務(wù)器上的文件，

每個網(wǎng)頁都是一個獨立的文件。

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 15

③ 靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索。

④ 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護方面工作量較大，因此當(dāng)網(wǎng)站信

息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難。

⑤ 靜態(tài)網(wǎng)頁的交互性差，在功能方面有較大的限制。

3．動態(tài)網(wǎng)頁概述

動態(tài)網(wǎng)頁是以.asp、.jsp、.php、.perl、.cgi 等形式為擴展名，并且在很多動態(tài)網(wǎng)頁網(wǎng)

址中有一個標(biāo)志性的符號——“?”。動態(tài)網(wǎng)頁與網(wǎng)頁上的各種動畫、滾動字幕等視覺上的

“動態(tài)效果”沒有直接關(guān)系，動態(tài)網(wǎng)頁也可以是純文字內(nèi)容的，也可以是包含各種動畫的

內(nèi)容，這些只是網(wǎng)頁具體內(nèi)容的表現(xiàn)形式，無論網(wǎng)頁是否具有動態(tài)效果，采用動態(tài)網(wǎng)站

技術(shù)生成的網(wǎng)頁都稱為動態(tài)網(wǎng)頁。動態(tài)網(wǎng)站也可以采用靜動結(jié)合的原則，適合采用動態(tài)

網(wǎng)頁的地方用動態(tài)網(wǎng)頁，如果有必要使用靜態(tài)網(wǎng)頁，則可以考慮用靜態(tài)網(wǎng)頁的方法來實

現(xiàn)，在同一個網(wǎng)站上，動態(tài)網(wǎng)頁內(nèi)容和靜態(tài)網(wǎng)頁內(nèi)容同時存在也是很常見的事情。

4．動態(tài)網(wǎng)頁特點

① 交互性：即網(wǎng)頁會根據(jù)用戶的要求和選擇而動態(tài)改變和響應(yīng)。例如訪問者在網(wǎng)頁

填寫表單信息并提交，服務(wù)器經(jīng)過處理將信息自動存儲到后臺數(shù)據(jù)庫中，并打開相應(yīng)提

示頁面。

② 自動更新：即無須手動操作，便會自動生成新的頁面，可以大大節(jié)省工作量。例

如，在論壇中發(fā)布信息，后臺服務(wù)器將自動生成新的網(wǎng)頁。

③ 隨機性：即當(dāng)不同的時間、不同的人訪問同一網(wǎng)址時會產(chǎn)生不同的頁面效果。

④ 動態(tài)網(wǎng)頁中的“?”對搜索引擎檢索存在一定的問題，搜索引擎一般不可能從一

個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，或者出于技術(shù)方面的考慮，搜索蜘蛛不去抓取網(wǎng)址中

“?”后面的內(nèi)容，因此采用動態(tài)網(wǎng)頁的網(wǎng)站在進行搜索引擎推廣時需要做一定的技術(shù)處

理才能適應(yīng)搜索引擎的要求。

靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁各有特點，網(wǎng)站采用動態(tài)網(wǎng)頁還是靜態(tài)網(wǎng)頁主要取決于網(wǎng)站的

功能需求和網(wǎng)站內(nèi)容的多少，如果網(wǎng)站功能比較簡單，內(nèi)容更新量不是很大，采用純靜

態(tài)網(wǎng)頁的方式會更簡單，如果網(wǎng)站功能復(fù)雜的話，最好采用動態(tài)網(wǎng)頁技術(shù)來實現(xiàn)。

1.3.2 網(wǎng)頁的基本構(gòu)成元素

網(wǎng)頁由文本、圖像、動畫、超鏈接等基本元素構(gòu)成，本小節(jié)將對這些基本元素進行

簡單介紹，為后面各章中運用這些元素制作網(wǎng)頁奠定基礎(chǔ)。

1．文本

網(wǎng)頁中的信息主要是以文本為主的。在網(wǎng)頁中可以通過字體、大小、顏色、底紋、

16 網(wǎng)頁制作教程

邊框等來設(shè)置文本的屬性。這里指的文字是文本文字，而并非圖片中的文字。在網(wǎng)頁制

作中，文字可以方便地設(shè)置成各種字體和大小，但是這里還是建議用于正文的文字一般

不要太大，也不要使用太多的字體，中文字體使用宋體，9 磅或 12 像素左右即可。因為

過大的字在顯示器中顯示時，線條不夠平滑。顏色也不要使用得太過斑駁，以免造成丑

女濃妝艷抹的惡俗效果。大段文本文字的排列，建議參考一些優(yōu)秀的雜志或報紙。

2．圖像

今天看到的豐富多彩的網(wǎng)頁，都是因為有了圖像，可見圖像在網(wǎng)頁中的重要性。用

于網(wǎng)頁中的圖片一般為 JPG 和 GIF 格式的，即以.jpg（或.jpeg）和.gif 為擴展名的文件。

3．超鏈接

超鏈接是網(wǎng)站的靈魂，從一個網(wǎng)頁指向另一個目的端的鏈接。例如指向另一個網(wǎng)頁

或相同網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但也可以是一幅圖片、一個

電子郵件地址、一個文件、一個程序或者是本頁中的其他位置。超鏈接廣泛地存在于網(wǎng)

頁的圖片和文字中，提供與圖片和文字相關(guān)內(nèi)容的鏈接，在超鏈接上單擊，即可鏈接到

相應(yīng)地址（URL）的網(wǎng)頁。有鏈接的地方，鼠標(biāo)指針會變成小手形狀?？梢哉f超鏈接正

是 Web 的主要特色。

4．表格

表格是網(wǎng)頁排版的靈魂。使用表格排版是網(wǎng)頁的主要制作形式。通過表格可以精確

地控制各網(wǎng)頁元素在網(wǎng)頁中的位置。表格并非指網(wǎng)頁中直觀意義的表格，范圍要更廣一

些。它是 HTML 語言中的一種元素，表格主要用于網(wǎng)頁內(nèi)容的排列，組織整個網(wǎng)頁的外

觀，通過在表格中放置相應(yīng)的圖片或其他內(nèi)容，即可有效地組合成符合設(shè)計效果的頁面。

有了表格的存在，網(wǎng)頁中的元素得以方便地固定在設(shè)計的位置上。一般表格的邊線不在

網(wǎng)頁中顯示。

5．表單

表單是用來收集網(wǎng)站訪問者信息的域集。網(wǎng)站訪問者填寫表單的方式是輸入文本、

單擊單選按鈕與復(fù)選框，以及從下拉菜單中選擇選項。在填寫好表單之后，網(wǎng)站訪問者

便送出所輸入的數(shù)據(jù)，該數(shù)據(jù)就會根據(jù)所設(shè)置的表單處理程序，以各種不同的方式進行

處理。

6．GIF 動畫

動畫是網(wǎng)頁上最活躍的元素，通常制作優(yōu)秀、創(chuàng)意出眾的動畫是吸引瀏覽者的最有

效的方法。不過現(xiàn)在的網(wǎng)頁往往不是缺乏動畫，而是太多動畫讓人眼花繚亂，無心細看。

這就對動畫制作的要求越來越高。動畫制作的手段有很多，技術(shù)發(fā)展也很快。盡管各種

形式的動畫使用形式不一。GIF 動畫的標(biāo)準簡單，在各種類、各版本的瀏覽器中都能播放。

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 17

7．Flash 動畫

Macromedia 的 Flash 雖然出現(xiàn)時間不長，但已經(jīng)成為最主要的 Web 動畫形式之一。Flash

不僅比 DHTML 易學(xué)得多，而且有很多重要的動畫特征，如關(guān)鍵幀、運動路徑、動畫蒙版、

形狀變形和洋蔥皮等。利用這個多才多藝的程序，不僅可以建立 Flash 電影，而且可以把

動畫輸出為 QuickTime 文件、GIF 文件或其他許多不同的文件格式（JPEG、PNG 等）。

8．框架

框架是網(wǎng)頁的一種組織形式，將相互關(guān)聯(lián)的多個網(wǎng)頁的內(nèi)容組織在一個瀏覽器窗口

中顯示。例如可以在一個框架內(nèi)放置導(dǎo)航欄，另一個框架中的內(nèi)容可以隨著單擊導(dǎo)航欄

中的鏈接而改變，這樣只要制作一個導(dǎo)航欄的網(wǎng)頁即可，而不必將導(dǎo)航欄的內(nèi)容復(fù)制到

各欄目的網(wǎng)頁中去。

網(wǎng)頁中除了這些最基本的元素，還包括橫幅廣告、字幕、懸停按鈕、日戳、計數(shù)器、

音頻、視頻等元素。

1.3.3 網(wǎng)頁設(shè)計的基本原則

網(wǎng)頁設(shè)計中要遵循哪些基本原則呢？怎樣才能設(shè)計出一個合格的網(wǎng)頁？我們知道，

設(shè)計的個性化表現(xiàn)得非常明顯，每個設(shè)計師都有著自己的設(shè)計理念，而用戶也有著自己

的需求，因而這兩者經(jīng)常會出現(xiàn)沖突。因此，網(wǎng)頁設(shè)計中要遵循一定的原則。下面是一

些網(wǎng)站設(shè)計中應(yīng)注意的原則。

1．明確建立網(wǎng)站的目標(biāo)和用戶需求

Web 站點的設(shè)計必須體現(xiàn)用戶的需求。如企業(yè)用戶，網(wǎng)站需要展現(xiàn)企業(yè)形象、產(chǎn)品

介紹和服務(wù)內(nèi)容，體現(xiàn)企業(yè)發(fā)展戰(zhàn)略等內(nèi)容，因此必須明確設(shè)計站點的目的和用戶需求，

從而做出切實可行的設(shè)計計劃。根據(jù)用戶的需求、市場的狀況、企業(yè)自身的情況等進行

綜合分析，網(wǎng)站建設(shè)必須以“用戶”為中心，而不是以“設(shè)計者”為中心進行網(wǎng)站設(shè)計

和規(guī)劃。

2．網(wǎng)頁設(shè)計總體方案主題鮮明

在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和

特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。Web 站點應(yīng)針對所服務(wù)對象的不同而具有不同的

形式。有些站點只提供簡潔文本信息，有些則須采用多媒體表現(xiàn)手法，提供華麗的圖像、

閃爍的動畫、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的 Web 站點把圖形表

現(xiàn)手法和有效的組織與通信結(jié)合起來。為了做到主題鮮明突出，要點明確，必須按照用

戶的要求，以簡單明確的語言和畫面體現(xiàn)站點的主題，調(diào)動一切手段充分表現(xiàn)網(wǎng)站的個

性和情趣，辦出網(wǎng)站的特點。

18 網(wǎng)頁制作教程

3．網(wǎng)站的版式設(shè)計合理

網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不等同于平面

設(shè)計，但它們有許多相近之處。版式設(shè)計通過文字圖形的空間組合，表達出和諧與美。

多頁面站點頁面的編排設(shè)計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之

間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達到最佳的視覺表現(xiàn)效果，必須反復(fù)推敲整體布

局的合理性，使瀏覽者有一個流暢的視覺體驗。

4．網(wǎng)頁設(shè)計中合理運用色彩

色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，須根據(jù)和諧、均衡和重點突出的原則，

將不同的色彩進行組合、搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對人們心理的影響，合理地

加以運用。

5．網(wǎng)頁設(shè)計形式與內(nèi)容相統(tǒng)一

為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的

內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白

等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。

如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感

的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容，往往會達到比較好的效果。點、線、面

作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補充構(gòu)成最佳的頁面效

果，充分表達完美的設(shè)計意境。

6．網(wǎng)頁設(shè)計中可利用多媒體功能

網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力，網(wǎng)頁的內(nèi)容可以用三維

動畫、Flash 等來表現(xiàn)。但由于網(wǎng)絡(luò)寬帶的限制，在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時

不得不考慮客戶端的傳輸速度。

7．結(jié)構(gòu)清晰并且便于使用

如果人們看不懂或很難看懂你的網(wǎng)站，那么，他如何了解你要提供的內(nèi)容呢？要使

用一些醒目的標(biāo)題或文字來突出你的產(chǎn)品與服務(wù)。并且即使你擁有最棒的產(chǎn)品，如果客

戶從你的網(wǎng)站上不清楚在介紹什么或不清楚如何受益的話，他們是不會喜歡你的網(wǎng)站的，

這就是網(wǎng)頁設(shè)計的失敗。

8．導(dǎo)向清晰

網(wǎng)頁設(shè)計中，導(dǎo)航一般使用超文本鏈接或圖片鏈接，使人們能夠在網(wǎng)站上自由前進

或后退，而不會讓他們使用瀏覽器上的前進或后退。最好在所有的圖片上使用“ALT”標(biāo)

識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的用戶能夠了解圖片的含義。

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 19

9．快速的下載時間

很多的瀏覽者不會進入需要等待 5 分鐘下載時間才能進入的網(wǎng)站，在互聯(lián)網(wǎng)上 30 秒

的等待時間與我們平常 10 分鐘等待時間的感覺相同。因此，建議在網(wǎng)頁設(shè)計中盡量避免

使用過多的圖片及體積過大的圖片。一般將主要頁面的容量控制在 50 KB 以內(nèi)，平均

30 KB 左右，確保普通瀏覽者頁面等待時間不超過 10 秒。

10．非圖形的內(nèi)容

在必要時適當(dāng)使用動態(tài) GIF 圖片，為減少動畫容量，應(yīng)用巧妙設(shè)計的 Java 動畫可以

用很小的容量使圖形或文字產(chǎn)生動態(tài)的效果。但是，由于在互聯(lián)網(wǎng)瀏覽的大多是一些尋

找信息的人們，仍然建議要確定你的網(wǎng)站將為他們提供的是有價值的內(nèi)容，而不是過度

的裝飾。

以上內(nèi)容就是關(guān)于網(wǎng)頁設(shè)計要遵循的一些基本原則，學(xué)習(xí)者可以在網(wǎng)站設(shè)計實踐中

慢慢去體會和練習(xí)。

1.4 網(wǎng)頁制作工具概述

1.4.1 網(wǎng)頁設(shè)計的常用工具

對于不太會寫計算機代碼的人員，可以借助“所見即所得”的網(wǎng)頁制作工具來完成

網(wǎng)頁的設(shè)計工作。目前，比較常用的網(wǎng)頁設(shè)計工具有：Dreamweaver，F(xiàn)ireworks，F(xiàn)lash，

俗稱網(wǎng)頁三劍客，是一套強大的網(wǎng)頁編輯工具，最初是由 Macromedia 公司開發(fā)出來的。

Dreamweaver 是一個“所見即所得”的可視化網(wǎng)站開發(fā)工具，主要用于動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)

頁的開發(fā)；Fireworks 主要是用于對網(wǎng)頁上常用的 JPG、GIF 圖片的制作和處理，也可用于

制作網(wǎng)頁布局；Flash 主要用來制作動畫。

1．Dreamweaver

Dreamweaver 是 美 國 Macromedia 公 司 （現(xiàn)已 被 Adobe 公 司 收 購 ， 成 為 Adobe

Dreamweaver）開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一

套針對專業(yè)網(wǎng)頁設(shè)計師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出

跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。

說到 Dreamweaver，我們應(yīng)該了解一下網(wǎng)頁編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)的普及，

HTML 技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁編輯器，從網(wǎng)頁編輯器的基本性質(zhì)，

可以分為所見即所得網(wǎng)頁編輯器和非所見即所得網(wǎng)頁編輯器，兩者各有千秋。所見即所得

網(wǎng)頁編輯器的優(yōu)點就是直觀，使用方便，容易上手，在所見即所得網(wǎng)頁編輯器中進行網(wǎng)頁

制作和在 Word 中進行文本編輯不會感到有什么區(qū)別，但它同時也存在著許多的弱點。

20 網(wǎng)頁制作教程

2．Flash

Flash 是美國 Macromedia 公司所設(shè)計的二維動畫軟件，全稱 Macromedia Flash，主

要用于設(shè)計和編輯 Flash 文檔。附帶的 Macromedia Flash Player，用于播放 Flash 文檔。

2011 年底，F(xiàn)lash 被 Adobe 公司收購，最新版本為 2013 年宣布的 Adobe Flash Creative

Cloud（CC），播放器也更名為 Adobe Flash Player。

3．Fireworks

Fireworks 可以加速 Web 設(shè)計與開發(fā)，是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與

Web 界面原型的理想工具。Fireworks 不僅具備編輯矢量圖形與位圖圖像的靈活性，還提

供了一個預(yù)先構(gòu)建資源的公用庫，并可與 Adobe Photoshop、Adobe Illustrator、Adobe

Dreamweaver 和 Adobe Flash 軟件集成。在 Fireworks 中可將設(shè)計迅速轉(zhuǎn)變?yōu)槟Ｐ?，或利?/p>

來自 Illustrator、Photoshop 和 Flash 的其他資源，然后直接置入 Dreamweaver 中輕松地進

行開發(fā)與部署。

1.4.2 網(wǎng)頁設(shè)計的輔助工具

除了以上比較常用的網(wǎng)頁制作工具外，還有一些網(wǎng)頁設(shè)計輔助工具，我們也在這里

作一個簡要介紹。

1．FrontPage

FrontPage，是微軟公司出品的一款網(wǎng)頁制作入門級軟件。FrontPage 使用方便簡單，

會用 Word 就能做網(wǎng)頁，所見即所得是其特點，該軟件結(jié)合了設(shè)計、程式碼、預(yù)覽三種模

式。微軟在 2006 年年底前停止提供 FrontPage 軟件。

2．Adobe Photoshop

Adobe Photoshop，簡稱“PS”，是由 Adobe Systems 開發(fā)和發(fā)行的圖像處理軟件。

Photoshop 主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效

地進行圖像編輯工作。Photoshop 有很多功能，在圖像、圖形、文字、視頻、出版等各方

面都有涉及。

2003 年，Adobe Photoshop 8 被更名為 Adobe Photoshop CS。2013 年 7 月，Adobe 公司

推出了最新版本的 Photoshop CC，自此，Photoshop CS6 作為 Adobe CS 系列的最后一個版

本被新的 CC 系列取代。

本 章 小 結(jié)

本章介紹了網(wǎng)頁設(shè)計的一些基礎(chǔ)知識，對互聯(lián)網(wǎng)（Internet）、萬維網(wǎng)（WWW）進行

第 1 章 網(wǎng)頁設(shè)計基礎(chǔ) 21

了比較詳細的介紹，同時對于本教程將要涉及的一些背景知識也給予了介紹，其中包括

HTML、URL、HTTP、IP 地址、DNS 以及瀏覽器、Web 服務(wù)器等。分析了網(wǎng)頁的特征、

網(wǎng)頁的基本元素和網(wǎng)頁設(shè)計的基本原則。對一些常用的網(wǎng)頁制作工具和輔助工具也做了

簡要介紹。

習(xí) 題

選擇題

1．Internet 的基本結(jié)構(gòu)域技術(shù)起源于（ ）。

A．UNIX B．NOVELL C．ARPANET D．DEC Net

2．關(guān)于 Internet，以下說法正確的是（ ）。

A．Internet 屬于美國 B．Internet 屬于聯(lián)合國

C．Internet 屬于國際紅十字會 D．Internet 不屬于某個國家或組織

3．WWW 是指（ ）。

A．World Wide Web B．Wide World Web

C．Web World Wide D．Web Wide World

4．Internet 與 WWW 的關(guān)系是（ ）。

A．都表示互聯(lián)網(wǎng)，名稱不同而已 B．WWW 是 Internet 上的一個應(yīng)用功能

C．Internet 與 WWW 沒有關(guān)系 D．WWW 是 Internet 上的一種協(xié)議

5．URL 的一般格式為（ ）。

A．/<路徑>/<文件名>/<主機>

B．<通信協(xié)議>://<主機>/<路徑>/<文件名>

C．<通信協(xié)議>:/<主機>/<文件名>

D．//<主機>/<路徑>/<文件名>;<通信協(xié)議>

6．代表網(wǎng)頁文件的擴展名是（ ）。

A．html B．txt C．doc D．ppt

7．URL 是（ ）。

A．統(tǒng)一資源定位 B．統(tǒng)一審查定位

C．統(tǒng)一資源定位器 D．統(tǒng)一審查定位器

8．HTTP 的中文意思是（ ）。

A．超文本傳輸協(xié)議 B．文件傳輸協(xié)議

C．布爾邏輯搜索 D．電子公告牌

22 網(wǎng)頁制作教程

9．用戶使用的因特網(wǎng)協(xié)議集被稱為（ ）。

A．SMTP B．DNS C．FTP D．TCP/IP

10．什么是 DNS？（ ）

A．?dāng)?shù)據(jù)名稱服務(wù) B．將域名變成 IP 地址

C．把 IP 地址變成域名 D．文件傳輸服務(wù)

11．以下哪個主機在地理位置上屬于中國？（ ）

A．Microsoft.au B．bta.cn

C．ibm.il D．news.com

12．在網(wǎng)址 http://www.ibm.com/中，com 表示（ ）。

A．無任何含義 B．域名 C．文件擴展名 D．服務(wù)器

13．根據(jù)域名代碼規(guī)定，gov 代表（ ）。

A．商業(yè)機構(gòu) B．教育機構(gòu) C．網(wǎng)絡(luò)支持中心 D．政府部門

14．下列各項中，屬于教育機構(gòu)域名的是（ ）。

A．tsinghua.edu.cn B．sava.gov.cn C．sxtl.net.cn D．yoyo.com.cn

15．IPv4 地址中有（ ）。

A．1 個字節(jié) B．2 個字節(jié) C．3 個字節(jié) D．4 個字節(jié)

16．IPv6 將 32 位地址空間擴展到（ ）。

A．128 位 B．256 位 C．64 位 D．1 024 位

17．下列 IPv4 地址中合法的是（ ）。

A．300.200.100.10 B．123.222.12.256

C．127.0.0.0 D．192.168.0.100

18．下列正確的 IP 地址是（ ）。

A．10.10.192.139 B．10.10.192

C．10.10.192.136.1 D．256.257.0.1

19．下面屬于網(wǎng)頁瀏覽器的軟件是（ ）。

A．Google B．Outlook Express

C．Office D．Internet Explorer

20．下面哪項不是 Web 瀏覽器？（ ）

A．Linux B．Opera

C．Internet Explorer D．Netscape Navigator

第 2 章 HTML 簡介

第 1 章中我們已經(jīng)對 HTML 作了簡要的介紹，本章將對 HTML 進一步進行講解。

2.1 HTML 基本概念

HTML（Hypertext Markup Language）超文本標(biāo)記語言，通過使用標(biāo)記來描述文檔結(jié)構(gòu)

和表現(xiàn)形式的一種語言，由瀏覽器進行解析，然后把效果顯示成網(wǎng)頁。它是網(wǎng)頁構(gòu)成的

基礎(chǔ)，用戶見到的所有網(wǎng)頁都離不開 HTML，所以學(xué)習(xí) HTML 是基礎(chǔ)中的基礎(chǔ)。

HTML 作為網(wǎng)頁制作的標(biāo)記語言，具有以下特點：

HTML 語言是一種標(biāo)記語言，不需要編譯，直接由瀏覽器執(zhí)行。

HTML 文件是一個文本文件，包含了一些 HTML 元素等。

HTML 文件必須使用 html 或 htm 為文件擴展名。

HTML 是大小寫不敏感的，HTML 與 html 是一樣的。

2.2 HTML 文檔結(jié)構(gòu)

2.2.1 HTML 文檔基本結(jié)構(gòu)

HTML 語言是一種標(biāo)記語言，它由<…>符號來標(biāo)記。一個 HTML 文檔一般由頭部和

正文兩部分組成，而且 HTML 文檔中的所有內(nèi)容以及其他 HTML 標(biāo)記都必須包含在

<html>…</html>標(biāo)記中。

<html>…</html>是成對出現(xiàn)的，這種標(biāo)記稱為容器標(biāo)記。<html>是一個 HTML 文件

開始的標(biāo)記，而</html>是一個 html 文件結(jié)束的標(biāo)記。<head>和</head>之間的內(nèi)容是 HTML

文件的頭部。<title>和</title>之間的內(nèi)容為網(wǎng)頁的標(biāo)題，即顯示在窗口的標(biāo)題部分。

<body>…</body>標(biāo)記包含了文檔的正文部分，在非框架結(jié)構(gòu)的文檔中，該標(biāo)記必不可少。

在此標(biāo)記中，可以定義文檔內(nèi)容的各種屬性，如設(shè)定文本的背景顏色和前景顏色，根據(jù)

鏈接文本的狀態(tài)定義該鏈接的顏色等。

24 網(wǎng)頁制作教程

2.2.2 編寫第一個 HTML 頁面

打開記事本，新建一個文件，然后復(fù)制以下代碼到這個新文件，再將這個文件存成

2-1.html。

【例 2-1】HTML 頁面示例。

<html>

<head>

<title>我的第一個網(wǎng)頁</title>

</head>

<body>

這是我的第一個網(wǎng)頁。

</body>

</html>

要瀏覽這個 2-1.html 文件，雙擊它，或者打開瀏覽器，在 File 菜單選擇 Open，然后

選擇這個文件就行了。例 2-1 運行的最終效果如圖 2-1 所示。

圖 2-1 第一個 HTML 頁面實例

【示例解釋】

這個文件的第一個標(biāo)記是<html>，這個標(biāo)記告訴瀏覽器這是 HTML 文件的頭。文件

的最后一個標(biāo)記是</html>，表示 HTML 文件到此結(jié)束。

在<head>和</head>之間的內(nèi)容，是 head 信息。head 信息是不顯示出來的，在瀏覽器

中看不到。但是這并不表示這些信息沒有用處。比如可以在 head 信息里加上一些關(guān)鍵詞，

這有助于搜索引擎搜索到此網(wǎng)頁。

在<title>和</title>之間的內(nèi)容，是這個文件的標(biāo)題?？梢栽跒g覽器最頂端的標(biāo)題欄看

到此標(biāo)題。

在<body>和</body>之間的信息是網(wǎng)頁的正文部分。

第 2 章 HTML 簡介 25

HTML 文件看上去和一般文本類似，但是它比一般文本多了許多標(biāo)記符號，比如

<html>、<body>等，通過這些標(biāo)記，可以告訴瀏覽器如何顯示這個文件。

2.3 HTML 基礎(chǔ)標(biāo)記

2.3.1 網(wǎng)頁頭部標(biāo)記

HTML 頭部信息（head）里包含關(guān)于所在網(wǎng)頁的信息。頭部信息（head）里的內(nèi)容，

主要是被瀏覽器所用，不會顯示在網(wǎng)頁的正文中。

另外，搜索引擎如谷歌、百度等也會查找網(wǎng)頁中的 head 信息。為了讓搜索引擎能夠

收錄網(wǎng)頁，也要填寫適當(dāng)?shù)?head 信息。

下面說幾個常用的 head 信息里的 HTML 標(biāo)記，如標(biāo)題（title）、鏈接（link）、樣式

（style）以及關(guān)于信息（meta）。

1．標(biāo)題（title）

標(biāo)題（title）是最常用的 head 信息。它不顯示在 HTML 網(wǎng)頁正文里，顯示在瀏覽器

窗口的標(biāo)題欄里。例 2-2 的效果如圖 2-2 所示。

【例 2-2】頭部標(biāo)題示例。

<head><title>

頭部信息(head)之標(biāo)題(title)說明

</title></head>

圖 2-2 標(biāo)題（title）標(biāo)記實例效果

2．鏈接（link）

用鏈接（link）可以建立和外部文件的鏈接。常用的是對 CSS 外部樣式表（External style

sheet）的鏈接。示例代碼如下：

<link rel="stylesheet" href="mainstyles.css" type="text/css">

26 網(wǎng)頁制作教程

3．樣式（style）

用樣式（style）可以設(shè)置網(wǎng)頁的內(nèi)部樣式表（Internal Style Sheet）。示例代碼如下：

<head>

<style>

body {background-color:white; color:black;}

h1 {font: 18pt arial bold;}

</style>

</head>

4．關(guān)于網(wǎng)頁信息（meta）

在計算機語言里，經(jīng)?？梢钥吹揭粋€前綴——meta，meta 就是“關(guān)于”（about）的

意思。

meta 解釋起來比較拗口，比如 meta data，意為描述 data 的 data，英文即 data about data。

還有一個詞叫 meta language，表示一種描述其他語言的語言。

在 HTML 里，meta 標(biāo)記（meta tags）表示用來描述網(wǎng)頁的有關(guān)信息。示例代碼如下：

<meta name="description" content="網(wǎng)頁制作教程之頭部信息">

<meta name="keywords" content="HTML,網(wǎng)頁制作 ">

<meta name="author" content="理學(xué)院">

利用 meta 中的 Refresh 還可以實現(xiàn)自動跳轉(zhuǎn)頁面的功能。示例代碼：

<meta http-equiv="Refresh" content="5;url=http://www.muc.edu.cn">

【例 2-3】meta 中的 Refresh 示例。

<html>

<head>

<meta http-equiv="Refresh" content="5;url=http://www.muc.edu.cn">

</head>

<body>

<p>

中央民族大學(xué)官方網(wǎng)站鏈接已改為

<a href="http://www.muc.edu.cn"> http://www.muc.edu.cn</a>。

</p>

<p>

如果在 5 秒鐘后網(wǎng)頁沒有自動跳轉(zhuǎn)，請點擊上面的鏈接，進入中央民族大學(xué)官網(wǎng)。

</p>

</body>

</html>

以上代碼運行效果如圖 2-3 所示，網(wǎng)頁打開 5 秒后將自動跳轉(zhuǎn)到中央民族大學(xué)官網(wǎng)。

第 2 章 HTML 簡介 27

圖 2-3 標(biāo)記 meta 跳轉(zhuǎn) 效果

2.3.2 文檔主體標(biāo)記

1．文檔背景顏色和背景圖片

HTML 的 <body> 有兩個關(guān)于背景的屬性，一個是 bgcolor，是設(shè)置背景顏色的；另

一個是 background，是設(shè)置背景圖片的。

① bgcolor 屬性。bgcolor 屬性用來設(shè)置 HTML 網(wǎng)頁的背景顏色，如下代碼示例：

<html>

<body bgcolor="red">

<h2>看，這個頁面是紅色的。</h2>

</body>

</html>

② background 屬性。background 屬性用來設(shè)置 HTML 網(wǎng)頁的背景圖片。background

屬性值就是背景圖片的路徑和文件名，如：

<body background="/images/bgimg.gif">

如果背景圖片小于網(wǎng)頁顯示窗口，那么這個背景圖片會自動重復(fù)，代碼示例如下：

<html>

<body background="/images/smallbgimg.gif">

<h3>這個網(wǎng)頁有背景圖片哦！</h3>

<p>如果圖片比頁面小，圖片會自動重復(fù)。</p>

</body>

</html>

為保證瀏覽器載入網(wǎng)頁的速度，建議盡量不要使用字節(jié)過大的圖片作為背景圖片。

2．文本格式化標(biāo)記

此類型的標(biāo)記用于定義文本的類型，比如注釋、引用、代碼等。其主要屬性如下：

28 網(wǎng)頁制作教程

<!--…-->：將文本定義為注釋。

<cite>…<cite>：將文本定義為引用。

<comment>…</comment>：將文本定義為說明。

<code>…</code>：將文本定義為代碼。

<del>…</del>：顯示文本被刪除的效果（在文本中加一道橫線）。

<dfn>…</dfn>：文本是某個名詞的定義。

<em>…</em>：將文本定義為要點。

<ins>…</ins>：顯示文本插入的效果（加下劃線，并在結(jié)尾加省略號）。

<kbd>…</kbd>：用戶自定義的文本類型。

<q>…</q>：定義文本為內(nèi)聯(lián)文本類型。

<strong>…</strong>：顯示文本著重強調(diào)的效果（黑體）。

<var>…</var>：標(biāo)識此文本為定義變量。

【例 2-4】文本格式化標(biāo)記示例。

<html>

<head><title>格式化文本標(biāo)記示例</title></head>

<body>

<center>

<h2>下面是一些格式化文本示范</h2>

<hr width=300 size=2>

</center>

<p><!--注釋文本將不被顯示--></P>

<p>引用：毛主席說：<cite>"好好學(xué)習(xí)，天天向上。"</cite></p>

<p>說明：<comment>說明性文本將不會被顯示出來。</comment></p>

<p>刪除：在此處有一道<del>刪除線。</del></p>

<p>定義：<dfn>平行四邊形</dfn>是兩組對邊互相平行的四邊形。</p>

<p>要點：<em>要點</em>將以斜體顯示。</p>

<p>插入：<ins>這段是插入文本。</ins></p>

<p>內(nèi)聯(lián)體：<q>這段是內(nèi)聯(lián)體文本。</q></p>

<p>著重體：明天是<strong>除夕。</strong></p>

<p>定義變量：這里定義一個變量<var>variable.</var></p>

</body>

</html>

程序的運行結(jié)果如圖 2-4 所示。

第 2 章 HTML 簡介 29

圖 2-4 文本格式化標(biāo)記效果

3．字體樣式

HTML 中的字體樣式主要有粗體、斜體、小字體、大字體、寬字體、電報字體、顯示

下劃線或顯示刪除線等，各種字體的樣式標(biāo)記如下：

<b>…</b>：文本以粗體字顯示。

<big>…</big>：文本以大字體顯示。

<button>…</button>：將文本設(shè)定為按鈕。

<i>…</i>：文本以斜體顯示。

<small>…</small>：文本以小字體顯示。

<span>…</span>：設(shè)定內(nèi)部的字體樣式。

<strike>…</strike>：文本顯示時加刪除線。

_…：文本以下沉的樣式顯示。

^…：文本以上浮的樣式顯示。

<tt>…</tt>：文本以電報體或?qū)捵煮w顯示。

<u>…</u>：文本顯示時加下劃線。

<font>…</font>：字體大小、字體風(fēng)格、字體顏色等設(shè)置。

30 網(wǎng)頁制作教程

【例 2-5】字體樣式示例。

<html>

<head><title>字體樣式</title><head>

<body>

<b>粗體字</b>

<i>斜體字</i>

<small>小字體</small>

<big>大字體</big>

<u>加有下劃線的文字</u>

<strike>加有刪除線的文字</strike>

<tt>電報體或?qū)捵煮w</tt>

<font size="3" face="楷體" color="red">這是一段大小為 9px 的紅色楷體字</font> </body>

</html>

示例代碼的運行結(jié)果如圖 2-5 所示。

圖 2-5 字體樣式實例效果

2.3.3 段落標(biāo)記

在 HTML 文檔中，使用<p>…</p>標(biāo)記對文本進行分段排列，該標(biāo)記有一個常用屬性

align，該屬性取值主要有：left、right、center，分別表示文本靠左、靠右、居中排列顯示。

【例 2-6】段落標(biāo)記示例。

<html>

<head>

<title>段落標(biāo)記實例</title>

</head>

<body>

<p align="left">第一段文本，靠左排列。</p>

<p align="right">第二段文本，靠右排列。</p>

第 2 章 HTML 簡介 31

<p align="center">第三段文本，居中排列。</p>

</body>

</html>

以上運行效果如圖 2-6 所示。

圖 2-6 段落標(biāo)記實例

如果希望在不產(chǎn)生一個新段落的情況下進行換行（新行），可以使用換行符<br/>

標(biāo)簽。

<p>這是第一行<br/>這是第二行<br/>這是第三行</p>

以上代碼在段落標(biāo)簽中的一行文字中需要換行的地方插入<br/>標(biāo)簽，便可以對文字

進行強行換行。

2.3.4 圖片標(biāo)記

HTML 文檔中顯示圖片（格式一般為 jpg、jpeg、gif、png 等）用圖片標(biāo)記<img>，這

是一個非封閉標(biāo)記，圖片標(biāo)記有兩個常用屬性 src 和 alt。src 屬性指定了所要顯示圖片的

所在位置，alt 用于指定替代圖片的文本（當(dāng)圖片無法顯示時顯示該文本內(nèi)容）。

【例 2-7】圖片標(biāo)記示例。

<html>

<head>

<title>圖片標(biāo)記</title>

</head>

<body>

<img src="images/yjx.jpg" alt="郁金香">

</body>

</html>

運行效果如圖 2-7 所示。

32 網(wǎng)頁制作教程

圖 2-7 圖片標(biāo)記實例

2.3.5 超鏈接標(biāo)記

在 HTML 中，超鏈接用標(biāo)記<a>和</a>來實現(xiàn)，而定義源端點、目標(biāo)端點、錨記等相

關(guān)內(nèi)容則由標(biāo)簽<a>的屬性完成。標(biāo)簽<a>有如下幾個常用屬性：

1．href 屬性

用來定義指向鏈接目標(biāo)端點的 URL，取值是目標(biāo)端點文件的 URL 路徑和文件名。

例如：<a href="http://www.163.com">網(wǎng)易主頁</a>

href="http://www.163.com"指明了鏈接目標(biāo)端點，“網(wǎng)易主頁”是鏈接文字，瀏覽時單

擊“網(wǎng)易主頁”就會打開由 href 指定的主頁。

【例 2-8】超鏈接 href 屬性示例。

<html>

<head>

<title>超鏈接（href 屬性實例）</title>

</head>

<body>

歡迎訪問<a href="http://www.163.com">網(wǎng)易主頁</a>

</body>

</html>

第 2 章 HTML 簡介 33

以上代碼運行效果如圖 2-8 所示。

圖 2-8 超鏈接 href 屬性實例

2．target 屬性

用于定義鏈接目標(biāo)端點文檔的顯示窗口，取值可以是：_blank、_self、_parent、_top，

也可以是一個框架名。

例如：<a href="kcjs.htm" target="mainFrame">課程介紹</a>

href="kcjs.htm"指明鏈接目標(biāo)端點是當(dāng)前文件夾中 kcjs.htm 文檔，target="mainFrame"

指明目標(biāo)文檔將顯示在框架名為 mainFrame 的框架窗口中?！罢n程介紹”是鏈接文字，瀏

覽時單擊“課程介紹”將在 mainFrame 框架域中顯示 kcjs.htm 文檔內(nèi)容。

3．name 屬性

用于在當(dāng)前位置進行插入錨記操作，創(chuàng)建連接的目標(biāo)端點，通過其他鏈接可跳轉(zhuǎn)到

創(chuàng)建的目標(biāo)錨記上。name 的值是錨記的名稱。

例如：<a name="a1"></a>

在當(dāng)前位置插入了一個名稱為 a1 的錨記。

4．title 屬性

用于設(shè)置鏈接的標(biāo)題，在瀏覽器中，鼠標(biāo)指針指向鏈接時會顯示在鼠標(biāo)指針旁邊，

是鏈接的說明文字。

例如：<a href="1.htm" target="mainFrame" title="課程介紹">課程介紹</a>

2.3.6 列表標(biāo)記

在網(wǎng)頁中，列表方便、直接，并且美觀，故很常用。有關(guān)列表的標(biāo)記符有如下幾種：

<dl>：定義列表（可包含一個或多個<dt>或<dd>）。

34 網(wǎng)頁制作教程

<dt>：定義列表的術(shù)語。

<dd>：提供術(shù)語定義。

<li>：定義一個列表項。

<ul>：無序列表（列表前沒有數(shù)字標(biāo)示）。

<ol>：有序列表（列表前有數(shù)字標(biāo)示）。

現(xiàn)在就幾個常用的標(biāo)記進行敘述。

① <ol>：<ol>標(biāo)記定義了一個有序列表，即列表的每一項前都有編號。

② <ul>：該標(biāo)記定義了一個無序列表。其 type 屬性給出了列表項標(biāo)號的顯示樣式，

它的取值有 square（方框）、circle（空心圓圈）、disc（實心圓）。有序列表和無序列表均

可以嵌套使用。

③ <dl>：該標(biāo)記定義了一個定義列表，這種列表一般用在每個項目都需要幾個段落

說明的列表中。定義列表中的項目是通過使用<dd>和<dt>標(biāo)記創(chuàng)建的。其中，<dt>定義了

每個項目的名稱，<dd>定義了解釋說明該項目的段落內(nèi)容。

④ <li>：該標(biāo)記定義了一個列表項。

【例 2-9】列表標(biāo)記示例。

<html>

<head><title>列表樣式示例</title></head>

<body>

<center><h2>本月售書總結(jié)</h2></center>

<dl>

<dt>售書排行榜</dt>

<dd>按書名：

<ol>

<li>數(shù)據(jù)結(jié)構(gòu)</li>

<li>操作系統(tǒng)</li>

<li>Thinking in C++</li>

</ol>

</dd>

<dd>按出版社：

<ol>

<li>清華大學(xué)出版社</li>

<li>機械工業(yè)出版社</li>

<li>人民郵電出版社</li>

<li>中國鐵道出版社</li>

</ol>

<hr>

<dt>脫銷書目：</dt>

<dd>

第 2 章 HTML 簡介 35

<ul>

<li>操作系統(tǒng)</li>

<li>數(shù)據(jù)庫系統(tǒng)概論</li>

<li>數(shù)據(jù)庫工程</li>

</ul>

</dd>

</body>

</html>

運行結(jié)果如圖 2-9 所示。

圖 2-9 列表樣式實例

2.3.7 表單標(biāo)記

表單在網(wǎng)頁制作中有舉足輕重的地位，因為它方便、美觀及其強大的功能，成為網(wǎng)

頁中必不可少的元素，它為在服務(wù)器和客戶機之間的數(shù)據(jù)傳輸、網(wǎng)頁之間的數(shù)據(jù)保存以

及快速顯示在客戶機上提供了方便。以下是表單的一些基本元素：

<form>：定義一個表單。

<input>：在表單中插入一個表單元素。

<text>：定義一個文本框。

<textarea>：定義一個文本區(qū)域。

36 網(wǎng)頁制作教程

<checkbox>：定義一個復(fù)選框。

<radio>：定義一個單選框。

<select>：定義一個選項選擇控件。

<option>：定義一個靜態(tài)文本框。

<button>：定義一個按鈕。

<tieldset>：定義一個表單按鈕組。

<legend>：定義表單控件組的名稱。

<password>：定義一個輸入密碼的文本框，以“*”顯示輸入的文本。

現(xiàn)在就幾個比較常用的屬性進行說明。

① <form>…</form>。<form>標(biāo)記定義了一個交互式表單。當(dāng)用戶發(fā)送表單時，表單

包含的數(shù)據(jù)被發(fā)送到表單的 action 屬性所定義的 URL 上。action 屬性的作用是將表單指

向一個接收表單信息并完成信息處理功能的服務(wù)器腳本的 URL 上，以便服務(wù)器對所需要

數(shù)據(jù)進行操作。例如：<form action="login.asp" method="post">，這表示該表單指向 login.asp

的文件，在 login.asp 中可以對表單的內(nèi)容進行操作。其中 action 是必須的，它可以指向

另外一個文件，也可以指向該文件本身，該文件再進行相應(yīng)的操作。

方法 method 有 post 和 get 兩個值，其默認值為 get。它是將表單的輸入內(nèi)容作為一

個“HTTP GET”請求，然后把表單數(shù)據(jù)添加到 action 屬性所定義的服務(wù)器的 URL 上。

post 方法用表單的內(nèi)容單獨建立一個文件，并發(fā)送到服務(wù)器上。與 post 方法比較，get

方法所能處理的最多表單數(shù)據(jù)量受限于服務(wù)器和瀏覽器所能處理的最大 URL 長度，而

且還禁止在輸入中包含 ASCII 碼字符或超過 100 個字符的表單。所以 post 方法較 get 方

法常用。

② <input>。這個標(biāo)記在表單中應(yīng)用得最廣泛，因為它的 type 屬性定義了許多信息輸

入選項，該屬性的取值有：text（簡單文本行）、password（口令字段）、checkbox（復(fù)選框）、

radio（單選按鈕）、file（打開文件)、submit（提交按鈕）、reset（重置按鈕）。此外，<input>

標(biāo)記還有其他的一些屬性，如 name 屬性為每個選項定義了文本標(biāo)簽；size 屬性決定了簡

單文本行或口令字段的長度，單位為字符；value 屬性對于簡單文本行或口令字段定義了

默認文本。

③ <select>…</select>。該標(biāo)記定義了一個可以滾動的列表或菜單。在此標(biāo)記中包

含 若 干 個 <option>標(biāo) 記 就 可 以 為 用 戶 提 供 一個選 項 菜單， 每 一個選 項 都存于一個

<option>標(biāo)記中。<select>的 name 屬性為所定義的列表或菜單提供了文本標(biāo)簽；multiple

屬性允許多個選項值；size 屬性擇規(guī)定了選項以列表形式一次顯示的數(shù)目，滾動條將

使所有不可顯示的項目都可見。

第 2 章 HTML 簡介 37

④ <option>…</option>。該標(biāo)記定義了<select>菜單中的選項。在<select>中，可以定

義其中一個<option>的 selected 屬性，使得該選項為默認選項。

⑤ <textarea>…</textarea>。該標(biāo)記定義了一個多行輸入的文本域。<textarea>的主要

屬性是 rows 和 cols，它們分別定義了可顯示的行數(shù)和列數(shù)。name 屬性為該文本域提供了

一個文本標(biāo)簽。

⑥ <fieldset>…</fieldset>和<legend>...</legend>。<fieldset>標(biāo)記定義了一個表單控件

組，它可以將表單中內(nèi)容相近的選項組織成塊，使表單的內(nèi)容更易顯示和管理。<legend>

標(biāo)記必須放在<fieldset>標(biāo)記內(nèi)，它為<fieldset>定義的控件組提供了文字標(biāo)簽。

【例 2-10】表單標(biāo)記示例。

<html>

<head><title>提交表單示例</title></head>

<body>

<h2 align=center>個人信息表</h2>

<form action="login.asp" method="post">

<p>姓名：<input type=text size=20 value=""></p>

<p>性別：<input type=radio value=男 checked>男

<input type=radio value=女>女</p>

<p>電子郵箱：<input type=text size=30 value=""></p>

<p>個人愛好：<br><input type=checkbox value="唱歌">唱歌

<br><input type=checkbox value="跳舞">跳舞

<br><input type=checkbox value="爬山">爬山

<br><input type=checkbox value="游泳">游泳

<br><input type=checkbox value="看書">看書

</p>

<p>所在城市：

<select><option>北京市</option>

<option>天津市</option>

<option>上海市</option>

</select>

</p>

<p><input type=submit value="提交"><input type=reset value="取消"></p>

</form>

</body>

</html>

運行結(jié)果如圖 2-10 所示。

38 網(wǎng)頁制作教程

圖 2-10 表單標(biāo)記實例

2.3.8 表格標(biāo)記

在網(wǎng)頁中使用表格，會給人一種整潔、美觀的感覺。表格可以存放多維數(shù)據(jù)，并且

便于進行版式控制。但是表格會占用比較多的資源，過多地使用表格往往會使網(wǎng)頁下載

速度變慢。盡管如此，表格依然為很多讀者所喜愛。下面簡單介紹表格的一般用法及其

屬性。

<table>：定義一個表格。

<caption>：定義表格說明。

<colgroup>：定義表格列組。

<thead>：定義表格列標(biāo)題。

<th>：定義一個表格標(biāo)題單元。

<tbody>：定義表格數(shù)據(jù)行。

<tr>：定義一個表格行。

<td>：定義一個表格內(nèi)容單元。

第 2 章 HTML 簡介 39

① <table>。該標(biāo)記符定義了一個可以存放多維數(shù)組的表格。其中：border 屬性定義

了表格外邊框的寬度，它的默認值位 0；width 屬性用于指定表格的寬度，其值可以是以

百分比表示的相對值，即相對于窗口的寬度的百分比，也可以是絕對值，其大小用屏幕

像素點的個數(shù)表示；cellpadding 屬性用來指定表內(nèi)單元的內(nèi)容與表格邊框之間的距離，

大小單位用像素點表示，默認值位 0；cellspacing 屬性用于指定單元格之間的距離，亦即

單元格邊框的里邊線和外邊線之間的距離，大小單位用像素點表示，默認值位 0；rules

屬性用于控制表格中分隔線的顯示，rules＝all 表示顯示所有的分隔線，rules＝rows 表示

只顯示行與行之間的分隔線，rules＝cols 表示顯示列與列之間的分隔線，rules＝none 表

示不顯示任何分隔線；bgcolor 屬性用于指定表格的背景色；bordercolor 屬性用于指定邊

框色。

② <caption>。該標(biāo)記用于定義表格的標(biāo)題，并且<caption>必須放在表格的最前面。

③ <thead>。該標(biāo)記定義了表格中的一組標(biāo)題行。通過<thead>將若干標(biāo)題行歸為一

組，這樣就可以使標(biāo)題行出現(xiàn)在需要分多頁打印的表格的每一頁上，又可以在顯示長表

格時做到表格內(nèi)容滾動而標(biāo)題靜止。其 align 屬性指定了表格中每個單元格的水平對齊方

式，而 valign 屬性定義了單元內(nèi)容的垂直位置。

④ <tbody>。該標(biāo)記定義了表格的表體部分，一個<tbody>定義了一組數(shù)據(jù)行。

⑤ <tr>。該標(biāo)記定義了表格的一行。<tr>標(biāo)記必須放在<thead>或<tdody>所定義的行

組中。在<tr>中又包含了<th>和<td>標(biāo)記。<tr>的 align 屬性表示每個單元格的水平對齊方

式，其中 left 表示居左，center 表示居中，right 表示居右；valign 屬性定義了單元格內(nèi)容

的垂直位置，其中 top 表示位于單元格的頂端，middle 表示位于單元格的中間，bottom 表

示位于單元格的底端；height 表示單元格的高度，width 表示單元格的寬度，它既可指定

為數(shù)字（表示像素的多少），也可指定為百分比（表示占窗口的比例）；bgcolor 屬性定義

了表格行的背景顏色。

⑥ <td>。該標(biāo)記定義了表格中一個數(shù)據(jù)單元格。其中，rowspan 屬性和 colspan 屬性

分別定義了單元格所占的行數(shù)和列數(shù)。

⑦ <th>。該標(biāo)記定義了表格中的一個標(biāo)題單元格。<th>標(biāo)記應(yīng)放在<tr>標(biāo)記中。當(dāng)

單元格的內(nèi)容既是標(biāo)題信息又是表格數(shù)據(jù)時，應(yīng)使用<td>標(biāo)記。

無論是標(biāo)題單元格還是數(shù)據(jù)單元格，其中都能包含任何文本、HTML 代碼，或兩者都

有。這包括鏈接、列表、表單、圖像或其他表格。

【例 2-11】表格標(biāo)記示例。

<html>

<head><title>表格示例</title></head>

<body>

40 網(wǎng)頁制作教程

<center>

<table border="1" bgcolor="lightblue">

<caption>上月銷售總結(jié)</caption>

<colgroup span=3>

<thead>

<tr>

<th scope="col" rowspan=2>書目種類</th>

<th scope="col" rowspan=2>銷售數(shù)量（萬冊）</th>

<th scope="col" rowspan=2>銷售金額（萬元）</th>

<th scope="col" colspan=2>銷售排行榜</th>

</tr>

<tr>

<th scope="col">上月銷售</th>

<th scope="col">本月定購</th>

</tr>

</thead>

<tbody>

<tr>

<td align=left>計算機類</td>

<td align=center>3.1</td>

<td align=center>58</td>

<td align=center>網(wǎng)頁設(shè)計教程</td>

<td align=right>Thinking in C++</td>

</tr>

<tr>

<td align=left>外語類</td>

<td align=center>2.8</td>

<td align=center>49</td>

<td align=center>大學(xué)英語四級考試</td>

<td align=center>快樂英語</td>

</tr>

</tbody>

</table>

</center>

</body>

</html>

首先用<table>定義一個表格，其邊框“border”為 1，表格背景顏色為淺綠色。<caption>

定義了表格的說明，表示該表格是“上月銷售總結(jié)”。<colgroup>定義了 4 個列組，其中

“銷售排行榜”列定義了兩個子列。<thead>定義了表格的列標(biāo)題。<tbody>定義了表格內(nèi)