《基于上海交大门户网站的网络教育应用分析.doc》由会员分享,可在线阅读,更多相关《基于上海交大门户网站的网络教育应用分析.doc(7页珍藏版)》请在三一文库上搜索。
1、基于上海交大门户网站的网络教育应用分析 从动态网站设计和实现的角度出发进行网络案例的分析,主要包含网站开发平台、采用的语言、使用的数据库,及相关的隐含技术等方面,解析上海交大门户网站页面的布局、数据库的连接、整个网站的美观和谐等如何实现,从而了解网络应用具体实现情况。 随着网络的发展,各个大学都有了自己的门户网站,网络教育应用愈加广泛,本文以上海交通大学为例,分析它的门户网站。 毫无疑问,动态网站的发展是迅速的,静态网站因不能使用户和环境进行交互,只是单纯地将资源放到网站上去,越来越显示出它的局限性。静态网页指的是网页文件中程序和后台数据库都没有、也不能进行交互,仅有HTML静态代码,通常后缀
2、名是.htm或.html的网页。静态网站中的内容在制作好之后就一直保持一样,若想修改网站上的内容,则需要先人工修改代码,然后再上传到服务器上,若有多次改动则比较费时费力。动态网页相对来说就没静态网页那么费时费力,动态网页的文件不但有静态HTML标签,还含有后台数据库和程序代码,动态Web页可以根据不同的时间,不同的访问者显示不同的内容,它更新方便,不要人工修改代码,通常在后台自己更新的。动态网页效率高,更新速度快,移植性强,能很快实现即见即所得的效果。因此,各大学校的网站趋向于向动态网站发展。 A是一种动态服务器技术,它是面向对象的,提供浏览器界面设计和交互功能代码编程能力。基于(c#),结合
3、sql和javascript来做动态网站也普遍,现在让我们来看看上海交大门户网站是如何基于(c#),和sql、javascript来实现的。 动态网站越来越多使用三层架构来设计网站 三层架构分为三层表示层、业务逻辑层、数据访问层。 表现层就是使用者所看到的页面呈现的内容,它主要与使用者进行交互,接收使用者的输入并将服务器端传来的数据呈现给使用者。业务逻辑层负责对数据的逻辑处理,是整个网站核心部分,它要接收来自浏览器端的请求并把请求传送给数据层,待数据层处理后,它再把请求的处理结果发送给浏览器端。数据访问层是对数据库的直接操作,提供数据给业务逻辑层,如提供存储数据的操作结果、返回数据的检索结果等
4、。使用三层架构开发成本高,但是后期维护方便、成本低,能很方便地用新的实现来替代原来的实现,结构更加明确。 1主体界面 首先来看交大门户网站主体界面如何基于(c#)来实现,交大门户网站的构成,含logo,导航栏,图片展示区,主体内容模块,版权声明区。这些主要模块的排版是由DIV+CSS来实现的。 DIV+CSS是网页设计标准,它是一种网页布局方法。传统的表格(table)布局简单,但是不易更新、代码冗余、服务器压力大,且网页上的对象定位在不同的单元格上。与表格布局定位的方式不同,DIV+CSS能放在页面的任意位置、层里面也可以插入任何网页元素,能实现网页页面内容与表现相分离。 交大门户网站div
5、分块情况Logo和导航栏放在一个div块中,导航栏的下拉菜单和图片展示区放一个div块,主体内容模块和版权声明区放一个div块。这三个div块是最外的div块,也就是最大的div分块情况,这三个大div块中每个还有更细分的div块,例如主体内容模块和版权声明区这个div块又分为主体内容模块div块和版权声明div块。 网站使用DIV+CSS布局使代码非常简洁,css文件可以被用在网站的任何一个页面,而如果用table修改一些页面是很麻烦的。要是一个门户网站的话,需手动改很多页面,但是使用css+div布局则省时省力一些,只要修改css中的部分代码即可。因此使用DIV+CSS布局的网页比使用Ta
6、ble布局的页面,简化了很多页面代码,用户浏览访问的速度也快了很多,也提高了网站的用户体验。 为让网站有一个比较统一的风格,可以用到.net中的模板,将不需要改变的部分设置成不可编辑区域,将需改变的部分设置成可编辑区域,可以很方便地将模板放到子页面中使用。如点击“师资师资简介”,可以发现子页面的整个框架基本没变,只是主体内容和一些页眉页脚的一些细节发生了变化,这样,我们就能把首页的框架设为模板,设置不需改变的部分,如页眉的logo及以上部分,为不可编辑部分,将主体内容和页尾部分设置为可编辑区域,这样就不必再重新设置子页面的整个排版。 2 Javascript的结合 3数据库 数据库指的是数据集
7、合,它根据一些数据模型组合并存放在二级存储器中。有这些特点尽量不重复,用最优的方式服务于特定组织的应用,它的数据结构和应用程序是相独立的,由统一软件管理和控制数据的增加、删除、修改和查询功能。我们可以使用服务器的SQL数据库来管理动态网站的数据,并完成增加,删除,修改和查询数据的工作。 在门户网站的这个页面,页面右上角有输入框,可以输入要查询的内容进行信息查询,例如输入奖学金,会出现一系列此网站中有关奖学金的文章,这调用了数据库中存储的数据,是对数据库中数据按关键字“奖学金”进行筛选之后得出的结果。 在网站中数据库有个很重要的功能就是存储用户的信息,当用户需要登录个人账户时,服务器端实时辨别用
8、户是否正确输入用户名和密码,根据用户的请求进行信息处理,请求通过则能及时调用相关数据。使用.net的服务器控件,让它和数据库相连接,然后在.cs中写调用或其他处理数据的代码就可以进行数据的调用等功能。 数据库还要有对一些比较特殊信息的存储的能力,例如,一些文件如PDF、SRT格式的,或是像上海交大虚拟校园中三维地图的存储。 综上,.net构建动态网站的架构含有前台页面(aspx)、后台代码(aspx.cs)和数据库。前台页面中有各模块;后台代码中包括编写模块程序、编写数据库程序、编写窗体事件等;数据库则负责数据表的设计、建设存储过程等。 4其他隐含技术 除了以上主要的技术,还有一些隐含的技术。
9、 (1)图像方面,为了整个网站的和谐美观,需要使用ps、ai等图像处理软件对图像进行处理,配色要搭配得当,特别是logo的制作尤为突出。上海交通大学网站的配色以深色为主,背景色是灰色,页首是深红,下面主体内容模块青色、蓝色、灰色、红色和橙色也搭配得当,底色上的字均为白色,在底色的映衬下很清晰,又不单调。 (2)动画方面,有些网页的页首或其他部分需要动画,这时候flash动画的制作能力也不可忽视了。 (3)将技术变成艺术,将产品便成作品,触类旁通,精益求精,才是最高的境界。因此,还需要有好的审美能力,思辨能力,以及一定的网络知识和技术。 上海交大的门户网站的设计是比较合理的,门户网站不需要太多具体内容在上面,最重要的是有各个次重要的子网页的链接,这点上海交大门户网站做得挺好的;变换的几张图片也比较吸引人,页面的色彩搭配、整体上下结构的布局构图让人看起来舒心。一些子网页的设计别出风格,如虚拟校园,很有自己的特点。另外使用Visual Studio 2018(C#)和SQL Server 2000软件也能基本实现以上功能。
链接地址:https://www.31doc.com/p-1824173.html