今天小白給大家?guī)?lái)的主題是設(shè)計(jì)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版「 hello蒙保，world 」。
看完這篇奴曙，大家應(yīng)該會(huì)對(duì)網(wǎng)頁(yè)設(shè)計(jì)有個(gè)較為整體的把握别凹。
圖文 / 丁建雄
小白是單純?yōu)榕d趣而寫(xiě)作的獨(dú)立創(chuàng)作人，如果您喜歡小白的文章洽糟，歡迎關(guān)注炉菲、交流、分享（引用請(qǐng)鏈接到本文）坤溃。
網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)成
網(wǎng)頁(yè)設(shè)計(jì)構(gòu)成要素主要是兩部分：1. 描述性的文本文件拍霜；2. 配套的媒體文件。
媒體文件的制作在這里我就不展開(kāi)了浇雹，主要包括圖片、視頻等預(yù)先準(zhǔn)備的資料屿讽。大家在設(shè)計(jì)初期可以在網(wǎng)上下載一些圖片作為資源文件昭灵。
網(wǎng)頁(yè)設(shè)計(jì)的大頭在文本文件的編寫(xiě)。所謂文本文件的編寫(xiě)伐谈，大家可以認(rèn)為是「 碼代碼 」烂完。其實(shí)代碼的本質(zhì)也是用描述性的語(yǔ)言去控制計(jì)算機(jī)，只不過(guò)網(wǎng)頁(yè)設(shè)計(jì)的代碼會(huì)比較簡(jiǎn)單诵棵。
開(kāi)發(fā)前準(zhǔn)備
好抠蚣，弄清楚大框架之后，下面我們要選擇一種開(kāi)發(fā)方式履澳。網(wǎng)頁(yè)設(shè)計(jì)發(fā)展到現(xiàn)在嘶窄，已經(jīng)有很多公司對(duì)其進(jìn)行了優(yōu)化，使得網(wǎng)頁(yè)開(kāi)發(fā)越來(lái)越方便距贷，大大縮短了網(wǎng)頁(yè)開(kāi)發(fā)的周期柄冲。最初，我們開(kāi)發(fā)網(wǎng)頁(yè)是使用HTML語(yǔ)言編寫(xiě)HTML框架文件忠蝗，然后再編寫(xiě)一系列配套的CSS文件现横，控制HTML文件內(nèi)容的格式。這樣，最簡(jiǎn)單網(wǎng)頁(yè)的構(gòu)成就出來(lái)了「 HTML文件+CSS文件 」戒祠。
后來(lái)骇两，大家發(fā)現(xiàn)「 一種優(yōu)美的格式文件是可以反復(fù)使用的 」。也就是說(shuō)姜盈，如果我們預(yù)先編寫(xiě)好各種可能需要用到的網(wǎng)頁(yè)格式排版低千，就可以利用這一套CCS文件去快速開(kāi)發(fā)出大量的網(wǎng)頁(yè)。并且贩据，真正進(jìn)行過(guò)原始CCS文件編寫(xiě)的人都知道「 編寫(xiě)CCS是個(gè)費(fèi)時(shí)的工作 」需要不斷調(diào)整細(xì)節(jié)性問(wèn)題栋操，以達(dá)到預(yù)期的效果。
好的饱亮，既然一套優(yōu)美的CCS可以重復(fù)使用矾芙，那么去哪里找這么一套CCS呢？Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā)了一套CCS／HTML框架叫 bootstrap近上，這個(gè)框架其實(shí)就是一個(gè)包含了幾個(gè)CCS文件的文件夾剔宪。并且，這個(gè)框架的好處是將一些網(wǎng)頁(yè)基礎(chǔ)的設(shè)置都幫你定好了壹无，你只需要往里面填充內(nèi)容葱绒，然后調(diào)用你需要的CCS類就可以了。
第一個(gè)「 hello斗锭，Word 」網(wǎng)頁(yè)
這么簡(jiǎn)單地淀？是的，網(wǎng)頁(yè)設(shè)計(jì)就是這么簡(jiǎn)單岖是，是不是迫不及待想去嘗試制作一下自己的第一個(gè)網(wǎng)頁(yè)呢帮毁？下面就請(qǐng)跟隨我的步伐，一步步建立起你的第一個(gè)網(wǎng)頁(yè)版的 「 hello豺撑，world 」吧烈疚！
首先，第一步是下載 bootstrap聪轿，注意爷肝，bootstrap有多個(gè)版本
我們選擇的下載版本是第一個(gè)「 用于生產(chǎn)環(huán)境的Bootstrap 」。
下載完成后陆错，我們得到的是一個(gè)壓縮包「 bootstrap-3.3.0-dist 」灯抛，然后我們需要解壓縮，目錄結(jié)構(gòu)如下（注：此處參考了官方說(shuō)明文件音瓷，但是官方說(shuō)明文件跟實(shí)際有出入牧愁，故本文列出的目錄結(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 」文件夾里面包含三個(gè)文件夾css、js外莲、fonts. 顧名思義猪半，css就是存放的預(yù)先編寫(xiě)好的CSS文件兔朦，js是Javascript文件，fonts是字體文件磨确。
上文說(shuō)到沽甥，bootstrap的好處就在于預(yù)先寫(xiě)好了優(yōu)美的格式，我們要做的只是編寫(xiě)網(wǎng)頁(yè)內(nèi)容HTML文件乏奥，然后調(diào)用合適的格式類去美化網(wǎng)頁(yè)就行了摆舟。
好的，下面一步是編寫(xiě)我們的第一個(gè)HTML文件邓了，文件可以存放在dist文件夾目錄下恨诱。這邊涉及到選用一款記事本工具編寫(xiě)的問(wèn)題，前一篇文章提到過(guò)筆者選用的是 notepad++這款軟件骗炉。
打開(kāi)notepad++照宝，「 新建 」一個(gè)文件「 new 1 」，最上面菜單欄「 語(yǔ)言 」選擇「 HTML 」選項(xiàng)句葵。接著厕鹃，將下面的代碼復(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 」中之后，我們點(diǎn)擊菜單欄的「 保存 」轻专，保存目錄為「 dist 」文件夾下忆矛，命名為「 1 」，存儲(chǔ)格式選擇HTML请垛。
至此催训，網(wǎng)頁(yè)版的「 hello，world 」就完成啦叼屠！
右鍵點(diǎn)擊文件「 1.HTML 」瞳腌，選擇使用瀏覽器打開(kāi)绞铃，你應(yīng)該看到
這個(gè)是本地預(yù)覽的效果儿捧，大家可以看到瀏覽器地址欄
file:///C:/Users/Jason%20Ding/Desktop/bootstrap-3.3.0-dist/dist/1.html
是不是跟你在本地打開(kāi)某個(gè)文件顯示的地址欄一毛一樣荚坞？沒(méi)錯(cuò)，瀏覽器打開(kāi)IP地址其實(shí)跟本地打開(kāi)文件的機(jī)制是一樣的菲盾，都是通過(guò)地址索引鏈接訪問(wèn)的颓影。
好啦，是不是感覺(jué)有點(diǎn)太簡(jiǎn)單了懒鉴？還不過(guò)癮诡挂？別急碎浇，這篇文章只是入門(mén)，給大家先建立一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的概念和框架璃俗，下面的文章才是正菜開(kāi)始哦奴璃，敬請(qǐng)期待啦~
參考文獻(xiàn)
Bootstrap官方文檔
