HTML+CSS+JavaScript 網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)（實(shí)戰(zhàn)從入門到精通 視頻教學(xué)版）

目錄
第1篇　HTML基礎(chǔ)知識(shí)
第1章　HTML入門知識(shí)
1.1　網(wǎng)頁(yè)與網(wǎng)站 4
1.1.1　什么是網(wǎng)頁(yè)與網(wǎng)站 4
1.1.2　網(wǎng)頁(yè)基本構(gòu)成元素 5
1.2　HTML的基本概念 6
1.2.1　什么是HTML 6
1.2.2　HTML的發(fā)展歷程 6
1.2.3　HTML頁(yè)面的整體結(jié)構(gòu) 7
1.3　使用瀏覽器查看源文件 8
1.4　大神解惑 9
1.5　跟我練練手 9
第2章　網(wǎng)頁(yè)文檔結(jié)構(gòu)
2.1　HTML文件基本結(jié)構(gòu) 12
2.2　HTML5基本標(biāo)記詳解 12
2.2.1　文檔類型說(shuō)明 12
2.2.2　HTML標(biāo)記 13
2.2.3　頭標(biāo)記 13
2.2.4　網(wǎng)頁(yè)的主體標(biāo)記body 15
2.2.5　頁(yè)面注釋標(biāo)記 16
2.3　HTML5語(yǔ)法的變化 16
2.3.1　標(biāo)記不再區(qū)分大小寫 17
2.3.2　允許屬性值不使用引號(hào) 17
2.3.3　允許部分屬性值的屬性省略 17
2.4　網(wǎng)頁(yè)文件的編寫方法 18
2.4.1　使用記事本手工編寫網(wǎng)頁(yè) 18
2.4.2　使用Dreamweaver CC編寫HTML文件 19
2.5　符合W3C標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè) 20
2.6　大神解惑 21
2.7　跟我練練手 22
第3章　網(wǎng)頁(yè)中的文本和圖像
3.1　在網(wǎng)頁(yè)中添加文本 24
3.1.1　普通文本的添加 24
3.1.2　特殊字符文本的添加 24
3.1.3　特殊文本的添加 26
3.2　文本排版 27
3.2.1　換行標(biāo)記 27
3.2.2　段落標(biāo)記 28
3.2.3　標(biāo)題標(biāo)記 28
3.3　文字列表 29
3.3.1　建立無(wú)序列表 29
3.3.2　建立有序列表 30
3.3.3　建立不同類型的無(wú)序列表 30
3.3.4　建立不同類型的有序列表 31
3.3.5　建立嵌套列表 31
3.3.6　自定義列表 32
3.4　網(wǎng)頁(yè)中的圖像 32
3.4.1　插入圖像 32
3.4.2　設(shè)置圖像的寬度和高度 34
3.4.3　設(shè)置圖像的提示文字 35
3.4.4　將圖片設(shè)置為網(wǎng)頁(yè)背景 36
3.4.5　排列圖像 36
3.5　圖文并茂房屋裝飾裝修網(wǎng)頁(yè) 37
3.6　在線購(gòu)物網(wǎng)站產(chǎn)品展示效果 38
3.7　大神解惑 39
3.8　跟我練練手 40
第4章　建立超鏈接
4.1　網(wǎng)頁(yè)超鏈接的概念 42
4.1.1　什么是網(wǎng)頁(yè)超鏈接 42
4.1.2　超鏈接中的URL 42
4.1.3　超鏈接的URL類型 43
4.2　建立網(wǎng)頁(yè)超鏈接 43
4.2.1　創(chuàng)建超文本鏈接 43
4.2.2　創(chuàng)建圖片鏈接 44
4.2.3　創(chuàng)建下載鏈接 46
4.2.4　使用相對(duì)路徑和絕對(duì)路徑 46
4.2.5　設(shè)置以新窗口顯示超鏈接頁(yè)面 47
4.2.6　設(shè)置電子郵件鏈接 48
4.3　浮動(dòng)框架 49
4.4　精確定位熱點(diǎn)區(qū)域 50
4.5　使用錨鏈接制作電子書閱讀網(wǎng)頁(yè) 54
4.6　大神解惑 56
4.7　跟我練練手 56
第5章　創(chuàng)建表格和表單
5.1　表格的基本結(jié)構(gòu) 58
5.2　創(chuàng)建表格 59
5.2.1　創(chuàng)建普通表格 59
5.2.2　創(chuàng)建帶有標(biāo)題的表格 60
5.2.3　定義表格的邊框類型 60
5.2.4　定義表格的表頭 61
5.2.5　設(shè)置表格背景 61
5.2.6　設(shè)置單元格背景 62
5.2.7　合并單元格 63
5.2.8　排列單元格中的內(nèi)容 66
5.2.9　設(shè)置表格的行高與列寬 66
5.3　創(chuàng)建完整的表格 67
5.4　認(rèn)識(shí)表單 68
5.5　表單基本元素的使用 69
5.5.1　單行文本輸入框 69
5.5.2　多行文本輸入框 70
5.5.3　密碼域 70
5.5.4　單選按鈕 71
5.5.5　復(fù)選框 72
5.5.6　下拉選擇框 73
5.5.7　普通按鈕 73
5.5.8　提交按鈕 74
5.5.9　重置按鈕 75
5.6　表單高級(jí)元素的使用 75
5.6.1　url屬性的應(yīng)用 76
5.6.2　email屬性的應(yīng)用 76
5.6.3　date和time屬性的應(yīng)用 76
5.6.4　number屬性的應(yīng)用 77
5.6.5　range屬性的應(yīng)用 78
5.6.6　required屬性的應(yīng)用 79
5.7　創(chuàng)建用戶反饋表單 79
5.8　制作商品報(bào)價(jià)單 81
5.9　大神解惑 83
5.10　跟我練練手 84
第2篇　HTML5高級(jí)技術(shù)
第6章　HTML5快速入門
6.1　各大瀏覽器與HTML5的兼容性 88
6.2　檢測(cè)瀏覽器是否支持HTML標(biāo)記 88
6.3　語(yǔ)法變化和標(biāo)記 89
6.3.1　HTML5的語(yǔ)法變化 89
6.3.2　HTML5中的標(biāo)記方法 89
6.3.3　版本兼容性 90
6.4　新增的元素和廢除的元素 91
6.4.1　新增的結(jié)構(gòu)元素 92
6.4.2　新增的input元素類型 94
6.4.3　新增的其他元素 94
6.4.4　廢除的元素 96
6.5　新增的屬性和廢除的屬性 97
6.5.1　新增的屬性 97
6.5.2　廢除的屬性 101
6.6　新增全局屬性 103
6.6.1　contentEditable屬性 103
6.6.2　designMode屬性 103
6.6.3　hidden屬性 104
6.6.4　spellcheck屬性 104
6.6.5　tabIndex屬性 104
6.7　大神解惑 106
6.8　跟我練練手 106
第7章　HTML5中的多媒體
7.1　網(wǎng)頁(yè)音頻標(biāo)記 108
7.1.1　audio標(biāo)記概述 108
7.1.2　audio標(biāo)記的屬性 108
7.1.3　音頻解碼器 109
7.1.4　瀏覽器對(duì)audio標(biāo)記的支持情況 109
7.2　網(wǎng)頁(yè)視頻標(biāo)記 109
7.2.1　video標(biāo)記概述 109
7.2.2　video標(biāo)記屬性 110
7.2.3　視頻解碼器 110
7.2.4　瀏覽器對(duì)video標(biāo)記的支持情況 111
7.3　添加網(wǎng)頁(yè)音頻文件 111
7.3.1　設(shè)置背景音樂(lè) 111
7.3.2　設(shè)置音樂(lè)循環(huán)播放 112
7.4　添加網(wǎng)頁(yè)視頻文件 112
7.4.1　為網(wǎng)頁(yè)添加視頻文件 112
7.4.2　設(shè)置自動(dòng)運(yùn)行 113
7.4.3　設(shè)置視頻文件的循環(huán)播放 114
7.4.4　設(shè)置視頻窗口的高度與寬度 114
7.5　添加網(wǎng)頁(yè)滾動(dòng)文字 115
7.5.1　滾動(dòng)文字標(biāo)記 115
7.5.2　滾動(dòng)方向?qū)傩?116
7.5.3　滾動(dòng)方式屬性 117
7.5.4　滾動(dòng)速度屬性 117
7.5.5　滾動(dòng)延遲屬性 118
7.5.6　滾動(dòng)循環(huán)屬性 119
7.5.7　滾動(dòng)范圍屬性 119
7.5.8　滾動(dòng)背景顏色屬性 120
7.5.9　滾動(dòng)空間屬性 121
7.6　大神解惑 122
7.7　跟我練練手 122
第8章　使用HTML5繪制圖形
8.1　什么是canvas 124
8.2　繪制基本形狀 125
8.2.1　繪制矩形 125
8.2.2　繪制圓形 126
8.2.3　使用moveTo與lineTo繪制直線 127
8.2.4　使用bezierCurveTo繪制貝塞爾曲線 128
8.3　繪制漸變圖形 130
8.3.1　繪制線性漸變 130
8.3.2　繪制徑向漸變 132
8.4　繪制變形圖形 133
8.4.1　變換原點(diǎn)坐標(biāo) 133
8.4.2　圖形縮放 134
8.4.3　旋轉(zhuǎn)圖形 135
8.5　繪制其他樣式的圖形 136
8.5.1　圖形組合 136
8.5.2　繪制帶陰影的圖形 138
8.5.3　繪制文字 139
8.6　使用圖像 141
8.6.1　繪制圖像 141
8.6.2　圖像平鋪 142
8.6.3　圖像裁剪 143
8.6.4　像素處理 145
8.7　圖形的保存與恢復(fù) 147
8.7.1　保存與恢復(fù)圖形狀態(tài) 147
8.7.2　保存文件 148
8.8　繪制火柴棒人物 149
8.9　繪制商標(biāo) 151
8.10　大神解惑 153
8.11　跟我練練手 154
第3篇　用CSS美化網(wǎng)頁(yè)
第9章　CSS概述與基本語(yǔ)法
9.1　CSS概述 158
9.1.1　CSS功能 158
9.1.2　瀏覽器與CSS的兼容性 158
9.1.3　CSS基礎(chǔ)語(yǔ)法 159
9.1.4　CSS常用單位 159
9.2　編輯和瀏覽CSS 164
9.2.1　手工編寫CSS 164
9.2.2　用Dreamweaver編寫CSS 165
9.3　在HTML中使用CSS的方法 167
9.3.1　行內(nèi)樣式 167
9.3.2　內(nèi)嵌樣式 168
9.3.3　鏈接樣式 169
9.3.4　導(dǎo)入樣式 170
9.3.5　優(yōu)先級(jí)問(wèn)題 171
9.4　CSS的常用選擇器 172
9.4.1　標(biāo)記選擇器 173
9.4.2　類選擇器 173
9.4.3　ID選擇器 174
9.4.4　全局選擇器 175
9.4.5　組合選擇器 175
9.4.6　繼承選擇器 176
9.4.7　偽類選擇器 177
9.5　選擇器聲明 178
9.5.1　集體聲明 178
9.5.2　多重嵌套聲明 179
9.6　制作炫彩網(wǎng)站Logo 179
9.7　制作學(xué)生信息統(tǒng)計(jì)表 182
9.8　大神解惑 183
9.9　跟我練練手 184
第10章　美化網(wǎng)頁(yè)字體與段落
10.1　美化網(wǎng)頁(yè)文字 186
10.1.1　設(shè)置文字的字體 186
10.1.2　設(shè)置文字的字號(hào) 187
10.1.3　設(shè)置字體風(fēng)格 188
10.1.4　設(shè)置加粗字體 189
10.1.5　將小寫字母轉(zhuǎn)換為大寫字母 190
10.1.6　設(shè)置字體的復(fù)合屬性 191
10.1.7　設(shè)置字體顏色 192
10.2　設(shè)置文本的高級(jí)樣式 193
10.2.1　設(shè)置文本陰影效果 193
10.2.2　設(shè)置文本溢出效果 194
10.2.3　設(shè)置文本的控制換行 195
10.2.4　保持字體尺寸不變 196
10.3　美化網(wǎng)頁(yè)中的段落 197
10.3.1　設(shè)置單詞之間的間隔 197
10.3.2　設(shè)置字符之間的間隔 198
10.3.3　設(shè)置文字的修飾效果 199
10.3.4　設(shè)置垂直對(duì)齊方式 200
10.3.5　轉(zhuǎn)換文本的大小寫 202
10.3.6　設(shè)置文本的水平對(duì)齊方式 203
10.3.7　設(shè)置文本的縮進(jìn)效果 205
10.3.8　設(shè)置文本的行高 205
10.3.9　文本的空白處理 206
10.3.10　文本的反排 208
10.4　設(shè)置網(wǎng)頁(yè)標(biāo)題 209
10.5　制作新聞頁(yè)面 211
10.6　大神解惑 212
10.7　跟我練練手 212
第11章　美化網(wǎng)頁(yè)圖片
11.1　圖片縮放 214
11.1.1　通過(guò)描述標(biāo)記width和height縮放圖片 214
11.1.2　使用CSS中的max-width和
max-height縮放圖片 214
11.1.3　使用CSS中的width和height縮放圖片 215
11.2　設(shè)置圖片的對(duì)齊方式 216
11.2.1　設(shè)置圖片橫向?qū)R 216
11.2.2　設(shè)置圖片縱向?qū)R 217
11.3　圖文混排 219
11.3.1　設(shè)置文字環(huán)繞效果 219
11.3.2　設(shè)置圖片與文字的間距 220
11.4　制作學(xué)校宣傳單 221
11.5　制作簡(jiǎn)單圖文混排網(wǎng)頁(yè) 223
11.6　大神解惑 225
11.7　跟我練練手 225
第12章　美化網(wǎng)頁(yè)背景與邊框
12.1　使用CSS美化背景 228
12.1.1　設(shè)置背景顏色 228
12.1.2　設(shè)置背景圖片 229
12.1.3　背景圖片重復(fù) 230
12.1.4　背景圖片隨文檔滾動(dòng) 231
12.1.5　背景圖片位置 233
12.1.6　背景圖片大小 234
12.1.7　背景顯示區(qū)域 235
12.1.8　背景圖像裁剪區(qū)域 237
12.1.9　背景復(fù)合屬性 237
12.2　使用CSS美化邊框 238
12.2.1　設(shè)置邊框樣式 238
12.2.2　設(shè)置邊框顏色 239
12.2.3　設(shè)置邊框線寬 240
12.2.4　設(shè)置邊框復(fù)合屬性 242
12.3　設(shè)置邊框圓角效果 242
12.3.1　設(shè)置圓角邊框 243
12.3.2　指定兩個(gè)圓角半徑 243
12.3.3　繪制四個(gè)不同的圓角邊框 244
12.3.4　繪制不同種類的邊框 245
12.4　制作簡(jiǎn)單公司主頁(yè) 246
12.5　制作簡(jiǎn)單生活資訊主頁(yè) 250
12.6　大神解惑 251
12.7　跟我練練手 252
第13章　美化表格和表單樣式
13.1　美化表格樣式 254
13.1.1　設(shè)置表格邊框樣式 254
13.1.2　設(shè)置表格邊框?qū)挾?255
13.1.3　設(shè)置表格背景顏色 256
13.2　美化表單樣式 257
13.2.1　美化表單中的元素 257
13.2.2　美化提交按鈕 259
13.2.3　美化下拉列表框 260
13.3　制作用戶登錄頁(yè)面 262
13.4　制作用戶注冊(cè)頁(yè)面 264
13.5　大神解惑 266
13.6　跟我練練手 266
第14章　美化超鏈接和鼠標(biāo)指針
14.1　美化超鏈接 268
14.1.1　改變超鏈接基本樣式 268
14.1.2　設(shè)置帶有提示信息的超鏈接 269
14.1.3　設(shè)置超鏈接的背景圖 270
14.1.4　設(shè)置超鏈接的按鈕效果 271
14.2　美化鼠標(biāo)特效 272
14.2.1　控制鼠標(biāo)箭頭 272
14.2.2　設(shè)置鼠標(biāo)變幻式超鏈接 273
14.2.3　設(shè)置網(wǎng)頁(yè)頁(yè)面滾動(dòng)條 274
14.3　圖片版本超鏈接 276
14.4　鼠標(biāo)特效實(shí)例 278
14.5　制作一個(gè)簡(jiǎn)單的導(dǎo)航欄 280
14.6　大神解惑 281
14.7　跟我練練手 282
第15章　控制網(wǎng)頁(yè)導(dǎo)航菜單的樣式
15.1　使用CSS美化項(xiàng)目列表 284
15.1.1　美化無(wú)序列表 284
15.1.2　美化有序列表 285
15.1.3　美化自定義列表 286
15.1.4　制作圖片列表 287
15.1.5　縮進(jìn)圖片列表 288
15.1.6　列表復(fù)合屬性 289
15.2　使用CSS制作網(wǎng)頁(yè)菜單 290
15.2.1　制作無(wú)序列表的菜單 290
15.2.2　制作水平樣式菜單 292
15.3　模擬SOSO導(dǎo)航欄 294
15.4　將段落轉(zhuǎn)變成列表 297
15.5　大神解惑 299
15.6　跟我練練手 300
第4篇　網(wǎng)頁(yè)布局和JavaScript
第16章　CSS+DIV盒子的浮動(dòng)與定位
16.1　定義DIV 304
16.1.1　什么是DIV 304
16.1.2　創(chuàng)建DIV 304
16.2　盒子的定位 305
16.2.1　靜態(tài)定位 305
16.2.2　相對(duì)定位 306
16.2.3　絕對(duì)定位 307
16.2.4　固定定位 308
16.2.5　盒子的浮動(dòng) 308
16.3　其他CSS布局定位方式 310
16.3.1　溢出（overflow）定位 310
16.3.2　隱藏（visibility）定位 311
16.3.3　z-index空間定位 313
16.4　多列布局 314
16.4.1　設(shè)置列寬度 314
16.4.2　設(shè)置列數(shù) 316
16.4.3　設(shè)置列間距 317
16.4.4　設(shè)置列邊框樣式 318
16.5　定位網(wǎng)頁(yè)布局樣式 320
16.6　大神解惑 323
16.7　跟我練練手 324
第17章　網(wǎng)頁(yè)布局剖析與制作
17.1　固定寬度網(wǎng)頁(yè)剖析與布局 326
17.1.1　網(wǎng)頁(yè)單列布局模式 326
17.1.2　網(wǎng)頁(yè)1-2-1型布局模式 328
17.1.3　網(wǎng)頁(yè)1-3-1型布局模式 330
17.2　自動(dòng)縮放網(wǎng)頁(yè)1-2-1型布局模式 333
17.2.1　1-2-1等比例變寬布局 333
17.2.2　1-2-1單列變寬布局 334
17.3　自動(dòng)縮放網(wǎng)頁(yè)1-3-1型布局模式 335
17.3.1　1-3-1三列寬度等比例布局 335
17.3.2　1-3-1單側(cè)列寬度固定的變寬布局 335
17.3.3　1-3-1中間列寬度固定的變寬布局 337
17.3.4　1-3-1雙側(cè)列寬度固定的變寬布局 339
17.3.5　1-3-1中列和左側(cè)列寬度固定的
變寬布局 342
17.4　分列布局背景色的使用 344
17.4.1　設(shè)置固定寬度布局的列背景色 344
17.4.2　設(shè)置特殊寬度變化布局的列背景色 346
17.4.3　設(shè)置單列寬度變化布局的列背景色 347
17.4.4　設(shè)置多列等比例寬度變化布局的
列背景 349
17.5　大神解惑 352
17.6　跟我練練手 352
第18章　JavaScript和jQuery
18.1　認(rèn)識(shí)JavaScript 354
18.1.1　什么是JavaScript 354
18.1.2　在HTML網(wǎng)頁(yè)頭中嵌入
JavaScript代碼 354
18.2　JavaScript對(duì)象與函數(shù) 355
18.2.1　認(rèn)識(shí)對(duì)象 356
18.2.2　認(rèn)識(shí)函數(shù) 356
18.3　JavaScript事件 358
18.3.1　事件與事件處理概述 358
18.3.2　JavaScript的常用事件 359
18.4　認(rèn)識(shí)jQuery 360
18.4.1　jQuery能做什么 361
18.4.2　jQuery的配置 361
18.5　jQuery選擇器 362
18.5.1　jQuery的工廠函數(shù) 362
18.5.2　常見(jiàn)選擇器 363
18.6　大神解惑 364
18.7　跟我練練手 365
第19章　經(jīng)典的網(wǎng)頁(yè)動(dòng)態(tài)特效案例
19.1　文字特效 368
19.1.1　打字效果的文字 368
19.1.2　文字升降特效 370
19.1.3　跑馬燈效果 372
19.2　圖片特效 373
19.2.1　閃爍圖片 373
19.2.2　左右移動(dòng)的圖片 375
19.3　網(wǎng)頁(yè)菜單特效 378
19.3.1　向上滾動(dòng)菜單 378
19.3.2　樹形菜單 379
19.4　鼠標(biāo)特效 384
19.4.1　鼠標(biāo)的圖片跟蹤 384
19.4.2　鼠標(biāo)的文字跟蹤 385
19.5　時(shí)間特效 387
19.5.1　時(shí)鐘特效 387
19.5.2　制作簡(jiǎn)單日歷表 392
19.6　頁(yè)面特效 395
19.6.1　網(wǎng)頁(yè)自動(dòng)滾屏 395
19.6.2　顏色選擇器 398
19.7　大神解惑 401
19.8　跟我練練手 402
第5篇　綜合案例實(shí)戰(zhàn)
第20章　制作企業(yè)門戶類網(wǎng)頁(yè)
20.1　構(gòu)思布局 406
20.1.1　設(shè)計(jì)分析 406
20.1.2　排版架構(gòu) 407
20.2　模塊分割 408
20.2.1　Logo與導(dǎo)航菜單 408
20.2.2　左側(cè)文本介紹 410
20.2.3　右側(cè)導(dǎo)航鏈接 411
20.2.4　版權(quán)信息 413
20.3　整體調(diào)整 414
第21章　制作在線購(gòu)物類網(wǎng)頁(yè)
21.1　整體布局 416
21.1.1　設(shè)計(jì)分析 416
21.1.2　排版架構(gòu) 417
21.2　模塊分割 417
21.2.1　Logo與導(dǎo)航區(qū) 417
21.2.2　Banner與資訊區(qū) 419
21.2.3　產(chǎn)品類別區(qū)域 420
21.2.4　頁(yè)腳區(qū)域 421
第22章　制作移動(dòng)設(shè)備類網(wǎng)頁(yè)
22.1　網(wǎng)站設(shè)計(jì)分析 424
22.2　網(wǎng)站結(jié)構(gòu)分析 424
22.3　網(wǎng)站主頁(yè)面的制作 425
22.4　網(wǎng)站成品預(yù)覽 427