《HTML+CSS+JavaScript网页制作案例教程》课程教学

? 案例讲解 ? 案例分析 分析“精美电商悬浮框”构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。 ? 案例实现 教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。 说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 ? 阶段小结 ? 小结 重点：无序列表、有序列表。 易错点：注意区分无序列表和有序列表的不同。 ? 答疑 教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 ? 巩固练习 ? 巩固“精美电商悬浮框”的制作 学完知识点后，让学生再制作一次“精美电商悬浮框”案例。以此使学生更熟练地掌握如何定义无序列表、有序列表等知识点。 ? 通过“补充案例”加强学习 教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。 第二课时 （制作“二维码名片”，讲解定义列表、定义列表实现图文混排、列表嵌套） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。 1、 下列选项中，属于定义有序列表相关属性的是（ ） A、background B、type C、start D、value 答案：BCD 答案解析：在有序列表中，除了type属性之外，还可以为

定义start属性、为
1. 定义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 答案解析：咖啡前面是无序列表的项目符号，拿铁和摩卡前面的项目符号按照一定的顺序排列是有序列表。因此为无序列表嵌套有序列表。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 ? 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 在网页中，我们很少看见规范的列表项目符号，而一般使用小图像来代替。这样，不仅更加美观，而且更容易控制。那么，如何使用背景图像定义列表项目符号呢？
   • 1
   • 2
   • 3
   • 4