将PSD网站模板转换为XHTML+CSS

悬停指示器切片
18 在给导航加入CSS样式之前，我们得首先把小小的悬停三角形切片。到Photoshop中使用矩形选框工具（M）选定这个三角形，复制透明背景的新文档，保存为images目录下的
nav_hover.png。
导航样式化
19 现在该是给导航加入CSS代码的时候了。使用以下代码。代码段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属性。创建欢迎区域
欢迎区域会被分割成两个部分，左边(#welcome-text)和右边(#welcome-image)。

20 在index.html的#welcome div中加入两个新的div，一个ID为welcome-text，一个ID为welcome-image。我们会在切片完成后将两个div填充上内容。欢迎图片的切片
21 转到PSD文件，关闭除了有渐变效果深蓝背景的其他所有图层（点击图层左边的眼睛图标）。
22 使用矩形选框工具（M）选定一个宽度不超过850px的矩形，可以通过第一部分的设定好的参考线来选定。

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


新区域的HTML类似如下。代码段8
<!--WELCOME AREA STARTS--> <div id="welcome"> <!--WELCOME TEXT STARTS--> <div id="welcome-text"> </div> <!--WELCOME TEXT ENDS--> <!--WELCOME IMAGE STARTS--> <div id="welcome-image"> <img src="images/welcome_image.png" alt="Welcome..." /> </div> <!--WELCOME IMAGE ENDS--> </div> <!--WELCOME AREA ENDS-->

24 在#welcome-text div中文名增加一些欢迎文字。使用<h2>标签给欢迎文字增加标题，然后在以下添加无序列表。
25 在#welcome-image中添加欢迎图片（本案例添加的是Six Revisions的网站裁图）。
合起来，HTML代码如下。代码段9
<!--WELCOME AREA STARTS--> <div id="welcome"> <!--WELCOME TEXT STARTS--> <div id="welcome-text"> <h2>welcome to <span>yourwebsite!</span></h2> <p>Lorem ipsum dolor sit amet, consectetur[...]</p> <p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p> <ul> <li>Lorem ipsum dolor sit amet...</li> <li>Lorem ipsum dolor sit amet...</li> <li>Lorem ipsum dolor sit amet...</li> <li>Lorem ipsum dolor sit amet...</li> </ul> </div> <!--WELCOME TEXT ENDS--> <!--WELCOME IMAGE STARTS--> <div id="welcome-image"> <img src="images/welcome_image.png" alt="Welcome..." /> </div> <!--WELCOME IMAGE ENDS--> </div> <!--WELCOME AREA ENDS-->

样式化欢迎区域
26 现在样式化欢迎区域。复制以下代码到CSS中，后面有对代码的解释。代码段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属性让<h2>内的文字大写。将‘yourwebsite’包裹在class为heading-color2的span中，赋予其不同的颜色。
无序列表加入类list，然后把背景设置为bullet.png，通过list-style-type设为none去掉默认列表项前面的圆点。
最后，为了让#welcome-image在#welcome-text的右边显示，我们将其向右浮动，给定固定的宽度（在浮动元素中常用）。同样给welcome_image.png一个固定的宽度高度值。 3D分割线切片
27 对于3D分割线，我打算通过加入类为separator的div，可以实现复用。使用矩形选框工具（M）选定区域宽度不能大于850px，高度不能超出3D分割线本身的大小。

28 用之前的方法将选区存为images目录下的separator.png。 3D分割线转换成代码
29 对于分割线的HTML和CSS相当简单。在index.html中#welcome下面插入div。将&nbsp;放入.separator的div中。代码段11
<!--WELCOME AREA ENDS--> <!--SEPARATOR STARTS--> <div>&nbsp;</div> <!--SEPARATOR ENDS-->

30 CSS文件中加入如下代码。代码段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，让它们彼此之间有一定的间歇。侧边栏切片
31 对于侧边栏，我们仅需要侧边栏框。这个教程中侧边栏框大小是固定的，但是如果需要可以很容易的扩展（这部分叫给大家自己完成）。使用矩形选框工具（M）选定这个侧边栏框；我的
选定范围是259 x 259px.

32 存为images目录下的contentbox.png。

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

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

最新评论