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

第1 單元 準(zhǔn)備工作 1
任務(wù)1.1 認(rèn)識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 分析第一個網(wǎng)頁 6
任務(wù)1.4 了解網(wǎng)頁編輯和調(diào)試技巧 9
單元小結(jié). 10
習(xí)題. 10
第2 單元 HTML5 常見元素 12
任務(wù)2.1 認(rèn)識標(biāo)題元素. 12
任務(wù)2.2 認(rèn)識段落元素. 14
任務(wù)2.3 認(rèn)識換行元素、水平線元素 15
任務(wù)2.4 認(rèn)識圖像元素. 16
任務(wù)2.5 認(rèn)識超鏈接. 17
任務(wù)2.6 認(rèn)識無序列表. 18
任務(wù)2.7 認(rèn)識有序列表. 19
任務(wù)2.8 認(rèn)識自定義列表 20
任務(wù)2.9 認(rèn)識表格元素. 21
任務(wù)2.10 認(rèn)識表單元素. 23
任務(wù)2.11 認(rèn)識音頻、視頻元素 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 “海南島簡介”頁的制作（標(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 簡介標(biāo)題樣式和段落樣式的實(shí)現(xiàn). 58
任務(wù)4.2 “學(xué)院簡介”頁的制作（頭部+段落） . 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 簡介頭部的樣式和正文樣式的實(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é)院首頁”兩行對稱欄目的制作. 73
任務(wù)4.4.1 網(wǎng)頁結(jié)構(gòu)和基本樣式的實(shí)現(xiàn) 74
任務(wù)4.4.2 兩列對稱欄目樣式的實(shí)現(xiàn) 78
任務(wù)4.5 “學(xué)院首頁”三列非對稱欄目的制作 81
任務(wù)4.5.1 網(wǎng)頁結(jié)構(gòu)和基本樣式的實(shí)現(xiàn) 82
任務(wù)4.5.2 三列非對稱欄目樣式的實(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é)院首頁”兩行對稱欄目插圖. 98
任務(wù)5.2 “學(xué)院首頁”三列非對稱欄目插圖. 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)頁主體內(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)頁主體內(nèi)容的構(gòu)建4——表單的制作. 135
任務(wù)7.1 制作網(wǎng)頁一角的表單 135
任務(wù)7.2 制作網(wǎng)頁任意位置的表單 140
任務(wù)7.3 制作遮罩層上的表單 147
單元小結(jié). 151
習(xí)題. 151
第8 單元 網(wǎng)頁頁眉的構(gòu)建. 153
任務(wù)8.1 制作典型頁眉1 153
任務(wù)8.2 制作典型頁眉2 156
單元小結(jié). 160
習(xí)題. 160
第9 單元 網(wǎng)頁主導(dǎo)航的構(gòu)建. 161
任務(wù)9.1 制作不帶下拉菜單的導(dǎo)航 161
任務(wù)9.2 制作帶下拉菜單的導(dǎo)航 163
單元小結(jié). 167
習(xí)題. 167
第10 單元 網(wǎng)頁橫幅廣告的構(gòu)建 168
任務(wù)10.1 制作窄幅橫幅廣告 168
任務(wù)10.2 制作寬幅橫幅廣告 169
單元小結(jié). 171
習(xí)題. 171
第11 單元 網(wǎng)頁頁腳的構(gòu)建. 172
任務(wù)11.1 制作典型頁腳1. 172
任務(wù)11.2 制作典型頁腳2. 174
單元小結(jié). 178
習(xí)題. 178
4 HTML5+CSS3 網(wǎng)頁布局任務(wù)教程
第12 單元 混合布局的綜合網(wǎng)頁的構(gòu)建 179
任務(wù)12.1 “旅游美食網(wǎng)”首頁的構(gòu)建. 179
任務(wù)12.2 仿“中國知網(wǎng)”首頁的構(gòu)建. 187
單元小結(jié). 204
習(xí)題. 205
知識解讀索引 206