2.4.1-Dreamweaver CS5文本的输入（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5文本的输入 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握在Dreamweaver CS5中输入文本的方法。 · 了解文本格式化工具的使用。 · 学会使用CSS样式表设置文本样式 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 在Dreamweaver CS5中输入文本的方法。 2. 文本格式化工具的使用。 3. 使用CSS样式表设置文本样式。 教学难点 1. 如何在Dreamweaver CS5中高效地输入文本。 2. 如何使用文本格式化工具调整文本样式。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析实际案例，让学生理解文本输入在网页设计中的应用。 2. 实践操作法：通过动手实践，让学生掌握在Dreamweaver CS5中输入文本的方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上一节课内容，强调文本输入在网页设计中的重要性。 2. 展示几个优秀的网页实例，分析其中的文本布局和样式。 3. 提出问题，引导学生思考如何输入和设置文本样式。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中输入文本的方法如下： 1. 打开Dreamweaver CS5软件，在“文件”菜单中选择“新建”或“打开”，创建或打开一个HTML文档。 2. 在“设计”视图模式下，将光标放置在您希望输入文本的位置。 3. 直接开始键入文本内容。Dreamweaver CS5将自动为您处理HTML标签，使文本在浏览器中正确显示。 4. 若要输入特殊字符，如版权符号（©）或大于号（>），可以使用Dreamweaver CS5提供的“插入”菜单中的“字符”选项，或者直接键入对应的HTML实体代码。 5. 若要换行，请按下键盘上的Enter键。若要创建新的段落，请在文本编辑器中按下Enter键两次，或者在“设计”视图中单击“插入”面板中的“段落”按钮。 在Dreamweaver CS5中，文本格式化工具主要用于调整文本的字体、字号、颜色、对齐方式等样式。以下是如何使用文本格式化工具的方法： 1. 在“设计”视图模式下，选中您要格式化的文本。 2. 在Dreamweaver CS5的工具栏上，您可以看到一系列文本格式化工具。这些工具包括： - 字体下拉菜单：选择字体类型。 - 字号下拉菜单：选择字体大小。 - 颜色选择器：选择文本颜色。 - 加粗、斜体、下划线按钮：分别设置文本加粗、斜体和下划线样式。 - 对齐按钮：设置文本对齐方式（左对齐、居中对齐、右对齐和两端对齐）。 3. 点击相应的工具按钮，即可应用所选样式。 要使用CSS样式表设置文本样式，请按照以下步骤操作： 1. 在Dreamweaver CS5中，打开您要编辑的HTML文档。 2. 在“代码”视图模式下，找到`<head>`标签内的`<style>`标签。如果没有`<style>`标签，请在`<head>`标签内创建一个。 3. 在`<style>`标签内，编写CSS样式规则。例如，要设置所有`<p>`标签的字体、字号和颜色，可以编写以下CSS代码： ```css p { font-family: Arial, sans-serif; font-size: 14px; color: #333333; } ``` 4. 保存文档，然后切换到“设计”视图模式。您应该能看到应用了CSS样式的文本效果。 通过掌握文本格式化工具的使用和CSS样式表设置文本样式的方法，您可以轻松地调整文本的外观和样式，从而提高网页的视觉效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中创建一个新文档，并输入一段文本。 2. 使用文本格式化工具调整文本的字体、字号、颜色和对齐方式。 3. 应用CSS样式表为文本设置样式，如字体、颜色、行高等。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计并制作一个简单的网页，要求输入文本并设置合适的样式。 3. 收集相关资料，了解网页设计中