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

教案27案例25小米商城网站（3）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（制作广告图片和手机部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、制作广告图片和手机部分1．案例分析广告图片和手机部分由两个块构成，上面的块存放广告图片；下面的块又分为左右两部分，左边的部分存放一张图片，右边的部分存放8张手机图片，8张手机图片采用无序列表搭建结构。2．案例实现学生同步操作，做学教一体（1）搭建广告图片和手机部分结构代码略。（2）定义广告图片和手机部分CSS样式代码略。二、制作广告图片和电视部分1．案例分析广告图片和电视部分由两个块构成，上面的块存放广告图片；下面的块又分为左右两部分，左边的部分存放一张图片，右边的部分存放4张电视图片，4张电视图片采用无序列表搭建结构。2．案例实现学生同步操作，做学教一体（1）搭建广告图片和电视结构代码略。（2）定义广告图片和电视CSS样式代码略。第2学时（制作视频、售后服务部分）一、制作视频部分1．案例分析视频部分其实也是4张图片的展示，单击图片时播放视频。但这里对图片创建了空链接，不能播放视频。视频部分需要定义一个盒子，盒子中的4个块使用无序列表搭建结构，每个列表项中包含图片和文字。2．案例实现学生同步操作，做学教一体（1）搭建视频部分结构代码略。（2）定义视频部分CSS样式代码略。二、制作售后服务部分1．案例分析售后服务部分是主体部分中最下面的部分。售后服务部分需要定义一个盒子，盒子中的内容使用无序列表搭建结构，每个列表项中包含图标和文字。2．案例实现学生同步操作，做学教一体（1）搭建售后服务部分结构代码略。（2）定义售后服务部分CSS样式代码略。三、制作版权信息部分1．案例分析版权信息部分是主页最下面的部分。版权信息部分为通栏显示，也就是与浏览器一样宽，内容占的宽度是1200px。因此需要一个大盒子，里面再嵌套小盒子。小盒子中包含上、下两个块，上面的块又分为左、右两个块，左面的块存放文字内容，右面的块存放小米Logo图像；下面的块存放一行文字。2．案例实现学生同步操作，做学教一体（1）搭建版权信息部分结构代码略。（2）定义版权信息部分CSS样式代码略。四=2\*ROMAN、小结本案例介绍了制作小米商城网站广告图片和手机部分、广告图片和电视部分、视频以及售后服务、版权信息部分的制作，综合利用了HTML5的各种标记搭建页面结构，使用了CSS3定义网页样式。作业1：课本课后习题与实训作业2：扫码观看案例25中的微课，学习轮播网站登录页和网站注册页的制作。课前小组讨