没有合适的资源?快使用搜索试试~ 我知道了~
今天的这个教程,教大家如何把psd页面利用div+css切割成html页面。
资源推荐
资源详情
资源评论
首先看看效果
下面的图片就是效果图,切割出来后,可能头部和底部会宽点.....
新建文件夹
开始时,在您的计算机中创建一个文件夹。我把它命名为 zmool。再在文件夹中创建新文
件夹 images,放网站的所有图像。接下来打开代码编辑器(Dreamweaver),并在根目
录下创建一个 HTML 文件名为 index.html,这是我们的主页模板。现在创建一个新的
CSS 文件,并将其命名为 style.css 文件。如下图:
打开 index.html 文件。在 head 标签顶部,添加链接到您的样式表(style.css)。你可以
使用下面的代码。
<linkhref="style.css"rel="stylesheet"type="text/css"/>
头部的代码如下面:
<!DOCTYPEhtmlPUBLIC"‐//W3C//DTDXHTML1.0Transitional//E
N""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd
">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp‐equiv="Content‐Type"content="text/html;charset=
utf‐8"/>
<title>ModernDesignStudio</title>
<linkhref="style.css"rel="stylesheet"type="text/css"/>
</head>
<body>
</body>
</html>
建立 HTML 结构
现在,我们将设置 HTML 文件结构。设置 3 个部分(标题,内容,页脚)像下面一样:
<!DOCTYPEhtmlPUBLIC"‐//W3C//DTDXHTML1.0Transitional//E
N""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd
">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp‐equiv="Content‐Type"content="text/html;charset=
utf‐8"/>
<title>UntitledDocument</title>
<linkrel="stylesheet"type="text/css"href="style.css"/>
</head>
<body>
<divid="header">
</div>
<divid="content">
</div>
<divid="footer">
</div>
</body>
</html>
切割背景
我们的 PSD 文件包含了很多纹理效果,我们要把这些全部切出来,然后,用代码添加到网
页上面,使 div 页面效果和设计的效果达到一致。
<body>
<divid="header">
<divid="container">
</div>
</div>
<divid="content">
<divid="container">
</div>
</div>
<divid="footer">
<divid="container">
</div>
</div>
</body>
现在在 photoshop 里面打开原先设计好的, 隐藏所以的图层,除背景层外.
现在采取的切片工具,选择背景,保存网页 web 格式按(ALT +shift+Ctrl + S)。然后
保存的图像文件夹文件名为 background.jpg。
设置背景样式
打开 style.css 文件,设置基本样式,还有背景样以及主体部分的宽度,如下代码:
*{
margin:0px;
padding:0px;
}
body
剩余20页未读,继续阅读
资源评论
mapplei
- 粉丝: 128
- 资源: 1293
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功