精通HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)（視頻教學(xué)版 第2版）

目  錄
第１章  HTML5快速入門    1
1.1  HTML5概述    1
1.2  HTML5的文檔結(jié)構(gòu)    3
1.2.1  文檔類型說(shuō)明    3
1.2.2  HTML標(biāo)記    3
1.2.3  頭標(biāo)記head    3
1.2.4  網(wǎng)頁(yè)的主體標(biāo)記body    7
1.2.5  頁(yè)面注釋標(biāo)記    7
1.3  HTML5文件的編寫(xiě)方法    8
1.3.1  使用記事本手工編寫(xiě)HTML文件    8
1.3.2  使用Dreamweaver CC編寫(xiě)HTML文件    9
1.4  HTML5語(yǔ)法的新變化    11
1.4.1  標(biāo)簽不再區(qū)分大小寫(xiě)    11
1.4.2  允許屬性值不使用引號(hào)    12
1.4.3  允許部分屬性值的屬性省略    12
1.5  專家解惑    13
第2章   HTML5網(wǎng)頁(yè)中的文本和圖像    15
2.1  添加文本    15
2.1.1  普通文本    15
2.1.2  特殊文字符號(hào)    16
2.1.3  文本特殊樣式    17
2.2  文本排版    19
2.2.1  換行標(biāo)記
與段落標(biāo)記    19
2.2.2  標(biāo)題標(biāo)記～    21
2.3  文字列表    22
2.3.1  建立無(wú)序列表    23
2.3.2  建立有序列表    24
2.4  網(wǎng)頁(yè)中的圖像    25
2.4.1  網(wǎng)頁(yè)中支持的圖片格式    26
2.4.2  使用路徑    26
2.4.3  網(wǎng)頁(yè)中插入圖像標(biāo)記    28
2.5  綜合實(shí)例—圖文并茂房屋裝飾裝修網(wǎng)頁(yè)    31
2.6  專家解惑    32
第3章  用HTML5建立超鏈接    34
3.1  URL的概念    34
3.1.1  URL的格式    34
3.1.2  URL的類型    35
3.2  超鏈接標(biāo)記    36
3.2.1  設(shè)置文本和圖片的超鏈接    36
3.2.2  超鏈接指向的目標(biāo)類型    37
3.2.3  設(shè)置以新窗口顯示超鏈接頁(yè)面    39
3.3  創(chuàng)建熱點(diǎn)區(qū)域    40
3.4  浮動(dòng)框架iframe    41
3.5  綜合實(shí)例—用Dreamweaver精確定位熱點(diǎn)區(qū)域    42
3.6  專家解惑    44
第4章  用HTML5創(chuàng)建表格    46
4.1  表格基本結(jié)構(gòu)及操作    46
4.1.1  表格基本結(jié)構(gòu)    46
4.1.2  合并單元格    48
4.2  完整的表格標(biāo)記    52
4.3  綜合實(shí)例—制作計(jì)算機(jī)報(bào)價(jià)單    54
4.4  專家解惑    56
第5章  使用表單    58
5.1  表單概述    58
5.2  表單基本元素的使用    59
5.2.1  單行文本輸入框text    59
5.2.2  多行文本框標(biāo)記    60
5.2.3  密碼輸入框password    61
5.2.4  單選按鈕radio    61
5.2.5  復(fù)選框checkbox    62
5.2.6  選擇列表標(biāo)記    63
5.2.7  普通按鈕button    64
5.2.8  提交按鈕submit    65
5.2.9  重置按鈕reset    66
5.3  表單高級(jí)元素的使用    67
5.3.1  url屬性    67
5.3.2  email屬性    68
5.3.3  date和times屬性    69
5.3.4  number屬性    70
5.3.5  range屬性    71
5.3.6  required屬性    72
5.4  綜合實(shí)例—創(chuàng)建用戶反饋表單    72
5.5  專家解惑    74
第6章  CSS3快速入門    75
6.1  CSS3介紹    75
6.1.1  CSS3功能    75
6.1.2  CSS3發(fā)展歷史    76
6.1.3  瀏覽器與CSS3    76
6.2  編輯和瀏覽CSS    77
6.2.1  CSS基礎(chǔ)語(yǔ)法    77
6.2.2  使用記事本手工編寫(xiě)CSS文件    78
6.2.3  使用Dreamweaver CC創(chuàng)建CSS文件    79
6.3  在HTML5中使用CSS3的方法    80
6.3.1  行內(nèi)樣式    80
6.3.2  內(nèi)嵌樣式    81
6.3.3  鏈接樣式    83
6.3.4  導(dǎo)入樣式    84
6.3.5  優(yōu)先級(jí)問(wèn)題    86
6.4  CSS3選擇器    88
6.4.1  標(biāo)記選擇器    89
6.4.2  類選擇器    90
6.4.3  ID選擇器    91
6.4.4  全局選擇器    93
6.4.5  組合選擇器    94
6.4.6  繼承選擇器    95
6.4.7  偽類    97
6.4.8  屬性選擇器    98
6.4.9  結(jié)構(gòu)偽類選擇器    100
6.4.10  UI元素狀態(tài)偽類選擇器    101
6.5  選擇器聲明    103
6.5.1  集體聲明    103
6.5.2  多重嵌套聲明    104
6.6  綜合實(shí)例1—制作五彩標(biāo)題    105
6.7  綜合實(shí)例2—制作新聞菜單    108
6.8  專家解惑    111
第7章  CSS3字體與段落屬性    112
7.1  字體屬性    112
7.1.1  字體font-family    112
7.1.2  字號(hào)font-size    113
7.1.3  字體風(fēng)格font-style    115
7.1.4  加粗字體font-weight    116
7.1.5  小寫(xiě)字母轉(zhuǎn)為大寫(xiě)字母font-variant    117
7.1.6  字體復(fù)合屬性font    118
7.1.7  字體顏色color    119
7.2  文本高級(jí)樣式    121
7.2.1  陰影文本text-shadow    121
7.2.2  溢出文本text-overflow    122
7.2.3  控制換行word-wrap    123
7.2.4  保持字體尺寸不變font-size-adjust    125
7.3  段落屬性    126
7.3.1  單詞間隔word-spacing    126
7.3.2  字符間隔letter-spacing    127
7.3.3  文字修飾text-decoration    128
7.3.4  垂直對(duì)齊方式vertical-align    129
7.3.5  文本轉(zhuǎn)換text-transform    131
7.3.6  水平對(duì)齊方式text-align    132
7.3.7  文本縮進(jìn)text-indent    134
7.3.8  文本行高line-height    135
7.3.9  處理空白white-space    136
7.3.10  文本反排unicode-bidi和direction    137
7.4  綜合實(shí)例1—制作旅游宣傳網(wǎng)頁(yè)    139
7.5  綜合實(shí)例2—網(wǎng)頁(yè)簡(jiǎn)單圖文混排    143
7.6  專家解惑    145
第8章  CSS3美化表格和表單樣式    146
8.1  表格基本樣式    146
8.1.1  表格邊框樣式    146
8.1.2  表格邊框?qū)挾?nbsp;   149
8.1.3  表格邊框顏色    150
8.2  CSS3與表單    151
8.2.1  美化表單元素    152
8.2.2  美化提交按鈕    154
8.2.3  美化下拉菜單    155
8.3  綜合實(shí)例1—隔行變色    157
8.4  綜合實(shí)例2—表格圖文網(wǎng)頁(yè)布局    160
8.5  綜合實(shí)例3—變色表格    162
8.6  綜合實(shí)例4—登錄表單    165
8.7  綜合實(shí)例5—注冊(cè)表單    167
8.8  專家解惑    170
第9章  CSS3美化圖像    171
9.1  圖片樣式    171
9.1.1  圖片邊框    171
9.1.2  圖片縮放    173
9.2  對(duì)齊圖片    176
9.2.1  橫向?qū)R方式    176
9.2.2  縱向?qū)R方式    177
9.3  圖文混排    179
9.3.1  文字環(huán)繞    179
9.3.2  設(shè)置圖片與文字間距    180
9.4  綜合實(shí)例1—一句話新聞    181
9.5  綜合實(shí)例2—學(xué)校宣傳單    185
9.6  專家解惑    187
第10章  CSS3美化背景與邊框    188
10.1  背景相關(guān)屬性    188
10.1.1  背景顏色    188
10.1.2  背景圖片    190
10.1.3  背景圖片重復(fù)    191
10.1.4  背景圖片顯示    192
10.1.5  背景圖片位置    194
10.1.6  背景圖片大小    196
10.1.7  背景顯示區(qū)域    197
10.1.8  背景圖像裁剪區(qū)域    199
10.1.9  背景復(fù)合屬性    200
10.2  邊框    201
10.2.1  邊框樣式    201
10.2.2  邊框顏色    203
10.2.3  邊框線寬    204
10.2.4  邊框復(fù)合屬性    206
10.3   圓角邊框    207
10.3.1  圓角邊框?qū)傩?nbsp;   207
10.3.2  指定兩個(gè)圓角半徑    208
10.3.3  繪制四個(gè)不同圓角邊框    209
10.3.4  繪制邊框種類    212
10.4  圖片邊框    213
10.4.1  圖片邊框?qū)傩?nbsp;   213
10.4.2  設(shè)置圖像邊框顯示方式    215
10.5  綜合實(shí)例—設(shè)計(jì)公司主頁(yè)    217
10.6  專家解惑    221
第11章   JavaScript概述    222
11.1  JavaScript簡(jiǎn)介    222
11.1.1  JavaScript是什么    222
11.1.2  JavaScript和Java的關(guān)系    223
11.1.3  JavaScript的發(fā)展歷史    224
11.1.4  JavaScript開(kāi)發(fā)及運(yùn)行環(huán)境    225
11.2  在HTML5文件中使用JavaScript代碼    226
11.2.1  JavaScript嵌入HTML5文件    226
11.2.2  外部JavaScript文件    227
11.3  綜合實(shí)例—歡迎光臨網(wǎng)站的JavaScript程序    228
11.4  專家解惑    230
第12章  JavaScript語(yǔ)言基礎(chǔ)    231
12.1  數(shù)據(jù)類型與變量    231
12.1.1  數(shù)據(jù)類型    231
12.1.2  變量    234
12.1.3  保留關(guān)鍵字    235
12.2  運(yùn)算符與表達(dá)式    236
12.2.1  算術(shù)運(yùn)算符及其表達(dá)式    237
12.2.2  賦值運(yùn)算符及其表達(dá)式    237
12.2.3  關(guān)系運(yùn)算符及其表達(dá)式    239
12.2.4  位運(yùn)算符及其表達(dá)式    239
12.2.5  邏輯運(yùn)算符與邏輯表達(dá)式    240
12.2.6  其他運(yùn)算符及運(yùn)算符優(yōu)先級(jí)    241
12.3  流程控制語(yǔ)句    242
12.3.1  注釋語(yǔ)句和語(yǔ)句塊    243
12.3.2  選擇語(yǔ)句    244
12.3.3  循環(huán)語(yǔ)句    251
12.4  函數(shù)    255
12.4.1  函數(shù)簡(jiǎn)介    255
12.4.2  定義函數(shù)    255
12.4.3  調(diào)用函數(shù)    259
12.4.4  系統(tǒng)函數(shù)    261
12.5  綜合實(shí)例—購(gòu)物簡(jiǎn)易計(jì)算器    264
12.6  專家解惑    267
第13章   JavaScript內(nèi)置對(duì)象    268
13.1  字符串對(duì)象    268
13.1.1  字符串對(duì)象的創(chuàng)建    268
13.1.2  字符串對(duì)象的常用屬性    269
13.1.3  字符串對(duì)象的常用函數(shù)    269
13.2  數(shù)學(xué)對(duì)象    272
13.2.1  數(shù)學(xué)對(duì)象的屬性    272
13.2.2  數(shù)學(xué)對(duì)象的函數(shù)    272
13.3  日期對(duì)象    276
13.3.1  創(chuàng)建日期對(duì)象    276
13.3.2  日期對(duì)象的常用函數(shù)    278
13.3.3  日期間的運(yùn)算    280
13.4  數(shù)組對(duì)象    281
13.4.1  數(shù)組對(duì)象的創(chuàng)建    282
13.4.2  數(shù)組對(duì)象的操作    283
13.4.3  數(shù)組對(duì)象的常用方法    285
13.5  綜合實(shí)例—隨機(jī)驗(yàn)證碼和動(dòng)態(tài)時(shí)鐘    289
13.6  專家解惑    293
第14章  JavaScript對(duì)象編程    295
14.1  文檔對(duì)象模型    295
14.1.1  文檔對(duì)象模型概述    295
14.1.2  在DOM模型中獲得對(duì)象的方法    296
14.1.3  事件驅(qū)動(dòng)    297
14.2  窗口對(duì)象    299
14.2.1  窗口概述    299
14.2.2  對(duì)話框    302
14.2.3  窗口操作    304
14.3  文檔對(duì)象    306
14.3.1  文檔的屬性    306
14.3.2  文檔中的圖片    308
14.3.3  文檔中的超鏈接    309
14.4  表單對(duì)象    311
14.4.1  form對(duì)象    311
14.4.2  form對(duì)象屬性與方法    312
14.4.3  單選與復(fù)選的使用    314
14.4.4  使用下拉菜單    315
14.5  綜合實(shí)例1—表單注冊(cè)與表單驗(yàn)證    317
14.6  綜合實(shí)例2—省市聯(lián)動(dòng)效果    322
14.7  專家解惑    326
第15章  JavaScript操縱CSS3    327
15.1  DHTML簡(jiǎn)介    327
15.2  前臺(tái)動(dòng)態(tài)網(wǎng)頁(yè)效果    328
15.2.1  動(dòng)態(tài)內(nèi)容    328
15.2.2  動(dòng)態(tài)樣式    329
15.2.3  動(dòng)態(tài)定位    331
15.2.4  顯示與隱藏    333
15.3  綜合實(shí)例1—JS控制表單背景色和文字提示    334
15.4  綜合實(shí)例2—實(shí)現(xiàn)即時(shí)驗(yàn)證效果    337
15.5  專家解惑    339
第16章  HTML5繪制圖形    341
16.1  canvas概述    341
16.1.1  添加canvas元素    341
16.1.2  繪制矩形    342
16.2  繪制基本形狀    343
16.2.1  繪制圓形    343
16.2.2  使用moveTo與lineTo繪制直線    345
16.2.3  使用bezierCurveTo繪制貝塞爾曲線    346
16.3  繪制漸變圖形    348
16.3.1  繪制線性漸變    349
16.3.2  繪制徑向漸變    350
16.4  繪制變形圖形    351
16.4.1  變換原點(diǎn)坐標(biāo)    352
16.4.2  圖形縮放    353
16.4.3  旋轉(zhuǎn)圖形    354
16.5  圖形組合    356
16.6  繪制帶陰影的圖形    358
16.7  使用圖像    359
16.7.1  繪制圖像    359
16.7.2  圖像平鋪    360
16.7.3  圖像裁剪    362
16.7.4  像素處理    364
16.8  繪制文字    366
16.9  圖形的保存與恢復(fù)    368
16.9.1  保存與恢復(fù)狀態(tài)    368
16.9.2  保存文件    369
16.10  綜合實(shí)例1—繪制商標(biāo)    371
16.11  綜合實(shí)例2—繪制火柴棒人物    372
16.12  綜合實(shí)例3—制時(shí)鐘    376
16.13  專家解惑    380
第17章  HTML5中的音頻和視頻    381
17.1  標(biāo)記    381
17.1.1  標(biāo)記概述    381
17.1.2  標(biāo)記的屬性    382
17.1.3  音頻解碼器    383
17.1.4  標(biāo)記瀏覽器的支持情況    383
17.2  標(biāo)記    383
17.2.1  標(biāo)記概述    383
17.2.2  標(biāo)記的屬性    384
17.2.3  視頻解碼器    385
17.2.4  標(biāo)記瀏覽器的支持情況    385
17.3  音頻和視頻中的方法    386
17.3.1  canPlayType()方法    386
17.3.2  load()方法    387
17.3.3  play()方法和pause()方法    388
17.4  音頻和視頻中的屬性    389
17.4.1  autoplay 屬性    389
17.4.2  buffered 屬性    391
17.4.3  controls屬性    392
17.4.4  currentSrc屬性    394
17.5  專家解惑    395
第18章  地理定位、離線Web應(yīng)用 和Web存儲(chǔ)    396
18.1  獲取地理位置    396
18.1.1  地理定位的原理    396
18.1.2  地理定位的函數(shù)    397
18.1.3  指定緯度和經(jīng)度坐標(biāo)    397
18.1.4  目前瀏覽器對(duì)地理定位的支持情況    399
18.2  HTML5離線Web應(yīng)用    399
18.2.1  新增的本地緩存    399
18.2.2  本地緩存的管理者——manifest文件    399
18.2.3  瀏覽器網(wǎng)頁(yè)緩存與本地緩存的區(qū)別    401
18.2.4  目前瀏覽器對(duì)Web離線應(yīng)用的支持情況    401
18.3  Web存儲(chǔ)    401
18.3.1  本地存儲(chǔ)和Cookies的區(qū)別    402
18.3.2  在客戶端存儲(chǔ)數(shù)據(jù)    402
18.3.3  sessionStorage函數(shù)    402
18.3.4  localStorage函數(shù)    404
18.3.5  目前瀏覽器對(duì)Web存儲(chǔ)的支持情況    405
18.4  專家解惑    406
第19章  使用jQuery Mobile設(shè)計(jì)移動(dòng)頁(yè)面    407
19.1  jQuery Mobile概述    407
19.2  跨平臺(tái)移動(dòng)設(shè)備網(wǎng)頁(yè)    408
19.2.1  移動(dòng)設(shè)備模擬器    408
19.2.2  jQuery Mobile的安裝    410
19.3  jQuery Mobile網(wǎng)頁(yè)的架構(gòu)    411
19.4  使用UI組件    412
19.5  導(dǎo)航條    422
19.6  使用jQuery Mobile主題    425
19.7  創(chuàng)建多頁(yè)面的jQuery Mobile網(wǎng)頁(yè)    429
19.8  制作對(duì)話框效果    430
19.9  絢麗多彩的頁(yè)面切換效果    432
19.10  大神解惑    434
第20章  項(xiàng)目實(shí)訓(xùn)1 —設(shè)計(jì)企業(yè)門戶網(wǎng)站    435
20.1  構(gòu)思布局    435
20.1.1  設(shè)計(jì)分析    435
20.1.2  排版架構(gòu)    436
20.2  模塊分割    437
20.2.1  Logo與導(dǎo)航菜單    437
20.2.2  左側(cè)文本介紹    439
20.2.3  右側(cè)導(dǎo)航鏈接    441
20.2.4  版權(quán)信息    443
20.3  整體調(diào)整    444
20.4  專家解惑    445
第21章   項(xiàng)目實(shí)訓(xùn)2—設(shè)計(jì)星際爭(zhēng)霸的網(wǎng)頁(yè)游戲    446
21.1  游戲概述    446
21.2  游戲需求分析    447
21.3  HTML5、CSS和JavaScript搭配實(shí)現(xiàn)    448
21.3.1  基本的HTML5結(jié)構(gòu)和標(biāo)記    448
21.3.2  使用CSS修改頁(yè)面    449
21.3.3  編寫(xiě)JavaScript程序    450
第22章   項(xiàng)目實(shí)訓(xùn)3—設(shè)計(jì)手機(jī)移動(dòng)類網(wǎng)站    457
22.1  項(xiàng)目概述    457
22.2  項(xiàng)目開(kāi)發(fā)前知識(shí)    457
22.2.1  Camera插件    458
22.2.2  Swipebox插件    460
22.3  項(xiàng)目實(shí)現(xiàn)    462
22.3.1  首頁(yè)    462
22.3.2  寵物圖片展示頁(yè)面    465
22.3.3  咨詢頁(yè)面    467
22.3.4  注冊(cè)頁(yè)面    469

顯示全部信息