第1 單元 準(zhǔn)備工作.......................................................................................... 1

任務(wù)1.1 認(rèn)識(shí)HTML5 和CSS3 ................................................................................................ 1

任務(wù)1.2 搭建軟件環(huán)境........................................................................................................... 2

任務(wù)1.2.1 安裝HBuilder X ............................................................................................. 3

任務(wù)1.2.2 安裝Sublime Text3 ........................................................................................ 5

任務(wù)1.3 分析個(gè)網(wǎng)頁........................................................................................................ 6

任務(wù)1.4 了解網(wǎng)頁編輯和調(diào)試技巧........................................................................................ 9

單元小結(jié)............................................................................................................................... .. 10

習(xí)題............................................................................................................................... .......... 10

第2 單元 HTML5 常見元素............................................................................ 12

任務(wù)2.1 認(rèn)識(shí)標(biāo)題元素......................................................................................................... 12

任務(wù)2.2 認(rèn)識(shí)段落元素......................................................................................................... 14

任務(wù)2.3 認(rèn)識(shí)換行元素、水平線元素.................................................................................. 15

任務(wù)2.4 認(rèn)識(shí)圖像元素......................................................................................................... 16

任務(wù)2.5 認(rèn)識(shí)超鏈接............................................................................................................. 17

任務(wù)2.6 認(rèn)識(shí)無序列表......................................................................................................... 18

任務(wù)2.7 認(rèn)識(shí)有序列表......................................................................................................... 19

任務(wù)2.8 認(rèn)識(shí)自定義列表...................................................................................................... 20

任務(wù)2.9 認(rèn)識(shí)表格元素......................................................................................................... 21

任務(wù)2.10 認(rèn)識(shí)表單元素....................................................................................................... 23

任務(wù)2.11 認(rèn)識(shí)音頻、視頻元素............................................................................................ 24

單元小結(jié)............................................................................................................................... .. 26

習(xí)題............................................................................................................................... .......... 26

第3 單元 網(wǎng)頁整體布局的搭建...................................................................... 27

任務(wù)3.1 單列布局的搭建...................................................................................................... 27

任務(wù)3.1.1 網(wǎng)頁結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 28

任務(wù)3.1.2 網(wǎng)頁樣式的實(shí)現(xiàn)........................................................................................... 29

任務(wù)3.2 左寬右窄兩列布局（F 式布局）的搭建................................................................ 35

任務(wù)3.2.1 網(wǎng)頁結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 35

任務(wù)3.2.2 網(wǎng)頁樣式的實(shí)現(xiàn)........................................................................................... 36

任務(wù)3.3 三列布局的搭建...................................................................................................... 44

目 錄

2 HTML5 CSS3 網(wǎng)頁布局任務(wù)教程

任務(wù)3.3.1 網(wǎng)頁結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 44

任務(wù)3.3.2 網(wǎng)頁樣式的實(shí)現(xiàn)........................................................................................... 45

單元小結(jié)............................................................................................................................... .. 51

習(xí)題............................................................................................................................... .......... 51

第4 單元 網(wǎng)頁主體內(nèi)容的構(gòu)建1文本的制作........................................... 53

任務(wù)4.1 海南島簡(jiǎn)介頁的制作（標(biāo)題 段落）................................................................ 53

任務(wù)4.1.1 網(wǎng)頁結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 54

任務(wù)4.1.2 網(wǎng)頁基本樣式的實(shí)現(xiàn)................................................................................... 56

任務(wù)4.1.3 簡(jiǎn)介標(biāo)題樣式和段落樣式的實(shí)現(xiàn)................................................................. 58

任務(wù)4.2 學(xué)院簡(jiǎn)介頁的制作（頭部 段落） ................................................................... 63

任務(wù)4.2.1 網(wǎng)頁結(jié)構(gòu)的實(shí)現(xiàn)........................................................................................... 64

任務(wù)4.2.2 網(wǎng)頁基本樣式的實(shí)現(xiàn)................................................................................... 65

任務(wù)4.2.3 簡(jiǎn)介頭部的樣式和正文樣式的實(shí)現(xiàn)............................................................. 66

任務(wù)4.3 美麗的草原頁的制作（頭部 章節(jié)）................................................................ 69

任務(wù)4.3.1 網(wǎng)頁結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 70

任務(wù)4.3.2 文章頭部樣式和章節(jié)樣式的實(shí)現(xiàn)................................................................. 72

任務(wù)4.4 學(xué)院首頁兩行對(duì)稱欄目的制作......................................................................... 73

任務(wù)4.4.1 網(wǎng)頁結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 74

任務(wù)4.4.2 兩列對(duì)稱欄目樣式的實(shí)現(xiàn)............................................................................ 78

任務(wù)4.5 學(xué)院首頁三列非對(duì)稱欄目的制作...................................................................... 81

任務(wù)4.5.1 網(wǎng)頁結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 82

任務(wù)4.5.2 三列非對(duì)稱欄目樣式的實(shí)現(xiàn)........................................................................ 85

任務(wù)4.6 專業(yè)介紹頁的制作（左窄右寬的兩列布局）................................................... 88

任務(wù)4.6.1 網(wǎng)頁結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 89

任務(wù)4.6.2 左窄右寬的兩列布局的實(shí)現(xiàn)........................................................................ 91

單元小結(jié)............................................................................................................................... .. 96

習(xí)題............................................................................................................................... .......... 96

第5 單元 網(wǎng)頁主體內(nèi)容的構(gòu)建2圖片的制作........................................... 98

任務(wù)5.1 學(xué)院首頁兩行對(duì)稱欄目插圖............................................................................. 98

任務(wù)5.2 學(xué)院首頁三列非對(duì)稱欄目插圖....................................................................... 101

任務(wù)5.3 F 式布局、左圖右文............................................................................................. 106

任務(wù)5.4 兩列布局、上圖下文............................................................................................ 109

任務(wù)5.5 文字環(huán)繞圖片1 ...................................................................