毕业设计（论文）：数字媒体技术系网站前端设计与开发.doc

1、前端设计毕业设计（论文）题目数字媒体技术系网站前端设计与开发学院滁州职业技术学院专业班级软件2班姓名学号20111508206指导教师系主任学院院长二O一三年月日毕业设计论文诚信声明我谨在此保证本人所写的毕业设计论文，凡引用他人的研究成果均已在参考文献或注释中列出。设计论文主体均由本人独立完成，没有抄袭、剽窃他人已经发表或未发表的研究成果行为。如出现以上违反知识产权的情况，本人愿意承担相应的责任。声明人签名年月日摘要21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现

2、组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JAVASCRIPT实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。分析并解决实现中的若干技术问题；介绍了个性化页面的背景及JSPJAVASCRIPTMYSQL系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统

3、实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等JSP页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值关键字JSP；JAVASCRIPT；网站美化；交互设计。ABSTRACTTHETWENTYFIRSTCENTURYISTHERAPIDDEVELOPMENTOFINFORMATIONAGE,NETWORKASTHEWORLDSMOSTPOPULARANDMOSTCONVENIENTMEDIAAREINCREA

4、SINGLYACCEPTEDBYPEOPLEALONGWITHTHEINFORMATIONDEVELOPMENT,WEBSITEFUNCTIONSBEYONDTHETRADITIONALINFORMATIONACQUISITION,COMMUNICATIONWHICHCANBETTERREFLECTTHEORGANIZATIONSTYLE，PROPERTIESSOUNIVERSITIESESTABLISHTHEDEPARTMENTS,PROFESSIONALAPPEARANCE,EASYMAINTENANCEANDMANAGEMENTOFTHESITEHASBEENIMPERATIVETHIS

5、THESISMAINLYFOCUSESONDIGITALMEDIATECHNOLOGYMAJORPORTALFORTHEDEVELOPMENTOFTHETHEME,THETHREEMOSTBASICANDNECESSARYSKILLSDEVELOPMENTOFTHEFRONT,INTHELAYOUTOFTHEPAGE,HTMLWILLDEFINETHEELEMENTS,POSITIONINGCSSTODISPLAYELEMENTS,ANDTHENTHROUGHTHEJAVASCRIPTTOACHIEVETHECORRESPONDINGEFFECTANDINTERACTIONALTHOUGHTH

6、ESURFACELOOKSLIKETHESEAREVERYSIMPLE,BUTITNEEDSTOGRASPTHINGSNEVERINTHEDEVELOPMENT,THENEEDFORTHESECONCEPTSCLEAR,UNDERSTAND,SOINTHEDEVELOPMENTPROCESSWILLBEHANDYTHEMAINWORKDONEINTHISARTICLEISASFOLLOWS1INTRODUCESTHEBACKGROUNDANDGENERALPRINCIPLEOFJSPJAVASCRIPTMYSQLSYSTEMPERSONALIZEDPAGES2INTRODUCESTHESTRU

7、CTUREANDWORKINGPRINCIPLEOFTHEENTIREPERSONALIZATIONPAGEPRODUCTIONSYSTEMANALYSISOFTHEPARTICULARITY,THEDIFFICULTYANDKEYSYSTEM3THEDESIGNANDIMPLEMENTATIONOFUSERREGISTRATION,USERLOGIN,USERMANAGEMENTANDOTHERJSPPAGE4ANALYZEANDSOLVESOMETECHNICALPROBLEMSINIMPLEMENTATION5THEESTABLISHMENTOFACOMPLETECAMPUSSITE,T

8、ESTINGANDANALYSISTHESITEEFFECTIVELYACHIEVETHEUSERTHROUGHTHEJSPPAGEACCESSTOUSERREGISTRATION,LOGIN,ANDCARRYONEFFECTIVEMANAGEMENTTOTHEWEBSITECONTENT,ENHANCETHEEFFECTIVENESSOFTHELATEADDITIONANDDELETIONOFINFORMATION,HASACERTAINAPPLICATIONVALUEKEYWORDSJSPUSERLOGINJAVASCRIPTWEBSITELANDSCAPINGINTERACTIONDES

9、IGNI目录摘要ABSTRACT第1章绪论111选题背景及意义112国内外旅游状况313研究内容和拟解决的问题514本章小结6第2章前端开发工具及相关技术721前端开发环境722前端开发工具723前端开发相关技术8231JAVASCRIPT简介8232JAVASCRIPT基本特点8233CSS简介9234JQUERY924本章小结11第3章前端布局分析与设计1231前端总体开发流程及设计12311分层开发12312代码编写12313内部测试与后续优化1332前端UI设计14321模块分布14322颜色配置15323CSS元素1633交互设计与UI1734点，线，面的运用18341点的运用18I

10、I342线的运用1935网站结构布局及设计19351网站首页结构19352主题鲜明，富有特色20353版式编排布局合理性2136网站前台页面设计22361首页22362系内概况23363系内新闻2337本章小结23第4章主要功能的实现2341界面设计2342具体设计文档2443前台新闻文摘显示24431网站装饰风格24432网站的链接结构2544可视化设计2545具体实现技术25451CSS在“数字媒体技术系网站“中的应用实例25452应用JAVASCRIPT设计网页2546本章小结28第5章总结28参考文献30致谢321第1章绪论11选题背景及意义如今的互联网已经渗透到我们生活的每一个层面，

11、网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式1。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得高校网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形

12、成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。高校网站的海量存储特性可以从横向和纵向两方面分析横向看高校网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。交互性体现在高校网站通过设置留言板，论坛，发挥网络交互的功能，在老师和学生之间建立起了交流渠道。高校网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。很多高校网站内容多姿多彩，板块，内容争妍斗艳

13、。但不外乎以一下几部分学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入去建网站上是因为如上所述的高校网站有的独特特性使得建设高校网站势在必行。这些都促进了各个机构组织的信息化建设，随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站。2我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能HTML，CSS，JAVASCRIPT，PS矢量图像编辑技术。这个是前端开发中最基本也是最必须的三个

14、技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JAVASCRIPT实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。建立本系网站发挥的作用如下1数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。2数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育

15、的机会，能极大的提高教学效率。3数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。4数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人

16、格。5数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。312国内外旅游状况国外的专题院校网站的学习资源比较丰富，交互性和学习支持服务做得都比较好，但是活动组织形式比较单一。英国的学习网站建设得比较完备，无论从资源建设方面，还是从学习支持服务等方面都做得较好，商业性比较强。加拿大学习网站的网络学习导航做得比较形象，趣味性较强，分类明确，专题资源集中。高校门户网站的访问量，一定程度上反映了各高校的信息化程度和

17、水平。关于高校门户网站访问排名，有不少网站提供相关的服务。总体来说，国内的各排名口碑评价不一，而“访问流量监控”类的排名也会受到诸多因素干扰，不容易作为客观评价网站的依据。具体如下表11所示2表11中国高校网站综合排名表排名中文名称世界排名网站信息量世界排名信息影响力世界排名数字资料档案数量世界排名学术文章发表情况世界排名1清华大学77439104162552上海交通大学101412822381263北京大学122385105591764浙大182202287649925复旦大学2568682346081876山东大学2642533286563127哈工大29270610217972398武汉

18、大学35027220319153359中科大35787358160518410吉林大学363455706437309国外的高校网站部分国际知名大学如哈佛大学（HTTP/WWW。HARVARD。EDU/）排名第一，PRESENCE网站信息量世界排名第6，IMPACT网站信息影响力世界排名第1，OPENNESS数字资料档案数量世界排名第34，EXCELLENCE学术文章发表4情况世界排名第1；麻省理工学院（HTTP/WWWMITEDU/）排名第2，PRESENCE网站信息量世界排名第8，IMPACT网站信息影响力世界排名第1，OPENNESS数字资料档案数量世界排名第14，EXCELLENCE学术

19、文章发表情况世界排名第10；耶鲁大学（HTTP/WWWYALEEDU/）排名第16，PRESENCE网站信息量世界排名第27，IMPACT网站信息影响力世界排名第16，OPENNESS数字资料档案数量世界排名第246，EXCELLENCE学术文章发表情况世界排名第22；剑桥大学（HTTP/WWWCAMACUK/）排名第20，PRESENCE网站信息量世界排名第43，IMPACT网站信息影响力世界排名第35，OPENNESS数字资料档案数量世界排名第94，EXCELLENCE学术文章发表情况世界排名第12；牛津大学（HTTP/WWWOXACUK/）排名第25，PRESENCE网站信息量世界排名第

20、109，IMPACT网站信息影响力世界排名第37，OPENNESS数字资料档案数量世界排名第64，EXCELLENCE学术文章发表情况世界排名第13；东京大学（HTTP/WWWUTOKYOACJP/）排名第42，PRESENCE网站信息量世界排名第96，IMPACT网站信息影响力世界排名第103，OPENNESS数字资料档案数量世界排名第52，EXCELLENCE学术文章发表情况世界排名第20；从网站建设情况来看，国内关于校园网站建设较多，虽然起步较国外晚，但是发展的速度很快，我国高校网站的建设还有很多不尽如人意的地方，其主要在于网站互动性的缺失，内容方面没有国外院校网站那么多，是因为国内采取

21、的形式较国外的不同。在创新方面比较欠缺，交互性的形式少。问题主要体现在这几个方面1缺乏组织协调，各部门各自为政。由于网络内容建设工作几乎全部下放到各部门，长期以来基本上一直处于一种各自为政的状态。各部门的网页风格迥异，都有各自不同的做法，不能做到统一。这样做出来的网页形形色色，拼凑成一个个学院，处室网站，显得很不协调。有必要加强组织协调工作，详细规划，明确分工，制定出相应的标准，彻底摒弃网站建设中的随意性。2内容单薄，更新滞后。内容单薄可以说是很大的硬伤。各部门名义上都有了自己的网站，但大多数部门网站能够提供浏览的内容非常有限，特别是深层次的内容严重缺乏。另外，网上内容严重滞后，更新速度慢。有

22、些部门的网站，时隔一年半载，其网页界面和内容仍是老样子。3重点失衡重行政管理，轻教学科研。校园网最主要的功能应该是要为教学，5科研服务。但有些校园网上的内容有关行政管理的偏多，而有关教学和科研的内容则相对较少。作为一个高校网站，这不能不说是重点失衡，本末倒置。4整个网站结构，层次不够清晰，使用不便。目前某些校园网首页的栏目设计太过粗略，有些内容欠缺，部分栏目名称及内容归类不够准确，整个结构显得有些混乱，结构层次偏深，用户需经过多次点击才能看到想要的内容。5部分网页制作粗糙，缺乏美感。高校网站，其页面应简洁明了，一方面不要过于呆板，另一方面也要避免过于花哨，做到实用与美观的有机结合。6缺乏检索途

23、径。传播学领域“互动性”研究的理论，为检视当前我国高校网站之发展提供了一个可操作化的设计架构。“互动性”的内涵做进一步分析，对我国高校网站的建设做一浅探，以增强人们关于互联网传播机制的认知和理解，并推进我国高校网站的在“交互性”方面的建设。13研究内容和拟解决的问题有多种方法会让一个网站的外观令人惊叹的。在创建时也有不同的设计趋势。由于网站是由他们的业务与其他很多人用来获取信息的途径，所以很重要的设计是很有吸引力的。长期面对一个设计不当的网站是一件比较痛苦的事情。一旦我们拥有了一个网站之后，我们会一定会看到它拥有专业的设计，它可以实现我们的目的。1排版创造性使用排版已被广泛的应用于网页设计排版

24、中。这些好的设计不只是使用的标准字体，而加上其使用自定义的字体。它使网站更具有可读性和吸引力。创造性地使用这种类型的方式确实可以有效的使用户可以立即得到该网站的新消息，特别是使用的字体是独一无二的，颜色是比较突出的。2图片的切换效果研究大图的使用也是一种趋势。这些图像是网站增加吸引力的网。虽然，已被使用过，但是现今它仍然在使用，使用它更具有现代感。使用这种设计的，设计出的网站也是比较抢眼的，特别是如果你有一个好的图片选择，不只是图像的形式，它应该与其网站更好的搭配。3单页布局的设计可避免不必要的网页，通过一个比较单一的页面布局，这是更有效的一个网站，6因为浏览者可以更专注于其内容。4交互性做一

25、个完整的网站有几样任务要完成比如复杂的交互功能，网页动画特效，网页UI设计，后期维护，可扩展性等。网站交互设计的用户的目的是增加网站的友好度，可用性和易用性，从而使用户能够简单，快速和有效地完成网站赋予或用户自身需要的服务，功能和目标。交互设计包含的内容界面设计，界面不仅设计美术方面，还涉及提供给用户某些事的能力。导航设计，导航设计是提供给用户去某个地方的能力，是用户能看到的网站结构。信息设计，信息设计就是通过网站传达给用户某些信息，用户可通过这些信息了解自己正在进行的某些事和应该如何进行某些事。14本章小结本章阐述了开发数字媒体技术系网站的研究背景和意义。介绍了国外高校网站的发展现状对比了目

26、前国内高校网站的现况了说明了建设数字媒体技术系网站建设的总体规划思想。最后对于本文课题的研究内容和拟定解决的几个关键问题进行了探讨。7第2章前端开发工具及相关技术21前端开发环境网站前端开发，即网页架构设计。主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。用DREAMWEARE，CSS，JS等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台程序的整合工作。另外，要对网站做一些相应的更新，维护及优化。整个网站开发的流程在后面有具体介绍。前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合

27、3。22前端开发工具1MYECLIPSE简介MYECLIPSE企业级工作平台（MYECLIPSEENTERPRISEWORKBENCH，简称MYECLIPSE）是对ECLIPSEIDE的扩展，利用它我们可以在数据库和JAVAEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JAVAEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，STRUTS，JSP，CSS，JAVASCRIPT，SPRING，SQL，HIBERNATE。MYECLIPSE4结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。简单而言，M

28、YECLIPSE是ECLIPSE的插件，也是一款功能强大的JAVAEE集成开发环境，支持代码编写，配置，测试以及除错，MYECLIPSE6。0以前版本需先安装ECLIPSE。MYECLIPSE6。0以后版本安装时不需安装ECLIPSE。2DREAMWEAREDREAMWEARE是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页5。使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，DREAMWEARE会自

29、动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3PHOTOSHOP8ADOBEPHOTOSHOP，简称“PS”，是一个由ADOBESYSTEMS开发和发行的图像处理软件。PHOTOSHOP主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。在网站前端开发过程中需要把图片用PHOTOSHOP处理成加载到网站页面的图片，用PHOTOSHOP制作矢量图形用作网站页面的修饰按钮。23前端开发相关技术231JAVASCRIPT简介JAVASCRIPT6的出现，它可以使得信息和用户之间不仅只是一种

30、显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的WEB页面的取代。JAVASCRIPT脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑JAVA家族将占领INTERNET网络的主导地位。因此，尽快掌握JAVASCRIPT脚本语言编程方法是我国广大用户日益关心的问题。232JAVASCRIPT基本特点1基于对象的语言JAVASCRIPT是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着

31、它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用7。2简单性JAVASCRIPT的简单性主要体现在首先它是一种基于JAVA基本语句和控制流之上的简单而紧凑的设计，从而对于学习JAVA是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。3安全性JAVASCRIPT是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。94动态性JAVASCRIPT是动态的，它可以直接对用户或客户输入做出响应，无须经过WEB服务程序。它对用户的

32、反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页HOMEPAGE中执行了某种操作所产生的动作，就称为“事件”EVENT。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。233CSS简介CSS8层叠样式表是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。什么是CSS

33、CSS中，CASCADING是“层叠”的意思，也就是说在同一个WEB文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。1内联式样式表；2嵌入式样式表；3外部式样式表；CSS的特点CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。234JQUERYJQUERY9是继PROTOTYPE之后又一个

34、优秀的JAVASCRIPT框架。其宗旨是WRITELESS，DOMORE，写更少的代码，做更多的事情。它是轻量级的JS库压缩后只10有21K，这是其它的JS库所不及的，它兼容CSS3，还兼容各种浏览器（IE6。0，FF1。5，SAFARI2。0，OPERA9。0）。JQUERY是一个快速的，简洁的JAVASCRIPT库，使用户能更方便地处理HTMLDOCUMENTS，EVENTS，实现动画效果。JQUERY其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页特效。本文主要论述了如何在WEB开发中使用JQUERY技术，丰富网站的交互性和用户体验性10。JQUERY是一套JAVASCRIP脚

35、本库。“JAVASCRIPT轻量级脚本库“系列文章。JAVASCRIPT脚本库类似于。NET的类库，这些工具方法或对象方法封装在类库中，方便用户使用。注意JQUERY是脚本库，而不是脚本框架。“库“不等于“框架“，比如“SYSTEM程序集“是类库，而“ASPNETMVC“是框架。JQUERY并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。脚本库能够帮助完成编码逻辑，实现业务功能。使用JQUERY将极大的提高编写JAVASCRIPT代码的效率，让写出来的代码更加优雅，更加健壮。JQUERY有如下特点1提供了强大的功能函数使用这些功能函数，能够帮助我们快速完成各种功能，而且会

36、让我们的代码异常简洁。2解决浏览器兼容性问题JAVASCRIPT脚本在不同浏览器的兼容性一直是WEB开发人员的噩梦，常常一个页面在IE9，FIREFOX下运行正常，在IE6下就出现莫名其妙的问题。针对不同的浏览器编写不同的脚本是一件痛苦的事情。有了JQUERY我们将从这个噩梦中醒来，比如在JQUERY中的EVENT事件对象已经被格式化成所有浏览器通用的，从前要根据EVENT获取事件触发者，在IE下是EVENTSRCELEMENTS而FF等标准浏览器下下是EVENT。TARGET。JQUERY则通过统一EVENT对象，让我们可以在所有浏览器中使用EVENT。TARGET获取事件对象。3实现丰富的

37、UIJQUERY可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和FF的渐变动画，使用大量JAVASCRIPT代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。再开发类似的功能还要再次费心费力。如今使用JQUERY就可以帮助我们快速11完成此类应用。4纠正错误的脚本知识大部分开发人员对于JAVASCRIPT存在错误的认识。比如在页面中编写加载时即执行的操作DOM的语句，在HTML元素或者DOCUMENT对象上直接添加“ONCLICK“属性，不知道ONCLICK其实是一个匿名函数等等。拥有这些错误脚本知识的技术人员也

38、能完成所有的开发工作，但是这样的程序是不健壮的。比如“在页面中编写加载时即执行的操作DOM的语句“，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器“终止操作“的错误。JQUERY提供了很多简便的方法帮助我们解决这些问题，一旦使用JQUERY你就将纠正这些错误的知识因为我们都是用标准的正确的JQUERY脚本编写方法24本章小结本章介绍了开发数字媒体技术系网站前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如JAVASCRIPT，CSS，JQUREY等。以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。12第3章前端布局分析与设计31前端总体开发流

39、程及设计前端设计WEB前端开发技术是一个先易后难的过程，主要包括三个要素HTML，CSS和JAVASCRIPT，这就要求前端开发工程师不仅要掌握基本的WEB前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。311分层开发在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项目内容的不同，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。如图31所示图31分层开发图这样做的好处是能根据项目的不同，划分出不同的功能

40、模块，合理的安排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发效率。312代码编写前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进行，大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前13端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建统一框架。前端设计样式确

41、定以后，就进行通用模块样式的设计（包括按钮，分页，默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要。如图32所示图32编写代码流程图代码编写过程中让前端提前进入开发流程中来，在样式属性后就进行HTML结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间，提高开发效率，能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。313

42、内部测试与后续优化前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求如图33所示图33内部测试流程图14图34前端开发流程图这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强度，高质量的开发需要。代码更可控，开

43、发效率更高。32前端UI设计321模块分布UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计如图35,36所示15正确的层次布局错误的布局图35布局对比图在数字媒体技术系网站中UI层次感的体现图36数字媒体技术系页面布局图322颜色配置产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是000000，例如经常写的RED，COLORFF0000；缩写COLORF00；COLORGRAY808080；是比较深的灰色。所谓邻近色，就是在色带上相邻近的

44、颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是学院网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色16彩作为背景色，同时背景色要与文字的色彩对比强烈一些。首页的顶端使用灰色标题图片下面用全景图这两个部分过度的很自然。在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。违纪一点禁止大面积使用白色文字，

45、特别是较深的背景下，禁止大面积使用加粗文字如图37所示图37字体颜色变换323CSS元素CSS块元素BLOCK总是另起一行开始；高度，行高以及顶，底边距都可控制常用的有DIVPTABLEH1ULDL等等。CSS内联元素INLINE和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有ASTRONGFONTIMGINPUTSPANSMALLLABEL等等11如图38所示DISPLAYINLINEBLOCK将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。图38CSS浮动CSS间距12相应的设置大小，行高，

46、首行缩进，间距（PADDING，MARGIN）17内边距PADDING元素的内边距在边框和内容区之间。PADDING10PX5PX15PX20PX上10PX右5PX下15PX左20PXPADDING10PX5PX15PX上右左下PADDING10PX15PX上右下左无标题文档这个的宽度实质已经增加了40PX外边距MARGIN围绕在元素边框的空白区域是外边距。MARGIN支持负值，在页面布局中，应该大胆的用，可以解决很多问题。最常用的就是DIV居中MARGIN0AUTO当然一定要固定宽度。无标题文档这个属性是无法居中的，如图所示39所示图39元素边框调整33交互设计与UI由于视觉设计本身是一种比

47、较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离，切割13。这种情况下，交互设计尤为重要，既不能失去UI设计的特性，又要确保UI18设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术如图310，311所示图310导航栏图311咨询中心34点，线，面的运用先进开发思想和良好设计模式的前端模块化技术正逐渐成熟14。根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模块化开发策略，阐述了每种开发策略的具体实现方法，常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运用。34

48、1点的运用在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少如图312所示19图312点的应用342线的运用线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图313图313线的应用35网站结构布局及设计351网站首页结构实际内容占据网页的大部分空间，为5080，导航部分不超过20。颜色的选择以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的20字体，正文使用的是静止的文字，且字体足够大，以便于阅

49、读15。数字媒体技术系网站主要用来进行教学信息的发布与显示。作为一个网站，应该由一些相关及相对独立的模块整合而成。本网站系统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容，每个大的模块下又细分为几个的功能模块。制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技术系院校类网站的设计思路，拥有完善的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。由上面的分析，网站前端的结构设计成。如下图314所示图314网站整体结构图352主题鲜明，富有特色在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO16标志应充分加以利用。调动一切手段充分表现网站的个性和情趣，突出个性，这样才能够办出网站的特色如图315所示21图315网站标题LOGO353版式编排布局合理性图316网站版式排版图网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加