开始之前
如果你还没有准备好,我们建议您阅读完这个教程系列的第一部分: 用photoshop设计一个小型、现代的产品主页,因为第二部分需要第一部分做好了的psd文件。
如果你想跳过第一部分,你可以直接在第一部分中下载源文件,下面将会需要它才能继续。
创建文件结构,准备文件
1 在桌面上创建新的空目录,取名portfolio。
2 在portfolio目录下面继续创建images目录用于存放图片。
3 接下来创建两个空文件styles.css和index.html
4 用你最喜欢的文本编辑器打开index.html,我将在本教程中使用adobe dreamweaver。
5 在文档的标签加入对styles.css的链接。可以使用如下代码:
代码段1
|||
页面分区
以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。
6 我们将从在浏览器中居中、包含整个文档的主容器开始(也被称之为外壳(wrapper))。在容器内部内的5个div将组成一个完整的页面:这些div是:#top,
#welcome, #sidebar, #content 和#footer。
html代码如下:
代码段2
模板背景切片
7 在我们把各个div转成代码之前,我们首先在页面中加入背景。用photoshop打开psd文件,用矩形选框工具(m)选定头部/导航和背景的一点区域;选定的宽度可以只有1px
(因为我们将会在后面使用css来水平重复它)。
8 在选定区域的底部,用滴管工具(i)记录下色彩的16进制值。
9 选定好之后,点编辑> 合并拷贝,创建一个新photoshop文件(ctrl+n),然后将选定区域复制到新文档中。通常新建photoshop画布长宽是剪切板中选定区域的大小。如果不是,请确保他
们是一致的。
10 在新photoshop文档中,点文件> 另存为web 和设备所用格式(alt+shift+ctrl+s),选择png-8格式,保存文件为background.png,保存在images目录下。
|||
将背景转成代码
11 现在我们已经将背景图片从photoshop中切片出来,我们可以开始写代码了。打开css文件(styles.css),然后写入以下代码:
代码段3
* {
margin: 0px;
padding: 0px;
border: none;
}
body {
background-image: url(images/background.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 设置为背景,通过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 在#title div里面,加入