今天小白给大家带来的主题是设计一个简单的网页版「 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官方文档
网友评论