Обзор Macromedia Dreamweaver 8 - WYSIWYG HTML редактора


Macromedia Dreamweaver 8 (в переводе – ткач мечты) – HTML-редактор, разработанный компанией Macromedia. Богатый инструментарий, удобный интерфейс, открытость приложения для всевозможных настроек и другие особенности делают Dreamweawer одним из самых популярных HTML-редакторов в мире.

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

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

Macromedia Dreamweaver обеспечивает:

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

Кроме этого:

  • Macromedia Dreamweaver 8 – это и разработчик дизайна, и редактор кода в одном инструменте;
  • Dreamweaver 8 позволяет с легкостью использовать новые технологии дизайна и кодирования;
  • с помощью Dreamweaver 8 и Flash Video поместить видео на сайт не составит никакого труда;
  • мощная CSS-панель предоставляет возможность произвести изменения, не набирая код вручную;
  • Dreamweaver взаимодействует с XML.

Визуальный дизайн

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

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

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

Поддержка JavaScript

Macromedia Dreamweaver 8 обладает расширенными возможностями написания скриптовых программ и их связи с отдельными элементами создаваемого документа. Рассмотрим пример. Мы помещаем в документ форму, а в нее – обычную кнопку. В панели Behaviors мы можем сразу же получить список событий, поддерживаемых данным элементом, и даже выбрать ряд предопределенных скриптовых программ, например вывести сообщение в диалоговой панели или в статусной строке.

Выбор события в панели Behaviors
Выбор события в панели Behaviors

Macromedia Dreamweaver 8 поддерживает создание скриптовых программ для различных браузеров, что означает возможность выбора платформы из списка представленных браузеров.

Анимация

Механизм поддержки анимации в данном продукте называется Timeline (в переводе – линия времени). Его суть заключается в том, что после выбора объекта (например, графического изображения, помещенного в "слой" [layer]) задается сценарий его поведения. Для этого используется временная шкала (timeline), разделенная на кадры. К каждому кадру можно присоединить какое-либо событие.

Новые возможности

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

Об этих инструментах – более подробно.

Модифицированная панель CSS
Модифицированная панель CSS
  • Модифицированная панель CSS

    Новая (модифицированная) панель CSS содержит сгруппированные в одном месте инструменты для изучения, работы и применения стилей CSS к страницам в режиме визуального редактирования. С новым интерфейсом легче просматривать каскадные таблицы, примененные к отдельным элементам.

  • Усовершенствованное представление CSS

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

  • Опция Zoom

    Опция Zoom служит для более точного контроля над дизайном и позволяет приближать или удалять страницу создаваемого документа. Границы манипуляции – от 6 до 6400%.

  • Специальная вставка

    С новой опцией вставки в Dreamweaver 8 появилась возможность сохранить все форматирование, созданное в Microsoft Word, или просто вставить текст.

  • Визуализация слоев CSS (в режиме дизайна границ, фона слоев CSS)

    Применение визуальной помощи в работе со слоями поможет разобраться при работе со сложными структурами документов.

  • Улучшенная синхронизация и сравнение файлов

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

  • Обновлена помощь от O'REILLY

    Добавлены новые материалы по XML, XSLT и XPath, обновлены материалы по ASP.

  • Панель Style Rendering

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

  • Поддержка новых технологий

    Поддержка ColdFusion MX 7, PHP 5, Flash Video.

  • Сворачивание кода

    Сворачивание кода
    Сворачивание кода

    Есть возможность свернуть часть кода, что сильно упрощает работу и делает код более простым для восприятия.

Некоторые рекомендации по использованию

Отступы

В Dreamweaver 8 есть кнопка, не менее опасная в плане замусоривания страницы, чем инструменты свойств текста. Эта кнопка – увеличение отступа. Использовать такой способ управления отступом не рекомендуется, поскольку Dreamweaver применяет не предназначенные для этого теги. Если вам необходимо создать несколько абзацев с большим отступом от левого края, пользуйтесь для этого классами CSS.

Таблицы

В Dreamweaver 8 добавлена возможность от руки рисовать таблицы и их ячейки (режим Layout View). Если вы не хотите добавить на страницу мусор в виде неоправданно сложных таблиц, никогда не пользуйтесь этим режимом. Чудес не бывает, и HTML не изменился с выходом новой версии редактора – таблицы по-прежнему описываются строками и ячейками, причем столбцы в одной таблице всегда имеют одинаковую ширину. Те невообразимые таблицы с частично перекрывающимися столбцами разной ширины, которые вы нарисуете в художественном азарте, будут описаны на вашей странице кодом невообразимого размера, очень сложным для чтения и анализа. К тому же сомнительно, что браузеры Netscape отобразят подобную страницу верно.

Стили в Dreamweaver

Для того чтобы сделать в Dreamweaver 8 красивую страницу с чистым кодом, нужно использовать стилевые правила CSS. Хотя инструменты для работы с таблицами стилей в Dreamweaver и не безупречны, однако их вполне достаточно для повседневной работы. Встроенный редактор таблиц стилей позволяет создавать классы CSS (Make Custom Style Class) или назначать стилевое оформление отдельным элементам HTML (Redefine HTML Tag). Обычно классы используются, когда надо придать единообразный вид нескольким элементам на странице (например, задать одно и то же выравнивание всем абзацам). Если же вы хотите всего лишь изменить параметры конкретного элемента (например, сделать фон одной из ячеек таблицы красным), допустимо назначение стиля непосредственно элементу c id, соответствующему этой ячейке.

Итоги

Macromedia Dreamweaver 8 – это без сомнения один из самых удобных редакторов HTML, предназначенный для тех, кто ценит комфорт и удобство в движениях. Поэтому для тех, кто еще не имеет подобной программы, Macromedia Dreamweaver 8 будет отличным выбором.





Дополнительно

iXBT BRAND 2016

"iXBT Brand 2016" - Выбор читателей в номинации "Процессоры (CPU)":
Подробнее с условиями участия в розыгрыше можно ознакомиться здесь. Текущие результаты опроса доступны тут.

Нашли ошибку на сайте? Выделите текст и нажмите Shift+Enter

Код для блога бета

Выделите HTML-код в поле, скопируйте его в буфер и вставьте в свой блог.