首页制作

授课教案

课程名称《网页设计与制作》任课教师陶宏1课时

项目名称制作移动端网页课程类型新课授课时间

2020.6.12

项目单元

名称

制作移动端电商网站首页授课班级18电商3授课地点电商大机房

教学目标

知识目标

（1）了解移动端电商首页制作布局和模块。

（2）利用表格布局制作移动网站首页。

技能目标

（1）制作电商移动端首页。

（2）制作轮播图。

情感态度

价值观

培养学生认真、细致、严谨的工作态度

教材分析

本课程选用高等教育出版社的于丽娟主编的《网页设计与制作》课本中的项目8

——《制作移动端网页》，随着移动端浏览量的暴增，其流量已经超多PC端，这代

表着移动互联网已经到来，移动优先现在已经是网页设计和制作者的第一理念，是网

页设计制作课程的点睛之笔，网页综合应用在移动端的一个项目。

学情分析

本课授课对象为18电商（3）班的学生，他们生性活泼，爱玩爱动，专注力不够，

对电子商务专业1年多的学习，已经对电商专业知识有了一定的基础，对网页设计制

作也已经有了一定的理论知识和操作技能，能够制作基础的PC端电商网页，但是对

于移动端的电商网站网页制作还比较陌生，以前的项目没有接触过移动网页设计制

作，因此本次课要通过给学生展示“优蜜母婴”PC端网站首页的图片，利用设计完

成的草图后制作成移动端电商网站“优蜜母婴”首页，并通过FTP上传服务器，可以

通过HTTP访问网页，达到融会贯通项目7知识技能的目的。

教学重点

和难点

重点利用表格合理布局制作移动电商网站首页。

难点

移动网站轮播图的制作。

教学方法

项目展示法、讲解法，把知识点融入到项目中讲解。

教学实施教师活动学生活动

情景导入

引任务

导入课程：

查看《45次中国互联网络发展状况统计报

告》，说明移动互联网在蓬勃发展。

提问学生：回忆移动网站网页和PC端网站

网页的结构特点，对比2种网站首页布局特点对

照概括。（5）

学生回答，参考p260的表格回答

移动网站首页的布局模块。

回顾检测

明要点

展示淘宝京东的移动端的网页图片，分析布

局要素，参看优蜜母婴的PC端的网页，提炼需

要首页布局要素。（3）

观看淘宝京东的移动端网页，通过

分析掌握移动网页的布局要求，根据优

蜜母婴的PC端网页设计移动端首页。

移动网站首页尺寸在Dreamwaver的下部可

以直接设置480*800（按照Android系统尺寸要

学生使用Dreamwaver新建网页，

框架可以使用默认移动端网页模板，查

求），要注意预览效果和网站发布的测试（2）看测试。

任务实施

提技能

根据优蜜母婴的PC端的布局，利用图片，

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

页布局，要求使用轮播图）（20）

学生利用老师分发的素材包，参考

京东淘宝移动网页和优蜜母婴的PC端

网页，设计制作移动端的优蜜母婴首

页。

上传网页

评作品

教师机设置IIS服务，并打开FTP，让学生

自己上传网页，并且打开网页，预览调试。

学生制作好的移动网站首页整个

文件夹上传到服务器上。

要求学生在浏览器内测试网页，查看网页能

不能打开，网页有没有变形，有没有图片？（5）

学生通过浏览器打开上传的移动

网页，同时调整测试。调试成功后截图

上传教师机。

本项目的活动以移动电商网站首页制作为任务驱动，通过了解电商移动网站的布局结

构模块和移动网站首页制作的基本要求，制作移动网站首页，发布到网络，从而巩固所学。

（2）

作业布置

拓技能

（1）欣赏并分析淘宝天猫京东等电商类网站站点、手机移动端网站站点。

（2）继续完善优蜜母婴移动网站首页继续添加专题市场模块。（3）

反思

学生平时都使用手机浏览淘宝等网站，但是移动网页制作很少，网页布局容易因为尺寸

不对导致位置错乱，需要提示学生用表格或者DIV固定移动网页大小，防止PC端浏览时

候网页出现错位。