細說網(wǎng)頁制作

目錄
第1章 介紹HTML5 1
1．1 了解HTML5的主流應用 1
1．1．1 表單的強大 2
1．1．2 響應式頁面布局 2
1．1．3 與用戶交互的特效 4
1．1．4 微網(wǎng)站的制作 5
1．1．5 基于HTML5的移動APP開發(fā) 6
1．1．6 HTML5游戲 7
1．1．7 多媒體的應用 7
1．2 什么是HTML5 8
1．2．1 HTML5和HTML的關系 8
1．2．2 HTML和CSS的關系 10
1．2．3 HTML5和CSS3的關系 11
1．2．4 HTML5和JavaScript的關系 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的新標準 14
1．4 HTML5的曲折發(fā)展過程 15
1．4．1 HTML5的誕生 15
1．4．2 瀏覽器之間的大戰(zhàn) 16
1．4．3 HTML5技術的應用現(xiàn)狀 18
1．4．4 HTML5平臺的興起 18
1．4．5 HTML5行業(yè)的發(fā)展預測 20
1．5 HTML5的學習線路圖 21
1．5．1 第一階段――學習網(wǎng)頁制作 23
1．5．2 第二階段――編寫用戶交互功能 24
1．5．3 第三階段――成為前端工程師 25
本章小結 26
本章習題 26
第2章 HTML5的基本語法 28
2．1 課前準備 28
2．1．1 了解Web 29
2．1．2 了解HTML 30
2．1．3 了解HTML運行原理 30
2．1．4 如何選擇開發(fā)工具 31
2．1．5 認識瀏覽器中的開發(fā)者工具 32
2．1．6 現(xiàn)在學習HTML5的方式 34
2．1．7 簡單HTML實例制作 35
2．2 HTML語言的語法 36
2．2．1 HTML標簽和元素 36
2．2．2 HTML語法不區(qū)分字母大小寫 37
2．2．3 HTML標簽屬性 37
2．2．4 HTML顏色值的設置 37
2．2．5 HTML文檔注釋 38
2．2．6 HTML代碼格式 38
2．2．7 HTML字符實體 38
2．3 HTML文檔的主體結構 39
2．3．1 HTML文檔類型的新定義方式 40
2．3．2 HTML文檔的主體標簽 41
2．4 HTML文檔頭部標簽＜head＞ 41
2．4．1 ＜title＞標簽 42
2．4．2 ＜base＞標簽 42
2．4．3 ＜link＞標簽 43
2．4．4 ＜meta＞標簽 43
2．5 HTML文檔主體標簽＜body＞ 44
2．6 HTML5做到了與之前版本的兼容 45
2．6．1 可以省略標記的元素 45
2．6．2 具有boolean值的屬性 46
2．6．3 引號的使用 46
2．7 設置IE 9以下版本瀏覽器支持HTML5 46
本章小結 47
本章習題 47
第3章 HTML5文字版面和編輯標簽 49
3．1 HTML基礎標簽 49
3．1．1 標題標簽＜h1＞～＜h6＞ 50
3．1．2 換行標簽
和段落標簽＜p＞ 51
3．1．3 水平分隔線標簽＜hr＞ 51
3．1．4 格式標簽 51
3．1．5 文本標簽 53
3．2 使用HTML表格 55
3．3 HTML框架結構 57
本章小結 60
本章習題 61
第4章 多媒體應用 62
4．1 創(chuàng)建圖像和鏈接 62
4．1．1 URL概述 63
4．1．2 插入圖片 63
4．1．3 建立錨點和超鏈接 64
4．2 HTML圖像地圖 66
4．2．1 什么是圖像地圖 66
4．2．2 圖像地圖如何制作 66
4．2．3 實現(xiàn)圖像地圖 67
4．3 新增多媒體播放元素 68
本章小結 71
本章習題 71
第5章 HTML5表單 74
5．1 HTML表單中的get和post方法 74
5．1．1 get方法 75
5．1．2 post方法 76
5．1．3 HTML表單中get和post的區(qū)別 76
5．2 HTML表單設計 77
5．2．1 表單標簽＜form＞ 77
5．2．2 文本域和密碼域 78
5．2．3 提交、重置和普通按鈕 78
5．2．4 單選按鈕和復選框 79
5．2．5 隱藏域 79
5．2．6 多行文本域 79
5．2．7 菜單下拉列表域 79
5．2．8 綜合實例 80
5．3 HTML5新增表單元素 82
5．3．1 ＜datalist＞元素 82
5．3．2 ＜keygen＞元素 83
5．3．3 ＜output＞元素 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表單提交綜合實例 100
本章小結 103
本章習題 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 關聯(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 鼠標光標屬性 118
6．5．7 列表屬性 119
6．5．8 CSS綜合實例 120
6．6 CSS3概述 122
6．6．1 CSS3在選擇器上的支持 122
6．6．2 CSS3在樣式上的支持 122
6．6．3 CSS3對于動畫的支持 123
6．6．4 在實際開發(fā)中該如何使用CSS3 123
6．7 CSS復雜選擇器 123
6．7．1 基本選擇器 123
6．7．2 多元素的組合選擇器 124
6．7．3 屬性選擇器 124
6．7．4 結構性偽類選擇器 125
6．8 CSS3屬性 129
6．8．1 使用CSS3屬性前的準備 130
6．8．2 邊框?qū)傩?130
6．8．3 背景屬性 132
6．8．4 文本屬性 133
6．8．5 用戶界面屬性 133
6．8．6 動畫屬性 134
6．8．7 多列布局屬性 134
6．8．8 漸變屬性 135
6．8．9 透明屬性 136
6．8．10 旋轉(zhuǎn)屬性 136
6．8．11 服務器端字體屬性 136
本章小結 137
本章習題 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 列個數(shù)和列寬度 173
7．7．2 列之間的縫隙間隔寬度 175
7．7．3 分欄間隔符 176
7．8 圓角 177
7．8．1 border-radius屬性 177
7．8．2 單個圓角的設置 180
7．9 邊框 181
7．9．1 邊框圖片border-image 182
7．9．2 自適應的圓角效果 186
7．10 漸變 188
7．10．1 CSS3漸變介紹 188
7．10．2 線性漸變 189
7．10．3 線性漸變實例 189
7．10．4 徑向漸變 194
7．10．5 徑向漸變實例 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景深基點 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動畫 226
7．16．1 關鍵幀keyframes 227
7．16．2 animation動畫屬性 229
本章小結 229
本章習題 230
第8章 DIV+CSS網(wǎng)頁標準化布局 232
8．1 DIV+CSS頁面布局的優(yōu)勢 232
8．2 “無意義”的HTML標簽＜div＞和＜span＞ 233
8．3 W3C盒子模型 234
8．4 和頁面布局有關的CSS屬性 236
8．5 盒子區(qū)塊框的定位 238
8．5．1 相對定位 238
8．5．2 絕對定位 239
8．6 使用盒子模型的浮動布局 240
8．6．1 設置浮動 240
8．6．2 行框和清理 242
8．7 DIV+CSS的兼容性問題 244
8．7．1 不同瀏覽器解釋盒子模型的差異 245
8．7．2 設置瀏覽器去遵循W3C標準 246
8．8 使用盒子模型設計頁面布局 247
8．8．1 居中設計 247
8．8．2 設置兩列浮動的布局 248
8．8．3 設置三列浮動的布局 250
8．8．4 設置多列浮動的布局 251
8．9 DIV+CSS網(wǎng)站首頁布局示例 252
8．9．1 HTML文件的設計 253
8．9．2 CSS文件的設計 254
本章小結 256
本章習題 256
第9章 響應式布局 259
9．1 響應式布局的優(yōu)缺點 259
9．2 如何設計響應式布局 260
9．3 響應式布局實例 261
9．4 Media Queries模塊的使用方法 263
9．4．1 語法結構及用法 264
9．4．2 可用的設備類型 265
9．4．3 可用的設備特性參數(shù) 266
9．5 在移動設備上設置原始大小顯示 268
9．6 響應式網(wǎng)站的內(nèi)容設計 268
9．6．1 響應式圖片顯示內(nèi)容設計 269
9．6．2 響應式文字顯示內(nèi)容設計 269
9．7 響應式網(wǎng)站的設計流程 270
本章小結 271
本章習題 272
第10章 認識和使用Sass 273
10．1 初識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基本語法與使用實例 283
10．2．1 Sass基本語法 283
10．2．2 Sass使用實例 288
本章小結 292
本章習題 292
第11章 柵格布局 294
11．1 柵格 294
11．2 盒子模型 296
11．3 柵格實例 297
11．4 Bootstrap框架 298
11．4．1 Bootstrap現(xiàn)狀 299
11．4．2 柵格系統(tǒng) 299
本章小結 313
本章習題 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)和響應式布局 322
12．3．2 全局CSS樣式的表單 324
12．4 Bootstrap組件 324
12．5 Bootstrap的JavaScript插件 326
本章小結 328
本章習題 328
第13章 Bootstrap的實戰(zhàn) 330
13．1 實戰(zhàn)概述 330
13．2 實戰(zhàn)需求 330
13．3 實戰(zhàn)準備 333
13．3．1 Sass配置 334
13．3．2 HTML的基本模塊 335
13．4 頂部工具欄 336
13．4．1 Bootstrap的字體圖標組件 336
13．4．2 Bootstrap的下拉菜單組件 337
13．4．3 Bootstrap的輸入框組組件 339
13．4．4 Bootstrap的導航組件 341
13．4．5 頂部工具欄PC端內(nèi)容填充 342
13．4．6 頂部工具欄PC端樣式優(yōu)化 345
13．4．7 實戰(zhàn)頂部工具欄移動端 352
13．5 頁面導航條 353
13．5．1 Bootstrap的導航條組件 354
13．5．2 實戰(zhàn)頁面導航條――內(nèi)容填充 356
13．5．3 實戰(zhàn)頁面導航條――樣式優(yōu)化 358
13．6 banner區(qū) 360
13．6．1 Bootstrap的JavaScript輪播圖插件 360
13．6．2 實戰(zhàn)banner區(qū) 362
13．7 推薦位 364
13．7．1 Bootstrap的縮略圖組件 364
13．7．2 Bootstrap的面板組件 365
13．7．3 實戰(zhàn)第一種風格的推薦位――內(nèi)容填充 366
13．7．4 實戰(zhàn)第一種風格的推薦位――樣式優(yōu)化 369
13．7．5 實戰(zhàn)第二種風格的推薦位――內(nèi)容填充 372
13．7．6 實戰(zhàn)第二種風格的推薦位――樣式優(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 實戰(zhàn)用戶登錄 384
本章小結 386
本章習題 387
附錄A 388