開發(fā)前的準備工作

Size：
在我們動手開發(fā)HTML5之前，要先做一些準備工作，
其中包括制定開發(fā)目標和準備開發(fā)環(huán)境等。
作為本書開篇的第一個HTML5案例，
它的開發(fā)目標也自然成為了我們的首個學習目標。

1.1.1 制定首個學習目標

Size:
首先看看這封致讀者的學習邀請函。它是一個經(jīng)精心設計的HTML5頁面，
在瀏覽器中將其打開后，可以發(fā)現(xiàn)頁面中一共包含四項元素，
分別是大寫的英文標題“Let's Learn HTML5”，
標題和按鈕之間的詳細說明文字，“邀您參加”的圓角按鈕，
以及整個頁面的背景圖像，如圖1.1所示。
圖1.1略
邀請函頁面有一項小小的交互功能。當瀏覽者單擊“邀您參加”按鈕后，
按鈕將變?yōu)榫G色背景，顯示的文字也將變?yōu)椤皥竺晒Α保鐖D1.2所示。
圖1.2略
這一頁面看上去雖然簡單，但對于初學者而言，則需要考慮一些最基本的問題，
包括：頁面是用什么工具做的？需要了解并使用帶哪些HTML5代碼？
如何測試頁面效果？等等。當然，除去這幾點外，對于初學者最基本的一個問題則是：
一個HTML5頁面的完整實現(xiàn)步驟是怎樣的？
獲得以上問題的答案就是本書給讀者設置的首個學習目標。
在隨后的章節(jié)中，我們將對這些問題逐一解答。

·經(jīng)驗·
要將這一HTML5頁面制作得較為精良，還需考慮美術(shù)設計和代碼實現(xiàn)層面的問題，例如：
·為了注重整封邀請函的美感，這里采用了一種流行的背景設計技法。
大幅面的藍天和霞光的背景有助于最大程度吸引瀏覽者的注意力，
迅速產(chǎn)生沉浸式的體驗，同時能夠使得中心區(qū)域的文字內(nèi)容被強烈凸顯出來。
那么，設計者該如何來實現(xiàn)這一效果呢，實現(xiàn)過程中有哪些注意事項？
·整個頁面的內(nèi)容部分及標題、說明文字和一個按鈕，它們位于頁面的中央，
視角最焦點的區(qū)域。設計者需要如何對三個元素作排版上的細微設置，
使得關(guān)鍵的文字布局能夠顯得錯落有致，元素之間的間距也具有呼吸感？

1.1.2 準備開發(fā)環(huán)境

Size:
對于初學者而言，最佳的HTML5開發(fā)工具：Adobe公司的Dreamweaver軟件。
Dreamweaver的優(yōu)點在于簡便、直觀、功能豐富，能夠有效降低學習負荷。
略...
當初學者經(jīng)過一段時間的開發(fā)，對CSS、HTML標簽等較為熟悉之后，則可能會更偏向選擇手寫代碼，可以選擇 Notepad++ 這樣的純代碼開發(fā)工具，Notepad++最大的優(yōu)點在于它是完全免費的，軟件體積小，響應速度快。

Notepad++官網(wǎng)下載地址：https://notepad-plus.org

Size:
除Notepad++外，Sublime Text也是廣受好評的一款純代碼編輯器。在Sublime Text中有一些強大、實用的插件，如：Emmet、JsFormat、CSScomb等，功能非常豐富，有助于提高開發(fā)效率。（界面簡潔）

除以上介紹的三種開發(fā)工具外，HTML5的開發(fā)工具還有很多，本人多使用Sublime 跟 HBiu 。

·經(jīng)驗·
根據(jù)百度流量研究院（http://#baidu.com)提供的數(shù)據(jù)，2015年上半年的瀏覽器市場份額中，Chrome占比33.39%，排名第1。
排名第2至第4的分別是：IE8（24.85%）、IE9、IE6，可見舊版本IE的影響力仍然很強大。
在開發(fā)一些重要的、涉及面廣的宣傳、服務類站點時，開發(fā)者仍需要考慮舊版本IE的顯示效果。

總結(jié)：下載一個開發(fā)工具方便自己使用與編寫代碼。