原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step
翻译整理：西米CC
1.6 – IE6中的PNG透明Hack
现在由于我们使用的PNG透明LOGO引发了一个问题，就是我们的老朋友IE6并不支持PNG透明。幸运的是我们可以通过一个简单的Hack来应付这个问题，我们只需要简单的下载一个脚本，当然要放置到站点目录中，然后在CSS中添加如下代码（代码中的URL路径依据你的实际情况设定 —— 译者西米CC注）：
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }
顺便很八卦的把不支持透明的IE6浏览效果示众如下：
1.7 – 美化导航菜单
现在添加一些简单的CSS来为导航整一下容：
ul#menu {
margin:0px; padding:0px;
position:absolute;
rightright:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}
这几行CSS代码没什么好解释的，如果你真的看不懂，建议你到本站的触手生春栏目中恶补一下CSS基础。在这里还是要很不放心的提一下其中的a.active和a:hover，我们为这两个选择符定义了一种比较深的字体颜色，这样如果我们对一个导航项目链接标签应用.active样式的话，该链接的文本颜色就比其它的深一点，就像把鼠标移动到某个菜单链接上一样。这对于WordPress模板而言也是增强用户体验的一种方式，它让浏览者很直观的知道他当前查看的页面正处于哪个栏目之下：
1.8 – 添加” Featured Portfolio”栏目内容
现在我们已经把第一张页面的基本布局结构捣鼓完毕，是时候在上面加一点实质性的内容了。首先是”Featured Project”模块（栏目名称就不翻译了，如果不晓得是哪块，就先到最终结果页面上找找看吧——译者西米CC注），相应的HTML如下：
Eden Website Design
in web design tagged corporate, web2
And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was.
注意代码添加的位置，就是之前步骤中标志了block_featured的地方。在没有设置任何CSS样式之前，浏览效果如下：
两个重要的注意点（又来了…）：
1.在 div class=”block” 容器之后紧跟了一个span class=”block_inside”，这并不是吃饱了没事情干，而是因为我们预期需要一个双线边框：外围是暗灰色1px线条，而里面是1px白色线条。所以这里的两个独立标签便于我们分别进行边框设置，至于为什么使用 span ，我只能说这是经验之谈。
2.这个模块中的” View Project”元素本来应该是按钮，但是这里我们会先使用一张图片，然后再利用.button样式将其设置为一个标准的文本链接，这在易用性和美观性上都有很大的好处。