те дольше, особенно это касается страниц, содержащих мало 
графических изображений и много текста. Кроме того, граница служит отличи- 
тельной особенностью вашего сайта, на основе которой посетитель может опре- 
делить, остается ли он на одном и том же сайте или уже перешел на другой 
сайт. Когда граница исчезает или изменяется радикальным образом, посетители 
понимают, что они перешли на другой сайт. И, наконец, на Web-сайтах с не- 
сколькими разделами или отделами для различных разделов желательно исполь- 
зовать несколько отличающиеся границы, что также позволяет пользователям от- 
слеживать свое перемещение по сайту. 
ПРАКТИК 
Каскадные списки стилей позволяют без особых усилий создавать границу Web- 
страниц и изменять ее вид от страницы к странице и время от времени, если 
это будет необходимо. Как правило, граница состоит из маленьких квадратных

Глава 4. Каскадные списки стилей 211 
изображений или элементов мозаичного изображения, которые копируются Web- 
браузером и изображаются в качестве фона Web-страницы. Поэтому не удиви- 
тельно, что для создания границы используется свойство background-image кас- 
кадных списков стилей. Так, например, в центре страницы, показанной на рис. 
4.16, находится элемент мозаичного изображения, которое используется для 
формирования боковой панели, расположенной вдоль левого края страницы. 
.] httpy/htfnl-webdesign/ChapterO^/FigureO4-16 hit zl 
j
J 
Рис. 4.16. Web-страница с элементом мозаичного изображения 
и боковой панелью или границей вдоль левого края страницы 
Рис. 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-браузер будет повторять изображение вдоль левого края 
страницы. Обратите внимание, что для замены изображения, используемого в 
качестве элемента мозаичного изображения, замените относительный адрес 
images/TileFilename.gif адресом файла вашего изображения. 
Для обновления Web-сайта, возможно, потребуется периодическая замена сти- 
ля границ страниц. К счастью, каскадные списки стилей делают сопровождение

212 Глава 4. Каскадные списки стилей 
сайта достаточно простой задачей. Создайте или выгрузите откуда-нибудь из 
Internet новое изображение, которое будет использоваться в качестве элемента 
мозаичного изображения и сохраните его в каталоге изображений. Затем замени- 
те путь в скобках после URL В правиле списка стилей таким образом, чтобы он 
указывал на новое изображение. 
Если сайт имеет несколько разделов, и вы хотите, чтобы от раздела к разделу 
вид границы менялся, создайте класс для селектора содержимого страницы (ь) 
для каждого раздела сайта. Таким образом, в списке стилей будут содержаться 
правила следующего вида: 
body.main {background-image:URL(images/TileFileNamel.gif) ; 
background-repeat:repeat-y} 
body.products {background-image:URL(images/TileFileName2.gif); 
background-repeat:repeat-y} 
body.custService {background-image:URL(images/TileFileName3.gif); 
background-repeat:repeat~y} 
body.employmentOps {background-image:URL(images/TileFileName4.gif); 
background-repeat:repeat-y} 
Для изменения вида границы для страниц одного раздела Web-сайта необхо- 
димо всего лишь изменить URL-адрес файла графического изображения, указан- 
ный в, классе соответствующего раздела сайта. Конечно, при создании несколь- 
ких классов селектора содержимого страницы (ь) в дескрипторы  
Web-страниц необходимо ввести ссылку на один из классов. Например, дескрип- 
тор  ДЛЯ Web-страниц В разделе "Вакансии" ("Employment Opportunity") 
будет выглядеть следующим образом: 
 
Расположение фоновых изображений 
и водяных знаков 
Сейчас лишь немногие Web-сайты ограничиваются страницами с текстом чер- 
ного цвета на белом фоне. Для выделения своих сайтов дизайнеры, как правило, 
используют отличительный цвет фона или вставляют границу или боковую па- 
нель (как было показано в предыдущем совете). Если сплошная залив