任务八博客网站布局（应用表格）.ppt

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