2.4.2-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：首先，启动Dreamweaver CS5并创建一个新的HTML文件或打开现有的HTML文件。 2. 选择文本：在代码视图中，使用鼠标或键盘选择要设置格式的文本。在设计视图中，直接点击要设置格式的文本。 3. 使用内联样式：在代码视图中，可以直接在选定的文本周围添加内联样式。例如，要设置文本的颜色和字体大小，可以使用以下代码： ```html <span style="color: red; font-size: 18px;">这里是红色文本</span> ``` 4. 使用CSS样式：在代码视图中，可以在`<head>`标签内创建一个`<style>`标签，然后在其中定义CSS样式。例如： ```html <head> <style> .red-text { color: red; font-size: 18px; } </style> </head> ``` 然后，在选定的文本周围添加`<span>`标签，并为其添加`class`属性： ```html <span class="red-text">这里是红色文本</span> ``` 5. 使用Dreamweaver的样式面板：在设计视图中，可以使用Dreamweaver的样式面板来设置文本格式。首先，选中要设置格式的文本。然后，在菜单栏中选择“格式”>“样式”，或者直接在工具栏中点击“样式”按钮。在弹出的样式面板中，可以设置字体、颜色、大小等属性。 6. 使用Dreamweaver的属性面板：在设计视图中，选中要设置格式的文本。然后，在菜单栏中选择“格式”>“属性”，或者直接在工具栏中点击“属性”按钮。在弹出的属性面板中，可以设置文本的各种属性，如颜色、字体、大小等。 7. 保存更改：在完成文本格式设置后，记得保存文件。在菜单栏中选择“文件”>“保存”，或者直接按下快捷键Ctrl+S（Windows）或Cmd+S（Mac）。 通过以上方法，您可以在Dreamweaver CS5中轻松设置文本格式。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中创建一个新文档，并输入一段文本。 2. 使用文本格式化工具调整文本的字体、字号、颜色和对齐方式。 3. 应用CSS样式表为文本设置样式，如字体、颜色、行高等。 12分钟 布置作业 1. 完成课后习题，巩固所学知识。 2. 设计并制作一个简单的网页，要求输入文本并设置合适的样式。 3. 收集相关资料，了解网页设计中文本输入和样式设置的最佳实践。 1分钟 总结回顾 1. 在Dreamweaver CS5中设置文本格式的方法。 2. 文本格式化工具的使用。 3. 使用CSS样式表设置文本样式。 通过本次课程的学习，