利用Dreamweaver制作密码.doc

利用Dreamweaver制作密码更改网页（一、登录网页制作） 一、制作环境。计算机操作系统为：Windows XP Professional、Windows 2000、Windows 2003均可，需安装IIS （Internet 信息管理服务器）。制作网页软件：Dreamweaver MX 2004。制作扩展软件：checkform.mxp。下载网址： .。其他版本如DreamweaverMX、Dreamweaver8等用同样的方法也应当没有有问题。数据库：Access2003（是Microsoft Office2003的配套软件、也可以使用Mysql等数据库）。二、设置站点文件夹。在D盘中新建一个文件取名为：my_text ，打开此文件夹，在其中再设一个文件夹取名为：database，以存放Access数据库数据。三、进行Web服务器设置。顺序选择“开始”“设制”“控制面板”“性能和维护”“管理工具”“Internet信息服务”，点击第一个图标前的“+”号，再点击“网站”前的“+号”，紧接着右键单击“默认网站”，在出现的菜单中选择“属性”，在属性对话框上选择“主目录”标签，在弹出的对话框的“本地路径”框中利用“浏览”按钮选择站点文件夹及路径：D：/my_text，选中后确认。这样本机Web服务器设置完成。在站点设置、测试服务器设置完成后，可以正常使用F12键或点击文件工具栏上的预览图标在IE浏览器中进行预览，检查制作效果。否则不能实现预览。四、设置密码数据库。启动Access ，在右侧的窗口中选择“空数据库”。在出现的对话框中将数据库名改为：sujiku01，利用对话框中的“保存位置”框右侧的箭头选定数据库存储的位置：即D盘的my_text文件夹内的database 文件夹中。也就是说数据库的位置是：D：/my_text/database/sujiku01.mdb。选择确定之后得到如图1所示的对话框。图1选择双击“使用设计器创建表”得到如图2所示的表格，在其中设置字段。图2第一行“字段名称”中输入my_id（名称可以随意，但最好不用拼音或英文字母，并有利于识别，下同），并设为主键，方法是右键单击此字段，在出现的菜单中选择“主键”项。在“数据类型”中选择“自动编号”。选择方法是点击此格中击左键，再点击向下的箭头图标，从弹出的菜单中进行选择。第二行“字段名称”中输入ming（用户名字段），在“数据类型”中选择“文本”，在下面的“字段属性”窗口中查看一下默认值是否达到要求。字段部份默认值为50英文字符合25个中文字，作为用户名已足够，不需修改。第三行“字段名称”中输入mima（密码字段），在“数据类型”选择“文本”，字段属性窗口仍然使用默认值。第四行“字段名称”中输入yemima（确认密码字段），其他仍采用默认值。完成后关闭创建表。选定表格名为beou01，存盘。数据库设置完成。打开beou01，第一列字段中不用输入数字，在第二列以后的字段中均输入“admin”，以备以后进行修改。五、下载并安装扩展软件下载网址前面已介绍，下载完成后启动它，按照进提示行安装。注意安装完成后要重新启动一次Dreamweaver。用如下的方法可以检查这个扩展软件是否安装成功：单击Dreamweaver 右边的“标签检查器”功能面板，再选择“行为”标签中的“+”号，在展现的菜单中应有一个“yaromat”项，点击它在其右侧如果有“Check Form ”项则表明安装成功。六、设置站点制作网页和进行数据库连接。具体方法在本工作室中的“教材教程”栏目中的“数据库的基本知识”中的“设置网页站点”一节和“教学在线”栏目中的“在线练习的设计与制作（一）、（二）、（三）”中已有详细介绍。不同的是采用了不同的数据库连接方式。七、在站完成站点设置的Dreamweaver窗口右侧启动“文件”功能板，选择“文件”标签。图3得到如图3所示的图形。分别右键单击站点-my_text，新建三个文件my_index.asp、mylogin.asp、xugi_login.asp。三个文件，其中前两个是为了验证设置的效果，xugi_login.asp是更改密码的网页。在my_index.asp网页中输入文字：“已登录成功！”。在其下方分别输入：“返回”和“修改密码？”两组文字。“返回”连接到mylogin.asp网页。“修改密码？”连接到xugi_login.asp。网页。 “在mylogin.asp中制作如图4所示的网页。图4其中红色虚线是表单区域。制作顺序：新建并启动mylogin.asp文件。选择菜单栏中的“插入”，在菜单中选择“表单”，中的“表单”。即可得到一条红色的虚线框，框内即为表单区。将光标移到表单区内，然后在菜单栏内选择“表格”图标，在出现的对话框中选择4行、2列，表宽为300点。如图4合并第1、4行，在第1行中输入：“登录系统”，在第4行中输入相关的按钮。方法如下：打开菜单栏中的“插入”，选择“表单”在菜单中选择“按钮”，下部的属性窗口的“动作”中选择“提交表单”。再以同样的操作选择一次“按钮”在出现的属性窗口的“动作”中选择“重设表单”。如需要调整位置，点击表格，在下部的属性窗口的“对齐”框内选择“居中对齐”。如需要调整两个按钮的位置，将光标移到两个按钮中间，同时压住“Shift+Ctrl”再按压“空格键”即可进行调整了。下一步工作是网页与数据库的连接。本例的数据库名是：sujiku01，扩展 名为mdb，路径：D:/my_text/database/sujiku01.mdb。数据表名：beou01。数据库的连接操作请参考前面提供的参考资料，这里只强调一点，连接名本例为：cccoon，记录集名为recordset1。设定数据库已按上述资料提供的方法正常连接。选择“运用程序”功能板面的“绑定”标签，点击记录集名前的“+”号，即可以看到数据表中的所有字段。将光标移到图4 所示的用户名右侧的表格内，打开菜单栏上的“插入”，在菜单中选择“表单”，再选择“文本字段”。在下面的属性窗口的“文本域”下的框内输入：“ming”（用户名字段）如图5所示。图5再将光标移到密码右边的表格内重复一次上面的操作。只不过在下部的属性窗口的“文本域”框内输入名：“mima”（密码字段）。再下一步是用户登录验证设置。选择“运用程序”功能面板。点击“服务器行为”标签，单击“+”号。在菜单中选择“用户身份验证”中的“登录用户”。出现如图6所示的对话框。图6按照图6所示进行选择设置。最后确定。这样就完成了登录验证网页的设置。可以F12, 进入IE浏览器，并在其中分别输入 admin、admin，提交就可以进入，“已登录成功！”的网页。如果想返回点击“返回”，如果想修改密码，点击“修改密码？”。下一节介绍修改密码网页xugi_login.asp的制作过程。窗体顶端窗体底端利用Dreamweaver制作密码更改网页（二、密码更改网页） 一、登录验证系统，它的功能是只有输入正确的用户名和密码，才能够通过验证才能得以进入有关程序、网页。如果不知道用户名和密码就不可能通过验证。但是，要长久地保证密码不被别人知道的最好办法是经常更改密码。下面就来介绍一种利用Dreamweaver来制作更改密码的网页的方法。在前一节工作的基上，首先确认，扩展程序“checkform.mxp”已正确安装。打开前节新建的“xugi_login.asp”文件，仍然采用上节的方法在此网页中制作如图7所示的页面。图7制作方法过程完全相同，不同的是在此网页的表格中增加了一行作“确认密码”，和一行提示行。在按钮行中增加了一个“返回”按钮。此按钮的“动作”属性选择“无”，“标签”框内的文字改为“返回”。至于数据库的连接和记录集的设定都可以沿用上一节的设定。在“输入用户”右边单元格内输入的文本字段表单，其文本域名的设定参见上节的图5。仍然取名为ming（数据库数据表用户名字段）。“输入密码”右边单元格内的文本域表单的文本域名设为：“mima”（数据库数据表），属性窗口中“类型”一项选择“单行”不选择“密码”。“确认密码”右边单元格内的文本域表单，其文本域名设定为：yemima（确认密码字段），属性窗口的“类型”一项也选择为“单行”不选“密码”，这样做的目的是在输入密码和确认密码时，都能看到输入的密码文字，而不是圆点符号便比较。再分别点击以上三个文本域表单单元格，以确认文本域对应的字段名是否正确。选择“应用程序”功能面板的“绑定”标签，点击纪录集前的“+”号，打开其中的细节。用鼠标选中ming字段并压住左键不放将此字段拖到“输入用户名”右边的文本域表单格内。其效果见图7所示的网页。同样选中mima字段将其拖入到“输入密码”右边的文本域表单格内，文件存盘。二、网页密码修改验证设置。主要有以下两种设置。首先是密码修改表格的各输入单元应设为必选单元。如果某项未输入信息，应有提示。另外输入密码与确认密码单元的密码应完全相同，如不相同应有提示。这个过程如果用源代码是可以设计一组程序来完成。利用Dreamweaver软件进行可视化操作也可以方便完成，这里介绍一种利扩展程的方法来完成。选择“标签检查器”功能板，点击“行为”标签中的“+”号，在出现的菜单中选择“yaromat”再选“chcek Form”项。这时展开一个如图8所示的对话框。图8如图8所示，在上部的字段框中点选ming（文字翻白，背景蓝色）。钩选“Required”项。在下部的 “Error Message”框内输入“请输入用户名！”。下一步，在对话框的上部字段框内再点选mima字段其设置主法见图9。图9 再进一步选择上部字段框内的yemima项，设置如图10。所示。三步设置完成后选择“确定”。下一步选择“应用程序”功能板的“服务器行为”标签中的“+”号，在菜单中选择“更新记录”项。注意决不能选择“插入记录”。否则修改密码变成添加密码了。图10更新记录对话框及设置如图11所示。图11 设置完成后选择确定。利用F12键进行测试，当出现修改密码网页后，在输入密码等栏内会出现原有的密码，如需要修改，可在原来的基础上进行增添修改，如需完全更换可将其删除后重新输入新的用户名和密码。提交后，只有新密码才起作用。完成后根据“在更新后，转到”框内的设置，立即转到mylogin.asp登录系统网页。当然可以根据实际要求转到其他的网页。最后一项是“返回”按钮的设置，主要目的是当不想修改密码时按压此键可返回到原来的网页。方法是选择“返回”按键。在工作窗口下面，属性窗口的上方有一个标签选取栏，在此栏上会出现一个“input”标签。右键单击，在出现的信息框中“”括号之内添加：Onclik=“window.history.back();”，存盘后即可。现在可以尝试一下修改密码的效果。当完成密码修改之后，在登录系统网页中试用新老密码进行登录，就可以看到效果了。更改密码网页制作的方法不止这一种，这个方法仅供交流参考。在实践中要注意的是，如果需要修改某项功能，要将此项原有的功能彻底删除后再重新设置。特别是扩展功能，如不注意删除原来设置的功能再设置时，会出现重复设置、重复显示，造成调试的麻烦。这里还存在一个问题，如果知道文件名就可以不经过登录验证，直接进入密码修改网页，有什么办法防止呢？在Dreamweaver中可以这样设置；当全部调试工作完成后。打开xugi_login.asp文件，启动右侧的“应用程序”功能板，选定“服务器行为”标签中的“+”号。，在展开的菜单中选择“用户身份验证”，再点击“限制对页访