HTML + CSS + JavaScript 網頁製作案例教程, 2/e

黑馬程序員

傳智播客旗下高端IT教育品牌，它是由中國Java培訓先行者張孝祥老師發起，
聯合全球最大的中文IT社區CSDN、中關村軟件園共同創辦的一家專業教育機構。
辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟件之崛起而講課”的辦學理念，
堅持培養優秀軟件應用工程師的宏偉目標，在累計培養的十萬餘名學員中，
其中90%的學員均已在北、上、廣等一線城市高薪就業。

第 1章　網頁那點事 1
1.1　網頁概述　1
　1.1.1 網頁的組成　1
　1.1.2 網頁名詞解釋　2
　1.1.3 Web標準　4
1.2　網頁製作技術入門　5
　1.2.1 HTML　5
　1.2.2 CSS　6
　1.2.3 JavaScript　6
　1.2.4 網頁的展示平臺——瀏覽器　7
1.3　Dreamweaver工具的使用　9
　1.3.1 認識Dreamweaver界面　10
　1.3.2 Dreamweaver初始化設置　14
　1.3.3 Dreamweaver基本操作　16
1.4　創建網頁　17
1.5　動手實踐　19

第　2章 從零開始構建HTML頁面　20
2.1　【案例1】簡單的網頁　20
　案例描述　20
　知識引入　20
　1. HTML文檔基本格式　20
　2. 標簽的分類　21
　3. 標簽的關系　22
　4. 頁面格式化標簽　23
　案例實現　26
　1. 分析效果圖　26
　2. 製作頁面結構　26
　3. 設置標題居中　27
2.2　【案例2】新聞頁面　27
　案例描述　27
　知識引入　27
　1. 標簽的屬性　27
　2. HTML文檔頭部相關標簽　28
　3. 文本樣式標簽　29
　4. 文本格式化標簽　30
　案例實現　30
　1. 結構分析　30
　2. 樣式分析　31
　3. 製作頁面結構　31
　4. 控制文本　31
2.3　【案例3】圖文混排　32
　案例描述　32
　知識引入　32
　1. 常見圖像格式　32
　2. 圖像標簽　33
　3. 相對路徑和絕對路徑　36
　4. 特殊字符標簽　37
　案例實現　37
　1. 分析效果圖　37
　2. 製作頁面結構　38
　3. 控制圖像　38
　4. 控制文本　39
2.4　動手實踐　40

第3章　使用CSS技術美化網頁　41
3.1　【案例4】文字Logo　41
　案例描述　41
　知識引入　41
　1. 認識CSS　41
　2. CSS樣式規則　42
　3. 引入CSS樣式表　43
　4. CSS基礎選擇器　47
　案例實現　49
　1. 分析效果圖　49
　2. 製作頁面結構　50
　3. 定義CSS樣式　50
3.2　【案例5】美食專題欄目　50
　案例描述　50
　知識引入　51
　1. CSS字體樣式屬性　51
　2. CSS文本外觀屬性　54
　案例實現　61
　1. 結構分析　61
　2. 樣式分析　61
　3. 製作頁面結構　62
　4. 定義CSS樣式　62
3.3　【案例6】搜索頁面　63
　案例描述　63
　知識引入　64
　1. CSS復合選擇器　64
　2. CSS層疊性和繼承性　66
　3. CSS優先級　67
　案例實現　69
　1. 結構分析　69
　2. 樣式分析　70
　3. 製作頁面結構　70
　4. 定義CSS樣式　70
3.4　動手實踐　71

第4章　運用盒子模型劃分網頁模塊　72
4.1　【案例7】音樂盒　72
　案例描述　72
　知識引入　72
　1. 認識盒子模型　72
　2. 標簽　73
　3. 邊框屬性　74
　案例實現　80
　1. 結構分析　80
　2. 樣式分析　80
　3. 製作頁面結構　80
　4. 定義CSS樣式　80
4.2　【案例8】用戶中心　81
　案例描述　81
　知識引入　81
　1. 內邊距屬性　81
　2. 外邊距屬性　83
　3. 盒子的寬與高　84
　案例實現　85
　1. 結構分析　85
　2. 樣式分析　85
　3. 製作頁面結構　85
　4. 定義CSS樣式　85
4.3　【案例9】咖啡店banner　86
　案例描述　86
　知識引入　87
　1. 設置背景顏色　87
　2. 設置背景圖像　87
　3. 設置背景圖像平鋪　88
　4. 設置背景圖像的位置　88
　5. 設置背景圖像固定　90
　6. 綜合設置元素的背景　90
　案例實現　91
　1. 結構分析　91
　2. 樣式分析　91
　3. 製作頁面結構　91
　4. 定義CSS樣式　91
4.4　【案例10】圖標導航欄　92
　案例描述　92
　知識引入　92
　1. 元素類型　92
　2. 標簽　94
　3. 元素類型的轉換　95
　案例實現　96
　1. 結構分析　96
　2. 樣式分析　96
　3. 製作頁面結構　96
　4. 定義CSS樣式　97
4.5　【案例11】創意畫框　98
　案例描述　98
　知識引入　98
　1. 顏色透明度　98
　2. 圖片邊框　99
　3. 陰影　100
　4. 漸變　101
　案例實現　106
　1. 結構分析　106
　2. 樣式分析　106
　3. 製作頁面結構　106
　4. 定義CSS樣式　107
4.6　【案例12】拼圖效果　108
　案例描述　108
　知識引入　108
　1. 圓角　108
　2. 多背景圖像　111
　案例實現　111
　1. 結構分析　111
　2. 樣式分析　112
　3. 製作頁面結構　112
　4. 定義CSS樣式　112
4.7　動手實踐　113

第5章　為網頁添加列表和超鏈接　114
5.1　【案例13】精美電商懸浮框　114
　案例描述　114
　知識引入　114
　1. 無序列表　114
　2. 有序列表　115
　案例實現　117
　1. 結構分析　117
　2. 樣式分析　117
　3. 製作頁面結構　117
　4. 定義CSS樣式　118
5.2　【案例14】二維碼名片　119
　案例描述　119
　知識引入　119
　1. 定義列表　119
　2. 定義列表實現圖文混排　120
　3. 列表嵌套的應用　121
　案例實現　122
　1. 結構分析　122
　2. 樣式分析　122
　3. 製作頁面結構　123
　4. 定義CSS樣式　123
5.3　【案例15】電商團購懸浮框　124
　案例描述　124
　知識引入　125
　1. list-style-type屬性　125
　2. list-style-image屬性　126
　3. list-style-position屬性　127
　4. list-style屬性　127
　5. 背景圖像定義列表項目符號　128
　案例實現　129
　1. 結構分析　129
　2. 樣式分析　129
　3. 製作頁面結構　129
　4. 定義CSS樣式　130
5.4　【案例16】唱吧導航欄　131
　案例描述　131
　知識引入　131
　1. 創建超鏈接　131
　2. 錨點鏈接　133
　3. 鏈接偽類控制超鏈接　134
　案例實現　136
　1. 結構分析　136
　2. 樣式分析　136
　3. 製作頁面結構　136
　4. 定義CSS樣式　138
5.5　動手實踐　139

第6章　為網頁添加表格和表單　141
6.1　【案例17】簡歷表　141
　案例描述　141
　知識引入　141
　1. 創建表格　141
　2. 標簽的屬性　143
　3. 標簽的屬性　147
　4. 標簽的屬性　148
　5. 標簽及其屬性　150
　6. 表格的結構　151
　7. CSS控製表格樣式　152
　案例實現　156
　1. 結構分析　156
　2. 樣式分析　157
　3. 製作頁面結構　157
　4. 定義CSS樣式　158
6.2　【案例18】用戶登錄界面　159
　案例描述　159
　知識引入　159
　1. 認識表單　159
　2. 創建表單　159
　案例實現　161
　1. 結構分析　161
　2. 樣式分析　161
　3. 製作頁面結構　161
　4. 定義CSS樣式　162
6.3　【案例19】趣味選擇題　163
　案例描述　163
　知識引入　164
　input控件　164
　案例實現　167
　1. 結構分析　167
　2. 樣式分析　167
　3. 製作頁面結構　167
　4. 定義CSS樣式　168
6.4　【案例20】空間日誌　169
　案例描述　169
　知識引入　170
　1. textarea控件　170
　2. select控件　171
　案例實現　174
　1. 結構分析　174
　2. 樣式分析　175
　3. 製作頁面結構　175
　4. 定義CSS樣式　175
6.5　【案例21】員工檔案　177
　案例描述　17
　知識引入　178
　CSS控製表單樣式　178
　案例實現　180　1. 結構分析　180
　2. 樣式分析　180
　3. 製作頁面結構　181
　4. 定義CSS樣式　181
6.6　動手實踐　183

第7章　運用浮動和定位佈局　184
7.1　【案例22】世界杯夢幻陣容　184
　案例描述　184
　知識引入　185
　認識浮動　185
　案例實現　187
　1. 結構分析　187
　2. 樣式分析　187
　3. 製作頁面結構　187
　4. 定義CSS樣式　189
7.2　【案例23】商品專欄　189
　案例描述　189
　知識引入　190
　清除浮動　190
　案例實現　194
　1. 結構分析　194
　2. 樣式分析　194
　3. 製作頁面結構　194
　4. 定義CSS樣式　195
7.3　【案例24】移動端電商界面　196
　案例描述　196
　知識引入　196
　overflow屬性　196　案例實現　199
　1. 結構分析　199
　2. 樣式分析　199
　3. 製作頁面結構　199
　4. 定義CSS樣式　200
7.4　【案例25】違停查詢　201
　案例描述　201
　知識引入　201
　1. 認識定位屬性　201
　2. 定位類型　202
　3. z-index層疊等級屬性　206
　案例實現　206
　1. 結構分析　206
　2. 樣式分析　206
　3. 製作頁面結構　207
　4. 定義CSS樣式　207
7.5　【案例26】網頁佈局　209
　案例描述　209
　知識引入　210
　1. 認識佈局　210
　2. 單列佈局　211
　3. 兩列佈局　213
　4. 三列佈局　214
　5. 網頁模塊命名規範　217
　案例實現　218
　1. 結構分析　218
　2. 樣式分析　218
　3. 製作頁面結構　218
　4. 定義CSS樣式　219
7.6　動手實踐　220

第8章　全新的網頁視聽技術　221
8.1　【案例27】電影播放界面　221
　案例描述　221
　知識引入　222
　1. 音頻和視頻嵌入技術概述　222
　2. 嵌入視頻　223
　3. 嵌入音頻　225
　4. 瀏覽器對音頻、視頻文件的
　兼容性　225
　5. 控制視頻寬和高　226
　案例實現　228
　1. 結構分析　228
　2. 樣式分析　228
　3. 製作頁面結構　229
　4. 定義CSS樣式　229
8.2　【案例28】導航欄懸浮特效　231
　案例描述　231
　知識引入　231
　1. transition-property屬性　231
　2. transition-duration屬性　232
　3. transition-timing-function屬性　233
　4. transition-delay屬性　234
　5. transition屬性　234
　案例實現　234
　1. 結構分析　234
　2. 樣式分析　235
　3. 製作頁面結構　235
　4. 定義CSS樣式　235
8.3　【案例29】翻牌動畫　236
　案例描述　236
　知識引入　237
　1. 2D變形　237
　2. 3D變形　242
　案例實現　245
　1. 結構分析　245　2. 樣式分析　245
　3. 製作頁面結構　246
　4. 定義CSS樣式　246
8.4　【案例30】寶石旋轉　247
　案例描述　247
　知識引入　247
　1. @keyframes規則　247
　2. animation-name屬性　248
　3. animation-duration屬性　248
　4. animation-timing-function屬性　249
　5. animation-delay屬性　250
　6. animation-iteration-count屬性　250
　7. animation-direction屬性　250
　8. animation屬性　251
　案例實現　251
　1. 結構分析　251
　2. 樣式分析　251
　3. 製作頁面結構　252
　4. 定義CSS樣式　252
8.5　動手實踐　254

第9章　簡單的JavaScript　255
9.1　【案例31】身份驗證　255
　案例描述　255
　知識引入　256
　1. 認識JavaScript　256
　2. JavaScript的語法規則　258
　3. 關鍵字　258
　4. JavaScript的引入方式　259
　5. alert()方法　260
　6. prompt()方法　260
　案例實現　261
　1. 案例分析　261
　2. 案例實現　261

9.2　【案例32】商城下拉菜單　261
　案例描述　261
　知識引入　262
　1. DOM簡介　262
　2. 對象　262
　3. 訪問節點　263
　4. 設置節點樣式　263
　5. 變量　264
　6. 函數　265
　7. 事件和事件調用　267
　8. 常用的JavaScript事件　268
　案例實現　269
　1. 結構分析　269
　2. 樣式分析　269
　3. JavaScript效果分析　269
　4. 製作頁面結構　269
　5. 定義CSS樣式　270
　6. 添加JavaScript特效　271
9.3　【案例33】限時秒殺　271
　案例描述　271
　知識引入　271
　1. 數據類型　271
　2. 運算符　273
　3. 運算符優先級　277
　4. 條件語句　279
　5. BOM簡介　283
　6. Date對象　287
　7. 數據類型轉換　288
　案例實現　289
　1. 結構分析　289
　2. 樣式分析　289
　3. JavaScript效果分析　289
　4. 製作頁面結構　289
　5. 定義CSS樣式　290
　6. 添加JavaScript效果　291
9.4　【案例34】Tab欄切換效果　292
　案例描述　292
　知識引入　292
　1. 循環控制語句　292
　2. 跳轉語句　295
　3. 數組　296
　案例實現　297
　1. 結構分析　297
　2. 樣式分析　298
　3. JavaScript效果分析　298
　4. 製作頁面結構　298
　5. 定義CSS樣式　299
　6. 添加JavaScript效果　300
9.5　動手實踐　301

第　10章 實戰開發—好趣藝術
設計部落首頁面　302
10.1　準備工作　303
　1. 建立站點　303
　2. 站點初始化設置　303
　3. 切片　304
　4. 效果圖分析　306
　5. 頁面佈局　307
　6. 定義公共樣式　308
10.2　首頁面詳細製作　308
　1. 製作頭部和導航　308
　2. banner和通知公告　308
　3. 主體內容區域　308
　4. 底部版權區域　309
10.3　動手實踐　309