| |
а фона
цветом — это не то, что вы хотите для своей Web-страницы, попробуйте восполь-
зоваться правилами списков стилей для создания текстурного фона, вставки ло-
готипа компании или "водяных Знаков".
ПРАКТИКУМ
Первый шаг на пути создания текстурного фона — рисование или загрузка не-
большого изображения в формате GIF (файла текстуры), которое будет использо-
ваться для формирования фона Web-страницы. Для создания вашего собственно-
го элемента текстуры можно воспользоваться таким графическим редактором, как
Photoshop. Кроме того, можно взять готовое изображение из галереи картинок,
поставляемой вместе с пакетом Microsoft Office, или выгрузить его из таких Web-
сайтов, как Microsoft Design Gallery Live (http://dgi.microsoft.com). После по-
Глава 4. Каскадные списки стилей 213
лучения требуемого изображения сохраните его в каталоге изображений Web-сай-
та (например, в каталоге images). Далее, вставьте на страницу следующее прави-
ло каскадного списка стилей:
body {background-image:url(images/marbleTile.gif)}
Web-браузер создаст мозаику (т.е. выведет на экран копии) изображения, со-
держащегося в файле, адрес которого указывается в скобках после url в правиле
каскадного списка стилей в объявлении свойства background-image. В приведен-
ном примере Web-браузер заполнит фон Web-страниц текстурой из файла
marbieTiie.gif, как показано на рис. 4.17. Для изменения типа текстуры заме-
ните images/marbleTile.gif относительным путем и именем файла, в котором
содержится изображение выбранной текстуры.
J - Г ч . ^ . | I ' l l ' ^ - У Г Т ' ' - - • • ^ • 1 ' ^ - ^ - - < - Т -.ТТ I
I I - - . M I я= •QDea.ce .йнд Избранное С$реис
• Ш A -JS : & & ^ : чУЧЛ Ш ' I
Вместо сплошного цвета фона можно использовать
графическое изображение (наподобие показанного
ниже) для создания текстурированного фона.
Графическое изображение (показанное выше в
рамке) является источником построения текстуры,
напоминающей мраморную плитку, на фоне Web-
страницы. Web-браузер повторяет, то есть,
выкладывает мозаикой изображение, пока не
заполнит весь фон.
Рис. 4.17. Web-страница с текстурным фоном
"Водяной знак" напоминает текстурный фон в том, что он также представляет
собой графическое изображение, выводимое позади другого содержимого Web-
страницы. Тем не менее, "водяной знак" выводится на страницу только один раз
и не копируется с целью заполнения всего фона Web-страницы. Более того, при
пролистывании содержимого страницы в окне браузера желательно, чтобы "водя-
ной знак" оставался на месте. К счастью, каскадные списки стилей предоставля-
ют свойства фона, которые позволяют расположить на странице одну копию "во-
дяного знака" и удерживать его на одном месте во время пролистывания
содержимого страницы.
В отличие от квадратного изображения размерами 50x50 пикселей, которое
использовалось для создания текстурного фона, изображение "водяного знака"
должно иметь большие'размеры. Например, при необходимости использования в
качестве "водяного знака" логотипа компании изображение логотипа должно
быть таким, каким оно должно выводиться на странице (см. рис. 4.18).
214 Глава 4. Каскадные списки стилей
Г f^M'flf'"""""1'"1*'.'
Файл Правка .3ид
• • •
ображениями и водяными знаками - Microsoft Internet Expl
Qgpenc Сяравка•
ЙЯрес jiJ] http //htm!^vebdesign;'Chepter04/Fiqure01-l: htm
Если вы работаете в электрической компании, в качестве логотипа
можно выбрать электрическую лампочку.
"Водяной знак11 напоминает текстурный фон в том, что он также
представляет собой графическое изображение, выводимое поза
|
|
