// 
//     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

В этом документе описывается создание проекта HTML5 в IDE и некоторые функции в IDE, которые поддерживают использование JavaScript и CSS в используемом проекте. В этом документе будет создано простое приложение HTML5, в котором будет использоваться библиотека JQuery JavaScript для изменения списка на веб-странице.

В настоящем документе также демонстрируется способ установки расширения NetBeans Connector для браузера Chrome из веб-магазина Chrome.

Для просмотра экранного рпредставления этого учебного курса см. link:../web/html5-gettingstarted-screencast.html[+Видео по началу работы с приложениями HTML5+].

Подробнее о том, как использовать JQuery в веб-приложениях Java NetBeans, см. учебный курс link:../web/js-toolkits-jquery.html[+Использование jQuery для усовершенствования внешнего вида и удобства веб-страницы+].


image::images/netbeans-stamp-80-74.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.4 и 8.0"]


==== Для выполнения этого учебного курса потребуются следующие материалы.

|===
|Программное обеспечение или ресурс |Требуемая версия 

|link:https://netbeans.org/downloads/index.html[+IDE NetBeans, 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[+Расширение NetBeans Connector для Chrome+] |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 и установить расширение NetBeans Connector link:https://chrome.google.com/webstore/[+веб-магазина Chrome+]. Расширение нужно устанавливать только один раз.

После установки расширение NetBeans Connector добавляет в меню 'Действия NetBeans', которые доступны из адресной строки URL при запуске проекта NetBeans HTML5 в браузере Chrome. В меню 'Действия NetBeans' можно включить проверку в режиме NetBeans и быстро изменить размер окна браузера в соответствии с размерами распространенных устройств отображения. Отладчик JavaScript также включается автоматически при запуске приложения HTML5.


=== Установка расширения из веб-магазина Chrome

Будет автоматически отображен запрос на установку расширения NetBeans Connector при запуске проекта приложения NetBeans HTML5 из IDE и выборе Chrome с NetBeans Integration в качестве целевого браузера. Это упражнение демонстрирует, как установить расширение путем создания и запуска фиктивного проекта HTML5. Это упражнение можно пропустить и установить расширение при появлении запроса в IDE или установить расширение NetBeans Connector напрямую из веб-магазина Chrome.

*Примечание.* IDE откроет веб-магазин Chrome в браузере, заданном по умолчанию. Если Chrome не установлен в качестве браузера по умолчанию для IDE, необходимо открыть окно настроек и выбрать Chrome в раскрывающемся списке 'Веб-браузер' в категории 'Общее', прежде чем выполнить следующие действия.

1. Выберите в меню "Файл" пункт "Новый проект", чтобы открыть мастер создания проекта.
2. Выберите 'Приложение HTML5' в категории HTML/JavaScript. Нажмите кнопку 'Далее'.
3. Задайте имя и местоположение для проекта. Нажмите кнопку 'Далее'.

Для этого упражнения имя не имеет значения.

4. Выберите 'Без шаблона сайта'. Нажмите кнопку 'Готово'.

Когда вы нажмете кнопку 'Готово', IDE создаст новый проект HTML5 и откроет файл  ``index.html``  в редакторе.

5. Убедитесь, что на панели инструментов в раскрывающимся списке выбран Chrome с NetBeans Integration.
6. Нажмите кнопку 'Выполнить' на панели инструментов.
7. Щелкните 'Перейти к веб-магазину Chrome' в диалоговом окне 'Установить расширение Chrome'.
image::images/html5-offline-extension1.png[title="Диалоговое окно 'Установить расширение Chrome'"]

При нажатии кнопки 'Перейти к веб-магазину Chrome' страница NetBeans Connector в веб-магазине Chrome откроется в браузере Chrome.

*Примечание.* В окне 'Установить расширение Chrome' отображается кнопка, после щелчка на которой выполняется установка расширения.

image::images/html5-rerun-dialog.png[title="Диалоговое окно 'Установить расширение Chrome'"]
8. Перейдите к браузеру Chrome и нажмите кнопку 'Добавить в Chrome' на странице NetBeans Connector. Нажмите кнопку 'Добавить' при отображении запроса на подтверждение добавления расширения.
image::images/html5-chrome-netbeanshome.png[title="Страница NetBeans Connector в веб-магазине Chrome"]

Когда расширение установлено, вы увидите уведомление о том, что расширение добавлено, а значок NetBeans Connector будет отображаться в адресной строке URL при запуске проекта NetBeans HTML5 в браузере Chrome.

image::images/html5-install-extension2.png[title="Подтверждение того, что расширение было установлено"]
9. В IDE нажмите 'Повторно запустить проект' в диалоговом окне 'Установить расширение Chrome'.

После нажатия 'Повторно запустить проект' в браузере Chrome откроется новая вкладка и отобразится страница индексов приложений HTML5.

После установки расширения вы увидите, что значок NetBeans Connector будет отображаться в адресной строке URL при запуске проекта NetBeans HTML5 в браузере Chrome.

При открытии страницы расширений Chrome ( ``chrome://extensions/`` ) для браузера Chrome вы увидите, что расширение в настоящее время включено.

image::images/html5-install-extension3.png[title="Расширение NetBeans Connector включено в расширениях Chrome"]

*Примечание.* Кроме того, можно установить расширение NetBeans Connector непосредственно из веб-магазина Chrome, выполнив следующие шаги.

1. Запустите браузер Chrome и перейдите в link:https://chrome.google.com/webstore/[+веб-магазин Chrome+].
2. Выполните поиск расширения Netbeans Connector в веб-магазине Chrome.
3. Нажмите кнопку 'Добавить к Chrome' на странице результатов поиска и нажмите кнопку 'Добавить' при отображении запроса на добавление расширения. 
image::images/html5-install-extension1.png[title="Расширение NetBeans Connector в веб-магазине Chrome"]


=== Автономная установка расширения

Если не удается подключиться к веб-магазину Chrome, можно установить расширение NetBeans Connector, который входит в комплект с IDE. Если при запуске проекта NetBeans HTML5 будет предложено установить расширение NetBeans Connector, вы можете выполнить следующие действия, чтобы установить расширение при отсутствии доступа к веб-магазину Chrome.

1. Щелкните 'Отсутствует подключение' в диалоговом окне 'Установить расширение Chrome'.
image::images/html5-offline-extension1.png[title="Диалоговое окно 'Установить расширение Chrome'"]
2. Щелкните *найти* в диалоговом окне, чтобы открыть папку установки IDE NetBeans в локальной системе, содержащей расширение * ``netbeans-chrome-connector.crx`` *.
image::images/html5-offline-extension2.png[title="Расширение NetBeans Connector включено в расширениях Chrome"]
3. Откройте страницу расширений Chrome ( ``chrome://extensions/`` ) в браузере Chrome.
image::images/html5-offline-extension3.png[title="Расширение NetBeans Connector включено в расширениях Chrome"]
4. Перетащите расширение  ``netbeans-chrome-connector.crx``  на страницу 'Расширения' в браузере и нажмите кнопку 'Добавить', чтобы подтвердить добавление расширения.

После добавления расширения вы увидите, что расширение NetBeans Connector добавлено в список установленных расширений.

5. Щелкните *Да, подключаемый модуль сейчас установлен* в диалоговом окне 'Установить расширение Chrome', чтобы открыть проект NetBeans HTML5 в браузере Chrome. Вы увидите значок NetBeans Connector в адресной строке вкладки браузера.


== Использование встроенного браузера на базе WebKit

Рекомендуется запускать приложения HTML5 в браузере Chrome с установленным расширением NetBeans Connector при разработке приложений. Параметр *Chrome с интеграцией NetBeans* выделяется по умолчанию при запуске целевого элемента при создании в приложении HTML5. Тем не менее, также возможен запуск приложений HTML5 во встроенном браузере на базе WebKit, который входит в комплект с IDE.

При запуске приложения HTML5 во встроенном браузере на базе WebKit в IDE открывается окно веб-браузера. Встроенный браузер на базе WebKit поддерживает многие функции, которые включены в браузере Chrome, при условии установки расширения NetBeans Connector, в том числе режим проверки, выбор различных вариантов размера экрана и отладка JavaScript.

*Примечание.* При выборе 'Окно' > 'Интернет' > 'Веб-браузер' в главном меню IDE открывает браузер, который указан в качестве веб-браузера в окне 'Параметры'.

Выполните следующие действия, чтобы запустить приложение HTML5 application во встроенном браузере на базе WebKit.

1. Выберите встроенный браузер на базе WebKit в раскрывающемся списке на панели инструментов.
image::images/html5-embedded1.png[title="Список целевых браузеров для приложений HTML5 в раскрывающемся списке на панели инструментов"]
2. Нажмите 'Выполнить' на панели инструментов или щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Выполнить'.

При запуске приложения окно веб-браузера открывается в IDE.

image::images/html5-embedded2.png[title="Окно встроенного браузера на базе WebKit"]

Можно щелкнуть значки на панели инструментов вкладки веб-браузера, чтобы включить режим проверки и быстро переключаться между различными размерами экрана.


== Создание проекта HTML5 NetBeans

В этом упражнении мы используем мастер создания проектов в IDE, чтобы создать новый проект HTML5. В этом учебном курсе создается очень простой проект HTML5, который имеет только файл  ``index.html`` . В мастере также будут выбраны некоторые библиотеки JQuery JavaScript, которые будут использоваться в проекте.

1. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.
2. Выберите категорию *HTML5*, затем выберите *Приложение HTML5*. Нажмите кнопку 'Далее'.
image::images/html5-newproject1.png[title="Шаблон приложения HTML5 в мастере создания проектов"]
3. Введите *HTML5Demo* в качестве имени проекта и укажите каталог на компьютере, где следует сохранить проект. Нажмите кнопку 'Далее'.
4. В шаге 3. Шаблон сайта, выберите 'Без шаблона сайта'. Нажмите кнопку 'Далее'.
image::images/html5-newproject2.png[title="Панель шаблонов сайта в мастере создания приложений HTML5"]

При выборе 'Без шаблона сайта' мастер создает базовый пустой проект NetBeans HTML5. Если нажать кнопку 'Готово', проект будет содержать только папку корня сайта и файл  ``index.html``  в папке корня сайта.

Страница шаблона сайта мастера позволяет выбрать необходимое из списка популярных интерактивных шаблонов для проектов HTML5 или указать местоположение архива  ``.zip``  шаблона сайта. Можно ввести адрес URL архива  ``.zip``  или щелкнуть 'Обзор', чтобы указать местоположение в локальной системе. Когда вы создаете проект на основе шаблона сайта, файлы, библиотеки и структура проекта определяется шаблоном.

*Примечание.* Вы должны быть подключены к сети, чтобы создать проект, который основан на одном из интернет-шаблонов в списке.

5. В шаге 4. Файлы JavaScript - выберите библиотеки JavaScript  ``jquery``  и  ``jquerygui``  на панели 'Доступные' и щелкните значок со стрелкой вправо ( > ), чтобы переместить выбранные библиотеки на панель мастера 'Выбранное'. По умолчанию библиотеки создаются в папке проекта  ``js/libraries`` . В этом учебном курсе будут использоваться "уменьшенные" версии библиотек JavaScript.

Можно использовать текстовое поле на панели, чтобы отфильтровать список библиотек JavaScript. Например, введите *jq* в поле, чтобы найти библиотеки  ``jquery`` . Вы можете удерживать нажатой клавишу Ctrl и щелкнуть левой кнопкой мыши имена библиотек для выбора нескольких библиотек.

image::images/html5-newproject3.png[title="Панель 'Библиотеки JavaScript' в мастере создания приложений HTML5"]

*Примечания.*

* Можно нажать номер версии библиотеки в столбце 'Версия', чтобы открыть всплывающее окно, в котором можно выбрать предыдущие версии библиотек. По умолчанию в мастере отображается самая последняя версия.
* Минимизированные версии библиотек JavaScript - это сжатые версии, и при просмотре в редакторе код не является доступным для понимания.
6. Для завершения мастера нажмите кнопку *Готово*.

После нажатия кнопки 'Готово' в IDE создается проект, отображается узел проекта в окне 'Проекты' и открывается файл  ``index.html``  в редакторе.

image::images/html5-projectswindow1.png[title="Панель 'Библиотеки JavaScript' в мастере создания приложений HTML5"]

Если развернуть папку  ``js/libs``  в окне 'Проекты', будет видно, что библиотеки JavaScript, которые были указаны в мастере создания проектов, были автоматически добавлены к проекту. Можно удалить библиотеку JavaScript из проекта, щелкнув правой кнопкой мыши файл JavaScript и выбрав 'Удалить' во всплывающем меню.

Чтобы добавить библиотеку JavaScript к проекту, щелкните правой кнопкой мыши узел проекта и выберите 'Свойства', чтобы открыть окно 'Свойства проекта'. Можно добавлять библиотеки к панели 'Библиотеки JavaScript' в окне 'Cвойства проекта'. Кроме того, можно скопировать файл JavaScript, который находится в локальной системе, напрямую в папку  ``js`` .

Теперь можно проверить, правильно ли отображается данный проект в браузере Chrome.

7. Убедитесь, что на панели инструментов браузера в раскрывающимся списке выбран Chrome с NetBeans Integration.
image::images/html5-js-selectbrowser.png[title="Браузер, выбранный в раскрывающемся списке на панели инструментов."]
8. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Выполнить".

При выборе 'Выполнить в IDE' открывается вкладка в браузере Chrome и отображается страница  ``index.html``  по умолчанию для приложения. В среде IDE открывается окно 'Обзор DOM', в котором отображается дерево DOM открытой в браузере страницы.

image::images/html5-runproject.png[title="Приложение на вкладке браузера Chrome"]

Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.

При закрытии желтой полосы или щелчка 'Отмена' разрывается соединение между IDE и браузером. В случае разрыва соединения необходимо запустить приложение HTML5 из IDE повторно.

Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере и для включения режима проверки в режиме NetBeans.

image::images/html5-runproject2.png[title="Меню NetBeans на вкладке браузера Chrome"]

Если выбрать одно из заданных по умолчанию устройств в меню, размер окна браузера будет изменяться в соответствии с размерами выбранного устройства. Это позволит увидеть, как приложение будет выглядеть на выбранном устройстве. Приложения 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="Меню NetBeans на вкладке браузера Chrome"]
3. Откройте в редакторе `index.html` (если он еще не открыт).
4. В редакторе добавьте ссылки на библиотеки JavaScript, которые были добавлены при создании проекта, добавив следующий код (выделен полужирным шрифтом) между открывающим и закрывающим тегами  ``<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>*
  </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. Введите следующие встроенные правила CSS между тегами  ``<head>``  в файле.

[source,xml]
----

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

Нажмите сочетание клавиш Ctrl-Space, чтобы использовать функцию автозавершения кода в редакторе при добавлении правил CSS.

image::images/html5-editor2.png[title="Автозавершение кода правил CSS в редакторе"]

Если открыть окно 'Обзор DOM', отображается текущая структура страницы.

image::images/dom-browser.png[title="Окно 'Обзор DOM' с деревом 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``  основана на определенных правилах CSS, определенных на страницах стилей CSS, в теме "UI lightness" jQuery.

Можно открыть страницу стилей  ``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/demos/accordion/[+jQuery accordion widget+], включенный в link:http://jqueryui.com/[+библиотеку пользовательского интерфейса jQuery+]. Сценарий accordion изменит элементы в объекте DOM, идентифицированном как  ``infolist`` . В этом коде `#infolist` — это селектор CSS, подключенный к уникальному элементу DOM, имеющему атрибут `id` со значением `infolist`. С помощью обычной точечной нотации JavaScript ('`.`') он подключается к инструкции jQuery, использующей метод `accordion()` для отображения этого элемента.

В следующем шаге будет выполнена идентификация элемента на странице как  ``infolist`` .

*Примечание.* В приведенном выше фрагменте кода также было указано '`autoHeight: false`'. Это препятствует установке элементом оформления accordion высоты каждой панели на основе самой высокой части содержимого в разметке. Дополнительные сведения см. в link:http://docs.jquery.com/UI/Accordion[+документации accordion API+].

Раздел  ``<head>``  файла `index.html` должен выглядеть следующим образом.


[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>
----

Код можно упорядочить, щелкнув правой кнопкой мыши в редакторе и выбрав 'Формат'.

11. Измените элемент  ``<div>`` , заключающий содержимое страницы. путем добавления следующего средства выбора и значения `id` (выделено полужирным шрифтом).

[source,html]
----

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

Этот элемент `<div>` заключает содержимое страницы (четыре набора тегов `<h3>` и тегов `<div>`, добавленных ранее в этом учебном курсе).

Можно добавить средство выбора к элементу в диалоговом окне 'Изменить правила CSS'. Чтобы открыть диалоговое окно "Изменить правила CSS", щелкните правой кнопкой мыши тег  ``<div>``  в редакторе и выберите пункт меню "Изменить правила CSS". Также можно поместить курсор вставки в тег  ``<div>``  в редакторе и нажать кнопку "Изменить правила CSS" (image::images/newcssrule.png[title="Автозавершение кода в редакторе"]) в окне "Cтили CSS" (Окно > Веб > Стили CSS).

image::images/html5-cssstyles.png[title="Окно 'Стили CSS'"]

В диалоговом окне 'Правила CSS' выберите  ``id``  как 'Тип средства выбора' и введите *infolist* как 'Средство выбора'. Убедитесь, что установлен флажок 'Применить изменения к элементу'.

image::images/html5-cssrules.png[title="Диалоговое окно 'Изменение правил CSS'"]

При нажатии кнопки ОК в диалоговом окне правило CSS для средства выбора  ``infolist``  автоматически добавляется к таблице стилей  ``basecss.css`` .

12. Сохраните внесенные изменения в  ``index.html``  (Ctrl-S; ⌘-S в Mac).

При сохранении изменений страница автоматически перезагружается в веб-браузере. Отображается, что макет страницы был изменен и что на странице теперь используются правила стилей CSS, которые определены в таблице стилей  ``basecss.css`` . Один из снимков ниже  ``<h3>``  открыт, но другие свернуты. Чтобы развернуть список, можно щелкнуть элемент  ``<h3>`` .

image::images/html5-runproject5.png[title="Окончательный проект будет загружен в браузер"]

Функция jQuery Accordion теперь изменяет все элементы страницы, которые содержатся в объекте DOM  ``infolist`` . В окне "Навигатор" видна структура файла HTML с элементом  ``div`` , определенным как  ``id=infolist`` .

image::images/navigator3.png[title="Окно 'Обзор DOM'"]

Можно щелкнуть правой кнопкой мыши элемент в окне 'Навигатор' и выбрать 'Перейти к источнику' для быстрого перехода к местоположению этого элемента в файле исходного кода.

В окне "Обозреватель DOM" видны элементы DOM страницы, открытой в браузере, и стили JQuery, примененные к этим элементам.

image::images/dom-browser3.png[title="Окно 'Обзор DOM'"]

Если в браузере включен параметр "Проверка в режиме NetBeans", элементы, выбранные в окне браузера, подсвечиваются в окне "Обозреватель DOM".


[[template]]
== Сохранение проекта как шаблона сайта

Можно сохранить проект в виде шаблона сайта, который можно использовать в качестве шаблона для создания других сайтов HTML5, которые основаны на проекте. Шаблон сайта может включать в себя библиотеки JavaScript, файлы CSS, изображения и шаблоны для HTML файлов. IDE предоставляет мастеру вспомогательные средства, позволяющие выбрать файлы, которые необходимо включить в шаблон сайта.

1. Правой кнопкой мыши щелкните проект в окне 'Проекты' и выберите 'Сохранить как шаблон' во всплывающем меню.
2. Введите *HTML5DemoSiteTemplate* в поле 'Имя' и укажите местоположение сохранения шаблона.
3. Убедитесь, что выбраны все файлы. Нажмите кнопку 'Готово'.

Если развернуть узлы дерева в диалоговом окне, можно просмотреть файлы, которые будут включены в шаблон сайта.

image::images/html5-sitetemplate.png[title="Диалоговое окно 'Создать шаблон сайта'"]

Отображается, что шаблон сайта будет включать файл  ``index.html`` , таблицу стилей CSS и изображения, используемые в проекте, а также наличие библиотек JavaScript. Шаблон сайта может также включать любые файлы конфигурации и тесты.

При нажатии на кнопку "Готово" IDE создает шаблон сайта в виде архива  ``.zip`` .

Если необходимо создать проект, основанный на шаблоне сайта, укажите местоположение архива  ``.zip``  на панели 'Шаблон сайта' мастера создания проектов.


[[summary]]
== Заключение

В этом учебном курсе вы узнали, как создавать пустой проект HTML5, в котором используется пара библиотек jQuery JavaScript. Вы также узнали, как создавать расширение NetBeans Connector для браузера Chrome и запускать проект HTML5 в браузере. При изменении файла  ``index.html``  отображается, что IDE предоставляет определенные средства, которые можно использовать для редактирования файлов HTML и CSS.

link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20HTML5%20Applications[+Отправить отзыв по этому учебному курсу+]


[[seealso]]
== См. также

Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте link:https://netbeans.org/[+www.netbeans.org+]:

* link:html5-editing-css.html[+Работа со страницами стилей CSS в приложениях HTML5+] Документ, который продолжает работу с приложением, которое было создано в этом учебном курсе. Он показывает, как использовать некоторые из мастеров CSS и окон в IDE и как использовать режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.
* link:html5-js-support.html[+Отладка и тестирование JavaScript в приложениях HTML5+] Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.

Дополнительные сведения о 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+]
* Демонстрации интерфейса пользователя и документация: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]