信息系网站设计毕业论文.doc

信息系网站设计 应用与维护班 黄志成河南工程学院计算机多媒体技术专业（二年制专科）毕业论文网站设计姓名：王书雨学号：200922202114专业方向：多媒体技术指导老师：俞东 完成时间:2011-5-25摘 要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了让更多人了解我们信息系的情况。所以，开发本系的网站是必需的。本次设计我计划痛过DW，Photoshop图像处理软件，FLAsH等工具共同来制作信息系网站的设计。当然，这次的制作过程还需要绑定到数据库，最终的完成需要众多软件相互补助。关键词：网站设计；Dreamweaver2004目 录第一章 绪论11.1 设计思想11.2 开发背景及意义11.3 开发的目标3第二章 基本理论知识及开发工具介绍42.1开发工具的选用及介绍42.1.1DW的优势42.2 ASP的优势与特点62.3 图像处理软件photoshop7第三章 开发过程83.1网站主题的确立83.2掌握建网工具83.3确定网站风格83.4确定网站界面103.4.1栏目与板块编排10表3.1 网站板块表103.4.2目录结构与链接结构113.4.3进行形象设计113.5网站总体分析与设计133.5.1网站系统分析133.5.2主页设计133.6 信息系简介143.7 相册页面143.7.1代码设计153.8 留言界面153.8.1代码的设计163.9 图片新闻界面173.9.1功能18第四章 注意事项194.1网页设计的注意事项19结束语20致谢21参考文献23第一章 绪论在Internet飞速发展的今天，电子数字计算机是20世纪重大科技发明之一，而互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计是将网站策划案中的内容、网站的主题模式，结合网页设计师的认识，通过艺术设计的手法表现出来；而网页制作通常是根据网页设计师制作的设计稿，按照W3C规范语言将其制作成网页格式。优秀的网页设计师对网页设计与网页制作两道工序都是十分了解的，这样才可以保证网页制作人员在充分掌握设计要素的前提下，制作规范化、符合用户使用习惯、带来良好用户体验的网站。1.1 设计思想通过网站，全面宣传，展示信息系风采、优点与特色，发布信息系的活动安排与招生政策等信息内容，使学生及家长曾加对信息系的了解，增强学生、家长与信息系之间的联系，在Internet网上，让学生及家长及时得到 信息系发布的重要信息，同时也帮助了信息系完成部分事务，提高办事效率,给学生、家长与信息系最方便的联系桥梁。在这里学生及家长也可以提出意见及想法，互通教学之间的意见想法，更加有效的办好教学，和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为信息系的参考，以便更加的提高信息系的教学质量。1.2 开发背景及意义 随着Internet用户的增多和影响力的增大，网络工程系开设网站为学生提供服务也成为一条必由之路。网络工程系网站是公布和发布网络工程系信息资源，展示和宣传网络工程系形象的阵地，是同学向系里反应情况的渠道，是网络工程系对外办理公共事务的窗口，是传承文化的载体。国外学校网站建设情况(以美国为例)：美国是Internet的发源地。美国大学不仅在建立和推动Internet的发展方面不遗余力，而且已经建立了大量的学校网站。根据美国Council of Excellence in University的调查报告，93%的被调查的院系拥有网站，所有大学已经全部上网，而且几乎所有的院系已经建立自己的站点。同时，各大学网站逐渐实现互联互通。就我国而言，1999年1月22日，由中国电信和国家经贸委经济信息中心主办，联合四十多家部委(办、局)信息主管部门共同倡议发起了“大学上网工程”。目前各个大学申请的域名已经达到2000多个，大学上网工程也进入了第二第三阶段。通常情况下，一个大学的水平越高，往往意味着它越有可能成为新技术的率先采用者。因为一方面国家可以提供更多的财政支持，同时学生的各类需求也更为细化和迫切。因而，选取综合实力居前的十所大学的院系做为参考对象，不仅可以体现网络工程系网站建设的最新特点，而且具有代表河北水平最高的一类大学网站的典型意义。据中国互联网信息中心的统计，截至1997年10月31日，在下注册的域名达到323个，到1998年6月30日，这个数据达到561个，1999年5月，下注册的学校域名增到1470个，2002年2月，全国各个大学域名达到2400多个。总结国内外学校网站的建设过程，可以说学生的互动式学校网站建设过程的主线。具体而言，学校网站的建设与有以下所述的规律：一是内容服务有静态信心公布想动态信息发布、信息查询方向发展。二是方便学生服务成为学校网站建设的焦点。三是网站由独立的系统向集成化的组成部分发展。四是一站式网站成为重点。1.3 开发的目标 论文以网络工程系网站为例开展研究，分析了系统建设过程中的相关技术，对所涉及的软件平台、软件系统、安全系统的进行理论分析，对系统规划实施中的需求分析、系统结构设计、硬件集成、软件配置等各环节进行研究，并提出性能测试所需内容。第一章通过对国内外校园网站见着发展情况和校园网站运行发展规律叙述，讲明了校园网站发展的背景，还通过对网络工程系网站的现状分析，得出网络工程系网站重建的必要性和重要性。第二章从理论上研究了校园网站的运行平台和相关开发技术，主要涉及学校网站的硬件平台、软件系统、学校网站安全系统和网页设计技术，通过理论分析给出了硬件平台、软件系统、安全系统和网页设计技术的设计原则。第三章以网络工程系网站为设计实例，通过对网络工程系网站进行需求分析和规模分析，根据系统设计原则，贵处了符合网络工程系实际情况的系统结构设计。第四章根据规划的网站系统结构，对网络工程系网站的网络设备、服务器系统、安全系统和软件系统等展开叙述，并进行了选型。第五章对建成的网络工程系网站进行了性能测设，对在网站建设中取得的成果进行了肯定。第二章 基本理论知识及开发工具介绍2.1开发工具的选用及介绍2.1.1DW的优势1、不用手工写代码，编程更轻松！DW已经自动为会员登录完成了相应的ASP代码。因此，无需手工写代码，不是没有代码，而是由DW自动完成写代码的工作，我们要做的，只是点击鼠标而已。2、对数据库的结合非常好！在DW的数据库面板下，点击连接前的号，展开表，在表上点击右键，可查看表里面的数据，这可以让我们在不打开数据库的情况，能清楚地查看到数据库中的数据。3、简单快捷的实现会员系统！通过服务器行为面板下的用户身份验证，可轻松实现会员登录、注销退出、注册重名验证和限制访问功能。4、强大的命令功能！DW的命令功能能让我们轻易实现对数据库的插入、更新和删除等操作，如更新文章点击数等。5、丰富的插件支持！插件能让我们快捷的实现如：数字分页显示、用下拉菜单选择跳转到哪页、二级联动下拉菜单等想实现的效果。6、所见即所得的CSS环境！CSSDIV的布局在DW中得到了完美的体现，真正做到了所见即所得。7、快捷方便的编程环境！DW的ASP工具栏上，提供了if、else等常用语句的快捷按钮，点击后可自动生成相应代码，极大的方便了简单语句的编写，提高了开发效率。8、最佳的制作效率Dreamweaer 可以用最快速的方式将FireworksFreeHand 或Photoshop 等档案移至网页上。使用颜色吸工具选择屏幕上的颜色可定最拉近的网页安全色。对于菜单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜欢的设计工具搭配。不需要离开Dremweaver便 可完成，整体运用流程自然顺畅。除此之外，只要单击便可使reamweaver自动开启Firework或hotoshop来进行编辑与设定图档案的最佳化。9、网站管理使用网站嵊可以快速制作网站雏形，设计，更新和重组网页。改灾难网页位置或档案名称，reamweaver 会自动更新所有链接。使用支援文字，码、属性标签和一般语法的搜寻及轩换功能使得长复杂的网站便新变得迅速又简单！10、无可比拟的控制能力 Dueamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite 和BBEdit 等主流文字编辑器。帧和表格的制作速度快的让你无法想像。表格编辑功能使您简单的选择单格、行、栏或作末连续的选取。甚至可以排序或格式化表格群组，Dreamweaver 支持精确定位，可以用可轻易换成表格的图层以拖拉置放的方式进行版面配置。11、梦幻样版和XMLDreamweaver 将内容与设计分开，应用於快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑的部份，内容提供者可直接编辑以样式为主的内容，却不会不小心改变既定样式。您也可以使用样版正确地汇入或输出 XML 内容。12、全方位的呈现 利用 Dreamweaver 设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于casscading style sheets 的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscajpe 和 Microsoft 浏览器上执行。使用不同浏览器检示功能，Dreamweaver 可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver 的网站下载它的描述述档，便可得知详尽的成效报告2.2 ASP的优势与特点1、任何开发工具皆可发展ASP。只要使用一般的文书编辑程序，如Windows记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPage Express、 FrontPage等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写ASP，可能会发生一些意想不到的离奇状态。2、通吃各家浏览器由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于不同的浏览器3、语言相容性高ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java Script、Active X服务器组件来设计外，并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（Third Party）所提供的语言。4、隐密安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到HTML文件，原始的ASP程序代码是看不到的！这是因为ASP程序先于网站服务（Web Server）端执行后，将结果转换成标准HTML文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的ASP程序并不会轻易地被看见进而被盗用。5、易于操控数据库ASP可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可将“文本文件”或是”Excel” 文件当成数据库用。6、面向对象学习容易ASP具备有面向对象（Object-Oriented）功能，学习容易，ASP提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用ASP内建的“Application”对象或”Session”对象所撰写出来的ASP程序可以在多个网页之间暂时保存必要的信息。2.3 图像处理软件photoshop 它是一款PS指Photoshop，photoshop是Adobe公司旗下最为出名的图像处理软件之一，PHOTOSHOP的应用领域很广泛，在图像、图形、文字、视频、出版各方面都有涉及，它能处理有关图片的所有事项，用它主要是进行素材的编辑，和制作素材。第三章 开发过程3.1网站主题的确立做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。美国个人电脑杂志(PC Magazine)评出了99年度排名前100位的全美知名网站的十类题材:第1类:网上求职;第2类:网上聊天/即时信息/ICQ;第3类:网上社区 /讨论/邮件列表;第4类:计算机技术;第5类:网页/网站开发;第6类:娱乐网站;第7类:旅行;第8类:参考/资讯;第9类:家庭/教育;第10类: 生活/时尚。我们可以参看上面的分类，继续细分。如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色;二者，在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品3.2掌握建网工具Dreamweaver有很多的有点，可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。3.3确定网站风格图3.1 主页风格风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志，色彩，字体，标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。 风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性:是粗犷豪放的，还是清新秀丽的;是温文儒雅的，还是执著热情的;是活泼易变的，还是墨守成规的。 总之，有风格的网站与普通网站的区别在于:在普通网站上你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量多少，浏览速度快慢等;在有风格的网站上你可以获得除内容之外的更感性的认识，比如站点的品位，对浏览者的态度等。 在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之，风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进3.4确定网站界面界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点:3.4.1栏目与板块编排表3.1 网站板块表首页系简介系相册新闻图片留言板联系我们公告栏学校概况学校活动留影了解时事政治学生交流平台联系方式建一个网站就好比写一篇论文，首先要列出题纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是:确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是:尽可能删除那些与主题无关的栏目; 尽可能将网站内最有价值的内容列在栏目上; 尽可能从访问者角度来编排栏目以方便访问者的浏览和查询;辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。 3.4.2目录结构与链接结构网站的目录是指建立网站时创建的目录。例如:在用Frontpage建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排。3.4.3进行形象设计网站的设计可以从以下几点出发:图3.2 LOGO样式设计网站标志(LOGO)。LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色，黄/橙色，黑/灰/白色三大系列色。 图3.3 网站字体设计网站字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。 设计网站宣传语。也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。3.5网站总体分析与设计3.5.1网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分： 信息系风采 通过信息系概括、教师风采、校园之星及部分图片等内容来展现。3.5.2主页设计图3.5 网站主页网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现信息系的勃勃生气，静态主页方式介绍信息系风采、优点特色、信息发布，对于四大校务，就得利用与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。3.6 信息系简介具体介绍信息系的历史，以及发展，还有信息系所取得的成绩。在这里可以了解到信息系的一些相关信息。可以了解很多在首页上所看不到的信息。图3.6 简介页面3.7 相册页面系相册页面是用的锚连接做的FLASH图片相册，可以任意浏览相片，也可以更新图片。图3.7 相册页面3.7.1代码设计Flash相册的代码：   3.8 留言界面留言界面是很重要的，对与静态的浏览页面，是提供了浏览和发布信息的功能。而留言就提供了交流和动态的感觉这样就成了交互的功能。达到了沟通和交流的目的。所以，本网网站最大的特点就子啊与这个留言的设置，提供了交流的平台。这是网站的重要功能，实现了网站和官大人们之间的交互供能，是学校和有求学需求的人的接口，并且提供了接口用户对网站提出的宝贵意见图3.8 留言页面3.8.1代码的设计 留言者： 留言日期： 3.9 图片新闻界面图3.9 图片欣赏在这里可以看到社会事实政治动态，和各大新闻网站的连接，能让你第一时间了解国内外事实动态，点击左边的是连接外网的。3.9.1功能功能：在这里，大家可以看到我系的最新最热们活动的图片介绍，以及相关信息的介绍。第四章 注意事项4.1网页设计的注意事项四个注意：1.不要花里胡哨花哨的字体和格式容易被忽视。为什么呢？那是因为游客浏览时会认为这些是广告，并非他们所需要的信息。事实上，研究表明游客很难在充满大量颜色的花哨字体和格式里找到自己所需要的信息，所以要注意保持网站的清爽。2.要有风格，要突出行业的特点。比如娱乐业热烈活泼些，政府网站则要庄重些；收藏书画业要古朴典雅，策划时装业则要前卫些。3.不要做得太过于冗杂。一张网页一般两屏到三屏就可以了，不要太长，会影响你的网页打开的速度。如果内容实在太多，应该分作几个页面，或者分为几个二级栏目。4.字体大小影响浏览行为。想让浏览者认同你做的网页，首先要注意字体。大的字体刺激浏览，而小的字体则会提高焦点阅读量。所以要根据网页的实际情况来合理的设置网页内字体的大小的规划与排版。结束语经过一个多月网站的反复学习、研究和设计，我的毕业设计品鲜美味阁网站设计公司网站设计与应用基本上是完成了。毕业论文设计，不仅是单纯地做网站设计的过程，也是我们将大学四年里的理论知识与实践知识积累运用的过程。在做设计的这段时间里，我的生活既紧张又充实。有时，为了做一张与整体格局图片或按钮要花上一个小时。可是，到了最后发现还是不大适合，不是因为开始时没有计划好，而是在设计的过程中，自己的知识得到了进一步的深化。所以，一直都是怀着感恩的心情来做这次设计的。在网站设计的过程中，可以认识到自己的各方面的很多不足，对我来说已经是最大的收获了。需求分析和详细设计其间，我参考了大量书籍资料，也在网上利用百度和Google等搜索引擎查阅了很多关于网站设计方面的资料，同时也学到了国内外各方面新IT技术的知识。所以在整个毕业设计过程中，我不仅回顾了解以前学习过的理念知识，还学习了新的理念知识，这又是我这次设计的重大收获。由于这是我第一次系统地设计和开发网站，所以很多方面经验不足，比如需求分析程序调试和设计方面，遇到过好多难题。还有，由于我的经验尚缺，在需求分析方面做得不够好，。经历了这次网站设计之后，我的分析能力与设计方面的能力增加了，开发方面的经验也提高了，这又是一个很大的收获。由于整个系统设计与开发时间比较短，我的网站开发经验尚浅。因此，本网站难免会存在一些缺陷和不足。致谢感谢我的指导教师刘明堂老师，您在工作中严谨细致、一丝不苟的精神一直是我工作、学习的楷模；您循循善诱的教导和不拘一格的思路给予了我无尽的启迪。 感谢刘老师，这篇论文的每个细节和每个数据，都离不开您细心指导。而