在这个网页设计教程中，你将看到一个转换Photoshop模型到工作的HTML/CSS模板的过程。这是第2部分该系列教程将向您展示如何创建设计，然后将其转换为HTML/CSS模板。
最小和现代作品集布局教程系列< / h3 >
演示< / h3 >< p >点击下面的图片预览来启动演示我们今天要创造的东西。
在你开始之前< / h3 >< p >如果你还没有，我们强烈建议你去做第1部分:在Photoshop中设计一个最小和现代的作品集布局在您继续学习之前。这是因为以下内容将需要第一部分的Photoshop模型文件。如果您已经完成了第一部分，准备好您的PSD模型，因为我们将在这里使用它。< / p >
在你开始之前< / h3 >< p >如果你还没有，我们强烈建议你去做第1部分:在Photoshop中设计一个最小和现代的作品集布局在您继续学习之前。这是因为以下内容将需要第一部分的Photoshop模型文件。如果您已经完成了第一部分，准备好您的PSD模型，因为我们将在这里使用它。< / p >
如果你想跳过Photoshop模型的创建，你应该回到第1部分下载源文件，因为我们在本教程中需要它。< / p >
创建文件结构并准备文件< / h3 >< p >1在桌面上新建一个名为投资组合．2在空文件夹中，创建另一个名为图片它将包含我们的CSS背景图像和其他图像资产。3.接下来，创建一个名为styles.css和一个空的HTML文件称为index . html．< / p >
4在你最喜欢的源代码编辑器中打开index.html文件;在本教程中，我将使用Adobe Dreamweaver。5在文档的顶部< >头标签，链接到您的样式表(样式表。css)，这样它就准备好了。您可以使用下面的代码。< / p >
代码块1
<链接href = " styles”cssrel = "样式表" type = " text / css " / >
对布局部分进行编码< / h3 >< p >下面，你可以看到我们的web模板的基本结构。我们将开始我们的转换通过创建我们的最小和现代网页模板的基本部分。
6我们将从一个主容器(通常也称为包装器)开始，它将把我们的文档固定在web浏览器的中心位置。< / p >
在容器里面，我们将有五个div的，这将组成我们网站的部分:section是#大，#欢迎，#侧边栏，#内容而且#页脚．HTML代码如下所示。< / p >
代码块2
<！——容器启动——>< !——标题/导航开始——>< / div > < !——头/导航结束- - > < !——欢迎区启动——>< / div > < !——欢迎区结束——>< / div > < !——侧边栏结束- - > < !——CONTENT started——>< / div > < !——内容结束- - > < !——FOOTER started——>< / div > < !——FOOTER ENDS——>切片模板的主体背景< / h3 >< p >7在开始编写每个部分之前，让我们先添加网页的背景。在Photoshop中打开PSD文件，选择矩形选框工具(M)，然后做一个小的选区覆盖头部/导航和一些背景;选择可以少到1 px(因为我们将使用CSS水平重复它)。
8在选择的底部，使用滴管工具(I)记录十六进制颜色代码。< / p >
9一旦你做出了选择，点击编辑>合并拷贝，创建一个新的Photoshop文档(Ctrl + N)，然后将选择粘贴到一个新的文档。通常，Photoshop会自动填充剪贴板上的项目的宽和高尺寸，但如果没有，请确保新Photoshop文档的尺寸与矩形选框的尺寸匹配。10一旦你将选区复制到新的Photoshop文档中，点击文件保存为Web和设备(Alt + Shift + Ctrl + S)，选择PNG-8作为文件格式，然后将其保存为background.png在images文件夹里面。< / p >
编码模板的主体背景< / h3 >< p >11现在我们已经从Photoshop文档中切割出了背景图像，我们可以开始将其编码到我们的模板中。在源代码编辑器中打开CSS文件(styles.css)，然后使用以下代码。< / p >
代码块3
＊｛保证金:0 px;填充:0 px;边界:没有;}体{background-image: url(images/background.png）;平铺方式:repeat-x；背景颜色:# 001 b32；font-family: Arial, Helvetica, sans-serif;字体大小:12 px;颜色:# c8c8c8;} #容器{margin:汽车；宽度:850 px；｝代码块3的解释
让我们更详细地讨论一下款式。首先，我们将所有元素的边距、填充和边框重置为0，以避免跨浏览器的不一致。我们用
＊选择器。< / p >接下来，我们对
身体元素;我们设置background.png作为背景属性，我们水平重复它(repeat-x)．我们还将背景色设置为深蓝色(# 001 b32)．最后，我们样式#容器的利润,汽车将布局居中，并设置固定宽度850px。< / p >切割logo/网站名称< / h3 >< p >12我们将转移到我们的网站模板的标志/网站标题。使用矩形选框工具(M)，在网站的标题和口号周围做一个选区(参考下图)。
13就像使用background.png一样，将选框选择复制到一个新文档中，并将其保存为一个透明的PNG文件title.png在images文件夹里面。< / p >
编码标志/网站名称< / h3 >< p >14我们的logo/网站名称都准备好了，切换回你的HTML文档。在
#大，创建一个ID为的新div标题．15然后，在新创建的#标题div,添加一个<标题>元素与你的网站名称;我们还将创建一个超链接元素(<一>)，将会连结到我们的网站首页。< / p >对于模板，我们简单地分配了
href财产的一个元素的值＃，但如果你要在一个实时的网站上使用它，你可以使用反斜杠(/)，而不是将它们链接回您的主页。HTML代码如下所示:< / p >代码块4
<！——标题/导航开始——>< !——网站标题开始——><标题>您的网站名称< / h1 >< / div > < !——网站标题结束——>16现在，让我们转到样式表。我们的风格
#大部分元素。这是CSS代码。< / p >代码块5
#{顶部浮:左；宽度:850 px；高度:119 px；} #title {float: left;宽度:278 px;身高:74 px;padding-top: 45 px;} #标题h1{显示:块;浮:左;宽度:278 px;身高:74 px;indent: -9999 px；} #title h1 a{显示:块;宽度:100%;高度:100%;背景图片:url(图片/ title.png);平铺方式:不再重演;背景位置:0 0;｝代码块5的解释
让我们更详细地研究上面的代码。首先我们需要浮动
#大左边的Div，并给它一个固定的宽度和高度。宽度应该是850px，与#容器高度与网页布局模型上的浅灰色区域相同。< / p >
接下来，我们使用一种叫做CSS背景图像替换使用
文本方法。我们缩进里面的文本# h1标题向左移动-9999px，这实际上是将它推出了浏览器视图端口。这对于屏幕阅读器的可访问性和搜索引擎优化来说是一种很好的技术。< / p >编码的导航< / h3 >< p >17还在
#大，创建另一个ID为的div导航之后#标题内部的div。#导航Div中，添加一个包含导航链接的简单无序列表，并给它一个类nav-links．这是代码块#导航div。< / p >代码块6
<！——导航开始——>家< / > < /李> <李> < a href = " # " title =“关于”>对< / > < /李> <李> < a href = " # " title =“投资组合”>组合< / > < /李> <李类= "borderx2" > < a href = " # " title =“接触”>联系< / > < /李> < / ul > < / div > < !——导航结束- - >
代码块6的解释
给无序列表一个类
nav-links允许我们用CSS来锁定它，而不影响网页中的其他无序列表。注意，最后一个列表项的类是borderx2，意思是“边界乘以二”;这是因为我们的PSD网页布局模型在每个导航链接之间有分隔符，当我们稍后添加我们的CSS样式时，我们将在左边和右边给最后一个项目一个1px的边界(因此边界x2)。< / p >切片悬停指示器< / h3 >< p >18在我们为我们的导航添加CSS样式之前，我们必须先切片我们的小悬停三角形。转到PSD文件，使用矩形选框工具(M)在三角形周围做一个选区。复制并粘贴小三角形到一个透明背景的新文档中，然后保存为nav_hover.png在图像文件夹中。< / p >
样式的导航< / h3 >< p >19现在，是时候为web模板的导航添加CSS代码了。转向你的样式表，使用下面的CSS:< / p >
代码块7
.nav-links li a {浮:左；宽度:120像素；身高:68像素；文字修饰:没有；首字母:大写;颜色:# 666666;字体大小:12 px;text-align:中心;padding-top: 51 px;border-leftwidth: 1 px;border-left风格:固体;border-left-颜色:# cecece;} .nav-links li a:徘徊{颜色:# 00284;背景图片:url(/图片nav_hover.png）;平铺方式:不再重演;背景位置:中心底;}。borderx2{border-right-width: 1 px;border-right-style:固体;border-right-color: # cecece;｝代码块7的解释
首先，为了并排显示列表项，我们将它们浮动到左侧。我们给它们一个固定的宽度和高度，这样它们的间隔就均匀了。然后在超链接上删除默认下划线
文字修饰的属性没有一个(浏览器默认是下划线)．< / p >我们在每个列表项的左边给它一个1px的灰色边框。然后我们用样式样式悬停状态
:徘徊psuedo-selector。当悬停时，我们给列表项的CSS背景nav_hover.png．< / p >最后，为了处理最后一个列表项的右侧没有1px灰色边框的情况，我们声明
边境属性.borderx2类。< / p >创建欢迎区< / h3 >< p >欢迎区将分为两部分，左侧(
#欢迎文本)和右侧(#欢迎图片)．20.首先，回到HTML文档(index.html)。在
#欢迎div，创建两个新的div:给第一个div一个ID文本第二个是ID欢迎图片．< / p >我们将继续填充这两个新的div在我们切出我们需要的东西，欢迎是。< / p >
切片欢迎图片< / h3 >< p >21转到PSD文件，在图层窗口中隐藏所有的图层(点击每个图层旁边的眼睛图标关闭可见性)，除了深蓝色的背景，它有径向渐变。22用矩形选框工具(M)在它周围做一个选区。宽度不应该超过850像素，所以使用我们在第一部分设置的Photoshop指导在Photoshop中设计一个最小和现代的作品集布局-本教程系列的。< / p >
23复制并粘贴深蓝色背景到一个新文档，并将其保存为content_background.png在images文件夹里面。使用上面解释的相同方法，打开各自层的可见性，然后切片欢迎图像和项目符号(参见下面的图作为参考)。
新部分的HTML如下所示。< / p >
代码块8
<！——欢迎区启动——>< / div > < !——欢迎文本结束——>< / div > < !——欢迎图片结束——>
24在
#欢迎文本div，我们添加一些欢迎文本，就像在我们的Photoshop模型中显示的那样。使用一个< h2 >元素作为欢迎文本的标题，然后在下面添加一个简单的无序列表。25在#欢迎图片div，添加您的欢迎图像(在本例中，是Six Revisions屏幕截图)。< / p >总之，HTML代码现在应该如下所示。< / p >
代码块9
<！——欢迎区启动——>< !——欢迎文本开始——>yourwebsite!Lorem ipsum dolor sit amet, prectetur[…
fringilla nunc lorem, in sollicitudin orci。Sed ut eros ligula。< / p >< ul类= "列表" >
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... < img src = "图片/ welcome_image.png”alt =“欢迎……”/>< / div > < !——欢迎图片结束——>用CSS样式化欢迎区< / h3 >< p >26现在我们可以开始在欢迎区域内设置元素样式。将以下代码复制并粘贴到样式表中，并阅读下面代码块的说明。< / p >
代码块10
#welcome {float: left;宽度:850 px；背景图片:url(/图片content_background.png）;平铺方式:没有重演；身高:326 px;padding-top: 40像素;} h2 {大写首字母:；颜色:# ffffff;字体大小:16 px;margin-bottom: 15 px;}。heading-color2{颜色:# 9 a9a9a;} #welcome-text {width: 406px;行高:18 px;padding-top: 50 px;浮:左;text-align:证明;} #welcome-text {margin-bottom:10px;} .list li {text-decoration: none;背景图片:url(/图片bullet.png）;平铺方式:不再重演;list-style-type:没有；浮:左;宽度:180 px;padding-left: 20 px;margin-top: 10 px;背景位置:左中心;} #欢迎图片{浮:对；身高:326 px;宽度:427 px;｝代码块10的解释
让我们更详细地看看重要的CSS声明。首先，我们给出
#欢迎径向梯度的Div为背景属性(content_background.png)．图像被添加为背景，不重复(重复一遍:没有重演)．< / p >然后我们为div设置了固定的宽度和高度;宽度应该跨越我们的web模板的宽度(850px)和高度与欢迎图片(236px)一样高。然后我们有
< h2 >元素。我们用首字母财产。< / p >我们将第二个“yourwebsite”文本包装在一个
跨度和一群heading-color2给它一个不同的颜色。对于我们的无序列表，它有一个类列表，我们将其列表项的背景图像属性设置为bullet.png并通过声明删除列表项的默认圆角项目符号list-style-type的属性没有一个．最后，让我们#欢迎图片的左侧显示#欢迎文本，我们将它向右浮动，并给它一个固定的宽度(这是浮动元素时的好做法)。< / p >我们也给它一个宽度和高度等于
welcome_image.png我们从PSD文件里切下来的< / p >切割3D分离器< / h3 >< p >27对于3D分隔符，我决定使用一个空的div元素和类
分隔符所以它可以很容易地使用很多次。要开始创建3D分隔符，转到PSD文件，使用矩形选框工具(M)在3D分隔符周围做一个选区;选区的宽度不应超过850像素，也不应高于分隔符本身，但要确保所有内容都包含进去。28复制并粘贴分隔符到具有透明背景的新文档，并将文件保存为web为
separator.png在images文件夹里面。< / p >3D分离器的编码< / h3 >< p >29分隔符的HTML和CSS非常简单。在HTML文档中，请将以下代码紧跟在{#welcome} div结束的位置之后。我们使用非中断空格(
,)，把东西放进我们的.separatordiv。< / p >代码块11
<！——欢迎区结束——>,< / div > < !——分隔符结尾——>30.转向您的CSS文件并使用以下代码。< / p >
代码块12
.separator {background-image: url(images/separator.png）;平铺方式:不再重演;浮:左;17 px高度:；宽度:850 px;margin-top: 20 px；margin-bottom: 20 px；｝代码块12的解释
我们给
.separator一个背景图像属性等于我们从PSD模型中获得的separator.png。我们给它一个固定的宽度850px，等于我们的布局的宽度，并将它浮动到左边。的高度属性设置为separator.png．< / p >我们给它一些顶部和底部的空白，这样在它分离的元素的顶部和底部总是有一个20px的凹槽。< / p >
切片侧边栏< / h3 >< p >31对于侧边栏，我们只需要侧边栏框。在本教程中，侧边栏框将具有固定的尺寸，但如果您愿意，可以在后面轻松扩展它(我们将把这部分留给您)。在PSD文件中，从工具面板中选择矩形选框工具(M)，在方框周围做一个选区;我的选择是259 x 259像素．< / p >
32复制并粘贴侧边栏到新的Photoshop文档与透明的背景，并保存图像为web为contentbox.png在images文件夹里面。33保存完图像后，返回PSD文件，在每个虚拟列表文本之间的小分隔符周围创建一个1px宽2px高的矩形选框(见下图)。
34像往常一样，将它复制到一个新的Photoshop文档，并以文件名保存到webdivider.png在images文件夹里面。< / p >
对于分隔符的选择只需很小，因为它将使用CSS水平重复。< / p >
在HTML中标记侧边栏框< / h3 >< p >35让我们看看侧栏框的HTML。转到HTML文档，并在
.separator注意，我们有第三级标题(< h3 >)作为侧边栏的标题。< / p >还要注意，我们为无序列表分配了一个类
sidebar-list这样我们就可以很容易地用CSS给它设定自己的样式。< / p >代码块13
<！——分隔符结尾——> < !——工具条开始——>< h3 >lorem ipsum悲哀< / h3 >< ul类= "sidebar-list“Lorem ipsum dolor sit amet, sisttetur sit adipiscding…”Lorem ipsum dolor sit amet, setetur sit adipiscding… Lorem ipsum dolor sit amet, setetur sit adipiscding… 用CSS样式化侧边栏框< / h3 >< p >36转到您的样式表并使用以下样式(阅读下面的代码说明以了解发生了什么)。< / p >
代码块14
#工具条{float: left;身高:209 px;宽度:219 px;背景图片:url(/图片contentbox.png）;平铺方式:不再重演;padding-top: 20 px;padding-right: 20 px;padding-bottom: 30 px;padding-left: 20 px;} h3 {大写首字母:；颜色:# ffffff;text-align:中心；margin-bottom: 20 px;字体大小:12 px;} . sidebbar -list li {list-style-type:没有；margin-top: 10 px;padding-bottom: 10 px;背景图片:url(/图片divider.png）;平铺方式:repeat-x；背景位置:底部;｝代码块14的解释
我们给的
#侧边栏Div的宽度和高度等于contentbox.png的宽度和高度。我们将它浮动到左侧，以便它将显示在内容部分的左侧(我们将在下一节讨论)。同时，我们设置背景图像属性设置为contentbox.png。< / p >我们转换的文本
h3元素我们的网页的所有大写字母与首字母属性并将其居中text-align财产。的默认项目符号.sidebar-list列表项list-style-type财产没有一个，以及设置他们背景图像来divider.png水平重复(repeat-x)．然后我们给它们一些边距和填充，让它们之间有一些空间。< / p >为内容区编码< / h3 >< p >37内容区非常简单，因为它只包含几个段落和标题。在我们
#内容Div，只添加二级标题元素(< h2 >)，并将文本的第二部分用span.heading-color2给它一个不同的颜色。要填充内容区域，只需插入一些段落元素lorem ipsum文本。< / p >HTML看起来像这样。< / p >
代码块15
<！——CONTENT started——>欢迎Quisque。< / p >< / div > < !——内容结束- - >
用CSS样式化内容区< / h3 >< p >38转到样式表，并使用下面的样式声明
#内容div元素。< / p >代码块16
#内容{浮动:正确的；宽度:550 px;text-align:证明;} #内容p {margin-bottom: 10 px；｝代码块16的解释
的
#内容Div被浮动到右侧并具有固定的宽度，以便它显示在侧边栏框的右侧。我们没有给它一个固定的高度，因为我们想让里面的文本控制高度。我们给这个段落(< p >)元素在底部设置空白，以便在彼此之间留出一些空间(因为我们已经在前面重置了空白和填充，所以需要这样做)。< / p >切页脚< / h3 >< p >39我们快要结束了，所以让我们继续，把这个坏孩子完成!切换到你的Photoshop文件，在你的页脚背景图像周围创建一个矩形选框，尺寸为850px x 60px(参见下图作为参考)。
编码页脚< / h3 >< p >40同样，footer的代码也非常简单:我们只需要使用教程前面已经创建的{#footer} div即可。在
#页脚Div，我们添加我们的版权文本嵌入使用< p >元素。HTML看起来是这样的:< / p >代码块17
<！——FOOTER started——>< p >版权是;理查德·卡朋特设计的六次修改< / p >< / div > < !——底部结束——>用CSS样式化页脚< / h3 >< p >41然后我们使用以下样式样式我们的页脚(转到您的样式表并将此代码块放在那里)。< / p >
代码块18
#footer {float: left;宽度:850 px;背景图片:url(/图片footer.png）;平铺方式:不再重演;高度:60 px;margin-top: 40像素;padding-top: 25 px;text-align:中心;｝代码第18块的解释
我们使用
footer.png随着背景图像的物业价值#页脚div;浮动到左边，并确保CSS背景图像没有重复没有重演属性值。的#页脚div具有固定的宽度和高度，等于我们的Photoshop文件中的页脚背景的尺寸。我们给它一个顶部空白，让它从上面的div中获得一些空间。< / p >Finito !< / h3 >< p >我们是做!感谢您阅读本教程并继续学习。< / p >
记住，CSS是一个网站的支柱，如果做得有效和好，它将帮助你的客户声誉他们是否是律师事务所或者餐厅，因为它会影响很多人用户体验的重要因素比如网站速度。我期待你的评论和问题!如果一切进展顺利，你应该会得到这样的结果:(点击图片启动演示工作）
下载< / h3 >< p >本教程的源文件是根据创作共用许可发布的;您可以将其用于商业和个人用途，只要您在源文件中保留版权信息。< / p >
- minimal-modern-portfolio-demo.zip(ZIP, 0.29 mb)
相关内容< / h3 >
WebFX职业
加入我们的使命，为全球的企业提供业界领先的数字营销服务，同时建立您的个人知识和个人成长。< / p >
我们招聘! 视图30 +职位空缺!
最重要的
我们驱动
7 8 3. 9 6 8 4为客户带来。
接下来，我们使用一种叫做
新部分的HTML如下所示。< / p >
