photoshop网页切图教程.doc

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.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleModern Design Studio/titlelink href=style.css rel=stylesheet type=text/css //headbody/body/html 建立HTML结构 现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像 下面一样: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleUntitled Document/titlelink rel=stylesheet type=text/css href=style.css //headbodydiv id=header/divdiv id=content/divdiv id=footer/div/body/html 切割背景 我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用 代码添加到网页上面，使div页面效果和设计的效果达到一致。 bodydiv id=header div id=container /div/divdiv id=content div id=container /div/divdiv 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=logoa href=#img src=images/logo.png class=l