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

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