今天小白給大家?guī)淼闹黝}是設(shè)計一個簡單的網(wǎng)頁版「 hello，world 」。
看完這篇，大家應(yīng)該會對網(wǎng)頁設(shè)計有個較為整體的把握。
圖文 / 丁建雄
小白是單純?yōu)榕d趣而寫作的獨立創(chuàng)作人，如果您喜歡小白的文章，歡迎關(guān)注、交流、分享（引用請鏈接到本文）。
網(wǎng)頁設(shè)計的構(gòu)成
網(wǎng)頁設(shè)計構(gòu)成要素主要是兩部分：1. 描述性的文本文件；2. 配套的媒體文件。
媒體文件的制作在這里我就不展開了，主要包括圖片、視頻等預(yù)先準(zhǔn)備的資料。大家在設(shè)計初期可以在網(wǎng)上下載一些圖片作為資源文件。
網(wǎng)頁設(shè)計的大頭在文本文件的編寫。所謂文本文件的編寫，大家可以認為是「 碼代碼 」。其實代碼的本質(zhì)也是用描述性的語言去控制計算機，只不過網(wǎng)頁設(shè)計的代碼會比較簡單。
開發(fā)前準(zhǔn)備
好，弄清楚大框架之后，下面我們要選擇一種開發(fā)方式。網(wǎng)頁設(shè)計發(fā)展到現(xiàn)在，已經(jīng)有很多公司對其進行了優(yōu)化，使得網(wǎng)頁開發(fā)越來越方便，大大縮短了網(wǎng)頁開發(fā)的周期。最初，我們開發(fā)網(wǎng)頁是使用HTML語言編寫HTML框架文件，然后再編寫一系列配套的CSS文件，控制HTML文件內(nèi)容的格式。這樣，最簡單網(wǎng)頁的構(gòu)成就出來了「 HTML文件+CSS文件 」。
后來，大家發(fā)現(xiàn)「 一種優(yōu)美的格式文件是可以反復(fù)使用的 」。也就是說，如果我們預(yù)先編寫好各種可能需要用到的網(wǎng)頁格式排版，就可以利用這一套CCS文件去快速開發(fā)出大量的網(wǎng)頁。并且，真正進行過原始CCS文件編寫的人都知道「 編寫CCS是個費時的工作 」需要不斷調(diào)整細節(jié)性問題，以達到預(yù)期的效果。
好的，既然一套優(yōu)美的CCS可以重復(fù)使用，那么去哪里找這么一套CCS呢？Twitter的設(shè)計師Mark Otto和Jacob Thornton合作開發(fā)了一套CCS／HTML框架叫 bootstrap，這個框架其實就是一個包含了幾個CCS文件的文件夾。并且，這個框架的好處是將一些網(wǎng)頁基礎(chǔ)的設(shè)置都幫你定好了，你只需要往里面填充內(nèi)容，然后調(diào)用你需要的CCS類就可以了。
第一個「 hello，Word 」網(wǎng)頁
這么簡單？是的，網(wǎng)頁設(shè)計就是這么簡單，是不是迫不及待想去嘗試制作一下自己的第一個網(wǎng)頁呢？下面就請跟隨我的步伐，一步步建立起你的第一個網(wǎng)頁版的 「 hello，world 」吧！
首先，第一步是下載 bootstrap，注意，bootstrap有多個版本
我們選擇的下載版本是第一個「 用于生產(chǎn)環(huán)境的Bootstrap 」。
下載完成后，我們得到的是一個壓縮包「 bootstrap-3.3.0-dist 」，然后我們需要解壓縮，目錄結(jié)構(gòu)如下（注：此處參考了官方說明文件，但是官方說明文件跟實際有出入，故本文列出的目錄結(jié)構(gòu)為筆者根據(jù)最新版解壓文件的修正版本）
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就是存放的預(yù)先編寫好的CSS文件，js是Javascript文件，fonts是字體文件。
上文說到，bootstrap的好處就在于預(yù)先寫好了優(yōu)美的格式，我們要做的只是編寫網(wǎng)頁內(nèi)容HTML文件，然后調(diào)用合適的格式類去美化網(wǎng)頁就行了。
好的，下面一步是編寫我們的第一個HTML文件，文件可以存放在dist文件夾目錄下。這邊涉及到選用一款記事本工具編寫的問題，前一篇文章提到過筆者選用的是 notepad++這款軟件。
打開notepad++，「 新建 」一個文件「 new 1 」，最上面菜單欄「 語言 」選擇「 HTML 」選項。接著，將下面的代碼復(fù)制到「 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。
至此，網(wǎng)頁版的「 hello，world 」就完成啦！
右鍵點擊文件「 1.HTML 」，選擇使用瀏覽器打開，你應(yīng)該看到
這個是本地預(yù)覽的效果，大家可以看到瀏覽器地址欄
file:///C:/Users/Jason%20Ding/Desktop/bootstrap-3.3.0-dist/dist/1.html
是不是跟你在本地打開某個文件顯示的地址欄一毛一樣？沒錯，瀏覽器打開IP地址其實跟本地打開文件的機制是一樣的，都是通過地址索引鏈接訪問的。
好啦，是不是感覺有點太簡單了？還不過癮？別急，這篇文章只是入門，給大家先建立一個網(wǎng)頁設(shè)計的概念和框架，下面的文章才是正菜開始哦，敬請期待啦~
參考文獻
Bootstrap官方文檔
