07单元7制作表的单网页.ppt

【引导训练】 插入1个“Spry验证文本域”，限制“邮政编码”文本域中只能输入6位数字，无法输入非自然数，也无法输入超过6位的邮政编码。 【任务描述】 【任务7-1-4】使用Spry验证表单数据的有效性 【任务实施】 （1）插入“Spry验证文本域” 在网页文档的【设计】视图中单击选中“邮政编码”文本域，然后单击【插入】面板“表单”工具栏中的【Spry验证文本域】按钮，此时会插入1个“Spry文本域”，并且【属性】面板会自动切换到“Spry文本域”的【属性】面板。 （2）设置“Spry文本域”的属性 在【属性】面板的“类型”列表框中单击选择“邮政编码”选项。 在“格式”列表框中单击选择“自定义模式”选项。在“图案”文本框中输入自定义格式“000000”，表示只能输入6位自然数。在“预览状态”列表框中单击选择“初始”。在“验证于”选项区中选中复选框“onChange”，然后选中复选框“必需的”和“强制模式”。 【引导训练】 （1）应用“检查表单”行为，浏览网页提交信息时限制用户必须输入姓名。 （2）应用“检查表单”行为，浏览网页提交信息时限制用户必须输入E-mail地址，且要求E-mail地址必须符合电子邮件地址的格式要求。 （3）应用“检查表单”行为，浏览网页提交信息时限制用户必须输入邮政编码，且输入的邮政编码必须为数字。 （4）应用“调用JavaScript”行为，单击“关闭”图像域时能关闭浏览器窗口。 【任务描述】 【任务7-1-5】应用行为实现表单网页所需的功能 【任务实施】 1．检查表单数据的正确性 （1）在网页文档【设计】视图窗口下方的状态栏中单击选中标签“form#form1” 。 （2）在Dreamweaver CS6主界面中，选择命令【窗口】→【行为】，打开【行为】面板。 （3）在【行为】面板中单击【添加行为】按钮，在弹出的快捷菜单中选择命令项【检查表单】，如图7-45所示。接着会弹出如图7-46所示的【检查表单】对话框。 （4）在【检查表单】对话框“域”列表中单击选中“input “name””，单击选中复选框“必需的”，单击选中单选按钮“任何东西”。 【任务实施】 1．检查表单数据的正确性 （5）在【检查表单】对话框“域”列表中单击选中“input “E-mail””，单击选中复选框“必需的”，单击选中单选按钮“电子邮件地址”。 （6）在【检查表单】对话框“域”列表中单击选中“input “postalcode””，单击选中复选框“必需的”，单击选中单选按钮“数字”。 （7）在【检查表单】对话框中单击【确定】按钮，关闭该对话框，返回【行为】面板。 （8）将事件设置为“onSubmit”。 （9）保存网页文档，预览其效果，在相应的文本框中输入不符合要求的信息或者没有输入必要的信息时，会弹出“提示信息”对话框。 【任务实施】 2．调用JavaScript脚本自动关闭网页 （1）在网页文档的【设计】视图中单击选中“关闭”图像域。 （2）在【行为】面板中单击【添加行为】按钮，在弹出的快捷菜单中选择命令项【调用JavaScript】，弹出的【调用JavaScript】对话框。 （3）在【调用JavaScript】对话框的“JavaScript：”文本框中输入代码“window.close()”如图7-50所示，然后单击【确定】按钮，返回【行为】面板。 （4）将事件设置为“onClick”。 （5）保存网页文档，预览其效果，单击页面中的【关闭】按钮，在弹出的对话框中单击【是】按钮，即可关闭当前浏览的网页。 【引导训练】 调用外部JavaScript脚本文件实现表单网页的以下功能： （1）在网页中显示当前日期。 （2）动态改变网页中的城市列表。 （3）验证表单数据。 【任务描述】 【任务7-1-6】调用外部JavaScript脚本文件实现表单网页所需的功能 【任务实施】 1．显示当前日期 （1）切换到【代码】视图，将光标置于标签head与/head之间，“titleE游天下旅游调查/title”的下一行。 （2）选择命令【插入】→【HTML】→【脚本对象】→【脚本】，如图7-53所示，然后弹出如图7-54所示的【脚本】对话框。 （2）在【脚本】对话框中单击“源”文本框右侧的“文件夹”按钮，在弹出的【选择文件】对话框中选择1个JavaScript脚本文件“showNowDate.js”，如图7-55所示。然后单击【确定】按钮返回【脚本对话框】，如图7-56所示。 （3）在【脚本】对话框中单击【确定】按钮，返回【代码】视图窗口，在【代码】视图窗口插入了一行代码，如下所示： script type=text/javascript src=js/showNowDate.js/script 【任务实施