情境5：班级通讯录管理系统的实现

《情境5：班级通讯录管理系统的实现》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、情境五：班级通讯录管理网站的实现´能力目标通过本章的学习，你应该能够：1.掌握框架网页布局的使用方法；2.掌握基础的数据库理论；3.掌握SQL语言的应用；4.掌握表单的使用；5.掌握网页中参数的传递方法；6.掌握ADO工作的原理；7.掌握简单MIS系统的开发。核心能力1.框架布局网页的能力；2.数据库应用3.SQL语言的应用；4.表单的使用与参数传递的应用能力；4.ADO工作的原理与应用；u分项任务5.1任务1：前期策划与效果图的设计5.2任务2：框架布局网站页面5.3任务3：登录系统的实现5.4任务4：通用查

2、询系统的实现5.5任务5：通讯录管理系统的实现u任务解析u核心技能与概念u任务计划与决策u任务实施u任务策略与技巧u任务评价u资源链接-案例库5.简单MIS系统的开发能力。253任务解析本项目动态网站建设，动态网站是在静态网站的基础之上进行开发的网站，也就是说它以静态网站为原型，然后编写动态程序来完成功能。经过对项目的分析，本项目进行分解为以下5个分项任务来完成项目，如图5-1所示。分项任务1前期策划与效果图的设计分项任务2框架布局网站页面分项任务3登录系统的实现分项任务4通用查询系统的实现分项任务5通讯录管理

3、系统的实现图5-1任务解析与分解示意图5.1任务1：前期策划与效果图的设计任务提示项目的前期策划主要包括：需求分析、前期策划、整体规划与效果图设计等。5.1.1网站需求分析网站的具体要求有：班级用户能够查询信息、添加信息、修改信息、删除用户信息。班级通讯录管理网站的实现功能图系统退出删除信息修改信息添加信息教学成果模糊查询详细信息精确查询登录系统图5-2网站需求模块模块示意图2535.1.2项目计划与决策登录界面的结构规划草图如图5-3所示。班级通讯录管理登录系统密码重置登录用户名图5-3网站登录界面草图主界面

4、的结构规划草图如图5-4所示。班级通讯录管理登录系统信息查询信息添加信息修改信息删除系统退出主界面图5-4网站主界面草图5.1.3项目实施1．登录页效果图的设计1）使用Photoshop软件打开素材文件夹中的“登录界面参考.jpg”图片，打开“联想校企合作专班运作管理平台.psd”图片，将“网站参考.psd”中的文本图层“联想校企合作专班运作管理平台”拖到“登录界面参考.jpg”图片上，最后将文本修改为“班级通讯录登录系统”，将文件保存为“班级通讯录登录界面.psd”，效果如图5-5所示。2）打开“登录框.ps

5、d”图片，将其中的“登录”相链接的图层一并拖动到“班级通讯录登录界面.psd”文件中，最后调整一下图像的位置，效果如图5-6所示。图5-5参考界面上的修改图图5-6添加登录框后的图2532．主界面效果图的设计1）在Photoshop中新建一个文件，宽为1000px，高734px，新建一个图层，使用矩形选框工具选取一个宽为1000px，高为118px的矩形选区，设置前景色为深蓝色（#419ccb）与背景色浅蓝色（#5cc3e2），使用渐变工具填充选区。在“网站参考.psd”文件中将院标拖动到参考图中并调整位置，打

6、开“班级通讯录登录界面.psd”文件，将“班级通讯录登录系统”文本拖动到效果图中，并将文本内容修改为“班级通讯录管理系统”，效果如图5-7所示。图5-7制作的主界面头部效果2）新建一个图层，执行“视图”→“新建参考线”命令，添加一条垂直的，位置为200px的辅助线，使用矩形选框工具选择左侧区域（除头部区域）并填充为浅灰色（#f1f2f2），在“网站参考.psd”文件中将导航按钮复制到效果图中，将“公告通知”文本拖动到效果图中，并将文本修改为“信息查询”，使用同样的方法制作其它按钮和文本，继续将在“网站参考.ps

7、d”文件中的图标与“图片新闻”内容复制并修改，使用切刀工具对文件进行切片，最后将文件保存为“班级通讯录管理系统界面.psd”，效果如图5-8所示。图5-8制作的主界面的总体效果3．效果图的切片与导出对于“班级通讯录登录界面.psd”文件直接另存为“login.jpg”（登录框隐藏）即可使用。对于“班级通讯录管理系统界面.psd”文件直接执行“文件”→“存储为Web和设备所用格式”命令，将效果图导出为网页。将导出的后的文件index_03.gif文件中的文字“信息浏览”依次修改为“信息添加”、“信息修改”、“信息

8、删除”，并依次保存为index_031.gif、index_032.gif、index_033.gif，如图5-9所示。253图5-9修改图片5.2任务2：框架布局网站页面任务提示项目的前期效果图制作完成并导出后，将网页重新布局，大多数以功能为主的网站大多采用框架布局结构，主页面采用框架布局。5.2.1任务解析班级通讯录网站是一个包含信息添加、信息查询、信息修改、信息删除、系统退出等模