- HTML5+ CSS3+JavaScript 網頁設計實戰（視頻教學版）
- 常新峰
- 3095字
- 2019-12-12 17:09:04
1.7 如何創建一個HTML 5網頁
本節開始一個實際案例，編寫一個簡單的HTML 5移動頁面，讓讀者對移動網頁技術有一個初步的了解。同時，通過這個案例讓讀者了解幾款比較流行的HTML網頁開發工具使用方法，以及調試方法。
1.7.1 HTML 5代碼的編寫
下面編寫一個簡單的HTML 5代碼，讓讀者直觀地體會HTML 5移動應用的魅力（詳見源代碼ch01/ch01-html-5.html文件）。
【代碼1-4】
【代碼解析】
第01～18行代碼使用<html>標簽定義了一個HTML 5頁面文檔。
第02行代碼定義了一個HTML 5的<canvas>標簽，即一個矢量畫布標簽，可以支持設計人員的自定義圖形。
第03～17行為腳本代碼，通過JavaScript腳本語言實現在<canvas>標簽上的圖形操作，具體方法的含義讀者可以參考后面關于HTML 5的內容，本章中就不做深入介紹了。
同時，第04、06和08行代碼分別使用console.log()方法在控制臺輸出調試信息。
1.7.2 使用文本編輯器開發
在編輯器的選擇上，Web前端開發自由度是非常高的，即使是文本文檔編輯器也可以作為Web開發的工具。使用文本編輯器進行開發聽起來有些夸張，但是確實是可行的。下面介紹開發過程。
（1）打開文本編輯器，輸入【代碼1-4】，如圖1.6所示。
（2）將源代碼進行保存，如圖1.7所示。
圖1.6 使用文本編輯器輸入源代碼
圖1.7 使用文本編輯器保存源代碼
提示
使用文本編輯器保存的文件默認為（.txt）文本格式，而不是HTML網頁格式。不過沒關系，可以手動更改為.html格式，如圖1.8所示。
圖1.8 修改文件格式后綴
（3）調試HTML 5網頁
文本編輯器是沒有任何調試功能的，不過沒關系，可以將剛剛保存好、并修改過文件后綴的ch01-html-5.html文件在瀏覽器中運行調試。這里選擇運行網頁的瀏覽器也是有一定技巧的，讀者盡量選擇具有HTML、CSS和JavaScript語言調試功能的瀏覽器。如今大部分主流瀏覽器都具有該功能。
下面先選用著名的FireFox瀏覽器運行ch01-html-5.html文件，如圖1.9所示。FireFox瀏覽器的強大之處在于其內置的Web調試器，在頁面中單擊右鍵，在彈出的菜單中選擇“查看元素”項，調試頁面如圖1.10所示。在調試窗口中可以看到網頁源代碼，還可以看到樣式、布局、DOM和事件等窗口，這就是FireFox瀏覽器強大的調試界面。
圖1.9 使用FireFox瀏覽器調試HTML 5網頁（一）
圖1.10 使用FireFox瀏覽器調試HTML網頁（二）
1.7.3 使用EditPlus編輯器開發
誠然，文本編輯器的功能還是很低級的，一般不推薦設計人員使用。下面介紹一款比較高級，且非常流行的EditPlus編輯器工具來進行開發。
1．下載并安裝EditPlus工具
首先，需要下載并安裝EditPlus編輯器工具（當前最新版為4.2版本），下載地址：http://www.editplus.com，如圖1.11所示。
圖1.11 下載EditPlus工具
2．用EditPlus工具編輯代碼
打開EditPlus編輯器，新建一個HTML網頁文檔，命名為ch01-html-5.html，并輸入【代碼1-4】，如圖1.12所示。EditPlus編輯器的界面就顯得漂亮多了，而且對于源代碼有顏色區分與高亮顯示，是一款專業的代碼編輯器。
3．調試HTML 5網頁
EditPlus編輯器有內置的瀏覽器，可以在EditPlus的工具條上直接選擇打開瀏覽器按鈕來運行網頁，如圖1.13和1.14所示。
圖1.12 使用EditPlus編輯器輸入源代碼
圖1.13 使用EditPlus編輯器運行HTML 5網頁（一）
當然，EditPlus內置的瀏覽器是基于IE的，調試功能不強。不過，EditPlus工具的強大之處在于，其可以通過設定來調用外部瀏覽器?？梢栽谥鞑藛沃羞x擇“Tools”|“Preferences”菜單項，如圖1.15所示。在彈出的對話框中設定調用的外部瀏覽器，如圖1.16所示。
圖1.14 使用EditPlus編輯器運行HTML 5網頁（二）
圖1.15 調用EditPlus工具外部瀏覽器（一）
經過以上兩步的設定，如果再次在EditPlus工具條中單擊瀏覽器按鈕，就會調用剛剛設定好的外部瀏覽器來運行HTML 5網頁了，具體如圖1.17所示。
圖1.16 調用EditPlus工具外部瀏覽器（二）
圖1.17 調用EditPlus工具外部瀏覽器（三）
1.7.4 使用Sublime編輯器開發
在編輯器的選擇上，Web前端開發自由度是非常高的，下面推薦一款近年來席卷前端設計界的編輯工具—— Sublime Text，一款獨具個性的高級編輯器，如圖1.18是使用Sublime Text編輯器編寫【代碼1-4】的截圖。
圖1.18 使用Sublime Text編輯器
Sublime Text支持目前主流的操作系統，如Windows、Mac、Linux，同時還支持32和64位，支持各種流行編程語言的語法高亮、代碼補全等。該款編輯器插件相當豐富，同時版本更新勤快。非?？岬囊稽c是編輯器右邊沒有滾動條，取而代之的是代碼縮略圖。Sublime Text還有更多意想不到的強大功能，讀者可以自行下載體驗，編輯器下載地址：http://www.sublimetext.com/3。
提示
Sublime Text是款收費軟件，不過目前為止可以無限期地使用。
1.7.5 使用WebStorm平臺開發
下面介紹一款重量級的開發平臺—— WebStorm，該開發平臺是由jetBrains公司推出的、倍受廣大設計人員所推崇的、集各種開發功能之大成的工具，當然也是收費軟件，不過可以試用30天。
WebStorm既然是平臺工具，就不僅僅具有代碼編輯器的功能，自然還具有源代碼管理、調試和運行等強大功能，這也是平臺工具所必有的特性。WebStorm還具有很多先進的功能，讀者可以下載安裝，并根據軟件手冊測試體驗，在此就不深入介紹了。
下面具體介紹使用WebStorm平臺工具的開發過程。
1．下載并安裝WebStorm軟件
首先，需要下載WebStorm軟件并安裝，下載地址：http://www.jetbrains.com/webstorm/，如圖1.19所示。
圖1.19 下載WebStorm軟件
2．使用WebStorm軟件創建網頁并編輯代碼
打開WebStorm軟件，新建一個源代碼目錄，并在該目錄下新建一個HTML網頁文檔，命名為ch01-html-5.html，并輸入【代碼1-4】，如圖1.20和1.21所示。
圖1.20 使用WebStorm創建HTML 5網頁（一）
圖1.21 使用WebStorm創建HTML 5網頁（二）
3．調試HTML 5網頁
WebStorm軟件可以在代碼編輯頁面中直接調用外部瀏覽器，當鼠標移動到頁面右上角并停留，就會顯示外部瀏覽器工具條，如圖1.22所示。設計人員可以任選一款瀏覽器進行運行調試，這里筆者選擇另一款調試功能也十分強大的Opera瀏覽器運行ch01-html-5.html網頁，具體如圖1.23所示。
圖1.22 運行調試HTML 5網頁（一）
圖1.23 運行調試HTML 5網頁（二）
Opera瀏覽器的強大之處在于其內置的Web調試器，下面在頁面中單擊右鍵，在彈出的菜單中選擇“查看元素”項，調試頁面如圖1.24所示。在調試窗口中可以選擇網頁控制臺（Console）窗口，看到控制臺輸出的信息正是【代碼1-4】中第04、06和08行代碼定義的輸出信息。
圖1.24 運行調試HTML 5網頁（三）
1.7.6 使用Dreamweaver平臺開發
下面再介紹一款深受前端開發人員喜愛的開發平臺——Adobe Dreamweaver。目前，該開發平臺是由著名的Adobe公司進行管理、維護與發布的。說起Adobe公司讀者可能很熟悉，由該公司推出的Adobe Reader和Adobe Photoshop等軟件是非常有名的。其實，Dreamweaver一開始并不是Adobe公司的產品，資深一點的讀者可能都知道，Dreamweaver最初是由著名的Macromedia公司推出的、倍受廣大設計人員所喜愛的前端開發平臺。直到2005年Adobe公司收購了Macromedia公司，Macromedia Dreamweaver才變更為Adobe Dreamweaver。不過對于廣大的設計人員來說，無論是Macromedia Dreamweaver也好，還是Adobe Dreamweaver也罷，隨著Dreamweaver的不斷改進與完善，其一直以來都是深受設計人員所信任和喜愛的前端開發平臺。
Adobe Dreamweaver作為平臺級別的開發工具，幾乎涵蓋了全部前端設計語言的開發功能，這一點與前一小節介紹的WebStorm平臺工具略有不同，WebStorm還是更專注于HTML和JavaScript語言功能的開發。Adobe Dreamweaver自然也包括對源代碼管理、調試和運行等功能，這是平臺工具所必有的特性。Adobe Dreamweaver還有很多強大的功能，讀者可以下載安裝，并根據軟件手冊測試體驗，在此就不深入介紹了。
1．下載并安裝Adobe Dreamweaver軟件
首先，需要下載Adobe Dreamweaver軟件并安裝，讀者可以通過Adobe公司的官方地址（http://www.adobe.com）獲取Adobe Dreamweaver最新的測試版（正版需要付費），安裝完畢后的大致界面如圖1.25所示。
圖1.25 Adobe Dreamweaver界面
2．使用Adobe Dreamweaver工具創建站點
打開Adobe Dreamweaver軟件，在菜單欄中選中“站點”|“新建站點”項，如圖1.26所示。
3．編輯站點
在彈出的對話框中，編輯新建站點，如圖1.27所示。“站點名稱”為你想定義的網站或工程的名稱，“本地站點文件夾”為本地工程目錄。
圖1.26 使用Adobe Dreamweaver新建站點
圖1.27 使用Adobe Dreamweaver編輯站點
4．新建網頁文件
經過以上幾步的操作，站點就建立好了，在軟件界面中專門有一個小視窗顯示站點文件目錄，如圖1.28所示，并在該目錄下新建一個HTML網頁文檔，命名為ch01-html-5.html，并輸入【代碼1-4】，如圖1.29所示。
圖1.28 Adobe Dreamweaver站點目錄視窗
圖1.29 使用Adobe Dreamweaver創建HTML 5網頁
5．調試HTML 5網頁
Adobe Dreamweaver軟件可以在代碼編輯頁面中直接調用外部瀏覽器，如圖1.30所示。設計人員可以任選一款瀏覽器進行運行調試，這里筆者再次選擇Opera瀏覽器運行ch01-html-5.html網頁，具體如圖1.31所示。
圖1.30 運行調試HTML 5網頁（一）
圖1.31 運行調試HTML 5網頁（二）