Современные инструменты создания сайтов

Документы HTML являются обычными текстовыми ASCII-файлами. Это означает, что для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария (рассматриваемого далее) тем, что требуют знания правил составления HTML вручную, редакторы лишь упрощают и ускоряют этот процесс.

Последние годы характеризуются резким ростом рынка авторских инструментов. HTML-редакторы класса WYSIWYG (What You See Is What You Get – что видишь, то и получишь) имеют графические интерфейсы, которые делают написание HTML больше похожим на программу редактирования текстов или разметки страницы. Первоначальной целью этих программ было освобождение пользователей от тегов HTML, наподобие того, как программы разметки страниц защищают разработчика от набора команд языка PostScript. Сегодня их значимость возросла, так как они повышают эффективность и уровень автоматизации производства документов, обеспечивая в то же время доступ к исходному тексту HTML.

Наиболее популярными в настоящее время WYSIWYG-редакторами являются: Macromedia Dreamweaver, Adobe GoLive, HomeSite, HoTMetaL PRO, Microsoft FrontPage, Namo WebEditor, NetObjects Fusion, TrellixWeb.

Dreamweaver. Сложный, мощный продукт Dreamweaver фирмы Macromedia предназначен для профессиональных авторов Web, создающих узлы, в которых безупречно соединены разнообразные высокоуровневые элементы. Благодаря входящему в комплект поставки пакету Web-графики Macromedia Fireworks возможности Dreamweaver значительно шире, чем у других продуктов в обзоре.

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

В процессе редактирования в окне WYSIWIG разрешается переносить с помощью мыши объекты из палитры в рабочую область и назначать атрибуты. В палитре Objects (Объекты) могут содержаться объекты, разработанные в других фирмах, например RealMedia. При размещении объекта, генерируемого программой Fireworks, исходный текст автоматически встраивается в нужные места.

Концепция слоев обеспечивает гибкость компоновки страниц Dreamweaver. Слои преобразуются в таблицы для устаревших версий браузеров с помощью удобной команды. Программа Dreamweaver совместима как со стилями CSS, так и встроенными стилями HTML.

В отличие от HoTMetaL PRO, в Dreamweaver не предъявляется строгих требований к исходному тексту. Поэтому продукт совместим с Web-узлами, построенными с помощью других программ. Кроме того, он без изменений воспринимает сценарии, составленные на таких языках, как ASP, ColdFusion и JSP.

Исходный текст HTML можно редактировать непосредственно или воспользоваться чрезвычайно удобным редактором Quick Tag Editor. Существует несколько способов внесения глобальных изменений, в том числе с помощью охватывающей весь узел функции поиска с заменой и с использованием библиотеки Library, где редактирование исходного варианта объекта приводит к обновлению всех его экземпляров. В состав Dreamweaver входит очень мощный HTML-редактор HomeSite

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

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

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

Adobe GoLive. Пакет Adobe GoLive с рабочей средой, напоминающей настольную издательскую программу, - отличное решение для опытных разработчиков, пока не готовых перейти к программированию на HTML.

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

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

На основе временной шкалы подготавливаются мультипликационные клипы с ключевыми кадрами и анимационные подсказки. Альтернативный метод заключается в запоминании перемещений мыши для задания траектории движения объекта.

Заслуживают внимания многочисленные дополнительные возможности GoLive. Например, во встроенном редакторе JavaScript предусмотрен перенос мышью событий в окно редактирования для построения сценария. А с помощью простого видеоредактора можно вносить изменения в клипы QuickTime.

В GoLive нет ни заранее подготовленных шаблонов, ни "мастеров". Однако можно автоматизировать работу, составляя собственные шаблоны или используя динамические компоненты для указания на внешние программы HTML.

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

Пакет Adobe GoLive - серьезный конкурент Dreamweaver, однако последний удобнее в работе и обладает более широкими возможностями расширения. Тем не менее GoLive - мощный инструмент проектирования для художников, которые хотят полностью контролировать эстетическое оформление узла, не углубляясь в чащу исходного текста HTML.

HomeSite. Мысль о том, чтобы слепо передать управление авторской среде WYSIWIG, вызывает содрогание у многих опытных программистов. Для таких пользователей предпочтительным инструментом станет пакет HomeSite 4.5.1 фирмы Allaire. Несмотря на некоторую необычность, программа обеспечивает быстрое и четкое ручное составление исходных текстов. Она наделена такими удобными элементами, как всплывающие списки атрибутов тегов, вставляемые одним щелчком мыши.

Принимаемый по умолчанию интерфейс представляет собой редактор исходного текста HTML с позиционируемыми инструментальными линейками и панелью ресурсов. Переключение между редактором исходного текста, окном предварительного просмотра и простым WYSIWIG-редактором производится с помощью закладок. Желающие использовать преимущества различных подходов к проектированию узлов могут приобрести HomeSite в составе пакета Dreamweaver фирмы Macromedia.

В состав HomeSite входят шаблоны и "мастера" для построения простых страниц. Чтобы добавить подготовленный пользователем шаблон в диалоговое окно File | New, достаточно просто поместить HTML-файл в папку шаблонов. Дополнительные "мастера" помогут вставить мультимедиа-элементы и спроектировать DHTML-эффекты. Предусмотрено даже создание специализированных "мастеров" и диалоговых окон.

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

Пользователи HomeSite со стажем уже знакомы с недостатками пакета, которые давно пора исправить. Клавиатура удобна для работы собственно с редактором, но не с панелью ресурсов. Инструментальная панель специальных символов слишком широка для большинства мониторов, а изменение ее размеров не предусмотрено. Неудобная и неполная справочно-консультационная система на базе HTML недоступна из многих диалоговых окон. То обстоятельство, что даже при таких недостатках HomeSite остается лучшим редактором исходного текста HTML, свидетельствует о несомненных достоинствах продукта.

Уровень автоматизации HomeSite ниже, чем у программы Microsoft FrontPage, которая генерирует навигационные панели и выполняет преобразование стилей в масштабах всего узла. Но если вы хотите составить собственный исходный текст, то HomeSite - единственный инструмент, который вам нужен.

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

В программе имеются контекстно-чувствительные палитры HTML-элементов, атрибутов и событий, которые облегчают подготовку безошибочного исходного текста. Помимо того что в HoTMetaL приняты строгие соглашения о структуре документов, проверка исходного текста HTML производится в процессе его проектирования или импорта, что также чрезвычайно важно. Такая мера гарантирует, что узел будет совместим с разнообразными браузерами, однако при этом затрудняется работа с узлами, содержащими нестандартный исходный текст, например сценарии ASP или ColdFusion.

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

К достоинствам HoTMetaL можно отнести функции управления узлом и дистанционного редактирования. Исследовать узел или внести в него изменения можно в окне Web (отображающем навигационные связи) или Page (в котором показаны все связи текущей страницы). HoTMetaL отслеживает внутренние адреса URL и автоматически восстанавливает нарушенные связи. Программа также проверяет корректность внешних адресов HTTP, но не адресов FTP.

Как и в Dreamweaver, в HoTMetaL PRO применяется объектная документная модель DOM (Document Object Model), которая служит для записи или составления макрокоманд и позволяет применять любые стандартные языки сценариев для настройки интерфейса.

Совместимая с CSS программа располагает пользовательским интерфейсом для редактирования основных атрибутов, таких, как шрифты и поля. Несмотря на способность определять абсолютные координаты объекта, программа не имеет WYSIWIG-механизма размещения элементов страницы: координаты приходится вводить вручную.

HoTMetaL - мощный продукт, для освоения которого требуется время. Однако он привлекателен для авторов, которые высоко ценят строгость соблюдения стандарта HTML. В противном случае следует обратиться к пакетам Adobe GoLive и Dreamweaver, более мощным и удобным в использовании.

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

Многооконный интерфейс FrontPage подобен интерфейсам других программ Microsoft Office, например Microsoft Outlook. Главное окно служит для редактирования и решения других задач, а панель пиктограмм - для переключения между режимами просмотра. Удобен доступ к виду текущей страницы, списку файлов текущей папки, отчетам о состоянии ссылок и статистике узла, к структурной схеме узла и составленному пользователем списку задач.

Переключение между режимами WYSIWIG, HTML и предварительного просмотра производится с помощью закладок. Процедуры редактирования страниц поразительно похожи на операции Microsoft Word, большинство инструментов расположено в аналогичных меню и инструментальных панелях. Как и в HoTMetaL PRO 6.0, в программе FrontPage предусмотрена возможность показа тегов в режиме WYSIWIG.

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

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

Благодаря множеству анимационных DHTML-эффектов изображения могут внезапно возникать на странице или "влетать" на нее по спиральной траектории. К сожалению, невозможно записывать специальные анимационные эффекты, как это делается в программах Dreamweaver, Adobe GoLive 4.01 и Namo WebEditor. Графические и текстовые блоки можно позиционировать с точностью до целого числа пикселов. Однако без вертикальных и горизонтальных направляющих линеек выполнить процедуру позиционирования в окне редактирования сложно.

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

Namo WebEditor. В распоряжение пользователей Namo WebEditor 3.06 предоставляются инструменты WYSIWIG-редактирования Web-страниц и мощные функции, в частности DHTML-анимации; при этом пакет в несколько раз дешевле, чем программы Dreamweaver фирмы Macromedia и Adobe GoLive 4.01.

Интерфейс продукта подобен интерфейсам HomeSite 4.5 фирмы Allaire и FrontPage. В панели ресурсов с закладками отображаются списки файлов, инструментарий управления проектом и схема ссылок текущей страницы. В нижней части окна редактирования расположен ряд закладок для переключения между режимами HTML, WYSIWIG и предварительного просмотра. Другой ряд закладок, размещенный в верхней части окна, служит для перехода между открытыми страницами. В отдельных подокнах удобно просматривать две или несколько открытых страниц одновременно, чего нельзя сделать в программе FrontPage.

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

Из-за невозможности автоматически строить и обновлять навигационные линейки функции Namo для работы с заготовками проектов не так мощны, как в программах FrontPage и Fusion, но отличаются большей гибкостью. Объекты разрешается вставлять в любое место страницы, а не только в места, отведенные для этой цели разработчиком заготовки. С помощью "мастера" можно построить целый узлы с заранее позиционированными объектами, однако из-за его ограниченных возможностей это вряд ли практически целесообразно.

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

В целом Namo WebEditor отличается сочетанием четкого интерфейса и ряда мощных инструментов. Пакет с добротными функциональными возможностями и привлекательной ценой достоин внимания.

NetObjects Fusion. Большинство авторских пакетов Web похожи на текстовые процессоры, а NetObjects Fusion функционирует подобно настольной издательской системе. Благодаря способности позиционировать изображения с точностью до пиксела и фиксировать элементы в отведенных для них местах, Fusion - идеальная программа для построения насыщенных графикой узлов. Авторам, желающим проектировать узлы с объемными текстовыми материалами и иметь полный контроль над исходным текстом HTML, лучше выбрать другой пакет.

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

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

Базовые операции верстки довольно просты, но освоить эффекты DHTML сложно. Однако, изучив запутанные диалоговые окна, вы сможете производить сложные действия. К сожалению, в программе Fusion нельзя записывать действия на временной шкале, как в Macromedia Dreamweaver и Namo WebEditor.

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

Так же как и в программе TrellixWeb, в пакете Fusion в процессе редактирования используется фирменный формат файлов, а исходный текст HTML генерируется лишь при предварительном просмотре или публикации страницы. А поскольку импортированные в программу Fusion страницы подвергаются переформатированию, мы пришли к выводу, что продукт полезен лишь для построения новых узлов, но не для внесения изменений в узлы, построенные с помощью других пакетов.

TrellixWeb. Отличающийся чрезвычайной простотой пакет TrellixWeb предназначен для потребителей и владельцев малых предприятий, которые хотят строить несложные узлы, совершенно не изучая язык HTML. В пакете отсутствуют передовые функции и даже не предусмотрено средств редактирования HTML, однако с помощью шаблонов и "мастеров" TrellixWeb можно в течение нескольких минут построить вполне привлекательный узел.

Работа с TrellixWeb во многом напоминает работу со стандартным офисным пакетом. Инструментальные панели в стиле Microsoft Office, заготовки проектов и указатели места заполнения хорошо знакомы пользователям пакета PowerPoint. Начать работу над узлом можно как с шаблона, так и с "мастера". Кроме выполнения стандартных операций (таких, как выбор заготовки проекта), перед началом процедуры генерирования узла пользователь может выбрать название и реорганизовать страницы.

Поскольку TrellixWeb работает с собственным форматом и генерирует исходный текст HTML только в ходе операций экспорта, предварительный вид страницы не всегда точно соответствует ее представлению в браузере. В результате начинающим авторам проще управлять файлами, сохраняя все страницы, текст и графику узла в единственном TLX-файле. К сожалению, для предварительного просмотра ключевых элементов Web-узла (например, анимированных GIF-изображений и интерактивных элементов) необходимо вызвать внешний браузер.

В программе TrellixWeb нельзя пользоваться каскадными таблицами стилей (CSS), вместо этого внутренние текстовые стили записываются как простые теги. Не предусмотрено и абсолютное позиционирование объектов. Для построения страниц с несколькими колонками необходимо использовать редактор таблиц.

TrellixWeb не выполнила значительную часть тестового сценария лаборатории PC Magazine Labs, поскольку программа не импортирует существующие Web-узлы. Она не позволяет генерировать и сложные Web-эффекты, в частности управляемые трансформируемые объекты. Однако в программе предусмотрено несколько обходных способов, при помощи которых можно дополнить узел сложными элементами.

Значительно более сильное впечатление производит Web Gems - способ захвата HTML-элементов на партнерских узлах в Интернете. В сущности, фирма Trellix предоставляет дружественный интерфейс, через который можно выйти в Web и импортировать программный код, превратив свой узел в филиал торгового киоска, завести гостевую книгу или отслеживать статистические показатели узла.

Trellix экспортирует готовый к публикации узел в HTML. Процедура FTP безупречна. Тем не менее программа TrellixWeb нуждается в некоторых дополнениях. Даже для проектирования простейших узлов в программе не хватает возможности напрямую работать с анимированными изображениями GIF и простого метода построения страниц со многими колонками. Следует полнее использовать мощную функциональность Web Gems.

Несмотря на указанные недостатки, программа TrellixWeb прекрасно удовлетворяет элементарные нужды начинающих пользователей. Хотя в TrellixWeb нет ярких эффектов, имеющихся в таких продуктах начального уровня, как FrontPage или NetObjects Fusion, она станет прекрасным выбором для авторов, желающих быстро опубликовать простой узел, обеспечивающий их присутствие в Web.