Web2.0时代网站前端开发大师研究分析

任 勇

（武汉职业技术学院，湖北 武汉 430074）

Web2.0时代网站前端开发大师研究分析

任 勇

（武汉职业技术学院，湖北 武汉 430074）

随着Web 2.0时代的到来，互联网进入千家万户，各种应用以Web的形式展现在人们眼前，对网站前端设计师的需求也越来越多。文章阐述了网站前端的概念、发展现状、发展趋势以及如何成为一个好的前端设计师以及所需要的基本技能。

网站前端；前端开发；Web 2.0

1 网站前端的概念

所谓网站前端是一个综合的概念，前端简单来说就是来做网站前端的，具体就是采用Web标准化，根据需求设计出来的具有很强的美学意义页面，以文字、图片、多媒体等形式承载一定的信息提供给用户。前端页面文档构成在元素上可以分为行为、结构和表现3个层次，元素行为主要是由DOM，Javascript等脚本语言来实现；结构主要是由HTML，XHTML和XML语言来实现；表现主要是由CSS语言来实现。也就是Web用户可以看得见碰得着的东西，如通过浏览器可以看页面新闻，可以看视频直播等。

2 网站前端的发展现状

随着网站在互联网的的数量和规模方面的快速发展和网民数量的日益庞大，Web应用已经深入到人们生活和工作的每一个角落，成了必不可少的媒介，这样也直接导致网民对网站前端的设计要求越来越多样化，要求也越来越高，对设计师的技能要求也越来越高。

早期网站前端设计使用表格来定位和排版网页风靡一时，通过嵌套大量的表格保证网页内容不错位，导致了维护和更新非常困难，工作量大，产生了大量冗余的代码，不利于网站的优化，因此表格制作网页的时代逐渐消退。随之而来的是CSS+DIV—当前网页布局的主流技术。CSS+DIV最核心的优点是实现了网页的内容、表现和行为的分离，减少了冗余的代码，提高了网页访问速度，使得页面的改版更加灵活方便。从前端人才的数量跟结构上来说也有很大的缺口，很多人把网页设计师理解为前端开发，这个是不对的，前端开发需要更多的知识结构与经验。

3 网站前端的发展趋势

现在网站前端的开发越来越进步，以前一个可以全部设计开发出来慢慢地被取代，随着JS，jQuery，SEO，Ajax等技术的不断发展变革，用户制作个性的网站跟页面越来越多样化。这就需要前端设计师充分考虑编码的规范性、代码的安全性、页面性能优化、SEO的优化这些问题，以此来提高网站前端的性能。网站前端设计方面未来更趋向于HTML5和CSS3的结合。HTML5以HTML4为基础，对HTML4进行了大量的修改，HTML5规范是基于用户优先原则编写，宗旨是“用户即上帝”。CSS3把以前很多需要图片和JS结合才能实现的效果，用几行代码就实现了，不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。特别现在随着智能手机、各种平板等终端的普及，网站前端的展示方式不仅仅是计算机的浏览器，各种移动终端都可以与用户进行信息展示，需要考虑跨平台兼容，注意与用户的交互性和浏览的舒适性。这些用户与终端的增加也给前端的发展带来更多的机遇。

4 网站前端设计师需要的基本知识

想要成为一名前端工程师的大牛，必须有丰富的知识储备并且掌握各种开发软件的使用。

（1）计算机基础知识储备。编译原理、计算机网络、操作系统、算法原理、软件工程、软件测试原理。对这个课程知识有基本的了解掌握，是计算机入门的基础。

（2）页面切图。所需要的知识H T M L，CSS和PhotoShop。HTML是超文本标记语言，由很多的标记组成，通过标记来规范页面元素，制作出的网页文件可以在各种浏览器中打开，前端设计师需要掌握HTML基本网页标记的使用。CSS层叠新式表可以提供丰富的样式，通过标记的属性可以控制标记中的内容按照指定的CSS样式来表现。通过HTTML的DIV标签和CSS的结合使用进行页面布局，可以使页面内容和行为分离，缓解Web服务器的压力，减少页面的冗余代码，提高站点页面的加载速度，实现页面表现的多样性，提升网站改版的便捷度和页面的安全性，有了这个基础可以通过PhotoShop切片功能，得到所需要的网页布局素材，也可以通过PhotoShop进行个别素材的修改。

（3）掌握前端标准和规范。所涉及的知识包括：W3C，DOM，BOM，XHTML，XML，JSON，HTML5，CSS3，ECMAScript，CommonJS，HTTP1.1。其中W3C最重要的一项工作就是发展Web规范，规定Web的通信协议和一些构建模块，如HTML规范，HTML5的规范等，前端设计师必须掌握这些规范并按照规范来进行设计；DOM文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口，DOM技术可以使页面的交互性大大增强；BOM是浏览器的对象模型，可以用来获取或设置浏览器的属性、行为；XHTML是一种可扩展的标记语言，主要是实现HTML向XML的过渡，Web标准就是基于XHTML的应用；XML可扩展标记语言主要用来传输和存储数据。JSON （JavaScript Object Notation） 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，也是JavaScript 对象表示语法的子集；HTML5和CSS3未来前端发展的趋势；CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库；HTTP1.1超文本传输协议版本1.1，可以使浏览器更加高效，网络传输减少YUI。

（4）前端框架和库。所涉及的知识包括：jQuery，YUI3，Prototype，Mootools，ExtJS，Smart，Django，Zend，QUnit，Jasmine，前端MVC。其中掌握必须的JS框架如jQuery，YUI3，Prototype，Mootools，ExtJS等。JS框架主要是javaScript库，能使用户更方便地处理HTML documents，events，方便实现交互；Web开发框架Django；前端必须掌握MVC框架，MVC是一种使用模型、视图和控制器设计创建Web应用程序的模式，Model表示应用程序核心如数据库记录表，View显示数据，Controller处理输入数据。

（5）移动终端的知识。所涉及的知识包括：jQueryMobile，HTML5，CSS3，iPhone，iPad，iOs，Android，responsive UI Design。其中jQuery Mobile是jQuery框架的一个组件（而非jQuery的移动版本）。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile可以让开发人员开发出真正的移动Web网站。需要对移动终端iphone手机使用跟了解，iPad平板电脑的使用跟了解，对iOs系统的掌握，对Android系统的掌握，才能实现移动终端UI设计。

（6）编程语言。所涉及的知识JavaScript，PHP，Python，Perl，Ruby，BashShell，NodeJS，FlashAS。其中基本的JS，JS框架知识，PHP网站设计是最流行的通用开源脚本语言，它的语法兼顾了C语言、Java语言和Perl的优点，上手快，使用广泛，适合Web开发领HTML标记的CI域，PHP将程序语言嵌入到HTML文档中，执行的效率要比生成HTML标记的CGI高许多。

（7）浏览器的兼容性。所涉及的浏览器IE6，IE7，IE8，IE9，Firefox3.6，Firefox4，Firefox5，Firefox6，Firefox7，Firefox8，Chrome，Opera，Safari。在对页面进行布局时必须掌握CSS的属性值在各个浏览器中的效果，使用必要的CSShack来兼容不同的浏览器，避免同样的布局在不同的浏览器中显示混乱，这也是使用DIV+CSS布局必须考虑的内容。

（8）页面性能优化。所涉及的知识包括：WebPageTest，ShowSlow，YSlow，34Rule，PageSpeed，HttpWatch，DynaTrace’s Ajax。通过http请求优化，利用客户端的缓存对网站进行优化，使用压缩技术加快页面传输，对页面元素进行优化，在页面中使用Ajax技术优化应用。可以使用其中的ShowSlow，YSlow工具搭建环境对页面性能进行测试查看优化的结果。

（9）调试工具。所涉及的知识包括：Firebug，Firebuglite，Web Inspector，YSlow，Smushit，IEDeveloperToolBar，IETester，SuperPreview，JsBeautifier，Fiddler，WireShark，tcpdum。其中可以使用Web Inspector工具对网页进行审查；使用Firebug检查调试页面的JavaScript；使用IETester测试页面在各种版本浏览器下的运行情况，使用WireShark测试网络封等。

5 结语

想要成一名网站前端大师并非短时间内就可以练成，需要不断地积累知识和实践，当然上面所提到的知识技能并不是要把所有的都掌握了才可以，同一类型的掌握一到两个就行。在实际前端开发的时候并非将所有的知识都用上，有时只需要其中一部分，所以在这个大师之路上需要先掌握必须知识，再不断扩充知识面，然后融会贯通、灵活运用、不断学习，最后才能成为大师。

[1]郑逸凡.高并发网站的前端优化技术研究[J].通化师范学院学报，2015（8）：4-6.

[2]张晓红.网站前端模块化开发策略研究[J].计算机时代，2013（2）：38-39.

[3]周志坚.高职院校网站前端设计课程教学模块的选择思路[J].科技风，2015（22）：245-254.

Study and analysis of the front end master in Web 2.0 era

Ren Yong
（Wuhan Polytechnic, Wuhan 430074, China）

With the arrival of the era of Web 2.0, the Internet has been popular with thousands of households, a variety of applications appears in front of people in the form of Web, there are more and more demands for website designer. This paper expounds the concept of Web front-end development status, development trend and how to become a good designer and basic skills required.

front end of the website; front end development; Web 2.0

任勇（1984— ），男，湖北襄樊。