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

第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)頁(yè) 6
任務(wù)1.4 了解網(wǎng)頁(yè)編輯和調(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)頁(yè)整體布局的搭建 27
任務(wù)3.1 單列布局的搭建 27
任務(wù)3.1.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn). 28
任務(wù)3.1.2 網(wǎng)頁(yè)樣式的實(shí)現(xiàn). 29
任務(wù)3.2 左寬右窄兩列布局（F 式布局）的搭建 35
任務(wù)3.2.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn). 35
任務(wù)3.2.2 網(wǎng)頁(yè)樣式的實(shí)現(xiàn). 36
任務(wù)3.3 三列布局的搭建 44
目 錄
2 HTML5+CSS3 網(wǎng)頁(yè)布局任務(wù)教程
任務(wù)3.3.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn). 44
任務(wù)3.3.2 網(wǎng)頁(yè)樣式的實(shí)現(xiàn). 45
單元小結(jié). 51
習(xí)題. 51
第4 單元 網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建1——文本的制作. 53
任務(wù)4.1 “海南島簡(jiǎn)介”頁(yè)的制作（標(biāo)題+段落） 53
任務(wù)4.1.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn). 54
任務(wù)4.1.2 網(wǎng)頁(yè)基本樣式的實(shí)現(xiàn). 56
任務(wù)4.1.3 簡(jiǎn)介標(biāo)題樣式和段落樣式的實(shí)現(xiàn). 58
任務(wù)4.2 “學(xué)院簡(jiǎn)介”頁(yè)的制作（頭部+段落） . 63
任務(wù)4.2.1 網(wǎng)頁(yè)結(jié)構(gòu)的實(shí)現(xiàn). 64
任務(wù)4.2.2 網(wǎng)頁(yè)基本樣式的實(shí)現(xiàn). 65
任務(wù)4.2.3 簡(jiǎn)介頭部的樣式和正文樣式的實(shí)現(xiàn). 66
任務(wù)4.3 “美麗的草原”頁(yè)的制作（頭部+章節(jié)） 69
任務(wù)4.3.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn) 70
任務(wù)4.3.2 文章頭部樣式和章節(jié)樣式的實(shí)現(xiàn). 72
任務(wù)4.4 “學(xué)院首頁(yè)”兩行對(duì)稱欄目的制作. 73
任務(wù)4.4.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn) 74
任務(wù)4.4.2 兩列對(duì)稱欄目樣式的實(shí)現(xiàn) 78
任務(wù)4.5 “學(xué)院首頁(yè)”三列非對(duì)稱欄目的制作 81
任務(wù)4.5.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn) 82
任務(wù)4.5.2 三列非對(duì)稱欄目樣式的實(shí)現(xiàn) 85
任務(wù)4.6 “專業(yè)介紹”頁(yè)的制作（左窄右寬的兩列布局）. 88
任務(wù)4.6.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn) 89
任務(wù)4.6.2 左窄右寬的兩列布局的實(shí)現(xiàn) 91
單元小結(jié). 96
習(xí)題. 96
第5 單元 網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建2——圖片的制作. 98
任務(wù)5.1 “學(xué)院首頁(yè)”兩行對(duì)稱欄目插圖. 98
任務(wù)5.2 “學(xué)院首頁(yè)”三列非對(duì)稱欄目插圖. 101
任務(wù)5.3 F 式布局、左圖右文. 106
任務(wù)5.4 兩列布局、上圖下文 109
任務(wù)5.5 文字環(huán)繞圖片1 113
任務(wù)5.6 文字環(huán)繞圖片2 116
任務(wù)5.7 多張圖片緊湊排列 117
任務(wù)5.8 設(shè)置背景圖像1 121
任務(wù)5.9 設(shè)置背景圖像2 123
目 錄3
單元小結(jié). 125
習(xí)題. 126
第6 單元 網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建3——表格的制作. 127
任務(wù)6.1 典型的表格. 127
任務(wù)6.2 單元格合并. 131
任務(wù)6.3 隔行換色表格. 132
單元小結(jié). 134
習(xí)題. 134
第7 單元 網(wǎng)頁(yè)主體內(nèi)容的構(gòu)建4——表單的制作. 135
任務(wù)7.1 制作網(wǎng)頁(yè)一角的表單 135
任務(wù)7.2 制作網(wǎng)頁(yè)任意位置的表單 140
任務(wù)7.3 制作遮罩層上的表單 147
單元小結(jié). 151
習(xí)題. 151
第8 單元 網(wǎng)頁(yè)頁(yè)眉的構(gòu)建. 153
任務(wù)8.1 制作典型頁(yè)眉1 153
任務(wù)8.2 制作典型頁(yè)眉2 156
單元小結(jié). 160
習(xí)題. 160
第9 單元 網(wǎng)頁(yè)主導(dǎo)航的構(gòu)建. 161
任務(wù)9.1 制作不帶下拉菜單的導(dǎo)航 161
任務(wù)9.2 制作帶下拉菜單的導(dǎo)航 163
單元小結(jié). 167
習(xí)題. 167
第10 單元 網(wǎng)頁(yè)橫幅廣告的構(gòu)建 168
任務(wù)10.1 制作窄幅橫幅廣告 168
任務(wù)10.2 制作寬幅橫幅廣告 169
單元小結(jié). 171
習(xí)題. 171
第11 單元 網(wǎng)頁(yè)頁(yè)腳的構(gòu)建. 172
任務(wù)11.1 制作典型頁(yè)腳1. 172
任務(wù)11.2 制作典型頁(yè)腳2. 174
單元小結(jié). 178
習(xí)題. 178
4 HTML5+CSS3 網(wǎng)頁(yè)布局任務(wù)教程
第12 單元 混合布局的綜合網(wǎng)頁(yè)的構(gòu)建 179
任務(wù)12.1 “旅游美食網(wǎng)”首頁(yè)的構(gòu)建. 179
任務(wù)12.2 仿“中國(guó)知網(wǎng)”首頁(yè)的構(gòu)建. 187
單元小結(jié). 204
習(xí)題. 205
知識(shí)解讀索引 206