请问现在网页从效果图切片怎么产生纯div的页面

[avatasia]

接手个项目，页面div，table混编，css，js文件遍地都是，图片一坨一坨的，我是完美主义者，想问下前端这块该怎么做，用什么工具？

[holystrike]

重做比改还来得快

[whitegerry]

纯div? 犯了根本的概念性错误吧。。

[panlilu]

table该用的时候就得用。比如表单的布局什么的～
什么标签都有自己的作用。
工具的话找个顺手的文本编辑器人工敲吧。。要是追求点效率配合使用zencoding

[Hyperion]

不要吝啬dreamwear了, 戳开来用吧... 文本编辑器只适合结构良好的东西...

不管是大范围还是局部, 切片这种做法我觉得很愚蠢...

[avatasia]

那从效果图到实际页面，这个流程怎么做？ 难道记录每个元件的尺寸位置，然后自己在css里写？css的盒子模型很蛋疼的啊。我看了g+等很多网站，貌似都是纯div，没table的。table我觉的就是省事，直接，但是页面代码看起来很愁人。

[whitegerry]

@avatasia 你没理解到吧，table是用在二维数据列表上的，如果你觉得网页标准是渣那么用table来布局也没谁管得着，盒模型就那么点东西没什么蛋疼的地方。。。

先按照效果图把xhtml架构写出来，这个过程你可以整体到局部也可以局部到整体，涉及到按钮、背景和其他图片可以先切出来备用或者代码写到这部分的时候再切都可以，这个流程貌似也没什么说头。

[avatasia]

@whitegerry 那请问这样子出来的页面是不是跟原效果图就有所出入，怎么保证原汁原味，还是我的要求太奢侈了？

[istef]

@avatasia 不介意生成的代码很烂可以考虑直接用 photoshop 的切片工具，保存成 web 时同时生成 html，最后就会得到一个和效果图一模一样，然后代码被所有前端唾弃的页面。。。。

[Paranoid]

google : from psd to html 有一本书书名就这个。

[whitegerry]

@avatasia 是否原汁原味就要看你的xhtml结构和css质量了。ps导出来的切片页面我记得都是绝对定位，而且内容填充要考虑的东西太多，可用性几乎没有。

[whitegerry]

@avatasia 不知道你xhtml+css是否有经验，有经验的话大概不会纠结这些问题，如果没有经验。。。

[krazy]

先把html结构写好，再写CSS样式。从header,content,footer一部分一部分的写，处理好兼容就行了吧。
切图的话，切图的时候记一下需要的尺寸，背景能平铺的就平铺。小图标太多就用css sprite拼一下