跨平臺(tái)的移動(dòng)Web開(kāi)發(fā)實(shí)戰(zhàn)（HTML5+CSS3）

單元1 跨平臺(tái)的網(wǎng)站首頁(yè)設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)1-1】探析攜程旅行網(wǎng)的首頁(yè)
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)1-2】設(shè)計(jì)蘇寧易購(gòu)網(wǎng)的首頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【任務(wù)1-3】設(shè)計(jì)窮游網(wǎng)的首頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【同步訓(xùn)練】
【任務(wù)1-4】設(shè)計(jì)同程旅游網(wǎng)的首頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【拓展訓(xùn)練】
【任務(wù)1-5】設(shè)計(jì)酷狗音樂(lè)網(wǎng)的首頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【單元小結(jié)】
單元2 文本新聞瀏覽網(wǎng)頁(yè)設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)2-1】探析手機(jī)搜狐網(wǎng)的名站導(dǎo)航網(wǎng)頁(yè)
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)2-2】設(shè)計(jì)手機(jī)搜狐網(wǎng)的站內(nèi)導(dǎo)航網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【任務(wù)2-3】設(shè)計(jì)手機(jī)搜狐網(wǎng)的文本新聞網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【同步訓(xùn)練】
【任務(wù)2-4】設(shè)計(jì)新華網(wǎng)手機(jī)版的網(wǎng)址導(dǎo)航網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【任務(wù)2-5】設(shè)計(jì)新華網(wǎng)手機(jī)版的文本新聞網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【拓展訓(xùn)練】
【任務(wù)2-6】設(shè)計(jì)新華網(wǎng)手機(jī)版的標(biāo)題新聞及導(dǎo)航網(wǎng)頁(yè)
【任務(wù)描述】
【操作提示】
【單元小結(jié)】
單元3 旅游景點(diǎn)推薦網(wǎng)頁(yè)設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)3-1】探析螞蜂窩的推薦旅游目的地網(wǎng)頁(yè)
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)3-2】設(shè)計(jì)去哪兒旅行網(wǎng)的Touch版旅圖網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【同步訓(xùn)練】
【任務(wù)3-3】設(shè)計(jì)攜程旅行網(wǎng)的最佳旅游景區(qū)網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【拓展訓(xùn)練】
【任務(wù)3-4】設(shè)計(jì)路趣網(wǎng)手機(jī)版的熱點(diǎn)景點(diǎn)推薦網(wǎng)頁(yè)
【任務(wù)描述】
【操作提示】
【單元小結(jié)】
單元4 商品信息展示網(wǎng)頁(yè)設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)4-1】探析手機(jī)麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁(yè)
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)4-2】設(shè)計(jì)蘇寧易購(gòu)觸屏版的促銷商品列表網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【任務(wù)4-3】設(shè)計(jì)易購(gòu)網(wǎng)的選用商品列表網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【同步訓(xùn)練】
【任務(wù)4-4】設(shè)計(jì)凡客誠(chéng)品網(wǎng)觸屏版的品牌墻網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【拓展訓(xùn)練】
【任務(wù)4-5】設(shè)計(jì)蘇寧易購(gòu)觸屏版的家用電器精選商品導(dǎo)航網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【單元小結(jié)】
單元5 注冊(cè)登錄與留言網(wǎng)頁(yè)設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)5-1】探析手機(jī)麥包包網(wǎng)的用戶注冊(cè)網(wǎng)頁(yè)
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)5-2】設(shè)計(jì)同程旅游無(wú)線網(wǎng)的會(huì)員登錄網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【任務(wù)5-3】設(shè)計(jì)去哪兒網(wǎng)的意見(jiàn)反饋網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【同步訓(xùn)練】
【任務(wù)5-4】設(shè)計(jì)掌上1號(hào)店的用戶登錄網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【網(wǎng)頁(yè)瀏覽】
【拓展訓(xùn)練】
【任務(wù)5-5】設(shè)計(jì)手機(jī)搜狐網(wǎng)的留言反饋網(wǎng)頁(yè)
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)5-6】設(shè)計(jì)易購(gòu)網(wǎng)的個(gè)性化用戶注冊(cè)網(wǎng)頁(yè)
【任務(wù)描述】
【操作提示】
【單元小結(jié)】
單元6 音樂(lè)視頻網(wǎng)頁(yè)播放設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)6-1】探析基于HTML5的網(wǎng)頁(yè)音樂(lè)播放器之一
【任務(wù)6-2】探析基于HTML5的網(wǎng)頁(yè)視頻播放器之一
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)6-3】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)音樂(lè)播放器之二
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)6-4】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)視頻播放器之二
【任務(wù)描述】
【任務(wù)實(shí)施】
【同步訓(xùn)練】
【任務(wù)6-5】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)音樂(lè)播放器之三
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)6-6】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)音樂(lè)播放器之四
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)6-7】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)視頻播放器之三
【任務(wù)描述】
【任務(wù)實(shí)施】
【拓展訓(xùn)練】
【任務(wù)6-8】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)音樂(lè)播放器之五
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)6-9】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)視頻播放器之四
【任務(wù)描述】
【操作提示】
【任務(wù)6-10】設(shè)計(jì)基于HTML5的網(wǎng)頁(yè)視頻播放器之五
【任務(wù)描述】
【操作提示】
【單元小結(jié)】
單元7 網(wǎng)頁(yè)圖形繪制與游戲設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)7-1】探析網(wǎng)頁(yè)中菊花圖形的繪制
【任務(wù)7-2】探析網(wǎng)頁(yè)中精美掛鐘的繪制
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)7-3】網(wǎng)頁(yè)中繪制各種圖形和文字
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)7-4】設(shè)計(jì)網(wǎng)頁(yè)俄羅斯方塊游戲
【同步訓(xùn)練】
【任務(wù)7-5】網(wǎng)頁(yè)中繪制多種圖形和圖片
【任務(wù)描述】
【任務(wù)實(shí)施】
【拓展訓(xùn)練】
【任務(wù)7-6】網(wǎng)頁(yè)中繪制多個(gè)五角星
【任務(wù)描述】
【操作提示】
【任務(wù)7-7】設(shè)計(jì)html5版連連看網(wǎng)頁(yè)游戲
【任務(wù)描述】
【操作提示】
【單元小結(jié)】
單元8 復(fù)雜樣式與網(wǎng)頁(yè)特效設(shè)計(jì)
【教學(xué)導(dǎo)航】
【實(shí)例探析】
【任務(wù)8-1】探析迷你音樂(lè)播放器面板制作
【任務(wù)8-2】探析純CSS3實(shí)現(xiàn)的焦點(diǎn)圖切換效果
【知識(shí)疏理】
【引導(dǎo)訓(xùn)練】
【任務(wù)8-3】網(wǎng)頁(yè)中繪制陰陽(yáng)圖和五角星
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-4】網(wǎng)頁(yè)中制作圓角按鈕和圓角圖片
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-5】設(shè)計(jì)網(wǎng)頁(yè)中的圓形導(dǎo)航按鈕
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-6】網(wǎng)頁(yè)中實(shí)現(xiàn)圖片拖拽操作
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-7】網(wǎng)頁(yè)中實(shí)現(xiàn)仿Office風(fēng)格的多級(jí)菜單
【任務(wù)描述】
【任務(wù)實(shí)施】
【同步訓(xùn)練】
【任務(wù)8-8】網(wǎng)頁(yè)中繪制各種幾何圖形
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-9】網(wǎng)頁(yè)中實(shí)現(xiàn)超酷導(dǎo)航菜單
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-10】網(wǎng)頁(yè)中模仿蘋(píng)果iPhone的搜索框聚焦變長(zhǎng)效果
【任務(wù)描述】
【任務(wù)實(shí)施】
【任務(wù)8-11】網(wǎng)頁(yè)中實(shí)現(xiàn)拖動(dòng)選擇多張景點(diǎn)圖片
【任務(wù)描述】
【任務(wù)實(shí)施】
【拓展訓(xùn)練】
【任務(wù)8-12】網(wǎng)頁(yè)中實(shí)現(xiàn)相冊(cè)效果
【任務(wù)描述】
【操作提示】
【任務(wù)8-13】網(wǎng)頁(yè)中實(shí)現(xiàn)帶有字體圖標(biāo)效果的下拉導(dǎo)航菜單
【任務(wù)描述】
【操作提示】
【單元小結(jié)】
附錄A HTML5的新特性簡(jiǎn)介
附錄B HTML5的常用標(biāo)簽及其屬性、方法與事件
附錄C CSS的屬性
附錄D CSS的選擇器
參考文獻(xiàn)