psd 转成 div+css的形式,基本操作的流程是什么,多谢

html-css05

psd 转成 div+css的形式,基本操作的流程是什么,多谢,第1张

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

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

→ 图片显示区域,

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

② 箭头:编辑输出设置

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

不能直接切出div+css的形式!

转成div+css的形式:首先你要对DIV+CSS熟悉,只有这样你才会在设计网页的时候考虑到怎样设计页面才能达到既能用DIV+CSS布局,又不影响整体效果。因为好多初学者在用ps设计页面好后,都是因为事先没有考虑这一点儿,导致最后无法用DIV+CSS实现!你可以看一下有名的站点儿,保存它们的首页用DW看一下,就明白了!~

1. psd按1:1比例做好图,分辨率设置为72

2.做好图后将你需要的图片单独切下来,用psd生成的网页基本上没用(1.代码很累赘,2.不方便修改,3.生成的是table格式)所以最好是自己手动重写

3.div+css 按照你的网页设计来布局,写DIV时尽量简洁,不要多层嵌套,最好不要超过3层

4.如果图片都很小的话 可以整合到一张图片(01.gif)上 利用坐标控制 ,首先建一个固定大小的div层(如:id设置为 A),再给这个层设置背景,然后利用坐标控制背景的位置,如(#A{background:url(images/01.gif) no-repeat 10px -20pxwidth:20pxheight: 20pxfloat: left})注:图片最好用 gif格式因为png在IE6中不透明很麻烦!

5.试几下就明白了哈~~