第1章 初識HTML 5 1
1.1 HTML 5的基本概念 2
1.1.1 HTML的發(fā)展歷程 2
1.1.2 什么是HTML 5 2
1.1.3 HTML 5文件的基本結(jié)構(gòu) 3
1.2 HTML 5的優(yōu)勢 3
1.2.1 解決了跨瀏覽器問題 3
1.2.2 新增了多個新特性 3
1.2.3 用戶優(yōu)先的原則 4
1.2.4 化繁為簡的優(yōu)勢 5
1.3 HTML 5文件的編寫方法 5
1.3.1 使用記事本手工編寫HTML 5 5
1.3.2 使用Dreamweaver CS6編寫HTML文件 6
1.4 使用瀏覽器查看HTML 5文件 11
1.4.1 查看頁面效果 11
1.4.2 查看源文件 11
1.5 疑難解惑 12


第2章 HTML 5網(wǎng)頁的文檔結(jié)構(gòu) 13
2.1 HTML 5文件的基本結(jié)構(gòu) 14
2.1.1 HTML 5頁面的整體結(jié)構(gòu) 14
2.1.2 HTML 5新增的結(jié)構(gòu)標(biāo)記 14
2.2 HTML 5基本標(biāo)記詳解 15
2.2.1 文檔類型說明 15
2.2.2 HTML標(biāo)記 15
2.2.3 頭標(biāo)記head 16
2.2.4 網(wǎng)頁的主體標(biāo)記body 18
2.2.5 頁面注釋標(biāo)記 19
2.3 HTML 5語法的變化 20
2.3.1 標(biāo)簽不再區(qū)分大小寫 20
2.3.2 允許屬性值不使用引號 20
2.3.3 允許部分屬性值的屬性省略 21
2.4 綜合示例——符合W3C標(biāo)準(zhǔn)的HTML 5網(wǎng)頁 21
2.5 上機(jī)練習(xí)——簡單的HTML 5網(wǎng)頁 23
2.6 疑難解惑 23


第3章 HTML 5網(wǎng)頁中的文本和圖像 25
3.1 在網(wǎng)頁中添加文本 26
3.1.1 普通文本的添加 26
3.1.2 特殊字符文本的添加 26
3.1.3 使用HTML 5標(biāo)記添加特殊文本 28
3.2 文本排版 30
3.2.1 換行標(biāo)記
3.0
3.2.2 段落標(biāo)記
3.1
3.2.3 標(biāo)題標(biāo)記
3.1
3.3 文字列表 32
3.3.1 建立無序列表
32
3.3.2 建立有序列表
3.4
3.3.3 建立不同類型的無序列表 35
3.3.4 建立不同類型的有序列表 36
3.3.5 建立嵌套列表 36
3.3.6 自定義列表 37
3.4 網(wǎng)頁中的圖像 38
3.4.1 在網(wǎng)頁中插入圖像 38
3.4.2 設(shè)置圖像的寬度和高度 40
3.4.3 設(shè)置圖像的提示文字 41
3.4.4 將圖片設(shè)置為網(wǎng)頁背景 42
3.4.5 排列圖像 42
3.5 綜合示例——圖文并茂的房屋裝飾裝修網(wǎng)頁 43
3.6 上機(jī)練習(xí)——在線購物網(wǎng)站的產(chǎn)品展示效果 44
3.7 疑難解惑 45


第4章 用HTML 5建立超鏈接 47
4.1 URL的概念 48
4.1.1 URL的格式 48
4.1.2 URL的類型 48
4.2 超鏈接標(biāo)記 49
4.2.1 設(shè)置文本和圖片的超鏈接 49
4.2.2 創(chuàng)建指向不同目標(biāo)類型的超鏈接 50
4.2.3 設(shè)置以新窗口顯示超鏈接頁面 52
4.2.4 鏈接到同一頁面的不同位置 53
4.3 創(chuàng)建熱點區(qū)域 54
4.4 創(chuàng)建浮動框架 56
4.5 綜合示例——用Dreamweaver精確定位熱點區(qū)域 57
4.6 上機(jī)練習(xí)——創(chuàng)建熱點區(qū)域 59
4.7 疑難解惑 60


第5章 用HTML 5創(chuàng)建表格 61
5.1 表格的基本結(jié)構(gòu) 62
5.2 創(chuàng)建表格 63
5.2.1 創(chuàng)建普通表格 63
5.2.2 創(chuàng)建一個帶有標(biāo)題的表格 64
5.3 編輯表格 65
5.3.1 定義表格的邊框類型 65
5.3.2 定義表格的表頭 66
5.3.3 設(shè)置表格背景 67
5.3.4 設(shè)置單元格的背景 69
5.3.5 合并單元格 70
5.3.6 排列單元格中的內(nèi)容 74
5.3.7 設(shè)置單元格的行高與列寬 75
5.4 完整的表格標(biāo)記 76
5.5 綜合示例——制作計算機(jī)報價表 77
5.6 上機(jī)練習(xí)——制作學(xué)生成績表 79
5.7 疑難解惑 82


第6章 使用HTML 5創(chuàng)建表單 85
6.1 表單概述 86
6.2 表單基本元素的使用 86
6.2.1 單行文本輸入框text 87
6.2.2 多行文本輸入框textarea 87
6.2.3 密碼域password 88
6.2.4 單選按鈕radio 89
6.2.5 復(fù)選框checkbox 90
6.2.6 列表框select 91
6.2.7 普通按鈕button 91
6.2.8 提交按鈕submit 92
6.2.9 重置按鈕reset 93
6.3 表單高級元素的使用 94
6.3.1 url屬性的使用 94
6.3.2 email屬性的使用 95
6.3.3 date和time屬性的使用 96
6.3.4 number屬性的使用 97
6.3.5 range屬性的使用 97
6.3.6 required屬性的使用 98
6.4 綜合示例——創(chuàng)建用戶反饋表單 99
6.5 上機(jī)練習(xí)——制作用戶注冊表單 100
6.6 疑難解惑 101


第7章 使用HTML 5繪制圖形 103
7.1 添加canvas的步驟 104
7.2 繪制基本形狀 104
7.2.1 繪制矩形 105
7.2.2 繪制圓形 106
7.2.3 使用moveTo與lineTo繪制直線 107
7.2.4 使用bezierCurveTo繪制貝濟(jì)埃曲線 108
7.3 繪制漸變圖形 109
7.3.1 繪制線性漸變 109
7.3.2 繪制徑向漸變 111
7.4 繪制變形圖形 112
7.4.1 繪制平移效果的圖形 112
7.4.2 繪制縮放效果的圖形 113
7.4.3 繪制旋轉(zhuǎn)效果的圖形 114
7.4.4 繪制組合效果的圖形 115
7.4.5 繪制帶陰影的圖形 117
7.5 使用圖像 118
7.5.1 繪制圖像 118
7.5.2 平鋪圖像 120
7.5.3 裁剪圖像 121
7.5.4 圖像的像素化處理 123
7.6 繪制文字 125
7.7 圖形的保存與恢復(fù) 126
7.7.1 保存與恢復(fù)狀態(tài) 126
7.7.2 保存文件 128
7.8 綜合示例——繪制火柴棒人物 129
7.9 上機(jī)練習(xí)——繪制商標(biāo) 132
7.10 疑難解惑 133


第8章 HTML 5中的音頻和視頻 135
8.1 audio標(biāo)簽概述 136
8.1.1 audio標(biāo)簽概述 136
8.1.2 audio標(biāo)簽的屬性 137
8.1.3 audio標(biāo)簽瀏覽器的支持情況 137
8.2 在網(wǎng)頁中添加音頻文件 138
8.2.1 添加自動播放音頻文件 138
8.2.2 添加帶有控件的音頻文件 138
8.2.3 添加循環(huán)播放的音頻文件 139
8.2.4 添加預(yù)播放的音頻文件 139
8.3 video標(biāo)簽概述 140
8.3.1 video標(biāo)簽概述 140
8.3.2 video標(biāo)簽的屬性 141
8.3.3 瀏覽器對video標(biāo)簽的支持情況 142
8.4 在網(wǎng)頁中添加視頻文件 142
8.4.1 添加自動播放的視頻文件 142
8.4.2 添加帶有控件的視頻文件 143
8.4.3 添加循環(huán)播放的視頻文件 143
8.4.4 添加預(yù)播放的視頻文件 144
8.4.5 設(shè)置視頻文件的高度與寬度 145
8.5 疑難解惑 146


第9章 CSS 3概述與基本語法 147
9.1 CSS 3概述 148
9.1.1 CSS 3的功能 148
9.1.2 瀏覽器與CSS 3 148
9.1.3 CSS 3的基礎(chǔ)語法 149
9.1.4 CSS 3的常用單位 149
9.2 編輯和瀏覽CSS 3 154
9.2.1 手工編寫CSS 3 154
9.2.2 用Dreamweaver編寫CSS 155
9.3 在HTML 5中使用CSS 3的方法 156
9.3.1 行內(nèi)樣式 156
9.3.2 內(nèi)嵌樣式 157
9.3.3 鏈接樣式 159
9.3.4 導(dǎo)入樣式 160
9.3.5 優(yōu)先級問題 161
9.4 CSS 3的常用選擇器 163
9.4.1 標(biāo)簽選擇器 164
9.4.2 類選擇器 164
9.4.3 ID選擇器 165
9.4.4 全局選擇器 166
9.4.5 組合選擇器 167
9.4.6 選擇器繼承 168
9.4.7 偽類選擇器 169
9.5 選擇器聲明 170
9.5.1 集體聲明 170
9.5.2 多重嵌套聲明 171
9.6 綜合示例——制作炫彩網(wǎng)站Logo 172
9.7 上機(jī)練習(xí)——制作學(xué)生信息統(tǒng)計表 175
9.8 疑難解惑 176


第10章 使用CSS 3美化網(wǎng)頁字體與段落 179
10.1 美化網(wǎng)頁文字 180
10.1.1 設(shè)置文字的字體 180
10.1.2 設(shè)置文字的字號 181
10.1.3 設(shè)置字體風(fēng)格 182
10.1.4 設(shè)置加粗字體 183
10.1.5 將小寫字母轉(zhuǎn)為大寫字母 184
10.1.6 設(shè)置字體的復(fù)合屬性 185
10.1.7 設(shè)置字體顏色 186
10.2 設(shè)置文本的高級樣式 187
10.2.1 設(shè)置文本陰影效果 187
10.2.2 設(shè)置文本的溢出效果 188
10.2.3 設(shè)置文本的控制換行 189
10.2.4 保持字體尺寸不變 190
10.3 美化網(wǎng)頁中的段落 191
10.3.1 設(shè)置單詞之間的間隔 191
10.3.2 設(shè)置字符之間的間隔 192
10.3.3 設(shè)置文字的修飾效果 193
10.3.4 設(shè)置垂直對齊方式 194
10.3.5 轉(zhuǎn)換文本的大小寫 196
10.3.6 設(shè)置文本的水平對齊方式 197
10.3.7 設(shè)置文本的縮進(jìn)效果 198
10.3.8 設(shè)置文本的行高 199
10.3.9 文本的空白處理 200
10.3.10 文本的反排 201
10.4 綜合示例——設(shè)置網(wǎng)頁標(biāo)題 203
10.5 上機(jī)練習(xí)——制作新聞頁面 204
10.6 疑難解惑 205


第11章 使用CSS 3美化網(wǎng)頁圖片 207
11.1 圖片縮放 208
11.1.1 通過描述標(biāo)記width和height縮放圖片 208
11.1.2 使用CSS 3中的max-width和max-height縮放圖片 208
11.1.3 使用CSS 3中的width和height縮放圖片 209
11.2 設(shè)置圖片的對齊方式 210
11.2.1 設(shè)置圖片的橫向?qū)�齊 210
11.2.2 設(shè)置圖片縱向?qū)�齊 211
11.3 圖文混排 213
11.3.1 設(shè)置文字環(huán)繞效果 213
11.3.2 設(shè)置圖片與文字的間距 214
11.4 綜合示例——制作學(xué)校宣傳單 216
11.5 上機(jī)練習(xí)——制作簡單的圖文混排網(wǎng)頁 218
11.6 疑難解惑 219


第12章 使用CSS 3美化網(wǎng)頁背景與邊框 221
12.1 使用CSS 3美化背景 222
12.1.1 設(shè)置背景顏色 222
12.1.2 設(shè)置背景圖片 223
12.1.3 背景圖片重復(fù) 224
12.1.4 背景圖片顯示 226
12.1.5 背景圖片的位置 227
12.1.6 背景圖片的大小 229
12.1.7 背景的顯示區(qū)域 230
12.1.8 背景圖像的裁剪區(qū)域 232
12.1.9 背景復(fù)合屬性 233
12.2 使用CSS 3美化邊框 234
12.2.1 設(shè)置邊框的樣式 234
12.2.2 設(shè)置邊框的顏色 236
12.2.3 設(shè)置邊框的線寬 237
12.2.4 設(shè)置邊框的復(fù)合屬性 238
12.3 設(shè)置邊框的圓角效果 239
12.3.1 設(shè)置圓角邊框 239
12.3.2 指定兩個圓角半徑 240
12.3.3 繪制四個不同角的圓角邊框 241
12.3.4 繪制不同種類的邊框 243
12.4 綜合示例——制作簡單的公司主頁 245
12.5 上機(jī)練習(xí)——制作簡單的生活資訊主頁 248
12.6 疑難解惑 249


第13章 使用CSS 3美化超級鏈接和鼠標(biāo) 251
13.1 使用CSS 3來美化超鏈接 252
13.1.1 改變超級鏈接的基本樣式 252
13.1.2 設(shè)置帶有提示信息的超級鏈接 253
13.1.3 設(shè)置超級鏈接的背景圖 254
13.1.4 設(shè)置超級鏈接的按鈕效果 255
13.2 使用CSS 3美化鼠標(biāo)特效 256
13.2.1 使用CSS 3控制鼠標(biāo)箭頭 256
13.2.2 設(shè)置鼠標(biāo)變幻式超鏈接 258
13.2.3 設(shè)置網(wǎng)頁頁面滾動條 259
13.3 綜合示例1——圖片版本的超級鏈接 261
13.4 綜合示例2——關(guān)于鼠標(biāo)特效 262
13.5 上機(jī)練習(xí)——制作一個簡單的導(dǎo)航欄 264
13.6 疑難解惑 266


第14章 使用CSS 3美化表格和表單的樣式 267
14.1 美化表格的樣式 268
14.1.1 設(shè)置表格邊框的樣式 268
14.1.2 設(shè)置表格邊框的寬度 270
14.1.3 設(shè)置表格邊框的顏色 271
14.2 美化表單樣式 272
14.2.1 美化表單中的元素 272
14.2.2 美化提交按鈕 274
14.2.3 美化下拉菜單 276
14.3 綜合示例——制作用戶登錄頁面 277
14.4 上機(jī)練習(xí)——制作用戶注冊頁面 279
14.5 疑難解惑 281


第15章 使用CSS 3美化網(wǎng)頁菜單 283
15.1 使用CSS 3美化項目列表 284
15.1.1 美化無序列表 284
15.1.2 美化有序列表 285
15.1.3 美化自定義列表 287
15.1.4 制作圖片列表 288
15.1.5 縮進(jìn)圖片列表 289
15.1.6 列表的復(fù)合屬性 291
15.2 使用CSS 3制作網(wǎng)頁菜單 292
15.2.1 制作無需表格的菜單 292
15.2.2 制作水平和垂直菜單 294
15.3 綜合示例——模擬soso導(dǎo)航欄 297
15.4 上機(jī)練習(xí)——將段落轉(zhuǎn)變成列表 299
15.5 疑難解惑 301


第16章 使用CSS 3濾鏡美化網(wǎng)頁元素 303
16.1 濾鏡概述 304
16.2 基本濾鏡 304
16.2.1 通道(Alpha)濾鏡 305
16.2.2 模糊(Blur)濾鏡 307
16.2.3 色彩(Chroma)濾鏡 308
16.2.4 投影(DropShadow)濾鏡 309
16.2.5 水平翻轉(zhuǎn)(FlipH)濾鏡 311
16.2.6 垂直翻轉(zhuǎn)(FlipV)濾鏡 311
16.2.7 光暈(Glow)濾鏡 312
16.2.8 灰度(Gray)濾鏡 313
16.2.9 反相(Invert)濾鏡 314
16.2.10 遮罩(Mask)濾鏡 315
16.2.11 波浪(Wave)濾鏡 315
16.2.12 陰影(Shadow)濾鏡 317
16.2.13 X-ray濾鏡 318
16.3 高級濾鏡 318
16.3.1 光照(Light)濾鏡 319
16.3.2 漸隱(BlendTrans)濾鏡 320
16.3.3 切換(RevealTrans)濾鏡 322
16.4 疑難解惑 324


第17章 JavaScript編程基本知識 325
17.1 認(rèn)識JavaScript 326
17.1.1 什么是JavaScript 326
17.1.2 JavaScript的特點 326
17.1.3 JavaScript與Java的區(qū)別 327
17.1.4 JavaScript的版本 328
17.2 JavaScript基本語法的應(yīng)用 329
17.2.1 注釋的應(yīng)用 329
17.2.2 語句的應(yīng)用 331
17.2.3 語句塊的應(yīng)用 332
17.3 JavaScript的數(shù)據(jù)結(jié)構(gòu) 333
17.3.1 認(rèn)識標(biāo)識符 333
17.3.2 認(rèn)識關(guān)鍵字 333
17.3.3 認(rèn)識常量 334
17.3.4 認(rèn)識變量及其應(yīng)用 334
17.4 JavaScript數(shù)據(jù)類型的使用 336
17.4.1 typeof運(yùn)算符的使用 336
17.4.2 undefined類型的使用 338
17.4.3 null類型的使用 338
17.4.4 Boolean類型的使用 339
17.4.5 Number類型的使用 340
17.4.6 String類型的使用 341
17.4.7 Object類型的使用 342
17.5 JavaScript運(yùn)算符的使用 342
17.5.1 算術(shù)運(yùn)算符 342
17.5.2 比較運(yùn)算符 344
17.5.3 位運(yùn)算符 345
17.5.4 邏輯運(yùn)算符 346
17.5.5 條件運(yùn)算符 347
17.5.6 賦值運(yùn)算符 348
17.5.7 運(yùn)算符的優(yōu)先級 350
17.6 綜合示例——一個簡單的JavaScript程序 351
17.7 疑難解惑 352


第18章 JavaScript的程序控制結(jié)構(gòu)與語句 353
18.1 賦值語句 354
18.2 條件判斷語句 354
18.2.1 if語句 354
18.2.2 if-else語句 355
18.2.3 if ... else if語句 356
18.2.4 if語句的嵌套 357
18.2.5 switch語句 359
18.3 循環(huán)控制語句 360
18.3.1 while語句 360
18.3.2 do-while語句 361
18.3.3 for語句 363
18.4 跳轉(zhuǎn)語句 364
18.4.1 break語句 364
18.4.2 continue語句 365
18.5 綜合示例——在頁面中顯示距離2015年元旦的天數(shù) 366
18.6 上機(jī)練習(xí)——制作一個簡易乘法表 367
18.7 疑難解惑 368


第19章 JavaScript中的函數(shù) 369
19.1 函數(shù)的簡介 370
19.2 調(diào)用函數(shù) 370
19.2.1 函數(shù)的簡單調(diào)用 370
19.2.2 在表達(dá)式中調(diào)用 371
19.2.3 在事件響應(yīng)中調(diào)用函數(shù) 372
19.2.4 通過鏈接調(diào)用函數(shù) 373
19.3 JavaScript中常用的函數(shù) 374
19.3.1 嵌套函數(shù) 374
19.3.2 遞歸函數(shù) 375
19.3.3 內(nèi)置函數(shù) 376
19.4 綜合示例——購物簡易計算器 384
19.5 上機(jī)練習(xí)——制作閃爍圖片 386
19.6 疑難解惑 387


第20章 JavaScript的內(nèi)置對象 389
20.1 字符串對象 390
20.1.1 創(chuàng)建字符串對象的方法 390
20.1.2 字符串對象常用屬性的應(yīng)用 390
20.1.3 字符串對象常用方法的應(yīng)用 391
20.2 數(shù)學(xué)對象 394
20.2.1 創(chuàng)建Math對象的方法 394
20.2.2 數(shù)學(xué)對象屬性的應(yīng)用 394
20.2.3 數(shù)學(xué)對象方法的使用 395
20.3 日期對象 397
20.3.1 創(chuàng)建日期對象 397
20.3.2 日期對象常用方法的應(yīng)用 398
20.3.3 日期間的運(yùn)算 401
20.4 數(shù)組對象 402
20.4.1 創(chuàng)建數(shù)組對象 402
20.4.2 數(shù)組對象屬性的應(yīng)用 402
20.4.3 數(shù)組對象常用方法的應(yīng)用 405
20.5 綜合示例——制作網(wǎng)頁隨機(jī)驗證碼 409
20.6 上機(jī)練習(xí)——動態(tài)顯示當(dāng)前時間 410
20.7 疑難解惑 412


第21章 JavaScript對象編程 415
21.1 文檔對象模型(DOM) 416
21.1.1 文檔對象模型(DOM)介紹 416
21.1.2 在DOM模型中獲得對象 416
21.1.3 事件驅(qū)動的應(yīng)用 417
21.2 窗口(window)對象 419
21.2.1 創(chuàng)建窗口(window) 419
21.2.2 創(chuàng)建對話框 421
21.2.3 窗口的相關(guān)操作 423
21.3 文檔(document)對象 424
21.3.1 文檔屬性的應(yīng)用 424
21.3.2 文檔中圖片的使用 426
21.3.3 顯示文檔中的所有超鏈接 427
21.4 表單對象 429
21.4.1 創(chuàng)建form對象 429
21.4.2 form對象屬性與方法的應(yīng)用 430
21.4.3 單選按鈕與復(fù)選框的使用 431
21.4.4 下拉菜單的使用 432
21.5 綜合示例——表單注冊與表單驗證 433
21.6 上機(jī)練習(xí)——省市聯(lián)動效果 438
21.7 疑難解惑 441


第22章 HTML 5、CSS 3和JavaScript的搭配使用 443
22.1 常見的JavaScript編寫工具 444
22.1.1 記事本 444
22.1.2 Dreamweaver 445
22.2 JavaScript在HTML中的使用 446
22.2.1 在HTML網(wǎng)頁頭中嵌入JavaScript代碼 446
22.2.2 在HTML網(wǎng)頁中嵌入JavaScript代碼 447
22.2.3 在HTML網(wǎng)頁的元素事件中嵌入JavaScript代碼 448
22.2.4 在HTML中調(diào)用已經(jīng)存在的JavaScript文件 449
22.2.5 通過JavaScript偽URL引入JavaScript腳本代碼 450
22.3 JavaScript與CSS 3的結(jié)合使用 451
22.3.1 動態(tài)添加樣式 451
22.3.2 動態(tài)改變樣式 452
22.3.3 動態(tài)定位網(wǎng)頁元素 453
22.3.4 設(shè)置網(wǎng)頁元素的顯示與隱藏 456
22.4 HTML 5、CSS 3和JavaScript的搭配應(yīng)用 457
22.4.1 設(shè)定左右移動的圖片 457
22.4.2 制作顏色選擇器 460
22.4.3 制作跑馬燈效果 462
22.5 綜合示例——制作樹形導(dǎo)航菜單 464
22.6 上機(jī)練習(xí)——制作滾動的菜單 468
22.7 疑難解惑 470


第23章 制作企業(yè)門戶類網(wǎng)頁 473
23.1 構(gòu)思布局 474
23.1.1 設(shè)計分析 474
23.1.2 排版架構(gòu) 474
23.2 內(nèi)容設(shè)計 475
23.2.1 使用JavaScript技術(shù)實現(xiàn)Logo與導(dǎo)航菜單 475
23.2.2 Banner區(qū) 476
23.2.3 資訊區(qū) 477
23.2.4 版權(quán)信息 479
23.3 設(shè)置鏈接 480
23.4 疑難解惑 480


第24章 制作在線購物類網(wǎng)頁 481
24.1 整體布局 482
24.1.1 設(shè)計分析 482
24.1.2 排版架構(gòu) 482
24.2 模塊分割 483
24.2.1 Logo與導(dǎo)航區(qū) 483
24.2.2 Banner與資訊區(qū) 485
24.2.3 產(chǎn)品類別區(qū)域 486
24.2.4 頁腳區(qū)域 488
24.3 設(shè)置鏈接 488
24.4 疑難解惑 488