《網站開發案例課堂：HTML+CSS3網頁設計與制作案例課堂》根據作者在長期教學中積累的豐富的網頁設計教學經驗，完整、詳盡地介紹HTML + CSS 3網頁樣式與布局的技術。
《網站開發案例課堂：HTML+CSS3網頁設計與制作案例課堂》分為22章，內容包括HTML與CSS 3網頁設計概述、網頁文檔的結構、網頁文本的設計、網頁色彩和圖像的設計、網頁超鏈接的設計、網頁表單的設計、網頁表格的設計、網頁音頻和視頻的設計、網頁圖形的繪制、CSS 3網頁樣式核心基礎、控制網頁字體和段落樣式、控制網頁圖片的顯示樣式、控制網頁背景和邊框樣式、控制表格與表單樣式、控制網頁超鏈接和鼠標樣式、控制網頁導航菜單樣式、CSS 3的高級特性、CSS定位與DIV布局核心技術、CSS + DIV盒子的浮動與定位、網頁布局剖析與制作，最后以兩個綜合性網站的設計為例進行講解。通過每章的實戰案例，讓讀者進一步鞏固所學的知識，提高綜合實戰能力。
《網站開發案例課堂：HTML+CSS3網頁設計與制作案例課堂》內容豐富、全面，圖文并茂，步驟清晰，通俗易懂，專業性強，使讀者能理解HTML + CSS 3網頁樣式與布局的技術，并能解決工作中的實際問題，真正做到“知其然，更知其所以然”。
《網站開發案例課堂：HTML+CSS3網頁設計與制作案例課堂》涉及面廣泛，幾乎涵蓋了HTML + CSS 3網頁樣式與布局的所有重要知識，適合所有的網頁設計初學者快速入門，同時也適合想全面了解HTML + CSS 3網頁樣式與布局的設計人員閱讀。
第1章 HTML與CSS 3網頁設計概述 1
1.1 網頁與網站 2
1.1.1 什么是網頁和網站 2
1.1.2 網頁的基本構成元素 2
1.2 HTML的基本概念 3
1.2.1 什么是HTML 4
1.2.2 HTML的發展歷程 4
1.2.3 HTML文件的基本結構 4
1.3 CSS的基本概念 5
1.3.1 什么是CSS 5
1.3.2 HTML與CSS的優缺點 5
1.3.3 瀏覽器對CSS 3的支持 6
1.4 HTML與CSS網頁的開發環境 6
1.4.1 記事本開發環境 6
1.4.2 Dreamweaver CS6開發環境 7
1.5 專家答疑 7
第2章 網頁文檔的結構 9
2.1 HTML文檔的基本結構 10
2.1.1 HTML頁面的整體結構 10
2.1.2 HTML 5新增的結構標記 10
2.2 HTML 5的基本標記詳解 11
2.2.1 文檔類型說明 11
2.2.2 HTML標記 11
2.2.3 頭標記head 11
2.2.4 網頁的主體標記body 14
2.2.5 頁面注釋標記 15
2.3 HTML 5語法的變化 15
2.3.1 標簽不再區分大小寫 15
2.3.2 允許屬性值不使用引號 16
2.3.3 允許部分屬性值的屬性省略 17
2.4 HTML 5文件的編寫方法 17
2.4.1 示例1——使用記事本手工編寫HTML 5 17
2.4.2 示例2——使用Dreamweaver CS6編寫HTML文件 18
2.5 使用瀏覽器查看HTML 5文件 20
2.5.1 示例3——查看頁面效果 20
2.5.2 示例4——查看源文件 21
2.6 綜合示例——符合W3C標準的HTML 5網頁 21
2.7 上機練習——簡單的HTML 5網頁 22
2.8 專家答疑 23
第3章 網頁文本的設計 25
3.1 在網頁中添加文本 26
3.1.1 普通文本的添加 26
3.1.2 特殊字符文本的添加 26
3.2 使用HTML 5標記添加特殊文本 28
3.2.1 添加重要文本 28
3.2.2 添加傾斜文本 29
3.2.3 添加上標和下標文本 29
3.2.4 設置文本旁注的文字大小 30
3.2.5 設置已刪除文本 30
3.2.6 定義文本的方向 31
3.3 使用HTML 5標記排版網頁文本 31
3.3.1 網頁段落文本換行 32
3.3.2 分段顯示網頁段落文本 32
3.3.3 設定網頁中的標題文本 33
3.3.4 為網頁添加水平線 34
3.4 文字列表 35
3.4.1 建立無序列表
3.5
3.4.2 建立有序列表
3.6
3.4.3 建立不同類型的無序列表 37
3.4.4 建立不同類型的有序列表 38
3.4.5 建立嵌套列表 39
3.4.6 自定義列表 39
3.5 綜合示例——制作簡單的純文本網頁 40
3.6 上機練習——制作旅游網網頁 41
3.7 專家答疑 42
第4章 網頁色彩和圖像的設計 43
4.1 網頁色彩的應用 44
4.1.1 認識色彩 44
4.1.2 網頁中色彩的搭配 45
4.1.3 網頁元素的色彩搭配 46
4.1.4 網頁顏色的使用風格 47
4.1.5 精彩配色賞析 48
4.2 網頁中的圖像 49
4.2.1 在網頁中插入圖像 49
4.2.2 設置圖像的寬度和高度 51
4.2.3 設置圖像的提示文字 51
4.2.4 將圖片設置為網頁背景 52
4.2.5 排列圖像 53
4.3 綜合示例——圖文并茂的房屋裝飾裝修網頁 54
4.4 上機練習——在線購物網站的產品展示 55
4.5 專家答疑 56
第5章 網頁超鏈接的設計 57
5.1 鏈接和路徑 58
5.1.1 超鏈接的概念 58
5.1.2 鏈接路徑URL 58
5.1.3 創建HTTP路徑 60
5.1.4 創建FTP路徑 61
5.1.5 創建電子郵件路徑 61
5.2 創建網頁文本鏈接 62
5.2.1 使用鏈接元素創建文本超鏈接(1) 62
5.2.2 使用鏈接元素創建文本超鏈接(2) 63
5.2.3 設置以新窗口顯示超鏈接頁面 64
5.2.4 鏈接到同一頁面的不同位置 65
5.3 創建網頁圖像鏈接 66
5.3.1 創建圖像超鏈接 67
5.3.2 創建圖像局部鏈接 67
5.4 創建浮動框架 68
5.5 綜合示例——用Dreamweaver
精確定位熱點區域 69
5.6 上機練習——創建熱點區域 71
5.7 專家答疑 72
第6章 網頁表單的設計 75
6.1 表單概述 76
6.2 在網頁中添加基本的表單元素 76
6.2.1 添加單行文本輸入框 77
6.2.2 添加多行文本輸入框 77
6.2.3 添加密碼輸入框 78
6.2.4 添加單選按鈕 79
6.2.5 添加復選框 80
6.2.6 添加下拉選擇框 80
6.2.7 添加普通按鈕 81
6.2.8 添加提交按鈕 82
6.2.9 添加重置按鈕 83
6.3 在網頁中添加高級表單元素 84
6.3.1 添加不能為空的網站網址輸入框 84
6.3.2 添加郵箱輸入框 85
6.3.3 添加時間類型表單 86
6.3.4 添加數值輸入框 87
6.3.5 添加滾動控件 87
6.3.6 添加不能為空的表單元素 88
6.4 綜合示例——創建用戶反饋表單 89
6.5 上機練習——制作用戶注冊表單 90
6.6 專家答疑 91
第7章 網頁表格的設計 93
7.1 表格的基本結構 94
7.2 創建表格 95
7.2.1 創建普通表格 95
7.2.2 創建一個帶有標題的表格 96
7.3 編輯表格 97
7.3.1 定義表格的邊框類型 97
7.3.2 定義表格的表頭 98
7.3.3 設置表格的背景 99
7.3.4 設置單元格的背景 101
7.3.5 合并單元格 102
7.3.6 排列單元格中的內容 106
7.3.7 設置單元格的行高與列寬 107
7.4 完整的表格標記 108
7.5 綜合示例——制作計算機報價表 109
7.6 上機練習——制作學生成績表 111
7.7 專家答疑 114
第8章 網頁音頻和視頻的設計 117
8.1 audio標簽 118
8.1.1 audio標簽概述 118
8.1.2 audio標簽的屬性 119
8.1.3 audio標簽瀏覽器的支持情況 119
8.2 在網頁中添加音頻文件 120
8.2.1 添加自動播放音頻文件 120
8.2.2 添加帶有控件的音頻文件 120
8.2.3 添加循環播放的音頻文件 121
8.2.4 添加預播放的音頻文件 121
8.3 video標簽 122
8.3.1 video標簽概述 122
8.3.2 video標簽的屬性 123
8.3.3 video標簽瀏覽器的支持情況 124
8.4 在網頁中添加視頻文件 124
8.4.1 添加自動播放的視頻文件 124
8.4.2 添加帶有控件的視頻文件 125
8.4.3 添加循環播放的視頻文件 125
8.4.4 添加預播放的視頻文件 126
8.4.5 設置視頻文件的高度和寬度 127
8.5 專家答疑 127
第9章 網頁圖形的繪制 129
9.1 添加canvas的步驟 130
9.2 繪制基本形狀 130
9.2.1 繪制矩形 131
9.2.2 繪制圓形 132
9.2.3 使用moveTo與lineTo繪制直線 133
9.2.4 使用bezierCurveTo繪制貝塞爾曲線 134
9.3 繪制漸變圖形 136
9.3.1 繪制線性漸變 136
9.3.2 繪制徑向漸變 137
9.4 繪制變形圖形 138
9.4.1 繪制平移效果的圖形 138
9.4.2 繪制縮放效果的圖形 139
9.4.3 繪制旋轉效果的圖形 140
9.4.4 繪制組合效果的圖形 141
9.4.5 繪制帶陰影的圖形 143
9.5 使用圖像 144
9.5.1 繪制圖像 145
9.5.2 平鋪圖像 146
9.5.3 裁剪圖像 147
9.5.4 圖像的像素處理 149
9.6 繪制文字 150
9.7 圖形的保存與恢復 152
9.7.1 保存與恢復狀態 152
9.7.2 保存文件 153
9.8 綜合示例——繪制火柴棒人物 154
9.9 上機練習——繪制商標 157
9.10 專家答疑 158
第10章 CSS 3網頁樣式核心基礎 161
10.1 CSS 3基礎語法概述 162
10.1.1 CSS 3的構造規則 162
10.1.2 CSS 3的常用單位 162
10.1.3 CSS 3的注釋 166
10.2 編輯CSS 3文件的方法 167
10.2.1 手工編寫CSS 3 167
10.2.2 用Dreamweaver編寫CSS 168
10.3 在HTML 5中使用CSS 3的方法 169
10.3.1 行內樣式 169
10.3.2 內嵌樣式 170
10.3.3 鏈接樣式 171
10.3.4 導入樣式 172
10.3.5 優先級問題 173
10.4 CSS 3的基本選擇器 176
10.4.1 標簽選擇器 176
10.4.2 類選擇器 177
10.4.3 ID選擇器 178
10.4.4 全局選擇器 179
10.5 綜合示例——制作炫彩網站Logo 179
10.6 上機練習——制作學生信息統計表 182
10.7 專家答疑 184
第11章 使用CSS 3控制網頁字體與段落樣式 185
11.1 豐富網頁文字樣式 186
11.1.1 設置文字的字體樣式 186
11.1.2 設置文字的字號 187
11.1.3 設置字體風格 188
11.1.4 設置加粗字體 189
11.1.5 將小寫字母轉為大寫字母 190
11.1.6 設置字體的復合屬性 191
11.1.7 設置字體顏色 192
11.2 網頁文本的高級樣式 193
11.2.1 設置文本陰影效果 193
11.2.2 設置文本溢出效果 194
11.2.3 設置文本的控制換行 195
11.2.4 保持字體尺寸不變 196
11.3 豐富網頁中的段落樣式 197
11.3.1 設置單詞之間的間隔 197
11.3.2 設置字符之間的間隔 198
11.3.3 設置文字的修飾效果 199
11.3.4 設置垂直對齊方式 200
11.3.5 轉換文本的大小寫 202
11.3.6 設置文本的水平對齊方式 203
11.3.7 設置文本的縮進效果 204
11.3.8 設置文本的行高 205
11.3.9 文本的空白處理 206
11.3.10 文本的反排 207
11.4 綜合示例——設置網頁標題 208
11.5 上機練習——制作新聞頁面 210
11.6 專家答疑 211
第12章 使用CSS 3控制網頁圖片的顯示樣式 213
12.1 縮放圖片 214
12.1.1 使用描述標記width和height縮放圖片 214
12.1.2 使用CSS 3中的max-width和max-height縮放圖片 214
12.1.3 使用CSS 3中的width和height縮放圖片 215
12.2 網頁圖片與文字的對齊方式 216
12.2.1 橫向對齊方式 216
12.2.2 縱向對齊方式 217
12.3 圖文混排樣式 219
12.3.1 設置文字環繞效果 219
12.3.2 設置圖片與文字的間距 220
12.4 綜合示例——制作學校宣傳單 222
12.5 上機練習——制作簡單的圖文混排網頁 224
12.6 專家答疑 225
第13章 使用CSS 3控制網頁背景與邊框的樣式 227
13.1 使用CSS 3美化背景 228
13.1.1 設置背景顏色 228
13.1.2 設置背景圖片 229
13.1.3 背景圖片重復 230
13.1.4 背景圖片顯示 231
13.1.5 背景圖片位置 233
13.1.6 背景圖片大小 234
13.1.7 背景顯示區域 236
13.1.8 背景圖像裁剪區域 237
13.1.9 背景復合屬性 238
13.2 使用CSS 3美化邊框 239
13.2.1 設置邊框的樣式 240
13.2.2 設置邊框的顏色 241
13.2.3 設置邊框的線寬 242
13.2.4 設置邊框的復合屬性 244
13.3 設置邊框的圓角效果 245
13.3.1 設置圓角邊框 245
13.3.2 指定兩個圓角半徑 246
13.3.3 繪制四個不同圓角邊框 247
13.3.4 繪制不同種類的邊框 249
13.4 綜合示例——制作簡單的公司主頁 250
13.5 上機練習——制作簡單的生活資訊主頁 253
13.6 專家答疑 255
第14章 使用CSS 3控制表格和表單樣式 257
14.1 美化表格的樣式 258
14.1.1 設置表格邊框的樣式 258
14.1.2 設置表格邊框的寬度 260
14.1.3 設置表格邊框的顏色 261
14.2 美化表單樣式 262
14.2.1 美化表單中的元素 262
14.2.2 美化提交按鈕 264
14.2.3 美化下拉菜單 265
14.3 綜合示例——制作用戶登錄頁面 267
14.4 上機練習——制作用戶注冊頁面 268
14.5 專家答疑 270
第15章 使用CSS 3控制網頁超鏈接和鼠標的樣式 273
15.1 使用CSS 3豐富超鏈接樣式 274
15.1.1 改變超鏈接的基本樣式 274
15.1.2 設置帶有提示信息的超鏈接 275
15.1.3 設置超鏈接的背景圖 276
15.1.4 設置超鏈接的按鈕效果 277
15.2 使用CSS 3豐富鼠標樣式 278
15.2.1 使用CSS 3控制鼠標箭頭 278
15.2.2 設置鼠標變幻式超鏈接 280
15.2.3 設置網頁的頁面滾動條 281
15.3 綜合示例1——圖片版本的超鏈接 283
15.4 綜合示例2——鼠標特效 284
15.5 上機練習——制作一個簡單的導航欄 287
15.6 專家答疑 288
第16章 使用CSS 3控制網頁導航菜單的樣式 291
16.1 使用CSS 3來豐富項目的列表樣式 292
16.1.1 豐富無序列表樣式 292
16.1.2 豐富有序列表樣式 293
16.1.3 豐富自定義列表樣式 295
16.1.4 制作圖片列表 296
16.1.5 縮進圖片列表 298
16.1.6 列表的復合屬性 299
16.2 使用CSS 3制作網頁菜單 300
16.2.1 制作無需表格的菜單 300
16.2.2 制作水平和垂直菜單 302
16.3 綜合示例——模擬搜搜導航欄 304
16.4 上機練習——將段落轉變成列表 307
16.5 專家答疑 309
第17章 掌握CSS 3的高級屬性 311
17.1 復合選擇器 312
17.1.1 “交集”選擇器 312
17.1.2 “并集”選擇器 313
17.1.3 后代選擇器 313
17.2 CSS 3新增的選擇器 314
17.2.1 屬性選擇器 315
17.2.2 結構偽類選擇器 316
17.2.3 UI元素狀態偽類選擇器 318
17.3 CSS的繼承特性 319
17.3.1 繼承關系 319
17.3.2 CSS繼承的運用 320
17.4 CSS的層疊特性 321
17.4.1 同一選擇器被多次定義的處理 321
17.4.2 同一標簽運用不同類型選擇器的處理 322
17.5 綜合示例——制作新聞菜單 323
17.6 專家答疑 326
第18章 CSS 3定位與DIV布局核心技術 327
18.1 了解塊級元素和行內級元素 328
18.1.1 塊級元素和行內級元素的應用 328
18.1.2 div元素和span元素的區別 330
18.2 盒子模型 331
18.2.1 盒子模型的概念 331
18.2.2 定義網頁的border區域 332
18.2.3 定義網頁的padding區域 333
18.2.4 定義網頁的margin區域 334
18.3 CSS 3新增的彈性盒模型 338
18.3.1 定義盒子的布局取向(box-orient) 338
18.3.2 定義盒子的布局順序(box-direction) 339
18.3.3 定義盒子布局的位置(box-ordinal-group) 341
18.3.4 定義盒子的彈性空間(box-flex) 342
18.3.5 管理盒子空間(box-pack和box-align) 344
18.3.6 盒子空間的溢出管理(box-lines) 346
18.4 綜合示例——圖文排版效果 347
18.5 上機練習——淘寶導購菜單 349
18.6 專家答疑 352
第19章 CSS 3 + DIV盒子的浮動與定位 353
19.1 定義DIV 354
19.1.1 什么是DIV 354
19.1.2 創建DIV 354
19.2 盒子的定位 355
19.2.1 靜態定位 355
19.2.2 相對定位 356
19.2.3 絕對定位 357
19.2.4 固定定位 358
19.2.5 盒子的浮動 359
19.3 其他CSS布局定位方式 361
19.3.1 溢出(overflow)定位 361
19.3.2 隱藏(visibility)定位 362
19.3.3 z-index空間定位 364
19.4 新增的CSS 3多列布局 366
19.4.1 設置列寬度 366
19.4.2 設置列數 367
19.4.3 設置列間距 369
19.4.4 設置列邊框樣式 370
19.5 綜合示例——定位網頁布局樣式 372
19.6 上機練習——制作陰影文字效果 374
19.7 專家答疑 375
第20章 網頁布局剖析與制作 377
20.1 固定寬度網頁剖析與布局 378
20.1.1 示例1——網頁單列布局模式 378
20.1.2 示例2——網頁1-2-1型布局模式 381
20.1.3 示例3——網頁1-3-1型布局模式 384
20.2 自動縮放網頁1-2-1型布局模式 387
20.2.1 示例4——“1-2-1”等比例變寬布局 387
20.2.2 示例5——“1-2-1”單列變寬布局 388
20.3 自動縮放網頁1-3-1型布局模式 389
20.3.1 示例6——“1-3-1”三列寬度等比例布局 390
20.3.2 示例7——“1-3-1”單側列寬度固定的變寬布局 390
20.3.3 示例8——“1-3-1”中間列寬度固定的變寬布局 393
20.3.4 示例9——“1-3-1”雙側列寬度固定的變寬布局396
20.3.5 示例10——“1-3-1”中列和左側列寬度固定的變寬布局 399
20.4 分列布局背景色的使用 402
20.4.1 示例11——設置固定寬度布局的列背景色 402
20.4.2 示例12——設置特殊寬度變化布局的列背景色 404
20.4.3 示例13——設置單列寬度變化布局的列背景色 405
20.4.4 示例14——設置多列等比例寬度變化布局的列背景 406
20.5 專家答疑 408
第21章 制作企業門戶類網頁 411
21.1 構思布局 412
21.1.1 設計分析 412
21.1.2 排版架構 412
21.2 模塊分割 413
21.2.1 Logo與導航菜單 413
21.2.2 左側的文本介紹 415
21.2.3 右側的導航鏈接 417
21.2.4 版權信息 418
21.3 整體調整 419
第22章 制作在線購物類網頁 421
22.1 整體布局 422
22.1.1 設計分析 422
22.1.2 排版架構 422
22.2 模塊分割 423
22.2.1 Logo與導航區 423
22.2.2 Banner與資訊區 425
22.2.3 產品類別區域 427
22.2.4 頁腳區域 429
22.3 專家答疑 429
第1章
HTML與CSS 3
網頁設計概述
目前，網頁設計已經成為學習計算機的重要內容之一。制作網頁可采用可視化編輯軟件，但是無論采用哪一種網頁編輯軟件，都離不開HTML與CSS的相關內容，本章就來介紹HTML與CSS 3網頁設計的相關概述內容。
1.1 網頁與網站
打開一個網站時，首先呈現在讀者面前的就是網頁，網頁上可以有圖片、文字、音頻和視頻等構成網站的基本元素，網頁是承載各種網站應用的平臺。
1.1.1 什么是網頁和網站
網頁（Web Page）是一個文件，它存放在世界上某個角落的某一部計算機中，而這部計算機必須是與互聯網相連的。網頁是依據網址（URL，例如www.sohu.com）來識別和訪問的，當在瀏覽器的地址欄中輸入網址后，經過一段時間內復雜而又快速的程序處理過程，網頁文件會被傳送到瀏覽者面前的計算機中，然后再通過瀏覽器解釋網頁內容，將其展現到讀者的眼前。網頁通常是HTML格式的（文件擴展名為.html或.htm）。
網站（Website）是指在因特網上，根據一定的規則，使用HTML等工具制作的用于展示特定內容的相關網頁的集合，例如，常見的網站有搜狐、新浪等。簡單地說，網站是一種通信工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的資訊信息，或者利用網站來提供相關的網絡服務。衡量一個網站的性能時，通常從網站空間大小、網站位置、網站連接速度（俗稱“網速”）、網站軟件配置、網站提供的服務等幾方面來考慮，最直接的衡量標準是這個網站的真實流量。
在一個網站中，網頁按照類型不同，可以分為兩種，主頁和普通網頁。主頁（Home Page）也叫首頁，是進入一個網站的開始頁面，就像搜狐的首頁一樣，如圖1-1所示。
圖1-1 搜狐的首頁
1.1.2 網頁的基本構成元素
在Internet發展的早期，網站只能保存單純的文本。后來，經過一些年的發展，圖像、聲音、動畫、視頻和3D等技術已經在因特網上廣泛應用，網站發展成如今圖文并茂的樣子，并且通過動態網頁技術，用戶可以與其他用戶或者網站管理者進行交流。
網頁常見的構成元素有文本、圖像、超鏈接、表格、表單、導航欄、動畫、框架等，如圖1-2所示。
圖1-2 網頁常見的構成元素
（1） 文本：網頁中的信息主要以文本為主。在網頁中可以通過字體、大小、顏色、底紋、邊框等來設計文本的屬性。
（2） 圖像：有了圖像，才能看到豐富多彩的網頁。網頁上圖片為JPG或GIF格式。通常圖片會被運用在Logo、Banner和背景圖上。Logo是代表企業形象或欄目內容的標志性圖片，一般在網頁的左上角。Banner是用于宣傳網站內某個欄目或活動的廣告，一般要求制作成動畫形式，達到宣傳的效果。Banner一般位于網頁的頂部和底部。在網頁頁面中比較常用的圖片還包括背景圖，但要慎用背景圖片，除非設計者確信背景圖可以給網頁增加不少魅力。
（3） 超鏈接：超鏈接是網站的靈魂，是從一個網頁指向另一個目的端的鏈接。目的端通常是一個網頁，但也可以是一幅圖片、一個電子郵件地址、一個文件、一個程序或者是本網頁中的其他位置。超鏈接本身可以是文字或者圖片。
（4） 表格：表格是網頁中展現數據的主要方式，能夠以表的形式顯示數據信息。表格也可以用來進行網頁排版，在以往的很長一段時間內，使用表格排版是網站的首選方式。
（5） 表單：表單是用來收集站點訪問者信息的集合。站點訪問者填寫表單的方式是輸入文本、單擊單選按鈕和復選框，以及從下拉菜單中選擇選項。在填好表單之后，站點訪問者便送出所輸入的數據，該數據就會根據網站設計者所設置的表單處理程序，以各種不同的方式進行處理。
（6） 導航欄：導航欄是一組超鏈接，一般用于網站各部分內容間相互鏈接的指引。導航欄可以是按鈕或者文本超鏈接。
（7） 動畫：動畫是網頁上最活躍的元素，包括GIF動畫和Flash動畫。
網頁中除了這些最基本元素外，還包括橫幅廣告、字幕、懸停按鈕、計數器、音頻、視頻等。
1.2 HTML的基本概念
因特網上的信息是以網頁的形式展示給用戶的，因此，網頁是網絡信息傳遞的載體。
網頁文件是用一種標簽語言書寫的，這種語言稱為超文本標記語言（Hyper Text Markup Language，HTML）。
1.2.1 什么是HTML
HTML不是一種編程語言，而是一種描述性的標記語言，用于描述超文本中的內容和結構。HTML最基本的語法是<標記符>。標記符通常都是成對使用，有一個開頭標記和一個結束標記。結束標記只是在開頭標記的前面加一個斜杠“/”。當瀏覽器收到HTML文件后，就會解釋里面的標記符，然后把標記符相對應的功能表達出來。
例如，在HTML中，用
標記符來定義一個段落，用來定義一個換行符。當瀏覽器遇到
標記符時，會把該標記中的內容自動形成一個段落。當遇到
標記符時，會自動換行，并且該標記符后的內容會從一個新行開始。這里的
標記符是單標記，沒有結束標記，標記中的“/”符號可以省略，但為了代碼的規范性，一般建議加上。
1.2.2 HTML的發展歷程
HTML主要用于描述超文本中內容的顯示方式。標記語言從誕生到今天，經歷了十幾年，發展過程中也有很多曲折，經歷的版本及發布日期如表1-1所示。
表1-1 HTML的發展歷程
版 本 發布日期 說 明
超文本標記語言（第一版） 1993年6月 作為互聯網工程工作小組（IETF）的工作草案發布
（并非標準）
HTML 2.0 1995年11月 作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布已經過時
HTML 3.2 1996年1月14日 W3C推薦標準
HTML 4.0 1997年12月18日 W3C推薦標準
HTML 4.01 1999年12月24日 微小改進，W3C推薦標準
ISO HTML 2000年5月15日 基于嚴格的HTML 4.01語法，是國際標準化組織和國際電工委員會的標準
XHTML 1.0 2000年1月26日 W3C推薦標準，后來經過修訂，于2002年8月1日重新發布
XHTML 1.1 2001年5月31日 較1.0有微小改進
XHTML 2.0草案 沒有發布 2009年，W3C停止了XHTML 2.0工作組的工作
HTML 5 2012年12月17日 萬維網聯盟（W3C）正式宣布凝結了大量網絡工作者心血的HTML 5規范已經正式定稿
1.2.3 HTML文件的基本結構
完整的HTML文件包括標題、段落、列表、表格、繪制的圖形以及各種嵌入對象，這些對象統稱為HTML元素。
一個HTML文件的基本結構如下：
文件開始的標記
文檔頭部結束的標記
文件主體開始的標記
...文檔主體內容
文件主體結束的標記
文件結束的標記
從上面的代碼可以看出，在HTML文件中，所有的標記都是相對應的，開頭標記的形式為<標記>，結束標記的形式為，在這兩個標記中間，放置相應的內容。
1.3 CSS的基本概念
一個美觀大方且簡約的頁面以及高訪問量的網站，是網頁設計者的追求。然而，僅通過HTML實現是非常困難的，HTML語言僅僅定義了網頁的結構，對于文本樣式沒有過多涉及。這就需要一種技術對頁面的布局、字體、顏色、背景和其他圖文效果的實現提供更加精確的控制，這種技術就是CSS。
1.3.1 什么是CSS
CSS（Cascading Style Sheet，“層疊樣式表”或“級聯樣式表”）是一組格式設置規則，用于控制Web頁面的外觀。
通過使用CSS樣式設置頁面的格式，可將頁面的內容與表現形式分開。
CSS最早是1996年由W3C審核通過并推薦使用的，CSS目前最新版本為CSS 3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象做盒模型控制的能力，并能夠進行初步的交互設計，是目前最優秀的基于文本展示表現的設計語言。
1.3.2 HTML與CSS的優缺點
（1） HTML發展到今天，存在三個主要缺點：
? HTML代碼不規范、臃腫，需要足夠智能和龐大的瀏覽器才能夠正確顯示HTML。
? 數據與表現混雜，當頁面要改變顯示時，就必須重新制作HTML。
? 不利于搜索引擎搜索。
（2） HTML也有兩個顯著的優點：
? 使用Table的表現方式不需要考慮瀏覽器兼容問題。
? 簡單易學，易于推廣。
（3） CSS的產生恰好彌補了HTML的缺點，主要表現在以下幾個方面。
① 表現與結構分離
CSS 2.0從真正意義上實現了設計代碼與內容的分離，它將設計部分剝離出來并放在一個獨立的樣式文件中，HTML文件中只存放文本信息，這樣的頁面對搜索引擎更加友好。
② 提高頁面瀏覽速度
對于同一個頁面視覺效果，采用CSS布局的頁面容量要比Table 編碼的頁面文件容量小得多，前者一般只有后者的1/2。瀏覽器不用去編譯大量冗長的標簽。
③ 易于維護和改版
開發者只要簡單修改幾個CSS 文件，就可以重新設計整個網站的頁面。
④ 繼承性能優越（層疊處理）
CSS代碼在瀏覽器的解析順序上會根據CSS的級別進行，它按照對同一元素定義的先后來應用多個樣式。良好的CSS代碼設計可以使代碼之間產生繼承關系，能夠達到最大限度的代碼重用，從而降低代碼量及維護成本。
⑤ 易于被搜索引擎搜索
由于CSS代碼規范整齊，且與網頁內容分離，所以引擎搜索時僅分析內容部分即可。
（4） CSS的缺點在于，需要考慮瀏覽器兼容性的問題，比較難學。
1.3.3 瀏覽器對CSS 3的支持
目前，CSS 3是眾多瀏覽器普遍支持的最完善的版本，最新的瀏覽器均支持該版本。使用CSS 3樣式設計出來的網頁，在眾多平臺及瀏覽器下對樣式的表現最為接近，其中IE瀏覽器對CSS的支持相對比較全面，所以本書中的示例大多是在IE瀏覽器下運行的。
1.4 HTML與CSS網頁的開發環境
HTML與CSS文件是純文本格式文件，所以在編輯HTML和CSS時，就有了多種選擇，可以使用一些簡單的純文本編輯工具，例如記事本等，同樣可以選擇專業的CSS 3編輯工具，例如Dreamweaver等。
1.4.1 記事本開發環境
單擊Windows桌面上的“開始”按鈕，選擇“所有程序”→“附件”→“記事本”命令，打開記事本程序，如圖1-3所示。
圖1-3 打開記事本程序
在記事本程序中輸入相關的HTML和CSS代碼，然后將記事本文件以擴展名為.html或.htm進行保存，并在瀏覽器中打開文檔以查看效果。
1.4.2 Dreamweaver CS6開發環境
使用記事本可以編寫HTML文件，但是編寫效率太低，對于語法錯誤及格式都沒有提示，因此，很多專門制作網頁的工具彌補了這種缺陷。其中，Adobe公司的Dreamweaver CS6用戶界面非常友好，是一款非常優秀的網頁開發工具，并深受廣大用戶的喜愛。Dreamweaver CS6的主界面如圖1-4所示。
圖1-4 Dreamweaver CS6的主界面
1.5 專 家 答 疑
疑問1：為何使用記事本編輯的HTML文件無法在瀏覽器中預覽，而是直接在記事本中打開？
很多初學者在保存文件時，沒有將HTML文件的擴展名.html或.htm作為文件的后綴，導致文件還是以.txt為擴展名，因此，無法在瀏覽器中查看。如果讀者是通過單擊鼠標右鍵創建記事本文件，在給文件重命名時，一定要以.html或.htm作為文件的后綴。特別要注意的是，當Windows系統的擴展名隱藏時，更容易出現這樣的錯誤。讀者可以在“文件夾選項”對話框中查看是否顯示擴展名。
疑問2：如何顯示或隱藏Dreamweaver CS6的歡迎屏幕？
Dreamweaver CS6歡迎屏幕可以幫助使用者快速進行打開文件、新建文件和獲得相關幫助的操作。如果讀者不希望顯示該窗口，可以按下Ctrl+U組合鍵，在彈出的窗口中，選擇左側的“常規”頁，將右側“文檔選項”部分的“顯示歡迎屏幕”取消勾選。
……
新書資訊