将PSD网站模板转换为XHTML.docVIP

将PSD网站模板转换为XHTML+CSS 详细出处参考：/css/22736.html demo 点击下面的图片将会看到本次制作的 demo 的效果。 开始之前 如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型、现代的产品主页 ， 因为第二部分需要第一部分做好了的psd文件。 如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。创建文件结构，准备文件 1 在桌面上创建新的空目录，取名portfolio。 2 在portfolio目录下面继续创建images目录用于存放图片。 3 接下来创建两个空文件 styles.css和index.html 4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。 5 在文档的head标签加入对styles.css的链接。可以使用如下代码：代码段1 link href=styles.css rel=stylesheet type=text/css / 详细出处参考：/css/22736.html 页面分区 以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。 6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top, #welcome, #sidebar, #content 和 #footer。 HTML代码如下：代码段2 !--CONTAINER STARTS-- div id=container !--HEADER/NAVIGATION STARTS-- div id=top /div !--HEADER/NAVIGATION ENDS-- !--WELCOME AREA STARTS-- div id=welcome /div !--WELCOME AREA ENDS-- !--SIDEBAR STARTS-- div id=sidebar /div !--SIDEBAR ENDS-- !--CONTENT STARTS-- div id=content /div !--CONTENT ENDS-- !--FOOTER STARTS-- div id=footer /div !--FOOTER ENDS-- /div !--CONTAINER ENDS-- 模板背景切片 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 让布局居中，