Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Дизайн текста 3.5: Вложенные списки, графические маркеры. Вложенные неупорядоченные списки




ПОИСК по сайту


    Полный список статей
/ Дизайн текста 3.5 / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Хочу напомнить (чтоб не было лишних вопросов), что упомянутые в статьях «Дизайн текста» элементы HTML используются для стандартного способа отображения содержимого. Здесь не рассматриваются варианты нестандартной вёрстки страницы с помощью этих элементов.

Вложенные неупорядоченные списки

В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того, чтобы показать, что список является продолжением абзаца. Для того, чтобы поднять список повыше, в CSS была добавлена строка «margin: -16px 0 16px 0;» для элемента ul. Теперь, для внутренних списков нужно убрать этот отрицательный отступ:
ul ul {
margin: 0;
}

По-умолчанию, у списка третьего уровня и глубже в качестве маркеров используются квадратики. Если у нас маркеры изначально были кружочками, то переход на угловатые формы слишком контрастен. Если уж что-то использовать, то что-то одно — либо кружочки, либо квадратики. Поэтому, я рекомендую чередовать закрашенный кружочек и незакрашенный или обходиться только одним квадратиком.

Как правило списки не составляются слишком глубокими. Если иерархия многоуровневая, то стоит подумать над тем, чтобы заменить элементы списка верхнего уровня, например, на заголовки и разделить список на блоки с этими заголовками.

Отступы внутренних элементов должны быть такими, чтобы маркеры на несколько уровней располагались на одной линии. Идеально, когда наклон линии равен 45°.

Что характерно: В Firefox при установленном шрифте Times New Roman 16px (по-умолчанию) маркеры выглядят как
ромбики. Установите размер 15px и получите нормальные кружочки.

В списке третьего и более уровня размер шрифта можно уменьшить на 1—2 пикселя, если шрифт не уменьшится до нечитаемого.

Вложенные упорядоченные списки

Хороший тон — использование не больше трёх различных вариантов нумерации элементов списка. Поскольку в качестве маркеров используются цифры или буквы, то они явно менее компактны, чем маркеры неупорядоченных списков, поэтому придётся отступы вложенных списков сделать побольше.

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

Римские цифры

Использование римских цифр должно быть серьёзно оправдано. Эти цифры можно использовать для нумерации главных разделов документов и тезисов, а так же глав различных публикаций. Поскольку римские цифры в CSS даются нам в двух вариантах (прописные и строчные), хорошо использовать их вместе. Прописные — для верхнего уровня, строчные — для второго. Не рекомендую вместе с римскими цифрами использовать латинские, т. к. это может вызвать путаницу (римские цифры состоят из латинских букв). Лучше для списков более глубокого уровня использовать арабские цифры.

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

Списки с графическими маркерами

Существует возможность вместо стандартных маркеров неупорядоченных списков использовать свои картинки. Стандартно это реализуется с помощью свойства CSS list-style-image. Этот вариант не рекомендую использовать, поскольку в разных браузерах картинка будет отображаться с разными отступами. Лучшее решение — вставка картинки перед текстом в элементе списка в качестве фона. В данном случае, отступ (padding) нужно делать для элемента списка. Картинку следует располагать на уровне строчного символа или чуть-чуть выше.

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

Изменение формы должно быть такое, чтобы визуально маркеры отличались по весу символа. Закрашенный треугольник выглядит тяжелее незакрашенного, а стрелочка третьего уровня является отсечённой частью незакрашенного треугольника и выглядит легче.

Пример вёрстки упомянутых в статье элементов

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

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

В испытаниях мог принять участие любой, невзирая на:

  • возраст:
    • молодые:
      • младенцы,
      • дети:
        • 1—5 лет,
        • 5—10 лет,
        • 10—14 лет;
      • подростки,
      • юноши и девушки;
    • взрослые,
    • старые;
  • пол:
    • мужчины,
    • женщины;
  • рост;
  • вес;
  • происхождение.

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

Адептам предстоит пройти три этапа испытания:

  1. Защита:
    1. Обнаружение:
      1. Первый уровень,
      2. Второй уровень,
      3. Эксперт-уровень:
        1. Part-contact,
        2. Full-contact;
    2. Предотвращение,
    3. Рассредоточение,
    4. Уклонение,
    5. Активные ответные меры;
  2. Атака,
  3. Стратегическое планирование.

Списки с графическими маркерами

В испытаниях мог принять участие любой, невзирая на:

  • возраст:
    • молодые:
      • младенцы,
      • дети,
      • подростки,
      • юноши и девушки;
    • взрослые,
    • старые;
  • пол:
    • мужчины,
    • женщины;
  • рост;
  • вес;
  • происхождение.
seleckis.lv/journal/web-dizayn/dizayn-teksta-3-5

Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0274 s.