HTML5+CSS3 Web前端开发技术（任务式）课件 01任务实施_第1页
HTML5+CSS3 Web前端开发技术（任务式）课件 01任务实施_第2页
HTML5+CSS3 Web前端开发技术（任务式）课件 01任务实施_第3页
HTML5+CSS3 Web前端开发技术（任务式）课件 01任务实施_第4页
HTML5+CSS3 Web前端开发技术（任务式）课件 01任务实施_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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浏览器设置为默认浏览器。单击浏览器窗口右上角的菜单按钮，从下拉菜单中选择“设置”选项，打开设置页面。从左侧列表中选择“默认浏览器”选项，然后在右侧单击“设为默认选项”按钮。操作视频安装HBuilderX

IDE02任务要求完成HBuilderX

IDE的安装任务实施下载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"空项目。

新建项目

创建一个项目名称为“NOC"空项目在“NOC"项目文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建”命令，新建目录，将目录名称设定为1。任务实施2.创建index.html文件在新建的目录上单击鼠标右键，在弹出的快捷菜单中选择“新建”-“7.html文件”命令,创建项目中的index.html文件。任务实施3.编写测试页面内容选择菜单栏中的“编辑”-“缩进”选项，勾选“按下Tab时使用空格代替制表符”与“Tab宽度：4个空格”选项，再单击“将Tab转成空格”选项，将页面中的制表符更换为4个空格，这样操作之后每次按下【Tab】键，将会自动更换为4个空格输入。任务实施在index.html文件中填入如下内容：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>页面测试</title></head><body><h1>Hi！欢迎你进入新云课堂开启在线学习之旅</h1></body></html>任务实施检查输入内容是否正确，确保输入无误，按【ctrl+S】组合键保存文件修改，一个简单页面就制作完毕。然后使用浏览器运行查看我们的页面结果。找到项目创建时所设定的项目目录的路径，使用Chrome浏览器打开index.h

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论