在本网页开发教程中，您将学习如何从之前的教程“在Photoshop中创建一个干净和专业的网页设计使用HTML/CSS。这是第二部分这是一个由两部分组成的系列，将教你如何在Photoshop中创建布局，然后如何将其转换为符合标准的(X)HTML网页设计。

“简洁专业的网页设计”系列

• 第1部分:在Photoshop中创建一个干净和专业的网页设计
• 第2部分:编写一个干净和专业的网页设计

最终结果

点击下面的预览查看现场演示你将在本教程中创建的网页设计。

下载

你将需要本教程第1部分的Photoshop (PSD文件)，从教程中下载它．如果您想离线学习(或在项目中使用)，您还可以从下面的链接下载包括本教程中使用的示例在内的所有文件。

• clean-professional-website.zip(zip, 74.8 kb)

简介

在本教程中，我们将使用一些基本的编码技术创建一个固定宽度的网页布局。我们将从上到下一步一步地进行。这意味着我们将从页眉开始，然后是内容，然后是页脚部分。

当这些示例可用时，请预览它们，以确保您跟上了前面的内容。

设置文件结构

1在您的计算机上为教程文件创建一个文件夹，并命名该文件夹clean-professional-website．这将是我们的工作文件夹。2在这个文件夹中，创建以下文件:

• 图片文件夹-将包含教程中使用的所有图片。
• index . html-我们的网站模板。
• css文件夹-将包含我们的样式表称为styles.css

3.开放index . html而且styles.css在您最喜欢的文本编辑器中。同时，在Photoshop中打开PSD文件;它在clean-professional-weblayoutZip文件第1部分．4我们的文件结构已经设置好了，可以开始了。

5打开Photoshop文件。从窗口>信息打开信息面板(快捷键:F8)。信息面板根据所选工具提供有用的信息。

选择矩形选框工具(M)，设置如下所示的选项。设置完选项后，单击画布的左上角(靠近logo)进行选择。6使用编辑>合并复制(Ctrl + Shift + C)复制所选区域。

创建一个新文档，并粘贴(Ctrl + V)复制的选区到新文档中。保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为bg_body.jpg在图像文件夹中。在保存所有文件时使用相同的设置，这样就不会出现它们在网页上呈现的问题。

我用了JPEG- - - - - -非常高的预设，但您可以随意更改这些设置(您可能只使用JPEG - High或PNG-8，以使您的网页CSS背景尽可能轻量级)。如果更改了默认设置，请确保每次都以相同的方式保存，以提供图像的一致性。

设置HTML和CSS文件

7搬到index . html．我们要做的第一件事是引用style.css在< >头我们的HTML文档。

  
 .

8开放styles.css并添加一些基本的样式规则。

我们将在这里采取一个捷径，使用通用选择器的边距/填充CSS重置为零所有元素的边距和填充。这在大多数情况下都是有效的，但最好还是花些时间学习更健壮的CSS重置技术，你可以在这里找到:用CSS重置你的样式．9下面是重置边距和填充的样式规则声明:

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

实现后台

10我们将实现我们创建的背景(body_bg.jpg)，平铺它水平(repeat-x)．我们把它设为身体< >背景。我们还定义了默认值字体类型我们将用在这个网站上。

Body {background: #fff url(images/body_bg.jpg)repeat-x0 0;font-family: Arial, Helvetica, sans-serif;｝

让我们预览一下背景的样子。在下面的示例1中，您可以看到后台是如何实现的。示例1:查看运行中的背景。

设置布局的容器div

11让我们进入一些HTML。我们将把布局包含在960像素,容器div称为#容器．

 
<！—内容放在这里—>身体< / div > < / >

12因为我们的内容区是960 px，我们会给#容器的宽度960 px并添加一个填充10 px在右边和左边。

这将为我们在布局的两边提供足够的空间来放置滚动条，这样当用户最小化web浏览器时，左右两边仍然会有一些填充，我们的内容不会正好位于视图端口的边缘(使内容难以阅读)。用保证金属性。

#容器{宽度:960px;Margin: 0 auto;Padding: 0 10px;｝

创建logo

13我们来切其他的东西，从logo开始。转到Photoshop文件。在标志周围创建一个选择，它完全是360 px而且115 px使用矩形选框工具(M)，如下图所示。

使用Photoshop指南(查看>显示>指南)使这更容易。14复制合并(Shift + Ctrl + C)，然后将logo粘贴到一个新的文档中。注意:方法绘制选区是没有必要的固定大小选项的样式选项。

选择正常的作为样式选项，并拖动目标有一个类似的选择如下所示。15保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为logo.jpg在图片文件夹中。

创建手机图标

16在手机图标周围创建一个选区47个像素而且47个像素使用矩形选框工具(M)，如下图所示。复制合并(Shift + Ctrl + C)，然后粘贴到一个新的文档。17保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为phone_icon.jpg在图片文件夹中。

编码头的HTML标记

18让我们回到HTML/CSS。首先，我们将从标记开始。在#容器Div，我们使用另一个Div来创建我们的标题部分，我们称之为#头．

19对于标志，我们将使用<标题>元素。为了使标志可点击，我们将需要一个<一>元素中的<标题>元素设置为块元素，并赋予它与其父元素相同的宽度和高度<标题>．我们还添加了另一个div，命名为#手机位于我们的<标题>元素。

这将保持电话图标在后台，旁边的电话号码和文本。让我们看看标记是怎样的:

 
 
Smashing Dzine
 
 
+971 55 7457383
 
如果您有任何疑问，欢迎致电我们
 
 
 

设计logo样式

20.首先，让我们整理一下风格#头．我们要设置位置财产相对为#头手机图标-它将是绝对定位-定位自己相对于#头．也给它一个宽度960 px或100％．

我用的是100%。

#标题{位置:相对;宽度:100%;｝

21我们将首先工作的标志风格。我们改变我们的<标题>元素转换为块元素。

让它向左浮动。我们使用之前在步骤15中创建的标志作为背景，最后缩进文本到左侧，它不能被看到，以隐藏我们的文本。这种用背景图像替换文本的方法被称为CSS背景图像替换。

#header h1{显示:块;浮:左;宽度:360 px;身高:115 px;背景:url(../images/logo.jpg) no-repeat 0 0;indent: -9999 px;｝

22为了使徽标可点击，我们还需要<一>元素中的<标题>元素为块元素，并将其宽度和高度设置为<标题>．

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

样式化电话部分

23我们将使用电话图标(phone_icon.jpg)我们在步骤17中创建的作为背景#手机．就像在第20步中提到的那样绝对地放置它。我们将添加填充从顶部5px和从右边50px，所以里面的文本#手机与左侧的图标正确对齐。

#header #phone {background: url(../images/phone_icon.jpg) no-repeat right 0px;高度:47 px;位置:绝对的;上图:41 px;右:0;text-align:正确;填充:5px 50px 0 0;｝

24添加字体大小< p >而且<编辑>元素。

#header #phone p{字号:20px;｝

#header #phone h6 {font-size: 11px;｝

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

查看下面的示例2，了解我们现在的情况。示例2:我们的标题部分，其中包括标志和电话部分已经完成。

创建导航菜单

25移动回Photoshop文件。扩大导航如果还没有展开，就添加图层组。隐藏导航文本。

选择徘徊图层，用直接选择工具(A)，拖动路径的正确锚点到右边，如下图所示。(我们将使用此图像导航悬停)。提示:在用直接选择工具选择锚点后，按住Shift键并用右箭头键将它移动到右边。

这将把锚点向右移动10px。26就像logo一样，创建一个选区203 px通过35像素．复制合并(Shift + Ctrl + C)，然后将悬停背景粘贴到新文档中。

27保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为hover.jpg在我们的图片文件夹中。

导航标记的编码

28我们将添加另一个div#头结束并命名它#导航．我们的导航将是一个标准的无序列表项。每个列表项的<一>元素将包含< span >元素，因为我们的圆角(你会看到为什么一点)。

此外，第一个列表项(Home)将有一个类活跃的显示当前用户所在的页面名．

 
 
 < a href = " # " > < span >家< / span > < / > < /李> <李> < a href = " # " > < span >关于SmashingDzine < / span > < / > < /李> <李> < a href = " # " > < span >我们的服务< / span > < / > < /李> <李> < a href = " # " > < span >我们投资的< / span > < / > < /李> <李> < a href = " # " > < span >博客< / span > < / > < /李> <李> < a href = " # " > < span >联系我们< / span > < / > < /李> < / ul > < / div >

样式化导航菜单

29首先，我们将清除之前的浮动元素#导航并设置高度和宽度#导航div。

# nav {明确:;高度:35 px;宽度:100%;｝

30.我们会漂浮< ul >元素移到左边，以便它与网页的流保持一致。

#nav ul {float: left;｝

31对于列表项，我们将使它们成为块元素，然后将它们向左浮动，以便它们并排显示。

我们还会添加1 px填充以在其右侧列出项目。

#nav ul li{显示:块;浮:左;高度:35 px;list-style-type:没有;填充:01 px0 0;｝

32图像(hover.jpg)我们在前一步创建的背景将被用作<一>具有x位置的元素:left和for< span >具有x位置的元素:右。我们将设置首字母来大写字母所以都是大写字母。

#nav ul li a {color: #3f3f3f;显示:块;文字修饰:没有;字体大小:12 px;粗细:大胆的;首字母:大写;高度:100%;行高:35 px;Padding: 0 0 0 18px;｝

#nav li一个span {display: block float: left;高度:100%;填充:0 18px 0 0;｝

33最后，对于悬停和活动状态，我们调整背景财产。这将显示“hover.jpg当您将鼠标悬停在菜单项上时。

#nav li a:悬浮，#nav li。活跃的a { background: url(. . /图片/ hover.jpg)不重复左;颜色:# fff;光标:指针;文字修饰:没有;｝

34在这里,< span >元素从右侧显示背景图像。

李#导航。活跃的a span, #nav li a:hover span { background: url(../images/hover.jpg) no-repeat正确的；｝

在web浏览器中预览您的工作。查看下面的示例3，了解我们的进展情况。将鼠标悬停在菜单项上，查看主导航是如何工作的。

示例3:我们的导航部分已经完成。

创建特色部分

35我们称大图像为和快速报价表格区域作为我们的特色”一节。36转到我们的Photoshop文件，浏览到头层组再到《外交政策》层组。Ctrl +点击矢量蒙版缩略图(如下图所示)。

你会在大图片周围得到一个选择。37复制合并(Shift + Ctrl + C)，然后将图像粘贴到一个新的文档中。38保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为fp - 01. - jpg在图片文件夹中。

39接下来，我们将创建Quick Quote表单背景。用矩形选框工具(M)，创建一个选区1 px宽度和340 px高度如下所示。40复制合并(Shift + Ctrl + C)，然后将图像粘贴到一个新的文档中。

保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为form_bg.jpg在图片文件夹中。41再次选择矩形选框工具(M)在矩形的周围做一个选区提交按钮，如下所示。42复制合并(Shift + Ctrl + C)，然后将图像粘贴到一个新的文档中。

保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为submit_btn.jpg在图片文件夹中。

特色部分编码

43我们将创建另一个div#特色在我们的#导航这将包含左边的特色图像。你可能会决定这张图片应该是幻灯片，如果是这样的话，你可以看看教程。”使用jQuery创建一个光滑和可访问的幻灯片”。

注意:我们正在展示特色Image为无序列表项，以便稍后想将此部分转换为图像幻灯片的任何人都可以轻松使用。我们将为我们的单曲命名<李>元素为"魔法石,第1章”。44特色部分还包含快速报价从右边开始。

该表单将使用< h2 >元素,<标识>元素<输入>文本元素和最后一个<输入>元素类型属性设置为图像对于按钮。我们将使用“submit_btn.jpg作为src为图像按钮，并将其命名为.btn．下面是加价:

 
 
 
Quick quote 
 
 Your Full Name:  Your Email:  What Are You Looking for:  type = "图像"src = " /图片submit_btn.jpg”/fieldset>  
 . /

#feature {margin: 45px 0 0;背景:# fff;填充:10 px;身高:340 px;宽度:940 px;｝

#featured ul {float: left;｝

#featured ul li {float: left;list-style-type:没有;显示:块;宽度:630 px；｝

#featured ul li a {display: block;身高:340 px;indent: -9999 px;｝

#特色ul li。魔法石,第1章{ background: url(../images/fp - 01. - jpg)不再重演;｝

表单#quote {background: url(../images/ .form_bg.jpg) repeat-x;保证金:0 px;填充:20 px;浮:正确;宽度:260 px;身高:300 px;｝

form#quote h2 {font: normal 24px "Trebuchet MS"， Arial, Helvetica, sans-serif;颜色:# fff;文字修饰:没有;margin-bottom: 18 px;｝

#quote标签{font-weight:粗体;颜色:# fff;字体大小:12 px;显示:块;浮:左;宽度:100%;｝

Form #quote input, Form #quote textarea {background-color: #fff;边框:1px solid #ddd;颜色:# 666;浮:左;字体:12px Arial, Helvetica, sans-serif;Margin: 5px 0 8px;填充:8 px;宽度:240 px;-webkit-border-radius: 3 px;-moz-border-radius: 3 px;} form#quote textarea {height: 45px;｝

#报价形式输入。BTN{宽度:自动;边界:没有;填充:0;margin-top: 0;｝

签出下面的示例4，看看它在浏览器中的效果。示例4:特色栏目完成。

创建内容节

55回到Photoshop，用矩形选框工具(M)，选择1 px通过173 px如下所示。56复制合并(Shift + Ctrl + C)，然后将图像粘贴到一个新的文档中。保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为col_bg.jpg在我们的图片文件夹中。

编码内容部分

57现在我们将转到我们的内容部分。创建一个div并命名它#内容．这将保存我们的内容。

在这个div中，我们将创建三个带有.col类的框。我们将用双重声明第二个框的类属性.noMargin并且三重声明了第三个框的类属性.noMargin而且。fr．为了在不同的浏览器和不同的分辨率下更安全。

最后，我们添加一个空div，其中的类为.clear这将清除所有浮点数。我们将通过添加的方式去掉第2和第3个盒子的空白.noMargin类，并通过添加将第三个框向右浮动。fr类。

< div id = "内容"> 
 
About SmashingDzine
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
[…) < / p > < a href = " # "类=“readmore”>阅读更多< / > < / div > < div class = "坳noMargin"> 
Our Services
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. "[…) < / p > < a href = " # "类=“readmore”>阅读更多< / > < / div > < div class = "col noMargin fr"> 
Our Portfolio
  
Lorem ipsum dolor sit amet, consectetur adipiscing[…) < / p > < a href = " # "类=“readmore”>阅读更多< / > < / div > < / div >< div class = "清晰" > < / div >

样式化Content部分

58首先，我们设置属性明确:为#内容Div，在这个Div被清除之前所有被浮动的元素。然后添加80 px上缘。我们浮动.col将div移到左侧，以便它们并排显示。

设置“col_bg.jpg的背景图片.col添加一个1 px边界和20 px填充。.noMargin将会有0 px保证金和。fr设置为右浮动。

59我们将设置< h2 >元素的底部空白，这样它看起来就像模型一样。的边框和填充来样式图像2 px．我们还将样式<一>元素命名为.readmore．

#内容{margin: 80px 0 0;明确:;字体大小:12 px;颜色:# 767676;} #content .col {float: left;宽度:258 px;背景:url(../images/col_bg.jpg) repeat-x;身高:153 px;边框:1px solid #CCC;填充:20 px; margin-right: 30px; } #content .col h2 { font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #b47825;text-decoration: none; margin-bottom: 18px; } #content .col h2 span { color: #2f2f2f; } #content .col img { border: solid 1px #d8d8d8; padding: 2px; float: right; margin-left: 10px; margin-bottom: 10px; } #content .col p { margin-bottom: 20px; line-height: 17px; } #content .col a.readmore { font-weight: bold; color: #252525; text-decoration: underline; } #content .col a:hover.readmore { text-decoration: none; } #content .col.noMargin { margin: 0; } #content .col.fr { margin: 0; float: right; } .clear { clear: both; }

60在浏览器中预览您的工作。它应该类似于示例5。示例5:内容部分已完成。

创建页脚

61我们将再次回到Photoshop，并根据需要为我们的页脚切割图像。用矩形选框工具(M)，选择下图所示的页脚区域。62复制合并(Shift + Ctrl + C)，然后将图像粘贴到一个新的文档中。

保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为footer_bg.jpg在我们的图片文件夹中。63再次选择矩形选框工具(M)在矩形的周围做一个选区订阅按钮，如下所示。64复制合并(Shift + Ctrl + C)，然后将图像粘贴到一个新的文档中。

保存文件为web，文件>保存为web (Alt + Shift + Ctrl + S)为subscribe_btn.jpg在我们的图片文件夹中。

编写页脚代码

65来显示页脚背景100％宽度，我们将在#容器然后调用Div#页脚．内部#页脚，我们将创建另一个div并命名它# footerContainer。我们将使用一个< p >元素用于页脚链接。

我们还可以使用页脚链接作为标准无序列表项。在页脚也有一个时事通讯部分，我们会用一个< >形式元素命名#通讯．该表单将包含一个标签、输入字段和一个图像按钮。

 
 
版权©2010年SmashingDzine | < a href = " # " >隐私政策< / > < / p > < p > < a href = " # " >家< / > / < a href = " # " >关于SmashingDzine < / > / < a href = " # " >我们的服务< / > / < a href = " # " >组合< / > / < a href = " # " >博客< / > / < a href = " # " >联系我们< / > < / p > <形式id =“通讯”行动= " # "方法=“post”> <标签>输入您的电子邮件订阅RSS更新< /标签> < input type = " text "类=“文本框”/ > <输入类=“btn”类型=“图像”src = "图片/ subscribe_btn.jpg " / > < /形式> < / div > < / div >

样式化页脚

66我们将添加明确:对我们的#页脚Div来清除任何浮动元素。添加footer_bg.jpg到这个div和a的背景宽度的属性100％．

#footer {clear: both;背景:url(. . /图片/footer_bg.jpg）;身高:100 px;宽度:100%;margin-top: 40像素;｝

67集# footerContainer作为960 px将此div内部的内容与页面的其余部分对齐。

我们给这个div一个相对的位置，以便我们可以绝对定位的通讯形式在右侧。

#footerContainer {margin: 0px auto 0;宽度:960 px;字体大小:12 px;颜色:# ddd;padding-top: 20 px;位置:相对;｝

68将以下属性添加到< p >而且<一>元素。

#footerContainer p {margin: 8px 0 8px;} #footerContainer a {color: #ddd;文字修饰:没有;} #footerContainer a:hover {text-decoration: underline;｝

69我们会有#通讯绝对在右边20 px从上。

为<输入>字段，我们将使用与上面使用相同的样式快速报价形成输入字段并将其宽度设置为190 px．

形式#时事通讯{立场:绝对;右:0;上图:20 px;宽度:300 px;}形式#时事通讯标签{font-weight:粗体;颜色:# fff;} form#newsletter input {background-color: #fff;边框:1px solid #ddd;颜色:# 666;浮:左; font: 12px Arial, Helvetica, sans-serif; margin: 5px 0 0; padding: 8px; width: 190px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }

70最后，我们会隐藏图像按钮周围的边框通过给出边境的值。没有一个．

#简报形式输入。BTN{宽度:自动;边界:没有;填充:0;margin-left: 3 px;｝

例子6:页脚完成。

我们都完成了!

恭喜你，你成功了!感谢您坚持阅读本教程-我希望您喜欢本教程，并学习到一些将设计模型转换为HTML/CSS模板的提示和技巧。

我们希望听到您的反馈!

请随时在下面的评论区留下您的反馈和问题。我们会尽我们所能去帮助你。

相关内容

• 如何从头开始编写垃圾网页设计
• 用Photoshop编写一个干净的web2.0风格的网页设计
• 在Photoshop中创建一个乐队网站

关于作者

他说明是一个来自迪拜的自由网页设计师、阿联酋。他是的创始人和编辑增加灵感，在那里，他展示了不同的创意资源的数字艺术，平面设计，插画，摄影和排版的灵感。你可以通过推特或Facebook。