PS图片转页面CSS+HTML的步骤

标准的网页制作流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转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,但起码要有这个意识,循序渐进。。。

要想了解网页制作全过程,学会根据网页效果图PSD源文件,切图并制作出网页。

请学习:网页制作实战项目五:根据网页效果图制作网页

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4895.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月12日 上午7:57
下一篇 2020年2月18日 下午8:42

99%的人还看了以下文章

  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时,导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同,如导航的最后一个菜单不再需要分隔符或右边的空白间距,新闻或文章列表的最后一项不需要底边距,列表一般都会有分割线,但是最后一个列表没有分割线等。 如文章列表如下: <ul class=’posts’> <li class=’post’> <h3>中国…

    2018年9月27日
    2.4K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    2.4K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    2.6K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.4K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    6.1K1
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    5.3K0

发表回复

登录后才能评论