网页基础与制作 4

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第5章为网页添加列表和超链接计划课时4课时教学引入一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间跳转有一定的关联，就需要使用列表和超链接。本章将对列表、CSS控制列表样式、超链接标签和链接伪类控制超链接进行具体讲解。教学目标使学生熟悉列表标签，能够说出列表标签的分类使学生熟悉CSS控制列表样式，能够说出CSS控制列表样式的属性使学生掌握无序、有序及定义列表的使用，能够制作常见的网页模块使学生掌握超链接标签的使用，能够使用超链接定义网页元素使学生掌握CSS伪类的使用，能够使用CSS伪类实现超链接特效教学重点无序列表<ul>有序列表<ol>list-style-type属性list-style属性创建超链接锚点链接链接伪类控制超链接教学难点创建超链接链接伪类控制超链接教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（无序列表<ul>、有序列表<ol>、定义列表<dl>）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课列表是网页结构中最常用的标签，也是信息组织和管理中最得力的工具。按照列表结构划分，网页中的列表通常分为三类，分别是无序列表<ul>、有序列表<ol>和定义列表<dl>。本节将对这三种列表标签进行详细讲解。三、新课讲解知识点1-无序列表<ul>教师通过PPT结合实际操作的方式讲解无序列表<ul>。无序列表的作用定义无序列表的语法格式案例演示无序列表的使用知识点2-有序列表<ol>教师通过PPT结合实际操作的方式讲解有序列表<ol>。有序列表的作用定义有序列表的语法格式有序列表相关的属性案例演示有序列表的使用知识点3-定义列表<dl>教师通过PPT结合实际操作的方式讲解定义列表<dl>。定义列表的作用定义列表的语法格式案例演示定义列表的使用四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（list-style-type属性、list-style-image属性、list-style-position属性、list-style属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课定义无序或有序列表时，可以通过标签的属性控制列表的项目符号，不符合结构表现分离的网页设计原则，为此CSS提供了一系列的列表样式属性，本小节将对这些属性进行详细的讲解。三、新课讲解知识点1-list-style-type属性教师通过PPT结合实际操作的方式讲解list-style-type属性。list-style-type属性的作用list-style-type属性值案例演示list-style-type的用法知识点2-list-style-image属性教师通过PPT结合实际操作的方式讲解list-style-image属性。list-style-image属性的作用通过案例演示list-style-image的用法知识点3-list-style-position属性教师通过PPT结合实际操作的方式讲解list-style-position属性。list-style-position属性的作用list-style-position属性的取值通过案例演示list-style-position属性的用法知识点4-list-style属性教师通过PPT结合实际操作的方式讲解list-style属性。list-style属性的作用list-style属性的语法格式通过案例演示list-style属性的使用四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（创建超链接、锚点链接、链接伪类控制超链接、阶段案例：制作新闻列表）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课超链接是网页中最常用的对象，每个网页通过超链接关联在一起，构成一个完整的网站。超链接定义的对象可以是图片，也可以是文本，甚至是网页中的任何内容元素。只有通过超链接定义的对象，才能点击后进行跳转。本节课将对超链接标签进行详细的讲解。三、新课讲解知识点1-创建超链接教师通过PPT结合实际操作的方式讲解创建超链接。超链接的作用超链接的语法格式href和target属性创建一个带有超链接功能的简单页面知识点2-锚点链接教师通过PPT结合实际操作的方式讲解锚点链接。锚点链接的作用通过案例演示页面中创建锚点链接的方法知识点3-链接伪类控制超链接教师通过PPT结合实际操作的方式讲解链接伪类控制超链接。链接伪类的作用超链接标签<a>的伪类通过案例演示链接伪类控制超链接知识点4-阶段案例：制作新闻列表教师通过PPT结合实际操作的方式讲解阶段案例：制作新闻列表。案例分析案例实现四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对