4.2.7-Dreamweaver CS5创建表单按钮（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5创建表单按钮 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握在Dreamweaver CS5中创建表单按钮的方法 学会使用HTML标签和CSS样式实现表单按钮功能 了解如何使用JavaScript或jQuery增强表单按钮的交互性。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 创建表单按钮的基本步骤。 · · 应用CSS样式美化表单按钮。 · 教学难点 · 表单按钮的链接设置。 · · CSS样式与表单按钮的结合应用。 · · JavaScript或jQuery在表单按钮中的应用 · 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 案例分析法：通过分析实际案例，引导学生理解表单按钮的应用。 实践操作法：通过动手实践，培养学生的实际操作能力。 小组合作法：通过小组合作完成任务，培养学生的团队协作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课内容，如创建表单元素的方法。 展示几个包含精美表单按钮的网页实例，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 在Dreamweaver CS5中创建表单按钮的方法如下： 1. 打开Dreamweaver CS5，创建一个新的HTML文件。 2. 在“代码”视图下，输入`<form>`标签，然后按Enter键。 3. 在`<form>`标签内，输入`<input>`标签，然后按Enter键。 4. 在`<input>`标签中，添加`type`属性，指定按钮类型。例如，要创建一个提交按钮，可以输入`<input type="submit">`。 5. 为按钮添加`value`属性，指定按钮文本。例如：`<input type="submit" value="提交">`。 6. 按Enter键，继续输入其他表单元素，如文本框、复选框等。 7. 在所有表单元素输入完毕后，输入`</form>`标签结束表单。 示例代码： ```html <form> <input type="text" name="username" placeholder="请输入用户名"> <input type="password" name="password" placeholder="请输入密码"> <input type="submit" value="登录"> <input type="reset" value="重置"> </form> ``` 通过以上方法，你可以在Dreamweaver CS5中创建一个简单的表单按钮。在实际应用中，你可以根据需要添加更多表单元素，并为每个元素指定相应的属性和值。 需要注意的是，这种表单按钮仅在用户点击按钮时触发相应的操作，如果需要实现更丰富的交互功能，可以使用JavaScript或jQuery来实现。 学会使用HTML标签和CSS样式实现表单按钮功能。 要学会使用HTML标签和CSS样式实现表单按钮功能，你需要了解以下内容： 1. 使用`<input>`和`<button>`标签创建表单按钮。 2. 使用CSS样式美化表单按钮。 以下是一个简单的示例，展示如何使用HTML标签和CSS样式实现表单按钮功能： HTML代码： ```html <!DOCTYPE html> <html> <head><style> /* 设置表单按钮的样式 */ input[type="submit"], input[type="reset"] { font-size: 16px; padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ccc; cursor: pointer; } </style> </head> <body> <h1>表单按钮示例</h1> <!-- 使用<input>标签创建表单按钮 --> <form> <input type="text" name="username" placeholder="请输入用户名"> <input type="password" name="pas