Техника Web-дизайна для студента

Фрагментация изображений

Под фрагментацией изображения подразумеваются действия, в результате которых изображение разрезается на прямоугольные фрагменты, сохраняемые в виде отдельных файлов. При жела­нии можно сохранить не только фрагменты изображения, но и НТМЬ-документ, в котором первоначальное изображение будет восстановлено из фрагментов с помощью таблицы. Фрагмента­цию можно использовать для создания графических меню или активных кнопок (ролловеров), изменяющих свой внешний вид в момент осуществления ссылки.

Фрагментация осуществляется с помощью инструментов

ХУУ - Slice (Фрагмент) и Slice Select (Выделение фрагмен­та), которые имеются как в программе Photoshop, так и в про­грамме ImageReady.

Для этой цели рекомендуется использовать программу Im­ageReady, которая располагает большими возможностями. В программе ImageReady в дополнение к инструментам Slice (Фрагмент) и Slice Select (Выделение фрагмента) имеется одно­именная палитра Slice (Фрагмент), которая может быть открыта командой Slice (Фрагмент) меню Window (Окно). Для быстрого открытия этой палитры служит кнопка Bring the Slice Palette Forward (Поместить палитру Slice на передний план) на панели параметров инструмента Slice Select (Выделение фрагмента).

После выбора инструмента Slice (Фрагмент), при нажатой кноп­ке мыши, следует растянуть прямоугольную рамку вокруг нуж­ного фрагмента. В результате выполненных действий изображе­ние разделится на несколько пронумерованных фрагментов. Вокруг обведенного фрагмента появится сплошная рамка. Этот фрагмент называется пользовательским. Остальные фрагменты дополняют пользовательский фрагмент до полного изображения. Они обозначаются пунктирными рамками и называются авто­фрагментами.

Панель параметров инструмента Slice (Фрагмент) содержит спи­сок Style (Стиль), который позволяет выбрать один из трех спо­собов построения фрагмента:

□ Normal (Обычный) — любое соотношение длины и ширины фрагмента;

□ Fixed Aspect Ratio (Фиксированное соотношение) — задается фиксированное соотношение между длиной и шириной;

О Fixed Size (Фиксированный размер) — задаются точные раз­меры длины и ширины. При выборе двух последних вариан­тов в поля Width (Ширина) и Height (Высота) вводятся соот­ветствующие значения.

Можно построить несколько пользовательских фрагментов. По­сле того как фрагмент перестал быть активным, например в ре­зультате построения другого фрагмента, его изменение и пере­мещение осуществляется инструментом Slice Select (Выделение фрагмента).

Для перемещения пользовательского фрагмента необходимо ука­затель мыши инструмента Slice Select (Выделение фрагмента) установить внутри фрагмента и, нажав и удерживая кнопку мы­ши, переместить фрагмент в необходимое место экрана.

Изменение размеров фрагмента осуществляется протаскиванием левой кнопки мыши за маркеры выделения.

Удалить выделенный пользовательский фрагмент можно, нажав на клавишу <Delete>.

При создании кнопок или разделов меню требуется разделение изображения на фрагменты одинакового размера. Для этого удобно воспользоваться командой Divide Slice (Разделить фраг­мент) меню Slices (Фрагменты). Откроется диалоговое окно Di­vide Slice (Разделить фрагмент).

В разделе Divide Horizontally Into (Разделить горизонтально) можно выбрать один из двух способов разделения на горизон­тальные фрагменты. Установка переключателя в положение slices down, evenly spaced (одинаковые фрагменты вниз) позволя­ет указать число равных по величине горизонтальных фрагмен­тов, а в положение pixels per slice (пикселей на фрагмент) — за­дать высоту горизонтальных фрагментов в пикселях, начиная с верхнего фрагмента.

Раздел Divide Vertically Into (Разделить вертикально) предназначен для разделения на вертикальные фрагменты. Число одинаковых фрагментов или ширина вертикальных фрагментов задаются соот­ветственно в полях slices across, evenly spaced (одинаковые фраг­менты поперек) или pixels per slice (пикселей на фрагмент).

Палитра Slice (Фрагмент) предназначена для задания парамет­ров пользовательских фрагментов. Возможно задание парамет­ров и для автофрагментов, но при этом они преобразуются в пользовательские фрагменты. Палитра Slice (Фрагмент) пока­зана на рис. 3.44.

После предварительного выделения фрагмента в палитре Slice (фрагмент) становятся доступны следующие элементы:

О в списке Туре (Тип) можно выбрать Image (Графический), что означает, что фрагмент является частью графического изображения. В случае выбора No Image (Неграфический), в появившееся поле Text (Текст) можно ввести текст HTML - документа, который разместится вместо выделенного графи­ческого фрагмента, при этом флажок Text is HTML (Текст HTML) должен быть установлен. Если флажок не установлен, то в поле Text (Текст) можно вводить только обычный текст, не содержащий HTML-меток. Результат введения HTML- документа или текста можно увидеть только в окне браузера. Выбрав в списке Туре (Тип) значение Table (Таблица), можно вместо графического фрагмента вставить таблицу, разделив фрагмент на ячейки командой Divide Slice (Разделить фраг­мент) меню Slices (Фрагменты). В дальнейшем для каждой созданной ячейки таблицы возможно изменение параметров с использованием палитры Slice (Фрагмент) после выделения ячейки инструментом Slice Select (Выделение фрагмента);

О в поле Name (Имя) можно задать имя фрагмента (по умолча­нию предлагается имя, включающее имя файла рисунка и номер фрагмента, с чем можно согласиться);

О в списке URL выбирается имя файла или URL-адрес доку­мента, на которого осуществляется ссылка (перед вводом первого адреса список пуст и адрес вводится в поле вруч­ную);

О в списке Target (Цель) можно выбрать одно из значений оп­ределяющих окно, в котором откроется адресуемый доку­мент. Эти значения аналогичны значениям параметра target метки <а>;

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

Ниже располагаются дополнительные разделы палитры, содер­жимое которых раскрывается после щелчка по треугольнику слева от названия раздела. Раздел DImEnsions (Размеры), позво­ляет изменить координаты левого верхнего угла фрагмента (X, Y) и его размеры (W, Н). При установленном флажке Constrain Proportions (Сохранять пропорции) изменение одного из разме­ров ведет к пропорциональному изменению другого. Раздел Cell

Alignment (Выравнивание ячейки) позволяет выровнять содер­жимое фрагмента, отнесенного к типу No Image. Выравнивание по горизонтали осуществляется выбором из списка Horiz одного из следующих значений: Left (По левому краю фрагмента), Cen­ter (По центру фрагмента), Right (По правому краю), Default (По умолчанию). Для выравнивания по вертикали из списка Vert можно выбрать: Тор (Выравнивание по верхнему краю фрагмен­та), Baseline (Выравнивание базовых линий строк таблицы, по­мещенной в площадь фрагмента), Middle (Центрирование отно­сительно верхнего и нижнего краев фрагмента), Bottom (Выравнивание по нижнему краю фрагмента), Default (По умол­чанию). В разделе Background (Фон) выбирается цвет фона со­держимого, отнесенного к типу No Image, или цвет прозрачных участков фрагмента изображения. В разделе Status Bar Message (Сообщение в строке состояния) можно ввести текст сообще­ния, которое появится в строке состояния браузера при наведе­нии курсора на данный фрагмент.

Сохранить фрагментированное изображение можно с помощью команды Save Optimized As (Сохранить оптимизированное изо­бражение как) меню File (Файл) программы ImageReady. Так же как и при сохранении анимированных изображений, в диалого­вом окне Save Optimized As (Сохранить оптимизированное изо­бражение как) в строке Format: (Тип файла:) можно выбрать тип файла для сохранения: будет ли сохраняться только набор фраг­ментов рисунка — Images Only (*.jpg), готовый HTML-документ вместе с фрагментами рисунка — HTML and Images (*.html) или только HTML-документ — HTML-Only (*.html). Здесь можно рекомендовать второй вариант сохранения, что в дальнейшем позволит поместить в создаваемый документ копию файла, со­держащего таблицу со вставленными в ячейки фрагментами изображения.

Пример создания ролловера

Ролловер — графический объект, изменяющий свой внешний ВИД в окне браузера в зависимости от действий пользователя, на­пример наведения на него указателя мыши. Это достигается за­меной одного рисунка другим. Ролловер может использоваться в качестве динамической кнопки или раздела меню.

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

□ В программе Photoshop откроем рисунок, которому предстоит стать фоновым рисунком меню.

□ Используя инструмент Туре (Текст), напишем на рисунке названия четырех разделов. Чтобы весь текст оказался в од­ном слое, следует нажимать клавишу <Enter> после ввода на­звания каждого раздела. В нижней части палитры Layers (Слои) раскроем список эффектов слоя, выберем Bevel and Emboss (Фаска и рельеф) и создадим эффект выпуклости тек­ста. Подбирая размер шрифта и расстояние между строчками в палитре Character (Шрифт), равномерно распределим текст по изображению, чтобы получился результат, показанный на рис. 3.45.

□ Предварительно сохраним рисунок.

□ Выделив весь текст, изменим его цвет и сохраним рисунок под другим именем (команда Save As (Сохранить как) меню File (Файл)).

О Перейдем в программу ImageReady и в меню Slices (Фрагмен­ты) выберем команду Divide Slice (Разделить фрагмент). В диа­логовом окне Divide Slice (Разделить фрагмент) в разделе Divide Horizontally Into (Разделить горизонтально) установим пере­ключатель в верхнее положение и укажем число фрагментов — 4. Рисунок после фрагментации будет выглядеть как показано на рис. 3.46.

О Используя команду File | Save Optimized As (Файл | Сохранить оптимизированное изображение как) меню программы Im­ageReady сохраним рисунок, указав в строке Format: (Тип файла:) — HTML and Images (*.html). Будет создан HTML - документ, в котором фрагменты рисунка будут объединены с помощью таблицы, сами же фрагменты будут помещены в отдельную папку Images.

О Откроем в программе ImageReady второй экземпляр рисунка и осуществим его фрагментацию аналогично первому экзем­пляру.

О Сохраним фрагментированное изображение второго экземп­ляра, но, в отличие от первого, в строке Format: (Тип файла:) выберем Images Only (*.gif).

В результате в папке Images должно появиться 8 рисунков: 4 фрагмента первого экземпляра и 4 второго. HTML-документ, объединяющий фрагменты одного из экземпляров рисунка в единое целое, показан в листинге 3.3.

Листинг 3.3. HTML-документ, объединяющий фрагменты рисунка в единое изображение с помощью таблицы

<html>

<head>

<t i 11е>фрагментация</1 i tle>

</head>

<body>

Ctable width="170" height="165" border="0" cellpadding="0" cellspacing="0">

<tr>

Ctdximg src="images/F_01.gif" width="170" height="41" alt=""x/td>

</tr>

<tr>

Ctdximg src="images/F_02.gif" width="170" height="42" alt=""x/td>

</tr>

<tr>

<tdximg src="images/F_03.gif" width="170" height="41" alt=""x/td>

</tr>

<tr>

<tdximg src="images/F_04.gif" width="170" height="41" alt=""x/td>

</tr>

</table>

</body>

</html>

□ Откроем созданный HTML-документ в программе Dream­weaver. В режиме Design (Конструирование) выделим рисунок первого раздела и удалим его, нажав клавишу <Delete>. То же самое проделаем с остальными рисунками. На экране останет­ся пустая таблица с четырьмя ячейками, в которые предстоит поместить четыре ролловера. Установим указатель мыши в верхнюю ячейку и щелкнем по кнопке Rollover Image (Ролло­вер) из семейства Images (Изображения) в группе инструмен-

В поле Image name (Имя изображения) указывается имя рол­ловера, которое будет использоваться программой-сценарием. Можно согласиться с тем, что программа Dreamweaver пред­лагает по умолчанию.

Поле Original image (Первоначальное изображение) предна­значено для ввода пути к файлу рисунка, который должен постоянно отображаться на странице, пока указатель мыши находится за его пределами. В нашем случае это первое изо­бражение из первого комплекта. Для ввода пути к файлу удобнее использовать кнопку Browse (Поиск).

В поле Rollover image (Ролловер) вводится путь к файлу ри­сунка, который сменит первоначальное изображение, при на­ведении на него указателя мыши (первое изображение из второго комплекта).

Установка флажка Preload rollover image (Предварительная за­грузка ролловера) предусматривает загрузку файла второго рисунка в браузер до того, как в нем может возникнуть необ­ходимость, что позволит в окне браузера практически мгно­венно заменить одно изображение другим.

В поле Alternate text (Альтернативный текст) вводится текст, который будет появляться в виде всплывающей подсказки.

В поле When clicked, Go to URL (После щелчка перейти по ад­ресу) должен находиться URL-адрес или имя файла документа, на который осуществляется ссылка по этому разделу меню.

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

□ Теперь можно перейти к просмотру документа в окне браузе­ра и, перемещая курсор по рисункам, убедиться, что текст надписи меняет цвет (рис. 3.48).

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