Новости

Початок роботи з додатками HTML5

  1. зміст
  2. Використання IDE з браузером Chrome
  3. Установка розширення з веб-магазину Chrome
  4. Автономна установка розширення
  5. Використання вбудованого браузера на базі WebKit
  6. Створення проекту HTML5 NetBeans
  7. Редагування файлу HTML
  8. Збереження проекту як шаблону сайту
  9. Висновок
  10. Див. такоже

В IDE NetBeans 7.3 представлений новий тип проектів, який можна використовувати для розробки додатків HTML5. У цьому документі описується створення проекту HTML5 в IDE і деякі функції в IDE, які підтримують використання JavaScript і CSS в використовуваному проекті. У цьому документі буде створено просте додаток HTML5, в якому буде використовуватися бібліотека JQuery JavaScript для зміни списку на веб-сторінці.

У цьому документі також демонструється спосіб установки розширення NetBeans Connector для браузера Chrome з веб-магазину Chrome.

Для перегляду екранного рпредставленія цього навчального курсу см. Відео по початку роботи з додатками HTML5 .

Детальніше про те, як використовувати JQuery в веб-додатках Java NetBeans, см. Навчальний курс Використання jQuery для удосконалення зовнішнього вигляду і зручності веб-сторінки .

зміст

В IDE NetBeans 7

Для виконання цього навчального курсу будуть потрібні наступні матеріали.

Примітки.

  • файл ресурсів проекту в форматі zip містить зображення у форматі JPG і файл CSS, який необхідно додати до проекту в цьому навчальному курсі.
  • При порівнянні проекту з працюючим рішенням можна завантажити шаблон сайту завершеного проекту.
  • Передбачається, що читач має базові знання або досвід програмування на HTML, CSS і JavaScript.

Використання IDE з браузером Chrome

Щоб скористатися деякими інструментами, доступними в IDE з підтримкою розробки додатків HTML5, рекомендується використовувати браузер Chrome і встановити розширення NetBeans Connector веб-магазину 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. Виберіть 'Без шаблону сайту'. Клацніть по кнопці Finish '.

    Коли ви натиснете кнопку 'Готово', IDE створить новий проект HTML5 і відкриє файл index.html в редакторі.

  5. Переконайтеся, що на панелі інструментів в розкривається списку вибраний Chrome з NetBeans Integration.
  6. Натисніть кнопку 'Виконати' на панелі інструментів.
  7. Клацніть 'Перейти до веб-магазину Chrome' в діалоговому вікні 'Встановити розширення Chrome'.

    При натисканні кнопки "Перейти до веб-магазину Chrome 'сторінка NetBeans Connector в веб-магазині Chrome відкриється в браузері Chrome.

    Примітка. У вікні 'Встановити розширення Chrome' відображається кнопка, після клацання на якій виконується установка розширення.

  8. Перейдіть до браузеру Chrome і натисніть кнопку 'Додати в Chrome' на сторінці NetBeans Connector. Натисніть кнопку 'Додати' при відображенні запиту на підтвердження додавання розширення.

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

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

  9. В IDE натисніть 'Повторно запустити проект' в діалоговому вікні 'Встановити розширення Chrome'.

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

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

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

При відкритті сторінки розширень Chrome (chrome: // extensions /) для браузера Chrome ви побачите, що розширення в даний час включено

Примітка. Крім того, можна встановити розширення NetBeans Connector безпосередньо з веб-магазину Chrome, виконавши наступні кроки.

  1. Запустіть браузер Chrome і перейдіть в веб-магазин Chrome .
  2. Виконайте пошук розширення Netbeans Connector в веб-магазині Chrome.
  3. Натисніть кнопку 'Додати до Chrome' на сторінці результатів пошуку та натисніть кнопку 'Додати' при відображенні запиту на додавання розширення.

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

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

  1. Клацніть 'Відсутня підключення' в діалоговому вікні 'Встановити розширення Chrome'.
  2. Клацніть знайти в діалоговому вікні, щоб відкрити папку установки IDE NetBeans в локальній системі, яка містить розширення netbeans-chrome-connector.crx.
  3. Відкрийте сторінку розширень Chrome (chrome: // extensions /) в браузері 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 в списку на панелі інструментів.
  2. Натисніть 'Виконати' на панелі інструментів або клацніть правою кнопкою миші вузол проекту у вікні 'Проекти' і виберіть 'Виконати'.

    При запуску програми вікно веб-браузера відкривається в IDE.

    При запуску програми вікно веб-браузера відкривається в IDE

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

Створення проекту HTML5 NetBeans

У цій вправі ми використовуємо майстер створення проектів в IDE, щоб створити новий проект HTML5. У цьому навчальному курсі створюється дуже простий проект HTML5, який має тільки файл index.html. У майстра також будуть обрані деякі бібліотеки JQuery JavaScript, які будуть використовуватися в проекті.

  1. Виберіть 'Файл'> 'Новий проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в головному меню, щоб відкрити майстер створення проектів.
  2. Виберіть категорію HTML / JavaScript, а потім виберіть Додаток HTML5. Натисніть кнопку "Далі'.
  3. Введіть HTML5Demo як ім'я проекту і вкажіть каталог на комп'ютері, де слід зберегти проект. Натисніть кнопку "Далі'.
  4. За крок 3. Шаблон сайту, виберіть 'Без шаблону сайту'. Натисніть кнопку "Далі'.

    При виборі 'Без шаблону сайту' майстер створює базовий порожній проект NetBeans HTML5. Якщо натиснути кнопку 'Готово', проект буде містити тільки папку кореня сайту і файл index.html в папці кореня сайту.

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

    Примітка. Ви повинні бути підключені до мережі, щоб створити проект, який заснований на одному з інтернет-шаблонів в списку.

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

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

    Ви можете утримувати клавішу Ctrl і клацнути лівою кнопкою миші імена бібліотек для вибору декількох бібліотек

    Примітки.

    • Можна натиснути номер версії бібліотеки в стовпці 'Версія', щоб відкрити спливаюче вікно, в якому можна вибрати попередні версії бібліотек. За замовчуванням в майстра відображається сама остання версія.
    • Мінімізовані версії бібліотек JavaScript - це стислі версії, і при перегляді в редакторі код не є доступним для розуміння.
  6. Для завершення майстра натисніть кнопку Готово.

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

    html в редакторі

    Якщо розгорнути папку js / libs у вікні 'Проекти', буде видно, що бібліотеки JavaScript, які були вказані в майстра створення проектів, були автоматично додані до проекту. Можна видалити бібліотеку JavaScript з проекту, клацнувши правою кнопкою миші файл JavaScript і вибравши 'Видалити' у спливаючому меню.

    Щоб додати бібліотеку JavaScript до проекту, клацніть правою кнопкою миші вузол проекту і виберіть 'Властивості', щоб відкрити вікно 'Властивості проекту'. Можна додавати бібліотеки до панелі 'Бібліотеки JavaScript' у вікні 'Властивості проекту'. Крім того, можна скопіювати файл JavaScript, який знаходиться в локальній системі, безпосередньо в папку js.

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

  7. Переконайтеся, що на панелі інструментів в розкривається списку вибраний Chrome з NetBeans Integration.
  8. Клацніть правою кнопкою миші вузол проекту у вікні "Проекти" і виберіть "Виконати".

При виборі 'Виконати в IDE' відкривається вкладка в браузері Chrome і відображається сторінка index.html за замовчуванням для програми.

html за замовчуванням для програми

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

При закритті жовтої смуги або клацання 'Скасувати' розривається з'єднання між IDE і браузером. У разі розриву з'єднання необхідно запустити додаток HTML5 з IDE повторно.

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

Ви можете клацнути значок, щоб відкрити меню, яке надає різні варіанти для зміни розміру зображення в браузері і для включення режиму перевірки в режимі NetBeans

Якщо вибрати одне із заданих за замовчуванням пристроїв в меню, розмір вікна браузера буде змінюватися відповідно до розмірів вибраного пристрою. Це дозволить побачити, як додаток буде виглядати на вибраному пристрої. Додатки HTML5 зазвичай реагують на розмір екрану пристрою, на якому вони проглядаються. Можна використовувати правила JavaScript і CSS, які реагують на розмір екрану, а також змінити спосіб відображення програми таким чином, щоб його макет був оптимізований для пристрою.

Редагування файлу HTML

У цій вправі будуть додані ресурси проекту до проекту і буде виконано редагування файлу index.html для додавання посилань на ресурси і деяких правил CSS. Ви побачите, як кілька простих засобів вибору CSS в поєднанні з JavaScript можуть значно змінити те, як сторінка відображається в браузері.

  1. завантажте архів ресурси проекту і витягніть вміст.

    ZIP-архів містить дві папки з файлами, які потрібно додати до проекту: pix і css.

  2. Скопіюйте папки pix і css в кореневу папку сайту.

    Примітка. Якщо проаналізувати структуру каталогів проекту, необхідно скопіювати папки в папку public_html.

    Якщо проаналізувати структуру каталогів проекту, необхідно скопіювати папки в папку public_html

  3. Відкрийте в редакторі index.html (якщо він ще не відкритий).
  4. У редакторі додайте посилання на бібліотеки JavaScript, які були додані при створенні проекту, додавши наступний код (виділено напівжирним шрифтом) між відкриває і закриває тегами <head>. <html> <head> <title> </ title> <meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8"> <script type = "text / javascript" src = " js / libs / jquery-1.8.3 / jquery.min.js "> </ script> <script type =" text / javascript "src =" js / libs / jqueryui-1.9.2 / jquery-ui.min.js "> </ script> </ head> <body> TODO write content </ body> </ html>

    Для вирішення завдань можна використовувати функцію автозаповнення коду в редакторі.

    Для вирішення завдань можна використовувати функцію автозаповнення коду в редакторі

  5. Видаліть заданий за замовчуванням коментар 'TODO write content' і введіть наступний код між тегами body. <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> </ 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> </ 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> </ 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> < / Li> </ ul> <br clear="all"> </ div> </ div> </ body>
  6. Збережіть зміни.

    При збереженні змін сторінка автоматично перезавантажується в браузері і повинна виглядати приблизно так, як показано нижче.

    При збереженні змін сторінка автоматично перезавантажується в браузері і повинна виглядати приблизно так, як показано нижче

  7. Введіть наступні вбудовані правила CSS між тегами <head> в файлі. <Style type = "text / css"> ul {list-style-type: none} img {margin-right: 20px; float: left; border: 1px solid; } </ Style>

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

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

    При відкритті вікна 'Навігатор' відображається поточна страктура навігатора.

    При відкритті вікна 'Навігатор' відображається поточна страктура навігатора

  8. Додайте наступне посилання на сторінку стилів (виділена напівжирним шрифтом) між тегами <head>. <head> ... <script type = "text / javascript" src = "js / libs / jqueryui-1.9.2 / jquery-ui.min.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 при завантаженні елементів сторінки. <script type = "text / javascript"> $ (document) .ready (function () {}); </ script> </ head>

    jQuery працює шляхом підключення динамічно застосованих атрибутів і поводжень JavaScript до елементів моделі DOM (об'єктній моделі документа). Команди jQuery, які буде використовуватися в цьому прикладі, повинні бути виконані тільки після завантаження браузером всіх елементів моделі DOM. Це важливо, тому що поведінки jQuery підключаються до елементів моделі DOM, і ці елементи повинні бути доступні для jQuery для отримання очікуваних результатів. jQuery виконує це за нас за допомогою вбудованої функції (document) .ready, яка слідує за об'єктом jQuery, представленим $.

    Також можна використовувати наступну скорочену версію цієї функції.

    $ (Function () {});

    Команди для jQuery приймають форму методу JavaScript з додатковим об'єктним літералом, які надають масив параметрів, який повинен бути поміщений між фігурними дужками {} в функції (document) .ready для виконання тільки в допустимий момент, тобто після повного завантаження моделі DOM.

  10. Введіть наступний код (виділено напівжирним шрифтом) всередині функції (document) .ready, між дужок {}. <script type = "text / javascript"> $ (document) .ready (function () {$ ( "# infolist"). accordion ({autoHeight: false});}); </ Script> </ head>

    Цей код викличе сценарій jQuery accordion widget , Включений в бібліотеку призначеного для користувача інтерфейсу jQuery . Сценарій accordion змінить елементи в об'єкті DOM, ідентифікованому як infolist. У цьому коді #infolist - це селектор CSS, підключений до унікального елементу DOM, має атрибут id зі значенням infolist. За допомогою звичайної точкової нотації JavaScript ( '.') Він підключається до інструкції jQuery, що використовує метод accordion () для показу цього елементу.

    У наступному кроці буде виконана ідентифікація елемента на сторінці як infolist.

    Примітка. У наведенні вищє фрагменті коду такоже Було вказано 'autoHeight: false'. Це перешкоджає установці елементом оформлення accordion висоти кожної панелі на основі найвищої частини вмісту в розмітці. Додаткові відомості див. У документації accordion API .

    Розділ <head> файлу index.html повинен виглядати наступним чином.

    <Html> <head> <title> </ title> <meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8"> <script type = "text / javascript" src = " js / libs / jquery-1.8.3 / jquery.min.js "> </ script> <script type =" text / javascript "src =" js / libs / jqueryui-1.9.2 / jquery-ui.min.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 (виділено напівжирним шрифтом). <body> <div id = "infolist">

    Цей елемент <div> укладає вміст сторінки (чотири набори тегів <h3> і тегів <div>, які додавалися до цього навчального курсі).

    Можна додати засіб вибору до елементу в діалоговому вікні 'Змінити правила CSS'. Діалогове вікно 'Змінити правила CSS' можна відкрити наступними способами.

    У діалоговому вікні "Правила CSS 'виберіть id як' Тип засобу вибору 'і введіть infolist як' Засіб вибору '. Переконайтеся, що встановлено прапорець 'Застосувати зміни до елементу'. В поле попереднього перегляду відображається змінений елемент.

    В поле попереднього перегляду відображається змінений елемент

    При натисканні кнопки ОК в діалоговому вікні правило CSS для засобу вибору infolist автоматично додається до таблиці стилів basecss.css.

  12. Збережіть внесені зміни в index.html (Ctrl-S; ⌘-S в Mac).

    При збереженні змін сторінка автоматично перезавантажується в веб-браузері. Відображається, що макет сторінки був змінений і що на сторінці тепер використовуються правила стилів CSS, які визначені в таблиці стилів basecss.css. Один зі знімків нижче <h3> відкритий, але інші згорнуті. Щоб розгорнути список, можна клацнути елемент <h3>.

    Щоб розгорнути список, можна клацнути елемент <h3>

    Функція jQuery Accordion тепер змінює все елементи сторінки, які містяться в об'єкті DOM infolist. У вікні 'Навігатор' все вузли для елементів під вузлом div id = infolist відображаються як недоступні, що вказує на їх зміну JavaScript.

    У вікні 'Навігатор' все вузли для елементів під вузлом div id = infolist відображаються як недоступні, що вказує на їх зміну JavaScript

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

Збереження проекту як шаблону сайту

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

  1. Правою кнопкою миші проект у вікні 'Проекти' і виберіть 'Зберегти як шаблон' у спливаючому меню.
  2. Введіть HTML5DemoSiteTemplate в поле 'Ім'я' і вкажіть місце розташування збереження шаблону.
  3. Переконайтеся, що вибрано всі файли. Клацніть по кнопці Finish '.

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

    Якщо розгорнути вузли дерева в діалоговому вікні, можна переглянути файли, які будуть включені в шаблон сайту

    Відображається, що шаблон сайту буде включати файл index.html, таблицю стилів CSS і зображення, які використовуються в проекті, а також наявність бібліотек JavaScript. Шаблон сайту може також включати будь-які файли конфігурації і тести.

    При натисканні 'Зберегти' IDE створить шаблон сайту у вигляді архіву .zip.

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

Висновок

У цьому навчальному курсі ви дізналися, як створювати порожній проект HTML5, в якому використовується пара бібліотек jQuery JavaScript. Ви також дізналися, як створювати розширення NetBeans Connector для браузера Chrome і запускати проект HTML5 в браузері. При зміні файлу index.html відображається, що IDE надає певні кошти, які можна використовувати для редагування файлів HTML і CSS.


Див. такоже

Детальніше про підтримку додатків HTML5 в IDE см. В наступних матеріалах на сайті www.netbeans.org :

  • Робота зі сторінками стилів CSS в додатках HTML5 Документ, який продовжує роботу з додатком, яке було створено в цьому навчальному курсі. Він показує, як використовувати деякі з майстрів CSS і вікон в IDE і як використовувати режим перевірки в браузері Chrome для візуального визначення елементів в джерелах проекту.
  • Налагодження і тестування JavaScript в додатках HTML5 Документ, який демонструє, як IDE надає інструменти, які можуть використовуватися в налагодженні і тестуванні файлів сценаріїв JAVA в IDE.
  • Внесення змін до коду JavaScript . У документі описані основні можливості зміни коду JavaScript, що надаються в середовищі IDE.

Додаткові відомості про jQuery доступні в офіційній документації:

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: