《網頁設計與製作案例教程（HTML5+CSS3）》是2018年10月電子工業出版社出版的圖書，作者是徐洪亮、陳曉靖、常寬。
基本介紹
- 中文名：網頁設計與製作案例教程（HTML5+CSS3）
- 作者：徐洪亮、陳曉靖、常寬
- 出版時間：2018年10月
- 出版社：電子工業出版社
- 頁數：388 頁
- ISBN：9787121349560
- 定價：48 元
- 開本：16 開
內容簡介,圖書目錄,
內容簡介
全書共14章，分為基礎篇、技能篇、布局篇和套用篇。基礎篇主要內容包括：網頁基礎、HTML語言基礎、CSS樣式基礎。技能篇中主要介紹使用CSS設定文字樣式、圖像樣式、列表樣式、表格樣式以及表單樣式。布局篇中詳細講解了使用CSS+DIV布局網頁的三種基本方法：流布局、浮動布局和定位布局。最後，在套用篇中給出了兩個具有很強實用性的綜合網站案例。
圖書目錄
基 礎 篇
第1章 網頁基礎 / 1
1.1 基礎項目1：製作“我為自己代言”網頁 / 1
1.2 知識庫：網頁基礎知識 / 5
1.2.1 網站開發流程 / 5
1.2.2 網頁常用術語 / 7
1.2.3 網頁檔案命名規範 / 9
1.3 基礎項目2：製作“陳歐介紹”網頁 / 10
1.4 知識庫：Dreamweaver CC 2018的工作界面和使用技巧 / 13
1.4.1 啟動Dreamweaver CC 2018 / 13
1.4.3 更改Dreamweaver CC 2018默認界面和布局 / 18
1.4.4 使用Dreamweaver CC 2018的幾個小技巧 / 20
1.5 提高項目：製作“青春頌歌”網頁 / 21
1.6 拓展項目：製作“支付”網頁 / 21
知識檢測1 / 22
第2章 HTML語言基礎 / 23
2.1 基礎項目1：製作“走向遠方”網頁 / 23
2.2 知識庫：HTML語言的概念和基本結構 / 24
2.2.1 HTML語言的概念 / 24
2.2.2 HTML文檔的基本結構 / 24
2.3 基礎項目2：製作“我的空間”網頁 / 27
2.4 知識庫：HTML標籤分類及常見HTML標籤 / 29
2.4.1 HTML標籤分類 / 29
2.4.2 常見HTML標籤 / 30
2.5 提高項目：製作“深海騎兵”網頁 / 38
2.6 拓展項目：製作“菜鳥加油”網頁 / 39
知識檢測2 / 39
第3章 CSS樣式基礎 / 40
3.1 基礎項目1：製作“古詩詞欣賞”網頁 / 40
3.2 知識庫：CSS語言的概念和基本結構 / 45
3.2.1 CSS語言的概念 / 45
3.2.2 CSS語言的基本結構和注釋 / 45
3.2.3 CSS書寫順序及規範 / 46
3.3 基礎項目2：製作“電影資訊”網頁 / 48
3.4 知識庫：CSS樣式表的引入及選擇器的使用 / 53
3.4.1 CSS樣式表的引入 / 53
3.4.2 CSS選擇器的使用 / 55
3.5 提高項目：製作“美味生活”網頁 / 62
3.6 拓展項目：製作“馬雲創業語錄”網頁 / 63
知識檢測3 / 64
技 能 篇
第4章 使用CSS設定文字樣式 / 65
4.1 基礎項目1：製作“古人書房佳聯賞析”網頁 / 65
4.2 知識庫：CSS文字樣式 / 68
4.2.1 文字樣式常用屬性 / 68
4.2.2 網頁安全色 / 72
4.2.3 CSS網頁元素的長度單位 / 73
4.3 基礎項目2：製作“創業人物”網頁 / 74
4.4 知識庫：CSS段落樣式與元素特性 / 79
4.4.1 段落樣式常用屬性 / 79
4.4.2 關於標籤 / 83
4.4.3 清除行內塊元素默認空白間隙技巧 / 83
4.5 提高項目：製作“詩詞鑑賞”網頁 / 85
4.6 拓展項目：製作“智慧型交通”網頁 / 86
知識檢測4 / 87
第5章 使用CSS設定圖像樣式 / 88
5.1 基礎項目1：製作“李彥宏—眾里尋他千百度”網頁 / 88
5.2 知識庫：CSS圖像樣式 / 92
5.2.1 網頁圖像格式 / 92
5.2.2 CSS常用圖像樣式 / 93
5.2.3 圖像映射 / 96
5.3 基礎項目2：製作“少年中國說”網頁 / 98
5.4 知識庫：CSS背景樣式 / 102
5.4.1 背景顏色樣式 / 102
5.4.2 背景圖像樣式 / 102
5.4.3 CSS雪碧圖 / 104
5.5 提高項目：製作“低碳生活 從我做起”網頁 / 107
5.6 拓展項目：製作“春節民俗”網頁 / 108
知識檢測5 / 108
第6章 使用CSS設定列表樣式 / 110
6.1 基礎項目1：製作簡單橫嚮導航欄 / 110
6.2 基礎項目2：製作簡單縱嚮導航欄 / 114
6.3 基礎項目3：製作下拉選單式導航欄 / 116
6.4 基礎項目4：製作熱門旅遊攻略列表 / 121
6.5 基礎項目5：製作熱門歌手榜 / 125
6.6 知識庫：CSS常用列表樣式 / 129
6.6.1 HTML列表 / 130
6.6.2 常用CSS列表樣式 / 131
6.7 提高項目：製作“童書暢銷榜”網頁 / 132
6.8 拓展項目：製作“商品列表”網頁 / 133
知識檢測6 / 133
第7章 使用CSS設定表格樣式 / 135
7.1 基礎項目1：製作“通訊錄”表格 / 135
7.2 知識庫：表格的HTML標籤和常用樣式 / 138
7.2.1 表格的HTML標籤 / 138
7.2.2 表格的常用CSS樣式 / 139
7.3 基礎項目2：製作“百度日曆”網頁 / 140
7.4 知識庫：單元格的合併與拆分 / 152
7.5 提高項目：製作“NBA常規賽得分表”網頁 / 153
7.6 拓展項目：製作“熱門景點排行榜”網頁 / 154
知識檢測7 / 154
第8章 使用CSS設定表單樣式 / 155
8.1 基礎項目1：製作“網易信箱註冊”網頁 / 155
8.2 知識庫：常用表單元素類型及結構 / 170
8.2.1 表單標籤 / 170
8.2.2 常用表單元素 / 171
8.2.3 表單按鈕 / 173
8.3 基礎項目2：製作“速遞網線上下單”網頁 / 175
8.4 知識庫：域集和組 / 183
8.4.1 域集 / 183
8.4.2 組 / 183
8.5 提高項目：製作電商網站“商家入駐”網頁 / 184
8.6 拓展項目：製作“快樂數獨”網頁 / 186
知識檢測8 / 187
第9章 盒子模型 / 188
9.1 基礎項目：根據布局圖創建簡單的盒子模型頁面 / 188
9.2 知識庫：盒子模型的理解與套用 / 190
9.2.1 盒子模型的概念 / 190
9.2.2 盒子模型的計算 / 191
9.2.3 box-sizing屬性介紹 / 192
9.2.4 偽元素 / 193
9.2.5 實際開發中遇到的和盒子模型相關的套用及小問題 / 196
9.3 拓展項目：使用盒子模型創建網頁布局 / 199
知識檢測9 / 199
第10章 CSS標準流布局 / 201
10.1 基礎項目：製作“谷穗兒機構”網頁 / 201
10.1.1 對頁面進行整體布局 / 202
10.1.2 製作頁頭部分 / 203
10.1.3 製作內容部分 / 205
10.1.4 製作頁腳部分 / 209
10.2 知識庫：標準流的概念及注意事項 / 210
10.2.1 什麼是標準流布局 / 210
10.2.2 標準流布局中垂直外邊距的合併問題 / 210
10.3 提高項目：製作“創優翼UI設計學院”網頁 / 212
10.4 拓展項目：製作“簡歷工廠”網頁 / 213
知識檢測10 / 214
第11章 CSS浮動布局 / 215
11.1 基礎項目：製作“創優翼網站首頁” / 215
11.1.1 對頁面進行整體布局 / 216
11.1.2 製作頁頭和今日特訊部分 / 218
11.1.3 製作學員活動部分 / 221
11.1.4 製作新聞中心、熱門活動和就業信息板塊 / 224
11.1.5 製作頁腳部分 / 233
11.2 知識庫：浮動布局的原理及套用技巧 / 233
11.2.1 float屬性 / 233
11.2.2 浮動布局的原理 / 234
11.2.3 浮動布局技巧 / 237
11.2.4 消除浮動布局帶來的不良影響 / 238
11.3 提高項目：製作“學校網站新聞列表頁” / 241
11.4 拓展項目：製作“咔嚓攝影網”主頁 / 244
知識檢測11 / 244
第12章 CSS定位布局 / 246
12.1 基礎項目：製作“精品購物網”首頁 / 246
12.1.1 對頁面進行整體布局 / 247
12.1.2 製作主體內容區 / 250
12.1.3 製作側邊導航欄 / 256
12.2 知識庫：定位的原理及套用技巧 / 259
12.2.1 CSS定位屬性 / 259
12.2.2 相對定位 / 260
12.2.3 絕對定位 / 261
12.2.4 元素的堆疊順序、溢出和剪裁 / 262
12.3 提高項目：製作“會當凌絕頂—小說投稿”網頁 / 265
12.4 拓展項目：製作“創意照片牆”網頁 / 269
知識檢測12 / 270
第13章 綜合套用1——製作新大陸集團網站 / 271
13.1 製作網站首頁 / 271
13.1.1 對網頁進行整體布局 / 272
13.1.2 製作頁頭部分 / 274
13.1.3 製作banner部分 / 279
13.1.4 製作主體內容部分 / 283
13.1.5 製作頁腳部分 / 300
13.1.6 製作固定廣告招聘模組 / 301
13.2 製作網站一級連結頁“合作與商機”頁面 / 301
13.2.1 對網頁進行整體布局 / 301
13.2.2 製作banner部分 / 303
13.2.3 製作主體內容部分 / 304
13.3 製作網站二級連結頁“合作與商機—軟體公司”頁面 / 311
13.3.1 對網頁進行整體布局 / 312
13.3.2 製作主體內容右側部分 / 313
第14章 綜合套用2——製作麥寵物網站 / 316
14.1 製作網站首頁 / 316
14.1.1 對網頁進行整體布局 / 317
14.1.2 製作頁頭部分 / 319
14.1.3 製作banner部分 / 326
14.1.4 製作“本期星寵”板塊 / 329
14.1.5 製作“萌寵每日推薦”板塊 / 334
14.1.6 製作“更多萌寵推薦”板塊 / 343
14.1.7 製作廣告條板塊 / 347
14.1.8 製作頁腳板塊 / 347
14.1.9 製作右側固定導航欄板塊 / 350
14.2 製作網站一級連結頁“星寵趣事”頁面 / 352
14.2.1 對網頁進行整體布局 / 352
14.2.2 製作星寵banner板塊 / 355
14.2.3 製作分類選項卡 / 356
14.2.4 製作“熱門推薦”板塊 / 357
14.2.5 製作“汪星人”“喵星人”“其他”三個板塊的結構和樣式 / 361
14.3 製作網站二級連結頁“星寵趣事詳情”頁面 / 366
14.3.1 對網頁進行整體布局 / 367
14.3.2 製作趣事詳情板塊 / 368
14.3.3 製作Rexie的更多分享板塊 / 372
14.3.4 製作右側商品廣告欄板塊 / 375
