《photoshop图形图像处理项目4 制作包含表单的网页电子教案 中职 高教版 网页制作项目实训教程.doc》由会员分享，可在线阅读，更多相关《photoshop图形图像处理项目4 制作包含表单的网页电子教案 中职 高教版 网页制作项目实训教程.doc（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、广东省职业技术学校学科教案本Teaching Plan20 年20年学年度学期The (1st/2na)Semester of the Academic Year from 20 to 20_网页制作项目实训教程 学校（School） 学科（Subject） _年级（Grade） _教师（Teacher） 重庆大学出版社 制网页制作项目实训教程目录注意：按住Ctrl键后单击每个任务即可跳转到对应的教案单击按钮可返回目录页面设置参数为：纸张：B5 页边距左：1.5页边距右：1.5项目4制作包含表单的网页任务1活动1 了解表单元素活动2 制作QQ邮箱登录页任务2活动1 制作调查问卷表单（一）活动2
2、 制作调查问卷表单（二）教学课题任务1 活动1 了解表单元素课题类型理论+实作课时安排2上课时间教学目标1.了解表单及表单的属性设置2.掌握常用表单元素的使用教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.表格嵌套。2.使用表格嵌套布局网页。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求了解表单以及表单中常用的文本域、按钮等表单元素的添加、属性设置等使用方法；利用表单元素制作一个留言板页面，效果如下图所示。二、师生讨论学习新知识1、表单表单在页面显示的是一个红色虚线框，我们可以把它理解成一个容器，我们可以向里面添加进各种表单元素。在实际使用中
3、，表单有时候可以不需要单独添加，因为当我们在页面中添加第一个表单元素时，系统也会自动创建一个表单。2、表单属性的设置常用属性设置项目的含义是：（1）动作：指定用来处理表单数据的文件。（2）方法：用于设置表单数据提交给服务器的方法，两种方法有所区别。l POST：是将表单数据嵌入到HTTP请求中传输，传输的数据量没有限制，可用于长表单。l GET：将数据附加到请求页的URL中，传输的字符数量有限制，是默认的方式。（3）编码类型：用于指定提交给服务器的数据使用的编码类型，默认使用：application/x-www-form-urlencoded，如果要创建文件上传表单，则使用：multipart
4、/form-data。3、文本域文本域是表单中的一个基本元素，应用的非常广泛，用户可以利用它输入文本类的信息，如用户名、密码、留言等，输入的内容可以是字符、数字等符号。文本域包括：单行、多行、密码三种类型，以适合不同的需求，三种类型之间可以互相转换。4、按钮表单按钮是一个非常重要的表单元素，当用户在输入完数据后单击按钮可以将数据提交给服务器处理。三、教师演示活动实施过程并让学生完成活动任务1、打开Dreamweaver CS6，新建一个HTML文档，点击“表单”按钮，在页面中添加一个表单。表单域属于不可见元素，如果插入后无法显示红色虚线框，可以按如下进行设置：依次点击“编辑”-“首选参数”，在
5、弹出的对话框中，选择“不可见元素”选项卡，勾选“表单范围”复选框即可。2、在表单中插入一个4行2列的表格，宽度设置400，表格边框为0，将第一行与第四行的单元格进行合并，设置各行高度为30。3、在表格第一行输入文字“留言板”，并设置居中，在第二行与第三行的左边单元格中分别输入标题内容。4、选择表格中第二行右边单元格，点击“文本字段”按钮，在弹出的对话框中直接选择“确定”，添加一个文本域。5、选择文本域对象，在属性栏中按要求设置参数。6、选择表格中第三行右边单元格，单击表单项中的“文本区域”按钮，添加一个文本区域，在弹出的对话框中直接选择“确定”。7、选中“文本区域”对象，在属性栏中按要求设置参
6、数。8、选择表格第四行，单击表单项中的“按钮”，添加一个按钮对象，设置居中。9、选择“按钮”对象，在属性栏中按要求设置参数。10、将网页保存文件为：task4-1-1.html，按F12键在浏览器中预览效果。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：表单属性；文本域；按钮演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务1 活动2 制作QQ邮箱登录页课题类型理论+实作课时安排2上课时间教学目标1.掌握密码域及spry 验证密码的使用2.掌握复选框的使用教学重点1、2教学难点1辅助资源课件、多
7、媒体、网络复习引入1.表单的属性。2.常用表单元素：文本域、按钮。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求创建一个模拟QQ邮箱登录页面，效果如下图所示，并将页面以文件名：task4-1-2.html保存。二、师生讨论学习新知识1、密码输入表单制作在网页制作过程中，在账号登录、用户注册等环节都会使用到密码输入项，在Dreamweave CS6中提供了几种可以制作密码输入对象的工具，如文本字段、spry验证密码，下面分别进行介绍。（1）文本字段作密码输入项选中添加的文本域，在属性栏中设置类型为“密码”。当设置文本域为密码模式时，在框内的字符显示为小数点。
8、这种方法制作密码输入框的特点是方法简单，但对密码的验证功能较少，只能限制密码最大的位数。（2）用“spry 验证密码”作密码输入项“spry 验证密码”对象的密码验证功能比前面方法要复杂一些，通过合理设置参数，可以实现密码位数控制、内容控制、错误信息提示等功能。2、复选框可以让用户在预先定义好的一个选项中进行选择。选中矩形的复选框，可以在属性栏中设置属性参数。三、教师演示活动实施过程并让学生完成活动任务1、添加一个表单，在表单中添加一个2行1列的表格，宽度400，设置第一行的底纹为浅灰色，输入文字“微信登录”与“QQ登录”，调整到合适位置。2、在第二行中添加一个4行1列的表格，宽度为300，设
9、置边框为0，设置单元格对齐方式为：水平居中和垂直居中。3、单击选中表格，单元格高度设为40，点击表单栏中的“文本字段”按钮，在第一行中添加一个文本域，点击选中文本域，按要求在属性栏设置宽度及初始值。4、按照上一步的方法，在第二行的单元格中插入一个spry验证密码域，点击选中白色文本框，按要求在属性栏设置参数。5、点击选中蓝色框区域，密码设置要求：位数在6-16位之间，包含大小写字母或数字，且至少包括一位大写字母。6、点击预览状态按钮，选择“强度无效”项，将密码框中后面出现的红色字符修改为：“密码不符合强度要求，须至少包括一个大写字母”。这样当用户输入密码不符合强度要求时，给出提示信息。7、勾选
10、验证时间栏中的“onblur”项，设置用户输入密码完成后进行检查，如不符合要求则给出提示信息。8、单击第三行单元格，单击表单项中的“复选框”按钮，添加一个复选框。9、单击第四行单元格，设置背景颜色为蓝色，单击表单项中的“按钮”，添加一个钮铵，将属性栏中的值改为：登录。10、将页面以文件名：task4-1-2.html保存并预览。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：密码域；spry验证密码；复选框演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务2 活动1 制作调查问卷表单（一）课题类型
11、理论+实作课时安排2上课时间教学目标1.掌握单选按钮组与复选框组的使用2.掌握spry验证文本域的使用教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.密码域及spry 验证密码。2.复选框。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求了解掌握单选按钮组、spry验证文本域等表单元素的添加、属性设置的方法；制作调查问卷页面，完成后效果如下图所示，并将页面以文件名：task4-2-1.html为文件名保存。二、师生讨论学习新知识1、单选按钮组单选按钮一般都是成组使用，可以让用户在预先定义好的可选项中选择一项，这样可以使收集的信息规范，便于信息的
12、统计。在单选按钮组添加对话框中，可根据需求单击+号或-号可增添加或删除选项，设置好每一个项的标签符和值，每项的值不能相同。2、spry验证文本域spry 验证文本域是带有验证功能的文本域，它可以作为有特殊格式要求的文本输入项使用。点击spry验证文本域属性栏中“类型”按钮，弹出多种数据类型选项，根据“类型”项选择的不同，“格式”项会出现相对应的选项，用户可以选择和设置。3、复选框组如果需要在用户在预先定义好的多个选项中进行选择，则可以使用复选框组，用户可以从中选择一项或多项。根据需求单击+号或-号可增添加或删除选项，设置好每一个项的标签符和值（注意各复选框所设定的值不允许相同）。三、教师演示活
13、动实施过程并让学生完成活动任务1、 打开Dreamweaver CS6，新建一个HTML文件，点击“表单”按钮，添加一个表单对象。2、将光标移入表单中，点击“表格”按钮添加一个8行2列的表格，表格宽度400，边框线设置为0，设置所有表格高度为40。3、设置左边列单元格为右对齐，设置右边列单元格为左对齐，合并第一行单元格，输入标题：问卷调查，设置居中对齐，将其它行输入相应的标题，调整列宽。4、选择“姓名”行右边单元格，单击“文本字段”按钮，添加一个文本字段表单，在属性栏中按要求设置参数。5、选择“性别”行右边单元格，单击“单选按钮组”按钮，在对话框中按要求设置参数后确定，最后调整两行按钮至一行中
14、。6、选择“出生日期”行右边单元格，单击“SPRY验证文本域”按钮，在弹出的对话框中直接按钮确定，添加验证文本域表单。7、选择白色文本框，在属性栏中按要求设置参数。8、选择蓝色区域，在属性栏中按要求设置参数。9、选择“电话”行右边单元格，单击“SPRY验证文本域”按钮，在弹出的对话框中直接按钮确定，添加验证文本域表单。10、选择白色文本框，在属性栏中按要求设置参数。11、选择蓝色区域，在属性栏中按要求设置参数，其中最小值设置为：13000000000，最大值设置为：199999999999。12、选择“爱好”行右边单元格，单击“复选框组”按钮，在弹出的对话框中按要求设置参数，添加一个复选框组表
15、单，然后调整各选项至同一行位置。13、选择“自我介绍”行右边单元格，单击“文本区域”按钮，在弹出的对话框中直接按钮确定，添加一个文本区域表单，选中表单对象，设置宽度为40，行数10.14、选择表格最后一行，合并单元格，设置水平方向居中对齐，点击“按钮”，添加一个“按钮”表单，按要求设置参数。15、按F12键，将文件以TASK4-2-1.html为文件名保存，并预览效果。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：单选按钮组；spry验证文本域；复选框组演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学
16、课题任务2 活动2 制作调查问卷表单（二）课题类型理论+实作课时安排2上课时间教学目标1.了解文件域表单元素的使用2.掌握列表与菜单表单元素的使用教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.单选按钮组与复选框组。2.spry验证文本域。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求了解文件域、选择（列表/菜单）等表单元素的添加、属性设置的方法；完善上一节中制作的调查问卷页面，完成后效果如下图所示，并将页面以文件名：task4-2-2.html为文件名保存。二、师生讨论学习新知识1、列表与菜单列表与菜单均可以从预先定义的选项中选择所需的对象
17、，两者适用于不同的情况。（1）菜单：在浏览器显示时，只显示一个可选项.（2）列表：在浏览器中显示时，显示一个多行的滚动列表，用户可从列表中选择1个或多个顶目。2、文件域当页面中需要实现文件上传功能时，可以使用文件域。文件域由一个文本框和一个“浏览”按钮组成，可使用该按钮选择定位需要上传的文件。文件域需要使用POST方法将文件从客户端上传到服务器。三、教师演示活动实施过程并让学生完成活动任务1、在Dreamweaver CS6中打开上一章节中制作的文件：task4-2-1.html。2、选择“自我介绍”单元格，按Ctrl+M两次，在表格中添加两行，分别输入标题：“就读专业”和“照片”。3、单击“就读专业”单元格右边，单击表单项中“选择（列表/菜单）”按钮，在弹出对话框中直接确定。4、点击下拉按钮，在属性栏中单击“列表值”项。5、在对话框中按要求添加专业信息，完成后按“确定”按钮。6、选择照片行右边单元格，单击“文件域”按钮，在弹出对话框中直接确定7、将文件以TASK4-2-2.html为文件名保存，按F12按钮，在浏览器预览页面效果。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：列表与菜单；文件域演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记12