Transcript 任务八：博客网站布局（应用表格）

动态网页设计与制作
第四部:分动态设计
任务八:网络通讯录的制作
西藏职业技术学院
项目简介
LOGO
网络通讯录主要是对个人信息进行网络化管理，
它可以单独作为一个系统使用，也可以作为系统的
一个功能模块使用。可以让用户通过网络浏览器就
可以登录该系统，对联系人信息进行查询和维护。
任务八：博客网站布局（应用表格）
知识目标
LOGO
熟悉DW常用工具的使用技巧
掌握ASP基础知识
任务八：博客网站布局（应用表格）
能力目标
LOGO
学会使用DW制作网络通信录
培养学生的团队合作能力
培养学生的沟通协调能力
任务八：博客网站布局（应用表格）
效果图
LOGO
任务八：博客网站布局（应用表格）
知识点
LOGO
分析设计
添加联系人信息
显示联系人信息
显示联系人的详细信息
任务八：博客网站布局（应用表格）
分析设计
LOGO
显示联系人信息模块，以列表的形式显示自己通讯录中的所
有联系人信息。
显示联系人详细信息模块，以表格形式显示某联系人的详细
信息。
(1)功能结构
通讯录首页
Linklist.asp
添加联系人
Addlink.asp
查看详细信息
Shoulink.asp
任务八：博客网站布局（应用表格）
分析设计
LOGO
（２）设计和添加数据库表（见数据库）
根据功能结构，“联系人表”是关键表。我们在
mydate.mdb数据库中创建联系人表“link”如下图
任务八：博客网站布局（应用表格）
添加联系人信息
LOGO
（１)创建“添加联系人”页面。
在站点目录下，新建一个“addlink.asp”文件。如下图
任务八：博客网站布局（应用表格）
添加联系人信息
LOGO
（２）添加插入记录服务器行为
①打开“服务器行为”控制面板，单击面板上的＋按钮，
在弹出的下拉菜单中选择“插入记录”对话框，设置相关参
数，如图１－１。单击“确定”按钮，将信息保存于数据表
中。
②在菜单栏里选择“插入”－“数据对象”－“插入记录”
－“插入记录”命令，弹出“插入记录”对话框。
③在“插入记录”对话框填写相关数据，然后单击“确定”
按钮。如下图。
任务八：博客网站布局（应用表格）
显示联系人信息
LOGO
（１）创建页面
①在站点下面创建一个名为“showlink.asp”的页面，并在页面中
建立一个３行４列的表格，用于显示记录，设置表格中单元格背
景颜色，并输入相应的文字。
（２）查询记录集
①进入“绑定”面板，单击
“＋”按钮，选择“记录集
（查询）”命令。
②在弹出的“记录集”对话框
中，设置“名称”为
“recordset_link”，设置“连
接”参数为“conn”，设置“表
格”为“link”，其他设置保持
默认，最后单击“确定”按钮。
这样就建立了一个由“conn”连
任务八：博客网站布局（应用表格）
接指向的“link”表的记录集，
显示联系人信息
LOGO
③在“绑定”面板中可以看到，增加了一个记录集
recordset_link，单击记录集图标左侧的“＋”号按钮，可以
展示记录集并查看其中的字段。如下图 ：
任务八：博客网站布局（应用表格）
显示联系人信息
LOGO
（３）数据绑定
选择“绑定”面板，展开记录集recordset_link，选中闪
电符号的右侧“lmname”字段，把光标定位到表格中的“姓
名”单元格下面，单击“绑定”面板中的“插入”按钮，就
可以把动态记录字段插入到单元格中，在姓名下方的单元格
中可以看到一个浅蓝色背景的
“｛recordset_link.lmname｝”的动态文本内容。用同样
的方法以此把lmsex和lmmobile记录集字段插入性别和手机
单元格下方。
任务八：博客网站布局（应用表格）
显示联系人信息
LOGO
（４）设置重复区域
浏览过程中需要显示多条记录，就要设置“重复区域”把数据库
中所有的记录集都显示出来。
①切换到“拆分视图”，选中表格中的数据库绑定行，如下图
任务八：博客网站布局（应用表格）
显示联系人信息
LOGO
②单击“服务器行为”面板下得“＋”号按钮，选择“重
复区域”命令，弹出“重复区域”对话框。如下图
任务八：博客网站布局（应用表格）
显示联系人信息
LOGO
（５）记录集分页
我们设置了重复区域显示１０条记录。第１０条以后的记录
我们可以通过“记录集分页”命令来进行显示。
①在表格中的数据绑定行下面添加多一行，并输入相应的文
字。如下图
②选中“第一页”，然后单击“服务器行为”面板下面的“＋”
按钮，选择“记录集分页”菜单下得“移至第一条记录”命令。
任务八：博客网站布局（应用表格）
显示联系人的详细信息
LOGO
（１）转到详细页面
选中表格中数据绑定行的“查看”，然后单击“服务器行为”面
板下面的“＋”按钮，选择“转到详细页面”命令，弹出“转到
详细页面”对话框，在“详细信息页：”区域添加
“showlink.asp”。如下图
任务八：博客网站布局（应用表格）
LOGO
显示联系人的详细信息
（２）查询记录集
①进入“绑定”面板，单击下面的“＋”按钮，选择“记录集
（查询）”命令。
②在弹出的“记录集”对话框中，设置“名称”为
“recordset_link”，设置“链接”后面的参数为“conn”,设置
“表格”参数为“link”，设置“筛选”下的“lmid”参数为
“＝”，“ＵＲＬ参数”为“lmid”，最后单击“确定”按钮。
如下图
任务八：博客网站布局（应用表格）
显示联系人的详细信息
LOGO
③数据库绑定（具体操作步骤参照“显示联系人”数据库绑定）
任务八：博客网站布局（应用表格）