Матвей Земсков

Заметки веб-мастера

Суббота, 08 ноября 2014 16:14

Верстка макетов в NetBeans

Оцените материал
(3 голосов)

В процессе своей работы обычно я использую редактор Notepad++. Мне нравится этот редактор. Работать в нем удобно, плюс для него существует множество плагинов, используя которые можно оптимизировать процесс разработки. Но иногда функционала моего любимого редактора не хватает. Это бывает, например, в том случае, если вы начинаете работать над большим проектом, причем до вас этот проект уже существовал и обслуживался другими людьми. Notepad++ не сможет помочь разработчику при поиске чего-либо по всем файлам проекта. Здесь на помощь разработчику приходят интегрированные среды разработки (IDE). Среди программ такого рода встречаются и платные, и бесплатные. В этой статье я попытаюсь сделать небольшой обзор IDE NetBeans, причем хотелось бы найти положительные моменты этой программы, которые помогут в работе веб-верстальщику.

Установка и настройка

Скачать IDE 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 системная (скрытая).

Установка плагинов

Для NetBeans существует множество различных плагинов. Для удобства и ускорения своей работы веб-верстальщику необходимо установить плагин Zen Coding, который позволяет значительно ускорить создание структуры HTML-документа. Кроме этого полезного инструмента, можно также установить плагин JS CSS Minify Compress, который позволяет сжимать код CSS и JavaScript.

Установка плагинов производится в меню «Сервис» → «Подключаемые модули» на вкладке «Доступные подключаемые модули». Удалить установленные плагины можно там же, только на вкладке «Установлены».

Настройка FTP

В процессе разработки может возникнуть потребность в загрузке файлов на сервер по FTP. Такая возможность в NetBeans, как и в других IDE существует. Правда, на мой взгляд, организована она не очень удобно. В других средах разработки, например, в PHPStorm, есть окно, которое отображает структуру файлов на удаленном сервере. Используя его, можно скачивать файлы с сервера, а из окна проекта загружать их на сервер. По-моему, это очень удобно и наглядно организовано. В NetBeans такой наглядности нет. Здесь вы можете загружать и выгружать файлы из окна проекта, но не можете видеть «картину» на сервере.

Для настройки FTP-соединения, нужно в панели «Проекты» кликнуть правой кнопкой мыши по названию проекта и выбрать пункт «Свойства» в выпадающем меню.

Далее в открывшемся окне выбрать пункт «Выполнить настройку» и заполнить необходимые поля. Особенно важно выбрать подходящий для вас пункт в выпадающем списке «Выгрузить файлы». Я выбрал пункт «вручную», для того, чтобы не происходила выгрузка файлов после каждого сохранения файла. Для ввода данных удаленного подключения (сервер, логин и пароль), нужно нажать на кнопку «Управление», расположенную рядом с полем «Удаленное подключение».

Если все сделано правильно, то в контекстном меню каждого файла появятся 2 пункта: «Загрузить» и «Выгрузить».

Как и многие другие IDE, NetBeans предоставляет пользователю возможность синхронизации локальных файлов и файлов на удаленном сервере. Чтобы сравнить файлы, нужно кликнуть правой кнопкой мыши по пункту «Исходные файлы» внутри проекта и выбрать пункт «Синхронизация». Подробнее об этом процессе можно узнать на официальном сайте программы NetBeans в разделе «Документация».

Редактирование шаблонов новых файлов HTML, CSS

При создании нового файла в проекте, он создается на основе шаблона. В системе существуют шаблоны различных типов файлов (HTML, CSS, JS). Эти шаблоны можно отредактировать. Правда перед этим лучше всего создать копию того шаблона, который вы хотите изменить.

Для редактирования шаблонов новых файлов заходим в меню «Сервис» → «Шаблоны». В открывшемся окне «Управление шаблонами» в дереве папок выбираем нужную папку. Например, HTML5. Создаем копию файла HTML, нажав на кнопку «Дублировать». Затем выделим новый созданный файл и нажмем кнопку «Открыть в редакторе». Теперь можно вносить изменения и сохранять. После сохранения новый шаблон будет доступен при создании нового файла.

Если внимательно ознакомиться с шаблоном, то можно увидеть в нем различные переменные в фигурных скобках. Вы можете изменять существующие переменные и добавлять свои переменные в шаблон. Для этого нужно нажать на кнопку «Параметры настройки». Откроется файл, в который можно добавлять свои переменные. Делается это очень просто, как при написании программы на каком-либо языке программирования. Указываем имя переменной, затем знак «=» и ее значение. В шаблоне вставляем переменную таким образом: ${имя_переменной}.

В IDE NetBeans существую уже определенные переменные, которые вы можете использовать в шаблоне. Вот список этих переменных:

  • ${date} – дата в формате: Feb 16, 2008
  • ${encoding} – значение кодировки, например, UTF-8
  • ${name} – имя файла
  • ${nameAndExt} – имя файла с расширением
  • ${time} – время в формате: 7:37:58 PM
  • ${user} – полное имя пользователя
  • ${cursor} – в месте, где она находится размещается курсор
  • ${path} – полный путь к текущему файлу

Использование. Полезные моменты.

Создание нового проекта

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

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

Заготовки HTML-кода

В программе существует такой полезный инструмент, как палитра с элементами кода HTML. Он позволяет вставлять в код страницы различные HTML-элементы (таблицы, списки, формы) с помощью мастера или «конструктора». Я думаю, что в основном он будет полезен начинающим верстальщикам. Чтобы сделать панель палитры активным и разместить его в рабочей области программы, нужно зайти в «Окно» → «IDE и сервис» → «Палитра». Есть еще один способ открыть диспетчер палитры. Для этого нужно зайти в меню «Сервис» → «Палитра» → «Элементы кода». Пользоваться этим инструментом очень просто. Берем необходимы HTML - элемент и «перетаскиваем» его в окно редактора. Появляется окно, в котором вы можете указать параметры нового элемента, например, при размещении таблицы: количество строк и ячеек в ней.

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

«Горячие» клавиши

Как в любой другой программе, в IDE NetBeans существует возможность использовать сочетание «горячих» клавиш. Список всех «горячих» клавиши можно найти в настройках: «Сервис» → «Параметры» → «Назначения файлов». Там их можно не только посмотреть, но и изменить.

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

Ctrl+F/Ctrl+H – поиск и замена внутри файла Ctrl+Shift+F/Ctrl+Shift+H – поиск и замена о всему проекту
Ctrl+G – переход к определенной строке Ctrl+R – переименование выделенной переменной во всем документе (например, можно применить в JS-скрипте)
Ctrl+E – удаление текущей строки кода Alt+Shift+F – форматирование выделенного фрагмента кода.
Ctrl+Shift+↓/ Ctrl+Shift+↑ - копирование текущей строки кода (ниже или выше). Alt+Shift+↓/ Alt+Shift+↑ - копирование текущей строки кода (ниже или выше).
Ctrl+Tab – переход между открытыми файлами в редакторе Ctrl+[0…9] – перемещение между панелями в окне редактора
Tab/Shift+Tab – управление отступами выделенного блока кода или текущей строки Ctrl+Q – возврат к ранее редактируемой строке (перемещение по истории)
Ctrl + “/” – комментирование блока кода или одной строки Alt+Shift+Enter – переход в полноэкранный режим и обратно

История изменения файлов

IDE NetBeans позволяет просмотреть историю изменения файлов проекта. Для просмотра истории конкретного файла нужно кликнуть по нему правой кнопкой мыши и выбрать в контекстном меню пункт «История» → «Просмотреть историю».

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

Существует в программе еще одна приятная мелочь - генерация “Lorem Ipsum…“ – очень полезной штуки, помогающей в процессе верстки, когда у верстальщика нет реального текста, который планируется разместить на странице.

Размещаем “Lorem Ipsum…“ и наглядно видим, как будут выглядеть элементы страницы и вся страница целиком. Для генерации “Lorem Ipsum…“ нужно зайти в меню «Источник» → «Вставка кода» → «Lorem Ipsum».

Заключение

В заключении статьи хотелось бы отметить, что использование IDE и в частности, NetBeans, помогает оптимизировать работу веб-верстальщика, ускорить процесс верстки по сравнению с использованием простых редакторов кода. Это происходит благодаря тем инструментам, которые есть в интегрированных средах разработки и отсутствуют в редакторах.

Прочитано 12553 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх