PSD/HTML5转换基本技术之页面前端代码实例讲解

PSD/HTML5转换,网页转换,图片转HMTL,PSD转换HTML5

HTML5的功能强大不容置疑,与之相关的JavaScript和CSS技术能够能够让开发者在任何设备上都开发出丰富的网络页面应用。现在,已经有越来越多的公司加入到HTML5的平台上来了。而且,随着计算机硬件的不断完善和移动应用快速发展,HTML5的发展趋势也会越来越迅猛。

如何从标准的PSD设计图来制作匹配的HTML5网页是普通的网页应用中常见的问题,如何实现PSD向HTML5网页的转换也是目前很热门的网页制作技术之一。在PSD/HTML5转换过程中我们经常会面临以下的这些问题:如何快速开发出针对PSD源图的HTML5网页?PSD文件如何切图如何优化?怎样完美还原设计图中的效果?如何兼容各种类型各种版本的浏览器?如何精简前端HTML标签代码?如何在由PSD文件制作HTML5页面时兼顾到网页的SEO效果?

解决好了这些问题,要实现PSD转换成HTML5的工作也就不难实现了。

有的设计人员直接使用Photoshop或是Fireworks集成的插件功能来转换HTML,其实这是效果最差的,切图没有任何优化,导致最后的网页文件超大,性能低下不说,编码也是无数个table加img组成而没有任何优化。

所以最好不要使用插件来转换,要想得到精练的优化的HTML5编码和切图还必须得由手工,毕竟这些工作现在软件还替代不了。

进行PSD切图和转换工作的基本原则是代码与图片设计的分离。也就是说,在拿到PSD设计图稿之后,根据设计图只需要确定一个基本的结构框架,而页面代码基本上是通用的,但是需要根据设计添加适当的元素标签,这些元素与具体的设计形式没有关系。一个典型的HTML5页面头部代码如下:

	<!DOCTYPE html>
	<html>
		<head>
			<title>My HTML5 Website</title>
			<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
		</head>

HTML5的便捷之处体现在它提供了更直观更丰富的页面标签,比如Header、footer标签。它的强大之处则体现在对多媒体的处理和呈现,比如画图、视频播放等。 对于常规的页面而言,Body标签的内部就不用再是反反复复的DIV的嵌套了,也无需为DIV的ID或样式设置而头疼了。一个简洁的HTML5页面内部的标签示例如下:

	<body>
		<header><a href="index.html" id="logo"></a><img src="images/banner.png" id="banner" /></header>
		<ul id="nav">
			<li><a href="index.html">home</a></li>
			<li><a href="#">about us</a></li>
		</ul>
		<div id="left"></div>
		<div id="right"></div>
		<footer></footer>
	</body>
	</html>

基本上绝大多数页面都可以采用以上架构来进行编码,所不同的是内容的添加和样式的设置。而切图工作的重点则在于先编码,后切图,通过编码决定切图的方式而不是直接简单的把图片切成很多小片。并且很多时候,有些可以采用背景色来代替的情况就根本没必要使用图片了,这样可以大大减小最终文件的大小。对于PSD文件的处理,需要精确到像素级别(之所以大多数时候我们做HTML5编码转换工作时要求使用PSD的源文件,原因就在于可以在像素级别进行精准操作,但这并不是说其它格式的文件不能进行转换,通常来看,常用的JPG,PNG,BMP等图片也可以转换为HTML5,前提是图片本身的分辨率要足够。),有些可以重复的背景就不用切大块的图片了。这样在PSD转换为HTML5的过程中可以兼顾到大小、执行效率,也便于做SEO的相关设置。