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、开始第一点的操作，但规划站点的内容分布很重要整体考虑点：图片的合并，减少请求量结构的合理性，语义化样式的简洁，便于后期维护多为后期的维护以及程序开发着想，如何简单实现效果。

html切图教程

html切图教程HTML切图教程HTML切图是将设计师提供的PSD、AI或其他设计稿转换为HTML和CSS代码的过程。

它是网页制作的第一步，也是将设计变成可交互的网页的关键步骤之一。

本文将介绍如何进行HTML切图的基本步骤和注意事项。

步骤一：准备工作在进行HTML切图之前，首先需要明确你要切的图层是什么。

打开设计稿，仔细浏览每个页面，并确定要切的内容。

一般来说，切图的内容包括顶部导航、Logo、主要内容区域、底部导航等。

将每个页面需要切的部分标记出来，便于后续切图时的参考。

步骤二：使用切图工具为了更好地进行切图工作，我们可以使用专门的切图工具，如Adobe Photoshop。

打开设计稿，选择切图工具（通常是矩形选框工具）。

根据设计稿上的标记，选择相应的图层，并使用切图工具将其选中并复制。

步骤三：新建HTML文件打开文本编辑器，新建一个空白的HTML文件。

在其中输入基本的HTML结构，包括<!DOCTYPE html>、<html>、<head>和<body>标签等。

步骤四：插入CSS样式在<head>标签中，插入<link>标签来引入CSS文件。

可以使用外部CSS文件，也可以直接在<head>标签内嵌入样式表。

根据设计稿的样式，编写相应的CSS代码。

如有需要，可以使用CSS框架来帮助布局和样式的快速开发。

步骤五：插入切下来的图层在<body>标签中，插入刚才切下来的图层。

使用<img>标签来插入图片，并指定相应的路径和样式。

根据设计稿的要求，添加相应的CSS属性，如宽度、高度、边距等。

步骤六：调整布局在插入图层之后，我们需要调整布局，使其符合设计稿的要求。

可以使用CSS中的盒模型属性来控制元素的外观和布局。

设置宽度、高度、边距、内边距等属性以实现设计稿的要求。

在调整布局时，可以结合使用浮动、定位等CSS属性。

页面切图教程

页面切图教程页面切图是一种将设计师的设计稿转化为网页代码的过程。

它是建立一个网页的基础，决定了网页最终的外观和布局。

下面是一个简单的页面切图教程，帮助你了解如何进行页面切图。

第一步是准备工作。

在开始页面切图之前，你需要有一个设计师提供的设计稿。

确保你已经了解设计师的设计意图，并确定了网页的整体布局和元素。

第二步是创建一个基本的HTML结构。

通过使用HTML标记语言，你可以在页面上定义元素和其结构。

创建一个基本的HTML结构，包含标题、段落和容器等基本的元素。

这些元素将作为页面显示内容的基础。

第三步是将设计稿中的图像和文本内容添加到HTML结构中。

使用合适的标签和属性，将设计稿中的图像和文本内容插入到HTML结构中。

确保将图像放置在合适的位置，并使用正确的相对路径链接到图像文件。

第四步是添加CSS样式。

CSS样式表可以控制网页的外观和布局。

根据设计稿的要求，创建一个CSS样式表，并将其链接到HTML文件中。

使用合适的选择器和属性，将样式应用到HTML元素上，以实现设计稿中的外观效果。

第五步是优化页面的响应式布局。

考虑到不同设备和屏幕尺寸的差异，你应该为页面添加响应式布局。

使用媒体查询和CSS网格系统等技术，确保页面在不同设备上都能正常显示。

第六步是测试和调试。

在完成页面切图后，进行测试和调试是非常重要的。

确保页面在不同浏览器和设备上都能正常显示，并检查页面是否存在代码错误或布局问题。

最后，将切好的页面上线。

将完成的页面上传到服务器，并确保它在互联网上能够正常访问。

同时，在网页上添加必要的元标记和元数据，以便搜索引擎能够正确地索引和显示你的网页。

通过以上的步骤，你可以成功地完成一个网页的切图。

准备工作、HTML结构、添加图像和文本、CSS样式、响应式布局、测试和调试以及页面上线是实现这个过程的关键步骤。

希望这个教程对你有所帮助！。

网站程序员如何将一张图片分割保存为HTML(图片PS切片)注意事项

如何将一张图片分割保存为HTML(PS中切片的使用)先做一个简单的说明为什么选择Photoshop软件而没有选择Firework软件。

Friework Dreamweaver Flash号称网页制作三剑客，Friework与Dreamwaver 整合得更为紧密，在这里只所以选择photoshop只是因为我的偏好，况且我对firework软件使用的次数很少，不太喜欢他提供的层面板。

在这里我们使用的PS的版本是CS3 以前的版本与此相差无几，但注意不能使用迷你安装版，必须是完整安装。

再说一下我们为什么要使用切片：1 使用切片是最直白的网页布局方法。

不要再想如何去设计表格，也不要想什么DIV，你首先要想的是你的网页要做成什么样子？把你所想的画出来就行了!!2 使用切片可以有效地减小页面文件的大小，提高浏览者浏览页面的体验。

想想看是把一个图片完整下载下来快，还是把一个图片分成若干个小图同时下载快呢？如何切片：一打开你设计好的PS图，选择切片工具二按网页的结构和图片的特点进行切片切片的大小上下位置可以通过切片选项来进行调整三选择文件菜单另存为WEB格式命令，保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)四使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑，删除不必须的图片和进行内容的填充。

切片原则和常见问题：一切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。

二对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来三在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色能使用图案的也尽可能使用图案平铺来形成背景四在DW中进行编辑时，删除图片时出面表格错位如何办？删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。

五在DW中如何自定义表格的长宽？使用表格长宽一样的图片做为单元格的背景。

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 选择符即可。你完成没

[1]-如何切图-保存为html（网页编辑图片处理技巧）

[1]-如何切图-保存为html（网页编辑图片处理技巧）网页编辑图片处理技巧[1]如何切图-保存为html概括：【视图】菜单显示标尺——使用参考线（凭经验和需要）分割图片——基于参考线切片——合并或增加切片——保存web形式——设置质量，可以设置单个切片图片的属性——保存“html和图像”，或者其他。

图文演示：一、标尺——标尺可以用快捷键，ctrl+r 显示和隐藏标尺；二、参考线(1)可以直接从边缘的标尺用工具拖移出水平或者垂直的参考线。

按住ctrl可以把水平变成垂直，或相反。

(2)固定位置建立参考线：从【视图】--【新建参考线】--【设置水平或者垂直，距离最左边的距离】px（像素）可以手动改为厘米。

(3) 用拖移工具放在参考线上即可移动，保存图片是参考线会自动隐藏，可以在视图中隐藏掉参考线，或者把某个参考线拖到最左边或者最上边，就可以删掉那个参考线。

三、切片参考线拉好后，用切片工具。

顶部这个工具的属性栏会显示为下图点“基于参考线的切片”，自动根据你的参考线切图。

假若切片太多或者有的切片要调整，直接用切片工具对所需要调整的区域拖选就可以了。

如图，从01切片的左上角拖选到切片09的右下角，把1~9切片合并为一个切片了。

四、保存·——菜单【文件】保存为【存储为web和设备所用格式】·进入的页面右上角，可以预设整个图片的统一名字，也可以点击单个切片命名。

存储格式可以为多种。

品质一般为60左右足够网页需求。

其他默认即可。

·在图片下方可以看到是单个切片或者整个图片存储后的大小，可以根据需要调整上图的“品质”，使得大小也可以增大或减小。

·当点击左上角，即对整个图片进行设置。

而则是可以对单个切片设置的状态。

·点击保存，，“格式”选择为html 和图像。

·table id__01就是切图部分的代码。

·将相关图片放入制作的web文件夹里的对应位置（例如：3G_web文档/images文件夹下）复制table id=”__01”到结束。

实例详细讲解将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）。

你可以使用下面的代码。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

我把它命名为zmool。

再在文件夹中创建新文件夹images，放网站的所有图像。

接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。

现在创建一个新的CSS文件，并将其命名为style.css文件。

如下图：打开index.html文件。

在head标签顶部，添加链接到您的样式表（style.css）。

你可以使用下面的代码。

设置3个部分（标题，内容，页脚）像下面一样: <!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>Untitled Document</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="header"></div><div id="content"></div><div id="footer"></div></body></html>切割背景我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。

<body><div id="header"><div id="container"></div></div><div id="content"><div id="container"></div></div><div id="footer"><div id="container"></div></div></body>现在在photoshop里面打开原先设计好的, 隐藏所以的图层，除背景层外.现在采取的切片工具，选择背景，保存网页web格式按（ALT +shift+Ctrl + S）。

然后保存的图像文件夹文件名为background.jpg。

设置背景样式打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：* {margin: 0px;padding: 0px;}body{background:url(images/background.jpg);}#container{margin: auto;width: 960px;}切割头部返回photoshop，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg。

编辑头部背景代码在style.css文件里编辑如下代码:#header{background:url(images/header.jpg);height:124px;}切割头部logo在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：保存为png格式图片添加在页面添加logo现在返回到html中，在#header #container内,添加下面的代码<div id="logo">....</div>.<div id="header"><div id="container"><div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div></div></div>现在, 下面切换到style.css文件，编写#logo样式.#logo{margin-top:20px;border:none;}编辑导航代码下面是页面里的代码，头部header包括logo和导航两个部分.<div id="header"><div id="container"><div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Work</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></div></div>导航样式如下：现在,添加css表里的导航样式~，ul、li和链接a的样式:#header li{color:#959595;list-style:none;float:left;margin-right:20px;font-family:"Myriad Pro",arial;font-weight:bold;font-size:24px;}#header li a{color:#959595;text-decoration:none;padding:10px;}#header ul{float:right;margin-top:-40px;}#header li a:hover{background:#202020;color:#d2d2d2;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;}现在制作中间部分现在我们在页面的中间部分content添加两个div，如下图：<div id="content"><div id="container"><div id="featured"></div><div id="paragraphs"></div></div></div>切换到photoshop的psd页面, 切下中间部分，取名为featured.jpg.如下图：在你的HTML页面添加如下代码，和一些文字介绍:<div id="content"><div id="container"><div id="featured"><a href="#">MORE PROJECTS</a><p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have youever wanted to create clean and nice portfolio design? In this tutorial Iwill show you how to design clean blue portfolio layout. Have you ever wantedto create clean and nice portfolio design? In this tutorial I will show you howto design clean blue portfolio layout in Adobe Photoshop.</p></div><div id="paragraphs"></div></div></div>在PSD文件里，隐藏其他所以图层，只留下按钮图层部分，切下按钮部分，保存png格式，命名为button.png.现在我们把这些图片添加到页面中去，切换到css文件页面，添加如下代码，这里包括背景样式，和按钮的样式.#featured{background:url(images/featured.jpg) no-repeat;height:381px;margin-top:30px;margin-left:80px;}#featured a{background:url(images/button.png);height:30px;width:124px;text-indent:-9999px;position:absolute;margin-top:330px;margin-left:180px;}#featured a:hover{background-position:0px 30px;}现在我们添加些dummytext（文字介绍）的样式:.dummytext{color:#d2d2d2;width:245px;margin-top:150px;position:absolute;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:180%;margin-left:290px;}.dummytext span{font-size:16px;color:#191919;font-weight:bold;}下面添加添加图片展示下面的分类介绍部分页面的代码部分如下.<div id="paragraphs"><p class="paragraph"><span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebiesand tutorials. We publish useful information dedicated to web designers and developers. Here you can find freeresources like vectors, wordpress themes and a lot of inspiration.</p><p class="paragraph"><span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebiesand tutorials. We publish useful information dedicated to web designers and developers. Here you can find freeresources like vectors, wordpress themes and a lot of inspiration.</p><p class="paragraph"><span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebiesand tutorials. We publish useful information dedicated to web designers and developers. Here you can find freeresources like vectors, wordpress themes and a lot of inspiration.</p></div>我们中间部分的内容，整体看起来应该是这样的:<div id="content"><div id="container"><div id="featured"><a href="#">MORE PROJECTS</a><p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have youever wanted to create clean and nice portfolio design? In this tutorial Iwill show you how to design clean blue portfolio layout. Have you ever wantedto create clean and nice portfolio design? In this tutorial I will show you howto design clean blue portfolio layout in Adobe Photoshop.</p></div><div id="paragraphs"><p class="paragraph"><span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebiesand tutorials. We publish useful information dedicated to web designers and developers. Here you can find freeresources like vectors, wordpress themes and a lot of inspiration.</p><p class="paragraph"><span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebiesand tutorials. We publish useful information dedicated to web designers and developers. Here you can find freeresources like vectors, wordpress themes and a lot of inspiration.</p><p class="paragraph"><span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebiesand tutorials. We publish useful information dedicated to webdesigners and developers. Here you can find freeresources like vectors, wordpress themes and a lot of inspiration.</p></div></div></div>去你的CSS文件添加下面的代码，#paragraphs span{font-family:"Myriad pro", Helvetica, sans-serif;font-size:22px;font-weight:600;letter-spacing:-2px;}#paragraphs{margin-left:80px;font-family:Arial, Helvetica, sans-serif;color:#191919;font-size:12px;margin-top:15px;}.paragraph{width:250px;margin-left:15px;float:left;}这个就是我们到目前位置的效果:下面处理网站底部现在，我们完成该部分内容，我们将开始创建页脚.首先，在你的PSD文件中，隐藏除页脚和页脚纹理层外的其他层，然后把页脚文件夹的东西切片并保存为footer.jpg.然后再切一遍，把按钮和鸟的图形切下来.分别取名为follow.png和bird.jpg.编辑底部代码底部页脚包括一些文字和一个带有链接的小鸟图片.所以在HTML页面添加如下代码.<div id="footer"><div id="container"><p>2010 © Fictional Design Studio. Design by Webdesignfan.</p><a href="#">Follow us on Twitter</a><img src="images/bird.jpg" /></div></div>现在, 编辑底部footer样式的代码，如下:#footer{background:url(images/footer.jpg);height:71px;margin-top:191px;}#footer p{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#959595;position:absolute;margin-top:30px;}#footer a{background:url(images/follow.png);text-indent:-9999px;position:absolute;height:27px;width:124px;margin-left:730px;margin-top:30px;}#footer img{float:right;margin-top:10px;}我们用footer.jpg做页脚的背景，然后添加一些文字的样式.对于底部的鸟图片的链接，我们用之前同样的办法，利用浮动效果定位。