Редакторы

Автор статьи: Антон Иванов

Редакторы

Вообще, я еще не видел WYSIWYG-редактора (What You See Is What You Get — что видишь, то и получаешь), который бы меня устроил, так как все они неизбежно вставляют "лишний" код, поэтому я возможности пользуюсь невизуальными редакторами. Но сегодня мы поговорим о визуальным редакторе, весьма близком к идеалу. Называется он Composer и входит в состав коммуникационного пакета Mozilla, наследника знаменитого Netscape Navigator. Недавно вышла его версия 1.3, которая и оказалась на моем жестком диске.

После завершения работы весьма симпатичной программы установки, нашему взору открывается браузер, из которого можно запустить все остальные программы пакета. Выбрав из меню "Окно" пункт "Компоновщик" (честно говоря, не самый лучший перевод слова "Composer") мы попадаем в редактор.

Первое, что привлекает внимание — необычайно красивые иконки в панели инструментов (Windows XP отдыхает :)). Как и во всех приложениях из комплекта Mozilla, нажав на небольшую стрелку слева от панели или меню, можно свернуть их, освободив тем самым место на экране. Присутствуют только самые необходимые кнопки, ничего лишнего.

С интерфейсом понятно, теперь испытаем Composer в деле. Сначала попробуем простое форматирование: выделение цветом, изменение гарнитуры и т.п.

В Composer есть очень удобный селектор цветов, наподобие Photoshop: можно выбрать основной цвет и цвет цвет фона. С выделением текста полужирным и курсивом проблем не происходит, а вот с гарнитурой приходится почесать голову... Выбор невелик:

пропорциональный или моноширинный (у моноширинных шрифтов все символы имеют одинаковую ширину, а у пропорциональных ширина символов "l" и "w" различается почти в три раза)
Helvetica, Arial (на компьютерах Apple принято использовать Helvetica, на PC с Windows — Arial, на PC с Linux есть и тот и другой)
Times
Courier
А вот, например, моих любимых Tahoma и Verdana, увы, нет. Может быть, это и правильно. Composer вообще выводит "правильный" код, например, он никогда не вставляет тег <font>, который официально считается устаревшим и не рекомендован к использованию (а вот FrontPage 2000 все равно активно его использует).

Кстати, о коде. Хоть редактор и визуальный, возможность просмотра и редактирования исходного HTML, разумеется, есть (причем этой возможностью приходится часто пользоваться, например, для вставки тире (—)). Что хорошо, так это то, что исходный код показывается "как есть", то есть безо всяких украшательств вроде подсветки тегов, из-за которой FrontPage 2000 (я привык все редакторы сравнивать с ним, все-таки FrontPage является одним из самых распространенных) заметно тормозит на моем PII-350. То ли дело Composer — текст кода показывается, как в Блокноте. Нет никаких раздражающих наворотов, вроде "выделяешь пол-слова — выделяется вся страница" во FrontPage.

Есть и еще один способ редактирования, похожий на визуальный, когда теги показываются в виде небольших прямоугольников. Щелкнув по прямоугольнику, изображающему тег, вы тем самым выделите всю область, его действия. На рисунке справа был щелкнут тег <a>, поэтому выделен весь текст гиперссылки.

Честно говоря, я так и не понял, чемя отличаются режимы "Обычный" и "Предварительный просмотр". В отличие от предварительного просмотра в FrontPage, в Сomposer'е в этом режиме можно точно так же редактировать текст, как и в "Обычном".

Теперь немного отдохнем и развлечемся :). Всем известны "перлы" программы проверки орфографии в офисном пакете Microsoft. Испытаем теперь проверку орфографии в Composer. Для тестирования были взяты слова, некорректно обрабатываемые с точки зрения орфографии Word'ом, а именно:

Илюшка
Мультиканальный
Отмелькала
Стриптизершей
Задвоенных

Volkov Commander
Культурологии
Кратенько
Спецназовец
Полтыщи
Для начала попробуйте скопировать эти слова в Word или FrontPage 2000 и нажмите "Проверка орфографии". Если после вашего истеричного смеха вы еще сможете встать на ноги, тогда мы продолжим ;). Итак, результаты проверки тех же самых слов в Composer:

Илюшка - Composer - OK, FrontPage- проверьте сами ;)

Мультиканальный - нет в словаре, но предлагает заменить не на "мультик анальный", как FrontPage, а на "мульти канальный". Это радует :)
Отмелькала - нет в словаре, вариант FrontPage'а - "отмель кала", Composer'а - "от мелькала". У Composer'а явно не такой извращенный ум, как у FrontPage:)
Хотя я поторопился. "Стриптиз ершей" любят оба редактора.
Равно как и "Зад военных".
Слава богу, хоть Volkov'a Composer не тронул. Вариантов замены нет. Зато FrontPage предложил несколько, в числе которых "Vodka" и "Volvo".
Создатели FrontPage, видимо, являются почитателями таинственного "Культа Урологии", судя по толкованию слова "культурология". Composer остался атеистом.
"Крутенько", сказал FrontPage, быстро сделав распальцовку. Да нет, "кратенько", ответил ему интеллигентный Composer.
"Со спецназовцами шутки плохи", уверен Composer. FrontPage же откровенно заявляет, что, мол, в спецназе служат овцы (его вариант - "спецназ овец").

Composer писали не какие-нибудь садисты, поэтому он не пытается заменить "полтыщи" на "полтещи", как FrontPage. Такое слово есть в словаре программы и никаких сомнений по поводу правильности его написания не возникает.
В Composer, к сожалению, нет проверки пунктуации, тезауруса и словаря синонимов, но не стоит требовать многого от бесплатного продукта.

Развлеклись и хватит. Рассмотрим возможности по вставке в документ картинок. При нажатии на кнопку "Изображение" открывается диалог с четырьмя закладками. Опции в основном стандартные: размер, обтекание текстом, ссылки и т.д., кроме того, есть очень полезный флажок "Относительный URL". При его установке вы не рискуете, вставив картинку со своего жесткого диска и закачав страницу на сервер, увидеть лишь пустое место из-за того, что путь к картинке указался в виде "file:///c:/images/1.gif". Если вам потребуется установить еще какие-либо параметры изображения, нажмите кнопку "Дополнительно". В появившемся диалоге можно указать такие параметры, как толщина границы, назначить изображению карту (usemap), назначить изображению события JavaScript и многое другое.

Кстати, о Javascript'e. В комплекте редактора есть отладчик JavaScript'a, правда, достаточно сложный. Из других сервисов можно отметить "Проверить HTML". По сути дела, эта команда ничего не проверяет, а всего лишь открывает эту страницу, на которой можно загрузить файл с вашего жесткого диска для проверки "правильности" HTML-кода. Для эксперимента я загрузил эту статью - ошибок не было обнаружено. Потом я попробовал загрузить документ, созданный во FrontPage. Нашлась всего одна ошибка в конструкции <hr color="blue">, т.к. атрибута color, определяющего цвет горизонтальной линии, у тега <hr> не существует. Его придумали в Microsoft и в стандарт HTML этот атрибут не включен (поэтому цветная линия будет выглядеть цветной только при просмотре в Internet Explorer, в остальных браузерах она будет просто серой).

Во время написания статьи я заметил еще два отличия от FrontPage (одно хорошее, другое плохое :)). Хорошо то, что для вставки картинки (без обтекания текстом) не нужно начинать новый абзац, как в FrontPage 2000. Кроме того, в последнем постоянно возникают глюки из-за использования тега <p>, например, при выравнивании картинки по центру выравнивается и весь текст страницы. А теперь о плохом: если вставить в документ ссылку и продолжить печатать текст, он будет печататься до тега </a>, то есть ссылка будет продолжаться. Приходится переключаться в режим редактирования кода и исправлять.

И в заключение небольшое тестирование, опять же по сравнению с FrontPage. Сделаем и в том, и в другом редакторе таблицу 5x5, в каждой ячейке текст "Пример", фон таблицы зеленый, текст желтый. Тут же выясняется небольшой недостаток Composer: в пустые ячейки не вставляется  . А жаль. Итак, по результатам теста Composer все-таки выдал на 19% больший код, чем FrontPage. В большей части это из-за того, что в каждую ячейку он вставляет "style=vertical-align:top;", что совершенно не нужно, т.к. по умолчанию значение этого параметра и есть "top".

Вывод: Composer - неплохой визуальный редактор с множеством возможностей, но, пожалуй, еще нуждается в некоторой доработке. Рекомендую его начинающим веб-дизайнерам или тем, у кого нет времени на изучение HTML.