Web客戶端開發(fā) HTML5+CSS+JavaScript實例教程

第1章 網(wǎng)站前端設(shè)計知識準備 1
1.1 Web基礎(chǔ) 2
1.1.1 Web的基本概念 2
1.1.2 了解“Web標準” 2
1.1.3 靜態(tài)網(wǎng)頁 4
1.1.4 動態(tài)網(wǎng)頁 4
1.2 網(wǎng)站開發(fā) 4
1.2.1 網(wǎng)站開發(fā)的基本流程 4
1.2.2 網(wǎng)站開發(fā)的人才需求 5
1.2.3 網(wǎng)站開發(fā)的主要技術(shù) 6
1.3 Web前端工程師需要掌握的技能 6
1.3.1 Web前端工程師的工作內(nèi)容 6
1.3.2 Web前端工程師需要掌握的
技術(shù) 6
1.4 網(wǎng)站開發(fā)工具介紹 8
1.4.1 原型設(shè)計工具 8
1.4.2 開發(fā)工具 9
1.4.3 調(diào)試工具 9
1.4.4 代碼托管工具 10
本章小結(jié) 10
習(xí)題 11
第2章 HTML 5基礎(chǔ) 13
2.1 HTML簡介 14
2.1.1 了解HTML 14
2.1.2 HTML元素 15
2.2 初識HTML 5 16
2.2.1 了解HTML 5 16
2.2.2 HTML 5的新功能 17
2.2.3 HTML 5的廢棄標記 18
2.2.4 HTML 5的新增標記 18
2.2.5 HTML 5的新增屬性 19
2.3 HTML 5的結(jié)構(gòu) 20
2.3.1 HTML 5的基本結(jié)構(gòu) 20
2.3.2 編寫第一個符合W3C標準的
HTML 5網(wǎng)頁 21
2.4 HTML 5文檔的常用標記 22
2.4.1 文本段落的相關(guān)標記 22
2.4.2 圖像標記 23
2.4.3 超鏈接 24
2.4.4 列表 26
2.4.5 表格 27
2.4.6 HTML 5的音頻和視頻 29
2.5 HTML 5的表單元素 32
2.5.1 創(chuàng)建表單 32
2.5.2 input輸入類型控件 32
2.5.3 列表框(select) 39
2.5.4 多行文本輸入框(textarea) 39
2.5.5 表單控件綜合示例 40
2.6 HTML 5語義化結(jié)構(gòu)性元素 41
2.6.1 新增的主體結(jié)構(gòu)元素 41
2.6.2 新增的非主體結(jié)構(gòu)元素 46
2.7 小型案例實訓(xùn)：使用結(jié)構(gòu)元素進行
網(wǎng)頁布局 47
本章小結(jié) 49
習(xí)題 49
第3章 CSS基礎(chǔ) 51
3.1 CSS概述 52
3.1.1 什么是CSS 52
3.1.2 CSS的發(fā)展史 52
3.1.3 CSS 3簡介 53
3.2 CSS的組成 53
3.2.1 基本語法規(guī)則 53
3.2.2 選擇符的分類 54
3.3 在HTML中使用CSS的方法 61
3.3.1 行內(nèi)樣式 61
3.3.2 內(nèi)部樣式 61
3.3.3 外部樣式 62
3.3.4 CSS的優(yōu)先級 63
3.3.5 常用的CSS 3屬性前綴 63
本章小結(jié) 63
習(xí)題 64
第4章 CSS布局 65
4.1 CSS的盒模型 66
4.1.1 盒模型的結(jié)構(gòu) 66
4.1.2 盒模型的元素類型 67
4.1.3 使用DIV 69
4.1.4　外邊距、內(nèi)邊距與邊框的
CSS設(shè)置 70
4.1.5 CSS 3對盒模型邊框的完善 74
4.2 網(wǎng)頁元素的定位 78
4.2.1 定位屬性position 78
4.2.2 float浮動定位 81
4.2.3 其他CSS布局定位方式 83
4.3 DIV + CSS常用的布局方式 84
4.3.1 單列水平居中布局 85
4.3.2 浮動的布局 87
4.3.3 div嵌套布局 89
4.3.4 CSS 3多列布局 92
4.4 列表元素布局 94
4.5 小型案例實訓(xùn)——布局電商網(wǎng)站
首頁(制作盒模型) 95
4.5.1 布局網(wǎng)頁的總體結(jié)構(gòu) 95
4.5.2 區(qū)域的
結(jié)構(gòu)分析及布局 96
4.5.3
內(nèi)容區(qū)域的設(shè)計 98
4.5.4 區(qū)域的
設(shè)計 100
本章小結(jié) 100
習(xí)題 101
第5章 CSS樣式屬性 103
5.1 CSS 3字體相關(guān)屬性 104
5.1.1 設(shè)置字體屬性 104
5.1.2 設(shè)置字體屬性的綜合示例 106
5.1.3 CSS 3新增字體屬性 106
5.2 CSS控制文本的樣式 107
5.2.1 文本屬性 107
5.2.2 設(shè)置文本屬性的綜合示例 109
5.2.3 CSS 3新增的文本屬性 110
5.3 使用CSS控制背景 114
5.3.1 背景屬性 114
5.3.2 背景設(shè)置綜合示例 116
5.3.3 CSS 3新增的與背景相關(guān)的
屬性 116
5.4 使用CSS設(shè)置列表樣式 121
5.4.1 CSS列表屬性 121
5.4.2 列表屬性的綜合實例 122
5.5 小型案例實訓(xùn) 123
5.5.1 案例1：商品信息展示 123
5.5.2 案例2：CSS制作二級導(dǎo)航
下拉菜單 125
本章小結(jié) 128
習(xí)題 128
第6章 JavaScript入門 131
6.1 JavaScript概述 132
6.1.1 認識JavaScript 132
6.1.2 JavaScript的特點和作用 132
6.1.3 在網(wǎng)頁中使用JavaScript 134
6.1.4 JavaScript代碼規(guī)范 135
6.2 變量、數(shù)據(jù)類型 136
6.2.1 變量的聲明和使用 136
6.2.2 JavaScript的基本數(shù)據(jù)類型 138
6.3 表達式與運算符 141
6.3.1 表達式 141
6.3.2 運算符 141
6.4 流程控制語句 148
6.4.1 分支結(jié)構(gòu) 148
6.4.2 循環(huán)結(jié)構(gòu) 151
6.5 JavaScript的函數(shù) 154
6.5.1 函數(shù)的定義 154
6.5.2 函數(shù)的調(diào)用 154
6.5.3 使用函數(shù)的返回值 157
6.5.4 函數(shù)的嵌套 158
6.5.5 內(nèi)置函數(shù) 158
6.6 小型案例實訓(xùn)——制作簡易
計算器 160
本章小結(jié) 162
習(xí)題 162
第7章 JavaScript中的對象 165
7.1 JavaScript的常用內(nèi)置對象 166
7.1.1 數(shù)組對象 166
7.1.2 字符串(String)對象 170
7.1.3 日期(Date)對象 172
7.1.4 數(shù)學(xué)(Math)對象 174
7.2 常用文檔對象 177
7.2.1 文檔對象模型(DOM對象) 177
7.2.2 文檔對象的節(jié)點樹 178
7.2.3 文檔對象(document) 185
7.2.4 表單及其控件對象 188
7.2.5 style對象 190
7.3 常用窗口對象 192
7.3.1 屏幕對象 192
7.3.2 window窗口對象 194
7.3.3 瀏覽器信息對象 196
7.3.4 網(wǎng)址對象 197
7.3.5 歷史記錄對象 198
7.4 小型案例實訓(xùn) 200
7.4.1 案例1：將英文單詞首字母
改成大寫 200

7.4.2 案例2：限制多行文本域
輸入的字符個數(shù) 202
本章小結(jié) 204
習(xí)題 205
第8章 事件處理 209
8.1 了解JavaScript事件 210
8.1.1 JavaScript的常用事件 210
8.1.2 調(diào)用事件處理程序的方法 211
8.2 常用事件在網(wǎng)頁中的應(yīng)用 213
8.2.1 鼠標事件 213
8.2.2 表單事件 216
8.2.3 頁面相關(guān)事件 221
8.2.4 鍵盤事件 222
8.3 小型案例實訓(xùn)：JavaScript實現(xiàn)
廣告圖像輪播 223
本章小結(jié) 227
習(xí)題 227
第9章 利用JavaScript實現(xiàn)Canvas
功能 229
9.1 創(chuàng)建Canvas元素 230
9.2 繪制基本圖形 231
9.2.1 繪制直線 232
9.2.2 繪制圓形 232
9.2.3 繪制矩形 233
9.2.4 繪制多邊形 234
9.3 圖形的變換 235
9.3.1 保存與恢復(fù)Canvas狀態(tài) 235
9.3.2 移動坐標位置 236
9.3.3 縮放圖形 237
9.4 使用特效 237
9.5 繪制文本 239
9.6 小型案例實訓(xùn)：用Canvas繪制
時鐘 240
9.6.1 繪制靜態(tài)時鐘 240
9.6.2 制作動態(tài)時鐘 244
本章小結(jié) 244
習(xí)題 245
第10章 綜合案例——購物車功能的
實現(xiàn) 247
10.1 案例介紹 248
10.2 設(shè)計思路 248
10.3 實施過程 249
10.3.1 購物車的HTML結(jié)構(gòu) 249
10.3.2 購物車的樣式設(shè)計 251
10.3.3 利用JavaScript實現(xiàn)購物車
功能 256
參考文獻 262