В этом практикуме мы потренируемся в форматировании ссылок разнообразными способами, в том числе путем добавления изображений-ролловеров и фоновых рисунков. Чтобы начать обучение, вы должны иметь в распоряжении файлы с учебным материалом. Файлы текущего практикума находятся в папке с именем 09.

Начнем с простого форматирования ссылок.

1. Запустите браузер и откройте файл веб-страницы links.html из папки 09\links. Эта страница содержит множество ссылок, которые указывают на другие веб-страницы текущего или иных сайтов, а также ведут на адреса электронной почты.
2. Добавьте атрибут download к тегу <a> - ссылке на страницу "storage/template.doc". Откройте в браузере, теперь, по нажатию на ссылку 'Корпоративный шаблон', у вас откроется окно закрузки документа. При наличии атрибута download браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки. У ссылки, ведущей на страницу https://www.google.com/ добавьте атрибут target со значением _blank. Откройте в браузере, по нажатию на ссылку Открыть Google поисковик откроется в новом окне.

Теперь изменим цвет ссылок данной страницы. 3. Откройте файл links.html в редакторе HTML-кода и поместите указатель между открывающим и закрывающим тегами элемента <style>. Эта веб-страница уже имеет внешнюю таблицу стилей, придающую ей какое-то базовое форматирование и содержащую элемент style внутренней таблицы.

ПРИМЕЧАНИЕ Вы разместите стили для этого упражнения во внутренней таблице, чтобы было легче писать код и просматривать страницу. Когда все будет готово, рекомендуется переместить стили во внешнюю таблицу стилей.

4. Добавьте во внутреннюю таблицу новый стиль:

   <style>
       a {
           color: #207EBF;
       }
   </style>
   

Он будет применяться ко всем элементам a на странице. С него хорошо начинать, поскольку он устанавливает общий внешний вид для ссылок на странице. Вы добавите больше стилей, которые позволят вам форматировать ссылки в определенных областях страницы. Теперь пришло время удалить это надоевшее подчеркивание под ссылкой. 5. Добавьте в только что созданный стиль свойство text-decoration: none;. Он убирает подчеркивание, но в то же время ссылка на веб-странице становится менее заметной. Не забывайте, что ссылки всегда должны визуально выделяться на общем фоне, чтобы у посетителей сайта не возникало сомнений в том, что это именно ссылки и на них можно щелкнуть кнопкой мыши. 6. Добавьте в стиль a свойство font-weight: bold;. Теперь ссылки отображаются полужирным шрифтом (для остального текста он также может быть установлен). Далее заменим подчеркивание на выделение другим способом, но сделаем это творчески, используя вместо свойства text-decoration границы. 7. Добавьте свойство border, чтобы стиль принял следующий вид: a { color: #207EBF; text-decoration: none; font-weight: bold; border-bottom: 2px solid #F60; } Теперь ссылки выделены, а использование границ вместо обычного подчеркивания позволило изменить стиль, цвет и толщину линий. А сейчас вы измените вид посещенных ссылок. 8. Добавьте псевдокласс :visited для посещенных ссылок следующим образом: a:visited { color: #6E97BF; } Стиль изменяет внешний вид посещенных ссылок на более светлый с серым оттенком — это искусный способ отвлечь внимание от уже посещенной страницы. Если вы просматриваете страницу, щелкните на одной из ссылок (попробуйте, например, одну из тех, что находятся в центре страницы), а затем вернитесь к странице links. html. Вы должны увидеть, что ссылка стала светлее. Но вы также заметите, что остается выделение полужирным и все еще присутствует оранжевое подчеркивание, которое вы назначили стилем в шаге 7. Это пример каскадности в действии: стиль a:visited более специфичен, чем простой селектор, поэтому его свойство цвета переопределяет тот цвет, который был назначен стилем. Сейчас добавим эффект ролловера, чтобы фоновый цвет ссылки изменялся при наведении на нее указателя мыши. 9. Добавьте в таблицу стилей псевдокласс :hover: a:hover { color: #FFF; background-color: #6E97BF; border-bottom-color: #6E97BF; } Этот псевдокласс применяется только на время, пока указатель мыши находится поверх ссылки. Свойство интерактивности эффекта ролловера позволяет посетителям узнать, что выполняется какое-то действие.

Ссылка на адрес электронной почты в нижней части веб-страницы ничем не отличается от других ссылок на странице. Поскольку значение mailto: указывает на адрес электронной почты, при щелчке на ней посетитель не перейдет на другую веб-страницу, а запустит почтовую программу. Чтобы обеспечить визуальное выделение этой ссылки, добавим небольшой значок почтового конверта.

1. Добавьте во внутреннюю таблицу стилей файла links.html селектор потомков:

   a[href^="mailto:"] {
       color: #666666;
       border: none;
       background: url(images/email.gif) no-repeat left center;
   }
   

   Здесь используется расширенный селектор атрибута, выбирающий любые ссылки, начинающиеся со значения mailto: (то есть он выбирает ссылки на адреса электронной почты). Ссылке назначен серый цвет, а код border: none убирает подчеркивание, определенное в шаге 6. Свойство background добавляет фоновое изображение с левой стороны, а параметр no-repeat обеспечивает однократное отображение рисунка. Здесь трудность состоит в том, что фоновое изображение (значок конверта) располагается на заднем плане позади текста ссылки, и он становится трудночитаемым.
2. Добавьте в только что созданный стиль атрибута левый отступ размером 20 пикселов:

   padding-left: 20px;
   

   Помните, что отступ добавляет промежуток между содержимым и границей элемента, поэтому установка небольшого отступа слева смещает текст ссылки на 20 пикселов, оставляя фоновое изображение на месте. И последний штрих: нужно немного отодвинуть всю ссылку от упоминания об авторском праве.
3. Добавьте в стиль поле слева размером 10 пикселов. Должен получиться следующий стиль:

       color: #666666;
       border: none;
       background: url(images/email.gif) no-repeat left center;
       padding-left: 20px;
       margin-left: 10px;
   }
   

Эта небольшая поправка обеспечивает визуальное отделение изображения-значка почтовой ссылки от упоминания об авторском праве. Таким образом, ссылка воспринимается посетителем как сочетание значка с текстом.

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

1. Добавьте во внутреннюю таблицу стилей веб-страницы links.html следующий код:

   .resources a {
       border-bottom: none;
   }
   

   Поскольку все ссылки, которые нужно отформатировать, находятся внутри элемента div с классом resources, селектор потомков .resources a воздействует только на эти ссылки. Стиль избавляет от подчеркивания, которое было добавлено в общем стиле ранее. Далее вы добавите значок, размещаемый рядом с внешними ссылками.
2. Добавьте еще один стиль в конец внутренней таблицы стилей веб-страницы links.html:

   .resources a[href*='://'] {
       background: url(images/globe.png) no-repeat right top;
   }
   

   В этом стиле селектора потомков используется расширенный селектор атрибута. В основном он воздействует на любую ссылку, которая содержит символы :// (но только на ту, которая находится внутри элемента с классом resources). Как и стиль ссылки на адрес электронной почты, который вы создали ранее, этот стиль добавляет фоновое изображение. Он помещает рисунок в правую часть ссылки. Тем не менее у этого стиля есть проблема, аналогичная проблеме стиля ссылки на адрес электронной почты, — изображение появляется позади текста ссылки. Решение такое же — нужно добавить отступы, чтобы переместить изображение в нужное место. В этом случае, однако, вместо левого отступа вы добавите правый (поскольку значок появляется в правой части ссылки). Кроме того, так как все ссылки в разделе ресурсов будут иметь значки схожих размеров, вы можете уменьшить объем кода, добавив отступы с помощью стиля .resources a, созданного на шаге 1.
3. Отредактируйте стиль .resources a так, чтобы он выглядел следующим образом:

   .resources a {
       border-bottom: none;
       padding-right: 22px;
   }
   

   Если вы сохраните страницу и просмотрите ее в браузере, то увидите маленькие значки с земным шаром в правой части двух нижних ссылок боковой панели. Теперь отформатируем другие ссылки.
4. Добавьте еще три стиля во внутреннюю таблицу стилей:

   .resources a[href$='.pdf'] {
       background: url(images/acrobat.png) no-repeat right top;
   }
   .resources a[href$='.zip'] {
       background: url(images/zip.png) no-repeat right top;
   }
   .resources a[href$='.doc'] {
       background: url(images/word.png) no-repeat right top;
   }
   

   Эти три стиля проверяют, каким значением заканчивается атрибут href, идентифицируют ссылки как файлы Adobe Reader (.pdf), ZIP-архивы (.zip) или документы Word (.doc) и назначают различные значки в каждом конкретном случае.
5. Наконец, добавьте состояние наведения указателя мыши для ссылок на ресурсы:

   .resources a:hover {
       color: #000;
       background-color: rgba(255,255,255,.8);
   }
   

   Этот стиль изменяет цвет текста и добавляет цвет фона.

На этом практическом занятии мы превратим простой список ссылок во впечатляющую панель навигации с эффектом ролловера и выделением нажатой кнопки текущего раздела сайта.

1. Откройте файл веб-страницы nav_bar.html из папки 09\nav_bar в редакторе HTML-кода. Как видите, в этом файле содержится совсем короткий исходный код. Здесь присутствует внутренняя таблица со сбросом стандартных стилей CSS и одним правилом, определяющим простейшее форматирование тела веб-страницы. HTML-код создает маркированный список, состоящий из шести ссылок. Первым шагом будет добавление HTML-кода, обеспечивающего целенаправленное форматирование ссылок списка средствами каскадных таблиц стилей.
2. Найдите открывающий тег <ul> и добавьте в него код class="mainNav" следующим образом: <ul class="mainNav"> Атрибут class назначает этот список основной областью навигации. Мы будем использовать его для создания селекторов потомков, избирательно форматирующих только ссылки этого списка (а не все ссылки веб-страницы).
3. Добавьте во внутреннюю таблицу после стиля body следующий код:

   .mainNav {
       margin: 0;
       padding: 0;
       list-style: none;
   }
   

   Этот стиль будет применен лишь к элементу с классом mainNav, в данном случае элементу ul. Он удаляет отступ и маркеры, которые браузер добавляет в маркированные списки. Теперь приступим к форматированию ссылок.
4. Добавьте селектор потомков для форматирования ссылок списка:

   .mainNav a {
       color: #000;
       font-size: 11px;
       text-transform: uppercase;
       text-decoration: none;
   }
   

   Этот стиль определяет базовое форматирование текста ссылок: устанавливает цвет и размер шрифта, определяет все буквы как прописные и удаляет линию подчеркивания. Сейчас придадим ссылкам вид кнопок.
5. Добавьте в стиль .mainNav a свойства border и padding:

   border: 1px dashed #999;
   padding: 7px 5px;
   

   Теперь при просмотре веб-страницы в браузере вы заметите пару проблем: границы накладываются друг на друга, а ссылки имеют различную ширину. Это происходит потому, что элемент a является строчным и ширина ссылки равна длине ее текста. Кроме того, верхний и нижний отступы не обеспечивают увеличения высоты строчным элементам, поэтому границы накладываются друг на друга. Решить эти проблемы со ссылками можно путем изменения их способа отображения браузером.
6. Добавьте свойство display: block; в стиль .mainNav a. Мы изменяем параметры отображения элемента a таким образом, чтобы он обрабатывался браузером как блочный элемент (например, абзац текста), с расположением ссылок в виде списка, в точности одна над другой. Осталась единственная проблема — ссылки растянуты по всей ширине окна браузера — слишком много для кнопок. Исправим ситуацию, ограничив ширину элемента ul соответствующим стилем.
7. Во внутренней таблице найдите стиль .mainNav и добавьте в него свойство width: 175px;. .mainNav { margin: 0; padding: 0; list-style: none; width: 175px; } При ширине списка 175 пикселов ссылки по-прежнему слишком широки, хотя и ограничиваются шириной элемента-контейнера (ul). В большинстве случаев список ссылок заключен в какой-либо элемент разметки (например, боковую панель), для которого уже определена ширина, поэтому можете пропустить этот шаг. Сейчас перейдем к самому интересному.
8. Добавьте в стиль .mainNav a свойства фона следующим образом: .mainNav a { color: #000; font-size: 11px; text-transform: uppercase; text-decoration: none; border: 1px dashed #999; padding: 7px 5px; display: block; background-color: #E7E7E7; background-image: url(images/nav.png); background-repeat: no-repeat; background-position: 0 2px; } Эти строки кода изменяют цвет фона ссылок на серый и устанавливают одиночное изображение с левой стороны каждой кнопки. Здесь тоже нужно кое-что исправить: текст ссылки накладывается на значок, а линии границ между кнопками имеют толщину, равную 2 пикселам (теоретически границы имеют толщину 1 пиксел, но сливающиеся воедино линии соседних ссылок образуют линию толщиной 2 пиксела). ПРИМЕЧАНИЕ Используя сокращенную запись свойства background, можно изменить код на шаге 8 на следующий: background: #E7E7E7 url(images/nav.png) no-repeat 0 2px;.
9. Удалите верхнюю границу и измените отступ в стиле .mainNav a, чтобы его код выглядел следующим образом: .mainNav a { color: #000; font-size: 11px; text-transform: uppercase; text-decoration: none; border: 1px dashed #999; border-bottom: none; padding: 7px 5px 7px 30px; display: block; background-color: #E7E7E7; background-image: url(images/nav.png); background-repeat: no-repeat; background-position: 0 2px; } Выглядит неплохо: текст каждой ссылки отделен от значка, границы выделяются. Однако нижняя граница последней ссылки исчезла. Существует несколько способов разобраться с этим. Один состоит в том, чтобы применить нижнюю границу к элементу ul, содержащему список ссылок (поскольку этот элемент не имеет отступов, нет промежутка, отделяющего верх элемента ul от верхней стороны этой первой ссылки). Второй способ заключается в использовании псевдокласса :last-of- type. Вам нужно выделить ссылку, которая находится внутри последнего элемента списка на панели навигации, и добавить к ней нижнюю границу.
10. Между стилями .mainNav и .mainNav a добавьте следующий стиль: .mainNav li:last-of-type a { border-bottom: 1px dashed #999; } Эти стили селектора потомка форматируют ссылку (а), расположенную внутри последнего элемента списка (li:last-of-type) или списка навигации (.mainNav). Вот и все, мы создали простейшую панель навигации с применением границ, отступов, фонового цвета и изображений. Добавление ролловеров и выделение текущего раздела сайта Пришло время усовершенствовать панель навигации и придать ей некоторую интерактивность. Во-первых, обеспечим кнопкам панели навигации эффект ролловера. Они должны изменять свой вид, акцентируя внимание посетителя на том, какую кнопку он собирается нажать. Неплохо было бы оповещать посетителя, в каком разделе (на какой странице) сайта он находится. Мы можем обеспечить созданной панели навигации автоматическую интерактивность. Она будет изменять свой стиль в соответствии с выбранным разделом страницы. Звучит совсем просто, но в действительности это потребует некоторой разметки и настроек, как вы увидите в последующих шагах. Эффект ролловера реализовать легко, но начнем по порядку.
11. Добавьте в конце таблицы стилей файла nav_bar.html следующий стиль: .mainNav a:hover { font-weight: bold; background-color: #B2F511; background-position: 3px 50%; } Он определяет внешний вид ссылки-кнопки в состоянии наведения указателя мыши. Стиль изменяет шрифт текста кнопки с обычного на полужирный, а также цвет фона на ярко-зеленый. Кроме того, он использует метод CSS-спрайтов, упоминавшийся ранее. То же самое изображение применяется на шаге 8 в прошлом разделе — оно в действительности содержит три различных значка. В этом случае изображение центрируется внутри кнопки, отображая средний значок файла. Теперь при появлении указателя мыши поверх любой кнопки она моментально изменяет свой вид (откройте веб-страницу в своем браузере). Теперь сделаем панель навигации более информативной, выделив кнопку, соответствующую текущему разделу, страницу которого открыл посетитель сайта. Чтобы сделать это, нам потребуется идентифицировать в HTML-коде панели навигации две вещи: раздел, к которому принадлежит страница и разделы, на которые указывает каждая ссылка. В нашем примере предположим, что открыта домашняя страница.

ПРИМЕЧАНИЕ Другим вариантом будет создание класса, который изменяет внешний вид ссылки, представляющей раздел страницы. Для веб-страницы гороскопа ссылка панели навигации может выглядеть следующим образом: Гороскопы.

2. Найдите открывающий тег <body> и добавьте в него класс class="home": <body class="home"> Теперь, когда мы знаем, какому разделу сайта принадлежит текущая открытая страница, можно использовать селектор потомков для создания конкретного стиля, который будет применен к веб-странице раздела «Сенсации». Далее мы должны маркировать разделы, на которые указывает каждая ссылка-кнопка, что достигается путем добавления классов.
3. Найдите в HTML-коде панели навигации ссылку «Главная» и добавьте в нее класс class="homeLink", чтобы код элемента выглядел следующим образом: <a href="proxy.php?url=https%3A%2F%2Fgithub.com%2Findex.html" class="homeLink">Главная</a> Этот класс определяет ссылку, предоставляя возможность создания стиля, который будет применен только к ней. Естественно, нам потребуется добавить классы для всех ссылок панели навигации.
4. Повторите шаг 3 для каждой из ссылок, используя следующие классы: featureLink, expertLink, quizLink, projectLink и horoscopeLink. С HTML-кодом закончили. Настало время создать CSS-код. Теперь у нас есть маркированные страница и ссылка, и мы можем создать селектор потомков, выделяющий кнопку-ссылку «Главная».
5. Добавьте в таблицу стилей веб-страницы следующий код: .home .homeLink { background-color: #FFFFFF; background-position: 97% 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Мы уже рассматривали эти свойства ранее. Снова вы используете метод CSS- спрайтов для управления позицией фонового изображения. На этот раз изображение смещается на 97 % вправо, а его нижняя часть помещается в нижнюю часть кнопки. В данном случае наибольший интерес представляет селектор .home .homeLink. Это очень специфичный селектор, применяемый только к ссылке с классом homeLink, которая также заключена внутрь элемента body с классом home. Если вы измените класс страницы, например, на quiz, с кнопки-ссылки раздела «Главная» исчезнет выделение. Просмотрите веб-страницу в браузере, чтобы увидеть результат: теперь ссылка «Главная» имеет белый фон и значок скрепки. Чтобы проделать все то же самое с остальными ссылками, вы должны немного расширить селектор.
6. Отредактируйте селектор только что созданного стиля: .home .homeLink, .feature .featureLink, .expert .expertLink, .quiz .quizLink, .project .projectLink, .horoscope .horoscopeLink{ background-color: #FFFFFF; background-position: 97% 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Конечно, получился довольно объемный CSS-код. Этот стиль теперь адресуется ко всем ссылкам панели навигации, но только при выполнении определенных условий. Если вы в дальнейшем измените класс элемента body, например, на quiz, то ссылка раздела «Мистификации» приобретет такое же форматирование, каким была выделена ссылка раздела «Сенсации». Теперь пришло время проверить результаты работы.
7. Измените атрибут class элемента body, присвоив ему значение feature, следующим образом: <body class="feature"> Просмотрев веб-страницу, вы увидите, что ссылка «Сенсации» теперь выделена белым цветом фона и значком скрепки. Весь секрет в том, что нужно изменить атрибут class элемента body, чтобы указать, к какому разделу сайта принадлежит страница. Например, для страницы гороскопа измените атрибут класса body на class="horoscope", а для главной страницы используйте атрибут class="home".

ПРИМЕЧАНИЕ Готовы продолжить форматирование? Попытайтесь добавить эффект ролловера, чтобы закончить стиль, созданный на шаге 6 (используйте псевдокласс :hover в качестве компонента селектора: .quiz .quizLink:hover). Попробуйте также добавить другое изображение для ссылки главной страницы (можете использовать файл home.png из папки images).

Предположим, вы хотите создать горизонтальную панель навигации в верхней части веб-страницы. Никаких проблем — большую часть работы мы уже выполнили. Чтобы расположить кнопки горизонтально в одну строку, необходимо немного изменить уже созданную веб-страницу (мы будем дорабатывать файл nav_bar.html, поэтому, если вы хотите сохранить вертикальную панель навигации, прежде чем продолжить, сделайте копию файла).

1. Убедитесь в том, что вы выполнили все шаги по созданию вертикальной панели навигации и откройте файл nav_bar.html в редакторе HTML-кода. Сейчас вы увидите, как легко можно изменить ориентацию панели. Сначала подчистим кое-что из того, что мы уже сделали. Вам нужно удалить свойство width, которое вы установили для элемента ul ранее. Оно препятствует тому, чтобы навигационные кнопки охватывали всю длину страницы.
2. Найдите стиль .mainNav и удалите из него свойство width: 175px;. Теперь приведем секрет преобразования вертикальной панели навигации в горизонтальную.
3. Добавьте в таблицу новый стиль (сразу после .mainNav):

   .mainNav li {
       float: left;
       width: 14em;
   }
   

   Стиль применяется к элементу li (представляющему собой элементы списка, каждый из которых содержит свою ссылку). Первая команда устанавливает для элемента выравнивание по левому краю. Таким образом, каждый последующий элемент li располагается с правой стороны предыдущего. Кроме того, устанавливая ширину элемента li, мы одновременно определяем ширину для всех кнопок панели навигации. В данном случае значение 14em обеспечивает достаточный размер, чтобы вместить самый длинный текст названия ссылки. Если будет необходимо увеличить длину, вы должны будете увеличить это значение. При просмотре веб-страницы в браузере вы увидите, что с панелью навигации в основном все в порядке. Требуются только небольшие корректировки. Нижняя граница под кнопками отсутствует. Кроме того, поскольку левая граница кнопки расположена рядом с границей ссылки, их левые и правые границы сливаются между собой, образуя линии толщиной 2 пиксела. Сейчас мы решим эти проблемы.
4. В стиле .mainNav a измените свойство border-bottom: none; на border-right: none;: Это действие приводит к удалению левых границ кнопок, чтобы они не удваивались, и в то же время к нижнему краю добавляется граница. Однако теперь граница с правой стороны последней кнопки на панели навигации исчезла. Чтобы исправить эту проблему, вы можете сделать то же, что делали в предыдущей части практикума, — использовать селектор :last-of- type.
5. Измените свойство border-bottom стиля .mainNav li:last-of-type a на border-right:

   .mainNav li:last-of-type a {
       border-right: 1px dashed #999;
   }
   

   Это изменение добавит правую границу, но только к последней ссылке на панели навигации. Наконец, скрепки, выровненные по правому краю выбранной кнопки, выглядят странно. Сейчас вы измените их положение, разместив у левого края кнопки.
6. Найдите стиль выбранной кнопки, созданный в шаге 6 (стиль с длинным селектором). Измените координаты его свойства background с 97% 100% на 3px 100%. Теперь стиль должен выглядеть следующим образом: .home .homeLink, .feature .featureLink, .expert .expertLink, .quiz .quizLink, .project .projectLink, .horoscope .horoscopeLink{ background-color: #FFFFFF; background-position: 3px 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Просмотрите веб-страницу в браузере, и вы обнаружите, что горизонтальная панель навигации полностью работоспособна и замечательно выглядит. Окончательную версию этого урока вы найдете в файле 09_finished/links/ links.html.

ПРИМЕЧАНИЕ Возможно, вы захотите центрировать текст кнопок-ссылок панели навигации. Для этого нужно сделать две вещи: добавить в стиль .mainNav a свойство text-align: center; и изменить свойство left-padding этого же стиля, чтобы текст был расположен точно по центру кнопок.