网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（李志云第2版）-教案 模块六 综合案例

模块六综合案例本模块通过小米商城网站和美丽山东网站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中的微课，学习轮播图和图片展示部分以及产品促销部分的制作。课前小组讨论培养学生共同探讨的协作意识和良好的沟通能力。通过小米商城网站的制作，增强国家认同，树立民族自信。任务完成中提高学生的空间布局能力。在编写代码中养成正确的代码编写规范。教案26案例25小米商城网站（2）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（制作轮播图、图片展示部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、制作轮播图部分1．案例分析将所有内容放入一个大盒子，将两侧的箭头分别放入两个小盒子，对下面的圆点和图像都使用无序列表标记<ul>定义。对盒子中的内容采用绝对定位，定位到大盒子的指定位置。2．案例实现（1）搭建轮播图结构学生同步操作，做学教一体（2）链接轮播图部分的样式表文件css.css和脚本文件index.js学生已观看微课，略讲二、制作图片展示部分1．案例分析图片展示部分分为4个块，需要定义一个大盒子，在大盒子中再定义4个子盒子。对第一个块使用无序列表搭建结构，第一个块中的小图标使用字体库中的相应图标字体。2．案例实现学生同步操作，做学教一体（1）搭建图片展示部分结构代码略。（2）定义图片展示部分CSS样式代码略。第2学时（制作产品促销部分）一、制作产品促销部分1．案例分析对该部分需要定义一个盒子，在盒子中用无序列表构建每个块的内容。每个块中相同的样式可以同时定义，不同的样式分别定义。2．案例实现学生同步操作，做学教一体（1）搭建产品促销部分结构代码略。（2）定义产品促销部分CSS样式代码略。二=2\*ROMAN、小结本案例介绍了制作小米商城网站轮播图、图片展示部分以及产品促销部分的制作，综合利用了HTML5的各种标记搭建页面结构，使用了CSS3定义网页样式。作业1：课本课后习题与实训作业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中的微课，学习轮播网站登录页和网站注册页的制作。课前小组讨论培养学生共同探讨的协作意识和良好的沟通能力。在编写代码中培养耐心细致、精益求精的工匠精神。通过代码编写过程，逐步激发学生的求知欲，养成遇到问题解决问题的能力，提高抗挫折能力。教案28案例25小米商城网站（4）计划学时2学时知识目标掌握HBuilderX软件的基本操作；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握盒子的相关属性，能够制作常见的盒子模型效果；掌握JavaScript语言的用法，能够制作网页中动态和交互效果。能力目标具有根据企业的需求进行静态页面的设计与制作能力；具有熟练地进行网站的制作、管理和维护的能力。素质目标树立学生勤于动手，独立思考的观念；培养学生严谨的科学态度，提高分析和解决实际问题的能力；在编写代码中养成正确的代码编写规范。教学重点CSS+DIV网页布局；HTML5新增页面元素应用。教学难点JavaScript动态交互效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（制作网站登录页）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、制作网站登录页1．案例分析网站登录页的头部和版权信息同主页。内容部分分左、右2个部分，左侧图片使用<aside>标记定义，右侧表单使用<div>、<form>标记定义，表单内使用<h1>标记定义标题、使用<p>、<input>标记定义各表单项、表单控件。2．案例实现学生同步操作，做学教一体（1）搭建头部结构代码略。（2）定义头部CSS样式代码略。第2学时（制作网站注册页）一、制作网站注册页1．案例分析网站注册页结构和样式与登录页类似，此处略讲。2．案例实现学生同步操作，做学教一体（1）搭建头部结构代码略。（2）定义头部CSS样式代码略。二=2\*ROMAN、小结本案例介绍了制作小米商城网站登录页和注册页2个子页面。在制作过程中，综合利用了HTML5标记和CSS3样式完成了对表单的制作和样式定义。通过该案例的学习，同学们可以学会时下流行的电商网站的开发流程和制作技术。作业1：课本课后习题与实训作业2：扫码观看案例26中的微课，学习美丽山东网站的设计思路。课前小组讨论培养学生共同探讨的协作意识和良好的沟通能力。在编写代码中养成正确的代码编写规范。登录和注册页面的形式是多样的，鼓励学生独立自主，勇于创新。教案29案例26美丽山东网站（1）计划学时2学时知识目标掌握网站开发的一般流程，了解Web发展历史及其未来方向；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握CSS3的高级应用，实现过渡、变形、翻转效果；掌握CSS3动画属性实现图片轮播设计。能力目标具有根据企业的需求撰写企业网站建设、规划的能力；具有运用所学知识与技能进行Web前端开发与制作的能力。素质目标培养和提高学生感受美、表现美和创造美的能力；培养学生严谨的科学态度，提高分析和解决实际问题的能力；树立学生自主学习和终生学习的观念。教学重点图片切片工具；CSS3过渡、变形、翻转及动画属性应用。教学难点CSS3属性高级应用。教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（案例分析、网站规划）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述设计并制作美丽山东网站，该网站由3个页面构成，包括主页、初识山东页和景点详情页，从主页可以进入其他页面，从其他页面可以返回主页。其中，主页有使用CSS实现的轮播图效果，初识山东页有视频播放效果，网站浏览效果如图26-1～图26-3所示。图26-1美丽山东网站主页图26-2初识山东页图26-3景点详情页二、网站规划1．网站需求分析设计美丽山东网站，旨在让任何人在任何时间、任何地点都能借助网络快速了解和品读山东的历史文化，同时为广大游客提供详细、准确、全面的旅游信息，如文旅资讯、专题推介等。在内容组织上要做到条理清晰、简单易懂，能够让用户快速查找到相关信息。2.网站的风格定位3.规划草图4.素材准备学生同步操作，做学教一体（1）选择切片工具（2）绘制切片区域（3）导出切片（4）存储图片三、制作网站主页1.新建项目2.创建样式表文件3.主页效果图分析（1）HTML结构分析（2）CSS样式分析4.页面整体布局主页整体结构代码编写学生同步操作，做学教一体5.定义公共样式学生同步操作，做学教一体打开样式文件index.css，编写通用样式代码6.链接外部样式表第2学时（制作头部和导航条、轮播图）一、制作头部和导航条1．分析效果图网页的头部分为左（Logo）、右（导航条）2个部分，可对导航条的结构使用无序列表来搭建。当鼠标指针悬停于导航条中的各个导航条目时，改变文本颜色和边框。2．代码实现学生同步操作，做学教一体（1）搭建头部和导航条结构代码略。（2）定义头部和导航条CSS样式代码略。二、制作轮播图1．分析效果图观察效果图，可以看出只需在该盒子内再添加1个包容所有图片的盒子。每隔30s的时间，图片会完成1次先向左后向右的交替移动动画。2．代码实现学生同步操作，做学教一体（1）搭建轮播图结构（2）定义轮播图CSS样式三、小结本案例介绍了美丽山东网站规划流程，综合利用HTML5+CSS3最新网站开发技术，制作完成主页头部和导航条、轮播图部分。作业1：课本课后习题与实训。作业2：扫码观看案例26中主页中内容部分（山东概况、礼仪之邦）的微课，学习制作过程。课前小组讨论过程中，培养学生团队合作，综合分析问题的能力。通过分析、规划网站内容，激发学生的家国情怀，增强国家认同，培养爱国情感，树立民族自信。引导同学们努力学习、多多实践。在编写代码中养成正确的代码编写规范。教案30案例26美丽山东网站（2）计划学时2学时知识目标掌握网站开发的一般流程，了解Web发展历史及其未来方向；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握CSS3的高级应用，实现过渡、变形、翻转效果；掌握CSS3动画属性实现图片轮播设计。能力目标具有根据企业的需求撰写企业网站建设、规划的能力；具有运用所学知识与技能进行Web前端开发与制作的能力。素质目标培养和提高学生感受美、表现美和创造美的能力；培养学生严谨的科学态度，提高分析和解决实际问题的能力；树立学生自主学习和终生学习的观念。教学重点图片切片工具；CSS3过渡、变形、翻转及动画属性应用。教学难点CSS3属性高级应用。教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（制作山东概况内容部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述美丽山东网站主页中，内容部分（山东概况）分为标题和图文介绍两部分，当鼠标指针悬停于中间的图片上时，出现图片放大效果。二、案例分析与实现1．案例分析图中所示的网页内容由2部分构成，分别为标题和内容块。标题使用<h1>标记定义，内容块使用<ul>和<li>标记定义。2．案例实现学生同步操作，做学教一体（1）搭建内容部分（山东概况）结构代码略。（2）定义内容部分（山东概况）CSS样式代码略。第2学时（制作礼仪之邦内容部分）一、案例描述美丽山东网站主页中，内容部分（礼仪之邦）分为标题和图文介绍2个部分，图文介绍部分又分为左侧文字和右侧名胜图片两部分。当鼠标指针悬停于任意一张名胜图片上时，图片放大、倾斜，同时出现查看相册的下拉遮罩。二、案例分析与实现1．案例分析图中所示的网页内容由2部分构成，分别为标题和内容块。标题使用<h1>标记定义，内容块分左侧和右侧两个块，右侧块使用<h1>定义标题，使用<ul>和<li>标记定义名胜图片部分，其中使用<hgroup>标记定义查看相册遮罩层的部分。2．案例实现学生同步操作，做学教一体（1）搭建内容部分（山东概况）结构代码略。（2）定义内容部分（山东概况）CSS样式代码略。三、小结本案例制作了美丽山东网站中山东概况和礼仪之邦两个内容部分，这两个部分的制作充分运用了CSS3的定位、过渡、变形效果，是需要重点掌握的内容。作业1：课本课后习题与实训。作业2：扫码观看案例26中主页中内容部分（文化遗产）的微课，学习制作过程。课前小组讨论培养学生团队协作意识和良好的沟通能力。在编写代码中养成正确的代码编写规范。添加遮罩动画效果，满足用户更多需求，培养学生服务客户意识和以人为本的理念。在编写代码中培养学生耐心细致、精益求精的工匠精神。教案31案例26美丽山东网站（3）计划学时2学时知识目标掌握网站开发的一般流程，了解Web发展历史及其未来方向；掌握浮动与定位布局的使用技巧，能够运用CSS+DIV为网页布局；掌握CSS3的高级应用，实现过渡、变形、翻转效果；掌握CSS3动画属性实现图片轮播设计。能力目标具有根据企业的需求撰写企业网站建设、规划的能力；具有运用所学知识与技能进行Web前端开发与制作的能力。素质目标培养和提高学生感受美、表现美和创造美的能力；培养学生严谨的科学态度，提高分析和解决实际问题的能力；树立学生自主学习和终生学习的观念。教学重点图片切片工具；CSS3过渡、变形、翻转及动画属性应用。教学难点CSS3属性高级应用。教学模式教学做一体化线上+线下混合式教学教学活动及主要环节素质培养第1学时（制作文化遗产内容部分）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述内容部分（文化遗产）分为标题和图片组两部分，当鼠标指针悬停于任意一张图片上时，图片翻转，出现该图片的相关介绍，该效果是通过3D变形来实现的。第2张图片是其中一张图片翻转后的效果。二、案例分析与实现1．案例分析图中所示的网页内容由2部分构成，分别为标题和内容块。标题使用<header><h1>标记定义，内容块使用无序列表<ul>和<li>标记定义，并且在<li>标记内嵌套1个<img>和1个<div>标记，<div>标记用于定义图片的相关介绍块。2．案例实现学生同步操作，做学教一体（1）搭建内容部分（文化遗产）结构代码略。（2）定义内容部分（文化遗产）CSS样式代码略。三、制作版权信息学生同步操作，做学教一体（1）搭建版权信息结构（2）定义版权信息CSS样式第2学时（制作初识山东页面头部及文旅资讯部分）一、制作头部和导航条此处同网站主页，略。二、制作视频宣传部分1．案例分析网页视频宣传部分为左（图片）、右（视频）2个部分。2．案例实现学生同步操作，做学教一体（1）搭建视频宣传部分结构（2）定义视频宣传部分CSS样式三、制作文旅资讯部分1．案例分析网页文旅部分为标题和图文资讯2个部分，图文资讯又分为左（图片）、右（资讯）2个部分。当鼠标滑过图片有不透明度的变化，鼠标经过文字，文字变化颜色。左侧部分又分成左右2个块，用<div>定义，右边<div>中放3张图片，两个盒子水平排列；右侧资讯部分用5个<div>定义每条资讯条目，资讯条目再分为左右2个块，左侧为日期，右侧为文本信息。由于不同文本样式各不相同，因此单独为不同样式的文本用类选择器区分定义。2．案例实现学生同步操作，做学教一体（1）搭建文旅资讯部分结构（2）定义文旅资讯部分CSS样式四、小结本案例综合利用HTML5+CSS3最新网站开发技术，制作了美丽山东网站主页文化遗产内容部分、初识山东页面的文旅资讯部分。实现图片翻转、视频播放等效果，是重点掌握的内容。作业1：课本课后习题与实训。作业2：扫码观看案例26中初识山东页面景点攻略部分及景点详情页的微课，学习制作过程。课前小组讨论培养学生团队合作，共同探讨的协作意识。在编写代码中养成正确的代码编写规范。观看宣传片，增强同学们民族文化自信和为融入中国标准而努力。面对复