Как создать свой сайт? HTML4 и CSS2

Урок 8. Элементы дизайна сайта: бесшовный узор, анимационные кнопки

Создание бесшовного узора

Бесшовный узор используется для оформления фона web-страниц и может быть создан из любого понравившегося Вам изображения с помощью инструмента Clone Stamp Tool (Штамп клонирования) Уроки HTML и CSSпрограммы Photoshop.

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

Все материалы (фотографии и текст) расположены на компакт-диске в папке CD/html_css_8.

Результатом Вашей работы должна стать web-страничка сайта проектов, изображенная на рис. 8.1, но прежде необходимо повторить как работает инструмент Clone Stamp Tool (Штамп клонирования), выполнив задание 1, и изучить технологию создания бесшовного узора, выполнив задание 2.

Уроки HTML и CSS

Рисунок 8.1. Web-страница с фоном в виде бесшовного узора

Задание 1

Инструмент Clone Stamp Tool (Штамп клонирования) Уроки HTML и CSS, используется для копирования пикселей из одной области изображения в другую. Лишь одна эта способность делает штамп идеальным инструментом для устранения мелких точек («пыли») и царапин, исправления дефектов и устранения отвлекающих элементов фона.

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

  1. Откройте в Photoshop файл georgin.jpg из папки html_css_8.
  2. Создайте новый документ с размерами 10х10 см и разрешением 72 точки на дюйм (pixels/inch) (рис. 8.2).

    Уроки HTML и CSS

    Рисунок 8.2

  3. Активизируйте инструмент Штамп Уроки HTML и CSS. Инструмент находится в группе (рис. 8.3).

    Уроки HTML и CSS

    Рисунок 8.3

  4. Убедитесь, что на панели параметров инструмента установлен флажок Aligned (Выравнить) (рис. 8.4).

    Уроки HTML и CSS

    Рисунок 8.4

  5. Переключитесь на файл georgin.jpg, нажмите клавишу Alt, щелкните мышью примерно по центру изображения.
  6. Переключитесь на вновь созданный документ, нажмите кнопку мыши и, не отпуская ее, начинайте водить курсором, создавая, таким образом, клон (рис. 8.5).

    Уроки HTML и CSS

    Рисунок 8.5

    Давайте разберемся, для чего служит флажок Aligned (Выровнять) на панели параметров инструмента Clone Stamp Tool (Штамп клонирования).

    На рис. 6, б показан результат применения этого инструмента при установленном флажке Aligned (Выравнить). Если при создании клона, Вы отпустили кнопку мыши и снова начинаете рисовать, инструмент дорисовывает недостающие части изображения.

    На рис. 6, в показан результат применения этого инструмента при сброшенном флажке Aligned (Выровнять). Если при создании клона, Вы отпустили кнопку мыши и снова начинаете рисовать, то инструмент каждый раз начинает заново рисовать изображение.

    Уроки HTML и CSS

    Рисунок 8.6. а – исходное изображение; б – Флажок Aligned (Выровнять) установлен; в – Флажок Aligned (Выровнять) сброшен.

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

Задание 2

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

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

    Уроки HTML и CSS

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

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

    Уроки HTML и CSS

    Рисунок 8.8

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

    Уроки HTML и CSS

    Рисунок 8.9

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

    Уроки HTML и CSS

    Рисунок 8.10

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

    Уроки HTML и CSS

    Рисунок 8.11

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

    Уроки HTML и CSS

    Рисунок 8.12

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

    Уроки HTML и CSS

    Рисунок 8.13

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

    Уроки HTML и CSS

    Рисунок 8.14

  10. Активизируйте инструмент Штамп Уроки HTML и CSS. На панели параметров инструмента сбросьте флажок Aligned (Выравнить).
  11. Переключитесь на изображение rodonit.jpg. Удерживая клавишу Alt, щелкните инструментом Штамп на каком-нибудь легко заметном пикселе розочки. Например, на желтой точке, которая обведена белым кружком на рисунке 8.15.

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

    Уроки HTML и CSS

    Рисунок 8.15

  12. Переключитесь на изображение, где Вы уже сделали заливку по образцу.
  13. Теперь щелкните инструментом Штамп Уроки HTML и CSSна такой же точке в центральной ячейке. Если щелкнуть точно на нужном пикселе, то изображение не изменится. Если же оно изменилось, отмените действие и попытайтесь выполнить эту операцию еще раз. Поскольку флажок Aligned сброшен, можно смело повторять попытки, не переопределяя точку начала клонирования на исходном изображении.
  14. Если вы щелкнули на изображении, и не заметили никакого сдвига, установите на панели параметров флажок Aligned. Убедитесь, что параметр Opacity (Непрозрачность) равен 100%.
  15. С помощью инструмента Штамп уберите границу между центральной и средней правой ячейкой. Для этого: подведите курсор к границе между средней центральной и средней правой ячейкой, зажмите левую кнопку мыши и начинайте рисовать (рис. 8.16, а). Если результат не устраивает, отмените действие и повторите снова. Примерный результат на рис. 8.16, б. а б

    Уроки HTML и CSS

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

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

    Уроки HTML и CSS

    Рисунок 8.17

  18. После этого определите образец, т.е. выполните команду Edit–Define Pattern (Правка–Определить образец), задайте новому образцу имя rodonit_2, как Вы это делали раньше и нажмите ОК.
  19. Затем выполните команду Select–Deselect (Выделить–Снять выделение).
  20. Затем Edit–Fill (Правка–Заполнить). И в качестве образца заливки выберите rodonit_2. В результате ваше изображение заполнится новым переходом. При этом ячейки сдвинутся (рис. 8.18).

    Уроки HTML и CSS

    Рисунок 8.18

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

    Уроки HTML и CSS

    Рисунок 8.19

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

    Уроки HTML и CSS

    Рисунок 8.20

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

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

Уроки HTML и CSS

Рисунок 8.21

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

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

Задание 3

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

    Уроки HTML и CSS

    Рисунок 8.22

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

    Уроки HTML и CSS

    Рисунок 8.23

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

    Уроки HTML и CSS

    Рисунок 8.24

Создание анимационных кнопок

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

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

Уроки HTML и CSS

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

Наведите мышь на кнопки ниже. Такие мы и будем создавать в этом уроке



Уроки HTML и CSS

Рисунок 8.25

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

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

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

  1. Два изображения размером 95*20 пикселей. Одно изображение будет соответствовать исходному состоянию гиперссылки, а второе – при наведении курсора мыши.
  2. Стиль menu1 для ячейки таблицы, фоном которой будет изображение для исходного состояния гиперссылки.
  3. Стиль menuover2 для ячейки таблицы, фоном которой будет изображение при наведении курсора мыши.
  4. Стиль zakaz для текстовой гиперссылки.

Задание 4

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

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

    Уроки HTML и CSS

    Рисунок 8.27

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

    Уроки HTML и CSS

    Рисунок 8.28

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

    Уроки HTML и CSS

    Рисунок 8.29

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

    Уроки HTML и CSS

    Рисунок 8.30

    Уроки HTML и CSS

    Рисунок 8.31

  7. Сохраните файл под именем fon_1.gif. Это изображение Вы будете в дальнейшем использовать как фон кнопки гиперссылки в исходном состоянии.
  8. Снова откройте окно выбора цвета Color Piker, убедитесь, что установлен флажок Only Web Color и выберите голубой цвет (рис. 8.32).

    Уроки HTML и CSS

    Рисунок 8.32

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

    Уроки HTML и CSS

    Рисунок 8.33

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

    Уроки HTML и CSS

    Рисунок 8.34

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

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

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

    Уроки HTML и CSS

    Рисунок 8.35

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

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

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

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

    Уроки HTML и CSS

    Рисунок 8.36

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

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

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

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

    Уроки HTML и CSS

    Рисунок 8.37

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

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

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

    Уроки HTML и CSS

    Рисунок 8.38

  16. В этой же ячейке создайте таблицу из одной строки и трех ячеек. В ячейки впишите На главную, Заказ проекта, Контакты (по одному слову соответственно).
  17. Слово На главную сделайте гиперссылкой на страницу main.html таким образом, чтобы она загружалась в правый фрейм.
  18. Фразу Заказ проекта сделайте гиперссылкой на страницу zakaz.htm таким образом, чтобы она загружалась в правый фрейм.
  19. Создайте чистую web-страницу kontaсt.htm. Слово Контакты сделайте гиперссылкой на страницу kontaсt.htm таким образом, чтобы она загружалась в правый фрейм.
  20. Примените созданные стили к ячейкам таблицы и к гиперссылкам. Результат на рис. 8.39. Проверьте работоспособность кнопок.

Уроки HTML и CSS

Рисунок 8.39

Задание 5

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

Уроки HTML и CSS

Рисунок 8.40

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

Уроки HTML и CSS

Рисунок 8.41

Результаты урока можно скачать здесь.