網(wǎng)頁設(shè)計(jì)與制作案例教程（HTML5+CSS3）

基 礎(chǔ) 篇
第1章 網(wǎng)頁基礎(chǔ) / 1
1．1 基礎(chǔ)項(xiàng)目1：制作“我為自己代言”網(wǎng)頁 / 1
1．2 知識庫：網(wǎng)頁基礎(chǔ)知識 / 5
1．2．1 網(wǎng)站開發(fā)流程 / 5
1．2．2 網(wǎng)頁常用術(shù)語 / 7
1．2．3 網(wǎng)頁文件命名規(guī)范 / 9
1．3 基礎(chǔ)項(xiàng)目2：制作“陳歐介紹”網(wǎng)頁 / 10
1．4 知識庫：Dreamweaver CC 2018的工作界面和使用技巧 / 13
1．4．1 啟動(dòng)Dreamweaver CC 2018 / 13
1．4．3 更改Dreamweaver CC 2018默認(rèn)界面和布局 / 18
1．4．4 使用Dreamweaver CC 2018的幾個(gè)小技巧 / 20
1．5 提高項(xiàng)目：制作“青春頌歌”網(wǎng)頁 / 21
1．6 拓展項(xiàng)目：制作“支付”網(wǎng)頁 / 21
知識檢測1 / 22
第2章 HTML語言基礎(chǔ) / 23
2．1 基礎(chǔ)項(xiàng)目1：制作“走向遠(yuǎn)方”網(wǎng)頁 / 23
2．2 知識庫：HTML語言的概念和基本結(jié)構(gòu) / 24
2．2．1 HTML語言的概念 / 24
2．2．2 HTML文檔的基本結(jié)構(gòu) / 24
2．3 基礎(chǔ)項(xiàng)目2：制作“我的空間”網(wǎng)頁 / 27
2．4 知識庫：HTML標(biāo)簽分類及常見HTML標(biāo)簽 / 29
2．4．1 HTML標(biāo)簽分類 / 29
2．4．2 常見HTML標(biāo)簽 / 30
2．5 提高項(xiàng)目：制作“深海騎兵”網(wǎng)頁 / 38
2．6 拓展項(xiàng)目：制作“菜鳥加油”網(wǎng)頁 / 39
知識檢測2 / 39
第3章 CSS樣式基礎(chǔ) / 40
3．1 基礎(chǔ)項(xiàng)目1：制作“古詩詞欣賞”網(wǎng)頁 / 40
3．2 知識庫：CSS語言的概念和基本結(jié)構(gòu) / 45
3．2．1 CSS語言的概念 / 45
3．2．2 CSS語言的基本結(jié)構(gòu)和注釋 / 45
3．2．3 CSS書寫順序及規(guī)范 / 46
3．3 基礎(chǔ)項(xiàng)目2：制作“電影資訊”網(wǎng)頁 / 48
3．4 知識庫：CSS樣式表的引入及選擇器的使用 / 53
3．4．1 CSS樣式表的引入 / 53
3．4．2 CSS選擇器的使用 / 55
3．5 提高項(xiàng)目：制作“美味生活”網(wǎng)頁 / 62
3．6 拓展項(xiàng)目：制作“馬云創(chuàng)業(yè)語錄”網(wǎng)頁 / 63
知識檢測3 / 64
技 能 篇
第4章 使用CSS設(shè)置文字樣式 / 65
4．1 基礎(chǔ)項(xiàng)目1：制作“古人書房佳聯(lián)賞析”網(wǎng)頁 / 65
4．2 知識庫：CSS文字樣式 / 68
4．2．1 文字樣式常用屬性 / 68
4．2．2 網(wǎng)頁安全色 / 72
4．2．3 CSS網(wǎng)頁元素的長度單位 / 73
4．3 基礎(chǔ)項(xiàng)目2：制作“創(chuàng)業(yè)人物”網(wǎng)頁 / 74
4．4 知識庫：CSS段落樣式與元素特性 / 79
4．4．1 段落樣式常用屬性 / 79
4．4．2 關(guān)于＜span＞標(biāo)簽 / 83
4．4．3 清除行內(nèi)塊元素默認(rèn)空白間隙技巧 / 83
4．5 提高項(xiàng)目：制作“詩詞鑒賞”網(wǎng)頁 / 85
4．6 拓展項(xiàng)目：制作“智能交通”網(wǎng)頁 / 86
知識檢測4 / 87
第5章 使用CSS設(shè)置圖像樣式 / 88
5．1 基礎(chǔ)項(xiàng)目1：制作“李彥宏―眾里尋他千百度”網(wǎng)頁 / 88
5．2 知識庫：CSS圖像樣式 / 92
5．2．1 網(wǎng)頁圖像格式 / 92
5．2．2 CSS常用圖像樣式 / 93
5．2．3 圖像映射 / 96
5．3 基礎(chǔ)項(xiàng)目2：制作“少年中國說”網(wǎng)頁 / 98
5．4 知識庫：CSS背景樣式 / 102
5．4．1 背景顏色樣式 / 102
5．4．2 背景圖像樣式 / 102
5．4．3 CSS雪碧圖 / 104
5．5 提高項(xiàng)目：制作“低碳生活 從我做起”網(wǎng)頁 / 107
5．6 拓展項(xiàng)目：制作“春節(jié)民俗”網(wǎng)頁 / 108
知識檢測5 / 108
第6章 使用CSS設(shè)置列表樣式 / 110
6．1 基礎(chǔ)項(xiàng)目1：制作簡單橫向?qū)Ш綑?/ 110
6．2 基礎(chǔ)項(xiàng)目2：制作簡單縱向?qū)Ш綑?/ 114
6．3 基礎(chǔ)項(xiàng)目3：制作下拉菜單式導(dǎo)航欄 / 116
6．4 基礎(chǔ)項(xiàng)目4：制作熱門旅游攻略列表 / 121
6．5 基礎(chǔ)項(xiàng)目5：制作熱門歌手榜 / 125
6．6 知識庫：CSS常用列表樣式 / 129
6．6．1 HTML列表 / 130
6．6．2 常用CSS列表樣式 / 131
6．7 提高項(xiàng)目：制作“童書暢銷榜”網(wǎng)頁 / 132
6．8 拓展項(xiàng)目：制作“商品列表”網(wǎng)頁 / 133
知識檢測6 / 133
第7章 使用CSS設(shè)置表格樣式 / 135
7．1 基礎(chǔ)項(xiàng)目1：制作“通訊錄”表格 / 135
7．2 知識庫：表格的HTML標(biāo)簽和常用樣式 / 138
7．2．1 表格的HTML標(biāo)簽 / 138
7．2．2 表格的常用CSS樣式 / 139
7．3 基礎(chǔ)項(xiàng)目2：制作“百度日歷”網(wǎng)頁 / 140
7．4 知識庫：單元格的合并與拆分 / 152
7．5 提高項(xiàng)目：制作“NBA常規(guī)賽得分表”網(wǎng)頁 / 153
7．6 拓展項(xiàng)目：制作“熱門景點(diǎn)排行榜”網(wǎng)頁 / 154
知識檢測7 / 154
第8章 使用CSS設(shè)置表單樣式 / 155
8．1 基礎(chǔ)項(xiàng)目1：制作“網(wǎng)易郵箱注冊”網(wǎng)頁 / 155
8．2 知識庫：常用表單元素類型及結(jié)構(gòu) / 170
8．2．1 表單標(biāo)簽 / 170
8．2．2 常用表單元素 / 171
8．2．3 表單按鈕 / 173
8．3 基礎(chǔ)項(xiàng)目2：制作“速遞網(wǎng)在線下單”網(wǎng)頁 / 175
8．4 知識庫：域集和組 / 183
8．4．1 域集 / 183
8．4．2 組 / 183
8．5 提高項(xiàng)目：制作電商網(wǎng)站“商家入駐”網(wǎng)頁 / 184
8．6 拓展項(xiàng)目：制作“快樂數(shù)獨(dú)”網(wǎng)頁 / 186
知識檢測8 / 187
第9章 盒子模型 / 188
9．1 基礎(chǔ)項(xiàng)目：根據(jù)布局圖創(chuàng)建簡單的盒子模型頁面 / 188
9．2 知識庫：盒子模型的理解與應(yīng)用 / 190
9．2．1 盒子模型的概念 / 190
9．2．2 盒子模型的計(jì)算 / 191
9．2．3 box-sizing屬性介紹 / 192
9．2．4 偽元素 / 193
9．2．5 實(shí)際開發(fā)中遇到的和盒子模型相關(guān)的應(yīng)用及小問題 / 196
9．3 拓展項(xiàng)目：使用盒子模型創(chuàng)建網(wǎng)頁布局 / 199
知識檢測9 / 199
第10章 CSS標(biāo)準(zhǔn)流布局 / 201
10．1 基礎(chǔ)項(xiàng)目：制作“谷穗兒機(jī)構(gòu)”網(wǎng)頁 / 201
10．1．1 對頁面進(jìn)行整體布局 / 202
10．1．2 制作頁頭部分 / 203
10．1．3 制作內(nèi)容部分 / 205
10．1．4 制作頁腳部分 / 209
10．2 知識庫：標(biāo)準(zhǔn)流的概念及注意事項(xiàng) / 210
10．2．1 什么是標(biāo)準(zhǔn)流布局 / 210
10．2．2 標(biāo)準(zhǔn)流布局中垂直外邊距的合并問題 / 210
10．3 提高項(xiàng)目：制作“創(chuàng)優(yōu)翼UI設(shè)計(jì)學(xué)院”網(wǎng)頁 / 212
10．4 拓展項(xiàng)目：制作“簡歷工廠”網(wǎng)頁 / 213
知識檢測10 / 214
第11章 CSS浮動(dòng)布局 / 215
11．1 基礎(chǔ)項(xiàng)目：制作“創(chuàng)優(yōu)翼網(wǎng)站首頁” / 215
11．1．1 對頁面進(jìn)行整體布局 / 216
11．1．2 制作頁頭和今日特訊部分 / 218
11．1．3 制作學(xué)員活動(dòng)部分 / 221
11．1．4 制作新聞中心、熱門活動(dòng)和就業(yè)信息板塊 / 224
11．1．5 制作頁腳部分 / 233
11．2 知識庫：浮動(dòng)布局的原理及應(yīng)用技巧 / 233
11．2．1 float屬性 / 233
11．2．2 浮動(dòng)布局的原理 / 234
11．2．3 浮動(dòng)布局技巧 / 237
11．2．4 消除浮動(dòng)布局帶來的不良影響 / 238
11．3 提高項(xiàng)目：制作“學(xué)校網(wǎng)站新聞列表頁” / 241
11．4 拓展項(xiàng)目：制作“咔嚓攝影網(wǎng)”主頁 / 244
知識檢測11 / 244
第12章 CSS定位布局 / 246
12．1 基礎(chǔ)項(xiàng)目：制作“精品購物網(wǎng)”首頁 / 246
12．1．1 對頁面進(jìn)行整體布局 / 247
12．1．2 制作主體內(nèi)容區(qū) / 250
12．1．3 制作側(cè)邊導(dǎo)航欄 / 256
12．2 知識庫：定位的原理及應(yīng)用技巧 / 259
12．2．1 CSS定位屬性 / 259
12．2．2 相對定位 / 260
12．2．3 絕對定位 / 261
12．2．4 元素的堆疊順序、溢出和剪裁 / 262
12．3 提高項(xiàng)目：制作“會(huì)當(dāng)凌絕頂―小說投稿”網(wǎng)頁 / 265
12．4 拓展項(xiàng)目：制作“創(chuàng)意照片墻”網(wǎng)頁 / 269
知識檢測12 / 270
第13章 綜合應(yīng)用1――制作新大陸集團(tuán)網(wǎng)站 / 271
13．1 制作網(wǎng)站首頁 / 271
13．1．1 對網(wǎng)頁進(jìn)行整體布局 / 272
13．1．2 制作頁頭部分 / 274
13．1．3 制作banner部分 / 279
13．1．4 制作主體內(nèi)容部分 / 283
13．1．5 制作頁腳部分 / 300
13．1．6 制作固定廣告招聘模塊 / 301
13．2 制作網(wǎng)站一級鏈接頁“合作與商機(jī)”頁面 / 301
13．2．1 對網(wǎng)頁進(jìn)行整體布局 / 301
13．2．2 制作banner部分 / 303
13．2．3 制作主體內(nèi)容部分 / 304
13．3 制作網(wǎng)站二級鏈接頁“合作與商機(jī)―＞軟件公司”頁面 / 311
13．3．1 對網(wǎng)頁進(jìn)行整體布局 / 312
13．3．2 制作主體內(nèi)容右側(cè)部分 / 313
第14章 綜合應(yīng)用2――制作麥寵物網(wǎng)站 / 316
14．1 制作網(wǎng)站首頁 / 316
14．1．1 對網(wǎng)頁進(jìn)行整體布局 / 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 制作右側(cè)固定導(dǎo)航欄板塊 / 350
14．2 制作網(wǎng)站一級鏈接頁“星寵趣事”頁面 / 352
14．2．1 對網(wǎng)頁進(jìn)行整體布局 / 352
14．2．2 制作星寵banner板塊 / 355
14．2．3 制作分類選項(xiàng)卡 / 356
14．2．4 制作“熱門推薦”板塊 / 357
14．2．5 制作“汪星人”“喵星人”“其他”三個(gè)板塊的結(jié)構(gòu)和樣式 / 361
14．3 制作網(wǎng)站二級鏈接頁“星寵趣事詳情”頁面 / 366
14．3．1 對網(wǎng)頁進(jìn)行整體布局 / 367
14．3．2 制作趣事詳情板塊 / 368
14．3．3 制作Rexie的更多分享板塊 / 372
14．3．4 制作右側(cè)商品廣告欄板塊 / 375