Web前端页面设计
它兼容CSS3，还兼容各种浏览器 （IE 6。0+， FF 1。5+， Safari 2。
0+， Opera 9。0+）。
JQuery是一个快速的，简洁的JavaScript库使用户能更方便地处理HTML
documents，events，实现动画效果。
jQuery其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页
特效。本文主要论述了如何在Web开发中使用jQuery技术，丰富网站的交互性和用户体验性。
jQuery是一套Javascrip脚本库。\Javascript轻量级脚本库\系列文章。
Javascript脚本库类似于。NET的类库， 这些工具方法或对象方法封装在类库中，方便用户使用。
注意jQuery是脚本库， 而不是脚本框架。\库\不等于\框架\， 比如
\System程序集\是类库，而\是框架。 jQuery并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。
脚本库能够帮助完成编码逻辑，实现业务功能。使用jQuery将极大的提高
编写javascript代码的效率，让写出来的代码更加优雅，更加健壮。jQuery有如下特点：
(1) 提供了强大的功能函数
使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代
码异常简洁。
(2) 解决浏览器兼容性问题
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦，常常
一个页面在IE9，Firefox下运行正常，在IE6下就出现莫名其妙的问题。 针对不同的浏览器编写不同的脚本是一件痛苦的事情。有了jQuery我们将从这个噩梦中醒来， 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的，从前要根据event获取事件触发者，在IE下是event.srcElements 而ff等标准浏览器下下是event。target。jQuery则通过统一event对象，让我们可以在所有浏览器中使用event。target获取事件对象。
11
Web前端页面设计
(3) 实现丰富的UI
jQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的
用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画，使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。 再开发类似的功能还要再次费心费力。 如今使用jQuery就可以帮助我们快速完成此类应用。
(4) 纠正错误的脚本知识
大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载
时即执行的操作DOM的语句，在HTML元素或者document对象上直接添加\属性，不知道onclick其实是一个匿名函数等等。拥有这些错误脚本知识的技术人员也能完成所有的开发工作，但是这样的程序是不健壮的。比如\在页面中编写加载时即执行的操作DOM的语句\，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器\终止操作\的错误。jQuery提供了很多简便的方法帮助我们解决这些问题， 一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!
1.4 本章小结
本章介绍了开发数字媒体技术系网站前端所需要的开发工具，同时讲述了相关的前端开发技术比如：Java script ，CSS ，jqurey等。以便以后的开发过中能够对这些开发工具盒技术有深刻的理解
第2章 前端布局分析与设计
2.1 前端总体开发流程及设计
前端设计Web前端开发技术是一个先易后难的过程主要包括三个要素：
HTML，CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，
12
Web前端页面设计
包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持
等。
2.1.1 分层开发
在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项
目内容的不同，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。如图2-1所示：
这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安
排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发率。
总结结构搭建
模块制作 页面制作
分层开发
底层JS搭建 JS交互效果 内部测试 代码优化
图2-1分层开发图
2.1.2 代码编写
前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进行， 大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大
致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。
13
Web前端页面设计
这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前
介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。
确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找 出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建
统一框架。
前端设计样式确定以后，就进行通用模块样式的设计（包括按钮，分页，
默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。
在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML
时候充分发挥想象尽可能的满足后期样式表现的需要 。如图2-2所示：
PRD prototype 前端制作(HTML)
页面设计 前端制作(样式完善)
提交开发
代码编写
图 2-2 编写代码流程图
代码编写过程中让前端提前进入开发流程中来,在样式属性后就进行HTML
结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间,提高开发效率,能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。
14
Web前端页面设计
2.1.3 内部测试与后续优化
前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面
样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，
就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和
减少外部HTTP请求如图2-3所示：
设计参与测试
内部测试与后续优化
整体测试 后续代码优化
图2-3 内部测试流程图
15