转载来源:https://www.cnblogs.com/gg_lihui/p/3396409.html

制作网页标准的流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html页面。
在由ps切图转CSS+HTML的过程中,通常有以下几种做法:
1.打开PhotoShop将图片切割,然后导出为(x)HTML页面或保存为web所用格式–选择页面和图片。
2.直接在DreamWeaver中布局,然后插入相关的图片。
3.先在PS中完成切图,再在文本编辑器中看着效果图一步步的制作。
中国网页设计站长分析以上3种方法的缺点
方法1最差,这样的代码根本不具维护性和可读性。
方法2也不好,代码难免会有冗余,做出来的东西基本需要排查一遍。
方法3的缺点是你需要对照着效果图一点点的拼,也就是说写html标签的时候,要不断的假设这块要怎么去显示。
PS图片转CSS+HTML页面的正确步骤是:
1、有经验的设计师拿到psd后,先直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css。
2、然后在各大浏览器运行之后确保大体定位都没有问题。
3、书写总体css,这里的css只负责大块的定位及样式。
4、切出需要的图片资源,在写好的框架中一点点的去构造,不断的调试,最终为成品。
5、最后,在css,html中为自己的代码添加注释。
在出页面的过程中还有很多需要注意的地方,但知道了正确步骤,我们一开始不能直接就做到先写html,但起码要有这个意识,循序渐进。。。

PS图片转CSS+HTML页面的正确步骤的更多相关文章

  1. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  2. wp加载本地HTML(附带图片,CSS,JS)

    wp加载本地HTML(附带图片,CSS,JS) Windows Phone:Load Local HTML with Img,Css,Js by 唐小崇 http://www.cnblogs.com/ ...

  3. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  4. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

  5. css美化页面

    css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...

  6. 微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案

    html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas 通过获取页面的 ...

  7. HTML+CSS实现页面

    使用HTML和CSS实现以下页面: 抽屉首页 个人博客首页 小米官网首页 登录注册页面 一.抽屉首页 1.实现目标:https://dig.chouti.com/ 2.代码: HTML: <!- ...

  8. JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  9. Android启动页面的正确打开方式 (转载)

    最近由于领导要求写一个手机APP,于是自学开始,不经意间想到使用过的手机APP在打开的时候都是会有一个启动页面,这是如何实现的呢?比较好奇,于是在网上搜到了以下这篇文章,经过个人实验的确可行,不过原文 ...

随机推荐

  1. 手机日期控件mobiscroll

    query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件可以让用户很方 ...

  2. .Net反射-两种方式获取Enum中的值

    public enum EJobType { 客服 = , 业务员 = , 财务 = , 经理 = } Type jobType = typeof(EJobType); 方式1: Array enum ...

  3. 几个简单js,普通写法和高逼格写法比较

    1. 取数组中的数据,并对空值设置默认值: 常规写法: let arr = [0, 1, null, '', 'abc']; let newArr = []; arr.forEach((item, i ...

  4. mpich安装

    1.简介与下载 MPICH是一种高性能的.可广泛移植的实现来自阿尔贡国家实验室的MPI-3.1标准. https://www.mpich.org/downloads/ 2.解压安装 tar xzvf ...

  5. sed和awk练习及知识点

    一.针对/etc/passwd操作 1.sed操作,将文件中的第九行至第十五行复制到第16行下. [root@ns1 lianxi]# sed '9,15H;16G' /etc/passwd 2.用a ...

  6. 官方一步解决各种Windows更新问题

    原文部分: 修复 Windows 更新问题 适用于: Windows 8.1Windows 10Windows 7   此分布指南有什么作用? 此分步指南提供的步骤可修复 Windows 更新的问题, ...

  7. 【RS】Automatic recommendation technology for learning resources with convolutional neural network - 基于卷积神经网络的学习资源自动推荐技术

    [论文标题]Automatic recommendation technology for learning resources with convolutional neural network ( ...

  8. java基础之----cookie,session,jwt

    概要 web中为什么要引入cookie.session机制,为了验证用户的身份,验证用户的身份是为了系统的安全,那如果是系统和系统之间的API调用怎么办呢?因为系统之间调用往往是没有用户系统的(用户系 ...

  9. FFT(快速傅里叶变换)

    FFT(快速傅里叶变换) 前置知识 \(1.复数\) \(2.单位根\) \(3.循环结构\) \(4.C++\) 1.复数 \(定义:形如a+bi的数,其中i^2=-1\) \(计算:1.(a+bi ...

  10. c语言中static 函数和普通函数的区别

    C程序一直由下列部分组成: 1)正文段——CPU执行的机器指令部分:一个程序只有一个副本:只读,防止程序由于意外事故而修改自身指令: 2)初始化数据段(数据段)——在程序中所有赋了初值的全局变量,存放 ...