首页之所以放在较后来讲解，是因为它是一个综合页面，既有“登录用户”、“教员/学员 查询”等栏目，还有“最新教员/学员列表”、“最新新闻”、“最新论坛主题”、“站点统计分析”
和“网站公告栏”等栏目，而中间涉及多个模块，在讲解完各功能模块之后再来设计首页，将 会比较容易理解。
7.10.1 首页的布局设计
网站首页因为栏目较多，所以页面的布局比较复杂，现在分步讲解首页的布局设计。
（1）打开家教管理系统根目录下的模板文件 moban.asp，将文件另存为 index.asp。
（2）按图 7-175 所示绘制布局表格，分别设置单元格宽度为 400 像素与 180 像素，设置 布局表格的背景颜色为白色“#FFFFFF”。
图 7-175 首页布局表格绘制
（3）为右边的单元格设置背景图片为素材文件夹 images 下的 bj.gif 文件。
（4）选择中间的单元格，设置其对齐方式为水平居中对齐，垂直顶端对齐，并在单元格 中插入一个宽度为 98%，5 行 1 列的表格，并将第 1 行拆分为 2 列，按图 7-176 所示调整表格 样式。
（5）选择右侧的单元格，设置其对齐方式为水平居中对齐，垂直顶端对齐，并在单元格 中插入一个宽度为 170 像素，6 行 1 列的表格，按图 7-187 所示调整表格样式。
图 7-176 首页布局表格绘制
（6）在绘制的单元格内插入相应的图像，图像在素材文件夹内，插入图像后效果如图 7-177 所示。
图 7-177 首页插入图像后效果
7.10.2 新闻动态栏目的设计
在新闻动态栏目中，可以显示最新的五条新闻记录，为体现新闻的时效性，新闻记录将 以时间降序排列，把最新的新闻显示在最前面。
1．绑定数据集
（1）如图 7-178 所示，打开“应用程序”面板中的“绑定”选项卡，单击“添加行为”
按钮 ，在弹出的菜单中选择“记录集（查询）”菜单项。
（2）在弹出的“记录集”对话框中，将记录集命名 Recordset1，选择连接为 conn，选择 表格为 News，在“排序”后面选择 News _ID 和“降序”。
（3）单击“确定”按钮完成记录集的绑定。
图 7-179 绑定记录集 2．动态记录的显示
（1）如图 7-179 所示，在新闻动态栏右侧的 单元格中插入一个宽为 98%，1 行 1 列的表格，
设置表格行高为 24 像素。
（2）如图 7-180 所示，打开“应用程序”面 板 中 的 “ 绑 定 ” 选 项 卡 ， 将 新 闻 “ 记 录 集
（Recordset1）”中的 News_Topic 字段和 News_Ptime 插入到单元格中，按“{Recordset1.News_
Topic}({Recordset1.News_Ptime})”方式排版，并设置“({Recordset3.News_Ptime})”部分的颜 色为灰色，以示和新闻标题的区分。
（3）通过上面的步骤，已经能显示一条列表记录了，我们需要通过插入“重复的区域”
来显示 5 条记录的列表。选择表格中的行，打开“插入”菜单中“应用程序对象”中的“重复 的区域”菜单项。
图 7-178 新闻动态栏目布局表格 图 7-178 绑定记录集
图 7-179 新闻动态栏目布局表格
图 7-180 插入动态文本
（4）在弹出的“重复区域”对话框中选择所绑定的新闻记录集 Recordset1，设置“显示”
为 5“记录”。单击“确定”按钮完成重复区域的设置。
3．设置超链接
（1）在设计视图中选择刚刚插入的动态记录“{Recordset1.News_Topic}”，打开“应用程 序”工具面板，选择“转到详细页面”菜单项，在弹出的对话框中设置“详细信息页”为 new.asp，
“传递 URL 参数”设置为 News_ID，“记录集”选择 Recordset1，选择“列”为 News_ID 作 传递的参数值，单击“确定”按钮完成“转到详细页面”对话框的设置，如图 7-181 所示。
图 7-181 新闻标题的超链接设置
（2）继续在属性面板中设置超链接的“目标”为“_blank”，表示将在新浏览器窗口中打 开该超链接。
7.10.3 最新注册用户栏目的设计
家教管理系统中有教员用户和学员用户两种类型的用户，在此以教员用户为例，讲解最 新注册用户列表的显示。
1．注册会员的列表布局
按前面 7.7.3 节中讲过的列表方法设计会员列表。
（1）如图 7-182 所示，在“最新加入教员”下方单元格中插入一个宽为 98%，2 行 4 列 的表格，并对表格进行适当调整，设置表格第 1 行的行高为 22 像素。
（2）将表格第 2 行的 4 个单元格合并为一个单元格，设置单元格背景图像为点线
dotlineh.gif，设置其行高为 1，请注意图 7-182 所示中的表格代码。
（3）将图 7-182 所示的黑色背景部分代码选中并复制，在其后“</table>”标签的前一行 粘贴，使表格由原来的 2 行变为 4 行。
图 7-182 查询结果列表表格
（4）如图 7-183 所示，切换至设计视图，在表格的第 1 行的位置添加相关文本信息 “用 户名”、“学校”和“胜任科目”，并将其字体颜色设置为“#0090FF”。
图 7-183 修改的列表表格 2．绑定数据集
（1）如图 7-184 所示，打开“应用程序”面板中的“绑定”选项卡，单击“添加行为”
按钮 ，在弹出的菜单中选择“记录集（查询）”菜单项。
（2）在弹出的“记录集”对话框中，将记录集命名为 Recordset2，选择连接为 conn，选 择表格为 Teacher，在“排序”后面选择 Teacher _ID 和“降序”。
（3）单击“确定”按钮完成记录集的绑定。
3．动态记录的显示
（1）打开“应用程序”面板中的“绑定”选项卡，将教员“记录集（Recordset2）”中的 Username1、Teacher_School 和 Teacher_Subject 分别插入到表格的“用户名”、“院校”与“胜 任科目”列中。
（2）如图 7-185 所示，在代码中选择教员表格中的第 3、4 行，打开“插入”菜单中“应 用程序对象”中的“重复的区域”菜单项。
图 7-184 绑定记录集
（3）在弹出的“重复区域”对话框中选择所绑定的新闻记录集 Recordset2，设置“显示”
为“5”记录。单击“确定”按钮完成重复区域的设置。
图 7-185 重复区域的设置 4．设置超链接
（1）在设计视图中选择刚刚插入的用户名列中的动态记录“{}”，打开“应用程序”工具 面板，选择“转到详细页面”菜单项，在弹出的对话框中设置“详细信息页”为 Teacher.asp，
“传递 URL 参数”设置为 Teacher _ID，“记录集”选择 Recordset2，选择“列”为 Teacher _ID 作传递的参数值，单击“确定”按钮完成“转到详细页面”对话框的设置，如图 7-186 所示。
图 7-186 教员列表的超链接设置
（2）继续在属性面板中设置超链接的“目标”为“_blank”，表示将在新浏览器窗口中打
在线人数的统计方法有很多种，本节将通过使用 ASP 的 Session 对象和 Application 对象 进行统计。
其中 Session 有两个事件，即 Session_OnStart 事件和 Session_OnEnd 事件，分别表示浏览 者与网站系统建立会话事件和与网站系统断开会话事件。
而 Application 对象，因其可以在一个 Web 系统中进行全局共享，所以用它来进行在线人 数的统计。
统计在线人数，即当发生一个 Session_OnStart 事件时，则进行 Application 变量的加 1 操 作，表示一个新的浏览者与系统建立了会话，也就是说在线人数多了一个；当发生一个 Session_OnEnd 事件时，则进行 Application 变量的减 1 操作，表示一个新的浏览者与系统断开 了会话，也就是说在线人数少了一个。
最终 Application 变量所记录的值，即为在线人数，只需在需要调用的地方调用该 Application 变量的值即可。
2．统计在线人数的实现
（1）在家教管理系统根目录下新建一个文件 global.asa，用于在线人数的统计。
（2）切换到代码视图，将原有的所有代码都删除掉。
（3）然后在代码视图中输入如下的代码：
<SCRIPT language=VBScript RUNAT=Server>
Sub Session_OnStart Application.Lock