把psd页面利用div

把psd页面利用div

ID:6133229

大小:539.50 KB

页数:12页

时间:2018-01-04

把psd页面利用div_第1页
把psd页面利用div_第2页
把psd页面利用div_第3页
把psd页面利用div_第4页
把psd页面利用div_第5页
资源描述:

《把psd页面利用div》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库

1、把psd页面利用div+css切割成html页面首先看看效果下面的图片就是效果图,切割出来后,可能头部和底部会宽点.....新建文件夹开始时,在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver),并在根目录下创建一个HTML文件名为index.html,这是我们的主页模板。现在创建一个新的CSS文件,并将其命名为style.css文件。如下图:打开index.html文件。在head标签顶部,添加链接到您的样式表(style.css)。你可以使用下面的代码。

2、style.css"rel="stylesheet"type="text/css"/>头部的代码如下面:ModernDe</p><p>3、signStudio建立HTML结构现在,我们将设置HTML文件结构。设置3个部分(标题,内容,页脚)像下面一样:

4、/xhtml">UntitledDocument

切割背景我们的PSD文件包含了很多纹理效果,我们要把这些全部切出来,然后

5、,用代码添加到网页上面,使div页面效果和设计的效果达到一致。

现在在photoshop里面打开原先设计好的,隐藏所以的图层,除背景层外.现在采取的切片工具,选择背景,保存网页web格式按(ALT+shift+Ctrl+S)。然后保存的图像文件夹文件名为background.jp

6、g。设置背景样式打开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

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

当前文档最多预览五页,下载文档查看全文

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

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