基 礎 篇

第1章 網(wǎng)頁基礎 / 1

1．1 基礎項目1：制作“念奴嬌・赤壁懷古”網(wǎng)頁 / 1

1．2 知識庫：網(wǎng)頁基礎知識 / 5

1．2．1 網(wǎng)站開發(fā)流程 / 5

1．2．2 網(wǎng)頁常用術語 / 8

1．2．3 網(wǎng)頁文件命名規(guī)范 / 10

1．3 基礎項目2：制作“蘇軾介紹”網(wǎng)頁 / 11

1．4 知識庫：Dreamweaver 2021的工作界面和使用技巧 / 14

1．4．1 啟動Dreamweaver 2021 / 14

1．4．2 認識Dreamweaver 2021工作界面 / 17

1．4．3 更改Dreamweaver 2021默認界面和布局 / 21

1．4．4 使用Dreamweaver 2021的幾個小技巧 / 22

1．5 提高項目：制作“青春頌歌”網(wǎng)頁 / 23

1．6 拓展項目：制作“速度滑冰”網(wǎng)頁 / 24

知識檢測1 / 24

第2章 HTML語言基礎 / 26

2．1 基礎項目1：制作“走向遠方”網(wǎng)頁 / 26

2．2 知識庫：HTML語言的概念和基本結(jié)構 / 27

2．2．1 HTML語言的概念 / 27

2．2．2 HTML文檔的基本結(jié)構 / 28

2．3 基礎項目2：制作“我的空間”網(wǎng)頁 / 30

2．4 知識庫：HTML標簽的分類及常見的HTML標簽 / 32

2．4．1 HTML標簽的分類 / 32

2．4．2 常見的HTML標簽 / 34

2．5 提高項目：制作“垃圾分類 人人有責”網(wǎng)頁 / 43

2．6 拓展項目：制作“菜鳥加油”網(wǎng)頁 / 44

知識檢測2 / 44

第3章 CSS樣式基礎 / 45

3．1 基礎項目1：制作“古詩詞欣賞”網(wǎng)頁 / 45

3．2 知識庫：CSS語言的概念和基本結(jié)構 / 50

3．2．1 CSS語言的概念 / 50

3．2．2 CSS語言的基本結(jié)構和注釋 / 50

3．2．3 CSS書寫順序及規(guī)范 / 51

3．3 基礎項目2：制作“服務奧運，精彩人生”網(wǎng)頁 / 54

3．4 知識庫：CSS樣式表的引入及選擇器的使用 / 58

3．4．1 CSS樣式表的引入 / 58

3．4．2 CSS選擇器的使用 / 61

3．5 提高項目：制作“女排精神”網(wǎng)頁 / 68

3．6 拓展項目：制作“琴棋書畫”網(wǎng)頁 / 69

知識檢測3 / 70

技 能 篇

第4章 使用CSS設置文字樣式 / 71

4．1 基礎項目1：制作“古人書房佳聯(lián)賞析”網(wǎng)頁 / 71

4．2 知識庫：CSS文字樣式 / 75

4．2．1 文字樣式常用屬性 / 75

4．2．2 網(wǎng)頁安全色 / 80

4．2．3 CSS網(wǎng)頁元素的長度單位 / 80

4．3 基礎項目2：制作“中國名花”網(wǎng)頁 / 82

4．4 知識庫：CSS段落樣式與元素特性 / 87

4．4．1 段落樣式常用屬性 / 87

4．4．2 關于＜span＞標簽 / 92

4．4．3 清除行內(nèi)塊元素默認空白間隙技巧 / 92

4．5 提高項目：制作“詩詞鑒賞”網(wǎng)頁 / 94

4．6 拓展項目：制作“古典園林”網(wǎng)頁 / 96

知識檢測4 / 97

第5章 使用CSS設置圖像樣式 / 98

5．1 基礎項目1：制作“茶文化”網(wǎng)頁 / 98

5．2 知識庫：CSS圖像樣式 / 102

5．2．1 網(wǎng)頁圖像格式 / 102

5．2．2 常用CSS圖像樣式 / 103

5．2．3 圖像映射 / 107

5．3 基礎項目2：制作“少年中國說”網(wǎng)頁 / 109

5．4 知識庫：CSS背景樣式 / 113

5．4．1 背景顏色樣式 / 113

5．4．2 背景圖像樣式 / 114

5．4．3 CSS雪碧圖 / 116

5．5 提高項目：制作“低碳生活 從我做起”網(wǎng)頁 / 119

5．6 拓展項目：制作“春節(jié)民俗”網(wǎng)頁 / 120

知識檢測5 / 121

第6章 使用CSS設置列表樣式 / 122

6．1 基礎項目1：制作“特色北京”橫向?qū)Ш綑?/ 122

6．2 基礎項目2：制作“特色北京”縱向?qū)Ш綑?/ 125

6．3 基礎項目3：制作“八大菜系”下拉菜單式導航欄 / 127

6．4 基礎項目4：制作“青少年文明公約”網(wǎng)頁 / 132

6．5 基礎項目5：制作“2020年感動中國十大人物”網(wǎng)頁 / 136

6．6 知識庫：CSS常用列表樣式 / 141

6．6．1 HTML列表 / 141

6．6．2 常用CSS列表樣式 / 143

6．7 提高項目：制作“悅讀圖書榜”網(wǎng)頁 / 144

6．8 拓展項目：制作“環(huán)保在行動”網(wǎng)頁 / 145

知識檢測6 / 145

第7章 使用CSS設置表格樣式 / 147

7．1 基礎項目1：制作“神舟系列飛船發(fā)射情況表”網(wǎng)頁 / 147

7．2 知識庫：表格的HTML標簽和常用樣式 / 150

7．2．1 表格的HTML標簽 / 150

7．2．2 表格的常用CSS樣式 / 151

7．3 基礎項目2：制作“青銅之美”網(wǎng)頁 / 153

7．4 知識庫：單元格的合并與拆分 / 158

7．5 提高項目：制作“中國二十四節(jié)氣―春天篇”網(wǎng)頁 / 159

7．6 拓展項目：制作“中國十大名勝古跡”網(wǎng)頁 / 160

知識檢測7 / 161

第8章 使用CSS設置表單樣式 / 162

8．1 基礎項目1：制作“郵箱注冊”網(wǎng)頁 / 162

8．2 知識庫：常用表單元素類型及結(jié)構 / 178

8．2．1 表單標簽 / 178

8．2．2 常用表單元素 / 179

8．2．3 表單按鈕 / 182

8．3 基礎項目2：制作“速遞網(wǎng)――在線下單”網(wǎng)頁 / 184

8．4 知識庫：域集和組 / 192

8．4．1 域集 / 192

8．4．2 組 / 193

8．5 提高項目：制作“商家入駐”網(wǎng)頁 / 194

8．6 拓展項目：制作“快樂數(shù)獨”網(wǎng)頁 / 197

知識檢測8 / 197

布 局 篇

第9章 盒子模型 / 199

9．1 基礎項目：根據(jù)布局圖創(chuàng)建簡單的盒子模型頁面 / 199

9．2 知識庫：盒子模型的理解與應用 / 201

9．2．1 盒子模型的概念 / 201

9．2．2 盒子模型的計算 / 202

9．2．3 box-sizing屬性 / 203

9．2．4 偽元素 / 204

9．2．5 實際開發(fā)中遇到的和盒子模型相關的問題及應用 / 207

9．3 提高項目：創(chuàng)建三列布局的盒子模型 / 210

9．4 拓展項目：制作“專業(yè)宣傳”網(wǎng)頁 / 211

知識檢測9 / 212

第10章 CSS標準流布局 / 213

10．1 基礎項目：制作“谷穗兒機構”網(wǎng)頁 / 213

10．1．1 對頁面進行整體布局 / 214

10．1．2 制作頁頭部分 / 215

10．1．3 制作內(nèi)容部分 / 217

10．1．4 制作頁腳部分 / 222

10．2 知識庫：標準流布局的概念及注意事項 / 223

10．2．1 標準流布局的概念 / 223

10．2．2 標準流布局中的注意事項 / 223

10．3 提高項目：制作“UI設計學院――博客”網(wǎng)頁 / 225

10．4 拓展項目：制作“簡歷工廠”網(wǎng)頁 / 227

知識檢測10 / 228

第11章 CSS浮動布局 / 229

11．1 基礎項目：制作“UI設計院”網(wǎng)站首頁 / 229

11．1．1 對頁面進行整體布局 / 230

11．1．2 制作頁頭和今日特訊部分 / 232

11．1．3 制作學員活動部分 / 235

11．1．4 制作新聞中心、熱門活動和就業(yè)信息板塊 / 239

11．1．5 制作頁腳部分 / 247

11．2 知識庫：浮動布局的原理及應用技巧 / 248

11．2．1 float屬性 / 248

11．2．2 浮動布局的原理 / 249

11．2．3 浮動布局技巧 / 251

11．2．4 消除浮動布局帶來的不良影響 / 253

11．3 提高項目：制作“學校網(wǎng)站新聞列表”網(wǎng)頁 / 256

11．4 拓展項目：制作“咔嚓攝影網(wǎng)”網(wǎng)頁 / 259

知識檢測11 / 260

第12章 CSS定位布局 / 261

12．1 基礎項目：制作“精品購物網(wǎng)”首頁 / 261

12．1．1 對頁面進行整體布局 / 262

12．1．2 制作主體內(nèi)容區(qū) / 265

12．1．3 制作側(cè)邊導航欄 / 272

12．2 知識庫：定位的原理及應用技巧 / 274

12．2．1 CSS定位屬性 / 274

12．2．2 相對定位 / 275

12．2．3 絕對定位 / 277

12．2．4 元素的堆疊順序、溢出和剪裁 / 278

12．3 提高項目：制作“會當凌絕頂―小說投稿”網(wǎng)頁 / 281

12．4 拓展項目：制作“創(chuàng)意照片墻”網(wǎng)頁 / 285

知識檢測12 / 286

應 用 篇

第13章 綜合應用1――制作新大陸集團網(wǎng)站 / 288

13．1 制作網(wǎng)站首頁 / 288

13．1．1 對網(wǎng)頁進行整體布局 / 289

13．1．2 制作頁頭部分 / 291

13．1．3 制作banner部分 / 296

13．1．4 制作主體內(nèi)容部分 / 300

13．1．5 制作頁腳部分 / 317

13．2 制作網(wǎng)站一級鏈接頁“合作與商機”頁面 / 318

13．2．1 對網(wǎng)頁進行整體布局 / 319

13．2．2 制作banner部分 / 321

13．2．3 制作主體內(nèi)容部分 / 321

13．3 制作網(wǎng)站二級鏈接頁―“軟件公司”頁面 / 328

13．3．1 對網(wǎng)頁進行整體布局 / 329

13．3．2 制作主體內(nèi)容右側(cè)部分 / 331

第14章 綜合應用2――制作麥寵物網(wǎng)站 / 334

14．1 制作網(wǎng)站首頁 / 334

14．1．1 對網(wǎng)頁進行整體布局 / 335

14．1．2 制作頁頭部分 / 337

14．1．3 制作banner部分 / 343

14．1．4 制作“本期星寵”板塊 / 347

14．1．5 制作“萌寵每日推薦”板塊 / 351

14．1．6 制作“更多萌寵推薦”板塊 / 361

14．1．7 制作廣告條板塊 / 366

14．1．8 制作頁腳板塊 / 366

14．1．9 制作右側(cè)固定導航欄板塊 / 369

14．2 制作網(wǎng)站一級鏈接頁“星寵趣事”頁面 / 370

14．2．1 對網(wǎng)頁進行整體布局 / 372

14．2．2 制作星寵banner板塊 / 374

14．2．3 制作分類選項卡 / 375

14．2．4 制作“熱門推薦”板塊 / 376

14．2．5 制作“汪星人”、“喵星人”、“其他”三個板塊的結(jié)構和樣式 / 381

14．3 制作網(wǎng)站二級鏈接頁“星寵趣事詳情”頁面 / 385

14．3．1 對網(wǎng)頁進行整體布局 / 386

14．3．2 制作“趣事詳情”板塊 / 388

14．3．3 制作“Rexie的更多分享”板塊 / 392

14．3．4 制作“右側(cè)商品廣告欄”板塊 / 394