HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)經(jīng)典課堂

目錄
Chapter / 01
HTML5 入門
1.1 認(rèn)識HTML5        2
1.1.1 HTML 發(fā)展歷程        2
1.1.2 HTML5 和H5 的區(qū)別        2
1.2 新的特性         3
1.2.1 兼容性          3
1.2.2 化繁為簡         3
1.2.3 通用訪問         4
1.2.4 標(biāo)準(zhǔn)改進(jìn)         4
1.3 為何使用HTML5        4
1.3.1 頁面的交互性能更強(qiáng)大       5
1.3.2 字符集和DO CTYPE 的改進(jìn)       6
1.3.3 HTML5 的優(yōu)勢        6
1.4 元素的分類        8
1.4.1 結(jié)構(gòu)性元素          8
1.4.2 級塊性元素          9
1.4.3 行內(nèi)語義性元素        9
1.4.4 交互性元素          9
1.5 新增元素        10
1.6 新增屬性        16
1.6.1 表單相關(guān)屬性        16
1.6.2 其他相關(guān)屬性        16
1.7 課堂練習(xí)        17
強(qiáng)化訓(xùn)練         18
Chapter / 02
在頁面中繪圖
2.1 canvas 入門       20
2.1.1 canvas 含義        20
2.1.2 canvas 坐標(biāo)        20
2.2 使用canvas       21
2.2.1 在頁面中加入canvas        21
2.2.2 繪制矩形和五角形       22
2.2.3 檢測瀏覽器是否支持        25
2.3 繪制曲線路徑        26
2.3.1 繪制路徑的方法         26
2.3.2 描邊樣式的使用        27
2.3.3 填充和曲線的繪制方法       28
2.4 繪制圖像        30
2.4.1 使用canvas 插入圖片        30
2.4.2 漸變顏色的使用        31
2.4.3 變形圖形的設(shè)置方法        33
2.4.4 組合圖形的繪制方法        34
2.4.5 使用canvas 繪制文字        35
2.5 課堂練習(xí)        37
強(qiáng)化訓(xùn)練         39
Chapter / 03
制作新型的表單
3.1 新的表單元素        42
3.1.1 datalist 元素        42
3.1.2 keygen 元素        42
3.1.3 output 元素        43
3.2 新的表單屬性        44
3.2.1 form 屬性         44
3.2.2 formaction 屬性         45
3.2.3 placeholder 屬性        45
3.2.4 list 屬性          46
3.2.5 min 和max 屬性        46
3.2.6 novalidate 屬性         47
3.2.7 multiple 屬性        47
3.2.8 step 屬性         48
3.3 表單的輸入型控件      48
3.3.1 Input 類型E-mail        48
3.3.2 Input 類型url        49
3.3.3 Input 類型number       49
3.3.4 Input 類型range        50
3.3.5 Input 類型Date Pickers       50
3.3.6 Input 類型color         51
3.4 制作一個(gè)表單        52
3.5 課堂練習(xí)        54
強(qiáng)化訓(xùn)練         56
Chapter / 04
地理位置請求
4.1 關(guān)于地理位置信息      58
4.1.1 經(jīng)度和緯度坐標(biāo)         58
4.1.2 IP 地址定位數(shù)據(jù)        58
4.1.3 GPS 和Wi-Fi 地理定位數(shù)據(jù)      58
4.1.4 用戶自定義的地理定位        59
4.2 瀏覽器對Geolocation 的支持     59
Contents
Contents
4.2.1 GeolocationAPI 概述       59
4.2.2 Geolocation 的瀏覽器支持情況      62
4.3 隱私處理        62
4.3.1 應(yīng)用隱私保護(hù)機(jī)制        62
4.3.2 處理位置信息         62
4.4 使用Geolocation API       63
4.4.1 檢測瀏覽器是否支持       63
4.4.2 位置請求         64
4.5 在地圖上顯示位置      66
4.6 課堂練習(xí)        69
強(qiáng)化訓(xùn)練         71
Chapter / 05
拖曳上傳的應(yīng)用
5.1 拖放API        74
5.1.1 實(shí)現(xiàn)拖放API 的過程       74
5.1.2 dataTransfer 對象的屬性與方法      74
5.2 拖放API 的應(yīng)用       75
5.2.1 拖放應(yīng)用          75
5.2.2 拖放列表         76
5.3 課堂練習(xí)        78
強(qiáng)化訓(xùn)練         80
Chapter / 06
CSS3 選擇器
6.1 CSS 選擇器       82
6.1.1 三大基礎(chǔ)選擇器         82
6.1.2 集體選擇器         85
6.1.3 屬性選擇器         86
6.2 CSS3 入門        88
6.2.1 CSS3 與之前版本的異同點(diǎn)      88
6.2.2 CSS3 新增的長度單位       88
6.2.3 CSS3 新增結(jié)構(gòu)性偽類       90
6.2.4 CSS3 新增UI 元素狀態(tài)偽類      95
6.2.5 CSS3 新增屬性        97
6.3 課堂練習(xí)        101
強(qiáng)化訓(xùn)練         102
Chapter / 07
CSS3 設(shè)計(jì)動畫
7.1 過渡基礎(chǔ)        104 Contents
7.1.1 過渡屬性          104
7.1.2 瀏覽器支持情況         104
7.2 實(shí)現(xiàn)過渡        105
7.2.1 單項(xiàng)屬性過渡        105
7.2.2 多項(xiàng)屬性過渡         105
7.2.3 利用過渡設(shè)計(jì)電腦桌面       107
7.3 實(shí)現(xiàn)動畫        108
7.3.1 瀏覽器支持情況         108
7.3.2 動畫屬性         109
7.3.3 實(shí)現(xiàn)動畫效果         111
7.4 課堂練習(xí)        112
強(qiáng)化訓(xùn)練         114
Chapter / 08
多彩的樣式設(shè)計(jì)
8.1 設(shè)置多彩的文本樣式       116
8.1.1 設(shè)置文本陰影        116
8.1.2 設(shè)置文本溢出        124
8.1.3 給文本換行         125
8.1.4 把單詞拆分         127
8.1.5 設(shè)置圓角邊框        128
8.1.6 設(shè)置盒子陰影        128
8.2 頁面中多彩顏色的設(shè)置      130
8.2.1 使用HSL 顏色值        130
8.2.2 使用HSLA 顏色值        134
8.3 課堂練習(xí)        135
強(qiáng)化訓(xùn)練         137
Chapter / 09
CSS3 用戶的交互界面
9.1 自適應(yīng)顯示效果       140
9.1.1 多媒體查詢語法         140
9.1.2 多媒體查詢方法         140
9.1.3 自適應(yīng)的導(dǎo)航欄         142
9.2 用戶界面簡介        146
9.2.1 讓用戶自調(diào)尺寸         146
9.2.2 調(diào)整方框的大小        147
9.2.3 修飾外形輪廓樣式       150
9.2.4 界面的多列布局        151
9.3 課堂練習(xí)        153
強(qiáng)化訓(xùn)練         154
Chapter / 10
彈性盒子模型
10.1 盒子模型       156
10.1.1 盒子簡介         156
10.1.2 外邊距設(shè)置        156
10.1.3 外邊距合并        158
10.1.4 內(nèi)邊距設(shè)置        161
10.2 彈性盒子       161
10.2.1 彈性盒子基礎(chǔ)         161
10.2.2 對父級容器的設(shè)置       162
10.2.3 對子級內(nèi)容的設(shè)置       170
10.3 課堂練習(xí)       174
強(qiáng)化訓(xùn)練         176
Chapter / 11
顏色漸變和圖形轉(zhuǎn)換
11.1 漸變         178
11.1.1 瀏覽器支持        178
11.1.2 線性漸變         179
11.1.3 徑向漸變         180
11.2 2D 轉(zhuǎn)換        181
11.2.1 移動translate()        181
11.2.2 旋轉(zhuǎn)rotate()        182
11.2.3 縮放scale()        183
11.2.4 傾斜skew()        185
11.3 3D 轉(zhuǎn)換        186
11.3.1 rotateX() 方法         186
11.3.2 rotateY() 方法         188
11.3.3 轉(zhuǎn)換屬性         188
11.3.4 3D 轉(zhuǎn)換方法        192
11.4 課堂練習(xí)       192
強(qiáng)化訓(xùn)練         194
Chapter / 12
JavaScript 入門必學(xué)
12.1 JavaScript 入門       196
12.1.1 JavaScript 的發(fā)展       196
12.1.2 JavaScript 的特點(diǎn)       196
12.1.3 JavaScript 應(yīng)用方向        197
12.1.4 JavaScript 的用法       197
12.2 JavaScript 的基本語法      199
12.2.1 數(shù)據(jù)類型        200
12.2.2 常量和變量         202
12.2.3 運(yùn)算符和表達(dá)式       203
12.2.4 基本語句        209
12.3 JavaScript 事件分析       213
12.3.1 事件類型         214
12.3.2 事件句柄         217
12.3.3 事件處理         218 Contents
12.4 課堂練習(xí)       219
強(qiáng)化訓(xùn)練         220
Chapter / 13
特效應(yīng)用
13.1 JavaScript 函數(shù)       222
13.1.1 JavaScript 函數(shù)定義       222
13.1.2 JavaScript 函數(shù)參數(shù)       224
13.1.3 JavaScript 函數(shù)調(diào)用方法       227
13.2 JavaScript 應(yīng)用表單       228
13.2.1 按鈕對象        228
13.2.2 復(fù)選框?qū)ο?nbsp;        229
13.2.3 列表框?qū)ο?nbsp;        230
13.3 JavaScript 事件分析       231
13.3.1 輪播圖效果        231
13.3.2 字體閃爍效果        235
13.3.3 鼠標(biāo)滑過效果        235
13.4 JavaScript 特效制作       237
13.4.1 顯示網(wǎng)頁停留時(shí)間        237
13.4.2 制作定時(shí)關(guān)閉窗口        238
13.5 課堂練習(xí)       239
強(qiáng)化訓(xùn)練         240
Chapter / 14
綜合實(shí)踐應(yīng)用
14.1 制作一顆流星       242
14.1.1 分析流星的尾部       242
14.1.2 繪制一顆流行        242
14.2 制作一場流星雨      244
14.2.1 制作流星星         244
14.2.2 鼠標(biāo)移動的效果       246
參考文獻(xiàn)         251