Что такое маркированный список

HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

маркированный список<ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список<ol> — каждый элемент списка <li> отмечается цифрой,
список определений<dl> — состоит из пар термин <dt><dd> определение.

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

Создание HTML-списков

  • Содержание:
  • 1. Маркированный список <ul>
  • 2. Нумерованный список <ol>
  • 3. Список определений <dl>
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ul>
unordered list
Рис. 1. Маркированный список

2. Нумерованный список

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv).
<ol>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ol>
ordered list
Рис. 2. Нумерованный список

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>   <dt>Режиссер:</dt>   <dd>Петр Точилин</dd>   <dt>В ролях:</dt>   <dd>Андрей Гайдулян</dd>   <dd>Алексей Гаврилов</dd>   <dd>Виталий Гогунский</dd>   <dd>Мария Кожевникова</dd>  </dl>
dl
Рис. 3. Список определений

4. Вложенный список

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:

<ul>   <li>Пункт 1.</li>   <li>Пункт 2.   <ul>   <li>Подпункт 2.1.</li>   <li>Подпункт 2.2.    <ul>   <li>Подпункт 2.2.1.</li>   <li>Подпункт 2.2.2.</li>   </ul>   </li>    <li>Подпункт 2.3.</li>   </ul>   </li>   <li>Пункт 3.</li>  </ul>
ul ul ul
Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

<ol>   <li>пункт</li> <!-1.->   <li>пункт    <ol>   <li>пункт</li> <!-2.1.->   <li>пункт</li> <!-2.2.->   <li>пункт   <ol>   <li>пункт</li> <!-2.3.1.->   <li>пункт</li> <!-2.3.2.->   <li>пункт</li> <!-2.3.3.->    </ol>   </li> <!-2.3.->   <li>пункт</li> <!-2.4.->    </ol>   </li> <!-2.->   <li>пункт</li> <!-3.->    <li>пункт</li> <!-4.->   </ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {  /* убираем стандартную нумерацию */  list-style: none;   /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */   counter-reset: li;   }  li:before {  /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */  counter-increment: li;   /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */  content: counters(li,".") ". ";   }
numeric list
Рис. 5. Многоуровневый нумерованный список

html5book.ru

kak-sdelat-markirovannyiy-spisok-v-vorde

Создать список в Microsoft Word можно довольно просто, достаточно сделать всего несколько кликов. Кроме того, программа позволяет не только создавать маркированный или нумерованный список по ходу набора текста, но и преобразовать в список текст, который уже был набран.

В этой статье мы детально рассмотрим то, как сделать список в Ворде.

Урок: Как в MS Word отформатировать текст

Создание нового маркированного списка

Если вы только планируете печатать текст, который должен быть оформлен в виде маркированного списка, выполните следующие действия:

1. Установите курсор в начале строки, в которой должен находиться первый пункт списка.

mesto-dlya-spiska-v-word

2. В группе “Абзац”, которая расположена во вкладке “Главная”, нажмите кнопку “Маркированный список”.

knopka-markirovannyiy-spisok-v-word

3. Введите первый пункт нового списка, нажмите “ENTER”.

nachalo-spiska-v-word

4. Введите все последующие пункты маркированного списка, нажимая в конце каждого из них “ENTER” (после точки или точки с запятой). Когда закончите вводить последний пункт, дважды нажмите “ENTER” или нажмите “ENTER”, а затем “BackSpace”, чтобы выйти из режима создания маркированного списка и продолжить обычный набор текста.

markirovannyiy-spisok-v-word

Урок: Как в Ворде упорядочить список по алфавиту

Преобразование готового текста в список

Очевидно, что каждый пункт будущего списка должен находиться в отдельной строке. Если ваш текст еще не разделен на строки, сделайте это:

1. Установите курсор в конце слова, фразы или предложения, которое должно быть первым пунктом в будущем списке.

gotovyiy-tekst-dlya-spiska-v-word

2. Нажмите “ENTER”.

razbienie-na-stroki-v-word

3. Повторите это же действие для всех следующих пунктов.

punktyi-spiska-v-word

4. Выделите фрагмент текста, который должен стать списком.

vyidelit-tekst-v-word

5. На панели быстрого доступа во вкладке “Главная” нажмите кнопку “Маркированный список” (группа “Абзац”).

knopka-markirovannyiy-spisok-v-word

    Совет: Если после созданного вами маркированного списка еще нет текста, дважды нажмите “ENTER” в конце последнего пункта или нажмите “ENTER”, а затем “BackSpace”, чтобы выйти из режима создания списка. Продолжите обычный набор текста.

spisok-gotov-word

Если вам необходимо создать нумерованный список, а не маркированный, нажмите кнопку “Нумерованный список”, расположенную в группе “Абзац” во вкладке “Главная”.

knopka-numerovannyiy-spisok-v-word

Изменение уровня списка

Созданный нумерованный список можно сместить влево или вправо, изменив таким образом его “глубину” (уровень).

1. Выделите созданный вами маркированный список.

vyidelit-spisok-v-word

2. Нажмите на стрелку, расположенную справа от кнопки “Маркированный список”.

menyu-knopki-markirovannyiy-spisok-v-word

3. В выпадающем меню выберите пункт “Изменить уровень списка”.

izmenit-uroven-spiska-v-vord

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

uroven-spiska-izmenen-v-word

Примечание: С изменением уровня изменится и маркировка в списке. О том, как изменить стиль маркированного списка (вид маркеров, в первую очередь), мы расскажем ниже.

Аналогичное действие можно выполнить и с помощью клавиш, причем, вид маркеров в таком случае изменен не будет.

Примечание: Красной стрелкой на скриншоте показана начальная позиция табуляции для маркированного списка.

nachalnaya-pozitsiya-spiska-word

Выделите список, уровень которого нужно изменить, выполните одно из следующих действий:

  • Нажмите клавишу “TAB”, чтобы сделать уровень списка более глубоким (сместить его вправо на одну позицию табуляции);
  • spisok-smeshhen-v-word

  • Нажмите “SHIFT+TAB”, если вы хотите уменьшить уровень списка, то есть, сместить его на “шаг” влево.

spisok-na-uroven-nazad-v-word

Примечание: Одно нажатие клавиши (или клавиш) смещает список на одну позицию табуляции. Комбинация “SHIFT+TAB” будет работать только в том случае, если список находится на расстоянии хотя бы в одну позицию табуляции от левого поля страницы.

Урок: Табуляция в Word

Создание многоуровневого списка

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

Урок: Как в Ворд создать многоуровневый список

Изменение стиля маркированного списка

Помимо стандартного маркера, устанавливаемого в начале каждого пункта списка, для его маркировки вы можете использовать и другие знаки, доступные в MS Word.

1. Выделите маркированный список, сnиль которого необходимо изменить.

vyidelit-spisok-v-word

2. Нажмите на стрелку, расположенную справа от кнопки “Маркированный список”.

knopka-marker-v-word

3. Из выпадающего меню выберите подходящий стиль маркера.

vyibor-stilya-markera-v-vord

4. Маркеры в списке будут изменены.

stil-spiska-izmenen-v-word

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

Урок: Вставка символов в Ворде

1. Выделите маркированный список и нажмите на стрелку справа от кнопки “Маркированный список”.

knopka-markirovannyiy-spisok-v-word

2. В выпадающем меню выберите “Определить новый маркер”.

opredelit-novyiy-marker-v-vord

3. В открывшемся окне выполните необходимые действия:

okno-opredelenie-novogo-markera-v-vord

  • Нажмите на кнопку “Символ”, если хотите использовать в качестве маркеров один из представленных в наборе символов;
  • simvol-v-vord

  • Нажмите кнопку “Рисунок”, если хотите использовать в качестве маркера рисунок;
  • risovannyiy-marker-v-vord

  • Нажмите кнопку “Шрифт” и внесите необходимые изменения, если вы хотите изменить стиль маркеров, используя доступные в программе наборы шрифтов. В этом же окне можно изменить размер, цвет и тип написания маркера.

shrift-markera-v-vord

Уроки:
Вставка изображений в Word
Изменение шрифта в документе

Удаление списка

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

1. Выделите весь текст, входящий в список.

vyidelit-spisok-v-word

2. Нажмите на кнопку “Маркированный список” (группа “Абзац”, вкладка “Главная”).

knopka-markera-v-word

3. Маркировка пунктов исчезнет, текст, который входил в состав списка, останется.

markirovanyiy-spisok-udalen-v-word

Примечание: Все те манипуляции, которые можно выполнить с маркированным списком, применимы и для нумерованного списка.

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

lumpics.ru

7. Параметры форматирования списков.

Для улучшения внешнего вида документа и облегчения пони­мания его смысла в Word имеются специальные средства, предна­значенные для работы со списками. Можно использовать два основных типа списков:

         списки с нумерацией;

         списки с пометками.

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

Для создания списка нужно выбрать те абзацы, которые Вы хотите сделать элементами списка, или установить курсор ввода в тот абзац, с которого будет начинаться список. Затем выполните команду Список из меню Формат.

В зависимости от того, какой тип списка Вам нужен, активизируйте страницу Мар­кированный для списка с пометками, Нумерованный — для списка с нумерацией или Многоуровневый — для списка со сложной ну­мерацией. 

studfiles.net

7 советов, как лучше реализовать маркированный список

1. Все пункта списка должны иметь приблизительно одинаковую длину строки

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

Неправильно

Возьмите в лагерь следующие вещи:

  • спальный мешок;
  • купальный костюм для прогулки к водопадам;
  • солнцезащитный крем;
  • водонепроницаемая куртка для дождливых дней. Возможны грозы.

Разница в длине делает список неупорядоченным и неравномерным.

Правильно

Возьмите в лагерь следующие вещи:

  • спальный мешок;
  • солнцезащитный крем;
  • купальный костюм;
  • дождевик.

2. Используйте нумерованные перечни только тогда, когда последовательность или количество элементов имеют важное значение

Нумерованные списки, как правило, используются в тех случаях, когда пункты должны быть перечислены в определенном порядке, например, порядок действий при работе с программой. Либо когда количество пунктов имеет значение, например, в разного рода топах (топ-10 лучших техник и т. д.).

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

Неправильно

Пожалуйста, свяжитесь с нами одним из следующих способов:

1. Контактная форма на сайте
2. Чат
3. Звонок по телефону
4. Личная встреча

Правильно

Пожалуйста, свяжитесь с нами одним из следующих способов:

  • Контактная форма на сайте
  • Чат
  • Звонок по телефону
  • Личная встреча

3. Используйте параллельные конструкции предложений

Стиль написания пунктов списка должен быть единообразным. Большое разнообразие формулировок может показаться неграмотным и замедлить (или даже запутать) читателей.

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

Неправильно

Пожалуйста, следуйте правилам пребывания в парке:

  • выкидывайте мусор только в урны;
  • животные могут пугаться громких звуков;
  • желтыми линиями отмечены места, где вы можете стоять;
  • сохранять парк в чистоте — задача каждого.

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

Правильно

Пожалуйста, следуйте правилам пребывания в парке:

  • выкидывайте мусор только в урны;
  • не шумите;
  • не пересекайте желтые линии;
  • сохраняйте парк чистым.

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

4. Избегайте повтора слов в начале предложений

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

Неправильно

Как выбрать спелый ананас:

  • обратите внимание на его запах: он должен быть приятным;
  • обратите внимание на его структуру: ананас должен быть крепким;
  • обратите внимание на его цвет: он должен быть золотисто-желтым.

Правильно

Как выбрать спелый ананас:

  • понюхайте его: запах должен быть приятным;
  • сожмите его: ананас должен быть крепким;
  • обратите внимание на цвет: он должен быть золотисто-желтым.

5. Фраза или предложение, предваряющее маркированный список, должны быть понятными и раскрывающими его содержание

Вводные слова, так называемые lead-in (слова, стоящие непосредственно перед маркированным списком), очень важны, поскольку они дают читателю понять, что за список перед ним и почему он так важен. Лид-ин не обязательно должен иметь форму полного предложения, особенно если каждый пункт раскрыт в достаточной степени.

Неправильно

Отдых в Британской Колумбии:

  • походы;
  • художественные музеи;
  • плавание на каноэ по озеру.

Лид-ин (Отдых в Британской Колумбии) не ясно описывает список. Кроме того, в этом списке перечислены занятия, но «художественные музеи» — это не занятие.

Правильно

В ваш отдых в Британской Колумбии включены:

  • походы;
  • посещение музеев;
  • плавание на каноэ по озеру.

6. Соблюдайте правила оформления списков

Существуют конкретные правила оформления маркированных списков.

Итак:

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

Неправильно

Если вы стали свидетелем издевательств:

  • вам следует заступиться за человека, над которым издеваются
  • рассказать взрослым об этой ситуации
  • посоветовать жертве рассказать об этой ситуации взрослым
  • оказать поддержку, проявив заботу

Пункты начинаются не с заглавных букв, и в конце нет точек.

Правильно

Если вы стали свидетелем издевательств:

  • Вам следует заступиться за человека, над которым издеваются.
  • Рассказать взрослым об этой ситуации.
  • Посоветовать жертве рассказать об этой ситуации взрослым.
  • Оказать поддержку, проявив заботу.

Неправильно

Вы можете защитить окружающую среду, если будете:

  • Отдавать бумагу и предметы из пластика на переработку.
  • Использовать меньше одноразовых предметов.
  • Делиться с другими вещами, которые вам не нужны.
  • Смените автомобиль на велосипед.

Это фрагменты предложения, поэтому пунктуация не нужна.

Правильно

Вы можете защитить окружающую среду, если будете:

  • Отдавать бумагу и предметы из пластика на переработку
  • Использовать меньше одноразовых предметов
  • Делиться с другими вещами, которые вам не нужны
  • Смените автомобиль на велосипед

7. Не злоупотребляйте маркированными списками, так как они могут потерять свою эффективность

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

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

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

Заключение

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

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

Высоких вам конверсий! 

По материалам nngroup.com. Источник картинки: jhembach

lpgenerator.ru

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.