第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 常見(jiàn)元素............................................................................ 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í)無(wú)序列表......................................................................................................... 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ì)稱(chēng)欄目的制作......................................................................... 73
任務(wù)4.4.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 74
任務(wù)4.4.2 兩列對(duì)稱(chēng)欄目樣式的實(shí)現(xiàn)............................................................................ 78
任務(wù)4.5 學(xué)院首頁(yè)三列非對(duì)稱(chēng)欄目的制作...................................................................... 81
任務(wù)4.5.1 網(wǎng)頁(yè)結(jié)構(gòu)和基本樣式的實(shí)現(xiàn)........................................................................ 82
任務(wù)4.5.2 三列非對(duì)稱(chēng)欄目樣式的實(shí)現(xiàn)........................................................................ 85
任務(wù)4.6 專(zhuān)業(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ì)稱(chēng)欄目插圖............................................................................. 98
任務(wù)5.2 學(xué)院首頁(yè)三列非對(duì)稱(chēng)欄目插圖....................................................................... 101
任務(wù)5.3 F 式布局、左圖右文............................................................................................. 106
任務(wù)5.4 兩列布局、上圖下文............................................................................................ 109
任務(wù)5.5 文字環(huán)繞圖片1 ...................................................................