Мої замітки призначені в основному для початківців веб-майстрів. Незважаючи на це, досвідчені розробники також знайдуть тут що-небудь цікаве для себе.
У своєму блозі я збираюся публікувати статті про сучасні веб-технологіях (HTML5. CSS3 та інших). Якщо в процесі роботи над проектами я відкриваю для себе «свіже» рішення будь-якої задачі, я записую сюди інформацію про це, що дозволяє мені при необхідності застосовувати отримані знання в майбутньому.
Сподіваюся інформація буде корисна для відвідувачів.
Встановлення та налаштування
Завантажити IDE NetBeans можна на офіційному сайті програми. Установка програми нічим не відрізняється від установки інших додатків. Єдиний момент, який необхідно врахувати перед установкою NetBeans, - це те, що на комп'ютері повинна бути встановлений комплект розробника Java (JDK) 7 або 8.
Для того, щоб встановити нову тему оформлення, користувачеві необхідно зайти в меню «Сервіс» → «Параметри» → «Шрифти і кольори» → «Імпорт». вибрати скачаний .zip-архів і натиснути "OK". Після цього нова тема з'являється в випадаючому списку вгорі і її можна вибрати.
Про всяк випадок скажу, що настройки IDE NetBeans зберігаються в Windows в папці C: \ Users \ Імя_вашего_пользователя \ AppData \ Roaming \ NetBeans \ 8.0.1 \ config \. Зверніть увагу, що папка AppData системна (прихована).
Установка плагінів проводиться в меню «Сервіс» → «Модулі» на вкладці «Доступні додатки». Видалити встановлені плагіни можна там же, тільки на вкладці «Встановлено».
В процесі розробки може виникнути потреба у завантаженні файлів на сервер по FTP. Така можливість у NetBeans, як і в інших IDE існує. Правда, на мій погляд, організована вона не дуже зручно. В інших середовищах розробки, наприклад, в PHPStorm, є вікно, яке відображає структуру файлів на віддаленому сервері. Використовуючи його, можна завантажувати файли з сервера, а з вікна проекту завантажувати їх на сервер. По-моєму, це дуже зручно і наочно організовано. В NetBeans такої наочності немає. Тут ви можете завантажувати і вивантажувати файли з вікна проекту, але не можете бачити «картину» на сервері.
Для настройки FTP-з'єднання, потрібно в панелі «Проекти» натиснути правою кнопкою миші по назві проекту і вибрати пункт «Властивості» в спадному меню.
Далі у вікні, вибрати пункт «Виконати настройку» і заповнити необхідні поля. Особливо важливо вибрати відповідний для вас пункт у випадаючому списку «вивантажити файли». Я вибрав пункт «вручну», для того, щоб не відбувалася вивантаження файлів після кожного збереження файлу. Для введення даних віддаленого підключення (сервер, логін і пароль), потрібно натиснути на кнопку «Управління», розташовану поруч з полем «Віддалене підключення».
Якщо все зроблено правильно, то в контекстному меню кожного файлу з'являться 2 пункту: «Завантажити» і «вивантажити».
Редагування шаблонів нових файлів HTML, CSS
При створенні нового файлу в проекті, він створюється на основі шаблону. В системі існують шаблони різних типів файлів (HTML, CSS, JS). Ці шаблони можна відредагувати. Правда перед цим краще всього створити копію того шаблону, який ви хочете змінити.
Якщо уважно ознайомитися з шаблоном, то можна побачити в ньому різні змінні в фігурних дужках. Ви можете змінювати існуючі змінні і додавати свої змінні в шаблон. Для цього потрібно натиснути на кнопку «Параметри настройки». Відкриється файл, в який можна додавати свої змінні. Робиться це дуже просто, як при написанні програми на будь-якій мові програмування. Вказуємо ім'я змінної, потім знак «=» і її значення. У шаблоні вставляємо змінну таким чином: $.
В IDE NetBeans існую вже певні змінні, які ви можете використовувати в шаблоні. Ось список цих змінних:
Використання. Корисні моменти.
Створення нового проекту
Тепер трохи про використання програми. Отже, почнемо з створення нового проекту. Так як я розглядаю програму з позиції верстальника HTML, то кажучи про проекти, я маю на увазі додаток на HTML5. Створити новий проект в IDE NetBeans можна існуючих файлів, або зовсім новий. Для цього потрібно вибрати меню «Файл» → «Створити проект». або клікнути по другому значку на панелі інструментів під верхнім меню. У процесі створення нового проекту, є можливість вибрати один з популярних CSS і JS фреймворків і створити додаток на його основі. Ви можете використовувати Angular JS, Bootstrap, HTML5 Boilerplate і інші.
Якщо у вас вже є проект, і ви бажаєте працювати над ним далі, використовуючи NetBeans, то для початку роботи потрібно вибрати пункт «Додаток HTML5 з існуючим вихідними кодами» і вказати шлях до папки з файлами вашого застосування.
Як у будь-якій іншій програмі, в IDE NetBeans існує можливість використовувати поєднання «гарячих» клавіш. Список всіх «гарячих» клавіші можна знайти в налаштуваннях: «Сервіс» → «Параметри» → «Призначення файлів». Там їх можна не тільки подивитися, але і змінити.
Я вибрав з цього списку найбільш «корисні» поєднання клавіш, які допоможуть в процесі верстки макетів і, можливо, прискорити цей процес. Я помістив їх в таблицю. Пропоную читачеві ознайомитися з нею.
Ctrl + F / Ctrl + H - пошук і заміна всередині файлу
Ctrl + Shift + F / Ctrl + Shift + H - пошук і заміна про всьому проекту