(中职）Web数据库与动态网页设计第5单元ppt课件.ppt

《(中职）Web数据库与动态网页设计第5单元ppt课件.ppt》由会员分享，可在线阅读，更多相关《(中职）Web数据库与动态网页设计第5单元ppt课件.ppt（101页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、(中职）Web数据库与动态网页设计第5单元ppt课件第 2 页 共 100页单元五单元五 创建网络聊天室创建网络聊天室l 引言引言 本单元从创建一个最简单的聊天室开始，由浅入深地讲述制作网络聊天室的过程。本单元的网络聊天室后台数据库采用SQL Server数据库。第 3 页 共 100页l能力目标 能制作简单的聊天室网页 能设置表单的隐含域 能设置站点 能创建数据表 能设置数据源 能应用ASP主要的内置对象 能使用简单的SQL语句 单元五单元五 创建网络聊天室创建网络聊天室第 4 页 共 100页 任务一 创建一个最简单的聊天室 任务二 为网站建立数据库和数据表 任务三 制作聊天室的用户注册和

2、登录页面 任务四 制作聊天页面 任务五 运行和调试聊天室任务六 美化聊天页面 项目实训 制作网上书店聊天室 单元五单元五 创建网络聊天室创建网络聊天室第 5 页 共 100页任务一任务一 创建一个最简单的聊天室创建一个最简单的聊天室 现在，家中拥有两台以上的计算机已是一件很平常的事情，一般家中都可建立一个小型的局域网。家庭成员为了不互相打扰，即便是在家中也是在不同的房间，通过各自的计算机做着自己的事情，这时如果在家中建立一个简单的聊天室页面，那么处于不同房间的人交流起来就会很方便。返 回关 闭l 任务描述 第 6 页 共 100页 设计一个典型的网络聊天室其实不难，只需要一些常用的HTML标记

3、加上ASP程序即可。下面就从“创建一个最简单的聊天室”开始，来介绍网络聊天室的制作方法。在这个聊天室中只用一个页面就能完成用户的登录和发言，用户的登录信息和发言信息分别通过该页面上的两个表单来实现。l 任务分析 返 回关 闭任务一任务一 创建一个最简单的聊天室创建一个最简单的聊天室第 7 页 共 100页l 方法与步骤 创建文件夹 返 回关 闭任务一任务一 创建一个最简单的聊天室创建一个最简单的聊天室 在D盘的aspexp文件夹下建立一个名为Ch03的站点文件夹，在该目录下分别再建立名为css、image和database的三个文件夹，将素材放到D:aspexpch03image中，如图所示。

4、第 8 页 共 100页l 方法与步骤 设置虚拟目录 返 回关 闭任务一任务一 创建一个最简单的聊天室创建一个最简单的聊天室将D:aspexpch03设置为虚拟目录，具体操作步骤参见单元一中的介绍。设置站点 第 9 页 共 100页返 回关 闭任务一任务一 创建一个最简单的聊天室创建一个最简单的聊天室 打开网页制作软件Dreamweaver，选择“站点”“管理站点”命令，建立一个名为chatroom的站点，如右图所示。对“分类”列表框中的“远程信息”和“测试服务器”选项进行设置，具体操作步骤参见单元一中的介绍。第 10 页 共 100页l 方法与步骤 返 回关 闭任务一任务一 创建一个最简单的

5、聊天室创建一个最简单的聊天室 设置聊天室页面 选择“文件”“新建”命令，新建动态页ASP VBScript文件，如图所示，单击“创建”按钮。第 11 页 共 100页在站点下建立一个名为chat.asp动态文件，如下图所示。返 回关 闭第 12 页 共 100页 在网页文件chat.asp中，设计聊天室页面如图所示。在文档窗口的设计视图中，可以看到用户登录信息是由页面中的第一个表单及其中的表单元素构成，而用户发言的信息是由第二个表单及其中的表单元素构成的。关 闭返 回第 13 页 共 100页 设计好聊天室页面之后，接下来开始添加程序代码。首先，将chat.asp文档窗口从设计视图切换到的代码

6、视图，仔细查看设计好的页面的HTML程序代码。然后，在原来的HTML程序代码中添加一些必需的ASP程序代码，使得页面中的两个表单分别能够在满足相应的条件下出现和起作用。添加ASP程序后的完整程序代码见教材。关 闭返 回第 14 页 共 100页 编写好程序后，通过按【F12】键预览，可以看到如下图所示的结果，即所做页面中的第一个表单。关 闭返 回第 15 页 共 100页 在“昵称”文本框内输入“阳光灿烂”后，单击页面上的“进入聊天室”按钮，可以看到如下图所示的结果，即所做页面中的第二个表单。关 闭返 回第 16 页 共 100页 在客户说话的文本框内输入“大家好，初次见面请多关照！”后，再单

7、击页面上的“提交”按钮，客户将会看见自己的发言，如下图所示。关 闭返 回第 17 页 共 100页l 相关知识与技能 返 回关 闭任务一任务一 创建一个最简单的聊天室创建一个最简单的聊天室 Session对象及使用 Session对象有两个属性：SessionID、Timeout Session对象只有一个方法：Abandon 对象有两个事件（Session_OnStart Session_OnEnd），且必须和Global.asa结合使用 利用Session存储信息 第 18 页 共 100页l 思考与练习 建立站点目录mychat，并将站点指定至站点目录。返 回关 闭任务一任务一 创建一个

8、最简单的聊天室创建一个最简单的聊天室进行IIS设置，将站点目录mychat设置为Web发布站点，并启用默认文档为index.asp。第 19 页 共 100页任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表 返 回关 闭l 任务描述 聊天室是网络中交流信息的方式之一，由于它具有实时性的特点，所以很受用户的欢迎。用户登录到聊天室后，可各抒己见，系统将用户发表的信息显示在页面上，让每个用户都可以看到。聊天室系统不仅要保存每个用户的个人信息，而且还要保存用户的发言内容，以便管理员可以进行管理。因此在聊天室系统中首先必须有一个数据库来存放这些信息。第 20 页 共 100页返 回关 闭l

9、 任务分析 系统中应有一个存放信息内容的数据库chat，在此使用SQL Server 2000数据库来实现。其内部包括聊天室必须的两个数据表，第一个是用户信息表userinfo，它存放的是用户的基本信息；第二个是聊天记录表，它存放的是此聊天室的所有聊天记录。任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表第 21 页 共 100页返 回关 闭l 方法与步骤 任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表 安装SQL Server 2000数据库 建立数据库和数据表 第 22 页 共 100页返 回关 闭l 相关知识与技能 Microsoft SQL Server

10、2000 的特性 SQL Server 2000的工具和实用程序 任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表第 23 页 共 100页返 回关 闭l 思考与练习 在SQL Server 2000下新建职工档案数据库，文件名为“职工档案”。在“职工档案”数据库中创建一个表，表的名称为“职工基本情况”，如表所示。首先，定义表的结构（字段），然后将职工号作为主关键字，保存表。任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表第 24 页 共 100页职 工 号姓 名出 生 日 期职 称月 薪备 注01赵克明60-01-10工程师150002钱端江59-02-19高工2

11、00003汪小红70-02-19工程师120004李农平71-10-30工程师100005吴建民76-11-01工程师80006张法建75-11-01工程师800任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表返 回关 闭第 25 页 共 100页返 回关 闭l 思考与练习 向“职工档案”数据库中的“职工基本情况”表输入6条记录，保存记录。修改表的结构，删除字段“备注”，增加字段“性别”。任务二任务二 为网站建立数据库和数据表为网站建立数据库和数据表第 26 页 共 100页任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 返 回关 闭l 任务描述 大型

12、网站的聊天室一般都采用会员制的管理方式，即使用聊天室的用户必须要先注册一个账号，且必须通过登录系统才能进入聊天室，这样可以方便网站管理员对使用网站聊天室的用户进行管理。会员制网络聊天室的组成主要包括：注册页面regin.asp、登录页面enter.asp、处理发言页面updata.asp、聊天室页面chatroom.asp（由用户发言页面talk.asp、用户在线页面online.asp 和信息显示页面show.asp组成的框架页面）、离开聊天室页面leave.asp、存放信息的数据库chat（包含用户信息表userinfo和聊天记录表chatinfo）。第 27 页 共 100页任务三任务三

13、 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 返 回关 闭l 任务描述 各组成部分之间的关系如下图所示，用户首先从登录页面进入。第 28 页 共 100页返 回关 闭l 任务分析 要进入会员制网络聊天室，需先进入注册页面进行注册，填写完页面中需要用户填写的注册信息后，提交页面，此时用户输入的所有数据将和chat数据库的userinfo数据表中的数据进行比较，如果没有发现相同的“昵称”，则将输入数据新增到userinfo数据表中，并且可转到聊天室登录页面，否则将在regin.asp输出错误提示信息，要求用户重新注册。而在聊天室登录页面中，已注册者在该页面中输入要在聊天室中使用的

14、昵称，并选择好代表自己的头像后，提交页面即可进入聊天室聊天。任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面第 29 页 共 100页返 回关 闭l 方法与步骤 任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 制作用户注册页面 打开网页制作软件Dreamweaver，选择“窗口”“文件”命令，在打开的文件面板下拉列表中选择站点chatroom，如图所示。第 30 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 在chatroom站点中新建一个ASP VBScript动态页面regin.

15、asp，如图所示。第 31 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 在网页文件regin.asp的文档工具栏中输入网页标题“用户注册”，然后设计聊天室的用户注册页面如图所示。第 32 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 设计好聊天室用户注册页面后，接下来开始添加程序代码。将regin.asp文档窗口从设计视图切换到的代码视图，仔细查看页面的HTML程序代码后，在原来的HTML程序代码中添加ASP程序代码，见教材。第 33 页 共 100页返 回关 闭任务三任务三

16、制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 按【F12】键预览页面，用户即可在regin.asp页面中填写必要的注册信息进行注册，如图所示。单击“提交”按钮后，页面将用户的注册信息存入用户信息数据表userinfo的同时，即可进入聊天室用户登录页面enter.asp。第 34 页 共 100页返 回关 闭l 方法与步骤 任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 制作用户登录页面 在chatroom站点中新建一个新的ASP VBScript动态页面文件enter.asp，在其文档工具栏中输入网页标题“用户登录”，然后再设计聊天室的登录页面如图所

17、示。第 35 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 设计好聊天室用户注册页面后，接下来开始添加程序代码。将enter.asp文档窗口从设计视图切换到的代码视图，仔细查看页面的HTML程序代码后，首先在原来的HTML程序代码的开头终结标记后添加ASP程序代码，见教材。第 36 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 按【F12】键预览，出现如图所示页面，在该页面中用户输入要在聊天室中使用的昵称，并选择代表自己的头像后。单击“进入聊天室”按钮后，用户登录enter.as

18、p会根据用户是否输入了昵称和是否为注册会员，出现下列三种不同的响应情况：第 37 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 用户没有在聊天室登录区中填写“昵称”，直接按下了“进入聊天室”按钮，这是画面停留在enter.asp，并在聊天室登录区的下方显示下图所示的错误提示。第 38 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 使用户填写“昵称”后单击“进入聊天室”按钮，用户还不是注册会员，这时画面停留在enter.asp，并在聊天登录区的下方显示如下图所示的错误提示。第 39

19、 页 共 100页返 回关 闭任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 若用户已是注册会员，并填写了“昵称”，选择了代表自己的头像后单击“进入聊天室”按钮，即可进入到聊天室页面chatroom.asp。第 40 页 共 100页返 回关 闭l 思考与练习 在SQL Server中创建一个数据库regin，再建立一个新表yhxx，其中包含字段名分别为：username、password、usersex，并且在yhxx表内填写一些记录，然后保存。任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面第 41 页 共 100页返 回关 闭l 思考

20、与练习 任务三任务三 制作聊天室的用户注册和登录页面制作聊天室的用户注册和登录页面 编写一个带有表单的动态页面denglu.asp，包括文本框、密码框、单选按钮和提交表单的按钮，要求达到如图所示效果。第 42 页 共 100页任务四任务四 制作聊天页面制作聊天页面 返 回关 闭l 任务描述 在会员制聊天室中，用户首先要注册用户名，然后在登录页面中使用自己的用户名或昵称进行登录后，进入到真正的聊天室页面。第 43 页 共 100页返 回关 闭l 任务分析 本系统中用户注册信息和用户聊天内容需进行保存，而后台数据库采用SQL Server，所以本任务中先要创建数据库的链接，进行ODBC的创建。然后

21、制作基本页面，聊天室主页面是一个由三个网页所组成的框架网页文件，其中包含了用户发言页面talk.asp、信息显示页面show.asp和在线用户列表页面online.asp。左上部框架为显示页面show.asp，主要用来显示每个用户所说的话，显示的内容为：用户发言的时间、用户的头像、任务四任务四 制作论坛显示页面制作论坛显示页面第 44 页 共 100页返 回关 闭l 任务分析 用户的昵称、用户发言的对象、用户发言时的表情以及用户发言的内容。右上部框架为在线用户列表页面online.asp，主要是显示使用此聊天室的用户人数和用户名，使每个用户知道他们在和谁聊天。下部框架为用户发言页面talk.a

22、sp，用来输入聊天的内容，可以选择字体的颜色、说话的语气和聊天的对象。任务四任务四 制作论坛显示页面制作论坛显示页面第 45 页 共 100页返 回关 闭l 方法与步骤 任务四任务四 制作论坛显示页面制作论坛显示页面 创建ODBC数据源“创建新数据源”对话框 选择服务器和设置数据源 第 46 页 共 100页返 回关 闭选择身份验证模式 选择数据库 设置其他属性 创建的ODBC数据源的设置 第 47 页 共 100页返 回关 闭“测试结果”对话框“ODBC数据源管理器”对话框 第 48 页 共 100页返 回关 闭l 方法与步骤 任务四任务四 制作论坛显示页面制作论坛显示页面 制作聊天室大厅页

23、面 添加框架 生成的框架页面 第 49 页 共 100页返 回关 闭保存好的框架页面“数据源名称（DSN）”对话框 测试连接对话框“数据库”面板 第 50 页 共 100页返 回关 闭l 方法与步骤 任务四任务四 制作论坛显示页面制作论坛显示页面 制作在线用户列表页面 在线用户页面online.asp的设计“记录集”对话框 第 51 页 共 100页返 回关 闭设置记录集Rsonline1 完成设置的在线用户页面 设置online.asp的动态文本“重复区域”对话框 第 52 页 共 100页返 回关 闭l 方法与步骤 任务四任务四 制作论坛显示页面制作论坛显示页面 制作用户发言页面 双击打开

24、框架页面chatroom.asp，并将光标移到框架页面的下部框架页talk.asp中，按如图所示对用户发言页面talk.asp进行设计。第 53 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 在talk.asp页面中，单击“绑定”面板左上角的（）按钮，在弹出的菜单中选择“记录集（查询）”命令，在弹出的“记录集”对话框中建立如图所示的记录集内容。第 54 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 选中列表框（selto），在“服务器行为”面板上单击左上角的（）按钮，在弹出的菜单中选择“动态表单元素”“动态列表/菜单”命令，弹出“动态

25、列表/菜单”对话框，如图所示。第 55 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 在此对话框中的“静态选项”下的“值”栏和“标签”栏都输入“大家”，设置一个静态选项，然后在“来自记录集的选项”下拉列表框中选择记录集Rstalk1，在“值”和“标签”下拉列表框中都选择字段name2，如图所示，最后单击“确定”按钮。第 56 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 选中字体颜色列表框（selcolor），单击“属性”面板中的“列表值”按钮，打开“列表值”对话框，如图所示。第 57 页 共 100页返 回关 闭任务四任务四 制作论

26、坛显示页面制作论坛显示页面 在此对话框中的“项目标签”栏和“值”栏输入如下表所示的内容，然后单击“确定”按钮。项 目 标 签值项 目 标 签值黑色沉静#000000紫色拘谨#990099红色热情#FF0000深蓝忧郁#000099蓝色开朗#0000FF镏金岁月#FF9900桃色浪漫#FF00FF发亮蓝紫#9900FF绿色青春#009900墨绿深沉#006600青色清爽#009999灰色轨迹#333333第 58 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 选中语气列表框（selspeak），单击“属性”面板中的“列表值”按钮，在打开的“列表值”对话框的“项目标签

27、”栏中输入如下表所示的内容，然后单击“确定”按钮。这样，就完成了用户发言页面的设计。项 目 标 签值项 目 标 签值轻声细语轻声细语兴高采烈兴高采烈不好意思不好意思幸灾乐祸幸灾乐祸得意洋洋得意洋洋哭笑不得哭笑不得慢条斯理慢条斯理开怀大笑开怀大笑无精打采无精打采欲哭无泪欲哭无泪第 59 页 共 100页返 回关 闭l 方法与步骤 任务四任务四 制作论坛显示页面制作论坛显示页面 制作信息显示页面 将光标移到框架页面的左上部框架页show.asp中，插入一个1行3列的表格，并按图所示对信息显示页面show.asp进行设计。它主要用来显示最新的聊天记录。第 60 页 共 100页返 回关 闭任务四任务

28、四 制作论坛显示页面制作论坛显示页面 单击“绑定”面板左上角的（）按钮，在弹出的菜单中选择“记录集（查询）”命令，在弹出的“记录集”对话框中建立如图5-4-28所示的记录集。在对话框的“名称”文本框中输入记录集的名称Rsshow1，在“连接”下拉列表框中选择数据库连接connchat，在“表格”下拉列表框中选择数据表dbo.chatinfo，并且选择“全部”列，最后在“排序”下拉列表框中选择time字段，按“降序”排列，完成所有设置后单击“确定”按钮。第 61 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 展开“绑定”面板中的“记录集Rsshow1”树结构，将ti

29、me字段拖动到show.asp页面的表格第一个单元格中，将name2字段拖动到页面的第一个中括号“”中，将sayto字段拖动到页面的第二个中括号“”中，将speak字段拖动到页面的第二个中括号“”后，将word字段拖动到页面的“说：”文本后，如图所示。第 62 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 将光标移到show.asp页面内表格的第二个单元格内，选择“插入”“图像对象”“图像占位符”命令，打开“图像占位符”对话框，按图所示进行设置。在“名称”文本框中输入faceimage，将“高度”和“宽度”都设置为20。第 63 页 共 100页返 回关 闭任务四

30、任务四 制作论坛显示页面制作论坛显示页面 将“记录集Rsshow1”中的face字段拖动到show.asp页面的图像占位符中，并在“属性”面板中将“高度”和“宽度”都设置为20，如图所示。这样，就完成了显示信息页面的设计。第 64 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 选中show.asp页面中的表格，单击“服务器行为”面板左上角的加号（）按钮，在弹出的菜单中选择“重复区域”命令，将弹出“重复区域”对话框，对其按图所示进行设置。第 65 页 共 100页返 回关 闭任务四任务四 制作论坛显示页面制作论坛显示页面 单击“重复区域”对话框中的“确定”按钮，将看

31、到show.asp页面发生如图所示的变化。这样，就完成了用户发言页面的设计。第 66 页 共 100页返 回关 闭l 相关知识与技能 设计页面 创建动态数据源 任务四任务四 制作论坛显示页面制作论坛显示页面 向Web页添加动态内容 向页面添加服务器行为 测试和调试页面 第 67 页 共 100页返 回关 闭l 思考与练习 在SQL server中创建一个数据库Chengji，再建立一个新表CJ，其中包含列名分别为：xh、bj、xm、xb、nl、yw、sx、yy，数据类型为nvarchar，长度等自定，然后保存。任务四任务四 制作论坛显示页面制作论坛显示页面 制作一个框架页面ff.asp，分为上

32、下两个窗口，分别起名为f1.asp、f2.asp。第 68 页 共 100页返 回关 闭l 思考与练习 任务四任务四 制作论坛显示页面制作论坛显示页面 设计ff.asp框架页面的窗口布局效果如图所示。第 69 页 共 100页任务五任务五 运行和调试聊天室运行和调试聊天室 返 回关 闭l 任务描述 在基本页面制作完后还要对页面进行正确的设置才能使聊天室正常运行，本任务主要是对页面进行设置和调试，另外还有制作离开聊天室页面。只要用户单击“离开聊天室”超链接，即可转到离开聊天室页面leave.asp，如图所示。第 70 页 共 100页返 回关 闭l 任务分析 为使聊天室能正常运行，就要正确设置页

33、面属性。在用户发言页面talk.asp，当用户输入聊天内容后，单击“我说完了”按钮即可；而当用户想要离开聊天室主页面时，只要单击“离开聊天室”超链接，即可转到离开聊天室页面leave.asp。最后要对这个聊天室的各个文件进行调试，完成这个聊天室系统。另外，聊天室是一个公共平台，聊天的时间长了，数据库的内容就会很多，所以聊天的内容需要及时刷新，并要求显示的内容是最新的前几条内容。任务五任务五 运行和调试聊天室运行和调试聊天室第 71 页 共 100页返 回关 闭l 方法与步骤 任务五任务五 运行和调试聊天室运行和调试聊天室 制作处理发言页面 在chatroom站点中新建一个ASP VBScrip

34、t动态页面文件updata.asp，如图所示。该页面主要用于处理发言内容，故页面上无需任何设置。第 72 页 共 100页返 回关 闭任务五任务五 运行和调试聊天室运行和调试聊天室 将updata.asp文档窗口从设计视图切换到代码视图，仔细检查页面的HTML程序代码后，在原来的HTML程序代码中添加ASP程序代码，完整的程序代码见教材。第 73 页 共 100页返 回关 闭l 方法与步骤 任务五任务五 运行和调试聊天室运行和调试聊天室 设置用户发言页面的属性 选中talk.asp页面中的表单（sendform），打开“属性”面板，在“动作”文本框内输入updata.asp，在“目标”下拉列表

35、框中选择mainframe选项，如图所示。第 74 页 共 100页返 回关 闭l 方法与步骤 任务五任务五 运行和调试聊天室运行和调试聊天室 设置信息显示页面 双击打开show.asp页面，在设计视图窗口中选中表格内第一个单元格中的Rsshow1.time动态文本，如图所示，然后切换到代码视图窗口。以下步骤见教材。第 75 页 共 100页返 回关 闭l 方法与步骤 任务五任务五 运行和调试聊天室运行和调试聊天室 制作离开聊天室页面 新建一个ASP VBScript动态页面文件leave.asp，然后按如图所示进行设置。第 76 页 共 100页返 回关 闭任务五任务五 运行和调试聊天室运行

36、和调试聊天室 将leave.asp文档窗口从设计视图切换到的代码视图，仔细检查页面的HTML程序代码后，在原来的HTML程序代码中添加ASP程序代码。完整的程序代码见教材。第 77 页 共 100页返 回关 闭l 方法与步骤 任务五任务五 运行和调试聊天室运行和调试聊天室 调试 打开站点中的enter.asp文件，按【F12】键，打开IE浏览器进行测试，如图所示。在此页面的“输入昵称”文本框中输入“阳光灿烂”，选择第三个女孩头像。第 78 页 共 100页返 回关 闭任务五任务五 运行和调试聊天室运行和调试聊天室 单击enter.asp页面中的“进入聊天室”按钮，则会转到chatroom.as

37、p聊天大厅页面，如图所示。第 79 页 共 100页返 回关 闭任务五任务五 运行和调试聊天室运行和调试聊天室 在此页面中的右方显示了当前正在聊天室的用户名列表；用户可以在下方的发言区选择说话的对象、字体的颜色、说话的语气，在文本框中输入想要说的话，单击“我说完了”按钮，则输入的文字会显示在上方的信息显示页面中，如图所示。第 80 页 共 100页返 回关 闭任务五任务五 运行和调试聊天室运行和调试聊天室 单击“离开聊天室”链接，则会转到leave.asp页面，如图所示。第 81 页 共 100页返 回关 闭l 相关知识与技能 Cookies基本知识 使用Response对象设置Cookies

38、 任务五任务五 运行和调试聊天室运行和调试聊天室 使用Request对象设置Cookies 第 82 页 共 100页返 回关 闭l 思考与练习 把离开聊天室页面Leave.asp做成非动态页面，用一般的html页面实现现有的效果。任务五任务五 运行和调试聊天室运行和调试聊天室 试开发一个页面，当客户第一次访问时，需在线注册姓名、性别、密码等信息，然后把信息保存到Cookies中。下一次如该客户再访问时，则显示“某某，您好，您是第几次光临本站”的欢迎信息。第 83 页 共 100页任务六任务六 美化聊天页面美化聊天页面 返 回关 闭l 任务描述 通过各种色彩丰富的背景，可爱的图片、多变的字体等

39、的装置和点缀，让网络用户能在聊天的同时，有一种温馨的感觉及美的享受。本任务完成后聊天页面将美化成如图所示的界面。第 84 页 共 100页返 回关 闭l 任务分析 为了让聊天室页面看起来生动活泼、有美感，可为页面添加背景图案或是颜色，通过对网页文档“页面属性”的设置可实现各种各样的效果；为了让网页拥有统一风格的标题，还可通过“CSS样式”表的设置来制作相同格式的标题，简单又快捷；另外，还可在页面加上插入一些生动可爱的图片或者GIF动画来增加网页的趣味性。任务六任务六 美化聊天页面美化聊天页面第 85 页 共 100页返 回关 闭l 方法与步骤 任务六任务六 美化聊天页面美化聊天页面 添加背景“

40、页面属性”对话框之一 show.asp的背景效果之一 第 86 页 共 100页返 回关 闭“页面属性”对话框之二 online.asp的背景效果之二“页面属性”对话框之三 talk.asp的背景效果之三 第 87 页 共 100页返 回关 闭l 方法与步骤 任务六任务六 美化聊天页面美化聊天页面 添加统一的标题“css样式”面板“新建CSS规则”对话框 第 88 页 共 100页返 回关 闭“.biaoti的CSS样式定义（在我的样式.css中）”对话框 样式.biaoti 使用biaoti样式“链接外部样式表”对话框 第 89 页 共 100页返 回关 闭“CSS样式”面板 使用biaot

41、i样式 第 90 页 共 100页返 回关 闭l 方法与步骤 任务六任务六 美化聊天页面美化聊天页面 插入图片“选择图像源文件”对话框 第 91 页 共 100页返 回关 闭任务六任务六 美化聊天页面美化聊天页面插入图像的页面 离开聊天室页面 第 92 页 共 100页返 回关 闭l 相关知识与技能 Application简介 Application对象有两个事件：Application_OnStart、Application_OnEnd（要与Global.asa结合使用）任务六任务六 美化聊天页面美化聊天页面 利用Application存储信息 实例 第 93 页 共 100页返 回关 闭l

42、 思考与练习 试用Application对象创建一个计数器 任务六任务六 美化聊天页面美化聊天页面 请编写两个页面，在第一个页面中客户要输入姓名，然后保存到Session中，在第二页面中读取该Session 信息，并显示欢迎信息。如果客户没有在第一页登录就直接访问第二页，则将客户重定向回第一页。第 94 页 共 100页项目实训项目实训 制作网上书店聊天室制作网上书店聊天室 返 回关 闭l 项目描述 为了在注册用户中能更好地实时进行信息的传递和交流，同时为了使网站管理员能很好地与用户进行实时沟通和信息的传达，还可建立网站内部的聊天室系统。第 95 页 共 100页项目实训项目实训 创建网上书店

43、论坛创建网上书店论坛返 回关 闭l 项目要求 为网上书店创建一个简单的聊天室，使每位用户在通过注册成为聊天室会员后（用户注册页面和用户登录页面在前面单元的项目实训中已经制作好了，这里不再介绍），都能登录到聊天室，并可各抒己见，聊天室系统将用户发表的信息显示在页面上，让每个在线用户都可以看到。但是当用户离开聊天室后，将不再显示为在线用户。聊天室的结构图如图所示。第 96 页 共 100页项目实训项目实训 创建网上书店论坛创建网上书店论坛返 回关 闭l 项目提示 建立一个名为chatrlx的站点文件夹，并在IIS中将其设置为Web发布默认站点。在Dreamweaver中建立一个名为chatlx的站

44、点。在SQL Server中创建一个数据库，并建立两个数据表。第一个数据表名为Regin，用于存放用户的注册信息，其中包含字段名分别为：username、password、usersex、isonline。第二个数据表名为talk，用于存放用户的聊天内容，其中的字段名分别为：userneme、第 97 页 共 100页项目实训项目实训 创建网上书店论坛创建网上书店论坛返 回关 闭l 项目提示 object、sayface、saycolor、sayword、saytime。然后，建立数据库与网站的ODBC连接。编写一个带有表单的用户注册页面reginlx.asp，包括文本框、密码框、单选按钮和提

45、交表单的按钮，并可根据需要添加背景图片。编写一个带有表单的用户登录页面index.asp，包括文本框、密码框和提交表单的按钮，并可根据需要添加背景片。第 98 页 共 100页项目实训项目实训 创建网上书店论坛创建网上书店论坛返 回关 闭l 项目提示 编写一个框架页面chatroomlx.asp，使用框架类型为“下方和嵌套的右侧框架”，左上方框架中的页面为信息显示页面showlx.asp，右上方框架中的页面为在线用户列表页面onlinelx.asp，下方框架中的页面为用户发言页面talklx.asp，页面布局要求达到如图所示效果。编写一个简单的动态页面leavelx.asp。第 99 页 共

46、100页项目实训项目实训 创建网上书店论坛创建网上书店论坛返 回关 闭l 项目评价 第 100 页 共 100页内 容评 价 等 级能 力 目 标评 价 细 则321职业能力能安装SQL Server 2000了解SQL Server的版本了解SQL Server的安装条件会正确安装SQL Server 2000能创建数据库和建立数据表会新建SQL Server数据库会新建SQL Server数据表会编辑、修改、删除SQL Server数据表及表中记录能创建数据源会正确设置SQL Server数据源能正确使用ASP的多种方法连接SQL Server数据库能熟练掌握框架页的设置能新建框架页会保存框架页能在Dreamweaver中使用服务器行为能在Dreamweaver中创建SQL Server数据源绑定数据表使用服务器行为通用能力自我评估能力独立构思能力解决问题的能力自我提高的能力创新能力综合评价返 回关 闭第 101 页 共 100页