网站设计与建设 - 万水书苑-出版资源网

全文

(1)第. 7. 章网站核心功能的实现. 本章将通过制作一个完整的动态网站，来实践前面各章中讲解的相关技术。除前端的静态页面设计外，主要是使用服务器的 ASP 技术进行 Access 数据库的操作，如数据的输入、编辑、修改、删除、显示等，本章将结合前端的页面设计与数据库操作，实现一个完整的动态网站的建设。我们的这个实例是创建一个家教管理系统，其实就是网站管理员发布、管理家教信息，普通用户浏览家教信息，注册用户浏览并发布信息的网站系统。其中发布信息是将站点的信息添加到数据库中，在本站点中只有管理员和注册用户才能进行发布信息的操作。浏览信息就是读取数据库中已有的家教信息，在所设计的页面中进行显示。对家教信息的管理操作就是对数据库内容的修改更新或删除操作。所以，一个服务器技术+数据库的动态网站无外乎“插入记录”、 “更新记录”、 “删除记录” 和“显示记录”。应用功能的不同产生了不同的动态网站系统，比如，当把这些对数据库的操作应用在会员信息时，是“会员管理系统”；当把这些操作应用到家教信息中时，就是“家教管理系统”了。在这个实例中，我们从创建站点到编辑单个静态页面再到 ASP 动态网页技术的应用，详细地讲解网站制作的每一步骤。. 7.1 网站制作前期准备在实际工作中，要制作一个网站，第一步就是要搞清楚该网站的主题和它需要发布的相关信息是什么；第二步就是根据该网站的性质合理构思网站的结构，是需要严谨还是需要活泼；第三步要根据网站的栏目和内容确定数据库结构等。这些都是要在网站制作前考虑的问题。. 7.1.1. 站点结构与文件结构. 1．规划网站结构在站点制作前，我们要很好地规划站点的结构，这样为以后的制作、维护和更新提供了便利。首先，我们需要分析，建立一个家教管理系统网站，其中最重要的是家教信息和新闻的浏览。为了丰富新闻的阅读多样性，需要对新闻进行分类。新闻的分类可以自由灵活地设定，比如分为“时政新闻”、 “体育新闻”、 “娱乐新闻”等，然后再按分类进行网站栏目的设置。在本例中，我们简单地把新闻分成“家教新闻”、 “校园新闻”两大类；家教信息分为“家教需求” 与“教员”两大类。“家教需求”即需要请家教的用户，本书后面将称其为“学员” ，“教员” 即家教教师。网站的大体结构如图 7-1 所示。（1）首页。用于查看本系统中各分类的最新新闻及家教信息，即通过显示该记录集中最新插入的多条记录的标题，按时间排序显示在首页的各显眼位置，让浏览者进入网站后能以最.

(2) 192. 网站设计与建设. 快的速度浏览到本网站最新的新闻等讯息，达到一个“导读”的效果；还可以设置多个辅助性栏目，以尽量满足浏览者的需求，如“网内统计分析”、 “信息查询”、 “用户登录及注册”、 “友情链接”等。. 首页. 家教新闻列表. 校园新闻列表. 新闻详情浏览. 家教需求列表. 教员列表. 家教需求详情. 教员详情. 家教栏目管理. 社区论坛. 新闻管理. 用户管理. 图 7-1. 后台管理. 家教需求管理. 教员管理. 家教管理系统模块框图. （2）新闻列表。在首页里面显示的新闻列表只是最近更新的多条记录，不能达到家教管理系统大批量新闻浏览的效果。新闻列表可以通过显示该分类新闻的所有新闻标题，以供浏览者选择，当新闻超过一定量后，一个页面由于不能显示过多的新闻而失去可读性，可以使用“分页导航”来设置分页。（3）新闻详情浏览。在首页与新闻列表中都只显示出了新闻的标题，如果对某条新闻感兴趣，则可以单击链接打开详情浏览，从而显示出所选新闻的详细内容。（4）家教需求列表。列出本站点中已经登记的所有需要请家教的需求（即学员），供浏览者浏览查看。在此页面中只列出家教需求的最基本信息，达到大批量的浏览效果，如有需要可通过链接浏览家教需求的详情。该列表与“新闻列表”具有相同功能。（5）家教需求详情。在首页与家教需求列表中单击链接打开家教需求的详情浏览，显示出家教需求的全部信息。（6）教员列表。列出本站点中已经登记的所有教员，供浏览者浏览查看。在此页面中只列出教员的最基本信息，达到大批量的浏览效果，再通过链接浏览教员的详情。与“家教需求列表”功能相同。（7）教员详情。在首页与教员列表中单击链接打开教员的详情浏览，显示出教员的全部信息。（8）社区论坛。提供一个供浏览者发表留言、显示留言、回复留言的场所，从而达到网站管理者与浏览者、浏览者与浏览者之间的互动。（9）后台管理。包括“新闻栏目管理”、 “新闻管理”、 “家教需求管理” 、 “教员管理”及 “用户管理”等。其中“新闻栏目管理”用于添加、编辑、删除新闻栏目；“新闻管理”用于添加新闻、编辑新闻和删除新闻等的操作；“家教需求管理”用于添加、编辑和删除相关的家教需求信息； “教员管理”用于添加、编辑和删除相关的教员信息； “用户管理”可以查看、管理、统计注册用户的资料。其中前台是普通浏览者所能浏览的所有信息，普通浏览者也可以通过注册用户、登录等操作来参与网站的互动，如留言、评论等；后台管理是用于网站管理员登录后进行网站管理的平台。.

(3) 第 7 章网站核心功能的实现. 193. 2．建立文件结构在本地计算机中建立站点文件夹，表示“家教管理系统”Web 应用程序所有的文件存储地。如图 7-2 所示，在“我的电脑”中选择“D:”盘，在“D:”盘中建立文件夹 News，表示 “家教管理系统”，同时在该文件夹内建立多个子文件夹，用于对网站各类型文档的分类。如建立一个 images 文件夹专门存放站点的公用图片，建立一个 database 文件夹用于存放“家教管理系统”的数据库库文件，建立一个 admin 文件夹用于存放有关后台管理的程序文件，建立一个 other 文件夹用于存放网站的其他相关文件等。. 图 7-2. 站点文件结构示意图. 3．建立虚拟目录如图 7-3 所示，在 News 文件夹上右击，选择“属性”命令，打开文件夹的“属性”对话框。选择“Web 共享”选项卡，单击“共享文件夹”单选按钮，弹出“编辑别名”对话框，输入想要的别名，这里使用与文件夹相同的别名 News，单击“确定”按钮完成文件夹虚拟目录的定义。. 图 7-3. 建立虚拟目录. 4．在 Dreamweaver 中建立站点（1）打开 Dreamweaver，单击“站点”→“管理站点”命令，弹出“管理站点”对话框。（2）单击“管理站点”对话框中的“新建”按钮，在弹出的下拉菜单中单击“站点”，如图 7-4 所示。.

(4) 194. 网站设计与建设. （3）如图 7-5 所示，在站点定义对话框的“高级”选项卡中选择“本地信息”分类，设置“站点名称”为“家教管理系统” 。. 图 7-4. “管理站点”对话框. 图 7-5. “本地信息”分类选项. （4）设置本地根文件夹目录，可以直接输入我们前面所建立的文件夹 D:\News\，或者单击右侧的图标，打开“选择站点本地根文件夹”对话框，直接在该对话框中选择 News 文件夹。（5）设置默认图像文件夹，方法同上。可直接输入目录 D:\News\images 或单击右侧的图标，直接选择该文件夹。（6）在“HTTP 地址”中输入在浏览器中访问该网站的地址，即我们前面所建立的虚拟目录地址 http://localhost/news/；勾选“自动刷新本地文件列表”和“启用缓存”设置。（7）如图 7-6 所示，选择“测试服务器”分类，其中“服务器模型”选择 ASP VBScript； “访问”选择“本地/网络” ； “测试服务器文件夹”选择为本地站点文件夹路径 D:\News\； “URL 前缀”输入为站点文件夹虚拟目录访问地址 http://localhost/news。（8）至此， “高级”选项卡中的所有参数设置完毕，单击“确定”按钮进行设置的确认。（9）在“管理站点”对话框中出现了“家教管理系统”，单击“完成”按钮。这时在右侧的“文件”面板中就可以看见刚才建立的站点了，如图 7-7 所示。. 图 7-6. “测试服务器”分类选项. 图 7-7. 站点文件结构.

(5) 第 7 章网站核心功能的实现. 195. 系统数据库设计. 7.1.2. 针对本实例，通过对家教管理系统网站数据维护管理的内容和数据流程分析，我们设计的数据项和数据结构如下：新闻信息：新闻序号、新闻分类、新闻标题、新闻内容、发布人、发布时间。新闻栏目：新闻栏目序号、新闻栏目名称。教员信息：教员序号、用户名、密码、密码问题、密码问题答案、真实姓名、性别、年龄、所在院校、专业、现有身份、寒暑假是否在校、外语特长、普通话水平、计算机能力、家教经历、胜任教学科目、其他特长、联系电话、住址、邮箱、注册日期。学员信息：学员序号、用户名、密码、密码问题、密码问题答案、真实姓名、性别、年龄、年级、需家教科目、学习内容、对教师的要求、对教师性别要求、对教师籍贯要求、家教次数、家教时段、联系电话、所在区、详细地址、注册日期。管理员：管理员序号、管理员用户名、管理员密码、访问级别。论坛主题帖子：帖子序号、帖子标题、帖子内容、发布人、发布时间。论坛帖子回复：回复序号、对应主题帖子序号、回复内容、回复人、回复时间。访问量统计：序号、浏览者 IP 地址、进入时间、当天访问次数。有了上面的数据结构、数据项，我们就能进行下面的数据库设计。 1．建立数据库文件（1）打开 Access 数据库管理软件，单击“文件”→“新建”命令。（2）在右侧“新建文件”任务面板中选择“空数据库”进行新建。（3）弹出“文件新建数据库”对话框，选择“保存位置”为站点文件夹内的 database 文件夹，文件名为 NewsData.mdb。单击“创建”按钮完成数据库文件的建立。 2．建立数据表通过前面的数据项和数据结构的分析，形成数据库中的表及各个数据表之间的关系。本家教管理系统需要设计 8 个数据表来保存需要更新的数据：新闻信息表、管理员信息表、普通用户信息表、论坛帖子信息表、论坛帖子回复信息表和访问量统计表。其表结构如表 7-1 至表. 7-8 所示。表 7-1 新闻信息表列名. 数据类型. 表名：News. 字段大小. 默认值. 说明. News_ID. 自动编号. 长整型. 无. 序号（主关键字）. News_Type. 文本. 长整型. 无. 新闻栏目序号. News_Topic. 文本. 50. 无. 新闻标题. News_Text. 备注. 无. 新闻内容. News_User. 文本. 无. 新闻发布者. News_PTime. 日期/时间. =Now(). 新闻发布时间. 20.

(6) 196. 网站设计与建设表 7-2 管理员信息表列名. 数据类型. 表名：Admin. 字段大小. 默认值. 说明. Admin_ID. 自动编号. 长整型. 无. 序号（主关键字）. Admin _Username. 文本. 20. 无. 管理员用户名. Admin _Password. 文本. 20. 无. 管理员密码. Admin_Power. 数字. 长整型. 无. 管理员访问级别. 表 7-3 教员信息表列名. 数据类型. 表名：Teacher. 字段大小. 默认值. 说明. Teacher _ID. 自动编号. 长整型. 无. 序号（主关键字）. Username1. 文本. 20. 无. 用户名. Password1. 文本. 20. 无. 密码. Question. 文本. 30. 无. 密码问题. Answer. 文本. 30. 无. 密码问题答案. Teacher _Name. 文本. 20. 无. 真实姓名. Teacher _Sex. 文本. 4. 无. 性别. Teacher _Age. 数字. 长整型. 无. 年龄. Teacher _School. 文本. 50. 无. 学校. Teacher _Specialty. 文本. 50. 无. 专业. Teacher _Degree. 文本. 30. 无. 现在身份. Teacher _ Hols. 文本. 40. 无. 寒暑假是否在校. Teacher _FLanguage. 文本. 20. 无. 外语特长. Teacher _Mandarin. 文本. 20. 无. 普通话水平. Teacher _Computer. 文本. 20. 无. 计算机能力. Teacher _Story. 备注. 无. 家教经历. Teacher _Subject. 文本. 无. 胜任教学科目. Teacher _Strong. 备注. 无. 其他特长. Teacher _Tel. 文本. 30. 无. 联系电话. Teacher _Address. 文本. 200. 无. 住址. Teacher _email. 文本. 50. 无. 用户 E-mail. Teacher _Ptime. 日期/时间. =Now(). 用户注册时间. 250. 表 7-4 学员信息表列名. 数据类型. 表名：Student. 字段大小. 默认值. 说明. Student _ID. 自动编号. 长整型. 无. 序号（主关键字）. Username1. 文本. 20. 无. 用户名. Password1. 文本. 20. 无. 密码. Question. 文本. 30. 无. 密码问题. Answer. 文本. 30. 无. 密码问题答案. Student _Name. 文本. 15. 无. 真实姓名.

(7) 197. 第 7 章网站核心功能的实现. 续表列名. 数据类型. 字段大小. 默认值. 说明. Student _Sex. 文本. 4. 无. 性别. Student _Age. 数字. 长整型. 无. 年龄. Student _Grade. 文本. 20. 无. 年级. Student _Specialty. 文本. 100. 无. 需家教科目. Student _Viscera. 备注. 无. 学习内容. Student _Request1. 备注. 无. 对教师的要求. Student _Request2. 文本. 2. 无. 对教师性别要求. Student _Request3. 文本. 20. 无. 对教师籍贯要求. Student _Ci. 文本. 4. 无. 每周家教次数. Student _Time. 文本. 100. 无. 家教时段. Student _Tel. 文本. 30. 无. 联系电话. Student _Qu. 文本. 10. Student _Address. 文本. 200. 无. 住址. Student _email. 文本. 50. 无. 用户 E-mail. Student _Ptime. 日期/时间. =Now(). 用户注册时间. 所在区. 表 7-5 论坛帖子信息表列名. 数据类型. 表名：Main. 字段大小. 默认值. 说明. Main _ID. 自动编号. 长整型. 无. 序号（主关键字）. Main _Topic. 文本. 50. 无. 帖子标题. Main _Text. 备注. 无. 帖子内容. Main _User. 文本. 无. 帖子发布者. Main _PTime. 日期/时间. =Now(). 帖子发布时间. 20. 表 7-6 论坛帖子回复信息表列名. 数据类型. 表名：ReMain. 字段大小. 默认值. 说明. ReMain _ID. 自动编号. 长整型. 无. 序号（主关键字）. ReMain _MainID. 数字. 长整型. 无. 回复对应帖子序号. ReMain _Text. 备注. 无. 回复内容. ReMain _User. 文本. 无. 回复者. ReMain _PTime. 日期/时间. =Now(). 回复时间. 20. 表 7-7 访问量统计表列名. 数据类型. 表名：Counts. 字段大小. 默认值. 说明. Count _ID. 自动编号. 长整型. 无. 序号（主关键字）. Count _IP. 文本. 20. 无. 浏览者 IP 地址. Count _CTime. 日期/时间. =Now(). 浏览者进入时间. Count _Degree. 数字. 长整型. 该浏览者当天访问量.

(8) 198. 网站设计与建设表 7-8 新闻栏目表列名. 数据类型. 表名：NewType. 字段大小. 默认值. 说明. Newtype _ID. 自动编号. 长整型. 无. 序号（主关键字）. Newtype _text. 文本. 20. 无. 新闻栏目名称. 在上一步建立的 Newsbase 数据库中，按表 7-1 至表 7-8 所示结构，建立 News、Admin、 Teacher、Student、Main、ReMain、Counts 和 NewType 八个数据表。注意：Teacher 表和 Student 表中的 Username1 字段和 Password1 字段后面的“1”不要去掉，否则会和 Access 数据库的保留关键字相冲突而产生错误。至此，该“家教管理系统”网站的数据库建立完毕。. 7.1.3. 网站模板制作. 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。现在我们根据网站的访问者对象、要提供的信息以及制作目标设计一个最适合的网页架构。 1．设计网页架构草案在前面我们分析了“家教管理系统”的基本模块构成，通过模块图，我们可以把本站点的静态页面分为三种大致类型：首页、列表/详情页、论坛页。三种页面结构草案如图 7-8 所示。 Logo 与导航栏登录与查询栏. 分类导读栏. Logo 与导航栏统计与友情链接栏. 登录与查询栏. 列表/详情栏. 版权信息栏. 版权信息栏. （a）. （b） Logo 与导航栏. 论坛栏. 版权信息栏（c）图 7-8. 框架草案. 通过图 7-8 可以看出，在各网页页面结构中，有两个栏目在每一种页面类型中都出现了，有一个栏目在两种页面类型中出现。像这些部分，我们可以不必重复劳动，只需把这两个部分.

(9) 第 7 章网站核心功能的实现. 199. 单独制作成一个页面，在其他页面中只需要通过服务器脚本包括进去就行了，这样做的好处是显而易见的，我们只需要改变这个栏目的单独页面，整个网站中包括了该栏目的所有页面都会自动更新，而不需要一一去更改站点里的每一个页面。由此，我们可以把这个结构布局进行一些分解，使复杂的页面简单化。根据上面分析，把整个页面分成三上、中、下三部分，如图 7-9 所示。. 图 7-9. 基本页面分解图. （1）顶部： “Logo 与导航”栏，用于网站 Logo、导航菜单及网站宣传广告等的显示，此部分在整个站点的每个页面都相同，可作为独立页面命名为 Top.htm。（2）中部：这部分还可以更进一步的分解左右两部分，左边“登录与查询”栏在整个站点的每个页面都相同，可作为一个独立页面命名为 Left.asp；右边部分用于“分类导读栏”、 “新闻列表/详情栏”、“家教需求列表/详情栏”、“教员列表/详情栏”及“统计与友情链接栏”，此部分各种类型页面中不尽相同。（3）底部： “版权信息栏”，用于宣示站点的版权等信息，此部分在整个站点的每个页面都相同，可作为独立页面命名为 End.htm。并可以以此页做为本站点的模板文件，其他页面只须做少许修改即可。 2．“Logo 与导航栏”页面的设计在 Dreamweaver 中打开上节所建立的“家教管理系统”站点。（1）在站点 News 文件夹内创建一个“基本页”的“HTML”文件，命名为 Top.htm。（2）切换至布局视图，绘制布局表格，绘制表格大小为 776×117 像素，设置布局表格的背景颜色为“#E8F4FF” 。（3）在所绘制的布局表格内绘制如图 7-10 所示的布局单元格，请注意每个布局单元格的大小，以免造成不适合图片大小而导致最终效果变形。. 图 7-10. “Logo 与导航栏”布局.

(10) 200. 网站设计与建设. （4）切换回“标准”视图，在绘制的单元格内设置相应的背景图片，分别作为单元格中的图像。插入背景图片后效果如图 7-11 所示。 zou.gif. logo.gif. head1.gif. you.gif. guanggao.gif. head2.gif 图 7-11 “Logo 与导航栏”图像位置. （5）在网页中相应位置输入文字内容，文字大小为“9 点数（pt） ” ，暂不添加超链接效果。（6）单击网页任意位置，按组合键 Ctrl+A 选中整个网页，在属性面板中选择水平对齐方式为居中对齐。（7）在设计面板中选择“代码”视图显示网页代码，把“<body>”及前面所有行的代码都删除掉，把“</body>”行及其后面的所有行的代码删除掉，否则会影响后面的页面嵌入。（8）保存当前网页。 3．“版权信息栏”页面的设计网页底部的“版权信息栏”位于整个网页的底部，作为一个单独页面，结构比较简单。（1）在站点 News 文件夹内创建一个“基本页”中的 HTML 文件，命名为 End.htm。（2）切换至布局视图，绘制布局表格，绘制表格大小为 750×50 像素，设置布局表格的背景颜色为白色“#E8F4FF”。按照图 7-12（a）所示绘制里面的布局单元格，在第一行中插入一条水平线，在其他单元格中插入相关的图片与文字，效果如图 7-12（b）所示。. （a）. （b）图 7-12. “版权信息栏”页面布局. （3）单击网页任意位置，按组合键 Ctrl+A 选中整个网页，在属性面板中选择水平对齐方式为居中对齐。（4）在设计面板中选择“代码”视图显示网页代码，把“<body>”及前面所有行的代码都删除掉，把“</body>”行及其后面的所有行的代码删除掉，否则会影响后面的页面嵌入。（5）保存当前网页。 4．“登录与信息查询栏”页面的设计 “登录与信息查询栏”页面位于主页面中部的左边，是一个较特殊的页面，因为在该页面中要使用 ASP 服务器脚本，所以要建立一个动态页。（1）在站点 News 文件夹内创建一个“动态页”中的 ASP VBScript 文件，命名为 Left.asp。（2）切换至布局视图，绘制布局表格，绘制表格大小为 170×534 像素，设置布局格的.

(11) 第 7 章网站核心功能的实现. 201. 背景颜色为白色“#E8F4FF”。按照图 7-13 所示，绘制里面的嵌套布局表格。（3）切换回“标准”视图，在绘制的单元格内插入相应的图像。（4）在设计面板中选择“代码”视图显示网页代码，把“<body>”及前面所有行的代码都删除掉，把“</body>”行及其后面的所有行的代码删除掉，否则会影响后面的页面嵌入。（5）保存当前网页。 5．网页主页面的设计网页的主页面即前面所说的中部页面，这部分是一个网页的主要部分，顶部页面、底部页面和左边页面都会以服务器包括的方式嵌入本页面。详细设计方法如下。（1）在站点 News 文件夹内创建一个“动态页” 中的 ASP VBScript 文件，命名为 moban.asp，在工作区上方的“标题”后输入页面的标题文本“家教管理系统”。图 7-13 “登录与信息查询”页面（2）切换至布局视图，绘制布局表格，绘制表格大小为 770×534 像素，设置布局表格的背景颜色为白色“#FFFFFF”。按照图 7-14 所示绘制里面的嵌套布局表格。. 图 7-14. 主页面布局表格绘制. （3）切换回“标准”视图，分别给所绘制表格的左、右两边的小单元格内设置背景图像（左边背景图为 zuo.gif，右边背景图为 you.gif）。（4）将图 7-17 所示的中 580×534 像素的布局表格的边框设置为灰色单细线：在“标准” 视图中选择此布局表格，在“属性”面板中设置其“填充”为“0” ，“间距”为“1”，“边框” 为“0” ，“背景颜色”设置为灰色“#CCCCCC”；再在视图下方的标签行上选中此表格中的单元格“<td>” ，设置其“背景颜色”为白色“#FFFFFF”，这样，此布局表格就设置成了单细线表格边框。（5）单击网页任意位置，按组合键 Ctrl+A 选中整个网页，在属性面板中选择水平对齐方.

(12) 202. 网站设计与建设. 式为居中对齐。（6）选择“编辑”→“首选参数”命令，打开“首选参数”设置对话框，选择“不可见元素分类”，并将项前面的“√”去掉，使嵌入样式的元素不显示此标记，以免影响页面布局。（7）在设计面板中选择“拆分”视图以同时显示代码视图和设计视图，在代码视图中找到“<body>”代码行如下： <body> <div align="center"> <table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">. 在“<body>”标签的后面加一行代码，如下所示： <body>  <div align="center"> <table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">. 然后点击下面的“设计视图”面板，可以看到，在前面设计的“Logo 与导航栏”页面已经嵌入到主页面的顶端。（8）单击如图 7-15 所示的 Left.asp 标记所在的单元格，我们以另一种方式来嵌入“登录与信息查询栏”页面，选择“插入”菜单“ASP 对象”中的“包括”选项，可以看到，在代码视图中自动插入了一个“”标记，光标落在“virtual=""”的双引号中，我们在双引号中输入所要嵌入的文件名 Left.asp 就可以了。. 图 7-15. 嵌入页面代码. （9）在代码视图的底部找到“</body>”代码行如下： </div> </body> </html>. 在“<body>”标签的前面加一行代码，如下代码段所示： </div>  </body> </html>. （10）切换回“设计”视图，我们可以看到，在整个页面中已经显示出了所嵌入的“Logo 与导航”、“登录与信息查询”与“版权信息” 三个页面，如图 7-16 所示，至此，我们已经完成了模板页的制作，后面的所有页面将在此页面的基础上进行修改而得到。（11）保存当前网页。. 图 7-16 模板页面最终效果.

(13) 第 7 章网站核心功能的实现. 203. 7.2 用户登录系统的设计与实现在一个网站系统中，对于已经录入数据库的教员用户和学员用户，浏览者在进入站点时，将凭借其注册成功的用户名及对应的注册密码进行登录，就可以享受注册会员应有的权利了。那么，如何来判断用户输入的用户名和密码是数据库中已经保存的，并且还是吻合的呢？在 Dreamweaver 中可以使用“登录用户”服务器应用程序进行该功能的实现，本节将以“教员” 用户为例进行详细的说明。原理分析如下：（1）从登录用户名和登录密码的页面输入教员用户名和密码，并进行提交。（2）在登录验证的页面对上一步所提交的信息与数据库中已经存在的教员记录进行比较，如果在数据库中没有找到相同的教员用户名，则表示该登录用户名尚未注册，需要注册后才能进行登录和验证；若在数据库中有相同的教员用户名，则继续检测注册密码是否匹配，若教员用户名和密码完全吻合，则表示登录成功，否则提示登录失败，要求重新输入教员用户名和密码。如图 7-17 所示，整个用户登录系统需要三个文件来完全，即登录提交页、登录失败提示页和登录成功提示页。 z 登录提交页，即前面所建立的 left.asp 页面，除了教员用户名和密码的输入外，还要对输入的教员用户名和密码进行验证。 z 登录失败提示页 loginbad_1.asp，当教员用户名、密码等登录信息不完全正确时跳转到此页。 z 登录成功提示页 loginpass_1.asp，除了提示登录成功外，还将显示出教员用户的各项注册资料。 loginbad_1.asp. Left.asp. loginpass_1.asp. 登录提交页. 登录失败提示页. 失败. 图 7-17. 7.2.1. 登录验证. 成功. 登录成功提示页. 用户登录系统流程结构图. 登录验证. 1．数据库连接文件因为本系统内很多的操作都需要与数据库进行连接，所以一个数据库连接文件就显得尤为重要。（1）在“家教管理系统”站点文件夹中选择打开 Left.asp 文件。（2）打开“应用程序”面板中的“数据库”选项卡。（3）单击“添加”按钮，在弹出菜单中选择“自定义连接字符串”。（4）在弹出的“自定义连接字符串”对话框中，输入“连接名称”为 conn。.

(14) 204. 网站设计与建设. （5）在“Dreamweaver 应连接”选项中选择“使用测试服务器上的驱动程序”项。（6）在“连接字符串”文本框中输入以下内容，如图 7-18 所示。 "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=d:/news/database/Newsbase.mdb". 图 7-18. “自定义连接字符串”对话框设置. （7）单击“测试”按钮对连接进行测试，如果提示“成功创建连接脚本”即连接创建正确，单击“确定”按钮完成设置。注意：在“连接字符串”文本框中输入的所有符号都是英文的，千万不要输入汉字的标点标号。此外，这个连接字符串中的“Data Source=”后面是数据库文件的“物理路径”，当编写和测试 ASP 页面的时候，数据库文件就在自己的计算机上，因此可以知道这个文件的具体路径，按照这个路径写当然没有问题了，但是将来要上传到远程服务器上的时候，就要注意了，如果直接这样上传到服务器上，肯定是不行的，因为根本就不知道这个文件在服务上的绝对路径。解决方法是在站点上传到服务器之前修改一下连接字符串如下： "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= "& server.mappath("/database/Newsbase.mdb"). 然后在上传到远程服务器上，就不容易出错了。 2．设计登录表单（1）在“家教管理系统”站点文件夹中选择打开 Left.asp 文件。（2）把光标置于“用户登录”标题下面的单元格中，插入一个 2×1 的表格，适当调整单元格大小，如图 7-19（a）所示。（3）将鼠标光标置于刚才所建表格的第 1 个单元格中，选择“插入”→“表单”→“表单”命令，在光标所在单元格中插入一个红色虚线框的“表单”。（4）在红色虚线框的“表单”中插入一个 5×3 表格，并进行相关布局调整，如图 7-19 （b）所示。（5）在设置好的布局表格中插入相关的“表单元素”，如图 7-19（c）所示。. （a）. （b）图 7-19. （c）. 用户登录表单布局. 在左侧的第一个单元格中插入钥匙图片 user_pass.gif。在相关单元格中插入“用户”、“密码”、“注册教员”、“注册学员”、“找回密码”等文本信息。.

(15) 第 7 章网站核心功能的实现. 205. 光标置于右侧第一行中，打开“插入”菜单，选择“表单”类别中的“单选按钮”菜单项，插入一个“单选按钮” ，选择该“单选按钮” ，在其属性面板中设置“单选按钮”值为 xuanze， “选定值”设置为 Teacher， “初始状态”为“已勾选” ，并在该单选按钮后面输入文本“教员” 。重复上一步，在此单元格中继续插入一个“单选按钮”，选择该“单选按钮”，在其属性面板中设置“单选按钮”值为 xuanze，“选定值”设置为 Student，“初始状态”为“未选中”，并在该单选按钮后面输入文本“学员”。光标置于“用户”后的单元格，打开“插入”菜单，选择“表单”类别中的“文本字段” 菜单项，插入一个“文本字段”输入框，选择该输入框，打开其属性面板，在“文本域”下面的输入框中输入值 username1，设置“字符宽度”为 12。再用同样的方法在“密码”后的单元格中插入一个“文本字段”，选择该“文本字段”，在属性面板“文本域”下的输入框中输入值 password1，同时选择其“类型”为“密码”，设置“字符宽度”值为 12，如图 7-20 所示。. 图 7-20. 密码“文本字段”的属性. 在表格的第四行插入“按钮”，在属性面板中设置其“标签”为“登录” 。以上即可快速完成登录页面的制作，接着则是对表单项进行相关的检查工作。 3．检查表单检查表单，即检查用户在表单中所输入的内容是否符合指定条件，如在用户登录系统中，表单中的“用户”和“密码”两项都不能为空，否则不予以验证，具体设置过程如下：（1）在“家教管理系统”站点文件夹中选择打开 Left.asp 文件。（2）单击选择页面中的“登录”按钮，按 Shift+F4 组合键打开“行为”面板，单击“添加行为”按钮，在弹出的菜单中选择“检查表单”菜单项。（3）如图 7-21 所示，在弹出的“检查表单”对话框中分别选择“命名的栏位”中的两项，设置其“值”为，“可接受”选择为。. 图 7-21. “检查表单”对话框. （4）单击“确定”按钮完成行为的添加。 4．用户身份验证此项功能要求数据库中的教员用户表 Teacher 中必须有初始记录，如果没有，请先使用 Access 数据库工具对该表输入至少一条记录。（1）在工具面板中选择“应用程序”项打开应用程序工具面板，单击“用户身份验证” 按钮的向下箭头，在弹出菜单中选择“ 登录用户”菜单项，如图 7-22 所示。.

(16) 206. 网站设计与建设. 图 7-22. 选择“登录用户”. （2）在弹出如图 7-23 所示的“登录用户”对话框中进行如下设置，并作说明如下： z “从表单获取输入”。表示从页面中选择某一个表单作为登录验证的数据来源信息，在这里我们选择表单 form1。 z “用户名字段”。表示在选择的表单中用来表示验证时验证用户名的表单元素的名称。在这里我们选择文本字段 Username。 z “密码字段” 。表示用来进行登录验证时验证用户对应字码的表单元素的名称。这里选择文档中的文本字段 Password。 z “使用连接验证”。用于选择验证数据库的连接名称。只有当站点中已建立了数据库连接的情况下才能在该下拉列表中进行选择。这里选择我们前面所定义的 conn。. 图 7-23 z z z z. z. “登录用户”对话框设置. “表格”。选择数据库中用于验证所在的表。因为这里是进行登录操作，所以验证内容与普通用户信息表进行关联，选择 Teacher 表。 “用户名列” 。在数据库表中，用来与表单页的“用户名字段”进行比较验证的字段名称。这里选择 Username1。 “密码列”。在数据库表中，用来与表单页的“密码字段”进行比较验证的字段名称。这里选择 Password1。 “如果登录成功，转到” 。表示当表单中的“用户名字段”和“密码字段”与数据库表中的“用户名字段”和“密码字段”完全吻合，即登录成功时所要转到的页面。可以直接输入文件路径和文件名，也可以点击后面的浏览按钮进行选择。这里我们直接输入文件名 loginpass_1.asp。 “如果登录失败，转到” 。表示当表单中的“用户名字段”和“密码字段”与数据库表中的“用户名字段”和“密码字段”不完全吻合，即登录失败时所要转到的页面。.

(17) 第 7 章网站核心功能的实现. 207. 可以直接输入文件路径和文件名，也可以点击后面的浏览按钮进行选择。这里我们直接输入文件名 loginbad_1.asp。 z “基于以下项限制访问” 。表示采用什么方法对页面保护进行的一些限制。这具体视站点中需要保护页的验证选择情况而定，普通情况使用“用户名和密码”选项就可以了。（3）设置好后单击“确定”按钮完成“登录用户”的设置。 5．登录产生的变量 Session 在 Dreamweaver 中，当添加了“登录用户”服务器应用程序后，会自动产生 Session 值： Session("MM_Username")，该 Session 的值为正确登录的用户名，方便于在后面的页面中进行调用。如果在“登录用户”对话中设置了“基于以下项限制访问”中的“用户、密码和访问级别” 项，则还会自动产生一个表示访问级别的 Session 变量：Session("MM_UserAuthorization")。 6．登录失败页（1）打开“家教管理系统”站点中的模板页 moban.asp，选择“文件”→“另存为”命令，命名为 loginbad_1.asp，以建立一个与模板文件一致的文件。（2）如图 7-24 所示，在设计视图中为该页面添加登录失败的相关文本提示信息“您输入的用户名或密码错误，请重新登录！ ”。. 图 7-24. 登录失败页面设计. （3）保存当前页面。 7．登录成功页（1）打开“家教管理系统”站点中的模板页 moban.asp，选择“文件”→“另存为”命令，命名为 loginpass_1.asp，以建立一个与模板文件一致的文件。（2）如图 7-25 所示，在设计视图中为该页面添加入登录成功的相关文本提示信息“，您好，欢迎登录本系统！” ，并在文字下方插入一条“水平线” 。（3）在中间部位插入一个 19×2 的表格，设置适当大小和外观并添加相关文本信息。（4）如图 7-26（a）所示，打开“应用程序”面板中的“绑定”选项卡，选择“添加绑.

(18) 208. 网站设计与建设. 定”按钮，从弹出菜单中选择“阶段变量”菜单项，弹出“阶段变量”对话框。在“名称” 输入框中输入 MM_Username，单击“确定”按钮完成“阶段变量”的添加，如图 7-26（b）所示。. 图 7-25. 登录成功页面布局. （ 5）将“绑定”面板中刚才所添加的“阶段变量” MM_Username 拖动到设计面板中 “，您好！欢迎登录本系统！”的逗号前面，以在此语句前面添加一个正确登录后用户名。（6）打开“应用程序”面板中的“绑定”选项卡，选择“添加绑定”按钮，从弹出菜单中选择“记录集（查询）”菜单项，弹出“记录集”对话框。（7）如图 7-27 所示，给记录集进行命名 Recordset1，选择连接为 conn，选择表格为 Teacher，并进行“筛选”的条件的相关设置。这里分别选择筛选条件为 Username1、 “=” 、 “阶段变量”和 MM_Username，表示筛选出数据库表中 Username1 字段的值与“阶段变量”的值 MM_Username 完全相同的记录。. （a）图 7-26. （b） “阶段变量”的添加. 图 7-27. “记录集”对话框. （ 8）绑定了“记录集”和“阶段变量”后的“应用程序”面板如图 7-28 所示。从绑定面板中把相应的记录集字段名拖动到设计面板中的相关位置，以用于显示登录成功用户的详细资料。（ 9 ）对代码进行一些手动修改，因为在页面中包括了嵌入文件 Left.asp 文件，与 loginpass.asp 部分代码会有冲突，只需切换到代码视图，把本页面最顶部定义数据集 Recordset1 的代码移至包括嵌入的语句“”与应用之间部位就可以了，如图 7-29 所示。后面如果遇到类似情况，也需要进行同样的处理，以免造成错误。.

(19) 第 7 章网站核心功能的实现. 图 7-28. 209. “记录集”插入页面示意图. （10）在 Left.asp 文件中给“用户登录”栏目添加用户登录成功信息。如图 7-30 所示，打开 Left.asp 文件，在登录表单下方插入一个 3×2 表格，合并前两行的两个单元格，在单元格中添加相关文本信息。打开“应用程序”面板中的“绑定”选项卡，将 Session 中的 MM_Username 变量拖动至设计面板中“，您好”文本的前面。. 图 7-29. ASP 代码移动位置示意图. 图 7-30. 给 Left.asp 页添加登录成功信息. （11）设置条件语句以区分地显示相关信息。因为 Left.asp 页面“用户登录”栏目中既有登录表单，又有登录成功提示信息，这两部分不能同时显示出来。若没有用户登录，就只显示登录表单，若有用户登录成功，则只显示成功登录的欢迎信息。这就需要使用 ASP 的 “IF…ELSE…END IF”条件语句，打开代码视图，参照以下代码再添加相关语句（斜体字为所添加的代码）。 a）在代码中找到“<form name="form1" method="POST" action="<%=MM_LoginAction%>">” 标签，在“<form>”所在的“<tr>”标签前加入“<% If Session("MM_Username")="" Then %>” 代码行： <table width="145" height="156" border="0" cellpadding="0" cellspacing="0"> <% If Session("MM_Username")="" Then %> <tr> <td height="103"><form name="form1" method="POST" action="<%=MM_LoginAction%>">.

(20) 210. 网站设计与建设 <div align="center"> <table width="145" height="119" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="40" class="style6"><div align="center" class="style3">用户</div></td>. b）在代码的后面部分找到“<%= Session("MM_Username") %>，欢迎登录本系统！”所在的代码，在这句代码所在的表格“<table…>”标签所在的“<tr>”标签前加入“<%ELSE%>” 代码行；在此表格结束的“</table>”标签后面的“</tr>”标签后面加入“<% END IF %>”代码行，代码如下所示： </tr> <% Else %> <tr> <td height="36"><table width="145" height="38" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"><div align="center"><%= Session("MM_Username") %>，您好，</div></td> </tr> <tr> <td colspan="2"><div align="center">欢迎登录本家教中心！</div></td> </tr> <tr> <td width="48%"><img src="images/user_center.gif" width="81" height="26"></div></td> <td width="52%"><img src="images/user_logout.gif" width="81" height="26"></div></td> </tr> </table></td> </tr> <% END IF%> </table>. （12）设置链接至“登录成功”页面，以显示用户详细资料。选择“用户登录”栏中的 “用户中心”图片，在“属性”面板中设置“链接”为 loginpass_1.asp。（13）保存当前页面。注意：因为本站点的动态页面使用了三个服务器 “ 包括 ” 的代码 “  ”，因为在所包括的页面 Left.asp 中已经包括了数据库连接文件的语句 “”，所以在包含了 Left.asp 文件的的其他页面中不能再次使用“包括”语句“” ，否则会出现服务器错误，不能正常显示网页。在 loginpass.asp 页面中，我们选择代码视图，在代码页的顶端，把所包含的“”代码行删除掉就可以了，其他页面也与此类似。 8．登录系统的调试打开 moban.asp 页，单击按钮在浏览器中进行预览。在登录页随便输入任意的“用户” 和“密码”，以检测“用户登录”的判断功能。如果不是使用正确的用户名和密码，将跳转到登录失败页，否则会跳转到登录成功页，并显示用户相关详细资料。. 7.2.2. 找回密码. 有时用户会忘记了自己的密码， “找回密码”就是为了用户重新取回自己的密码而设计的一项功能。下面是原理分析。（1）用户通过一个“文本字段”框输入要找回密码的用户名，并进行提交。.

(21) 第 7 章网站核心功能的实现. 211. （2）对提交的用户名进行数据库查询，看数据库普通用户表中有无此用户名，如果有此用户名，就给出用户注册时设置的找回密码问题，要求用户输入密码问题的答案，并进行提交。如果没有此用户名，就返回要求重新输入用户名。（3）在接收到用户提交的密码问题答案后，再一次查询数据库，看是否与用户注册时所设置的密码答案吻合，如果完全吻合，就给出用户设置的密码；如果不完全吻合，则返回前一步，要求再次输入密码问题答案。如图 7-31 所示，整个找回用户密码系统需要三个文件来完成，即用户名输入页、用户名检查页和密码问题检查页。输入注册用户名. pw1.asp. pw2.asp. pw3.asp. 没有该用户. 检查用户名. 显示注册密码图 7-31. 输入密码问题答案. 检查问题答案. 问题答案错误. 找回密码流程示意图. 用户名输入页 pw1.asp。作为用户名输入平台，提示并要求输入需要找回密码的用户名。 z 用户名检查页 pw2.asp。用于接收用户名输入页所提交的用户名，检查数据库中有无该用户名，并做出相应的显示。若数据库中没有查询到该用户名，则显示错误提醒信息，并提供跳转到用户名输入页 pw1.asp 页的链接；若数据库中有该用户名，则显示出该用户设置的找回密码问题和一个输入问题答案的文本字段。 z 密码问题检查页 pw3.asp。用户接收用户名检查页所提交的找回密码问题答案，检查与数据库中对应的答案是否吻合，并作相应的显示，若所提供的密码答案错误，则显示错误提醒信息，并提供跳转到用户名检查页 pw2.asp，要求重新输入密码答案；若所提供的密码答案正确，则显示该用户名所对应的密码，完成密码查询。在此节中，我们以教员用户为例，设计一个找回教员用户密码的平台。 1．用户名输入页（1）打开“家教管理系统”站点中的文件 moban.asp，选择“文件”→“另存为”命令，命名为 pw1.asp，以建立一个与该文件布局相近的文件。（2）在设计视图中对该页面进行相应设计，将左侧的登录栏布局表格删除，只保留一个布局表格，可适当调整布局表格的高度。（3）打开“插入”菜单，选择“表单”类别中的“表单”菜单项，在单元格中间插入了一个红色虚线框的“表单”，并在“表单”的“动作”文本框中输入 pw2.asp， “方法”选择为 GET。（4）在红色虚线框的表单中插入一个 3×1 的表格，设置表格的大小，如图 7-38 所示，并在表格中添加找回密码的相关文本提示信息。（5）在“请输入需要查询密码的用户名”后面插入一个“文本字段”，并设置该“文本字段”的“文本域”为 Username1。 z.

(22) 212. 网站设计与建设. （6）在表格的第三行中插入一个“按钮”，动作设置为“提交表单”。（7）选择刚刚插入的“提交”按钮，按 Shift+F4 组合键打开“行为”面板，单击“添加行为”按钮，在弹出菜单中选择“检查表单”菜单项。（8）如图 7-33 所示，在弹出的“检查表单”对话框中，选择“命名的栏位”中的选项，设置其“值”为，“可接受”选择为。. 图 7-32. 找回密码第一步布局. 图 7-33. 设置“检查表单”对话框. （9）单击“确定”按钮完成“检查表单”的设置。（10）保存当前网页。 2．用户名检查页在这个页面中，我们要对用户名输入页 pw1.asp 中传递过来的“用户名”进行验证，并给出相应的反馈。若无此注册用户名，则提醒用户出错，并提供跳转到 pw1.asp 的链接，要求用户重新输入用户名；若有此注册用户名，则显示出该用户设置的找回密码的问题，并提供“找回密码答案”的文本输入框，提交给 pw3.asp 进行接收处理操作。那么，在这个页面中，我们如何根据判断的结果来分别显示不同的信息呢？在 Dreamweaver 中，可以使用“显示区域”的设置来达到此功能的实现，“显示区域”服务器行为可使得在一个页面中，根据不同区域显示条件而显示不同的页面内容。（1）打开“家教管理系统”站点中的文件 pw1.asp，选择“文件”→“另存为”命令，命名为 pw2.asp，以建立一个与该文件布局相近的文件。（2）如图 7-34 所示，在设计视图中对该页面进行相应修改。 1）在红色虚线框的“表单”前一行输入“对不起，没有您要查询的用户名，请返回重新输入用户名。 ”的提示，并选择其中的“返回”两个字，在“属性”面板中设置“链接”为 pw1.asp，用于跳转到前一页。 2）选择红色虚线框的“表单”，在表单“属性”面板中的“动作”文本框中输入 pw3.asp， “方法”选择为 GET。 3）如图所示，在表格内多插入一行，并进行相关的文本设置。 4）将“请输入您找回密码问题的答案：”后面的“文本字段”的“文本域”改为“Answer”。（3）选择“提交”按钮，按 Shift+F4 组合键打开“行为”面板，先删掉其中已有的行为项，再单击“添加行为”按钮，在弹出菜单中选择“检查表单”菜单项。在弹出的“检查表单”对话框中，选择“命名的栏位”中的选项，设置其“值”为，“可接受”选.

(23) 第 7 章网站核心功能的实现. 213. 择为. 。（4）为该页面绑定记录集。 1）打开“应用程序”面板中的“绑定”选项卡，单击“添加行为”按钮，在弹出的菜单中选择“记录集（查询）”菜单项。 2）如图 7-35 所示，将记录集命名为 Recordset1，选择连接为 conn，选择表格为 Teacher，并进行“筛选”的条件的相关设置，这里我们分别选择筛选条件为： “Username1”、 “=” 、 “URL 参数”和“Username1”，表示筛选出数据库表中 Username1 字段的值与 pw1.asp 提交的值 Username1 完全相同的记录。. 图 7-34 找回密码第二步布局. 图 7-35 绑定记录集对话框. （5）插入动态记录值，如图 7-36 所示，将鼠标定位于页面中 “您的找回密码问题是：” 的后面，打开“应用程序”面板中的“绑定”选项卡，选择记录集 Recordset1 中的 Question 字段，并点击面板下方的“插入”按钮，或直接将 Question 字段拖动至页面中的相应位置。. 图 7-36. 插入动态记录值. （6）插入隐藏域。为了方便下一页的查询，还需要插入隐藏域“用户名”和“找回密码问题”。设置了隐藏域后，若用户名检测正确，则会向下一页 pw3.asp 继续传递“用户名”、 “找回密码问题”以及用户输入的“找回密码问题答案”三个值，以供下一页进行相应的判断，具体操作如下。 1）如图 7-37 所示，选择“插入”→“表单”命令，选择其中的“隐藏域”菜单项，选择插入一个“隐藏域”。选择该“隐藏域”，在“属性”面板中输入“隐藏区域”值为 Username1。 2）单击“值（V）”文本输入框后面的“ ”图标按钮，在弹出的“动态数据”对话框中选择“记录集（Recordset1）”中的 Username1 字段，单击“确定”按钮完成设置。 3）重复前面 1）、2）两步，插入“隐藏区域”值为 Question 的隐藏域，并选择其动态值为“记录集（Recordset1）”中的 Question。（7）设置“显示区域” ，用以区分错误信息显示和下一步验证的信息显示，具体设置如下：.

(24) 214. 网站设计与建设. 1）如图 7-38 所示，选择页面中的“对不起，没有您要查询的用户名，请返回重新输入用户名。”语句。. 图 7-37. 图 7-38. 插入“隐藏域”. 如果记录集为空则显示区域. 2）打开“应用程序”工具面板，单击“显示区域”工具按钮后面的向下箭头，从弹出的菜单中选择“如果记录集为空则显示”菜单项，即当没有查询到符合条件的记录时显示该段文本。 3）在弹出的“如果记录集为空则显示区域”对话框中选择“记录集”为当前页所绑定的记录集 Recordset1，单击“确定”按钮完成该显示区域的设置。 4）重复前面 1）、2）、3）三个步骤，如图 7-39 所示，选择页面中的表单区域，再选择“显示区域”中的“如果记录集不为空则显示”菜单项，在弹出的“如果记录集不为空则显示区域” 对话框中选择“记录集”为当前页所绑定的记录集 Recordset1，单击“确定”按钮完成该显示区域的设置。 3．密码问题检查页在这个页面中，我们要对用户名检查页 pw2.asp 中传递过来的“用户名”、 “找回密码问题”.

(25) 第 7 章网站核心功能的实现. 215. 以及“找回密码问题答案”进行验证，并给出相应的反馈，若“找回密码问题答案”不正确，则提醒用户出错，并提供跳转到 pw2.asp 的链接，要求用户重新输入“找回密码问题答案”；若“找回密码问题答案”正确，则显示出该用户设置的密码，完成找回密码的全部过程。. 图 7-39. 如果记录集不为空则显示区域. （1）打开“家教管理系统”站点中的文件 pw1.asp，选择“文件”→“另存为”命令，命名为 pw3.asp，以建立一个与该文件布局相近的文件。（2）如图 7-40 所示，在设计视图中删除掉原页面中的表单部分，对该页面进行相应修改，在页面中间部位输入“您所输入的密码问题答案错误，请返回重新输入！” 、“您所设置的密码是：”两行文本。（3）绑定记录集。因为密码问题检查页 pw3.asp 接收的传递中有“用户名”、“找回密码问题”和“找回密码问题答案”三个元素的值，要与数据库表中对应的字段的值进行比较，只有这三个值同时全部吻合才表示“找回密码问题答案”是正确的，否则一律视为查询密码失败。因为要对三个值同时进行比较，所以操作要比前面所讲的记录集绑定要稍微复杂一点，具体操作如下。 1）打开“应用程序”面板中的“绑定”选项卡，单击“添加行为”按钮，在弹出的菜单中选择“记录集（查询）”菜单项。 2）如图 7-41 所示，将记录集命名为 Recordset1，选择连接为 conn，选择表格为 Teacher，并进行“筛选”条件的相关设置，这里我们分别选择筛选条件为：Username1、=、 “表单变量” 和 Username1 ，表示筛选出数据库表中 Username1 字段的值与 pw2.asp 提交的隐藏域值 Username1 完全相同的记录。 3）单击“记录集”对话框右边的“高级…”按钮，切换至“记录集”高级模式。 4）如图 7-42 所示，单击按钮添加两个变量，并分别进行设置： “名称”为 MMQuestion， “默认值”为“1”， “运行值”为“Request. QueryString ("Question")” ； “名称”为 MMAnswer， “默认值”为“1” ，“运行值”为“Request. QueryString ("Answer")”。 5）在“记录集”高级对话框的“SQL”文本区域中，在最后一行的 SQL 代码后面添加如下语句：AND Question='MMQuestion' AND Answer='MMAnswer'。.

(26) 216. 网站设计与建设. 图 7-40. 密码问题检查页布局. 图 7-41. 记录集绑定中的高级按钮. 6）单击“确定”按钮完成记录集的绑定。（5）插入动态记录。如图 7-43 所示，将“记录集（Recordset1）”中的 Password1 字段拖动到设计视图中“您所设置的密码是：”文本之后。. 图 7-42. 记录集高级对话框设置. 图 7-43. 插入动态记录. （6）设置答案错误时转到用户名检查页面 pw2.asp。因为 pw2.asp 页面是需要接收前一个页面传递过来的用户名值的，从 pw3.asp 返回 pw2.asp 也需要将用户名的值传回给 pw2.asp 页面，而单纯的超链接跳转是无法传递用户名值的，所以采用“转到相关页面”的功能，将从 pw2.asp 接收的相关值继续传递给 pw2.asp，也就使得用户不必再次输入这些参数。具体设置如下： 1）如图 7-44 所示，选择页面中的“返回”文本，打开“应用程序”工具栏面板，单击其中的工具按钮后面的下箭头，选择弹出菜单中的“转到相关页面”菜单项。 2）在弹出的“转到相关页面”对话框中，设置“链接”为“所选范围‘返回’”文本， “相关页”为 pw2.asp，“传递现有参数”同时选择“URL 参数”和“表单参数”前的复选框。（7）设置“显示区域”，用以区分找回密码答案错误的信息的显示和回答正确显示的密码信息，如图 7-45 所示，具体设置如下。 1）选择页面中的“您所输入的密码问题答案错误，请返回重新输入！”语句。 2）打开“应用程序”工具面板，单击“显示区域”工具按钮后面的向下箭头，从弹出的菜单中选择“如果记录集为空则显示”菜单项，即当没有查询到符合条件的记录时显示该段文本。.

(27) 第 7 章网站核心功能的实现. 217. 3）在弹出的“如果记录集为空则显示区域”对话框中选择“记录集”为当前页所绑定的记录集 Recordset1，单击“确定”按钮完成该显示区域的设置。. 图 7-44. 转到相关页面对话框. 4）重复前面 1）、2）、3）三个步骤，如图 7-45 所示，选择页面中“您所设置的密码是： {Recordset1.Password1}”文本，再选择“显示区域”中的“如果记录集不为空则显示”菜单项，在弹出的“如果记录集不为空则显示区域”对话框中选择“记录集”为当前页所绑定的记录集 Recordset1，单击“确定”按钮完成该显示区域的设置。. 图 7-45. “显示区域”设置. （8）设置“查找密码”超链接。打开 Left.asp 页面，在“用户登录”栏目中选择“找回密码”文本，在“属性”面板中设置“链接”为 pw1.asp。（9）查找密码系统的调试。打开 moban.asp 页，在浏览器中进行调试，单击“找回密码” 链接，在打开的页面中输入用户名进行查询，分别测试正确的用户名和错误的用户名，看是否显示出了相应的提示，通过后再分别用正确的找回密码问题答案和错误的找回密码答案来进行下一步的测试，看能否显示出相应的提示信息。. 7.2.3. 退出登录. 当用户登录系统后，有用户需要一个释放已登录会话的功能，即“退出登录”功能。退出登录一般要完成两项操作：一是将用户正确登录后生成的 Session 变量进行注销；二是将当前页跳转至网站首页。.

(28) 218. 网站设计与建设. （1）如图 7-46 所示，打开 Left.asp 页面，在设计视图中选择“退出登录”的图片。. 图 7-46. “注销用户”设置. （2）打开工具面板中的“应用程序”工具面板，选择“用户身份验证”中的“注销用户” 菜单项。（3）在弹出的“注销用户”对话框中进行设置：在“在以下情况下注销：”后面选择“单击链接”单选按钮，从下拉菜单中选择“所选范围‘退出登录’”；在“在完成后，转到：”后面的文本框中输入 index.asp，表示在退出登录后跳转到网站首页（因为首页目前还没有建立，我们可以使用 moban.asp 文件另存为 index.asp 作为首页，以便于调试）。（4）单击“确定”按钮完成“注销用户”的设置。至此，本系统的普通用户登录、找回密码以及退出登录的功能已经全部完成，我们可以在浏览器中对以上部分进行相关的调试。. 7.3 网站新闻浏览的设计与实现用户访问家教管理系统，了解最新的家教资讯，可以通过家教管理系统提供的新闻栏目来获取，所以，设计一个快捷有效的新闻浏览方式是十分有必要的。本节将对新闻栏目的设置、新闻分类列表页面以及新闻详细页面进行设计。其中“新闻列表页”用于对所选的新闻栏目内的所有新闻行进一个列表显示，当浏览用户点击“新闻列表页”中的任一新闻标题后将进入该新闻的“新闻详细页”，以显示该新闻详情。. 7.3.1. 新闻栏目设计. 在前面的小节中，我们建立了一个在页面顶部的“Logo 与导航栏”文件 Top.htm 的设计，在这个文件中，我们简单地对本家教管理系统中的新闻栏目进行了设置，即“校园新闻”和“家教新闻” 两个栏目。当然，读者可以自由地添加其他的新闻栏目，以供不同应用场合的需要。（1）在进行具体的设计之前，我们需要对数据库图 7-47 录入“新闻栏目”表初始数据中的新闻栏目表进行初始化数据的录入，如图 7-47 所.

(29) 第 7 章网站核心功能的实现. 219. 示，录入“校园新闻”和“家教新闻”两个记录。（2）打开“Logo 与导航栏”文件 Top.htm，为导航栏中的“校园新闻”与“家教新闻” 文本添加超链接。因为各栏目的新闻列表页都是使用同一个文件，所以在这里的链接要经过特殊的的设置，即需要传递“新闻栏目类型”值给新闻列表页，如图 7-48 所示。 1）在设计面板中选择导航栏中的“校园新闻”文本，在“属性”面板的“链接”文本框中输入 newlist.asp?newtype=1，其中 newlist.asp 表示新闻列表页，后面的“?newtype=1”表示向列表页传递一个 newtype 变量，值为 1。 2）同样选择“家教新闻”文本，在“属性”面板的“链接”文本框中输入 newlist.asp? newtype=2，其中 newlist.asp 表示新闻列表页，后面的“?newtype=1”表示向列表页传递一个 newtype 变量，值为 2。. 图 7-48. “新闻栏目”超链接设置. （3）设置导航栏的其他超链接： z 选择导航栏中的“首页”文本，在“属性”面板的“链接”文本框中输入 index.asp； z 选择导航栏中的“教员资料”文本，在“属性”面板的“链接”文本框中输入 TList.asp； z 选择导航栏中的“学员资料”文本，在“属性”面板的“链接”文本框中输入 SList.asp； z 选择导航栏中的“收费标准”文本，在“属性”面板的“链接”文本框中输入 Exes.asp； z 选择导航栏中的“留言本”文本，在“属性”面板的“链接”文本框中输入 BBSindex.asp。. 7.3.2. 新闻浏览列表. 新闻浏览列表页面将接收上一小节中导航页面所传递的新闻类别参数，利用该参数查询所要显示的新闻类别，并进行列表显示。 1．显示新闻类别显示新闻类别的原理很简单，我们可以根据导航栏所传递过来的参数 newtype=1 或 newtype=2 中的 1 和 2 来进行判断，如果接收到的变量值为 1，则为“校园新闻”，如果为所接收到的变量值为 2，则为“家教新闻” 。（1）打开“家教管理系统”站点中的文件 moban.asp，选择“文件”→“另存为”命令，命名为 newlist.asp，以建立一个与该文件布局相近的文件。（2）如图 7-49 所示，在设计视图中对该页面进行相应修改，将右侧单元格对齐方式设为水平“居中” 、垂直“顶端对齐”。.

(30) 220. 网站设计与建设. （3）在单元格的顶端空一行，然后插入一条“水平线”。选择该水平线，在视图下方的标签选择栏中的“<hr>”标签上右击，在弹出的快捷菜单中选择“编辑标签”命令，在“编辑标签”栏中设置水平线属性为“<hr width="95%" color="#0090FF">”。（4）绑定新闻类别记录集。 1）打开“应用程序”面板中的“绑定”选项卡，单击“添加行为”按钮，在弹出的菜单中选择“记录集（查询）”菜单项。 2）如图 7-50 所示，将记录集命名为 Recordset2，选择连接为 conn，选择表格为 Newtype，并进行“筛选”条件的相关设置，这里我们分别选择筛选条件为：Newtype_ID、=、“URL 参数”和 newtype，表示筛选出数据库表中 Newtype_ID 字段的值与接收到的变量 newtype 值完全相同的记录。. 图 7-49. 新闻列表页布局. 图 7-50 “新闻类别”记录集设置. （ 5 ）插入动态记录。打开“应用程序”面板中的“绑定”选项卡，选择“记录集（Recordset2）”，将 Newtype_Text 字段插入到水平线的上方，并在属性面板中设置其“格式” 为“标题 3” ，字体颜色为“#0090FF”，如图 7-51 所示。. 图 7-51. 插入记录集字段. 2．新闻列表新闻列表的原理是对第一行的列表进行一个重复的显示，从而达到列表的效果，并在后面加入记录集的导航，用于选择列表的分页。（1）如图 7-52 所示，在水平线的下方插入一个 2×2 的表格，并对表格进行适当调整，设置表格第 1 行的行高为 22 个像素。.

(31) 第 7 章网站核心功能的实现. 221. （ 2 ）将表格第 2 行的两个单元格合并为一个单元格，设置单元格背景图像为点线 dotlineh.gif，设置其行高为 1，请注意图 7-52 所示中的表格代码。（3）绑定新闻记录集。 1）打开“应用程序”面板中的“绑定”选项卡，单击“添加行为”按钮，在弹出的菜单中选择“记录集（查询）”菜单项。 2）如图 7-53 所示，将记录集命名为 Recordset3，选择连接为 conn，选择表格为 News，并进行“筛选”条件的相关设置，这里分别选择筛选条件为：“News_Type”、“=”、“URL 参数”和“newtype”，表示筛选出数据库表中 News_Type 字段的值与接收到的变量 newtype 值完全相同的记录。. 图 7-52. 设置新闻列表表格. 图 7-53. “新闻列表”记录集设置. 3）设置“排序”方式，选择使用 News_ID 字段排序，排序方式为“降序”，以便将最新的新闻显示在最前面。（4）在页面中插入动态记录。打开“应用程序”面板中的“绑定”选项卡，选择“记录集（Recordset3） ”，将 News_Topic 字段和 News_Ptime 插入到单元格中，按“{Recordset3.News_ Topic}({Recordset3.News_Ptime})”方式排版，并设置“({Recordset3.News_Ptime} )”部分的颜色为灰色，以示和新闻标题的区分，如图 7-54 所示。. 图 7-54. “新闻列表”动态记录的插入. （5）设置超链接，当鼠标点击该新闻标题时，新闻详细页打开供浏览该新闻的详情。在设计视图中选择刚刚插入的动态记录“{Recordset3.News_Topic}”，打开“应用程序”工具面板，选择“转到详细页面”菜单项，在弹出的对话框中设置“详细信息页”为 new.asp， “传递 URL 参数”设置为 News_ID， “记录集”选择 Recordset3，选择“列”News_ID 作为传递的参数值，单击“确定”按钮完成“转到详细页面”对话框的设置，如图 7-55 所示。（6）通过上面的步骤，已经能显示一条列表记录了，我们需要通过插入“重复的区域” 来显示整个列表。选择表格中的第 1~2 行（提示：在代码视图中比较容易选择这两行），打开 “插入”菜单中“应用程序对象”中的“重复的区域”菜单项，如图 7-56 所示。.

(32) 222. 网站设计与建设. 图 7-55. 图 7-56. “转到详细页面”的设置. “重复区域”的设置. （7）在弹出的“重复区域”对话框中选择所绑定的新闻记录集 Recordset3，设置“显示” 为 15“记录” ，表示每页显示 15 条记录。单击“确定”按钮完成重复区域的设置。（8）插入记录集导航。因为前面已经设置了每页显示的新闻列表记录数，我们就必须要添加“记录集导航条”来进行分页导航。具体设置如下： 1）在新闻列表表格的后面插入一条与前面所插入的相同样式的“水平线”。 2）如图 7-57 所示，将鼠标光标置于水平线的后面，打开“应用程序”工具面板，在工具面板中选择“记录集导航条”工具按钮。 3）在弹出的“记录集导航条”对话框中选择新闻记录集 Recordset3，显示方式为“文本”。 4）单击“确定”按钮完成“记录集导航条”的设置。至此，已经完成了新闻列表页的设计，在这里要注意一点，请参照“7.2.1 登录验证”小节“7. 登录成功页”项里的第（9）点以及该项后面的“注意”事项，对 ASP 代码进行调整，以免造成错误。. 7.3.3. 新闻浏览详细页. 在上一小节中，我们已经给新闻列表页中的新闻标题添加了超链接，用以浏览新闻的详.

(33) 第 7 章网站核心功能的实现. 223. 情，我们在新闻浏览详细页中要做的是接收新闻列表页 newlist.asp 中传递过来的 News_ID 参数值，并根据这个参数来显示相应的新闻详情。. 图 7-57. “记录集导航条”的设置. 1．新闻浏览详细页的布局（1）打开“家教管理系统”站点中的文件 moban.asp，选择“文件”→“另存为”命令，命名为 new.asp，以建立一个与该文件布局相近的文件。（2）如图 7-58 所示，在设计视图中对该页面进行相应修改，设置单元格对齐方式为水平方向“左对齐”，垂直方向“顶端”对齐，并在此单元格内插入一个 4×1 的表格，设置表格宽度为 96%。. 图 7-58. “新闻浏览详细页”页面布局. （3）在表格第 3 行中插入一条水平线，按前面“新闻列表”页中水平线的样式进行设置，宽度为 100%。 2．新闻浏览详细页记录集的绑定新闻浏览详细页的记录集绑定主要是注意接收从新闻列表页传递过来的 News_ID 参数，并根据该参数筛选出所对应的新闻进行绑定。.