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