Самоучитель по креативному веб-дизайну. Книга 2, стр.10

Глава 4. Каскадные списки стилей 211





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

тельно, что для создания границы используется свойство background-image кас — кадных списков стилей. Так, например, в центре страницы, показанной на рис.

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



Рис. 4.16. Web-страница с элементом мозаичного изображения

и боковой панелью или границей вдоль левого края страницы

Первый шаг на пути создания границы — рисование или загрузка небольшого изображения в формате GIF, которое будет использоваться для формирования

границы. Для создания вашего собственного элемента мозаичного изображения можно воспользоваться таким графическим редактором, как Photoshop. Кроме того, можно взять готовое изображение из галереи картинок, поставляемой вмес —

те с пакетом Microsoft Office, или выгрузить его из таких Web-сайтов, как

Microsoft Design Gallery Live (http://dgi. microsoft. com). После получения тре — буемого изображения сохраните его в каталоге изображений Web-сайта (напри — мер, в каталоге images). Далее, вставьте на страницу следующее правило каскад — ного списка стилей:

body {background-image:URL(images/TileFilename. gif);

background-repeat:repeat-y}

В приведенном примере свойство background-image указывает относитель —

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

ром. Свойство background-repeat указывает Web-браузеру повторять изображе —

ние в вертикальном направлении. Поскольку свойство background-position не было установлено, Web-браузер будет повторять изображение вдоль левого края страницы. Обратите внимание, что для замены изображения, используемого в качестве элемента мозаичного изображения, замените относительный адрес

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.170
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.35
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.148
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 015
  • 13.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.103
  • 09.03.2011">Руководство по actionscript. часть 4, стр. 045
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.35
  • 12.03.2011">Руководство по actionscript. часть 3, стр. 135
  • 16.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.13
  • 22.12.2011">Samsung производит процессоры A5 для Apple iPhone 4S и iPad 2
  • 16.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.33
  • 03.02.2010">Создание графиков и диаграмм на JavaScript
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 124
  • 14.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.65
  • 04.12.2012">Седьмой элемент
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...