第1 單元 準備工作.......................................................................................... 1

任務1.1 認識HTML5 和CSS3 ................................................................................................ 1

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

任務1.2.1 安裝HBuilder X ............................................................................................. 3

任務1.2.2 安裝Sublime Text3 ........................................................................................ 5

任務1.3 分析個網頁........................................................................................................ 6

任務1.4 了解網頁編輯和調試技巧........................................................................................ 9

單元小結............................................................................................................................... .. 10

習題............................................................................................................................... .......... 10

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

任務2.1 認識標題元素......................................................................................................... 12

任務2.2 認識段落元素......................................................................................................... 14

任務2.3 認識換行元素、水平線元素.................................................................................. 15

任務2.4 認識圖像元素......................................................................................................... 16

任務2.5 認識超鏈接............................................................................................................. 17

任務2.6 認識無序列表......................................................................................................... 18

任務2.7 認識有序列表......................................................................................................... 19

任務2.8 認識自定義列表...................................................................................................... 20

任務2.9 認識表格元素......................................................................................................... 21

任務2.10 認識表單元素....................................................................................................... 23

任務2.11 認識音頻、視頻元素............................................................................................ 24

單元小結............................................................................................................................... .. 26

習題............................................................................................................................... .......... 26

第3 單元 網頁整體布局的搭建...................................................................... 27

任務3.1 單列布局的搭建...................................................................................................... 27

任務3.1.1 網頁結構的實現........................................................................................... 28

任務3.1.2 網頁樣式的實現........................................................................................... 29

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

任務3.2.1 網頁結構的實現........................................................................................... 35

任務3.2.2 網頁樣式的實現........................................................................................... 36

任務3.3 三列布局的搭建...................................................................................................... 44

目 錄

2 HTML5 CSS3 網頁布局任務教程

任務3.3.1 網頁結構的實現........................................................................................... 44

任務3.3.2 網頁樣式的實現........................................................................................... 45

單元小結............................................................................................................................... .. 51

習題............................................................................................................................... .......... 51

第4 單元 網頁主體內容的構建1文本的制作........................................... 53

任務4.1 海南島簡介頁的制作（標題 段落）................................................................ 53

任務4.1.1 網頁結構的實現........................................................................................... 54

任務4.1.2 網頁基本樣式的實現................................................................................... 56

任務4.1.3 簡介標題樣式和段落樣式的實現................................................................. 58

任務4.2 學院簡介頁的制作（頭部 段落） ................................................................... 63

任務4.2.1 網頁結構的實現........................................................................................... 64

任務4.2.2 網頁基本樣式的實現................................................................................... 65

任務4.2.3 簡介頭部的樣式和正文樣式的實現............................................................. 66

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

任務4.3.1 網頁結構和基本樣式的實現........................................................................ 70

任務4.3.2 文章頭部樣式和章節(jié)樣式的實現................................................................. 72

任務4.4 學院首頁兩行對稱欄目的制作......................................................................... 73

任務4.4.1 網頁結構和基本樣式的實現........................................................................ 74

任務4.4.2 兩列對稱欄目樣式的實現............................................................................ 78

任務4.5 學院首頁三列非對稱欄目的制作...................................................................... 81

任務4.5.1 網頁結構和基本樣式的實現........................................................................ 82

任務4.5.2 三列非對稱欄目樣式的實現........................................................................ 85

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

任務4.6.1 網頁結構和基本樣式的實現........................................................................ 89

任務4.6.2 左窄右寬的兩列布局的實現........................................................................ 91

單元小結............................................................................................................................... .. 96

習題............................................................................................................................... .......... 96

第5 單元 網頁主體內容的構建2圖片的制作........................................... 98

任務5.1 學院首頁兩行對稱欄目插圖............................................................................. 98

任務5.2 學院首頁三列非對稱欄目插圖....................................................................... 101

任務5.3 F 式布局、左圖右文............................................................................................. 106

任務5.4 兩列布局、上圖下文............................................................................................ 109

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