前端制作（美工）是怎么把PSD制作成页面的？

美工怎么做的我不清楚，因为我是做前端的，我就从前端这个角度说吧。

首先拿到PSD，先分析哪些是要导出为图片的，哪些是可以自己用代码完成的。
将图片全部导出，要做成雪碧图的都做成雪碧图

然后直接开始码代码，在谷歌浏览器或者火狐中测试，不要用IE做第一次测试。
1.对照设计图，写好框架
2.完善细节，添加JS效果（可重用的组件，模块注意分离）
3.完善所有页面，测试浏览器兼容

PS:如果是无任何前端基础，单纯的是美工的话我就布吉岛了，记得是直接用PS的切片工具加DW调整。 再说这种事情本应是前端做的呀，为毛要让美工or设计师做，做出来的有用不。。。

编码规范和组件模块如何分离可以参考网易的NEC规范
规范 - NEC : 更好的CSS样式解决方案

作者：朱乐义
链接：http://www.zhihu.com/question/23824421/answer/25782086
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

 
 
http://www.uimaker.com/uimakerhtml/uistudy/2010/0430/3379.html
 

psd做成HTML相关参考页面的更多相关文章

  1. js检测移动设备并跳转到相关适应页面。

    PS:网页自适应的方式有多种.有通过CSS样式表来实现自适应(主流),也有通过显示不同的页面来实现的方式. 下面代码是记录通过判断设备特征来跳转到相关的页面的方法. 实现要求: 当手机,平板访问 a. ...

  2. 系统UINavigationController使用相关参考

    闲来无事便在网上google&baidu了一番UINavigationController的相关文章,然后又看了下官方文档:看看更新到iOS7之后UINavigationController的 ...

  3. HTML 内嵌JS脚本、相关参考手册

    提供一个JS.HTML参考手册入口:http://www.w3school.com.cn/jsref/index.asp. JavaScript 最常用于图片操作.表单数据处理以及内容动态更新. &l ...

  4. 根据一个旅游网站的psd素材还原的静态页面

    自学web前端的html.css和jquery两个月,想检验下自己的学习成果,遂从网上下了个关于旅游网站的psd素材,自己照着素材还原网站的静态页面. 这是我制作好的静态页面的压缩文件:旅游网站首页. ...

  5. Python 异常相关参考

    Python所有的异常都是从BaseException类派生的,常见的错误类型和继承关系如下: BaseException +-- SystemExit +-- KeyboardInterrupt + ...

  6. java相关各种页面跳转

    AK相信页面跳转在这个圈圈圆圆里是个地球人都能经常遇到的事,AK也在平时的工作学习中记录了一些,这里就做一个小小的总结,有任何的疑问和质疑都希望您能告诉我,不用担心后果,必定至少您还能理我,AK万分感 ...

  7. ECharts的使用相关参考---转

    ECharts图表组件初级入门之(一):如何将ECharts引入至项目中的几种方式 http://www.stepday.com/topic/?801 ECharts图表初级入门篇:如何配置EChar ...

  8. PHP验证码参考页面

    http://blog.sina.com.cn/s/blog_95ee14340100z8q9.html http://www.jb51.net/article/44951.htm

  9. asp.net 安全性相关参考

    <system.web> <depolyment retail="true" /> </system.web>   AntiXSS http:/ ...

随机推荐

  1. [转]Cordova + Ionic in Visual Studio - 101 Tutorial [Part I]

    本文转自:http://binarylies.ghost.io/cordova-ionic-in-visual-studio/ Hi everyone, I thought about lending ...

  2. 【Android UI设计与开发】4.底部菜单栏（一）Fragment介绍和简单实现

    TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Acti ...

  3. 详解Webwork中Action 调用的方法

    详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...

  4. 【转载】jQuery Validate 菜鸟教程

    文章1:http://www.runoob.com/jquery/jquery-plugin-validate.html          (jQuery Validate 菜鸟教程)

  5. 五个有用的jquery小技巧

    1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { retu ...

  6. Centos7网络监控

    EPEL是企业版 Linux 附加软件包的简称,EPEL是一个由Fedora特别兴趣小组创建.维护并管理的,针对 红帽企业版 Linux(RHEL)及其衍生发行版(比如 CentOS.Scientif ...

  7. 2D Tookit (一) 精灵切割

    Sprite Dicing 精灵切割 图一:原图 Diced 设置   Diced[切割]对比图 文档 http://www.2dtoolkit.com/docs/latest/advanced/sp ...

  8. SqlServer 注入技巧

    一.SA权限执行命令,如何更快捷的获取结果? 有显示位 显示位 其实这里的关键并不是有无显示位.exec master..xp_cmdshell 'systeminfo'生成的数据写进一张表的时候,会 ...

  9. Jsp页显示时间标签JSTL标签 <fmt:formatDate/> 实例大全

    <fmt:formatDate value="${isoDate}" type="both"/>2004-5-31 23:59:59 <fmt ...

  10. 26Spring_的注解实际应用_关键整理一下之前的注解

    写一个银行转账案例, 案例结构如下: