4.2.2-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. 回顾上节课学习的表单相关知识。 2. 引出文件域的概念，简要介绍文件域的作用。 2分钟 讲授新课 练习指导 文件域是HTML表单中用于上传文件的输入类型，它允许用户在表单中选择和上传文件。文件域的核心作用是帮助用户将本地计算机上的文件传输到服务器上，常用于电子邮件、上传头像、发送文件等场景。 在HTML中，文件域的语法如下： ``` <input type="file" accept="" name=""> ``` 其中，`accept`属性用于指定允许上传的文件类型，可以是多个文件类型，用逗号分隔。如果不设置`accept`属性，则默认接受所有文件类型。`name`属性用于设置文件域的名称，用于在服务器端识别和处理上传的文件。 例如，以下是一个简单的文件域示例： ```html <form> <input type="file" name="myFile"> <input type="submit" value="上传文件"> </form> ``` 当用户点击“上传文件”按钮时，浏览器会弹出一个文件选择对话框，用户可以选择要上传的文件。选择文件后，文件名会显示在文件域中，以便于在服务器端处理。 在Dreamweaver CS5中创建文件域的步骤如下： 1. 打开Dreamweaver CS5，创建一个新的HTML文件。 2. 在Dreamweaver的“插入”菜单中，选择“表单”>“表单元素”>“文件域”。 3. 在HTML代码中，你会看到一个新的文件域元素，如下所示： ```html<input type="file" name="fileField" id="fileField"> ``` 4. 若要设置文件域的属性，可以在HTML代码中直接修改属性值。例如，要设置文件域的`accept`属性，可以在`<input>`标签中添加`accept`属性，如下所示： ```html<input type="file" name="fileField" id="fileField" accept="image/*"> ``` 这将限制用户只能上传图片文件。 5. 若要设置文件域的提交方法，需要将文件域包含在`<form>`标签中。在`<form>`标签中，设置`action`属性为服务器端处理文件的URL，设置`method`属性为`POST`，设置`enctype`属性为`multipart/form-data`。例如： ```html <form action="upload.php" method="POST" enctype="multipart/form-data"><input type="file" name="fileField" id="fileField" accept="image/*"><input type="submit" value="上传文件"> </form> ``` 这样，当用户点击“上传文件”按钮时，浏览器会将选定的文件发送到服务器端的`upload.php`文件进行处理。 6. 保存HTML文件，并在浏览器中预览。你应该可以看到一个文件域，可以选择文件并提交表单。 注意：在实际应用中，你需要在服务器端编写相应的处理程序（如PHP、Node.js等）来处理上传的文件。在本示例中，我们使用了`upload.php`作为服务器端处理文件的URL