网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例25小米商城网站

模块六综合案例本模块通过小米商城网站和美丽山东网站2个综合案例的实现，介绍网站开发的完整流程。知识目标：掌握网站规划的方法；掌握使用HTML5+CSS3布局网页方法；掌握使用JavaScript添加网页动态效果的方法。能力目标：会对网站进行统筹规划，做好网站前期准备工作；会熟练使用HTML5编辑网页结构代码；会熟练使用CSS3编辑网页样式代码；会熟练使用JavaScript编辑和调试脚本代码。素质目标：培养整理规划能力，具有大局意识；培养耐心细致、精益求精的工匠精神；培养文化自信和民族自豪感。教案25案例25小米商城网站（1）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（前期工作、搭建主页结构）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述制作小米商城网站，该网站由3个页面构成，分别为主页、登录页和注册页，从主页可以进入登录页和注册页，从登录页和注册页可以返回主页。主页有轮播图效果和限时促销效果。网站浏览效果如图25-1~图25-3所示。图25-1小米商城网站主页图25-2小米商城网站登录页图25-3小米商城网站注册页二、前期工作1.收集素材2.新建项目3.创建样式表文件三、制作网站主页1.主页结构分析主页由头部、导航条、轮播图、主体部分和版权信息等构成，主体部分从上到下又细分为图片展示、产品促销、广告图片、手机、电视、视频和售后服务部分，主页结构划分如图所示。2.编写主页布局代码学生同步操作，做学教一体略。第2学时（制作主页头部）一、制作头部1．案例分析头部分为左、右两部分，对每部分可以使用无序列表搭建结构。鼠标指针划过“下载App”时，显示二维码，如图25-7所示，对二维码可以使用<img>标记定义，通过定义样式使二维码隐藏，鼠标指针划过时再显示。购物车左侧的图标使用字体库中的图标字体。2．案例实现学生同步操作，做学教一体（1）搭建头部结构代码略。（2）定义头部CSS样式代码略。二、制作导航条部分1．案例分析该部分内容分为3部分：左侧是Logo、中间是导航条目、右侧是搜索框。对Logo使用<img>标记定义，并给图像添加超链接，链接到主页。对导航条目使用无序列表来构建。对右侧的搜索框使用<input>标记定义，按钮使用<button>标记定义，按钮上面的放大镜图像使用字体库中的图标字体。2．案例实现学生同步操作，做学教一体（1）搭建导航条结构代码略。（2）定义导航条CSS样式代码略。三=2\*ROMAN、小结本案例介绍了制作小米商城网站。在制作主页时，按照从上到下的顺序，完成头部、导航条的制作，综合利用了HTML5的各种标记搭建页面结构，使用了CSS3定义网页样式。作业1：课本课后习题与实训作业2：扫码观看案例25中的微课，学习轮播图和图片展示部分以及产品促销部分的制作。课前