Самоучитель по креативному веб-дизайну. Книга 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

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

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

Полезные ссылки
Случайные записи
  • 07.08.2012">Google улучшила PageSpeed, чтобы люди не тратили драгоценные секунды
  • 16.05.2013">Яблочная диета
  • 12.05.2014">Косметический ремонт квартиры
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.46
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 017
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 073
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 012
  • 01.04.2010">Ресурсы с векторными шаблонами
  • 29.02.2012">«Яндекс.Диск» — российский ответ сервису iCloud от Apple
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 042
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.48
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.49
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 027
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.90
  • 06.09.2011">Обзор ноутбука Acer As 5534-512G25Mn
Опрос

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

View Results

Loading ... Loading ...