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

《项目3 主页的设计与制作(四 登陆界面)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、项目3主页的设计与制作项目3主页的设计与制作（四管理员登录部分制作）能力目标：1．会在网页中制作表单2．会使用JavaScript脚本代码完成客户端信息完整性的检查3．会使用ASP内置对象来处理客户端提交的信息4．能为表单加入验证码5．会使用SQL语句检查用户名，完成登录验证知识目标：1.了解表单的一般工作流程2.认识ASP的内置对象3.理解SQL语句的使用方法【任务1】建立登录表单，并将表单提交给logincheck.asp处理，如图1所示。图1登录表单【任务分析】动态网站中实现信息的交互通过表单来完成。表单，在网页中起到为访问者与服务器之间交流架设平台的作用，访问者与服务器的交流是

2、交互的，一方面通过表单，访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。另一方面，服务器接收到这些信息后，调用脚本或应用程序对这些信息进行处理，并反馈给访问者。例如，在网上常见的申请免费邮箱页面，就是一个表单，访问者填写如用户名、密码、性别、爱好等相关信息后，按下“提交”按钮，提交给服务器进行处理，服务器端程序自动检查填写是否符合规范或用户名是否有重名等，并将信息反馈。除此以外，表单的通常应用有调查表、填写注册、电子商务订单和信息搜索等。【操作步骤】1.进入Dreamweaver，在站点文件夹ClassWeb下新建文件夹logi

3、n，并在login文件夹下新建文件login.asp，双击login.asp文件，进入“设计”视图状态。2.创建表单域表单域，其作用就是把各对象作为一个整体进行处理，一个页面可以包含多个表单域，在同一表单域中的对象是一个整体，与另一个表单域中的对象一般是不相干的。创建表单域的步骤：（1）在插入工具栏中选择“表单”，以显示出表单工具栏（若没有出现插入工具栏，执行“窗口”→“插入”命令），如图2所示。项目3主页的设计与制作图2插入工具栏中表单选项（1）单击【表单】按钮，即可以在页面中出来一个红色虚线围住的区域，就是表单域。若没有看到创建的表单，通过“查看”/“可视化助理”/“不可见元素”命

4、令，来隐藏或显示表单。2.插入表格（1）光标定位于表单域中，执行“插入”→“表格”命令（或在插入工具栏中选择“常用”，单击【表格】按钮），将弹出“表格”对话框，如图3所示。图3表格对话框（2）输入行数和列数，以插入一个4行2列的表格。（3）选中表格，在表格属性面板设置表格的宽与高（根据主页效果图中管理员登录表单中切片的大小来确定），设置表格边框粗细为0，表格的背景色依据主页效果图中的效果来确定，在背景色或背景图像中进行设置，如图4所示。图4表格属性面板3.在表格第一列中输入文字，在表格第二列中添加表单对象。在该任务中涉及到两类表单对象，各对象及其属性设置如下：（1）文本字段文本字段的作

5、用是提供访问者输入文字，如图中的“用户名”、“密码”和“验证码输入框。选中各文本字段，在属性面板中进行属性设置，如图5、图6和图7所示。图5“用户名”文本字段属性设置项目3主页的设计与制作图6“密码”文本字段属性设置图7“验证码”文本字段属性设置Ø文本域：即文本字段的名称（如图中的username），服务器端是根据该名称（变量）来获取输入的值的。Ø字符宽度：文本字段在页面占的位置宽度。Ø类型：分为单行、多行和密码。如选为密码，则访问者所输出字符均显示为“*”。Ø初始值：文本字段的初始值。（1）按钮在表单中输入信息完毕，向服务器提交信息时使用，如“登录”、“重置”按钮。选中各按钮，在属性

6、面板中进行属性设置如图8、图9图图所示。图8“登录”按钮属性设置图9“重置”按钮属性设置Ø按钮名称：给按钮所取的名称。Ø值：按钮的标题，如“登录”、“重置”等。Ø动作：提交表单、重置表单、无三个单选项。“提交表单”是将表单中所填入的内容提交给服务器处理。“重置表单”则是清空表单中填入的内容。选择“无”则既不提交也不重设，但可以执行给按钮指定的动作。1.将表单提交给logincheck.asp处理单击“设计”视图下方标签选择器处的“form#form1”，选中表单，在表单属性面板中进行属性设置。在“动作”框中输入“logincheck.asp”，“目标”框中输入“_parent”，如图1

7、0所示。图10“表单”属性设置【任务2】使用JavaScript脚本代码完成客户端表单输入数据不能为空的检查具体要求：当没有输入用户名，单击【登录】按钮时，弹出对话框提示“请输入用户名！”，如图11所示。当输入了用户名没有输入密码，单击【登录】按钮时，弹出对话框提示“请输入密码！”，如图12所示。当输入了用户名和密码，但没有输入验证码，单击【登录】按钮时，弹出对话框提示“请输入验证码”，如图13所示。项目3主页的设计与制作图11提示“用户名”不