本書(shū)以HTML5與CSS3知識(shí)點(diǎn)為主線，以響應(yīng)式布局項(xiàng)目為任務(wù)載體，采用迭代遞增的網(wǎng)頁(yè)設(shè)計(jì)方法，根據(jù)項(xiàng)目需求來(lái)逐步完成任務(wù)，實(shí)現(xiàn)學(xué)習(xí)相關(guān)知識(shí)與動(dòng)手實(shí)操并重的目的。全書(shū)按照網(wǎng)頁(yè)設(shè)計(jì)的步驟，圍繞HTML5與CSS3重要特性編寫(xiě)而成，通過(guò)詳細(xì)講解各個(gè)任務(wù)的制作來(lái)對(duì)知識(shí)點(diǎn)進(jìn)行總結(jié)，使讀者更詳細(xì)地了解網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù)。本書(shū)以學(xué)習(xí)者為中心，不僅強(qiáng)調(diào)基本技能的訓(xùn)練、基礎(chǔ)知識(shí)的夯實(shí)，還注重拓展能力的培養(yǎng)，所以?xún)?nèi)容編排方式為“學(xué)習(xí)目標(biāo)、學(xué)習(xí)路徑、項(xiàng)目描述、項(xiàng)目實(shí)施、項(xiàng)目拓展、項(xiàng)目總結(jié)、英語(yǔ)角、項(xiàng)目習(xí)題”，內(nèi)容翔實(shí)、難度漸進(jìn)、結(jié)構(gòu)清晰、語(yǔ)言準(zhǔn)確，使讀者能夠?qū)W以致用。本書(shū)既可作為高職院校和應(yīng)用型大學(xué)網(wǎng)頁(yè)設(shè)計(jì)課程的教材，也可作為信息技術(shù)培訓(xùn)機(jī)構(gòu)的培訓(xùn)用書(shū)，還可以作為網(wǎng)頁(yè)設(shè)計(jì)與制作人員的參考用書(shū)。

項(xiàng)目1  服裝品牌墻界面設(shè)計(jì) 1
學(xué)習(xí)目標(biāo) 1
學(xué)習(xí)路徑 1
項(xiàng)目描述 1
項(xiàng)目技能 3
1．1  HTML5概述 3
1．2  HTML5基礎(chǔ) 3
1．3  網(wǎng)頁(yè)編輯器及環(huán)境 5
1．4  CSS3初體驗(yàn) 7
1．5  CSS樣式表 8
1．6  CSS選擇器 11
項(xiàng)目實(shí)施 16
項(xiàng)目拓展 20
項(xiàng)目總結(jié) 22
英語(yǔ)角 22
項(xiàng)目習(xí)題 22
項(xiàng)目2  新浪微博導(dǎo)航界面設(shè)計(jì) 24
學(xué)習(xí)目標(biāo) 24
學(xué)習(xí)路徑 24
項(xiàng)目描述 24
項(xiàng)目技能 25
2．1  HTML5文本標(biāo)簽 26
2．2  CSS文本屬性 30
2．3  CSS字體屬性 38
2．4  CSS顏色 42
2．5  CSS導(dǎo)航欄 43
2．6  固定布局和流動(dòng)布局 45
項(xiàng)目實(shí)施 46
項(xiàng)目拓展 53
項(xiàng)目總結(jié) 54
英語(yǔ)角 55
項(xiàng)目習(xí)題 55
項(xiàng)目3  同城旅游主界面設(shè)計(jì) 56
學(xué)習(xí)目標(biāo) 56
學(xué)習(xí)路徑 56
項(xiàng)目描述 56
項(xiàng)目技能 57
3．1  網(wǎng)頁(yè)中支持的圖片格式 57
3．2  HTML5圖像標(biāo)簽 58
3．3  設(shè)置背景屬性 60
3．4  盒子模型 67
3．5  CSS3新增邊框?qū)傩?72
3．6  HTML5圖像過(guò)渡和變形屬性 76
任務(wù)實(shí)施 80
任務(wù)拓展 88
任務(wù)總結(jié) 90
英語(yǔ)角 90
任務(wù)習(xí)題 91
項(xiàng)目4  小快魚(yú)旗艦店主界面設(shè)計(jì) 92
學(xué)習(xí)目標(biāo) 92
學(xué)習(xí)路徑 92
項(xiàng)目描述 92
項(xiàng)目技能 94
4．1  列表的作用 94
4．2  HTML5文本列表標(biāo)簽 94
4．3  CSS列表標(biāo)簽屬性 97
4．4  HTML5創(chuàng)建表格 101
4．5  CSS定位 105
項(xiàng)目實(shí)施 110
項(xiàng)目拓展 119
項(xiàng)目總結(jié) 120
英語(yǔ)角 121
任務(wù)習(xí)題 121
項(xiàng)目5  同城旅游用戶(hù)注冊(cè)界面設(shè)計(jì) 122
學(xué)習(xí)目標(biāo) 122
學(xué)習(xí)路徑 122
項(xiàng)目描述 122
項(xiàng)目技能 123
5．1  表單的概述 123
5．2  表單基本元素的使用 125
5．3  HTML5新增的input屬性 135
項(xiàng)目實(shí)施 142
項(xiàng)目拓展 146
項(xiàng)目總結(jié) 149
英語(yǔ)角 149
任務(wù)習(xí)題 149
項(xiàng)目6  天天動(dòng)聽(tīng)播放器界面設(shè)計(jì) 150
學(xué)習(xí)目標(biāo) 150
學(xué)習(xí)路徑 150
項(xiàng)目描述 150
項(xiàng)目技能 151
6．1  audio標(biāo)簽概述 151
6．2  audio標(biāo)簽的屬性 153
6．3  video標(biāo)簽概述 153
6．4  video標(biāo)簽的屬性 154
項(xiàng)目實(shí)施 155
項(xiàng)目拓展 157
項(xiàng)目總結(jié) 158
英語(yǔ)角 158
任務(wù)習(xí)題 158
項(xiàng)目7  使用HTML5繪制火柴棒人物 160
學(xué)習(xí)目標(biāo) 160
學(xué)習(xí)路徑 160
項(xiàng)目描述 160
項(xiàng)目技能 161
7．1  Canvas概述 161
7．2  Canvas繪制基本圖形 162
7．3  繪制漸變圖形 166
7．4  繪制變形圖形 169
7．5  圖形組合 175
7．6  使用圖像 176
7．7  繪制文字 177
7．8  SVG 179
項(xiàng)目實(shí)施 179
項(xiàng)目拓展 182
項(xiàng)目總結(jié) 184
英語(yǔ)角 184
項(xiàng)目習(xí)題 184
項(xiàng)目8  HTML5+CSS3開(kāi)發(fā)購(gòu)物網(wǎng)首頁(yè) 186
學(xué)習(xí)目標(biāo) 186
學(xué)習(xí)路徑 186
項(xiàng)目描述 186
項(xiàng)目規(guī)劃 187
8．1  網(wǎng)站定位 187
8．2  需求分析 188
8．3  網(wǎng)站的風(fēng)格設(shè)計(jì) 188
項(xiàng)目實(shí)施 188
項(xiàng)目拓展 202
項(xiàng)目總結(jié) 204
附錄  參考答案 205
參考文獻(xiàn) 206