从PSD到CSS+DIV+HTML网页制作 PDF文件.pdf

7、ter">模板背景切片7在我们把各个div转成代码之前，我们首先在页面中加入背景。用photoshop打开psd文件，用矩形选框工具（m）选定头部/导航和背景的一点区域；选定的宽度可以只有1px（因为我们将会在后面使用css来水平重复它）。8在选定区域的底部，用滴管工具（i）记录下色彩的16进制值。9选定好之后，点编辑>合并拷贝，创建一个新photoshop文件（ctrl+n），然后将选定区域复制到新文档中。通常新建photoshop画布长宽是剪切板中选定区域的大小。如果不是，请确保他

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/background.png);background-repeat:repe

12、at-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）

13、。最后，我们把#container的margin设置为auto让布局居中，并且设置宽度为850px。logo和站点名的切片12现在我们接着制作模板的logo和站点标题。使用矩形选框工具（m），选定站点的标题和标示文本（以下图为参考）。13就像处理background.png一样，复制这个区域到新文档，然后保存为title.png放在images目录。和站点名转换成代码14我们转到html文档中，在#top这个div里面我们创建一个新div，id为title。15在#t