Web前端页面设计毕业论文.docx

1、21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也 越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的 作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系 建立本院系美观，专业，易于维护管理的网站已经势在必行。本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必 须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示 的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很 简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚, 弄明白，这样

2、在开发的过程中才会得心应手。分析并解决实现中的若干技术问题介绍了个性化页面的背景及 jsp+javascript +mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及 工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录, 用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进 行测试并分析结果。该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值。第1章前端开发工具及相关技术51.1 选题背景及意义51.2 前端开发工具71. 3前端开发相关技术8

3、1. 3. 1Javascript 简介81. 3. 2Java script 基本特点81. 3. 3CSS 简介91. 3. 4JQuery91.4本章小结11第2章前端布局分析与设计112.1前端总体开发流程及设计112. 1. 1分层开发122 . 1. 2代码编写123 .1.3内部测试与后续优化132. 2前端UI设计162. 2. 1模块分布162. 2. 2颜色配置162. 4点线的运用202.4. 1点的运用202. 4.2线的运用202. 5网站结构布局及设计212. 5. 1网站首页结构212. 5.2主题鲜明，富有特色222. 5. 3版式编排布局合理性232.6网站前

4、台页面设计252. 5. 1 首页262. 5. 2系内概况262. 5. 3系内新闻272. 6本章小结27第3章 主要功能的实现273. 1界面设计273. 2具体设计文档273. 3前台新闻文摘显示283. 3. 1网站装饰风格283. 3.2网站的链接结构283. 4可视化设计283. 5具体实现技术293. 5. 1 CSS在数字媒体技术系网站中的应用实例293. 5. 2应用JavaScript设计网页294. 1本章小结32致谢33第1章 前端开发工具及相关技术1.1选题背景及意义如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰 富全面，以此来满足了各种不同需求的浏

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

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

7、招生信息，就业信息，师资力量，科研成果，机构 设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入去建网站上？是因为如上所述的网站有的独特特性使得建设高校网站势 在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计 最基本的三个技能：HTML, CSS, JavaScript, PS矢量图像编辑技术。这个是前 端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相 应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不 会少。在进行开发前，需要对

8、这些概念弄清楚，弄明白，这样在开发的过程中才 会得心应手。建立本系网站发挥的作用如下：(1)数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息 化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时 空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。(2)数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的 桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提 高教学效率。数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与 教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课 堂的制约。它可以使不同的学院同处一

9、室，共同讨论，共同提高。地理上的界限 在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。(3)数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解 世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻 觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的 途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分 发掘自己的内在潜力，培植独特的个性和人格。(4)数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与 教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案, 专家论坛，网络观摩课，各科素材，多媒

10、体课件制作等内容为教师教研提供了极 佳的平台。有效地降低教研成本，提高效率。MyEclipse 简介MyEclipse 企业级工作平台(MyEclipse Enterprise Workbench ,简称 MyEclipse)是对EclipselDE的扩展，利用它我们可以在数据库和JavaEE的开 发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的 JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持 HTML, Struts, JSP, CSS, JavaScript, Spring, SQL, Hibernate。MyEclipse4结构上的这种模

11、块化，可以让我们在不影响其他模块的情况下，对 任一模块进行单独的扩展和升级。简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE 集成开发环境，支持代码编写，配置，测试以及除错，MyEclipse6o 0以前版本 需先安装Eclipse。MyEclipse6o 0以后版本安装时不需安装Eclipse。(1) DreamweareDreamweare是美国MACROMEDIA公司开发的集网页制作和管理网站于一身 的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网 页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充 满动感的网页

12、5。使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网 页位置或档案名称，Dreamweare会自动更新所有链接。使用支援文字，HTML码, HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。(2) Photoshop AdobePhotoshop,简称PS,是一个由Adobe Systems开发和发行的图像处 理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘 图工具，可以更有效的进行图片编辑工作。在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop制作矢量图形用作网站页面的修饰按

13、钮。1.3前端开发相关技术1. 3. 1 Java script 简介Java script的出现，它可以使得信息和用户之间不仅只是一种显示和浏 览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。从而基于 CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页 面的取代。Java script脚本正是满足这种需求而产生的语言。它深受广泛用户 的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实 现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导 地位。因此，尽快掌握java script脚本语言编程方法是我国广

14、大用户日益关心 的问题。1. 3. 2 Java script 基本特点(1)基于对象的语言java script是一种基于对象的语言，同时也可以看作一种面向对象的。 这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中 对象的方法与脚本的相互作用。(2)简单性java script的简单性主要体现在：首先它是一种基于Java基本语句和 控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其 次它的变量类型是采用弱类型，并未使用严格的数据类型。(3)安全性java script是一种安全性语言，它不允许访问本地的硬盘，并不能将数 据存入到服务器上，不允许对网

15、络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。(4)动态性java script是动态的，它可以直接对用户或客户输入做出响应，无须经 过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓 事件驱动，就是指在主页（Home Page）中执行了某种操作所产生的动作，就称为 “事件”（Event）。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当 事件发生后，可能会引起相应的事件响应。1. 3. 3 CSS 简介CSS （层叠样式表）是用来进行网页风格设计的，它简化并扩展了 HTML中 的各种标记，使得各个标记的属性更具有一般性和通用性

16、，大大提高了 HTML开 发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色， 背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就 可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。什么是CSS?CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可 以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级 越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。（1） 内联式样式表；（2）嵌入式样式表；（3）外部式样式表；CSS的特点CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说C

17、SS不能脱 离HTML,它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页 的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集 中管理样式信息，设定共享样式，将样式分类使用。1. 3. 4 JQueryJQuery9是继prototype之后又一个优秀的Javascript框架。其宗旨是WRITELESS, DO MORE,写更少的代码，做更多的事情。它是轻量级的js库（压 缩后只有21k）,这是其它的js库所不及的，它兼容CSS3,还兼容各种浏览器(IE 6o 0+, FF 1。5+, Safari 2。0+, Opera 9。 0+)。JQuery是一个

18、快速的，简洁的JavaScript库使用户能更方便地处理HTML documents, events,实现动画效果。jQueiy其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页 特效。本文主要论述了如何在Web开发中使用jQuery技术，丰富网站的交互性和 用户体验性。jQuery是一套Javascrip脚本库。“Javascript轻量级脚本库”系列文章。 Javascript脚本库类似于。NET的类库，这些工具方法或对象方法封装在类库中, 方便用户使用。注意jQuery是脚本库，而不是脚本框架。库不等于框架，比如 “System程序集是类库，而ASP . NET MVC是框架。j

19、Query并不能帮助我们解决 脚本的引用管理和功能管理，这些都是脚本框架要做的事。脚本库能够帮助完成编码逻辑，实现业务功能。使用jQuer将极大的提高 编写javascript代码的效率，让写出来的代码更加优雅，更加健壮。jQuery有如 下特点：(1)提供了强大的功能函数使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代 码异常简洁。(2)解决浏览器兼容性问题javascript脚本在不同浏览器的兼容性一直是Veb开发人员的噩梦，常常一个页面在IE9, Firefox下运行正常，在IE6下就出现莫名其妙的问题。针对不 同的浏览器编写不同的脚本是一件痛苦的事情。有了 jQuery

20、我们将从这个噩梦中 醒来，比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的，从 前要根据event获取事件触发者，在IE下是event. srcElements而ff等标准浏览 器下下是event。target jQuery则通过统一 event对象，让我们可以在所有浏 览器中使用evento target获取事件对象。(3)实现丰富的UIjQuer可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画, 使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间 就忘记了

21、。再开发类似的功能还要再次费心费力。如今使用jQuery就可以帮助 我们快速完成此类应用。(4)纠正错误的脚本知识大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载 时即执行的操作DOM的语句，在HTML元素或者document对象上直接添加 “onclick属性，不知道onclick其实是一个匿名函数等等。拥有这些错误脚本知 识的技术人员也能完成所有的开发工作，但是这样的程序是不健壮的。比如在页 面中编写加载时即执行的操作D0M的语句，当页面代码很小用户加载很快时没有 问题，当页面加载稍慢时就会出现浏览器终止操作的错误。jQuery提供了很多简 便的方法帮助我们解决这

22、些问题，一旦使用jQuery你就将纠正这些错误的知识一 因为我们都是用标准的正确的jQuery脚本编写方法！1.4本章小结本章介绍了开发数字媒体技术系网站前端所需要的开发工具，同时讲述了相 关的前端开发技术比如：Java script , CSS , jqurey等。以便以后的开发过中 能够对这些开发工具盒技术有深刻的理解第2章 前端布局分析与设计2.1前端总体开发流程及设计前端设计Web前端开发技术是一个先易后难的过程主要包括三个要素： HTML, CSS和JavaScript,这就要求前端开发工程师不仅要掌握基本的Web前端 开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运

23、用各种工 具进行辅助开发以及理论层面的知识，包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项 目内容的不同，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底 层JS搭建，JS交互效果，内部测试，代码优化。如图2-1所示：这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安 排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发率。图2-1分层开发图2.1.2 代码编写前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进行,大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建

24、大 致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正 式的页面后交给开发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前 介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建 统一框架。前端设计样式确定以后，就进行通用模块样式的设计（包括按钮，分页, 默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML 时候充分发挥想象尽可能的满足后期样式表现

25、的需要。如图2-2所示：图2-2编写代码流程图代码编写过程中让前端提前进入开发流程中来,在样式属性后就进行HTML 结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开 发时间,提高开发效率,能在前端对全局页面的把控。在此同时也强调规范和模块 化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而 模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。2.1.3 内部测试与后续优化前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面 样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当 页面提交开发以后再做修改是一件很麻烦的事情

26、。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求如图2-3所示:图2-3内部测试流程图图2-4前端开发流程图这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过了很 长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处 也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强 度，高质量的开发需要。代码更可控，开发效率更高。2.2前端UI设计2. 2. 1模块分布UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法； 其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰

27、明了。 下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计2. 2.2颜色配置产生丰富色彩的三原色是红，绿，蓝，也就是RGB,十六进制是00 00 00, 例如经常写的 red, color:#FF0000； 缩写 color:#F00；图2-7字体颜色变换color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的 颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使 网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰 白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是学 院网站所以要体现一种淡雅

28、，自然的色彩风格。背景色一般采用素淡清雅的色彩, 避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的 色彩对比强烈一些。首页的顶端使用灰色标题图片下面用全景图这两个部分过度 的很自然。在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成 红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅 读。违纪一点禁止大面积使用白色文字，特别是较深的背景下，禁止大面积使用 加粗文字如图2-7所示：2. 2. 3 CSS 元素CSS块元素(block)总是另起一行开始；高度，行高以及顶，底边距都可 控制常用的有：div p table hl ul dl等等。内联元

29、素(inline)和其它元素 都在一行上；高度，行高以及顶，底边距不可改变；常用的有：a strong font img input span small label 等等如图 2-8 所示：Display: inline-block将对象呈递为内联对象，但是对象的内容作为块 对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不 是所有浏览器都识别。图2-8 CSS浮动CSS间距相应的设置大小，行高，首行缩进，间距(padding, margin) 内边距padding：元素的内边距在边框和内容区之间。padding: 10px 5px 15px 20px;上 lOpx 右

30、5px T 15Px 左 20pxpadding: lOpx 5px 15px;上右左下 padding: lOpx 15px;上右下左div style=/width: lOOpx; padding:0 20px;“无 标题文档/div这个的宽度实质已经增加了 40Px外边距margin：围绕在元素边 框的空白区域是外边距。margin支持负值，在页面布局中，应该大胆的用，可以 解决很多问题。最常用的就是div居中:margin:。auto;当然一定要固定宽度。 无标题文档/div这个属性是无法居中的，如图所示2-9所示:图2-9元素边框调整3. 3交互设计与UI由于视觉设计本身是一种比较主

31、观的创作性工作，那些已经被 制定好的视觉结构常常因设计师的“审美需要”而被剥离，切割。这种情况下，交互设计尤为重要，既不能失去UI设计的特性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥, 这是一种艺术如图2-10, 2-11所示:图2-10导航栏图2-11咨询中心2.4点，线，面的运用先进开发思想和良好设计模式的前端模块化技术正逐渐成熟14。 根据网站前端模块化的不同开发思想，详细分析了目前常见的三种模 块化开发策略，阐述了每种开发策略的具体实现方法，常见的框架与 工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些 方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运 用。2. 4. 1点的运用在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息， 点的引导作用必不可少如图2-12所示：图2-12点的应用2.4.2线的运用线不但起到了页面的分割作用，很好的运