计算机系教学网站建设

1计算机系教学网站建设学生姓名：高平指导教师：陈桂芳摘要：网络在几年前对于人们可能还是一个很生疏的字眼，但是随着科学技术的飞速发展如今的网络已经无孔不入了，从电子邮件到电子商务，从铺天盖地的网站广告到纳斯达克的股票神话，一切都已经说明了网络新经济已成了社会发展的巨大动力。毫不夸张的说，网络正在彻底改变我们的生活。太原师范学院计算机系网站是展现我系学习生活的风景线。其界面美观大方、内容丰富多彩，从不同角度了展现了计算机系的文化，必将成为广大计算机系学生及家长了解太原师范学院计算机系的窗口。在这次毕业设计的任务中，运用到了网页设计软件DreamweaverMX，FireworksMX，FlashMX，Photoshop7.0。关键词：版面布局功能模块CSS超链接一、引言随着人类步入信息社会以及全球“信息高速公路”建设的蓬勃发展，在社会信息化和信息社会化的进程中，数据通信和计算机网络扮演了越来越重要的角色。计算机网络——已成为人们生活中不可或缺的工具。互联网已经成为人们生活的重要组成部分，网页制作也成为网络时代必备的技能之一。网上浩如烟海的资源，需要大家共同去建立；熟练的网页制作人才，成为现代社会中颇受欢迎的宠儿；即使普通的网民，也希望靠自己的力量在网上建立一块展现自我的空间。Web是WorldWideWeb的简称，也称为。它最大的特点是使用了超文本（Hypertext），而其中最多是HTML文件。基本的HTML文件是静态的，这样的网页已经远远不能满足更高的要求，而应该使用动态交互式的Web页为用户提供更多信息丰富和更加动人的内空，即开发出动态网页。在这次毕业设计的任务中，运用到了微软公司的网页设计软件DreamweaverMX，FireworksMX，FlashMX，Photoshop7.0等。二、概述在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着越来越重要的作用。互联网已成为并将长期成为社会发展的一个大趋势，为了更好的宣传、提高我系的知名度，特制作了太原师范学院计算机系网站。同时，也对即将毕业的我来说，是一次综合运用所学知识，提高技能的一个有效途径。1.网站设计的现状和前景随着人们对美的追求不断深入，大家是否有这么一种感觉，就是从前那些你自己能够欣喜得发现一个原汁原味的优秀网站的好日子似乎一去不复返了？我不是说现在的网页该做的已经都做了，该想到的也已经想过了，有创造性的网站已经不存在了。应该说这样的网站还有，但像这样的原创网站是越来越难发现了。而目前很多网站的现状是什么样子的呢？可以用三个字来形容：“塞”、“花”、“千篇2一律”。这就需要结合使用方便的要求，制作出清晰、整体性好的页面。使人浏览起来心情愉快，接收信息也会更加容易。同时提升网站的形象。经常上网的网友可能会有所体会，目前的网页存在着诸多的不足，需要有针对性的采用一些美的形式。来使网页做得更加有生气，更吸引人。2.设计思想通过网站全面宣传、展示计算机系风采、优点与特色，发布计算机系的重大活动安排与招生政策，增强家长与计算机系之间的联系，在Internet上实现完成部分校务，提高办事效率，实现资源共享等。3.ASP技术介绍ASP（ActiveServerPages）是Microsoft于1996年推出的WEB应用程序开发技术，微软声称设计出了一个完美的Active平台。微软把ASP描述为：一个服务器的脚本环境，在这里可以生成和运行动态的、交互的、高性能的WEB服务器应用程序。ASP属于ActiveX技术中的服务器端技术，它既不是一种语言，也不是一种工具，而是一种技术框架，其主要功能是为生成动态的交互式WEB服务应用程序提供一种功能强大的方法或技术。ASP把HTML、脚本、组件等有机的组合在一起，形成一个能够在服务器上运行的应用程序，并把按用户要求专门制作的标准HTML页面送给客户端浏览器。4.开发工具的选用及介绍在目前的网页编辑软件中，最知名和最常用的两套热门软件是微软公司的FrontPage以及MacroMedia公司的Dreamweaver。对于这两种软件，前者比较重视网页的开发效率、易学易用的引导过程；而后者所强调的是更强大的网页控制、设计能力及创意的完全发挥。Frontpage在站点管理上无疑是很优秀的，其中特有的报表视图可以显示未链接文件、慢速网页、较旧的文件、新增文件、未验证链接等15个项目细节。同时，Frontpage具有与Word类似的界面和操作性，可以非常方便地建立复杂的表格。此外Frontpage在采集整理资料时，从浏览器中Copy的页面粘到Frontpage中时仍能保持原有的表格、链接、文字格式，这使得设计者可以减少大量的繁琐工作。但Frontpage的主要缺点在于：首先会产生大量的垃圾代码；其次是它的兼容性问题，Frontpage虽然可以把IE的能力完全发挥出来，但却完全不顾与NN的兼容性问题。Dreamweaver在功能的完善，使用的便捷上比FrontPage要强。Dreamweaver是功能更强大的用于可视化设计与管理网页和网站的专业级HTML编辑器。它囊括了FrontPage的所有基本操作，并开发了许多独具特色的设计新概念，诸如行为（Behaviors）、时间线（Timeline）、资源库（Library）等，还支持层叠式样表（CSS）和动态网页效果（DHTML）。首先，在Dreamweaver中它设立了资源库（Library）的概念，可以把页面中所要重复的任一部件加入到库项目，自由设定在所需的页面中重复使用、统一更新；这要比Frontpage的共享边框方便和强大的多。其次，Dreamweaver具有“设计互动式网页”的功能。可以利用Dreamweaver的“图层”(Layer)和“时间轴”(TimeLine)功能，来让图片或文字随意地在网页中自由移动。移动的方式可以是绕着所设定的路径(path)移动，也可以是左右或直线的移动。另外，可以设计让文字或图片配合鼠标的点选有更多的变化。也就是说，当鼠标经过文字或图片，文字或图片会产生变化的动态效果。Dreamweaver还可以插入Flash的.swf动画文件和Firework设计的HTML文件，让网页更加活泼。虽然FrontPage也可以插入Flash文件，但操作方面比Dreamweaver麻烦。此外，Dreamweaver还提供了“模板”功能(模板后缀名为.dwt)，只要设计一份模板或二、三份模板(份数可以根据需要产生)，然后将网页“套用”这些模板，之后只要修改相关的模板(可能只改变一个)，那么所有套用模板的网页，就可以“一次全部”跟着修改，这样3我们就不必再做大量烦琐的修改工作了。Dreamweaver的这项功能对于设计大型网站或多网页的网站有“容易修改和维护”的作用。至于FrontPage，虽然它有提供“主题”(Theme)，也能够让多网页套用到某些“主题”的样式，但是FrontPage的这项功能弹性比较差。也就是说，在许多地方无法按照自己的想法来设计，只能使用FrontPage的几种固定样式。对于前面所提到的FrontPage的两点主要缺点，Dreamweaver与之相比有很大的优势。Dreamweaver生成的代码是非常简洁的。而且，Dreamweaver非常注重浏览器的兼容性问题，在Dreamweaver中处处可看到为兼容性考虑的地方，Dreamweaver同时支持IE和NN的网页边距设置、同时支持IE的“DIV”层和NN的“LAYER”层。另外Dreamweaver与Fireworks、Flash的完美结合，为网页制作提供了全套的解决方案。总结Dreamweaver主要有以下几点优势：a.产生的垃圾代码少，网页可读性好，可以提高网页浏览速度；b.通过图层功能，可以快速制作出复杂的页面，图片定位更容易；c.可基本解决IE与Netscape的兼容性；d.设计思路广，内涵丰富，创作随意性强，可充分展现你的创意。总的说来，Dreamweaver更加专业，对源代码控制更精确，能制作出“专业化”、“个性化”的站点，可以把设计者的设计思想发挥得淋漓尽致。所以我选用了Dreamweaver结合ASP来制作此教学网站。三、网站的分析1.从内容上可对网站作如下划分：(1)我系风采通过本系概括、教师风采及部分图片等内容来展现。(2)优点特色通过新闻、生动活泼的教育教学栏目来展现。(3)信息发布通过公告栏、信息查询等栏目来实现，内容有系学生会的章程、学生成绩查询和日常活动安排等。2.主页表现方式网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现本系的勃勃生气，静态主页方式介绍计算机系风采、优点特色、信息发布，对于bbs论坛和留言本，就得利用ＡＳＰ与数据库结合的技术建立数据库查询管理系统来实现四、网页布局网页是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一幅幅精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。1.网页布局类型我们平常在网上浏览时，经常能看到许许多多的漂亮主页及网页布局，都给大家留下了很深的印象。总体看来大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，下面分别详细论述。(1)“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多是最多的一种结构类型。(2)拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。4(3)标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。(4)左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。(5)上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。(6)综合框架型：上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。(7)封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。(8)Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。(9)变化型：即上面几种类型的结合与变化，这种类型在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。以上针对不同的网页布局做了简要分析，下面的图示1是这次计算机系网站主页的网页布局。图示12.关于第一屏所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800×600的屏幕显示模式(这也是最常用的)5下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px×435px，一般来讲，我们以这个大小为标准。一般情况下，网站展现在大家面前的第一眼应该是该站的主页即第一屏，所以它的全局设计就显得很重要了