02-第17课《网站组版1使用spry表单》学历案.docVIP

2016课改-学历案 齐齐哈尔市建华区春江路4号 电话:2747111 《网站组版1》学历案 章节 第十七章：使用spry表单 德育主题 文明礼貌是中华民族的传统美德。 课次 17/44 任务名称 任务1：制作注册页面 1环 发微课 微指导 下发微课ZB-A-10.mp4 2-3天 2环 服从 训练 常态视频0-1.avi,教师严肃静立，目视全班，学生绝对静止 1 情景 导入 (视频zb-11.avi) 3 任务 描述 浏览网页时经常看到一些表单都具有自动检测的验证功能，如在用户输入内容不正确时自动弹出提示等。在Dreamweavercs6中使用spry菜单也可以实现相同的功能。本例就是通过制作注册页面做为引例，使学生学会使用spry表单，设置表单标签属性和插入spry文本区域。 2 任务 分析 那么如何制作注册页面呢？有以下几个步骤： 1.启动DW环境； 2. 【插入】-【spry】命令； 3.完成注册页面的制作。 2 任务 实现 一、 创建流程： 步骤01：插入spry验证文本域 打开“zhuce.html”网页，将插入点定位到表单标签中。 在“插入”浮动面板的“spry”分类列表中单击“spry验证文本域”按钮。 在打开的对话框中将“id”和“标签”分别设置为“email”和“电子邮件地址” 单击“确定”按钮，完成插入spry验证文本域的操作。 步骤02：设置spry验证文本域的属性 （1）选中插入的spry验证文本域。 （2）在“spry验证文本域”属性面板中将“类型为”设置为“电子邮件地址”。 （3）在“验证于”复选框中选中“onblur”复选框，完成spry验证文本域的属性设置。 步骤03：修改提示信息 选中插入的spry验证文本域后的提示信息，并将其修改为“没有填写或填写格式错误”。 步骤04：插入spry验证密码对象 将插入点定位到spry验证文本域后按enter键进行换行。 在“插入”浮动面板的“spry”分类列表中单击“spry验证密码”按钮。 在打开的对话框中将“id”和“标签”分别设置为“password”和“登录密码”。 单击“确定”按钮，完成插入spry验证密码操作。 步骤05：设置spry验证密码的属性 （1）选中插入的spry验证密码对象，在其属性面板中将“最小字符数”设置为“6”。 （2）在“验证于”复选框组中选中“onblur”复选框。 （3）将提示信息修改为“密码至少6位，由数字和字母组成”，完成spry验证密码属性的设置。 步骤06：准备插入spry验证确认对象 选中插入的spry验证密码对象后按enter键进行换行。 在“插入”浮动面板的“spry”分类列表中单击“spry验证确认”按钮。 步骤07：设置功能属性 （1）在打开对话框的“id”文本框中输入“conformpass”。 （2）在“标签”文本框中输入“确认密码”。 （3）单击“确定”按钮，完成spry验证确认对象的功能属性设置。 步骤08：设置spry验证确认的属性 选择插入的spry验证确认对象。 在其属性面板的“验证于”复选框组中选中“onblur”复选框。将提示信息修改为“两次输入的密码不相同”，完成spry验证确认对象的属性设置和提示信息修改。 步骤09：插入spry验证复选框 在插入的spry验证确认对象后按enter键进行换行，在“插入”浮动面板的“spry”分类列表中单击“spry验证复选框”按钮。 在打开的对话框中分别将“id”和“标签”设置为“I-accept”和“我接受网站协议”。 单击“确定”按钮，完成spry验证复选框对象的插入。 步骤10：插入提交按钮 在插入的spry验证确认对象后按enter键进行换行，在“插入”浮动面板的“表单”分类列表中单击“按钮”按钮。 在打开的对话康中将“id”设置为“submit” 单击“确定”按钮，完成插入提交按钮的操作，保存网页，完成整个例子的制作。 15 嵌入 德育 文明礼貌的表现视频X-09.avi 3 相关 知识 Spry验证文本域的功能？ Spry验证文本域与普通文本域的区别在于它可以实现对用户输入内容的验证，并根据验证结果向用户发出相应的提示信息。 2.如何设置Spry验证文本域？ “类型” 下拉列表框：用于设置输入类型，按该类型的判断条件对pry