PSD网页切图制作HTML全过程教程.pdfVIP

汇图网psd素材库/design/new/ PSD网页切图制作HTML全过程教程今天的这个教程，教大家如何把psd页面利用div+css切割成html页面，这类的教程，本站做的一直都很少，大多 讲的都比较零碎的一些东西，在今后，我们将慢慢发布翻译出更多这类的教程，供大家学习，转载请著名来源，以及站码翻译，谢谢 首先看看效果 下面的图片就是效果图，切割出来后，可能头部和底部会宽点 新建文件夹 开始时，在您的计算机中创建一个文件夹。我把它命名为zmool 。再在文件夹中创建新文件夹images ，放网站的所有图像。接下来打开代码编辑 器(Dreamweaver) ，并在根目录下创建一个HTML文件名为index.html ，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名 为style.css文件。如下图： /design/new/964.html 汇图网psd素材库/design/new/ 打开index.html文件。在head标签顶部，添加链接到您的样式表(style.css) 。你可以使用下面的代码。 ?1 头部的代码如下面: ?1 2 3 4 5 6 7 8 9 10 11 建立HTML结构 现在，我们将设置HTML文件结构。设置3个部分(标题，内容，页脚)像下面一样: ?1 2 3 4 5 6 7 8 /design/new/964.html 汇图网psd素材库/design/new/ 9 10 11 12 13 14 15 16 17 18 19 切割背景 我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。 ?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 现在在photoshop里面打开原先设计好的, 隐藏所以的图层，除背景层外. /design/new/964.html 汇图网psd素材库/design/new/ 现在采取的切片工具，选择背景，保存网页web格式按(ALT +shift+Ctrl + S) 。然后保存的图像文件夹文件名为background.jpg 。 设置背景样式 打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码： ?1 2 3 4 5 6 7 8 9 10 11 12 13* { margin: 0px; padding: 0px; } body { background:url(images/background.jpg); } #container { /design/new/964.html 汇图网psd素材库/design/new/ margin: auto; width: 960px; } 切割头部 返回photoshop ，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg 。 编辑头部背景代码 在style.css文件里编辑如下代码: ?1 2 3 4 5#header { background:url(images/header.jpg); height:124px; } 切割头部logo 在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：保存为png格式图片 添加在页面添加logo 现在返回到html 中，在#header #container内,添加下面的代码 . ?1 2 3 4 5 现在, 下面切换到style.css文件，编写#logo样式. ?1 2 3