学校网站的设计与实现.docx

学校网站的设计与实现.docx

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

学校网站的设计与实现

学校网站的设计与实现

1绪言

二十一世纪进入了信息发展急速时代，计算机革命给所有领域带来崭新的变化。

现代教学技术已经越来越普及，计算机科学应运而生，一切都归于计算机网络带来的巨大贡献，互联网的世界蕴藏着无限潜力与资源，这里的信息应有尽有，供你随时查阅与浏览。

就目前看来，计算机功能强大，它缩小了人与人之间的距离。

不论是沟通还是学习，它的使用都可以说是迅速方便的。

所以，在现今社会对于一个学校来说，除了书本知识的学习同样还要与时俱进，跟随时代的脚步、顺应时代的潮流，建立新型化的学校教学系统。

因此，学院网站成为不可或缺的一部分，它是人们了解学院基本情况的最佳途径。

现如今，人才培养成为最重要的培养主题，知识越来越被人们重视。

随着就业压力的无限加重。

人们更加需要不断提高自身的素质，大学教育呈现普及化的趋势，各级各类高等学校越来越多，如何推出自己的学校闪光点，如何使自己的学校被大家了解与认识，成为现今非常重要的问题。

在这种背景下，学校网站的设计与制作成为重中之重，它体现了学校的特色，发展的前景，它为人们提供了传播信息的有效平台。

所以，我制作了一个专门用于展现学校特色的网站，供想要了解的人随时关注与交流。

社会的不断发展，人们思想观念的无限更新，生活方式的丰富变化，网络化的世界充斥着我们的日常生活。

通过这个小型的学校网站平台也能实现交流与学习的便捷普及化与现代化。

2网站设计与分析

谈到网站的制作，首先应想到的是网页中的三剑客。

其中包括Dreamweaver、fireworks、flash，同时还会用到Photoshop等画图工具。

因此，我们必须熟练了解它们，熟练掌握这些制作工具的功能与用途，只有这样，才能更好的使用它们，不至于在制作中出现不必要的问题以及技术上的错误。

做到这些，经过不断的修改尝试，才能做出效果美观，使用方便的服务网站。

[1]

2.1网站设计概述

网站制作是否美观，首先应是主页的设计，因为大家浏览一个网页最先看到的是网站的主页。

主页的设计不仅要内容丰富，还要使用方便、美观易懂，吸引用户眼球，使大家有兴趣继续浏览。

在此观点上，我在主页的制作上下了不少功夫，使用了多种制作手段，其中导航条这一板块设计清晰明了，在高校站点底部已经使用PS图象处理软件技术代表图像，使图像看起来更漂亮，而这些照片也加入了动态滑动的影响。

。

这样一来，使网页动静结合，增加大家浏览兴趣。

此外，在网页左侧使用了滚动条的设计，主要用来滚动展示实时的热点新闻。

以此吸引大家对校内外实事的关注。

网站主页的右侧设计了用户登录系统，通过登录，可以使用户更深入了解网站情况，同时实现与他人的交友沟通。

还使用了下拉列表等技术设计了其他网站的快速链接，使用更加方便快捷。

联系我们这一页设计了flash动画效果，以此吸引更多用户的联系与沟通。

其他网页模块的设计通过超链接以及CSS样式实现预期的效果。

在每个网页下方都留有我们的信息，各个页面随意跳转，真正实现方便快捷，经济实用。

2.2开发工具的选用及介绍

2.2.1Dreamweaver8.0

Dreamweaver8是一个生产和管理网页网站强大的编辑软件，主要用于制作屏幕的外观，使用更方便。

它的内容丰富、自称系统、实例众多、是网页设计者的首选工具。

Dreamweaver有灵活便捷的编写方式、可视化的编写界面、CSS属性功能支持、浏览器验证、强大的web站点管理功能、图形编辑功能、强大的集成特性、丰富的媒体支持功能、以及第三方插件的扩展等多方面的功能。

2.2.2Photoshop

PS图象处理软件是一个图形图像编辑软件，具有软件性能的优化设置，被广泛应用于网页制作。

Photoshop包括了强大的快速浏览功能、颜色匹配方便快捷、调色板种类齐全、阴影或加亮的修正功能、支持多种模式的图像输入功能、支持快速查看、flash输入、沿路径放置文本、还可以自定义快捷键。

[3]

2.2.3Flash

Flash是广泛应用于多媒体，动画，MTV，短短几年，Flash正以惊人的速度发展。

在此期间flash发展日新月异，直到2007年，Adobe公司正式发布了Adobecreatesuite3系列产品。

它的出现为设计人员在印刷、web、移动、交互、影音编辑等各方面的创意设计提供了广泛选择。

它的强大功能，无论是动画的应用驱动的设计或施工，这是一个最好的产品，用户会感觉到它史无前例的功能。

[6]

3方案选择

3.1网站布局

1.网站名称：

本网站定名为商丘师范学院与学校名字一致。

简单明了、易于搜索。

体现了网站的定位。

2.网站主题：

本网站主题是帮助大家方便快捷掌握学校动向，了解学校情况。

致力于制作出符合大众心理以及使用习惯的学习网站，传统与创新结合。

3.网站的导航：

本网站根据不同需要设计了学院首页、院系概况、新闻公告等多个导航。

并选用了有学校名称、校训字体的图片。

4.颜色设计：

本网站主要采用白底黑字，以浅蓝色为主色调。

简单大方，不会因繁杂的颜色产生浏览疲倦感。

使用户喜欢这一网站，对网站产生持久的兴趣

5.字体设计：

本网站的文字主要采用的是标准的宋体，符合总体使用习惯。

3.2整体构思

这一网站的设计包括了学院首页、本系概况、新闻公告、教学科研、组织机构、教学工作、图片展示、用户的联系留言设计等几个方面。

他们之间的联系密切，各自实行独立的功能，为网站的实现做了支持。

大体的图解如图1所示

图1

3.3网站栏目介绍

1.学院首页：

首页是对学校整体布局的设计，使用技术最多，也是最为重要的一栏。

它决定了读者是否被吸引。

因此，我设计了站内搜索、学生通知、图片滚动播放、以及用户的登陆等用来是网页更加美观。

2.新闻公告：

这是为了实时更新新闻而设计的，可以使大家在最短的时间内了解热点新闻，掌握学校动向，为新闻爱好者提供了快速阅读的通道。

3.图片展示：

为大家展示了学校的无限旖旎风光，使用Photoshop将图片美化，使图片更加美观使用户喜欢这一网站，对网站产生持久的兴趣。

4.教学科研：

为大家提供了众多学习资料，一些著名的论文，供大家学习。

5.组织机构：

可供大家了解学校师资力量、实验基地，将理论联系实际发挥到极致。

致力于制作出符合大众心理以及使用习惯的学习网站。

同时加入了自己的创新，在传统的理论基础上加入了新的元素，整个制作相得益彰。

6.用户联系：

这一板块的设计是为了更好地实现信息交流，使之更加便捷畅通。

而且根据用户在网站的反馈信息更好的改进网站，使无生命的网站变得富有人性化，更有活力与趣味。

4详细设计

4.1网站制作过程

4.1.1定义站点

站点制作时，第一步是对网站的定义。

用定义的站点来储存网站中的很多图片、文字、界面等。

方便对网站内容的管理。

单击“站点”-----“管理站点”----“新建”------“命名”即可完成。

如图2所示

图2

4.1.2.导航条的制作

在导航适当防置的位置插入一行表格、设置设和页面的宽度和高度。

然后输入导航条的链接。

分别为：

学院首页、本系概略、新闻动态、学习科研、组织机构、教学工作、图片展示、联系我们等。

如图3所示

图3

代码实现为：

学院首页

||

本系概况

||

图片展示

||

联系我们

4.1.3主页的制作

在使用的开发工具Dreamweaver中点击“文件”，然后单击“新建”，把新建的网页取一个名字为index.html[1]。

如图4所示

图4

4.1.4登陆系统的制作

首先插入表格为3行2列，两列分别输入文本“用户名”、“密码”；然后设置宽度为212、高度为132；设置背景颜色为#66FFFF，然后插入按钮在第三行再出现的对话框内输入“登陆”、“注册”按钮。

依照此方法，还设计了修改密码的页面。

如图5所示

图5

代码实现如下：

用户名：