HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與布局（從新手到高手）

目    錄
第1章  網(wǎng)頁(yè)基礎(chǔ)    1
1.1  初識(shí)網(wǎng)頁(yè)    2
　　1.1.1  網(wǎng)頁(yè)的構(gòu)成    2
　　1.1.2  靜態(tài)網(wǎng)頁(yè)    3
　　1.1.3  動(dòng)態(tài)網(wǎng)頁(yè)    3
　　1.1.4  數(shù)據(jù)庫(kù)    4
1.2  W3C概述    7
　　1.2.1  了解W3C    7
　　1.2.2  W3C的結(jié)構(gòu)    8
　　1.2.3  W3C的表現(xiàn)    9
　　1.2.4  W3C的行為    11
1.3  網(wǎng)站設(shè)計(jì)概述    12
　　1.3.1  網(wǎng)站整體策劃    12
　　1.3.2  網(wǎng)頁(yè)設(shè)計(jì)任務(wù)    13
　　1.3.3  網(wǎng)頁(yè)設(shè)計(jì)實(shí)現(xiàn)    14
1.4  網(wǎng)頁(yè)配色    16
　　1.4.1  色彩的基礎(chǔ)概念    17
　　1.4.2  色彩的模式    20
　　1.4.3  自定義網(wǎng)頁(yè)顏色    21
　　1.4.4  色彩推移    22
1.5  網(wǎng)頁(yè)的藝術(shù)表現(xiàn)與風(fēng)格設(shè)計(jì)    23
　　1.5.1  網(wǎng)頁(yè)形式的藝術(shù)表現(xiàn)    23
　　1.5.2  網(wǎng)頁(yè)構(gòu)成的藝術(shù)表現(xiàn)    25
　　1.5.3  網(wǎng)頁(yè)紋理的藝術(shù)表現(xiàn)    26
　　1.5.4  網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格類型    28
第2章  HTML5概述    30
2.1  HTML5基本概念    31
　　2.1.1  HTML5簡(jiǎn)介    31
　　2.1.2  HTML5文檔類型    31
　　2.1.3  頁(yè)面構(gòu)成    32
2.2  HTML5的優(yōu)勢(shì)    33
　　2.2.1  HTML5優(yōu)點(diǎn)    33
　　2.2.2  HTML5的特性    34
　　2.2.3  HTML5新功能    34
2.3  HTML5的主體結(jié)構(gòu)    35
　　2.3.1  HTML5結(jié)構(gòu)性標(biāo)簽體系    35
　　2.3.2  新增的主體結(jié)構(gòu)標(biāo)簽    37
　　2.3.3  新增的非主體結(jié)構(gòu)標(biāo)簽    39
2.4  HTML5文件的編寫(xiě)方法    40
　　2.4.1  手工編寫(xiě)HTML5    40
　　2.4.2  使用Dreamweaver編寫(xiě)    41
2.5  練習(xí)：創(chuàng)建HTML5文檔    45
2.6  練習(xí)：制作個(gè)HTML5網(wǎng)頁(yè)    47
2.7  新手訓(xùn)練營(yíng)    48
第3章  創(chuàng)建文本和圖像    51
3.1  添加網(wǎng)頁(yè)文本    52
　　3.1.1  添加普通文本    52
　　3.1.2  添加特殊字符    52
3.2  設(shè)置文本格式    54
　　3.2.1  設(shè)置文本樣式    54
　　3.2.2  設(shè)置對(duì)齊方式    58
　　3.2.3  設(shè)置段落樣式    59
3.3  設(shè)置文字列表    61
　　3.3.1  設(shè)置單個(gè)列表    61
　　3.3.2  設(shè)置多個(gè)列表    62
　　3.3.3  設(shè)置嵌套列表    63
　　3.3.4  自定義列表    64
3.4  使用圖像    64
　　3.4.1  網(wǎng)頁(yè)圖像格式    64
　　3.4.2  插入圖像    65
　　3.4.3  編輯圖像    66
3.5  練習(xí)：制作數(shù)學(xué)試題網(wǎng)頁(yè)    68
3.6  練習(xí)：制作導(dǎo)航條    71
3.7  新手訓(xùn)練營(yíng)    73
第4章  創(chuàng)建表格    76
4.1  使用表格    77
　　4.1.1  創(chuàng)建表格    77
　　4.1.2  創(chuàng)建嵌套表格    77
　　4.1.3  創(chuàng)建標(biāo)題表格    78
4.2  編輯單元格    79
　　4.2.1  調(diào)整單元格    79
　　4.2.2  設(shè)置單元格背景    81
　　4.2.3  合并單元格    81
4.3  設(shè)置表格    83
　　4.3.1  定義表格    83
　　4.3.2  設(shè)置邊框類型    84
　　4.3.3  設(shè)置表格背景    85
4.4  處理表格數(shù)據(jù)    86
　　4.4.1  排序數(shù)據(jù)    86
　　4.4.2  導(dǎo)入/導(dǎo)出表格數(shù)據(jù)    87
4.5  練習(xí)：制作個(gè)人簡(jiǎn)歷    88
4.6  練習(xí)：制作購(gòu)物車頁(yè)    93
4.7  新手訓(xùn)練營(yíng)    97
第5章  創(chuàng)建超鏈接    101
5.1  鏈接與路徑    102
　　5.1.1  網(wǎng)頁(yè)中的鏈接    102
　　5.1.2  網(wǎng)頁(yè)中的路徑    102
5.2  使用超鏈接    103
　　5.2.1  創(chuàng)建文本超鏈接    103
　　5.2.2  創(chuàng)建圖像超鏈接    104
　　5.2.3  創(chuàng)建其他超鏈接    104
5.3  應(yīng)用IFrame框架    108
　　5.3.1  插入IFrame框架    108
　　5.3.2  鏈接IFrame框架頁(yè)面    109
5.4  練習(xí)：制作水果頁(yè)面    110
5.5  練習(xí)：制作水墨畫(huà)頁(yè)面    112
5.6  新手訓(xùn)練營(yíng)    115
第6章  應(yīng)用多媒體    118
6.1  插入Flash    119
　　6.1.1  插入Flash動(dòng)畫(huà)    119
　　6.1.2  插入Flash視頻    121
6.2  使用音頻文件    122
　　6.2.1  了解audio標(biāo)簽    122
　　6.2.2  添加音頻文件    123
6.3  使用視頻文件    124
　　6.3.1  了解video標(biāo)簽    124
　　6.3.2  添加視頻文件    125
6.4  音頻與視頻相關(guān)的屬性、方法和
事件    126
　　6.4.1  音頻與視頻相關(guān)的屬性    127
　　6.4.2  音頻與視頻相關(guān)的方法    130
　　6.4.3  音頻與視頻相關(guān)的事件    130
6.5  練習(xí)：制作音樂(lè)播放網(wǎng)頁(yè)    132
6.6  練習(xí)：制作在線視頻網(wǎng)頁(yè)    134
6.7  新手訓(xùn)練營(yíng)    136
第7章  使用HTML圖形    138
7.1  認(rèn)識(shí)HTML5 Canvas元素    139
　　7.1.1  Canvas元素概述    139
　　7.1.2  瀏覽器的支持與替代
          內(nèi)容    139
　　7.1.3  在頁(yè)面中放置Canvas
          元素    140
7.2  繪制基本形狀    141
　　7.2.1  繪制矩形    141
　　7.2.2  繪制圓形    142
　　7.2.3  繪制直線    143
　　7.2.4  繪制三角形    143
　　7.2.5  繪制曲線    144
7.3  繪制漸變圖形    146
　　7.3.1  繪制線性漸變    146
　　7.3.2  繪制徑向漸變    147
7.4  繪制變形圖形    147
　　7.4.1  繪制平移效果圖形    148
　　7.4.2  繪制縮放效果圖形    148
　　7.4.3  繪制旋轉(zhuǎn)效果圖形    149
7.5  編輯圖形    150
　　7.5.1  組合圖形    150
　　7.5.2  裁切路徑    151
　　7.5.3  設(shè)置描邊樣式    151
　　7.5.4  設(shè)置圖形的透明度    153
　　7.5.5  設(shè)置陰影    154
　　7.5.6  保存圖形狀態(tài)    155
7.6  使用圖像    156
　　7.6.1  繪制圖像    156
　　7.6.2  平鋪圖像    157
　　7.6.3  裁剪圖像    158
　　7.6.4  px化處理圖像    158
7.7  繪制文字    160
　　7.7.1  繪制填充文字    160
　　7.7.2  繪制輪廓文字    161
　　7.7.3  設(shè)置文字寬度    162
7.8  練習(xí)：制作風(fēng)景推薦線路    162
7.9  練習(xí)：制作校園簡(jiǎn)介    164
7.10  新手訓(xùn)練營(yíng)    167
第8章  創(chuàng)建表單    169
8.1  添加表單    170
　　8.1.1  表單概述    170
　　8.1.2  插入表單    170
8.2  添加文本和網(wǎng)頁(yè)元素    172
　　8.2.1  添加文本元素    172
　　8.2.2  添加網(wǎng)頁(yè)元素    173
8.3  添加選擇和按鈕元素    177
　　8.3.1  添加選擇元素    177
　　8.3.2  添加按鈕元素    179
8.4  添加表單高級(jí)元素    181
　　8.4.1  新增input元素屬性    181
　　8.4.2  新增form元素及其屬性    185
8.5  練習(xí)：制作用戶登錄頁(yè)面    186
8.6  練習(xí)：制作用戶注冊(cè)頁(yè)面    188
8.7  新手訓(xùn)練營(yíng)    191
第9章  Web應(yīng)用技術(shù)    194
9.1  本地存儲(chǔ)    195
　　9.1.1  Web Storage概述    195
　　9.1.2  Web Storage的優(yōu)勢(shì)    195
　　9.1.3  判斷瀏覽器    196
　　9.1.4  Web Storage方法    196
9.2  離線Web應(yīng)用程序    198
　　9.2.1  離線Web應(yīng)用程序概述    199
　　9.2.2  Cache Manifest文件    199
　　9.2.3  在線狀態(tài)檢測(cè)    200
　　9.2.4  applicationCache對(duì)象    200
9.3  通信應(yīng)用    201
　　9.3.1  WebSocket通信概述    201
　　9.3.2  跨文檔消息傳輸    202
　　9.3.3  使用WebSocket    203
9.4  線程應(yīng)用    204
　　9.4.1  Web Workers概述    204
　　9.4.2  工作線程與多線程    205
　　9.4.3  線程事件處理模型    206
　　9.4.4  瀏覽器與線程    207
9.5  獲取地理位置信息    207
　　9.5.1  使用方法    207
　　9.5.2  position對(duì)象    209
9.6  練習(xí)：制作簡(jiǎn)單留言簿    210
9.7  練習(xí)：制作個(gè)人博客    213
9.8  新手訓(xùn)練營(yíng)    216
第10章  揭秘CSS3    218
10.1  CSS3簡(jiǎn)介    219
　　10.1.1  了解CSS樣式    219
　　10.1.2  CSS的發(fā)展史    220
　　10.1.3  CSS的缺點(diǎn)和使用陷阱    220
10.2  應(yīng)用CSS3    222
　　10.2.1  CSS3的基礎(chǔ)語(yǔ)法    222
　　10.2.2  CSS的應(yīng)用分類    223
　　10.2.3  CSS3的新特性    224
　　10.2.4  CSS里的單位    226
　　10.2.5  CSS編寫(xiě)規(guī)則    227
10.3  使用CSS3選擇器    228
　　10.3.1  認(rèn)識(shí)CSS3選擇器    228
　　10.3.2  非偽類型選擇器    229
　　10.3.3  偽類選擇器    231
　　10.3.4  結(jié)構(gòu)性偽類選擇器    232
　　10.3.5  UI元素狀態(tài)偽類選擇器    235
　　10.3.6  其他關(guān)系選擇器    238
10.4  練習(xí)：制作多彩時(shí)尚頁(yè)    239
10.5  練習(xí)：制作圖片新聞頁(yè)    242
10.6  新手訓(xùn)練營(yíng)    244
第11章  美化字體與段落    247
11.1  設(shè)置字體格式    248
　　11.1.1  使用選擇器插入字體    248
　　11.1.2  設(shè)置字體和字號(hào)    249
　　11.1.3  設(shè)置字體樣式    250
　　11.1.4  設(shè)置字體顏色    252
　　11.1.5  設(shè)置復(fù)合屬性    253
11.2  設(shè)置段落格式    253
　　11.2.1  設(shè)置段落的基本樣式    254
　　11.2.2  設(shè)置段落的高級(jí)樣式    258
　　11.2.3  設(shè)置列表樣式    260
11.3  設(shè)置高級(jí)樣式    264
　　11.3.1  設(shè)置陰影效果    264
　　11.3.2  省略標(biāo)記    266
　　11.3.3  設(shè)置自動(dòng)換行    268
　　11.3.4  調(diào)用服務(wù)端字體    268
11.4  練習(xí)：制作企業(yè)新聞列表    269
11.5  練習(xí)：制作節(jié)日簡(jiǎn)介頁(yè)面    271
11.6  新手訓(xùn)練營(yíng)    273
第12章  美化圖片與列表    276
12.1  插入圖像文件    277
　　12.1.1  在標(biāo)題前插入圖像文件    277
　　12.1.2  attr屬性應(yīng)用    278
12.2  設(shè)置圖片格式    278
　　12.2.1  縮放圖片    278
　　12.2.2  設(shè)置對(duì)齊方式    279
12.3  圖文混排    281
　　12.3.1  設(shè)置文字環(huán)繞    281
　　12.3.2  設(shè)置圖文間距    282
12.4  設(shè)置項(xiàng)目列表    282
　　12.4.1  設(shè)置無(wú)序列表    283
　　12.4.2  設(shè)置有序列表    283
　　12.4.3  設(shè)置自定義列表    284
　　12.4.4  設(shè)置圖片列表    285
12.5  練習(xí)：制作在線調(diào)查頁(yè)    286
12.6  練習(xí)：制作產(chǎn)品說(shuō)明頁(yè)面    288
12.7  新手訓(xùn)練營(yíng)    291
第13章  美化背景與邊框    293
13.1  設(shè)置背景格式    294
　　13.1.1  設(shè)置背景顏色    294
　　13.1.2  設(shè)置背景圖片    295
　　13.1.3  設(shè)置背景區(qū)域    299
13.2  設(shè)置邊框格式    301
　　13.2.1  設(shè)置邊框樣式    301
　　13.2.2  設(shè)置圖片邊框    305
13.3  設(shè)置圓角效果    306
　　13.3.1  設(shè)置圓角邊框    306
　　13.3.2  指定兩個(gè)半徑    307
　　13.3.3  繪制4個(gè)不同半徑的
           圓角邊框    307
　　13.3.4  設(shè)置隱藏邊框    308
13.4  練習(xí)：制作企業(yè)網(wǎng)站首頁(yè)    309
13.5  練習(xí)：制作圖書(shū)列表    311
13.6  新手訓(xùn)練營(yíng)    314
第14章  美化表格、表單與超鏈接    316
14.1  美化表格    317
　　14.1.1  設(shè)置邊框樣式    317
　　14.1.2  設(shè)置邊框粗細(xì)    318
　　14.1.3  設(shè)置邊框顏色    319
14.2  美化表單    321
　　14.2.1  設(shè)置表單背景    322
　　14.2.2  設(shè)置表單按鈕    323
　　14.2.3  設(shè)置菜單效果    323
14.3  美化超鏈接    324
　　14.3.1  設(shè)置超鏈接樣式    324
　　14.3.2  設(shè)置超鏈接說(shuō)明    326
　　14.3.3  設(shè)置超鏈接背景    327
　　14.3.4  設(shè)置按鈕超鏈接    328
14.4  練習(xí)：制作問(wèn)卷調(diào)查表    328
14.5  練習(xí)：制作商品列表    331
14.6  新手訓(xùn)練營(yíng)    334
第15章  CSS3變形與動(dòng)畫(huà)    336
15.1  2D變形    337
　　15.1.1  使用2D變形    337
　　15.1.2  自定義變形    340
15.2  設(shè)計(jì)動(dòng)畫(huà)    342
　　15.2.1  使用Transitions屬性    342
　　15.2.2  同時(shí)平滑過(guò)渡多個(gè)
           屬性值    343
　　15.2.3  使用Animations屬性    344
　　15.2.4  實(shí)現(xiàn)動(dòng)畫(huà)的方法    345
15.3  漸變效果    346
　　15.3.1  使用Webkit漸變    346
　　15.3.2  使用Gecko漸變    349
15.4  練習(xí)：制作不規(guī)則形狀    352
15.5  練習(xí)：制作動(dòng)態(tài)菜單    355
15.6  新手訓(xùn)練營(yíng)    357
第16章  盒樣式與用戶界面    360
16.1  使用盒相關(guān)樣式    361
　　16.1.1  盒的基本類型    361
　　16.1.2  內(nèi)容溢出    362
　　16.1.3  插入內(nèi)容    363
　　16.1.4  控制瀏覽器行為    363
　　16.1.5  區(qū)域可縮放    364
16.2  用戶界面模塊    365
　　16.2.1  設(shè)置邊框陰影    365
　　16.2.2  繪制輪廓    366
　　16.2.3  nav開(kāi)頭屬性    368
16.3  設(shè)置分欄效果    369
　　16.3.1  設(shè)置多欄布局    369
　　16.3.2  設(shè)置多欄樣式    370
16.4  練習(xí)：制作傳媒公司首頁(yè)    375
16.5  練習(xí)：制作新年賀詞頁(yè)    378
16.6  新手訓(xùn)練營(yíng)    379
第17章  JavaScript概述    383
17.1  JavaScript簡(jiǎn)介    384
　　17.1.1  認(rèn)識(shí)JavaScript    384
　　17.1.2  JavaScript與Java的區(qū)別    385
17.2  JavaScript語(yǔ)法基礎(chǔ)    386
　　17.2.1  語(yǔ)法概述    386
　　17.2.2  JavaScript語(yǔ)句    387
　　17.2.3  JavaScript注釋    388
17.3  JavaScript數(shù)據(jù)結(jié)構(gòu)和類型    389
　　17.3.1  JavaScript數(shù)據(jù)結(jié)構(gòu)    389
　　17.3.2  JavaScript數(shù)據(jù)類型    391
17.4  JavaScript運(yùn)算符    394
　　17.4.1  運(yùn)算符的優(yōu)先級(jí)    394
　　17.4.2  算術(shù)運(yùn)算符    395
　　17.4.3  比較運(yùn)算符    395
　　17.4.4  位運(yùn)算符    396
　　17.4.5  邏輯運(yùn)算符    396
　　17.4.6  條件運(yùn)算符    397
　　17.4.7  賦值運(yùn)算符    397
17.5  練習(xí)：制作海灣度假村網(wǎng)頁(yè)    398
17.6  練習(xí)：制作花品展示頁(yè)    402
17.7  新手訓(xùn)練營(yíng)    404
第18章  JavaScript核心語(yǔ)法    406
18.1  條件判斷語(yǔ)句    407
　　18.1.1  if類語(yǔ)句    407
　　18.1.2  switch語(yǔ)句    409
18.2  循環(huán)和跳轉(zhuǎn)語(yǔ)句    410
　　18.2.1  循環(huán)語(yǔ)句    410
　　18.2.2  跳轉(zhuǎn)語(yǔ)句    412
18.3  函數(shù)    414
　　18.3.1  函數(shù)簡(jiǎn)介    414
　　18.3.2  參數(shù)傳遞    414
　　18.3.3  定義函數(shù)    415
　　18.3.4  內(nèi)置函數(shù)    416
18.4  事件驅(qū)動(dòng)和事件處理    421
　　18.4.1  事件與事件驅(qū)動(dòng)    421
　　18.4.2  關(guān)聯(lián)事件與處理代碼    422
　　18.4.3  調(diào)用事件    423
18.5  練習(xí)：制作在線調(diào)查頁(yè)    424
18.6  練習(xí)：制作動(dòng)畫(huà)轉(zhuǎn)動(dòng)特效    426
18.7  新手訓(xùn)練營(yíng)    429
第19章  JavaScript的內(nèi)置對(duì)象    431
19.1  面向?qū)ο蟾攀?nbsp;   432
　　19.1.1  什么是面向?qū)ο?nbsp;   432
　　19.1.2  創(chuàng)建對(duì)象    432
　　19.1.3  屬性和方法    433
19.2  字符串對(duì)象    434
　　19.2.1  創(chuàng)建字符串對(duì)象    434
　　19.2.2  應(yīng)用對(duì)象屬性    434
　　19.2.3  應(yīng)用對(duì)象方法    435
19.3  數(shù)值對(duì)象    436
　　19.3.1  應(yīng)用對(duì)象屬性    436
　　19.3.2  應(yīng)用對(duì)象方法    437
19.4  日期對(duì)象    438
　　19.4.1  創(chuàng)建日期對(duì)象    438
　　19.4.2  應(yīng)用對(duì)象屬性    439
　　19.4.3  應(yīng)用對(duì)象方法    439
　　19.4.4  運(yùn)算日期    441
19.5  數(shù)組對(duì)象    442
　　19.5.1  創(chuàng)建數(shù)組對(duì)象    442
　　19.5.2  應(yīng)用屬性    443
　　19.5.3  應(yīng)用方法    443
19.6  練習(xí)：制作圖片展示    444
19.7  練習(xí)：制作彈出對(duì)話框    446
19.8  新手訓(xùn)練營(yíng)    448
第20章  JavaScript核心對(duì)象    450
20.1  窗口對(duì)象    451
　　20.1.1  應(yīng)用窗口    451
　　20.1.2  應(yīng)用對(duì)話框    452
　　20.1.3  應(yīng)用狀態(tài)欄    454
　　20.1.4  窗口操作    455
20.2  文檔對(duì)象    456
　　20.2.1  應(yīng)用文檔對(duì)象    456
　　20.2.2  操作文檔元素    458
20.3  表單和圖像對(duì)象    459
　　20.3.1  應(yīng)用表單對(duì)象    459
　　20.3.2  應(yīng)用圖像對(duì)象    462
20.4  練習(xí)：制作網(wǎng)頁(yè)導(dǎo)航    463
20.5  練習(xí)：制作動(dòng)態(tài)首頁(yè)    466
20.6  新手訓(xùn)練營(yíng)    471
第21章  網(wǎng)站后臺(tái)管理頁(yè)面    473
21.1  后臺(tái)管理頁(yè)設(shè)計(jì)分析    474
　　21.1.1  后臺(tái)管理系統(tǒng)的分類    474
　　21.1.2  后臺(tái)管理系統(tǒng)的功能    474
　　21.1.3  后臺(tái)框架集管理頁(yè)    474
21.2  設(shè)置登錄頁(yè)面    475
21.3  創(chuàng)建主框架集頁(yè)    478
21.4  框架集頂部文件    479
21.5  框架集左側(cè)文件    482
21.6  練習(xí)：框架集主文件    484