單元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　注冊(cè)登錄與留言網(wǎng)頁設(shè)計(jì)　133 教學(xué)導(dǎo)航　133 實(shí)例探析　133 任務(wù)5-1　探析手機(jī)麥包包網(wǎng)的用戶注冊(cè)網(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è)性化用戶注冊(cè)網(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的搜索框聚焦變長(zhǎng)效果　258 【任務(wù)描述】　258 【任務(wù)實(shí)施】　258 拓展訓(xùn)練　259 任務(wù)8-11　在網(wǎng)頁中實(shí)現(xiàn)相冊(cè)效果　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