下载掌阅APP，畅读海量书库
立即打开
本节开始一个实际案例，编写一个简单的HTML 5移动页面，让读者对移动网页技术有一个初步的了解。同时，通过这个案例让读者了解几款比较流行的HTML网页开发工具使用方法，以及调试方法。
下面编写一个简单的HTML 5代码，让读者直观地体会HTML 5移动应用的魅力（详见源代码ch01/ch01-html-5.html文件）。
第01～18行代码使用<html>标签定义了一个HTML 5页面文档。
第02行代码定义了一个HTML 5的<canvas>标签，即一个矢量画布标签，可以支持设计人员的自定义图形。
第03～17行为脚本代码，通过JavaScript脚本语言实现在<canvas>标签上的图形操作，具体方法的含义读者可以参考后面关于HTML 5的内容，本章中就不做深入介绍了。
同时，第04、06和08行代码分别使用console.log()方法在控制台输出调试信息。
在编辑器的选择上，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网页（二）
诚然，文本编辑器的功能还是很低级的，一般不推荐设计人员使用。下面介绍一款比较高级，且非常流行的EditPlus编辑器工具来进行开发。
首先，需要下载并安装EditPlus编辑器工具（当前最新版为4.2版本），下载地址：http://www.editplus.com，如图1.11所示。
图1.11 下载EditPlus工具
打开EditPlus编辑器，新建一个HTML网页文档，命名为ch01-html-5.html，并输入【代码1-4】，如图1.12所示。EditPlus编辑器的界面就显得漂亮多了，而且对于源代码有颜色区分与高亮显示，是一款专业的代码编辑器。
EditPlus编辑器有内置的浏览器，可以在EditPlus的工具条上直接选择打开浏览器按钮来运行网页，如图1.13和1.14所示。
图1.12 使用EditPlus编辑器输入源代码
图1.13 使用EditPlus编辑器运行HTML
当然，EditPlus内置的浏览器是基于IE的，调试功能不强。不过，EditPlus工具的强大之处在于，其可以通过设定来调用外部浏览器。可以在主菜单中选择“Tools”|“Preferences”菜单项，如图1.15所示。在弹出的对话框中设定调用的外部浏览器，如图1.16所示。
图1.14 使用EditPlus编辑器运行HTML
图1.15 调用EditPlus工具外部浏览器（一）
经过以上两步的设定，如果再次在EditPlus工具条中单击浏览器按钮，就会调用刚刚设定好的外部浏览器来运行HTML 5网页了，具体如图1.17所示。
图1.16 调用EditPlus工具外部浏览器（二）
图1.17 调用EditPlus工具外部浏览器（三）
在编辑器的选择上，Web前端开发自由度是非常高的，下面推荐一款近年来席卷前端设计界的编辑工具—— Sublime Text，一款独具个性的高级编辑器，如图1.18是使用Sublime Text编辑器编写【代码1-4】的截图。
图1.18 使用Sublime Text编辑器
Sublime Text支持目前主流的操作系统，如Windows、Mac、Linux，同时还支持32和64位，支持各种流行编程语言的语法高亮、代码补全等。该款编辑器插件相当丰富，同时版本更新勤快。非常酷的一点是编辑器右边没有滚动条，取而代之的是代码缩略图。Sublime Text还有更多意想不到的强大功能，读者可以自行下载体验，编辑器下载地址：http://www.sublimetext.com/3。
Sublime Text是款收费软件，不过目前为止可以无限期地使用。
下面介绍一款重量级的开发平台—— WebStorm，该开发平台是由jetBrains公司推出的、倍受广大设计人员所推崇的、集各种开发功能之大成的工具，当然也是收费软件，不过可以试用30天。
WebStorm既然是平台工具，就不仅仅具有代码编辑器的功能，自然还具有源代码管理、调试和运行等强大功能，这也是平台工具所必有的特性。WebStorm还具有很多先进的功能，读者可以下载安装，并根据软件手册测试体验，在此就不深入介绍了。
下面具体介绍使用WebStorm平台工具的开发过程。
首先，需要下载WebStorm软件并安装，下载地址：http://www.jetbrains.com/webstorm/，如图1.19所示。
图1.19 下载WebStorm软件
打开WebStorm软件，新建一个源代码目录，并在该目录下新建一个HTML网页文档，命名为ch01-html-5.html，并输入【代码1-4】，如图1.20和1.21所示。
图1.20 使用WebStorm创建HTML 5网页（一）
图1.21 使用WebStorm创建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网页（三）
下面再介绍一款深受前端开发人员喜爱的开发平台——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还有很多强大的功能，读者可以下载安装，并根据软件手册测试体验，在此就不深入介绍了。
首先，需要下载Adobe Dreamweaver软件并安装，读者可以通过Adobe公司的官方地址（http://www.adobe.com）获取Adobe Dreamweaver最新的测试版（正版需要付费），安装完毕后的大致界面如图1.25所示。
图1.25 Adobe Dreamweaver界面
打开Adobe Dreamweaver软件，在菜单栏中选中“站点”|“新建站点”项，如图1.26所示。
在弹出的对话框中，编辑新建站点，如图1.27所示。“站点名称”为你想定义的网站或工程的名称，“本地站点文件夹”为本地工程目录。
图1.26 使用Adobe
图1.27 使用Adobe Dreamweaver编辑站点
经过以上几步的操作，站点就建立好了，在软件界面中专门有一个小视窗显示站点文件目录，如图1.28所示，并在该目录下新建一个HTML网页文档，命名为ch01-html-5.html，并输入【代码1-4】，如图1.29所示。
图1.28 Adobe Dreamweaver站点目录视窗
图1.29 使用Adobe Dreamweaver创建
Adobe Dreamweaver软件可以在代码编辑页面中直接调用外部浏览器，如图1.30所示。设计人员可以任选一款浏览器进行运行调试，这里笔者再次选择Opera浏览器运行ch01-html-5.html网页，具体如图1.31所示。
图1.30 运行调试HTML 5网页（一）
图1.31 运行调试HTML 5网页（二）