怎么把ps转化成html,【论文】浅谈Photoshop转化成Html的方法.pdf

科技信息计算机与网络

浅谈Photoshop 转化成Html 的方法

江苏经贸职业技术学院信息系马涛

［摘要］Photoshop 是公认最出色的图像处理软件之一，与平面设计或者广告设计一样，网页设计也可以在Photoshop 上进行，这样

可以让界面设计工作从Dreamweaver 的排版中脱离出来，而且效果更加专业漂亮。但是用Photoshop 设计出来的网页是psd 格式，

必须进一步转化为html 格式。本文通过一个具体案例详细介绍了这个转化过程，希望能对学习网页制作的人员有一定的启示。

［关键词］Photoshop Html Web 网页制作网页设计

Photoshop 转化成html 是商业级网站开发的一个重要环节，每个设点击click ，已浏览visited 。如:搜索按钮: btn- search、btn- search- hover 、

计师进行网页设计的时候，最开始都是用Photoshop ，而最终成形的却是 btn- search- visited 。

html 网页，其中关键部分就是如何将psd 文件转换成html 网页。这需要 (4)具体案例

大家不仅熟悉Html/Css/Javascript ，能制作各式各样的网页元素，还要熟给网页psd 文件划分区域，给每个区域命名，请看表2 和图 1 所

悉Photoshop 截图/ 切图的技巧和方法。本文将重点介绍这一过程的方示：

法技巧。表2 网页布局详细说明

一般情况下，不同的网页设计师在拿到美工的psd 图时会有不同图层名称图层内容

的做法：第一类是打开fireworks 将图片切割导出为html 。第二类是直接

在dreamweaver 之类的工具去拖拉布局，导入相关的图片，flash 资源。第 wrap 网页的最外层，包含一切内容

三类先在ps 中完成切图后，在文本编辑器中看着效果图一步步的制 header 包含logo

作。

nav 导航条

以上是大多被采用的方法，但都不好：第一种方法最为不好，这样

的代码根本不具维护性和可读性。第二种方法也不好，代码难免会有冗 main- content 主体部分主要文字

余，做出来的东西基本需要排查一遍。第三种方法也不好，因为你需要 sidebar 主体部分右边红色图片

看效果图一点点的拼，也就是说写html 标签的时候，你在不断的假设这

footer 网页底部信息

块要怎么去显示。那么正确的做法是什么？

1、网页布局

(1)为什么要进行网页布局

此处的网页布局是针对成型的网页设计稿psd 文件，形成一个直

观的执行线索。具体点就是明确几个问题，版面可以分成哪几大区域？

哪些部分先做？制作的顺序是什么？自上而下还是从左到右？这样操作

的好处在于网页局部出现问题不会影响全局，总的区块划分好后便逐

个添加细节元素，在添加的过程中难免会出现一些问题，但是有总的框

架在，你会思路清晰地在局部将问题解决掉。

(2)如何进行网页布局

采用DIV+CSS 方式进行网页布局，这种方法是一种比传统采用表

格嵌套内容的方式来制作网站更好的网站设计方法。如今仍有部分网图1 网页布局

站采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比 2 、搭建网页框架

较熟悉、比较上手，但是，它却阻碍了一种更好的、更有亲和力的、更灵

怎么把ps转化成html,【论文】浅谈Photoshop转化成Html的方法.pdf相关推荐

浅谈计算机硬件维护论文,论文浅谈计算机硬件维护.pdf
论文浅谈计算机硬件维护,计算机硬件维护论文,浅谈计算机网络论文,计算机硬件论文,计算机硬件毕业论文,计算机硬件技术论文,浅谈会计职业道德论文,浅谈幼儿教育论文,浅谈安全管理论文,浅谈企业文化论文第 ...
PS-第十二天-PS色阶的使用原理浅谈
PS色阶的使用原理浅谈色阶是什么:色阶就是用直方图描述出的整张图片的明暗信息. 样图如图,从左至右是从暗到亮的像素分布,黑色三角代表最暗地方(纯黑),白色三角代表最亮地方(纯白).灰色三角代表中间 ...
php动态网站开发论文,浅谈《基于PHP的动态网站开发》课程的项目案例设计
电子论文浅谈<基于PHP的动态网站开发>课程的项目案例设计时间:2020年05月25日所属分类:电子论文点击次数: [摘要]在教学资源建设中,案例设计建设是非常重要的资源之一.运用 ...
浅谈计算机辅助数学教学论文,论文浅谈对计算机辅助数学教学的认识.doc
论文浅谈对计算机辅助数学教学的认识.doc Xx师范学院本科生毕业论文(设计) 题目专业院部学号姓名指导教师答辩时间论文工作时间: 年月至年月摘要:计 ...
浅谈计算机辅助数学教学论文,论文浅谈对计算机辅助数学教学的认识精选.doc...
论文浅谈对计算机辅助数学教学的认识精选 Xx师范学院本科生毕业论文(设计) 题目专业院部学号姓名指导教师答辩时间论文工作时间: 年月至年月摘要:计算机 ...
浅谈共线性的产生以及解决方法(上篇——前世)
标题:浅谈共线性的产生以及解决方法(上篇--前世) 1. 多元线性回归模型在线性相关条件下,两个或两个以上解释变量对一个被解释变量的数量变化关系,称之为多元线性回归分析,由多元线性回归分析得到的数学 ...
浅谈共线性的产生以及解决方法(中篇——今生)
浅谈共线性的产生以及解决方法(中篇--今生) 上篇我们讲到共线性概念以及共线性问题存在时对模型的影响.那么如何对样本数据中存在的共线性问题进行诊断呢? 3 多重共线性的诊断方法 3.1 相关系数法对 ...
浅谈Python类的属性和方法
浅谈Python类的属性和方法参考文献在python中,有私有属性和公有属性,方法我们也一样,他们之间有何区别? 还有类属性和实例属性又是怎么回事? 静态方法和类方法又有什么区别? 我们在工作过程 ...
piv图像处理文献综述_浅谈photoshop对图片的处理文献综述
浅谈 photoshop 对图片的处理 The Treatment to Discuss Photoshop Images 摘要 : Photoshop :它是由 Adobe 公司开发的图形处理系列 ...

怎么把ps转化成html,【论文】浅谈Photoshop转化成Html的方法.pdf

怎么把ps转化成html,【论文】浅谈Photoshop转化成Html的方法.pdf相关推荐

最新文章

热门文章