怎样做博客主题

来源：互联网发布：it测试工程师培训编辑：程序博客网时间：2024/04/26 08:12

How to Simply Make a Blog Theme

有人问我我做一个皮肤一般都需要哪几个步骤，没有专业系统的学网页设计，可能并不是专业的，依据个人习惯可能多少有些差异，就拿 CF0V11 主题在这里简述一下：

界面构思
绘制草图
制作 .psd 文件
通过 .psd 输出静态页面
将静态页面代码应用到 .php 模板
Debug
发布

界面构思

构思这步很简单，可能一个简单的想法就会产生一连串联想，抓住它，尽快进入下一步：

绘制草图

草图可简可详，简单的可以只画出一个主框架，简单描述细节；详细的可以画出子页面的不同样式，比如 blog 中的单独文章页面下评论部分，Archive 下的归档列表部分等等，最主要能大致表达所想即可，甚至只有自己能明白也行：
Blog Theme Sketch for CF0V11

制作 .psd 文件

.psd 文件的制作要尽可能的详细，它基本是我做完后的最终效果，做的时候要注意分层，和写 html 一样。分好 header？content 和 footer，这样通过 .psd 输出静态页面会容易许多：
Blog Theme .psd File for CF0V11

一个 blog 皮肤肯定会有不同样式的特殊页面/元素，比如 Logo、按钮、归档页面、单独文章页面，其中的元素（评论部分，回复表格，归档列表等等）都最好在不同的 .psd 中表现出来：
Blog Theme .psd Files for CF0V11

通过 .psd 输出静态页面

以上的三步，最好在一天内连续的完成，以免灵感消失

有了完整的 .psd 文件后，就可以整体的制出静态页面，可以先用自己习惯的、支持 html 语法高亮的编辑器，写出大致的页面结构，并按需要写出对应的标签 id 或 class：

<html>
<head>
<title>Sparanoid</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body> <div id="header"> <h1><a href="#">Sparanoid</a></h1> <div id="nav"> <ul> <li class="page_item"><a href="#">About</a></li> <li class="page_item"><a href="#">Archive</a></li> <li class="page_item"><a href="#">Donate</a></li> </ul> </div> </div>

<div class="post"> <div class="title"> <h2><a href="#">Sparanoid's Test post "test"</a></h2> <p></p> </div> <div class="content"> <p>texts</p> <p></p> </div> </div>

<div id="recent"> <div id="more"></div> <ul> <li><a href="#">Post</a></li> <li><a href="#">Post</a></li> <li><a href="#">Post</a></li> <li><a href="#">Post</a></li> <li><a href="#">Post</a></li> </ul> </div>

<div id="info"> </div>

<div id="footer"> </div> </body>

</html>

然后，可以参考现有的 blog 皮肤，填充上适当文字内容，让它更像是一个真正的 blog。之后，就可以参考 .psd 文件，根据 id 和 class 来写 CSS，先写纯 CSS，不将图片元素引入，然后再从 .psd 中导出图片元素，将其引入，并制作出含有特殊元素的页面。并慢慢的完善代码，引入辅助内容，比如 meta、CSS 的调用、链接提示 (title, alt) 等等

将静态页面代码应用到 .php 模板

完成了以上几步，也差不多完成 60% 了，现在从静态页面代码应用到 .php 模板，也很简单，但，如果静态页面制作的详细的话，这一步会十分顺利的完成。不过制作 php 时除了涉及“样式”，还要考虑“功能”，这时 WordPress 的 Template_Tags 就很有用处了，手头最好再备一个 PHP 文档以供参考

Debug

在本机的服务器上进行测试和除错，包括代码除错和界面应用上的除错，代码除错包括 html、css 标准、php 代码正确性，并用多浏览器浏览测试浏览器的兼容性；至于界面应用上的除错，我会先做一个混排文章，包含各种会出现的格式，比如超长的连续字母、超出层宽度的图片等等。评论部分也是一样，甚至可以把测试的文章代码整个放到评论里看效果

发布

取个好名字，选个协议，发布就行了