第3章 开发工具（HBuilder） 3.1实验目标 掌握HBuilder的下载、安装和基本操作。
3.2实验任务
（1）下载并安装HBuilder。

（2）使用HBuilder创建一个Web项目工程。

（3）使用HBuilder在项目工程中创建一个HTML页面，使页面能够在浏览器中正确显示，效果如图3-1所示。
图3-1 3.3设计思路
（1）在HBuilder官网下载并安装HBuilder。

（2）双击HBuilder.exe启动HBuilder。

（3）创建一个项目工程。

（4）创建HTML页面并编辑。

（5）在浏览器中运行文件，并查看页面效果。
第3章开发工具（HBuilder）┃27 3.4实验实施（跟我做） 3.3.1步骤一：下载并安装HBuilder
1．下载HBuilder
（1）进入如图3-2所示的HBuilder官方网站首页，下载HBuilder。
图3-
2
（2）下载得到压缩文件（HBuilder.9.1.29.windows.zip）。

2．安装将HBuilder.9.1.29.windows.zip解压到一个目录下（如解压到E盘根目录下，解压后将生成E:\HBuilder），即HBuilder的文件夹，文件目录如图3-3所示。
图3-3
3．启动运行E:\HBuilder\HBuilder.exe即可启动HBuilder。
3.3.2步骤二：启动HBuilder
（1）双击HBuilder.exe启动HBuilder，出现如图3-4所示的主界面。
28┃Web前端开发实训案例教程（初级） 图3-
4
（2）创建页面包括如图3-5所示的3个步骤。
创建项目和HTML文件。
编辑HTML文件。
在浏览器中运行HTML文件。
图3-5 3.3.3步骤三：创建工程
（1）单击打开“文件”菜单，再选择“新建”命令，最后选择“Web项目”命令（也可按下Ctrl+N组合键，然后选择“Web项目”命令），如图3-6所示。
第3章开发工具（HBuilder）┃29 图3-
6 HBuilder会为项目建立索引，工程间文件的链接引用关系都可以管理。
这样在跨文件引用提示、转到定义、重构、移动图片路径等很多操作中HBuilder都能智能处理。

（2）在如图3-7所示的“创建Web项目”对话框中，A处填写新建项目的名称，B处填写项目保存路径（更改此路径HBuilder会记录，下次默认使用更改后的路径），C处可选择使用的模板（也可单击“自定义模板”）。
图3-7 3.3.4步骤四：创建HTML页面 在项目资源管理器中选择上面新建的项目，单击打开“文件”菜单，再选择“新建”命令，最后选择“HTML文件”命令（或按下Ctrl+N组合键，选择“HTML文件”命令）， 30┃Web前端开发实训案例教程（初级） 并选择“空白文件”模板，如图3-8所示。
图3-8 3.3.5步骤五：编辑HTML文件 在项目资源管理器中选中新建的HTML文件，编辑区域则显示该文件中的代码，此时可在编辑区域对代码进行编辑，如图3-9所示。
图3-9 3.3.6步骤六：运行 按下Ctrl+P组合键进入边改边看模式，在此模式下，如果当前打开的是HTML文件，则每次保存均会自动刷新以显示当前页面效果，如图3-10所示。
第3章开发工具（HBuilder）┃31图3-10