欢迎来到天天文库
浏览记录
ID:6131231
大小:447.60 KB
页数:18页
时间:2018-01-04
《从psd到css+div+html网页制作全流程过程讲解》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、开始之前如果你还没有准备好,我们建议您阅读完这个教程系列的第一部分:用photoshop设计一个小型、现代的产品主页,因为第二部分需要第一部分做好了的psd文件。如果你想跳过第一部分,你可以直接在第一部分中下载源文件,下面将会需要它才能继续。创建文件结构,准备文件1在桌面上创建新的空目录,取名portfolio。2在portfolio目录下面继续创建images目录用于存放图片。3接下来创建两个空文件 styles.css和index.html4用你最喜欢的文本编辑器打开index.html,我将在本教程中使用adobedreamweaver。5在文档的
2、加入对styles.css的链接。可以使用如下代码:代码段1
3、
4、
5、页面分区以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。6我们将从在浏览器中居中、包含整个文档的主容器开始(也被称之为外壳(wrapper))。在容器内部内的5个div将组成一个完整的页面:这些div是:#top,#welcome,#sidebar,#content和#footer。html代码如下:代码段26、ntainer">
6、ntainer">
8、布长宽是剪切板中选定区域的大小。如果不是,请确保他们是一致的。10在新photoshop文档中,点文件>另存为web和设备所用格式(alt+shift+ctrl+s),选择png-8格式,保存文件为background.png,保存在images目录下。
9、
10、
11、将背景转成代码11现在我们已经将背景图片从photoshop中切片出来,我们可以开始写代码了。打开css文件(styles.css),然后写入以下代码:代码段3*{margin:0px;padding:0px;border:none;}body{background-image:url(images/backgro
12、und.png);background-repeat:repeat-x;background-color:#001b32;font-family:arial,helvetica,sans-serif;font-size:12px;color:#c8c8c8;}#container{margin:auto;width:850px;}代码段3的解释让我们来仔细的分析一下样式代码。首先我们将所有元素的margin,padding,border的值归零以避免跨浏览器的兼容性。我们这个用到的是*选择器。接下来,我们样式化body元素;我们将background.png设置为背景,
13、通过repeat-x使它水平重复。同样把背景色设置为深蓝(#001b32)。最后,我们把#container的margin设置为auto让布局居中,并且设置宽度为850px。logo和站点名的切片12现在我们接着制作模板的logo和站点标题。使用矩形选框工具(m),选定站点的标题和标示文本(以下图为参考)。13就像处理background.png一样,复制这个区域到新文档,然后保存为title.png放在images目录。和站点名转换成代码14我们转到html文档中,在#top这个div里面我们创建一个新div,id为title。15在#
此文档下载收益归作者所有