HTML-редактори. Кращі з кращих

1. Allaire HomeSite 4.5
2. Dreamweaver 3, Macromedia
3. HotMetal Pro 6, SoftQuad Software, Inc.
4. Що нового у версії 6.0

Олексій Федоров

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, яка доступна за наступною адресою:. Відзначимо, що позбавлення HTML-документів елементів, що відповідають за фізичне уявлення, робить їх більш простими, полегшує знаходження синтаксичних помилок і дає можливість більш легко управляти такими документами.

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

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

Слід також зазначити, що в більшості випадків візуальні редактори працюють повільніше текстових HTML-редакторів. Це пов'язано в першу чергу з тим, що при вставці нового елементу візуальному редактору необхідно перемалювати весь документ. Природно, це накладає певні вимоги на конфігурацію комп'ютера.
Таким чином, в більшості випадків текстові HTML-редактори краще, тому почнемо наш огляд з одного з кращих редакторів цього класу - HomeSite 4.5 фірми Allaire.

Allaire HomeSite 4.5

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

Allaire HomeSite 52,90% Bare Bones BBEdit (Mac) 42,60% Microsoft FrontPage 22,80% Microsoft Visual InterDev 19,10% Sausage Software HotDog 4,40% SoftQuad HotMetal Pro 2,90%

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, тому починати слід як мінімум з режиму 1 024 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.