专注优质Wordpress企业网站搭建与优化

柳暗花明：PSD to CSS —— CSS布局实战新概念系列教程【Part-2】

汇聚博客资源,点亮博客价值 - 西米CC

原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step

翻译整理：西米CC

1.2 – 初期布局规划

在规划站点的时候，我们应该对网站中页面的布局模式有了大致的构思，所以我们在DW中作好必要的站点设置之后，第一件要做的事情就是在一张HTML页面中搭建简单的布局模型，这时候还不能用太多的CSS，因为我们需要的只是骨架，并无必要进行太多的外观样式。这一步骤中我们要做的主要事情就是布局好页面模块的位置及次序，如页头、主体、页脚等，而且还要在一些主流的浏览器如IE7, IE6, Firefox, Safari中测试它的兼容性。虽然很多人习惯在作品完成之后再进行兼容性调整，但花天狂骨还是建议你把兼容性测试贯穿在整个制作过程中，因为每个步骤中的兼容测试重点可能有所差别，比如在这个步骤中，我们主要调试的是页脚模块的底部定位。

首先我们来观察一下第一张页面的JPG图样，注意以下几点：

1.该页面采用居中的布局模式，也就意味着我们要把页面中的内容全部放置到一个主容器中，然后将这个容器设置为居中；

2.从宏观上来看，页面中的内容在垂直方向上划分成若干个模块，其中有些模块是分成两列的。我们可以用一系列的

来进行布局，这样做的好处就是我们可以对这些模块像搭积木一样进行灵活整合从而形成另外一张网页。

3.页脚部分的颜色与主内容色调有着很明显的差别，这就意味着页面的背景颜色必须跟页脚相同，以免用户浏览器撑大的时候破坏外观并影响布局。所以页我们要把页脚放置在一个单独的容器中，不能与主内容容器混淆起来。

综合上面的结论，我们得出下面这个HTML布局模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creatif</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
Logo / Menu
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html>

正如你所见，整个页面布局分为两大部分：#main 和 #footer，它们都包含一个应用了. Container样式的div容器，在CSS中我们将指定它的宽度并设置居中。当然 #main部分中还有其它的一系列 div 标签，首先我们来添加一些简单的CSS：

body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background-color:#c4c0be;
}
#footer {
color:white;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
}

我们在Body标签中设置了页面的背景颜色，也就是在页脚部分显示的颜色，#main 区域的背景色相对而言要淡一些。在.container样式中我们设置了固定的950px宽度，并通过margin:0 auto;使其居中。在CSS中我特意添加了一些红色边框，目的是为了让大家更清楚的观察各个模块，实际上它们是不需要的。

至今为止简单的布局框架已经构建好了，你可以浏览效果，或看一下它的截图：

SEO优化,CSS教程,Wordpress博客