现在你看到的就是我们要做网页的设计图，在这套课程里我们一起使用 HTML5 配合 Bootstrap 架构做出这张网页，我们会在 WordPress 主题课程里，把这个设计变成真正的网站。

推荐大家先看一下宁皓网的 CSS 基础教程，还有 Bootstrap 架构的教程。

文本编辑软件

想要创建网页我们首先要选择一款文本编辑软件，Windows 用户可以使用 Adobe Dreamweaver、 notepad ++　，　Mac 用户可以使用 Textmate，espresso ... 这个课程我们会用 espresso 做演示。网页设计并没有特别要求用哪款软件，选择一个自己用着顺手的就可以了。

准备目录

下面我们去给要设计的网页准备一些资源，先创建一个目录 ... 重命名为 fenikso ，我们可以把网页和网页需要的相关资源都放在这个目录里面 ...

打开这些目录，在它的里面，创建一个叫 images 的目录... 我们可以把网页上要用到的一些图片放在这个目录里面 ... 比如网页的标志 ，背景图片，小图标等等 ...

再创建一个 js 目录 ... 在这里可以放一些网页上要用到的脚本文件 ...

打开课程资料包的 00-01 ...

这里有个 content 目录， 里面放的是一些图片... 在后面的视频里需要用到 ...

另外还有一个 jquery-1.8.3.min.js ... Bootstrap 架构的 jQuery 插件需要它才能工作 ...

先选中它们 ... 然后把它们放在网页项目的目录里 ...

把 jquery 这个脚本文件放在 js 这个目录里面 ...

espresso

下面打开我们在创建网页时要用到的文本编辑器 ... 这里我用的是 espresso .... 点击 新建项目 ... 找到网页项目所在的目录 ..

点击 选择 ...

这样我们可以直接在这个软件上管理网页项目里的所有文件 ... 很多其它的文本编辑软件都有类似的功能 ... 比如你用 Dreamweaver 的话，可以新建一个站点 ...

在下面视频里，我们去定制一下 Bootstrap 架构 ...