网页设计与制作 课程授课教案课次18授课方式（请打）理论课 讨论课 实验课 习题课 其他课时安排2授课题目（教学章、节或主题）： 第四章：ASP内置对象 案例4-4：聊天室研究教学目的、要求（分掌握、熟悉、了解三个层次）：1. 了解聊天室的功能2. 熟悉本实例的文件组成和制作流程3. 掌握ASP五个内置对象的联合应用教学重点及难点：1. 聊天室的制作流程2. ASP五个内置内置对象在本实例中的作用教 学 基 本 内 容方法及手段案例 4-4 ：聊天室研究本案例有 5 个文件组成： index.asp：聊天室的登录界面 do_login.asp：登录处理界面 chatpage.htm：聊天室的框架文件 message.asp：聊天室的信息输入界面 display.asp：聊天信息显示页面 本案例的功能结构图及可见页面如下： 多媒体讲解，先演示本实例的操作过程，分析本实例具备的功能，再在页面的操作过程中分析各个页面如何联系在一起，组成一个聊天室的。教 学 基 本 内 容方法及手段如何从无到有，制作该实例？ 解答：其操作流程如下： 1. index.asp页面的制作 （1）新建一个动态页面，取名为index.asp。 （2）插入一个表单，在表单内输入相关文本，插入两个文本框和一个提交按钮。 （3）设置其中一个文本框的名字为：txtUserID；另一个为“txtUserPWD”。 （4）选择表单，在其属性面板中的动作框内输入：do_login.asp。 2. do_login.asp页面的制作新建一个动态页面，取名为do_login.asp，切换到代码窗口，添加如下代码： 多媒体讲解，通过上面的分析，与学生一起完成如下5个页面的制作。教 学 基 本 内 容方法及手段 3. message.asp页面的制作 （1）新建一个动态页面，取名为message.asp。 （2）设置页面背景色为蓝色。（3）插入一个表单，在表单内插入一个文本框和一个提交按钮。 （4）设置文本框的名字为：message。 （5）选择表单，在其属性面板中的动作框内输入：message.asp。 （6）切换到代码视图，在代码的最前面添加如下代码： % mywords = Request(message)oneSentence = 姓名： & Session(username) oneSentence = oneSentence & 机器号: & Session(no)& 说: & mywordsApplication.Lock()Application(talk) = Application(talk) & oneSentence & Application.UnLock()% 4. display.asp页面的制作 （1）新建一个动态页面，取名为display.asp。 （2）切换到代码视图，在标记内添加如下代码： function scrollWindow() this.scroll(0,65000)setTimeout(scrollWindow(),200) scrollWindow() （3）在标记内添加如下代码： 5. chatpage.htm页面的制作 （1）新建一个静态页面，单击菜单命令“插入”-“HTML” -“框架”-“上方”。 （2）按住Alt键，鼠标左键单击上方框架，在属性面板的源文件框中选择display.asp。 （3）按住Alt键，鼠标左键单击下方框架，在属性面板的源文件框中选择message.asp。 （4）单击菜单命令“文件”-“框架集另存为”，以chatpage.htm为文件名保存。思考：1. 本案例中可以输入任意的用户名和密码，输入用户名和密码的目的是为了在聊天界面显示而已。如果想要限制用户输入正确的用户名和密码，怎么办？2. 在本案例中，不通过 index.asp 的登录程序，也可以直接运行chatpage.htm。若强制用户必须经过index.asp页面才能运行其他页面，如何更改代码？3. 要使聊天信息界面 message.asp 输出的聊天信息变成不同的样式，如用户输入的用户名和密码以及聊天信息显示为红色，如何更改代码？ 解答：1. 若用户输入正确的用户名和密码才能进入聊天室，需要使用数据库，而相关的知识点在第五章中会学到，所以请期待下面的学习。 2. 把chatpage.htm另存为chatpage.asp，在该页面的代码前面增加如下代码： 切换到message.asp和display.asp页面的代码窗口，在最前面增加如上代码。一步步提示，举例讲解，多媒体讲解，使学生更深入了解本实例的功能代码，了解ASP内置对象在该实例中的应用。教 学 基 本 内 容方法及手段切换到do_login.asp页面的代码窗口，在该页面的代码前面增加如下代码： 3. 在message.asp页面代码中，在以上指到的三个对象前后加标记。给Session(username)用如下代码形式代替，Session(no)和mywords的更改方法类似： & Session(username) & 上机作业： 1. 先运行该实例，了解其操作流程和功能。2. 按照操作流程，制作并运行由5个文件组成的聊天室研究实例。3. 根据课件上的思考步骤，运行和更改第2步中的程序，看结果。第 5 页（共 5 页）