html主题生成,【基础篇】3、设计制作你的 HTML 主题文件

这已经好多天没有写文章了，最近我的 wlan 账号出了一点问题，所以这些天我没怎么上网。今天宿舍网线终于扯上了，又有网可以上了。

新学期的食堂饭菜又贵了，一般贵个五毛或者一块，没有涨价的，质量下降了。今天中午吃的面，4 块的，量只有去年 3 块 5 的，加的料子根本没有多少，去年直接加 1/4 多。坑爹啊，再也不在那吃了。没钱吃饭了，吃饭就吃穷了。无语。好了，牢骚发完了，看文章

================================================

制作主题之前，你必须使用 HTML 和 CSS 来制作出一个模板，确定博客主题的整体风格。这样，需要你有一定的 HTML 和 CSS 基础。

在这里，为了教程演示，潜行者 m 制作了一个比较简单的小模板，结构简单、CSS 样式也不多，方便新手学习，下面简单说一下模板的结构以及重要的 CSS 样式，仅供新手学习。如果你有一定的 HTML 和 CSS 基础，可以略过这一部分。如何制作模板网页，如果新手的话，可以稍微看一下我的这篇文章 网页设计的一般步骤

模板文件结构

新建一个文件夹，命名为 “myTheme” 。在里面要添加至少两个文件，一个是 index.html 另一个是 style.css 。此外，为了之后的制作，我们还应当添加两个文件夹，分别是 /images 和 /js ，分别用来存放主题需要的图片和 Javascript 文件。

模板文件内容

我做了一个比较简单的模板，具体演示效果如下图

现在还没有添加任何的数据，只是一个大体的框架，在下面我将会添加数据，然后整体效果就会出来了。

这个文件在文章后面可以下载到。

为模板添加模拟数据

从上图大家就可以看到各个部分的功能等。下面，我要在模板中添加模拟数据，之后使用 CSS 对其进行外观定义。之后，我们就可以对照数据，添加 WordPress 相应的调用数据的函数，完成主体制作。

添加模拟数据，并且定义了外观 CSS 之后的模板文件如下图

在下图中，我对添加的数据作了一个说明

这样，我们的模板文件就算是做好了，对应数据以及相应的 CSS 都已经编写好了。你现在已经看到了一个简单的博客页面。根据前面说的 WordPress 的大体制作步骤，我们现在只需要使用相应的函数调用相应的数据就可以了。

其他问题

我是新手，不会做这种模板怎么办？

1. 制作主题等，需要一定的 Html 和 CSS 基础，如果你没有基础，请寻找相应资料，先学习一下 Html 和 CSS ，否则后面的学习会比较吃力。

2. 你也可以在网上下载 Html 模板或者下载我做好的教程模板，先不管如何去设计制作模板，先使用现有资源进一步学习。

本节课相关资源下载

myTheme 模板文件下载地址 : >>点击这里

之前的系列文章