網(wǎng)頁設(shè)計與制作教程：HTML5+CSS3+JavaScript+jQuery（第2版）

第1章 HTML5基礎(chǔ)知識 1
1．1 Web技術(shù)和瀏覽器 1
1．2 Web標準 1
1．2．1 什么是Web標準 1
1．2．2 建立Web標準的優(yōu)點 2
1．2．3 理解表現(xiàn)和結(jié)構(gòu)相分離 2
1．3 HTML5概述 3
1．3．1 Web技術(shù)發(fā)展歷程 3
1．3．2 HTML5的特性 4
1．3．3 HTML5元素 4
1．4 HTML5的基本結(jié)構(gòu) 5
1．4．1 HTML5語法結(jié)構(gòu) 5
1．4．2 HTML5編寫規(guī)范 6
1．4．3 HTML5文檔結(jié)構(gòu) 6
1．5 創(chuàng)建HTML文件 7
1．6 搭建支持HTML5的瀏覽器
環(huán)境 8
1．7 網(wǎng)頁頭部標簽 9
1．8 注釋 11
1．9 特殊符號 11
習(xí)題1 12
第2章 編輯網(wǎng)頁元素 13
2．1 文本元素 13
2．2 文本層次語義元素 15
2．3 基本排版元素 17
2．4 圖像 21
2．4．1 網(wǎng)頁圖像的格式及使用
要點 21
2．4．2 圖像標簽 22
2．4．3 設(shè)置網(wǎng)頁背景圖像 24
2．4．4 圖文混排 24
2．4．5 案例―制作天地環(huán)保
“關(guān)于我們”圖文混排
頁面 25
2．5 超鏈接 26
2．5．1 超鏈接概述 26
2．5．2 超鏈接的應(yīng)用 26
2．5．3 案例―制作天地環(huán)保
“下載專區(qū)”頁面 30
2．6 列表 32
2．6．1 無序列表 32
2．6．2 有序列表 33
2．6．3 定義列表 34
2．6．4 嵌套列表 35
2．7 ＜div＞標簽 35
2．8 ＜span＞標簽 36
2．9 綜合案例―制作天地環(huán)保
“公司名片”頁面 37
習(xí)題2 38
第3章 頁面的布局與交互 40
3．1 表格 40
3．1．1 表格的結(jié)構(gòu) 40
3．1．2 表格的基本語法 40
3．1．3 表格的屬性 41
3．1．4 不規(guī)范表格 43
3．1．5 表格數(shù)據(jù)的分組 44
3．1．6 表格的嵌套 46
3．1．7 案例―使用表格布局
天地環(huán)保“工程展示”
頁面 46
3．2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局 47
3．3 頁面交互元素 53
3．3．1 details元素和summary
元素 53
3．3．2 progress元素 54
3．3．3 meter元素 54
3．4 表單 55
3．4．1 表單的基本概念 55
3．4．2 表單標簽 55
3．4．3 表單元素 56
3．4．4 案例―制作天地環(huán)保
“會員注冊”表單 60
3．4．5 表單分組 61
3．4．6 使用表格布局表單 62
3．4．7 表單的高級用法 63
習(xí)題3 64
第4章 CSS3基礎(chǔ) 66
4．1 CSS概述 66
4．2 CSS的優(yōu)勢與局限性 68
4．3 CSS語法基礎(chǔ) 70
4．3．1 CSS樣式規(guī)則 70
4．3．2 基本選擇符 71
4．3．3 復(fù)合選擇符 73
4．3．4 通配符選擇符 75
4．3．5 特殊選擇符 76
4．4 CSS的屬性單位 77
4．4．1 長度、百分比單位 78
4．4．2 色彩單位 78
4．5 網(wǎng)頁中引用CSS的方法 79
4．5．1 行內(nèi)樣式 79
4．5．2 內(nèi)部樣式表 80
4．5．3 鏈入外部樣式表 81
4．5．4 導(dǎo)入外部樣式表 82
4．5．5 案例―制作“天地環(huán)保
工程簡介”頁面 83
4．6 文檔結(jié)構(gòu) 85
4．6．1 文檔結(jié)構(gòu)的基本概念 85
4．6．2 繼承 86
4．6．3 樣式表的層疊、特殊性
與重要性 87
4．6．4 元素類型 88
4．6．5 案例―制作天地環(huán)保
“核心業(yè)務(wù)”局部頁面 89
習(xí)題4 90
第5章 盒模型 91
5．1 盒模型簡介 91
5．2 盒模型的屬性 92
5．2．1 邊框 92
5．2．2 外邊距 95
5．2．3 內(nèi)邊距 96
5．2．4 案例―盒模型的演示 97
5．3 盒模型的大小 98
5．3．1 盒模型的寬度與高度 98
5．3．2 設(shè)置塊級元素與行級
元素的寬度和高度 98
5．4 盒模型綜合案例―“天地環(huán)保”
頁面頂部內(nèi)容 99
5．5 盒子的定位 101
5．5．1 定位屬性 101
5．5．2 定位方式 103
5．6 浮動與清除浮動 106
5．6．1 浮動 106
5．6．2 清除浮動 109
5．6．3 案例―天地環(huán)?！暗卿洝?br />頁面的整體布局 110
習(xí)題5 112
第6章 使用CSS修飾頁面外觀 113
6．1 設(shè)置字體樣式 113
6．2 設(shè)置文本樣式 115
6．3 設(shè)置圖像樣式 118
6．3．1 圖像縮放 119
6．3．2 圖像邊框 120
6．3．3 圖像的不透明度 121
6．3．4 背景圖像 121
6．3．5 背景重復(fù) 122
6．3．6 背景圖像定位 123
6．3．7 設(shè)置背景圖像固定 125
6．3．8 背景圖像大小 125
6．4 設(shè)置表格樣式 126
6．4．1 常用的CSS表格屬性 126
6．4．2 案例―使用隔行換色
表格制作“環(huán)保工程年度
排行榜” 128
6．5 設(shè)置表單樣式 129
6．5．1 使用CSS修飾常用的
表單元素 130
6．5．2 案例―制作“天地環(huán)保
用戶調(diào)查”頁面 131
6．6 設(shè)置鏈接 133
6．6．1 設(shè)置文字鏈接的外觀 133
6．6．2 圖文鏈接 135
6．7 設(shè)置列表 136
6．7．1 表格布局的缺點 136
6．7．2 列表布局的優(yōu)勢 136
6．7．3 CSS列表屬性 136
6．7．4 案例―制作天地環(huán)保
二維碼名片 140
6．8 創(chuàng)建導(dǎo)航菜單 141
6．9 綜合案例―制作“綠色環(huán)?！?br />社區(qū)頁面 144
習(xí)題6 151
第7章 CSS布局技術(shù) 152
7．1 Div+CSS布局技術(shù)簡介 152
7．2 使用嵌套的Div布局頁面 153
7．2．1 將頁面用Div分塊 153
7．2．2 案例―制作“環(huán)?？臻g”
頁面 153
7．3 典型的CSS布局樣式 156
7．3．1 兩列布局樣式 156
7．3．2 三列布局樣式 159
7．4 綜合案例―制作天地環(huán)保
“博客”頁面 162
習(xí)題7 170
第8章 JavaScript程序設(shè)計基礎(chǔ) 171
8．1 JavaScript概述 171
8．2 在網(wǎng)頁中使用JavaScript 171
8．3 JavaScript基本語法 174
8．4 JavaScript的程序結(jié)構(gòu) 176
8．4．1 簡單語句 176
8．4．2 程序控制流程 178
8．5 函數(shù) 181
8．6 基于對象的JavaScript語言 183
8．7 DOM編程 185
8．7．1 window對象 186
8．7．2 document對象 187
8．7．3 location對象 189
8．7．4 history對象 190
8．7．5 form對象 190
8．8 JavaScript的對象事件處理
程序 191
8．8．1 對象的事件 191
8．8．2 常用的事件及處理 191
8．8．3 表單對象與交互性 194
8．9 綜合案例―Web頁面信息
交互 196
習(xí)題8 197
第9章 HTML5的高級應(yīng)用 199
9．1 HTML5拖放API 199
9．1．1 draggable屬性 199
9．1．2 拖放觸發(fā)的事件和數(shù)據(jù)
傳遞 200
9．2 多媒體播放 202
9．2．1 HTML5的多媒體支持 202
9．2．2 音頻標簽 203
9．2．3 視頻標簽 204
9．2．4 HTML5多媒體API 205
9．3 Canvas繪圖 207
9．3．1 創(chuàng)建＜canvas＞元素 207
9．3．2 構(gòu)建繪圖環(huán)境 208
9．3．3 通過JavaScript繪制
圖形 208
9．4 HTML5地理定位API 216
9．4．1 Geolocation基礎(chǔ) 216
9．4．2 Geolocation API實現(xiàn)
地理定位 217
9．4．3 案例―使用HTML5
獲取地理位置及百度
地圖 218
9．5 HTML5的發(fā)展前景 221
習(xí)題9 221
第10章 jQuery基礎(chǔ) 222
10．1 jQuery概述 222
10．2 編寫jQuery程序 223
10．3 jQuery對象和DOM對象 224
10．3．1 jQuery對象和DOM
對象簡介 224
10．3．2 jQuery對象和DOM
對象的相互轉(zhuǎn)換 225
10．4 jQuery插件 228
10．5 jQuery選擇器簡介 228
10．6 基礎(chǔ)選擇器 229
10．7 層次選擇器 234
10．8 過濾選擇器 237
10．9 表單選擇器 241
10．10 jQuery的基本操作 242
10．10．1 元素屬性的操作 242
10．10．2 元素樣式的操作 245
10．10．3 元素內(nèi)容和值的
操作 247
習(xí)題10 249
第11章 jQuery的動畫效果 251
11．1 jQuery的動畫方法簡介 251
11．2 顯示與隱藏效果 252
11．3 淡入/淡出效果 255
11．4 滑動效果 258
11．5 綜合案例―制作折疊式
導(dǎo)航菜單 260
習(xí)題11 262
第12章 jQuery UI插件的用法 263
12．1 jQuery UI概述 263
12．2 jQuery UI的常用插件 267
12．2．1 日期選擇器插件 267
12．2．2 折疊面板插件 268
12．2．3 標簽頁插件 271
12．2．4 自動完成插件 272
習(xí)題12 275
第13章 天地環(huán)保綜合案例網(wǎng)站 277
13．1 網(wǎng)站的開發(fā)流程和組織結(jié)構(gòu) 277
13．1．1 網(wǎng)站的開發(fā)流程 277
13．1．2 創(chuàng)建站點目錄 278
13．1．3 網(wǎng)站頁面的組成 279
13．2 網(wǎng)站技術(shù)分析 279
13．3 制作網(wǎng)站首頁 280
13．4 制作聯(lián)系我們頁面 291
13．5 實訓(xùn)網(wǎng)站 292
習(xí)題13 292