关于如何将网页效果图制作成网页

[rokeyzki]

问题

• 作为 web 码农，长期写服务端的代码，出于工作需要，也大量接触前端的工作，但是基本是写 JavaScript ，用于实现页面的动态交互效果以及与后端的各种配合。
• 个人一直很好奇，前端们是如何将设计师制作出来的网页设计稿（如 psd 效果图）转化为 HTML+CSS 代码的呢？

讨论细节

• 转化方式不包括直接将效果图通过 PS 等软件直接切图导出为网页格式，这种工作就像切图仔一样，代码难维护，也不容易转为 Responsive Design 以适配各种终端，想跟各位前端老师学学有没有更规范更优雅的制作方式，感谢大家不吝赐教
• 有这方面工作经验的前端，谈一谈在进行页面制作时的大致流程
• 在制作过程中，与设计师配合有哪些需要注意的地方
• 学习这方面知识，有没有什么不错的资源推荐(书籍、视频均可)

[username10086]

第一次听别人说 “切图仔”。
我觉得你要是做响应式布局的话，至少你要跟设计师讨论和交流主体框架，再让他设计（至少两套 UI ）。
就凭 一个 web 网页设计图 你就能自己切出 “ Responsive Design 以适配各种终端 "。
是不是响应式 关键还是你们的风格定位，不单单是切图切出来的吧。

[rokeyzki]

@username10086

“转化方式不包括直接将效果图通过 PS 等软件直接切图导出为网页格式，这种工作就像切图仔一样”：我意思是单纯依靠软件来做划线切图导出 HTML ，这种工作就像切图仔一样。

“代码难维护，也不容易转为 Responsive Design 以适配各种终端”：我意思是，单纯依靠切图软件导出的文件，里面的代码根本不具维护性和可读性，无论从语义化的角度还是方便前端后期 Responsive Design 重构都不友好，我提这个的初衷是考虑如何让前端与设计之间的配合更加效率。

重点在于前端如何通过设计图写出方便维护、可模块化、甚至可复用的页面代码，重点在于制作的流程方式，而不是单单依靠切图，问题的重点不在于是不是响应式，更不是讨论风格定位。