从Photoshop中编写一个干净的Web 2.0风格的网页设计

在本网页开发教程中，您将学习如何从模板中构建网页模板<一个href="//www.psicolabor.com/blog/web-design/make-a-colorful-retro-themed-space-scene-in-photoshop/">Photoshop之前教程中的模型<一个href="//www.psicolabor.com/blog/web-design/how-to-create-a-clean-web-20-style-web-design-in-photoshop/">如何在Photoshop中创建一个干净的Web 2.0风格的网页设计使用HTML/CSS和jQuery库。这是第二部分这是两部分系列的一部分，将教你如何在Photoshop中创建布局，然后如何将其转换为符合标准的(X)HTML网页设计。

最终结果

点击下图查看<一个href="//www.psicolabor.com/blog/demo/web2_layout/index.html">现场演示你将在本教程中创建的网页设计。<一个href="//www.psicolabor.com/blog/demo/web2_layout/index.html">

下载

本教程第一部分的作者Jan Cavan为我们提供了一个Photoshop源文件，我们将使用它来构建网站模板。以下下载包含Photoshop文件和本教程中使用的所有示例。

• 清洁- web - 2.0 source.zip(zip, 3.4 mb)

简介

在本教程中，我们将使用一些基本的编码技术创建一个固定宽度的网页布局。最后，我们将用<一个href="//www.psicolabor.com/blog/web-design/things-about-jquery/">jQuery的一点．虽然可能不是最有效的方法，但出于教学目的，我们将从上到下，也就是说，我们将从页眉开始，一直到页脚。

当示例可用时预览它们，以确保您跟上进度。为长途旅行做准备，确保你手边有你最喜欢的含咖啡因的饮料，因为本教程将会是一个很长的教程!让我们开始吧。

设置文件结构

1在您的本地机器上为我们的模板文件创建一个文件夹并调用它web2．

这将是我们的工作目录。2在web2文件夹，创建如下:

• img文件夹-将包含教程中使用的所有图像。
• index . html-我们的网站模板。
• styles.css-我们的样式表。
• javascript.js-这将包含我们的<一个href="//www.psicolabor.com/blog/web-design/free_javascript_image_galleries/">JavaScript

3.开放index . html和styles.css在您最喜欢的文本编辑器中(我们将处理javascript.js后)。另外，在Photoshop中打开PSD文件;它在清洁- web - 2.0 source.zip它叫做web2-mockup-psd.psd．设置好文件结构并打开所有文件后，我们就可以进行切片、切块和编码了。

创建对角线背景

4在Photoshop中，关闭所有图层web2-mockup-psd除了最下面两层，bg和对角线．

5创建一个20 px使用矩形选框工具(M)从画布的左侧开始宽选区，选区的高度跨越文档的全部高度。6确保对角线图层是活动的，使用编辑>合并复制(Ctrl + Shift + C)复制20px宽选区内的区域。创建一个新文档，并将复制的选择粘贴到新文档中(Ctrl + V)。

保存在img名称下的文件夹bg_body.jpg．

设置HTML和CSS文件

7前往index . html．我们要做的第一件事是引用style.css和javascript.js< >头我们的HTML文档。

   
 .

8让我们继续styles.css加上一些基本的风格规则。

我们将采取一个快捷方式，使用通用选择器的边距/填充CSS重置为零所有元素的边距和填充。这在大多数情况下都是可行的，但花点时间学习更健壮的CSS重置技术通常会更好。看看我的文章"<一个title="用CSS重置重置你的样式＂href="//www.psicolabor.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/">用CSS重置重置你的样式，以了解更多关于CSS重置的知识。

下面是用于重置边距和填充的样式规则声明:

/* CSS重置*/* {margin:0;填充:0;｝

实现对角线背景

9我们将水平重复我们创建的20px背景(body_bg.jpg)。我们把它设为身体< >背景。

Body {background:#59d3fa url(img/body_bg.jpg)repeat-x0 0;｝

太棒了!让我们预览一下背景的样子。

在下面的示例1中，您将看到对角线背景的作用。示例1:设置为主体元素背景的对角线。

设置布局的容器div

10让我们转向HTML。我们将布局包含在1024 px宽容器div称为#容器．

11我们会给#容器宽度为1024 px然后用保证金属性:

#容器{宽度:1024px;保证金:0汽车;｝

创建logo

12让我们把我们需要的东西，我们的标题，从标志开始。

转到Photoshop文件。打开所有图层。在标志周围创建一个完全相同的选择320 px和125 px使用矩形选框工具(M)宽。

使用Photoshop指南(查看>显示>指南)使这更容易和更精确。你必须精确的原因是由于背景中的对角线，一切都必须正确对齐。13复制合并(Ctrl + Shift + C)，选中最高的图层，然后将logo粘贴到一个新文档中。

14我们将把它变成一个CSS背景精灵，这样当用户将鼠标悬停在它上面时，我们可以向他们显示一个滚动效果。增加画布的大小，图像>画布大小(Ctrl + Alt + C)。通过输入将画布的高度增加一倍250 px在高度上。

将锚移至顶部中间的位置。15复制图层1，然后用移动工具移动到底部。16复制层激活(第一层复制)，使用图像>调整>替换颜色…

．确保图像射频框已被选中。单击“颜色”框以更改所选颜色，并在徽标底部的某处采样(# e2e2e2）.

玩周围的色调，饱和度，和明度值，直到你得到一个你喜欢的效果。在下面的图中，您将看到我使用的设置。17另存为web文件，文件>另存为web (Alt + Shift + Ctrl + S)为logo.jpg在我们的img文件夹中。

从现在开始，使用相同的设置保存这些文件。我用了JPEG，非常高的，但可以随意更改这些设置。如果您更改了默认设置，请确保每次都以相同的方式保存它，以提供图像的一致性。

创建导航菜单

18就像logo一样，创建一个选区640 px通过125 px．

19复制所选内容(合并复制)，然后将其粘贴到新文档中。20.就像第14步一样，将画布的高度加倍到250 px，图像>画布大小(Ctrl + Alt + C)，不要忘记改变锚点为顶部中间．然后再次复制图层1，并移动到底部使用移动工具(V)。

21按照步骤16替换底部图层的颜色。我对选区颜色使用相同的设置，# e2e2e2．22将文件另存为menu.jpg在img文件夹中。

编码Header的HTML标记

23让我们切换到HTML/CSS。

首先，我们将从标记开始。在#容器Div，我们使用另一个Div来创建我们的标题部分-我们将其命名为#头．你可能想要使用更结构化的命名约定，比如#品牌，这由你决定。

如果您想了解更多关于结构命名约定的知识，请从我们的教程中缓口气，并阅读我关于“<一个href="//www.psicolabor.com/blog/web-design/css-tip-2-structural-naming-convention-in-css/">CSS中的结构命名约定”。对于我们的标志，我们将使用a<标题>标题元素。我们的导航将是一个标准的无序列表项。每个列表项的<一>元素需要一个ID用于CSS翻转和，因为它们有不同的宽度。

< div id = "容器" > < div id = "头" > < h1 > < a href = " # " > Creativo < / > < / h1 > < ul > <李id =“家”> < a href = " # " > < / >家李< / > <李id =”关于“> < a href = " # " >对< / > < /李> <李id =“工作”> < a href = " # " >工作< / > < /李> <李id = "接触" > < a href = " # " >与< / > < /李> < / ul > < / div > < / div >

设计Logo

24首先，让我们设计风格#头．

我们需要给它一个顶部边际属性，这样我们在网页顶部就有一些空间，就像我们的模型一样。因为我们的内容区域是960px，我们将给出#头宽度为960 px．这将在布局的两侧为滚动条提供足够的空间，因此当用户最小化web浏览器时，在左右两侧仍有一些空白，我们的内容不在视图端口的边缘(使内容难以阅读)。

我们还需要使用汽车对于左右边距。下面，我使用了边距属性简写，对于初学者来说，这些数字分别对应于上(90px)、右(auto)、下(0)和左(auto)边距。

#标题{高度:125px;宽度:960 px;Margin:90px auto 0 auto;｝

25让我们先来设计logo的样式。我们把<标题>元素转换为块元素。

我们把它移到左边，这样我们的logo和菜单就并排在一起了。我们使用之前创建的logo(步骤17)作为背景，最后将文本缩进到左边看不到的地方以隐藏文本。这种用背景图像替换文本的方法称为CSS背景图像替换。

#标题h1 {显示:块;浮:左;宽度:320 px;身高:125 px;背景:url (img / logo.jpg)不重复0 0;文本:-10000 px;｝

26为了使徽标可点击，我们还需要<一>元素中的<标题>元素为块元素，并赋予它相同的宽度和高度<标题>

#header h1 a {显示:块;宽度:100%;高度:100%;｝

27为了启用翻转效果，我们改变的背景位置答:徘徊．

#header h1 a:hover {background:url(img/logo.jpg) no-repeat0 -125 px；｝

样式化导航菜单

28到主导航。

我们还需要将其转换为块元素，并将其浮动到徽标的右侧。然后我们把背景设置为menu.jpg并删除列表项项目符号。

#头ul{显示:块;浮:正确;宽度:640 px;身高:125 px;背景:url(img/menu.jpg) no-repeat 0 0;list-style:没有;｝

29对于列表项，我们也将它们变成块元素，然后将它们向右浮动，以便它们并排显示。然后，就像商标一样，我们使用文本隐藏文本。

#头ul li{显示:块;浮:左;身高:125 px;文本:-10000 px;｝

30.我们需要为每个列表项设置自定义宽度，以便每个菜单项的可点击区域将是准确的。

#回家{宽度:160 px;｝#关于{宽度:137 px;｝#工作{宽度:129 px;｝#联系{宽度:210 px;｝

31我们让孩子们<一>元素的列表项显示块，其宽度和高度等于它们的父元素。

#header ul li a{显示:块;宽度:100%;高度:100%;｝

32最后，对于悬停，我们调整背景位置的属性menu.jpg雪碧。

#home a:hover {background:url(img/menu.jpg)不重复0 -125 px；{background:url(img/menu.jpg)不重复-160 px -125 px；} #工作a:hover {background:url(img/menu.jpg) no-repeat-297 px -125 px；} #联系人a:hover {background:url(img/menu.jpg) no-repeat-426 px -125 px；｝

33在网络浏览器中预览你的工作。

查看下面的示例2，了解我们的进展。将鼠标悬停在徽标和菜单项上，它们应该会改变颜色。示例2:标题部分完成。

创建Featured Area背景

让我们把带有显示器屏幕的模型部分称为“特色区域”，文本显示“Web构建网站…”和“了解更多”按钮。34在featuredarea文件夹，关闭所有的图层，除了字幕和主标题图层，这样“了解更多”按钮和右边的苹果显示器就不会显示出来。35创建一个完全正确的选择960 px通过360 px围绕“特色区域”部分。36将其复制到一个新文档中，然后另存为featured_bg.jpg在img文件夹中。

创建Featured Area按钮

37让我们切掉“了解更多”按钮。打开nasa文件夹在图层面板;它在口号文件夹中。38在按钮周围创建一个选区280 px通过60像素．

39将所选内容复制到新文档中。我们也要为这个制作一个翻转的CSS精灵。加倍画布的高度，复制图层1，移动复制到底部，就像在步骤14到17。对于选择颜色，我使用:# 0 a72a6．我唯一更改的替换值是色调设置，我将其设置为+ 10．另存为learnmore.jpg在里面，你猜对了img文件夹中。

创建Monitor映像

40布局右侧的监视器将只是一个图像。

阅读本教程的更勤奋的人会尝试使用显示器作为一个很酷的小幻灯片，显示器改变内容-我们今天不打算在这里讨论这个。打开剩下的featuredarea文件夹中。41在显示器周围创建一个选区，没错375 px通过370 px．

42将其复制到一个新文档，然后另存为monitor.jpg．

为“特色区域”编码

现在，我们要学习“特色区域”的HTML和CSS。所以继续看index . html．43对于“Featured Area”，我们将使用block- displays< p >元素。

您当然可以使用div，但我选择使用段落。“了解更多”按钮是一个<一>元素，而监视器屏幕只是段落中的图像。加价如下:

< p id = " featuredText " >我们建立的网站让你大吃一惊[…]learn more. . .< / p >

44让我们为段落设置样式，它有效地充当我们的容器。

我们需要设置位置财产相对因此(稍后)我们的监视器，它将是绝对定位的，它将相对于# featuredText段落，而不是网页的主体。我们设置featured_bg.jpg作为背景，并将文本缩进到左侧，就像前面的例子一样。

p#featuredText{显示:块;位置:相对;浮:左;宽度:100%;身高:375 px;背景:url(img/ featred_bg .jpg) no-repeat 0 0;文本:-10000 px;｝

45接下来，我们样式“学习更多”按钮。我们使用learnmore.jpg作为背景。

我们宣布徘徊样式规则，这样我们就可以得到像logo一样的CSS翻转效果。我们还将把监视器绝对放置在#featuredText容器的右上方。

a#learnMoreButton{显示:块;宽度:280 px;高度:60 px;背景:url (img / learnmore.jpg)不重复0 0;Margin:200px 00 132px;｝答:徘徊#learnMoreButton {background-position:0 -60px;｝#监控{位置:绝对;上图:0;右:0;｝

特色区域完成。检查标题和特色区域的预览(例3)。

示例3:标题和特色区域完成。

创建圆角框

46下一步是创建圆角框。这个模型使用了一个非网络安全的字体，所以我们稍后会用一个网络安全的字体(Verdana)来代替它。我们将把每个盒子一次切一个。

首先，关闭文本层盒子，框2,盒3在Photoshop的图层面板中的文件夹。47在第一个框周围创建一个选择320 px通过185 px．使用合并复制，然后将其粘贴到另一个文档中。

另存为box1.jpg在img文件夹中。48对第二个和第三个盒子重复47。保存在img文件夹,box2.jpg和box3.jpg相应地,。

为方框编码

49前往index . html．

我们将创建一个包含div的方框# boxContainer．在这个div中，我们将用类创建三个方框.box．为了能够设置适当的CSS背景，我们双重声明了盒子的class属性.client，.work,.book．

下面是标记:

< div id = "boxContainer"> 
 
客户列表
 
我们的客户范围广泛，从[…]
 
 
箱书“> 
现在预订!”< / h2 > < p >[…]点击这里获得免费报价!< / p > < / div >

设置盒子的样式

50我们浮动.boxdiv到左边，这样它们就会被显示在一起。我们给< h2 >一个元素大写字母其价值首字母属性，使其全大写，就像模型一样。然后是.client，.work,.book样式规则，我们为每个框设置适当的背景。

.box{宽度:320px;身高:185 px;浮:左;} .box h2{字体:粗体20px Verdana，日内瓦，sans-serif;颜色:# 0 f83bc;首字母:大写;边距:35px 0 0 140px;} .box p {font:normal 12px/18px Verdana，日内瓦，sans-serif;颜色:# 0 c3b4a;Margin:0 30px 0 140px;} .client {背景:url(img/box1.jpg) no-repeat 0 0;} .work {背景:url(img/box2.jpg) no-repeat 0 0;} .book {背景:url(img/box3.jpg) no-repeat 0 0;｝

在浏览器中预览您的工作。

它应该类似于示例4。示例4:已完成的箱子

编码和样式左边的列

51在方框下方，有一个标题为“我们还需要说更多吗?”的内容区域。我们将其称为“left column”，并将该文本放在名为# left．加价如下:

< div id = "left我们还需要多说吗? 
Creativo is a Web Design and Development[...]
 

# left {宽度:640 px;浮:左;Margin:20px 0 0 10px;} #leftCol h2{字体:粗体20px/24px Verdana，日内瓦，sans-serif;颜色:# 094 e64;} #leftCol p{字体:normal 14px/20px Arial, Helvetica, sans-serif;颜色:# 094 e64;margin-top: 10 px;｝

<形式Id ="newsletter" action="" method="get"> <标签 文本" />   .jpg

#通讯{职位:相对;宽度:320 px;身高:110 px;浮:左;背景:url(img/时事通讯)no-repeat 0 0;边距:20px 0 50px 0;} #时事通讯标签{字体:粗体16px Verdana，日内瓦，sans-serif;字母间距:1 px;margin-top: 26 px;宽度: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;边界:没有;} #提交按钮{位置:绝对;上图:43 px;右:27 px;宽度:50 px;高度:40像素;margin-top: 5 px;填充:0;｝

 
创意设计©2009.版权所有。< / p > < / div >

#footer {clear:both;宽度:940 px;Border-top:1px虚线#094e64;} #footer p {margin:15px 0;字体:粗体12px Arial, Helvetica, sans-serif;颜色:# 094 e64;｝

   
 .

跨度。logoHover{显示:块;宽度:100%;高度:100%;背景:#ccc url(img/logo.jpg) no-repeat 0 -125px;}。logoHover{显示:块;宽度:100%;高度:100%;｝

$(文档)时函数(){//删除悬停的CSS样式$('#header h1 a:hover').css('background'，'none');//绑定一个mouseenter事件到#header > h1 >元素$('#header h1 a') .bind('mouseenter'，function(){//在DOM中插入一个span >的元素，我们将用类名.logoHover进行淡出(美元).before(“<跨类=“logoHover”> < a href = " # " >家< / > < / span >”);//立即隐藏新的DOM元素，然后将其淡入$ (' .logoHover ') hide () .fadeIn ()//当鼠标离开logoHover，淡出，完成时，从DOM中移除//.bind('mouseleave'， function(){$(this). bind('mouseleave'， function()渐隐(“正常”,function(){$(这).remove ()});});});})；