网页设计 | 小白建站笔记之 Hello，World（1/10）

今天小白给大家带来的主题是设计一个简单的网页版「 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，Word 」网页

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

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

bootstrap下载页面

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

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

bootstrap-3.3.0-dist/dist/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css.map
│   └── bootstrap-theme.css.map
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   └── npm.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

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

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

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

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

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>你好，世界！</h1>

    <!--put your contents here-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

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

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

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

这个就是网页版的hello，world啦！

这个是本地预览的效果，大家可以看到浏览器地址栏
file:///C:/Users/Jason%20Ding/Desktop/bootstrap-3.3.0-dist/dist/1.html

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

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

参考文献
Bootstrap官方文档

网页设计 | 小白建站笔记之 Hello，World（1/10）