网页的设计与实现设计.docx

网页的设计与实现设计.docx

《网页的设计与实现设计.docx》由会员分享，可在线阅读，更多相关《网页的设计与实现设计.docx（18页珍藏版）》请在冰点文库上搜索。

网页的设计与实现设计

安徽中澳科技职业学院计算机系

毕业论文（设计）

论文题目：

网站的设计与实现

摘要

随着计算机网络通信技术和Interne的飞速发展，基于因特网的计算机网上远程教学已经开始成为一种全新的教学手段，并且越来越受到人们的关注。

由于网上教学具有时效性、共享性、交互性和个别化等诸多特点，因此它有着传统教学模式无法比拟的优点，它创造了一种全新的教学模式，打破了传统教学模式在时间、空间上的限制，采用了先进的教学手段和教学方法，可以大大提高教学效率和教学效果，使教学活动上了一个新台阶。

蓬勃兴起的网上教育以其全新的高科技教学手段为解决我国当前资源严重短缺而教育需求日益扩大的矛盾提供了一种投资少、见效快、优质高效的解决方案，它必将成为我国未来教育发展的重要方向。

本文依据设计出来的计算机组成原理教学网站，做了全面系统的介绍。

全文共六章，按照前期的开发顺序，从系统分析与研究开始，逐一对开发过程做了全面的介绍。

在详细设计这一章中的系统实现部分省去了烦琐的程序代码，用比较直观易读的流程图来表示，增强了文章的可读性。

关键字：

信息系统，B/S，计算机组成原理

Abstract

WiththecomputernetworkcommunicationtechnologyandtherapiddevelopmentofInternetandInternet-basedcomputeronlinedistancelearninghasstartedtobecomeanewteachingmethods,andmoreandmorepeople'sattention.Asonlineteachingistime-sensitive,sharing,interactiveandindividual,andmanyotherfeatures,ithasatraditionalteachingmodeincomparableadvantages,ithascreatedanewteachingmodel,breakingthetraditionalteachingmodelintermsoftime,Spaceconstraintsontheuseofadvancedteachingmethodsandteachingmethods,cangreatlyimproveteachingefficiencyandeffectivenessofteaching,sothatteachingandlearningactivitiesonanewlevel.Theriseofonlineeducationflourishinginitsnewhigh-techteachingmethodstosolvethecurrentseriousshortageofresourcesandeducationalneedsofthegrowingcontradictionsprovidesasmallinvestment,quick,qualityandefficientsolutions,itwillbecomeChina'sfutureeducationTheimportantdirectionofdevelopment.

Thispaperdesignedbasedontheprincipleofteachingcomputersite,anddoneacomprehensiveandsystematicintroduction.Thefulltextofatotalofsixchapters,inaccordancewiththedevelopmentofpre-order,startingfromsystemanalysisandresearch,onebyoneofthedevelopmentprocesstodoacomprehensiveintroduction.Inthischapter,thedetaileddesignofthesystemtoachievesomeofeliminatingthecumbersomeprocedurecode,amoreintuitiveaccessibilitytotheflowchartthatenhancethereadabilityofthearticle.

Keyword：

InformationSystems,B/S,computercomponentsPrinciple

第1章绪论

1．1设计思想

校园网建设的目的是为教育服务，立足于本教育为创新教育，素质教育服务。

通过网站的建设，宣传展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学校之间的联系，在Internet网上，让学生及家长及时得到学校发布的重要信息，同时也帮助了学校完成部分事务，提高办事效率,给学生、家长与学校最方便的联系桥梁。

在这里学生及家长也可以提出意见及想法，互通教学之间的意见想法，更加有效的办好教学，和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为学校的参考，以便更好的提高学校的教学质量。

校园网的建设一方面，有利于及时了解校园的信息，有助于提高学校的科研教学水平；另一方面，校园网的建立及以其为基础的管理信息系统的开发，也有利于学校管理水平的提高。

1．2课题来源及时代背景

网络背景下的创新性教学研究是当今世界课程改革的一种潮流,也是素质教育进一步深化的客观要求。

网络教学一向被视为有效突破时空限制的教学通道。

近年来,随着信息技术的蓬勃发展,世界发达国家正如火如荼地致力于Internet在学校教育、社区教育、社会教育及在职训练的应用与研究等,由于利用网络媒体进行网络教学与传统媒体有极大的差异,因此许多研究单位在网络教学方面投入相当多的时间与精力,试着设计一套能够符合网络媒体特性,并能提升教学成果的教学系统。

然而,目前这种基于数字化、交互式、个别化、多媒体的现代远程教育平台的新型教学模式,其理论与实践都不够丰富。

创新性教学是实施素质教育的核心内涵。

创新性的教学能激活、启动学生自主学习的动力系统,能培养学生的创新意识、创新思维、创新情感和创新能力。

它能弘扬学生的主体意识,促进学生个性和谐发展。

创新性教学体现了素质教育的本质和核心内涵,是实施素质教育的基本途径,并具有重要的推动作用。

因此,借助网络这一现代化的教育技术来构建创新性教学的理论和实践模式,既是深化素质教育的迫切呼唤,也必将为提高我们全民族的素质作出积极的贡献。

目前，校园网的建设与应用被越来越多的中小学视为实现教学改革，提高教学质量以适应时代对人才培养需求的关键。

中小学校园网络作为一种在中小学应用的局域网，有其特定含义和应用范畴，我们可以将校园网定义为：

一种为学校学习活动、教学活动、科研活动和管理活动服务的校园内局域网络环境，并且它是建构在多媒体技术和现代网络技术之上并与因特网连接的。

对于校园网建设来说，其应用是目的，网络环境是基础，网络教学资源是核心，而人员培训与网络维护是保障。

通过本网站的设计与建设,能够实现计算机文化基础教育的初步功能,本网站主要运用dreamweaver与photoshop整合的开发技术，实现了学校信息资源的共享。

1．3开发工具的选用及介绍

现在非常流行的Macromedia公司出品的Dreamweaverstudio8提供了更多功能强劲的可视化设计工具、应用开发环境以及代码编辑支持，是开发人员和设计师能够快捷的创建代码规范的应用程序，集成程度非常高，开发环境精简而高效，开发人员能够运用Dreamweaver与他们的服务器技术构建功能强大的网络应用程序连接到用户的数据、网络服务体系。

网页图形设计软件包括擅长平面图形设计的photoshop与擅长网络图形设计的firework软件。

相比较而言，photoshop可以做出比较复杂的平面效果，但不适合于团队开发，故目前普及面不是很广。

Firework是最好的通用网页图片编辑器，同时具有位图和矢量图的编辑能力，可以结合位图效果丰富和矢量图容易编辑的优点，制作一些特殊效果简单，易生成网页效果模板，通过切片可导出生成网页。

此次设计中采用photoshop编辑图片。

网页动画设计软件flash。

Flash网页动画设计软件可以制作网页互动动画，也可以将一个较大的互动动画制作为一个完整的网页，这是一个非常灵活的设计软件。

由于利用Flash可以设计强大的动画效果，所以Flash动画已发展成为一种独特的艺术形式。

至此Flash动画被广泛应用在网页设计中，从logo到网页横幅、按钮，甚至整个网页或网站，都可以用Flash动画来实现。

为利用Flash动画制作网页导航条的效果尤佳。

我主要在网页设计中用了一个Flash来体现校园情况。

第2章网站总体分析与设计

2.1网站系统分析

根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：

1、学校风采通过学校概括、教师风采、学生频道及部分图片等内容来展现。

2、优点特色通过教育动态、家长中心、心理健康等栏目来展现。

3、信息发布通过公告栏、校园新闻等栏目来实现，内容有校园动态、活动安排等。

2.2网站需求分析

1、提供Internet服务，通过与Internet的连接，可以培养教师和学生使用网络来获取学校资源信息，这对学生的培养更为重要。

2、资源共享：

统一管理学校内的各科目多媒体教学课件等教学和管理资料，使这些资源得到更为广泛的应用。

3、校内电子邮件系统：

通过网络进行信息交换，随时随地地取得学校各教研室、各有关部门的资料，增进学校内教师、学生以及各部门之间的沟通联系。

4、通过校园网络，可以使学生能及时了解国内外科技发展动态，促进教学、教研和科普工作的提高。

5、以校园网络为依托，建立各种课程的计算机辅助教学、多媒体教学课件演示。

6、为学校的管理现代化及通信现代化提供重要的支撑环境，包括硬件和软件两个方面。

2.3网站建设的总体规划及设计

2.3.1、确定网站建设的目的

确定网站建设的目的，这是非常重要但又易于被人们忽略或轻视的一项工作。

与网站单位人员沟通就尤其重要了。

对于网站设计来说，这种沟通不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。

这将成为整个网站所有设计思想的基础。

无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。

另一方面，网站建设还应该收集客户对这个网站的美术需求。

网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。

本网站的建设主要是为了全面宣传，展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学校之间的联系，提高学校的教学质量，让学校信息及时散布。

2.3.2、确定客户群体

确定网站的客户群体十分重要。

只有清楚确认网站的客户群体、客户的需求、客户的兴趣，才可能在网站上提供客户所需要的内容和信息，留住目标客户群体，网站才能获得成功。

校园网站的建设就是为了学生、家长和学校之间密切的沟通，让家长及时关注自己的孩子，因此家长、学生便是校园网的的客户群体只要能满足家长、学生的需求就证明网站是成功的。

2.3.3、细化目标，构架网站内容纲要

确定目标市场和客户群体后，下一步工作目标将细化，构架网站内容纲要，主要包括网站核心内容、主要信息、服务项目等。

然后，将网站内容建设的基本架构交给有关业务人员审核批准，形成部门网站设计的总体报告。

2.3.4、整理网站结构图

确定内容后，就可以勾画网站结构了。

结构图有很多，顺序机构、网状结构等，应依据自己网站的内容反复讨论后确定。

多数复杂的网站会综合应用到几种不同的结构图。

画出结构图的目的，主要是便于有逻辑地组织网站和链接，同时，可以根据结构图去分配工作和任务。

2.3.5、美工

有美术设计人员的帮助，对网站建设的成功也是至关重要的。

他们能给你很多关于排版，色彩等方面的建议。

网页设计与其他出版设计最大的不同点在以下3个方面。

（1）、传播的媒介不同。

许多用户是用MODEM上网的，图形一般不宜太大；通常每个图应小于30KB，每个页面图形总量应小于50KB。

（2）、最终的发布媒体不同。

多数用户是通过Windows上网的，而且当前通用的分辨率是低于800~600，因此，美工人员的发挥天地的14~15英寸显示器所能展示的区域。

（3）、所能采用的文件格式的限制。

对通用浏览器来说，能识别的图像格式仅为JPG和GIF，两者又各有不同的特点和适用环境。

我选择了两种格式的图片。

2.3.6、个性化服务

对于任何一个成功的网站来讲，资料收集都是至关重要的环节。

有关访问者和顾客行为的资料是分析投资收益的基础。

顾客的经验同时也会随着资料的增加而增加。

随着时间的推移，收集的资料不断增加，同时与网上业务相互影响也在不断提高。

这个过程促使不断提高为网民提供的价值，并且优化同每个顾客关系的收益。

由于这个过程是渐进的，因此有时被称为渐进的个性化服务。

制定资料收集计划时，不一定马上就开始采用技术手段。

应该先从明确目标入手，在收集到的信息的基础上，确定网上业务服务特定客户的策略。

一旦策略适当，就能确定需要什么样的技术达到确定的目标。

2.4主页设计

网站主页采用静态的方式，即静态的主画面和静态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校概况、校园新闻、心理健康、家长中心、学生频道等信息。

2.5色彩搭配

网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。

不同的色彩会使浏览者有不同的心理感受。

合理的搭配色彩，会更好的表现主题，吸引用户的注意力。

网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。

在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。

背景色和前景色对比要大，以突出主要内容

设计网站色彩。

网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。

给人以整体统一的感觉。

至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。

一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。

适合于网页标准色的颜色有：

蓝色，黄/橙色，黑/灰/白色三大系列色。

第3章详细设计

3.1网站设计的流程

3.3.1、设项目的主要工作内容

（1）、对校园网站的设计进行需求分析。

（2）、收集整理需要的信息。

（3）、制定网站开发的方案。

（4）、对校园网站进行整体构架搭建。

（5）、制作并发布单位所有主要网站建立的相对静态信息。

（6）、全面负责单位主网站的宣传。

3.3.2、网站建设方式

（1）、软件自动生成

利用软件生成站点，具有功能强、效率高、费用低等优点，但存在使用不方便、站点模式有限、不能满足校园的实际情况等缺点。

（2）、传统建站方式

初期投入成本低，纯粹做网页，网站技术成分低，后期维护困难，灵活性差。

3.2网站框架介绍

本网站是一个比较小型的中小学网站,能够实现网络教育的初步功能。

本课题主要运用dreamweaver与photoshop整合的开发技术，实现了学校的信息、学校概况、教学科研、心理健康、校园新闻、家长中心、学生频道、注册、留言等功能。

最终以实现既能使用户学到知识的同时,又提高用户的学习兴趣为目的。

3.3各模块的设计

1、学校概况：

对校园的简单介绍，展现校园风采。

设计图如：

2、校园网网站叶子;展现校园风采。

如图3-2校园网网站叶子模块设计图

3、校园作品：

散文精选。

设计图如：

如图3-3校园网作品集子模块设计图

4、照片匣子：

包括校园景色、概况以及活动等。

设计图如：

如图3-4校园网校园景色模块设计图

5、留言本子：

介绍学校的网站、地址、联系方式等欢迎您的来访。

设计图如：

如图3-5校园网留言本子模块设计图

3.4网站的测评

3.4.1、网页的测试

当你的主页编制成功后，要以一个读者的身份，利用浏览器测试文档资料的正确性和可用性。

（1）、浏览器兼容性测试。

目前主要浏览器InternetExplorer，只要能在这种浏览器上浏览就可以了。

一般我们做的网页测试不存在兼容性的问题，在通用的这种浏览器上一般情况下都能正常的浏览。

（2）、链接正确性的测试。

我们做的网页一般都用Dreamweaver检查，我们做的静态网页链接的只是浏览页面，图片等，所以在Dreamweaver里指向链接属性仔细检查就可以了。

在浏览器测试中页面都能正常浏览，就是注册信息、学生频道、联系我们等栏目的功能不能充分实现，只能是简单的页面浏览。

3.4.2．网站测评

网站建成之后，为了避免出现不必要的错误，需要对其进行测评。

测评的内容主要有以下几个方面。

（1）、链接有效性。

静态网页只要确认每一个页面能正常浏览，保证信息不缺失就可以了。

（2）、网页语言正确性。

检查网页中英文拼写与网页HTML语法书写是否正确。

在静态网页中语言都是自动生成的所以语言的正确性一般情况下不会有太大的问题。

（3）、网站便用性。

检查网站整体结构是否清晰以及网站页面导航是否清晰。

第4章网页设计应注意的问题

当网站在进行具体的页面设计过程中，还应注意以下事项，可帮助我们取得事半功倍的效果：

4.1.网站的素材选取

网页制作之前要收集好相关的素材，对收集的素材进行分类管理，如可分为：

文字素材、图像素材、视频素材、动画素材等。

并且对素材进行加工处理，以适合网站主题。

如果没有合适的素材，还要自己用相关软件进行网页素材制作。

1在网站首页部分为了切合主题选取了一些关于学校的一些图片例如：

图片1

图片2

图片3

2在其他链接里面也选取相对应的一些切合主题的图片例如：

（1）在作品集子里面选取了一个关于散文请选的图片：

图片4

（2）在照片匣子里面插入一些关于学校的图片如图片5图片6等：

图片5

图片6

3以切合主题为标准选取一系列素材，在不同链接选取一些对应的素材。

4为了使图片观看效果更佳还对部分图片进行了处理效果如下：

图片7

图片8

第5章主页设计与实现

5.1主页设计

由于是校园网的设计所以版面不应该和个人主页那样随意，我做的网页主要是静态的，因此一些信息只能通过图片和文字来反应，用简单的文字链接页面进行信息的浏览，以图片的形式反映教育状况页面比较简洁

。

如图5-1校园网主页

第6章总结

当我终于完成了对所以图片的收集与后期的处理任务后整个人都很累，但同时看着电脑荧屏上的毕业设计稿件我的心里是甜的，我觉得这一切都值了。

这次毕业论文的制作过程是我的一次再学习，再提高的过程。

在论文中我充分地运用了大学期间所学到的知识。

我不会忘记这难忘的几个月的时间。

毕业论文的制作给了我难忘的回忆。

在我徜徉书海查找资料的日子里，面对无数书本的罗列，最难忘的是每次找到资料时的激动和兴奋；亲手收集和处理图片的时间里，记忆最深的是每一步小小思路实现时那幸福的心情；为了论文我曾赶稿到深夜，但看着亲手打出的一字一句，心里满满的只有喜悦毫无疲惫。

这段旅程看似荆棘密布，实则蕴藏着无尽的宝藏。

我从资料的收集中，掌握了很多处理图片的方法，让我对我所学过的知识有所巩固和提高，并且让我对当今平面色设计应用于生活的最新发展技术有所了解。

在整个过程中，我学到了新知识，增长了见识。

在今后的日子里，我仍然要不断地充实自己，争取在所学领域有所作为。

致谢

通过这次毕业设计，使我学到很多新的知识，巩固了学习过的旧知识。

这次毕业设计过程中，得到了老师的大力支持，在设计过程中有指导老师吴晓红的悉心指导，为我指点迷津，精心点拨，帮我开拓思路，对老师的感激之情我无法用语言来表达只能发自内心的说声“谢谢”，同时也得到了同学、舍友的帮助，在此表示衷心的感谢！

参考文献

[1]孙东海.网站建设与网页设计详解[M].北京：

电子工业出版社

[2]田守端.Macromedia网页风暴培训教程[M].北京：

清华大学出版社

[3]纪红兵、高学农.经典网页设计[M].广东:

广东旅游出版社

[4]高海茹.精美网页特效设计技巧精粹[M].机械工业出版社

[5]华之凤.网页配色宝典[M].中国电力出版社

[6]卓文.轻松学网页设计与制作[M].上海:

上海科学普及出版社

[7]徐一明.网页设计与制作[M].人民邮电出版社目录