Глава 8. Добавление графики на веб-страницы
303 background-position: 0 4px; padding-left: 25px;
margin-bottom: 10px;
}
Это последнее изменение стиля помещает значок маркера в крайнюю левую позицию (это 0), отстоящую на 4 пиксела от верхнего края элемента-пункта списка, что обеспечивает совсем незначительное смещение значка, тем не менее, достаточное для того, чтобы маркер выглядел безупречно.
СОВЕТ
Я рекомендую использовать именно свойство background вместо list-style-image для добавления собственных графических маркеров списков. Оно обеспечивает возможность точного позициони- рования значков маркеров.
5. Сохраните файл и просмотрите веб-страницу в браузере.
Теперь пункты списка имеют оригинальные маркеры вместо скучных черных кружков (см. рис. 8.25,
справа).
Придание боковой панели характерных особенностейНа данный момент боковая панель выглядит довольно неплохо. Текст приятно отформатирован, маркеры отлично смотрятся, но сама боковая панель теряется на белом фоне. Добавление фонового изображения позволит ее заметно выделить.
Вы можете использовать одно изображение в виде свитка, показанное на рис. 8.23, в фоне тега
. А чтобы убедиться, что весь текст попадает в данное изображение, вам следует ограничить количество содержимого, которое вы размещаете на боковой панели. Если будет слишком много текста, он просто не поместится в пределах изо- бражения (см. верхнее изображение слева на рис. 8.12), и, наоборот, если будет слиш- ком мало текста, у вас окажется много пустого пространства.
Более гибкий подход позволяет изображению увеличиваться по мере того, как на боковой панели увеличивается количество текста (см. нижнее изображение спра- ва на рис. 8.12). Хорошо, что эту маленькую хитрость не так сложно реализовать — вам понадобится три разных изображения и три разных стиля.
Как уже говорилось в разделе «Использование нескольких фоновых изображе- ний» данной главы, существует несколько способов достижения данного эффекта.
Можно сделать фоновую часть свитка (там, где появляется текст) в виде повторя- ющегося фонового изображения в div
-элементе, затем поместить фоновое изобра- жение для верхней части свитка в верхнюю часть div
-элемента, а фоновое изобра- жение нижней части свитка в нижнюю часть div
-элемента. Фактически именно этот метод и использовался в предыдущих изданиях книги. Но сейчас большинство браузеров поддерживают появившуюся в CSS3 возможность объявления несколь- ких фоновых изображений, которой можно воспользоваться взамен старого мето- да. Получится намного проще, и не нужно будет создавать три разных стиля.
1. Вернитесь к текстовому редактору и файлу bg_images.html
. Перейдите к стилю
.announcement
(который вы создали в шаге 6 в подразделе «Добавление на веб- страницу фонового изображения» данного раздела) и добавьте одно свойство:
.announcement {
background: url(images/scroll_top.jpg) no-repeat center top,
url(images/scroll_bottom.jpg) no-repeat center bottom,
304 Часть 2. Применение CSS
url(images/scroll_middle.jpg) repeat-y center top; margin-top: 115px;
}
2. Обновите стиль
.announcement
, добавив верхний и нижний отступы. Внесите изменение, выделенное полужирным шрифтом:
.announcement {
background: url(images/scroll_top.jpg) no-repeat center top,
url(images/scroll_bottom.jpg) no-repeat center bottom,
url(images/scroll_middle.jpg) repeat-y center top;
padding: 70px 0 60px 0; margin-top: 115px;
}
Еще одна проблема проявляется в том, что маркированный список выдается как с левой, так и с правой стороны изображения боковой панели. Сделаем так,
чтобы он соответствовал этому изображению, добавив немного левых и правых полей.
3. Перейдите к стилю
.announcement li
, созданному ранее, и добавьте два свойства в конце:
.announcement li {
list-style: none;
background-image: url(images/bullet.png);
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 25px;
margin-bottom: 10px;
margin-left: 30px; margin-right: 40px; }
Эти свойства перемещают левый и правый края каждого пункта маркированного списка на достаточное расстояние, чтобы очистить края фонового изображения.
4. Сохраните файл и просмотрите его в браузере.
Страница должна выглядеть как правое изображение на рис 8.23 на всех брау- зерах, кроме Internet Explorer 8. Этот браузер несколько фоновых изображений не поддерживает.
Получение свитка, появляющегося в Internet Explorer 8Хотя Internet Explorer 8 не поддерживает несколько фоновых изображений, та- кую поддержку можно имитировать, особенно когда нужно только два или три фоновых изображения. Используя сгенерированное содержимое (см. раздел «Раз- личные свойства» в приложении 1), можно добавить текст или изображения пе- ред и после любого элемента на странице. В данном случае верхнюю часть свит- ка можно добавить перед div
-элементом, а его нижнюю — после этого элемента.
Глава 8. Добавление графики на веб-страницы
305Если поддержка Internet Explorer 8 вас особо не волнует, этот шаг можно про- пустить, но если вам хочется посмотреть, как эта работа делается в Internet Explorer 8 и в последующих версиях, а также в других текущих браузерах, читайте дальше.
1. Отредактируйте стиль
.announcement
, оставив только одно фоновое изображение
(среднюю часть свитка) и убрав отступы:
.announcement {
background: url(images/scroll_middle.jpg) repeat-y center top;
margin-top: 115px;
}
Отступы не понадобятся, потому что другие изображения займут пространство выше и ниже div
-элемента. Затем будет добавлено верхнее изображение свитка в качестве элемента, предшествующего div
2. Добавьте ниже стиля
.announcement следующий стиль:
.announcement:before {
content: url(images/scroll_top.jpg);
}
Как уже упоминалось выше, псевдоэлемент
:before позволяет добавлять содер- жимое перед тегом. Это может быть текст или (как в данном случае) изображе- ние. Теперь перейдем к нижней части свитка.
3. Добавьте ниже только что добавленного стиля
:before следующий стиль:
.announcement:after {
content: url(images/scroll_bottom.jpg);
}
Этот код добавит после div
-элемента нижнюю часть свитка. Но в действитель- ности это изображение установится не после div
-элемента, а поверх него, и div расширится, чтобы его уместить. Если посмотреть на страницу, будет немного виден фон элемента div
(свиток), показанный ниже скрученной нижней части свитка. Исправить положение поможет дополнительная небольшая магия CSS.
4.
Отредактируйте только что созданный стиль, добавив в него еще две строки кода (выделенные полужирным шрифтом):
.announcement:after {
content: url(images/scroll_bottom.jpg);
position: relative; bottom: -5px; }
Здесь мы немного забегаем вперед, поскольку о свойстве position не будет се- рьезных упоминаний вплоть до гл. 15. Но если коротко объяснять, вы смещаете нижнюю часть свитка на 5 пикселов вниз, чтобы прикрыть фоновое изображе- ние div
-элемента.
Теперь страница должна выглядеть как правое изображение на рис. 8.23 и быть похожа на ту, что создавалась в предыдущей части урока с помощью нескольких изображений. Обе страницы, bg_images.html и bg_images_ie8.html можно найти в папке
08_finished/03_bg_ex
9Приводим в порядок навигацию сайтаМожно с уверенностью сказать, что без ссылок не было бы Интернета. Возмож- ность находиться на одной веб-странице, а затем, щелкнув кнопкой мыши, перей- ти на другую страницу, расположенную на компьютере на другом конце света, — вот что делает Сеть такой полезной и незаменимой. Ссылки предоставляют своеобраз- ный способ навигации и управления содержимым сайта. Именно поэтому дизай- неры веб-страниц прилагают столько усилий для создания привлекательных ссы- лок, работающих должным образом.
В этой главе вы познакомитесь с разработкой стилей ссылок, позволяющих им визуально выделяться из общего содержимого страниц. Вы узнаете, как обеспе- чить визуальные подсказки, чтобы посетители сайта могли видеть, какие ссылки они уже посещали, а какие — нет. Я также научу вас созданию на веб-страницах средствами CSS кнопок и панелей навигации, как это делают профессиональные разработчики. И в заключение, в практической части, мы создадим полный набор средств — элементов навигации, одинаково хорошо работающих во всех разновид- ностях браузеров.
Выборка стилизуемых ссылокВ CSS, как обычно, сначала нужно выбрать объект, для которого вы хотите опре- делить стиль. Для этого надо сообщить CSS не только
что стилизовать, то
есть конкретный объект, но и
условия стилизации. Браузеры отслеживают процесс вза- имодействия посетителя сайта со ссылками и затем отображают их по-разному в зависимости от статуса. Таким образом, применяя селекторы в CSS, вам предо- ставляется возможность адресовать стили к ссылкам в определенном состоянии.
Понимание состояний ссылокБольшинство браузеров распознают четыре основных состояния ссылок:
непосещенная ссылка;
посещенная ссылка (это означает, что по ссылке уже выполнялся переход, то есть URL-адрес сохранен в журнале истории браузера);
ненажатая (над которой находится указатель мыши);
нажатая ссылка (удерживаемая мышью).
Глава 9. Приводим в порядок навигацию сайта
307Как описано в гл. 3, CSS предоставляет четыре псевдокласса селекторов, соот- ветствующих этим состояниям:
:link
,
:visited
,
:hover
,
:active
. Используя их, вы можете применить различное форматирование для каждого состояния ссылки, обеспечивая соответствующие подсказки и однозначно давая понять посетителю сайта, какие ссылки он уже посещал, а какие — нет.
ПРИМЕЧАНИЕ
Браузеры распознают также псевдоклассы :focus. Ссылки получают фокус, когда посетители, недо- любливающие мышь, используют клавиатуру, чтобы перейти на ссылки с помощью клавиши табу- ляции. Этот псевдокласс также полезно применять с текстовыми полями формы, что будет показа- но в уроке по стилизации формы в гл. 11.
Предположим, вы хотите изменить цвет текста непосещенной ссылки с синего цвета на ярко-оранжевый. Для этого добавьте следующий стиль:
a:link { color: #F60; }
Щелкаем кнопкой мыши на этой ссылке, и ее состояние изменяется на посе- щенное, а цвет в большинстве браузеров становится фиолетовым. Чтобы изменить его на насыщенно-красный, примените такой стиль:
a:visited { color: #900; }
СОВЕТ
Если требуется одинаково отформатировать все состояния ссылок, используйте один и тот же
шрифт и размер для всех состояний, а затем отформатируйте тег
, создав общий селектор a.
Далее вы сможете применять конкретные состояния ссылок, например a:visited, для изменения цвета или настройки какого-либо конкретного состояния.
НАМЕК ДЛЯ СМЫШЛЕНЫХ
Ограничения на посещения
Изза проблем конфиденциальности браузеры начали накладывать некоторые ограничения на CSSсвойства, применяемые к псевдоклассу
:visited
. Оказалось, что злоумышленники научились с помощью JavaScript считывать изменения в стиле
:visited ссылок, что
бы определить, какие сайты посещались. Например, путем загрузки нового фонового изображения для ссылок на посещенные сайты можно определить, был ли посетитель на сайтах
Paypal.com, eBay.com,
BankofAmerica.com и т. д. Изза потенциальной воз
можности возникновения проблем наложены ограни
чения на стилевое изменение цвета, фонового цвета и цвета рамки ссылок на посещенные сайты, исключая случаи заблаговременного придания этим ссылкам при их обычном состоянии цвета, фонового цвета или цвета рамки. То есть теперь уже нельзя рассчитывать на внесение изменений с помощью псевдокласса
:visited
Псевдокласс
:hover предоставляет творческую свободу (мы изучим его в этой главе несколько позже). Он позволяет полностью изменить вид гиперссылки при наведении указателя мыши и перемещении его над ссылкой. Если раньше для визу- ального представления кнопок навигации при наведении на них указателя мыши вы применяли объемный код на языке JavaScript, то вам понравится способ достижения такого же эффекта посредством простейшей строки кода CSS (см. раздел «Стилиза- ция ссылок» данной главы). Для начала изучим простой пример, в котором стиль изменяет цвет ссылки при наведении и перемещении указателя мыши:
308 Часть 2. Применение CSS
a:hover { color: #F33; }
СОВЕТ
Будьте внимательны при добавлении свойств CSS к псевдоклассу :hover. Свойства, изменяющие размер элемента, над которым наведен указатель мыши, могут повлиять на другие элементы, на- ходящиеся рядом. Например, если вы
увеличиваете размер шрифта текстовой ссылки, над которой наведен указатель мыши, то при наведении указателя текст будет увеличиваться, выталкивая дру- гие элементы с их позиций. Результат может оказаться раздражающим.
Теперь рассмотрим пример специально для «одержимых» веб-дизайнеров, ко- торым нравится делать свои страницы непохожими на остальные. Изменим вид гиперссылки на доли миллисекунды, то есть на момент, когда посетитель щелкает кнопкой мыши на ссылке. Для этого напишем следующий стиль:
a:active {color: #B2F511; }
В большинстве случаев для обеспечения максимальной гибкости дизайна тре- буется включить в таблицу стилей псевдоклассы
:link
,
:visited:
и
:hover
. Но, что- бы этот метод работал, вы должны расположить ссылки в определенной последо- вательности: link
, visited
, hover и active
. Для запоминания этого порядка запомните аббревиатуру по первым буквам соответствующих стилям английских слов:
Скачать 20.28 Mb.
_no-repeat_center_top,__url(images/scroll_bottom.jpg)_no-repeat_center_bottom,__304){kind=link}