学习html5开发网页设计

HTML作为一种标记语言(markup language)，设计和制作网站是其最为常见的一种应用。很多人都有过使用HTML的相关经验，但是，当大家面对HTML5这样一种全新的标记语言标准时，必定要问：利用HTML5开发做网站到底有什么好处?与HTML 4相比，HTML5又有哪些进步?进步的原因是什么?学习HTML5开发的难点又在哪里?

 

大多数人不了解HTML5时代的网页设计

也许你从来没有做过网站，也许你已经用HTML 4和CSS2制作了大量Web 2.0时代的网页和网站，也许你已经非常精通DIV+CSS的网页设计与制作模式，但是，HTML 5的出现将让所有的人都站在同一个新的起跑线上。

在了解和学习HTML5开发的过程中，我们认为，使用HTML5开发制作一个网站，恐怕是很多网页设计师(哪怕是有经验的网页设计师)需要重新认真学习的。

为了保证相关的新特性能够在不被支持的时候也能完整地显示相关的内容，业内人士提出了两种说法：一个是优雅降级(Graceful Degradation，有时也叫平稳退化)，另一个是渐进增强(Progressive Enhancement)。这两种说法都是从用户体验入手的：前者保障用户体验 ，假定在当前浏览器不支持的情况下确保用户依然可以完整地查看内容;后者提高用户体验，假定在当前浏览器支持的情况下，确保用户可以获得最好的内容展示效果。

一般有经验的网页设计师会认为：我已经能熟练使用和掌握Photoshop、Fireworks，甚至还会使用Dreamweaver、Visual Studio等网页设计与制作工具，为什么还说我不懂HTML5的网页设计呢?确实如此，我们可以毫不客气地说，HTML5诞生后，你真的不懂网页设计了!

 

下面说一下你不懂HTML5开发网页设计的10大理由。

阴影代码可控。以前，在用HTML 4制作网页的时候，因为无法在网页中直接制作阴影和圆角，所以大量网页效果都是美工设计好之后直接定格在图片中的。而现在HTML5将改变现有的网页设计与制作的工作模式，设计人员凭着一张PNG或者PSD设计图中的相关尺寸、角度等数据，就可以直接用CSS制作还原出设计稿。请注意：在这里，传统的切图与拼接工作会减少，但图片中的位置数据将被高度重视，用于设计还原。

动画简单易懂。以前，制作一个简单的动画效果必须要依赖JavaScript和Flash，编写大量的脚本，或者制作动画帧。而现在，依赖强大的CSS3动画属性将快速高效地开发出各种动画效果，甚至3D效果的制作都将是一件轻而易举的事情。

渐变数值化操作。以前，制作一个渐变或渐进效果需要使用图形设计软件做好线性渐变效果，定了就不能随便改，还要控制图片的尺寸，以防效率不高。而现在，使用一个简单的线性命令就可以轻松搞定一切。制作人员要做的就是关注几个转换点的位置与数值而已。

字体图片矢量化。以前，制作一个带有个性化字体的Web效果需要用图片来辅助完成。而现在，强大的CSS3网络字体功能将把一切字体图片都还原成文字元素，而不再需要依赖图片。仅凭这一点，制作人员就可以在大规模开发中大大提高工作效率，减少大量重复的美工劳动。

表单验证轻松搞定。以前，制作一个表单提交页面，需要各种验证与判断，现在则只需要在标签内使用自带的属性和正则表达式，就能解决问题。

数据类型扩大一倍。大量新增的input属性带来的更加友好的用户界面，是以前需要花费巨大的精力与成本去实现的。可以毫不夸张地说，从一个小小的input标签属性的变化就可以预见HTML5应用的美好前景。

行业工作流程需要重组。以前，制作一个网站的流程是：美工设计好效果图，客户和美工反复商量、确认、修改，开发人员最终完成制作并上传至服务器。在这个过程中，客户和美工可能常会为一个像素(pixel)的问题纠缠不清，而切图人员和程序员也可能在分解效果图时因为粗心而导致效果略有出入。在网站上线后，前端的各种用户体验会逼迫设计人员再次修改。现在，这样的工作模式将会改变。

个人职业生涯重新定位。大部分网页设计人员都是平面美工，而HTML5独有的3D Web技术将会给美工带来全新的挑战。如何展现一个3D网页，如何让交互的用户体验更好，将是令设计人员最为头疼的事情。当然，这可能也是最有意思、最有价值的事情。

原生支持无需插件。以前网页中对音频和视频的处理都会依赖各种插件来完成，这一直是使用HTML 4标准进行网页设计时的一个遗憾。但是，现在HTML5对音频和视频的处理有了强大的支持，audio和video标签就是专门为此而诞生的。各种可控的属性、预载、插页功能都令人激动不已，因为我们知道原生的意义重大。

对Web设计人员的要求更高。一直以来，人们都认为网页设计人员不必会动态脚本语言，甚至不必会网页切图。现在，HTML5标准将赋予网页设计人员更多的工作和使命、更高的要求、更为广博的知识结构、更有想象力的设计灵感。

朋友，不必紧张!一个新的技术时代来临的时候，基本上相关技术人员都会比较茫然，同时技术人员也会相对缺乏。比如，在2000年，大部分美工都是从平面美工转过来的，真正专业的网页美工并不多，更没有几个人在设计网页的时候会考虑人体工程、视觉习惯和承受能力等问题。再比如，2005年至2011年，很多美工经历了技术的演进后，为了能够适应用户的需求，在掌握了Photoshop、Fireworks、Dreamweaver和Flash等网页设计与制作工具后，又逐渐要求自己能够会DIV+CSS切图、JavaScript脚本编写等。但是，他们依然甚少有人可以在动画、HTML+CSS制作、JavaScript、用户交互与体验设计等多个方向都表现优秀。

一个可能天天都会看8小时以上的页面效果，与一个在高速公路边以时速140公里左右闪过，最多看5秒钟的广告牌，这两者在设计思路、表达方式和颜色效果上有区别吗?答案是：有，而且有很大的区别。同样，在移动互联网时代，用户可能会利用琐碎时间来使用和查看设备内容，用手指和其他部位来操作设备，这些都是没有任何经验可以借鉴的。只有反复体验，才有可能设计出好的作品。

前端工程师的岗位应运而生，但杰出者并不多。

HTML5向网页设计者提供了强大的表现能力和极其丰富的表现效果，它需要网页设计者有充分的想象力和实现能力。大胆地想象，大胆地创意吧，在HTML5的表现中，无论怎么大胆都不为过。

苹果公司的精神领袖乔布斯说过："网页将为你的手指而设计。" HTML5标准的出现意味着，对于网页设计而言，现在是最好的时代，也是最坏的时代。