2.7.2-Dreamweaver CS5插入说明信息和关键字（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5插入说明信息和关键字 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握在Dreamweaver CS5中插入说明信息和关键字的方法。 · 了解说明信息和关键字的作用和重要性。 · 学会使用HTML标签创建说明信息和关键字。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 在Dreamweaver CS5中插入说明信息和关键字的方法。 2. 说明信息和关键字的作用和重要性。 3. 使用HTML标签创建说明信息和关键字。 教学难点 1. 如何正确使用HTML标签创建说明信息和关键字。 2. 说明信息和关键字格式的理解。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 讲授法：讲解说明信息和关键字的作用和重要性，以及在Dreamweaver CS5中插入说明信息和关键字的方法。 2. 实例演示法：通过实例操作，展示说明信息和关键字的插入过程。 3. 任务驱动法：布置具体任务，引导学生自主完成。 4. 小组合作法：鼓励学生相互合作，共同解决问题。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 介绍说明信息和关键字的重要性和应用场景。 2. 引入本节课的主题：Dreamweaver CS5插入说明信息和关键字。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中插入说明信息和关键字的方法如下： ### 在“设计”视图下插入说明信息和关键字 1. 打开Dreamweaver CS5，创建一个新的HTML文档，或者打开一个现有的HTML文档。 2. 确保你处于“设计”视图。如果你在“代码”视图下，请点击工具栏上的“设计”图标切换到“设计”视图。 3. 在“插入”面板中，找到“说明信息”和“关键字”按钮。 4. 将鼠标光标放在`<head>`标签内。 5. 点击“说明信息”按钮，Dreamweaver将在光标位置插入一个`<meta>`标签，用于描述网页内容。 ```html <meta name="description" content="这里是网页的描述信息。" /> ``` 6. 点击“关键字”按钮，Dreamweaver将在光标位置插入一个`<meta>`标签，用于描述网页关键字。 ```html <meta name="keywords" content="关键词1, 关键词2, 关键词3" /> ``` 7. 在插入的`<meta>`标签中修改`content`属性的值，以描述你的网页内容和关键字。 ### 在“代码”视图下插入说明信息和关键字 1. 打开Dreamweaver CS5，创建一个新的HTML文档，或者打开一个现有的HTML文档。 2. 确保你处于“代码”视图。如果你在“设计”视图下，请点击工具栏上的“代码”图标切换到“代码”视图。 3. 在HTML代码中，找到`<head>`标签。 4. 在`<head>`标签内插入以下代码，用于描述网页内容： ```html <meta name="description" content="这里是网页的描述信息。" /> ``` 5. 在`<head>`标签内插入以下代码，用于描述网页关键字： ```html <meta name="keywords" content="关键词1, 关键词2, 关键词3" /> ``` 6. 修改插入的`<meta>`标签中的`content`属性值，以描述你的网页内容和关键字。 通过以上方法，你可以在Dreamweaver CS5中插入说明信息和关键字。在网页设计中，说明信息和关键字有助于提高网页的可读性和搜索引擎优化（SEO）。掌握这些方法将为你在后续学习中掌握更高级的网页布局和设计技能打下基础。 说明信息和关键字在网页设计中具有重要作用，它们有助于提高网页的可读性、搜索引擎优化（SEO）和用户体验 ### 说明信息（Description） 说明信息（`<meta name="description" content="...">`）是一个简短的文本描述，用于简要介绍网页的主题和内容。说明信息有助于提高网页在搜索结果中的排名，因为搜索引擎会根据