Dreamweaver制作动态网页

Dreamweaver制作动态网页DSN数据源的设置Dreamweaver站点的定义注册与登录设计留言板设计注册与登录设计对于一个具有动态页面的网站来说，最重要的就是与用户进行交互，为了得到稳定的客户源，或其他原因，需要用户注册成为网站的会员才能使用网站的其他功能。因此，必须设计一个让用户可以注册以及登录的网页。总体设计：主要包含以下几项：配置ODBC数据源；编写一个与数据库进行连接的ASP文件；设计登录页面；设计一个注册的页面；编写对数据库进行操作的相关ASP文件；编写对登录/注册操作成功/失败进行处理的页面。详细设计：一、分析网站设计内容，划分出页面组成及元素二、确立数据库及建立数据库表三、配置设计环境四、设计登录页面五、设计注册页面一、分析网站内容，划分页面组成及元素中文名文件名对象名类型备注登录页面Login.asp用户名称文本域用户密码文本域注册按钮转到注册页面登录按钮提交登录表单注册页面Register.asp用户名文本域类型为单行密码文本域类型为密码确认密码文本域类型为密码注册按钮动作为无清除按钮动作为重设表单注册成功页面RegisterSuccess.html登录链接转到登录页面注册失败页面RegisterFailure.html返回链接转到注册页面登录成功页面Main.html返回链接提示登录成功登录失败页面LoginFailure.html返回登录页面链接转到登录页面注册新用户链接转到注册页面二、确立数据库及建立数据库表建立一个名为USER的Access数据库，在这个数据库里面只需要一个数据表USER。数据表中各字段设计如下表：字段名称数据类型字段大小必填字段允许空字符串备注User文本18是否用户名，主键Password文本18是否密码在Access中实现建立数据库清单步骤：1、启动MicrosoftAccess，单击右侧“新建文件”任务窗格中的“空数据库”选项，则会弹出“文件新建数据库”对话框，提示数据库保存的位置，数据库名为user.mdb。保存完毕后，显示新建的user数据库开始界面。2、在新建的数据库开始界面中双击“使用设计器创建表”选项，打开表设计器设计数据表。在设计器“字段名称”列中分别输入上页数据表中的字段名称，然后在“数据类型”下拉列表项中选择该字段的数据类型。然后在下面常规选项卡中对字段大小、格式、必填字段、是否允许空字符串等进行设置。3、对于用户名和密码字段的设计，其大小一般用户名限制在20位以内，密码限制在15位以内。对密码字段一定进行加密，最简单的办法是单击Password字段的“输入掩码”栏，再单击右边显现的…按钮，弹出“输入掩友向导”对话框。在“输入掩码”列表框中选中“密码”一栏，单击“完成”按钮。这样，在数据表中的密码就全部以*表示了。4、选择user字段，然后右击鼠标，在弹出的快捷菜单中选择“主键”命令，将此字段设置为主键。最后执行菜单栏上的“文件-保存”命令，将弹出“另存为”对话框，将此表保存为user。5、双击user数据表，向数据表中输入用户名和密码，数据库建立完成。三、配置设计环境1、定义IIS站点先在硬盘上建立一个用来存放站点上以后所要建立起来的网页的目录，命名为mysite。将IIS默认站点的名字更改为自己想要的名称。然后将本地网站上建立一个虚拟目录，别名为刚才在硬盘上建立的目录mysite。2、建立Dreamweaver站点在Dreamweaver8起始页执行菜单栏的“站点-管理站点”命令，在打开的“管理站点”对话框中单击“新建”按钮，来新建一个Dreamweaver站点。步骤为：（1）在Dreamweaver8菜单栏中选择“站点-管理站点”命令，打开“管理站点”对话框，在对话框中单击“新建”按钮，然后在弹出的菜单中选择“站点”命令，将弹出“站点定义为”对话框。（2）在对话框中默认显示的是“基本”选项卡，在“基本”选项卡中可以根据向导来定义站点，也可以用“高级”选项卡来定义站点。在“名称”文本框中，输入站点名字“我的小站”，单击下一步，进入下一界面。（3）此页面询问是否使用服务器技术，选中“是，我想使用服务器技术”单选钮。然后在“哪种服务器技术”下拉列表中选择服务器使用的动态网页技术，单击“下一步”，进入下一页面。（4）在此页面中会询问如何使用文件的问题，可以选中“在本地进行编辑和测试”，并在此页面的文本框中输入或选择文件在计算机中的路径。单击“下一步”，进入下一页面。（5）在此界面会询问如何连接到测试服务器，可以在其下拉列表中选择“本地/网络”然后在下面文本框中输入测试文件夹在服务器上的位置。单击“下一步”，进入下一界面。（6）在此界面中需要设置浏览站点的URL，并单击“测试URL”按钮来检查输入的URL是否正确。单击“下一步”，进入下一界面。（7）在此界面中，从对话框中选择“否，不启用存回和取出”单选钮，单击“下一步”，进入下一界面。（8）在此界面中将显示刚才定义的站点信息，检查设置的信息有没有错误。如果正确单击完成“按钮”。3、建立数据源根据ODBC数据源知识，新建一个名为login的系统DSN，在数据源名文本框中输入“login”-选择数据库“user.mdb”。步骤为：（1）执行“开始-设置-控制面板”命令，或者执行“开始-程序-管理工具”命令，在“管理工具”窗口中双击“数据源”图标，将打开“ODBC数据源管理器”对话框。（2）在“文件DSN”选项卡中，单击“添加”按钮，将弹出“创建新数据源”对话框，提示用户选择数据源的驱动程序。（3）选择一个合适的数据源驱动程序，“DriverdoMicrosoftAccess(*.mdb)”，然后单击“下一步”按钮，进入下一页面。（4）在对话框中输入要创建的DSN文件的名称，也可以单击“浏览”按钮，在弹出的对话框中选择或者创建一个合适的DSN文件。如输入login，单击下一步，进入下一页面。（5）此时会显示刚才配置的数据源信息。当检查配置正确后，可单击“完成”按钮，将弹出“ODBCMicrosoftAccess安装”对话框。（6）单击“选择”按钮，在弹出的对话框中选择一个合适的数据库文件，也可以单击“创建”按钮，在弹出的对话框中创建一个新的数据库。（7）此时在“文件DSN”选项卡中，可以看到刚创建的文件DSN出现在其中，单击“确定”按钮，关闭“ODBC数据源管理器”对话框。4、建立数据库连接在Dreamweaver8窗口中，打开“应用程序”面板组，在“数据库”面板上按照提示完成“为该文件创建站点”、“选择一种文档类型”和“设置站点的测试服务器”操作后，单击面板左上角的“+”按钮，在弹出的菜单中选择“数据源名称”命令，将弹出“数据源名称”对话框，在“连接名称”文本框中输入“conn”，在“数据源名称”下拉列表中选择刚才建立的系统DSN名称“login”，然后单击“测试”按钮，可以看到一个表示连接成功的对话框，单击“确定”按钮，就完成了数据库连接的配置。Dreamweaver8自动生成了一个“Connections”的文件夹以及一个名为“conn.asp”的文件。四、设计登录页面启动Dreamweaver8，设计登录页面，具体步骤如下：1、在Dreamweaver8的起始页中选择创建ASP文件，保存为“Login.asp”。2、在工作区的文档窗口中选择“设计”视图，在文档工具栏的“标题”文本框中输入“用户登录”，然后单击“表单”插入栏中的“表单”按钮，在设计视图中添加一个表单，名称设为Login。3、在表单中添加一个4行2列的表格，将表格的“边框属性”设置为0，表示看不到表格边框。在文档窗口下方的状态栏上单击table标签，选整个表格，再在“属性”面板中将表格“对齐”方式设置为“居中对齐”。4、选中整个表格，在“属性”面板中的“背景图像”文本框中为表格设置背景图片，并将第一行的单元格合并为一行。5、向表格中添加用户名称、用户密码文本域以及注册和登录按钮，再在上面添加文字说明。6、因为注册按钮不进行提交表单的操作，所以要对它进行一些设置。在设计视图中选择注册按钮，在属性面板中单击右边的“快速标签编辑器”图标，在“编辑标签”文本框内添加如下代码。onClick=”location.href=’register.asp’”此段代码表示如果单击注册按钮，将会跳转到“注册页面”。7、在完成页面设计后，现在利用Dreamweaver的“服务器行为”来完成对“登录”过程的操作和处理。首先在设计视图中，将光标移到Login表单内，然后在“应用程序”面板组的“服务器行为”面板上单击左上角的“+”号按钮，在弹出的菜单中选择“用户身份验证-登录用户”命令，在弹出的“登录用户”对话框中进行设置。设置内容参见下表：对象名值从表单获取输入Login用户名字段Username密码字段Password使用连接验证Conn表格User用户名列Username密码列Password如果登录成功，转到Main.html如果登录失败，转到LoginFailure.html基于以下项限制访问用户名和密码五、设计注册页面注册页面与登录页面的设计类似，页面元素的具体设置如下表所示：对象名称备注表单RegisterForm方法为POST文本域UserName最多字符数为18文本域Password最多字符数为12文本域cPassword最多字符数为12按钮Submit动作为无按钮Cancel动作为重设表单完成网页设计后，就可以利用Dreamweaver的“服务器行为”来完成对“注册”过程的操作和处理。其具体步骤如下：1、在文档窗口的设计视图中，将光标移到RegisterForm表单内，在“应用程序”面板组中的“服务器行为”面板中单击左上角的“+”按钮，在弹出的菜单中选择“插入记录”命令，将弹出“插入记录”对话框。2、“插入记录”对话框里的各项设置如下表：对象名值备注连接Conn数据库连接插入到表格User向user表中插入数据插入后，转到Registersuccess注册成功后显示的页面获取值自Registerform从registerform表单中获取数据表单元素Username插入到列中“user”表单元素Password插入到列中password”表单元表cpassword忽略对于“确认密码”，只是让用户再次确定输入的密码是不是正确的，所以此字段不需要插入到user表中去。单击“确定”按钮后，关闭此对话框，则Dreamweaver8会自生成。Register.asp中添加相关的ASP代码。3、完成上面设置后，需要考虑另外一个问题，因为在user中，用户名和密码都不能为空值，在当前注册页面中单击“注册”按钮时，就会认为插入的是一个用户名和密码都为空值的记录，那么插入操作就会出错，所以，必须在用户单击“注册”按钮前检查一下用户输入的数据是不是正确的，可以编写一段JavaScript代码来实现这个功能。可在head区加入代码。functionCheckForm(){if(RegisterForm.UserName.value==){alert(用户名不能为空);RegisterForm.UserName.focus();returnfalse;}elseif(RegisterForm.Password.value==){alert(密码不能为空);RegisterForm.Password.focus();returnfalse;}elseif(RegisterForm.Password.value!=RegisterForm.cPassword.value){alert(两次输入的密码不一致，请重新输入！);RegisterForm.Password.value=;RegisterForm.cPassword.value=;RegisterForm.Password.focus();returnfalse}elseR