实例详细讲解将PSD转成HTML
网页制作：PSD切成HTML的几个方法
网页制作：PSD切成HTML的几个方法网页制作：PSD切成HTML的几个方法导读：将设计好的网页PSD设计稿切成HTML是网页设计师经常要做的一件事情，除了CSS外，如何有效快速将PSD转HTML，其中的方法也有多种，文中分析了常用的方法与效果率更高的两种方法，仅供参考。
其实标准的网页制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法：1.打开fireworks将图片切割导出为html。
2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash 资源。
3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。
以上是大多被采用的方法，但都不好：第一种方法最为不好，这样的代码根本不具维护性和可读性。
第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。
第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html 标签的时候，你在不断的假设这块要怎么去显示。
正确的做法是：1.拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。
2.写完之后在各个浏览器运行之后确保大体定位都没有问题。
3.书写总体css,这里的css只负责大块的定位及样式。
4.切出需要的图片资源，在写好的框架中一点点的去构造，不断的调试，最终为成品。
5.最后，为自己的代码添加注释，在css，html中都要合适的为自己的代码添加注释。
要想做出能灵活切换皮肤，让css主导表现，还有很多要注意的地方，但大体的流程就是这样的，当然我们一开始不能直接就做到先写html，但起码要有这个意识，循序渐进。
谢谢热心会员"linxz"提供实际经验，我贴上来供大家参考：PSD出网站从两个大点考虑一、一个独立的页面1、分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构2、根据设计稿的的情况，分析背景图的分布、ICO图的分布等3、切割相应的图片，导出、合并图片4、在编辑器中写整体结构XHTML代码，包括页面中出现的所有元素的结构5、编写CSS样式中的整体以及模块代码6、细节调整7、收工，浏览器验证是否正确二、由多个页面组成的小站点或者大站点1、浏览所有设计稿，统一规划站点模块、图片、文件分布2、开始第一点的操作，但规划站点的内容分布很重要整体考虑点：图片的合并，减少请求量结构的合理性，语义化样式的简洁，便于后期维护多为后期的维护以及程序开发着想，如何简单实现效果。
Python语言实现将图片转化为html页面
Python语⾔实现将图⽚转化为html页⾯PIL 图像处理库PIL（Python Imaging Library）是 Python 平台的图像处理标准库。
不过 PIL 暂不⽀持 Python3，可以⽤ Pillow 代替，API是相同的。
安装 PIL 库如果你安装了 pip 的话可以直接输⼊ pip install PIL 命令安装 Pillow。
或者在 PyCharm 中打开 [File] >> [settings] >> [project github] >> [project interpreter] 添加标准库：↑搜索 Pillow 包，选中 Pillow，点击 Install Package 安装PIL 使⽤⽅法from PIL import Imageimg = Image.open('source.jpg') # 打开图⽚width, height = img.size # 图⽚尺⼨img.thumbnail((width / 2, height / 2)) # 缩略图img = img.crop((0, 0, width / 2, width / 2)) # 图⽚裁剪img = img.convert(mode='L') # 图⽚转换img = img.rotate(180) # 图⽚旋转img.save('output.jpg') # 保存图⽚↑ PIL 常⽤模块：Image, ImageFilter, ImageDraw, ImageFont, ImageEnhance, ImageFilter...图⽚处理过程图⽚转换成⽹页的过程，可以分成五个步骤。
⾸先要选择⼀个合适的HTML模板，控制好字体的⼤⼩和字符间的间距。
然后通过 Python 的⽹络访问模块，根据URL获取图⽚。
接着使⽤ PIL 模块载⼊⼆进制图⽚，将图⽚压缩到合适的尺⼨。
PSD转div css网页切图示例
<li><a href="#">加入收藏</a></li> </ul> CSS 代码： #header h1{ float:left; } 我们首先让 H1 左浮动。这样右侧 UL 部分就可以在同行显示了。 #header ul{ float:left; padding:50px 0px 0px 200px; list-style:none; } 为了避免问题，可以让 UL 也浮动。大家可以试一下，如果不设置浮动在 IE 各版本，火狐 中表现的是否一致 #header ul li{ float:left; padding:0px 10px; } 上边代码在火狐和 IE8 中没有问题，但是在 IE6 中会出现问题。我们会在后面进行讲解。 #header ul li a{ color:#555; text-decoration:none; font-size:13px; }
padding:10px 0px; } #main .container{ width:674px; margin-right:50px; float:left; } #main .subMenu{ width:226px; float:left; margin-bottom:10px; } #main .subMenu h5{ background:#19577c; height:39px; text-align:center; color:#fff; font-size:15px; line-height:39px; } #main .subMenu ul li{ border-bottom:1px solid #d4d4d4; background:#f1f1f1;
color:#fff; text-align:center; text-decoration:none; font-size:14px; } display:block;让 A 元素变成块状，然后好为其设置宽高背景。这里面还有一个要点就是 line-height:56px，同高度 56px 对应，可以实现什么效果呢。同学们想一下？ #nav ul li a:hover{ background:#177cb7; } 现在我们导航基本已经完成，但是还少了一个当前状态的导航效果。怎么办呢。 其实很简单就是为当前所在页面的 A 链接添加一个 ID 为 current 的标记。如下： <a href="#" id="current">网站首页</a> 接着这个状态和鼠标悬停时是一致的，所以很简单，只需要在鼠标悬停状态后边在添加一 个#nav ul li a#current 选择符即可。你完成没
pdf如何转换成html文件
pdf如何转换成html文件
面对pdf文件的转换问题，很多人都会犯难，不知道怎样把pdf转html。
pdf格式的文件是比较特殊的文件格式，因为它的安全性较高，不易被编辑修改，且阅读性较好，所以被广泛运用。
如果我们想将pdf转换成html，可以使用以下方法进行。
工具：迅捷pdf在线转换器——pdf转html /pdf2html
进入方法：
一、百度搜索关键字“迅捷pdf在线转换器”，找到对应页面点击并访问。
二、直接通过立即进入：pdf转html
转换方法：
1、首先，我们打开电脑，浏览器百度搜索“迅捷在线pdf转换器”关键字，找到相对应的网页点击打开
框内找到“pdf转html”点击。
弹出的窗口添加需要转换的文件，打开即可。
行文件的开始转换操作了
后的文件进行下载，保存到电脑中即可。
以上就是将怎样把pdf转html的方法了，我们使用迅捷在线PDF转换器可以方便的将文件pdf转换成html格式的文件。
有需要的朋友
可以收藏哦！。
实例详细讲解将PSD转成HTML
将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。
因此本教程通过对一个完整实例的详细讲解来教大家如何将psd转成html/css，转换后的html/css可兼容各种主流浏览器。
我们将设计页面分成基本的5个部分，每一个部分都有自己的容器wrapper和内容。
基本的流程是先编写Html代码，然后通过编写CSS来还原psd设计稿。
点击下载PSD文件1.我们需要从PSD文件得到什么？如下图，我们只需要从这个psd文件得到4个非常基本的东西。
推荐内容(featured)的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。
其余的部分我们只需要通过CSS 生成或者在html里嵌入相应图片。
下图红线圈起来的地方，就是我们需要从psd获取的内容。
本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。
你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。
2.设置站点为一个网站设置良好的开发环境是非常重要的，我已经创建了一个非常基本的文件夹结构来建立这个网站，下面是文件夹结构设置，也可称之为模板。
文件夹结构下面这个文件夹结构是由html文件、CSS文件、js等文件组成，你可以根据自己的需要调整文件夹结构。
∙ 根目录o 这是放置index 首页文件的地方 o 这是网站的顶级目录∙ JavaScript 文件夹o 这是放置JS 文件或者js 框架jquery 的地方o 我们在这个教程用到的jquery 插件Nivo-Slider （做推荐内容）也放在这个文件夹里∙ 样式（Styles ）文件夹o 这里是存放css 文件的地方，网页所要用到的图片放在另一个独立的文件夹，图片文件夹还包括两个子文件夹:o Images : 这是我们存放推荐内容部分的图片以及网站展示的图片的地方 o Template : 这是存放和网页设计样式相关图片的地方，比如说底部背景图具体文件的放置将index.html 文件放置在根目录，这个文件也是我们编写html 代码的文件。
PSD网页切图制作HTML教程
PSD网页切图制作HTML教程把psd页面利用div+css切割成html页面首先看看效果下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....新建文件夹开始时，在您的计算机中创建一个文件夹。
我把它命名为zmool。
再在文件夹中创建新文件夹images，放网站的所有图像。
接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。
现在创建一个新的CSS文件，并将其命名为style.css文件。
如下图：打开index.html文件。
在head标签顶部，添加链接到您的样式表（style.css）。
你可以使用下面的代码。
<link href="style.css" rel="stylesheet" type="text/css" />头部的代码如下面:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Modern Design Studio</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body></body></html>建立HTML结构现在，我们将设置HTML文件结构。
怎样把psd格式转换为cdr格式文件
怎样把psd格式转换为cdr格式文件
在coreldraw中格式的转换相信大家还不是很熟悉，容易搞混。
最常见的PS、CDR、AI，PS是功能强大的图像处理软件，CDR和AI 是常用的矢量图形制作工具，在做一些设计作品的时候几款软件偏重不同，各有互补。
下面店铺给大家整理了一些关于把psd格式转换为cdr格式文件的方法。
希望大家喜欢。
把psd格式转换为cdr格式文件的方法步骤
1、需要在PS里做一个psd的源文件。
2、做好的PS文件，Ctrl+S保存，保存类型为psd的源文件格式。
3、找到刚刚保存的psd格式文件，鼠标右键单击打开方式为CoreIDRAW X7。
或者，还可以双击打开cdr软件，执行“文件→导入”命令。
4、文件导入在CoreIDRAW X7之后，我们就会看到在cdr软件中显示的是之前在PS中做好的PSD的源文件，可以打开“对象管理器”泊坞窗进行查看，如下图所示，选择绘图页面的小椭圆，在“对象管理器”中会有相应的提示。
如何利用Adobe Photoshop软件实现完美的PSD转HTML转化
如何利用Adobe Photoshop软件实现完美的PSD转HTML转化近年来，互联网行业的蓬勃发展催生了前端开发的高需求，而将设计图转化为HTML代码则是前端开发的重要一环。
Adobe Photoshop软件提供了强大的图像编辑和设计功能，同时也可用于将设计图转化为可交互的网页。
本文将介绍如何利用Adobe Photoshop软件实现完美的PSD转HTML转化。
1.审视设计图在开始转化之前，先仔细审视设计图是很有必要的。
要注意设计图的分层结构、文字样式和颜色搭配等方面。
确保对设计图中各个元素的位置、大小以及颜色等有一个清晰的了解。
2.切割设计图在Adobe Photoshop软件中，打开设计图并使用“选区工具”选择需要切割的部分。
然后，点击菜单栏中的“图像”-“切割”选项，根据设计图的需要进行切割。
切割之后，将设计图的每个切片保存为独立的图像文件。
3.导出为HTML在导出之前，需要确保设计图中的每个切片都有自己的图层，并且每个图层与相应的切片一一对应。
在导出过程中，点击菜单栏中的“文件”-“导出”选项，选择“存储为Web所用格式”，然后选择“HTML和图像”选项，点击确定。
4.进行HTML编辑在导出过程结束后，会生成一个HTML文件和多个图像文件。
使用文本编辑器（如Sublime Text、Atom等）打开HTML文件，对其中的代码进行编辑。
根据需要，可以调整布局、插入JavaScript代码等。
同时，将HTML文件和相应的图像文件放置在同一个文件夹中，以确保页面能够正确显示。
5.优化代码在进行HTML编辑的过程中，可以对代码进行优化以提升网页的加载速度和用户体验。
可以合并和压缩CSS和JavaScript文件，减少HTTP请求。
同时，优化图像的大小和格式，以减少文件的大小。
6.测试和调试完成HTML编辑后，需要进行测试和调试以确保网页的正常运行。
在浏览器中打开HTML文件，检查页面的各个元素是否按照设计图的要求显示，是否有布局错乱或其他问题。
PSD格式转换成html格式
PSD格式转换成html格式
psd:⼀种图形⽂件格式。
转换⼯具：ps
如何⽤photoshop输出html⽹页
修改好相应的⽂字与图象之后，我们就将PSD⽂件输出(X)HTML⽂件。
⾸先得先对PSD⽂件做切⽚，有两种⽅法：
①使⽤⼯具栏上的“切⽚⼯具”，
然后在图象上划出⼀块⼀块的区域。
②使⽤基于参考线的切⽚，按ctrl+R调出标尺栏，
把⿏标移动到标尺上，按住⿏标左键，移动到图象上，将会看到⼀条绿⾊的参考线，如图
将参考线；排好，然后点⼀下⼯具栏上的切⽚⼯具图表，然后点上⾯
选项栏⾥的“基于参考线的切⽚”。
于是在原来的参考线上就变成了⼀块⼀块的切⽚了。
接下来就可以输出了:
①依次选择菜单栏上的“⽂件”→“存储为Web所⽤格式”→“存储”。
②接下来就会弹出⼀个“将优化结果存储为”的窗⼝，如图
在“保存类型”处有个下拉列框可以选择，因为我们要存储为⽹页的格式，所以选择“HTML和图象(* html)”，再选择“保存”就可以输出⼀个⽹页格式的HTML⽂件与⼀个包含图象的名
为“images”的⽂件夹。
③如果我们需要输出“div+css的⽹页”我们还可以这么做：
在“设置”处的下拉列框，选择“其他”
就会弹出⼀个“输出设置”的窗⼝
在第2个下拉列框处选择“切⽚”
选择“⽣成CSS”
单击“好”→“保存”就可以输出⼀个⽬前流⾏的“div+css”的HTML⽹页。
基于PSD文件生成前端网页代码的方法、系统及存储介质与制作流程
图片简介:本技术介绍了一种基于PSD文件生成前端网页代码的方法、系统及存储介质，该方法通过解析设计图的PSD文件，得到设计图各个图层的属性信息以及图层间的层级关系，然后，将设计图各个图层的属性信息转换为可识别的CSS代码，以及根据图层间的层级关系，生成设计图的DOM结构树，并将设计图各个图层的CSS代码与其DOM结构树中每个DOM节点关联在一起；最后，将设计图的DOM结构树的DOM节点以及每个DOM节点对应的CSS代码填充至预设的HTML文档模板，得到该设计图对应的HTML文档。
因此，本技术通过将图像技术与前端网页技术相结合实现从设计图到前端网页代码的灵活转化，从而减轻前端工程师在编写静态网页时重复切图、对比设计图、布局的工作量，并提高前端网页开发效率。
技术要求1.一种基于PSD文件生成前端网页代码的方法，其特征在于，包括以下步骤：对PSD文件进行解析，得到所述PSD文件的各个图层的属性信息，以及图层间的层级关系；将所述PSD文件的各个图层的属性信息转换为可识别的CSS代码，以及根据图层间的层级关系，生成所述PSD文件的DOM结构树，并将所述PSD文件的各个图层的CSS代码与所述DOM结构树中每个DOM节点关联在一起；将所述PSD文件的DOM结构树的DOM节点以及每个DOM节点对应的CSS代码填充至预设的HTML文档模板，得到所述PSD文件对应的HTML文档。
件进行解析的方式为：对所述PSD文件的各个图层进行分类解析，得到各个图层的图层类型；以及对所述PSD文件的各个图层进行内容解析，得到各个图层的属性信息，以及图层间的层级关系。
3.如权利要求2所述的基于PSD文件生成前端网页代码的方法，其特征在于，将所述PSD文件的各个图层的属性信息转换为可识别的CSS代码的方式为：根据预先配置的规则和CSS 规范标准，将所述PSD文件的各个图层的属性信息转换为CSS样式属性数据，并结合CSS 样式属性数据，配置CSS代码中的属性值，得到各个图层的CSS代码。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本教程通过一个实例，来详细讲解如何将psd转为html/css，以及js插件的使用。
将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。
因此本教程通过对一个完整实例的详细讲解来教大家如何将psd转成html/css，转换后的html/css可兼容各种主流浏览器。
我们将设计页面分成基本的5个部分，每一个部分都有自己的容器wrapper和内容。
基本的流程是先编写Html代码，然后通过编写CSS来还原psd设计稿。
点击下载PSD文件1.我们需要从PSD文件得到什么？如下图，我们只需要从这个psd文件得到4个非常基本的东西。
推荐内容(featured)的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。
其余的部分我们只需要通过CSS生成或者在html里嵌入相应图片。
下图红线圈起来的地方，就是我们需要从psd获取的内容。
本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。
你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。
2.设置站点为一个网站设置良好的开发环境是非常重要的，我已经创建了一个非常基本的文件夹结构来建立这个网站，下面是文件夹结构设置，也可称之为模板。
文件夹结构下面这个文件夹结构是由html文件、CSS文件、js等文件组成，你可以根据自己的需要调整文件夹结构。
∙根目录o这是放置index首页文件的地方o这是网站的顶级目录∙JavaScript 文件夹o这是放置JS文件或者js框架jquery的地方o我们在这个教程用到的jquery插件Nivo-Slider（做推荐内容）也放在这个文件夹里∙样式（Styles ）文件夹o这里是存放css文件的地方，网页所要用到的图片放在另一个独立的文件夹，图片文件夹还包括两个子文件夹:o Images: 这是我们存放推荐内容部分的图片以及网站展示的图片的地方o Template: 这是存放和网页设计样式相关图片的地方，比如说底部背景图具体文件的放置将index.html文件放置在根目录，这个文件也是我们编写html代码的文件。
将jquery插件Nivo-Slider里面的三个文件jQuery-1.4.2.min.js和HTML5-Shiv.js以及Nivo-Slider.min.js放到Javascript文件夹。
将两个css文件，reset.css和global.css放到样式文件夹。
这样我们的文件夹结构设置就差不多完成了。
3.编写HTML代码1）编写首页Html文件将psd转换成html/css的工作流程是先编写出html文件，随后再编写css，并加入js动态效果。
下面我们会一步步讲解html的编写，先编写出大概完整的框架，代码如下：02 03 04 05 06 07 08 09 10 11 12 13 <html lang="en"><head><!-- Site Title --><title>PSD to HTML: A Photography Site</title><!-- Meta Data --><meta charset="UTF-8" /></head><body></body></html>2）编写html 文件的head 部分下面我们要开始为刚才的html 文件添加细节。
首先是head 部分，在head 部分我们要添加一些meta 信息，这样有利于搜索引擎读取。
我们增加了keywords 、authors 、description 、copyright 等meta 信息，并把语言编码设置为utf-8。
代码如下:1 2 3 4 5 videos, senior pictures"> <meta name="description" content="Your company description."> <meta name="author" content="/authors/CodyRobertson"> <meta name="copyright" content="Copyright 2010 "> <meta name="robots" content="follow, index">现在要开始在html 载入一些必须js 和css 的文件，以便让这些文件起作用，同时为了考虑到浏览器的兼容性，还增加了一些相应的判断条件。
具体代码如下：02 03 04 05 06 07 08 09 10 11 <html lang="en"><head><!-- Site Title --><title>PSD to HTML: A Photography Site</title><!-- Meta Data --><meta charset="UTF-8" /><meta name="keywords" content="photography, commercials, exposure videos, senior pictures"><meta name="description" content="Your company description.">12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <meta name="author"content="/authors/CodyRobertson"><meta name="copyright" content="Copyright 2010"><meta name="robots" content="follow, index"><!-- Site Theme Styling --><link rel="stylesheet" href="style/reset.css" /><link rel="stylesheet" href="style/global.css" /><!--[if lt IE 9]><script type="text/javascript"src="javascript/HTML5-Shiv.js"></script><![endif] --></head><body><!-- jQuery and Nivo Slider --><script type="text/javascript"src="javascript/jQuery-1.4.2.min.js"></script><script type="text/javascript"src="javascript/Nivo-Slider.min.js"></script></body></html>3）编写html 的body 部分body 部分是html 文件的主要部分，网页上显示主要是body 部分的内容，我们会将这个网页的布局分成以下5个部分：header 、featured 、status 、content 、footer 。
我们为每个部分增加一个div 并在每个部分的内部加一个类名为container 的div 。
02 03 04 05 06 07 08 09 10 11 <div class="container"></div></div><div id="featured"><div class="container"></div></div><div id="status">12 13 14 15 16 17 18 19 20 21 22 23 24 25 <div class="container"></div></div><div id="cotent"><div class="container"></div></div><div id="footer"><div class="container"></div></div>04）编写#header 部分这个网页的header 部分主要由两部分组成，一个是logo ，另一个是导航栏。
logo 是简单div ，而导航栏则是列表ul 。
02 03 04 05 06 07 08 09 10 11 12 <h1 id="logo">YourLogo</h1><!-- Navigation Menu --><ul id="menu"><li class="active"><a href="#">HOME</a></li><li><a href="#">PHOTOGRAPHY</a></li><li><a href="#">COMMERCIALS</a></li><li><a href="#">SPORTS</a></li><li><a href="#">EXPOSURE VIDEOS</a></li><li><a href="#">CONTACT</a></li></ul>05）编写#featured 部分网页的#featured 是我们放置推荐内容的部分，这部分也有两部分组成，一个是欢迎文字（welcome ），另一个滑动图片Slider 。