Dreamweaver制作动态网页.ppt

Dreamweaver,DSN数据源的设置Dreamweaver站点的定义注册与登录设计留言板设计,建立ASP运行环境(安装、配置IIS),(一)、安装IIS在WindowsXP(专业版)上将WindowsXP安装光盘放入光驱，点击开始设置控制面版添加或删除程序添加或删除windows组件在internet信息服务(IIS)项前面打钩，单击下一步进行安装，直至完成internet信息服务(IIS)的安装。如图所示：,建立ASP运行环境(安装、配置IIS),建立ASP运行环境(安装、配置IIS),(二)、配置IIS点击开始设置控制面版管理工具internet信息服务(IIS)，在弹出的窗口单击本地计算机、网站，在默认网站单击鼠标右键，在弹出的窗口选择主目录、在本地面路径选择浏览按钮，选择你建立的网站目录(如：E：我的网站)，选择文档项，按添加按钮，添加index.asp文档完成IIS的配置。,建立ASP运行环境(安装、配置IIS),建立ASP运行环境(安装、配置IIS),二、建立站点MacromediaDreamweaver8是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的Web站点。站点的定义开始使用Dreamweaver8来创建数据库网站的第一件事，就是定义网站，必须告诉Dreamweaver8网站根目录在哪里，以及服务器位置、类型等相关信息。启动Dreamweaver8后，从主菜单选择站点/管理站点/新建定义一个新站点。,建立ASP运行环境(安装、配置IIS),在弹出菜单中的本地信息栏-站点名称中输入“我的网站”，本地根文件夹中选择“E：我的网站”，在HTTP地址项填写：“HTTP：”其余各项保持不变。在“分类”处选择“测试服务器”，在服务器模型处选择“ASPVBScript”,“访问”处选择“本地/网络”，单击确定完成站点的定义。这时网站管理窗口中就可以看到网站根目录的中文件了。,建立ASP运行环境(安装、配置IIS),三、怎样建立Access数据库,本系统使用的是Access2003创建了一个名为db1.mdb的数据库。系统对数据的读取，存储都是对该数据库进行操作。在Access2003数据库中，所有的数据存储都是围绕表进行的，数据不会存储在数据库的其他位置。虽然可以有许多方法访问数据，但是它们全部来自表。可以说，表示一个数据库的灵魂。,三、怎样建立Access数据库,执行开始-程序-MccrosoftOffice-MccrosoftOfficeAccess2003(安装MccrosoftOffice2003时，把OfficeAccess2003也打钩进行安装)，执行文件-新建，在弹出窗口右边选择空数据库，文件名保持默认，单击按钮，从弹出窗口选择“使用设计器创建表”，填写相应的字段，具体如下表所示：,三、怎样建立Access数据库,四、Dreamweaver与数据库的连接(使用DSN连接数据库),如果打算在网络应用程序中使用数据库，就需要创建至少一个数据库连接。没有数据库连接的话，应用程序将不知道在什么地方找到数据库或者如何与数据库连接。在DreamweaverMX2004中创建数据库连接时，为应用程序提供了与数据库建立联系的信息或参数。1DSN定义(1)在控制面板中，双击管理工具，双击ODBC数据库源图标，出现ODBC数据源管理器窗口，选择系统DSN标记。,四、Dreamweaver与数据库的连接(使用DSN连接数据库),(2)单击“添加“，接着选择数据库驱动程序，本系统使用Access数据库，所以MicrosoftAccessDriver(*.mdb)，单击“完成“按钮。(3)出现ODBCMicrosoftAccess安装窗口，在数据源名一栏给连接取个名字conn，说明一栏不是必填项。(4)单击窗口中“选择“按钮，找到数据库的所在路径(“E：我的网站”)并选中相应数据库文件，选中db1.mdb，此时ODBCAccess安装窗口中数据库一栏就会出现刚才选定的数据库文件，如图所示。,四、Dreamweaver与数据库的连接(使用DSN连接数据库),四、Dreamweaver与数据库的连接(使用DSN连接数据库),2DSN连接建立了数据库名(DSN)之后，就可以创建网络应用程序和数据库之间的ODBC连接，DSN被定义后，就能用它来调用各种参数了。(1)启动DreamweaverMX2004，打开已经定义好的站点“我的网站”，在站点-我的网站窗口中点击鼠标右键，点新击建文件，文件名改为index.asp,双击文件index.asp使其处于编辑状态。(2)单击“窗口”中的“数据库”，从“数据库”菜单中。在窗口中点击“+”，选择数据源名称，从弹出窗口“连接名称”一栏键入连接的名字conn;在数据源名称(DSN)一栏从下拉菜单中挑选数据库源名conn;Dreamweaver连接一栏选择使用本地DSN即可。如下图：,四、Dreamweaver与数据库的连接(使用DSN连接数据库),五、制作显示数据库记录页,(1)、双击index.asp文件，使其处于编辑状态，选择应用程序的“绑定”，点击“+”，记录集(查询);在弹出的记录集窗口“名称”填写Rs，连接选择conn，表格选择“表1”，“列”选择全部，单击确定完成记录集的绑定。如下图;,五、制作显示数据库记录页,五、制作显示数据库记录页,(2)、在index.asp编辑状态下，插入2行七列的表格，并使其居中，在上一行的七个空格中加入数据表中的内容标签，然后将记录集的各字段拖入下一行对应的空格中，在表格上方输入数据库总记录数X条、目前为第X条数据，并将记录集中的总记录数，第一条记录拖入对应的字中，并使其居中。如下图所示：,五、制作显示数据库记录页,(3)、选中第二行的全部表格，点击服务器行为，点击“+”选择重复区域，保持默认状态，点击确定完成重复显示区的设计。(4)、点击菜单“插入”，选择“应用程序对象”-记录集分页-记录集导航条,在弹出窗口(保持默认值)点击确定。如图所示：,Dreamweaver制作动态网页,DSN数据源的设置Dreamweaver站点的定义注册与登录设计留言板设计,注册与登录设计,对于一个具有动态页面的网站来说，最重要的就是与用户进行交互，为了得到稳定的客户源，或其他原因，需要用户注册成为网站的会员才能使用网站的其他功能。因此，必须设计一个让用户可以注册以及登录的网页。,总体设计：,主要包含以下几项：配置ODBC数据源；编写一个与数据库进行连接的ASP文件；设计登录页面；设计一个注册的页面；编写对数据库进行操作的相关ASP文件；编写对登录/注册操作成功/失败进行处理的页面。,详细设计：,一、分析网站设计内容，划分出页面组成及元素二、确立数据库及建立数据库表三、配置设计环境四、设计登录页面五、设计注册页面,一、分析网站内容，划分页面组成及元素,二、确立数据库及建立数据库表,建立一个名为USER的Access数据库，在这个数据库里面只需要一个数据表USER。数据表中各字段设计如下表：,在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，表示看不到表格边框。在文档窗口下方的状态栏上单击标签，选整个表格，再在“属性”面板中将表格“对齐”方式设置为“居中对齐”。4、选中整个表格，在“属性”面板中的“背景图像”文本框中为表格设置背景图片，并将第一行的单元格合并为一行。5、向表格中添加用户名称、用户密码文本域以及注册和登录按钮，再在上面添加文字说明。,6、因为注册按钮不进行提交表单的操作，所以要对它进行一些设置。在设计视图中选择注册按钮，在属性面板中单击右边的“快速标签编辑器”图标，在“编辑标签”文本框内添加如下代码。onClick=”location.href=register.asp”此段代码表示如果单击注册按钮，将会跳转到“注册页面”。7、在完成页面设计后，现在利用Dreamweaver的“服务器行为”来完成对“登录”过程的操作和处理。首先在设计视图中，将光标移到Login表单内，然后在“应用程序”面板组的“服务器行为”面板上单击左上角的“+”号按钮，在弹出的菜单中选择“用户身份验证-登录用户”命令，在弹出的“登录用户”对话框中进行设置。设置内容参见下表：,五、设计注册页面,注册页面与登录页面的设计类似，页面元素的具体设置如下表所示：,完成网页设计后，就可以利用Dreamweaver的“服务器行为”来完成对“注册”过程的操作和处理。其具体步骤如下：1、在文档窗口的设计视图中，将光标移到RegisterForm表单内，在“应用程序”面板组中的“服务器行为”面板中单击左上角的“+”按钮，在弹出的菜单中选择“插入记录”命令，将弹出“插入记录”对话框。,2、“插入记录”对话框里的各项设置如下表：,对于“确认密码”，只是让用户再次确定输入的密码是不是正确的，所以此字段不需要插入到user表中去。单击“确定”按钮后，关闭此对话框，则Dreamweaver8会自生成。Register.asp中添加相关的ASP代码。3、完成上面设置后，需要考虑另外一个问题，因为在user中，用户名和密码都不能为空值，在当前注册页面中单击“注册”按钮时，就会认为插入的是一个用户名和密码都为空值的记录，那么插入操作就会出错，所以，必须在用户单击“注册”按钮前检查一下用户输入的数据是不是正确的，可以编写一段JavaScript代码来实现这个功能。可在区加入代码。,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();returnfalseelseRegisterForm.submit();,4、将光标移到“RegisterForm”表单内，然后在“应用程序”面板组中的“服务器行为”面板上单击左上角的“+”号按钮，在弹出的菜单中选择“用户身份验证”“检查新用户名”，将弹出“检查新用户名”对话框，在“检查新用户名”对话框中，在“用户名字段”下拉列表中选择“UserName”，在“如果已存在文，则转到”文本框中输入“RegisterFailure.html”，然后单击“确定”按钮，关闭此对话框，则Dreamweaver8会自动在Register.asp里添加相关的ASP代码。,六、编辑登录成功和失败页面以及注册成功和失败页面。,留言本设计,一、设计思想如图所示，一个完整的留言本程序可以分为两个部分，一部分是用户留言，用户在选择不同留言主题后，即可在留言页面中查看其他人的留言以及发表留言。另一部分是管理员对留言进行管理，可以对留言进行审查以及删除。,二、数据库设计,有关留言本的数据库Msgboard中的数据表可以分为两个部分，一部分为相关主题的数据表MsgTopic，另一部分为用户留言记录的数据表。相关主题数据表的设计如下表所示：,用户留言数据表的设计如下表所示：,三、准备工作,（1）定义IIS站点（2）定义Dreamweaver8站点（3）配置ODBC数据源（4）在Dreamweaver中建立数据库连接,四、选择留言主题页面设计,设计好的选择留言主题页面为方便起见，可以在此设置一个“管理留言”的链接，单击此链接将打开留言管理页面。从数据库中读取留言主题的具体操作步骤如下1、单击“绑定”面板中的“+”按钮，在弹出的菜单中选择“记录集（查询）”命令，将弹出“记录集”对话框。在此对话框中设置“名称”为“Recordset1”，在“连接”下拉列表中选择已经建立好的数据库连接connMsg，在“表格”下拉列表中选择数据库表格MsgTopic，并选择显示“MsgID”和“MsgSubject”两个字段，在“排序”下拉列表中选择“MsgID”为“升序”，单击确定按钮，关闭此对话框。,2、展开“绑定”面板中的“记录集”树型结构，将MsgSubject字段拖曳到表格的最后一行右边的单元格中，然后选择表格中的此动态文本，在属性面板中单击“链接”文本框右边的“浏览文件”按钮，将弹出“选择文件”对话框。在“选择文件”对话框中的“URL”文本框中输入“msgboard.asp”，然后单击“参数”按钮，在弹出的“参数”对话框的“名称”栏中输入要传递的参数名称MsgID，然后单击“值”栏右边的“绑定到动态数据源”按钮，在弹出的“动态数据”对话框的“域”框中选择“MsgID”字段作为参数的值。然后单击“确定”按钮，关闭所有的对话框。3、选中表格中的最后一行，单击“服务器行为”面板上的“+”按钮，在弹出的菜单中选择“重复区域”命令，将弹出“重复区域”对话框。在该对话框中选择“记录集”为“Recordset1”，并选中“所有记录”单选按钮以显示所有记录，单击“确定”按钮，关闭此对话框。,4、将鼠标光标移动到最后一行左边的单元格中，将文档窗口切换到“代码”视图，加入相应的代码：5、在“设计”视图中，选中“管理留言”文本字样，右击鼠标，在弹出的快捷菜单中选择“创建链接”命令，在弹出的“选择文件”对话框中的“URL”文本框中输入“Manage_Msg.asp”后单击“确定”按钮，关闭此对话框。完成选择留言主题的页面设计。,五、用户留言页面设计,设计好的用户留言页面的结构。此页面中共有3个表格，第1个表格是用来显示留言主题及主题的详细内容，第二个表格是用来显示用户的留言，数据库中的记录为空，则此表格不会显示，第3个表格是让用户来留言的表格。将需要显示的内容填充在此页面中，具体操作步骤如下：,1、在“绑定”面板中单击加号按钮，在弹出的菜单中选择“记录集（查询）”命令，将弹出“记录集”对话框。将此对话框中的“名称”文本框中输入“Rs1”，在“连接”下拉列表中选择已经建立好的数据库连接connMsg，选择“表格”为数据库表MsgTopic，并选中“全部”单选按钮以显示所有的列。然后将“筛选”设置为“MsgID”、“=”、“URL参数”和“MsgID”。单击“确定”按钮，关闭此对话框。,2、单击“绑定”面板上的加号按钮，在弹出的菜单中选择“记录集（查询）”命令，将弹出“记录集”对话框，将此对话框中的“名称”设置为Rs2，在“连接”下拉列表中选择已经建立好的数据库连接connMsg，在“表格”下拉列表中选择数据库表MsgContent，并选中“全部”单选按钮以显示所有的列，将“筛选”设置为“MsgID”、“=”、“URL参数”和“MsgID”，然后单击此对话框中的“高级”按钮，对话框将转为高级模式。在“记录集”的高级模式下，展开“数据库项”列表框中的“表格”树型结构，选择“MsgContent”下的“Auditing”字段，然后单击“WHERE”按钮，则会在“SQL”列表框中添加有关Auditing的查询条件，将此SQL语句补充完整，整个SQL语句应为：SELECT*FROMMsgContentWHEREMsgID=MMColParamANDAuditing=True单击确定按钮，关闭此对话框，返回“绑定”面板，这样在“绑定”面板中就会出现两个查询记录集。,3、展开“绑定”面板中的“记录集（Rs1）”，将“MsgSubject”字段拖曳到第1个表格中的“主题：”文本字样的右边。同样地，将“记录集（Rs1）”中的MsgContent字段以及“记录集（Rs2）”中的“UserIP”、“UserID”、“MsgDate”、“NoteContent”字段拖曳到文档中的相应位置。4、将光标移到“来自于”文本字样的表格上，右击鼠标，在弹出的快捷菜单中选择“表格”选择表格命令，便可选中第2个表格，单击“服务器行为”面板上的加号按钮，在弹出的菜单中选择“显示区域”如果记录集不为空则显示区域命令，将弹出“如果记录集不为空则显示区域命令”对话框。在此对话框中的“记录集”下拉列表中选择记录集Rs2，单击“确定”按钮，关闭此对话框，此设置表示如果没有用户留言，则不显示此区域。,5、再次选中第2个表格，单击“服务器行为”面板上的加号按钮，在弹出的菜单中选择“重复区域”命令，将弹出“重复区域”对话框，在此对话框中的“记录集”下拉列表中选择记录集Rs2，并选择显示所有记录，然后单击“确定”按钮，关闭此对话框。6、将光标移到Rs2.NoteContent上，将文档窗口切换到“代码”视图，加入以下代码：7、将光标移在第3个表格中的“清除”按钮的旁边，在“表单”插入栏中单击“隐藏域”按钮，插入一个隐藏区域，并在“属性”面板上将其“名称”设置为Auditing，将其“值”设置为0。,8、同样地，再次插入一个隐藏区域，将其“名称”设置为UserIP，将其“值”设置为(“REMOTE_ADDR”)%，表示获得用户所使用的计算机的IP。9、再插入一个隐藏区域，将其“名称”设置为MsgID，将其值设置为。,10、在“服务器行为”面板中单击加号按钮，在弹出的菜单中选择“插入记录”命令，将弹出“插入记录”对话框。在此对话框中将“连接”设置为已经建立好的数据库连接connMsg，将“插入到表格”设置为数据库表MsgContent，将“插入后，转到”设置为Message.asp，将“获取值自”设置为PostForm，然后利用“列”与“提交为”下拉列表中的选项