1.2 实训任务

1.2.1 实训内容

网页开发工具多种多样，如记事本、Edit Plus等文本编辑软件，也有专门针对网页开发的Dreamweaver、HBuilder X等。本项目主要完成以下内容：

• HBuilder X环境的下载及配置。

• 第一个网页的制作及运行。

1.2.2 实施步骤

1.步骤一

打开浏览器，输入网址https：//www.dcloud.io/HBuilder X.html，在打开页面下载HBuilder X软件安装包。

2.步骤二

①先解压安装包并进行设置，如图1-2所示。

②然后创建桌面快捷方式，如图1-3所示。

3.步骤三

运行HBuilder X软件，创建一个普通HTML项目。其操作流程为：依次单击菜单“文件→新建→项目”，在弹出的窗口中填写项目名称和存储路径，选择模板为基本HTML项目，点击右下角“创建”按钮即可，如图1-4所示。

创建成功后，系统会自动生成如下文件框架，用来存放项目所需要的各种文件，如图 1-5所示。

4.步骤四

点击“index.html”文件，完成如下代码的添加。

5.步骤五

配置浏览器，依次单击菜单“运行→运行到浏览器→配置web服务器”，如图1-6所示。

找到浏览器运行配置，将自己的路径配置到软件中，如图1-7所示。

6.步骤六

运行程序，可以采用如下两种方法来运行程序。

• 方法一：依次单击菜单“运行→运行到浏览器→Chrome或Firefox”，如图1-8所示。

• 方法二：单击文件路径左边的运行按钮，找到相应浏览器，单击即可运行，如图 1-9所示。

7.步骤七

检查网页运行结果，如图1-10所示。