第10章 “北京奥运吉祥物-福娃”网站动态设计.ppt

第10章 “北京奥运吉祥物-福娃”网站的动态设计;目 录; 在第四章中，已经开发出静态的“北京奥运吉祥物-福娃”网站，但是其不但缺少交互功能，而且管理和更新也不方便。因此，在本章中，将对“北京奥运吉祥物-福娃”网站进行动态设计与开发，主要是开发一个投票调查子系统、一个栏目为“福娃感言“的留言板子系统和一个栏目为“福娃动态”、“精彩图片”和“名人说福娃”的带分类显示的内容管理子系统，动态设计之后的网站首页如图10-1所示。从而让读者对动态网站的设计和开发有一个系统全面的认识，并且掌握动态网站的规划和设计流程。;;10.1.1 功能说明 投票调查子系统用来实现网站与用户之间的基本互动，帮助网站管理员收集用户浏览“北京奥运吉祥物-福娃”网站的感受及意见建议等信息，从而进一步对网站进行改进和升级，投票调查子系统的功能结构图如图10-2所示。;10.1.2 系统规划 1.文件规划 根据功能结构需求，投票调查子系统中需要的文件相关信息如表10-1所示。;12;（3）用户信息表v_login的结构如表10-2所示, 投票主题表v_title的结构如表10-3所示，投票选项表v_vote的结构如表10-4所示；;表10-4 投票选项表;10.1.3 系统设计 通过需求分析画出系统的功能结构图以及完成文件规划和数据库规划后就可以进行具体的系统设计了，在设计过程中也可以多人分工协作，共同完成子系统的整体开发。 下面仅介绍系统中的一些关键页面。 （1）投票页面，普通用户可以直接在首页中选中相关的投票选项，然后单击“确定”按钮进行投票，如图10-3所示。;（2）投票结果查看页面，普通用户在投票前后都可以通过在首页中单击“查看”按钮查看投票结果，如图10-4所示。;（3）管理员后台投票主题管理页面，如图10-5所示。;（4）管理员后台投票选项管理页面，如图10-6所示。;（5）管理员后台添加投票主题页面，如图10-7所示。;（6）管理员后台添加投票选项页面，如图10-8所示。 ;（7）管理员后台用户名和密码修改页面，如图10-9所示。;10.2.1 功能说明 留言板子系统用来实现网站管理员与用户之间的交流与互动，用户通过留言板子系统直接在网站上留言，如提出问题或要求，管理员可以进行在线回复，帮助管理员收集用户反馈的信息，留言板子系统的功能结构图如图10-10所示。;10.2.2 系统规划 1.文件规划 根据功能结构需求，留言板子系统中需要的文件相关信息如表10-5所示。;（3）关系表留言板子系统配置信息表book_setup的结构如表10-6所示,关系表留言板子系统留言内容信息表feeback的结构如表10-7所示。;表10-7 留言板子系统留言内容信息表;10.2.3 系统设计 通过需求分析画出系统的功能结构图以及完成文件规划和数据库规划后就可以进行具体的系统设计了，在设计过程中也可以多人分工协作，共同完成子系统的整体开发。 下面仅介绍系统中的一些关键页面。;（2）普通用户发表留言页面，如图10-12所示。;（3）管理员系统管理页面，如图10-13所示。;（4）管理员回复修改留言页面，如图10-14所示。;;10.3.1 功能说明 内容管理子系统类似于一个新闻或文章发布系统，管理员在后台动态地发布、修改、删除新闻或文章，然后在网站首页或列表显示页进行调用显示新闻或文章的标题，单击标题则可以查看整个内容。 在本网站中，共设计一个数据库，然后通过分类调用的形式完成“福娃动态”、“精彩图片”和“名人说福娃”栏目的设计，内容管理子系统的功能结构图如图10-16所示。;10.3.2 系统规划 1.文件规划 根据功能结构需求，内容管理子系统中需要的文件相关信息如表10-8所示。 ;12;28;2.数据库规划 （1）只有一个数据库，其名称为：fw.asp（为了安全，将文件扩展名.mdb改为.asp）； （2）数据库中有三个关系表：用户信息表admin，文章信息表article和类别信息表class； （3）关系表用户信息表admin的结构如表10-9所示,类别信息表class的结构如表10-10所示，文章信息表article的结构如表10-11所示；;表10-11 内容管理子系统的文章信息表 ;10.3.3 系统设计 通过需求分析画出系统的功能结构图以及完成文件规划和数据库规划后就可以进行具体的系统设计了，在设计过程中也可以多人分工协作，共同完成子系统的整体开发。 下面仅介绍系统中的一些关键页面。 （1）普通用户可以通过首页进行标题浏览，如图10-17所示。;（2）普通用户可以通过标题浏览页进行标题浏览，如图10-18所示。;（3）普通用