专业教学网页的设计及其实现.docx
- 文档编号:25217790
- 上传时间:2023-06-06
- 格式:DOCX
- 页数:42
- 大小:44.07KB
专业教学网页的设计及其实现.docx
《专业教学网页的设计及其实现.docx》由会员分享,可在线阅读,更多相关《专业教学网页的设计及其实现.docx(42页珍藏版)》请在冰豆网上搜索。
专业教学网页的设计及其实现
培训教育网页的设计
摘要
在如今,互联网对于我们来说已经不再是新鲜的事物了,大多数的企业都建立了自己的网站。
随着互联网的快速发展,网站已成为人们生活的一部分,也成了我们生活中必不可少的元素,于是各种各样的网站便如雨后春笋般地出现。
在商业网站越来越多的今天,像学校网站、慈善网站、企业网站等社会公益网站也不能忽视其发展,于是我就是以网页设计教学辅助为主题制作了一个网页教学网站,供大家参考。
同时在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。
Internet上发布信息主要是通过网站来实现的,获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。
因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。
建设一个教学网站可以有更的多的资源供大家借鉴。
本文就是教学网站的建设,也随着计算机网络的发展,自己动手制作网站已经成为一种时尚,本篇主要通过制作一个教学网站的实例,来对网站的规划、制作过程做了介绍,并且着重论述了制作网站的一些技术。
在网站实现方面,使用了当前比较流行的Dreamweaver8.0、Fireworks、Flash、Photoshop等软件,通过其与介绍了小型网站的建设。
关键词:
网站;超文本标记语言;JSP技术;级联样式表
TheDesignofWebPagesforInstruction
ABSTRACT
TodayattheInternetforusisnolongeranovelty,andthemajorityofenterpriseshavesetuptheirownwebsites.WiththerapiddevelopmentofInternet,webhasbecomeapartoflife,ourlifehasbecomeanessentialelement,sovariouswebsitessuchasmushroomingappear.Atagrowingnumberofcommercialwebtoday,suchasschoolwebsite,acharitywebsite,corporatewebsiteandothersocialwelfarewebsitealsocannotignoreitsdevelopment,soIamawebdesignteachingaidsforthesubjectproducedateachingwebpagesforreference.Atthesametime,therapiddevelopmentofInternettoday,theInternethasbecomepeople'sExpressacquisition,distributionandtransmissionofanimportantchannelforinformation,whichpeopleatthepolitical,economic,andotheraspectsoflifeplayanimportantrole.PublishedonInternetinformationmainlythroughtheimplementationofthewebtoobtaininformationalsotoInternet"sea"inaccordancewiththesearchmethodmustberequiredtodownloadinformationfromthewebondown.ThereforetheconstructionofwebapplicationsintheInternetonthestatusofobvious,ithasbecomethegovernment,enterprisesandinstitutionsintheConstructionofinformationanimportantpartof,somuchattention.TobuildateachingwebsitecanhavemanymoreresourcesfortheU.S.learnfrom.Thisarticleistheteachingwebsitebuilding,butalsowiththedevelopmentofcomputernetworks,makingdo-it-yourselfwebsitehasbecomeafashion,thisprimarilythroughthewebtoproduceateachingexamplestowebsiteplanning,productionprocesstodotheintroductionandfocusondiscussessomeofthetechnicalwebproduction.Websiteatimplementation,theuseofthecurrentrelativelypopularDreamweaver8.0,Fireworks,Flash,Photoshopandothersoftware,throughitswebsiteandintroduceasmallbuilding.
Keywords:
Website;Html;JSP;Css
第一章前言
在网络发展得如此迅速的情况下,大都高校的教师都已经采用课件的形式教学,改变了传统的教学方式,例如用PowerPoint或其他的教学软件来丰富课堂,这样大大的提高了课堂教学的效率,也使课堂气氛得到了活跃,这样的教学方式既方便老师,也使学生以最大的学校效率去学习[1]。
尽管这些措施在课堂内带来了很大的方便与好处,但对课下却没什么帮助。
课下的复习对于学习来说也是非常关键的,因而在网络发展得如此发达的形势下,对课下学习进行改革是势在必行。
建立远程教学系统是教学信息化,网络化的最佳途径,也是当前教学辅助手段的大势所趋[2]。
若解决了如今远程教学系统中既能满足群体教学,又能解决个性交互需要,此举的对于教育事业,对于国家来说,其意义将是非常巨大的。
从教学模式来看,建设出好的远程教学系统能让教学充分体现“以学生为主,教师为辅”的现代教学模式,彻底改变了传统教学中“以课堂教学为中心,以书本为中心,以教师为中心”[2]的“三中心”教学模式。
从学生的学习来看,建设出好的远程教学系统将是学生课堂学习强有力的补充,利用网站,教师发布课程学习资料、布置作业、进行网上答疑,学生和老师之间、学生和学生之间可使用电子邮件、BBS、讨论讨论等进行在线或非在线信息交流[3],学生之间亦可以相互讨论。
从学生和老师的交流来看,建设出好的远程教学系统将为学生和老师在情感交流方面架起情感的桥梁。
利用现代的信息技术手段,建设好的远程教学系统,推进国家的教育事业,此任务是教育以及国家对于网络建设工作着来说是迫不及待的。
1.1远程教学系统发展的概况
近年来,国家大力推行高校教育改革,现代教育技术、现代教育手段的应用与推广已是变革中的重中之重。
现代教育技术作为国家推行素质教育的重要手段,具体在计算机使用方面,已体现全面要求大学生必须通过等级考试,初步掌握计算机的使用,而网络又是现代教育技术应用的核心。
在这样形势下,很多远程教学系统开始涌现,给传统教学带来了一次强力冲击,新的一轮教学改革已经展开。
远程教学系统作为一个学习的平台,具有信息量大、交换便捷、易于互动等优点,它的应用多少与好坏直接展示了教育提升的水平和档次。
但现如今的远程教学系统并没能充分利用这一点。
[4]
远程教学系统一般有教师个人远程教学系统和单位的远程教学系统(例如专业远程教学系统),教师个人远程教学系统大都是自己建设或找人建立起来的;单位的远程教学系统是单位组织人员建立起来的。
无论是哪种方式建立起来的,一般都没有对如何利用网络或者说网站来达到教学互动交流这个问题。
这样就造成了远程教学系统的发展良莠不齐的状况,且大部分远程教学系统的利用效果都不尽人意,甚至有些学生都不知道它们的存在。
远程教学系统的建设对于教育事业方面的需要还远远不能满足,我国的教育机构的庞大以及网络的发展是远程教学系统建设程度不能满足需要的主要原因。
而且远程教学系统到如今,国内还没有一个好的评价体系[5,6]。
很多远程教学系统都是的用文章发布系统加留言板建设而成,有的可能会加上个论坛来加深交流。
文章发布系统一般作为课件发布用,供学生下载课件用,而留言板作为答疑工具来用,当学生有疑问时可以发帖向老师提问。
论坛的作用和留言板差不多。
这种网站在一定程度上满足了远程教学系统的要求,但这远远不够。
在交流手段上,老师会在远程教学系统上发布自己的电子邮件,以供学生向自己提问,以解决学生自己独立解决不了的问题[7]。
但这一切都必须建立在学生和老师的计算机水平的基础上,这样操作都需要他们对计算机操作很熟悉才行,这也是远程教学系统应用推广难的一个原因。
1.2远程教学系统建设现状
远程教学系统以个人远程教学系统居多,且很多都只是以信息发布系统建立起来的课件发布系统而已,还远远不符合教学的要求。
在很多高校都是教务处建立的,这些远程教学系统在功能上就有些偏了,不是很符合教学的要求。
远程教学系统的建设现状整体来说还很差,无论是从规模还是质量上都还不能承担教学中的课下学习环节的补充。
[8]
1.3远程教学系统发展中出现的问题及原因
出现的问题有很多,远程教学系统到现在为止发展不是很好。
这主要表现在两个方面:
(1)教学内容在远程教学系统上的组织形式没能让它们发挥他们应有的作用。
例如,在课件上不应该只是课件下载而已,而是一个知识库,根据知识点组织起来的知识库,这个知识库也不是简单数字化的数据库,而是已经把各个知识点关联起来的知识库。
(2)远程教学系统在交互设计上陷入了瓶颈。
在交互设计上,国内很多远程教学系统都只是停留在留言板答疑的水平上,并没有把Web2.0的理念融进去。
出现这些问题的原因:
很多教学单位或个人并没有真正把远程教学系统重视起来,而是简单的把它当作一种可有可无的教学手段,这样的想法到了网站设计者那,当然也就不会设计出多好的远程教学系统来了。
教师和老师的计算机操作水平也是一个制约因素,例如一个小学生可能他会网上聊天,但不一定会在网上看电子书。
这些因素在远程教学系统的设计上,是不能忽略的。
当然啦,这也是和当今的网络发展水平密切相关的,试想,给一个没有网络的山村小学建设远程教学系统,这就完全没有必要,建了也是浪费。
还有一个原因是,中国在教育远程教学系统上缺乏一种评价策略。
目前,我国相关的研究也只局限于介绍评价方法、评价实施过程以及如何量化调查结果等。
至于具体的评价要素、评价指标体系可以说还是空白,而这些在国外已经开始建设这一评价体系[9]。
即使在美国等远程教育发展较完善的国家,通行的认证原则也是一些定性的指导思想[10],进行有效性评价指标体系的研究就是为了促进远程教学系统不断改进质量,为公众提供满意的教育服务。
1.4远程教学系统的发展趋势
Web2.0已经烧到了世界的各个角落,所以以后的远程教学系统一定是以Web2.0理念为核心的网站,即将网站用户为核心的网站,而不是以网站内容为核心。
这对于传统网站设计是一个挑战,也是一个机遇,一个发展方向。
按照Web2.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的主要设计师ThomasKnoll的爸爸GlennKnoll是密歇根大学教授,同时也是一个摄影爱好者,他家地下室是一个暗房。
他两个儿子Thomas和John从小就跟着爸爸玩暗房,但John似乎对当时刚刚开始发行的个人电脑更感兴趣。
此后Thomas也迷上的个人电脑,并在1987年买一台苹果电脑(MacPlus)用来帮助他的博士论文。
Thomas发现当时的苹果电脑无法显示带灰度的黑白图像,因此他自己写了一个程序Display。
而他兄弟(也可能是哥哥)John这时在星球大战导演Lucas的电影特殊效果制作公司IndustryLightMagic工作,对Thomas的程序很感兴趣。
两兄弟在此后的一年多把Display不断修改为功能更为强大的图像编辑程序,经过多次改名后,在一个展会上他们接受一个参展观众建议把程序改名为Photoshop。
此时的Display/Photoshop已经有Level,色彩平衡,饱和度等调整。
此外John写了一些程序后来成为插件(Plug-in)的基础。
[12]
他们第一个商业成功是把Photoshop交给一个扫描仪公司搭配卖,名字叫做BarneyscanXP,版本是0.87。
与此同时John继续在找其他买家,包括SuperMac和Aldus都没有成功。
最终他们找到了Adobe的RussellBrown,Adobe的艺术总监。
RussellBrown在此时已经在研究是否考虑另外一家公司Letraset的ColorStudio图像编辑程序。
看过Photoshop以后他认为Knoll兄弟的程序更有前途。
在1988年7月他们口头决定合作,而真正的法律合同到次年4月才完成。
合同里面的一个关键词是Adobe获取Photoshop“licensetodistribute”,就是获权发行而不是买断所有版权。
这对后来Knoll兄弟发大财奠定了基础。
经过Thomas和其他Adobe工程师的努力,Photoshop版本1.0.7于1990年2月正式发行。
JohnKnoll也参与了一些插件的开发。
第一个版本只有一个800KB的软盘(Mac)。
在90年代初美国的印刷工业发生了比较大的变化,印前(pre-press)电脑化开始普及。
Photoshop在版本2.0增加的CYMK功能使得印刷厂开始把分色任务交给用户,一个新的行业桌上印刷(DesktopPublishing-DTP)由此产生。
[13]
2.4.2开发环境要运行本系统,须提供如下环境
(1)硬件要求
CPU:
PentiumⅢ733或以上之兼容机;
内存:
128MB或以上容量;
显卡:
16MB或以上显存之AGP接口绘图卡;
硬盘:
至少100MB剩余空间。
网卡和网络适配器
(2)软件要求
操作系统:
MicrosoftWindows2000/XP/2003简体中文版;
开发工具:
Dreamweaver8.0
文档工具:
MicrosoftWord2000/XP/2003简体中文版;
图片工具:
AdobePhotoshop6.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之类工具加了进去,这也能解决一定的问题,对于扩大交流也起到一定的作用。
但教学交往不是那么简单的,它涉及很多方面的问题。
[16]
3.1.3系统用户类和特性
用户类型:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 专业 教学 网页 设计 及其 实现