PSD网页切图制作HTML教程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
PSD网页切图制作HTML教程
把psd页面利用div+css切割成html页面
首先看看效果
下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....
新建文件夹
开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：
打开index.html文件。在head标签顶部，添加链接到您的样式表（style.css）。你可以使用下面的代码。
头部的代码如下面:
建立HTML结构
现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像下面一样:
切割背景
我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。
现在在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内,添加下面的代码
现在, 下面切换到style.css文件，编写#logo样式.
#logo
{
margin-top:20px;
border:none;
}
编辑导航代码
下面是页面里的代码，头部header包括logo和导航两个部分.
导航样式如下：
现在,添加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;