Те, кто уже знаком с азами веб-дизайна и веб-программирования, несомненно, столкнулись с невозможностью серьезной работы в WYSIWYG-редакторах HTML. Обычно они выдают «грязный» и чрезмерно раздутый код, редактировать который встроенными средствами оказывается не удобнее, чем в Notepad. Для профессиональной работы с кодом на языках HTML, Perl, PHP или ASP приходится подыскивать специальное решение – невизуальные HTML-редакторы. Среди них, по традиции, признанным лидером еще недавно являлся HomeSite. Но прошло совсем немного времени, и на свет появились другие HTML-редакторы, внешне напоминающие HomeSite, но имеющие свои особенности. Для тех, кто еще не успел сделать выбор, и предназначена эта статья.
Название: Macromedia HomeSite Версия: 5.0 Автор: Allaire Лицензия: Shareware – 30 дней, потом – $99 Размер: 13,88 Мбайт Сайт:
Рейтинг: *****
Программа HomeSite хорошо зарекомендовала себя в профессиональном сообществе веб-мастеров как мощное и гибкое средство написания не только HTML-кода и скриптов на JavaScript, но и программ на Perl, PHP, ASP. Это, похоже, не очень понравилось гиганту мультимедиа-инструметария Macromedia, и недавно она поглотила компанию Allaire вместе со всеми флагманскими продуктами, включая HomeSite.
Предыдущая версия, HomeSite 4.5.2, принадлежавшая еще фирме Allaire, содержала зачаточные средства визуального редактирования в виде WYSIWYG-режима Design. Конечно, ему было далеко до возможностей Macromedia Dreamweaver, но и код он сильно не портил. С приобретением продукта компанией Macromedia этот режим от греха подальше был предусмотрительно удален из программы, и в новой версии, HomeSite 5, была добавлена кнопка «Открыть в Macromedia Dreamweaver».
Как новейшая, так и предыдущие версии HomeSite имеют мощнейшие средства написания кода. Прежде всего редактор HomeSite выделяется удобством работы с атрибутами тегов. Если перевести курсор внутрь любого тега и нажать «пробел», справа появится выпадающий список его атрибутов. После выбора атрибута открывается дополнительный выпадающий список возможных значений, например, цвета или URL. Так, не запоминая всех атрибутов и их значений (а их достаточно много), можно легко и быстро писать исходный код страниц и скриптов будущего веб-сайта. Отдельного внимания заслуживает великолепная реализация подсветки синтаксиса основных веб-языков (HTML, XML, ASP, PHP, Perl, JavаScript, CSS и др.), причем всех одновременно в одном документе!
Для ускорения ввода самих тегов можно использовать три мощных средства, имеющихся в HomeSite: настраиваемые «горячие» клавиши, тематические панели инструментов (Fonts, Tables, Forms и т. п.), а также многочисленные мастера (wizards). С их помощью можно не только подготовить каркас будущей страницы, но и без проблем создать сложную таблицу, форму, или даже выпадающий список ссылок в виде простенького JavaScript.
В дополнение к перечисленным основным средствам редактирования HomeSite располагает множеством полезных встроенных функций. Прежде всего это средства форматирования кода и проверки его на соответствие стандартам HTML: CodeSweepers и Validate Current Document соответственно. В редакторе доступны несколько CodeSweepers, включая пользовательский. При помощи этих настраиваемых средств можно одним нажатием кнопки мышки очистить код страницы от лишних пробелов и разрывов строк либо добавить их в нужных местах. После этого предательские разрывы между состыкованными картинками исчезнут без следа, а код будет одинаково работать как в MS IE, так и в NN.
Для выбора или задания цвета элементов очень удобен инструмент Palette. С его помощью будут легко доступны поименованные, безопасные, системные и пользовательские цвета. Для быстрой вставки кода нужной картинки пригодится инструмент Tumbnails, создающий в небольшом окне мини-слайд-шоу из всех графических файлов текущей директории. Просто перетаскиваем картинку в нужный участок документа, и ее код автоматически появляется на месте курсора.
В HomeSite входит слегка урезанная версия профессионального CSS-редактора Bradsoft TopStyle 2.10 Lite, использующегося для создания и редактирования таблиц стилей. После выбора нужного селектора стиля в отдельном окне TopStyle станут доступны абсолютно все его свойства (в виде дерева). Сразу же после добавления или редактирования какого-либо свойства изменения отобразятся в окне предварительного просмотра, представляющем собой «кусочек» браузера IE с фрагментом текущей страницы.
Любителям создания элементов навигации по сайту в виде карт-изображений в HomeSite понравится удобнейший инструмент Create Image Map. После выбора нужного изображения и задания названия в специальном окне можно выделить активные участки будущей карты и ввести адреса, на которые они ссылаются. Для контроля точности выделения участок изображения внутри него будет отображаться в другом окне.
В HomeSite есть также инструмент Document Weight, позволяющий оценить скорость загрузки страницы вместе со всеми изображениями и связанными с ней файлами. Он подсчитает общий размер страницы и покажет время ее загрузки с модемами всех скоростей.
Но самой полезной при создании сайта командой, несомненно, будет расширенная контекстная замена (Extended replace). С ее помощью выделенный фрагмент кода можно быстро заменить другим не только в текущем документе, но и во всех открытых документах, в указанной папке и ее подпапках, а также во всем проекте. При этом результаты замены будут отображаться в отдельном окне программы, прямо под окном редактора. Если там выбрать какую-либо строку замены, окно редактора покажет место ее расположения (даже в случае, если заменяемый текст расположен в другом файле). Это поможет в случае ошибки отменить сделанное исправление. Команда расширенной замены поддерживает регулярные выражения, фильтрацию по расширениям и типам файлов, позволяет пропускать теги и выполнять резервное копирование директорий перед заменой. Благодаря этому HomeSite является удобным средством для создания, редактирования и администрирования проектов больших сайтов.
Для начинающих и даже опытных пользователей в HomeSite доступно огромное количество шаблонов новых документов самых различных типов: HTML, DHTML, XHTML, Java, WML и т. п. Практически ничего не понимая в программировании, при помощи шаблонов можно без труда создать, например, слайд-шоу на DHTML. Для быстрой публикации и обновления проекта в него встроен FTP-клиент. Возможно обновление по запросу либо создание скрипта автоматического обновления файлов проекта. При этом не придется беспокоиться о такой «мелочи», как устаревшие страницы.
HomeSite не завоевал бы такую популярность, не будь у него удобнейшего интерфейса, ставшего де факто стандартом для невизуальных HTML-редакторов. Он состоит из панели групп инструментов быстрого ввода тегов (справа вверху), универсальной панели менеджера ресурсов, (браузера файлов, панели управления проектом и HTML-руководства), инспектора тегов (слева), главного окна редактирования (справа) и окна сообщений (внизу).
Переключение между документами в окне редактирования выполняется при помощи ярлычков внизу окна, а способ отображения – в исходном виде или в окне браузера – переключается ярлычками вдоль его верхнего края. Кроме того, редактируемый документ можно просмотреть и в одном из внешних браузеров (IE, NN, Opera и т. п.).
Окно редактирования также предоставляет ряд полезных возможностей: разбивку на два окна, просмотр с автопереносом слов, нумерацию строк, установку и переход по закладкам, просмотр неотображаемых символов, разворачивание на весь экран, проверку и автозавершение вводимых тегов и даже отображение окна браузера под окном редактора. В режиме просмотра можно включить отображение горизонтальной и вертикальной линеек, помогающих точно расположить элементы страницы. Не хватает в программе, разве что, инструмента «рука», как в Adobe PageMaker, для быстрого перемещения по документу.
Можно еще долго перечислять достоинства и возможности HomeSite, но пора уже переходить к другим продуктам.
Российский HTML-редактор SNK Visual HTML Workshop сейчас распространяется в составе интегрированного пакета для веб-мастеринга SNK WebOffice, но может быть скачан и отдельно. Внешне интерфейс SNK Visual HTML Workshop напоминает более именитые аналоги: слева – дерево проекта, сверху – меню и вкладки с панелями инструментов, справа – окно редактора, а внизу – панель сообщений. Однако сразу же бросается в глаза отсутствие вкладки View в самом окне редактора. Это значит, что SNK Visual HTML Workshop не полностью интегрируется с MS IE и не позволяет удобно отображать результаты работы внутри окна редактора программы. По нажатию кнопки возможен просмотр во внешнем браузере, в частности, в отдельном окне собственного браузера, построенного на ядре MS IE.
Как и другие HTML-редакторы, он подсвечивает теги практически всех основных языков веб-программирования. Правда, в один момент подсвечивается только один из синтаксисов (выбирается в меню, по умолчанию HTML), а вставка в исходный документ кода CSS или скрипта отображается серым цветом. Хорошо, что при открытии документа редактор самостоятельно определяет способ подсветки по расширению файла.
Нет в SNK Visual HTML Workshop и удобнейшего механизма подсказки параметров текущего тега и редактирования их в отдельном окне, а также контекстного меню команд, применяемых к выделенному участку кода. Но вместо этих удобных механизмов в редакторе от SNK есть другие средства ускорения работы: «горячие» клавиши и команды вставки тегов, помощники вставки тегов и скриптов.
Мастера CSS Builder и JavaScript Builder представляют собой практически отдельные программы генерации таблиц стилей и визуального конструирования функций. Все параметры в них названы русскими словами: «Отступ», «Поле», «Позиционирование», «Трекинг», «Гарнитура» и т. п.
Выделенные фрагменты текста также можно обрабатывать, но только командами из верхнего меню «Правка –> Манипуляции». Здесь есть всевозможные операции с выделенной областью: изменение регистров только тегов, перевод спецсимволов в амперсанды, очистка от тегов, удаление лишних пробелов, и такая удобная для российских пользователей функция перевода «qwerty – йцукен». В SNK Visual HTML Workshop встроены 10 команд перевода из одной распространенной кодировки в другую.Наиболее полезная функция HTML-редакторов – расширенный поиск с заменой – в продукте от SNK также присутствует.
Удобно организована в редакторе работа с проектами. «Мастер создания новых проектов», можно сказать, сделан «на 5 с плюсом». Действительно, за «пять шагов» легко и просто будут заданы все локальные и внешние пути проекта, заголовок главной страницы, имя внешнего файла таблиц стилей, глобальные параметры фона, текста и гиперссылок, метатеги (описание, ключевые слова), файлы автоматической вставки повторяющихся кодов в и каждого документа проекта, кодировка по умолчанию, а также описана структура фреймов, если они используются. После проведения этой несложной процедуры создание и добавление в проект новых страниц заметно упростится.
К дополнительным полезным свойствам SNK Visual HTML Workshop можно добавить подсчет времени загрузки страницы, «доктор проекта», очищающий его от мусора, и встроенный FTP-клиент для автоматического обновления сайта. Было бы непростительной оплошностью не упомянуть о грамотно составленной справочной системе программы, включающей прежде всего русскоязычные справочники по HTML, CSS и JavaScript.
Все основные свойства редактора («оформление», «поведение», «подсветка», «синтаксис», «содержимое коллекций инструментов») доступны для редактирования в окне настроек. Все они реализованы на встроенном языке eScript, что позволяет добавлять собственные команды. Для создания собственных коллекций компонентов можно использовать программу Package Editor, доступную на сайте разработчиков редактора, а сами команды всегда можно задавать в командной строке, находящейся в нижней части окна программы.
Конечно же, SNK Visual HTML Workshop не содержит множества уникальных функций, запатентованных монстрами инструментария для веб-мастеринга, но и не страдает от отсутствия оригинальности. А в целом, за смешные деньги (причем, в рублях) веб-мастерам любого уровня доступен компактный и мощный HTML-редактор, который приятно называть российским!
Название: AceHTML Pro Версия: 5.03.1 Автор: Visicom Media, Inc. Лицензия: Shareware, $59,95 Размер: 6,1 Mбайт Сайт: Оценка: ****
Этот сравнительно небольшой HTML-редактор по своим возможностям практически не уступает знаменитому HomeSite. Можно сказать, что с переходом HomeSite в руки гиганта веб-инструментария Macromedia у AceHTML даже появилась возможность выйти вперед.
Если говорить о возможностях программы, то придется просто перечислять те же опции, что и у HomeSite. Это, прежде всего, полностью настраиваемая по своему вкусу подсветка тегов с поддержкой всех популярных языков веб-программирования, включая XML. Как и все HTML-редакторы старшего класса, AceHTML может использоваться для создания и удобного управления большими проектами, вплоть до публикации на FTP-сервере при помощи встроенного FTP-клиента AceFTP и автосохранения в архиве. Разумеется, редактор позволяет просматривать результаты редактирования как во встроенном окне браузера на движке MS IE, так и в одном из четырех настраиваемых пользователем внешних браузеров (среди которых уже указана Opera). По правде говоря, встроенный браузер AceHTML удобнее, поскольку в нем есть такие маленькие, но приятные мелочи, как отображение в окне от 640і480 до 1024і768 (в HomeSite только до 800і600) или строка ввода URL.
Программа может проверять правильность кода при помощи достаточно мощного встроенного валидатора, рекомендации которого помогут вам сделать документ идеальным, пусть порой понятным и не всем браузерам. В редакторе имеется встроенный оптимизатор кода, который может убирать лишние пробелы, переносы строк, комментарии и другие ненужные, но отяжеляющие документ мелочи.
В AceHTML, как и в HomeSite, имеется черезвычайно удобный инструмент «Расширенный поиск и замена», также поддерживающий регулярные выражения и отбор файлов по маске.
Если на компьютере установлен редактор CSS Bradsoft TopStyle, то при редактировании таблиц стилей в AceHTML можно вызвать его нажатием кнопки «CSS» на панели инструментов. В противном случае вполне можно обойтись неплохим встроенным инструментом Style Sheet Expert.
Программа содержит интересное решение для проверки работы PHP- и Perl-скриптов – так называемые парсеры. Они запускают внешние интерпретаторы этих языков (например, Active Perl), чтобы проверить синтаксис и работу скриптов.
В AceHTML имеется и такая полезная возможность, как проверка работы ссылок. До боли напоминая своим видом HomeSite, редактор AceHTML имеет в чем-то даже более совершенный интерфейс. Возникает ощущение, что его авторы уже поработали в HomeSite и решили убрать из своего детища те недостатки, которые время от времени сами поминали недобрым словом.
Все элементы настолько плотно расположены в окне программы, что не занимают лишнего места. Например, таблица специальных символов сжата в одну горизонтальную строку, которую в случае необходимости можно прокручивать. Даже верхняя полоса меню поделена между самим меню и одной из панелей инструментов. У самой полосы меню и у каждой панели инструментов справа имеется маленькая стрелочка Add or Remove Buttons, позволяющая оставить на панели или в меню именно то, что чаще всего используется. Панели инструментов, организованные горизонтально, как в HomeSite, более многочисленны и насыщены различными кнопками. А конструкторы тегов и генераторы скриптов просто вызывают умиление! Даже если вы не разбираетесь в JavaScript, теперь для вас не составит проблемы сделать на вашем сайте выпадающие меню или нарисовать летающие за курсором кометы.
Памятуя об удобствах работы в HomeSite, можно с уверенностью сказать, что в AceHTML их ничуть не меньше. Более того, практически все они, начиная от методов и кончая «горячими» клавишами, напоминают HomeSite, но имеют дополнительные плюсы. Есть и контекстные меню с подсказкой параметров, возникающие при вводе пробела внутри какого-либо тега. При этом в правом окне программы будут выведены все существующие атрибуты, события и стили данного тега с возможностью задания значений. Те из них, что реализованы только в отдельных браузерах, помечены соответствующими значками. Кроме того, для текущего документа в правом окне программы можно выбрать вкладки Code Explorer или Visual Explorer, при помощи которых легко проверить структуру страницы и всего проекта. AceHTML особо порадует любителей пользоваться правой кнопкой мыши. Открываемое ею меню позволяет выполнять над выделенным участком текста полтора десятка различных операций. Например, можно вызывать окно редактирования всех свойств выделенного тега или превратить несколько строк текста в ненумерованный список, вызвать Code Optimiser, быстро вставить гиперссылку или изображение. В окне вставки изображения даже реализовано что-то вроде браузера графических файлов с предпросмотром. При работе с большими документами удобна возможность устанавливать по правой кнопке мыши закладки для быстрого перехода на нужное место в документе.
Встроенные руководства по HTML, CSS, SSI и JavaScript в AceHTML не менее полные и подробные, чем в HomeSite, но открываются в отдельных окнах вне программы и не загораживают редактируемый документ. Программа обладает гибкой и подробной системой настройки, так что ее можно приспособить под вкусы самого взыскательного пользователя.
В частности, можно редактировать шаблоны новых документов, управлять автосохранением редактируемых файлов. Большим преимуществом AceHTML является и очень хорошая многоязыковая поддержка. По умолчанию в редакторе и проверке орфографии (используется спеллер MS Word) устанавливается системная кодовая страница, так что пользователь просто забывает о проблеме кодировок.
Если вы давний поклонник HomeSite или собирались приобрести его, но денег, как обычно, не хватает, можете сэкономить и купить его не менее мощный аналог AceHTML Pro, практически ничего при этом не потеряв и даже приобретя еще довольно много полезного для работы.
За скромным названием 1st Page («первая страница»), подразумевающим что-то вроде Notepad или Frontpage Express, скрывается оригинальный инструмент создания HTML-страниц. Оригинальность его заключается в том, что в зависимости от самооценки пользователя ему может быть предложено либо незамысловатое меню из больших кнопок вставки самых основных тегов и команд (Easy mode), либо практически полновесный клон HomeSite, хотя и отличающийся от него элементами интерфейса и некоторыми возможностями.
При первом запуске программы пользователю предлагается определиться и выбрать режим работы программы в зависимости от его профессионального уровня. При необходимости, меню Options всегда позволяет изменить режим работы. Режим Expert прелагает знакомую по HomeSite компоновку интерфейса: меню, панели инструментов окна браузера-менеджера проекта слева и главное окна редактора HTML справа. На том же месте – над окном редактирования – есть ярлычок предварительного просмотра во встроенном браузере, а сверху, в панели инструментов, есть кнопка просмотра страницы во внешнем браузере. Те же вкладки открытых документов, что и в HomeSite, те же панели инструментов. Есть подсветка тегов различных веб-языков, правда, выбираемая вручную. Вроде бы все то же! Разве что, «горячие» клавиши по умолчанию назначены иначе, чем в HomeSite. Однако интерфейс 1st Page заметно отличается от интерфейса HomeSite. Например, есть отдельная панель выбора веб-цветов справа от окна редактора. Здесь можно, как в графических программах, выбрать цвет из палитры пипеткой или задать его вручную.
В левой панели менеджера ресурсов, кроме браузера файлов и менеджера проектов, есть и активный справочник по тегам языков разметки и их расширений для отдельных браузеров. Если кликнуть по какому-либо тегу, он появится на месте курсора в окне редактора. Также имеется вкладка с информацией об основных тегах HTML 4.0, но, в отличие от HomeSite, их описание (от W3C) дается на вкладке в одном окне рядом с редактором и просмотромредактором и вьюером. Более грамотно в окне просмотра реализовано кадрирование для определенного разрешения (до 1024і768). Есть уникальный режим предпросмотра в реальном времени, в котором делится пополам и все изменения в коде страницы немедленно отображаются в окне просмотра..
Однако кое-чего для профессиональной работы все-таки не хватает. В редакторе 1st Page, например, нет выпадающего меню подсказок свойств текущего тега – удобнейшего ускорителя работы. Хотя в контекстном меню и есть пункт Edit tag, но куда ни нажмешь, он остается неактивным. Отсутствует и другой важный инструмент – «Расширенный поиск и замена». Есть замена с поддержкой регулярных выражений, но только внутри текущего документа. Инструментарий Tidy HTML Quick Tools непригоден для проверки правильности кода страницы, поскольку переводит русские буквы в нечитаемые спецсимволы и очень сильно искажает дизайн.
Набор пунктов главного меню также рассчитан на неопытных пользователей, которым нужно помочь с заданием основных свойств страницы, вставкой картинки или несложного скрипта. Хорошо хоть, что можно редактировать пункты меню, все инструментальные панели, а также «горячие» клавиши команд. Не удалось найти и опцию сохранения файлов в формате Unix.
Хотя редактор вроде бы предназначался и для начинающих, в нем нет выбора различных шаблонов новых документов и продвинутых помощников – «визардов». Тем не менее, даже опытный веб-мастер может найти в редакторе кое-что полезное. Например, в меню, появляющемся после нажатия правой кнопки мыши на выделенном фрагменте текста, гораздо больше пунктов, чем в HomeSite: можно задать все параметры форматирования текста и абзаца, сменить регистр, преобразовать в нумерованный и ненумерованный список, в таблицу, в комментарий или сделать выделенный текст ссылкой. К услугам веб-мастеров также 450 Java-скриптов, 15 DHTML-скриптов, 17 Perl-скриптов, XML-конвертер, HTML-компрессор и автокорректор английской орфографии. Похоже, что 1st Page 2000 создавался для профессионалов, но по возможностям и удобствам немного не дотягивает до серьезного уровня. Тем не менее, это, скорее всего, единственный бесплатный HTML-редактор такого класса.
Хотя этот невизуальный HTML-редактор имеет почтенный возраст, известное имя и приставку Pro, однако за всеми этими причиндалами и множеством мишуры нет-нет, да и проглядывает инструмент для тинейджеров. Даже внешне похожий на HomeSite интерфейс с окном менеджера ресурсов и панелями инструментов, объединенными в виде вкладок в единый блок, сразу же чем-то выдает свою направленность на подростковую аудиторию. То ли вкладок панелей инструментов слишком мало, то ли не хватает встроенного предварительного просмотра документа, а может быть, отпугивают профессионала нелепые звуки (которые предлагается тут же отключить) и детские иллюстрации с собакой гангстерского вида почти в каждом окне программы.
В целом, HotDog Pro имеет все основные атрибуты HTML-редактора, такие как настраиваемая подсветка тегов, поддержка управления проектами (websites), мастера, таблицы и «горячие» клавиши быстрой вставки тегов, контекстная помощь по свойствам тегов в отдельной вкладке окна менеджера ресурсов, встроенный FTP-клиент для скачивания файла. В программе есть простенький редактор таблиц стилей, и подерживаются достаточно сложные операции с выделенными фрагментами текста. Более того, для расширения возможностей редактирования HTML прямо из окна программы можно подключить дополнения под названием SuperToolz.
Интерфейс HotDog тоже есть за что похвалить. Например, за приятную возможность размещать несколько открытых документов вертикально для быстрого доступа к каждому из них или за кнопку выбора формата сохранения файла (Win/Unix/Mac) в левом нижнем углу окна редактора. Очень удобно то, что почти все дополнительные инструменты HotDog расположены в окне менеджера ресурсов в виде вкладок (всего в менеджере может быть до двенадцати вкладок!). Помимо файл-менеджера там удобно разместились таблица спецсимволов, неплохой навигатор по структуре документа, редактор Clipboard, макроредактор, закладки, сделанные в MS IE или NN, редактор свойств тегов, таблица HTML-тегов и даже небольшой редактор скриптов. Стоит также отметить такие приятные инструменты HotDog, не входящие в менеджер ресурсов, как генератор фотогалерей из картинок, находящихся в выбранной директории, или менеджер мультимедийных файлов.
И все-таки рекомендовать этот HTML-редактор профессионалам не стоит из-за отсутствия в нем таких важных инструментов, как расширенная замена, валидатор кода, мощный редактор стилей, а главное, из-за его непомерно высокой цены при не очень высоких надежности и производительности.