项目3主页的设计与制作(四登陆界面).docVIP

项目3 主页的设计与制作（四 管理员登录部分制作） 能力目标： 会在网页中制作表单 会使用JavaScript脚本代码完成客户端信息完整性的检查 会使用ASP内置对象来处理客户端提交的信息 能为表单加入验证码 会使用SQL语句检查用户名，完成登录验证 知识目标： 了解表单的一般工作流程 认识ASP的内置对象 理解SQL语句的使用方法 【任务1】 建立登录表单，并将表单提交给logincheck.asp处理，如图1所示。 图1 登录表单 【任务分析】 动态网站中实现信息的交互通过表单来完成。表单，在网页中起到为访问者与服务器之间交流架设平台的作用，访问者与服务器的交流是交互的，一方面通过表单，访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。这些信息，脚本或应用程序对这些信息进行处理Dreamweaver，在站点文件夹ClassWeb下新建文件夹login，并在login文件夹下新建文件login.asp，双击login.asp文件，进入“设计”视图状态。 创建表单域 表单域，其作用就是把各对象作为一个整体进行处理，一个页面可以包含多个表单域，在同一表单域中的对象是一个整体，与另一个表单域中的对象一般是不相干的。创建表单域的步骤： 在插入工具栏中选择“表单”，以显示出表单工具栏（若没有出现插入工具栏，执行“窗口”→“插入”命令），如图2所示。 图2 插入工具栏中表单选项 单击【表单】按钮，即可以在页面中出来一个红色虚线围住的区域，就是表单域。 若没有看到创建的表单，通过“查看”/“可视化助理”/“不可见元素”命令，来隐藏或显示表单。 插入表格 光标定位于表单域中，执行“插入”→“表格”命令（或在插入工具栏中选择“常用”，单击【表格】按钮），将弹出“表格”对话框，如图3所示。 图3 表格对话框 输入行数和列数，以插入一个4行2列的表格。 选中表格，在表格属性面板设置表格的宽与高（根据主页效果图中管理员登录表单中切片的大小来确定），设置表格边框粗细为0，表格的背景色依据主页效果图中的效果来确定，在背景色或背景图像中进行设置，如图4所示。 图4 表格属性面板 在表格第一列中输入文字，在表格第二列中添加表单对象。在该任务中涉及到两类表单对象，各对象及其属性设置如下： 文本字段 文本字段的作用是提供访问者输入文字，如图中的“用户名”、“密码”和“验证码输入框。选中各文本字段，在属性面板中进行属性设置，如图5、图6和图7所示。 图5 “用户名”文本字段属性设置 图6 “密码”文本字段属性设置 图7“验证码”文本字段属性设置 文本域：即文本字段的名称（如图中的username），服务器端是根据该名称（变量）来获取输入的值的。 字符宽度：文本字段在页面占的位置宽度。 类型：分为单行、多行和密码。如选为密码，则访问者所输出字符均显示为“*”。 初始值：文本字段的初始值。 按钮 在表单中输入信息完毕，向服务器提交信息时使用，如“登录”、“重置”按钮。选中各按钮，在属性面板中进行属性设置如图8、图9所示。 图8“登录”按钮属性设置 图9 “重置”按钮属性设置 按钮名称：给按钮所取的名称。 值：按钮的标题，如“登录”、“重置”等。 动作：提交表单、重置表单、无三个单选项。 “提交表单”是将表单中所填入的内容提交给服务器处理。 “重置表单”则是清空表单中填入的内容。 选择“无”则既不提交也不重设，但可以执行给按钮指定的动作。 将表单提交给logincheck.asp处理 单击“设计”视图下方标签选择器处的“form#form1”，选中表单，在表单属性面板中进行属性设置。在“动作”框中输入“logincheck.asp”，“目标”框中输入“_parent”，如图10所示。 图10“表单”属性设置 【任务2】 使用JavaScript脚本代码完成客户端表单输入数据不能为空的检查 具体要求：当没有输入用户名，单击【登录】按钮时，弹出对话框提示“请输入用户名！”，如图11所示。当输入了用户名没有输入密码，单击【登录】按钮时，弹出对话框提示“请输入密码！”，如图12所示。当输入了用户名和密码，但没有输入验证码，单击【登录】按钮时，弹出对话框提示“请输入验证码”，如图13所示。 图11 提示“用户名”不能为空 图12 提示“密码”不能为空 图13 提示“验证码”不能为空 【任务分析】 在表单提交到服务器前完成表单数据的校验，速度快，效率高，减轻了服务器端的压力。在客户端完成表单数据的校验可以使用VBScript脚本代码也可以使用Javascript脚本代login.asp的“代码”视图方式，在登录表单按钮代码上方的任意位置（建议在bo