作者：赖定清,林坚
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
大巧不工：Web前端设计修炼之道试读：
前言
前端设计的重要性如同一个人的着装与外表，站点的设计总是最先吸引人们的眼球。布局是否合理、风格是否简洁、配色是否和谐、流程是否通畅、操作是否便捷，这些前端特性都影响着用户对站点的认可度。随着用户体验、可用性、可交互性等越来越多前端术语的出现，我们可以看到，前端设计在更吸引人关注的同时已进入一个新的发展阶段。随着前端架构师、用户体验设计师等新职位的出现，前端设计正逐渐成为软件开发人员的新焦点，越来越多的开发者开始在这个领域展开研究。
作为保证Web应用产品价值的核心元素，前端设计已经不是简单的HTML、CSS、Ajax等元素的整合了，它更关注交互的流畅性、操作的便利性、流程的合理性、结构的清晰度及可维护性、页面展现的兼容性以及同后端程序的良好桥接等，应该能够在真正理解Web应用的需求的基础上放眼全局，把握整个前端的解决方案。因此，新的时期赋予了前端开发人员新的使命，业内需要更为全能的开发人才。前端设计面临的问题
目前国内前端设计的水平参差不齐，业内有个奇怪的现象，更多的开发人员倾向且擅长后端架构的设计。这些年笔者参与招聘的时候也发现了这个问题，几乎所有来应聘的大学生都表示他们擅长做后端开发，对前端往往一窍不通，甚至带有鄙夷的味道，认为没有水平的人才会去做前端设计。这其实是对前端设计的一种非常错误的看法，在校大学生有这样的想法则更令人担忧，这意味着中国软件行业的前端设计领域将面临人才储备匮乏的困境。
造成这种现象的原因是多方面的：
前端涉及的技术概念多而繁杂，参考资料系统性不足。
现有的关于前端的书籍往往只针对某个点，并没有针对设计思路和整合思路进行讲解。
我国大学计算机基础教育并不重视前端设计领域。
国内许多企业对前端设计人员的重视程度不高。为什么要写这本书
这本书的第一个目的是修正人们对前端设计的错误理解，尤其是针对那些有一定工作经验的开发人员和即将进入计算机行业的莘莘学子。前端设计所涉及的技术非常繁杂，因此许多关于前端设计的书籍往往只关注其中的某个点，比如图片处理或CSS设计等。久而久之，就有人对前端设计产生了误解，有的人认为前端设计人员就是美工，有的人则认为前端设计人员就是做页面的，其实前端设计的世界远比他们想象中的要广阔和精彩。
本书的第二个目的是从更全局的角度对前端设计的知识进行一次系统的梳理，让读者能宏观地领略到整个前端设计领域的全貌。同时，本书结合具体案例描述了如何理解需求、如何提高用户体验、如何为Web应用提供最佳的解决方案等现实中常见的问题。希望本书能让大家对前端设计有新的认知并重视起来，为前端设计行业的发展尽绵薄之力。本书面向的读者
本书主要针对以下三类读者：
有一定Web应用或企业级应用开发经验的开发人员，本书中的一些解决方案对你们实施项目会有所帮助。
前端设计师与用户体验设计师，希望本书中的一些思路或者案例能够点燃你们的思想火花。
准备投身软件行业的大学毕业生，这本书对你们来说是一份总纲，以此书为纲要，再根据自己的实际需求去阅读其他的相关书籍，可以迅速提高你们对前端设计的理解。
此外，本书也适用于关注以下这些关键词的读者：
HTML
CSS
JavaScript
XML
Web 2.0
REST如何阅读本书
在开始阅读本书之前，请先迅速地浏览本书的目录。建议初学者通读此书，同时辅之以一些技术书籍，这样更有助于理解书中的一些观点和思路；对于有经验的前端设计人员，你可以选择感兴趣的章节来看；对于希望改进自己开发的应用的读者来说，你可以把本书的性能优化章节当成工具书来翻阅，其中包含了许多常见的优化方案。
为了将更多精彩的设计案例和经典的代码实现分享给本书的读[1]者，我们特为本书做了一个网站，它也是我们与读者朋友沟通的一个平台和窗口。此站点从构思以及技术实现上都贯彻了本书中描述的思路，可以说该站点就是本书的最大案例。同时，我们会在站点上与读者分享许多前端设计的创意及解决方案。
[1]www.fedonline.cn。致谢
五月本书初稿完成，这时福州的天气已经逐渐热起来了，回首过去的几个月感慨万千。我素来喜欢写作，但是真正尝试动笔去完成一本书的时候，才体会其中的艰辛。尽管本书封面上只署了两个人的名字，但是完成本书的却不只两个人。罗马不是一个人建造的，这本书仅凭借我和asone也是不能完工的。
首先，必须感谢华章公司的每一位工作人员，尤其是杨福川先生和曾珊女士，他为我们提供了新作者所必需的指导与支持。
其次，特别感谢傅一民先生，他对本书性能优化的章节贡献巨大，同时感谢新大陆公司的部门同事以及业内的同仁，他们也对本书提出了宝贵的意见。
再次，感谢那些所谓的“狐朋狗友”，写这本书占用了我许多的业余时间，有他们的鼓励才促使我和asone坚持下来。
最后，感谢我们的家人，特别是我善解人意的老婆snow、赖嫂以及最可爱无敌的赖雅心小朋友，正是他们的爱为这本书注入了鲜活的生命。林坚2010年6月第1章Web前端开发ABC本章内容Web大局观大局观地位、曲线和使命前端开发所需掌握的技术前端开发常用的工具小结1.1 Web大局观
网络已经融入了人们的生活，很多人一打开电脑就会去上网，可以在网上看新闻、订票、写博客、分享照片、听音乐，或者通过YouTube看一位流浪歌手的表演，Web已经成为人们生活中不可缺少的部分。到目前为止，Web技术已经有接近20年的发展历史，如果算上Web的史前阶段，其发展历史就更加长了。下面就请大家随着我的笔触，将时钟倒拨，回顾那段曾经的岁月。1.1.1 混沌初开——Web的诞生
1969年10月29日晚10:30（美国西部时间），互联网的前身ARPAnet迎来了关键时刻，Leonard Kleinrock教授（见图1-1）通过一条电话专线把加州大学洛杉矶分校（UCLA）的一台主机连接到斯坦福大学研究院（SRI）的一台主机上。为了测试连接是否畅通，Kleinrock安排UCLA的一些学生发送单词"log"，而SRI的主机在接收到该单词后则输入"in"作出回应。研究员Charley Kline负责发送"log"这个单词，然而，当他输入字母"L"和"O"，还没来得及输入字母"G"时，系统就崩溃了。紧接着的下一次传输虽然成功了，但"LO"这个未敲完的词却成了互联网第一次发送的单词，其意义一点儿也不亚于莫尔斯的第一篇电文——“上帝都做了什么？”或者贝尔的第一个电话——“来吧，沃森，我需要你。”这一天，互联网诞生了，其深远的意义不言而喻。
1983年6月23日，第一个DNS数据包从互联网上仅有的数百台主机中的一台中发出，并且得到了正式的响应。这意味着Paul Mockapetris、Craig Partridge和已故的Jon Postel构建的域名系统诞生了。如果没有DNS，可能就没有现在的互联网。
1990年12月25日，世界人民收到了Tim Berners Lee（见图1-2）送出的最值得感恩的圣诞礼物——这一天Web诞生了，Berners Lee和Cailliau利用全球首台Web服务器进行了通信。Berners Lee最初开发的是一个超文本系统，目的是为了能够跟踪CERN高能物理部门的上百个项目、软件和计算机的研发和使用情况。利用一台NexT计算机，Berners Lee在1990年秋编写了一个相当简陋的浏览器，然后与Cailliau一起创建了第一份Web文本：CERN的电话簿。1991年8月，Berners Lee向全球公布了这项发明。图 1-1 互联网之父——Leonard Kleinrock图 1-2 Web之父——Tim Berners Lee
1993年3月15日凌晨1:11（美国中部时间），图形浏览器诞生。Marc Andreessen和Eric Bina都是伊利诺伊大学国家超级计算机应用中心的天才学生。然而，当他们宣称他们为X Windows终端开发的Mosaic浏览器（见图1-3）的首个Beta版可以下载时，他们并未意识到这个图形浏览器将会对Web的发展带来多么巨大的影响。大约一年后，Andreessen和SGI的Jim Clark共同创建了Mosaic通信公司，后更名为Netscape。微软购买了Mosaic的许可证，将其源代码用在了IE 1.0中。于是，浏览器大战从此开始——这场疯狂的竞赛让静态的Web页面演变为多媒体的奢华场所。图 1-3 第一个图形化的浏览器Mosaic1.1.2 网络技术的领导者——W3C
1991年，CREN正式发布了Web的技术标准。如今，与Web相关的标准和规范都是由著名的W3C组织来进行管理和维护的。W3C是World Wide Web Consortium的简称，即万维网联盟，又称W3C理事会，其官方网站为http://www.w3.org。它的成立是为了解决Web应用中不同平台、技术和开发者带来的不兼容性，保障信息的完整流通，同时制定一系列的标准来督促Web应用开发者及内容提供者遵守这一标准。它的会员包括生产技术及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，它们一起协同工作，致力于在互联网的发展方向上达成共识。Web标准不是某一项标准，而是一系列的技术标准，所有的Web都应由三个部分组成：结构、表现、行为。所以我们在做一些架构时经常会强调这样一种说法：“结构与表现分离”，这也是前端开发人员遵守的第一原则。在这样一个结构组成的Web页面中，W3C也相对应地提出了以下与之对应的技术标准。
1.结构标准
HTML/XHTML：HTML是Web的基础之一，基于HTML, Web上开始出现丰富多彩的页面，蕴涵了各种信息：文本、图像、视频。W3C先后推出了多个HTML版本，分别是1997年12月的首个版本、1998年4月的更新版本和1999年12月推出的HTML 4.01版。XHTML是对HTML 4.01的扩展，在其中可以使用XML的语义功能。XHTML 1.0已于2000年1月作为推荐标准发布。XHTML Basic是对XHTML 1.0的独立于设备（如手机、PDA等）的扩展，于2000年12月发布。随后，2001年5月推出了XHTML的模块化版本XHTML 1.1。目前HTML 5草案最终版也将在2011年制定。
XML：1998年2月发布的XML 1.0是W3C最具前瞻性和最有影响力的标准之一。XML作为下一代Web的第一块重要基石，为分布式的、异构的数据交换提供了强大的功能，并且将数据本身和数据的表现分离。同时，就数据本身而言，数据的值和语义也是适当分离的。事实上，XML已经发展为一组技术，包括2001年5月发布的XML Schema、1999年1月发布的XML Namespaces、1999年11月发布的用于处理XML转换的XSLT和用于在XML文档中定位的XPath，以及2001年6月发布的XLink和XML Base等。此外，XML的出现为程序能够自动地处理Web数据和信息，以及Web服务（WSDL、SOAP、UDDI规范）提供了一种公共基础。
2.表现标准
CSS 1. 0于1996年12月推出，1998年5月CSS 2.0发布。CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是处理可扩展语言（XML）的标准编程接口，使得你可以访问页面的其他标准组件。由于不依赖于任何程序设计语言和网页描述语言，它为有效处理HTML和XML数据提供了一种标准的、独立的接口。DOM先后经历了3个版本，分别是1998年10月发布的DOM Level 1、2000年11月发布的DOM Level 2和2003年发布的DOM Level 3。
ECMASCript：ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。JavaScript的出现使得信息和用户之间不仅仅是一种显示和浏览的关系，而且实现了一种实时的、动态的、可交互式的表达能力，从而使得基于CGI的静态HTML页面将被可提供动态实时信息，并反映客户操作的Web页面取代。
至今，W3C制定的规范已超过50多项，以上这几种规范大家早已耳熟能详。此外，还有一些未来的前瞻规范，如基于语义Web的RDF规范、基于图像技术的PNG规范、基于Web协议的SOAP规范等，W3C将这些标准技术作为Web应用的基础框架，见图1-4。图 1-4 W3C全貌
在整个Web应用的技术架构上，W3C将互联网应用体系划分为一系列的层，自下而上依次为：
URI/IRI、HTTP
Web Architectural Principles
XML Infosets；RDF（S）Graphs
XML、Namespaces、Schemas、XQuery/XPath、XSLT、DOM、XML Base、XPointer、RDF/XML、SPARQL
在最上层包含了6个框，分别与W3C主要的活动组（Web Applications、Mobile、Voice、Web Services、Semantic Web、Privacy Security）相对应。
在整个W3C应用体系中，一个横条把这些领域（Web Accessibility（Web可访问性）、Internationalization（国际化）、Mobile Access（移动访问）、Device Independence（设备独立）和Quality Assurance（质量保证））联系在一起。URI、HTTP、XML和RDF支撑着这5个方面。无障碍网页、国际化、设备无关和质量等已融入到W3C的各项技术之中，未来的Web将是一个语义化、人性化、可管理、可信任的Web。
然而，在微软和网景统治浏览器的时代，各浏览器所做的并没有遵循标准，而是不断推出新版本，实现不同的功能，都想在这个市场中赢得优势，但最终还是以被美国时代在线收购而告终。如今，浏览器已是群雄逐鹿，出现了IE、Firefox、Safari、Chrome、Opera等浏览器，它们都在适应Web的标准及其变化。1.1.3 不断优化的客户端技术
1990年，Tim Berners Lee在SGML的基础上为Web量身打造了HTML标准。最初的HTML只能显示静态文本与图像信息，这显然无法满足人们的广泛需求。能展现和存储二维动画的GIF技术第一次为HTML页面注入了动态元素，时至今日，这项技术仍然被广泛应用。
1.Java与脚本
变革发生在1995年，这一年Java语言问世，其平台无关性为人们打通了一条在浏览器中开发动态应用的捷径。1996年，网景公司的第二代产品宣布支持JavaApplets与JavaScript，而同年IE 3.0也宣布支持Java技术，从此，Web开发人员可以随心所欲地丰富Web页面的功能了。1996年，微软为了与JavaScript抗衡，设计了一款至今仍声名显赫的语言——VBScript。以JavaScript为代表的脚本技术的诞生与繁荣对Web行业的发展产生了极其深远的影响。
脚本技术赋予了HTML页面交互能力，而CSS和DHTML技术的诞生则让页面又酷又炫，而且更加动感。1996年年末，W3C提出了CSS的建议标准，同年IE 3.0引入了对CSS技术的支持。有了CSS的标准，开发人员可以更加容易且规范地掌控HTML页面的格式。1997年Netscape 4.0推出，它在支持CSS的基础上还提供了许多网景公司自定义的HTML标签，这些标签在CSS的配合下显得动感十足。1997年微软发布了IE 4.0，将动态HTML标签、CSS以及动态对象模型发展成了一套完整、高效、实用的开发技术体系，并称之为DHTML。
2.样式与多媒体
CSS的发展让页面变得更加美观，但是人们并未满足于此，而是将音频、视频等更加复杂的多媒体应用融入了HTML页面。1996年，Netscape 2.0成功引入了对Quick Time插件的支持，而这种插件式的开发方式也迅速在浏览器世界风靡。同年，微软在IE 3.0中加入了革命性的功能——对ActiveX控件的支持，这为第三方Web服务提供了窗口。各种各样的插件大大丰富了浏览器的功能。1999年，RealPlayer插件在Netscape和IE上都取得了成功。当然，不得不提的是至今大红大紫的Flash插件。20世纪90年代初，Jonathan Gay在FutureWave公司开发了一种名为Future Splash Animator的二维矢量动画展示工具。1996年，Macromedia公司收购了FutureWave，并将Jonathan Gay的发明改名为Flash，从此Flash动画成为了Web开发人员、实现特效、展示个性的最佳方式。
3.XML的发展
1996年，W3C在SGML语言的基础上提出了XML语言的草案。1998年正式发布了XML 1.0的标准。按照Tim Berners Lee的说法，XML的提出对于Web来说是一次新生，XML的出现让Web页面的信息与表现形式的分离成为了可能。HTML语言关注信息的表现和实现，XML关心信息本身的格式与数据内容，这对于信息展现技术而言，不得不说是一次可喜的飞跃。1999年W3C开始讨论设计基于XML的通信协议，2000年，提出了SOAP协议的1.1版本，2001年发布了WSDL协议的1.1版本，一个伟大的应用模型WebService诞生了。WebService让不同类型的计算设备、客户端、服务端及应用间的通信成为了可能。
4.Ajax的诞生
随着JavaScript、CSS以及XML等技术的不断成熟，随着对用户体验的更高追求，人们开始尝试着将这些技术组合起来应用，从而实现一些特效，让Web应用看起来与桌面应用更加接近，直到Jesse James Gaiiett将这些技术的集成定义为Ajax, Ajax成为了Web 2.0时代最火的词汇之一。
Ajax技术被广泛应用之后，人们发现浏览器的兼容性、脚本的运行效率等问题成为Ajax发展所面临的最大阻碍，于是开始出现一系列纯脚本的技术框架，如Prototype、jQuery、ExtJS等。这些脚本框架的出现极大地推进了Ajax技术的发展与应用，大量的特效插件与兼容性的支持让Ajax真正站上了Web 2.0的舞台中心。1.1.4 服务端技术的成熟
与客户端技术从静态到动态不断丰富发展相对应，服务端技术也在逐步完善。
1.CGI是领路人
最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。第一种真正使服务器能根据运行时的具体情况动态生成HTML页面的技术是CGI（Common Gateway Interface）技术。NCSA于1993年提出CGI 1.0的标准草案，1995年则开始制定CGI 1.1标准，1997年制定CGI 1.2标准。CGI技术的普及使客户端与服务器的动态信息交互成为了可能，聊天室、论坛、电子商务等各种Web应用蓬勃发展。
早期的CGI程序都是由C、C++或者Pascal等语言编译完成的，为了简化CGI程序的修改过程，人们开始探寻用脚本语言实现CGI程序的可行方式。1995年，第一个用Perl写成的CGI程序问世，由此开启了脚本语言实现CGI的新篇章。
2.Web编程
Web服务端的编程语言始于PHP。1994年Rasmus Lerdorf（见图1-5）发明了PHP，将HTML与PHP指令合成为完整的服务端动态页面，为Web开发者提供了方便与快捷的开发方式。1996年，微软推出了ASP技术，配合Visual Studio等开发工具取得了巨大的成功。1997年，SUN公司重拳出击，推出了Servlet技术，1998年推出了JSP技术，Servlet和JSP的组合为Java开发者提供了Web开发的利器。图 1-5 PHP之父Rasmus Lerdorf
3.企业级开发平台
Web服务端开发技术的完善使开发复杂的Web应用成为了可能。为了给用户提供更可靠和完善的信息服务，两个最重要的企业级开发平台——Java EE与.NET（见图1-6）在2000年前后分别在Java与Windows阵营诞生了。两大阵营的较量促使Web开发技术以空前的速度向前发展。2000年以后出现了许多有影响力的技术融合方案，比如MVC的设计模型、门户服务（Portal Server）、内容管理等。2001年Struts 1.0发布，从这一年开始，Apache等开源组织开始活跃于Web开发的舞台，各种开源的技术集成方案及框架大放异彩，比如Joomla、Struts、Spring等。这几年，随着.NET 3.5与Java EE 6的相继发布，这场企业级开发平台的战争愈演愈烈。图 1-6 Java VS.NET
随着JavaScript 2.0、CSS 3.0、HTML 5.0、Servlet 3.0等字眼的不断涌现，我们感受了Web技术发展的蓬勃生机，看到了那美好的未来。1.2 地位、曲线和使命
打开网页，映入眼帘的是万紫千红的互联网世界。当你在享受RSS订阅时，当你在Blog上分享你的旅游经历时，当你通过电子商务为你的女友订购玫瑰花时，当你通过E-mail处理日常事务时，你是否想过是谁创造了这一切？是谁为那些冗长深奥的二进制代码赋予了如此有生命力的皮囊？1.2.1 前端开发路漫漫
通常人们认为Web 1.0时代始于1994年，标志性的事件就是1994年年初斯坦福大学的博士杨致远（Jerry）和David Filo发布了一份他们最喜爱的Web网站列表，这份列表最初的名称是“Jerry＆David的Web指南”。两个月后，它又有了一个新的、带有挖苦意味的名称——"Yet Another Hierarchical Officious Oracle"（不过是又一份等级制的非正式的神谕），或者缩写为Yahoo。Yahoo是Web史上的一个伟大瞬间，国内的网易、新浪等门户网站均是Web 1.0时代的杰出代表。在Web 1.0时代，网站的主要功能还是发布信息，通过专业人士编辑某些信息，然后将其发布到站点上供用户浏览与检索，用户的参与程度不高，用户主要做的事情是浏览，因此访问这些站点的客户端工具被称为浏览器。
Web 2. 0从什么时候开始并没有一个确切的说法。多数人认为它是从2001年互联网泡沫破灭后逐渐兴起的，以Blog、RSS、SNS这些概念的提出为代表。
如果说Web 1.0是以数据为核心的，那么Web 2.0则是以人为出发点的互联网，用户的参与程度大大超过Web 1.0。现在互联网上的大部分资源都是由用户自己发布并管理的，用户在互联网上的作用越来越大——他们贡献内容、传播内容，而且提供这些内容之间的链接关系和浏览路径。从这个角度看，互联网变得更有序，每个用户都在贡献——要么贡献内容，要么贡献内容的秩序。人们对于Web 2.0，众说纷纭，但是有一点可以肯定，Web 2.0是以人为核心的网络，提供方便用户“织网”的工具，鼓励用户提供内容。根据用户在互联网上留下的痕迹来组织浏览的线索，提供相关的服务，给互联网不断产生新的价值。Blog、Wiki、RSS、SNS等都是Web 2.0时代的价值体现。
随着互联网进入Web 2.0时代，用户体验越来越受企业及用户的关注，前端设计师所要担负的责任越来越重，所需要掌握的技术范围也在不断扩大。现在的前端设计师早已不是一名写HTML、关注页面展现的网页设计师了。1.2.2 千军易得，一将难求
不知道人力资源经理是否有这样的感慨，要找一个称职的前端设计师是多么的困难，而领导却往往无法理解为何找一个做页面的人会这么困难？原因很简单，现在的前端设计师已经不仅仅是做页面的程序员了。有别于原先的网页设计师，如今已经出现了许多新兴的、针对Web开发人员的前端设计职位：交互设计师、用户体验设计师、前端架构师，等等。这说明如今的前端开发人员已经不仅仅局限于关注用户所看到的界面的美观程度，他们更需关注的是是否能让用户获得良好的体验。现在，出色的前端设计人员（或者说前端架构师）已经是“千军易得，一将难求”，造成这样的局面有许多深层次的原因，且听我慢慢道来。
1.社会的定位
业内多数公司都存在这样一些不幸的现象：除了少数的前端设计师之外，大部分的前端设计人员都没有得到公司领导应有的认可，前端开发人员所要担当的责任及履行的义务和他们所获得的待遇处于一种不对等的状态，这样的环境造成了前端开发人员的职业发展受到了严重影响。某些领导甚至这样认为做页面很简单，没有工作经验的人也能胜任前端开发的职位，还省时、省力、省工。这样的社会定位造成的恶果是很明显的，每年笔者都会参加应届毕业生的招聘会，面对好几百份简历，往往很难找出一个致力于前端开发的大学生。大多数人都表示希望或者擅长做后端开发，在大家的意识里，前端开发人员似乎就是公司中地位较低微的人员，没有什么晋升机会，只会写页面。如今，很多人认为前端开发人员的工作只是做页面，这无疑是一种悲哀。
2.教育资源的匮乏
为什么说教育资源匮乏呢？现在也有很多高校开设了“网页设计”课程，不是吗？这又回到了我们之前提到的问题，前端设计师不仅仅是网页设计师，他首先必须是一位合格的程序员，必须具备相关的计算机基础。但是现在大多数学校计算机相关专业的课程设计都是以语言及算法为核心的，并没有针对与Web有关的课程设计，即便有，也只是选修课程。因此，学生在进入社会后，要从事与Web相关的工作，大多数人都只能通过自学来补充知识。
说到自学，问题更严重了。放眼现在的各种关于前端设计的书籍，要么单纯讲HTML，要么单纯谈论CSS，有的甚至具体谈论某一个脚本框架的使用（如关于jQuery的一些书籍）。这些书籍都只涵盖了前端设计中的某一个小小的点，并不能很好地展现整个前端设计知识体系的全貌以及整个学习的线索。这也正是笔者写这本书的原因，希望能够给开发人员梳理整个前端设计的知识体系，同时结合具体案例，根据笔者的线索来贯穿前端领域中的各个重要的知识点，为读者指明学习的思路。
3.旁人眼中的不规范
由于某些历史原因，现在的前端开发在人们眼中的直观印象是：繁杂、不规范，诸如此类，这也间接导致了前端开发职位的吸引力不大，干活吃力又不讨好。当后端技术如ASP.NET、Java、Rails等框架变得越来越强大、越来越抽象的时候，前端技术的潜在发展也日益复杂。Web的前端技术包括W3C的所有结构体系技术，还包括W3C之外的一些技术（如Flash）及表现逻辑。它不仅仅是HTML+CSS+JavaScript，所谓的Web标准也不仅仅是DIV+CSS，能正确使用这些技术服务于Web和用户才是Web前端应该深入的问题。
当你看到1.1.2节的图1-4中的体系时，你也许会问，有些技术我从来就没有听说过，真的能够实现吗？有没有成型的案例呢？实际上，这是一幅理想的蓝图，使用这个标准体系建造起来的Web应用可以实现对各浏览器的兼容，还能实现移动设备的访问——无障碍访问。现在已进入3G的互联网时代，但是在手机上看新闻和在IE下看新闻获得的是相同的体验吗？你确信你的站点在IE 5.0、IE 6.0、IE 7.0和IE 8.0下都能够正常工作吗？答案是令人遗憾的，现实和理想的差距也不只是一点点。
以前许多公司根本无视W3C标准的存在，最典型的就是某公司的浏览器版本在每次更新时都推出所谓的自己的标准。浏览器作为Web应用的基础平台，其标准的不统一将直接导致Web应用实施团队需要花费额外的精力去实现浏览器的兼容（见图1-7所示的某商业应用的友情提示），而这些工作本来都是可以避免的。Firefox、Safari、IE、Opera、Chrome（问世不久，不过市场占有率上升得很快）等，如此多厂商的浏览器，该如何处理兼容问题呢？图 1-7 某商业应用的友情提示
不解决也许是最好的解决方案，有的应用商甚至提供了指定的浏览器下载，这又何尝不是另一种悲哀呢？
上述这些都是造成目前前端开发领域中出现各种问题的因素，此外还有一大因素不得不提，那就是前端开发那令人望而却步的学习曲线。1.2.3 令人望而却步的学习曲线
我们先来看看作为一名合格的前端人员应该掌握或具备哪些技能：
首先就得熟悉HTML，掌握W3C的标准，要学就得学最规范的标准。浏览器最少也要了解四五种，如IE、Firefox、Chrome等。样式也得掌握，以CSS2为主，多看看欧美牛人的风格DIV布局，特简约的那种。可用性也很重要，甭管有事没事总把用户放在心里，再买本工艺美术理论方面的书，有事没事就翻翻，设计个按钮就得花个七八天的时间。交互更重要，现在不是Ajax，就是RIA的，你要是用alert弹框啊，你都不好意思跟人家说去，这样学下去，得学多少年啊？两年时间？那是入门。四年以上？你还别嫌多，就是复杂。认真掂量下这些技术，学好其中的任何一门都要花好几年工夫。什么叫成功的前端开发人员？就是不但代码写得好，还要懂设计，懂美学。所以，前端开发的口号就是：不求最好，但求最全。
1.角色的特殊性
也许有人会问：“为什么一个做页面的人要掌握这么多知识？”前端设计师这个职位有其特殊性：前端作为与用户直接接触的一层，与用户的相关度高，需求变化频繁。用户不会关心数据库是MySQL还是Oracle，也不会关心你是用Java还是用.NET，用户关心的是按钮是否在正确的地方出现、提示信息是否排列整齐等之类的问题。这意味着什么？这意味着前端更需要设计良好的架构。但是由于其自身的特殊性，想要做出良好的抽象是比较困难的，当然也需要日积月累的实践。
2.知识的多元性
对于刚入行的朋友来说，前端开发领域所需要学习的知识非常多，它们犹如一块块零散的拼图碎片（如图1-8所示），看似存在联系又独立存在。这些知识往往关联性不高，常常还是一些跨领域的知识的融合，这些因素均造成整个前端开发领域的知识的学习很难速成。此外，由于许多前端开发人员的知识面单一，直接造成了前端架构的无序和混乱。图 1-8 前端领域的知识犹如零散的拼图碎片
可以说前端开发的学习曲线比较特殊，会存在一个明显的阶梯性的成长过程。在很长的一段时间内，你甚至会感觉自己停滞不前，但是请不要灰心，当你对相关的知识有了一定程度的积累时，你的水平就会上一个新的台阶。1.2.4 前端开发人员如何自身定位
前面发表了很多关于前端开发的消极言论，比如，提到前端开发人员费力不讨好、前端开发的一些不规范现象、前端开发的学习曲线比较特殊等。这些是否暗示这个职业没有发展前途呢？答案是否定的，虽然目前前端开发领域确实存在这样那样的不足，但是笔者认为这个行业的未来是光明的。那作为一名前端开发人员要如何对自己进行定位呢？下面是一些建议，和大家分享一下。
第一，这是份很有前途的职业。选择新行业，选择新企业，选择新部门，这很适合一些刚入行的朋友们。互联网行业相对于传统行业算是新行业；如今的互联网公司也在蓬勃发展，公司的种类与数量都在上升；前端开发这块领域也正被业内重新认识，一些中高端和一些崭新的前端职业的出现就是一个可喜的标志。
第二，想一下自己是否适合和喜欢这份工作。Web前端工程师并不是设计师，笔者更倾向于将这个岗位定位为开发人员。在这个岗位上每天接触到的更多的仍然是代码。如果你喜欢的是设计，那么应该适当调整自己的学习重点。Web前端工程师应该是那种完美主义者。术业有专攻，多想想自己的职业规划，要有长远的打算，不能总是停留在网页设计这个初级阶段，要逐步地涉及用户体验、前端架构等领域。
第三，通过努力找到好的雇主。如果你将自己定位为Web前端工程师，那么去投靠对该岗位有一定认识的公司比较合适。现在国内的很多互联网公司已经逐渐开始重视中高端前端开发人员的培养，这是一个良好的契机。在这样的公司里会有明确的职位说明和职责范围，以及完善的培养计划。
也许你已经摩拳擦掌，想要投身到这个充满活力的行业了。在这之前，先让我为你梳理一下前端开发的知识体系，看看一名前端开发人员需要掌握哪些技术。1.3 前端开发所需掌握的技术
阅读了第1.2.3节后，也许你对前端开发所要掌握的技术有了大概的了解，下面我们再来看一下下面这段招聘信息：
网站前端工程师（Front-end Web developer）
工作职责：
负责网站前端设计及开发。
职位要求：
计算机相关专业，本科以上学历。
精通Java/Ajax/JavaScript/XML/CSS，有至少3年相关工作经验。
了解不同浏览器之间的差异，写出的代码具有良好的兼容性。
熟悉页面架构和布局，对Web标准和标签语有深入了解。
对用户体验、交互操作流程及用户需求有深入了解。
能根据设计效果图严谨落实界面，精确到像素意识。
有丰富的网站前端工作经验。
笔者认为上面这段招聘信息仅仅列出了一些基本的要求，一个优秀的前端工程师需要掌握很多与之相关的技术，绝大部分的团队都需要一个真正理解及应用这些技术的人才。正确地深入理解前端所应用到的各项技术和技能，并且能做到有的放矢，这对于个人及团队都是有利的。下面我们进行整体的概括。
1.业内标准
关于业内标准，首先必须了解的是W3C的一系列标准，前面的章节中已经详细地介绍了，这里不再赘述，需要重点关注的有：HTML、XHTML、XML、CSS、JavaScript。
其次，根据你所归属的阵营熟悉一些标准，比如需要Java EE的相关标准或者是.NET的相关标准。
最后，需要掌握一些常用的前端设计的思路以及最佳实践。
2.语言
在众多的开发语言中，属于前端技术的语言并不多，除了W3C所发布的HTML、CSS、XML等描述性语言外，还包括客户端脚本语言JavaScript等。另外还有一种语言也是非常重要的，即ActionScript，它是开发Adobe RIA的基础语言，Flex、Flash和AIR都采用它作为脚本语言。为什么这里要提到Flash？Flash并不是W3C标准，但它在目前的互联网领域中扮演着非常重要的角色。相比以前，如今声音、图像、动画、视频已遍布大大小小的网站，不管它们是以JavaScript实现的还是以Flash为基础实现的，今后的互联网都将是RIA的天下。而且目前90%的计算机都已安装Flash Player，基于Flash的应用将会越来越丰富。即使不知道如何设计一个Flash广告，你也要知道如何修改里面的字体，它与后台数据层如何交互。它的ActionScript编程是非常有趣的，它也是基于EMACScript这一标准的脚本语言，与JavaScript相似。本书不详细介绍Flash，有兴趣的读者可以关注Adobe实验室网站：http://labs.adobe.com。
3.视觉设计
视觉设计最早被应用于印刷宣传，电影海报、报刊杂志等传播媒体都可以理解为平面设计或图形设计，它们是利用视觉符号来传递各种信息的。随着科技的日新月异和互联网的发展，视觉设计在互联网这个大媒体中的作用越来越重要。不管是静态的网页还是画面炫丽的Flash动画或魔兽世界中的游戏画面，它们都离不开视觉设计。在软件系统领域中一般称视觉设计为UI（User-Inteface）设计。如果仅从UI来理解，那么它就是指界面设计，即在网页上看到的效果。抛开Web的话题，回到传统C/S模式的应用系统，那它要做哪些事情呢？我们先来看一下图1-9所示的苹果操作系统Xcode软件的界面。图 1-9 苹果操作系统Xcode软件
无论是软件的工具栏还是菜单等，Mac都为其提供了相应的接口调用，操作时只需要执行文本及命令即可。同样的，开发VB应用时，开发库已为你提供了丰富的UI组件，那开发这样的应用软件需要视觉设计师吗？回答是需要，因为视觉设计师的工作不仅是将控件美化，为其加上一些色彩，对于Web视觉设计师来说，他还要将信息架构的内容友好且美观地表现在浏览器上或是PS工作区中，就像传统的海报设计一样，它还需要应用排版和字体。
我们常常会发现，UI设计师设计出来的稿子无法进行HTML编码，有些背景根本无法实现，或者只能像十年前的网页一样，通过先使用Photoshop画界面，然后转换到Firework切片，再自动导出为HTML这样一个工作流程来实现，得到的网页中全是图片，这样的效果是不符合目前的Web标准的。
所以，在了解色彩设计的同时，我们还需要了解Web的排版艺术及交互艺术。对于Web应用的视觉设计，不仅需要了解诸如Photoshop这类画图工具，还需要了解设计Web应用的一些方法，如布局、排版、色彩、字体、表单等的设计方法，能迅速将PSD文件内的要素或PNG图片的特殊效果通过HTML、CSS等代码来实现，比如，需要将相册内的所有图片都加上属于自己的印章，则首先应该想到要将印章制作成PNG格式的透明图片，再使用CSS的一些技术给相册图片加上印章。
视觉设计是前端开发的一项基础技能，前端开发的一个重要意义就是给予用户良好的视觉体验。
4.交互设计
一般做UE的人都会强调可用性的概念，将可用性视作产品设计的最高层次。软件是人与机器的交互，这是软件所体现的“能力”。在ISO中这样定义可用性：某一事物的可用性应当可以以效力、效率、满意度三个维度进行衡量。效力即用户可以完成任务，效率即用户完成任务的快慢，满意度即衡量用户是否很享受完成任务的这个过程。不管是Web软件还是桌面软件，在可用性方面都必须遵守这三个标准。网站的可用性在很大程度上反映了其产品的人性化操作，这是交互设计中的一个部分。人机交互中包含的具体理论及技术如图1-10所示。图 1-10 交互设计概念图
从图1-10可以看出，从比较基础的界面设计开始到概念表达，都能够完整地贯穿整个软件交互设计过程。交互设计必须以用户为中心，应用“以目标为导向的设计”方法。从用户角度来说，交互设计是一种如何让产品易用、有效且让人感到愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在与产品交互时彼此的行为，了解人的心理和行为特点。交互设计体现在小到一个链接的设计，大到一个大的操作流程等的过程都应受到重视。这些年人们对于用户体验及可用性等的研究也越来越多。最后我们要明白，交互设计是一个过程设计，不管是开发DVD播放机还是开发互联网应用，都需要交互设计。
5.表现层逻辑
很多前端开发人员并不重视这部分内容，在有的公司，这部分内容根本就不属于前端开发人员的责任范畴。但是笔者认为，表现层是页面与后端程序沟通的桥梁，作为一名出色的前端开发人员必须关注它，这将有助于应用的可维护性。单纯从页面的角度来讨论前端架构是比较片面的，这也常常会造成对于前端设计人员设计的页面或风格，后端开发人员没有办法实现的局面。因此，结合表现层的逻辑来考虑整个前端架构更为合理，比如，在实体设计的时候就可以考虑到未来在页面上要如何展现这些设计，是否能够实现原型的效果。前端开发人员介入表现层开发将有助于解决原来前端开发所存在的一些问题。
在软件体系架构中，三层的结构是最常见的，通常客户端不直接访问数据库，而在它们之间加入服务层，用于处理业务逻辑及数据访问。图1-11是最常见的Java EE三层结构图。图 1-11 Java EE三层结构图
表现层的实现上，在Java EE领域与.NET领域，主流设计模式是MVC（Model View Controller）模型。它强制性地使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器，它们各自处理自己的任务。MVC模型具有低耦合性、高重用性、便于维护、部署成本低等优点。
业内主流的J2EE MVC框架如下所示：
Struts：Apache曾经最为流行的MVC组件，目前大量的Java EE项目仍然在使用。
Struts2：Apache用Struts和WebWork组合出来的新产品，目前上升势头强劲，本书的后续章节将以该框架作为表现层逻辑的实现方案。
WebWork：老牌的MVC组件，后来组合成了Struts 2，不过自身仍在发展。
Spring MVC：SpringFramework整合自己Spring的优势推出的MVC组件，其用户也不少。
JSF：这个是一个规范，Sun、Apache、Jboss都有各自的实现，用户量很大，被众多IDE支持。
Tapestry：最彻底的MVC开发框架，有丰富的组件资源，重用性很高。
6.兼容性技术
兼容性所引发的问题近年来逐渐引起人们的重视，其实兼容性问题一直都存在，为什么如今才这么引人关注？这是有原因的。
首先，IE正在失去一家独大的局面，曾经IE占据浏览器市场90%的日子已经一去不复返了。同时，由于IE6、IE7、IE8对于W3C标准的支持程度都不尽相同，IE体系内部已经存在了兼容性的问题，再加上FireFox、Chrome等浏览器的强势崛起，各厂商与IE间的兼容性问题逐渐显著。
其次，在Web 2.0时代，随着Ajax技术的普及与发展，时常用大量的脚本与DOM操作来实现页面上的各种特效，在DOM操作、XML解析、创建异步通信对象等常用操作上的浏览器兼容性问题就逐渐显现出来。
最后，随着3G时代的到来，手机接入互联网的速度已经有了空前的提升，3G手机用户可以直接访问普通的网页。这时，要解决手机显示屏尺寸与普通显示屏尺寸不匹配而引起的用户体验的问题，需要考虑在布局框架上做相应的调整来实现兼容，然而布局又恰恰是浏览器兼容问题的“重灾区”，在各互联网应用越发重视手机用户的今天，此类问题自然越发引人关注。
因此，作为一名前端开发人员，必须掌握以下各个主流浏览器的特性：
Mozilla Firefox
Chrome
Microsoft Internet Explorer
Opera
Apple Safari
在掌握这些浏览器特性的同时，还需要掌握一些常用的Hack技术来解决一些兼容问题。
7.开放服务
SNS网站的兴起，带动了国内外互联网的新一轮盈利模式的变化。最早将Web应用API开放出来的应该算是Facebook，它通过开放API将自己变成了一个平台，让其他企业或者个人都能基于这个平台开发各种各样的应用。由于Facebook拥有大量的用户，每天都会产生近45个应用，每个人都能在上面找到适合自己的应用。继Facebook后，国内外互联网巨头也相继开放各自的API。
设想一下，如果明天我们将要去海南旅行，我们都需要做些什么？我们需要订机票、酒店、地图、导游，还有什么？还要有这样一个应用，打开某个网址，其网页内容中嵌入了各种需要的数据及航空公司提供的出行航班时刻信息，还能快速订票，Yahoo地图会告诉我目的地旅行线路，未来几天目的地的天气，Flickr可以展示网页旅行照片及酒店信息，等等，诸如此类的数据整合，前提是利用各大公司提供的API开发小部件应用，也称做Widget。目前国内的大多数SNS网站也纷纷提供了开放的API，这里我们只是举了几个常用的API的例子来简单地了解一下。希望在Web 2.0这样一个大环境下，能为用户提供更多的数据。不管是基于REST还是SOAP，前端技术人员都应该更深入地了解开放服务。
8.SEO
SEO（Search Engine Optimization，搜索引擎优化）是一种基于互联网的营销方式，主要作用是增强网站在搜索引擎中的曝光率，从而增加销售机会或信息共享。最直观的反应是网站信息在搜索引擎中的排名。SEO是一项技术，是遵循搜索引擎科学而全面的理论机制，对网站结构、网页文字语言和站点间的互动外交策略等进行合理规划部署来发掘网站的最大潜力，从而使其在搜索引擎中具有较强的自然排名竞争优势，对促进企业在线销售和强化网络品牌起到作用。有人认为SEO很简单，就是做个排名，其实真正的SEO是通过采用易于搜索引擎索引的合理手段，使网站对用户和搜索引擎更友好，从而更容易被搜索引擎收录及优先排序。搜索引擎优化是一种搜索引擎营销指导思想，而不仅仅是对百度和Alexa等的排名。搜索引擎优化工作贯穿于网站策划、建设、维护全过程的每个细节，值得网站设计、开发和推广的每位参与人员了解其职责对于SEO效果的意义。要做好SEO，首先要做的是什么？除了SEO技术本身外，还需要面对的是W3C的技术标准，准确地运用标签，该使用＜h1＞的地方不能用＜h6＞，该在＜img＞元素内增加alt属性的时候应该加上。如果能够做好设计和体验，那么做好SEO也就不是难事了。
9.性能及安全
对于Web应用，性能与安全都是需要重点关注的问题，因此作为前端开发人员必须具备相关的知识，应该能够熟悉如何在开发高性能的Web应用程序的同时，保证应用的安全可靠，避免那些常见漏洞。
在网络安全方面，需要关注OWASP（Open Web Application Security Project）这个非营利性组织，其网址为http://www.owasp.org/。它致力于提高Web应用程序的安全可视性，帮助开发人员应对应用程序的安全风险。该网站提供了大量有价值的资料，比如一些指南性质的文档、检查表与规范以及大量针对提高应用安全性的开源项目，在这里不再赘述。
对于性能这方面，开发人员需要掌握一些基础的原则（比如Yahoo的12条性能准则），保证在开发阶段就能够提供高效的代码。同时还应该掌握多种性能检测工具，确保在应用出现性能问题的时候能够进行准确定位，提供有效的解决方案。
10.基本素质
上述提到的都是具体的技术概念，作为一名前端开发人员还需具备一些重要的素质：团队合作能力、沟通能力和掌握正确的开发流程。
良好的团队合作能力与沟通能力是每一个开发人员都需要具备的素质。与后端的开发人员合作，设计良好的前端架构，与用户接触，得到用户需求，这些都依赖于良好的沟通能力。尤其是需求挖掘，这是一个漫长的过程，如何在与用户的沟通中获取真正的需求，如何引导用户得到他们真正想要的东西，这些都建立在与用户良好沟通与信任的基础上。
掌握正确的开发方法和开发流程也至关重要，处理事情的方式的正确性将直接决定产品的质量与流程的可控程度。1.4 前端开发常用的工具“工欲善其事，必先利其器”，现在开发Web应用和前些年相比已经完全不同了。早些年开发ASP应用时，只需要掌握如何应用Dreamweaver就行了；而现在Web应用得越来越成熟，开发语言也更多样化，特别是在Web标准、兼容性、性能、调试、设计等方面得到了广大用户的重视，基于Web的工具应用也越来越多。这些工具能辅助我们在开发效率、思维拓展、协同工作等方面进行改善。下面的小节中将列举一些前端开发人员所必须掌握的工具，相信它们能给我们的工作带来便利。1.4.1 设计类工具
Adobe公司旗下的一些软件是我们最常使用的工具集，下面分别介绍其中的一些软件。
Adobe Photoshop作为一款最早用于平面设计的软件，现在也常被视觉设计师应用于Web的视觉原型稿制作。视觉设计师可以根据线框图原型稿进行视觉设计，最终完成真实的Web视觉原型，交付评审。同时Photoshop还可以用于切割图片，将视觉稿切割成小图供编码人员使用，一些背景图、PNG图、CSS精灵的整合图片都离不开Photoshop这款史上功能最强的图像制作软件。
Adobe Flash动画制作软件虽然是制作矢量动画的软件，但是它已成为Web中不可或缺的元素，从主题广告到交互动画，都离不开Flash。
Adobe Fireworks的推出满足了网页设计师的一些需求，如切片、添加热点等，既可编辑位图，也可编辑矢量图。如果要制作一些GIF小动画，用它来编辑比用Photoshop要方便得多。
Adobe Dreamweaver是快速的HTML/CSS/脚本编辑软件，提供了自动补全功能，同时还提供所见即所得的功能。如果你不善于记住每个HTML/CSS属性，那么Dreamweaver是最好的选择。
试读结束[说明：试读内容隐藏了图片]