13 Сентябрь 2010

HTML-редактор в Ubuntu. Мой выбор

Идеальный HTML-редактор для Ubuntu

Приветствую вас, уважаемый читатель. Сегодня я хочу поделиться своим опытом в поиске и настройке для Ubuntu главного инструмента веб-мастера — HTML-редактора (о плюсах и минусах Ubuntu в качестве ОС блоггера я рассказывал здесь).

Сразу скажу, мои поиски увенчались успехом. Идеальный редактор, соответствующий всем моим требованиям, был найден и имя ему Quanta Plus.

Quanta plus

Во время моей веб-строительной практики под Windows, в качестве HTML-редактора я использовал старенькую версию Dreamweaver-а (пример использования Dreamweaver щедро представлен в моих видеоуроках по div верстке сайта).

Dreamveawer соответствовал всем требованиям, которые я выдвигал к HTML-редактору:

  • Экономия времени набора тегов и их атрибутов посредством автоподстановки.

  • Автоподстановка закрывающего тега.

  • Автоподстановка свойств стилей при написании кода в CSS-файле.

  • В случае формирования отступов в строке кода (при помощи клавиши Tab), для повышения удобочитаемости текста, при переходе на следующую строку, отступ слева должен сохранится.

Я перепробывал множество HTML-редакторов в Ubuntu пока не нашел оптимальный. Им оказалась Quanta plus.

Quanta plus с легкостью может быть установлена из официального репозитория Ubuntu (Меню/Приложения/Центр приложений Ubuntu). Запускается Quanta Plus из меню Ubuntu Приложения/Программирование/Quanta Plus.

После установки программу необходимо настроить.

Настройку программы я начал с русификации. Скачал deb-файл, запустил его, в появившемся окне нажал кнопку Установить и Quanta plus стала русскоязычной.

Теперь примемся за настройки (меню программы Quanta plus/Настройка/Настройка Quanta).

Для того, чтобы закрывающийся тег автоматически появлялся после ввода символов </, как это сделано в Dreamweaver, нужно отметить только один пункт Автозавершение. Заодно я выбрал строчные буквы для тегов и их атрибутов, как того требуют стандарты.

Настройка автодополнения Quanta plus

Переходим в раздел Окружение окна настройки Quanta. Здесь целесообразно будет задать DTD по умолчанию как HTML 4.01 Strict (причины выбора именно этого стандарта я подробно описал здесь). Оптимальная кодировка по умолчанию уже задана правильно: utf8 (вы можете прочитать статью, посвященную вопросу выбора и изменения кодировки).

Настройка кодировки и формата документа в Quanta Plus

На этом с окном Настройка Quanta все. Переходим к настройке редактора (меню Quanta/Настройка/Настроить редактор).

В разделе Внешний вид окна настройки редактора необходимо включить показ номеров строк и линии отступов.

В результате код приобразится:

Вид кода в Quanta Plus

Теперь займемся сохранением отступов табуляции при переходе на новую строку. Для этого идем в раздел Отступы настроек редактора и в переключателе Режим расстановки отступов выбираем Обычный.

Сохранение левого отступа при табуляции

Полезности при работе в Quanta Plus

Для автоматического создания заготовки документа (с DTD и META-тегами) используйте кнопку с волшебной палочкой, расположенную в начале панели инструментов.

Создание шаблона HTML-документа в Quanta Plus

Полезные сочетания клавиш:

  • Выделение фрагмента документа и нажатие Tab приведет к добавлению левого отступа у всего фрагмента. Очень удобно в случае необходимости добавить дополнительный левый отступ сразу нескольким строкам.

  • По аналогии с предыдущим случаем, нажатие Shif+Tab приведет к уменьшению левого отступа на одну табуляцию.

  • Ctrl+K — удаление содержимого строки, в которой расположен курсор.

  • Ctrl+Пробел — отображает автоподстановщик тегов и их свойств.

Минусы Quanta Plus

  • В отличии от обожаемого мною Dreamweaver-а Quanta не умеет автодополнять CSS свойства со многими значениями (например, background или font) приходится использовать более конкретные (например, background-repeat).

  • Странный глюк в автодополнении содержимого атрибута style у тега: то оно работает, то нет. Так и не понял, что на это влияет.

  • При создании нового CSS-файла необходимо сначала сохранить свежий документ с расширением *.css, потом закрыть и снова открыть. Только в этом случае Quanta опознает CSS-файл и включит автодополнение свойств оформления.

Итого

Я считаю, что Quanta plus — достойная бесплатная замена Dreamweaver.

С уважением, Андрей Морковин.