單元1　跨平臺的網(wǎng)站首頁設(shè)計(jì)　1 【教學(xué)導(dǎo)航】　1 【實(shí)例探析】　2 任務(wù)1-1　探析攜程旅行網(wǎng)的首頁　2 效果展示　2 網(wǎng)頁探析　2 【知識梳理】　7 【引導(dǎo)訓(xùn)練】　18 任務(wù)1-2　設(shè)計(jì)蘇寧易購網(wǎng)的首頁　18 任務(wù)描述　18 任務(wù)實(shí)施　19 網(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í)施　32 網(wǎng)頁瀏覽　35 【拓展訓(xùn)練】　35 任務(wù)1-5　設(shè)計(jì)酷狗音樂網(wǎng)的首頁　35 任務(wù)描述　35 任務(wù)實(shí)施　35 【單元小結(jié)】　36 單元2　文本新聞瀏覽網(wǎng)頁設(shè)計(jì)　37 【教學(xué)導(dǎo)航】　37 【實(shí)例探析】　38 任務(wù)2-1　探析手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁　38 效果展示　38 網(wǎng)頁探析　38 【知識梳理】　43 【引導(dǎo)訓(xùn)練】　52 任務(wù)2-2　設(shè)計(jì)手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁　52 任務(wù)描述　52 任務(wù)實(shí)施　53 網(wǎng)頁瀏覽　58 任務(wù)2-3　設(shè)計(jì)手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁　58 任務(wù)描述　58 任務(wù)實(shí)施　58 網(wǎng)頁瀏覽　62 【同步訓(xùn)練】　62 任務(wù)2-4　設(shè)計(jì)新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁　62 任務(wù)描述　62 任務(wù)實(shí)施　62 網(wǎng)頁瀏覽　65 任務(wù)2-5　設(shè)計(jì)新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁　65 任務(wù)描述　65 任務(wù)實(shí)施　66 網(wǎng)頁瀏覽　69 【拓展訓(xùn)練】　69 任務(wù)2-6　設(shè)計(jì)新華網(wǎng)手機(jī)版的標(biāo)題新聞及導(dǎo)航網(wǎng)頁　69 任務(wù)描述　69 操作提示　69 【單元小結(jié)】　71 單元3　旅游景點(diǎn)推薦網(wǎng)頁設(shè)計(jì)　72 【教學(xué)導(dǎo)航】　72 【實(shí)例探析】　73 任務(wù)3-1　探析螞蜂窩的推薦旅游目的地網(wǎng)頁　73 效果展示　73 網(wǎng)頁探析　73 【知識梳理】　77 【引導(dǎo)訓(xùn)練】　81 任務(wù)3-2　設(shè)計(jì)去哪兒旅行網(wǎng)的觸屏版旅圖網(wǎng)頁　81 任務(wù)描述　81 任務(wù)實(shí)施　82 網(wǎng)頁瀏覽　89 【同步訓(xùn)練】　89 任務(wù)3-3　設(shè)計(jì)攜程旅行網(wǎng)的最佳旅游景區(qū)網(wǎng)頁　89 任務(wù)描述　89 任務(wù)實(shí)施　90 網(wǎng)頁瀏覽　92 【拓展訓(xùn)練】　92 任務(wù)3-4　設(shè)計(jì)路趣網(wǎng)手機(jī)版的熱點(diǎn)景點(diǎn)推薦網(wǎng)頁　92 任務(wù)描述　92 操作提示　92 【單元小結(jié)】　94 單元4　商品信息展示網(wǎng)頁設(shè)計(jì)　95 【教學(xué)導(dǎo)航】　95 【實(shí)例探析】　96 任務(wù)4-1　探析麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁　96 效果展示　96 網(wǎng)頁探析　96 【知識梳理】　103 【引導(dǎo)訓(xùn)練】　110 任務(wù)4-2　設(shè)計(jì)蘇寧易購觸屏版的促銷商品列表網(wǎng)頁　110 任務(wù)描述　110 任務(wù)實(shí)施　111 網(wǎng)頁瀏覽　116 任務(wù)4-3　設(shè)計(jì)易購網(wǎng)的選用商品列表網(wǎng)頁　116 任務(wù)描述　116 任務(wù)實(shí)施　116 網(wǎng)頁瀏覽　119 【同步訓(xùn)練】　119 任務(wù)4-4　設(shè)計(jì)凡客誠品網(wǎng)觸屏版的品牌墻網(wǎng)頁　119 任務(wù)描述　119 任務(wù)實(shí)施　119 網(wǎng)頁瀏覽　123 【拓展訓(xùn)練】　123 任務(wù)4-5　設(shè)計(jì)蘇寧易購觸屏版的家用電器精選商品導(dǎo)航網(wǎng)頁　123 任務(wù)描述　123 任務(wù)實(shí)施　124 【單元小結(jié)】　125 單元5　注冊登錄與留言網(wǎng)頁設(shè)計(jì)　126 【教學(xué)導(dǎo)航】　126 【實(shí)例探析】　127 任務(wù)5-1　探析手機(jī)麥包包網(wǎng)的用戶注冊網(wǎng)頁　127 效果展示　127 網(wǎng)頁探析　127 【知識梳理】　130 【引導(dǎo)訓(xùn)練】　135 任務(wù)5-2　設(shè)計(jì)同程旅游無線網(wǎng)的會員登錄網(wǎng)頁　135 任務(wù)描述　135 任務(wù)實(shí)施　135 網(wǎng)頁瀏覽　140 任務(wù)5-3　設(shè)計(jì)去哪兒網(wǎng)的意見反饋網(wǎng)頁　140 任務(wù)描述　140 任務(wù)實(shí)施　140 網(wǎng)頁瀏覽　144 【同步訓(xùn)練】　144 任務(wù)5-4　設(shè)計(jì)掌上1號店的用戶登錄網(wǎng)頁　144 任務(wù)描述　144 任務(wù)實(shí)施　144 網(wǎng)頁瀏覽　148 【拓展訓(xùn)練】　148 任務(wù)5-5　設(shè)計(jì)手機(jī)搜狐網(wǎng)的留言反饋網(wǎng)頁　148 任務(wù)描述　148 任務(wù)實(shí)施　148 任務(wù)5-6　設(shè)計(jì)易購網(wǎng)的個(gè)性化用戶注冊網(wǎng)頁　151 任務(wù)描述　151 操作提示　151 【單元小結(jié)】　152 單元6　音樂視頻播放網(wǎng)頁設(shè)計(jì)　153 【教學(xué)導(dǎo)航】　153 【實(shí)例探析】　154 任務(wù)6-1　探析基于HTML5的網(wǎng)頁音樂播放器　154 效果展示　154 網(wǎng)頁探析　154 任務(wù)6-2　探析基于HTML5的網(wǎng)頁視頻播放器　160 效果展示　160 網(wǎng)頁探析　160 【知識梳理】　161 【引導(dǎo)訓(xùn)練】　163 任務(wù)6-3　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之一　163 任務(wù)描述　163 任務(wù)實(shí)施　163 任務(wù)6-4　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之一　164 任務(wù)描述　164 任務(wù)實(shí)施　164 【同步訓(xùn)練】　167 任務(wù)6-5　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之二/　167 任務(wù)描述　167 任務(wù)實(shí)施　167 任務(wù)6-6　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之三　168 任務(wù)描述　168 任務(wù)實(shí)施　168 任務(wù)6-7　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之二　170 任務(wù)描述　170 任務(wù)實(shí)施　170 【拓展訓(xùn)練】　171 任務(wù)6-8　設(shè)計(jì)基于HTML5的網(wǎng)頁音樂播放器之四　171 任務(wù)描述　171 任務(wù)實(shí)施　172 任務(wù)6-9　設(shè)計(jì)基于HTML5的網(wǎng)頁視頻播放器之三　176 任務(wù)描述　176 操作提示　176 【單元小結(jié)】　176 單元7　網(wǎng)頁圖形繪制與游戲設(shè)計(jì)　177 【教學(xué)導(dǎo)航】　177 【實(shí)例探析】　178 任務(wù)7-1　在網(wǎng)頁中繪制菊花圖形　178 效果展示　178 網(wǎng)頁探析　178 任務(wù)7-2　在網(wǎng)頁中繪制精美掛鐘　179 效果展示　179 網(wǎng)頁探析　179 【知識梳理】　182 【引導(dǎo)訓(xùn)練】　189 任務(wù)7-3　在網(wǎng)頁中繪制各種圖形和文字　189 任務(wù)描述　189 任務(wù)實(shí)施　190 任務(wù)7-4　設(shè)計(jì)網(wǎng)頁俄羅斯方塊游戲　195 任務(wù)描述　195 網(wǎng)頁探析　195 【同步訓(xùn)練】　204 任務(wù)7-5　在網(wǎng)頁中繪制多種圖形和圖片　204 任務(wù)描述　204 任務(wù)實(shí)施　204 【拓展訓(xùn)練】　207 任務(wù)7-6　在網(wǎng)頁中繪制多個(gè)五角星　207 任務(wù)描述　207 操作提示　207 任務(wù)7-7　設(shè)計(jì)HTML5版連連看網(wǎng)頁游戲　209 任務(wù)描述　209 操作提示　209 【單元小結(jié)】　212 單元8　復(fù)雜樣式與網(wǎng)頁特效設(shè)計(jì)　213 【教學(xué)導(dǎo)航】　213 【實(shí)例探析】　214 任務(wù)8-1　制作迷你音樂播放器面板　214 效果展示　214 網(wǎng)頁探析　214 任務(wù)8-2　探析純CSS3實(shí)現(xiàn)的焦點(diǎn)圖切換效果　216 效果展示　216 網(wǎng)頁探析　217 【知識梳理】　220 【引導(dǎo)訓(xùn)練】　228 任務(wù)8-3　在網(wǎng)頁中繪制陰陽圖和五角星　228 任務(wù)描述　228 任務(wù)實(shí)施　228 任務(wù)8-4　在網(wǎng)頁中制作圓角按鈕和圓角圖片　230 任務(wù)描述　230 任務(wù)實(shí)施　230 任務(wù)8-5　設(shè)計(jì)網(wǎng)頁中的圓形導(dǎo)航按鈕　233 任務(wù)描述　233 任務(wù)實(shí)施　233 任務(wù)8-6　在網(wǎng)頁中實(shí)現(xiàn)圖片拖動(dòng)操作　235 任務(wù)描述　235 任務(wù)實(shí)施　235 任務(wù)8-7　在網(wǎng)頁中設(shè)計(jì)仿Office風(fēng)格的多級菜單　237 任務(wù)描述　237 任務(wù)實(shí)施　238 【同步訓(xùn)練】　240 任務(wù)8-8　在網(wǎng)頁中繪制各種幾何圖形　240 任務(wù)描述　240 任務(wù)實(shí)施　241 任務(wù)8-9　在網(wǎng)頁中設(shè)計(jì)超酷導(dǎo)航菜單　243 任務(wù)描述　243 任務(wù)實(shí)施　243 任務(wù)8-10　在網(wǎng)頁中模仿蘋果iPhone的搜索框聚焦變長效果　245 任務(wù)描述　245 任務(wù)實(shí)施　245 【拓展訓(xùn)練】　246 任務(wù)8-11　在網(wǎng)頁中實(shí)現(xiàn)相冊效果　246 任務(wù)描述　246 操作提示　247 任務(wù)8-12　在網(wǎng)頁中設(shè)計(jì)帶有字體圖標(biāo)效果的下拉導(dǎo)航菜單　248 任務(wù)描述　248 操作提示　248 【單元小結(jié)】　250 附錄A　HTML5的常用標(biāo)簽及其屬性、方法與事件　251 附錄Ｂ　CSS的屬性　261 參考文獻(xiàn)　268