授课教案 课程名称 《网页设计与制作》 任课教师 陶宏 1课时
项目名称 项目单元名称 制作移动端网页 制作移动端电商网站首页 课程类型 授课班级 新课 18电商3 授课时间 授课地点 2020.6.12 电商大机房 （1）了解移动端电商首页制作布局和模块。 知识目标 （2）利用表格布局制作移动网站首页。 （1）制作电商移动端首页。 （2）制作轮播图。 情感态度价值观 培养学生认真、细致、严谨的工作态度 教学目标 技能目标 教材分析 本课程选用高等教育出版社的于丽娟主编的《网页设计与制作》课本中的项目8——《制作移动端网页》，随着移动端浏览量的暴增，其流量已经超多PC端，这代表着移动互联网已经到来，移动优先现在已经是网页设计和制作者的第一理念，是网页设计制作课程的点睛之笔，网页综合应用在移动端的一个项目。 本课授课对象为18电商（3）班的学生，他们生性活泼，爱玩爱动，专注力不够，对电子商务专业1年多的学习，已经对电商专业知识有了一定的基础，对网页设计制作也已经有了一定的理论知识和操作技能，能够制作基础的PC端电商网页，但是对于移动端的电商网站网页制作还比较陌生，以前的项目没有接触过移动网页设计制作，因此本次课要通过给学生展示“优蜜母婴”PC端网站首页的图片，利用设计完成的草图后制作成移动端电商网站“优蜜母婴”首页，并通过FTP上传服务器，可以通过HTTP访问网页，达到融会贯通项目7知识技能的目的。 重点 难点 利用表格合理布局制作移动电商网站首页。 移动网站轮播图的制作。 学情分析 教学重点和难点 教学方法 教学实施 项目展示法、讲解法，把知识点融入到项目中讲解。 教师活动 导入课程： 查看《45次中国互联网络发展状况统计报告》，说明移动互联网在蓬勃发展。 提问学生：回忆移动网站网页和PC端网站网页的结构特点，对比2种网站首页布局特点对照概括。（5） 展示淘宝京东的移动端的网页图片，分析布局要素，参看优蜜母婴的PC端的网页，提炼需要首页布局要素。（3） 移动网站首页尺寸在Dreamwaver的下部可以直接设置480*800（按照Android系统尺寸要 学生回答，参考p260的表格回答移动网站首页的布局模块。 学生活动 情景导入 引任务 回顾检测 明要点 观看淘宝京东的移动端网页，通过分析掌握移动网页的布局要求，根据优蜜母婴的PC端网页设计移动端首页。 学生使用Dreamwaver新建网页，框架可以使用默认移动端网页模板，查求），要注意预览效果和网站发布的测试（2） 看测试。 任务实施 提技能 根据优蜜母婴的PC端的布局，利用图片，制作移动端首页。（要求使用表格的方式制作首页布局，要求使用轮播图）（20） 教师机设置IIS服务，并打开FTP，让学生自己上传网页，并且打开网页，预览调试。 上传网页 评作品 学生利用老师分发的素材包，参考京东淘宝移动网页和优蜜母婴的PC端网页，设计制作移动端的优蜜母婴首页。 学生制作好的移动网站首页整个文件夹上传到服务器上。 要求学生在浏览器内测试网页，查看网页能 学生通过浏览器打开上传的移动不能打开，网页有没有变形，有没有图片？（5） 网页，同时调整测试。调试成功后截图上传教师机。 本项目的活动以移动电商网站首页制作为任务驱动，通过了解电商移动网站的布局结构模块和移动网站首页制作的基本要求，制作移动网站首页，发布到网络，从而巩固所学。（2） （1）欣赏并分析淘宝天猫京东等电商类网站站点、手机移动端网站站点。 （2）继续完善优蜜母婴移动网站首页继续添加专题市场模块。（3） 学生平时都使用手机浏览淘宝等网站，但是移动网页制作很少，网页布局容易因为尺寸不对导致位置错乱，需要提示学生用表格或者DIV固定移动网页大小，防止PC端浏览时候网页出现错位。 作业布置 拓技能 反思
网页设计与制作-移动网站首页制作
