第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 ...................................................................