《HTML+CSS+JavaScript网制作案例教程课程教学.docx》由会员分享，可在线阅读，更多相关《HTML+CSS+JavaScript网制作案例教程课程教学.docx（13页珍藏版）》请在三一文库上搜索。
1、传智播客HTML+CSS+JavaScript 网页制作案例教程教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级： 2015年级授课学期：2015学年第二学期教师姓名：某某老师201年 月 日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网贝构成，每个网贝上都有大量的息，要想使网贝中的息排列有序，条理清晰，并且网页与网页之间L定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进 行详细讲解。教学目标掌握无序、有序及定义列表的使用，可以制
2、作常见的网页列表模块；掌握超链接标记的使用，能够使用超链接定义网页元素；掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：后序列表、定义列表、链接伪类。措施：通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。教 学 过 程A课时(制作“精美电商悬浮框”，讲解无序列表、后序列表)*复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。1、一个盒子的范 (width )和
3、图(height )均为300px,左内边距为 30px,同时盒子用3px的边框，请问这个盒子的总宽度是多少？()A、 333px B 、 366px C 、 336px D 、 363px答案：C盒子的总宽度=width+左右内边距之和+左右边框宽度之和 +左右 外边距之和；所以，盒子的总宽度 =width （300px） +左内边距（30px） +左右 边框宽度之和（3px*2 ） =336px ;说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解 或直接进入本课时新内容的学习。，本课时内容学习分组讨论对新课进行讲解前，先让学生 分组讨论以下问题：为了使网页更易读，经常将网页
4、信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。其实，在HTML中，提供了 3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？请小组代表对以上问题发表见解。教师对上述问题进行解释：无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为 其各个列表项之间为并列关系，没有顺序级别之分。例如传智播客官 网的导航栏结构清晰，各列表项之间（如“网页平面”与“java培训”） 排序不分先后，这个导航栏就可以看做一个无序列表。有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排 列，例如
5、网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。2。1轩歌曲服曲T叩5Q0首MP3音惠搜索修oi.唯一01.K电赤年.眈-娟牛耨除K*通十年之恋.*.g心乱拓席*岳IS的月比+M苒马If心在于原飞*讦（YOUNG无序列表使用标记定义，为具体的列表项。有序列 表使用标记定义，为具体的列表项。案例描述在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单 的分类，这样即可以方便消费者搜索商品，也可以使网页结构变得清晰美 观。本节将运用无序列表制作一款精美的电商“悬浮框”。诋回阚I知识点讲解? 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“无序列表、有序列表”
6、等。? 讲解“无序列表”(1)、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见 的例子进行说明。(2)、教师展示PPT,对“无序列表的基本语法格式”及常用属性值进行 讲解，并进行代码演示。(3)、教师指出定义“无序列表”时需要注意的问题，并给与解答。(4)、学生练习，教师巡视，对疑难问题进行解答。? 讲解“有序列表”(1)、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见 的例子进行说明。(2)、教师展示PPT,对“有序列表的基本语法格式”及常用属性值进行 讲解，并进行代码演示。(3)、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与 联系。(4)、教师指出
7、定义“有序列表”时需要注意的问题，并给与解答。(5)、学生练习，教师巡视，对疑难问题进行解答。案例讲解? 案例分析分析“精美电商悬浮框”构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些 CSS样式。? 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事 项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作 讨论，教师巡视，对疑难问题进行解答。阶段小结? 小结重点：无序列表、有序列表。易错点：注意区分无序列表和有序列表的不同。? 答疑教师询问学生对于知识点还有什么不理
8、解的地方。针对学生不理解的知识 点给与解释。巩固练习? 巩固“精美电商悬浮框”的制作学完知识点后，让学生再制作一次“精美电商悬浮框”案例。以此使学生 更熟练地掌握如何定义无序列表、有序列表等知识点。? 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二课时（制作“二维码名片”，讲解定义列表、定义列表实现图文混排、列表嵌套）本复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以 复习上节课内容。1、下列选项中，属于定义有序列表相关属性的是（）A、backgroundB、typeC、startD、value答案：BCD答案
9、解析：在有序列表中，除了 type属性之外，还可以为 ol定义start属性、为li定义value属性，它们决定有序列表的项目符号。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解 或直接进入本课时新内容的学习。工本课时内容学习分组讨论对新课进行讲解前，先让学生 分组讨论以下问题：在上节课中，我们已经学习了如何定义无序列表和有序列表。本节课将学习另一种列表一一定义列表。那么，请大家讨论下什么是“定义列表”？以及如何使用“定义列表”？答案：请小组代表 对以上问题 发表见解。教师对上述问题进行解释：定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不 同，定义列表的列表项前
10、没有任何项目符号。定义列表使用、 进行定义，其中，标记用于指定术语名词， 标记用于对名词进行解 释和描述。一对可以对应多对 ,即可以对一个名 词进行多项解释。案例描述传统的名片，往往需要手动把上面的信息存进手机，这样的录入方式繁琐且容易出错。二维码名片的出现， 简化了繁琐的信息录入方式，轻轻一扫,就可读取内部包涵的文字和图片信息，极大地提高了信息的存取速度。本 节将运用定义列表制作一款时尚潮流的“二维码名片”。李刖借神弗存昔照:网醴计师知识点讲解? 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“定义列表、定义列表实现图文混排、列表嵌套”等。? 讲解“定义列表”(1)、教师展示P
11、PT对“定义列表”的概念进行讲解，并列举网页中常见 的例子进行说明。(2)、教师展示PPT,对“定义列表的基本语法格式”及常用属性值进行 讲解，并进行代码演示。(3)、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分 析其区别与联系。(4)、教师指出定义“定义列表”时需要注意的问题，并给与解答。(5)、学生练习，教师巡视，对疑难问题进行解答。? 讲解“定义列表实现图文混排”(1)、教师访问“传智播客”官方网址，展示常见的“图文混排”效果。萋虹学心片阡诙5千传笆搐客Tm柞半小*铃罗月笏万髓电单山主托军菊属潮密特月新千 曲曲单呵；同方方编东巧势芸月崭工方款费单G：每工期京廨6号月荐二.3
12、百就职单仃；比那场怛李志隶2E岁HME.汗 此旺基椁；华和风云(2)、教师对“定义列表实现图文混排”进行讲解并通过代码进行演示。(3)教师分析“定义列表实现图文混排”时需要注意的问题，并给与解 答。(4)、学生练习，教师巡视，对疑难问题进行解答。? 讲解“列表嵌套”(1)、教师和学生互动：在网上购物商城中浏览商品时，经常会看到某一 类商品被分为若干小类，这些小类通常还包含若干的子类，同样， 在使用列表时，列表项中也有可能包含若干子列表项，例如“淘宝 网”中的导航栏效果。要想在列表项中定义子列表项就需要将列表 进行嵌套，下面，将对列表的嵌套进行讲解。* A-1l- - * 咻一-裒本中心-联召吉
13、行 =网电三荒-已将它宝q宝扩TPT去中上罡磨也情用至M痔*机5君宝国际品质*0利直供J(2)、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。(3)、教师对“列表嵌套”进行讲解并通过代码进行演示。(4)、教师指出“列表嵌套”时需要注意的问题，并给予解答。(5)、学生练习，教师巡视，对疑难问题进行解答。案例讲解? 案例分析分析“二维码名片”的构成元素，将其拆解为几个部分，分析各部分使用 了哪些HTML标记及应用了哪些 CSS样式。? 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页 面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事 项。说明：在
14、网页制作时可适时停下来，让学生自行尝试。小组之间可以协作 讨论，教师巡视，对疑难问题进行解答。阶段小结? 小结重点：定义列表、定义列表实现图文混排、列表嵌套。易错点：定义列表背景时，需要清除列表项的默认项目符号。? 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识 点给与解释。巩固练习? 巩固“二维码名片”的制作学完知识点后，让学生再制作一次“二维码名片”案例。以此使学生更熟 练地掌握如何使用定义列表及列表的嵌套，并能灵活应用定义列表实现图 文混排的效果。? 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
15、布置作业? 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。? 预习5.3节【案例13】电商团购悬浮框。? 预习5.4节【案例14唱吧导航栏。第三课时（制作“电商团购悬浮框，讲解list-style复合属性、背景图像定义列表项目符号）上复习上节课内容在讲解本节内容前， 抛出以下问题让学生回答，以 复习上节课内容。麻啡 簟铁工摩卡如左上图所示效果，下列嵌套列表可以实现的是（）A、有序列表嵌套有序列表B、有序列表嵌套无序列表C、无序列表嵌套有序列表D、无序列表嵌套无序列表答案：C答案解析：咖啡前面是无序列表的项目符号，拿铁和摩卡前面的项目符号 按照一定的顺序排列是有序列表。因此为无序列表
16、嵌套有序列表。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解 或直接进入本课时新内容的学习。，本课时内容学习分组讨论对新课进行讲解前，先让学生 分组讨论以下问题：在网页中，我们很少看见规范的列表项目符号，而一般使用小图像来代替。这样，不仅更加美观，而且更容易控制。那么，如何使用背景图像定义列表项目符号呢？请小组代表 对以上问题 发表见解。教师对上述问题进行解释：答案：由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为设置背景图像的方式实现列表项目图像。具体步骤：使用“list-style”属性将列表项目符号的默认效果设置为none;通过“ background综
17、合属性给列表项添加背景图像并控制到合适的 位置。案例描述单调的列表项目符号往往并不能满足网页制作的需求，这时就需要使用CSS中的背景图像属性，通过图像的 url (路径)为各列表项设置更丰富的 图像，使列表的样式更加美观。本节将通过背景图像定义列表项目符号的 方法制作一款电商“团购悬浮框”。O新吊别 0韶团 秒杀团 O漕仓口O返回顶部知识点讲解?总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“ list-style复合 属性、背景图像定义列表项目符号”等知识点。? 讲解list-style复合属性”(1)、教师展示PPT对“list-style复合属性”的使用方法进行说明。(2)
18、、教师对使用“list-style属性综合设置列表样式的语法格式”进行讲 解，并进行代码演示。(3)、教师对使用“list-style复合属性”需要注意的事项进行说明，并给 与解答。(4)、学生练习，教师巡视，对疑难问题进行解答。? 讲解“背景图像定义列表项目符号”(1)、教师和学生互动：我们知道，定义无序列表和有序列表时，列表项会带有默认的列表项目符号，看上去比较呆板，不美观。其实，在 CSS中，列 表项目符号可以使用背景图像来替代，使页面变得生动、活泼。本节将对使用 背景图像定义列表项目符号进行讲解。(2)、教师通过PPT展示“背景图像定义列表项目符号”的应用效果。最受关注的“徽程舞锦周小
19、龙女，你工匾在逗趣吗？！图新课程-约期学员作品汇总囹冲击月旨10口00元，FHF强摩员要望梅？iQ55期华北55天，就注54,平韧353元图回5完整学习大纲发路钱图，霸气！(3)、教师对“背景图像定义列表项目符号”进行讲解，并进行代码演示。(4)、教师对使用“背景图像定义列表项目符号”时需要注意的问题进行说明。(5)、学生练习，教师巡视，对疑难问题进行解答。案例讲解? 案例分析分析“电商团购悬浮框”的构成元素，将其拆解为几个部分，分析各部分 使用了哪些HTML标记及应用了哪些 CSS样式。? 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页 面结构、定义CSS样式等步骤
20、完成页面的制作，并指出其中需要注意的事 项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作 讨论，教师巡视，对疑难问题进行解答。阶段小结? 小结重点：综合设置元素的背景。? 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识 点给与解释。巩固练习? 巩固“电商团购悬浮框”的制作学完知识点后，让学生再制作一次 “电商团购悬浮框”。以此使学生更熟练 地掌握“list-style复合属性”及如何使用背景图像定义列表项目符号。? 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补 充案例对相关知识点进行巩固。第四课时(制作“唱吧
21、导航栏”，讲解超链接标记a、清除超链接图像的边框、链接伪类、锚点链接)*复习上节课内容在讲解本节内容前， 抛出以下问题让学生回答，以 复习上节课内容。 对新课进行讲解前，先让学生 分组讨论以下问题：1、使用list-style属性定义列表项目符号为且位于列表文本以内的 列表，下列代码书写正确的是()A、list-style:circle inside;B、list-style:square inside;C、list-style:circle outside;D、list-style:square outside;答案：B答案解析：使用list-style属性时，当属性值为square时，显示
22、, outside 表示列表项目符号位于列表文本以外；而inside表示列表项目符号位于列表文本以内，故选Bo说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习案例描述浏览网站时，通过导航栏可以让访问者迅速找到所需要的资源区域，就像 出门旅行，旅客通过地图的引导能够轻松到达目的地。导航栏就相当于一个网 站的地图，访客可以通过导航纵观整个网站。本节将运用列表和超链接的相关 知识制作一款“唱吧导航栏”，当鼠标移上每个歌曲分类时，其背景颜色和背 景图像将发生变化。 MUSIC-福,1)(军。强播本由 Radio Song |O Album M
23、V醉庭人也“1？唱吧导航栏默认效果 我n西我单隹鲁京m Radio Song |O Album MVtl- 也A冽血司耐听Ar序曲乐学14田鼠标移上歌曲分类时效果知识点讲解? 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“超链接标记、清除超链接图像的边框、链接伪类、锚点链接”等知识点。? 讲解“超链接标记(1)、教师和学生互动：一个网站通常由多个页面构成，进入网站时首先 看到的是其首页，如果想从首页跳转到其子页面，就需要在首页相 应的位置添加超链接。在 HTML中创建超链接非常简单，只需用 标记环绕需要被链接的对象即可。(2)、教师展示PPT对“超链接标记”在网页中的作用进行说
24、明。(3)、教师对“创建超链接的基本语法格式 ”进行讲解，并进行代码演示 (4)、教师指出“使用标记创建超链接”时的注意事项，并给与解答 (5)、学生练习，教师巡视，对疑难问题进行解答。? 讲解“清除超链接图像的边框”(1)、教师通过代码演示如何创建图像超链接，并在IE浏览器中预览效果,图像会自动添加边框效果。G 国携接-Tind4T? Tnlrnet.!(文坤 装轮中 空者的 收森夹的 工；*t? LI： VrilfL-H?jS+Jifr4hi - 八 I相侬碧fflffO蹈V，传智播客wwwJtca B一翱BtiiaI” 多皿.(2)、教师对“清除超链接图像的边框”的原因进行说明。(3)、
25、教师对如何“清除超链接图像的边框”进行讲解，并通过代码 演示。(4)、学生练习，教师巡视，对疑难问题进行解答。? 讲解“链接伪类”(1)、教师和学生互动：在上面的小节中，我们已经学习了超链接a标记，可以实现网页间的跳转。其实，在 CSS中，还可以实现超链接 不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样 式不同。下面，我们来学习“链接伪类”的相关知识。(2)、教师通过PPT对“链接伪类”的概念、应用效果进行展示。(3)、教师对“链接伪类”的四种状态进行讲解，并进行代码演示 。(4)、教师指出使用“链接伪类”设置元素状态时需要注意的事项，并给 与解答。(5)、学生练习，教师巡视，对疑
26、难问题进行解答。? 讲解“锚点链接”(1)、教师和学生互动：浏览网站时，为了提高信息的检索速度，常需要 用到HTML语言中一种特殊的链接一一锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。(2)、教师展示PPT对“锚点链接”的概念及作用进行说明。(3)、教师对“锚点链接”的使用方法进行讲解，并进行代码演示 。(4)、教师总结创建锚点链接的步骤，指出其注意事项，并给与解答。(5)、学生练习，教师巡视，对疑难问题进行解答。案例讲解? 案例分析分析“唱吧导航栏”的构成元素，将其拆解为几个部分，分析各部分使用 了哪些HTML标记及应用了哪些 CSS样式。? 案例实现教师带领学生分步骤地进行网页
27、制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事 项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作 讨论，教师巡视，对疑难问题进行解答。阶段小结? 小结重点：超车接标记a、链接伪类。易错点：注意区分链接伪类的四种状态。? 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识 点给与解释。巩固练习? 巩固“唱吧导航栏”的制作学完知识点后，让学生再制作一次“唱吧导航栏”。以此使学生更熟练地掌 握“超链接标记a、清除超链接图像的边框、链接伪类、锚点链接”的 使用方法及注意事项。? 通过“补充案例”加强学习教师分
28、发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业? 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。? 复习本课时的所有知识点和案例，加强巩固。第五课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“无序列表”、“有序列表” “定义列表”及“超链接、伪类链接”使用的熟练程度，以及对“定义列表实现图文混排”、“背景图像定义列表项目符号”和“清除超链接图像的边 框”等知识点的掌握程度。第六课时（作品点评）bug教师对学生的提交的上机测试作品进行点评，指出代码中容易出现 的地方，并给与解答。布置作业?完成课后“动手实践”，并扫描二维码查看答案。? 预习6.1节【案例15】用户登录界面。? 预习6.2节【案例16】趣味选择题。