Меня зовут
Я живу в Москве
Вход с паролем

Эл. почта

Пароль

Я все забыл

Весь сайт / Пример страницы
Закрыть
Частным лицам
Юридическим лицам
Партнерам
Компания
Страхование транспорта
Автострахование
Страхование воздушного транспорта
Страхование морского и речного транспорта
Страхование ответственности перевозчиков пассажиров
Страхование грузов и грузоперевозчиков
Страхование грузов
Страхование имущества
Страхование имущества от огня и других опасностей
«Бизнес-Конструктор»
Страхование машин и механизмов
Страхование электронного оборудования
Страхование от убытков в предпринимательской деятельности
Страхование земельных участков
Страхование ответственности
Страхование нежилых помещений
Владельцам опасных объектов
Страхование ответственности перевозчиков пассажиров
Участнику выставки
Эксплуатация аттракционов
Страхование сотрудников
Добровольное медицинское страхование
Страхование от несчастных случаев
Накопительное страхование жизни сотрудников
Страхование сельскохозяйственных рисков
Страхование урожая сельскохозяйственных культур
Страхование сельскохозяйственных животных и птицы
Страхование аква- и морекультуры
Страхование с/х продукции на период хранения
Страхование сельскохозяйственной техники
Страхование строительно-монтажных и технических рисков
Строительно-монтажные риски
Страхование специализированной техники и передвижного оборудования
Страхование предпринимательских и финансовых рисков
Страхование коммерческих (товарных) кредитов и дебиторской задолженности

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

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

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

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

Несколько
двухстрочных заголовков <h2>

Для проверки
их сочетания <h3>

А именно:
отступов и интерлиньяжа <h4>

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

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

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

Списки

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

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

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

Ссылки

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

Сноски

Ссылку1 на сноску и название сноски нужно заключать в элемент «Сноска» (класс footnote). Таким образом сохраняется связь между ссылкой на сноску и самой сноской2.

1 А это текст сноски, который помещается в элемент «Сноски» (класс footnotes).

2 Это позволит при необходимости сделать всплывающую сноску.

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

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

Раскрывающийся контент

Элемент «Раскрывающийся» (класс foldable) используется для формирования раскрывающихся элементов. В частности, для вопросов и ответов.

Как назначить соответствующий класс?

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

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

Комментарий

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

Важно

Элемент «Важно». (класс important), который используется для выделения особо важной информации. И еще немного специально написанного текста, чтобы получилось несколько строк для наглядности.

Адреса

Блок с адресом должен оформляться в соответствии с общепринятым стандартом. Подробнее: § 163. Правила написания почтовых адресов.

Попап с произвольными данными

Вызов попапа по псевдоссылке из текста

Контактная информация
Центральный офис в Москве
Студия Артемия Лебедева
Газетный переулок, дом 5
Москва, 125009
Россия
Нью-Йоркский офис
Art. Lebedev Studio
125 Maiden Lane
Suite 15D
New York, NY, 10038
USA

Также надо следить за форматом телефонных номеров. Он должен быть единым для всего сайта, при этом следует избегать неоправданного использования скобок — в них помещается часть номера, которую в определенных ситуациях набирать необязательно. Кстати, код 495 в Москве в ближайшее время станет обязательным для набора. Правильно: 8 495 926-18-00 или +7 495 926-18-00. Неправильно: +7(495) 926-18-00 или 8 (495) 926-18-00.

Название формы.
Например «заявка на регистрацию».

Имя поля ввода
Комментарий текстовому полю ввода
Длинное имя поля ввода
Текстовое поле
Осталось заполнить
«Имя поля ввода»
«Текстовое поле»
Комментарий технологу

В «Реформатор» новые элементы добавляются с помощью редактирования файлов sidebar.html и editor.css (в /www/.reformator/). Желательно создавать простые элементы, которые затем будут преобразовываться с помощью XSL.

Комментарий дизайнеру

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

Цитаты

Используйте элемент «Комментарий» внутри цитаты для выделения информации об источнике.

«Услуги по реализации товаров „интернет-аптека piluli.ru“ осуществляются на условиях соблюдения законодательства продавцом и покупателем. Продавец принимает на себя обязательства по предоставлению услуг как физическим, так и юридическим лицам»

Иван Геннадьевич Савельев, генеральный директор

Картинки

Для вставки изображений в контент используется элемент «Картинка с подписью» (класс picture). Дополнительными классами «Влево» (left) и «Вправо» (right) для этого же элемента можно задать соответствующее выравнивание.

Комментарий к изображению. Может быть достаточно длинным.

Комментарий дизайнеру

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

Файлы для скачивания

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

Документ MS Office (DOC, 9 КБ)

Таблица MS Office (XLS, 6,5 КБ)

Презентация MS Office (PPT, 69 КБ)

Документ Adobe Acrobat (PDF, 7,4 КБ)

Файл архив (ZIP, 1,5 КБ)

TIF документ (TIF, 427,3 КБ)
Комментарий дизайнеру

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

Документ MS Office (DOC, 9 КБ)

Таблица MS Office (XLS, 6,5 КБ)

Презентация MS Office (PPT, 69 КБ)

Документ Adobe Acrobat (PDF, 7,4 КБ)

Файл архив (ZIP, 1,5 КБ)

TIF документ (TIF, 427,3 КБ)