《网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第13章教案 项目13 表单──制作注册网页》由会员分享，可在线阅读，更多相关《网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第13章教案 项目13 表单──制作注册网页（17页珍藏版）》请在金锄头文库上搜索。
1、项目十三 表单制作注册网页,任务一 创建表单,【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后将“项目素材”文件夹中的内容复制到站点根文件夹下面，并打开网页文件“index.htm”。 2.将鼠标光标置于第2行单元格中，然后在菜单栏中选择【插入】【表单】【表单】命令，或在【插入】【表单】面板中单击（表单）按钮插入一个空白表单，如图所示。,3.打开网页文件“index2.htm”。将其中的表格及其内容复制粘贴到网页文件“index.htm”的表单中，如图所示。,4.将鼠标光标置于“会员昵称：”右侧单元格中，然后在菜单栏中选择【插入】【表单】【文本域】命令，如果弹出【
2、输入标签辅助功能属性】对话框，单击下面的链接，在弹出的【首选参数】对话框中修改首选参数，取消对【表单对象】复选框的勾选，这样再插入表单对象时就不会弹出【输入标签辅助功能属性】对话框而是直接插入表单，如图所示。,5.选中插入的文本域，在【属性】面板中设置各项属性，如图所示。 6.分别在“登陆密码：”和“密码确认：”后面的单元格中插入文本域，将它们设置为“密码”类型，如图所示。,7.在“电子邮件：”后面的单元格中插入文本域，属性设置如图所示。 8.将鼠标光标置于“性别：”后面的单元格内，然后在菜单栏中选择【插入】【表单】【单选按钮】命令，插入两个单选按钮，在【属性】面板中设置其属性参数，然后分别在
3、两个单选按钮的后面输入文本“男”和“女”，如图所示。,9.将鼠标光标置于“出生年月：”后面的单元格内，然后在菜单栏中选择【插入】【表单】【列表菜单】命令，插入两个【列表菜单】域，分别代表“年”、“月”，如图所示。 10.选定代表“年”的表单域，在【属性】面板中单击 按钮，打开【列表值】对话框，添加【项目标签】和【值】，如图所示。,11.在【属性】面板中将名称设置为“dateyear”，如果有必要还可以设置初始化选项，这里不进行设置，如图所示。 12.按照相同方法设置代表“月”的菜单域，其中“月”的列表值从“1”到“12”，如图所示。,13.将鼠标光标置于“音乐：”后面的单元格内，然后在菜单栏中
4、选择【插入】【表单】【复选框】命令，插入6个复选框，其中第一个复选框的参数设置如图所示，其他参数的设置依此类推。 14.将鼠标光标置于“自我介绍：”后面的单元格内，然后在菜单栏中选择【插入】【表单】【文本区域】命令，插入一个文本区域，如图所示。,15.将鼠标光标置于“自我介绍”下面的单元格内，然后在菜单栏中选择【插入】【表单】【隐藏域】命令，插入一个隐藏域来记录用户的注册时间，在【属性】面板中设置其属性参数，如图所示。 16.将鼠标光标置于“自我介绍：”下面的第2个单元格内，然后在菜单栏中选择【插入】【表单】【按钮】命令，插入两个按钮，并在【属性】面板中设置其属性参数，如图所示。,17.在“请
5、阅读服务协议，并选择同意：”的后面插入一个复选框，属性设置如图所示。 18.在“请阅读服务协议，并选择同意：”下面的单元格内插入一个文本区域，属性设置如图所示 。,19.保证刚插入的文本区域处于选中状态，然后切换到【代码】视图，在“textarea”标签中加入代码“readonly=”readonly“”，设置该文本区域的内容为“只读”，如图所示。 20.将鼠标光标置于表单内，单击左下方的“”标签，选中整个表单，可以在【属性】面板中设置表单属性，此处暂不设置，如图所示。,任务二 验证表单,【操作步骤】 1.将鼠标光标置于表单内，单击左下方的“”标签，选中整个表单，然后在菜单栏中选择【窗口】【行
6、为】命令，打开【行为】面板，单击按钮，在弹出菜单中选择【检查表单】命令，打开【检查表单】对话框，如图所示。,2.将“UserName”、“E-mail”、“PassWord1”、“PassWord2”的【值】设置为“必需的”，其中“E-mail”的【可接受】选项设置为“电子邮件地址”，其他3个【可接受】选项设置为“任何东西”，并将“introduce”的【可接受】选项设置为“任何东西”，然后单击按钮，完成设置。 3.在【行为】面板中检查默认事件是否为【onSubmit】，如图所示。,4.在表单中右键单击按钮，在弹出的菜单中选择【编辑标签E】命令，打开【标签编辑器input】对话框，如图所示。,5.在对话框中选中【onClick】事件，在右侧的文本框中输入下图所示代码，然后单击 按钮，完成设置并保存网页。 6.预览网页，当两次输入的密码不相同，单击按钮时会自动弹出警示框，单击 按钮，表单不提交，回到密码域中，如图所示。,7.重新对 按钮的【onClick】事件进行编辑，在原有代码的基础上接着添加下图所示的代码， 8.保存网页后再次预览网页，两次输入相同的3位密码，也会出现警告窗口，如图所示。验证表单的工作至此就完成了。,
