专业教学网页的设计及其实现.doc

专业培训教育网页的设计摘 要在如今，互联网对于我们来说已经不再是新鲜的事物了，大多数的企业都建立了自己的网站。随着互联网的快速发展，网站已成为人们生活的一部分，也成了我们生活中必不可少的元素，于是各种各样的网站便如雨后春笋般地出现。在商业网站越来越多的今天，像学校网站、慈善网站、企业网站等社会公益网站也不能忽视其发展，于是我就是以网页设计教学辅助为主题制作了一个网页教学网站,供大家参考。同时在internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。internet上发布信息主要是通过网站来实现的，获取信息也是要在internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。建设一个教学网站可以有更的多的资源供大家借鉴。本文就是教学网站的建设，也随着计算机网络的发展，自己动手制作网站已经成为一种时尚，本篇主要通过制作一个教学网站的实例，来对网站的规划、制作过程做了介绍，并且着重论述了制作网站的一些技术。在网站实现方面，使用了当前比较流行的dreamweaver8.0、fireworks、flash、photoshop等软件，通过其与介绍了小型网站的建设。关键词：网站；超文本标记语言；jsp技术；级联样式表the design of web pages for instructionabstract today at the internet for us is no longer a novelty, and the majority of enterprises have set up their own websites. with the rapid development of internet, web has become a part of life, our life has become an essential element, so various websites such as mushrooming appear. at a growing number of commercial web today, such as school website, a charity website, corporate website and other social welfare website also can not ignore its development, so i am a web design teaching aids for the subject produced a teaching web pages for reference. at the same time, the rapid development of internet today, the internet has become peoples express acquisition, distribution and transmission of an important channel for information, which people at the political, economic, and other aspects of life play an important role. published on internet information mainly through the implementation of the web to obtain information also to internet sea in accordance with the search method must be required to download information from the web on down. therefore the construction of web applications in the internet on the status of obvious, it has become the government, enterprises and institutions in the construction of information an important part of, so much attention. to build a teaching website can have many more resources for the u.s. learn from. this article is the teaching website building, but also with the development of computer networks, making do-it-yourself website has become a fashion, this primarily through the web to produce a teaching examples to website planning, production process to do the introduction and focus on discusses some of the technical web production. website at implementation, the use of the current relatively popular dreamweaver8.0, fireworks, flash, photoshop and other software, through its website and introduce a small building.key words: website; html; jsp; css目 录第一章前言11.1远程教学系统发展的概况11.2远程教学系统建设现状21.3远程教学系统发展中出现的问题及原因21.4远程教学系统的发展趋势21.5本论文的组织结构3第二章教学网页的需求分析32.1 教学网站介绍32.2 课题的目的和意义32.3网页设计的要点32.3.1确定网站的整体风格32.3.2网页色彩的搭配42.4 开发模式、工具及环境42.4.1 开发工具42.4.2 开发环境要运行本系统,须提供如下环境52.4.3 网站发展背景5第三章 网页设计与分析63.1系统分析63.1.1系统建设目标63.1.2网站的功能需求63.1.3系统用户类和特性73.1.4性能需求73.1.5安全性需求83.2 教学网站的模块介绍83.3建站目的83.4.网站实现功能93.5系统编程环境93.6系统程序设计103.7系统程序测试10第四章 网页的总体规划124.1制作网页的一般步骤124.2网页包括的元素124.3网页的制作及实现134.4页制作注意事项13第五章 网页的测试145.1教学网站首页145.2资源下载页面155.3教学相册165.4教学实例175.5背景音乐185.6访客统计185.7系统待改进之处18总 结19参考文献20附 录21第一章前言在网络发展得如此迅速的情况下，大都高校的教师都已经采用课件的形式教学，改变了传统的教学方式，例如用powerpoint或其他的教学软件来丰富课堂，这样大大的提高了课堂教学的效率，也使课堂气氛得到了活跃，这样的教学方式既方便老师，也使学生以最大的学校效率去学习1。尽管这些措施在课堂内带来了很大的方便与好处，但对课下却没什么帮助。课下的复习对于学习来说也是非常关键的，因而在网络发展得如此发达的形势下，对课下学习进行改革是势在必行。建立远程教学系统是教学信息化，网络化的最佳途径，也是当前教学辅助手段的大势所趋2。若解决了如今远程教学系统中既能满足群体教学，又能解决个性交互需要，此举的对于教育事业，对于国家来说，其意义将是非常巨大的。从教学模式来看，建设出好的远程教学系统能让教学充分体现“以学生为主，教师为辅”的现代教学模式，彻底改变了传统教学中“以课堂教学为中心，以书本为中心，以教师为中心”2的“三中心”教学模式。从学生的学习来看，建设出好的远程教学系统将是学生课堂学习强有力的补充，利用网站，教师发布课程学习资料、布置作业、进行网上答疑，学生和老师之间、学生和学生之间可使用电子邮件、bbs、讨论讨论等进行在线或非在线信息交流3，学生之间亦可以相互讨论。从学生和老师的交流来看，建设出好的远程教学系统将为学生和老师在情感交流方面架起情感的桥梁。利用现代的信息技术手段，建设好的远程教学系统，推进国家的教育事业，此任务是教育以及国家对于网络建设工作着来说是迫不及待的。1.1远程教学系统发展的概况近年来，国家大力推行高校教育改革，现代教育技术、现代教育手段的应用与推广已是变革中的重中之重。现代教育技术作为国家推行素质教育的重要手段，具体在计算机使用方面，已体现全面要求大学生必须通过等级考试，初步掌握计算机的使用，而网络又是现代教育技术应用的核心。在这样形势下，很多远程教学系统开始涌现，给传统教学带来了一次强力冲击，新的一轮教学改革已经展开。远程教学系统作为一个学习的平台，具有信息量大、交换便捷、易于互动等优点，它的应用多少与好坏直接展示了教育提升的水平和档次。但现如今的远程教学系统并没能充分利用这一点。4远程教学系统一般有教师个人远程教学系统和单位的远程教学系统（例如专业远程教学系统），教师个人远程教学系统大都是自己建设或找人建立起来的；单位的远程教学系统是单位组织人员建立起来的。无论是哪种方式建立起来的，一般都没有对如何利用网络或者说网站来达到教学互动交流这个问题。这样就造成了远程教学系统的发展良莠不齐的状况，且大部分远程教学系统的利用效果都不尽人意，甚至有些学生都不知道它们的存在。远程教学系统的建设对于教育事业方面的需要还远远不能满足，我国的教育机构的庞大以及网络的发展是远程教学系统建设程度不能满足需要的主要原因。而且远程教学系统到如今，国内还没有一个好的评价体系5,6。很多远程教学系统都是的用文章发布系统加留言板建设而成，有的可能会加上个论坛来加深交流。文章发布系统一般作为课件发布用，供学生下载课件用，而留言板作为答疑工具来用，当学生有疑问时可以发帖向老师提问。论坛的作用和留言板差不多。这种网站在一定程度上满足了远程教学系统的要求，但这远远不够。在交流手段上，老师会在远程教学系统上发布自己的电子邮件，以供学生向自己提问，以解决学生自己独立解决不了的问题7。但这一切都必须建立在学生和老师的计算机水平的基础上，这样操作都需要他们对计算机操作很熟悉才行，这也是远程教学系统应用推广难的一个原因。1.2远程教学系统建设现状远程教学系统以个人远程教学系统居多，且很多都只是以信息发布系统建立起来的课件发布系统而已，还远远不符合教学的要求。在很多高校都是教务处建立的，这些远程教学系统在功能上就有些偏了，不是很符合教学的要求。远程教学系统的建设现状整体来说还很差，无论是从规模还是质量上都还不能承担教学中的课下学习环节的补充。81.3远程教学系统发展中出现的问题及原因出现的问题有很多，远程教学系统到现在为止发展不是很好。这主要表现在两个方面：（1）教学内容在远程教学系统上的组织形式没能让它们发挥他们应有的作用。例如，在课件上不应该只是课件下载而已，而是一个知识库，根据知识点组织起来的知识库，这个知识库也不是简单数字化的数据库，而是已经把各个知识点关联起来的知识库。（2）远程教学系统在交互设计上陷入了瓶颈。在交互设计上，国内很多远程教学系统都只是停留在留言板答疑的水平上，并没有把 web 2.0 的理念融进去。出现这些问题的原因：很多教学单位或个人并没有真正把远程教学系统重视起来，而是简单的把它当作一种可有可无的教学手段，这样的想法到了网站设计者那，当然也就不会设计出多好的远程教学系统来了。教师和老师的计算机操作水平也是一个制约因素，例如一个小学生可能他会网上聊天，但不一定会在网上看电子书。这些因素在远程教学系统的设计上，是不能忽略的。当然啦，这也是和当今的网络发展水平密切相关的，试想，给一个没有网络的山村小学建设远程教学系统，这就完全没有必要，建了也是浪费。还有一个原因是，中国在教育远程教学系统上缺乏一种评价策略。目前，我国相关的研究也只局限于介绍评价方法、评价实施过程以及如何量化调查结果等。至于具体的评价要素、评价指标 体系可以说还是空白，而这些在国外已经开始建设这一评价体系9。即使在美国等远程教育发展较完善的国家，通行的认证原则也是一些定性的指导思想10，进行有效性评价指标体系的研究就是为了促进远程教学系统不断改进质量，为公众提供满意的教育服务。1.4远程教学系统的发展趋势web 2.0 已经烧到了世界的各个角落，所以以后的远程教学系统一定是以 web 2.0 理念为核心的网站，即将网站用户为核心的网站，而不是以网站内容为核心。这对于传统网站设计是一个挑战，也是一个机遇，一个发展方向。按照 web 2.0 理念要求，远程教学系统要在各个方面进行改善，进而达到通过社区达到教学辅助的效果。1.5本论文的组织结构本论文将先从系统分析开始，然后到系统实现部分，然后是结论。在系统分析中的将会介绍系统需求分析，详细描述系统的功能需求、性能需求、安全需求以及界面需求，描述系统输入与系统输出。系统实现部分将介绍系统流程框架、子系统划分、系统业务逻辑、数据库设计、程序设计以及程序测试等内容。在结论中，展示系统的核心界面的最终效果、介绍论文的主要工作以及系统的待改进之处第二章教学网页的需求分析2.1 教学网站介绍网站设计教学辅助网站是一个功能齐全的网站，在该网站上能下载到一些教学实例、教学技巧、图片等资源，也能了解一些学习方法、一些特效代码的使用和留言簿的制作，也可以根据该网站自己制作一个类似的网站，有学的过程中能从中学到不少的东西。2.2 课题的目的和意义我们是21世纪的新青年，如今的社会不再需要那些没有社会经验的大学生了，为了更好的适应社会的需要，加强对自己所学知识的运用，我们用课余的时间为同学们做了一个教学网站，供同学借鉴和参考，在这个教学网站可以下载到一些常用的资源 。2.3网页设计的要点 2.3.1确定网站的整体风格 在这里，我提供给大家一些参考经验： （1）将你的标志logo，尽可能的放在每个页面上最突出的位置。 （2）突出你的标准色彩。（3）总结一句能反映贵站精髓的宣传标语！ （4）相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！ 2.3.2网页色彩的搭配 （1）用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。 （2）用两种色彩。先选定一种色彩，然后选择它的对比色。 （3）用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区： （1）不要将所有颜色都用到，尽量控制在三至五种色彩以内。 （2）背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。2.4 开发模式、工具及环境2.4.1 开发工具（1）dreamweaver网页制作工具dreamweaver是由macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件flash，专业网页图像设计软件fireworks，并称为“网页三剑客”；2005年4月18日，全球最大的图像编辑软件供应商adobe宣布，以换股方式收购软件公司macromedia，macromedia是著名的网页设计软件dreamweaver及flash的供应商。据悉，此项交易涉及金额高达34亿美元。根据双方达成的协议，macromedia股东将以1：0.69的比例获得adobe的普通股。自此开始，dreamweaver开始属于adobe设计软件系列。dreamweaver、flash以及在dreamweaver之后推出的针对专业网页图像设计的fireworks，三者被macromedia公司称为dreamteam(梦之队)，足见市场的反响和macromedia公司对它们的自信。说到dreamweaver我们应该了解一下网页编辑器的发展过程，随着互联网(internet)的家喻户晓，html技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点11。 （2） photoshop图片处理软件photoshop的主要设计师thomas knoll的爸爸glenn knoll是密歇根大学教授，同时也是一个摄影爱好者，他家地下室是一个暗房。他两个儿子thomas和john从小就跟着爸爸玩暗房，但john似乎对当时刚刚开始发行的个人电脑更感兴趣。此后thomas也迷上的个人电脑，并在1987年买一台苹果电脑（mac plus）用来帮助他的博士论文。thomas发现当时的苹果电脑无法显示带灰度的黑白图像，因此他自己写了一个程序display。而他兄弟（也可能是哥哥）john这时在星球大战导演lucas的电影特殊效果制作公司industry light magic工作，对thomas的程序很感兴趣。两兄弟在此后的一年多把display不断修改为功能更为强大的图像编辑程序，经过多次改名后，在一个展会上他们接受一个参展观众建议把程序改名为photoshop。此时的display/photoshop已经有level，色彩平衡，饱和度等调整。此外john写了一些程序后来成为插件（plug-in）的基础。12 他们第一个商业成功是把photoshop交给一个扫描仪公司搭配卖，名字叫做barneyscan xp，版本是0.87。与此同时john继续在找其他买家，包括supermac和aldus都没有成功。最终他们找到了adobe的russell brown，adobe的艺术总监。russell brown在此时已经在研究是否考虑另外一家公司letraset的colorstudio图像编辑程序。看过photoshop以后他认为knoll兄弟的程序更有前途。在1988年7月他们口头决定合作，而真正的法律合同到次年4月才完成。合同里面的一个关键词是adobe获取photoshop“license to distribute”，就是获权发行而不是买断所有版权。这对后来knoll兄弟发大财奠定了基础。经过thomas和其他adobe工程师的努力，photoshop版本1.0.7于1990年2月正式发行。john knoll也参与了一些插件的开发。第一个版本只有一个800kb的软盘（mac）。在90年代初美国的印刷工业发生了比较大的变化，印前（pre-press）电脑化开始普及。photoshop在版本2.0增加的cymk功能使得印刷厂开始把分色任务交给用户，一个新的行业桌上印刷（desktop publishingdtp)由此产生。132.4.2 开发环境要运行本系统,须提供如下环境（1）硬件要求 cpu：pentium733或以上之兼容机；内存：128mb或以上容量；显卡：16mb或以上显存之agp接口绘图卡；硬盘：至少100mb剩余空间。网卡和网络适配器（2）软件要求操作系统：microsoft windows 2000/xp/2003简体中文版;开发工具：dreamweaver8.0文档工具：microsoft word 2000/xp/2003简体中文版；图片工具： adobe photoshop 6.0/7.0/cs简体中文版；2.4.3 网站发展背景信息飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。internet上发布信息主要是通过网站来实现的，获取信息也是要在internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位、个人信息化建设中的重要组成部分，从而倍受人们的重视。在当今社会网民数量不段增长，网络也就被人们所接受，人们从最初的欣赏他人的网站，一直发展到自己制作自己的网站，如今互联网上的网站如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。每个人都有发挥个人才能，挥洒自己个性的网上伊甸园。网站设计是当代大学生发挥自己才能的主要途径，它不紧是一种发表自己信息和个性的工具，还是一种时尚。我所制作的网站是对教学信息的收集，可以提供给人们一些基本教学方法、和资源。14第三章 网页设计与分析3.1系统分析系统分析是系统开发前对需求的描述，主要是要收集功能需求以及性能需求，这两方面决定系统的建设规模与性能。3.1.1系统建设目标利用计算机网络实现内部和远程教学，创设基于网络的学习环境，师生共同建立一个突破时间、地域限制，由以教为主变为以学为主的教学平台，探索学科教学与信息技术有机结合的途径与模式。系统是b/s模式。系统最后得到的结果是给学校的师生提供一个平台，补充教学环节的薄弱，增强课下复习的效率。系统分为前台和后台。前台供老师和学生使用，后台供管理员使用。3.1.2网站的功能需求远程教学系统要求既能满足学生的学，又能满足教师的教，既能满足学生自学的需要，又可供教师进行备课及课堂教学参考。本系统将利用互联网的优势，将为教学的课下学习进行改革。在教学上能实现：首先以简洁美观的形式向学生提供学习信息，提供有关课程的练习题库及作答工具；第二，向教师提供方便的课件上传和教学的相关资料；第三，向师生提供便利的网上学习和讨论的交互式环境；最后为师生提供方便的资料查询与检索功能。基于以上考虑，本系统将实现以下几个主要部分功能：（1）学习功能该部分主要是针对学生的，学生选择各科课程的电子教案进行学习，了解其学习方面的通知，习题作业通知，教师的答疑情况。开设电子公告板bbs，组织热点讨论，引导学生进行网上交流，引导学生对有关问题进行思考判断，进而引导学生主动参与学校的网站建设，使网络成为教学的另一个战场。有些远程教学系统还会提供网上测试或者说网上考试的功能，以辅助学生在学习时，能及时检测自己的学习效果，此网上考试系统，一般题目都是固定，也有些能自动组题形成试卷，即远程教学系统上设有一个试题题库，当学生选择此功能，系统能随机抽取一部分试题组成一份试卷，方便学生对自己的知识掌握程度的检测。本系统在开发中因受到开发时间和技术的限制，暂时不实现自动组题考试功能。15对于学习功能，网站的栏目一般设置成：学习资料下载栏目，作业公告栏目，网站学习公告栏目，师生交流（论坛，留言板或其他）等栏目，有些网站的栏目会多于这些。学习资料上传下载栏目：此功能顾名思义就是给学生提供学习资料的，以文件的形式。但以文件的形式组织学习资料，在内容上对于学生来说，有时并不是很方便，但现在也没有什么好的解决的办法，期待有新的解决办法来解决此问题。在资料查找方面，文件资料在网站站内搜索一般都只能做到以文件名到网站数据库中搜索，并不能查询到文件中的内容，给学生进行文件查找带来很大的麻烦，在得到搜索的结果的时候，往往发现根本不是自己想要内容。网站学习公告栏目：此功能很多远程教学系统都具备，它提供学习方面通知，例如考试通知或者是停课通知什么的，让学生在第一时间了解到课程动态，避免老师亲自去找学生去通知。此功能也是只能由老师发布，学生与老师均没有权限发布。师生教学交流栏目：此栏目比较复杂，这和各个远程教学系统设计者对教学交互的理解有关，当然也有远程教学系统把它当成一个很简单的功能来实现，比如只建一个留言板或者小论坛来充数，很明显一个留言板或者一个小论坛是不能实现教学中的交流的。有的远程教学系统，将网络聊天室建立起来，辅助教学中的师生交流，这种方式给教学的双方有一种面对面的感觉，这对于教学交流确实很有用。在教学交流方面，也有一些网站是把电子邮件或者qq，msn之类工具加了进去，这也能解决一定的问题，对于扩大交流也起到一定的作用。但教学交往不是那么简单的，它涉及很多方面的问题。163.1.3系统用户类和特性用户类型：接口：无。学生：学生为主要的用户，是网站的主要受服务者。教师：教师用户在此网站的主要作用是辅助学生的学习。网站管理员。3.1.4性能需求网站的性能对于使用者是非常重要的，它涉及到的方面也很多，本系统因功能为教与学服务，所以它所需的性能需求暂时不用考虑大型网站的架构，也不必使用系统框架优化，基于这些考虑，以下为本系统的详细性能需求：相互合作的用户数量：10。系统支持的并发操作数量：200。响应时间：5 秒内。磁盘空间：3g （因教学资料占比较大的存储空间，如不上传课程资料，此项可以不受限制）。数据库中表的最大行数：无限制，但需求磁盘空间支持。3.1.5安全性需求安全需求主要有三个方面：一是防止数据库被注入；二是程序设计方面的漏洞，比如权限控制方面；三是上传漏洞，如被人上传了木马了什么的，后果不堪设想。sql 注入是非常危险的，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。新手最容易忽略的问题就是sql注入漏洞的问题。用nbsi 2.0对网上的网站扫描，就能发现部分网站存在sql注入漏洞，用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据。17因此在本系统中，将为每一个文件添加数据检验的代码，防止非法数据进入系统。上传漏洞是指上传者上传了一些非法的文件上去，导致系统被破坏。此方面的安全也是非常重要，在本系统中，首先要控制好上传权限，不能让非法用户进入上传页面，第二是控制好文件上传的类型，不能上传非合法类型的文件。183.2 教学网站的模块介绍网页设计教学辅助与实践网站，整个网站由7个部分构成，分别是(引导页、首页、资源下载、图片下载、教学方法、作者档案、在线留言)构成。首页是整个教学页面的一个简要介绍,资源下载页面主要是提供一些大家可以下载的教学资源,图片下载页面主要是提供各种类型的图片,教学方法主要是总结了自己在做完这个网站后的一点心得，在线留言是为了让大家在看了这个网站后有意见和建议的可以在此留言。3.3建站目的internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为internet上一种先进的，易于被人们所接受的信息检索手段，world wide web(简称www)发展十分迅速，成为目前世界上最大的信息资源宝库。据估计，目前internet上已有上千万个web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的web站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在internet中的广泛应用，web站点向用户提供的服务将越来越丰富，越来越人性化。因此网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。提高公司知名度，扩大公司规模。 3.4.网站实现功能给学生提供一个了解网页设计的平台，学生也可以及时的与站主交换意见，产生互动，站主也可以及时的进行更新与维护。前台学生系统功能：（1）学生可以浏览网站的一些基本的信息。（2）学生也可以查看公司的联系方式（3）学生可以随时发表自己的言论。 后台管理系统功能：（1）增加、修改、删除教学的新闻。（2）浏览删除最新教学信息。3.5系统编程环境（1）编程技术的选择：静态网页技术主要是使用 html，动态网页技术主要使用asp技术。html 是第一个通用的页面描述语言，任何一个成功的网站都离不开它，90年以来 html 就一直被用作www上的信息表示语言， 它遵循国际标准，常用的各种浏览器（如 ie，netscape 等）均可以对其进行很好的解释；html 可以跨平台使用，在 windows，unix 等环境中均可得到相同的效果；html 又具有简单易学的特点和强大的超媒体支持能力，易于构建复杂的超媒体信息网；html 还支持多种媒体种类，如gif，jpg，wav，au，avi，mov，mpg等，适合网络传输；html 的创造工具很多，如 frontpage， hotdog，dreamwerver 等，并可以根据需要加入javascript，javaapplet等，使 web 网页具有更好的交互性、生动性和灵活性。目前，制作动态型网页的技术已有很多，常见的有 cgi（common gateway interface）、 isapi（internet server application program interface）、asp（active server pages），jsp（java server pages），php等21。其中以asp技术应用最广泛，且相关网络资源多，有丰富的中文参考资料，开发工具比较成熟，能快速构建网络应用程序，所以很多远程教学系统的建设者都选用了该技术作为平台制作技术22。asp的主要特点有：（1）无需编译。asp脚本集成于 html 当中。容易生成，无需编译或连接即可直接解释执行，（2）易于生成。使用常规文本编辑器（如windows下的记事本），即可进行 asp页面的设计还可以使用可视化的集成编辑环境visual interdev。（3）独立于浏览器。asp脚本在服务器端解释执行，用户端只要使用可解释常规html 码的浏览器，即可浏览 asp所设计的主页。（4）面向对象。在asp脚本中可以方便地引用系统组件和asp的内置组件，还能通过定制 activex server component（activex服务器组件）来扩充功能。（5）与任务activex script语言兼容。除了可使用vbscript和javascript语言进行设计外， 还可通过plugin的方式，使用由第三方所提供的其它script语言。asp 页面需要 asp 脚本引擎的支持。当用户请求一个 html 页面时，web 服务器会把相应的 html 页面传送给用户的浏览器。但是用户请求的是 asp 页面时，web 服务器会先将相应的 asp 页面传递给脚本解释引擎，并生成一个 html页面，再将生成的 html 页面回传给用户的浏览器。在数据连接上，一般采用 asp+ado 技术，asp与 ado 技术结合实现同数据库的集成。ado 是一种操作 microsoft 所支持的数据库的方法，类似于在 vb 中的 dao（data access object，数据访问对象）和rdo（remote data object，远程数据对象）。在 asp 中，ado可以看作是一个服务器 组件（server component），简单地说，它是一系列的对象。ado 共定义了七种对象，应用这些功能强大的对象，即可轻松完成对数据库复杂的操作23,24。使用 ado 对象操作数据库，具体的步骤可以归纳为以下几步：创建数据库源、创建数据库链接、创建数据对象、操作数据库、关闭数据对象和链接25。基于 asp 以上的优点，本系统在开发中使用asp 技术开发。（2）编程环境：由于选择了 asp 技术开发此系统，编程环境选择 dreamweaver 8 ，系统环境为 win xp sp2 ， 服务器为 iis 5.0。图片编辑使用photoshop 9.0。3.6系统程序设计部分系统程序设计介绍：（1） 课程学习与课程教学设计：课程资料在本系统中，设计成与开课信息关联，首先要在系统添加了开课信息之后，才能添加课程资料，开课信息由管理员添加，课程资料信息由教师添加，学生可以下载。在本系统设计中，权限分配是这样的，老师只能添加自己所任教的课程的学习资料，没有任教的课程不能添加。学生只能下载与自己有关的课程的学习资料。（2） 上传程序设计：在此部分的程序设计成三个类：一为上传类，二进度信息类，三为文件信息类。上传信息类：doteyupload，包含子过程：public sub saveto(path)（保存信息子过程） ， public sub upload ()（上传子过程） ， private sub raise(message) （异常信息子过程） ， 方法：private function getboundary()（取边界值方法）， private function binarytostring(xbinary)（将二进制流转化成文本方法）， function stringtobinary(string)（字符到二进制转化方法），private function getfieldname(infostr)（返回表单名方法），private function getfilename(infostr)（返回文件名方法）。进度信息类的主要作用是统计上传进度信息，例如上传文件大小，当前已上传文件大小，已花时间，剩余时间等。文件信息类的主要作用是向客户端返回上传文件的各方面信息，例如文件名，路径等。（3） 答疑程序设计：此部分程序类似与留言板程序，在此系统中，每一个开课信息将有一个答疑区，是多版块的，不过这多版块是以课程为划分依据。一门课开课了，在前台就会有一个答疑区。在此模块，只允许学生发帖，老师只允许回复。（4） 讨论区程序设计：此部分程序类似于bbs，在此模块，学生、老师和管理员均可以发帖，但只有老师和管理员有管理帖子的权限。（5） 信息关联设计：此方面的关联主要是指学生详细信息关联，教师详细信息关联，课程详细信息关联，短信息发送关联，课程与学习资料关联，课程与答疑区关联这几方面。在各个显示名字的地方设置详细信息链接，在各个显示学生、教师信息的地方加上短信息发送的链接。（6） sql 注入检测设计：这是比较重要的一块，它是网站的安全防线。主要是使用在循环检查每一个输入数据，如果包含了非合法数据，即不允许操作。3.7系统程序测试测试主要针对数据完整性、权限检测、上传功能、讨论区版块这几部分进行测试，数据完整性，采用了构造特殊数据进行测试，也就是边界法。在这一部分的测试中，将很多数据检测脚本错误检查了出来，权限检测主要测试方法，分别以三种权限进入系统进行操作，查看是否有异常，这一部分工作将一部分非教师权限或者非学生权限检测了出来。上传功能检测是程序测试中的一重要部分，这部分工作将系统不能上传某些类型的文件不能上传的错误检测了出来，后来又发现此部分功能不稳定，最后才将此部分程序完全修改好。讨论区版块是程序中比较大的一块。对此部分程序进行测试的时候，发现此部分程序有对象释放不合理的问题出现，导致程序有时运行不出来的现象出现第四章 网页的总体规划4.1制作网页的一般步骤首先，你应该明确制作网页是为了干什么。比如，你是公司的职员，想通过网页来对公司进行广告宣传；再假设你正在做一个项目，想和外地的工程师通过网页讨论该项目。如果你要制作个人网页，那么你可能想通过个人网页在网上进行传播，从而展示自己，并和网友交朋友。这就是你的目的。我做这个企业网页的就是让每个企业把自己的产品展示给大家，让大家来评论交流，提出宝贵的意见，然后再加以改进，使得企业的产品更加满足消费者，还有企业网站就是企业的门面，所以我这次做这个网页就是为了给企业打广告，其次，组织好你的网页内容。试想，你把自己的照片和内容都堆在一起，别人将无法明白你想干什么，说不准，连你自己都糊涂了。如果组织得好，用户从你的网页中获取信息就容易得多。对于那些很重要的信息，用户只需要简单的操作就能得到。一般来说，组织好网页的关键是要对网页建立层次分明、条理清楚的结构图。脑子里有了这样一张结构图，就会对网页很明白，并且有助于制作网页。而后，要确定你的网页所具有的外观和特色，目的就是让用户被你的网页所吸引。如果你只是要把很多漂亮的画面堆在一起，而不管内容，那将没人看。应该让你的网页不仅漂亮，更重要的是实用。怎么把自己的照片和内容有机的结合到一起，这也正是你的网页特色所在。然后，开始制作网页。具体操作时，首先要创建个人站点，再充分利用dreamweaver的功能建立各个网页。最后，等网页做好了，就该发布站点了。站点发布后，为了保持站点的吸引力，要经常修改网页的内容（添加新的内容，更换已过时的图像等），就要更新和维护你的站点了。4.2网页包括的元素无论是初次领略internet风光的新手，还是经常上网冲浪的老手，在初次设计网页之前，都必须先认识一下构成网页的基本元素。只有这样，才能在真正的设计工作中得心应手，根据需要合理的组织和安排网页的内容，从而达到期望的目标。设计网页的目的主要是发布信息，因此，作为信息载体的文本和图像也就成了网页的基本组成部分，超级链接是web的核心，使它将万维网中无数的网页链接在一起，如果没有它，web就无从谈起，此外，表格、动画、音乐和交互表单等信息的组织、表现，以及交互元素在网页中也具有举足轻重的地位。（1）文本文本一直是人类最重要的信息载体和交流工具，网页中的信息也以文本为主，与图像相比，文字虽不如图像那样能够很快的引起浏览者的主意，但却能准确的表达消息的内容和含义，为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如文字、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容，此外，用户还可以在网页中设计各种各样的文字列表来清晰表达一系列项目，这些功能都给网页中的文本赋予了新的生命力。（2）图像图像在网页中具有提供信息，展示产品，装饰网页，表达企业文化的作用。用户可以在网页中使用gif、jpeg、png 3种图像文件格式，其中使用最广泛的是gif和jpeg两种格式。（3）超级链接超级链接技术可以说是万维网流行起来的最主要的原因，它是从一个网页指向另一个目的端的链接，例如指向另一个网页或相同网页上的不同位置，这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或本网页中的其他位置，其载体通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接时，其目的端将显示在web浏览器上，并根据目的端的类型以不同方式链接。例如，当指向一个avi文件的超级链接被单击后，该文件将在媒体播放软件中打开;如果是指向一个网页的超级链接，则该网页将显示在web浏览器上。（4）表格在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是还可以使用表格来精4.3网页的制作及实现我这次做的这个网站做的是一个静态的页面，所以在设计的过程中非常重视其中的布局，我运用dreamweaver8.0这个软件来制作框架，并用css进行页面的布局，并在网页中插入一些透明的flash,使网页能有更好的浏览效果。另外，在网页的制作过程中，我还考虑到了网站颜色的搭配，这是一个很重要的问题，好果网站的颜色搭配不好，会给使用者带来一种不好的感觉，这样便会影响网站的价值，也没达到我们设计网站的目的。在制作过程中，我多次与同学共同探讨，并虚心接受她们的建议，多次对网站的风格进行设置与改进。在网站风格设置上，我考虑到整个网站风格的统一，所以，界面虽然简单，却很清新，给人一种耳目一新的感觉。4.4页制作注意事项我在网站的设计过程中，总结了以下几点注意事项，现列举如下：（1）风格要统一，颜色搭配要协调，页面中的字体可通过链接css文件统一设置；（2）所有页面用表格来布局，用800600分辨率来设计网页；（3）页面中的图片要使用合理，尽量不要使用太大的图片，也不要使用过多图片；（4）各个页面之间的链接要合理有效；（5）疏密度。做到疏密有度，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。第五章 网页的测试网对站网页产品进行测试，检查产品是否存在缺陷、错误，检查代码缺陷及错误，是否能实现功能，是否能显示所要显示的东西等。网站首页显示内容正确，图片正常，超链接可以用，可以正常进行网页间的转换。网站包含了学院图片、教学实例、dreamweaver介绍。5.1教学网站首页主页包含了学院的图片，教学实例的超链接和dreamweaver的介绍，本页还增加了背景音乐和访客统计，时间的小部件，使网站跟清新简洁。运用div,script，js等来设计网站。 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。 不必为每一个 都加上类或 id，虽然这样做也有一定的好处。 可以对同一个 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差