实验指导

在HTML5的学习过程中，第一步是选择开发工具和开发框架；第二步是熟悉它们的基本功能；第三步是了解它们的特性。在此基础上学习HTML5，可提高学习的效率。

实验目的和要求

● 掌握移动开发工具的下载安装方法。

● 熟悉移动开发工具的特性。

● 掌握移动开发框架的下载安装方法。

● 掌握移动开发框架的用法。

实验1 使用HBuilder创建MUI框架页面

HBuilder是数字天堂（DCloud）的产品，他们在设计HBuilder时的理念就是“快”，体现方式主要有：①代码输入法方面，按下数字键快速选择候选项；②代码块方面，一个代码块，少敲N个字符；③内置了emmet，按〈Tab〉键，生成一串代码；④代码提示方面，无死角提示，除了语法外，还能提示ID、Class、图片、链接和字体等。MUI是DCloud公司发布的一款前端开源框架，可以用简、快、易来形容它。

题目1 熟悉HBuilder的使用

1. 任务描述

把HBuilder下载到计算机中，找到HBuilder.exe文件，打开HBuilder，通过菜单操作来完成文件的创建、调试和运行，体会各种快捷方式的使用，达到熟练操作HBuilder的目的。

2. 任务要求

1）创建自己的第一个文件，在代码输入过程中，能用快捷方式的都要用快捷方式进行操作。

2）在代码测试过程中，可以用HBuilder自带工具完成，当然也可以用浏览器调试模式来完成。

3）熟练掌握HBuilder的各项功能。

3. 知识点提示

本任务主要用到以下知识点。

1）HTML5的基本语句。

2）加载MUI框架的方法。

3）调试的方法。

4. 操作步骤提示

实现方式不限，在此以一个基本网页的创建和运行为例，简单提示一下操作步骤。

1）创建网页文档index.html。

2）输入基本语句，注意不要忘了用快捷方式。

3）用测试工具进行测试。

题目2 MUI框架

1. 任务描述

在移动开发项目中，UI设计是很重要的一项内容，前端开发框架MUI提供了UI设计的成熟模式，利用MUI可以设计出漂亮的UI界面。

2. 任务要求

1）请根据实际情况对原生UI与MUI控件一一对应，能熟练操作。

2）通过示例演示，掌握MUI加载过程，理解它的工作原理。

3）使用MUI编写项目，并下载到移动设备中进行测试。

3. 知识点提示

本任务主要用到以下知识点。

1）熟练使用HBuilder，创建新项目。

2）在HBuilder项目中加载MUI前端框架。

3）MUI前端框架中各个组件的使用。

4. 操作步骤提示

实现方式不限，在此以设计一个简单的MUI项目为例，简单提示一下操作步骤。

1）打开HBuilder。

2）创建一个以MUI为模板的移动项目。

3）在文档中加载MUI。

4）具体设计MUI项目。

5）调试运行项目。

实验2 用jQuery Mobile框架实现框架抽屉布局效果

jQuery是目前应用最广泛的JavaScript框架，jQuery Mobile是jQuery在手机和平板设备上的专用版本。jQuery Mobile不仅给主流移动平台带来jQuery核心库，也发布了一个完整、统一的jQuery移动UI框架。支持全球主流移动平台。

题目1 熟悉jQuery Mobile框架的使用

1. 任务描述

在使用jQuery Mobile移动框架之前，要掌握它的基本功能和用法，包括下载安装、基本属性的掌握、库的引用方式，以及第一个项目的具体实现。

2. 任务要求

1）确定引用jQuery Mobile的方式，是用CDN方式还是直接下载。

2）掌握jQuery Mobile自定义的基本属性。

3）布局第一个项目。

3. 知识点提示

本任务主要用到以下知识点。

1）jQuery Mobile基本属性的使用。

2）在项目中，jQuery Mobile的基本布局。

3）项目的调试。

4. 操作步骤提示

实现方式不限，在此以用jQuery Mobile创建一个项目为例，简单提示一下操作步骤。

1）下载jQuery Mobile。

2）在开发平台下创建项目，并引入jQuery Mobile相关库。

3）编写相应代码，随时查看效果。

4）在浏览器、专用平台或手机上调试结果。

题目2 利用jQuery Mobile框架实现抽屉布局效果

1. 任务描述

在熟练掌握jQuery Mobile的基本上，完成特定的抽屉布局效果。

2. 任务要求

1）熟练布置jQuery Mobile的开发环境。

2）熟练掌握jQuery Mobile的基本属性。

3）了解抽屉效果的样式。

3. 知识点提示

本任务主要用到以下知识点。

1）jQuery Mobile开发环境的布置。

2）创建项目的布局，相应类库的引用方式。

3）具体代码的实现。

4）完成相应的测试。

4. 操作步骤提示

1）下载相关文件，并布置到项目中。

2）创建一个以jQuery Mobile为框架的项目。

3）设计相应的抽屉布局效果。

4）调试并输出。