4.2.8-Dreamweaver CS5创建图形提交按钮（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5创建图形提交按钮 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解Dreamweaver CS5软件的基本操作。 · 学会在网页中创建和设置图形提交按钮。 · 掌握使用HTML和CSS代码实现按钮样式的方法。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 图形提交按钮的创建方法。 2. HTML和CSS代码在按钮样式设计中的应用。 教学难点 1. 如何根据实际需求调整按钮的样式和大小。 2. 如何使按钮在不同浏览器和设备上显示效果一致。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 任务驱动法：通过具体任务引导学生主动学习。 2. 案例分析法：分析典型案例，帮助学生理解知识点。 3. 实践操作法：让学生通过实际操作巩固所学知识。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾Dreamweaver CS5软件的基本操作。 2. 展示几个精美的图形提交按钮实例，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，它允许用户轻松地创建跨平台和跨浏览器的网页。以下是该软件的一些基本操作： 1. **创建站点**：在Dreamweaver中，可以通过“站点”面板来创建和管理网站。点击“站点”菜单，选择“新建站点”来创建一个新的站点。在弹出的对话框中，可以设置站点的名称、本地根目录、主机名和IP地址等信息。 2. **创建和编辑网页**：在Dreamweaver中，可以通过“文件”菜单中的“新建”命令来创建新的网页。创建的网页可以在“文档”窗口中进行编辑。在这个窗口中，可以使用HTML、CSS和JavaScript等语言来编写网页代码。 3. **插入元素**：Dreamweaver提供了丰富的元素插入工具，如文本框、图像、表格、链接等。用户可以通过“插入”菜单或工具栏上的图标来插入这些元素。 4. **设置页面属性**：在Dreamweaver中，可以通过“属性”面板来设置网页的属性，如标题、字符集、背景颜色等。 5. **预览和调试**：在Dreamweaver中，可以通过“预览”菜单或工具栏上的图标来预览网页的效果。如果需要对网页进行调试，可以使用“开发者工具”面板来查看和修改HTML、CSS和JavaScript代码。 6. **发布网站**：当网页制作完成后，可以通过“文件”菜单中的“发布”命令来将网站发布到服务器上。在发布前，需要设置好服务器的相关信息，如服务器类型、主机名、用户名和密码等。 以上是Dreamweaver CS5软件的一些基本操作，用户可以通过学习和实践来更深入地掌握这款软件的使用。 在网页中创建和设置图形提交按钮，以及使用HTML和CSS代码实现按钮样式的方法如下： ### 创建图形提交按钮 1. **打开Dreamweaver CS5**：启动Dreamweaver CS5，并打开你想要在其中添加图形提交按钮的网页。 2. **插入表单**： - 在“设计”视图中，定位到你想要插入表单的位置。 - 点击“插入”面板中的“表单”按钮（或从“插入”菜单中选择“表单”）。 - 在“表单”对话框中，输入表单的名称（可选），并选择“表单”类型（通常为“POST”）。 3. **插入图像域**： - 在表单内部，点击“插入”面板中的“图像域”按钮（或从“插入”菜单中选择“图像域”）。 - 在“选择图像源文件”对话框中，找到并选择你的图形提交按钮的图片文件。 4. **设置图像域属性**： - 在“属性”检查器中，确保图像域的“名称”属性已设置（这是提交按钮的唯一标识符）。 - 可以设置“替换文本”（alt属性），以便在图像无法显示时提供描述。 ### 设置按钮样式 1. **创建CSS样式**： - 打开“CSS样式”面板。 - 点击“新建CSS规则”按钮，创建一个新的CSS样式。 - 在“选择器类型”中选择“类”，并为该样式命名（例如：`.submit-button`）。 2. **定义样式规则**： - 在“CSS样式”面板中，添加以下样式规则（根