《HTML+CSS+JavaScript网页制作案例教程》课程教学.docx
- 文档编号:13632161
- 上传时间:2023-06-15
- 格式:DOCX
- 页数:19
- 大小:511.37KB
《HTML+CSS+JavaScript网页制作案例教程》课程教学.docx
《《HTML+CSS+JavaScript网页制作案例教程》课程教学.docx》由会员分享,可在线阅读,更多相关《《HTML+CSS+JavaScript网页制作案例教程》课程教学.docx(19页珍藏版)》请在冰点文库上搜索。
《HTML+CSS+JavaScript网页制作案例教程》课程教学
传智播客
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称:
HTML+CSS+JavaScript网页制作案例教程
授课年级:
2015年级
授课学期:
2015学年第二学期
教师姓名:
某某老师
201年月日
课题名称
第5章列表与超链接
计划课时
6课时
内容分析
通过第4章盒子模型的学习,已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成,每个网页上都有大量的信息,要想使网页中的信息排列有序,条理清晰,并且网页与网页之间有一定的联系,就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标
●掌握无序、有序及定义列表的使用,可以制作常见的网页列表模块;
●掌握超链接标记的使用,能够使用超链接定义网页元素;
●掌握CSS伪类,会使用CSS伪类实现超链接特效;
重点及措施
教学重点:
无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施:
通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点:
有序列表、定义列表、链接伪类。
措施:
通过上机操作加强学习和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主,使用教学PPT讲解。
教
学
过
程
第一课时
(制作“精美电商悬浮框”,讲解无序列表、有序列表)
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽(width)和高(height)均为300px,左内边距为30px,同时盒子有3px的边框,请问这个盒子的总宽度是多少?
()
A、333pxB、366pxC、336pxD、363px
答案:
C
●盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和;
●所以,盒子的总宽度=width(300px)+左内边距(30px)+左右边框宽度之和(3px*2)=336px;
说明:
教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
为了使网页更易读,经常将网页信息以列表的形式呈现,例如,淘宝商城首页的商品服务分类、排列有序,呈现为列表的形式。
其实,在HTML中,提供了3种常用的列表,分别为无序列表、有序列表和定义列表。
那么,请举例说明什么是“无序列表”和“有序列表”?
它们之间有什么区别?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
●无序列表是网页中最常用的列表,之所以称为“无序列表”,是因为其各个列表项之间为并列关系,没有顺序级别之分。
例如传智播客官网的导航栏结构清晰,各列表项之间(如“网页平面”与“java培训”)排序不分先后,这个导航栏就可以看做一个无序列表。
●有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列,例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
●无序列表使用
有序列表使用
✧案例描述
在制作电商网站时,通常需要使用一些精美的悬浮框对商品信息进行简单的分类,这样即可以方便消费者搜索商品,也可以使网页结构变得清晰美观。
本节将运用无序列表制作一款精美的电商“悬浮框”。
✧知识点讲解
Ø总结知识点
教师和学生一起总结在案例中涉及到的知识点,主要包括“无序列表、有序列表”等。
Ø讲解“无序列表”
(1)、教师展示PPT对“无序列表”的概念进行讲解,并列举网页中常见的例子进行说明。
(2)、教师展示PPT,对“无序列表的基本语法格式”及常用属性值进行讲解,并进行代码演示。
(3)、教师指出定义“无序列表”时需要注意的问题,并给与解答。
(4)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“有序列表”
(1)、教师展示PPT对“有序列表”的概念进行讲解,并列举网页中常见的例子进行说明。
(2)、教师展示PPT,对“有序列表的基本语法格式”及常用属性值进行讲解,并进行代码演示。
(3)、教师对比“无序列表”与“有序列表”的显示效果,分析其区别与联系。
(4)、教师指出定义“有序列表”时需要注意的问题,并给与解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
✧案例讲解
Ø案例分析
分析“精美电商悬浮框”构成元素,将其拆解为几个部分,分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
Ø案例实现
教师带领学生分步骤地进行网页制作,通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作,并指出其中需要注意的事项。
说明:
在网页制作时可适时停下来,让学生自行尝试。
小组之间可以协作讨论,教师巡视,对疑难问题进行解答。
✧阶段小结
Ø小结
重点:
无序列表、有序列表。
易错点:
注意区分无序列表和有序列表的不同。
Ø答疑
教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习
Ø巩固“精美电商悬浮框”的制作
学完知识点后,让学生再制作一次“精美电商悬浮框”案例。
以此使学生更熟练地掌握如何定义无序列表、有序列表等知识点。
Ø通过“补充案例”加强学习
教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固。
第二课时
(制作“二维码名片”,讲解定义列表、定义列表实现图文混排、列表嵌套)
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习上节课内容。
1、下列选项中,属于定义有序列表相关属性的是()
A、backgroundB、type
C、startD、value
答案:
BCD
答案解析:
在有序列表中,除了type属性之外,还可以为
- 定义start属性、为
- 定义value属性,它们决定有序列表的项目符号。
说明:
教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
在上节课中,我们已经学习了如何定义无序列表和有序列表。
本节课将学习另一种列表——定义列表。
那么,请大家讨论下什么是“定义列表”?
以及如何使用“定义列表”?
答案:
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
●定义列表常用于对术语或名词进行解释和描述,与无序和有序列表不同,定义列表的列表项前没有任何项目符号。
●定义列表使用
一对
可以对应多对,即可以对一个名词进行多项解释。✧案例描述
传统的名片,往往需要手动把上面的信息存进手机,这样的录入方式繁琐且容易出错。
二维码名片的出现,简化了繁琐的信息录入方式,轻轻一扫,就可读取内部包涵的文字和图片信息,极大地提高了信息的存取速度。
本节将运用定义列表制作一款时尚潮流的“二维码名片”。
✧知识点讲解
Ø总结知识点
教师和学生一起总结在案例中涉及到的知识点,主要包括“定义列表、定义列表实现图文混排、列表嵌套”等。
Ø讲解“定义列表”
(1)、教师展示PPT对“定义列表”的概念进行讲解,并列举网页中常见的例子进行说明。
(2)、教师展示PPT,对“定义列表的基本语法格式”及常用属性值进行讲解,并进行代码演示。
(3)、教师对比“定义列表”与“无序列表和有序列表”的显示效果,分析其区别与联系。
(4)、教师指出定义“定义列表”时需要注意的问题,并给与解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“定义列表实现图文混排”
(1)、教师访问“传智播客”官方网址,展示常见的“图文混排”效果。
(2)、教师对“定义列表实现图文混排”进行讲解并通过代码进行演示。
(3)教师分析“定义列表实现图文混排”时需要注意的问题,并给与解答。
(4)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“列表嵌套”
(1)、教师和学生互动:
在网上购物商城中浏览商品时,经常会看到某一类商品被分为若干小类,这些小类通常还包含若干的子类,同样,在使用列表时,列表项中也有可能包含若干子列表项,例如“淘宝网”中的导航栏效果。
要想在列表项中定义子列表项就需要将列表进行嵌套,下面,将对列表的嵌套进行讲解。
(2)、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。
(3)、教师对“列表嵌套”进行讲解并通过代码进行演示。
(4)、教师指出“列表嵌套”时需要注意的问题,并给予解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
✧案例讲解
Ø案例分析
分析“二维码名片”的构成元素,将其拆解为几个部分,分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
Ø案例实现
教师带领学生分步骤地进行网页制作,通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作,并指出其中需要注意的事项。
说明:
在网页制作时可适时停下来,让学生自行尝试。
小组之间可以协作讨论,教师巡视,对疑难问题进行解答。
✧阶段小结
Ø小结
重点:
定义列表、定义列表实现图文混排、列表嵌套。
易错点:
定义列表背景时,需要清除列表项的默认项目符号。
Ø答疑
教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习
Ø巩固“二维码名片”的制作
学完知识点后,让学生再制作一次“二维码名片”案例。
以此使学生更熟练地掌握如何使用定义列表及列表的嵌套,并能灵活应用定义列表实现图文混排的效果。
Ø通过“补充案例”加强学习
教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固。
✧布置作业
Ø完成“补充案例”,通过平台提交给教师,教师下节课进行点评。
Ø预习5.3节【案例13】电商团购悬浮框。
Ø预习5.4节【案例14】唱吧导航栏。
第三课时
(制作“电商团购悬浮框”,讲解list-style复合属性、背景图像定义列表项目符号)
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习上节课内容。
如左上图所示效果,下列嵌套列表可以实现的是()
A、有序列表嵌套有序列表
B、有序列表嵌套无序列表
C、无序列表嵌套有序列表
D、无序列表嵌套无序列表
答案:
C
答案解析:
咖啡前面是无序列表的项目符号,拿铁和摩卡前面的项目符号按照一定的顺序排列是有序列表。
因此为无序列表嵌套有序列表。
说明:
教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
在网页中,我们很少看见规范的列表项目符号,而一般使用小图像来代替。
这样,不仅更加美观,而且更容易控制。
那么,如何使用背景图像定义列表项目符号呢?
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
答案:
由于列表样式对列表项目图像的控制能力不强,所以实际工作中常通过为
- 设置背景图像的方式实现列表项目图像。
具体步骤:
●使用“list-style”属性将列表项目符号的默认效果设置为none;
●通过“background”综合属性给列表项添加背景图像并控制到合适的位置。
✧案例描述
单调的列表项目符号往往并不能满足网页制作的需求,这时就需要使用CSS中的背景图像属性,通过图像的url(路径)为各列表项设置更丰富的图像,使列表的样式更加美观。
本节将通过背景图像定义列表项目符号的方法制作一款电商“团购悬浮框”。
✧知识点讲解
Ø总结知识点
教师和学生一起总结在案例中涉及到的知识点,主要包括“list-style复合属性、背景图像定义列表项目符号”等知识点。
Ø讲解“list-style复合属性”
(1)、教师展示PPT对“list-style复合属性”的使用方法进行说明。
(2)、教师对使用“list-style属性综合设置列表样式的语法格式”进行讲解,并进行代码演示。
(3)、教师对使用“list-style复合属性”需要注意的事项进行说明,并给与解答。
(4)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“背景图像定义列表项目符号”
(1)、教师和学生互动:
我们知道,定义无序列表和有序列表时,列表项会带有默认的列表项目符号,看上去比较呆板,不美观。
其实,在CSS中,列表项目符号可以使用背景图像来替代,使页面变得生动、活泼。
本节将对使用背景图像定义列表项目符号进行讲解。
(2)、教师通过PPT展示“背景图像定义列表项目符号”的应用效果。
(3)、教师对“背景图像定义列表项目符号”进行讲解,并进行代码演示。
(4)、教师对使用“背景图像定义列表项目符号”时需要注意的问题进行说明。
(5)、学生练习,教师巡视,对疑难问题进行解答。
✧案例讲解
Ø案例分析
分析“电商团购悬浮框”的构成元素,将其拆解为几个部分,分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
Ø案例实现
教师带领学生分步骤地进行网页制作,通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作,并指出其中需要注意的事项。
说明:
在网页制作时可适时停下来,让学生自行尝试。
小组之间可以协作讨论,教师巡视,对疑难问题进行解答。
✧阶段小结
Ø小结
重点:
综合设置元素的背景。
Ø答疑
教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习
Ø巩固“电商团购悬浮框”的制作
学完知识点后,让学生再制作一次“电商团购悬浮框”。
以此使学生更熟练地掌握“list-style复合属性”及如何使用背景图像定义列表项目符号。
Ø通过“补充案例”加强学习
教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固。
第四课时
(制作“唱吧导航栏”,讲解超链接标记、清除超链接图像的边框、链接伪类、锚点链接)
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习上节课内容。
对新课进行讲解前,先让学生分组讨论以下问题:
1、使用list-style属性定义列表项目符号为“■”且位于列表文本以内的列表,下列代码书写正确的是()
A、list-style:
circleinside;
B、list-style:
squareinside;
C、list-style:
circleoutside;
D、list-style:
squareoutside;
答案:
B
答案解析:
使用list-style属性时,当属性值为square时,显示“■”,outside表示列表项目符号位于列表文本以外;而inside表示列表项目符号位于列表文本以内,故选B。
说明:
教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
✧案例描述
浏览网站时,通过导航栏可以让访问者迅速找到所需要的资源区域,就像出门旅行,旅客通过地图的引导能够轻松到达目的地。
导航栏就相当于一个网站的地图,访客可以通过导航纵观整个网站。
本节将运用列表和超链接的相关知识制作一款“唱吧导航栏”,当鼠标移上每个歌曲分类时,其背景颜色和背景图像将发生变化。
唱吧导航栏默认效果
鼠标移上歌曲分类时效果
✧知识点讲解
Ø总结知识点
教师和学生一起总结在案例中涉及到的知识点,主要包括“超链接标记、清除超链接图像的边框、链接伪类、锚点链接”等知识点。
Ø讲解“超链接标记”
(1)、教师和学生互动:
一个网站通常由多个页面构成,进入网站时首先看到的是其首页,如果想从首页跳转到其子页面,就需要在首页相应的位置添加超链接。
在HTML中创建超链接非常简单,只需用标记环绕需要被链接的对象即可。
(2)、教师展示PPT对“超链接标记”在网页中的作用进行说明。
(3)、教师对“创建超链接的基本语法格式”进行讲解,并进行代码演示。
(4)、教师指出“使用标记创建超链接”时的注意事项,并给与解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“清除超链接图像的边框”
(1)、教师通过代码演示如何创建图像超链接,并在IE浏览器中预览效果,图像会自动添加边框效果。
(2)、教师对“清除超链接图像的边框”的原因进行说明。
(3)、教师对如何“清除超链接图像的边框”进行讲解,并通过代码演示。
(4)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“链接伪类”
(1)、教师和学生互动:
在上面的小节中,我们已经学习了超链接标记,可以实现网页间的跳转。
其实,在CSS中,还可以实现超链接不同的链接状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。
下面,我们来学习“链接伪类”的相关知识。
(2)、教师通过PPT对“链接伪类”的概念、应用效果进行展示。
(3)、教师对“链接伪类”的四种状态进行讲解,并进行代码演示。
(4)、教师指出使用“链接伪类”设置元素状态时需要注意的事项,并给与解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
Ø讲解“锚点链接”
(1)、教师和学生互动:
浏览网站时,为了提高信息的检索速度,常需要用到HTML语言中一种特殊的链接——锚点链接,通过创建锚点链接,用户能够快速定位到目标内容。
(2)、教师展示PPT对“锚点链接”的概念及作用进行说明。
(3)、教师对“锚点链接”的使用方法进行讲解,并进行代码演示。
(4)、教师总结创建锚点链接的步骤,指出其注意事项,并给与解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
✧案例讲解
Ø案例分析
分析“唱吧导航栏”的构成元素,将其拆解为几个部分,分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
Ø案例实现
教师带领学生分步骤地进行网页制作,通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作,并指出其中需要注意的事项。
说明:
在网页制作时可适时停下来,让学生自行尝试。
小组之间可以协作讨论,教师巡视,对疑难问题进行解答。
✧阶段小结
Ø小结
重点:
超链接标记、链接伪类。
易错点:
注意区分链接伪类的四种状态。
Ø答疑
教师询问学生对于知识点还有什么不理解的地方。
针对学生不理解的知识点给与解释。
✧巩固练习
Ø巩固“唱吧导航栏”的制作
学完知识点后,让学生再制作一次“唱吧导航栏”。
以此使学生更熟练地掌握“超链接标记、清除超链接图像的边框、链接伪类、锚点链接”的使用方法及注意事项。
Ø通过“补充案例”加强学习
教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固。
✧布置作业
Ø完成“补充案例”,通过平台提交给教师,教师下节课进行点评。
Ø复习本课时的所有知识点和案例,加强巩固。
第五课时
(上机测试)
教师发放测试题目及案例素材,学生进行上机测试。
以此检查学生对相关知识点的掌握情况。
测试完成后将作品通过平台提交给老师。
上机测试主要针对本章中需要重点掌握的知识点,以及在代码中容易出
错的操作步骤。
通过上机测试可以考察同学对“无序列表”、“有序列表”、“定义列表”及“超链接、伪类链接”使用的熟练程度,以及对“定义列表实现图文混排”、“背景图像定义列表项目符号”和“清除超链接图像的边框”等知识点的掌握程度。
第六课时
(作品点评)
教师对学生的提交的上机测试作品进行点评,指出代码中容易出现bug的地方,并给与解答。
✧布置作业
Ø完成课后“动手实践”,并扫描二维码查看答案。
Ø预习6.1节【案例15】用户登录界面。
Ø预习6.2节【案例16】趣味选择题。
教
学
后
记
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML+CSS+JavaScript网页制作案例教程 HTML CSS JavaScript 网页 制作 案例 教程 课程 教学