首先，这篇文章不是我原创的，是看到这篇国外文章觉得写的很好，觉得很有必要翻译一下。提醒一下，这篇文章很长，如果没有耐性看下去的话，那我劝你还是不要浪费时间看了，别看到一半就关闭了。要是有耐心看下去的话，建议准备好咖啡等一些能让你提神的东西！OK，让我们一起开始这漫长的学习吧！教程中用到的素材，clean-web-2.0-source.zip (ZIP, 3.4 MB)！
设置文件结构
一.在电脑上创建一个模板文件夹并将其命名为web2上，这将是我们的工作目录。
二.web2内文件夹，创建以下内容：
- img文件夹 -将包含在本教程中使用的所有图像。
- index.html- 我们的网站模板。
- styles.css- 我们的样式表。
- javascript.js- 这将包含我们的脚本。
三.用你习惯的编辑器打开index.html和styles.css，此外还要打开PSD，准备切片！如果切片你还不会，我建议你去先熟悉下photoshop！
创建网页背景
四.在Photoshop中，按照图片上显示的只显示bg和diagonal lines这两个图层！
五.使用矩形选框工具选取一个20像素框框。切背景图有点技巧，就是能用纯色的话，就用代码，不用切到图片里面！
六.确保选取的框是选定的，使用编辑>“复制合并（按Ctrl + Shift+ C）把里面的20像素复制到一个新的文档中。在里面保存成bg_body.jpg到img文件夹中。
设置HTML和CSS
七.我们首先要做的是在我们的HTML文档的head中引入style.css和javascript.js。
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
八.让我们在styles.css中写一些基本的样式规则，我们将采取CSS重置技术（叨叨这里不推荐这样的重置方法）。
/* CSS Reset */
* { margin:0; padding:0; }
放一段我的重置样式，需要根据项目情况来删除不必要的标签
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dd, ul, ol, pre,fieldset,legend, button, input, textarea, th, td { margin: 0; padding: 0; }
body { font:12px/1.5 "Microsoft YaHei",微软雅黑, Arial, Verdana, Sans-Serif; color:#000; position:relative; width:100%; height:100%; margin:0 auto; }
html { width:100%; height:100%; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: "Courier New", 9, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
a { text-decoration: none; }
a:link, a:visited , ins { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
abbr, acronym { border: 0; font-variant: normal; }
sup{ vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
legend { color: #000; }
fieldset, img { border: none; }
img{ vertical-align: middle; }
button, input, select, textarea { font-size: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
caption { text-align: left; }
hr { border: none; height: 1px; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
使用网页背景
九.我们要重复刚才切的20像素背景下，我们将在body设置为背景。
body {
background:#59d3fa url(img/body_bg.jpg) repeat-x 0 0;
}
设置布局的容器div
十.让我们切换到HTML。我们要写一个宽为1024px的容器#container。
<body>
<div id="container">
<!-- content goes here -->
</div>
</body>
十一.我们要给#container宽度为1024px，而且要居中！在这里，我觉得1024可能有点太宽了，960px也是不错的！
#container {
width:1024px;
margin:0 auto;
}
创建LOGO
十二.打开所有图层，选择logo！使用矩形选框工具的选择宽125px高320px的logo。使用Photoshop，配合“参考线”，这样才能更容易更准确的保证一切都正确对齐。
十三.复制合并（按Ctrl + Shift+ C），然后粘贴到新文档中。
十四.我们要用CSS精灵，这样当用户鼠标放上去的时候，可以有一个颜色变暗的效果。增加画布大小，图像“>画布大小（按Ctrl + Alt + C）。输入的双倍高度，更改锚顶部中间位置。
十五.复制图层1，然后使用移动工具将其移动到底层。
十六.随着复制层移动，使用图像>调整>替换颜色。请确保图片框被选中。单击颜色框中选择改变色调，饱和度和亮度值直到你得到你喜欢的效果。在下面的图中，您会看到我用的设置。
十七.图片另存为logo.jpg！从现在起，储存图片要使用相同的设置。我用的JPEG，质量非常高，如果更改了默认设置，一定要保证图片质量的一致性。
创建导航菜单
十八.和logo一样，创建一个高125px宽640px的选区。
十九.复制选择，然后粘贴到一个新的文档。
二十.就像在第14步，画布的高度为250像素，图像>画布大小（按Ctrl + Alt+ C）后，不要忘记改变顶部中间。然后再复制图层1，并使用移动工具将其移动到底层。
二十一.按照步骤16，以取代底层的颜色。我用的颜色#e2e2e2。
二十二.将图像menu.jpg存到IMG文件夹内。
编写head中的代码
二十三.让我们切换到HTML/ CSS中。首先，我们将开始与标记。在#container容器里面，我们使用另一个div来创建我们的标头部分我们命名为#header。你也可以用其他来命名，这取决于你的结构，不过我还是建议用简单易懂的方式来命名，便于以后修改。根据我上篇介绍的语义化，这里我们用h1来放logo。
<div id="container">
<div id="header">
<h1><a href="#">Creativo</a></h1>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About</a></li>
<li id="work"><a href="#">Work</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
</div>
LOGO的样式
二十四.首先，让我们定义#header的样式。我们在网页顶部一些空间，因此，我们需要给它一个上边距属性。由于我们的内容区域是960px，我们会给#header一个960px宽度，这样当用户最小化的Web浏览器，仍然有保证在左右两边有一些空余。我们还必须让他居中。下面，我用margin属性的简写，这些数字对应于顶部（90px），右（自动），底部（0），左（自动）的外边距。
#header {
height:125px;
width:960px;
margin:90px auto 0 auto;
}
二十五.让我们开始写logo的样式。我们把h1元素转变成一个块元素的。我们利用我们先前创建的标志（第17步）为背景，并隐藏的文本。这种替换背景图像文本的方法被称为CSS背景图片替换。
#header h1 {
display:block;
float:left;
width:320px;
height:125px;
background:url(img/logo.jpg) no-repeat 0 0;
text-indent:-10000px;
}
二十六.为了使LOGO可点击，我们也需要h1内部的元素a元素是块元素，并给它相同的宽度和高度。
#header h1 a {
display:block;
width:100%;
height:100%;
}
二十七.为了让鼠标放上去有效果，这里用了css的伪类a:hover。
#header h1 a:hover {
background:url(img/logo.jpg) no-repeat 0 -125px;
}
制作导航菜单的样式
二十八.在主导航上，我们还需要将其转换为一个右浮动块元素并且不使用列表的默认样式。然后，我们将背景设置为menu.jpg。
#header ul {
display:block;
float:right;
width:640px;
height:125px;
background:url(img/menu.jpg) no-repeat 0 0;
list-style:none;
}
二十九.对于列表项，我们要让他成为块元素，然后左浮动，使他们并排显示。然后，就像logo一样，我们使用隐藏文本。
#header ul li {
display:block;
float:left;
height:125px;
text-indent:-10000px;
}
三十.我们需要为每个列表项自定义宽度，使每个菜单项可点击的区域是准确的。
#home {
width:160px;
}
#about {
width:137px;
}
#work {
width:129px;
}
#contact {
width:210px;
}
三十一.我们设置a的子集的列表元素的宽度和高度等于其父块。
#header ul li a {
display:block;
width:100%;
height:100%;
}
三十二.最后，我们使用background-position这个属性来实现鼠标放上去的效果。
#home a:hover {
background:url(img/menu.jpg) no-repeat 0 -125px;
}
#about a:hover {
background:url(img/menu.jpg) no-repeat -160px -125px;
}
#work a:hover {
background:url(img/menu.jpg) no-repeat -297px -125px;
}
#contact a:hover {
background:url(img/menu.jpg) no-repeat -426px -125px;
}
三十三.在Web浏览器预览，悬停在LOGO和菜单项，就应该改变颜色。
创建“特色区”的背景
让我们调用图片显示的的一部分，文本上写着“建立网站… …”，以及“了解更多”按钮 – “特色区”。
三十四.在图层中选择featuredarea文件夹，关闭除子标题和主标题层，使“了解更多”按钮。
三十五.创建一个选区，完全选择到“特色区”，宽960px高360px。
三十六.复制到一个新文档，然后保存为featured_bg.jpg到IMG文件夹中。
创建“特色区”按钮
三十七.让我们切出“了解更多”按钮。打开图层面板learnmore的文件夹，它里面的taglines文件夹。
三十八.在按钮周围创建一个高60px宽280px选区。
三十九.复制到新文档。我们要用CSS精灵做一个鼠标放上的特效。新建两倍高度的画布，复制图层1，移动重复下到底底，就像在步骤14至17。对于选择颜色，我用：#0a72a6。唯一的替代价值，我改变了色调的设置，我设置的为10。保存learnmore.jpg到img文件夹中。
创建显示器图片
四十.关于右边布局的显示器也只是一个图像。如果个人有兴趣可以使用一个很酷的幻灯片里的内容，今天我们不打算使用幻灯片。打开featuredarea文件夹！
四十一.创建一个高370px宽375px的选区，围绕显示器选择。
四十二.复制到一个新文档，然后保存为monitor.jpg。
“特色区”代码
现在，我们要写的“特色区”HTML和CSS。因此，打开index.html。
四十三.对于“特色区”，我们将使用块显示元素p。您当然可以使用一个div，但我选择一个段落。 “了解详情”按钮是一个a元素，显示器屏幕上只是一个段落内的图像。
<p id="featuredText">
We build websites that blow you away[...]
<a href="#" id="learnMoreButton">learn more.</a>
<img id="monitor" src="img/monitor.jpg" width="375" height="370" alt="scrn" />
</p>
四十四.写出段落样式，我们需要设置属性的相对位置，将自己定位相对于#featuredText，而不是网页的身体。我们设置为背景featured_bg.jpg和缩进文本左就像前面的例子。
p#featuredText {
display:block;
position:relative;
float:left;
width:100%;
height:375px;
background:url(img/featured_bg.jpg) no-repeat 0 0;
text-indent:-10000px;
}
四十五.下一步，我们写“了解更多”按钮的样式。我们使用learnmore.jpg为背景。我们声明一个悬停样式规则，使我们可以得到就像在标志的CSS悬停效果。我们也绝对位置上的#featuredText容器右上角的显示器。
a#learnMoreButton {
display:block;
width:280px;
height:60px;
background:url(img/learnmore.jpg) no-repeat 0 0;
margin:200px 0 0 132px;
}
a:hover#learnMoreButton {
background-position:0 -60px;
}
#monitor {
position: absolute;
top:0;
right:0;
}
创建圆角框
四十六.下一步是创建圆角框。该图片采用了非网络安全的字体，所以我们要更换网页安全字体（宋体）。首先，在Photoshop调色板文件夹中关闭box，box2和box3图层的文字图层。
四十七.围绕第一个box，创建一个高185px宽320px的选区。使用合并复制，然后粘贴到另一个文件中，保存box1.jpg到img文件夹中。
四十八.按照第四十七步，重复第二个框和第三个框。然后保存为box2.jpg和box3.jpg到img文件夹中。
编写box的代码
四十九.我们将创建一个DIV包含的盒子称为#boxContainer。在这个DIV，我们将创建三个box，这样我们就可以设置相应的CSS背景！
<div id="boxContainer">
<div class="box client">
<h2>Client list</h2>
<p>We have a wide range of clients from [...]<p>
</div>
<div class="box work">
<h2>Our work</h2>
<p>Check out the work we have done for our various [...]</p>
</div>
<div class="box book">
<h2>Book now!</h2>
<p>[...] Click here to get a <strong>free quote</strong>!</p>
</div>
</div>
box的样式
五十.我们做一个向左浮动div框，使它们旁边显示给对方。我们给H2元素的文本设置属性大写，以便它的文字全部大写。然后为.client，.work，.book写样式，我们为每个box写适当的背景。
.box {
width:320px;
height:185px;
float:left;
}
.box h2 {
font:bold 20px Verdana, Geneva, sans-serif;
color:#0f83bc;
text-transform:uppercase;
margin:35px 0 0 140px;
}
.box p {
font:normal 12px/18px Verdana, Geneva, sans-serif;
color:#0c3b4a;
margin:0 30px 0 140px;
}
.client {
background:url(img/box1.jpg) no-repeat 0 0;
}
.work {
background:url(img/box2.jpg) no-repeat 0 0;
}
.book {
background:url(img/box3.jpg) no-repeat 0 0;
}
左栏代码和样式
五十一.下面的框，有一个内容区域，有一个标题为“Need we say more?”我们将称之为“left column”，并把里面的div的文本称为#leftCol。
<div id="leftCol">
<h2>Need us say more?</h2>
<p>Creativo is a Web Design and Development[...]</p>
</div>
五十二.我们给#leftCol的宽度等于两个box以上的宽度，赋予一个对称位。我们必须给它一个左边距，以配合第一个box，一个上边距给下面box一些空间，然后我们给里面的文字弄一些列样式。
#leftCol {
width:640px;
float:left;
margin:20px 0 0 10px;
}
#leftCol h2 {
font:bold 20px/24px Verdana, Geneva, sans-serif;
color:#094e64;
}
#leftCol p {
font:normal 14px/20px Arial, Helvetica, sans-serif;
color:#094e64;
margin-top:10px;
}
创建搜索表单
五十三.在Photoshop中，关闭除了“开始”按钮的图层和输入文字的图层。
五十四.创建一个矩形选框高110px宽320px。
五十五.复制选择（使用合并拷贝），粘贴到一个新的文档，保存为newsletter_bg.jpg。
五十六.创建一个围绕Go按钮的选区，复制，然后粘贴到另一个文档中保存为go.jpg。
编写搜索框代码
五十七.对于表单的形式，我们使用一个form元素，为文本标签，文本输入，和一个提交按钮。
<form id="newsletter" action="" method="get">
<label for="emailInput">Sign Up for Our Monthly Newsletter: </label>
<input id="emailInput" name="emailInput" type="text" />
<input id="submitButton" name="submitButton" value="Go" type="image" src="img/go.jpg" />
</form>
五十八.我们给搜索框一个相对位置，使我们可以用绝对定位来定位输入和按钮。我们去掉#emailInput边框。
#newsletter {
position:relative;
width:320px;
height:110px;
float:left;
background:url(img/newsletter_bg.jpg) no-repeat 0 0;
margin:20px 0 50px 0;
}
#newsletter label {
font:bold 16px Verdana, Geneva, sans-serif;
letter-spacing:-1px;
margin-top:26px;
width:100%;
display:block;
color:#fff;
text-align:center;
}
#emailInput {
position:absolute;
top:51px;
left:5px;
width:200px;
margin:0px 0 0 30px;
font:bold 20px Verdana, Geneva, sans-serif;
color:#999;
border:0;
background-color:transparent;
border:none;
}
#submitButton {
position:absolute;
top:43px;
right:27px;
width:50px;
height:40px;
margin-top:5px;
padding:0;
}
编写底部代码
我们要减少不必要的页脚内容，我们的页脚将用纯HTML和CSS来编写。
HTML代码
<div id="footer">
<p>Creativo Design © 2009. All Rights Reserved. </p>
</div>
CSS代码
#footer {
clear:both;
width:940px;
border-top:1px dashed #094e64;
}
#footer p {
margin:15px 0;
font:bold 12px Arial, Helvetica, sans-serif;
color:#094e64;
}
一些jquery的效果
五十九.首先，HTML文件头部包括jQuery库和javascript.js。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
六十.让我们在style.css中写上以下样式
span.logoHover {
display:block;
width:100%;
height:100%;
background:#ccc url(img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover a {
display:block;
width:100%;
height:100%;
}
六十一.让我们把一下的代码写入到javascript.js，阅读注释可以帮助你看懂。
$(document).ready(function(){
// Remove CSS style of hover
$('#header h1 a:hover').css('background','none');
// Bind a mouseenter event to #header > h1 > a element
$('#header h1 a')
.bind('mouseenter',function(){
// Insert a span > a element in DOM that we will fade in
// with class name .logoHover
$(this)
.before('<span class="logoHover"><a href="#">home</a></span>');
// Hide new DOM element immediately, then fade it in
$('.logoHover')
.hide().fadeIn()
// When mouse leaves logoHover, fade out, on complete, remove
// from DOM.
.bind('mouseleave', function(){
$(this).fadeOut('normal', function(){
$(this).remove()
});
});
});
});
原文：
Coding a Clean Web 2.0 Style Web Design from Photoshop
姊妹篇：
如果觉得此篇文章对您有帮助，希望可以请我喝雪碧！