返回
photoshop网页切图教程

photoshop网页切图教程

ID：16016324

大小：501.00 KB

页数：10页

时间：2018-08-07

photoshop网页切图教程_第1页
photoshop网页切图教程_第2页
photoshop网页切图教程_第3页
photoshop网页切图教程_第4页
photoshop网页切图教程_第5页
资源描述：

《photoshop网页切图教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、PSD网页切图制作HTML教程把psd页面利用div+css切割成html页面首先看看效果下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....新建文件夹开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：打开index.html文件。

2、在head标签顶部，添加链接到您的样式表（style.css）。你可以使用下面的代码。头部的代码如下面:

3、xhtml">ModernDesignStudio建立HTML结构现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像下面一样:

4、LIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">UntitledDocument

5、lesheet"type="text/css"href="style.css"/>

切割背景我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。

6、现在在photoshop里面打开原先设计好的,隐藏所以的图层，除背景层外.现在采取的切片工具，选择背景，保存网页web格式按（ALT+shift+Ctrl+S）。然后保存的图像文件夹文件名为background.jpg。设置背景样式打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如

7、下代码：*{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);heig

8、ht:124px;}切割头部logo在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：保存为png格式图片添加在页面添加logo现在返回到html中，在#header#container内,添加下面的代码.....

当前文档最多预览五页，下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
相关标签