《HTML+CSS+JavaScript網頁製作案例教程（第2版）》是2021年人民郵電出版社出版的圖書，作者是黑馬程式設計師。本書在保留了原有風格的基礎上，內容做了大量更新，包括增加了HTML5部分基礎標籤和CSS3新屬性的講解和套用，增加了網頁視聽技術的套用，調整了JavaScript部分知識點的順序，更換了大量案例，符合的教學需要。
基本介紹
- 中文名：HTML+CSS+JavaScript網頁製作案例教程（第2版）
- 作者：黑馬程式設計師
- 出版時間：2021年
- 出版社：人民郵電出版社
- 頁數：279 頁
- ISBN：9787115547392
- 定價：45 元
- 開本：16 開
- 裝幀： 平裝
內容簡介,圖書目錄,作者簡介,
內容簡介
本書站在初學者的角度，以實用的案例、通俗易懂的語言詳細介紹使用HTML、CSS和JavaScript進行網頁製作的技巧。本書共10章，結合HTML、CSS和JavaScript的基礎知識及套用，提供了34個精選案例和1個綜合實訓項目。其中，第1~3章講解了HTML和CSS的基礎知識，包括Web基本概念、HTML和CSS簡介、Dreamweaver工具的使用、HTML文本和圖像標籤、CSS選擇器、CSS樣式、CSS的繼承性和優先等級。第4~8章分別講解了盒子模型、列表和超連結、表格和表單、元素的浮動和定位、網頁視聽技術等。第9章講解了JavaScript編程基礎與事件處理。第10章為綜合實訓項目——好趣藝術，帶領讀者開發一個包含結構、樣式和行為的網站首頁面。本書附有原始碼、習題、教學課件等資源，還提供了線上答疑，用以幫助讀者更好地學習本書。本書既可作為高等教育本、專科院校相關專業的網頁設計教材，也可供網頁製作愛好者學習參考。
圖書目錄
第 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．
標籤的屬性 1433． 標籤的屬性 1474． 標籤的屬性 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
案例描述 177
知識引入 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
作者簡介
黑馬程式設計師，傳智播客旗下高端IT教育品牌，它是由中國Java培訓先行者張孝祥老師發起，聯合***大的中文IT社區CSDN、中關村軟體園共同創辦的一家專業教育機構。辦學至今，我們一直堅守著“為千萬人少走彎路而著書，為中華軟體之崛起而講課”的辦學理念，堅持培養優秀軟體套用工程師的宏偉目標，在累計培養的十萬餘名學員中，其中90%的學員均已在北、上、廣等一線城市高薪就業。
