Программа NeonHtml – удобный инструмент для разработки веб-сайтов
Еще одна программа, которую можно порекомендовать начинающим веб-разработчикам и веб-администраторам, называется NeonHtml. Она распространяется бесплатно, ее дистрибутив можно скачать на сайта разработчика по адресу http://neonhtml.pixpaint.com. К скачиванию предлагается zip-архив объемом примерно 1,3 Мб.
Чтобы установить программу на компьютер, нужно запустить инсталляционный файл и далее следовать указаниям Мастера установки. По завершении установки в меню Пуск будет создана программная папка, а на рабочем столе появится ярлык запуска программы.
Программа выгодно отличается от многих конкурирующих продуктов простым, интуитивно понятным, то в то же время – содержательным русскоязычным интерфейсом и богатым инструментарием. Она обладает широкой функциональностью, и при этом настолько проста в эксплуатации, что с ней могут успешно работать даже пользователи, не имеющие ни малейшего опыта в области веб-разработки.
Назначение и функциональные возможности программы
Функциональные возможности программы NeonHtml предназначены для решения следующих задач.
• Создание, редактирование и администрирование веб-документов самых разных форматов – HTML, PHP, CSS, JavaScript, а также простых текстовых файлов.
• Использование множества вариантов оформления и дизайна веб-страниц, с моментальным просмотром результата.
• Экспорт и импорт данных с помощью специально предназначенных функциональностей.
• Тонкая настройка программы, позволяющая адаптировать ее к потребностям конкретного пользователя.
• Вставка в веб-страницу самых разных элементов – гиперссылок, таблиц, графических изображений, мультимедийных файлов, объектов JavaScript, и др.
• Использование стандартных заготовок для создания веб-страниц.
• Упорядочивание, оптимизация и прочие преобразования программного кода веб-страницы.
• Использование разных кодировок.
• Быстрая навигация по всему программному коду.
• Параллельная работа с несколькими одновременно открытыми документами.
• Быстрый поиск и замена данных в соответствии с заданными параметрами.
Помимо перечисленных, с помощью программы можно решать и другие задачи, в зависимости от потребностей конкретного пользователя.
Общие правила работы с программой
Для запуска программы можно использовать соответствующую команду программной папки, находящейся в меню Пуск, либо ярлыком на рабочем столе. Сразу после запуска на экране отображается окно приветствия, которое показано на рис. 5.1.
Рис. 5.1. Окно приветствия
В данном окне вы можете либо выбрать одно из действий, которое в данном случае вам подходит, либо сразу перейти в главное окно программы. Для этого стартовом окне предназначены соответствующие кнопки, которые перечислены ниже.
Открыть – с помощью данной кнопки осуществляется открытие файла для последующей работы с ним в программе. При нажатии кнопки на экране открывается окно, в котором нужно указать путь к этому файлу, выделить его щелчком мыши и нажать кнопку Открыть либо клавишу Enter.
• Импорт – данная кнопка предназначена для импорта данных, с которыми вы предполагаете работать.
• Новая страница – данная кнопка предназначена для автоматического формирования новой страницы в соответствии с заданными параметрами. Эти параметры задаются в окне, которое открывается на экране при нажатии данной кнопки.
• Заготовка – при нажатии данной кнопки открывается главное окно программы, в рабочей области которого будет автоматически сгенерирован начальный код стандартной HTML-страницы
• Пустой – при нажатии данной кнопки открывается главное окно программы, рабочая область которого будет пустой.
• Справка – данная кнопка предназначена для вызова справочной информации.
• Сайт редактора – с помощью данной кнопки можно быстро перейти на сайт программы (при условии наличия действующего подключения к Интернету).
• Продолжить – при нажатии данной кнопки на экране отображается главное окно программы.
Отметим, что появление при запуске программы стартового окна можно отключить в настройках. О том, как это делать, будет рассказано ниже, в соответствующем разделе.
Вся работа по созданию и редактированию веб-страниц осуществляется в главном окне программы, которое показано на рис. 5.2.
Рис. 5.2. Главное окно программы
Ключевыми элементами пользовательского интерфейса являются главное меню, панель вкладок, рабочая область и контекстное меню. Рассмотрим подробнее каждый из этих элементов.
Главное меню находится в привычном месте – в верхней части интерфейса. Оно включает в себя следующие меню: Файл, Выполнить, Заготовки, Обработка, Настройки, Ссылки и Программа. Команды главного меню предназначены для выбора инструментов, режимов работы, а также для вызова различных функций и механизмов программы.
Панель вкладок находятся сразу под главным меню. Каждая вкладка содержит набор инструментов, предназначенных для выполнения соответствующих действий с текущей веб-страницей. Например, работа с текстовым контентом ведется на вкладке Текст, для представления данных в табличном виде следует перейти на вкладку Таблица, для вставки в документ мультимедийных объектов предназначены инструменты, расположенные на вкладке Мультимедиа, и т. д. По мере знакомства с программой мы будем рассматривать наиболее востребованные инструменты, находящиеся на разных вкладках.
Рабочая область занимает самую большую часть интерфейса. Именно в ней ведется вся работа с программным кодом веб-страницы. На рис. 5.2 в рабочей области содержится код, который генерируется программой автоматически в момент создания нового HTML-документа.
Вдоль левого края рабочей области (слева от нумерации строк) находится инструментальная панель, кнопки которой предназначены для быстрого доступа к некоторым функциям и режимам работы программы. Названия кнопок инструментальной панели отображаются в виде всплывающих подсказок при подведении к ним указателя мыши.
Нажатием правой кнопки мыши вызывается контекстное меню, некоторые команды которого дублируют соответствующие команды главного меню. Отметим, что содержимое контекстного меню, а также перечень доступных в нем команд может зависеть от текущего режима работы.
Вид и состав пользовательского интерфейса, который представлен на рис. 5.2, предлагается программой по умолчанию. Однако вы можете изменить его в соответствии со своими потребностями. О том, как это делается, будет рассказано ниже.
Для выполнения наиболее востребованных действий в программе предусмотрено использование «горячих» клавиш. Их полный перечень приведен ниже.
• F1 – создание нового пустого документа;
• F2 – создание новой страницы;
• F3 – переход в режим поиска и замены данных;
• F4 – открытие папки, в которой хранится редактируемый в данный момент документ;
• F6 – настройка параметров шрифта;
• F9 – просмотр текущей веб-страницы во встроенном Интернет-обозревателе;
• F10 – просмотр текущей веб-страницы в Интернет-обозревателе, который на данном компьютере используется по умолчанию;
• F11 – переход в режим настройки параметров программы;
• F12 – вызов справочной информации;
• Ctrl + O – открытие созданного ранее документа для просмотра и редактирования;
• Ctrl + S – сохранение изменений в текущем документе;
• Ctrl + Alt + S – сохранение документа под другим именем;
• Ctrl + E – экспорт документа;
• Ctrl + Z – отмена последнего действия (полезно для быстрой отмены ошибочных действий);
• Ctrl + R – возврат отмененного действия;
• Ctrl + С – копирование выделенного текстового фрагмента в буфер обмена;
• Ctrl + X – копирование выделенного текстового фрагмента в буфер обмена с одновременным его удалением;
• Ctrl + V – вставка содержимого буфера отмена в то место, где расположен курсор;
• Ctrl + А – выделение всего содержимого рабочей области;
• Ctrl + В – вставка тега
в то место, где находится курсор;
• Home – быстрый переход к началу строки;
• End – быстрый переход к концу строки;
• Ctrl + Home – быстрый переход к началу документа
• Ctrl + End – быстрый переход к концу документа
• PageUp – «пролистывание» в направлении вверх;
• PageDown – «пролистывание» в направлении вниз;
• Ctrl + PageUp – быстрый переход к первой строке экрана;
• Ctrl + PageDown – быстрый переход к последней строке экрана;
• Ctrl + Alt + P – выбор относительного пути на диске;
• Ctrl + стрелка «вправо» – быстрый переход к следующему слову;
• Ctrl + стрелка «влево» – быстрый переход к предыдущему слову;
• Ctrl + стрелка «вверх» – быстрая «прокрутка» вверх;
• Ctrl + стрелка «вниз» – быстрая прокрутка вниз;
• Ctrl + Shift + стрелка «вправо» – добавление следующего слова к выделению;
• Ctrl + Backspace – удаление последнего слова;
• Ctrl + Alt + стрелка «вправо» – сдвигание выделенного текстового фрагмента вправо;
• Ctrl + Alt + стрелка «влево» – сдвигание выделенного текстового фрагмента влево;
• Alt + B – вставка в программный код тегов полужирного начертания;
• Alt + I – вставка в программный код тегов курсивного начертания;
• Alt + U – вставка в программный код тегов подчеркнутого начертания;
• Alt + S – вставка в программный код тегов зачеркнутого начертания;
• Alt + стрелка «вверх» – применение прописных символов для выделенного фрагмента;
• Alt + стрелка «вниз» – применение строчных символов для выделенного фрагмента.
Более подробно основные режимы работы программы, доступ к которым осуществляется в том числе и с помощью «горячих» клавиш, мы рассмотрим далее.
Подготовка программы к работе
После запуска программы вы можете сразу приступать к созданию и редактированию веб-страниц. Однако предварительно рекомендуется просмотреть и, в случае надобности – изменить параметры ее настройки. Несмотря на то, что в большинстве случаев предложенные по умолчанию настройки являются оптимальными, иногда все же приходится их изменить, чтобы максимально адаптировать программу к своим потребностям.
О том, как настроить программу и подготовить ее к работе, мы и расскажем далее.
Настройка пользовательского интерфейса
Как мы уже отмечали ранее, в программе реализована возможность настройки пользовательского интерфейса. В частности, пользователь может самостоятельно определить, какие элементы и инструменты должны быть представлены в главном окне программы, как они при этом будут называться, и т. д. Для перехода в режим настройки пользовательского интерфейса нужно выполнить команду главного меню Настройки ► Интерфейс. При ее активизации на экране отображается окно, изображенное на рис. 5.3.
Рис. 5.3. Настройка пользовательского интерфейса, вкладка Панель инструментов
Как видно на рисунке, данное окно состоит из двух вкладок: Панель инструментов и Добавить кнопку. Рассмотрим порядок работы на каждой из них.
На вкладке Панель инструментов вы можете определить набор вкладок, которые отображаются в главном окне программы и содержат основные инструменты, предназначенные для выполнения соответствующих действий в рабочей области. Чтобы создать новую вкладку, нужно в поле Новая с клавиатуры ввести ее произвольное название и нажать расположенную справа кнопку. Для переименования вкладки нужно выделить ее в поле Вкладки щелчком мыши и с клавиатуры ввести новое название в расположенном ниже поле Переименовать, после чего нажать находящуюся справа от данного поля кнопку.
Если вы не планируете пользоваться какими-то вкладками, их целесообразно удалить. Чтобы удалить вкладку из главного окна программы вместе со всем ее содержимым, выделите ее в списке щелчком мыши и нажмите соответствующую кнопку, на которой изображен характерный символ. Отметим, что при этом программа выдаст дополнительный запрос на подтверждение операции удаления.
Вы также можете менять порядок расположения вкладок так, как вам будет удобно. Чтобы изменить местонахождение конкретной вкладки, выделите ее в поле Вкладки щелчком мыши и определите ее расположение с помощью находящихся справа кнопок со стрелками.
Если вы желаете добавить в главное окно программы какой-либо инструмент, перейдите в окне настройки интерфейса на вкладку Добавить кнопку, содержимое которой представлено на рис. 5.4.
Рис. 5.4. Настройка пользовательского интерфейса, вкладка Добавить кнопку
Порядок добавления кнопки на данной вкладке выглядит следующим образом.
Вначале в поле Куда добавить нужно из раскрывающегося списка выбрать панель, на которую вы намереваетесь добавить инструмент. Возможен выбор одного из двух вариантов: Панель инструментов (в данном случае имеется в виду панель вкладок в главном окне программы) либо Панель быстрых действий (так называется инструментальная панель, которая находится в рабочей области слева от номеров строк). Если выбрано значение Панель инструментов, то ниже становится доступным для редактирования поле Вкладка. В данном поле из раскрывающегося списка нужно выбрать конкретную вкладку, на которую вы хотите добавить инструмент. Отметим, что если на вкладке Панель инструментов (см. рис. 5.3) вы добавили новую вкладку, то она также будет доступна для выбора в поле Вкладка, и вы сможете поместить на нее все необходимые вам инструменты.
Кнопка Добавить разделитель предназначена для добавления на вкладку символа разделителя. Это бывает целесообразно, например, для разделения однотипных групп кнопок, находящихся на одной вкладке.
В области настроек Кнопка осуществляется ввод всех сведений о добавляемом инструменте (кнопке). С помощью кнопки Выбрать выбирается действие, функция или команда, которая должна запускаться с помощью нового инструмента. При нажатии кнопки Выбрать открывается большое меню с перечнем всех основных функций, в котором для выбора требуемой позиции нужно щелкнуть на ней мышью.
После этого в расположенном ниже поле отобразится краткое описание выбранного действия, а в поле Подсказка будет автоматически сформирован текст всплывающей подсказки, которая будет отображаться при подведении к кнопке указателя мыши. Например, если выбрать инструмент Жирный, то в поле, которое находится сразу под кнопкой Выбрать, отобразится текст code_bold, а в поле Подсказка – слово Жирный. Также автоматически будет заполнено поле Иконка, в котором предлагается размер кнопки. Отметим, что все эти параметры вы можете отредактировать по своему усмотрению, а с помощью кнопки Очистить можно вообще удалить из них значения.
Если вы желаете, чтобы на кнопке отображалась надпись (например, чтобы сразу было понятно назначение данного инструмента), введите ее текст в поле Надпись.
Любому инструменту вы можете назначить сочетание «горячих» клавиш – для этого предназначено поле Сочетание. Отметим, что для этого нужно щелкнуть мышью в данном поле и просто нажать требуемую комбинацию.
Завершается процесс добавления инструмента нажатием на данной вкладке кнопки Добавить кнопку. С помощью кнопки Закрыть осуществляется выход из данного режима без сохранения выполненных изменений.
Чтобы удалить кнопку из панели вкладок или из инструментальной панели рабочей области, нужно щелкнуть на ней правой кнопкой мыши и в открывшемся контекстном меню выполнить команду Удалить. При этом следует соблюдать осторожность, поскольку программа не выдает дополнительный запрос на подтверждение операции удаления.
Настройка параметров программы
Характерной особенностью программы NeonHtml является то, что она обладает довольно гибким механизмом настройки, чем могут похвастаться далеко не все конкуренты.
Для перехода в режим настройки параметров программы в главном меню предназначена команда Настройки ► Основные. При ее активизации на экране отображается окно настройки, которое представлено на рис. 5.5.
Рис. 5.5. Настройка программы, вкладка Общие
Данное окно состоит из нескольких вкладок, каждая из которых содержит однотипные, сходные по назначению и функциональности параметры настройки. Далее мы рассмотрим те из них, которые являются наиболее востребованными большинством пользователей.
На вкладке Общие, содержимое которой представлено на рис. 5.5, содержится несколько параметров общего характера. Если на данной вкладке установлен флажок Окно приветствия (выбор действия) при входе в редактор, то при каждом запуске программы на экране будет отображаться ее стартовый интерфейс (см. рис. 5.1). Если вы хотите отключить появление окна приветствия – снимите данный флажок.
Как мы уже отмечали ранее, возможности программы предусматривают параллельную работу сразу с несколькими разными документами. В этом случае в рабочей области для каждого из них открывается отдельная вкладка (на рис. 5.2 такая вкладка одна, она называется new_document.html). Если в настройках программы на вкладке Общие установлен флажок Показывать кнопку закрытия на вкладках документов, то при подведении указателя мыши к таким вкладкам на них будет отображаться кнопка закрытия. В противном случае такая кнопка появляться не будет, и для закрытия документов можно будет пользоваться лишь соответствующими командами меню Файл.
На вкладке Редактирование, содержимое которой показано на рис. 5.6, осуществляется настройка параметров рабочей области.
Рис. 5.6. Настройка программы, вкладка Редактирование
В верхней части данной вкладки указывается размер шрифта, которым пишется программный код, а также задается цвет фона рабочей области и цвет фона строки, в которой находится курсор. Для настройки подходящего цвета нужно нажать кнопку, расположенную справа от соответствующего поля, и в открывшейся палитре цветов указать требуемый цвет. При необходимости вы всегда можете вернуться к цветам фона и текущей строки, используемым в программе по умолчанию: для этого достаточно нажать кнопку Сброс.
Нижняя часть вкладки, в свою очередь, состоит из трех вкладок: HTML, CSS и Прочее. На вкладке Прочее указывается цвет, которым в программном коде будут помечаться парные скобки – при условии, если на вкладке Общие будет установлен флажок Подсвечивать парные скобки (см. рис. 5.5). Что касается вкладок HTML и CSS, то здесь вы можете настроить цветовое оформление и начертание шрифта каждого элемента программного кода (теги, текстовый контент, комментарии и т.д.). Для этого нужно щелкнуть мышью на соответствующем образце кода, и в открывшемся окне выполнить требуемые настройки.
Содержимое вкладки Документ показано на рис. 5.7.
Рис. 5.7. Настройка программы, вкладка Документ
На данной вкладке путем установки соответствующих флажков можно включить режимы автоматического резервного копирования (это может предотвратить потери информации в случае непредвиденных аппаратных или программных сбоев), а также автоматического сохранения закладок документов в папках. Кроме этого, вы можете отредактировать программный код, который автоматически генерируется программой при создании нового документа на основе HTML-заготовки (о том, как создавать документы на основании заготовки, мы поговорим ниже).
В программе реализована возможность автоматической проверки правильности и корректности программного кода веб-документа перед его просмотром в окне Интернет-обозревателя. Настройка такой проверки осуществляется на вкладке Проверка, содержимое которой показано на рис. 5.8.
Рис. 5.8. Настройка программы, вкладка Проверка
Чтобы включить режим автоматической проверки кода, нужно в верхней части данной вкладки установить флажок Проверять код документа перед просмотром. После этого с помощью расположенных ниже флажков можно указать конкретные параметры, которые должны контролироваться (наличие неизвестных и незакрытых тегов, неправильное построение таблиц, и др.).
Программа NeonHtml автоматически ведет историю некоторых программных событий. В частности, она формирует журнал недавно просмотренных документов, что позволяет получить к ним ускоренный доступ, ведет историю поисковых запросов, ввода URL-адресов, и т. д. При желании вы можете полностью или частично удалить все подобные сведения, а также настроить журнал недавно просмотренных документов. Для этого в настройках программы предназначена вкладка История, содержимое которой показано на рис. 5.9.
Рис. 5.9. Настройка программы, вкладка История
На данной вкладке в поле Длина списка недавних документов можно самостоятельно определить, сколько недавно открываемых документов программа должна помещать в журнал для последующего быстрого к ним доступа из подменю Файл ► Недавние документы. Требуемое значение можно ввести как с клавиатуры, так и с помощью кнопок счетчика. По умолчанию программа предлагает сохранять в журнале 15 недавно просмотренных документов.
Остальные параметры данной вкладки предназначены для удаления соответствующих сведений из истории ее эксплуатации. В частности, вы можете очистить историю поисковых запросов, удалить все данные из журнала недавно открываемых документов, и т. д. С помощью кнопки Стереть всю историю вы можете удалить все сведения, которые перечислены на расположенных ваше кнопках.
На вкладке Просмотр вы можете указать Интернет-обозреватель, который будет использоваться для просмотра создаваемых и редактируемых веб-страниц. Для этого в поле Путь к внешнему браузеру нужно указать путь к исполняемому файлу этого Интернет-обозревателя.
Если на вкладке Система установить флажок Встроить в системное меню, то в контекстном меню, вызываемом нажатием правой кнопки мыши на ярлыке файлов формата Html, CSS или JavaScript, будет присутствовать команда Редактировать в NeonHtml, с помощью которой можно будет сразу перейти в режим редактирования данного файла средствами программы NeonHtml.
Все настройки программы вступают в силу после нажатия кнопки ОК, которая доступна на всех вкладках данного окна.