专注优质Wordpress企业网站搭建与优化

柳暗花明：PSD to CSS —— CSS布局实战新概念系列教程【Part-4】



PSD to CSS —— CSS布局实战新概念系列教程 - 西米CC

原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step

翻译整理：西米CC

1.5 – 添加透明LOGO

接下来我们要在页面中添加LOGO元素，因为稍后我们要在不同的配色方案中调试页面，所以这里的LOGO我们用了一张背景透明的PNG图片。制作透明背景我们可以在PhotoShop中关闭背景图层，然后执行”文件-另存为WEB所用格式”命令，在图像类型中选择PNG24保存图像即可。需要注意的是PNG24格式的图片往往体积较大，但对于LOGO等小尺寸图片而言还是可以接受的。

PS：如果有人知道有效的压缩PNG图片体积的方法，希望能在此留言不吝指教。我很确定肯定有这么一种方法，只是我不知道罢了。

下面就是我们要使用的PNG格式LOGO图片：

PSD to CSS —— CSS布局实战新概念系列教程

现在我们就在HTML中把这个LOGO加进去，顺便也添加了UL导航菜单（比较之前的HTML模板结构，代码中主要变动的红色部分 —— 译者西米CC注）：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Creatif</title>
  6. <link href="step_2.css" rel="stylesheet" type="text/css" />
  7. <link rel="shortcut icon" href="images/favicon.ico" />
  8. </head>
  9. <body>
  10. <div id="main">
  11. <div class="container">
  12. <div id="header">
  13. [color=Maroon]                <ul id="menu">
  14. <li><a href="">Portfolio</a></li>
  15. <li><a href="">Services</a></li>
  16. <li><a href="">About</a></li>
  17. <li><a href="">Testimonials</a></li>
  18. <li><a href="">Request a Quote</a></li>
  19. </ul>
  20. <div id="logo">
  21. <h1>Creatif</h1>
  22. <small>A Family of Rockstar Wordpress Themes</small>
  23. </div>  </font>
  24. </div>
  25. <div id="block_feature">
  26. Featured Content
  27. </div>
  28. <div id="block_content">
  29. Content
  30. </div>
  31. </div>
  32. </div>
  33. <div id="footer">
  34. <div class="container">
  35. Footer Stuff Goes in Here
  36. </div>
  37. </div>
  38. </body>
  39. </html>

接着设置相应的CSS：

  1. #header {
  2. padding-top:20px;
  3. }
  4. #logo h1, #logo small {
  5. margin:0px;
  6. display:block;
  7. text-indent:-9999px;
  8. }
  9. #logo {
  10. background-image:url(images/logo.png);
  11. background-repeat:no-repeat;
  12. width:194px;
  13. height:83px;
  14. }
  15. ul#menu {
  16. margin:0px; padding:0px;
  17. position:absolute;
  18. rightright:0px;
  19. }
  20. ul#menu li {
  21. display:inline;
  22. }

又是几个注意点:

1.我们并不是直接把LOGO图片直接插入到页面中，而是先添加一个div id=”logo”容器，然后又在里面定义一个H1标签，最后通过图像替换文件技术隐藏H1中的文本替代以LOGO图片。这么做对页面的SEO有一定的好处，具体可以查阅七则有利于SEO的CSS技巧。

2.我曾经习惯使用display:hidden来隐藏文本，但是一个好心人留言说这不是一个很好的方案，用text-indent会更好一点。我同意并听从了他的意见，可见我是一个虚心接受建议的人 :-)

3.我用无序列表标签UL仓促的添加了一个未经修饰的导航菜单，通过display:inline让UL中的列表项LI显示在同一行…很简单的一个CSS技术，这里纯粹是给初学者提个醒。

4.因为我们给div class=”container”设置了相对定位，所以对它里面的元素我们可以使用绝对定位方式进行布局，比如导航菜单UL就是用了right:0px来实现右对齐。这么做对Wordpress的模板设计是相当有好处的，因为随着Blog里栏目的增加导航菜单会不断扩展，而这里的绝对定位能让它始终保持右对齐。

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags:

Subscribe to Comments

Add a Comment