《HTMLCSSJavaScript网页制作案例教程》课程教学Design.doc

博学谷——让 IT 教学更简单,让 IT 学习更有效 1传智播客《 HTML+CSS+JavaScript 网页制作案例教程》教学设计课程名称: HTML+CSS+JavaScript 网页制作案例教程授课年级: 2015 年级授课学期: 2015 学年第二学期教师姓名: 某某老师博学谷——让 IT 教学更简单,让 IT 学习更有效 2 201 年月日课题名称第5章列表与超链接计划课时 6 课时内容分析通过第 4 章盒子模型的学习,已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成,每个网页上都有大量的信息,要想使网页中的信息排列有序,条理清晰,并且网页与网页之间有一定的联系,就需要使用列表和超链接。本章将对列表标记、超链接标记以及 CSS 控制列表和超链接的样式进行详细讲解。教学目标?掌握无序、有序及定义列表的使用,可以制作常见的网页列表模块; ?掌握超链接标记的使用,能够使用超链接定义网页元素; ?掌握 CSS 伪类,会使用 CSS 伪类实现超链接特效; 重点及措施教学重点:无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。措施: 通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点:有序列表、定义列表、链接伪类。措施: 通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主,使用教学 PPT 讲解。教学过程第一课时(制作“精美电商悬浮框”,讲解无序列表、有序列表) 复习上节课内容在讲解本节内容前, 抛出以下问题让学生回答,以复习第四章“ CSS 盒子模型”的相关知识。 1、一个盒子的宽( width ) 和高( height ) 均为 300px , 左内边距为 30px , 同时盒子有 3px 的边框,请问这个盒子的总宽度是多少? () A、 333px B、 366px C、 336px D、 363px 答案: C?盒子的总宽度= width+ 左右内边距之和+ 左右边框宽度之和+ 左右外边距之和; ?所以,盒子的总宽度= width ( 300px )+ 左内边距( 30px )+ 左右边框宽度之和( 3px*2 ) =336px ; 说明:教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习?分组讨论对新课进行讲解前,先让学生分组讨论以下问题: 博学谷——让 IT 教学更简单,让 IT 学习更有效 3 为了使网页更易读,经常将网页信息以列表的形式呈现,例如,淘宝商城首页的商品服务分类、排列有序, 呈现为列表的形式。其实,在 HTML 中, 提供了3 种常用的列表,分别为无序列表、有序列表和定义列表。那么,请举例说明什么是“无序列表”和“有序列表”?它们之间有什么区别? 请小组代表对以上问题发表见解。教师对上述问题进行解释: ?无序列表是网页中最常用的列表,之所以称为“无序列表”,是因为其各个列表项之间为并列关系,没有顺序级别之分。例如传智播客官网的导航栏结构清晰, 各列表项之间(如“网页平面”与“ java 培训”) 排序不分先后,这个导航栏就可以看做一个无序列表。?有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列,例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。?无序列表使用<ul></ul> 标记定义, <li></li> 为具体的列表项。有序列表使用<ol></ol> 标记定义, <li></li> 为具体的列表项。?案例描述在制作电商网站时,通常需要使用一些精美的悬浮框对商品信息进行简单的分类,这样即可以方便消费者搜索商品,也可以使网页结构变得清晰美观。本节将运用无序列表制作一款精美的电商“悬浮框”。博学谷——让 IT 教学更简单,让 IT 学习更有效 4 ?知识点讲解?总结知识点教师和学生一起总结在案例中涉及到的知识点,主要包括“无序列表、有序列表”等。?讲解“无序列表”(1)、教师展示 PPT 对“无序列表”的概念进行讲解, 并列举网页中常见的例子进行说明。(2)、教师展示 PPT ,对“无序列表的基本语法格式”及常用属性值进行讲解,并进行代码演示。(3) 、教师指出定义“无序列表”时需要注意的问题,并给与解答。(4) 、学生练习,教师巡视,对疑难问题进行解答。?讲解“有序列表”(1)、教师展示 PPT 对“有序列表”的概念进行讲解, 并列举网页中常见的例子进行说明。(2)、教师展示 PPT ,对“有序列表的基本语法格式”及常用属性值进行讲解,并进行代码演示。(3)、教师对比“无序列表”与“有序列表”的显示效果, 分析其区别与联系。(4) 、教师指出定义“有序列表”时需要注意的问题,并给与解答。(5) 、学生练习,教师巡视,对疑难问题进行解答。博学谷——让 IT 教学更简单