Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде. Любой список представляет собой контейнер <UL>, который устанавливает маркированный список, или <OL>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <LI>. Маркированный списокМаркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. В этом смысле все пункты списка идентичны по своему оформлению. Для установки маркированного списка используются теги <UL> и <LI> (пример 10.1). Пример 10.1. Создание маркированного списка <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li> <li>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li> <li>Duis te feugifacilisi.</li> <li>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</li> </ul> </body> </html> Результат выполнения примера показан ниже.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
- Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- Duis te feugifacilisi.
- Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически. Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <UL>. Допустимые значения приведены в табл. 10.1 Табл. 10.1. Стили маркеров спискаТип списка | Код HTML | Пример |
---|
Маркированный список с маркерами в виде круга | <ul type="disc"> <li>...</li> </ul> | - Чебурашка
- Крокодил Гена
- Шапокляк
| Маркированный список с маркерами в виде окружности | <ul type="circle"> <li>...</li> </ul> | - Чебурашка
- Крокодил Гена
- Шапокляк
| Маркированный список с квадратными маркерами | <ul type="square"> <li>...</li> </ul> | - Чебурашка
- Крокодил Гена
- Шапокляк
| Для создания нового маркированного списка в Nvu, предназначена кнопка на панели инструментов. Предварительно требуется выделить текст, который вы желаете сделать списком, после чего нажать указанную кнопку. Можно также воспользоваться меню Формат > Список > Маркированный. Не обязательно делать списком существующий текст. Можно нажать на кнопку маркированного списка () и вводить желаемый текст. Нажатие на клавишу <Enter> создаст новый элемент списка, еще одно нажатие на <Enter> отменяет работу со списком и позволяет вводить обычный форматированный текст. Для изменения стиля маркеров выберите пункт меню Формат > Список > Свойство списка...и в открывшемся окне укажите желаемый стиль (рис. 10.1). Рис. 10.1. Панель для изменения стиля маркера Нумерованный списокНумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и применяется для создания списка. В качестве нумерующих элементов могут выступать следующие значения: - арабские цифры (1, 2, 3, ...);
- прописные латинские буквы (A, B, C, ...);
- строчные латинские буквы (a, b, c, ...);
- римские цифры в верхнем регистре (I, II, III, ...);
- римские цифры в нижнем регистре (i, ii, iii, ...).
Для указания типа нумерованного списка применяется параметр type тега <OL>. Его возможные значения приведены в табл. 10.2 Табл. 10.2. Типы нумерованного спискаТип списка | Код HTML | Пример |
---|
Нумерованный список с арабскими цифрами | <ol type="1"> <li>...</li> </ol> | 1. Чебурашка 2. Крокодил Гена 3. Шапокляк | Нумерованный список с прописными буквами латинского алфавита | <ol type="A"> <li>...</li> </ol> | A. Чебурашка B. Крокодил Гена C. Шапокляк | Нумерованный список со строчными буквами латинского алфавита | <ol type="a"> <li>...</li> </ol> | a. Чебурашка b. Крокодил Гена c. Шапокляк | Нумерованный список с римскими цифрами в верхнем регистре | <ol type="I"> <li>...</li> </ol> | I. Чебурашка II. Крокодил Гена III. Шапокляк | Нумерованный список с римскими цифрами в нижнем регистре | <ol type="i"> <li>...</li> </ol> | i. Чебурашка ii. Крокодил Гена iii. Шапокляк | В примере 10.2 показано создание списка с использованием римских цифр в верхнем регистре. Пример 10.2. Создание нумерованного списка <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <ol type="I"> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li> <li>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li> <li>Duis te feugifacilisi.</li> <li>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</li> </ol> </body> </html> Результат примера показан ниже.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
- Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- Duis te feugifacilisi.
- Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.
Создание нумерованного списка в Nvu напоминает создание списка маркированного. Но для этого вида списка используется кнопка на панели инструментов. Для изменения стиля нумерации выберите пункт меню Формат > Список > Свойство списка... и укажите желаемые параметры в открывшемся окне (рис. 10.2). Рис. 10.2. Панель для изменения свойств нумерованного списка Список определенийСписок определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <DL>, термин — тегом <DT>, а его определение — с помощью тега <DD>. Вложение тегов для создания списка определений продемонстрировано в примере 10.3. Пример 10.3. Общая структура списка определений <dl> <dt>Термин 1</dt> <dd>Определение 1</dd> <dt>Термин 2</dt> <dd>Определение 2</dd> </dl> Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В примере 10.4 показано одно из возможных использований этого вида списка. Пример 10.4. Создание списка определений <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <dl> <dt>Тег</dt> <dd>Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида.</dd> <dt>HTML-документ</dt> <dd>Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.</dd> <dt>Сайт</dt> <dd>Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.</dd> </dl> </body> </html> Результат примера показан ниже. - Тег
- Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида.
- HTML-документ
- Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.
- Сайт
- Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.
Список определений, как и другие списки, характеризуется наличием отступов сверху и снизу. Создать список определений в Nvu достаточно просто. Для этого имеется две похожих кнопки на панели инструментов. — устанавливает термин (тег <DT>). — устанавливает описание термина (тег <DD>). Контейнер <DL> формируется автоматически, и заботиться об этом теге нет необходимости. Если списка и текста для него еще нет, нажмите на кнопку , а затем набирайте текст первого термина. После нажатия на клавишу <Enter> редактор сам установит, что следующая строка должна быть определением. Еще одно нажатие на <Enter> добавляет очередной термин. Таким образом, использование перевода строки по очереди позволяет вводить термин и его определение. Когда требуется прекратить редактирование списка и начать ввод обычного текст, нажмите на <Enter> дважды. Для превращения в список определений уже существующий текст рекомендуется проделать следующее. Выделите желаемый текст и нажмите на кнопку , после чего все абзацы превращаются в определения. Теперь ставите курсор на ту строку, которая должна быть термином и нажимаете на кнопку . Можно сделать и наоборот, вначале установить весь текст как термины, а затем для отдельных строк указать что они являются определениями.
Поддержите мой проект! Поделитесь ссылкой на понравившейся материал...
|