HTML редактор

HTML-редактор, предназначенный для разработки документов в виде html — файлов. Имеет мощный механизм для создания новых, для редактирования и просмотра существующих html — документов.

Видеоинструкция по работе с HTML редактором HtmlReader:

Интерфейс HtmlReader

Сам редактор состоит из трех активных частей. Наверху Вы видите визуальное отображение кода страницы.

Код пишется в среднем окошке справа. Слева от кода находится основная панель инструментов.

Снизу в окошке есть некоторые дополнительные инструменты для работы с кодом (панель обработки и контроля).

Можно оставить для просмотра только окошко браузера:

Или только окошко редактора (меню «Действия»):

Работа в HtmlReader

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

Появится некоторый стандартный текст, который присутствует в любой html-страничке. Потом можно начинать саму работу: писать текст, форматировать его по-разному (можно менять цвет, размер шрифта, способ написания – всё, как в стандартном текстовом редакторе, только с учетом тегов).

Вкладки над окошком, где пишется код, позволяют вставить рисунок, ссылку, таблицу, форму для голосования, скрипт – весь список можно посмотреть ниже в описании меню «Вставка».

Кнопки слева от окна кода позволяют поработать с Избранным, включить режим переноса слов, отобразить скрытые знаки форматирования (см. ниже), сдвинуть текст влево или вправо для удобства чтения кода, а также быстро перейти в начало или конец документа.

Теперь обратим внимание на верхнюю часть редактора, где появляется html-страница так, как ее будут видеть пользователи. Доступны стандартные кнопки браузера: назад, вперед, обновление. Также можно сохранить страницу и обновить браузер (одной кнопкой) или включить автообновление браузера, тогда по мере редактирования кода можно будет сразу видеть обновления на странице.

Отдельными кнопками можно разрешить отображение графики, выполнение скриптов, фоновую музыку на странице или назначить выделение какого-нибудь тега ярким заметным цветом. Есть также функция создания эффектов страницы в браузере (отключение таблиц, CSS-файла, отображение границ фреймов, метаданных и многое другое).

Панель редактирования

Теперь поработаем с форматированием и тегами. Слева от окошка, где пишется код, есть панель с вкладками. Именно она является главным инструментом редактирования. Перечислю вкладки и функции:

- Файлы: показывается дерево файлов, где сейчас лежит редактируемая страница, достаточно легко ориентироваться.

- Буфер обмена: показывает, что лежит сейчас в буфере обмена у пользователя.

- Инспектор: отображает теги в алфавитном порядке и доступные для них атрибуты. Языки: HTML, JavaScript, VBScript, PHP, CSS, ASP.

- Палитры: список цветов, доступных для вставления в код.

- Символы: список кодов для вставки в страницу разных символов (номера сносок, карточные масти, знаки пунктуации, символы валюты и т. д.)

- Скрипты: перечисление разных мелких скриптов, которые помогут сэкономить время в работе (Java-скрипты, PHP-скрипты, CSS-вставки и просто примеры кода)

- Статистика: отображение статистики документа.

Вверху над панелью редактирования располагаются кнопки, помогающие быстро работать с кодом: сохранение, отмена/возврат действия, функция «найти/заменить», просмотр страницы во внешнем или встроенном браузере (на движке Gecko) и т. д.

Панель обработки и контроля

Быстрый просмотр: позволяет открыть какой-нибудь готовый файл и посмотреть его код. При этом он не будет отображаться в общем списке открытых файлов. Очень удобно, если надо справиться с каким-нибудь посторонним кодом.

Проверка кода: позволяет запустить проверку кода на ошибки. Находит, правда, только достаточно очевидные.

Слоты и обработка: эта вкладка предназначена для быстрой вставки повторяющихся элементов в код страницы.

Менеджер проектов: позволяет работать со многими файлами сразу.

Возможности меню «Файл»:

• открыть для редактирования сразу нескольких файлов;
• быстро создать файл с шаблоном HTML, JAVA, CSS или PHP. Возможно создание шаблона самим пользователем;
• просмотреть страницу во встроенном браузере или обычном браузере компьютера;
• сохранить текст как web-страницу или java-скрипт;
• конвертировать текст в формат TXT или RTF.

Возможности меню «Вставка»

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

В текст можно вставить:

• ссылку (в виде текста или кнопки);
• картинку, назначив ей соответствующие атрибуты;
• таблицу;
• некоторый текст из других файлов;
• список;
• мета-теги (внизу окошка под каждой категорией выводится подсказка, для чего какой тег нужен);
• разделитель;
• путь и имя некоторого файла (или только имя);
• содержимое некоторого файла;
• теги в начало и/или конец каждой строки;
• комментарии в код;
• определенный цвет (выбор из стандартной панели цветов);
• flash-ролик;
• CSS-файл.

Возможности меню «Действия»

• перенос слов: в окошке, где пишется код, можно подогнать его по ширине окна. Переносы будут отмечены специальными знаками слева;
• специальные символы: в коде появляются все скрытые символы форматирования;
• статистика: отображение статистики документа (количество символов с пробелами и без них);
• открытие To Do-листа: он предназначен для ведения истории и заданий. Здесь Вы можете отмечать в текстовом виде всю работу, которую предстоит сделать (или которая уже сделана). Это обыкновенный текстовый редактор со специальной подсветкой (подсветка не настраивается) и интерфейсом, упрощающим создание датированных заметок. Сохраняется как TXT-файл.
• проверка в инспекторе, просмотр в браузере или редакторе;
• передвижение курсора или прокрутки по тегам;
• открытие файла под курсором.

Настройки

1. Настройки редактора – основные опции:

• печать (перенос строк, заголовок, номера страниц);
• подсветка (цвета тегов, фон, шрифты);
• горячие клавиши;
• автозамена сочетаний букв на символы;
• редактирование шаблонов кодов.

2. Общие настройки:

• прокрутка, подсветка, задержка автообновления;
• имя программы, файла в браузере и редакторе;
• горячие клавиши для самого редактора (быстрый вызов различных опций);
• настройка путей к установленным на компьютере браузерам;
• внедрение HTMLReader в Internet Explorer и установка его html-редактором по умолчанию.

3. Язык кода (если меняется во время написания)

4. Подсветка (Web-документ, CSS-стиль, Javascript-документ)

Также есть различные настройки для кодировки.

Резюме

В целом, HTMLReader – достаточно мощная и многофункциональная программа для своего бесплатного статуса. Есть некоторые недоработки в интерфейсе: он не слишком-то красив, хотя большинство иконок интуитивно понятны. Иногда не хотело сворачиваться само окно редактора, а некоторые функции просто-напросто отказывались функционировать (например, «править в web»). Поиск по справке практически не работает, хотя и можно определить, где что находится, через указатель.

Плюс HTMLReader’а в том, что он прост: он прекрасно подойдет для новичков, только осваивающих web-дизайн и желающих попробовать свои силы в создании сайтов на HTML или PHP. В принципе, так его использовать наиболее рационально.

P.S. Если вам всё же не по душе этот редактор, попробуйте вот такой: XML редактор PSPad http://gold-free.ru/soft/inet/xml-editor.php.