Типовая текстовая страница

Лид — это первый абзац статьи, информативный отрывок позволяющий захватить внимание читателя на данном материале. Необязательный элемент.

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

TODO:

Картинка справа, картинка слева
Классы бутстрапа (важно, инфа, удачно, варнинг)
Подстрочный, надстрочный
Форма
Файлы для скачивания

H2. Многострочный заголовок, длина которого иногда бывает так некстати

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

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

Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.

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

Текст состоит из некоторого количества предложений. Одно предложение, даже очень распространённое, сложное, текстом назвать нельзя, поскольку текст можно расчленить на самостоятельные предложения, а части предложения сочетаются по законам синтаксиса сложного предложения, но не текста.

H5. Заголовок пятого уровня

Заголовок <h5> используется только для вспомогательной информации, где есть вероятность появления шестого уровня разбивки. Пример — блок «Контактная информация», который внутри дробится по отделам компании.

H6. Низкоуровневый заголовок

Самый «нижний» заголовок <h6> предваряет такие элементы, как «Комментарий» или «Таблица».

Теперь покажем несколько двустрочных
заголовков подряд <h2>

Таким образом проверим их сочетание:
интерлиньяж и отступы <h3>

Однако, в реальной ситуации подобных скоплений
заголовков лучше избегать <h4>

Если за заголовком более низкого уровня сразу следует заголовок более высокого, это нарушает композиционную связность элементов оформления и логику повествования. Поэтому после заголовка должен следовать текст (или иной контент), который этот заголовок и подчиненные ему подзаголовки, если они есть, озаглавливают (подробнее см. в «Ководстве»: § 136. Теория близости).

Форматирование текста

Списки

Для уменьшения расстояния между параграфом и связанным с ним списком, параграфу нужно добавлять класс «Перед списком» (before_list).

Кроме того, существуют правила оформления списков:

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

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

Короткие пункты

Кстати списки с короткими пунктами оформляются проще:

с небольшими отступами;
без маркеров;
с цветовым выделением.

Ссылки

На сайте может встречаться несколько видов ссылок. Например, ссылка на Яндекс является внешней. Внутренние ссылки могут открываться по умолчанию в текущем окне (например, переход на главную страницу) или в новом окне (например, для показа изображений в оригинальном размере). Подробнее: § 171. Правила оформления ссылок.

Надстрочные и подстрочные индексы

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

Оформление текста

Наиболее простыми способами выделения информации являются полужирное и курсивное начертания. Подробнее: § 79. Делать фонт болдом или италиком?

На этом сайте есть дополнительный способ выделения при помощи подсвечивания, для чего используется элемент «Подсвеченный» (класс highlighted).

Комментарий

Элемент «Комментарий» (класс comment) применяется к пояснительному тексту. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.

Цитаты

Простота — необходимое условие прекрасного.

Цитата не есть выписка. Цитата есть цикада. Неумолкаемость ей свойственна. Вцепившись в воздух, она его не отпускает.

Таблицы

akson_vologda.jpg