Верстка макетів у NetBeans

Встановлення та налаштування

Завантажити > офіційний сайт програми. Встановлення програми нічим не відрізняється від інсталяції інших програм. Єдиний момент, який необхідно врахувати перед встановленням NetBeans, - це те, що на комп'ютері має бути встановлений набір розробника Java (JDK) 7 або 8.

Відразу після інсталяції програми, ви можете почати налаштовувати NetBeans під себе. Зокрема, можна встановити нову тему оформлення або відредагувати існуючу. Нову тему можна завантажити, наприклад, з сайту http://netbeansthemes.com/ .

Для того, щоб встановити нову тему оформлення, користувачеві необхідно зайти в меню«Сервіс» → «Параметри» → «Шрифти та кольори» → «Імпорт», вибрати завантажений .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 існують певні змінні, які ви можетевикористовувати у шаблоні. Ось список цих змінних:

  • $ – дата у форматі: Feb 16, 2008
  • $ – значення кодування, наприклад, UTF-8
  • $ - ім'я файлу
  • $ - ім'я файлу з розширенням
  • $ – час у форматі: 7:37:58 PM
  • $ – повне ім'я користувача
  • $ - у місці, де вона знаходиться розміщується курсор
  • $ – повний шлях до поточного файлу

Використання. Корисні моменти.

Створення нового проекту

Тепер трохи про використання програми. Отже, почнемо із створення нового проекту. Так як я розглядаю програму з позиції верстальника HTML, то говорячи про проекти, я маю на увазі додаток на HTML5. Створити новий проект в IDE NetBeans можна існуючих файлів або зовсім новий. Для цього потрібно вибрати меню«Файл» → «Створити проект», або клацнути по другому значку на панелі інструментів під верхнім меню. У процесі створення нового проекту є можливість вибрати один з популярних CSS і JS фреймворків і створити додаток на його основі. Ви можете використовувати Angular JS, Bootstrap, HTML5 Boilerplate та інші.

Якщо ви вже маєте проект, і ви бажаєте працювати над ним далі, використовуючи NetBeans, то для початку роботи потрібно вибрати пункт «Додаток HTML5 з існуючим вихідними кодами» і вказати шлях до папки з файлами вашої програми.

Як у будь-якій іншій програмі, в IDE NetBeans існує можливість використовувати поєднання гарячих клавіш. Список усіх «гарячих» клавіш можна знайти в налаштуваннях:«Сервіс» → «Параметри» → «Призначення файлів». Там їх можна не лише подивитися, а й змінити.

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

Історія зміни файлів

Генерація тексту-«риби» “Lorem Ipsum…“

Існує в програмі ще одна приємна дрібниця – генерація “Lorem Ipsum…“ – дуже корисної штуки, що допомагає в процесі верстки, коли верстальник не має реального тексту, який планується розмістити на сторінці.

Розміщуємо “Lorem Ipsum…“ і наочно бачимо, як виглядатимуть елементи сторінки та вся сторінка цілком. Для генерації “Lorem Ipsum…“ потрібно зайти в менюДжерело → Вставка коду → Lorem Ipsum.