Question

切割网页后怎么变成div+css布局

已经设计好的一张网页图片要变成html、是不是一定要先经过切割？必须吗？？div+css布局的网页是最好切割过（建议吗？？）还是不需要切割可以直接在Dreamweaver中制作？？
如果是要切割但是PS切割后是table表格模式的、要怎么样把它变成div+css？？是在切割好的html中直接修改成div+css还是把这个html作为模板重新新建一个html、在新建的html里对照原来的模板制作需要的网页？？？？？？
万分感谢好心人能帮我解答一下、本人急需

Answer 1

使用ps切片，切好了保持为 web存储格式  弹出的窗口可以设置保持的类型的，可以设置成div加css的

如下图：切好片以后，文件保存为web存储文件，就会弹出下面的图片。

点击红框的箭头。点击输出设置。

如下图：选择切片，下面就会出来生成css

Answer 2

PS 是设计工具 出平面设计稿用的。不推荐使用PS来切片转HTML页面，直接生成的页面，就是满屏幕的表格，把你做的切片放在每个小方格里而已。

我的方法是：制作布局前，在PS当中打开标尺，设置单位为：像素，然后添加辅助线吧！

横向纵向的辅助线，把你的平面稿布局给分开，分析完你的平面稿以后，在开始制作页面。

要用DW制作页面，其中平面稿中的 页面布局 通过DIV+CSS来实现，然后再把必要的图片 通过PS切出来，加入到网页当中。

原则：1 符合web标准 2 用尽可能少的图片，来达到原来平面设计稿的效果。3 充分考虑到用户的使用习惯和阅读习惯

布局当中，用到图片的技巧比较多，比较细碎，不能一一列举了。简单说几个：
1 UL 列表前面的 小黑点，可以替换成图片
2 背景图片 可以切出来一小块，利用平铺来铺满指定区域
3 按钮 图片要有 多个状态，可以设计多个图片按钮来达到效果
4 至于 用 图片 替换链接文字 之类的，楼主随着CSS技能的提高慢慢就会掌握了，在此就不再赘述了。

这些都是静态页面的部分，不涉及到很多的编程和交互特效。如果需要特效或者为页面润色，可以用flash，也可以用jQuery来为你的页面增色，需要有编程基础。

制作静态页面 不只是需要PS设计能力，还要有HTML,CSS 的基础知识，两者结合在一起才能完成静态页面的设计和制作。从楼主的提问大概看出，楼主对于HTML方面的知识比较欠缺。建议去找一套专门的页面布局教程看一看。

下面随手搜了一个教程网站，仅供参考

Answer 3

在新建的html里对照原来的模板制作需要的网页。
用到图片或者背景 然后切一下需要的部分即可，做HTML把CSS样式代码都写到CSS文件里 然后引用这个CSS文件 即可。用类调用，比较简单，所以你如果会CSS的话应该不难理解。用什么切什么 不要直接都切了。都的地方如果是单一的颜色值的话 用CSS写就可以了，不需要切图做背景。

Answer 4

css+div是按照设计图的构图尺寸重新写代码的，有时候根本都不需要切割设计图，纯粹用代码实现。
只有一些特殊的设计效果代码实现不了的才会用到图片，这时候就将该区域的图片从设计图切下来，当做背景图或内容来处理。
建议你多参考别人的设计和代码的编写，这样会进步很快的。

Answer 5

没那么复杂吧，， 主要过程就是 把PSD图片 用PS 切割 然后编程HTML代码