全書(shū)共14章，分為基礎(chǔ)篇、技能篇、布局篇和應(yīng)用篇。基礎(chǔ)篇主要內(nèi)容包括：網(wǎng)頁(yè)基礎(chǔ)、HTML語(yǔ)言基礎(chǔ)、CSS樣式基礎(chǔ)。技能篇中主要介紹使用CSS設(shè)置文字樣式、圖像樣式、列表樣式、表格樣式以及表單樣式。布局篇中詳細(xì)講解了使用CSS+DIV布局網(wǎng)頁(yè)的三種基本方法：流布局、浮動(dòng)布局和定位布局。最后，在應(yīng)用篇中給出了兩個(gè)具有很強(qiáng)實(shí)用性的綜合網(wǎng)站案例。
徐洪亮是北京信息管理學(xué)校的骨干教師，有豐富的教學(xué)及教研經(jīng)驗(yàn)。本書(shū)布局篇中詳細(xì)講解了使用CSS+DIV布局網(wǎng)頁(yè)的三種基本方法：流布局、浮動(dòng)布局和定位布局。最后，在應(yīng)用篇中給出了兩個(gè)具有很強(qiáng)實(shí)用性的綜合網(wǎng)站案例。
基 礎(chǔ) 篇
第1章 網(wǎng)頁(yè)基礎(chǔ) / 1
1.1 基礎(chǔ)項(xiàng)目1：制作“我為自己代言”網(wǎng)頁(yè) / 1
1.2 知識(shí)庫(kù)：網(wǎng)頁(yè)基礎(chǔ)知識(shí) / 5
1.2.1 網(wǎng)站開(kāi)發(fā)流程 / 5
1.2.2 網(wǎng)頁(yè)常用術(shù)語(yǔ) / 7
1.2.3 網(wǎng)頁(yè)文件命名規(guī)范 / 9
1.3 基礎(chǔ)項(xiàng)目2：制作“陳歐介紹”網(wǎng)頁(yè) / 10
1.4 知識(shí)庫(kù)：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)頁(yè) / 21
1.6 拓展項(xiàng)目：制作“支付”網(wǎng)頁(yè) / 21
知識(shí)檢測(cè)1 / 22
第2章 HTML語(yǔ)言基礎(chǔ) / 23
2.1 基礎(chǔ)項(xiàng)目1：制作“走向遠(yuǎn)方”網(wǎng)頁(yè) / 23
2.2 知識(shí)庫(kù)：HTML語(yǔ)言的概念和基本結(jié)構(gòu) / 24
2.2.1 HTML語(yǔ)言的概念 / 24
2.2.2 HTML文檔的基本結(jié)構(gòu) / 24
2.3 基礎(chǔ)項(xiàng)目2：制作“我的空間”網(wǎng)頁(yè) / 27
2.4 知識(shí)庫(kù)：HTML標(biāo)簽分類(lèi)及常見(jiàn)HTML標(biāo)簽 / 29
2.4.1 HTML標(biāo)簽分類(lèi) / 29
2.4.2 常見(jiàn)HTML標(biāo)簽 / 30
2.5 提高項(xiàng)目：制作“深海騎兵”網(wǎng)頁(yè) / 38
2.6 拓展項(xiàng)目：制作“菜鳥(niǎo)加油”網(wǎng)頁(yè) / 39
知識(shí)檢測(cè)2 / 39
第3章 CSS樣式基礎(chǔ) / 40
3.1 基礎(chǔ)項(xiàng)目1：制作“古詩(shī)詞欣賞”網(wǎng)頁(yè) / 40
3.2 知識(shí)庫(kù)：CSS語(yǔ)言的概念和基本結(jié)構(gòu) / 45
3.2.1 CSS語(yǔ)言的概念 / 45
3.2.2 CSS語(yǔ)言的基本結(jié)構(gòu)和注釋 / 45
3.2.3 CSS書(shū)寫(xiě)順序及規(guī)范 / 46
3.3 基礎(chǔ)項(xiàng)目2：制作“電影資訊”網(wǎng)頁(yè) / 48
3.4 知識(shí)庫(kù)：CSS樣式表的引入及選擇器的使用 / 53
3.4.1 CSS樣式表的引入 / 53
3.4.2 CSS選擇器的使用 / 55
3.5 提高項(xiàng)目：制作“美味生活”網(wǎng)頁(yè) / 62
3.6 拓展項(xiàng)目：制作“馬云創(chuàng)業(yè)語(yǔ)錄”網(wǎng)頁(yè) / 63
知識(shí)檢測(cè)3 / 64
技 能 篇
第4章 使用CSS設(shè)置文字樣式 / 65
4.1 基礎(chǔ)項(xiàng)目1：制作“古人書(shū)房佳聯(lián)賞析”網(wǎng)頁(yè) / 65
4.2 知識(shí)庫(kù)：CSS文字樣式 / 68
4.2.1 文字樣式常用屬性 / 68
4.2.2 網(wǎng)頁(yè)安全色 / 72
4.2.3 CSS網(wǎng)頁(yè)元素的長(zhǎng)度單位 / 73
4.3 基礎(chǔ)項(xiàng)目2：制作“創(chuàng)業(yè)人物”網(wǎng)頁(yè) / 74
4.4 知識(shí)庫(kù)：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)目：制作“詩(shī)詞鑒賞”網(wǎng)頁(yè) / 85
4.6 拓展項(xiàng)目：制作“智能交通”網(wǎng)頁(yè) / 86
知識(shí)檢測(cè)4 / 87
第5章 使用CSS設(shè)置圖像樣式 / 88
5.1 基礎(chǔ)項(xiàng)目1：制作“李彥宏—眾里尋他千百度”網(wǎng)頁(yè) / 88
5.2 知識(shí)庫(kù)：CSS圖像樣式 / 92
5.2.1 網(wǎng)頁(yè)圖像格式 / 92
5.2.2 CSS常用圖像樣式 / 93
5.2.3 圖像映射 / 96
5.3 基礎(chǔ)項(xiàng)目2：制作“少年中國(guó)說(shuō)”網(wǎng)頁(yè) / 98
5.4 知識(shí)庫(kù)：CSS背景樣式 / 102
5.4.1 背景顏色樣式 / 102
5.4.2 背景圖像樣式 / 102
5.4.3 CSS雪碧圖 / 104
5.5 提高項(xiàng)目：制作“低碳生活 從我做起”網(wǎng)頁(yè) / 107
5.6 拓展項(xiàng)目：制作“春節(jié)民俗”網(wǎng)頁(yè) / 108
知識(shí)檢測(cè)5 / 108
第6章 使用CSS設(shè)置列表樣式 / 110
6.1 基礎(chǔ)項(xiàng)目1：制作簡(jiǎn)單橫向?qū)Ш綑?/ 110
6.2 基礎(chǔ)項(xiàng)目2：制作簡(jiǎn)單縱向?qū)Ш綑?/ 114
6.3 基礎(chǔ)項(xiàng)目3：制作下拉菜單式導(dǎo)航欄 / 116
6.4 基礎(chǔ)項(xiàng)目4：制作熱門(mén)旅游攻略列表 / 121
6.5 基礎(chǔ)項(xiàng)目5：制作熱門(mén)歌手榜 / 125
6.6 知識(shí)庫(kù)：CSS常用列表樣式 / 129
6.6.1 HTML列表 / 130
6.6.2 常用CSS列表樣式 / 131
6.7 提高項(xiàng)目：制作“童書(shū)暢銷(xiāo)榜”網(wǎng)頁(yè) / 132
6.8 拓展項(xiàng)目：制作“商品列表”網(wǎng)頁(yè) / 133
知識(shí)檢測(cè)6 / 133
第7章 使用CSS設(shè)置表格樣式 / 135
7.1 基礎(chǔ)項(xiàng)目1：制作“通訊錄”表格 / 135
7.2 知識(shí)庫(kù)：表格的HTML標(biāo)簽和常用樣式 / 138
7.2.1 表格的HTML標(biāo)簽 / 138
7.2.2 表格的常用CSS樣式 / 139
7.3 基礎(chǔ)項(xiàng)目2：制作“百度日歷”網(wǎng)頁(yè) / 140
7.4 知識(shí)庫(kù)：?jiǎn)卧竦暮喜⑴c拆分 / 152
7.5 提高項(xiàng)目：制作“NBA常規(guī)賽得分表”網(wǎng)頁(yè) / 153
7.6 拓展項(xiàng)目：制作“熱門(mén)景點(diǎn)排行榜”網(wǎng)頁(yè) / 154
知識(shí)檢測(cè)7 / 154
第8章 使用CSS設(shè)置表單樣式 / 155
8.1 基礎(chǔ)項(xiàng)目1：制作“網(wǎng)易郵箱注冊(cè)”網(wǎng)頁(yè) / 155
8.2 知識(shí)庫(kù)：常用表單元素類(lèi)型及結(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)頁(yè) / 175
8.4 知識(shí)庫(kù)：域集和組 / 183
8.4.1 域集 / 183
8.4.2 組 / 183
8.5 提高項(xiàng)目：制作電商網(wǎng)站“商家入駐”網(wǎng)頁(yè) / 184
8.6 拓展項(xiàng)目：制作“快樂(lè)數(shù)獨(dú)”網(wǎng)頁(yè) / 186
知識(shí)檢測(cè)8 / 187
第9章 盒子模型 / 188
9.1 基礎(chǔ)項(xiàng)目：根據(jù)布局圖創(chuàng)建簡(jiǎn)單的盒子模型頁(yè)面 / 188
9.2 知識(shí)庫(kù)：盒子模型的理解與應(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í)際開(kāi)發(fā)中遇到的和盒子模型相關(guān)的應(yīng)用及小問(wèn)題 / 196
9.3 拓展項(xiàng)目：使用盒子模型創(chuàng)建網(wǎng)頁(yè)布局 / 199
知識(shí)檢測(cè)9 / 199
第10章 CSS標(biāo)準(zhǔn)流布局 / 201
10.1 基礎(chǔ)項(xiàng)目：制作“谷穗兒機(jī)構(gòu)”網(wǎng)頁(yè) / 201
10.1.1 對(duì)頁(yè)面進(jìn)行整體布局 / 202
10.1.2 制作頁(yè)頭部分 / 203
10.1.3 制作內(nèi)容部分 / 205
10.1.4 制作頁(yè)腳部分 / 209
10.2 知識(shí)庫(kù)：標(biāo)準(zhǔn)流的概念及注意事項(xiàng) / 210
10.2.1 什么是標(biāo)準(zhǔn)流布局 / 210
10.2.2 標(biāo)準(zhǔn)流布局中垂直外邊距的合并問(wèn)題 / 210
10.3 提高項(xiàng)目：制作“創(chuàng)優(yōu)翼UI設(shè)計(jì)學(xué)院”網(wǎng)頁(yè) / 212
10.4 拓展項(xiàng)目：制作“簡(jiǎn)歷工廠”網(wǎng)頁(yè) / 213
知識(shí)檢測(cè)10 / 214
第11章 CSS浮動(dòng)布局 / 215
11.1 基礎(chǔ)項(xiàng)目：制作“創(chuàng)優(yōu)翼網(wǎng)站首頁(yè)” / 215
11.1.1 對(duì)頁(yè)面進(jìn)行整體布局 / 216
11.1.2 制作頁(yè)頭和今日特訊部分 / 218
11.1.3 制作學(xué)員活動(dòng)部分 / 221
11.1.4 制作新聞中心、熱門(mén)活動(dòng)和就業(yè)信息板塊 / 224
11.1.5 制作頁(yè)腳部分 / 233
11.2 知識(shí)庫(kù)：浮動(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)布局帶來(lái)的不良影響 / 238
11.3 提高項(xiàng)目：制作“學(xué)校網(wǎng)站新聞列表頁(yè)” / 241
11.4 拓展項(xiàng)目：制作“咔嚓攝影網(wǎng)”主頁(yè) / 244
知識(shí)檢測(cè)11 / 244
第12章 CSS定位布局 / 246
12.1 基礎(chǔ)項(xiàng)目：制作“精品購(gòu)物網(wǎng)”首頁(yè) / 246
12.1.1 對(duì)頁(yè)面進(jìn)行整體布局 / 247
12.1.2 制作主體內(nèi)容區(qū) / 250
12.1.3 制作側(cè)邊導(dǎo)航欄 / 256
12.2 知識(shí)庫(kù)：定位的原理及應(yīng)用技巧 / 259
12.2.1 CSS定位屬性 / 259
12.2.2 相對(duì)定位 / 260
12.2.3 絕對(duì)定位 / 261
12.2.4 元素的堆疊順序、溢出和剪裁 / 262
12.3 提高項(xiàng)目：制作“會(huì)當(dāng)凌絕頂—小說(shuō)投稿”網(wǎng)頁(yè) / 265
12.4 拓展項(xiàng)目：制作“創(chuàng)意照片墻”網(wǎng)頁(yè) / 269
知識(shí)檢測(cè)12 / 270
第13章 綜合應(yīng)用1——制作新大陸集團(tuán)網(wǎng)站 / 271
13.1 制作網(wǎng)站首頁(yè) / 271
13.1.1 對(duì)網(wǎng)頁(yè)進(jìn)行整體布局 / 272
13.1.2 制作頁(yè)頭部分 / 274
13.1.3 制作banner部分 / 279
13.1.4 制作主體內(nèi)容部分 / 283
13.1.5 制作頁(yè)腳部分 / 300
13.1.6 制作固定廣告招聘模塊 / 301
13.2 制作網(wǎng)站一級(jí)鏈接頁(yè)“合作與商機(jī)”頁(yè)面 / 301
13.2.1 對(duì)網(wǎng)頁(yè)進(jìn)行整體布局 / 301
13.2.2 制作banner部分 / 303
13.2.3 制作主體內(nèi)容部分 / 304
13.3 制作網(wǎng)站二級(jí)鏈接頁(yè)“合作與商機(jī)—＞軟件公司”頁(yè)面 / 311
13.3.1 對(duì)網(wǎng)頁(yè)進(jìn)行整體布局 / 312
13.3.2 制作主體內(nèi)容右側(cè)部分 / 313
第14章 綜合應(yīng)用2——制作麥寵物網(wǎng)站 / 316
14.1 制作網(wǎng)站首頁(yè) / 316
14.1.1 對(duì)網(wǎng)頁(yè)進(jìn)行整體布局 / 317
14.1.2 制作頁(yè)頭部分 / 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 制作頁(yè)腳板塊 / 347
14.1.9 制作右側(cè)固定導(dǎo)航欄板塊 / 350
14.2 制作網(wǎng)站一級(jí)鏈接頁(yè)“星寵趣事”頁(yè)面 / 352
14.2.1 對(duì)網(wǎng)頁(yè)進(jìn)行整體布局 / 352
14.2.2 制作星寵banner板塊 / 355
14.2.3 制作分類(lèi)選項(xiàng)卡 / 356
14.2.4 制作“熱門(mén)推薦”板塊 / 357
14.2.5 制作“汪星人”“喵星人”“其他”三個(gè)板塊的結(jié)構(gòu)和樣式 / 361
14.3 制作網(wǎng)站二級(jí)鏈接頁(yè)“星寵趣事詳情”頁(yè)面 / 366
14.3.1 對(duì)網(wǎng)頁(yè)進(jìn)行整體布局 / 367
14.3.2 制作趣事詳情板塊 / 368
14.3.3 制作Rexie的更多分享板塊 / 372
14.3.4 制作右側(cè)商品廣告欄板塊 / 375
新書(shū)資訊