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)
江山如画的头像江山如画管理团队
跟永哥学HTML5(6)H5语义化标记使用示例
上一篇 2020年2月12日 上午7:57
如何制作自己的网页
下一篇 2020年2月18日 下午8:42

99%的人还看了以下文章

  • 页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

    servlet中文显示乱码:
    1、servlet中输出中文字符
    2、servlet接收表单传值并显示,表单字段含中文。

    网页制作 2020年2月23日
    8.4K0
  • div+css制作上中下,中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。 上中下结构,中间又分为两列的全屏自适应布局HTML代码: <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

    2018年8月2日
    7.3K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    7.5K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    6.5K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    5.3K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    7.6K0

发表回复

登录后才能评论