// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= HTML5 应用程序入门
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: HTML5 应用程序入门 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, HTML5 应用程序入门

本文档说明了如何在 IDE 中创建 HTML5 项目，以及 IDE 中支持在项目中使用 JavaScript 和 CSS 的一些功能。在本文档中，您将创建简单的 HTML5 应用程序，以使用 jQuery JavaScript 库来修改 Web 页中的列表。

本文档还演示了如何从 Chrome Web Store 为 Chrome 浏览器安装 NetBeans Connector 扩展。

要观看此教程的截屏视频，请参阅 link:../web/html5-gettingstarted-screencast.html[+HTML5 应用程序入门的视频+]。

有关如何在 NetBeans Java Web 应用程序中使用 jQuery 的教程，请参阅教程link:../web/js-toolkits-jquery.html[+使用 jQuery 改善 Web 页的外观和可用性+]。


image::images/netbeans-stamp-80-74.png[title="此页上的内容适用于 NetBeans IDE 7.4 和 8.0"]


==== 要完成本教程，需要使用以下资源。

|===
|软件或资源 |要求的版本 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE，Java+] |7.4, 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java 开发工具包 (JDK)+] |版本 7 或 8 

|link:http://www.google.com/chrome[+Chrome 浏览器+] |-- 

|link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+用于 Chrome 的 NetBeans Connector 扩展+] |1.0.0 或更高版本 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+HTML5 演示项目资源+] |-- 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+已完成项目的站点模板+] |-- 
|===

*注：*

* link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+项目资源 zip 文件+]包含在本教程中需要添加到项目内的 JPG 图像和 CSS 文件。
* 如果要将您的项目与工作解决方案进行比较，可以下载已完成项目的link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+站点模板+]。
* 本文档假定您具备 HTML、CSS 和 JavaScript 的一些基本知识或编程经验。


== 将 IDE 用于 Chrome 浏览器

要充分利用 IDE 中提供的支持 HTML5 应用程序开发的一些工具，建议使用 Chrome 浏览器并从 link:https://chrome.google.com/webstore/[+Chrome Web Store+] 安装 NetBeans Connector 扩展。只需要安装一次扩展。

安装 NetBeans Connector 扩展之后，它会添加 NetBeans 的 "Actions"（操作）菜单，在 Chrome 浏览器中运行 NetBeans HTML5 项目时可从 URL 地址栏访问该菜单。使用 NetBeans 的 "Actions"（操作）菜单可以启用 "Inspect in NetBeans Mode"（在 NetBeans 中检查模式），并快速将浏览器窗口的大小调整为常用显示设备的尺寸。JavaScript 调试器也会在运行 HTML5 应用程序时自动启用。


=== 从 Chrome Web Store 安装扩展

如果您从 IDE 运行 NetBeans HTML5 应用程序项目，并选择了 "Chrome with NetBeans Integration"（带有 NetBeans 集成的 Chrome），则系统将自动提示您安装 NetBeans Connector 扩展。本练习说明如何通过创建和运行伪 HTML5 项目来安装扩展。您可以跳过此练习，然后在 IDE 提示时安装扩展，或者直接从 Chrome Web Store 安装 NetBeans Connector 扩展。

*注：*IDE 将在默认浏览器中打开 Chrome Web Store。如果 Chrome 未设置为 IDE 的默认浏览器，则需要打开 "Options"（选项）窗口并在 "General"（常规）类别的 "Web Browser"（Web 浏览器）下拉列表中选择 Chrome，然后再执行以下步骤。

1. 选择 "File"（文件）> "New Project"（新建项目）以打开新建项目向导。
2. 在 "HTML/JavaScript" 类别中选择 "HTML5 Application"（HTML5 应用程序）。单击 "Next"（下一步）。
3. 指定项目的名称和位置。单击 "Next"（下一步）。

对于本练习，名称不重要。

4. 选择 "No Site Template"（无站点模板）。单击 "Finish"（完成）。

单击 "Finish"（完成）时，IDE 会创建新的 HTML5 项目并在编辑器中打开  ``index.html`` 。

5. 确认在工具栏的下拉列表中选择了 "Chrome with NetBeans Integration"（带有 NetBeans 集成的 Chrome）。
6. 单击工具栏中的 "Run"（运行）。
7. 在 "Install Chrome Extension"（安装 Chrome 扩展）对话框中单击 "Go to Chrome Web Store"（转到 Chrome Web Store）。
image::images/html5-offline-extension1.png[title="&quot;Install Chrome Extension&quot;（安装 Chrome 扩展）对话框"]

单击 "Go to Chrome Web Store"（转到 Chrome Web Store）时，Chrome 浏览器中将打开 Chrome Web Store 的 NetBeans Connector 页面。

*注：*"Install Chrome Extension"（安装 Chrome 扩展）将显示一个按钮，安装扩展之后单击该按钮。

image::images/html5-rerun-dialog.png[title="&quot;Install Chrome Extension&quot;（安装 Chrome 扩展）对话框"]
8. 转到 Chrome 浏览器并单击 NetBeans Connector 页面中的 "Add to Chrome"（添加到 Chrome）。出现提示时，单击 "Add"（添加）以确认要添加扩展。
image::images/html5-chrome-netbeanshome.png[title="Chrome Web Store 中的 NetBeans Connector 页"]

安装扩展之后，您可以看到通知，声明扩展已添加，并且当您在 Chrome 浏览器中运行 NetBeans HTML5 项目时，NetBeans Connector 图标将在 URL 地址栏中可见。

image::images/html5-install-extension2.png[title="确认该扩展已安装"]
9. 在 IDE 的 "Install Chrome Extension"（安装 Chrome 扩展）对话框中，单击 "Re-Run Project"（重新运行项目）。

单击 "Re-Run Project"（重新运行项目）时，Chrome 浏览器中将打开一个新标签，您可以看到 HTML5 应用程序的索引页。

安装扩展之后，当您在 Chrome 浏览器中运行 NetBeans HTML5 项目时，NetBeans Connector 图标将在 URL 地址栏中可见。

如果您打开 Chrome 浏览器的 Chrome 扩展页面 ( ``chrome://extensions/`` )，则将看到扩展现在已启用。

image::images/html5-install-extension3.png[title="Chrome 扩展中已启用 NetBeans Connector 扩展"]

*注：*此外，您可以执行以下步骤，直接从 Chrome Web Store 安装 NetBeans Connector 扩展。

1. 启动 Chrome 浏览器，然后转到 link:https://chrome.google.com/webstore/[+Chrome Web Store+]。
2. 在 Chrome Web Store 中搜索 Netbeans Connector 扩展。
3. 在搜索结果页中单击 "Add To Chrome"（添加到 Chrome），系统提示添加扩展时，单击 "Add"（添加）。
image::images/html5-install-extension1.png[title="Chrome Web Store 中的 NetBeans Connector 扩展"]


=== 脱机安装扩展

如果无法连接到 Chrome Web Store，则可以安装与 IDE 绑定的 NetBeans Connector 扩展。在运行 NetBeans HTML5 项目时，如果提示安装 NetBeans Connector 扩展，但您无法访问 Chrome Web Store，则可以执行以下步骤以安装扩展。

1. 在 "Install Chrome Extension"（安装 Chrome 扩展）对话框中单击 "Not Connected"（未连接）。
image::images/html5-offline-extension1.png[title="&quot;Install Chrome Extension&quot;（安装 Chrome 扩展）对话框"]
2. 在对话框中单击 *locate（定位）*以打开本地系统上包含 * ``netbeans-chrome-connector.crx`` * 扩展的 NetBeans IDE 安装文件夹。
image::images/html5-offline-extension2.png[title="Chrome 扩展中已启用 NetBeans Connector 扩展"]
3. 在 Chrome 浏览器中打开 Chrome 扩展页面 ( ``chrome://extensions/`` )。
image::images/html5-offline-extension3.png[title="Chrome 扩展中已启用 NetBeans Connector 扩展"]
4. 将  ``netbeans-chrome-connector.crx``  扩展拖动到浏览器中的 "Extensions"（扩展）页面，然后单击 "Add"（添加）以确认要添加扩展。

添加扩展之后，您可以看到 NetBeans Connector 扩展添加到了已安装扩展列表中。

5. 在 "Install Chrome Extension"（安装 Chrome 扩展）对话框中单击 *Yes, the plugin is installed now（是，插件现在已安装）*可在 Chrome 浏览器中打开 NetBeans HTML5 项目。在浏览器标签的地址栏中可以看到 NetBeans Connector 图标。


== 使用嵌入式 WebKit 浏览器

开发应用程序时，建议在安装了 NetBeans Connector 扩展的 Chrome 浏览器中运行 HTML5 应用程序。创建 HTML5 应用程序时，默认情况下将选择*带有 NetBeans 集成的 Chrome* 选项作为运行目标。不过，也可以在 IDE 所绑定的嵌入式 WebKit 浏览器中运行 HTML5 应用程序。

在嵌入式 WebKit 浏览器中运行 HTML5 应用程序时，IDE 将在 IDE 中打开 Web 浏览器窗口。嵌入式 WebKit 浏览器支持 Chrome 浏览器中安装了 NetBeans Connector 扩展时启用的多种功能，包括检查模式、不同屏幕大小选项和 JavaScript 调试。

*注：*在 IDE 的主菜单中选择 "Window"（窗口）> "Web" > "Web Browser"（Web 浏览器）将打开在“选项”窗口中指定作为 Web 浏览器的浏览器。

执行以下步骤可在嵌入式 WebKit 浏览器中运行 HTML5 应用程序。

1. 在工具栏的下拉列表中选择 "Embedded WebKit Browser"（嵌入式 WebKit 浏览器）。
image::images/html5-embedded1.png[title="工具栏下拉列表中 HTML5 应用程序的目标浏览器列表"]
2. 在工具栏中单击 "Run"（运行），或者在 "Projects"（项目）窗口中右键单击项目节点并选择 "Run"（运行）。

运行应用程序时，IDE 中将打开 Web 浏览器窗口。

image::images/html5-embedded2.png[title="&quot;Embedded WebKit Browser&quot;（嵌入式 WebKit 浏览器）窗口"]

单击 Web 浏览器标签的工具栏中的图标可以启用检查模式以及在不同显示大小之间快速切换。


== 创建 NetBeans HTML5 项目

本练习将在 IDE 中使用新建项目向导创建新的 HTML5 项目。在本指南中，您将创建只有一个  ``index.html``  文件的非常基本的 HTML5 项目。在向导中，您还可以选择要在项目中使用的一些 jQuery JavaScript 库。

1. 从主菜单中选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键），以打开新建项目向导。
2. 选择 *HTML5* 类别，然后选择 *HTML5 Application*（HTML5 应用程序）。单击 "Next"（下一步）。
image::images/html5-newproject1.png[title="新建项目向导中的 HTML5 应用程序模板"]
3. 为 "Project Name"（项目名称）键入 *HTML5Demo*，并指定计算机中用于保存项目的目录。单击 "Next"（下一步）。
4. 在第 3 步 "Site Template"（站点模板）中，选择 "No Site Template"（无站点模板）。单击 "Next"（下一步）。
image::images/html5-newproject2.png[title="&quot;New HTML5 Application&quot;（新建 HTML5 应用程序）向导中的 &quot;Site Templates&quot;（站点模板）面板"]

选择 "No Site Template"（无站点模板）选项时，向导将生成基本的空 NetBeans HTML5 项目。如果立即单击 "Finish"（完成），则现在项目将仅包含站点根文件夹，该文件夹中有一个  ``index.html``  文件。

使用向导的 "Site Template"（站点模板）页可以从 HTML5 项目的常用联机模板列表中进行选择，也可以指定站点模板的  ``.zip``  归档文件的位置。可以键入  ``.zip``  归档文件的 URL 或者单击 "Browse"（浏览）以指定本地系统上的位置。当您基于某个站点模板创建项目时，项目的文件、库和结构由该模板确定。

*注：*要根据列表中的一个联机模板创建项目，您必须处于联机状态。

5. 在第 4 步 "JavaScript Files"（JavaScript 文件）中，从 "Available"（可用）窗格选择  ``jquery``  和  ``jqueryui``  JavaScript 库，单击右箭头图标 ( > ) 以将所选库移动到向导的 "Selected"（选定）窗格。默认情况下，将在项目的  ``js/libraries``  文件夹中创建库。在本教程中，您将使用 JavaScript 库的“缩小”版本。

可以使用面板上的文本字段来过滤 JavaScript 库列表。例如，在字段中键入 *jq* 可帮助您查找  ``jquery``  库。按住 Ctrl 单击库的名称可以选择多个库。

image::images/html5-newproject3.png[title="&quot;New HTML5 Application&quot;（新建 HTML5 应用程序）向导中的 &quot;JavaScript Libraries&quot;（JavaScript 库）面板"]

*注：*

* 可以在 "Version"（版本）列中单击库版本号以打开弹出窗口，通过该窗口可以选择库的较早版本。默认情况下，向导显示最新的版本。
* JavaScript 库的最小化版本是压缩版本，在编辑器中查看时，不太容易理解代码。
6. 单击*完成*即可完成此向导。

单击 "Finish"（完成）时，IDE 将创建项目、在 "Projects"（项目）窗口中显示项目的节点并在编辑器中打开  ``index.html``  文件。

image::images/html5-projectswindow1.png[title="&quot;New HTML5 Application&quot;（新建 HTML5 应用程序）向导中的 &quot;JavaScript Libraries&quot;（JavaScript 库）面板"]

如果在 "Projects"（项目）窗口中展开  ``js/libs``  文件夹，则可以看到在新建项目向导中指定的 JavaScript 库已自动添加到项目。右键单击 JavaScript 文件并在弹出菜单中选择 "Delete"（删除）可以从项目中删除 JavaScript 库。

要将 JavaScript 库添加到项目，请右键单击项目节点，然后选择 "Properties"（属性）以打开 "Project Properties"（项目属性）窗口。在 "Project Properties"（项目属性）窗口的 "JavaScript Libraries"（JavaScript 库）面板中可以添加库。此外，您可以将本地系统上的 JavaScript 文件直接复制到  ``js``  文件夹中。

现在，您可以测试项目在 Chrome 浏览器中是否正确显示。

7. 确认在工具栏的浏览器下拉表中选择了 "Chrome with NetBeans Connector integration"（集成 NetBeans Connector 的 Chrome）。
image::images/html5-js-selectbrowser.png[title="在工具栏下拉列表中选择的浏览器"]
8. 在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Run"（运行）。

选择 "Run"（运行）时，IDE 将在 Chrome 浏览器中打开一个标签，然后显示应用程序的默认  ``index.html``  页面。"Browser DOM"（浏览器 DOM）窗口将在 IDE 中打开，并显示在浏览器中打开的页面的 DOM 树。

image::images/html5-runproject.png[title="Chrome 浏览器标签中的应用程序"]

您可以看到，浏览器标签中有一个黄色的栏，通知您 NetBeans Connector 正在调试标签。在黄色栏可见时，IDE 和浏览器已连接，能够彼此通信。从 IDE 启动 HTML5 应用程序时，JavaScript 调试器将自动启用。将对文件所做的更改保存到 CSS 样式表时，您无需重新加载页，因为浏览器窗口将自动更新以显示更改。

如果选择关闭黄色栏或者单击 "Cancel"（取消），您将断开 IDE 与浏览器之间的连接。如果断开了连接，则需要重新从 IDE 运行 HTML5 应用程序。

您还可以看到，NetBeans 图标在浏览器的 URL 位置字段中可见。您可以单击图标以打开提供了各种选项的菜单，用于更改浏览器的显示大小和启用在 NetBeans 中检查模式。

image::images/html5-runproject2.png[title="Chrome 浏览器标签中的 NetBeans 菜单"]

如果在菜单中选择了默认设备之一，则浏览器窗口将调整到该设备尺寸的大小。这使您可以查看应用程序在所选设备上的外观如何。HTML5 应用程序通常设计为可以根据查看这些应用程序所用设备的屏幕大小做出响应。您可以使用响应屏幕大小的 JavaScript 和 CSS 规则并修改应用程序的显示方式，这样就可以针对设备优化布局。


== 编辑 HTML 文件

在本练习中，您会将项目资源添加到项目，并编辑  ``index.html``  文件以添加指向资源的链接，然后添加几个 CSS 规则。您可以看到，将一些简单的 CSS 选择器与 JavaScript 结合使用即可显著更改页面在浏览器中的显示。

1. 下载link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+项目资源+]归档文件并提取内容。

Zip 归档文件包含两个文件夹，其中带有需要添加到项目的文件： ``pix``  和  ``css`` 。

2. 将  ``pix``  和  ``css``  文件夹复制到站点根文件夹。

*注：*如果要查看项目的目录结构，需要将文件夹复制到  ``public_html``  文件夹。

image::images/html5-fileswindow.png[title="Chrome 浏览器标签中的 NetBeans 菜单"]
3. 在编辑器中打开 `index.html`（如果尚未打开）。
4. 在编辑器中，通过在  ``<head>``  左右标记之间添加以下代码（粗体）来添加引用，指向在创建项目时添加的 JavaScript 库。

[source,xml]
----

<html>
  <head>
    <title></title>
    <meta charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    *<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>*
  </head>
  <body>
    TODO write content
  </body>
</html>
----

您可以在编辑器中使用代码完成功能来获取帮助。

image::images/html5-editor1.png[title="编辑器中的代码完成功能"]
5. 删除默认的 `TODO write content` 注释，并在  ``body``  标记之间键入以下代码。

[source,html]
----

    <body>
        <div>

            <h3><a href="#">Mary Adams</a></h3>
            <div>
                <img src="pix/maryadams.jpg" alt="Mary Adams">
                <ul>
                    <li><h4>Vice President</h4></li>
                    <li><b>phone:</b> x8234</li>
                    <li><b>office:</b> 102 Bldg 1</li>
                    <li><b>email:</b> m.adams@company.com</li>
                </ul>
                <br clear="all">
            </div>

            <h3><a href="#">John Matthews</a></h3>
            <div>
                <img src="pix/johnmatthews.jpg" alt="John Matthews">
                <ul>
                    <li><h4>Middle Manager</h4></li>
                    <li><b>phone:</b> x3082</li>
                    <li><b>office:</b> 307 Bldg 1</li>
                    <li><b>email:</b> j.matthews@company.com</li>
                </ul>
                <br clear="all">
            </div>

            <h3><a href="#">Sam Jackson</a></h3>
            <div>
                <img src="pix/samjackson.jpg" alt="Sam Jackson">
                <ul>
                    <li><h4>Deputy Assistant</h4></li>
                    <li><b>phone:</b> x3494</li>
                    <li><b>office:</b> 457 Bldg 2</li>
                    <li><b>email:</b> s.jackson@company.com</li>
                </ul>
                <br clear="all">
            </div>

            <h3><a href="#">Jennifer Brooks</a></h3>
            <div>
                <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
                <ul>
                    <li><h4>Senior Technician</h4></li>
                    <li><b>phone:</b> x9430</li>
                    <li><b>office:</b> 327 Bldg 2</li>
                    <li><b>email:</b> j.brooks@company.com</li>
                </ul>
                <br clear="all">
            </div>
        </div>
    </body>
----
6. 保存所做的更改。

保存更改时，将在浏览器中自动重新加载页面，其外观应该类似于以下图像。

image::images/html5-runproject3.png[title="在 Chrome 浏览器标签中重新加载的页面"]
7. 在文件的  ``<head>``  标记之间键入以下内联 CSS 规则。

[source,xml]
----

<style type="text/css">
    ul {list-style-type: none}
    img {
        margin-right: 20px; 
        float:left; 
        border: 1px solid;
    }
</style>
----

添加 CSS 规则时，在编辑器中按 Ctrl-Space 可使用代码完成功能。

image::images/html5-editor2.png[title="编辑器中 CSS 规则的代码完成功能"]

打开 "Browser DOM"（浏览器 DOM）窗口可以看到页面的当前结构。

image::images/dom-browser.png[title="显示 DOM 树的 &quot;Browser DOM&quot;（浏览器 DOM）窗口"]
8. 将以下样式表链接（*粗体*）添加到 `<head>` 标记之间。

[source,xml]
----

<head>
...
    <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
    *<link type="text/css" rel="stylesheet" href="css/basecss.css">*
...
</head>
----

 ``basecss.css``  样式表基于在 jQuery "UI lightness" 主题的定制 CSS 样式表中定义的一些 CSS 规则。

可以在编辑器中打开  ``basecss.css``  样式表并修改样式表，用于添加在之前步骤中添加的 CSS 规则或者为 CSS 规则创建新样式表。

9. 在  ``<head>``  标记之间添加以下代码以便在加载页中的元素时运行 jQuery 脚本。

[source,xml]
----

    *<script type="text/javascript">
        $(document).ready(function() {

        });
    </script>*
</head>
----

jQuery 的原理是将动态应用的 JavaScript 属性和行为与 DOM（文档对象模型）元素连接在一起。本例中使用的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，以便得到预期结果。jQuery 通过其内置的 `(document).ready` 函数帮助实现此目的，该函数在 jQuery 对象之后，由 `$` 表示。

还可以使用此函数的以下缩写版。


[source,java]
----

$(function(){

});
----

jQuery 指令采用 JavaScript 方法的形式，通过一个可选的对象字面值来表示参数数组，且必须置于 `(document).ready` 函数内的花括号 `{}` 之间，从而只在合适的时间执行，也就是在 DOM 完全加载后。

10. 在 `(document).ready` 函数的花括号 `{}` 内输入下面的代码（粗体）。

[source,xml]
----

    <script type="text/javascript">
        $(document).ready(function() {
            *$("#infolist").accordion({
                autoHeight: false
            });*
        });
    </script>
</head>
----

此代码将调用包含在 link:http://jqueryui.com/[+jQuery UI 库+]中的 link:http://jqueryui.com/demos/accordion/[+jQuery 折叠窗口部件+]脚本。折叠脚本将修改标识为  ``infolist``  的 DOM 对象中的元素。在此代码中，`#infolist` 是一个 CSS 选择器，连接到一个唯一的 DOM 元素中，该元素有一个值为 `infolist` 的 `id` 属性。它使用典型的 JavaScript 点表示法 ("`.`") 连接到使用 `accordion()` 方法的 jQuery 指令，以显示此元素。

在下一步中，将页中的元素标识为  ``infolist`` 。

*注：*您还在上面的代码片段中指定了 `autoHeight: false`。这样可以防止可折叠面板窗口部件根据标记内包含的最高内容部分设置每个面板的高度。有关详细信息，请参见link:http://docs.jquery.com/UI/Accordion[+可折叠面板 API 文档+]。

`index.html` 文件的  ``<head>``  部分应该类似于以下内容。


[source,xml]
----

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
        <link type="text/css" rel="stylesheet" href="css/basecss.css">

        <style type="text/css">
            ul {list-style-type: none}
            img {
                margin-right: 20px; 
                float:left; 
                border: 1px solid;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#infolist").accordion({
                    autoHeight: false
                });
            });
        </script>
    </head>
----

通过在编辑器中单击右键并选择 "Format"（格式化代码）可以清理代码。

11. 通过添加以下 `id` 选择器和值（粗体），修改包含页面内容的  ``<div>``  元素。

[source,html]
----

<body>
    <div *id="infolist"*>
            
----

此 `<div>` 元素包含页面的内容（在本教程前面部分中添加的四组 `<h3>` 标记和 `<div>` 标记）。

在 "Edit CSS Rules"（编辑 CSS 规则）对话框中，可以将选择器添加到元素。要打开 "Edit CSS Rules"（编辑 CSS 规则）对话框，请在编辑器中右键单击  ``<div>``  标记，然后在弹出式菜单中选择 "Edit CSS Rules"（编辑 CSS 规则）。或者，如果插入光标位于编辑器中的  ``<div>``  标记内，则可以在 "CSS Styles"（CSS 样式）窗口（"Window"（窗口）> "Web" > "CSS Styles"（CSS 样式））中单击 "Edit CSS Rules"（编辑 CSS 规则）按钮 (image::images/newcssrule.png[title="编辑器中的代码完成功能"])。

image::images/html5-cssstyles.png[title="&quot;CSS Styles&quot;（CSS 样式）窗口"]

在 "CSS Rules"（CSS 规则）对话框中，为 "Selector Type"（选择器类型）选择  ``id`` ，然后为 "Selector"（选择器）键入 *infolist*。确认选中了 "Apply Changes to the Element"（应用对元素的更改）。

image::images/html5-cssrules.png[title="&quot;Edit CSS Rules&quot;（编辑 CSS 规则）对话框"]

在对话框中单击 "OK"（确定）时， ``infolist``  选择器的 CSS 规则将自动添加到  ``basecss.css``  样式表。

12. 将更改保存到  ``index.html`` （Ctrl-S；在 Mac 上为 ⌘-S）。

保存更改时，Web 浏览器中的页面将自动加载。可以看到，页面的布局已更改，现在页面将使用在  ``basecss.css``  样式表中定义的 CSS 样式规则。将打开  ``<h3>``  下的一个列表，但其他列表现在折叠。可以单击  ``<h3>``  元素以展开列表。

image::images/html5-runproject5.png[title="最终项目加载到浏览器中"]

jQuery 折叠函数现在将修改  ``infolist``  DOM 对象中包含的所有页面元素。在 "Navigator"（导航器）窗口中，可以查看 HTML 文件的结构以及由  ``id=infolist``  标识的  ``div``  元素。

image::images/navigator3.png[title="&quot;Browser DOM&quot;（浏览器 DOM）窗口"]

可以在 "Navigator"（导航器）窗口中右键单击某个元素并选择 "Go To Source"（转至源）以快速导航到该元素在源文件中的位置。

在 "Browser DOM"（浏览器 DOM）窗口中，可以查看在浏览器中呈现的页中 DOM 元素以及应用到这些元素的 JQuery 样式。

image::images/dom-browser3.png[title="&quot;Browser DOM&quot;（浏览器 DOM）窗口"]

如果在浏览器中启用了 "Inspect in NetBeans"（在 NetBeans 中检查）模式，则在浏览器窗口中选择某个元素时，将在 "Browser DOM"（浏览器 DOM）窗口中突出显示此元素。


[[template]]
== 将项目另存为站点模板

您可以将项目另存为站点模板，使用该模板基于此项目来创建其他 HTML5 站点。站点模板可以包括 HTML 文件的 JavaScript 库、CSS 文件、图像和模板。IDE 提供了向导，用于帮助您选择要包括在站点模板中的文件。

1. 在 "Projects"（项目）窗口中右键单击项目，然后从弹出菜单中选择 "Save as Template"（另存为模板）。
2. 在 "Name"（名称）字段中键入 *HTML5DemoSiteTemplate* 并指定要将模板保存到的位置。
3. 确认所有文件已选中。单击 "Finish"（完成）。

如果在对话框的树中展开节点，则可以看到文件将包含在站点模板中。

image::images/html5-sitetemplate.png[title="&quot;Create Site Template&quot;（创建站点模板）对话框"]

您可以看到站点模板包括  ``index.html``  文件、CSS 样式表、项目中使用的图像以及 JavaScript 库。站点模板还可以包含任意配置文件和测试。

单击 "Finish"（完成）时，IDE 将生成  ``.zip``  归档文件格式的站点模板。

在需要根据站点模板创建项目时，请在新建项目向导的 "Site Template"（站点模板）面板中指定  ``.zip``  归档文件的位置。


[[summary]]
== 小结

在本教程中，您已学习了如何创建使用多个 jQuery JavaScript 库的空 HTML5 项目。您还学习了如何为 Chrome 浏览器安装 NetBeans Connector 扩展以及在浏览器中运行 HTML5 项目。编辑  ``index.html``  文件时，可以看到 IDE 提供了一些工具，可以帮助您编辑 HTML 和 CSS 文件。

link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20HTML5%20Applications[+发送有关此教程的反馈意见+]


[[seealso]]
== 另请参见

有关 link:https://netbeans.org/[+netbeans.org+] 中 HTML5 应用程序支持的详细信息，请参见以下资源：

* link:html5-editing-css.html[+在 HTML5 应用程序中使用 CSS 样式表+]。该文档继续使用在本教程中创建的应用程序，说明如何在 IDE 中使用部分 CSS 向导和窗口，以及如何在 Chrome 浏览器中使用检测模式以直观地在项目源代码中查找元素。
* link:html5-js-support.html[+在 HTML5 应用程序中调试和测试 JavaScript+]。此文档说明 IDE 如何提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。

有关 jQuery 的更多信息，请参见官方文档：

* 官方主页：link:http://jquery.com[+http://jquery.com+]
* UI 主页：link:http://jqueryui.com/[+http://jqueryui.com/+]
* 教程：link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+]
* 文档主页：link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+]
* UI 演示和文档：link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]