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

html-css011

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

楼上这说的,从没见过哪个软件可以生成DIV+CSS的- -

将网页效果图切片成为HTML只用PS或者firework的切片工具将作网页时需要用到的图片切出再导成web格式,LZ可以先了解下网页的布局以及做网页时需要用到哪些图片,切出来的HTML是用table将每个图片装起来而组成的网页,可更改性低,建议LZ先用DIV+CSS写出网页大致框架,然后再把切出的图片填进去。

具体的转换步骤是:

切片工具切图--------文件----储存为web和设备所用格式---- 点击储存后在格式化一栏选择HTML和图像

搞定~,很简单的。LZ只需要了解切图工具的用法就可以了。

PS:图片一般储存为PNG格式。一个网页最少需要两次切图,先考虑好自己网页布局和需要的图片再切片导出,可以大大提高工作效率哦~

1、如果是个别图片需要插入到网站里,可以在ps里做好后,在div里引用;

2、如果是一整张图,作为一个网站,可以在ps里,用切片工具切成一块块(尽可能的规则,需要加链接的地方,则要切成一整块),然后“保存成web所用格式”(Ctrl+Shift+Alt+S),

→ 图片显示区域,

① 预设:设置保存图片的格式

② 箭头:编辑输出设置

③ 选择“html” 格式(自动生成css代码),选择“切片”格式(自动生成table代码)