4.2.9-Dreamweaver CS5创建隐藏域 （教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Dreamweaver CS5创建隐藏域 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解Dreamweaver CS5软件的基本操作。 · 学会在网页中创建和使用隐藏域。 · 掌握隐藏域的作用及在表单提交中的应用 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 隐藏域的创建方法。 2. 隐藏域在表单提交中的作用。 教学难点 1. 如何正确设置隐藏域的属性和值。 2. 如何在服务器端获取和处理隐藏域的值。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 任务驱动法：通过具体任务引导学生主动学习。 · 案例分析法：分析典型案例，帮助学生理解知识点。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾Dreamweaver CS5软件的基本操作。 2. 介绍表单的重要性和隐藏域的概念。 2分钟 讲授新课 练习指导 在网页中创建和使用隐藏域是一种常见的做法，尤其是在需要向服务器传递额外信息而不希望用户看到这些信息的情况下。隐藏域在HTML表单中创建，它们允许开发者存储敏感数据，如用户ID、会话ID或其他需要在服务器端处理的信息。以下是创建和使用隐藏域的步骤： ### 步骤 1: 打开Dreamweaver CS5并创建表单 1. 打开Adobe Dreamweaver CS5。 2. 创建一个新的HTML文档或在现有的文档中工作。 3. 在设计视图下，选择“插入”菜单中的“表单”选项来创建一个表单。 ### 步骤 2: 添加隐藏域 1. 在表单内部，点击“插入”面板中的“隐藏域”按钮（或从“插入”菜单中选择“隐藏域”）。 2. 在“属性”检查器中，设置隐藏域的“名称”属性。这个名称将用于在服务器端引用隐藏域的值。 3. 如果需要，可以设置隐藏域的“值”属性。这个值将随表单一起发送到服务器。 ### 步骤 3: 提交表单 1. 确保表单有一个“提交”按钮，以便用户可以提交表单。 2. 当表单被提交时，隐藏域的值也会被发送到服务器。 ### 步骤 4: 服务器端处理 1. 在服务器端，你需要编写服务器端脚本（如PHP、ASP.NET、Python等）来接收和处理表单数据，包括隐藏域的值。 2. 根据隐藏域的值执行相应的操作，例如验证用户身份、记录日志等。 ### 示例代码 #### HTML代码 ```html <!DOCTYPE html> <html> <head> <title>隐藏域示例</title> </head> <body> <form action="process_form.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <!-- 隐藏域 --> <input type="hidden" name="user_id" value="12345"> <input type="submit" value="登录"> </form> </body> </html> ``` #### PHP处理代码 (process_form.php) ```php <?php $username = $_POST['username']; $password = $_POST['password']; $user_id = $_POST['user_id']; // 获取隐藏域的值 // 在这里处理表单数据，例如验证用户凭据 // ... echo "用户名: " . $username . "<br>"; echo "密码: " . $password . "<br>"; echo "隐藏域的用户ID: " . $user_id; ?> ``` 在这个示例中，当用户提交表单时，服务器端的`proce