Разрезаем изображения - Создание сайта

В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами является разработка интерактивной графики. Одной из разновидностей такой графики являются изображения, разбитые на фрагменты (Slices). Каждый фрагмент представляет собой прямоугольный участок изображения, который становится ячейкой таблицы в HTML-файле. Каждый такой фрагмент можно "оживить", применив к нему эффект Rollover (Наведение). При просмотре в браузере, в зависимости от действий мыши, состояние этого фрагмента будет меняться.

Создадим меню для левой части страницы Kontakt. htm.

В программе FrontPage оцените размер левой части макетной таблицы. Убедившись, что в программе PhotoShop закрыты все документы, перейдите в программу ImageReady с помощью кнопки.

Установите на панели инструментов Adobe ImageReady белый цвет переднего плана и синий цвет фона и создайте новый документ с нужным размером и синим цветом фона.

Введите названия пунктов меню как показано на рисунке, так, чтобы каждый из них располагался на отдельном слое. Сохраните документ в своей папке на Server под именем Menu. psd.

Теперь можно приступить к нарезке изображения. Эта операция выполняется с помощью инструмента Раскройка на панели инструментов.

Вырежем в изображении первый пользовательский фрагмент, включающий название пункта меню Главная Страница. Установите указатель мыши в левом верхнем углу окна документа. Нажмите и удерживайте левую кнопку мыши. В левом верхнем углу фрагмента появится 2 серых значка-индикатора. Левый значок означает порядковый номер фрагмента, а правый - его тип - изображение. Фрагменты нумеруются по порядку слева направо и сверху вниз. Созданный фрагмент будет выделен также более ярким цветом и ему будет присвоен номер 01. автоматически будет создан фрагмент с номером 02, содержащий остальную часть документа. Этот автофрагмент будет отличаться от выделенного пользовательского фрагмента оттенком. В его левом верхнем углу, кроме значков-индикаторов номера и типа, появится значок связи данного фрагмента с пользовательским. Если размер вырезанной части изображения вас не устраивает, его можно изменить, переместив маркеры выделения с помощью инструмента Выделение Фрагмента. Этим же инструментом можно выделить фрагмент и переместить его.

С помощью инструмента Раскройка вырежьте все остальные фрагменты с названиями пунктов меню. Всего должно получиться 5 пользовательских фрагментов.

Разметку нарезанных частей можно временно скрыть, чтобы она не мешала выполнять другие операции редактирования документа. Эта операция выполняется с помощью кнопки Вкл/выкл. Показ Фрагментов

Нарезать изображение можно и другим способом - создав выделенную область и выбрав команду меню Выделение>Создать Фрагмент Из Выделенной Области.

Для каждого из полученных фрагментов создадим эффект Rollover (Наведение) таким образом, чтобы при установке указателя в браузере на каждом из пунктов меню цвет фона этого фрагмента менялся с синего на темно-синий. Начнем с первого фрагмента. Его необходимо предварительно выделить. Включите панель инструментов Web-содержимое, если она отсутствует в рабочем окне (Окно>Web-содержимое) и увеличьте высоту окна палитры, чтобы были видны все фрагменты.

В палитре Web-содержимое уже создан первый кадр эффекта для состояния Нормальный, при котором указатель мыши находится за пределами выбранного фрагмента. Фрагмент Menu_01 выделен. Имя фрагмента состоит из имени файла без расширения и порядкового номера фрагмента.

Нажмите кнопку Создать Состояние Ролловера в нижней части панели Web-содержимое, чтобы создать кадр для следующего состояния - Курсор Наведен.

Теперь нужно определить как будет выглядеть выделенный фрагмент изображения при событии Курсор Наведен, т. е. когда указатель мыши находится над фрагментом. При этом цвет фона должен меняться на темно-синий. Для этого создадим из фрагмента выделенную область, поместим ее на новый слой и зальем темно-синим цветом.

Выберите команду Выделение>Создать Выделенную Область Из Фрагмента. Выделенная область будет создана.

Выделите щелчком мыши в палитре Слои слой Задний План.

Нажмите кнопку Создать Новый Слой в нижней части палитры Слои. Над слоем Задний План появится новый слой Слой 1.

Установите темно-синий цвет для переднего плана.

С помощью команды Редактирование>Выполнить Заливку заполните выбранным цветом переднего плана выделенную область активного слоя Слой 1. Снимите выделение (Выделение>Отменить Выделение Фрагментов).

Таким образом мы определили состояние Курсор Наведен для фрагмента изображения с Надписью Главная Страница.

Обратите внимание на то, что для состояния Нормальный фрагмента Menu_01 индикатор видимости слоя Слой 1 должен быть сброшен. Чтобы убедиться в этом выполните следующие шаги:

Щелкните на имени фрагмента Menu_01 в палитре Web-содержимое.

Если индикатор видимости слоя - значок глаза присутствует напротив слоя Слой 1 в палитре Слои, сбросьте данный индикатор щелчком мыши.

Щелкните мышью на строке Курсор Наведен под фрагментом Menu_01 в палитре Web-содержимое, чтобы выделить состояние эффекта Rollover для этого фрагмента.

Если индикатор видимости слоя - значок глаза отсутствует напротив слоя Слой 1 в палитре Слои, установите данный индикатор.

Аналогичным образом создайте эффект Курсор Наведен для остальных 4 фрагментов.

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

После того как изображение нарезано и для фрагментов создан эффект Курсор Наведен есть 2 варианта дальнейших действий. Можно сохранить готовые фрагменты изображения и затем вручную в текстовом редакторе вставить ссылки на них в код HTML. Но можно ввести адреса ссылок для каждого фрагмента в программе Adobe ImageReady и сохранить вместе с нарезанными частями изображения также и HTML файл, который будет создан автоматически с уже готовым меню. Назначение ссылок фрагментам изображения выполняется с помощью палитры Фрагмент (Окно>Фрагмент).

Выделите с помощью инструмента Выделение Фрагмента фрагмент изображения с надписью Главная Страница. Задайте свойства выделенного фрагмента в палитре Фрагмент.

В поле Имя указано имя фрагмента, предлагаемое по умолчанию - Menu_01. Под этим именем фрагмент будет сохранен.

В открывающемся списке Тип можно выбрать тип фрагмента. По умолчанию тип всех фрагментов - Изображение, т. е. фрагмент содержит графические данные.

Чтобы связать выбранный фрагмент изображения с другим HTML документом, который будет загружаться в браузере после щелчка мышью на данном фрагменте, следует в поле URL ввести адрес нужного документа. Напишите в этом поле Index. html т. к. с данной ссылки будет открываться главная страница.

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

В программе FrontPage создайте еще 2 новых страницы: Novosty. html и O_Nas. html. Сохраните их в корневой папке сайта.

Используя возможности палитры Фрагмент настройте ссылки с оставшихся фрагментов как показано на рисунке.

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

Выделите все фрагменты Фрагменты>Выделить Все Пользовательские Фрагменты.

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

Теперь можно выполнить оптимизацию всех фрагментов одновременно.

Щелкните мышью на ярлыке 2 Варианта в верхней части окна документа. Будет выполнена оптимизация документа с параметрами, применявшимися при последней оптимизации.

В палитре Оптимизация, которая по умолчанию находится в правом верхнем углу окна, выберите формат GIF. В открывающемся списке Цвета палитры Оптимизация выберите 16.

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

Выберите команду Файл>Настройки Экспорта>Фон. На экране появится одноименный диалог.

Установите переключатель Изображение. В открывающемся списке Цвет Фона выберите Основной Цвет. Закройте диалоговое окно.

Выберите команду Файл>Сохранить Оптимизированный. Сохраните документ в корневой папке сайта.

В процессе сохранения будет автоматически создана HTML-страница, имя которой - Menu - предлагается по умолчанию в поле ввода Имя Файла. Одновременно с файлом HTML будут сохранены также нарезанные фрагменты, так как в открывающемся списке Тип Файла автоматически выбрано HTML And Images (*.html).

Откройте созданную страницу Menu. html с помощью программы Блокнот. Скопируйте автоматически сгенерированный текстовый фрагмент начиная со слов <!-- ImageReady Preload Script (menu. psd) --> и заканчивая словами <!-- End ImageReady Slices --> включительно.

Откройте страницу Kontakt. html в программе FrontPage. Установите текстовый курсор в левой ячейке макетной таблице и перейдите в режим С Разделением. Отследите положение текстового курсора в коде, и вставьте из буфера скопированный ранее фрагмент. Перейдите в режим конструктора. Сохраните результат и просмотрите в программе-обозревателе.

Дополните содержание страницы Kontakt. htm приведенной ниже информацией, чтобы привести ее к виду как на рисунке. Чтобы в браузере отображалось название страницы Контактная Информация задайте это через свойства страницы (пункт Название). Для привлечения внимания посетителя оживим верхнюю строку текста - сделаем ее бегущей. Для этого выделите текст и воспользуйтесь командой меню Вставка>Вэб-компонент>Бегущая Строка. Самостоятельно настройте параметры эффекта в соответствии со своими пожеланиями. Сохраните результат и просмотрите в браузере.

Сайт web документ программа

Похожие статьи




Разрезаем изображения - Создание сайта

Предыдущая | Следующая