7. Создайте два изображения, примерно таких же как на рис. 6, б и 6, в. Сохраните их в папке myhouse под именами georgin_1.Jpg и georgin_2.Jpg. Объясните назначение флажка Aligned (Выравнить).

Задание 2

Изучите технологию создания бесшовного узора. Все необходимые изображения находятся в папке html_css_8.

1. Откройте изображение rodonit.jpg. Нам предстоит создать из фрагмента этого изображения бесшовный узор. На рисунках ниже дано исходное изображение (рис. 7, а) и результат (рис. 7, б).

а б

Рисунок 7. а – исходное изображение rodonit.jpg; б – результат – бесшовный узор

2. Выберите инструмент выделения прямоугольной области . Он находится в группе инструментов, показанных на рис. 8.

Рисунок 8

3. На панели параметров этого инструмента выберите опцию Fixed Size (Фиксированный размер) из раскрывающегося списка Style (Стиль) и задайте значения параметров Width (Ширина) и Height (Высота) размером 128х128 пикселей (рис. 9).

Рисунок 9

4. Выделите прямоугольную область в изображении, которую мы будем использовать как основу для узора. Поскольку Вы точно указали размер выделяемой области (128х128), Photoshop выделит фиксированную область в любом месте изображения, на котором Вы щелкнете (рис. 10).

Рисунок 10

5. Выполните команду Edit→Define Pattern (Правка→Определить образец). Эта команда назначает выделенный фрагмент элементом узора. Назовите его rodonit. Нажмите ОК (рис. 11)

Рисунок 11

6. Создайте новый файл File→New (Файл→Новый) (Ctrl+N) с размерами в три раза больше, чем зона выделения в предыдущем пункте. В данном случае 384х384 пикселей (рис. 12).

Рисунок 12

7. Выберите команду Edit→Fill (Правка→Заполнить).

8. Затем из раскрывающегося списка Use (Использование) выберите опцию Pattern (Образец) и из списка Custom Pattern (Пользовательские образцы) выберите вновь созданный образец rodonit. Нажмите OK или Enter (рис. 13).

Рисунок 13

9. В результат окно заполнится решеткой с размерами 3х3 образца (рис. 14).

Рисунок 14

10. Активизируйте инструмент Штамп . На панели параметров инструмента сбросьте флажок Aligned (Выравнить).

11. Переключитесь на изображение rodonit.jpg. Удерживая клавишу Alt, щелкните инструментом Штамп на каком-нибудь легко заметном пикселе розочки. Например, на желтой точке, которая обведена белым кружком на рисунке 15.

Примечание: Если нажать клавишу Caps Lock, появится курсор в форме перекрестия, облегчающий эту задачу.

Рисунок 15

12. Переключитесь на изображение, где Вы уже сделали заливку по образцу.

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

14. Если вы щелкнули на изображении, и не заметили никакого сдвига, установите на панели параметров флажок Aligned. Убедитесь, что параметр Opacity (Непрозрачность) равен 100%.

15. С помощью инструмента Штамп уберите границу между центральной и средней правой ячейкой. Для этого: подведите курсор к границе между средней центральной и средней правой ячейкой, зажмите левую кнопку мыши и начинайте рисовать (рис. 16, а). Если результат не устраивает, отмените действие и повторите снова. Примерный результат на рис. 16, б.

а б

Рисунок 16. а – начало рисования; б – граница между ячейками убрана.

16. Выберите инструмент прямоугольного выделения . Убедитесь, что на палитре параметров установлены Fixed Size (Фиксированный размер) из раскрывающегося списка Style (Стиль) и значения параметров Width (Ширина) и Height (Высота) размером 128х128 пикселей.

17. Установите область выделения, чтобы в нее попала та граница, которую Вы только что убрали (рис. 17)

.

Рисунок 17

18. После этого определите образец, т.е. выполните команду Edit→Define Pattern (Правка → Определить образец), задайте новому образцу имя rodonit_2, как Вы это делали раньше и нажмите ОК.

19. Затем выполните команду Select→Deselect (Выделить → Снять выделение).

20. Затем Edit→Fill (Правка→Заполнить). И в качестве образца заливки выберите rodonit_2. В результате ваше изображение заполнится новым переходом. При этом ячейки сдвинутся (рис. 18).

Рисунок 18

21. На изображении еще заметны границы между верхней и центральной, центральной и нижней частями изображения. Аналогичным образом уберите эти границы, повторив п. 10-20. Новому образцу задайте имя rodonit_3 (рис. 19).

Рисунок 19

22. Примените образец rodonit_3 в качестве заливки. Примерный результат на рис. 20.

Рисунок 20.

23. Сохраните изображение под именем rodonit_uzor.jpg.

Примеры изображений, созданных по данной технологии (рис. 21)

Рисунок 21

При желании, Вы можете еще потренироваться в создании образцов для фона, используя изображения georgin.jpg или flower.jpg из папки html_css_8.

Вернемся к работе над сайтом.

Задание 3

1. Создайте web-страничку «Садовый участок». Все материалы (фотографии и текст) расположены на компакт-диске в папке html_css_8. Для форматирования элементов страницы обязательно должны быть использованы внешние стилевые спецификации. Примерный результат на рис. 22.

Рисунок 22

2. Создайте бесшовный узор из файла uzor.jpg, который расположен в папке html_css_8. Вы можете использовать любой участок этой фотографии.

3. Примените созданный узор в качестве фона для страницы «Садовый участок». Примерный результат на рис. 23.

Рисунок 23

4. Включите созданную страницу в структуру сайта. Для этого в левом меню сайта внизу создайте запись Садовые участки и сделайте ее гиперссылкой на только что созданную страницу, чтобы она грузилась в правый фрейм. Гиперссылка должна быть оформлена через внешнюю стилевую спецификацию так же, как гиперссылка «Проекты таунхаусов и блокированных домов». Примерный результат на рис. 24.

Рисунок 24

СОЗДАНИЕ АНИМАЦИОННЫХ КНОПОК

При создании дизайна сайта систему навигации (гиперссылки) часто выполняют в виде графических анимационных кнопок (меняющихся кнопок). Иногда их называют «ролловерами» (англ. rollover).

Для создания одной графической анимационной кнопки используют три рисунка.

Пример 1.

Пример 2.

В нашей работе мы создадим анимационные кнопки На главную, Заказ проекта, Контакты, которые имеют два состояния: исходное (рис. 25, а) и при наведении курсора мыши (рис. 25, б)

а б

Рисунок 25.

Каждая кнопка расположена в ячейке таблицы (таблица из одной строки с тремя ячейками). Фоном каждой ячейки является изображение, которое меняется при наведении курсора мыши и получается эффект анимационной кнопки. Надписи занесены в ячейку таблицы (а не написаны на изображении) и имеют внешнюю стилевую спецификацию.

Таким образом, для создания анимационных кнопок (см. рис. 25) Вам предстоит создать два внешних стиля:

• Внешний стиль для текстовых гиперссылок На главную, Заказ проекта, Контакты (это Вы уже умеете делать);

• Внешний стиль для ячейки таблицы, в которой расположена каждая гиперссылка (как это делается, Вы сейчас узнаете).

Каждая ячейка таблицы имеет HTML-код, представленный ниже. Разберем его структуру (рис. 26).

Рисунок 26

• width=95 height=20 – высота и ширина ячейки в пикселях означает, что изображение, которое будет фоном ячейки должно иметь такие же размеры.

• class=menu1 – имя стиля ячейки таблицы во внешней стилевой спецификации. Стиль menu1 применяется к ячейке в исходном состоянии гиперссылки.

• onmouseover="this.className='menuover2'" – при наведении курсора мыши к ячейке применяется стиль menuover2 из внешней таблицы стилей. Обратите внимание на регистр в конструкции this.className, регистр имеет значение.

• onmouseout="this.className='menu1'" – когда курсор мыши уходит с гиперссылки, к ячейке применяется стиль menu1 из внешней таблицы стилей. Обратите внимание на регистр в конструкции this.className, регистр имеет значение.

• <a class="zakaz" href="main.html" title="На главную" target="main">На главную</a> – к текстовой гиперссылке применяется стиль zakaz из внешней таблицы стилей, title="На главную" означает, что при наведении курсора на гиперссылку появится всплывающая подсказка «На главную».

Таким образом, для создания анимационных гиперссылок необходимо создать:

1. Два изображения размером 95*20 пикселей. Одно изображение будет соответствовать исходному состоянию гиперссылки, а второе – при наведении курсора мыши.

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

3. Стиль menuover2 для ячейки таблицы, фоном которой будет изображение при наведении курсора мыши.

4. Стиль zakaz для текстовой гиперссылки.

Задание 4

Создание фоновых изображений для кнопок

1. Запустите Photoshop.

2. Создайте два новых файла с размерами 95*20 пикселей каждый и разрешением 72 точки на дюйм в режиме RGB (рис. 27).

Рисунок 27

3. Откройте окно выбора цвета Color Piker, установите флажок Only Web Color и выберите темно-синий цвет (рис. 28).

Рисунок 28

4. Залейте один из файлов этим цветом (рис. 29).

Рисунок 29

5. Примените к слою эффект Bevel and Emboss с величиной Size=3 (рис. 30). Результат на рис. 31

Рисунок 30

Рисунок 31

6. Сохраните файл под именем fon_1.gif. Это изображение Вы будете в дальнейшем использовать как фон кнопки гиперссылки в исходном состоянии.

7. Снова откройте окно выбора цвета Color Piker, убедитесь, что установлен флажок Only Web Color и выберите голубой цвет (рис. 32).

Рисунок 32

8. Залейте второй файл голубым цветом (рис. 33).

Рисунок 33.

9. Примените к слою такой же эффект как и в предыдущем случае. Результат на рис. 34.

Рисунок 34

10. Сохраните файл под именем fon_2.gif. Это изображение Вы будете в дальнейшем использовать как фон кнопки гиперссылки при наведении курсора.

Создание стиля menu1 для ячейки таблицы

На рисунке 35 приведен код внешней стилевой спецификации для ячейки со стилем menu1, который применяется, когда гиперссылка находится в исходном состоянии.

Рисунок 35

В качестве фона для ячейки применяется изображение fon_1.gif из папки knopka.

11. В таблице внешних стилей создайте запись как на рис. 35. Обратите внимание на то, что URL-адрес картинки fon_1.gif может быть другой, сделайте адрес в соответствии с Вашей структурой сайта.

Создание стиля menuover2 для ячейки таблицы

На рисунке 36 приведен код внешней стилевой спецификации для ячейки со стилем menuover2, который применяется при наведении курсора на гиперссылку.

Рисунок 36

В качестве фона для ячейки применяется изображение fon_2.gif из папки knopka.

12. В таблице внешних стилей создайте запись как на рис. 36. Обратите внимание на то, что URL-адрес картинки fon_2.gif может быть другой, сделайте адрес в соответствии с Вашей структурой сайта.

Стиль zakaz для текстовой гиперссылки.

С созданием стилей для текстовых гиперссылок Вы уже знакомы, поэтому мы без пояснений на рис. 37 приводим параметры, которые были использованы в нашем примере.

Рисунок 37

13. В таблице внешних стилей создайте запись как на рис. 37. Примените этот стиль к гиперссылкам На главную, Заказ проекта, Контакты.

Теперь необходимо разместить анимационные кнопки на сайте проектов.

14. В файле shapka.html в ячейке с фоновым рисунком shapka_01.jpg добавьте атрибут выравнивания содержимого строки по верхнему краю valign=”top”, как на рисунке 38.

Рисунок 38

15. В этой же ячейке создайте таблицу из одной строки и трех ячеек. В ячейки впишите На главную, Заказ проекта, Контакты (по одному слову соответственно).

16. Слово На главную сделайте гиперссылкой на страницу main.html таким образом, чтобы она загружалась в правый фрейм.

17. Фразу Заказ проекта сделайте гиперссылкой на страницу zakaz.htm таким образом, чтобы она загружалась в правый фрейм.

18. Создайте чистую web-страницу kontaсt.htm. Слово Контакты сделайте гиперссылкой на страницу kontaсt.htm таким образом, чтобы она загружалась в правый фрейм.

19. Примените созданные стили к ячейкам таблицы и к гиперссылкам. Результат на рис. 39. Проверьте работоспособность кнопок.

Рисунок 39

Задание 5

Включите на главную страницу ролик Rolik.swf из папки html_css_8. Для этого используйте следующую команду (рис. 40)

Рисунок 40

Результат на рис. 41

Рисунок 41

Контрольные вопросы

1. Расскажите принцип действия инструмента Clone Stamp Tool (Штамп клонирования).

2. Объясните назначение опции Aligned (Выровнять) инструмента Clone Stamp Tool (Штамп клонирования).

3. Расскажите технологию создания бесшовного узора.

4. Расскажите технологию создания анимационной кнопки.

21