'

Лекция 2-05

Понравилась презентация – покажи это...





Слайд 0

Лекция 2-05 Ссылки и навигация


Слайд 1

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


Слайд 2

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


Слайд 3

Удаление подчеркивания ссылок (2) Свойство text-decoration может принимать пять значений: 4


Слайд 4

Пример. Подчеркивание ссылок <ul> <li><a href=Index.html>Домой</a></li> <li><a href=Next.html>Следующая</a></li> </ul> 5 <html> <head> <style> a:link, a:visited { text-decoration: none; } </style> </head> <body> <ul> <li><a href=Index.html>Домой</a></li> <li><a href=Next.html>Следующая</a></li> </ul> </body> </html>


Слайд 5

Изменение цвета ссылок в разных секциях страницы (1) При оформлении ссылки в основном тексте и в элементах навигации, сначала секции страницы помещаются в элементы div с разными значениями атрибутов: <div id=nav> <ul> <li><a href=Index.html>Домой</a></li> <li><a href=Next.html>Следующая</a></li> </ul> </div> <div id=content> <ul> <li><a href=Index.html>Домой</a></li> </ul> </div> 6


Слайд 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


Слайд 7

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


Слайд 8

Меняющиеся курсоры (2) Свойство cursor может принимать следующие значения: 9


Слайд 9

Создание навигационных текстовых меню (1) Для того, чтобы создать меню, прежде всего надо разметить список ссылок в маркированном списке так, чтобы они были включены в элемент-контейнер div с атрибутом id: <div id=nav> <ul> <li><a href=Index.html>Домой</a></li> <li><a href=Next.html>Следующая</a></li> </ul> </div> Далее используется свойство border для создания основной структуры дизайна: 10


Слайд 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


Слайд 11

Вставка подменю в вертикальное меню (1) Основное навигационное меню дополняется в нужном пункте списка вложенным маркированным списком: <div id=nav> <ul> <li><a href=Index.html>Домой</a> <ul> <li><a href=Index.html>Главная</a></li> </ul> </li> <li><a href=Next.html>Следующая</a></li> </ul> </div> 12


Слайд 12

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


Слайд 13

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


Слайд 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


×

HTML:





Ссылка: