档案管理实务论文—精品课程网站的设计方案说明18535.doc

档案管理实务精品课程网站的设计方案说明一 前 言档案管理实务课程在学院能力本位课程教学改革的思想指导下，打破传统的以“了解”、“掌握”为特征设定的学科型课程目标，从“职业能力”分析出发，设定职业能力培养目标；从工作过程分析出发创设与工作内容一致的学习性工作项，并以此为主线组织教学。将“知识应用、能力训练和素质培养”贯穿于教学全过程，构建“教、学、做”理论实践一体化的教学平台。本课程已经形成一支专业能力强、综合素质高的教学、研究型教师团队。课程组成员结合区域经济发展特点，根据档案行业及基层企事业对档案人才的实际需要，进行教学改革和教学研究，课程建设与教学研究成果丰硕，教学与科研的良性互动、学校与企业的紧密合作，有力地促进了课程的建设。由于近几年浙江省企业的迅速扩张，规范评估、等级评估、上市评估等活动中存在大量档案的整理工作，提供外包服务的档案技术公司在浙江各地相应产生，尤其是杭州，多达10几家。随着基层企事业对档案重要性的认识逐步提升，对档案人才需求量以及岗位人才要求的不断提高，我们必须培养满足地方经济建设发展的适用性人才，这为加快本课程改革建设步伐提供了良好的行业背景支持。因此建设此精品课程网站更有效的帮助了本课程的教学效果。本文先介绍相关技术，然后以asp（active server pages）作为开发工具,运用microsoft access数据库完成后台的应用程序，并采用dreamweaver设计门户网站的界面。在对校园信息网站进行了整体的设计与构架的同时，也对各个模块进行了系统的分析，以实现信息的共享和整合。最后，实现教学计划管理模块，从一个小模块体现设计的过程。二 设计任务分析(一) 设计精品课程网站的目的及市场分析随着计算机网络通信技术和interne的飞速发展，基于因特网的计算机网上远程教学已经开始成为一种全新的教学手段，并且越来越受到人们的关注。由于网上教学具有时效性、共享性、交互性和个别化等诸多特点，因此它有着传统教学模式无法比拟的优点，它创造了一种全新的教学模式，打破了传统教学模式在时间、空间上的限制，采用了先进的教学手段和教学方法，可以大大提高教学效率和教学效果，使教学活动上了一个新台阶。蓬勃兴起的网上教育以其全新的高科技教学手段为解决我国当前资源严重短缺而教育需求日益扩大的矛盾提供了一种投资少、见效快、优质高效的解决方案，它必将成为我国未来教育发展的重要方向。做该网站的目的很明确，就是档案管理实务精品课程，主要是应用于教学，时刻更新信息，能够很好的为学生服务。(二)网站前台结构分析本设计是在跟工商管理学院楼淑君老师交流的基础上，制定出了一下前台项目需求栏目，如图1所示。图1 前台栏目设计(三）网站后台功能分析由于在日常教学中，经常要对网站内容进行更新和编辑，所以应该使网站后台更具有人性化，使网站管理员能够很方便的发布和编辑新闻。因此本设计制定了如图2所示的后台功能设置。图2 网站后台功能设置三 方案初选在初步知道了该做哪些模块之后，就分析该用什么工具来完成这些模板的功能。用到的工具有：dreaweaver cs3,photoshop cs3,flash cs3, 硕思三箭客，利用asp+access+iis搭建动态结构。(一) 前台网站设计软件的选用网页制作采用的软件是dreamweaver cs3，dreamweaver是世界上最优秀的可视化网页设计制作工具和网站管理工具之一,支持最新的web技术，包含html检查、html格式控制、html格式化选项、homesite/bbedit捆绑、可视化网页设计、图像编辑、全局查找替换、全ftp功能、处理flash和shockwave等富媒体格式和动态html、基于团队的web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。网页中的动画制作采用的软件是flash cs3，adobe flash cs3是adobe公司收购macromedia公司后将享誉盛名macromedia flash更名为adobe flash后的一款动画软件。flash软件可以实现多种动画特效,动画都是由一帧帧的静态图片在短时间内连续播放而造成的视觉效果,是表现动态过程、阐明抽象原理的一种重要媒体.尤其在医学cai课件中,使用设计合理的动画,不仅有助于学科知识的表达和传播,使学习者加深对所学知识的理解,提高学习兴趣和教学效率,同时也能为课件增加生动的艺术效果,特别对于以抽象教学内容为主的课程更具有特殊的应用意义。网页中的图片处理采用的是adobe公司的photoshop cs3，photoshop是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。(二) 后台动态编程软件和数据库的选用后台动态编程软件主要采用asp，asp是active server page的缩写，意为“动态服务器页面”。asp是微软公司开发的代替cgi脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。asp的网页文件的格式是.asp，现在常用于各种动态网站中。 asp是一种服务器端脚本编写环境，可以用来创建和运行动态网页或web应用程序。asp网页可以包含html标记、普通文本、脚本命令以及com组件等。利用asp可以向网页中添加交互式内容（如在线表单），也可以创建使用html网页作为用户界面的web应用程序。数据库由于网站属于中小型网站，所以采用access数据库。四 方案的详细设计(一)网站的前台制作过程网站的整体结构网页包括：首页、子页、详细页、搜索结果页、列表页1. 首页设计经过先从网上搜索一些关于档案管理事务的资料，进行分析，该网站是属于校园档案管理网站，因此网站必须带有校园与档案管理的元素，与客户进行沟通后，确定了网站首页的主题色调和布局如图3所示。图3 首页效果图2. 子页设计子页的头跟尾可以调用首页的首尾部分，站内搜索部分也可以单独做为一张网页，跟首尾一样调用进来。这里我以“课程设置、教学内容”等栏目各建一张网页，如图4所示。图4 子页的设计效果图 3. 特色部分设计首期，先从网上搜索一些关于档案管理事务的资料，进行分析，该网站是属于校园档案管理网站，因此网站必须带有校园与档案管理的元素，在设计的时候，banner部分主要有学校照片与档案书籍两部分结成。在取色上主要以橘黄色为主，如图5所示。图5 网站bannar的效果图 导航栏部分是下拉菜单，如图6所示，该下拉菜单是利用第三方软件“网页魔法菜单”生成，主要是用div+css+javascript,对这些我也是初学者，基本原理是当鼠标移到一个主div(例如教学资源栏目)上，显示教学资源所对应的栏目（对应栏目的层默认为隐藏），显示的效果以javascript来实现。图6 导航条下拉菜单效果图特色展示专栏采用了图片滚动式的，如图7所示。图7 滚动图片效果图滚动代码如下所示（这里对各个id的取名必须与js的对应，div的高度与宽度也要设定）：!-滚动代码开始- a href=detail.asp?id= target=_blankimg src=admin/hotimages/ width=130 height=90 alt= /var speed=20/速度数值越大速度越慢demo2.innerhtml=demo1.innerhtmlfunction marquee()if(demo2.offsetwidth-demo.scrollleft=0) demo.scrollleft-=demo1.offsetwidth else demo.scrollleft+var mymar=setinterval(marquee,speed) demo.onmouseover=function() clearinterval(mymar) demo.onmouseout=function() mymar=setinterval(marquee,speed) !-滚动代码结束-(二) 数据库的详细设计调查和分析用户的业务活动和数据的使用情况，弄清所用数据的种类、范围、数量以及它们在业务活动中交流的情况，确定用户对数据库系统的使用要求和各种约束条件等，形成用户需求规约。所以我对该网站系统分析了一下，大体是这样的。该网站是一个新闻型的校园系统，用户数量大概在几千人左右。因此后台数据库设计中，主要采用适用于中小型应用系统access。根据客户需求和后台管理功能的需要，主要设计了admin表、advertisment表、friends表、news_class表、secretarynews表、teacher表和visiter表。admin表：主要用于管理员登陆功能的实现advertisment表：主要用于首页广告条显示功能friends表：友情链接表news_class表： 新闻类别表secretarynews表：新闻管理表teacher表：课程负责人表visiter表：访问量表图8 admin表图9 advertisment表 图10 friends表 图11 news_class表图12 secretarynews表图13图teacher表 图14visiter表(三) 网站的后台编程后台的功能设计主要是方便客户发布新闻和管理新闻的便利性。能够是客户及时的对网站进行维护和更新。1、后台操作界面：用frame（框架）分成左右两边，左边为菜单，右边为编辑区，点击中间的小三角可伸缩左菜单如图15所示。图15 后台管理页面2、后台动态编程后台编程主要采用的是asp编程技术。这里抛砖引玉写出主要的登陆代码，其它代码详见附录。登录代码分为两张，login.asp、login_check.asp。图16 登陆页面效果图login.asp是个界面网页，其效果图见图16，部分代码如下：用户名：input name=user type=text class=user id=user style= color:#ff9900;background-color:#ffffff;background: url(images/6.gif) no-repeat;padding-left: 16px;width:20; height:5 size=20 onkeyup=value=value.replace(/w*/g,) onbeforepaste=clipboarddata.setdata(text,clipboarddata.getdata(text).replace(/w*/g,) value=/密码：验证码：login_check.asp是表单提交后处理的页面，代码如下：/需要过虑的字串/数据库链接/md5验证%if trim(request.form(user) thenresponse.cookies(user)=trim(request.form(user)response.cookies(user).expires=now()+365end ifif trim(session(psn)trim(request(check) thenresponse.write(alert(验证码错误!);history.back();)response.end()elseif trim(request(user) and trim(request(pwd) and trim(request(check) thenset rs=server.createobject(adodb.recordset)user=trim(request(user)pwd=md5(trim(request(pwd)sql=select * from admin where user_name=&user& and user_pwd=&pwd&rs.open sql,conn,1,1if not (rs.eof and rs.bof) and trim(request(check)=trim(session(psn) thensession(mm_user)=usersession(loginok)=okresponse.redirect(index.asp)rs.closeset rs=nothingconn.closeset conn=nothingelseresponse.write(alert(您输入的用户名或密码有误!);history.back(); )response.end()end ifelseresponse.write(alert(您输入的用户名或密码有误!);location=login.asp )response.end()end ifend if%五 设计总结评价该网站总体风格较符合该网站主体，前台的布局也是一目了然，栏目很清楚。操作也是非常方便，进入首页就有下拉菜单，进入子页后又有竖菜单，这样操作起来非常便捷。该功能上也已满足日常需求，有信息发布及管理，资料上传，资料下载，用户管理，站内搜索，还加了一块首页广告功能。站点文件也是很清楚。该网站整体已经比较完善，但可能还有部分缺陷，希望以后能更加完善。这次设计能够得以顺利完成，是所有曾经指导过我的老师，帮助过我的同学，我要在这里对他们表示深深的谢意！ 从一开始我想都没想过自己能做网站，到现在能独立完成一个网站的整体设计。我可以说是一个“色盲”，对色彩不怎么会搭配，在温老师的指导下，逐步有了设计理念，温老师还帮我找陈老师修改我的作品，同时我还很感谢陈老师的帮忙.再则是要感谢那些给我机会制作网站的各位老师，是你们给了我机会，我才有了目标，学到了这么多！六 参考文献1 王克杰、刘敏dreamweaver mx网页制作m北京：北京希望电子出版社，20032 吴鹏、丁利群，冯涛asp程序设计教程与实训m北京：北京大学出版社，20083 郑瑶、万婧.photoshop中文中文版.m北京：清华大学出版社，2007七 附录文字过滤代码%-定义部份-自定义需要过滤的字串,用 枫 分隔fy_in = 枫;枫and枫exec枫insert枫select枫delete枫update枫count枫*枫%枫chr枫mid枫master枫truncate枫char枫declare枫or枫notfy_inf = split(fy_in,枫)-post部份-if request.form thenfor each fy_post