如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。

2 在portfolio目录下面继续创建images目录用于存放图片。

3 接下来创建两个空文件 styles.css和index.html

4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。

5 在文档的标签加入对styles.css的链接。可以使用如下代码：

代码段1

HTML代码如下：

代码段2

9 选定好之后，点编辑 > 合并拷贝，创建一个新Photoshop文件（Ctrl+N），然后将选定区域复制到新文档中。通常新建Photoshop画布长宽是剪切板中选定区域的大小。如果不是，请确保他们是一致的。

10 在新Photoshop文档中，点文件 > 另存为 web 和设备所用格式（Alt+Shift+Ctrl+S），选择PNG-8格式，保存文件为background.png，保存在images目录下。

代码段3

• { margin: 0px; padding: 0px; border: none; } body { background-image: url(images/background.png); background-repeat: repeat-x; background-color: #001b32; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #c8c8c8; } #container { margin: auto; width: 850px; }

代码段3的解释 让我们来仔细的分析一下样式代码。

首先我们将所有元素的margin，padding，border的值归零以避免跨浏览器的兼容性。我们这个用到的是*选择器。

接下来，我们样式化 body 元素；我们将 background.png 设置为背景，通过 repeat-x 使它水平重复。同样把背景色设置为深蓝（#001b32）。

最后，我们把#container的margin设置为 auto 让布局居中，并且设置宽度为850px。

15 在#title div里面，加入元素来放置我们的站点名；同样需要创建一个超链接a标签链接到站点主页。对于这个模板，我们仅把href属性的值设为#，如果需要在实际中使用这个模板，你可以用反斜杠（/）来代替#。

HTML代码如下：

代码段4

代码段5 #top { float: left; width: 850px; height: 119px; } #title { float: left; width: 278px; height: 74px; padding-top: 45px; } #title h1 { display: block; float: left; width: 278px; height: 74px; text-indent: -9999px; } #title h1 a { display: block; width: 100%; height: 100%; background-image: url(images/title.png); background-repeat: no-repeat; background-position: 0 0; } 代码段5的解释 让我们来仔细分析一下上面的代码。

首先我们需要将#top浮动到左边，然后给定一个固定的宽度和高度。

宽度应该和#container等宽，850px，高度应该和浅灰色区域等高，119px。 接下来，我们使用一种CSS背景图片替换的技术使用text-indent方法。我们将#title h1 里面的文字向左缩进-9999px，将文字推出了浏览器的可视区域。这个技术对于屏幕阅读器的可访问性和搜索引擎优化都有好处。

代码段6

代码段7 .nav-links li a { float: left; width: 120px; height: 68px; text-decoration: none; text-transform: capitalize; color: #666666; font-size: 12px; text-align: center; padding-top: 51px; border-left-width: 1px; border-left-style: solid; border-left-color: #cecece; } .nav-links li a:hover { color: #00284a; background-image: url(images/nav_hover.png); background-repeat: no-repeat; background-position: center bottom; } li.borderx2 { border-right-width: 1px; border-right-style: solid; border-right-color: #cecece; } 代码段7的解释 首先，为了让列表项挨个的显示，我们将它们向左浮动。然后给他们固定的宽度高度，使他们之前的空间均衡。然后通过给text-decoration值none来去掉超链接默认的下划线。然后给每个列表项一个1px、灰色的左边框。

然后通过:hover伪类来样式化悬停效果。当鼠标悬停时，我们将列表项的背景设为nav_hover.png。

最后解决最后一个列表项右边没有分割线的问题，需要给.borderx2类声明一个border属性。

22 使用矩形选框工具（M）选定一个宽度不超过850px的矩形，可以通过第一部分的设定好的参考线来选定。

23 将这个深蓝背景转成web图片content_background.png，放在images目录下。使用同样的方法，关闭除了欢迎图片图层的其他图层，切片蓝点和欢迎图片（见一下参考） 新区域的HTML类似如下。

代码段8

24 在#welcome-text div中文名增加一些欢迎文字。使用h2标签给欢迎文字增加标题，然后在以下添加无序列表。

25 在#welcome-image中添加欢迎图片（本案例添加的是Six Revisions的网站裁图）。

合起来，HTML代码如下。

代码段9

代码段10 #welcome { float: left; width: 850px; background-image: url(images/content_background.png); background-repeat: no-repeat; height: 326px; padding-top: 40px; } h2 { text-transform: uppercase; color: #ffffff; font-size: 16px; margin-bottom: 15px; } .heading-color2 { color: #9a9a9a; } #welcome-text { width: 406px; line-height: 18px; padding-top: 50px; float: left; text-align: justify; } #welcome-text { margin-bottom:10px; } .list li { text-decoration: none; background-image: url(images/bullet.png); background-repeat: no-repeat; list-style-type: none; float: left; width: 180px; padding-left: 20px; margin-top: 10px; background-position: left center; } #welcome-image { float: right; height: 326px; width: 427px; }

代码段10的解释 让我们来详解一下上面的代码。首先，我们通过background属性（content_background.png）给#welcome加入渐变背景，并且是不重复的（repeat: no-repeat）。让后给这个div一个固定的宽度高度；宽度为模板内容宽度（850px）,高度为欢迎图片的高度（236px）。

通过text-transform属性让内的文字大写。将‘yourwebsite’包裹在class为heading-color2的span中，赋予其不同的颜色。

无序列表加入类list，然后把背景设置为bullet.png，通过list-style-type设为none去掉默认列表项前面的圆点。

最后，为了让#welcome-image在#welcome-text的右边显示，我们将其向右浮动，给定固定的宽度（在浮动元素中常用）。同样给welcome_image.png一个固定的宽度高度值。

代码段11

代码段12 .separator { background-image: url(images/separator.png); background-repeat: no-repeat; float: left; height: 17px; width: 850px; margin-top: 20px; margin-bottom: 20px; } 代码段12的解释 我们将.separator的background-image设定为separator.png。给定宽度850，然后向左浮动。height值等于separator.png的高度。然后给顶部和底部margin设为20px，让它们彼此之间有一定的间歇。

33 使用矩形选框工具，设定宽度为1px，高度为2px。选定文字之间的分割线部分。

34 和往常一样，存为images目录下的divider.png。选定很小是因为下面将通过CSS将其水平重复。

代码段13

代码段14 #sidebar { float: left; height: 209px; width: 219px; background-image: url(images/contentbox.png); background-repeat: no-repeat; padding-top: 20px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px; } h3 { text-transform: uppercase; color: #ffffff; text-align: center; margin-bottom: 20px; font-size: 12px; } .sidebar-list li { list-style-type: none; margin-top: 10px; padding-bottom: 10px; background-image: url(images/divider.png); background-repeat: repeat-x; background-position: bottom; } 代码段14的解释 我们给#sidebar和contentbox.png一样的宽度高度。然后向左浮动，保证内容居左。同样设定background-image为contentbox.png。

通过text-transform将h3文字大小，通过text-align让文字居中。

最后通过list-style-type取值为none去掉.sidebar-list列表项的默认圆点，然后设定background-image为divider.png，水平重复(repeat-x)。然后给定一些margin和padding值，让他们之间留些空间。

代码段15

代码段16 #content { float: right; width: 550px; text-align: justify; } #content p { margin-bottom: 10px; } 代码段16的解释 为了让#content在右边显示，我们将其向右浮动，然后给定一个固定的宽度。不给定一个固定的高度的原因是我们想通过内部文本来控制高度。然后给加入顶部和底部margin让它们之间留有空间（因为之前我们已经将它们都归零了，这步是必须的）。

代码段17

代码段18 #footer { float: left; width: 850px; background-image: url(images/footer.png); background-repeat: no-repeat; height: 60px; margin-top: 40px; padding-top: 25px; text-align: center; } 代码段18的解释 我们将#footer层的background-image属性设置为footer.png；向左浮动；通过no-repeat保证背景图的不重复。#footer宽度高度大小和footer.png相等。然后在顶部通过margin给出一定空间。

完成！最终效果的链接如下： http://sixrevisions.com/demo/minimal_modern_layout/index.html

最后修改于 2011-11-19