文档介绍：授课教案
课程名称 《网页设计与制作》 任课教师 陶宏 1课时
项目名称
制作移动端网页
课程类型
新课
授课时间
项目单元 名称
制作移动端电商网站首页
授课班级
18电商3
授课地点
电商大授课教案
课程名称 《网页设计与制作》 任课教师 陶宏 1课时
项目名称
制作移动端网页
课程类型
新课
授课时间
项目单元 名称
制作移动端电商网站首页
授课班级
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）
看测试。
任务实施 提技能