НАПОЛНЕНИЕ ВЕБ-СТРАНИЦ КОНТЕНТОМ
Взаимодействие с внешними приложениями
Программа Dreamweaver CS6 позволяет копировать содержимое из документов Microsoft Office, например, из файлов Microsoft Word и Excel, и добавлять его на веб-страницы с сохранением форматирования. Для этого документ Microsoft Office нужно преобразовать в язык HTML (от англ. Hypertext Markup Language «язык гипертекстовой разметки»), после чего импортировать HTML-документ в программу Dreamweaver. Документы Microsoft Office можно также импортировать в программу Dreamweaver CS6 напрямую с помощью команды Импорт (Import) в меню Файл (File), с последующим выбором типа документа (документ Word или документ Excel) во вложенном меню.
Интегрированное рабочее пространство, включающее вкладки окон документа, закрепляемые группы панелей, настраиваемые панели инструментов и интегрированный обзор файлов позволяет сэкономить время на разработку веб-документов.
Использование Fireworks. Fireworks - это мощный инструмент веб-програмирования, предназначенный для создания графики и управления ею. При использовании Fireworks совместно с программой Dreamweaver пользователь может с легкостью редактировать, оптимизировать и размещать файлы веб-графики на HTML-страницах. Графику можно импортировать из Fireworks непосредственно в документ программы Dreamweaver. Кроме того, новую графику Fireworks можно создать из местозаполнителя изображения в Dreamweaver.
Для вставки изображения необходимо поместить курсор вставки в место назначения изображения. Затем в меню Вставка (Insert) выберите Изображение (Image). В качестве альтернативы можно также щелкнуть категорию Общие (Common) на панели Вставка (Insert) и нажать кнопку Изображение (Image) или перетащить его в документ. Далее можно перейти к нужному экспортированному файлу Fireworks и нажать кнопку ОК.
Использование Photoshop. Программа Dreamweaver позволяет оптимизировать файлы изображения Photoshop (формат PSD) и получить подходящую для использования в Интернете графику (в форматах GIF, JPEG и PNG). При импорте изображения из Photoshop программа Dreamweaver вставляет изображение как смарт-объект в реальном времени и сохраняет динамическую ссылку на исходный файл PSD. Существует два способа работы с файлами Photoshop в программе Dreamweaver CS6 -в режиме копирования и вставки и с помощью смарт-объектов.
Операции копирования и вставки. В режиме копирования и вставки можно добавить часть файла Photoshop как изображение на вебстраницу. Выбрав часть изображения в Photoshop, его можно скопировать и вставить в программу Dreamweaver. Если впоследствии необходимо отредактировать изображение, то следует открыть исходный файл Photoshop, внести соответствующие изменения, снова скопировать фрагмент или слои в буфер обмена, а затем вставить обновленный фрагмент или слой в программе Dreamweaver.
Работа со смарт-объектами. Для работы с полноценными файлами Photoshop следует использовать смарт-объекты. При импорте изображения Photoshop в Dreamweaver с помощью смарт-объектов программа Dreamweaver помещает на изображение после экспорта значок смарт-объекта. Значок смарт-объекта можно увидеть в представлении Дизайн (Design) в верхнем левом углу изображения, как показано на рис. 2.1.
Рис. 2.1. Значок смарт-объектов
Чтобы импортировать файл Photoshop в программу Dreamweaver с помощью смарт-объектов, в представлении Дизайн (Design) или Код (Code) поместите курсор вставки на страницу, куда необходимо вставить изображение. Затем в меню Вставка (Insert) щелкните Изображение (Image). Найдите файл изображения PSD Photoshop в диалоговом окне Выбор источника изображения (Select Image Source), нажав кнопку Обзор (Browse) и перейдя к изображению. В открывшемся диалоговом окне Предварительный просмотр изображения (Image Preview) (см. рис. 2.2) измените настройки оптимизации и нажмите кнопку ОК.
Наконец, сохраните готовый для Интернета файл изображения в местоположение в корневой папке веб-сайта.
Рис. 2.2. Изменение настроек оптимизации
При внесении каких-либо изменений в исходное изображение Photoshop программа Dreamweaver сразу обнаруживает их и отображает стрелку значка смарт-объекта красным цветом. Для обновления веб-изображения необходимо выбрать его в представлении Дизайн (Design), нажать кнопку Обновить из оригинала (Update from Original) в Инспекторе свойств (Property Inspector). Таким образом, при работе со смарт-объектами для того, чтобы обновить веб-изображение, программу Photoshop открывать не требуется. Также изменения в веб-изображение можно вносить без его редактирования или изменения в Photoshop.
Использование программы Flash. Программа Dreamweaver CS6 обеспечивает возможность экспорта файла SWF и его редактирования в Adobe Flash. Для редактирования файла SWF в программе Dreamweaver используется исходный документ в формате Flash Authoring (FLA), который после внесения изменений повторно экспортируется в Dreamweaver. Редактирование файла SWF в программе Dreamweaver с помощью программы Flash осуществляется посредством Инспектора свойств (Property Inspector). Затем в документе программы Dreamweaver необходимо щелкнуть местозаполнитель файла SWF и выбрать его. Далее в Инспекторе свойств (Property Inspector) необходимо нажать Редактировать (Edit). Можно также щелкнуть правой кнопкой мыши местозаполнитель SWF-файла и в контекстном меню выбрать команду Изменить с помощью Flash (Edit With Flash).
При редактировании SWF-файла с помощью Flash программа Dreamweaver переключает фокус на приложение Flash и Flash пытается найти FLA-файл выбранного файла SWF. Во Flash внесите изменения в файл FLA. Окно Документ Flash (Flash Document) означает, что пользователь вносит изменения в файл в программе Dreamweaver. После редактирования файла нажмите кнопку Готово (Done). По завершении редактирования Flash обновляет файл FLA, экспортирует его повторно в формате SWF в программу Dreamweaver, программа Flash закрывается, а фокус возвращается в документ Dreamweaver.
Свойства SWF-файла
SWF-файл имеет свойства, аналогичные свойствам файла формата Shockwave, которые можно задать с помощью Инспектора свойств (Property Inspector). В таблице перечислены свойства SWF-файла в Инспекторе свойств (Property Inspector). По умолчанию пользователю может быть доступно небольшое число свойств. Чтобы просмотреть все свойства, представленные в табл. 2.1, необходимо щелкнуть стрелку развертывания в нижнем правом углу Инспектора свойств (Property Inspector).
Таблица 2.1
|
Имя |
Описание |
|
Идентификатор (1D) |
В этом поле задается идентификатор SWF-файла |
|
Ширина и высота (W and Н) |
Необходимо задать ширину (width) и высоту (height) изображения в пикселях |
|
Файл (File) |
Пользователь должен задать путь к файлу Flash- или Shockwave-видеоролика. Для этого необходимо щелкнуть значок папки для поиска файла или ввести путь вручную в поле |
|
Источник (Src) |
Пользователь должен задать путь к исходному файлу FLA |
|
Фон (Bg) |
Можно задать цвет фона для области видеоролика |
|
Изменить (Edit) |
Доступен только при наличии установленного приложения Flash на компьютере. С помощью этого параметра можно запустить приложение Flash и отредактировать файл FLA |
|
Класс (Class) |
С помощью этого параметра можно применись класс CSS к видеоролику |
|
Цикл (Loop) |
При выборе этого параметра видеоролик проигрывается бесконечно. Если этот флажок установлен, то видеоролик будет проигрываться только один раз |
|
Автоматическое воспроизведение (Autoplay) |
При выборе этого варианта видеоролик будет проигрываться автоматически. Кнопку Воспроизведение (Play) нажимать не нужно |
|
Вертикальное поле (V Space) и горизонтальное поле (Н Space) |
Определяют число пикселей пустого пространства сверху, снизу и сбоку от видеоролика |
|
Качество (Quality) |
С помощью этой настройки можно управлять буферизацией и загрузкой видеоролика |
|
Scale (Масштаб) |
Этот параметр позволяет управлять размерами воспроизводимого видеоролика |
|
Выровнять (Align) |
Позволяет задать настройки выравнивания видеоролика на странице |
|
Режим W (W mode) |
Пользователь может контролировать внешний вид элементов DHTML вместе с SWF- файлом. По умолчанию настройка имеет значение Непрозрачный (Opaque), обеспечивая отображение элементов DHTML на SWF-файле |
|
Воспроизвести (Play) |
С помощью этого параметра можно воспроизвести видеоролик в окне Документ (Document) |
|
Параметры (Parameter) |
Можно задать дополнительные параметры, управляющие видеороликом с помощью этого диалогового окна |
Расширение AIR для программы Dreamweaver
С помощью расширения Adobe AIR для Dreamweaver можно создавать мультимедийные интернет-приложения для компьютера. Таким образом, для выполнения таких приложений подключение к Интернету не требуется.
Системные требования
Ниже приведены системные требования к работе расширения Adobe AIR для программы Dreamweaver:
- • Dreamweaver CS3 или более новая версия.
- • Adobe® Extension Manager CS3 или более новая версия.
- • Java JRE 1.4 или более новая версия (требуется для создания файла Adobe AIR).
Примечание. Для установки и выполнения приложения Adobe AIR на компьютере требуется также установить компоненты Adobe AIR.
Установка расширения Adobe AIR для программы Dreamweaver
Расширение Adobe AIR для программы Dreamweaver можно загрузить по ссылке http://www.adobe.com/ product/air/tools/ajax/. На этом вебсайте дважды щелкните файл с расширением .тхр в Проводнике Windows (Windows) или в Finder (Macintosh). Следуйте указаниям на экране, чтобы установить расширение. По завершении установки перезапустите программу Dreamweaver.
Создание приложения AIR в программе Dreamweaver
Прежде чем создать HTML-приложение AIR в программе Dreamweaver, убедитесь, что веб-страницы, которые нужно упаковать в приложение, содержатся в определенном сайте программы Dreamweaver. В программе Dreamweaver откройте главную страницу из набора страниц, которые нужно упаковать. Затем в меню Сайт (Site) выберите Параметры приложения Air (Air Application Settings). Отроется диалоговое окно Настройки приложения AIR и программы установки (AIR Application and Installer Settings). Задайте необходимые настройки в этом окне и нажмите кнопку создать файл AIR (Create AIR File).
В табл. 2.2 перечислены различные параметры диалогового окна «Настройки приложения AIR и программы установки» (AIR Application and Installer Settings) и даны описания к ним.
Таблица 2.2
|
Элементы рабочего пространства |
Описание |
|
Имя файла приложения (Application File Name) |
Необходимо указать имя для исполняемого файла приложения. По умолчанию это поле принимает имя сайта в программе Dreamweaver. Имя можно изменить по желанию. Следует отметить, что имя может содержать только символы ASCII и может иметь точки в конце. |
|
1Имя приложения (Application Name) |
Пользователь должен задать имя, отображаемое на экранах установки во время установки приложения на компьютере. Для данного поля ограничений по символам нет. |
Продолжение табл. 2.2
|
Элементы рабочего пространства |
Описание |
|
Идентификатор приложения (Application ID) |
Уникальный идентификатор, определяющий приложение. Идентификатор по умолчанию можно изменить. В идентификаторе не должно быть пробелов или специальных символов. Допустимые символы: 0-9, a-z, A-Z,. (точка), и - (дефис). |
|
Версия (Version) |
Номер версии приложения. |
|
Первоначальное содержимое (Initial content) |
Выберите начальную страницу своего приложения. Нажмите кнопку Обзор] (Browse) и выберите файл, который должен находиться в корневой папке сайта. |
|
Описание (Description) |
Введите описание приложения, которое будет отображаться во время установки приложения на компьютере. |
|
Авторское право (Copyright) |
Введите текст авторского права, который будет отображаться в окне информации о программе (About) для приложений Adobe AIR, установленных на компьютере Macintosh. В приложениях, установленных в операционной системе Windows, эта информация не используется. |
|
Стиль Окна (Window style) |
Можно задать стиль окна или хромовый эффект во время выполнения приложения на компьютере.
|
|
Размер окна (Window size) |
Возможность задать размеры окна приложения, когда оно Открывается. |
|
Значок (Icon) |
Для значков приложения пользователь может выбрать собственные изображения. По умолчанию выбираются изображения Adobe AIR, поставляемые вместе с расширением. Чтобы использовать пользовательские изображения, необходимо нажать кнопку Выбрать изображения для значков (Select Icon Images). Затем в диалоговом окне Изображения значков (Icon Images) можно щелкнуть папку для каждого размера значка и выбрать необходимый файл изображения. Примечание. AIR поддерживает только файлы PNG в качестве изображений значков приложения. |
|
Связанные типы файлов (Associated File Types) |
С помощью этого параметра с приложением можно связать типы файлов. |
|
Обновления приложения (Application Updates) |
Это флажок следует выбрать, если необходимо, чтобы программа установки приложения Adobe AIR загрузила последнюю версию приложения. Этот параметр выбран по умолчанию. Чтобы приложение обновлялось самостоятельно, установите это флажок. Если флажок не установлен, то необходимо создать отдельное приложение, которое будет выполнять обновления. |
Окончание табл. 2.2
|
Элементы рабочего пространства |
Описание |
|
Включенные файлы (Included Files) |
Можно задать файлы или папки, которые будут включены в состав приложения. Можно добавить файлы HTML и CSS, файлы изображения и файлы библиотеки JavaScript. Нажмите кнопку «+» чтобы добавить файлы, и значок папки. Чтобы удалить файл или папку из списка, выберите соответствующий элемент и нажмите кнопку «+». Определенные типы файлов включать нс следует, например: mmServerScripts и notes. |
|
Цифровая подпись (Digital Signature) |
Нажав на кнопку Задать (Set), можно подписать приложение цифровой подписью. |
|
Папка меню «Программы» (Program Menu Folder) |
Можно задать подкаталог в меню Пуск (Start) в Windows, в который будет помещен ярлык приложения. Этот параметр не применяется на Macintosh. |
|
Назначение (Destination) |
Можно задать местоположение, в котором будет сохранена новая программа установки приложения (файл .air). По умолчанию используется корневой каталог сайта. Чтобы выбрать другое местоположение, нажмите кнопку Обзор (Browse). Имя файла по умолчанию основано на имени сайта с добавлением расширения .air. |
Импорт документов Microsoft Office (только в Windows)
Программа Dreamweaver CS6 позволяет импортировать документы Microsoft Word или таблицы Excel непосредственно в новую или существующую веб-страницу. При импорте документа Word или Excel в программу Dreamweaver CS6 он автоматически преобразуется в HTML-документ. При получении документа HTML программа Dreamweaver добавляет его в веб-страницу. Размер файла преобразованного HTML-документа не может превышать 300 Кбайт.
Для импорта документа Microsoft Office программа Dreamweaver CS6 предлагает различные варианты форматирования.
Чтобы импортировать документ Word или таблицу Excel в программу Dreamweaver, сначала откройте соответствующую веб-страницу.
Затем в представлении Дизайн (Дизайн) выполните одно из следующих действий:
- • Перетащите файл на веб-страницу в местоположение для вставки.
- • В меню Файл (File) выберите пункт Импорт (import), а затем выберите желаемый документ Word или документ Excel из вложенного меню.
- • Затем в диалоговом окне Вставка документа (Insert Document) перейдите к необходимому документу Word или таблице Excel, которую требуется добавить. Наконец, в раскрывающемся списке Форматирование (Formatting) выберите необходимые параметры форматирования и нажмите Открыть (Open). Содержимое документа Word или Excel появится на веб-странице.
Документ Microsoft Office можно импортировать в программу Dreamweaver напрямую. Также можно создать ссылку на документы Microsoft Office на веб-странице, куда необходимо импортировать содержимое. Чтобы создать ссылку на документ Microsoft Office, откройте страницу, для которой требуется создать ссылку. Затем перетащите файл из его текущего местоположения в нужное положение на странице в программе Dreamweaver. Откроется диалоговое окно Вставка документа (Insert-Document), как показано на рис. 2.3. Далее выберите Создать ссылку (Create ALink) и нажмите ОК.
Рис. 2.3. Диалоговое окно «Вставка документа»
Чтобы сделать связанный документ доступным после публикации вашего веб-сайта, его необходимо поместить в корневой каталог сайта. Если при создании ссылки документ в корневой папке вашего сайта отсутствует, программа Dreamweaver предложит скопировать документ в корневой каталог сайта.
При загрузке страницы на веб-сервер также потребуется загрузить связанный файл Word или Excel, чтобы обеспечить привязку веб-страницы к документу Word или таблице Excel.
Текст ссылки, который по умолчанию соответствует имени связанного файла, можно изменить. Помимо импорта всего содержимого файла, пользователь может скопировать определенные фрагменты текста из документа Word и вставить их в программу Dreamweaver CS6. При копировании фрагментов текста из документа Word в программу Dreamweaver CS6 форматирование текста сохраняется.
