. Точное значение ширины зависит от максимальной длины текста каждой из кнопок. Очевидно, что для ссылки
Corporate Philosophy
(Корпоративная философия) нужна кноп- ка большей ширины. Если вы хотите, чтобы каждая кнопка имела ширину
326 Часть 2. Применение CSS
находящегося внутри нее текста, не задавайте значение ширины. Хотя можно добавить левые и правые отступы и таким образом задать для текста немного пространства, избавившись от тесноты.
СОВЕТ
Чтобы центрировать текст ссылок на кнопках, добавьте в стиль ссылок свойство text-align: center;.
5. Добавим свойство overflow: hidden к стилю для тега
. Если для тега
заданы границы, цвет фона или изображение, вам придется «удержать плава- ющий элемент», то есть плавающие пункты списка тега
будут высовывать- ся из-под нижней части списка (и находиться за пределами границ и фонового цвета тега
).
ul.nav {
overflow: hidden;
},,
Ниже даны описания стилей, требуемых для создания панели навигации, изо- браженной на рис. 9.7. Обратите внимание, что кнопки имеют одинаковую ширину и текст на них центрирован.
,.nav {
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: 3px solid rgb(204,204,204);
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
width: 12em;
display: block;
border: 3px solid rgb(204,204,204);
border-bottom: none;
border-radius: 5px 5px 0 0 ;
padding: 10px;
margin-right: 5px;
background-color: rgb(95,95,95);
background-image: -webkit-linear-gradient(rgb(175,175,175), rgb(95,95,95));
background-image: -moz-linear-gradient(rgb(175,175,175), rgb(95,95,95));
background-image: -o-linear-gradient(rgb(175,175,175), rgb(95,95,95));
background-image: linear-gradient(rgb(175,175,175), rgb(95,95,95));
text-decoration:none;
color: white;
text-align: center; font-family: Arial, Helvetice, sans-serif;
font-weight: bold;
}
Глава 9.
Приводим в порядок навигацию сайта327Рис. 9.7. Плавающие элементы списка позволяют создавать кнопки панели навигации одинаковой ширины
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫГде узнать, как создается панель навигации?Вы начинающий веб-дизайнер и нико гда раньше не создавали панелей навигации, однако ваш сайт обязательно должен иметь такую. Кажется, что вы самостоятельно с этим не справитесь.
Можно ли где-нибудь найти подробное руковод- ство к действию для начинающих?
Да. Практическая обучающая программа представ
лена в этой главе. В ней подробно, шаг за шагом опи
сывается процесс создания панели навигации. Просто перейдите к обучающему уроку.
Вы можете найти обучающие программы и в Интернете, там также размещены инструменты, которые облегчат работу.
Подробная информация по превращению простых списков в необычные, неординарные элементы управ
ления представлена в пошаговом обучающем уроке в
Интернете по адресу: http://css.maxdesign.com.au/
listutorial/.
Готовые варианты дизайна стильных панелей навига
ции на основе списков можно найти по адресу: http://
css.maxdesign.com.au/listamatic/
И наконец, если вы вообще не хотите обременять себя созданием и настройкой собственных панелейменю, воспользуйтесь мастером ListOMatic по адресу http://
www.accessify.com/tools-and-wizards/developer- tools/list-o-matic/
. Этот сайт запрашивает определенную информацию (шрифты, цвета) и самостоятельно создает
CSSкод панели навигации на основе списков. Он даже позволяет создавать подменю (известные как выпада
ющие меню).
CSS-стиль для предварительной загрузки ролловеровОчень давно, когда еще не было языка CSS, для смены одной графической ссылки на другую при наведении на нее указателя мыши приходилось привлекать средства
JavaScript. Теперь с помощью CSS вы можете достичь подобного эффекта посред- ством псевдокласса
:hover и фонового изображения. Однако этот метод имеет одну проблему: если браузер не загрузил сменное изображение для hover
(ролловер), оно не загрузится, пока на данную ссылку не будет наведен указатель мыши, — для посетителя заметна задержка этого сменного изображения на время загрузки брау- зером.
Задержка произойдет всего один раз, во время первого
наведения указателя мыши посетителем на ссылку, но все-таки ожидание загрузки графики — это издерж- ки XX века.
Метод с применением JavaScript поможет избежать этой проблемы благодаря возможности предварительной загрузки сменных изображений задолго до того, как они понадобятся. В CSS нет таких средств, поэтому придется задействовать другой хитрый трюк, называемый CSS-спрайтами (sprites), при котором используется
328
Часть 2. Применение CSS
единственное изображение для создания различных состояний одной навигацион- ной кнопки.
ПРИМЕЧАНИЕ
Эволюционировавший метод CSS-спрайтов в настоящее время широко используется такими компания- ми, как Yahoo! и Google, причем не только для эффектов ролловера, но и для оптимизации скорости загрузки сайтов. Вы можете прочитать больше об этом на странице http://coding.smashingmagazi- ne.com/2009/04/27/the-mystery-of-CSS-sprites-techniques-tools-and-tutorials/.
Рассмотрим, как реализуется метод.
1. В программе редактирования изображений создадим один комбинированный рисунок с различными вариантами отображения кнопки.
Нужно создать изображения, представляющие собой различные состояния кноп- ки: обычное ненажатое состояние, состояние при наведении указателя мыши, а также при необходимости состояние нажатой кнопки. Далее поместим изобра- жения вертикально одно над другим. У нас будет два состояния кнопки: изобра- жение в ненажатом состоянии должно располагаться сверху, а изображение- ролловер при наведении указателя мыши — снизу.
ПРИМЕЧАНИЕ
В Fireworks CS6 есть встроенное средство для создания CSS-спрайтов. Имеется также множество других вспомогательных интерактивных средств для их создания, например SpritePad (http://sprite- pad.wearekiss.com).
2. Измерим расстояние от верхнего края получившегося комбинированного изо- бражения до верхней границы каждого последующего изображения. На рис. 9.8,
вверху, верхняя граница сменного изображения-ролловера имеет смещение от верхнего края общего изображения в 39 пикселов.
3. Создадим CSS-стиль для ссылки в обычном ненажатом состоянии. Поместим изображение в качестве фонового в левый верхний угол стилизуемой ссылки
(см. рис. 9.8, посередине).
Стиль может выглядеть следующим образом:
a { background: #E7E7E7 url(images/pixy.png) no-repeat left top; }
4. Создадим стиль
:hover
. Будем использовать свойство background-position
, что- бы сместить изображение вверх. Таким образом, первое изображение исчез- нет, а второе, нижнее изображение-ролловер окажется видимым (см. рис. 9.8,
внизу).
a:hover { background-position: 0 -39px; }
Такая методика, помимо предотвращения длительной задержки в загрузке до- полнительного изображения-ролловера, обеспечит хранение всех изображений кнопки, отражающих ее состояния, в единственном файле.
Глава 9. Приводим в порядок навигацию сайта
329Рис. 9.8. Используя метод CSS-спрайтов, можно избежать задержки во время загрузки браузером изображения-ролловера в первый раз, включив все изображения различных состояний кнопки-ссылки в единственный файл рисунка
ПРИМЕЧАНИЕ
Некоторые сайты пошли в использовании этого метода еще дальше. Yahoo!, Amazon и Google (а так- же многие другие) часто собирают вместе в одном файле множество маленьких изображений и по- казывают лишь часть файла, содержащую необходимую кнопку. Вы можете посмотреть пример от
Amazon здесь: www.flickr.com/photos/mezzoblue/3217540317. Сайты с миллионами посетителей в день активно используют сложные спрайты, поскольку веб-серверу проще и быстрее отправить один
(хотя и больший по размеру) файл изображения, чем десяток меньших по размеру файлов.
Для еще большего контроля сайт одного известного дизайнера использует отдельный графиче- ский файл для управления 15 различными кнопками панели навигации. Вы можете прочитать о таком методе на странице http://veerle-v2.duoh.com/blog/comments/the_xhtml_css_template_
phase_of_my_new_blog_part_2/. А в действии данный метод можно увидеть в обучающем уроке этой главы.
Стилизация отдельных видов ссылокВеб-дизайнеры используют ссылки на все что угодно: другие веб-страницы своих сайтов, веб-страницы посторонних сайтов, файлы Adobe Acrobat, документы Word, архивы ZIP и многое другое. Чтобы помочь ориентироваться посетителям сайта, вы можете подсказать им, к чему ведет ссылка, прежде чем они щелкнут на ней кнопкой мыши. Расширенные селекторы представляют отличный способ, чтобы сделать именно это.
Ссылки на другие сайтыВы можете легко создать стиль, который определяет ссылки на другие сайты, ис- пользуя селектор атрибута. Как рассказывалось в гл. 3, селекторы атрибутов поз- воляют стилизовать теги HTML, у которых есть определенный атрибут, например тег
![]()
с атрибутом alt
, для которого установлено значение
Our Company
. Вы
также можете стилизовать теги, атрибуты которых начинаются с определенных значений.
Любая ссылка, которая ведет за пределы вашего сайта, должна быть абсолютным
URL, то есть должна начинаться с http://
, например http://www.yahoo.com
. Таким
330 Часть 2. Применение CSS
образом, чтобы создать стиль, который воздействует только на ссылки с абсолют- ным URL, можно использовать такой селектор:
a[href^='http://']
Сочетание
^=
переводится как «начинается с», так что этот селектор соответс- твует таким ссылкам, как
, sawmac.com/missing/css3/">
и т. д.
Вы могли бы стилизовать их любым образом, но распространенным является добавление рядом со ссылкой маленького изображения — значка, который указы- вает на то, что это внешняя ссылка. Вы увидите это в действии в обучающем при- мере.
Если вы решили использовать абсолютные ссылки на другие страницы ваше- го сайта, то вам нужно добавить еще один стиль для «выключения» стилизации, в противном случае ссылки будут выделяться как внешние, хоть в действитель- ности они являются простыми ссылками на другие страницы в пределах сайта.
Этот второй стиль просто использует более обстоятельный вариант селектора, приведенный выше. Например, если ваш сайт находится по адресу www.mysi te.com
, то вы можете создать селектор, который относится к таким ссылкам следующим образом: a[href^='http://www.mysite.com']
. Если вы хотите, например, при сборке всех элементов добавить значок с земным шаром рядом с внешними, но не внут- ренними ссылками вашего сайта, создайте два следующих стиля:
a[href^='http://'] {
background: url(images/globe.png) no-repeat center right;
padding-right: 15px;
}
a[href^='http://www.mysite.com'] {
background: none;
padding-right: 0;
}
ПРИМЕЧАНИЕ
Если вы хотите следовать последним новшествам CSS, то можете объединить селектор атрибутов с селектором :not() из CSS 3 для создания отдельного стиля, который будет воздействовать на все абсолютные адреса URL, кроме указывающих на ваш собственный сайт:
a[href^='http://']:not(a[href^='http://www.mysite.com'])
Этот причудливый селектор переводится как «выбрать все ссылки, которые начинаются с http://, но не те, которые начинаются с http://www.mysite.com». Недостатком метода является то, что
Internet Explorer 8 и более ранних версий не понимает селектор :not().
Ссылки на адреса электронной почтыСсылки на адреса электронной почты — еще один особый вид ссылок. Обычно они выглядят как любые другие ссылки: имеют синий цвет и подчеркивание. Тем не
менее они действуют не так, как другие ссылки. Нажатие ссылки на электронный адрес запускает программу для работы с почтой на компьютере посетителей, что
Глава 9. Приводим в порядок навигацию сайта
331некоторых из них действительно отвлекает. Поэтому желательно как-то подска- зать пользователю, что это ссылка на адрес почты.
Для этого применяется тот же базовый метод, который был описан примени- тельно к внешним ссылкам выше. Поскольку все ссылки на почтовые адреса на- чинаются с mailto:
, вы можете создать селектор наподобие следующего для стиля, форматирующего только данный тип ссылок:
a[href^='mailto:']
Скоро вы увидите такой пример в действии.
Ссылки на определенные типы файловНекоторые ссылки указывают на файлы, а не на другие веб-страницы. Вы часто могли видеть ежегодные отчеты различных компаний в виде загружаемого PDF- файла или ZIP-архива файлов (как, например, обучающие примеры для этой кни- ги) на сайте. Ссылки на такие типы файлов, как правило, заставляют браузер приступить к загрузке соответствующего файла на компьютер посетителя или, в случае файлов PDF, запустить плагин (подключаемый модуль), который позво- лит просматривать документ прямо в браузере. Выбрав ссылку, посетитель может оказаться в шоке от того, что на самом деле началась загрузка файла размером
100 Мбайт!
Вы можете идентифицировать определенные типы файлов наподобие вне- шних ссылок или ссылок на адреса электронной почты. Но вместо того, чтобы пытаться найти какую-то конкретную информацию в начале адреса URL ссылки, поищите ее в конце. Например, ссылка на документ PDF может выглядеть так:
<
a href="annual_report.pdf">
, а ссылка на ZIP-архив —
В каждом случае конкретный тип файла определяется расширением в конце ад- реса URL —
.pdf или
.zip
CSS предоставляет селектор атрибутов, который позволяет искать атрибуты, заканчивающиеся какой-либо конкретной информацией. Так, чтобы создать стиль ссылки на файлы PDF, используйте такой селектор:
a[href$='.pdf']
Сочетание
$=
означает «заканчивается на», и, соответственно, данный селек- тор дает указание выбрать все ссылки, значение атрибута href которых закан- чивается на
.pdf
. Вы можете создать аналогичные стили и для других типов файлов:
a[href$='.zip'] /* ZIP-архив */
a[href$='.doc'] /* Word-документ */
Далее вы увидите примеры этого метода.
Обучающий урок 1: стилизация ссылокВ этом обучающем уроке мы потренируемся в
стилизации ссылок разнообразными способами, в том числе путем добавления изображений-ролловеров и фоновых рисунков.
332
Часть 2. Применение CSS
Чтобы начать обучающий урок, вы должны загрузить файлы, содержащие учеб- ный материал. Как это сделать, описывается в конце гл. 2. Файлы текущей обуча- ющей программы находятся в папке
09
Простейшее форматирование ссылок
Начнем с простого форматирования ссылок.
1. Запустите браузер и откройте файл веб-страницы links.html в папке
09\links
Эта страница содержит множество ссылок (обведены на рис. 9.9), которые ука- зывают на другие веб-страницы текущего или иных сайтов, а также обозначают адреса электронной почты. Сначала изменим цвет ссылок данной страницы.
Рис. 9.9. Простейшая веб-страница со стандартной для браузеров стилизацией
Глава 9. Приводим в порядок навигацию сайта
3332. Откройте файл links.html в HTML-редакторе и поместите указатель между открывающим и закрывающим тегами
Этот стиль будет применяться ко всем тегам
на странице. С него хорошо начинать, поскольку он устанавливает общий внешний вид для ссылок на стра- нице. Вы добавите больше стилей, которые позволят вам форматировать ссыл- ки в определенных областях страницы. Теперь пришло время удалить это на- доевшее подчеркивание под ссылкой.
4. Добавьте в только что созданный стиль
#main a свойство text-decoration: none;
Он убирает подчеркивание, но в то же время ссылка на веб-странице становит- ся менее заметной. Не забывайте, что ссылки всегда должны визуально выде- ляться на общем фоне, чтобы у посетителей сайта не возникало сомнений в том, что это именно ссылки и на них можно щелкнуть кнопкой мыши.
На рис. 9.9 часть ссылок указывает на одни страницы сайта, часть — на другие и одна ссылка обозначает адрес электронной почты. В обучающем уроке мы отформатируем каждый тип по-разному.
5. Добавьте в стиль a
свойство font-weight: bold;
Теперь ссылки отображаются полужирным шрифтом (для остального текста он также может быть установлен). Далее заменим подчеркивание на выделение другим способом, но сделаем это творчески, используя вместо свойства text- decoration границы.
6. Добавьте свойство border
, при этом стиль должен выглядеть следующим обра- зом:
a {
color: #207EBF;
text-decoration: none;
font-weight: bold;
Скачать 20.28 Mb.