內容簡介

本書的作者為一線開發工程師、資深編程專家、專業培訓師，在網站開發方面有著豐富的經驗，并已出版過多本相關暢銷書，頗受廣大讀者認可。本書內容不局限于語法講解上，還通過一個個鮮活、典型的實例來達到學以致用的目的。每個語法都有相應的實例，每章后面又配有綜合小實例。

本書共21章，主要內容包括HTML入門，HTML基本標簽，用HTML設置文字、段落與列表，列表的建立和使用，用HTML創建精彩的圖像和多媒體頁面，用HTML創建超鏈接，用HTML創建表格，用表單創建交互式網頁，HTML 5的結構，CSS基礎知識，用CSS設計豐富的文字效果，用CSS設計圖像和背景，用CSS設計表格和表單樣式，用CSS制作鏈接與網站導航，CSS+DIV布局定位基礎，CSS盒子模型，盒子的浮動與定位，CSS+DIV布局方法，CSS 3入門基礎，設計和制作適合手機瀏覽的網頁，公司宣傳網站的布局。

 

本書內容翔實、結構清晰，既適合HTML和CSS的初學者自學使用，也可以作為各類院校相關專業的學生和電腦培訓班的教材或輔導用書。

前    言

　　近年來，隨著網絡信息技術的廣泛應用，越來越多的個人、企業紛紛建立自己的網站，利用網站來宣傳和推廣自己。網頁技術已經成為當代青年學生必備的知識技能。目前大部分制作網頁的方式都是運用可視化的網頁編輯軟件，這些軟件的功能相當強大，使用也非常方便。但是對于高級的網頁制作人員來講，仍需了解HTML、CSS+DIV等網頁設計語言和技術的使用，這樣才能充分發揮豐富的想象力，更加隨心所欲地設計出符合標準的網頁，以實現網頁設計軟件不能完成的許多重要功能。

本書主要內容

　　隨著Web 2.0的盛行，一切都開始基于Web標準，許多網站設計師開始學習并應用Web標準，CSS的應用也越來越廣泛。本書正是在這種流行趨勢下應運而生的介紹使用HTML和CSS進行網頁標準化布局的書。本書不僅僅將筆墨局限于語法講解上，并通過一個個鮮活、典型的實戰來達到學以致用的目的。每個語法都有相應的實例，每章后面又配有綜合小實例。

　　本書共21章，主要內容包括HTML入門，HTML基本標簽，用HTML設置文字，段落與列表，列表的建立和使用，用HTML創建精彩的圖像和多媒體頁面，用HTML創建超鏈接，用HTML創建表格，用表單創建交互式網頁，HTML 5的結構，CSS基礎知識，用CSS設計豐富的文字效果，用CSS設計圖像和背景，用CSS設計表格和表單樣式、用CSS制作鏈接與網站導航，CSS+DIV布局定位基礎，CSS盒子模型，盒子的浮動與定位，CSS+DIV布局方法，CSS 3入門基礎，設計和制作適合手機瀏覽的網頁，公司宣傳網站的布局。

本書主要特色

　　(1) 知識全面系統。

　　本書內容完全從網頁創建的實際角度出發，將所有HTML、CSS+DIV元素進行歸類，每個標簽的語法、屬性和參數都有完整、詳細的說明，信息量大，知識結構完善。

　　(2) 典型實例講解。

　　本書的每章都配有大量實用案例，將本章的基礎知識綜合貫穿起來，力求達到理論知識與實際操作完美結合的效果。

　　(3) 配合Dreamweaver進行講解。

　　本書以淺顯的語言和詳細的步驟介紹了在可視化網頁設計軟件Dreamweaver中如何運用HTML、CSS來創建網頁，使網頁制作更加得心應手。在最后一章向讀者展示了完全不用編寫代碼，在Dreamweaver中創建完整網頁的過程。

　　

    (4)配圖豐富，效果直觀。

　　對于每一段實例代碼，本書都配有相應的效果圖，讀者無須自己進行編碼，也可以看到相應的運行結果或者顯示效果。在不便上機操作的情況下，讀者也可以根據書中的實例和效果圖進行分析和比較。

　　(5) 習題強化。

　　每章后都附有針對性的練習題，通過實訓鞏固每章所學的知識。

　　(6) 配套光盤。

　　需要從清華大學出版社官網上下載使用。

本書讀者對象

 網頁設計與制作人員；

 網站建設與開發人員；

 大中專院校相關專業師生；

 網頁制作培訓班學員；

 個人網站愛好者與自學讀者。

　　本書是集體智慧的結晶，參加本書編寫的人員均為從事網頁教學工作的資深教師和具備大型商業網站建設經驗的資深網頁設計師，他們有著豐富的教學經驗和網頁設計經驗。參加本書編寫的人員包括徐洪峰、何琛、鄧靜靜、李銀修、孫魯杰、何海霞、何秀明、孫素華、呂志彬等。由于時間所限，書中疏漏之處在所難免，懇請廣大讀者朋友批評指正。

　　

　　

                                                                                編  者  

 

目    錄

 

第1章  HTML入門 1

1.1  什么是HTML 1

1.1.1  HTML的特點 1

1.1.2  HTML的歷史 2

1.2  HTML文件的基本結構 2

1.2.1  HTML文件結構 2

1.2.2  編寫HTML文件的注意事項 4

1.3  HTML文件的編寫方法 4

1.3.1  使用記事本編寫HTML頁面 4

1.3.2  使用Dreamweaver CC

編寫HTML頁面 6

1.4　網頁設計與開發的過程 7

1.4.1　明確網站定位 7

1.4.2　收集信息和素材 7

1.4.3　規劃欄目結構 8

1.4.4　設計網頁圖像 9

1.4.5　制作頁面 9

1.4.6　實現后臺功能 10

1.4.7　網站的測試與發布 12

本章小結 12

練習題 13

第2章  HTML基本標簽 14

2.1  HTML頁面主體標簽 14

2.1.1  定義網頁背景色：bgcolor 14

2.1.2  設置背景圖片：background 15

2.1.3  設置文字顏色：text 16

2.1.4  設置鏈接文字屬性 17

2.1.5  設置頁面邊距 20

2.2  head部分標簽 21

2.2.1  標題標簽：<title> 21

2.2.2  定義頁面關鍵字 22

2.2.3  定義頁面描述 23

2.2.4  定義網頁編輯工具 24

2.2.5  定義作者信息 24

2.2.6  定義網頁文字及語言 25

2.2.7  定義網頁的定時跳轉 25

2.3  綜合實例——創建基本的HTML

文件 26

本章小結 29

練習題 29

第3章　用HTML設置文字、段落

與列表 31

3.1　標題字 31

3.1.1　標題字標簽：<h> 31

3.1.2　標題字對齊屬性：align 32

3.2  插入其他標記 33

3.2.1  輸入空格符號 33

3.2.2  輸入特殊符號 34

3.3  設置段落的格式 35

3.3.1  段落標簽：<p> 35

3.3.2  段落的對齊屬性：align 36

3.3.3  不換行標簽：<nobr> 37

3.3.4  換行標簽：<br> 38

3.4  水平線標簽 39

3.4.1  插入水平線標簽：<hr> 39

3.4.2  設置水平線寬度與高度的

屬性：width、size 40

3.4.3  設置水平線的顏色：color 41

3.4.4  設置水平線的對齊方式：

align 42

3.4.5  水平線去掉陰影：noshade 43

3.5  使用<marquee>設置滾動效果 44

3.5.1  <marquee>標簽及其屬性 44

3.5.2  使用<marquee>標簽插入滾動

公告 45

3.6  綜合實例——設置頁面文本及段落 49

本章小結 51

練習題 52

第4章　列表的建立和使用 53

4.1　使用無序列表 53

4.1.1　無序列表標簽：<ul> 53

4.1.2　設置無序列表類型的

屬性type 54

4.1.3　菜單列表標簽：<menu> 55

4.1.4　目錄列表：<dir> 56

4.2　使用有序列表 58

4.2.1　有序列表標簽：<ol> 58

4.2.2　有序列表類型的屬性：type 59

4.2.3　有序列表的起始數值：start 60

4.3  列表條目元素<li> 61

4.3.1  項目符號的類型：type 61

4.3.2  條目編號：value 62

4.4  定義列表標簽<dl> 63

本章小結 65

練習題 65

第5章　用HTML創建精彩的圖像和

多媒體頁面 67

5.1  網頁中常見的圖像格式 67

5.2  插入圖像并設置圖像屬性 68

5.2.1  圖像標簽：<img> 68

5.2.2　圖像的源文件：src 69

5.2.3　圖像的提示文字：alt 70

5.2.4　圖像的寬度和高度：width、

height 71

5.3  添加多媒體文件 72

5.3.1  添加多媒體文件標簽：

<embed> 72

5.3.2  設置自動運行：autostart 73

5.4  添加背景音樂 74

5.4.1  設置背景音樂：<bgsound> 74

5.4.2  設置循環播放次數：loop 75

5.5  插入Flash動畫 76

5.6  綜合實例 77

綜合實例1——創建多媒體網頁 78

綜合實例2——創建圖文混合排版

網頁 79

本章小結 82

練習題 82

第6章　用HTML創建超鏈接 84

6.1  超鏈接的基本概念 84

6.2  創建基本超鏈接 84

6.2.1  超鏈接標簽 85

6.2.2  設置目標窗口 86

6.3  創建圖像超鏈接 87

6.3.1  設置圖像超鏈接 87

6.3.2  設置圖像熱區鏈接 88

6.4  創建錨點鏈接 90

6.4.1  創建錨點 90

6.4.2  錨點鏈接 92

6.5　外部鏈接 95

6.5.1　鏈接到外部網站 96

6.5.2　鏈接到E-Mail 96

6.5.3　鏈接到FTP 97

6.5.4　鏈接到Telnet 98

6.5.5　下載文件 99

6.6  綜合實例——給網頁添加鏈接 100

本章小結 102

練習題 102

第7章　用HTML創建表格 103

7.1  創建并設置表格屬性 103

7.1.1  表格的基本標簽：

<table><tr><td> 103

7.1.2  表格寬度和高度：width、

height 104

7.1.3  表格的標題：<caption> 105

7.1.4  表格的表頭：<th> 107

7.1.5  表格對齊方式：align 109

7.1.6  表格的邊框寬度：border 110

7.1.7  表格邊框顏色：bordercolor 111

7.1.8  單元格間距：cellspacing 112

7.1.9  單元格邊距：cellpadding 113

7.1.10  表格的背景色：bgcolor 114

7.1.11  表格的背景圖像：

 background 115

7.2  表格的結構標簽 117

7.2.1  設計表頭樣式：<thead> 117

7.2.2  設計表主體樣式：<tbody> 118

7.2.3  設計表尾樣式：<tfoot> 120

7.3  綜合實例——使用表格排版網頁 121

本章小結 126

練習題 126

第8章  用表單創建交互式網頁 128

8.1  插入表單：<form> 128

8.1.1　處理動作：action 128

8.1.2　表單名稱：name 129

8.1.3　傳送方法：method 129

8.1.4　編碼方式：enctype 130

8.1.5　目標顯示方式：target 131

8.2　表單控件：<input> 132

8.2.1　文本字段：text 132

8.2.2　密碼域：password 134

8.2.3　單選按鈕：radio 135

8.2.4　復選框：checkbox 136

8.2.5　普通按鈕：button 138

8.2.6　提交按鈕：submit 139

8.2.7　重置按鈕：reset 140

8.2.8　圖像域：image 142

8.2.9　隱藏域：hidden 143

8.2.10　文件域：file 144

8.3  選擇列表條目標簽：<option> 145

8.4  選擇列表標簽：<select> 147

8.4.1  高度屬性：size 147

8.4.2  多項選擇屬性：multiple 148

8.5  文本區域標簽：<textarea> 150

本章小結 151

練習題 151

第9章  HTML 5的結構 153

9.1  認識HTML 5 153

9.2  HTML 5的新特性 154

9.3  HTML 5與HTML 4的區別 155

9.3.1  HTML 5的語法變化 155

9.3.2  HTML 5中的標記方法 155

9.3.3  HTML 5語法中的3個

要點 156

9.4  新增的主體結構標簽 157

9.4.1  <article>標簽 157

9.4.2  <section>標簽 158

9.4.3  <nav>標簽 159

9.4.4  <aside>標簽 160

9.4.5  <time>標簽 161

9.4.6  pubdate屬性 162

9.5  新增的非主體結構標簽 163

9.5.1  <header>標簽 163

9.5.2  <hgroup>標簽 164

9.5.3  <footer>標簽 165

9.5.4  <address>標簽 166

本章小結 167

練習題 167

第10章  CSS基礎知識 169

10.1　為什么要在網頁中加入CSS 169

10.1.1　什么是CSS 169

10.1.2　使用CSS的好處 170

10.1.3　如何編寫CSS 171

10.1.4　CSS的基本語法 171

10.1.5　瀏覽器與CSS 172

10.2  基本CSS選擇器 172

10.2.1　標簽選擇器 173

10.2.2　class選擇器 173

10.2.3　ID選擇器 174

10.3  在HTML中使用CSS 176

10.3.1  鏈接外部樣式表 176

10.3.2  行內方式 177

10.3.3  嵌入外部樣式表 177

10.3.4  定義內部樣式表 177

本章小結 178

練習題 178

第11章　用CSS設計豐富的文字

 效果 180

11.1　設計網頁中的文字樣式 180

11.1.1　字體 181

11.1.2　字號 182

11.1.3　加粗 183

11.1.4　樣式 184

11.1.5　變體屬性 185

11.1.6　文字修飾 186

11.2　設計文本的段落樣式 187

11.2.1　行高 187

11.2.2  對齊 188

11.2.3　縮進 190

11.2.4　單詞間距 191

11.2.5　首字下沉 192

11.2.6　大小寫轉換 192

11.3  綜合實例——用CSS排版網頁

 文字 193

本章小結 197

練習題 197

第12章  用CSS設計圖像和背景 199

12.1　設置網頁的背景 199

12.1.1　背景顏色：background-

 color 199

12.1.2　背景圖像：background-

 image 200

12.2　設置背景圖像的屬性 202

12.2.1　設置背景重復：

 background-repeat 202

12.2.2　設置固定背景：

 background-attachment 203

12.2.3　設置背景定位：

 background-position 204

12.3　設置網頁圖像的樣式 206

12.3.1　設置圖像邊框 206

12.3.2　圖文混合排版 208

12.4  綜合實例——給圖片添加邊框 209

本章小結 212

練習題 212

第13章　用CSS設計表格和表單

 樣式 214

13.1　網頁中的表格 214

13.1.1　表格對象標簽 214

13.1.2　在Dreamweaver中插入

 表格 215

13.1.3　設置表格的顏色 216

13.1.4　設置表格的邊框樣式 217

13.1.5　設置表格的陰影 219

13.2　網頁中的表單 219

13.2.1　表單對象 219

13.2.2　表單標簽 220

13.2.3　表單的布局設計 220

13.2.4　設置邊框樣式 224

13.2.5　設置背景樣式 224

13.2.6　設置輸入文本的樣式 225

13.3  綜合實例 225

綜合實例1——制作變換背景色的

表格 225

綜合實例2——設計表單的樣式 227

本章小結 229

練習題 230

第14章  用CSS制作鏈接與網站

 導航 231

14.1　鏈接標簽 231

14.1.1　a:link 231

14.1.2　a:visited 232

14.1.3　a:active 233

14.1.4　a:hover 234

14.2　創建按鈕式超鏈接 235

14.3　控制鼠標指針 237

14.4　設置項目列表樣式 238

14.4.1  列表符號類型：list-style-

 type 238

14.4.2  列表符號的混用 241

14.4.3  列表圖像屬性：list-style-

 image 242

14.4.4  列表綜合屬性：list-style 243

14.5　創建簡單的導航菜單 244

14.5.1　簡單的豎直排列菜單 244

14.5.2　橫豎自由轉換導航菜單 246

本章小結 247

練習題 247

第15章　CSS+DIV布局定位基礎 248

15.1  網站與Web標準 248

15.1.1　什么是Web標準 248

15.1.2　為什么要建立Web標準 249

15.1.3　怎樣改善現有網站 250

15.2　<div>標簽與<span>標簽 251

15.2.1　<div>概述 251

15.2.2　<div>與<span>的區別 252

本章小結 254

練習題 254

第16章　CSS盒子模型 255

16.1  “盒子”與“模型”的概念 255

16.2　邊框：border 257

16.2.1  邊框寬度：border-width 257

16.2.2  邊框顏色：border-color 258

16.2.3  邊框樣式：border-style 259

16.3　設置內邊距：padding 261

16.3.1  頂部屬性：padding-top 261

16.3.2  右側屬性：padding-right 262

16.3.3  底部屬性：padding-

 bottom 263

16.3.4  左側屬性：padding-left 264

16.4　設置外邊距：margin 265

16.4.1  頂部邊界屬性：margin-

 top 266

16.4.2  右側邊界屬性：margin-

 right 267

16.4.3  底部邊界屬性：margin-

 bottom 268

16.4.4  左側邊界屬性：margin-

 left 268

本章小結 269

練習題 270

第17章  盒子的浮動與定位 271

17.1　盒子的浮動 271

17.1.1　元素的浮動屬性：float 271

17.1.2　清除浮動屬性：clear 275

17.2  元素的定位 277

17.2.1  元素的定位屬性：

 position 277

17.2.2  上邊偏移屬性top、下邊偏移

 屬性bottom 279

17.2.3  左邊偏移屬性left、右邊偏移

 屬性right 280

17.3　盒子的定位 281

17.3.1　絕對定位：absolute 282

17.3.2　固定定位：fixed 284

17.3.3　相對定位：relative 286

17.3.4  靜態定位：static 288

17.4　z-index空間位置 289

本章小結 291

練習題 291

第18章  CSS+DIV布局方法 292

18.1　CSS布局理念 292

18.2  固定寬度布局 293

18.2.1  1列固定寬度 294

18.2.2  兩列固定寬度 295

18.2.3  圓角框 297

18.3  可變寬度布局 299

18.3.1  1列自適應 299

18.3.2  兩列寬度自適應 300

18.3.3  兩列右列寬度自適應 302

18.3.4  3列浮動中間寬度自適應 302

18.3.5  3行2列居中高度自適應 304

18.4  CSS布局與傳統的表格方式布局

 分析 306

本章小結 309

練習題 309

第19章  CSS 3入門基礎 310

19.1  預覽激動人心的CSS 3 310

19.1.1　CSS 3的發展歷史 310