PSD模板设计图转化为HTML模板的正确做法

其实标准的网制作完成的工作实际是:psd to html,一般情况下,我们会拿到美工的psd,这时候不同的

人会有不同的做法:

1.打开fireworks将图片切割导出为html。

2.直接在dreamweaver之类的工具去拖拉布局,导入相关的图片,flash资源。

3.先在ps中完成切图后,在文本编辑器中看着效果图一步步的制作。

以上是大多被采用的方法,但都不好:

第一种方法最为不好,这样的代码根本不具维护性和可读性。

第二种方法也不好,代码难免会有冗余,做出来的东西基本需要排查一遍。

第三种方法也不好,因为你需要看效果图一点点的拼,也就是说写html标签的时候,你在不断的假设这块

要怎么去显示。

正确的做法是:

1.拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么

渲染,完全自然化的标签,不加任何的css。

2.写完之后在各个浏览器运行之后确保大体定位都没有问题。

3.书写总体css,这里的css只负责大块的定位及样式。

4.切出需要的图片资源,在写好的框架中一点点的去构造,不断的调试,最终为成品。

5.最后,为自己的代码添加注释,在css,html中都要合适的为自己的代码添加注释。

要想做出能灵活切换皮肤,让css主导表现,还有很多要注意的地方,但大体的流程就是这样的,当然我

们一开始不能直接就做到先写html,但起码要有这个意识,循序渐进。。。

谢谢热心会员"linxz"提供实际经验,我贴上来供大家参考:
PSD出网站从两个大点考虑
一、一个独立的页面
1、分析这个页面,先在脑袋中或者草稿纸上描绘大概的结构
2、根据设计稿的的情况,分析背景图的分布、ICO图的分布等
3、切割相应的图片,导出、合并图片
4、在编辑器中写整体结构XHTML代码,包括页面中出现的所有元素的结构
5、编写CSS样式中的整体以及模块代码
6、细节调整
7、收工,浏览器验证是否正确

二、由多个页面组成的小站点或者大站点
1、浏览所有设计稿,统一规划站点模块、图片、文件分布
2、开始第一点的操作,但规划站点的内容分布很重要

整体考虑点:
图片的合并,减少请求量
结构的合理性,语义化
样式的简洁,便于后期维护
多为后期的维护以及程序开发着想,如何简单实现效果。

转载:http://blog.sina.com.cn/s/blog_6901eb650100ypjh.html

时间: 2024-08-30 14:13:10

PSD模板设计图转化为HTML模板的正确做法的相关文章

模板(1)函数模板

1.引入 如何编写一个通用加法函数?第一个方法是使用函数重载, 针对每个所需相同行为的不同类型重新实现这个函数.C++的这种编程机制给编程者极大的方便,不需要为功能相似.参数不同的函数选用不同的函数名,也增强了程序的可读性.简单示例: 1 int Add(const int &_iLeft, const int &_iRight) 2 { 3 return (_iLeft + _iRight) ; 4 }f 5 loat Add(const float &_fLeft, const

Django——模板层(template)(模板语法、自定义模板过滤器及标签、模板继承)

阅读目录(Content) 模板语法之变量 模板之过滤器 default length filesizeformat date slice truncatechars safe 模板之标签 自定义标签和过滤器 模板继承 (extend) 模板语法之include 前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 4 def current_dat

flask模板的基本用法、模板语法、渲染模板、模板辅助工具

flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTML代码中插入变量,这时我们需要使用模板引擎(template engine).借助模板引擎,我们可以再HTML文件中使用特殊的语法来标记变量,这类包含固定内容和动态部分的可重用文件称为模板(template). 模板引擎的作用就是读取并执行模板中的特殊语法标记,并根据传入的数据将变量替换为实际值,输

zabbix使用自己编写脚本模板和zabbix自带模板两种方法添加对指定进程和端口的监控

zabbix使用自己编写脚本模板和zabbix自带模板两种方法添加对指定进程和端口的监控 1.自带监控模板进行os的监控 进入/usr/local/zabbix/etc/zabbix_agentd.conf 配置文件修改 LogRemoteCommands=1     ###开启脚本功能 Server=192.168.5.129     ##修改zabbix指向的服务器: 重启zabbix_agentd.zabbix_server服务 在配置-->主机-->添加主机--> 配置主机信息主

函数模板,函数模板重载,可变参数模板,函数模板覆盖,通过引用交换数据

 1.函数模板初级,如果想使用模板,需要实例化,实例化的方式是加上<数据类型> #include <iostream> //函数模板可以对类型进行优化重载,根据类型会覆盖 //如果仍然要使用模板函数,需要实例化 template<class T> T add(T a, T b) { std::cout << "T add " << std::endl; return a + b; } int add(int a, int

DataUml Design 教程5-代码模板介绍(甚于T4模板技术)

DataUml Design 代码模板完全基于C#语言来编写的.不懂写模板的可以请教作者,随时欢迎.下面是一段模板代码,这段代码可以获取一个类结构的所有信息. <#@ template language="C#" HostSpecific="True" #> <# NetUmlTemplateCodeHost host = (NetUmlTemplateCodeHost)(Host); #> 命名空间:<#= host.ClassPro

Discuz3.3精仿小米风格整站模板制作——1、新建模板方案

术语说明: 模板——模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观. 标签——标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等. 风格——风格是一个xml配置文件,用于配置一些固定区域字体的大小.颜色.背景色等.例如春节时,整个版面变成喜庆红色等.风格这个功能实质上是一种可以直接在后台设置论坛中固定格式的文字(如标题列表等)的大小.颜色.背景色等而不用单独写css文件进行覆盖的技术.对于有编码能力的站长来说,其实无多大意义. Disc

C++ Primer 学习笔记_45_模板(三):缺省模板参数(借助标准模板容器deque实现Stack模板)、成员模板、关键字typename

一.缺省模板参数 1.stack内存能否借助标准模板容器管理呢?答案是肯定的,只需要多传一个模板参数即可,而且模板参数还可以是缺省的,如下: template <typename T, typename CONT = std::deque<T> > //此处末尾必须有空格,否则编译出错 class Stack { - private: CONT c_; }; 如果没有传第二个参数,默认为deque 双端队列,当然我们也可以传递std::vector<T> 2.示例:借助

C++学习之模板 (二) -----类模板

由于将函数和类模板放在一块篇幅较大,我们今天将其拆分为两篇博文. 上篇博文我们讨论了函数模板的简单应用,本篇我们继续讨论模板的另一板块--类模板. 1).作用:类模板类似于代码产生器,根据用户输入的类型不同,产生不同的class: 2).编译: a):检查模板class 的自身语法: b):根据用户指定的类型 如 vector<string>,去实例化一个模板类. 注意: 不是实例化所以的代码,而仅仅实例化用户调用的部分: 类模板:简单实现如下; 1 #include <iostream