HTML5+CSS3 Web前端开发技术（任务式）课件 01任务实施.pptx

HTML5+CSS3Web前端开发技术

知识图谱

01搭建项目开发环境

任务01.安装Chrome浏览器02.安装HBuilderX开发IDE03.使用HBuilderX创建项目

安装Chrome浏览器01

任务要求完成Chrome浏览器的安装修改默认搜索引擎为百度搜索设置Chrome浏览器为默认浏览器

任务实施（1）获取Chrome浏览器的安装文件。使用本机已经安装的浏览器（例如Windows系统自带的IE浏览器或者Edge浏览器）打开Chrome浏览器官方网站，下载Chrome浏览器。单击“下载Chrome”按钮后，将会从网络上下载名为ChromeSetup.exe的可执行安装文件。

任务实施（2）执行安装过程。打开安装文件进行Chrome浏览器的安装，安装过程为静默安装，无须进行任何配置。安装程序会在桌面创建一个Chrome浏览器的快捷方式，待安装程序正常结束后，Chrome浏览器会自动打开并显示欢迎页面，这表明Chrome浏览器已正确安装。

任务实施（3）将Chrome浏览器设置为默认浏览器。单击浏览器窗口右上角的菜单按钮，从下拉菜单中选择“设置”选项，打开设置页面。从左侧列表中选择“默认浏览器”选项，然后在右侧单击“设为默认选项”按钮。

操作视频

安装HBuilderXIDE02

任务要求完成HBuilderXIDE的安装

任务实施下载HBuilderXWindows标准版使用本机已经安装的浏览器打开HBuilderX官方网站(https://www.dcloud.io/hbuilderx.html)下载页面，单击页面中的“DOWNLOAD”按钮下载HBuilderX压缩包。这里我们选择下载正式版中的Windows标准版。

任务实施2.解压HBuilderX到指定目录使用解压软件将该压缩包解压到想要存放的路径即可，这里我们将压缩包内的HBuilderX文件夹解压到路径C:\ProgramFiles\下。然后进入HBuilderX目录内，选中HBuilderX.exe文件，单击鼠标右键，弹出快捷菜单，选择“固定到‘开始’屏幕”命令或者“发送”-“桌面快捷方式”命令。这样以后就可以通过“开始”菜单或者桌面快捷方式打开HbuilderX了。

任务实施3.设置HBuilderX.exe兼容性为以管理员身份运行为HbuilderX的执行文件添加管理员权限。选中HBuilderX.exe文件，单击鼠标右键，在弹出的快捷菜单中选择“属性”命令，在打开的对话框中单击“兼容性”选项卡，勾选“以管理员身份运行此程序”复选框。

任务实施3.设置HBuilderX.exe兼容性为以管理员身份运行运行HbuilderX，打开HbuilderX界面，通过菜单栏中的“工具”-“主题”选项可以将界面主题改为自己喜欢的风格。

任务实施3.设置HBuilderX.exe兼容性为以管理员身份运行选择菜单栏中的“工具”-“插件安装”，在弹出的插件管理界面中找到“内置浏览器”，单击“内置浏览器，支持边改边预览”下方的“安装”按钮，进行HBuilderX内置浏览器安装。该插件的作用是支持页面效果的实时显示。

任务实施HbuilderX界面简介:HbuilderX界面上方区域为菜单栏，包含的菜单如下。“文件”菜单：进行文件的打开、保存、另存为、打开文件目录、设定文件字符编码等操作。?“编辑”菜单：进行文本内容的批量修改、复制、粘贴、缩进、转义等操作。?“选择”菜单：进行编辑区域内容的选中操作。?“查找”菜单：进行文件内容的查找与替换操作。?“跳转”菜单：进行控制光标位置移动的高级操作。?“运行”菜单：让程序在不同的环境中进行运行模拟。?“发布”菜单：将项目进行网络提交。?“视图”菜单：设定编辑器外观与进行部分内容区域调整。?“工具”菜单：软件的设置与插件的安装管理。?“帮助”菜单：软件的更新与版本说明等内容。界面左侧为文档结构目录，展示相关文件、文件夹目录结构。在对应的文件或文件夹上单击鼠标右键可以弹出快捷菜单，进行多种快捷操作。界面右侧为代码编辑区域，HBuilderX编辑区默认支持代码自动识别提示功能、自动缩进、自动符号补全。界面下方区域为文档状态栏，提示开发者相关文档设置。

操作视频

使用HBuilderX创建项目03

任务要求（1）在HBuilder工具中创建新云课堂项目目录。（2）在项目目录的根路径创建index.html文件。（3）编写测试页面内容，并使用内置浏览器插件预览，验证环境是否搭建成功。

任务实施1.创建新云课堂项目单击界面菜单栏中的“文件”-“新建”-“1.项目”选项，创建一个项目名称为“NOC空项目。新