《网页设计与制作案例教程（第2版） 》教案 第10课 网页列表与超链接（一）

10第课10第课网页文本、图像与多媒体（一）10（一）10（一）网页文本、图像与多媒体第课PAGE2PAGE2PAGE3PAGE310第10第课网页文本、图像与多媒体（一） 课题网页列表与超链接(一）课时2课时（90min）教学目标知识技能目标：（1）熟悉列表标签的基础知识（2）能够在网页中添加列表（3）能够设置列表样式（4）能够使用DreamweaverCC为网页添加列表并设置样式思政育人目标：（1）保持积极的学习态度，增强自身工作能力。（2）了解“绿水青山就是金山银山”的相关信息，增强热爱自然、保护自然的意识。教学重难点教学重点：列表标签的基础知识教学难点：在网页中添加列表教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）小组互助（15min）第2节课：任务实施（25min）

实践探索（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在DreamweaverCC中如何添加列表【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（5min）【教师】提出以下问题：在网页中列表有哪些表现形式？【学生】思考、举手发言列表在网页中应用广泛，除文字列表、图文列表外，导航栏、菜单栏等常见模块也可以用列表实现。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍使用DreamweaverCC添加列表一、添加列表【教师】展示DreamweaverCC中列表的类型，帮助学习理解HTML5中的列表元素分为无序列表、有序列表等。使用DreamweaverCC可以直接在网页文档中添加列表，将插入点置于想要插入列表的位置，若单击“插入”面板中的“无序列表”和“列表项”按钮，可添加无序列表；若单击“插入”面板中的“有序列表”和“列表项”按钮，可添加有序列表。（1）添加无序列表后，文档窗口中自动生成无序列表的代码。（2）添加有序列表后，文档窗口中自动生成有序列表的代码。（详见教材）【课堂互动】教师提出以下问题：无序列表、有序列表和自定义列表各有哪些应用领域？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结二、设置列表样式【教师】展示CSS设计器中列表的类型，帮助学习理解在“CSS设计器”面板中，可以直接设置列表的3个样式，分别为项目符号的位置、自定义项目符号与项目符号样式。（1）list-style-position属性用于设置项目符号的位置，其属性值有inside（）和outside（）。其中，inside表示项目符号在列表项之内；outside是默认值，表示项目符号在列表项左侧。（2）list-style-image属性用于设置自定义项目符号。设置方法为，单击该属性右侧的下拉列表，在展开的列表中选择“url”选项，单击编辑框右侧的“浏览”按钮，打开“选择图像源文件”对话框，选择图像文件后单击“确定”按钮，即可自定义项目符号。聆听、思考、记忆通过讲解，让学生了解如何使用DreamweaverCC添加列表小组互助（15min）【教师】组织学生以小组为单位在网页中添加不同类型的表格【学生】聆听、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作【教师】进行巡视，解答学生的问题以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课任务实施（25min）【教师】演示使用DreamweaverCC为“传承经典网”主页添加列表的操作，并对其进行分析（1）继续在项目四任务三任务实施创建的文档中操作，或用本书配套素材“项目五”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件。（2）打开index.html网页文档，将插入点置于<nav>→<divclass="center">标签中，单击“插入”面板中的“无序列表”按钮，添加一个<ul>标签，然后将鼠标指针置于标签中，单击“插入”面板中的“列表项”按钮，添加一个<li>标签。（3）添加ulli选择器，单击“属性”面板“文本”设置区中list-style-type属性右侧的下拉列表，在展开的列表中选择“none”选项，去除列表的项目符号。（4）添加#index_nav.centerul,li选择器，设置整个列表及列表项的内外边距均为“0px”。（5）添加#index_nav.centerul选择器，设置整个列表的高度为“96px”；添加#index_nav.centerulli选择器，设置列表项的浮动为。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用DreamweaverCC在网页中添加列表，设置其属性的步骤实践探索（15min）【教师】组织学生参照任务实施的操作，使用DreamweaverCC在网页中添加菜单栏，并改变其样式【学生】观察、理解、上机操作【教师】巡堂指导，及时解决学生的问题学生通过实践探索进一步巩固所学知识，了解更多关于网页添加列表的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了在网页中如何添加列表并为其设置样式。希望大家在课下多加练习，熟悉如何利用DreamweaverCC在网页中添加列表和设置样式。【学生】总结回顾知识点总结知识点，巩固印象作业布置

（2min）【教师】布置课后作业（1）完成相关课后习题。（2）保存常用的网页，在DreamweaverCC中打开网页，分析其列表和属性。【学生】完成课后任务延展知识面，巩固所学知识教学