• 沒有找到結果。

网站新闻浏览的设计与实现

用户访问家教管理系统,了解最新的家教资讯,可以通过家教管理系统提供的新闻栏目 来获取,所以,设计一个快捷有效的新闻浏览方式是十分有必要的。本节将对新闻栏目的设置、

新闻分类列表页面以及新闻详细页面进行设计。

其中“新闻列表页”用于对所选的新闻栏目内的所有新闻行进一个列表显示,当浏览用 户点击“新闻列表页”中的任一新闻标题后将进入该新闻的“新闻详细页”,以显示该新闻详 情。

7.3.1 新闻栏目设计

在前面的小节中,我们建立了一个在页面顶部的“Logo 与导航栏”文件 Top.htm 的设计,

在这个文件中,我们简单地对本家教管理系统中的新 闻栏目进行了设置,即“校园新闻”和“家教新闻”

两个栏目。当然,读者可以自由地添加其他的新闻栏 目,以供不同应用场合的需要。

(1)在进行具体的设计之前,我们需要对数据库

中的新闻栏目表进行初始化数据的录入,如图 7-47 所 图 7-47 录入“新闻栏目”表初始数据

示,录入“校园新闻”和“家教新闻”两个记录。

(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 所示,在设计视图中对该页面进行相应修改,将右侧单元格对齐方式设为 水平“居中”、垂直“顶端对齐”。

(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 个像素。

(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 所示。

图 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 新闻浏览详细页

在上一小节中,我们已经给新闻列表页中的新闻标题添加了超链接,用以浏览新闻的详

情,我们在新闻浏览详细页中要做的是接收新闻列表页 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 参数,

并根据该参数筛选出所对应的新闻进行绑定。

(1)打开“应用程序”面板中的“绑定”选项卡,单击“添加行为”按钮 ,在弹出的 菜单中选择“记录集(查询)”菜单项。

( 2 ) 如 图 7-59 所 示 , 将 记 录 集 命 名 为 Recordset2,选择连接为 conn,选择表格为 News,

并进行“筛选”条件的相关设置,这里我们分别选 择筛选条件为:“News_ID”、“=”、“URL 参数”和

“News_ID”,表示筛选出数据库表中 News_ID 字段 的值与接收到的参数 News_ID 值完全相同的记录。

(3)单击“确定”按钮完成记录集的绑定。

3.插入动态数据

(1)打开“应用程序”面板中的“绑定”选项 卡,选择“记录集(Recordset2)”。

(2)将鼠标光标置于中部表格顶端单元格,将“记录集(Recordset2)”中的 News_Topic 字段插入到单元格中,并设置单元格“属性”为水平居中对齐,选择“{Recordset2.News_Topic}”

动态文本,在属性面板中将其“格式”设置为“标题 3”,将文本颜色设置为“#0090FF”,如 图 7-60 所示。

图 7-60 “新闻浏览详细页”动态记录插入

(3)在第 2 行的单元格中插入文本“发布者: 发布时间:”,设置水平对齐方式为“居中对 齐”,字体颜色设置为“灰色”,打开“应用程序”面板中的“绑定”选项卡,将“记录集(Recordset2)”

中的 News_User 字段和 News_Ptime 字段分别插入到单元格中的相应位置。

(4)设置第 4 行的单元格“属性”为水平两端对齐,垂直顶端对齐,打开“应用程序”面 板中的“绑定”选项卡,将“记录集(Recordset2)”中的 News_Text 字段插入到单元格中。

(5)请参照“7.2.1 登录验证”小节“7. 登录成功页”项里的第(9)点以及该项后面的

(5)请参照“7.2.1 登录验证”小节“7. 登录成功页”项里的第(9)点以及该项后面的