实战开发—制作电商网站首页面教学设计

1、学习好资料欢迎下载传智播客 HTML5+CSS3 网站设计基础教程教学设计课程名称：HTML5+CSS3 网站设计基础教程授课年级：2016 年级授课学期：2016 学年第一学期教师姓名：某某老师学习好资料欢迎下载课题名称内容分析教学目标重点及措施难点及措施教学方式教学过程201年月日第 10 章 实战开发制作电商网站首页计划6 课时面课时在深入学习了前面 9 章的知识后，相信读者已经熟练掌握了HTML相关标记、CSS样式属性、 布局和排版以及一些简单的CSS3动画特效技巧。 为了及时有效地巩固所学的知识，本章将运用前9 章所学的基础知识开发一个网站项目 电商网站首页面。掌握站点的建立，能够建

2、立规范的站点。完成首页面的制作，并能够实现简单的CSS3动画效果。教学重点：建立站点、站点初始化设置、效果图分析、页面布局、定义公共样式、首页面详细制作。措施：通过上机操作加强学习和补充案例进行巩固。教学难点：建立站点、站点初始化设置、页面布局。措施：通过上机操作加强学习和补充案例进行巩固。教学采用教师课堂讲授为主，使用教学PPT讲解。第一、二课时（准备工作，讲解建立站点、站点初始化设置、效果图分析、页面布局、定义公共样式）说明：将 10.1 节作为两个课时进行讲解。复习上节课内容在讲解本节内容前， 抛出以下问题让学生回答，以复习第九章 的相关知识 。1、上一章中，我们学习了CSS3高级应用，

3、主要包括过渡、变形、动画等。那么，请同学们回顾下：过渡效果包含哪几个？答案：过 渡 属 性 主 要 包 括transition-property、 transition-duration、transition-timing-function、 transition-delay四个属性。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：制作网页时通常需要先建立站点，那么，建立站点对网页的制作有什么好处呢？学习好资料欢迎下载请小组代表 对以上问题 发表见解 。教师 对上述问题进行解释 ：“

4、站点”对于制作维护一个网站很重要，它能够帮助我们系统地管理网站文件。一个网站， 通常由 HTML网页文件、 图片、 CSS样式表等构成。 简单地说，建立站点就是定义一个存放网站中零散文件的文件夹。这样，可以形成明晰的站点组织结构图，方便增减站内文件夹及文档等，这对于网站本身的上传维护，内容的扩充和移植都有着重要的影响。知识点讲解作为一个专业的网页制作人员，当拿到一个页面的效果图时，首先要做的就是准备工作，主要包括“建立站点、站点初始化设置、切片、效果图分析、页面布局、定义公共样式”等。本节将针对网页制作的相关准备工作进行详细讲解。? 讲解“建立站点”（ 1）、教师通过 PPT 对“站点”的概念

5、进行讲解，并举例说明。（ 2）、教师通过 PPT 对“建立站点”的用途及优点进行分析说明。（ 3）、教师指出“建立站点”分为“创建网站根目录”、“在根目录下新建文件”、“新建站点” 、“站点建立完成”四个步骤。（ 4）、教师分别对“创建网站根目录” 、“在根目录下新建文件” 、“新建站点”、“站点建立完成”进行详细讲解，并使用 Dreamweaver 工具演示说明。（ 5）、教师对比“建立站点”前后，站点根目录文件夹结构图，分析其目录结构的变化。（ 6）、教师指出使用 Dreamweaver 工具“建立站点”时需要注意的问题，并给予解答。（ 7）、学生练习，教师巡视，对疑难问题进行解答。? 讲

6、解“站点初始化设置”（ 1）、教师通过PPT 对“站点初始化设置”的必要性进行说明。（ 2）、教师对“站点初始化设置”的步骤进行讲解，并使用Dreamweaver工具实时演示。（ 3）、教师指出“站点初始化设置”时需要注意的问题，并给予解答。（ 4）、学生练习，教师巡视，对疑难问题进行解答。? 讲解“效果图分析”（ 1）、教师和学生互动：效果图分析是我们网页制作的基础，只有熟悉页面的结构及版式，才能更加高效地完成网页的布局和排版。下面，将以电商网站首页效果图为例，学习如何进行效果图的分析。（ 2）、教师打开电商网站首页，对电商网站首页面效果图进行展示。学习好资料欢迎下载头部导航头部、导航及视频

7、内容部分（新品）内容部分（试装）内容部分（评测）脚部（信息注册）版权信息（ 3）、教师通过“ HTML 结构”、“ CSS 样式”两方面对电商网站首页面进行分析，并详细讲解。（ 4）、教师指出“效果图分析”时需要注意的问题，并给予解答。（ 5）、学生练习，教师巡视，对疑难问题进行解答。学习好资料欢迎下载? 讲解“页面布局”（ 1）、教师和学生互动：页面布局对于改善网站的外观非常重要，是为了使网站页面结构更加清晰、有条理，而对页面进行的“排版”。下面，将对电商网站首页面进行整体布局。（ 2）、教师根据 “效果图分析” 的结果对页面进行布局， 并在 Dreamweaver 工具中书写相应的代码。（

8、 3）、教师对“页面布局”的代码进行讲解，并进行实时演示。（ 4）、教师指出“页面布局”时需要注意的问题，并给予解答。（ 5）、学生练习，教师巡视，对疑难问题进行解答。? 讲解“定义公共样式”（ 1）、教师指出“清除各浏览器默认样式”的原因及作用。（ 2）、教师对“定义公共样式”的方法进行讲解，并进行代码演示。（ 3）、教师分析首页面中的哪些样式需要定义为公共样式，并进行说明。（ 4）、教师打开样式文件 index.css，书写首页面的公共样式。（ 5）、学生练习，教师巡视，对疑难问题进行解答。说明： 在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答

9、。阶段小结? 小结重点：建立站点、页面布局。? 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习? 巩固“电商网站首页面”页面布局学完知识点后，让学生通过分析“电商网站首页面”效果图，进行页面布局，并定义其公共样式。以此使学生更熟练地掌握“建立站点、站点初始化设置、效果图分析、页面布局、定义公共样式”等知识点。? 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业? 完成“补充案例” ，通过平台提交给教师，教师下节课进行点评。? 预习 10.2 节 首页面详细制作。第三、四、五、六

10、课时（制作“电商网站首页面” ，讲解制作头部、导航和视频、内容部分（新品） 、内容部分（试妆） 、内容部分（评测） 、脚部版权信息）说明：将 10.2 节作为四个课时进行讲解。复习上节课内容在讲解本节内容前，抛出 以下 问题让学生回答，以复习上节课内容。1、关于建立站点的意义，下列说法正确的是？（）学习好资料欢迎下载A、可以形成明晰的站点组织结构图。B、方便增减站内文件夹及文档。C、可以系统化地管理网站文件。D、对于网站本身的上传维护，内容的扩充和移植都有着重要的影响。答案： ABCD答案解析：“站点”对于制作维护一个网站很重要，它能够帮助我们系统地管理网站文件。一个网站，通常由 HTML 网

11、页文件、图片、 CSS 样式表等构成。简单地说， 建立站点就是定义一个存放网站中零散文件的文件夹。这样，可以形成明晰的站点组织结构图，方便增减站内文件夹及文档等，这对于网站本身的上传维护，内容的扩充和移植都有着重要的影响。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：网页模块命名需要遵循一定的规则。下列选项中，常用于网页模块命名的是？ （）A 、 navB 、 divC、 headerD、 footer请小组代表 对以上问题 发表见解 。答案： ACD教师 对上述问题进行解释 ：在

12、网站模块的命名规则中，header 常用于命名页面头部，nav 常用于命名导航栏，div 是常用的块元素，footer 常用于命名页面底栏。知识点讲解本节主要讲解电商网站首页面的详细制作，主要包括“制作头部、导航和视频、内容部分（新品）、内容部分（试妆）、内容部分（评测）、脚部版权信息”等知识点。?讲解“制作头部、导航和视频”（ 1）、教师展示头部、导航和视频的效果图，通过HTML结构、 CSS 样式等方面进行分析，并划分其具体结构。学习好资料欢迎下载头部导航视频、音频PIC及按钮（ 2）、教师带领学生搭建网页的头部、导航和视频结构，在index.html件中书写HTML 结构代码。（ 3）、

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

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

15、作内容部分（评测）”（ 1）、教师展示内容部分（评测）模块的效果图，通过HTML 结构、 CSS样式等方面进行分析，并划分其具体结构。标题评测公司 Logo（ 2）、教师带领学生在首页面文档index.html 中，添加内容部分（评测）模块的结构代码。（ 3）、教师分析内容部分（评测）模块的CSS 样式，并在样式表index.css中书写对应的CSS 样式代码。（ 4）、教师对“制作内容部分（评测） ”时需要注意的问题进行说明，并给与解答。（ 5）、学生练习，教师巡视，对疑难问题进行解答。阶段小结? 小结重点：电商网站首页面制作。? 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习学习好资料欢迎下载?巩固“电商网站首页面”的制作学完知识点后， 让学生再制作一次“电商网站首页面” ，以此使学生更熟练地掌握如何制作头部、导航和视频、内容部分（新品） 、内容部分（试妆） 、内容部分（评测） 、脚部版权信息等。? 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业?完成“补充案例” ，通过平台提交给教师，教师下节课进行点评。?复习 本课时的所有知识点和案例，加强巩固。第七课时（上机测试）教师发放测试题目及案例素材，学