4.2.4-Dreamweaver CS5创建复选框（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5创建复选框 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解复选框的概念及其在网页设计中的应用。 · 学会使用Dreamweaver CS5创建和管理复选框。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 复选框的创建方法。 2. 复选框的属性设置。 3. 复选框的应用实例。 教学难点 1. 如何合理地布局复选框，使其美观且易于操作。 2. 如何根据实际需求设置复选框的属性和事件。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析典型实例，引导学生理解复选框的应用。 2. 任务驱动法：设定具体任务，让学生在实践中掌握复选框的创建和管理方法。 3. 小组合作法：鼓励学生分组讨论，共同解决问题，培养团队协作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课内容，简要介绍HTML表单的基本知识。 2. 展示一个包含复选框的网页实例，激发学生的学习兴趣。 3. 提出问题：你们知道如何在Dreamweaver CS5中创建这样的复选框吗？ 2分钟 讲授新课 练习指导 复选框（Checkbox）是一种用户界面元素，它允许用户在同一组选项中选择多个选项。与单选按钮不同，复选框允许多选，而不是仅限于选择一个选项。每个复选框都有一个唯一的值，当用户选择一个或多个选项并提交表单时，所选选项的值将被发送到服务器进行处理。 在网页设计中，复选框的应用非常广泛，以下是一些常见的应用场景： 1. 在线调查问卷：复选框可以用于创建调查问卷中的多选题部分，让用户在多个选项中选择一个或多个观点或喜好。 2. 会员注册：在会员注册表单中，可以使用复选框让用户选择兴趣爱好、接收通知等信息。 3. 商品筛选：在网上商城中，复选框可以用于商品筛选功能，让用户根据多个条件（如品牌、价格、尺寸等）筛选商品。 4. 新闻订阅：在新闻网站中，复选框可以用于订阅功能，让用户根据自己的兴趣选择关注的新闻类型。 5. 设置选项：在网站设置或应用程序设置页面中，复选框可以用于让用户选择不同的选项，如启用/禁用某项功能、选择多个主题等。 在设计复选框时，需要注意以下几点： - 确保每个复选框都有一个唯一的名称，以便正确地将它们分组。 - 为复选框添加清晰的标签，以便用户清楚地了解每个选项的含义。 - 考虑使用CSS样式对复选框进行美化，以提高用户体验。 - 在某些情况下，可以考虑使用下拉列表（Select Box）或列表框（List Box）替代复选框，以节省空间并提高易用性。 在Dreamweaver CS5中创建和管理复选框的步骤如下： 1. 打开Dreamweaver CS5，新建一个HTML文档。 2. 在“插入”面板中，选择“表单”类别，然后点击“复选框”按钮。这将在文档中创建一个新的复选框。 3. 在复选框旁边，输入选项文本。例如：“选项1”。 4. 选中复选框，然后在“属性”面板中设置复选框的属性。主要属性包括： - 名称（Name）：为复选框组设置一个唯一的名称，以确保所有复选框都属于同一组。 - 值（Value）：为当前复选框设置一个值，当用户选择该选项并提交表单时，该值将被发送到服务器。 - 选定（Checked）：勾选此选项，使当前复选框默认处于选中状态。 5. 重复步骤3至5，添加其他复选框选项。确保所有复选框具有相同的名称，以将它们分组。 6. 根据需要，可以为复选框组添加标签或其他表单元素，以便用户更好地理解和使用复选框组。 7. 使用CSS样式表对复选框组进行美化，包括字体、颜色、边框等。可以在Dreamweaver CS5的“CSS样式”面板中创建和应用样式。 8. 保存并预览网页，检查复选框组的功能和显示效果。 通过以上步骤，您应该能够在Dreamweaver CS5中成功创建和管理复选框。在实际应用中，可以根据需求调整复选框组的布局和样式，以满足不同的设计要求。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 在Dreamweaver CS5中创建一个包含4个选项的复选框组。 2. 为复选框组设置合适的CSS样式，使其美观大方。 3. 实现一个简单的在线调查问卷，其中