2.1.4-DreamweaverCS5制作一个简单网页（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 DreamweaverCS5制作一个简单网页 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解DreamweaverCS5软件的基本功能。 · 学会创建和管理站点。 · 掌握基本的HTML标签和CSS样式。 · 学会使用DreamweaverCS5的布局工具 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. DreamweaverCS5软件的基本操作。 2. HTML标签和CSS样式的应用。 3. 网页布局的方法。 教学难点 1. 如何合理规划网页布局。 2. CSS样式表的应用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析优秀的网页案例，引导学生理解网页设计的基本原理。 2. 实践操作法：通过动手实践，培养学生的实际操作能力。 3. 小组合作法：鼓励学生分组合作，共同完成网页制作任务。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 展示一些优秀的网页作品，激发学生的学习兴趣。 · 简要介绍网页设计的基本概念和DreamweaverCS5软件的作用 2分钟 讲授新课 练习指导 要使用Dreamweaver CS5制作一个简单的网页，请按照以下步骤操作： 1. 打开Dreamweaver CS5：首先，找到Dreamweaver CS5的安装位置并启动它。如果您使用的是Windows操作系统，可以在“开始”菜单中找到它。 2. 创建新文档：在Dreamweaver CS5中，选择“文件”（File）>“新建”（New）>“HTML文档”（HTML Document）。这将打开一个新的HTML文档。 3. 设计模式：在Dreamweaver CS5的工作区域中，您会看到两个选项卡：“代码”（Code）和“设计”（Design）。点击“设计”选项卡以进入设计模式。 4. 添加标题：在设计模式下，您可以看到一个默认的HTML文档结构。要添加标题，请将光标放在`<body>`标签内，然后在工具箱中找到“标题”（Headings）部分。点击您想要的标题级别（例如，`<h1>`），然后在文档中输入标题文本。 5. 添加段落：要添加段落，请在工具箱中找到“段落”（Paragraph）图标。点击该图标，然后在文档中输入段落文本。您可以使用回车键创建新的段落。 6. 添加图像：要添加图像，请在工具箱中找到“插入/编辑图像”（Insert/Edit Image）图标。点击该图标，然后在弹出的对话框中选择您要插入的图像文件。点击“确定”以将图像插入到文档中。 7. 添加超链接：要添加超链接，请选中要链接的文本或图像。然后，在工具箱中找到“创建超链接”（Create Hyperlink）图标。点击该图标，然后在弹出的对话框中输入链接的URL。点击“确定”以创建超链接。 8. 保存文档：完成编辑后，选择“文件”（File）>“保存”（Save）以保存文档。选择一个保存位置，输入文件名，然后点击“保存”。 现在，您已经使用Dreamweaver CS5成功创建了一个简单的网页。您可以通过双击保存的文件在浏览器中查看它。如果您想要进一步优化和完善网页，可以切换到“代码”（Code）视图并编辑HTML和CSS代码。 10分钟 7分钟 自主学习 8分钟 练习训练 · 创建一个简单的站点，包括主页和其他子页面。 · 使用HTML标签和CSS样式美化网页。 · 利用DreamweaverCS5的布局工具进行网页布局。 12分钟 布置作业 · 以小组为单位，完成一个主题明确的网站制作任务。 · 要求网站包含至少5个页面，包括主页、关于我们、产品展示、新闻动态和联系我们等页面。 · 使用HTML标签和CSS样式进行网页美化。 1分钟 总结回顾 1. DreamweaverCS5软件的基本功能和操作。 2. HTML标签和CSS样式在网页设计中的应用。 3. 网页布局的方法和技巧。 4. 网页设计的基本流程和注意事项。 通过本节课的学习，学生应能够熟练掌握DreamweaverCS5软件的基本操作，运用HTML标签和CSS样式制作简单的网页，并具备一定的网页布局能力。 第 1 页，共 2 页 学科网（北京）股份有限