如何创建的WordPress主题从无到有-白手起家(1)中，主要谈到了关于PS设计模板结构，而今天将给大家讲到的是关于wordpress模板结构的CSS样式表的分步建立，以及HTML代码的编写，这里先和大家说一下，本主题制作先是以HTML代码编写，之后运用wordpress程序提供的内容调用代码替换即可，由于今天讲到的都是关于代码的，因此大家肯定要用一定的代码基础哦，如果大家只是想仿照的话，只需稍微学习一下代码也可以了，其他也不说了，我们接着看文章的第二部分把。
接着如何创建的WordPress主题从无到有-白手起家(1)，进行第二部分内容
切片处理
之前，我们已经切片了，大家可以在上次的教程里找到切片过的文件，。选择一个切片工具，只需按下就’ k ‘ 。 既可以进行切片了，这里就不做详细说明了，关于切片的使用，主要是根据颜色来切分的，相关教程网络上很多，大家可以去找找，也可以参考上次的文件。
我们需要非常小心，以切出边界两种不同的颜色。
切割时的操作建议：
为了准确切取，建议很多时候需要放大图片来切取。
切片制作好，保存为WEB文档后，下面就时开始关于代码的编写了。
CSS / HTML代码编写
我们需要先弄清楚的主体部分的布局。之后对部分加以考虑和修补：
主体结构编写（整个布局，除页脚）
头部编写
内容主体编写
主体左侧部分代码编写（评论，内容区）
主体右侧部分代码编写（（工具栏，RSS ，关于我和搜索栏）
页脚编写（页脚）
代码编写准备
我使用的Dreamweaver作为编辑器，我们的开始。创建一个stlye.css文件和一个index.html的。
Step 1 - 设置主体结构
先编写出主体的结构框架：
<!–wrapper–>
<div id=”wrapper”>
<!–content–>
<div id=”content”>
<!–left-col–><div id=”left-col”></div><!–left-col-end–>
<!–right-col–><div id=”right-col”></div><!–right-col-end–>
</div><!–content-end–>
</div><!–wrapper-end–>
<!–footer–><div id=”footer”></div><!–footer-end–>
Step 2 - 对主体结构进行修补和填充
之前时先构建主体结构，确定后开始对主体的结构进行添加细节了：（大家对代码不熟悉的人可以看看代码，试着分析一下，其实很简单的）
<!–wrapper–>
<div id=”wrapper”>
<!–header–>
<div id=”header”>
<!–logo–>
<div id=”logo”><!–logo-end–>
<!–page-navigation–>
<div id=”menu”>
<ul>
<li class=”page_item”><a href=”#”>Gallery</a></li>
<li class=”page_item”><a href=”#”>Contact</a></li>
<li class=”page_item”><a href=”#”>About</a></li><!–we need to float this to the right, so, we need to make it in reverse way–>
</ul>
</div><!–page-navigation–>
</div><!–header-end–>
<!–content–>
<div id=”content”>
<!–left-col–>
<div id=”left-col”><!–featured-post–><div id=”featured-post”>
<!–featured post will goes here–></div><!–featured-post-end–>
<!–post–><div class=”post”><!–blog posts will go here–></div><!–post-end–>
</div><!–left-col-end–>
<!–right-col–>
<div id=”right-col”>
<!–rss subscriber–> <div id=”feed”></div><!–rss subscriber-end–>
<!–search–><div id=”searchform”></div><!–search-end–>
<!–about–><div id=”about”></div><!–about-end–>
<!–sidebar–>
<div id=”sidebar”>
<!–sidebar1–><div id=”sidebar1″></div><!–sidebar1-end–>
<!–sidebar2–><div id=”sidebar2″></div><!–sidebar2-end–>
</div><!–sidebar-end–>
</div><!–right-col-end–>
</div><!–content-end–>
</div><!–wrapper-end–>
<!–footer–><div id=”footer”></div><!–footer-end–>
