从PSD到CSS+DIV+HTML网页制作全流程过程讲解.docxVIP

开始之前如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用photoshop设计一个小型、现代的产品主页，因为第二部分需要第一部分做好了的psd文件。如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。创建文件结构，准备文件1 在桌面上创建新的空目录，取名portfolio。2 在portfolio目录下面继续创建images目录用于存放图片。3 接下来创建两个空文件?styles.css和index.html4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用adobe dreamweaver。5 在文档的head标签加入对styles.css的链接。可以使用如下代码：代码段1link href=styles.css rel=stylesheet type=text/css /|||页面分区以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。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 让布局居中，并且设置宽度为850px。logo和站点名的切片12 现在我们接着制作模板的logo和站点标题。使用矩形选框工具（m），选定站点的标题和标示文本（以下图为参考）。13 就像处理 background.png 一样，复制这个区域到新文档，然后保存为title.png放在ima