今天小白给大家带来的主题是设计一个简单的网页版「 hello，world 」。 看完这篇，大家应该会对网页设计有个较为整体的把握。

图文 / 丁建雄

小白是单纯为兴趣而写作的独立创作人，如果您喜欢小白的文章，欢迎关注、交流、分享（引用请链接到本文）。

网页设计构成要素主要是两部分：1. 描述性的文本文件；2. 配套的媒体文件。

媒体文件的制作在这里我就不展开了，主要包括图片、视频等预先准备的资料。大家在设计初期可以在网上下载一些图片作为资源文件。

网页设计的大头在文本文件的编写。所谓文本文件的编写，大家可以认为是「 码代码 」。其实代码的本质也是用描述性的语言去控制计算机，只不过网页设计的代码会比较简单。

好，弄清楚大框架之后，下面我们要选择一种开发方式。网页设计发展到现在，已经有很多公司对其进行了优化，使得网页开发越来越方便，大大缩短了网页开发的周期。最初，我们开发网页是使用HTML语言编写HTML框架文件，然后再编写一系列配套的CSS文件，控制HTML文件内容的格式。这样，最简单网页的构成就出来了「 HTML文件+CSS文件 」。

后来，大家发现「 一种优美的格式文件是可以反复使用的 」。也就是说，如果我们预先编写好各种可能需要用到的网页格式排版，就可以利用这一套CCS文件去快速开发出大量的网页。并且，真正进行过原始CCS文件编写的人都知道「 编写CCS是个费时的工作 」需要不断调整细节性问题，以达到预期的效果。

好的，既然一套优美的CCS可以重复使用，那么去哪里找这么一套CCS呢？Twitter的设计师Mark Otto和Jacob Thornton合作开发了一套CCS／HTML框架叫 bootstrap，这个框架其实就是一个包含了几个CCS文件的文件夹。并且，这个框架的好处是将一些网页基础的设置都帮你定好了，你只需要往里面填充内容，然后调用你需要的CCS类就可以了。

这么简单？是的，网页设计就是这么简单，是不是迫不及待想去尝试制作一下自己的第一个网页呢？下面就请跟随我的步伐，一步步建立起你的第一个网页版的 「 hello，world 」吧！

首先，第一步是下载 bootstrap，注意，bootstrap有多个版本

我们选择的下载版本是第一个「 用于生产环境的Bootstrap 」。

下载完成后，我们得到的是一个压缩包「 bootstrap-3.3.0-dist 」，然后我们需要解压缩，目录结构如下（注：此处参考了官方说明文件，但是官方说明文件跟实际有出入，故本文列出的目录结构为笔者根据最新版解压文件的修正版本）

我们看到「 dist 」文件夹里面包含三个文件夹css、js、fonts. 顾名思义，css就是存放的预先编写好的CSS文件，js是Javascript文件，fonts是字体文件。

上文说到，bootstrap的好处就在于预先写好了优美的格式，我们要做的只是编写网页内容HTML文件，然后调用合适的格式类去美化网页就行了。

好的，下面一步是编写我们的第一个HTML文件，文件可以存放在dist文件夹目录下。这边涉及到选用一款记事本工具编写的问题，前一篇文章提到过笔者选用的是 notepad++这款软件。

打开notepad++，「 新建 」一个文件「 new 1 」，最上面菜单栏「 语言 」选择「 HTML 」选项。接着，将下面的代码复制到「 new 1 」中。

粘贴到「 new 1 」中之后，我们点击菜单栏的「 保存 」，保存目录为「 dist 」文件夹下，命名为「 1 」，存储格式选择HTML。

至此，网页版的「 hello，world 」就完成啦！

右键点击文件「 1.HTML 」，选择使用浏览器打开，你应该看到

是不是跟你在本地打开某个文件显示的地址栏一毛一样？没错，浏览器打开IP地址其实跟本地打开文件的机制是一样的，都是通过地址索引链接访问的。

好啦，是不是感觉有点太简单了？还不过瘾？别急，这篇文章只是入门，给大家先建立一个网页设计的概念和框架，下面的文章才是正菜开始哦，敬请期待啦~

参考文献 Bootstrap官方文档