首頁制作

授課教案

課程名稱《網(wǎng)頁設(shè)計(jì)與制作》任課教師陶宏1課時(shí)

項(xiàng)目名稱制作移動端網(wǎng)頁課程類型新課授課時(shí)間

2020.6.12

項(xiàng)目單元

名稱

制作移動端電商網(wǎng)站首頁授課班級18電商3授課地點(diǎn)電商大機(jī)房

教學(xué)目標(biāo)

知識目標(biāo)

（1）了解移動端電商首頁制作布局和模塊。

（2）利用表格布局制作移動網(wǎng)站首頁。

技能目標(biāo)

（1）制作電商移動端首頁。

（2）制作輪播圖。

情感態(tài)度

價(jià)值觀

培養(yǎng)學(xué)生認(rèn)真、細(xì)致、嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度

教材分析

本課程選用高等教育出版社的于麗娟主編的《網(wǎng)頁設(shè)計(jì)與制作》課本中的項(xiàng)目8

——《制作移動端網(wǎng)頁》，隨著移動端瀏覽量的暴增，其流量已經(jīng)超多PC端，這代

表著移動互聯(lián)網(wǎng)已經(jīng)到來，移動優(yōu)先現(xiàn)在已經(jīng)是網(wǎng)頁設(shè)計(jì)和制作者的第一理念，是網(wǎng)

頁設(shè)計(jì)制作課程的點(diǎn)睛之筆，網(wǎng)頁綜合應(yīng)用在移動端的一個(gè)項(xiàng)目。

學(xué)情分析

本課授課對象為18電商（3）班的學(xué)生，他們生性活潑，愛玩愛動，專注力不夠，

對電子商務(wù)專業(yè)1年多的學(xué)習(xí)，已經(jīng)對電商專業(yè)知識有了一定的基礎(chǔ)，對網(wǎng)頁設(shè)計(jì)制

作也已經(jīng)有了一定的理論知識和操作技能，能夠制作基礎(chǔ)的PC端電商網(wǎng)頁，但是對

于移動端的電商網(wǎng)站網(wǎng)頁制作還比較陌生，以前的項(xiàng)目沒有接觸過移動網(wǎng)頁設(shè)計(jì)制

作，因此本次課要通過給學(xué)生展示“優(yōu)蜜母嬰”PC端網(wǎng)站首頁的圖片，利用設(shè)計(jì)完

成的草圖后制作成移動端電商網(wǎng)站“優(yōu)蜜母嬰”首頁，并通過FTP上傳服務(wù)器，可以

通過HTTP訪問網(wǎng)頁，達(dá)到融會貫通項(xiàng)目7知識技能的目的。

教學(xué)重點(diǎn)

和難點(diǎn)

重點(diǎn)利用表格合理布局制作移動電商網(wǎng)站首頁。

難點(diǎn)

移動網(wǎng)站輪播圖的制作。

教學(xué)方法

項(xiàng)目展示法、講解法，把知識點(diǎn)融入到項(xiàng)目中講解。

教學(xué)實(shí)施教師活動學(xué)生活動

情景導(dǎo)入

引任務(wù)

導(dǎo)入課程：

查看《45次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)

告》，說明移動互聯(lián)網(wǎng)在蓬勃發(fā)展。

提問學(xué)生：回憶移動網(wǎng)站網(wǎng)頁和PC端網(wǎng)站

網(wǎng)頁的結(jié)構(gòu)特點(diǎn)，對比2種網(wǎng)站首頁布局特點(diǎn)對

照概括。（5）

學(xué)生回答，參考p260的表格回答

移動網(wǎng)站首頁的布局模塊。

回顧檢測

明要點(diǎn)

展示淘寶京東的移動端的網(wǎng)頁圖片，分析布

局要素，參看優(yōu)蜜母嬰的PC端的網(wǎng)頁，提煉需

要首頁布局要素。（3）

觀看淘寶京東的移動端網(wǎng)頁，通過

分析掌握移動網(wǎng)頁的布局要求，根據(jù)優(yōu)

蜜母嬰的PC端網(wǎng)頁設(shè)計(jì)移動端首頁。

移動網(wǎng)站首頁尺寸在Dreamwaver的下部可

以直接設(shè)置480*800（按照Android系統(tǒng)尺寸要

學(xué)生使用Dreamwaver新建網(wǎng)頁，

框架可以使用默認(rèn)移動端網(wǎng)頁模板，查

求），要注意預(yù)覽效果和網(wǎng)站發(fā)布的測試（2）看測試。

任務(wù)實(shí)施

提技能

根據(jù)優(yōu)蜜母嬰的PC端的布局，利用圖片，

制作移動端首頁。（要求使用表格的方式制作首

頁布局，要求使用輪播圖）（20）

學(xué)生利用老師分發(fā)的素材包，參考

京東淘寶移動網(wǎng)頁和優(yōu)蜜母嬰的PC端

網(wǎng)頁，設(shè)計(jì)制作移動端的優(yōu)蜜母嬰首

頁。

上傳網(wǎng)頁

評作品

教師機(jī)設(shè)置IIS服務(wù)，并打開FTP，讓學(xué)生

自己上傳網(wǎng)頁，并且打開網(wǎng)頁，預(yù)覽調(diào)試。

學(xué)生制作好的移動網(wǎng)站首頁整個(gè)

文件夾上傳到服務(wù)器上。

要求學(xué)生在瀏覽器內(nèi)測試網(wǎng)頁，查看網(wǎng)頁能

不能打開，網(wǎng)頁有沒有變形，有沒有圖片？（5）

學(xué)生通過瀏覽器打開上傳的移動

網(wǎng)頁，同時(shí)調(diào)整測試。調(diào)試成功后截圖

上傳教師機(jī)。

本項(xiàng)目的活動以移動電商網(wǎng)站首頁制作為任務(wù)驅(qū)動，通過了解電商移動網(wǎng)站的布局結(jié)

構(gòu)模塊和移動網(wǎng)站首頁制作的基本要求，制作移動網(wǎng)站首頁，發(fā)布到網(wǎng)絡(luò)，從而鞏固所學(xué)。

（2）

作業(yè)布置

拓技能

（1）欣賞并分析淘寶天貓京東等電商類網(wǎng)站站點(diǎn)、手機(jī)移動端網(wǎng)站站點(diǎn)。

（2）繼續(xù)完善優(yōu)蜜母嬰移動網(wǎng)站首頁繼續(xù)添加專題市場模塊。（3）

反思

學(xué)生平時(shí)都使用手機(jī)瀏覽淘寶等網(wǎng)站，但是移動網(wǎng)頁制作很少，網(wǎng)頁布局容易因?yàn)槌叽?/p>

不對導(dǎo)致位置錯(cuò)亂，需要提示學(xué)生用表格或者DIV固定移動網(wǎng)頁大小，防止PC端瀏覽時(shí)

候網(wǎng)頁出現(xiàn)錯(cuò)位。