Adobe Dreamweaver

Обзор


Содержание сайта
Комбинированные редакторы л. 1
Adobe Dreamweaver Обзор 

Содержание

О Creative Cloud
Новое в последних версиях

Основные шаги

Настройки программы

Интерфейс

Работа с сайтами Dreamweaver

Создание документов (страниц)

Управление файлами и папками

Заметки разработчика

Использование CSS

Макет страниц

Работа с объектами
Список объектов

Фреймы (рамки)
Использование тега DIV
Элементы AP
JavaScript
Цвет
Создание ссылок и навигация

Управление файлами и папками

Совместная работа Dreamweaver с Photoshop, Fireworks, Adobe Flash и др. приложениями

Интеграция с Business Catalyst


Поиск на сайте
Ресурсы и библиотеки
Расширения

Шаблоны

Работа с кодом

Использование сетевых служб
Adobe


Отображение XML-данных с
помощью XSLT


Создание динамических
страниц


Создание форм

Специальные возможности

Сайты для разных экранов и устройств

Предварительный просмотр
Проверка сайта

Отчеты в Dreamweaver

Программа передачи файлов (FTP)


Работа с Fireworks и Dreamweaver

Подробнее о Fireworks




Вставка изображения Fireworks

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

Можно поместить экспортированную графику из Fireworks непосредственно в документ Dreamweaver с помощью команды «Вставить изображение», либо создать новое изображение Fireworks из шаблона изображения Dreamweaver.

1 В документе Dreamweaver поместите курсор вставки туда, где должно появиться изображение, и выполните одно из следующих действий.
• Выберите «Вставка» > «Рисунок».
• В категории «Общие» панели «Вставка» нажмите кнопку «Изображение» или перетащите ее в пределы документа.

2 Перейдите к необходимому экспортируемому файлу Fireworks и нажмите кнопку «ОК» (Windows) или «Open» (Macintosh).

Примечание. Если файла Fireworks нет на текущем сайте Dreamweaver, то появляется запрос на копирование файла в корневую папку. Нажмите кнопку «Да».


Редактирование изображения Fireworks или таблицы из Dreamweaver

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

Примечание. Для этого необходимо, чтобы Fireworks был установлен как основной внешний графический редактор для PNG файлов. Кроме того, Fireworks часто бывает редактором по умолчанию для JPEG- и GIF- файлов, хотя в качестве редактора по умолчанию для этих типов файлов можно задать Photoshop .
См. Использование внешнего графического редактора

Если изображение является частью таблицы Fireworks, можно открыть всю таблицу Fireworks для редактирования, так как в HTML-коде есть комментарий <!--fw table-->. Если исходный PNG-файл был экспортирован из Fireworks на сайт Dreamweaver с помощью настройки «Стиль HTML и изображений» Dreamweaver, то комментарии к таблице Fireworks автоматически добавляются в HTML-код.

1 В программе Dreamweaver откройте инспектор свойств (Окно > Свойства), если он еще не открыт.
2 Чтобы выбрать изображение или фрагмент изображения, щелкните его.
При выборе изображения, которое было экспортировано из Fireworks, инспектор свойств определяет его как изображение или таблицу Fireworks и отображает имя исходного PNG-файла.
3 Чтобы запустить Fireworks для редактирования, выполните одно из следующих действий.
• В инспекторе свойств нажмите кнопку «Изменить».
• Дважды щелкните выбранное изображение, удерживая клавишу «Control» (Windows) или «Command» (Macintosh).
• Щелкните выбранное изображение правой кнопкой мыши (Windows) или щелкните его, удерживая клавишу «Control» (Macintosh), и выберите в контекстном меню пункт «Изменить с помощью Fireworks».

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

4 Отредактируйте исходный PNG-файл в Fireworks и нажмите кнопку «Готово».
Fireworks сохраняет изменения в PNG-файле, экспортирует обновленное изображение (или HTML и изображения) и возвращает фокус приложению Dreamweaver. В Dreamweaver появляется обновленное изображение или таблица.

Вверх

Оптимизация изображения Fireworks в Dreamweaver

С помощью Dreamweaver можно быстро внести изменения в изображения и анимацию Fireworks. В Dreamweaver можно изменять настройки оптимизации, параметры анимации, размер и область экспортируемого изображения.

1 В Dreamweaver выделите нужное изображение и выполните одно из следующих действий.
• Выберите меню «Команда» > «Оптимизировать изображение»
• Нажмите кнопку «Изменить параметры изображения» в инспекторе свойств.
2 Укажите параметры в диалоговом окне «Просмотр изображений»:
• Для редактирования настроек оптимизации выберите вкладку «Параметры».
• Для изменения размера и области экспортируемого изображения выберите вкладку «Файл».
3 По окончании нажмите кнопку «ОК».

См. также:
Настройка параметров в диалоговом окне «Просмотр изображения


Изменение заполнителей изображений Dreamweaver с помощью Fireworks

В документе Dreamweaver можно создать местозаполнитель изображения, запустить Fireworks и создать там изображение или таблицу, а затем заменить этот заполнитель.

Чтобы создать новое изображение из местозаполнителя, необходимо, чтобы были установлены оба приложения: как Dreamweaver, так и Fireworks.

1 Убедитесь, что Fireworks установлен в качестве графического редактора для PNG-файлов.
2 Чтобы выбрать местозаполнитель, щелкните его в окне «Документ».
3 Чтобы запустить Fireworks в режиме «Редактирование из программы Dreamweaver», выполните один из следующих шагов.
• В инспекторе свойств нажмите кнопку «Создать».
• Нажмите клавишу «Control» (Windows) или «Command» (Macintosh) и затем дважды щелкните местозаполнитель изображения.
• Щелкните местозаполнитель правой кнопкой мыши (Windows) или щелкните его, удерживая клавишу «Control» (Macintosh), затем выберите «Создать изображение в Fireworks».
4 Использование параметров Fireworks при создании изображения.
Fireworks распознает следующие параметры местозаполнителя изображения, которые были установлены в Dreamweaver: размер изображения (которое соответствует размеру холста Fireworks), идентификатор изображения (который Fireworks использует как имя документа по умолчанию для создаваемых исходного и экспортируемого файлов) и выравнивание текста. Кроме того, Fireworks распознает ссылки и некоторые варианты поведения (такие как замена изображений, всплывающее меню и задание текста), которые присоединены к заполнителю изображения при работе в Dreamweaver.

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

Fireworks не распознает следующие параметры заполнителя изображения: выравнивание изображения, цвет, вертикальный и горизонтальный отступы и карты. Они отключены в инспекторе свойств местозаполнителя изображения.
5 По завершении нажмите кнопку «Готово», чтобы отобразить диалоговое окно сохранения.
6 В текстовом поле «Сохранить в» выберите папку, указанную в качестве папки локального сайта Dreamweaver.
Если при вставке местозаполнителя изображения в документ Dreamweaver указано его имя, то Fireworks поместит его в поле «Имя файла». Это имя можно изменить.
7 Нажмите кнопку «Сохранить», чтобы сохранить PNG-файл.
Появится диалоговое окно «Экспорт». С помощью этого окна выполняется экспорт изображений в формат GIF или JPEG, или, в случае фрагментированных изображений, в формат «HTML и изображения».
8 В поле «Сохранить в» укажите папку локального сайта Dreamweaver.
В поле «Имя» автоматически отобразится указанное имя PNG-файла. Это имя можно изменить.
9 В поле «Сохранить как тип» укажите тип файла или файлов, в который необходимо экспортировать: например, «Только изображения» или «HTML и изображения».
10 Для сохранения экспортированного файла нажмите кнопку «Сохранить».
Файл будет сохранен, фокус вернется к Dreamweaver. В документе Dreamweaver экспортируемый файл или таблица Fireworks заменяет местозаполнитель изображения.


См. также: Вставка изображения
Вверх

О всплывающих меню Fireworks

Fireworks позволяет быстро и просто создать всплывающие меню на основе CSS.
В дополнение к расширяемости и быстрой загрузке всплывающие меню, созданные с помощью Fireworks, дают следующие преимущества:
• Пункты меню доступны для индексации поисковым системам.
• Пункты меню доступны для программ чтения с экрана, что обеспечивает странице специальные возможности.
• Код, сформированный Fireworks, удовлетворяет стандартам, и его можно проверять.
Можно редактировать всплывающее меню Fireworks с помощью Dreamweaver или Fireworks, но не одновременно. Изменения, внесенные в Dreamweaver, не сохраняются в Fireworks.

Редактирование всплывающего меню Fireworks в Dreamweaver

Можно создать всплывающее меню в Fireworks 8 или более поздней версии и затем отредактировать его с помощью Dreamweaver или Fireworks (используя двунаправленное редактирование), но не одновременно.
При редактировании меню в Dreamweaver, а затем в Fireworks, все предыдущие изменения будут потеряны, за исключением содержимого текста.

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

1 В Dreamweaver выберите таблицу Fireworks, которая содержит всплывающее меню, и нажмите кнопку «Изменить» в инспекторе свойств.
Исходный PNG-файл откроется в Fireworks.
2 В Fireworks отредактируйте меню с помощью редактора всплывающих меню и нажмите кнопку «Готово» на панели инструментов. Fireworks.
Fireworks отправляет отредактированное всплывающее меню обратно в Dreamweaver.

Если всплывающее меню создано в Fireworks MX 2004 или более ранней версии, то его можно редактировать в Dreamweaver с помощью диалогового окна «Отображение всплывающего меню», доступного на панели «Поведение».

Редактирование всплывающего меню, созданного в Fireworks MX 2004 или более ранней версии

1 В Dreamweaver выберите активную область или изображение, которое вызывает всплывающее меню.
2 На панели «Поведение» (Shift+F3) дважды щелкните «Показать всплывающее контекстное меню» в списке «Действия».
3 Внесите необходимые изменения в диалоговом окне «Всплывающее меню» и нажмите кнопку «OК».

Дополнительные разделы справки
«Применение поведения «Показать всплывающее контекстное меню»» на странице 387
Вверх

Настройка установок запуска и редактирования исходных файлов Fireworks

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

Примечание. Dreamweaver распознает установки запуска и редактирования Fireworks только в отдельных случаях. В частности, необходимо открыть и оптимизировать изображение, которое не является частью таблицы Fireworks и содержит верный путь в заметках разработчика к исходному PNG-файлу.

1 В Fireworks, выберите пункт «Правка» > «Настройки» (Windows) или «Fireworks» > «Настройки» (Macintosh) и выберите вкладку «Запуск и редактирование» (Windows) или пункт «Запуск и редактирование» из всплывающего меню (Macintosh).
2 Установите параметры, которые будут использоваться при помещении редактируемых или
оптимизируемых изображений Fireworks во внешние приложения:
Всегда использовать исходный PNG автоматически открывает PNG-файл Fireworks, указанный в заметках разработчика как источник помещаемого изображения. Обновления применяются к исходному PNG-файлу и соответствующему изображению.
Не использовать исходный PNGавтоматически открывает помещенное изображение Fireworks независимо от того, существует ли исходный PNG-файл. Обновления применяются только к помещенным изображениям.
Спрашивать при запуске Отображает сообщение, запрашивающее открытие исходного PNG-файла. Кроме того, в этом сообщении можно указать глобальные установки запуска и редактирования.
Вверх

Вставка HTML-кода Fireworks в документ Dreamweaver

С помощью команды «Экспорт» в Fireworks можно экспортировать и сохранять оптимизированные изображения и HTML-файлы внутри папки сайта Dreamweaver. Затем можно добавить файл в Dreamweaver.
Dreamweaver позволяет вставлять сформированный Fireworks HTML-код, включающий связанные изображения, фрагменты и сценарии JavaScript, в документ.
1 В документе Dreamweaver поместите курсор вставки в том месте, где следует вставить HTML-код Fireworks.
2 Выполните одно из следующих действий.
• Выберите меню «Вставка» > «Объекты изображения» > «Fireworks HTML».
• В категории «Общие» панели «Вставка» нажмите кнопку «Изображение» и выберите параметр «Вставить HTML Fireworks» из всплывающего меню.
3 Чтобы выбрать HTML-файл Fireworks, нажмите кнопку «Обзор».
4 Если файл в дальнейшем не понадобится, выберите меню «Удалить файл после вставки». Выбор этого параметра не оказывает никакого влияния на исходный PNG-файл, связанный с HTML-файлом.

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

Вставка HTML-кода Fireworks в Dreamweaver

Быстрый способ поместить сформированные Fireworks изображения или таблицы в Dreamweaver — это копирование и вставка HTML-кода Fireworks непосредственно в документ Dreamweaver.

Копирование и вставка HTML-кода Fireworks в Dreamweaver

1 В Fireworks, выберите «Правка» > «Копировать код HTML».
2 Следуйте указаниям мастера, который поможет установить параметры для экспорта HTML и
изображений. При запросе укажите папку сайта Dreamweaver в качестве целевой для экспортируемых изображений.
Мастер экспортирует изображения в указанное место назначения и копирует HTML-код в буфер обмена.
3 В документе Dreamweaver поместите курсор вставки в том месте, где следует вставить HTML-код, и выберите команды «Правка» > «Вставить Fireworks HTML».
Весь код HTML и JavaScript, связанный с экспортируемыми файлами Fireworks, копируется в документ Dreamweaver, все ссылки на изображения обновляются.

Экспорт и вставка HTML-кода Fireworks в Dreamweaver

1 В Fireworks выберите «Файл» > «Экспорт».
2 Укажите папку сайта Dreamweaver в качестве целевой для экспортируемых изображений.
3 Во всплывающем меню «Экспорт» выберите «HTML и изображения».
4 Во всплывающем меню HTML выберите пункт «Копировать в буфер обмена» и нажмите кнопку «Экспорт».
5 В документе Dreamweaver поместите курсор вставки в то место, куда следует вставить экспортируемый HTML-код, и выберите «Правка» > «Вставить Fireworks HTML».

Весь код HTML и JavaScript, связанный с экспортируемыми файлами Fireworks, копируется в документ Dreamweaver, все ссылки на изображения обновляются.

Обновление HTML-кода Fireworks, помещенного в Dreamweaver

В Fireworks команда «Файл» > «Обновить HTML» является альтернативой обновления файлов Fireworks, помещенных в Dreamweaver путем запуска и редактирования. С помощью команды «Обновить HTML» можно отредактировать исходное изображение формата PNG в Fireworks и затем автоматически обновить экспортируемые HTML-код и файлы изображений, помещенные в документ Dreamweaver.
Эта команда позволяет обновить файлы Dreamweaver, даже когда Dreamweaver не запущен.

1 В Fireworks откройте исходный PNG-файл и внесите изменения.
2 Выберите «Файл» > «Сохранить».
3 В Fireworks выберите «Файл» > «Обновить HTML».
4 Перейдите в файл Dreamweaver, содержащий HTML-код, который необходимо обновить, и нажмите кнопку «Открыть».
5 Перейдите в целевую папку, в которую следует поместить обновленные файлы изображений, и нажмите кнопку «Выбрать» (Windows) или «Choose» (Macintosh).
Fireworks обновит код HTML и JavaScript в документе Dreamweaver. Кроме того, Fireworks экспортирует обновленные изображения, связанные с HTML-кодом, и поместит изображения в указанную целевую папку.
Если приложению Fireworks не удастся найти соответствующий HTML-код для обновления, то в документ Dreamweaver можно будет вставить новый HTML-код. Fireworks помещает JavaScript-фрагмент нового кода в начало документа, а таблицу HTML или ссылку на изображение — в конец.
Вверх

Создание веб-фотоальбома
Начиная с Dreamweaver CS5, функция «Создать веб-альбом фотографий» устарела.

Веб-альбомы (фотогалереи) создаются в Photoshop.

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

Руководство по интеграции Dreamweaver и Fireworks (видео, англ. язык)


Вернуться к: Работа с другими приложениями


О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru