化学实验教学中心网站建设与页面设计优化策略

摘　要：旨在探讨利用ASP技术，结合Dreamweaver软件建设高校化学实验教学中心网站。针对高校化学实验教学中心网站建站宗旨，对“中心“网页设计采取优化策略，将更有利于高校化学实验的教学与管理，更好地为高校化学专业的师生提供网上服务。

关键词：化学实验教学中心；网站建设；网页设计；ASP；优化策略
1 前言
　　国家教育部近年来一直开展高等学校国家级实验教学示范中心建设和评审工作，要求实验教学中心除了具有先进的教育理念和实验教学观念，先进的实验教学体系、内容和方法，先进的实验教学队伍建设模式和组织结构等外部条件，还要求具有先进的运行机制和管理方式，就是建立网络化的实验教学和实验室管理信息平台，实现网上辅助教学和网络化、智能化管理。所以，建设并优化实验教学中心网站，将网络信息化管理应用于化学实验的教学管理中也是势在必行，高校化学实验教学中心（以下简称“中心“）网站建设的目的是服务于化学实验教育，建立了化学实验教育教学资源数据库管理，将各种化学实验室课程资料等组织起来，方便师生使用，以便资源共享。
2“中心”网站建设
2.1建站宗旨
　　“中心”网站围绕着化学实验教学的宗旨，网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现实验教学中心的勃勃生气，静态主页方式介绍中心风采、优点特色、信息发布，对于仪器设备药品管理、教学交流等各项管理项目，就得利用ＡＳＰ与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。
2.2系统分析与内容规划
　　“化学实验教学中心”基于学校校园网，依托学校实验室与实验教学网，建立化学信息学实验室，将教学、管理和设备等资源上网并统一由化学实验信息中心管理，根据“中心”网站的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站的模块作如下规划：
　　1．选用优质特色教学课件资源：如：“基础化学实验”、“综合化学实验”等本校教师自己制作和相当数量国内外的化学教学课件。
　　2．设计综合化学实验信息平台：建立了大学化学实验信息化平台，服务基础的中学化学网站。
　　3．设计师生互动交流信息空间：各课程大纲、主持人情况、教学录像，网上选课，“中心”规章制度等内容，还设置了实验论坛，提供了师生互动的园地，增加了师生课外接触机会。
　　4． 建设文献信息资源学科导航：老师们在自己实验室、同学们在化学信息学实验室可以方便查阅美国“化学文摘”、美国化学会、英国化学会出版的化学期刊等科技文献。
　　5．开设辅助教学实践实验课程：化学信息学实验室辅助《化工制图》、《计算化学》、《化学文献》和大型化工设备的模拟开车试验等开设了实践课程。
　　6．构建大型仪器管理信息系统：建立大型仪器数据库管理系统，并且将仪器设备全部上网对校内开放，实行仪器设备实行网上登记、考核和管理。
2.3 数据库框架建构
　　用ASP 编写前台应用程序，用Microsoft Access 数据库作为后台数据库。
　　采用Microsoft Access建立数据库比较方便，拟建立后缀为.mdb库文件，包含如下几个表文件：用户注册信息表、留言信息表、药品管理信息表、仪器管理信息表、新闻动态信息库、信息通告信息库、教学交流论坛等。
　　在ASP 的访问以上的Web 数据库的关键是建立与数据库的连接，正确建立与数据库的连接，更好地实现对数据库数据的查询、添加、删除、及修改等操作。基于ASP 的ACCESS 数据库连接方法，使用ADO 访问数据库具有快捷方便的特点，同时又提高了后台数据库访问效率适合于开发各种动态网站。
3 网页优化设计
3.1 软件选用
　　主要以ASP技术为主，从基本的网页结构设计开始，通过Dreamweaver可视化设计功能的辅助，架构化学实验教学中心网站。
　　 ASP （Active Server Pages，动态服务器网页）主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的执行结果，并且将这ASP执行的结果直接在浏览器中浏览，利用ASP，可以方便、快捷地创建出动态、交互的Web服务器端应用程序。任何你可以放在HTML中的东西--Java applets，闪烁字符串，客户端脚本，客户端ActiveX控件等等都可以放在ASP中。
　　Dreamweaver 是一套功能相当强大的网页编辑软件，提供各种可视化的网页编辑功能，从单一的HTML 静态网页，到复杂的ASP动态网页的数据库系统设计，均能够以鼠标拖拽的方式迅速完成网页设计工作。具备动态服务器网页的可视化设置功能，同时对各类平台与服务器语言提供足够的支持，无论是PHP、JSP、ASP，还是，均能够通过设置，利用Dreamweaver的单一接口，设计不同类型的动态服务器网页。
　　Fireworks 软件或Photoshop为图像编辑工具可选软件，用于设计、制作、编辑网络图像，使网页图片起到美化的作用。
　　Flash 软件是制作动画的软件，主要适用于网络传输的矢量动画，使网页更加活泼生动。
　　Dreamweaver 与Flash 、Firework 并称为Adobe Macromedia 的网页制作三剑客，用于“中心”网页设计制作，会得心应手。
3.2 网页设计优化策略
3.2.1 栏目与板块编排
　　构建“中心”网站首先要列出提纲，才能主题明确、层次清晰。 “中心”网站的菜单栏目标题确定为“中心简介”、“实验教学”、“师资队伍”、“人才培养”、“教研成果”、“实验室管理”、“规章制度”、“课件展示”、“辐射作用”、“师生交流”等。将收集到的资料内容进行合理编排，明确显示“中心”网站的教学与管理的主体内容。尽可能删除那些与“中心”主题无关的栏目；尽可能将网站内最有价值的内容列在栏目上；尽可能以访问者角度来编排栏目；而辅助内容如站点简介、版权信息等大可不必放主栏目里，以免冲淡主题。
　　“中心”网站的板块的编排设置也要合理安排与划分：各板块的内容要围绕“中心”站点主题，既要相互关联又有相对独立性。首页板块包括：“中心”网页LOGO，标题菜单条、用户注册登录框、最新大型仪器图片展示（动画）、新闻动态、信息通告、最新药品管理表格，最新仪器管理表格、最新留言、最新注册用户等信息。
3.2.2 目录与链接设立
　　“中心”网站的目录结构对于站点维护， 内容的扩充和移植影响很大。首先，不要将所有文件都存放在根目录下。这样就容易造成文件管理混乱，上传速度变慢。其次，按栏目内容建立子目录。经常更新的内容建立独立的子目录；相关性强、不需要经常更新的栏目，合并放在一个统一的子目录；所有程序都存放在特定的目录下；所有提供下载的内容放在一个目录中，这样便于维护管理。再次，在每个主目录下都建立独立的images目录。目录层次不可太深，一般不超过3层；不使用中文目录；不使用过长的目录；尽量使用意义明确英文或汉语拼音的目录，以便于记忆和管理。
　　“中心”网站的链接结构的设计，直接影响到网站版面的布局。一般建立网站的链接结构有两种基本方式：1)树状链接结构(一对一) ，首页链接指向一级页面，一级页面链接指向二级页面。2)星状链接结构(一对多)，每个页面相互之间都有链接。为了达到最好的效果，我们将“中心”网页的首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。这样使得浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。
3.2.3 叠加优化措施
　　“中心“网站做到更加优秀，展现给用户更加条理清晰、内容丰富、有独特的资源、美观大方、提供良好的导航帮助且有一定的安全性的网站，需要采取进一步的优化措施。
　　1. 内容的优化：绝大多数访问者会大致浏览一下标题内容，而不会仔细阅览，所以必须优化内容，用尽量少的词语表达尽量多的信息，使之适合快速阅读。避免冗余、过期和未完成的内容。
　　2. 导航的优化：应该显示站点最重要的内容，以便访问者看到顶级类别时对找到的有很好的感觉；在显著的位置放置，最好在紧邻页面主体的正上方，将条目分组，将相似的条目放在一起。
　　3. 适当调用CSS：运用样式表单CSS来对页面元素进行布置，可以大大地减少HTML代码。Dreamweaver中样式表的加入方法有多种，一是选定对象；二是从样式面板中为对象选择样式；三是在标签选择器上的某标签上单击右键选择样式。由于第一种方法会在HTML 代码中产生一个“span”标签，如果过多地使用必定会使网页源文件大大增肥。所以应采用第二、第三种方法。
　　4. 代码的规范化：编写代码的规范化，决定着程序的可读性。代码编写要层次分明，好的代码编写者不但注释清晰，而且代码层次分明，让人一目了然。在网页设计中编写代码有它自己的专业性。用注释性文字，良好的编程者平时应该养成多加注释的好习惯，这样有助于提高程序的编写能力和分析查找其中的错误，也有利于将来回头查找和修改程序。在Dreamweaver中，在“Commands”菜单下选择“Clean up HTML”，即可进行设置对网页冗余代码进行清除。
　　5. 合理运用表格：浏览器要等待整个表格的内容全部到达客户端，才能显示这个表格的内容。在Dreamweaver中用表格来进行定位，无疑加大浏览器的负担。为此要尽可能地避免表格的层层相套，并且尽量将大表格分解成若干小表格。
　　6. 标记图像大小：在HTML代码中，最好标记出图像的显示高度和宽度，在下载页面时，浏览器会按这个高度和宽度留出图像的位置，在图像下载完毕之前及时地显示其周围的文字内容。否则，只能等待图像全部下载完毕后，才显示图像及其周围的其他文字信息，无疑造成客户的等待。
　　7. 使用Javascript：能用HTML和Javascript完成的事情，最好不用Java和ActiveX来做。它比同样大小的Java /ActiveX或动态GIF文件要节省更多的下载时间。
　　8. 减少服务器负担：在交互网页中，用户常用表单向服务器提交数据，服务器进行数据处理后再返回浏览器，这个过程很费时。Dreamweaver对用户所提交的表单的合法性验证，若在浏览器端进行，既减轻了服务器的负担，又让浏览者少一份等待。方法：选中表单，打开“Behaviors”面板，点击“+”号选“Validate Form”，进行设置即可。这个验证过程是使用JavaScript在浏览器端作验证。值得注意的是，在Dreamweaver里进行上述操作时，它会把这段JavaScript代码放在网页头部，浏览器要先下载这段代码才下载其他页面元素，这样无疑增加了页面的完全显示时间。因此，最好在Dreamweaver中打开代码编辑器，把这段脚本程序剪贴到源代码的最后边，让其在最后下载。
　　9. 使用著名的插件：在网页中加入背景音乐会降低网页下载到客户端的速度。如果加入背景音乐，那么文件最好使用M ID I格式，而不用WAV格式。
4 总结
　　化学实验教学中心网站的建设与网页优化，建立有利于激励学生学习和提高学生能力的有效管理机制，创造学生自主实验、个性化学习的实验环境。建立实验教学的科学评价机制，引导教师积极改革创新。改变了传统的在课堂中通过面对面方式获取知识与信息教学模式，增加师生获取信息的手段，获取的信息量不断增加，并且不受时间、地点与人员的限制。在Internet上的用户可以通过上网学习新知识。学生可以自学，师生间可以通过网络提问答疑，从而实现了教师与学生的在线交互式教学。同时，实验中心网站的建设与优化，使得在Internet上的交互式教学可以综合多媒体信息，使教学生动活泼，更易于为学生所接受。
参考文献：
. 河北建筑工程学院学报，2007,25（3）：133-135.