qq彩色字体-撺掇是什么意思

学习好资料 欢迎下载







传智播客
《HTML5+CSS3网站设计基础
教程》
教学设计








课程名称：

HTML5+CSS3网站设计基础教程
授课年级： 2016年级
授课学期： 2016学年第一学期
教师姓名： 某某老师

学习好资料 欢迎下载

201 年 月 日

课题名称
第10章 实战开发—制作电商网站首页
面
计划
课时
6课时
内容分析 < br>在深入学习了前面9章的知识后，相信读者已经熟练掌握了HTML相关标记、CSS
样式属性、 布局和排版以及一些简单的CSS3动画特效技巧。为了及时有效地巩
固所学的知识，本章将运用前9章 所学的基础知识开发一个网站项目—电商网
站首页面。
 掌握站点的建立，能够建立规范的站点。
 完成首页面的制作，并能够实现简单的CSS3动画效果。
教学目标
教学重点：建立站点、站点初始化设置、效果图分析、页面布局、定义公共样
重点及措施 式、首页面详细制作。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点：建立站点、站点初始化设置、页面布局。
措施：通过上机操作加强学习和补充案例进行巩固。
教学采用教师课堂讲授为主，使用教学PPT讲解。
第一、二课时
（准备工作，讲解建立站点、站点初始化设置、效果图分析、页面布局、定义
公共样式）
说明：
 将10.1节作为两个课时进行讲解。
教学方式
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第九章的相关知识。
1、上一章中，我们学习了CSS3高级应用，主要包括过渡、变形、动画等。
教
学
过
程

那么，请同学们回顾下：过渡效果包含哪几个？
答案：
过渡属性主要包括transition-property、transition- duration、
transition-timing- function、transition-delay四个属性。
说明
：教师可根据学生对 上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新内容的学习。

本课时内容学习

 分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
制作网页时通常需要先建立站点，那么，建立站点对网页的制作有什么好
处呢？

学习好资料 欢迎下载
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
“站点”对于制作维 护一个网站很重要，它能够帮助我们系统地管理网站
文件。一个网站，通常由HTML网页文件、图片、 CSS样式表等构成。简单地说，
建立站点就是定义一个存放网站中零散文件的文件夹。这样，可以形成 明晰的
站点组织结构图，方便增减站内文件夹及文档等，这对于网站本身的上传维护，
内容的扩 充和移植都有着重要的影响。
 知识点讲解
作为一个专业的网页制作人员，当拿到一个页 面的效果图时，首先要做的
就是准备工作，主要包括“建立站点、站点初始化设置、切片、效果图分析、页面布局、定义公共样式”等。本节将针对网页制作的相关准备工作
进行详细讲解。
➢ 讲解“建立站点”
（1）、教师通过PPT对“站点”的概念进行讲解，并举例说明。
（2）、教师通过PPT对“建立站点”的用途及优点进行分析说明。
（3）、教师指出“建 立站点”分为“创建网站根目录”、“在根目录下新建
文件”、“新建站点”、“站点建立完成”四个步 骤。
（4）、教师分别对“创建网站根目录”、“在根目录下新建文件”、“新建站
点”、“ 站点建立完成”进行详细讲解，并使用Dreamweaver工具演
示说明。
（5）、教师对比“建立站点”前后，站点根目录文件夹结构图，分析其目
录结构的变化。 < br>（6）、教师指出使用Dreamweaver工具“建立站点”时需要注意的问题，
并给予解答 。
（7）、学生练习，教师巡视，对疑难问题进行解答。
➢ 讲解“站点初始化设置”
（1）、教师通过PPT对“站点初始化设置”的必要性进行说明。
（2）、教师对“站点初 始化设置”的步骤进行讲解，并使用Dreamweaver
工具实时演示。
（3）、教师指出“站点初始化设置”时需要注意的问题，并给予解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢ 讲解“效果图分析”
（ 1）、教师和学生互动：效果图分析是我们网页制作的基础，只有熟悉页
面的结构及版式，才能更加高效 地完成网页的布局和排版。下面，
将以电商网站首页效果图为例，学习如何进行效果图的分析。
（2）、教师打开电商网站首页，对电商网站首页面效果图进行展示。

学习好资料 欢迎下载
头部
导航< br>头部、导航及视频
内容部分（新品）
内容部分（试装）
内容部分（评测）
脚部（信息注册）

（3）、教师通过“HTML结构”、“CSS样式”两方面对电商网站 首页面进
行分析，并详细讲解。
（4）、教师指出“效果图分析”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
版权信息

学习好资料 欢迎下载
➢ 讲解“页面布局”
（1）、教师和学生互动：页面布局对于改善网站的外观非常重要，是为了
使网站页面结构更加清晰、有条理，而对页面进行的“排版”。下
面，将对电商网站首页面进行整体布局 。
（2）、教师根据“效果图分析”的结果对页面进行布局，并在Dreamweaver
工 具中书写相应的代码。
（3）、教师对“页面布局”的代码进行讲解，并进行实时演示。
（4）、教师指出“页面布局”时需要注意的问题，并给予解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢ 讲解“定义公共样式”
（1）、教师指出“清除各浏览器默认样式”的原因及作用。
（2）、教师对“定义公共样式”的方法进行讲解，并进行代码演示。
（3）、教师分析首页面中的哪些样式需要定义为公共样式，并进行说明。
（4）、教师打开样式文件，书写首页面的公共样式。
（5）、学生练习，教师巡视，对疑难问题进行解答。
说明：在网页制作时可适时停下来，让 学生自行尝试。小组之间可以协作
讨论，教师巡视，对疑难问题进行解答。
 阶段小结
➢ 小结
重点：建立站点、页面布局。
➢ 答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识
点给与解释。
 巩固练习
➢ 巩固“电商网站首页面”页面布局
学完知识点后，让学生通过分 析“电商网站首页面”效果图，进行页面布
局，并定义其公共样式。以此使学生更熟练地掌握“建立站点 、站点初始
化设置、效果图分析、页面布局、定义公共样式”等知识点。
➢ 通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补< br>充案例对相关知识点进行巩固。
 布置作业
➢ 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
➢ 预习10.2节 首页面详细制作。

第三、四、五、六课时
（制作“电商网站首页面”，讲解制作 头部、导航和视频、内容部分（新品）、
内容部分（试妆）、内容部分（评测）、脚部版权信息）
说明：
 将10.2节作为四个课时进行讲解。
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、关于建立站点的意义，下列说法正确的是？（ ）

学习好资料 欢迎下载
A、可以形成明晰的站点组织结构图。
B、方便增减站内文件夹及文档。
C、可以系统化地管理网站文件。
D、对于网站本身的上传维护，内容的扩充和移植都有着重要的影响。
答案：ABCD 答案解析：“站点”对于制作维护一个网站很重要，它能够帮助我们系统
地管理网站文件。一个网站 ，通常由HTML网页文件、图片、CSS样式表
等构成。简单地说，建立站点就是定义一个存放网站中 零散文件的文件夹。
这样，可以形成明晰的站点组织结构图，方便增减站内文件夹及文档等，
这 对于网站本身的上传维护，内容的扩充和移植都有着重要的影响。
说明
：教师可根据学生对上 述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新内容的学习。

本课时内容学习

 分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
网页模块命名需要遵循一定的规则。下列选项中，常用于网页模块命名的
是？（ ）
A、nav B、div
C、header D、footer
请小组代表对以上问题发表见解。
答案：ACD
教师对上述问题进行解释：
在网站模块的命名规则中，nav常用于命名导航栏，div是常 用的块元素，
header常用于命名页面头部，footer常用于命名页面底栏。
 知识点讲解
本节主要讲解电商网站首页面的详细制作，主要包括“制作头部、导航和
视频、内 容部分（新品）、内容部分（试妆）、内容部分（评测）、脚部
版权信息”等知识点。
➢ 讲解“制作头部、导航和视频”
（1）、教师展示头部、导航和视频的效果图，通过HTML 结构、CSS样式
等方面进行分析，并划分其具体结构。

学习好资料 欢迎下载
头部
导航
视频、音频
PIC及按钮

（2）、教师带领学生搭建网页的头部、导航和视频结构，在文
件中书写HTML结构代码。
（3）、教师带领学生在样式表中书写对应的CSS样式代码。
（4）、教师对“制作头部、导航和视频”时需要注意的问题进行说明，并
给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢ 讲解“制作内容部分（新品）”
（1）、教师展示内容部分（新品）的效果图，通过HTML结构、CSS样式
等方面 进行分析，并划分其具体结构。
标题
产品

（2）、教师带领学生在首页面文档中，添加内容部分（新品）
模块的结构代码。
（ 3）、教师分析内容部分（新品）模块的CSS样式，并在样式表
中书写对应的CSS样式代码。
（4）、教师对“制作内容部分（新品）”时需要注意的问题进行说明，并给
与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢ 讲解“制作内容部分（试妆）”
（1）、教师展示内容部分（试妆）的效果图，通过HTML结构、CSS样式
等方面 进行分析，并划分其具体结构。

学习好资料 欢迎下载
标题
产品

（2）、教师带领学生在首页面文档中，添加内容部分（试妆）
模块的结构代码。
（ 3）、教师分析内容部分（试妆）模块的CSS样式，并在样式表
中书写对应的CSS样式代码。
（4）、教师对“制作内容部分（试妆）”时需要注意的问题进行说明，并给
与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢ 讲解“制作内容部分（评测）”
（1）、教师展示内容部分（评测）模块的效果图，通过HTML结构、CSS
样式等 方面进行分析，并划分其具体结构。
标题
评测公司Logo

（2）、教师带领学生在首页面文档中，添加内容部分（评测）
模块的结构代码。
（ 3）、教师分析内容部分（评测）模块的CSS样式，并在样式表
中书写对应的CSS样式代码。
（4）、教师对“制作内容部分（评测）”时需要注意的问题进行说明，并给
与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
 阶段小结
➢ 小结
重点：电商网站首页面制作。
➢ 答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识
点给与解释。
 巩固练习

学习好资料 欢迎下载
➢ 巩固“电商网站首页面”的制作
学完知识点后，让学生再制作一次“电商网站首页面”， 以此使学生更熟练
地掌握如何制作头部、导航和视频、内容部分（新品）、内容部分（试妆）、
内容部分（评测）、脚部版权信息等。
➢ 通过“补充案例”加强学习
教师分发测试题目及 案例素材给学生，对于掌握较好的同学，可以通过补
充案例对相关知识点进行巩固。
 布置作业
➢ 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
➢ 复习本课时的所有知识点和案例，加强巩固。
第七课时
（上机测试）
教师发放测 试题目及案例素材，学生进行上机测试。以此检查学生对相
关知识点的掌握情况。测试完成后将作品通过 平台提交给老师。
上机测试主要针对本章中需要重点掌握的知识点，以及在程序中容易出
错 的操作步骤。通过上机测试可以考察同学对“电商网站首页面”制作的熟
练程度，以及对“建立站点”、 “站点初始化设置”、“效果图分析”、“页
面布局”、“定义公共样式”等知识点的掌握程度。
第八课时
（作品点评）
教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug
的地方，并给与解答。
 布置作业
➢ 完成课后“动手实践”，并扫描二维码查看答案。
教
学
后
记