Photoshop教程：把PSD模板切为XHTML+CSS

核心提示：我们将内容和背景放到一个含有ID的div的容器里面，不过要记得我们有一个浅色的背景在最后面需要垂直重复的说，Photoshop教程：把PSD模板切为XHTML+CSS(2)，直到CSS3才更广泛的支持第二个div在这个图像之上，网站名字用H1的标签来控制，当然想要更多的东西必须在加入更多的代码，比如内页区域和评论区域等

我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说，直到CSS3才更广泛的支持第二个div在这个图像之上。

网站名字用H1的标签来控制，他也是logo的基础，上部导航和rss /电子邮件订阅选项是作为无序列表。

接下来开始用CSS重新构建页面，清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器，内容和页脚的div也要使用适当的背景图片和风格设置。

继续写CSS样式表，接下来的一些元素用代码写出来慢慢加上，建立一个无序列表然后加上合适的图片和颜色。

到目前来讲就可以在浏览器里面看看啦～基本上的大型已经出来啦～logo啊导航啊内容区啊基本上已经颇具雏形鸟。

接下来是在这个框架上渐渐丰满起来，用一个容器来搞定文章发布区，就像我们前面说的一样，这个地方我们不用图片只需要用代码就能搞定。

文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好(实在不行就照抄吧，囧rz)。对于网站开发来讲，大部分用 Firefox的朋友有福了，这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。(不过貌似我记得IE下面也可以用css写出来圆角的说，就是比较麻烦，这里给一个参考来)

然后在浏览器里面测试下啦～如果没写错的话那么就跟设计稿上的效果是一样的～这说明CSS彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。

然后继续完善html的结构，现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随内容来控制。

继续添加更多的CSS样式来控制html里面的元素(可怜的html沦落为css的傀儡…………我翻译累了纯属发泄这个……)比如字体的大小，颜色，种类等等(其实CSS也就这么些个本事了……)

接下来就可以在浏览器里面看到侧边栏鸟～注意别让内容超过了图片的宽度，及时的截断下看看效果就好啦(毕竟只是html的～)

记下来我们快速的搞定继续阅读和评论等这个位置的东东

继续给这些元素添加样式，用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图

搞定后又可以用浏览器YY下，重复的背景上面是坚实的文本啊!

大体效果就这么搞定了，设计稿的内容基本上也都呈现出来了，这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点击过啊等等效果。

其实网页设计这玩意搞起来了就停不下来了。你必须在FF，Opera，safari下面看看有没有问题，你看这不在IE下面就出问题了么?(好讨厌IE6……如果机器装了更高版本的ie的话，你可以试试ietester)

修改一些CSS样式表很快就能搞定这个问题，具体的参见上图。

订阅的选项似乎总是在IE下面会有问题，这个只需要简单地加上 display: inline在列表中就能解决。

改完这些问题后这个正在做的网站就恢复正常勒，像一个WordPRess主题鸟，当然想要更多的东西必须在加入更多的代码，比如内页区域和评论区域等～

当然如果每行代码都详细地解释得话，我估计我没写完各位看官就已经困倒了，所以发挥举一反三地精神就看上面得源文件吧!