4.2.5-创建列表和菜单（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5创建列表和菜单 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解列表和菜单的概念及其在网页设计中的应用。 · 学会使用Dreamweaver CS5创建和管理列表和菜单。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 列表和菜单的创建方法。 2. 列表和菜单的属性设置。 3. 列表和菜单的应用实例。 教学难点 1. 如何合理地布局列表和菜单，使其美观且易于操作。 2. 如何根据实际需求设置列表和菜单的属性和事件。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析典型实例，引导学生理解列表和菜单的应用。 2. 任务驱动法：设定具体任务，让学生在实践中掌握列表和菜单的创建和管理方法。 3. 小组合作法：鼓励学生分组讨论，共同解决问题，培养团队协作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课内容，简要介绍HTML和CSS的基本知识。 2. 展示一个包含列表和菜单的网页实例，激发学生的学习兴趣。 3. 提出问题：你们知道如何在Dreamweaver CS5中创建这样的列表和菜单吗？ 2分钟 讲授新课 练习指导 在Dreamweaver CS5中创建无序列表、有序列表和定义列表的方法如下： 1. 无序列表： - 打开Dreamweaver CS5，创建一个新的HTML文件。 - 在“代码”视图下，输入`<ul>`标签，然后按Enter键。 - 在`<ul>`标签内，输入`<li>`标签，然后输入列表项内容。例如：`<li>列表项1</li>`。 - 按Enter键，继续输入其他列表项。例如：`<li>列表项2</li>`。 - 在所有列表项输入完毕后，输入`</ul>`标签结束无序列表。 示例代码： ```html <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> ``` 2. 有序列表： - 在“代码”视图下，输入`<ol>`标签，然后按Enter键。 - 在`<ol>`标签内，输入`<li>`标签，然后输入列表项内容。例如：`<li>列表项1</li>`。 - 按Enter键，继续输入其他列表项。例如：`<li>列表项2</li>`。 - 在所有列表项输入完毕后，输入`</ol>`标签结束有序列表。 示例代码： ```html <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> ``` 3. 定义列表： - 在“代码”视图下，输入`<dl>`标签，然后按Enter键。 - 在`<dl>`标签内，输入`<dt>`标签，然后输入定义项内容。例如：`<dt>定义项1</dt>`。 - 在`<dt>`标签内，输入`<dd>`标签，然后输入定义项的描述。例如：`<dd>定义项1的描述</dd>`。 - 按Enter键，继续输入其他定义项和描述。例如： ```html <dt>定义项2</dt> <dd>定义项2的描述</dd> ``` - 在所有定义项和描述输入完毕后，输入`</dl>`标签结束定义列表。 示例代码： ```html <dl> <dt>定义项1</dt> <dd>定义项1的描述</dd> <dt>定义项2</dt> <dd>定义项2的描述</dd> </dl> ``` 通过以上方法，你可以在Dreamweaver CS5中创建无序列表、有序列表和定义列表。在实际应用中，你可以根据需要选择合适的列表类型。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 创建一个简单的无序列表，包括至少三个列表项。 创建一个有序列表，要求使用自定义样式。 创建一个包含子菜单的导航菜单，并使用CSS样式进行美化。 12