如何将psd网页切图转换成html

html-css08

如何将psd网页切图转换成html,第1张

psd网页切图转换成html,其实psd的切图就是网页前端的初步设计,这时候,网页的形象已经出来了,然后需要做的就是前端人员将psd的切图,参考psd去用html+css等一些语言去完成设计,如网站的背景,就需要css的background来实现,具体看下代码:

<html>

<head>

<style>

body{

width:960px

//限定网页的宽度

margin:0

auto

boreder:1px

solid

#f00

//加个边框利于观察

}

</style>

</head>

<body>

<p>我是测试文字</p>

</body>

</html>

在Photoshop里不能将文件保存为.html格式,因为软件内没有封装该格式保存类型。

下面就用两个实例来证明推论的正确性。

实例一:用存储为方式来保存为网页文件。

1.打开任意图片,点击文件-存储为。

2.点击格式下拉列表,发现没有.html格式,只能放弃保存.html格式操作。

实例二:用存储为 Web 所有格式来保存为网页文件。

1.

2.点击预设,发现没有.html格式。

3.再点击预设下的下拉列表框,发现还是没有.html格式。此时彻底没辙,因为所有的保存方式都尝试过了,但最终没有发现.html存档方式。

由上述两个实例可以证明:Photoshop不支持保存.html格式文件,即不支持图片保存为静态网页文件。

将psd网站模板转换成html网页形式,首先需要理解,psd的模版,只是对于网站的一个整理布局,使用图片的形式来做的,而在浏览器上需要过html+css+js等等这些技术手段才可以来做出来,如PSD的网站的背景颜色,在网页中,需要去使用background:#f00,来实现,psd其实就是一种参考,具体我们看下,一些小的代码设计:

<html>

<head>

<style>

body{

width:960px //限定网页的宽度

margin:0 auto

boreder:1px solid #f00 //加个边框利于观察

}

</style>

</head>

<body>

<p>我是测试文字</p>

</body>

</html>