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. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签