第10课网页列表与超链接( 一 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页列表与超链接( 一 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）熟悉列表标签的基础知识 （2）能够在网页中添加列表 （3）能够设置列表样式 （4）能够使用Dreamweaver CC为网页添加列表并设置样式 思政育人目标： （1）保持积极的学习态度，增强自身工作能力。 （2）了解“绿水青山就是金山银山”的相关信息，增强热爱自然、保护自然的意识。 教学重难点 教学重点：列表标签的基础知识 教学难点：在网页中添加列表 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（23min）→小组互助（15 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加列表 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 在网页中列表有哪些表现形式？ · 【学生】思考、举手发言 列表在网页中应用广泛，除文字列表、图文列表外，导航栏、菜单栏等常见模块也可以用列表实现。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍使用Dreamweaver CC添加列表 一、添加列表 【教师】展示Dreamweaver CC中列表的类型，帮助学习理解 HTML5中的列表元素分为无序列表、有序列表等。使用Dreamweaver CC可以直接在网页文档中添加列表，将插入点置于想要插入列表的位置，若单击“插入”面板中的“无序列表”和“列表项”按钮，可添加无序列表；若单击“插入”面板中的“有序列表”和“列表项”按钮，可添加有序列表。 （1）添加无序列表后，文档窗口中自动生成无序列表的代码。 （2）添加有序列表后，文档窗口中自动生成有序列表的代码。 （详见教材） 【课堂互动】教师提出以下问题： 无序列表、有序列表和自定义列表各有哪些应用领域？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 二、设置列表样式 【教师】展示CSS设计器中列表的类型，帮助学习理解 在“CSS设计器”面板中，可以直接设置列表的3个样式，分别为项目符号的位置、自定义项目符号与项目符号样式。 （1）list-style-position属性用于设置项目符号的位置，其属性值有inside（ ）和outside（ ）。其中，inside表示项目符号在列表项之内；outside是默认值，表示项目符号在列表项左侧。 （2）list-style-image属性用于设置自定义项目符号。设置方法为，单击该属性右侧的下拉列表，在展开的列表中选择“url”选项，单击编辑框右侧的“浏览”按钮，打开“选择图像源文件”对话框，选择图像文件后单击“确定”按钮，即可自定义项目符号。 · 聆听、思考、记忆 通过讲解，让学生了解如何使用Dreamweaver CC添加列表 小组互助 （15 min） · 【教师】组织学生以小组为单位在网页中添加不同类型的表格 · 【学生】聆听、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作 · 【教师】进行巡视，解答学生的问题 以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点 第二节课 任务实施 （25 min） · 【教师】演示使用Dreamweaver CC为“传承经典网”主页添加列表的操作，并对其进行分析 （1）继续在项目四任务三任务实施创建的文档中操作，或用本书配套素材“项目五”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件。 （2）打开index.html网页文档，将插入点置于<nav>→<div class="center">标签中，单击“插入”面板中的“无序列表”按钮，添加一个<ul>标签，然后将鼠标指针置于标签中，单击“插入”面板中的“列表项”按钮，添加一个<li>标签。 （3）添加ul li选择器，单击“属性”面板“文本”设置区中list-style-type属性右侧的下拉列表，在