PSD 转化成 HTML
一般情况下,网页设计制作完成的工作实际是:psd 效果图 转成 html+CSS 的模板页面,一般情况下,我们会拿到美工的 psd,不同的人会有不同的做法:
- 打开fireworks将图片切割导出为html。
- 直接在dreamweaver之类的工具去拖拉布局,导入相关的图片,flash资源。
- 先在ps中完成切图后,在文本编辑器中看着效果图一步步的制作。
以上是最常被采用的方法,但都不好:
- 第一种方法最为不好,这样的代码根本不具维护性和可读性。
- 第二种方法也不好,代码难免会有冗余,做出来的东西基本需要排查一遍。
- 第三种方法也不好,因为你需要看效果图一点点的拼,也就是说写html标签的时候,你在不断的假设这块要怎么去显示。
总体思想:
- HTML → CSS
- 先写结构(HTML),再写样式(CSS)。让css主导表现。
- 注意 HTML 结构的合理性,语义化。
- 注意样式的简洁,便于后期维护。
- 如果是多个页面组成的小站点或者是大站点
- 浏览所有设计稿,统一规划站点模块、图片、文件分布。
- 图片的合并,减少请求量。
- 多为后期的维护以及程序开发着想,如何简单实现效果。
正确做法:
- 切图。
- 切出需要的图片资源,在写好的框架中一点点的去构造,不断的调试,最终为成品。具体包括:
- 根据设计稿的的情况,分析背景图的分布、ico图的分布等
- 切割相应的图片,导出、合并图片
- 编写语义化的纯 HTML / XHTML。
- 拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css。
- 写完之后在各个浏览器运行之后确保大体定位都没有问题。
- 编写 css 样式。
- 编写全局 css。这里的 css 只负责大块的定位及样式。
- 编写局部模块 css。
- 调整细节。
- 添加注释。
- 添加注释,包括 css 和 html 代码。
- 浏览器检验。
- 多浏览器查看效果。
参考:
http://www.2ky.cn/h/13/7219.htm
PSD 转化成 HTML的更多相关文章
- PPT转化成Image、PPTX、XPS、EMF
最近工作经常用到演示文稿,接触到了一款不错的免费软件—Free Spire.Presentation.使用之后发现这款软件非常轻巧,功能还挺齐全.这款软件的转化功能也是非常不错的,平时遇到的各种转换难 ...
- PSD文件在MAC上和在WINDOWS上的大小有本质区别
因为偷懒在MAC上的美工,发我的PSD文件,我就直接在上面做了= =后来不知道为什么无论我怎么合并图层.PSD的大小永远都是107M....然后忍无可忍重新画就从107M变成2M.....MAC为什么 ...
- .net 将List序列化成Json字符串
将List类型转化为Json,是我们平常开发时最常见的了.在使用中,有很多种方法,也可以使用. 第一种 第三方组件:Newtonsoft.Json.dll //转化成Json Newtonsoft.J ...
- fastjson将json字符串转化成bean对象解析出错的检查方法
我的情况是:解析第一层数据成功,解析第二层嵌套的数据失败.如: { "response": { "resultcode": "0", &qu ...
- js将json字符串转化成json对象的方法
js将json字符串转化成json对象的方法: JSON.parse(jsonObject)
- 10套免费的 Photoshop UI 元素以及 PSD 素材
免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组 ...
- 圣诞礼物:分享几套漂亮的圣诞节 PSD 素材
马上就到圣诞节了,这篇文章要给大家分享几套精美的圣诞节相关的 PSD 设计素材,你可以免费下载使用,用于圣诞节相关的设计项目中.这些免费素材能够帮助你节省大量的时间,而且能有很好的效果. 您可能感兴趣 ...
- 年度榜单:2013年最佳免费 PSD 设计素材揭晓
<年度榜单>系列继续给大家带来2013年度发布的好东西,这篇文章要给大家分享的是本年度最佳的12套精美的 PSD 设计素材,你可以免费下载使用.这些免费素材不仅能帮助他们节省大量的时间,而 ...
- 23套新鲜出炉的网站和手机界面 PSD 素材
Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这些套件让他们使用快速和有效的方式复制用户界面.这些类型的工具包提供了一个基本的用户界面元素,用于它们需要制作的网站或软件模型. 在这篇文章 ...
随机推荐
- 【转】VC++ MFC 常用技巧(一)
原文网址:http://www.lewensky.cn/read.php/106.htm (-). 下面是常见的Afx全局函数: AfxFormatString1:类似printf一般地将字符串格式化 ...
- wpa_supplicant无线网络配置
目前可以使用wireless-tools 或wpa_supplicant工具来配置无线网络.请记住重要的一点是,对无线网络的配置是全局性的,而非针对具体的接口. wpa_supplicant是一个较好 ...
- android获取设备屏幕大小的方法
// 通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay( ...
- 笔记-人老了-github
其实GITHUB是很不错的,虽然之前的JD泄露那件事情,后果很严重. 但是作为个人使用很不错的. github使用入门: 1:申请一个帐号 2:github使用ssh推送的.(ssh走的是加密) 所以 ...
- Linux学习笔记29——IPC状态命令
一 IPC IPC是进程间通讯,在前面,我们相继学习了进程间通讯机制有信号量,内存共享,消息队列.状态命令(ipcs)和删除命令(ipcrm)提供了一种检查和清理IPC机制的方法. 二 状态命令 1 ...
- 应用360云盘与SVN版本管理服务器搭建基于云端的版本控制软件
步骤一:(安装软件) 1.TortoiseSVN 2.VisualSVN-Server-2.71 3.安装云盘客户端360wangpan_setup 步骤二:(VisualSVN Server设置) ...
- maven常用插件配置
1.maven-jar-plugin插件 <!-- 排除资源文件中的properties文件,不需要打到jar中,后面通过assembly插件打包到conf目录中 --><plugi ...
- 放爬虫nginx
禁止火狐浏览器访问 例子
- Hibernate配置文件详解
Hibernate配置方式 Hibernate给人的感受是灵活的,要达到同一个目的,我们可以使用几种不同的办法.就拿Hibernate配置来说,常用的有如下三种方式,任选其一. 在 hibernate ...
- 一款很不错的html转xml工具-Html Agility Pack
之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htmlparser去分解html内容,然后按照dom的结构逐个生成xml字符串. ...