用DreamweaverCS6制作登录页面

在用户访问该登录系统时，首先要进行身份验证，这个功能是靠登录页面来实现的。如果输入的用户名和密码与数据库中已有的用户名和密码相匹配，则登录成功，进入到welcome.asp页面；如果输入的用户名和密码与数据库中已有的用户名和密码不符，则登录失败，进入显示登录失败的页面loginfail.asp。

制作的步骤如下。

（1）首先来看登录系统中都包含哪些内容。当进入站点后，看到的是登录系统的页面，图4-29所示为登录系统的首页。

图4-29 登录系统主页面

（2）default.asp页面是这个登录系统的首页，也是用于输入登录信息的页面。打开刚创建的default.asp页面，输入网页标题“注册”，执行菜单栏【文件】→【保存】命令。

（3）执行菜单栏上的【插入】→【表格】命令，打开【表格】对话框，在【行数】文本框中输入需要插入表格的行数2，在【列数】文本框中输入需要插入表格的列数1，在【表格宽度】文本框中输入400像素，其他的保持默认值，如图4-30所示。

（4）单击【确定】按钮，在该表单中插入2行1列的表格。将鼠标放置在第一行表格中，单击【常用】工具栏上的【图像】图标，打开【选择图像源文件】对话框，在站点中选择images文件下的regbanner.gif图片，如图4-31所示。

图4-30 插入表格

图4-31 设置【选择图像源文件】对话框

（5）单击【确定】按钮，在表格中插入装饰用的图片，如图4-32所示。

图4-32 插入图片的效果

（6）按<Shift+Enter>组合键进行换行操作，输入“用户登录页面”并单击【属性检查器】面板上的【右对齐】按钮，然后在【文本颜色】文本框中输入文字的颜色值为#00B7FF。完成后的效果如图4-33所示。

图4-33 输入说明文字效果

（7）拖动鼠标选择整个插入的表格，在【属性检查器】中设置【边框】值为1，如图4-34所示。

图4-34 设置表格边框属性

（8）用鼠标单击表格的第2行，执行菜单栏中的【插入】→【表单】→【表单】命令，如图4-35所示，插入一个表单。

图4-35 执行插入表单命令

（9）将鼠标指针放置在该表单中，执行菜单栏上的【插入】→【表格】命令，打开【表格】对话框，在【行数】文本框中输入需要插入表格的行数2，在【列数】文本框中输入需要插入表格的列数3，在【表格宽度】文本框中输入400像素，其他的设置保持默认值，如图4-36所示。

（10）单击【确定】按钮，在该表单中插入2行3列的表格，在表格的第一列中分别输入文字说明“用户名：”和“密码：”，在第二列表格中单击【文本域】按钮，分别插入两个单行文本域表单对象，定义两个文本域名分别为username和password。为了让没有注册的浏览者方便注册，需要在表格的第一行的第三列中输入“新用户注册”文本，并设置该文本为一个切换到用户注册页面register.asp的链接对象，以方便新用户注册。输入的效果如图4-37所示。

图4-36 插入表格

图4-37 建立说明链接

（11）如果已经注册的用户忘记了密码，希望以其他方式能够重新获得密码，可以在表格的第二行的第三列中输入“取回密码”文本，并设置该文本为一个切换到取回密码页面lostpassword.asp的链接对象，以方便用户取回密码，如图4-38所示。

图4-38 取回密码设置

（12）在表单中插入用于提交用户名和密码的表单对象，和一个用于重新填写登录信息的表单对象。按<Enter>键换行，分别执行两次菜单栏中的【插入】→【表单】→【按钮】命令，插入两个按钮，并分别在【属性检查器】面板中进行属性变更，一个为登录时用的“提交表单”选项，一个为“重设表单”选项，【属性检查器】的设置如图4-39所示。

图4-39 设置【属性检查器】

（13）表单编辑完成后，下面来编辑该网页的动态内容，使用户可以通过该网页中表单的提交实现登录功能。执行菜单栏中的【窗口】→【服务器行为】命令，打开【服务器行为】面板。单击该面板上“+”按钮，从打开的菜单中选择【用户身份验证】→【登录用户】命令，如图4-40所示，向该网页添加登录用户的服务器行为。

（14）此时，打开如图4-41所示的【登录用户】对话框，由于该对话框中需要设置的参数较多，下面一步一步进行介绍。

(www.xing528.com)

图4-40 添加【登录用户】的服务器行为

图4-41 【登录用户】对话框

（15）【登录用户】对话框的第一部分用来设置表单中的文本域的功能，进行如下设置。

●从【从表单获取输入】下拉菜单中选择该服务器行为使用网页中的form1表单对象中浏览者填写的对象。

●从【用户名字段】下拉列表中选择文本域username对象，设定该用户登录服务器行为的用户名数据来源为表单的username文本域中浏览者输入的内容。

●从【密码字段】下拉列表中选择文本域Password对象，设定该用户登录服务器行为的用户名数据来源为表单的Password文本域中浏览者输入的内容。

（16）【登录用户】对话框的第二部分是用来设置服务器行为使用到数据源连接的一些参数。

●从【使用连接验证】下拉菜单中选择用户登录服务器行为使用的数据源连接对象为connuser。

●从【表格】下拉菜单中选择该用户登录服务器行为使用到的数据库表对象为user。

●从【用户名列】下拉菜单中选择表user存储用户名的字段为username字段。

●从【密码列】下拉菜单中选择表user存储用户密码的字段为password字段。

完成后的设置如图4-42所示。

图4-42 设置数据源连接

（17）【登录用户】对话框的第三部分用来设置用户登录成功或失败时分别转向的页面。

●在【如果登录成功，转到】文本框中输入登录成功后，转向welcome.asp页面。

●在【如果登录失败，转到】文本框中输入登录失败后，转向loginfail.asp页面。

这两个网页将在后面再单独进行编辑。

兼职指导：

如果选中【如果登录成功，转到】栏的【转到前一个URL（如果它存在）】复选按钮，则登录成功后浏览器会回到浏览default.asp的前一页。

（18）【登录用户】对话框的最后一部分是用来设置后面设定用户浏览权限所要用到的一些参数。

●选择【基于以下项限制访问】后面的【用户名、密码和访问级别】单选按钮，设定后面将根据用户的用户名、密码及权限级别共同决定其浏览网页的权限。

●然后从【获取级别自】下拉菜单中选择Authority字段，表示根据Authority字段的数字来确定用户的权限级别。

完成后的设置如图4-43所示。

图4-43 设置访问权限

通过以上四个步骤完成设置工作。最后得到的对话框如图4-44所示。

图4-44 设置完成后的【登录用户】对话框

（19）设置完成后，单击【确定】按钮，关闭该对话框，返回到【文档】窗口。在【服务器行为】面板中增加了一个【登录用户】行为，如图4-45所示。

（20）同时，可以看到表单对象对应的【属性检查器】面板的动作属性值为<%=MM_LoginAction%>，如图4-46所示。它的作用就是实现用户登录功能，这是一个Dreamweaver CS6自动生成的动作对象。

图4-45 【服务器行为】面板

图4-46 表单对应的【属性检查器】面板

（21）执行菜单栏中的【文件】→【保存】命令，将该文档保存到本地站点中。