ЛЕКЦИЯ 2-05 Ссылки и навигация

Введение Без ссылок Web-пространство потеряет смысл. Ссылки позволяют отслеживать информацию, переходя с одной Web-страницы на другую и от одной идеи к другой независимо от местонахождения сервера информационного сайта. 2

Удаление подчеркивания ссылок (1) Для того чтобы удалить стандартное подчеркивание ссылок используется свойство text- decoration с селектором псевдокласса для непосещаемых и посещаемых ссылок: a:link, a:visited { text-decoration: none; } Псевдокласс :link применяется к ссылкам, которые пользователь еще не посетил. Псевдокласс :visited соответствует ссылкам, уже посещенным пользователем. 3

Удаление подчеркивания ссылок (2) Свойство text-decoration может принимать пять значений: 4 ЗначениеРезультат underlineЛиния располагается под текстом overlineЛиния располагается над текстом blinkТекст мигает line-throughЛиния перечеркивает текст noneТекст никак не выделяется

Пример. Пример. Подчеркивание ссылок Домой Следующая 5 a:link, a:visited { text-decoration: none; } Домой Следующая

Изменение цвета ссылок в разных секциях страницы (1) При оформлении ссылки в основном тексте и в элементах навигации, сначала секции страницы помещаются в элементы div с разными значениями атрибутов: Домой Следующая Домой 6

Изменение цвета ссылок в разных секциях страницы (2) Затем используются селекторы потомка вместе с селекторами ID, для того чтобы отделить разные стили ссылок, предназначенные для разных частей Web- страницы: #nav a:link { color: blue;} #nav a:visited { color: purple;} #content a:link { color: black;} #content a:visited { color: yellow;} 7

Меняющиеся курсоры (1) Чтобы заменить стандартный курсор, отображаемый, когда указатель мыши наведен на ссылку, используется свойство cursor: a:link, a:visited { cursor: move; } 8

Меняющиеся курсоры (2) Свойство cursor может принимать следующие значения: 9 ЗначениеОписание autoКурсор меняется на изображение, определенное Web- обозревателем moveПоказывает, что элемент можно переместить; иногда визуализируется как перекрестье со стрелками на концах линий или в виде руки с поднятыми пятью пальцами textПоказывает, что можно выделить текст; иногда изображается как вертикальная линия, обычно применяемая в программах обработки текста waitПоказывает, что компьютер занят; иногда отображается в виде песочных часов helpПоказывает, что доступна информация или справка, часто по адресу, на который указывает ссылка; иногда отображается как знак вопроса или стрелка со знаком вопроса

Создание навигационных текстовых меню (1) Для того, чтобы создать меню, прежде всего надо разметить список ссылок в маркированном списке так, чтобы они были включены в элемент-контейнер div с атрибутом id: Домой Следующая Далее используется свойство border для создания основной структуры дизайна: 10

Создание навигационных текстовых меню (2) #nav { border-top: 1px solid black; border-right: 1px solid red; border-left: 1px solid red; padding: 0; margin-bottom: 1em; color:black; width: 8 em; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav ul li { margin: 0; border-bottom: 1px solid black; } 11

Вставка подменю в вертикальное меню (1) Основное навигационное меню дополняется в нужном пункте списка вложенным маркированным списком: Домой Главная Следующая 12

Вставка подменю в вертикальное меню (2) После задается некоторое поле слева от вложенного маркированного списка с помощью селектора потомка: #nav ul ul { background-color: grey; margin-left: 10 px; } 13

Создание горизонтальных навигационных меню (1) Данное меню создается по принципу вертикального меню, но при задании правил CSS, надо обязательно указать свойство float для пунктов меню: 14

Создание горизонтальных навигационных меню (2) #nav { border: 1px solid black; padding: 0; margin-bottom: 1em; color:black; width: 50%; background-color: grey; } #nav ul { list-style: none; margin: 1; padding: 0; float: left; } #nav ul li { margin: 3; float: left; border-right: 1px solid black; } 15