原创力文档- 1、本文档共330页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第1章概述;（1）掌握HBuilder工具的安装和使用。
（2）掌握HTML页面结构、表单、文本标签、超链接、图像、表格、列表等元素的使用方法。
（3）掌握HTML5语义化元素、新增全局属性、页面增强元素、表单标签和属性、多媒体等元素的使用方法。
（4）掌握CSS选择器、字体样式、文本样式、颜色、背景、区块、网页布局、单位等功能和应用。
（5）掌握CSS3新增选择器、边框新特性、新增颜色、字体的功能、动画效果、多列布局及弹性布局的使用方法。
（6）掌握JavaScript基础语法、语句、函数、数组、事件、DOM操作、面向对象等。
（7）掌握jQuery选择器、DOM操作、事件、动画等。
（8）遵循企业Web标准设计和开发过程，培养良好的工程能力，能进行企业静态网站开发，提高静态网站开发实践能力。
;序号;序号;序号;序号;项目选取“在线视频课程网站”为Web静态网页程序，采用HBuilder工具开发，技术选型为“HTML5+CSS3+JavaScript+jQuery+移动端”。
案例按企业标准进行建设，结合瀑布模型、RUP模型、增量开发思想，内容包括项目目标、需求分析、系统设计、每个功能迭代开发，在迭代开发过程中，按功能、技能和知识进行组织。
整个项目分为4大阶段，分别为HTML5、HTML5+CSS3、JavaScript+jQuery、移动端。;第2章
开发环境：第一个HTML5程序;2.1技能和知识点;1．下载安装Chrome浏览器。
2．下载安装HBuilder。
3．使用HBuilder创建一个Web项目工程。
4．使用HBuilder在项目中创建一个HTML5页面，页面能够在浏览器中正确显示。;1．在GoogleChrome官网浏览GoogleChrome浏览器。
2．在HBuilder官网下载安装HBuilder编程工具。
3．创建Web项目并运行
（1）用Hbuilder创建一个Web项目。
（2）在Web项目中创建HTML页面并进行编辑。
（3）使用HBuilder内置服务器运行HTML静态网页，并使用Chrome浏览器进行访问。;2.4.1下载安装Chrome
2.4.2下载安装Hbuilder
2.4.3创建Web项目并运行;1．下载Chrome
（1）访问Chrome官网。
（2）在Chrome官网页面中单击“下载Chrome”按钮，如图所示，下载Chrome安装包。;2．安装Chrome
双击安装包即可自动完成安装，安装完成后，启动Chrome浏览器，启动完成后浏览器界面如图所示。;3．Chrome的开发者工具
（1）打开“开发者工具”
打开Chrome浏览器，按F12打开“开发者工具”。也可以在页面空白处单击右键，在弹出的快捷菜单中选择“检查”选项，如图所示。;3．Chrome的开发者工具
（2）常用的“开发者工具”功能。
①Elements：查看页面元素及布局。
②Console：控制台，用于打印输出和调试。
③Network：查看网络通信的数据包。;3．Chrome的开发者工具
（3）模拟移动设备。
单击“”按钮，可切换到移动设备模拟状态，如图所示。;1．下载HBuilder
（1）进入HBuilder官方网站首页，单击“DOWNLOAD”按钮下载HBuilder，如图所示。
;1．下载HBuilder
（2）在弹出的窗口中选择“上一代HBuilder下载”，选择Windows包，如图所示。
下载后得到压缩文件（HBuilder.9.1.29.windows.zip），如下图所示。
;2．安装（解压下载文件后即可以使用）
（1）解压HBuilder.9.1.29.windows.zip到一个目录下（例如，解压到C盘根目录下，解压后将生成C:\HBuilder），即HBuilder的文件夹，文件目录如图所示。
;2．安装（解压下载文件后即可以使用）
（2）运行HBuilder.exe文件。
第一次使用，会弹出注册界面，如图所示，可以选择“注册用户”或“暂不登录”。;3．HBuilder主界面;4．设置语法验证器
（1）在HBuilder主界面上，选择“工具”按钮，选择“选项”命令，如图所示。;4．设置语法验证器
（2）在弹出的“选项”窗口，如图所示，左侧选择“HBuider”下的“语法验证器设置”。将右侧表格中HTML、JSON、JavaScript、CSS语法验证器打开。;1．新建项目
（1）在HBuilder主界面上，选择“文件”按钮，在弹出菜单中选择“新建”按钮，选择“Web项目”，如图所示。;1．新建项目
（2）在弹出的如下图所示窗口中，设置项目名称与项目位置，单击完成即可新建一个空的Web项目。;1．
文档评论（0）