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

专业培训教育网页的设计摘要在如今，互联网对于我们来说已经不再是新鲜的事物了，大多数的企业都建立了自己的网站。随着互联网的快速发展，网站已成为人们生活的一部分，也成了我们生活中必不可少的元素，于是各种各样的网站便如雨后春笋般地出现。在商业网站越来越多的今天，像学校网站、慈善网站、企业网站等社会公益网站也不能忽视其发展，于是我就是以网页设计教学辅助为主题制作了一个网页教学网站,供大家参考。同时在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。建设一个教学网站可以有更的多的资源供大家借鉴。本文就是教学网站的建设，也随着计算机网络的发展，自己动手制作网站已经成为一种时尚，本篇主要通过制作一个教学网站的实例，来对网站的规划、制作过程做了介绍，并且着重论述了制作网站的一些技术。在网站实现方面，使用了当前比较流行的Dreamweaver8.0、Fireworks、Flash、Photoshop等软件，通过其与介绍了小型网站的建设。关键词：网站；超文本标记语言；JSP技术；级联样式表

TheDesignofWebPagesforInstructionABSTRACTTodayattheInternetforusisnolongeranovelty,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

目录TOC\o"2-3"\h\z\t"标题1,1"第一章前言 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远程教学系统建设现状远程教学系统以个人远程教学系统居多，且很多都只是以信息发布系统建立起来的课件发布系统而已，还远远不符合教学的要求。在很多高校都是教务处建立的，这些远程教学系统在功能上就有些偏了，不是很符合教学的要求。远程教学系统的建设现状整体来说还很差，无论是从规模还是质量上都还不能承担教学中的课下学习环节的补充。[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中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点（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系统用户类和特性用户类型：接口：无。学生：学生为主要的用户，是网站的主要受服务者。教师：教师用户在此网站的主要作用是辅助学生的学习。网站管理员。3.1.4性能需求网站的性能对于使用者是非常重要的，它涉及到的方面也很多，本系统因功能为教与学服务，所以它所需的性能需求暂时不用考虑大型网站的架构，也不必使用系统框架优化，基于这些考虑，以下为本系统的详细性能需求：相互合作的用户数量：10。系统支持的并发操作数量：200。响应时间：5秒内。磁盘空间：3G（因教学资料占比较大的存储空间，如不上传课程资料，此项可以不受限制）。数据库中表的最大行数：无限制，但需求磁盘空间支持。3.1.5安全性需求安全需求主要有三个方面：一是防止数据库被注入；二是程序设计方面的漏洞，比如权限控制方面；三是上传漏洞，如被人上传了木马了什么的，后果不堪设想。SQL注入是非常危险的，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。新手最容易忽略的问题就是SQL注入漏洞的问题。用NBSI2.0对网上的网站扫描，就能发现部分网站存在SQL注入漏洞，用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据。[17]因此在本系统中，将为每一个文件添加数据检验的代码，防止非法数据进入系统。上传漏洞是指上传者上传了一些非法的文件上去，导致系统被破坏。此方面的安全也是非常重要，在本系统中，首先要控制好上传权限，不能让非法用户进入上传页面，第二是控制好文件上传的类型，不能上传非合法类型的文件。[18]3.2教学网站的模块介绍网页设计教学辅助与实践网站，整个网站由7个部分构成，分别是(引导页、首页、资源下载、图片下载、教学方法、作者档案、在线留言)构成。首页是整个教学页面的一个简要介绍,资源下载页面主要是提供一些大家可以下载的教学资源,图片下载页面主要是提供各种类型的图片,教学方法主要是总结了自己在做完这个网站后的一点心得，在线留言是为了让大家在看了这个网站后有意见和建议的可以在此留言。3.3建站目的Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，WorldWideWeb(简称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（CommonGatewayInterface）、ISAPI（InternetServerApplicationProgramInterface）、ASP（ActiveServerPages），JSP（JavaServerPages），PHP等[21]。其中以ASP技术应用最广泛，且相关网络资源多，有丰富的中文参考资料，开发工具比较成熟，能快速构建网络应用程序，所以很多远程教学系统的建设者都选用了该技术作为平台制作技术[22]。ASP的主要特点有：（1）无需编译。ASP脚本集成于HTML当中。容易生成，无需编译或连接即可直接解释执行，（2）易于生成。使用常规文本编辑器（如Windows下的记事本），即可进行ASP页面的设计还可以使用可视化的集成编辑环境VisualInterDev。（3）独立于浏览器。ASP脚本在服务器端解释执行，用户端只要使用可解释常规HTML码的浏览器，即可浏览ASP所设计的主页。（4）面向对象。在ASP脚本中可以方便地引用系统组件和ASP的内置组件，还能通过定制ActiveXServerComponent（ActiveX服务器组件）来扩充功能。（5）与任务ActiveXscript语言兼容。除了可使用VBScript和JavaScript语言进行设计外，还可通过Plug—in的方式，使用由第三方所提供的其它script语言。ASP页面需要ASP脚本引擎的支持。当用户请求一个HTML页面时，Web服务器会把相应的HTML页面传送给用户的浏览器。但是用户请求的是ASP页面时，Web服务器会先将相应的ASP页面传递给脚本解释引擎，并生成一个HTML页面，再将生成的HTML页面回传给用户的浏览器。在数据连接上，一般采用ASP+ADO技术，ASP与ADO技术结合实现同数据库的集成。ADO是一种操作Microsoft所支持的数据库的方法，类似于在VB中的DAO（DataAccessObject，数据访问对象）和RDO（RemoteDataObject，远程数据对象）。在ASP中，ADO可以看作是一个服务器组件（ServerComponent），简单地说，它是一系列的对象。ADO共定义了七种对象，应用这些功能强大的对象，即可轻松完成对数据库复杂的操作[23,24]。使用ADO对象操作数据库，具体的步骤可以归纳为以下几步：创建数据库源、创建数据库链接、创建数据对象、操作数据库、关闭数据对象和链接[25]。基于ASP以上的优点，本系统在开发中使用ASP技术开发。（2）编程环境：由于选择了ASP技术开发此系统，编程环境选择Dreamweaver8，系统环境为WinXpSP2，服务器为IIS5.0。图片编辑使用Photoshop9.0。3.6系统程序设计部分系统程序设计介绍：（1）课程学习与课程教学设计：课程资料在本系统中，设计成与开课信息关联，首先要在系统添加了开课信息之后，才能添加课程资料，开课信息由管理员添加，课程资料信息由教师添加，学生可以下载。在本系统设计中，权限分配是这样的，老师只能添加自己所任教的课程的学习资料，没有任教的课程不能添加。学生只能下载与自己有关的课程的学习资料。 （2）上传程序设计：在此部分的程序设计成三个类：一为上传类，二进度信息类，三为文件信息类。上传信息类：DoteyUpload，包含子过程：PublicSubSaveTo(path)（保存信息子过程），PublicSubUpload()（上传子过程），PrivateSubRaise(Message)（异常信息子过程），方法：PrivateFunctionGetBoundary()（取边界值方法），PrivateFunctionBinaryToString(xBinary)（将二进制流转化成文本方法），FunctionStringToBinary(String)（字符到二进制转化方法），PrivateFunctionGetFieldName(infoStr)（返回表单名方法），PrivateFunctionGetFileName(infoStr)（返回文件名方法）。 进度信息类的主要作用是统计上传进度信息，例如上传文件大小，当前已上传文件大小，已花时间，剩余时间等。文件信息类的主要作用是向客户端返回上传文件的各方面信息，例如文件名，路径等。（3）答疑程序设计：此部分程序类似与留言板程序，在此系统中，每一个开课信息将有一个答疑区，是多版块的，不过这多版块是以课程为划分依据。一门课开课了，在前台就会有一个答疑区。在此模块，只允许学生发帖，老师只允许回复。（4）讨论区程序设计：此部分程序类似于BBS，在此模块，学生、老师和管理员均可以发帖，但只有老师和管理员有管理帖子的权限。（5）信息关联设计：此方面的关联主要是指学生详细信息关联，教师详细信息关联，课程详细信息关联，短信息发送关联，课程与学习资料关联，课程与答疑区关联这几方面。在各个显示名字的地方设置详细信息链接，在各个显示学生、教师信息的地方加上短信息发送的链接。（6）SQL注入检测设计：这是比较重要的一块，它是网站的安全防线。主要是使用在循环检查每一个输入数据，如果包含了非合法数据，即不允许操作。3.7系统程序测试测试主要针对数据完整性、权限检测、上传功能、讨论区版块这几部分进行测试，数据完整性，采用了构造特殊数据进行测试，也就是边界法。在这一部分的测试中，将很多数据检测脚本错误检查了出来，权限检测主要测试方法，分别以三种权限进入系统进行操作，查看是否有异常，这一部分工作将一部分非教师权限或者非学生权限检测了出来。上传功能检测是程序测试中的一重要部分，这部分工作将系统不能上传某些类型的文件不能上传的错误检测了出来，后来又发现此部分功能不稳定，最后才将此部分程序完全修改好。讨论区版块是程序中比较大的一块。对此部分程序进行测试的时候，发现此部分程序有对象释放不合理的问题出现，导致程序有时运行不出来的现象出现第四章网页的总体规划4.1制作网页的一般步骤首先，你应该明确制作网页是为了干什么。比如，你是公司的职员，想通过网页来对公司进行广告宣传；再假设你正在做一个项目，想和外地的工程师通过网页讨论该项目。如果你要制作个人网页，那么你可能想通过个人网页在网上进行传播，从而展示自己，并和网友交朋友。这就是你的目的。我做这个企业网页的就是让每个企业把自己的产品展示给大家，让大家来评论交流，提出宝贵的意见，然后再加以改进，使得企业的产品更加满足消费者，还有企业网站就是企业的门面，所以我这次做这个网页就是为了给企业打广告，其次，组织好你的网页内容。试想，你把自己的照片和内容都堆在一起，别人将无法明白你想干什么，说不准，连你自己都糊涂了。如果组织得好，用户从你的网页中获取信息就容易得多。对于那些很重要的信息，用户只需要简单的操作就能得到。一般来说，组织好网页的关键是要对网页建立层次分明、条理清楚的结构图。脑子里有了这样一张结构图，就会对网页很明白，并且有助于制作网页。而后，要确定你的网页所具有的外观和特色，目的就是让用户被你的网页所吸引。如果你只是要把很多漂亮的画面堆在一起，而不管内容，那将没人看。应该让你的网页不仅漂亮，更重要的是实用。怎么把自己的照片和内容有机的结合到一起，这也正是你的网页特色所在。然后，开始制作网页。具体操作时，首先要创建个人站点，再充分利用Dreamweaver的功能建立各个网页。最后，等网页做好了，就该发布站点了。站点发布后，为了保持站点的吸引力，要经常修改网页的内容（添加新的内容，更换已过时的图像等），就要更新和维护你的站点了。4.2网页包括的元素无论是初次领略Internet风光的新手，还是经常上网冲浪的老手，在初次设计网页之前，都必须先认识一下构成网页的基本元素。只有这样，才能在真正的设计工作中得心应手，根据需要合理的组织和安排网页的内容，从而达到期望的目标。设计网页的目的主要是发布信息，因此，作为信息载体的文本和图像也就成了网页的基本组成部分，超级链接是Web的核心，使它将万维网中无数的网页链接在一起，如果没有它，Web就无从谈起，此外，表格、动画、音乐和交互表单等信息的组织、表现，以及交互元素在网页中也具有举足轻重的地位。（1）文本文本一直是人类最重要的信息载体和交流工具，网页中的信息也以文本为主，与图像相比，文字虽不如图像那样能够很快的引起浏览者的主意，但却能准确的表达消息的内容和含义，为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如文字、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容，此外，用户还可以在网页中设计各种各样的文字列表来清晰表达一系列项目，这些功能都给网页中的文本赋予了新的生命力。（2）图像图像在网页中具有提供信息，展示产品，装饰网页，表达企业文化的作用。用户可以在网页中使用GIF、JPEG、PNG3种图像文件格式，其中使用最广泛的是GIF和JPEG两种格式。（3）超级链接超级链接技术可以说是万维网流行起来的最主要的原因，它是从一个网页指向另一个目的端的链接，例如指向另一个网页或相同网页上的不同位置，这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或本网页中的其他位置，其载体通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式链接。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开;如果是指向一个网页的超级链接，则该网页将显示在Web浏览器上。（4）表格在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是还可以使用表格来精4.3网页的制作及实现我这次做的这个网站做的是一个静态的页面，所以在设计的过程中非常重视其中的布局，我运用Dreamweaver8.0这个软件来制作框架，并用CSS进行页面的布局，并在网页中插入一些透明的Flash,使网页能有更好的浏览效果。另外，在网页的制作过程中，我还考虑到了网站颜色的搭配，这是一个很重要的问题，好果网站的颜色搭配不好，会给使用者带来一种不好的感觉，这样便会影响网站的价值，也没达到我们设计网站的目的。在制作过程中，我多次与同学共同探讨，并虚心接受她们的建议，多次对网站的风格进行设置与改进。在网站风格设置上，我考虑到整个网站风格的统一，所以，界面虽然简单，却很清新，给人一种耳目一新的感觉。4.4页制作注意事项我在网站的设计过程中，总结了以下几点注意事项，现列举如下：（1）风格要统一，颜色搭配要协调，页面中的字体可通过链接CSS文件统一设置；（2）所有页面用表格来布局，用800×600分辨率来设计网页；（3）页面中的图片要使用合理，尽量不要使用太大的图片，也不要使用过多图片；（4）各个页面之间的链接要合理有效；（5）疏密度。做到疏密有度，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。第五章网页的测试网对站网页产品进行测试，检查产品是否存在缺陷、错误，检查代码缺陷及错误，是否能实现功能，是否能显示所要显示的东西等。网站首页显示内容正确，图片正常，超链接可以用，可以正常进行网页间的转换。网站包含了学院图片、教学实例、Dreamweaver介绍。5.1教学网站首页主页包含了学院的图片，教学实例的超链接和Dreamweaver的介绍，本页还增加了背景音乐和访客统计，时间的小部件，使网站跟清新简洁。运用Div,script，js等来设计网站。<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式。不必为每一个<div>都加上类或id，虽然这样做也有一定的好处。可以对同一个<div>元素同时应用class和id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。用div排版可以使教学网站的设计更简单，清新。5.2资源下载页面可以查看页面内的网设信息和下载如图4.2下载用了html的超链接HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。5.3教学相册教学相册主要由表格和css组成的。要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于“格式”菜单上的“样式表连接”命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。该“样式”框列出标准HTML标记符，例如标题1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或ID选择器。要应用样式到网页元素，请选定该样式然后单击“样式”框中的样式或选择器。在MicrosoftFrontPage2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用“边框与阴影”命令（在“格式”菜单上）在普通段落周围应用框，FrontPage会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶<pstyle="border-style:solid">）。然而某些属性的应用需要使用CSS，其他则需要使用HTML。如果人们只想使用CSS应用内嵌样式，可使用“样式”按钮（位于网页元素的“属性”对话框里）应用类或ID选择器或嵌入式样式。有三种方法可以在站点网页上使用样式表：（1）将网页链接到外部样式表。（2）在网页上创建嵌入的样式表。（3）应用内嵌样式到各个网页元素。每一种方法均有其优缺点：当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表—中作一次更改—而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css做为文件扩展名，例如Mystyles.css。当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的<HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。5.4教学实例教学实例截图如图所示。5.5背景音乐运用代码<bgsoundsrc="音乐名称"autostart=trueloop=infinite>来实现5.6访客统计访客统计（如图4.5所示）调用JavaScript语言来实现，加入代码后，当第一次打开网页后会显示“欢迎您的第一次光临！”，通过JavaScript记录和使用Cookie的次数“如图6-4所示”。cookie是web服务器可以使用客户端在浏览器中的MicrosoftInternetExplorer如上存储数据的特殊文件。通过cookie中，您可以跟踪特定访问者进入与总的访问次数比较您网站的频率。缺点是如果通过清除浏览器的缓存的客户端删除该cookie，命中的次数将重置为零。每次访问通过path，expires，domain，secure函数来进行，通过下列函数来实现访客的记录。5.7系统待改进之处在本次系统开发中，遇到很多问题，所以待改进之处还有很多，主要的有以下几个问题：（1）因技术有限，在本系统中还遗留有很多问题没解决，主要的问题有，分页问题，学生信息和老师信息Excel表导入，文件删除错误判断以及提示，学生和老师信息中，没提供照片显示，上传漏洞的补丁。（2）分页问题主要是没有实现像论坛那样显示一个数字列，只有单纯的首页尾页、上一页下一页。这样对于分页来说，并不完善。没能实现的原因是，分页的循环数以及开始循环数，没能判断成功。（3）Excel表导入问题，在技术上，难度并不大，没有实现的原因，是因为这需要导入规范，如果一个学院里边学生信息与老师信息的Excel表没遵循规范的话，是导入不了的。（4）文件删除，本系统使用的是FSO，但没能做出错误判断以及给出错误提示，这是因为，这错误在捕捉之前它已经出来，主要使这功能出错的原因是文件不存在。

总结网页设计教学辅助网站是以一个教学为主的网站。网站里面的内容都是一些教学信息，方便了同学们在该网站进行各种学习文化的交流。毕业设计和毕业论文是专科生培养方案中的重要环节。学生通过毕业论文，综合性地运用几年内所学知识去分析、解决一个问题，在作毕业论文的过程中，所学知识得到疏理和运用，它既是一次检阅，又是一次锻炼。作完毕业设计后，感到自己的实践动手、动笔能力得到锻炼，增强自己以且学习的信心。毕业论文是本科学习阶段一次非常难得的理论与实际相结合的机会，通过这次比较完整设计，我摆脱了单纯的理论知识学习状态，和实际设计的结合锻炼了我的综合运用所学的专业基础知识，解决实际问题的能力，同时也提高我查阅文献资料、设计手册、设计规范以及电脑制图等其他专业能力水平，而且通过对整体的掌控，对局部的取舍，以及对细节的斟酌处理，都使我的能力得到了锻炼，经验得到了丰富，并且意志品质力，抗压能力及耐力也都得到了不同程度的提升。这是我们都希望看到的也正是我们进行毕业设计的目的所在。提高是有限的但提高也是全面的，正是这一次设计让我积累了无数实际经验，使我的头脑更好的被知识武装了起来，也必然会让我在未来的工作学习中表现出更高的应变能力，更强的沟通力和理解力。顺利如期的完成本次毕业设计给了我很大的信心，让我了解专业知识的同时也对本专业的发展前景充满信心，我都采用了一些新的技术和设备他们有着很多的优越性但也存在一定的不足，这些不足在一定程度上限制了我们的创造力。这无疑是很让我自身感到遗憾的，可这些不足正是我们去更好的研究更好的创造的最大动力，只有发现问题面对问题才有可能解决问题，不足和遗憾不会给我打击只会更好的鞭策我前行，今后我更会关注新技术新设备新工艺的出现，并争取尽快的掌握这些先进的知识，更好的为祖国的四化服务。

致谢本论文是在谢老师的悉心指导下完成的，谢老师严谨的治学态度和科学工作方法让我获益匪浅。在此由衷感谢王老师对我的关心以及在生活和学习上的帮助。在外单位实习期间，感谢北京长远智扬科技有限公司同事对我的论文的指导和帮助。另外也感谢我的家人，感谢他们对我在学业上的支持和鼓励。

参考文献[1]郭燕芳,李宏亮.对计算机辅助远程教学系统系统建设的探索和尝试[J].广西大学学报,2005,7(增刊):8-10.[2]章一华,胡鹏,谢军.互动式远程教学系统的应用设计[J].集美大学学报,2000,6:22.[3]袁守华.基于Web的课程网络远程教学系统的开发与应用[J].中原工学院学报,2004,2:15-18.[4]王小燕.对高校教师个人远程教学系统建立的思考[J].文化教育,.2006:23-26.[5]李斌,孙岩,王康寿,郑尚魁.远程教学系统设计.学科建设[J]．远程教育,2005,5:44-45.[6]黄志军,赵皑,刘海庆.基于校园网的远程教学系统建设探讨[J].教育技术,2005:36.[7]邢苗条.基于Internet远程教学系统系统的设计方案[J].现代电子技术,2002,2(第4期):18.[8]赵航涛.建立学科远程教学系统的探讨[J].基础教育,.2004,3(上):50.[9]赵双萍.基于Web的网上教学系统的设计[J].兰州工业高等专科学校学报,2002,3(.第1期):24.[10]吴剑,朱志字,张冰.交互式动态远程教学系统的设计与实现[J].计算机与数字工程,2006年(第5期):32-34.[11]Gleen,Denis.Learningforachangeinfurthereducation[J]..JournalofVocationalEducationandTraining.Volume57,Number2,Jume2005,pp.239-246[12]刘少华.试论专业远程教学系统的建设[J].当代教育论坛,2005(第6期):25-26.[13]Marcie,pitt-catsouphes.Buildingavirtualreseachandteaching.Community,Work&Family[J],Volume8,Number1,February2005,pp.93-105[14]赵守凯.常用软件远程教学系统的构建及教学体会[J].科技平台,2006:26-27.[15]骆志煌,张小明,陈亚东.浅议教师个人远程教学系统的发展空间[J].中小学信息技术教育,2004,10(.第45期):36-37.[14]王海燕,李芒.让师生实现零距离的心灵触摸[J].电化教育研究,2004(第2期):25.[16]卫春芳.个人远程教学系统的建立[J].计算机时代,2002:8-9.[17]刘波,王本玉,王磊.建立远程教学系统实现网上信息交流和信息管理[J].邵阳学院学报(自然科学),2003,10(第5期):12-15.[18]胡小荣,李建平.基于ASP技术的高等数学辅助教学网络平台[J].数学理论与应用,2005,12(第4期):40-42.附录Css文件templatemo_style.cssCss代码body{ margin:0; padding:0; line-height:1.5em; font-family:Georgia,"TimesNewRoman",Times,serif; font-size:12px; color:#555a4a;background:#a0c73f;}a:link,a:visited{color:#0683ab;text-decoration:none;font-weight:normal;}a:active,a:hover{color:#0683ab;text-decoration:underline;}.button_01a{ display:block; width:102px; height:23px; padding:7px000; background:url(images/templatemo_button.png)no-repeat; color:#333; font-size:12px; font-weight:bold; text-align:center; text-decoration:none;}.button_01a:hover{ color:#fff;background:url(images/templatemo_button_hover.png)no-repeat;}p{margin:0px;padding:0px;}img{margin:0px;padding:0px;border:none;}.cleaner{clear:both;width:100%;height:0px;font-size:0px;}.cleaner_h30{clear:both;width:100%;height:30px;}.cleaner_h40{clear:both;width:100%;height:40px;}.margin_r10{margin-right:10px;}.float_l{float:left;}.float_r{float:right;}#templatemo_header_wrapper{ width:100%; height:265px; background:url(images/templatemo_header.jpg)no-repeattopcenter;}#templatemo_header{ position:relative; width:980px; height:265px; padding:010px; margin:0auto; background:url(images/templatemo_header.jpg)no-repeattopcenter;}/*sitetitle*/#templatemo_header#site_title{ float:left; width:220px; padding:90px0050px;}#site_titleh1{ margin:0; padding:0;}#site_titleh1a{ margin:0px; padding:0px; font-size:30px; color:#ffffff; font-weight:bold; text-decoration:none;}#site_titleh1a:hover{ font-weight:bold; text-decoration:none;}#site_titleh1aspan{ display:block; margin-left:2px; font-size:14px; color:#416902; font-weight:bold; letter-spacing:2px;}/*endofsitetitle*//*menu*/#templatemo_menu{ float:right; padding-top:70px; height:43px;}#templatemo_menuul{ margin:0; padding:0; list-style:none;}#templatemo_menuulli{ padding:0; margin:0; display:inline;}#templatemo_menuullia{ float:left; display:block; height:35px; width:125px; margin:0; padding:8px000; text-align:center; font-size:12px; text-decoration:none; color:#333333; font-weight:bold; outline:none;}#templatemo_menulia:hover,#templatemo_menuli.current{ color:#333333; background:url(images/templatemo_menu_hover.png)no-repeattop;}/*endofmenu*//*Search*/#templatemo_header#search_box{ position:absolute; width:335px; height:72px; bottom:30px; right:50px; background:url(images/templatemo_search.p