細(xì)說網(wǎng)頁制作

目錄
第1章 介紹HTML5 1
1．1 了解HTML5的主流應(yīng)用 1
1．1．1 表單的強(qiáng)大 2
1．1．2 響應(yīng)式頁面布局 2
1．1．3 與用戶交互的特效 4
1．1．4 微網(wǎng)站的制作 5
1．1．5 基于HTML5的移動(dòng)APP開發(fā) 6
1．1．6 HTML5游戲 7
1．1．7 多媒體的應(yīng)用 7
1．2 什么是HTML5 8
1．2．1 HTML5和HTML的關(guān)系 8
1．2．2 HTML和CSS的關(guān)系 10
1．2．3 HTML5和CSS3的關(guān)系 11
1．2．4 HTML5和JavaScript的關(guān)系 11
1．3 HTML5的靠山 12
1．3．1 W3C是什么 12
1．3．2 IETF是什么 13
1．3．3 RFC是什么 14
1．3．4 WHATWG是什么 14
1．3．5 Web的新標(biāo)準(zhǔn) 14
1．4 HTML5的曲折發(fā)展過程 15
1．4．1 HTML5的誕生 15
1．4．2 瀏覽器之間的大戰(zhàn) 16
1．4．3 HTML5技術(shù)的應(yīng)用現(xiàn)狀 18
1．4．4 HTML5平臺(tái)的興起 18
1．4．5 HTML5行業(yè)的發(fā)展預(yù)測 20
1．5 HTML5的學(xué)習(xí)線路圖 21
1．5．1 第一階段――學(xué)習(xí)網(wǎng)頁制作 23
1．5．2 第二階段――編寫用戶交互功能 24
1．5．3 第三階段――成為前端工程師 25
本章小結(jié) 26
本章習(xí)題 26
第2章 HTML5的基本語法 28
2．1 課前準(zhǔn)備 28
2．1．1 了解Web 29
2．1．2 了解HTML 30
2．1．3 了解HTML運(yùn)行原理 30
2．1．4 如何選擇開發(fā)工具 31
2．1．5 認(rèn)識(shí)瀏覽器中的開發(fā)者工具 32
2．1．6 現(xiàn)在學(xué)習(xí)HTML5的方式 34
2．1．7 簡單HTML實(shí)例制作 35
2．2 HTML語言的語法 36
2．2．1 HTML標(biāo)簽和元素 36
2．2．2 HTML語法不區(qū)分字母大小寫 37
2．2．3 HTML標(biāo)簽屬性 37
2．2．4 HTML顏色值的設(shè)置 37
2．2．5 HTML文檔注釋 38
2．2．6 HTML代碼格式 38
2．2．7 HTML字符實(shí)體 38
2．3 HTML文檔的主體結(jié)構(gòu) 39
2．3．1 HTML文檔類型的新定義方式 40
2．3．2 HTML文檔的主體標(biāo)簽 41
2．4 HTML文檔頭部標(biāo)簽＜head＞ 41
2．4．1 ＜title＞標(biāo)簽 42
2．4．2 ＜base＞標(biāo)簽 42
2．4．3 ＜link＞標(biāo)簽 43
2．4．4 ＜meta＞標(biāo)簽 43
2．5 HTML文檔主體標(biāo)簽＜body＞ 44
2．6 HTML5做到了與之前版本的兼容 45
2．6．1 可以省略標(biāo)記的元素 45
2．6．2 具有boolean值的屬性 46
2．6．3 引號(hào)的使用 46
2．7 設(shè)置IE 9以下版本瀏覽器支持HTML5 46
本章小結(jié) 47
本章習(xí)題 47
第3章 HTML5文字版面和編輯標(biāo)簽 49
3．1 HTML基礎(chǔ)標(biāo)簽 49
3．1．1 標(biāo)題標(biāo)簽＜h1＞～＜h6＞ 50
3．1．2 換行標(biāo)簽
和段落標(biāo)簽＜p＞ 51
3．1．3 水平分隔線標(biāo)簽＜hr＞ 51
3．1．4 格式標(biāo)簽 51
3．1．5 文本標(biāo)簽 53
3．2 使用HTML表格 55
3．3 HTML框架結(jié)構(gòu) 57
本章小結(jié) 60
本章習(xí)題 61
第4章 多媒體應(yīng)用 62
4．1 創(chuàng)建圖像和鏈接 62
4．1．1 URL概述 63
4．1．2 插入圖片 63
4．1．3 建立錨點(diǎn)和超鏈接 64
4．2 HTML圖像地圖 66
4．2．1 什么是圖像地圖 66
4．2．2 圖像地圖如何制作 66
4．2．3 實(shí)現(xiàn)圖像地圖 67
4．3 新增多媒體播放元素 68
本章小結(jié) 71
本章習(xí)題 71
第5章 HTML5表單 74
5．1 HTML表單中的get和post方法 74
5．1．1 get方法 75
5．1．2 post方法 76
5．1．3 HTML表單中g(shù)et和post的區(qū)別 76
5．2 HTML表單設(shè)計(jì) 77
5．2．1 表單標(biāo)簽＜form＞ 77
5．2．2 文本域和密碼域 78
5．2．3 提交、重置和普通按鈕 78
5．2．4 單選按鈕和復(fù)選框 79
5．2．5 隱藏域 79
5．2．6 多行文本域 79
5．2．7 菜單下拉列表域 79
5．2．8 綜合實(shí)例 80
5．3 HTML5新增表單元素 82
5．3．1 ＜datalist＞元素 82
5．3．2 ＜keygen＞元素 83
5．3．3 ＜o(jì)utput＞元素 84
5．4 多樣的輸入類型 85
5．4．1 email 85
5．4．2 url 86
5．4．3 number 87
5．4．4 range 87
5．4．5 date picker 88
5．4．6 color 89
5．5 HTML占新增的表單屬性 91
5．5．1 autocomplete屬性 92
5．5．2 autofocus屬性 93
5．5．3 form屬性 94
5．5．4 form overrides表單重寫屬性 95
5．5．5 height和width屬性 95
5．5．6 list屬性 96
5．5．7 min、max和step屬性 96
5．5．8 multiple屬性 97
5．5．9 novalidate屬性 97
5．5．10 pattern屬性 98
5．5．11 placeholder屬性 98
5．5．12 required屬性 99
5．6 HTML5表單提交綜合實(shí)例 100
本章小結(jié) 103
本章習(xí)題 103
第6章 CSS3揭秘 105
6．1 CSS簡介 105
6．2 CSS規(guī)則的組成 107
6．2．1 CSS注釋 108
6．2．2 長度單位 108
6．2．3 顏色單位和URL值 109
6．3 在HTML文檔中放置CSS的幾種方式 110
6．3．1 內(nèi)聯(lián)樣式表 110
6．3．2 嵌入一張樣式表 110
6．3．3 鏈接到一張外部的樣式表 111
6．4 CSS普通選擇器 111
6．4．1 HTML選擇器 111
6．4．2 類選擇器 112
6．4．3 id選擇器 112
6．4．4 關(guān)聯(lián)選擇器 113
6．4．5 組合選擇器 113
6．4．6 偽元素選擇器 113
6．5 CSS常見的樣式屬性和值 114
6．5．1 字體屬性 114
6．5．2 顏色屬性 115
6．5．3 背景屬性 115
6．5．4 文本屬性 116
6．5．5 邊框?qū)傩?117
6．5．6 鼠標(biāo)光標(biāo)屬性 118
6．5．7 列表屬性 119
6．5．8 CSS綜合實(shí)例 120
6．6 CSS3概述 122
6．6．1 CSS3在選擇器上的支持 122
6．6．2 CSS3在樣式上的支持 122
6．6．3 CSS3對于動(dòng)畫的支持 123
6．6．4 在實(shí)際開發(fā)中該如何使用CSS3 123
6．7 CSS復(fù)雜選擇器 123
6．7．1 基本選擇器 123
6．7．2 多元素的組合選擇器 124
6．7．3 屬性選擇器 124
6．7．4 結(jié)構(gòu)性偽類選擇器 125
6．8 CSS3屬性 129
6．8．1 使用CSS3屬性前的準(zhǔn)備 130
6．8．2 邊框?qū)傩?130
6．8．3 背景屬性 132
6．8．4 文本屬性 133
6．8．5 用戶界面屬性 133
6．8．6 動(dòng)畫屬性 134
6．8．7 多列布局屬性 134
6．8．8 漸變屬性 135
6．8．9 透明屬性 136
6．8．10 旋轉(zhuǎn)屬性 136
6．8．11 服務(wù)器端字體屬性 136
本章小結(jié) 137
本章習(xí)題 137
第7章 CSS3屬性特效 140
7．1 新增顏色模式 140
7．2 文字 142
7．2．1 文字陰影 143
7．2．2 文字描邊 146
7．2．3 文字排版 150
7．2．4 定義省略文本的處理方式 152
7．3 自定義文字 153
7．4 彈性盒模型 156
7．5 盒模型陰影 164
7．6 倒影 167
7．7 CSS3分欄布局 173
7．7．1 列個(gè)數(shù)和列寬度 173
7．7．2 列之間的縫隙間隔寬度 175
7．7．3 分欄間隔符 176
7．8 圓角 177
7．8．1 border-radius屬性 177
7．8．2 單個(gè)圓角的設(shè)置 180
7．9 邊框 181
7．9．1 邊框圖片border-image 182
7．9．2 自適應(yīng)的圓角效果 186
7．10 漸變 188
7．10．1 CSS3漸變介紹 188
7．10．2 線性漸變 189
7．10．3 線性漸變實(shí)例 189
7．10．4 徑向漸變 194
7．10．5 徑向漸變實(shí)例 194
7．11 CSS3背景 198
7．11．1 多背景 198
7．11．2 background-size 200
7．11．3 background-origin 202
7．11．4 background-clip 203
7．12 遮罩 204
7．13 transition過渡 206
7．14 2D變換 207
7．14．1 translate()方法 208
7．14．2 rotate()方法 209
7．14．3 scale()方法 212
7．14．4 skew()方法 213
7．15 3D變換 215
7．15．1 transform-style 216
7．15．2 perspective景深 216
7．15．3 perspective-origin景深基點(diǎn) 218
7．15．4 3D位移 219
7．15．5 3D旋轉(zhuǎn) 222
7．15．6 3D縮放 223
7．15．7 3D盒子 225
7．16 animation動(dòng)畫 226
7．16．1 關(guān)鍵幀keyframes 227
7．16．2 animation動(dòng)畫屬性 229
本章小結(jié) 229
本章習(xí)題 230
第8章 DIV+CSS網(wǎng)頁標(biāo)準(zhǔn)化布局 232
8．1 DIV+CSS頁面布局的優(yōu)勢 232
8．2 “無意義”的HTML標(biāo)簽＜div＞和＜span＞ 233
8．3 W3C盒子模型 234
8．4 和頁面布局有關(guān)的CSS屬性 236
8．5 盒子區(qū)塊框的定位 238
8．5．1 相對定位 238
8．5．2 絕對定位 239
8．6 使用盒子模型的浮動(dòng)布局 240
8．6．1 設(shè)置浮動(dòng) 240
8．6．2 行框和清理 242
8．7 DIV+CSS的兼容性問題 244
8．7．1 不同瀏覽器解釋盒子模型的差異 245
8．7．2 設(shè)置瀏覽器去遵循W3C標(biāo)準(zhǔn) 246
8．8 使用盒子模型設(shè)計(jì)頁面布局 247
8．8．1 居中設(shè)計(jì) 247
8．8．2 設(shè)置兩列浮動(dòng)的布局 248
8．8．3 設(shè)置三列浮動(dòng)的布局 250
8．8．4 設(shè)置多列浮動(dòng)的布局 251
8．9 DIV+CSS網(wǎng)站首頁布局示例 252
8．9．1 HTML文件的設(shè)計(jì) 253
8．9．2 CSS文件的設(shè)計(jì) 254
本章小結(jié) 256
本章習(xí)題 256
第9章 響應(yīng)式布局 259
9．1 響應(yīng)式布局的優(yōu)缺點(diǎn) 259
9．2 如何設(shè)計(jì)響應(yīng)式布局 260
9．3 響應(yīng)式布局實(shí)例 261
9．4 Media Queries模塊的使用方法 263
9．4．1 語法結(jié)構(gòu)及用法 264
9．4．2 可用的設(shè)備類型 265
9．4．3 可用的設(shè)備特性參數(shù) 266
9．5 在移動(dòng)設(shè)備上設(shè)置原始大小顯示 268
9．6 響應(yīng)式網(wǎng)站的內(nèi)容設(shè)計(jì) 268
9．6．1 響應(yīng)式圖片顯示內(nèi)容設(shè)計(jì) 269
9．6．2 響應(yīng)式文字顯示內(nèi)容設(shè)計(jì) 269
9．7 響應(yīng)式網(wǎng)站的設(shè)計(jì)流程 270
本章小結(jié) 271
本章習(xí)題 272
第10章 認(rèn)識(shí)和使用Sass 273
10．1 初識(shí)Sass 273
10．1．1 Sass是什么 274
10．1．2 Sass的作用 274
10．1．3 Sass的安裝 277
10．1．4 Sass的使用和編譯 279
10．2 Sass基本語法與使用實(shí)例 283
10．2．1 Sass基本語法 283
10．2．2 Sass使用實(shí)例 288
本章小結(jié) 292
本章習(xí)題 292
第11章 柵格布局 294
11．1 柵格 294
11．2 盒子模型 296
11．3 柵格實(shí)例 297
11．4 Bootstrap框架 298
11．4．1 Bootstrap現(xiàn)狀 299
11．4．2 柵格系統(tǒng) 299
本章小結(jié) 313
本章習(xí)題 313
第12章 Bootstrap的快速入門 315
12．1 Bootstrap的內(nèi)容概述與整體理解 315
12．1．1 全局CSS樣式 316
12．1．2 組件 317
12．1．3 JavaScript插件 319
12．2 Bootstrap搭建環(huán)境 320
12．3 Bootstrap全局CSS樣式 321
12．3．1 全局CSS樣式的柵格系統(tǒng)和響應(yīng)式布局 322
12．3．2 全局CSS樣式的表單 324
12．4 Bootstrap組件 324
12．5 Bootstrap的JavaScript插件 326
本章小結(jié) 328
本章習(xí)題 328
第13章 Bootstrap的實(shí)戰(zhàn) 330
13．1 實(shí)戰(zhàn)概述 330
13．2 實(shí)戰(zhàn)需求 330
13．3 實(shí)戰(zhàn)準(zhǔn)備 333
13．3．1 Sass配置 334
13．3．2 HTML的基本模塊 335
13．4 頂部工具欄 336
13．4．1 Bootstrap的字體圖標(biāo)組件 336
13．4．2 Bootstrap的下拉菜單組件 337
13．4．3 Bootstrap的輸入框組組件 339
13．4．4 Bootstrap的導(dǎo)航組件 341
13．4．5 頂部工具欄PC端內(nèi)容填充 342
13．4．6 頂部工具欄PC端樣式優(yōu)化 345
13．4．7 實(shí)戰(zhàn)頂部工具欄移動(dòng)端 352
13．5 頁面導(dǎo)航條 353
13．5．1 Bootstrap的導(dǎo)航條組件 354
13．5．2 實(shí)戰(zhàn)頁面導(dǎo)航條――內(nèi)容填充 356
13．5．3 實(shí)戰(zhàn)頁面導(dǎo)航條――樣式優(yōu)化 358
13．6 banner區(qū) 360
13．6．1 Bootstrap的JavaScript輪播圖插件 360
13．6．2 實(shí)戰(zhàn)banner區(qū) 362
13．7 推薦位 364
13．7．1 Bootstrap的縮略圖組件 364
13．7．2 Bootstrap的面板組件 365
13．7．3 實(shí)戰(zhàn)第一種風(fēng)格的推薦位――內(nèi)容填充 366
13．7．4 實(shí)戰(zhàn)第一種風(fēng)格的推薦位――樣式優(yōu)化 369
13．7．5 實(shí)戰(zhàn)第二種風(fēng)格的推薦位――內(nèi)容填充 372
13．7．6 實(shí)戰(zhàn)第二種風(fēng)格的推薦位――樣式優(yōu)化 375
13．8 腳部 379
13．9 用戶登錄 380
13．9．1 Bootstrap的表單全局CSS樣式 380
13．9．2 Bootstrap的模態(tài)框JavaScript插件 382
13．9．3 實(shí)戰(zhàn)用戶登錄 384
本章小結(jié) 386
本章習(xí)題 387
附錄A 388