Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
184
Добавлен:
10.05.2015
Размер:
637.95 Кб
Скачать

32. Оформление списков и ссылок

В данной лекции рассматриваются основные приемы оформления списков и ссылок. Показываются основные типы списков: упорядоченные и неупорядоченные, вертикальные и горизонтальные, а также вложенные списки. Рассматриваются состояния ссылок, ожидания пользователей относительно ссылок, оформление ссылок с помощью CSS

Введение

Многие элементы на Web-странице являются в некоторой степени "великодушными" с точки зрения дизайна - если они не "вполне правильные", то это не имеет большого значения. В случае списков и ссылок совершенно другая история - если записать их неправильно, то это может создавать серьезные проблемы для людей, пытающихся использовать Web-сайт.

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

В этой статье мы рассмотрим базовые навыки, которые нужны для создания надежного оформления списков и ссылок. Мы обсудим также некоторые способы уклонения от основных ловушек этих элементов и создания результата, который будет работать в различных браузерах, и будет доступен пользователям с функциональными недостатками.

В этой статье используется несколько примеров, которые будут рассмотрены в ходе изложения.

Статья имеет следующее содержание:

Оформление списков

Базовые маркеры и числа

Специальные маркеры, использующие изображения

Поля и заполнение списков

Неупорядоченные списки

Упорядоченные списки

Итак, что делать?

Использование list-style-position

Что насчет списков определений?

Вложенные списки

Горизонтальные списки

Ложные столбцы

Унаследованные браузеры

Заключение по спискам

Оформление ссылок

Рассмотрение состояния ссылок

Как эволюция браузеров задает ожидания

Ожидания пользователей

Используйте цвет с осторожностью

Приступим к делу: CSS

Оформление состояния ссылок в правильном порядке

Управление поведением по умолчанию

Подчеркивание

Создание рамки

Пример: восстановление значений по умолчанию браузера Netscape

Ложные подчеркивания с помощью border-bottom

Оформление, которое не полагается на цвет

Иконки на ссылках

Объединяем все вместе - простое навигационное меню

Заключение

Контрольные вопросы

Дополнительное чтение

Оформление списков

Рассмотрим, прежде всего, основы оформления списков с помощью CSS, прежде чем переходить к рассмотрению более сложных методов.

Базовые маркеры и числа

Фундаментальным вопросом рассмотрения при создании оформления списка является форма маркера или способ нумерации, который желательно использовать. Можно также вообще не использовать маркеры и числа. Как было показано в статье 16 о списках HTML, существует множество различных возможностей, задаваемых с помощью свойства list-style-type.

Например, чтобы задать для всех неупорядоченных списков на сайте квадратные маркеры, используйте следующий код CSS:

ul li {

list-style-type: square;

}

который создает что-то подобное изображенному на рис. 32.1:

Рис. 32.1.  Неупорядоченный список с квадратными маркерами

Несколько распространенных типов списков показаны на рис. 32.2:

Рис. 32.2.  Распространенные стили списков

Существуют также и другие менее распространенные возможности.

Отметим, что маркеры и цифры будут изображаться цветом, который задается или наследуется элементом li. Если требуется, чтобы маркер имел цвет отличный от текста, нужно использовать изображение, или решить проблему с помощью других элементов в пунктах списка (это можно легко сделать, например, когда все пункты являются ссылками).