编码一个乐队网站创建在Photoshop

在本教程的第1部分中，您一步一步地学习了如何在Photoshop中设计一个很棒的乐队网站。现在，在第2部分中，您将学习如何使用PSD并将其转换为干净、有效的XHTML/CSS代码。

乐队网站系列:

• 第1部分:如何在Photoshop中设计一个乐队网站布局
• 第2部分:编码一个乐队网站创建在Photoshop

工作证明

如果按照本教程进行操作，您应该会看到以下内容现场演示．

点击查看现场演示

设置文件

1首先在你的电脑上创建一个新文件夹，把所有的网站文件放进去;我给文件夹命名sixrevisionsband．在刚刚创建的工作文件夹中创建另一个文件夹并调用它图片；它将包含该网站的所有图像，包括CSS背景图像。

2现在打开您最喜欢的代码编辑器(我使用Coda)。创建一个新的HTML文件index . html在文件夹的根目录中——这将是我们的主页模板。

我喜欢将所有样式表保存在一个文件夹中，以防需要添加一些不同的样式表。这样它们就整齐地放在一起了。我们将添加一个名为css,和一个CSS文件在它的标题screen . css．

css将是我们模板的主样式表。

我开始的HTML与一些基本的东西，确保添加一个标题和链接到样式表:

<！DOCTYPE html>     
 
   

我的样式表还以一些基本样式开始，例如所有元素的边框、边距、填充重置，以及一些常见元素(如标题、列表、段落和超链接)的样式声明。然后组织，我把样式表分成几个逻辑部分，这样当我以后维护样式表时，东西会更容易找到:

/ * * * * *全局设置* * * * * / html,身体{边界:0;保证金:0;填充:0;} body{字体:.9em/1.3em arial, helvetica, sans-serif;颜色:# 403 d3d;} / * * * * * * * * * *常见格式/ h1, h2, h3, h4, h5,编辑{保证金:0;填充:0;粗细:正常;} h1{填充:30px 0 25px 0;字母间距:1 px; font:2em arial, helvetica, sans-serif; } h2 { padding:20px 0; letter-spacing:-1px; font:1.5em arial, helvetica, sans-serif; } h3 { font:1em arial, helvetica, sans-serif; font-weight:bold; padding:5px 0 10px 0; } p, ul, ol { margin:0; padding:0 0 18px 0; } ul, ol { list-style:disc; padding:0 0 18px 40px; } img { border:0; margin: 0 0 5px 0; } /***** Links *****/ a, a:visited { text-decoration:underline; color:#403d3d; } a:hover { text-decoration: none; } /***** Wrapper *****/ /***** Header Area *****/ /***** Homepage Content *****/ /***** Footer *****/ /***** Global Classes *****/ .clear { clear:both; }

从背景开始(在Photoshop中)

3.我喜欢从后面开始，然后向前(朝着屏幕)。如果你下载了PSD文件第1部分，你会注意到图层被组织成文件夹:页眉、主页、页脚和背面。

这有助于编码过程。

你需要关闭所有的组，除了回来，其中包含所有图层和背景文件。你还想关闭内容区，你会得到这样的结果:

4你需要将画布大小(图片>画布大小)更改为1600px宽，这样背景就足够宽，可以保存为全宽背景。一旦我们这样做，我们看到网格纹理有粗糙的线条，我们需要去除。

5我们将像在第1部分中那样创建一个蒙版。按住Cmd/Ctrl键选择带有网格纹理的图层，并在图层面板中单击图层缩略图。

6然后点击图层面板底部的添加图层蒙版按钮创建图层蒙版。

7我们会选择一个大软圆刷，像软轮300并更改不透明度和流量设置为50％．确保前景色设置为黑色(按D键快速重置前景色和背景色)。轻轻地刷两边(不是底部)几次，直到粗糙的线条全部消失。

你的背景应该是这样的:

5我们的背景可以保存了。选择文件>保存为Web和设备。我喜欢在这里进行实验，并为图像找到最佳设置，同时尽量保持文件大小尽可能小。

对于这张图片，我发现40%的JPG格式可以使文件大小相当小，但质量足够好，所以它没有像素化。保存到图像文件夹为background.jpg．

为网页设计添加背景

6要将背景添加到设计中，请使用身体元素的CSS背景属性。下面的样式声明告诉背景不要重复，始终位于顶部和中心，当图片用完时，使用棕褐色# d5d4c2．

Body {background: url(../images/background.jpg)无重复顶部中心#d5d4c2;｝

接下来，我们需要确保所有其他项目都在960像素宽的包装中居中。

我将在HTML中添加一个包装器div:

< div id = " wrap " > < / div >

然后我们需要给它一些样式来居中:

#wrap {width:960px;保证金:0汽车;｝

正在设计网站的标志

7打开所有图层文件夹，看看下一步是什么。我喜欢按项目将在HTML中的顺序编码，所以徽标是下一个。我添加了一些指导方针周围的标志，使一切精确，然后我裁剪的标志到指导方针。

我把它保存成JPG格式，格式也是40%。

8现在我们将添加一个标志h1标记，它告诉搜索引擎这是我们页面上的一个重要元素。然后加上an一个标签里面将链接回主页。

< div id = "标志" > < h1 > < a href = " index . html " > Six Revisions < / > < / h1 > < / div >

我喜欢用负号文本这将对视力正常的观众隐藏文本，但搜索引擎和屏幕阅读技术仍然可以看到。

然后在样式表中添加图像作为背景。

我们还需要让它向左浮动因为导航会向右浮动。下面是CSS的样子:

#logo h1{浮动:左;显示:块;填充:21px 0 0 23px;indent: -2000 px;保证金:0;} #logo h1 a{宽度:293px;身高:100 px;显示:块;背景:url(. . /图片/ logo.jpg)不再重演;｝

导航编码

9接下来是导航。首先，我们进入并裁剪悬停背景，将其裁剪为1px宽110px高。

我们可以把它存成PNG-24。这种透明度在任何地方都可以工作，除了在ie6及以下版本，但它会以浅灰色的背景出现，这我可以接受。

作为一个简短的说明，我确实测试并确保我的网站在Internet Explorer中运行，但正如你可能知道的，IE6有几个问题，比如不支持某些图像类型(如PNG-24s)和误解某些CSS规范。所以我想办法让它工作，但根据w3学校的浏览器统计2009年10月，只有10.6%的互联网用户仍在使用IE6，而且这一比例似乎正在迅速下降。

所以，尽管浅灰色的悬停背景没有透明的PNG-24那么漂亮，但它完成了工作，这是我处理IE6的方法。时期。好的，我们继续。

我们将使用一个简单的无序列表，HTML看起来像这样:

< div id = "导航" > < ul > <李> < a href = " # " >新闻< / > < /李> <李> < a href = " # " >歌曲< / > < /李> <李> < a href = " # " >照片< / > < /李> <李> < a href = " # " >视频< / > < /李> <李> < a href = " # " >旅游&事件< / > < /李> < / ul > < / div >

我将向您展示CSS，然后我将分解它:

#导航{浮动:右;显示:块;首字母:大写;粗细:大胆的;字体大小:1.1 em;} #导航{颜色:#706752;文字修饰:没有;} #导航ul{列表样式:无;保证金:0;填充:0; float: right; display: block; } #navigation li { float: left; display: block; padding: 64px 0 33px 0; } #navigation li a { padding: 64px 14px 33px 14px; } #navigation li a:hover { background: url(../images/hover.png) repeat-x; }

首先，我将导航栏向右浮动以使其就位。然后我添加了一些样式，使文本看起来是大写和粗体1.1 em字体大小。

另外，我将链接颜色更改为# 706752并告诉它不要有任何下划线。

#导航{浮动:右;显示:块;首字母:大写;粗细:大胆的;字体大小:1.1 em;} #导航{颜色:#706752;文字修饰:没有;｝

现在来看无序列表。首先，我去掉所有列表样式，并将填充和边距归零，然后添加另一个浮动以使其正确放置。

#导航ul{列表样式:无;保证金:0;填充:0;浮:正确;显示:块;｝

接下来，我浮动李要让每个链接彼此挨着坐，因为默认是垂直排列。如果你浮动李对，然后你的链接会被反向列出。

然后，我在顶部和底部添加了填充李与李#导航把链接放在正确的位置。

#navigation li{浮动:左;显示:块;填充:64px 0 33px 0;｝

这个填充将李从一边到另一边，并告诉悬停动作的高度。

#navigation li a {padding: 64px 14px 33px 14px;｝

最后我们添加我们的悬停背景，这将水平重复。

#导航li:hover {background: url(../images/hover.png) repeat-x;｝

编码内容区域

10接下来是内容区。回到Photoshop中，我们将关闭这些组:首页而且页脚，离去，头小组。我们将在内容区域的顶部和底部添加参考线，以决定我们想在哪里裁剪它。

我发现960像素宽，710像素高就足够了。裁剪并保存到网上。同样，40%的JPG格式也可以。

我们将清除上面的浮动:

然后我们添加一个div# contentarea为内容区设置样式。这里添加了一个简单的hack，因为IE6无法识别最小高度．下面的两行最小高度（高度而且_height)允许IE6识别我们想要的# contentareaDiv至少是830 px高。

我还添加了填充，以便将所有内容轻松地推到正确的位置。

#contentarea {background: url(../images/contentarea.jpg)不重复顶部中心;宽度:908 px;最小高度:684 px;高度:汽车;_height: 684 px;边距:18px 0 0 0;填充:26px 26px 0 26px;｝

11接下来，在内容区域内是特性。你可以使用本教程在这里放置一个滑块使用jQuery创建一个光滑和易访问的幻灯片或者使用flash组件。为了简化代码和本教程的目的，我们现在只使用一个简单的图像来模拟动画功能的外观。

我会继续给这个部门打电话#闪：

 .jpg

和CSS的基本尺寸和边距定义:

#flash{宽度:908px;身高:411 px;Margin: 0 0 35px 0;｝

底部的空白占了页与页之间的空隙#闪Div和下面的3列。

创建列

12现在我们将裁剪出接下来的几张照片，为闪光灯下面的3列内容做好一切准备。

我们需要裁剪视频(在本教程中，我们将用图像模拟视频，就像我们对#闪图片)，以及6个社交媒体图标。

13接下来，我们将为列设置HTML。的br标记清除位于这些列下面的页脚的浮动。

< div id = " column1 " > < / div > < div id = " column2 " > < / div > < div id = " column3 " > < / div > < br类= "清晰" / >

一些简单的CSS将列全部设置到位:

#column1{浮动:左;显示:块;宽度:233 px;Margin: 0 68px 0 0;} #column2{浮动:左;显示:块;宽度:335 px;保证金:0;} #column3{浮动:右;显示:块; width: 207px; margin: 0; }

14我们将把内容添加到第一列，你的html应该是这样的:

 
最新视频
 

< a href="#">另一个视频在这里观看
< a href="#">还有另一个视频在这里
 

15对于列2中的博客文章，我可以使用简单的饼或一些php脚本调用3个最近的博客文章标题和几行，但现在我们只需要在列2中添加一些简单的HTML来模拟博客文章的外观:

 
Six Revisions blog
 
Lorem ipsum dolor sit amectetur adipiscing
 Nunc eu mi risus, nec luctus justo.[…]]
 
Bibendum est eu gravida cras dui sem
 Venenatis a eggestas id, consectetur faucibus nibh.[…]]
 
Aliquam arcu nisi, sagittis at feugiat quis
 Accumsan ut metus。毛里rhoncus[…) < / p > < / div >

16第三列将使用一些无序列表来设置，以获得缩进，而不必使用另一个div。

这是我们的HTML:

< div id = " column3 " > < h3 >联系我们< / h3 > < ul > <李> < a href = " # " > < img src = " / facebook.png手中" alt = "脸谱" / > < / > < /李> <李> < a href = " # " > < img src = " / myspace.png手中" alt = " myspace " / > < / > < /李> < / ul > < ul > <李> < a href = " # " > < img src = " / twitter.png手中" alt = "推" / > < / > < /李> <李> < a href = " # " > < img src = " / linkedin.png手中" alt = "与" / > < / > < /李> < / ul > < ul > <李> < a href = " # " > < img src = " / flickr.png手中" alt = " flickr " / > < / > < /李> <李> < a href = " # " > < img src = " / rss.png手中" alt =“rss”/>  

#column3 ul{列表样式:无;} #column3 li{浮动:左;显示:块;填充:0 27px 10px 0;｝

 copy;2009 Six Revisions Band | 联系我们 

#footer{宽度:960px;Border-top: 6px实体#c4c2af;填充:10px 0 30px 0;text-align:中心;Margin: 30px 0 0 0;字体大小:.9em;｝