Анимационные и интерактивные изображения
*.swf |
Flash Player (Adobe) |
Форматы документов
Acrobat Reader (Adobe) |
|
*.doc, *.rtf |
Word Viewer (Microsoft) |
Аудио - и видеоформаты
*.rpm RealPlayer (RealNetworks) |
*.rpm RealPlayer (RealNetworks) |
*.aam, *.dir |
Shockwave (Adobe) |
*.mp3, *.wav, *.mid |
Winamp MP3 Player (Nullsoft) |
*.mpeg, *.wav, *.mid, *.png, *.tiff, *.bmp, *.avi |
QuickTime (Apple) |
Презентации
Acrobat Reader (Adobe) |
|
*.ppz, *.ppt, *.pps, *.pot |
*.ppz, *.ppt, |
Трехмерные интерактивные изображения
*.vrml |
Cosmo Player (Silicon Graphics) Cortona (ParallelGraphics)) |
*.tar, *.gz, *.arj, *.zip, *.lha, *.taz |
Netzip Classic (RealNetworks) |
HTML-редактор Dreamweaver позволяет вставить в HTML-документ файл, который должен обрабатываться подключаемым модулем. Для этого можно выполнить команду Insert=>Media=>Plugin.
Практическая часть
Упражнение 1. Вставка графического изображения
Создадим папку Images, куда будем помещать все создаваемые рисунки. Далее по общей схеме, приведенной ниже (рис. 2.1), подготовим в Adobe Photoshop и вставим в сделанные ранее три Web-страницы изображения:
фотопортрет любителя Dreamweaver на его личную страницу;
изображения для отдельных видов хобби на страничку с описанием его хобби;
3-4 изображения на дополнительную страничку.
Рисунок 2.1 – Кнопка вставки изображения
Теперь обратим внимание на вкладку Общее, панели Вставить. Там находится кнопка Изображения (рис. 2.2)
Рисунок 2.2 – Кнопка вставки изображения
Нажимаем на кнопку и в появившемся диалоговом окне (рис. 2.3) снова выбираем кнопку Изображение.
Риунок 2.3 – Выбор типа вставляемого изображения
Нажимаем на кнопку. На экране появится диалоговое окно Выбрать источник изображения (рис. 2.4).
Рисунок 2.4 – Выбор типа вставляемого изображения
В поле ввода Папка выбираем созданную папку Images. Выбираем файл. Справа мы увидим его изображение. Раскрывающейся список Тип файлов, задает тип графических файлов. В поле ввода URL мы можем ввести полный интернет- адрес изображения, если оно находится на другом web-сервере. Раскрывающейся список Родственный позволяет нам задать абсолютный (пункт Документ) или относительный (пункт Корень сайта) интернет- адрес вставляемого изображения.
Выбрав нужный файл, нажимаем ОК. Откроется еще одно диалоговое окно Атрибуты доступности тега изображения (рис. 2.5).
Рисунок 2.5 – Выбор типа вставляемого изображения
Комбинированный список Альтерн.текст служит для задания текста замены. Это придумано для пользователей медленных каналов связи. Если нам надо выводить на экран более подробный текст замены, его нужно оформить в отдельный файл и указать в поле ввода Длинное описание.
Закончив ввод данных, нажимаем кнопку ОК. Dreamweaver сам поместит графическое изображение в то место, где в данный момент находится текстовой курсор. Наша страница примет вид, указанный на рисунке 2.6.
Рисунок 2.6 – Выбор типа вставляемого изображения
Для того чтобы уменьшить изображение, щелкнем по нему мышью и выделим рисунок (Dreamweaver автоматически выделит изображение после его вставки). После этого вокруг изображения появится тонкая черная рамка, на правой и нижней границе которой появятся небольшие черные квадратики. Это маркеры изменения размера. Мы можем "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный и вертикальный размер изображения. А если мы хотим, чтобы оба размера изменились пропорционально, то перетащим мышью маркер, находящийся в правом нижнем углу изображения, при нажатой клавише <Shift>.
Прочитайте параграф 1.1 и измените свойства вставленного изображения в соответствии с его задачами на Web-страничке.
Упражнение 2. Создание интерактивной карты сайта
Подготовим в Adobe Photoshop изображение для Web-страницы с картой сайта. Параметры изображения выберите самостоятельно с учетом того, что оно готовится к отображению на экране монитора (рис. 2.7).
Рисунок 2.7 – Задание параметров нового изображения
При создании изображения предусмотрите в нем три части, которые могли бы стать основой карты ссылок на изображении (рис. 2.8). Сохраните изображение в файле map.jpg формата JPEG в папку Image, созданную при выполнении предыдущей работы (рис. 2.9). Для следующего упражнения и каждую из частей сохраните в отдельных файлах part1.jpg, part2.jpg, part3.jpg с одинаковыми размерами по ширине и высоте.
Создайте в Dreamweaver новую HTML-страницу c именем sitemap.html. Вставьте таблицу шириной 80% и двумя строками. В первой строке будет заголовок «карта сайта». Во второй строке – изображение с картой сайта. В диалоговом окне, появляющемся при вставке изображения задайте замещающий текст – «Карта сайта» (рис. 2.10).
Для создания карты ссылок выделите на изображении активные области (hotspot) задав подходящие области одного из трех видов - прямоугольные , круглые и произвольной конфигурации . Для этого нужно нажать одну из кнопок и при помощи мыши выделить необходимую область на изображении. Параметры активной области будут отображены на панели свойств (рис 2.11).
Рисунок 2.8 – Изображение я тремя не перекрывающимися тремя частями для ссылок
Рисунок 2.9 – Задание параметров нового изображения
Рисунок 2.10 – Задание замещающего текста изображения с картой сайта.
Рисунок 2.11 - Параметры активной области на карте изображения
В поле Карта сайта (Map) указывает имя карты, к которой относится данная область. В полях Ссылка (Link) и Назначение (Target) задайте, как обычно, параметры ссылки, а поле Альтернатива (Alt) -альтернативный текст. Для добавления дополнительных областей нужно выбрать необходимый инструмент выделения и повторить описанные действия. Созданные области можно перемещать по изображению, удерживая левую кнопку мыши.
Созданные ранее активные области можно редактировать: передвигать и изменять их размеры. Так же можно копировать изображения с активными областями из одного документа в другой - их параметры при этом сохраняются. Можно копировать активные области с одного изображения на другое. Для выполнения какой-либо операции над областью необходимо выделить ее. Для этого предназначен инструмент Активная область Указатель (Pointer Hotspot Tool) .
Упражнение 3. Создание альтернативной карты сайта с изменяющимися изображениями
Подготовим в Adobe Photoshop два изображения для Web-страницы с картой сайта со стрелочками влево-вправо и знаком вопроса (рис. hbc/ 2.12, рис. 2.13) такого же размера, как изображения в файлах part1.jpg, part2.jpg, part3.jpg.
Рисунок 2.12 – Задание параметров изменяющегося изображения
Рисунок 2.13 – Изменяющееся изображение со стрелкой влево
Сохраним изображения в файле формата JPEG в папку Image.
Создадим в Dreamweaver новую HTML-страницу c именем nextsitemap.html. Вставим таблицу шириной 80% с двумя столбцами и тремя строками, ячейки которой будут одинакового размера. В каждой строке будут чередоваться изменяющиеся изображения и подписи к ним (рис. 2.16).
Для создания изображений, изменяющих свой вид при прохождении курсора мыши, используется скрипт Rollover Image.
Для вставки изменяющегося изображения необходимо кнопку Изображения (Images) на панели объектов и в открывшемся списке выбрать Изображение выделения (Rollover Image) (рис. 2.14) или выполнить команду Вставка=>Объекты изображения=>Изображение выделения (Insert=>Image Objects=>Rollover Image).
В диалоговом окне (рис. 2.15) необходимо указать имена файлов, которые будут использоваться при работе изменяющегося изображения: Original image - путь к начальному файлу с изображением со стрелкой влево или вправо, Rollover image - путь к файлу с изображением (part1.jpg, part2.jpg, part3.jpg), которое будет появляться, когда курсор мыши окажется над областью изображения .
Рисунок 2.14 – Вставка замещающего изображения со стрелкой влево
Рисунок 2.15 - Диалоговое окно для настройки скрипта Rollover Image
Имя интерактивного элемента Имя изображения (Image name) используется при работе скриптов. Если не предусматривается взаимодействие с этим объектом или изменение алгоритмов работы скриптов, то имя можно оставить заданным по умолчанию.
Если включить флажок Загрузка изображений подчеркивания (Preload rollover image), то в HTML-документ будет вставлен скрипт для предварительной загрузки файлов с изображениями в кэшпамять браузера.
Изменяющееся изображение сделайте ссылкой, заполнив поле При нажатии перейти на URL-адрес (When clicked, Go to URL) указывая адрес нужной страничка Вашего сайта.
Рисунок 2.16 - Карта сайта с замещающими изображениями
Упражнение 4. Задание альтернативных свойств объектов
Для объектов созданных карт сайта задайте какие-либо интерактивные свойства. Подробно опишите данные процессы в отчете.