HTML5+CSS3移動(dòng)Web開發(fā)實(shí)戰(zhàn)

單元1　跨平臺(tái)的網(wǎng)站首頁設(shè)計(jì)　1
教學(xué)導(dǎo)航　1
實(shí)例探析　1
任務(wù)1-1　探析攜程旅行網(wǎng)的首頁　1
【效果展示】　1
【網(wǎng)頁探析】　2
知識(shí)梳理　7
引導(dǎo)訓(xùn)練　18
任務(wù)1-2　設(shè)計(jì)蘇寧易購網(wǎng)的首頁　18
【任務(wù)描述】　18
【任務(wù)實(shí)施】　18
【網(wǎng)頁瀏覽】　24
任務(wù)1-3　設(shè)計(jì)窮游網(wǎng)的首頁　24
【任務(wù)描述】　24
【任務(wù)實(shí)施】　24
【網(wǎng)頁瀏覽】　32
同步訓(xùn)練　32
任務(wù)1-4　設(shè)計(jì)同程旅游網(wǎng)的首頁　32
【任務(wù)描述】　32
【任務(wù)實(shí)施】　33
【網(wǎng)頁瀏覽】　36
拓展訓(xùn)練　36
任務(wù)1-5　設(shè)計(jì)酷狗音樂網(wǎng)的首頁　36
【任務(wù)描述】　36
【任務(wù)實(shí)施】　36
單元小結(jié)　38
單元2　文本新聞瀏覽網(wǎng)頁設(shè)計(jì)　39
教學(xué)導(dǎo)航　39
實(shí)例探析　39
任務(wù)2-1　探析手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁　39
【效果展示】　39
【網(wǎng)頁探析】　40
知識(shí)梳理　45
引導(dǎo)訓(xùn)練　54
任務(wù)2-2　設(shè)計(jì)手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁　54
【任務(wù)描述】　54
【任務(wù)實(shí)施】　55
【網(wǎng)頁瀏覽】　60
任務(wù)2-3　設(shè)計(jì)手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁　60
【任務(wù)描述】　60
【任務(wù)實(shí)施】　61
【網(wǎng)頁瀏覽】　65
同步訓(xùn)練　65
任務(wù)2-4　設(shè)計(jì)新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁　65
【任務(wù)描述】　65
【任務(wù)實(shí)施】　65
【網(wǎng)頁瀏覽】　69
任務(wù)2-5　設(shè)計(jì)新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁　69
【任務(wù)描述】　69
【任務(wù)實(shí)施】　69
【網(wǎng)頁瀏覽】　73
拓展訓(xùn)練　73
任務(wù)2-6　設(shè)計(jì)新華網(wǎng)手機(jī)版的標(biāo)題新聞及導(dǎo)航網(wǎng)頁　73
【任務(wù)描述】　73
【操作提示】　73
單元小結(jié)　75
單元3　旅游景點(diǎn)推薦網(wǎng)頁設(shè)計(jì)　76
教學(xué)導(dǎo)航　76
實(shí)例探析　76
任務(wù)3-1　探析螞蜂窩的推薦旅游目的地網(wǎng)頁　76
【效果展示】　76
【網(wǎng)頁探析】　76
知識(shí)梳理　82
引導(dǎo)訓(xùn)練　86
任務(wù)3-2　設(shè)計(jì)去哪兒旅行網(wǎng)的Touch版旅圖網(wǎng)頁　86
【任務(wù)描述】　86
【任務(wù)實(shí)施】　86
【網(wǎng)頁瀏覽】　95
同步訓(xùn)練　95
任務(wù)3-3　設(shè)計(jì)攜程旅行網(wǎng)的最佳旅游景區(qū)網(wǎng)頁　95
【任務(wù)描述】　95
【任務(wù)實(shí)施】　96
【網(wǎng)頁瀏覽】　98
拓展訓(xùn)練　99
任務(wù)3-4　設(shè)計(jì)路趣網(wǎng)手機(jī)版的熱點(diǎn)景點(diǎn)推薦網(wǎng)頁　99
【任務(wù)描述】　99
【操作提示】　99
單元小結(jié)　101
單元4　商品信息展示網(wǎng)頁設(shè)計(jì)　102
教學(xué)導(dǎo)航　102
實(shí)例探析　102
任務(wù)4-1　探析麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁　102
【效果展示】　102
【網(wǎng)頁探析】　103
知識(shí)梳理　111
引導(dǎo)訓(xùn)練　117
任務(wù)4-2　設(shè)計(jì)蘇寧易購觸屏版的促銷商品列表網(wǎng)頁　117
【任務(wù)描述】　117
【任務(wù)實(shí)施】　118
【網(wǎng)頁瀏覽】　123
任務(wù)4-3　設(shè)計(jì)易購網(wǎng)的選用商品列表網(wǎng)頁　123
【任務(wù)描述】　123
【任務(wù)實(shí)施】　123
【網(wǎng)頁瀏覽】　126
同步訓(xùn)練　127
任務(wù)4-4　設(shè)計(jì)凡客誠品網(wǎng)觸屏版的品牌墻網(wǎng)頁　127
【任務(wù)描述】　127
【任務(wù)實(shí)施】　127
【網(wǎng)頁瀏覽】　131
拓展訓(xùn)練　131
任務(wù)4-5　設(shè)計(jì)蘇寧易購觸屏版的家用電器精選商品導(dǎo)航網(wǎng)頁　131
【任務(wù)描述】　131
【任務(wù)實(shí)施】　131
單元小結(jié)　132
單元5　注冊登錄與留言網(wǎng)頁設(shè)計(jì)　133
教學(xué)導(dǎo)航　133
實(shí)例探析　133
任務(wù)5-1　探析手機(jī)麥包包網(wǎng)的用戶注冊網(wǎng)頁　133
【效果展示】　133
【網(wǎng)頁探析】　133
知識(shí)梳理　137
引導(dǎo)訓(xùn)練　142
任務(wù)5-2　設(shè)計(jì)同程旅游無線網(wǎng)的會(huì)員登錄網(wǎng)頁　142
【任務(wù)描述】　142
【任務(wù)實(shí)施】　142
【網(wǎng)頁瀏覽】　147
任務(wù)5-3　設(shè)計(jì)去哪兒網(wǎng)的意見反饋網(wǎng)頁　147
【任務(wù)描述】　147
【任務(wù)實(shí)施】　147
【網(wǎng)頁瀏覽】　151
同步訓(xùn)練　151
任務(wù)5-4　設(shè)計(jì)掌上1號(hào)店的用戶登錄網(wǎng)頁　151
【任務(wù)描述】　151
【任務(wù)實(shí)施】　151
【網(wǎng)頁瀏覽】　155
拓展訓(xùn)練　156
任務(wù)5-5　設(shè)計(jì)手機(jī)搜狐網(wǎng)的留言反饋網(wǎng)頁　156
【任務(wù)描述】　156
【任務(wù)實(shí)施】　156
任務(wù)5-6　設(shè)計(jì)易購網(wǎng)的個(gè)性化用戶注冊網(wǎng)頁　159
【任務(wù)描述】　159
【操作提示】　159
單元小結(jié)　161
單元6　音樂視頻播放網(wǎng)頁設(shè)計(jì)　162
教學(xué)導(dǎo)航　162
實(shí)例探析　162
任務(wù)6-1　探析基于HTML5的網(wǎng)頁音樂播放器之一　162
【效果展示】　162
【網(wǎng)頁探析】　163
任務(wù)6-2　探析基于HTML5的網(wǎng)頁視頻播放器之一　170
【效果展示】　170
【網(wǎng)頁探析】　170
知識(shí)梳理　171
引導(dǎo)訓(xùn)練　172
任務(wù)6-3　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之二　172
【任務(wù)描述】　172
【任務(wù)實(shí)施】　173
任務(wù)6-4　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之二　173
【任務(wù)描述】　173
【任務(wù)實(shí)施】　174
同步訓(xùn)練　177
任務(wù)6-5　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之三　177
【任務(wù)描述】　177
【任務(wù)實(shí)施】　177
任務(wù)6-6　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之四　178
【任務(wù)描述】　178
【任務(wù)實(shí)施】　178
任務(wù)6-7　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之三　180
【任務(wù)描述】　180
【任務(wù)實(shí)施】　180
拓展訓(xùn)練　181
任務(wù)6-8　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之五　181
【任務(wù)描述】　181
【任務(wù)實(shí)施】　182
任務(wù)6-9　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之四　187
【任務(wù)描述】　187
【操作提示】　187
任務(wù)6-10　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之五　188
【任務(wù)描述】　188
【操作提示】　188
單元小結(jié)　189
單元7　網(wǎng)頁圖形繪制與游戲設(shè)計(jì)　190
教學(xué)導(dǎo)航　190
實(shí)例探析　190
任務(wù)7-1　在網(wǎng)頁中繪制菊花圖形　190
【效果展示】　190
【網(wǎng)頁探析】　191
任務(wù)7-2　在網(wǎng)頁中繪制精美掛鐘　192
【效果展示】　192
【網(wǎng)頁探析】　192
知識(shí)梳理　194
引導(dǎo)訓(xùn)練　201
任務(wù)7-3　在網(wǎng)頁中繪制各種圖形和文字　201
【任務(wù)描述】　201
【任務(wù)實(shí)施】　202
任務(wù)7-4　設(shè)計(jì)網(wǎng)頁俄羅斯方塊游戲　207
【任務(wù)描述】　207
【網(wǎng)頁探析】　207
同步訓(xùn)練　215
任務(wù)7-5　在網(wǎng)頁中繪制多種圖形和圖片　215
【任務(wù)描述】　215
【任務(wù)實(shí)施】　216
拓展訓(xùn)練　219
任務(wù)7-6　在網(wǎng)頁中繪制多個(gè)五角星　219
【任務(wù)描述】　219
【操作提示】　219
任務(wù)7-7　設(shè)計(jì)HTML5版連連看網(wǎng)頁游戲　220
【任務(wù)描述】　220
【操作提示】　221
單元小結(jié)　224
單元8　復(fù)雜樣式與網(wǎng)頁特效設(shè)計(jì)　225
教學(xué)導(dǎo)航　225
實(shí)例探析　225
任務(wù)8-1　制作迷你音樂播放器面板　225
【效果展示】　225
【網(wǎng)頁探析】　226
任務(wù)8-2　探析純CSS3實(shí)現(xiàn)的焦點(diǎn)圖切換效果　228
【效果展示】　228
【網(wǎng)頁探析】　229
知識(shí)梳理　232
引導(dǎo)訓(xùn)練　239
任務(wù)8-3　在網(wǎng)頁中繪制陰陽圖和五角星　239
【任務(wù)描述】　239
【任務(wù)實(shí)施】　239
任務(wù)8-4　在網(wǎng)頁中制作圓角按鈕和圓角圖片　241
【任務(wù)描述】　241
【任務(wù)實(shí)施】　241
任務(wù)8-5　設(shè)計(jì)網(wǎng)頁中的圓形導(dǎo)航
按鈕　244
【任務(wù)描述】　244
【任務(wù)實(shí)施】　245
任務(wù)8-6　在網(wǎng)頁中實(shí)現(xiàn)圖片拖動(dòng)操作　247
【任務(wù)描述】　247
【任務(wù)實(shí)施】　247
任務(wù)8-7　在網(wǎng)頁中設(shè)計(jì)仿Office風(fēng)格
的多級(jí)菜單　249
【任務(wù)描述】　249
【任務(wù)實(shí)施】　249
同步訓(xùn)練　253
任務(wù)8-8　在網(wǎng)頁中繪制各種幾何圖形　253
【任務(wù)描述】　253
【任務(wù)實(shí)施】　253
任務(wù)8-9　在網(wǎng)頁中設(shè)計(jì)超酷導(dǎo)航菜單　255
【任務(wù)描述】　255
【任務(wù)實(shí)施】　255
任務(wù)8-10　在網(wǎng)頁中模仿蘋果iPhone的搜索框聚焦變長效果　258
【任務(wù)描述】　258
【任務(wù)實(shí)施】　258
拓展訓(xùn)練　259
任務(wù)8-11　在網(wǎng)頁中實(shí)現(xiàn)相冊效果　259
【任務(wù)描述】　259
【操作提示】　260
任務(wù)8-12　在網(wǎng)頁中設(shè)計(jì)帶有字體圖標(biāo)效果的下拉導(dǎo)航菜單　261
【任務(wù)描述】　261
【操作提示】　262
單元小結(jié)　264
附錄A　HTML5的常用標(biāo)簽及其屬性、方法與事件　265
附錄B　CSS的屬性　274
參考文獻(xiàn)　281