HTML-редакторы. Лучшие из лучших

Алексей Федоров

Allaire HomeSite 4.5

Dreamweaver 3, Macromedia

HotMetal Pro 6, SoftQuad Software, Inc.

    Что нового в версии 6.0

CoffeeCup HTML Editor++ 8, CoffeeCup Software

Adobe GoLive 5, Adobe Systems, Inc.

    Средства визуального дизайна

    Профессиональная разработка Web-узлов

    Расширенные средства

HotDog Professional 5.5, Sausage Software

NetObjects Fusion 5.0, NetObjects, Inc.

Заключение

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

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

HTML-редакторы дают возможность непосредственно следить за тем, какие элементы и атрибуты используются и каким образом. Например, в визуальном редакторе двойное нажатие клавиши Enter приводит к появлению нового параграфа. Средства языка HTML позволяют достичь этого путем использования либо двух <BR>, либо одного элемента <P>. Другой пример — выравнивание содержимого ячейки таблицы. Ниже показано несколько способов достижения этой цели:

<td align="center">...</td>
<p align="center">...</p>
<center>...</center>
<div align="center">...</div>

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

Приведенные примеры показывают, что одна и та же задача может быть решена с помощью различных элементов языка HTML. Если вы разрабатываете домашнюю страницу или просто изучаете язык HTML, вам, возможно, и неинтересны все эти нюансы, но профессиональным разработчикам хорошо известно следующее:

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

Как показывает опыт, HTML-документы, созданные визуальными средствами, обычно содержат больше кодов, чем страницы, созданные вручную. Например, визуальный редактор не всегда может точно определить, что именно вы хотите удалить — только выделенный текст или текст и относящиеся к нему элементы. Другой пример — может быть отказ от форматирования в случае, когда визуальные редакторы отменяют произведенные действия не за счет удаления атрибутов, а за счет добавления новых. Не менее распространенными являются случаи преобразования документов, созданных текстовыми процессорами, в HTML-формат. Часто визуальные редакторы используют множество пустых вложенных списков или таблиц для реализации горизонтальных отступов и других функций форматирования.

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

В настоящее время язык HTML часто используется не по назначению. Как известно, его задача — описать структуру документа, а не ее физическое представление. Согласно спецификации HTML 4.0 для описания физического представления документа следует использовать таблицы стилей. Например, такие элементы языка, как FONT, U, STRIKE, CENTER, отвечающие за физическое представление документа, помечены в спецификации как устаревшие. Более подробно об этом можно посмотреть в спецификации языка HTML 4.0, которая доступна по следующему адресу: http://www.w3.org/TR/REC-html40/intro/intro.html. Отметим, что лишение HTML-документов элементов, отвечающих за физическое представление, делает их более простыми, облегчает нахождение синтаксических ошибок и дает возможность более легко управлять такими документами.

Среди недостатков визуальных редакторов также следует отметить явную дискриминацию HTML-элементов. Некоторые из них можно ввести довольно простым способом — выбором соответствующей команды меню, тогда как другие вводятся только в редакторе исходного текста. HTML-редакторы, напротив, не делают никаких различий между элементами — авторам доступны все элементы и все их атрибуты.

Как мы уже отмечали выше, не существует двух версий браузера, которые одинаково обрабатывали бы HTML-код. Естественно, базовые элементы будут выглядеть одинаково, но чем сложнее становится ваш документ, тем больше кодов требуется для того, чтобы заставить страницу выглядеть одинаково под разными браузерами и на разных платформах. Таким образом, аббревиатуру WYSIWYG следует понимать буквально — то, что Вы видите, то Вы и получаете, и нет никакой гарантии, что остальные пользователи увидят то же самое. Кроме того, в HTML-редакторах вы сами вставляете те элементы и атрибуты, которые считаете необходимыми, вероятность несовместимости в этом случае сокращается.

Следует также отметить, что в большинстве случаев визуальные редакторы работают медленнее текстовых HTML-редакторов. Это связано в первую очередь с тем, что при вставке нового элемента визуальному редактору необходимо перерисовать весь документ. Естественно, это накладывает определенные требования на конфигурацию компьютера.
Таким образом, в большинстве случаев текстовые HTML-редакторы предпочтительнее, поэтому начнем наш обзор с одного из лучших редакторов этого класса — HomeSite 4.5 фирмы Allaire.

Allaire HomeSite 4.5

HTML-редактор HomeSite фирмы Allaire — один из самых популярных профессиональных редакторов. Опрос 136 фирм, занимающихся профессиональным дизайном, проведенный электронным журналом InternetWorld в октябре 1999 года, показал следующее распределение предпочтений профессионалов:

Allaire HomeSite можно использовать для разработки HTML-документов с использованием языка HTML, для разработки скриптовых программ и для создания статических и динамических Web-узлов.

Давайте кратко рассмотрим основные возможности и функции редактора HomeSite.

• Редактирование. Редактор обеспечивает доступ к локальным и удаленным файлам, поддерживает функции вставки и преобразования файлов, установки закладок, простой выбор элементов, автоматическое преобразование специальных символов.
• Дизайн страниц. Редактор позволяет визуально располагать элементы на странице для быстрого создания прототипов документов. В частности, HomeSite поддерживает преобразование содержимого — списков и таблиц документов, созданных с помощью Microsoft Word и Microsoft Excel, в соответствующие HTML-элементы.
• CodeSweeper. Данная функция позволяет применять различные правила форматирования кода, задаваемые пользователями.
• Браузеры. HomeSite позволяет просматривать создаваемые страницы в различных браузерах и автоматически определяет браузеры, установленные на компьютере разработчика.
• Проверка и тестирование. Эти средства предоставляют возможность поддерживать содержимое всего узла, выполнять глобальный поиск и замену, проверку орфографии, кода и целостности ссылок.
• Проекты. С помощью HomeSite можно создавать, внедрять локальные и удаленные Web-узлы и управлять ими.
• Исследование элементов. Функция Tag Inspector может использоваться для редактирования кода отдельных элементов.
• Дерево элементов. Показывает иерархию элементов, используемых в данном документе, и позволяет легко перемещаться между ними.
• Просмотр узла. Данная функция используется для просмотра, редактирования и проверки ссылок на текущей странице и на всех связанных с ней страницах.
• Редактор стилей. Служит для наглядного создания, редактирования и предварительного просмотра таблиц стилей.
• Шаблоны кода. Помогают быстро вставлять блоки кода, повторно использовать повторяющиеся элементы и создавать библиотеки групп элементов.
• Шаблоны и мастера. Позволяют быстро создавать базовые страницы, таблицы, фреймы, код на JavaScript, использовать Dynamic HTML и синхронизировать мультимедийную информацию в формате RealAudio.
• Предварительный просмотр изображений. Данная функция позволяет просматривать Web-изображения и их атрибуты.
• Проверка кода. HomeSite позволяет выполнить проверку соответствия кода различным версиям спецификации языка HTML, а также проверить, поддерживаются ли используемые в документе элементы в той или иной версии браузера.
• Выделение элементов цветом. Различные элементы исходного текста документа, а также программы на скриптовых языках могут быть выделены в редакторе различными цветами.
• Проверка версий. Редактор поддерживает совместную работу с программами контроля версий. Это позволяет выполнять коллективную работу над проектами.
• Макросы. Редактор HomeSite позволяет автоматизировать многие рутинные операции путем написания макросов, использующих объектную модель самого редактора — Visual Tools Object Model.

Итак, мы получили общее представление о возможностях редактора HomeSite. Теперь остановимся на некоторых новинках версии 4.5 более подробно. Если вы уже работали с редактором HomeSite, то интерфейс версии 4.5 не будет для вас незнакомым. Мы найдем здесь обычный набор меню и инструментальных панелей, расположенных в верхней части экрана. Экран разделен на две части. Слева располагается панель ресурсов: средства для управления файлами (в новой версии локальные и удаленные файлы объединены), проектами и средства для просмотра узлов. Здесь также есть средство для просмотра элементов, справочная система и библиотека фрагментов кода.

Справа располагается собственно редактор HTML-кода. Здесь можно выбрать три режима работы: редактирование (Edit), просмотр (Browse) и дизайн (Design). В режиме просмотра мы получаем представление о том, как разрабатываемый нами HTML-документ будет выглядеть в браузере. В режиме дизайна можно перетаскивать элементы и управлять ими примерно так же, как и в текстовых редакторах. Отметим, что режим дизайна — не полностью визуальный, ибо фирма Allaire пропагандирует концепцию WISIWYN (What You See Is What You Need), то есть вы видите только то, что вам нужно.

Редактирование — это основной режим, в котором вы используете редактор HomeSite. Здесь мы найдем три очень полезные функции — Tag Insight, Tag Completion и Tag Validation. Функция Tag Insight позволяет получить список всех допустимых атрибутов и их значений, Tag Completion автоматически завершает ввод того или иного элемента, а Tag Validation выполняет проверку корректности элемента и его атрибутов. Среди новинок отметим режим разделения экрана редактора и возможность «выключения» отображения отдельных фрагментов кода, что может быть полезным при работе с документами большого объема.

Инструментальная панель содержит ряд вкладок, на которых расположены кнопки. Здесь имеются кнопки для вставки как базовых элементов — <BR>, <P> и т.п., так и более специализированных типа CFML (Cold Fusion Markup Language) или ASP (Active Server Page). В зависимости от выбранного элемента нажатие кнопки приводит либо к вставке кода в редактор, либо к появлению диалоговой панели, в которой необходимо указать значения атрибутов, параметры и т.п.

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

Совместно с редактором HomeSite 4.5 поставляется редактор таблиц стилей TopStyle фирмы Bradbury Software LLC. Этот компактный и удобный редактор позволяет создавать и редактировать таблицы стилей, соответствующие спецификации CSS Level 1, CSS Level 2, а также учитывает особенности реализации поддержки CSS в браузерах Microsoft Internet Explorer версий 3-5, Netscape Navigator 4 и Opera 3.5.

В HomeSite 4.5 улучшены функции для работы с проектами. Теперь можно объединить в один проект файлы, расположенные на разных дисках и даже на удаленных серверах. Проект представляет собой виртуальный каталог, позволяющий управлять всеми входящими в него файлами. Для публикации проекта на Web-сервер существует специальный «мастер» внедрения — Deployment Wizard, который поддерживает создание скриптовых программ, управляющих процессом публикации.

Завершая данный обзор, подчеркнем, что HomeSite интегрирован с другим продуктом фирмы — ColdFusion, позволяющим создавать динамические Web-страницы и публиковать данные из СУБД в Web, а также может работать совместно с визуальным редактором Dreamweaver фирмы Macromedia, о котором мы расскажем ниже.

Редактор HomeSite 4.5 выпускается только для Windows, и фирма Allaire не планирует создавать версии этого редактора для других платформ.

На нашем CD-ROM вы найдете ознакомительные версии редактора HomeSite 4.5 и редактора таблиц стилей TopStyle 1.5.

Dreamweaver 3, Macromedia

Визуальный редактор Dreamweaver по праву считается лучшим в своем классе. Пользователи версии данного продукта для Mac OS и Windows практически одинаковы: если вы работали с Dreamweaver на одной платформе, то без труда сможете работать и на другой.

Как и предыдущая версия, Dreamweaver 3 является многооконной программой в стиле Macintosh, использующей плавающие палитры. К тому же чем больше размер экрана и поддерживаемое разрешение вашего монитора, тем удобнее работать с этим продуктом. Dreamweaver 3 сложно использовать в режиме 800 x 600, поэтому начинать следует как минимум с режима 1024 x 768.

Наиболее интересная возможность, реализованная в Dreamweaver, — это Roundtrip HTML. При использовании этой функции все изменения, вносимые в HTML-редакторе, становятся видимыми в основном окне, а в версии 3 добавлена нумерация кодовых строк. Кроме того, в Dreamweaver 3 появилась функция Quick Tag Editor.

Нажатие комбинации клавиш Ctrl+T в текущей позиции курсора приводит к появлению окна, в котором можно ввести новый элемент, выбирая его из списка доступных элементов. Данная функция особенно удобна в тех случаях, когда нужно изменить один или несколько элементов, — можно не переключаться в режим отображения HTML-кода. Для тех, кто предпочитает работать с кодом напрямую, на CD-ROM помещен редактор Allaire HomeSite.

Упомянутая выше функция Roundtrip HTML работает не только с HTML-кодом, но и с Dynamic HTML и клиентскими скриптовыми программами. Помимо этого Dreamweaver можно использовать для создания серверных программ: в версии 3.0 поддерживаются такие технологии, как Active Server Pages, ColdFusion, PHP, Tango и Java Server Pages. Отметим, что такие кросс-платформные технологии, как PHP и JSP, поддерживаемые в Dreamweaver, очень популярны среди пользователей Apache Web Server.

Среди новинок также следует выделить палитру History, использование которой позволяет узнать, какие именно шаги предпринимались для достижения текущего результата.

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

Палитра History — не единственное средство расширения Dreamweaver. Этот редактор имеет собственную объектную модель, доступную из JavaScript. Таким образом разработчики могут создавать новые команды. Можно также добавлять меню, которые хранятся в виде XML-документа, и редактировать существующие команды.

XML-документы активно используются в Dreamweaver, например для обмена информацией при групповой работе — в этом случае XML присоединяется к созданной странице. Отметим, что Dreamweaver не содержит никаких мощных средств для групповой работы. Так, не поддерживается ни репозитарий файлов, ни контроль версий, но разработчик может «закрыть» тот или иной документ от сторонних модификаций.

Редактор Dreamweaver был одним из первых, в котором появились средства для работы с таблицами стилей. Эти таблицы прекрасно справляются с задачей контроля внешнего вида документов и даже сайтов, но не поддерживаются в браузерах ранних версий. Чтобы обойти это ограничение, в Dreamweaver 3 включена новая возможность — HTML-стили, с помощью которых можно собрать вместе правила форматирования и расположения элементов и использовать их в виде специального XML-документа при групповой работе. HTML-стили могут создаваться вручную — указанием атрибутов параграфа и шрифтов либо на основе выделенного в редакторе текста.

Среди других новинок отметим замечательную функцию, позволяющую «очистить» HTML-документы, созданные Microsoft Word, от лишней информации. Данная функция (команда Clean Up Word HTML) позволяет уменьшить размер файла практически вдвое.

Редактор Dreamweaver отлично интегрируется с другими продуктами Macromedia — Generator, Flash, Fireworks. Например, если Fireworks установлена на компьютере, то она будет использоваться как графический редактор по умолчанию. Оба продукта могут управлять друг другом из скриптовых программ. Более того, Macromedia предлагает специальный набор — Dreamweaver Fireworks Studio.

На нашем CD-ROM вы найдете ознакомительную версию редактора Dreamweaver 3.

Следующий HTML-редактор, на котором мы остановимся в данном обзоре, — HotMetal Pro 6 фирмы SoftQuad Software, Inc.

HotMetal Pro 6, SoftQuad Software, Inc.

Этот профессиональный редактор — один из «ветеранов» среди HTML-редакторов. Первая версия HotMetal Pro увидела свет более пяти лет назад. От своих собратьев, пропагандирующих либо чистое HTML-редактирование (HomeSite, HTML Editor++), либо WYSIWYG-дизайн (Dreamweaver, GoLive), данный редактор отличается тем, что работает в некоем среднем режиме, объединяющем лучшие черты и HTML- и WYWIWYG-редактора.

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

Отметим, что на вкладке Dynamic HTML присутствуют средства для создания некоторых эффектов с помощью JavaScript. К ним, в частности, относятся подпрограммы для определения типа браузера, для работы с cookie, для реализации «бегущей строки» и ряд других. На этом поддержка Dynamic HTML заканчивается. Если вам нужен редактор, действительно поддерживающий Dynamic HTML, обратите внимание на Macromedia Dreamweaver.

HotMetal Pro не поддерживает элементов, не относящихся к набору стандартных HTML-элементов. Когда средство проверки HTML-кода обнаруживает незнакомый элемент, появляется специальный мастер, который можно «обучить» новым элементам; таким образом можно сделать HotMetal Pro способным понимать элементы ColdFusion. Впрочем, HotMetal Pro распознает ASP-код безо всяких проблем, а также поддерживает JavaScript и другие скриптовые языки в рамках элемента <SCRIPT>.

Для работы с графическими изображениями и анимационными GIF-файлами следует использовать такие поставляемые вместе с продуктом средства, как Ulead PhotoImpact 3.0 SE, Ulead GIF Animator 1.5, а для оптимизации графических файлов — модуль Ulead SmartSaver, работающий с PhotoImpact и Photoshop. Загрузка файлов на Web-сайты осуществляется с помощью программы WS_FTP Pro 6.02, также поставляемой вместе с редактором.

Редактор комплектуется обширной библиотекой, состоящей из 8000 графических изображений, фоновых изображений, кнопок, иконок и т.п.

Завершая наше знакомство с HotMetal Pro, нужно сказать, что данный редактор рассчитан, скорее, на опытных пользователей и профессионалов. Те же, кто делает первые шаги в создании HTML-страниц и Web-узлов, должны обратиться к более простым средствам типа Microsoft FrontPage 2000, Adobe PageMill или Symantec VisualPage.

Что нового в версии 6.0

Кратко перечислим основные новинки, появившиеся в HotMetal Pro 6.

• Возможность редактирования файлов на удаленных серверах.
• Поддержка синхронизации содержимого локальных и удаленных сайтов.
• Доступ к инспектору атрибутов Attribute Inspector из редактора кода. Данный инспектор отображает все допустимые атрибуты для выбранного элемента.
• Режим Tags On поддерживает «сжатие» содержимого — аналогичная функция есть в HomeSite 4.5 и HotDog 6.
• В режиме проверки документа можно получить детальный отчет об обнаруженных ошибках и, используя его, быстро перейти на строку, содержащую ошибку.
• Глобальный поиск и замена по сайту поддерживают поиск и замену HTML-кода.
• Теперь можно выбрать любую последовательность ячеек в таблице и применить к ним свойства таблицы или другие функции форматирования.
• Новая диалоговая панель Choose Color позволяет выбрать цвета из палитры или создать новую палитру наиболее часто используемых цветов.
• Для создания интерактивных кнопок теперь используется HoTMetaL PRO Button Maker.
• Для импорта данных из баз данных и электронных таблиц предназначено новое средство — Database Import Wizard.
• Разработчики могут расширять среду HoTMetaL PRO, используя COM-интерфейсы или скриптовые программы — в последнем случае можно создавать расширения на языках JavaScript, VBScript, Perl и Python. Полное описание объектной модели HoTMetaL PRO приведено в поставляемом вместе с продуктом руководстве HoTMetaL PRO 6 Programmer’s Guide.

На нашем CD-ROM вы найдете ознакомительные версии редактора HoTMetaL PRO 6.0.

Теперь обратимся к еще одному, не менее популярному HTML-редактору — CoffeeCup HTML Editor++ фирмы CoffeeCup Software.