ps转换html适应网页尺寸,PS图片转页面CSS+HTML的步骤

制作网页标准的流程是：拿到网站美工制作的psd效果图后，

在由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，但起码要有这个意识，循序渐进。。。

要想了解

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

ps转换html适应网页尺寸,PS图片转页面CSS+HTML的步骤相关推荐

ps转换html适应网页尺寸,【ps制作网页页面】ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?...
[ps制作网页页面]ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?下面就和小编一起来看看吧! ps图像如何生成html? 事实上,ps有很多功能.你还羡慕 ...
10款实用高效的网页版PS插件推荐！
PS是设计界适用范围广.应用次数多的基础性设计工具,PS的功能之强大,常常令新手望而却步.其实,为了对PS的功能进行补充和优化,这些年来陆续开发出了许许多多的功能性PS插件,在网页版 PS --即时设 ...
html 在当前页面时颜色不一样,网页中的图片在不同电脑上显示的颜色不同！求解决！_html/css_WEB-ITnose...
html jsp 网页背景色差图片 jsp页面中,表格中的顶部是用的一个图片做的背景.但是发现这个图片在不同的系统中显示出来的颜色由很大的色差. 请问是什么原因引起的.用的显示器同一个显示器.我是 ...
批量处理图形大小如何更改图片大小尺寸修改图片视频教程ps学习ps教程ps基础新教程
批量处理图形大小如何更改图片大小尺寸修改图片视频教程ps学习ps教程ps基础新教程
.ps格式的文件怎么打开？方法：通过GSview打开或将.ps转换成.pdf
下载的paper是.ps格式打不开的问题问题简述*what* 问题分析*why* 解决措施*how* 在网上搜到的没有很切合的解决策略,自己摸索成功解决,整个解决过程不难,但不是很通顺,所以打算自己 ...
ps制作手机端网页字体大小_制作网页的最佳字体大小
ps制作手机端网页字体大小 To make web content work, text on a page must be readable for all visitors. Following ...
找到了！2个在线版本的网页版 PS ！
官方出了一个在线网页版的 PS,但是仅限加拿大地区使用.不过还有两个在线版本的网页版 PS :Photopea 和即时设计,都是可以在线使用的设计工具,功能上能完成大多数 PS 的常用能力.所以我们就 ...
电脑配置低用不了PS怎么办？你需要网页版ps！
随着电脑配置提高随着提高的也有电脑软件这之中就包括Potoshop,而有些家庭或者工作室的电脑都很老旧没办法带起PS,所以下载我推荐大家使用网页版PS,没有困扰,只要屏幕够宽手机也能用,功能跟真正 ...
【ps功能精通】4.简单背景图片抠图
[ps功能精通]4.简单背景图片抠图学习目标: 学习内容: 学习时间: 学习产出: 一.套索工具组(L) 二.魔棒工具(W) 三.橡皮擦工具组四.色彩范围: 学习目标: 简单背景图片抠图学习内容 ...

ps转换html适应网页尺寸,PS图片转页面CSS+HTML的步骤

ps转换html适应网页尺寸,PS图片转页面CSS+HTML的步骤相关推荐

最新文章

热门文章