Отдел сетевых технологий

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

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

Начнем со стилей

Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

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

1. Элемент 1
2. Элемент 2
   1. Уровень 2, элемент 1
   2. Уровень 2, элемент 2
3. Элемент 3

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

• Элемент 1
• Элемент 2
  • Уровень 2, элемент 1
  • Уровень 2, элемент 2
• Элемент 3

Цитата - стиль "quote"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Примечание - стиль "note"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Сноски - стиль "ref", используются с нумерованным списком

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Выделение - стиль "selected"

Это плавающая цитата, стиль "quote_float". Ширина такого блока всего 250 пикселей, не нужно сюда вставлять много текста.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Таблицы - класс "viewtable"

При создании таблиц, в свойствах таблицы укажите класс "viewtable". Если вы хотите выделить ячейку, то в свойстве ячейки укажите тип "заголовок". Никакие другие свойства таблицы трогать не нужно (отступы, ширина, рамка), все они будут установлены автоматически.

Советы

• Используйте таблицы только для оформления таблиц. Не нужно использовать скрытые таблицы для создания нескольких колонок;
• Если вы хотите выровнять изображения по левому или правому краю, используйте стили "image_left" и "image_right";
• Не нужно на страницу вставлять много маленьких картинок. Используйте сервис "фотоальбомы";
• Вставляйте большие изображения, они будут уменьшены автоматически. ¹
• Если вы ссылаетесь на файл для скачивания, в скобках укажите его размер и формат (например MS Word, PDF, MS Excel и т.п.);
• При копировании текстов из Microsoft Word, Microsoft Excel, Open Office, Google Docs проверяйте, не сбилось ли форматирование;
• Не используйте жирный шрифт для выделения заголовков. Используйте функцию "Формат - Заголовок";
• Не печатайте весь текст жирным шрифтом.Зачем выделять ВСЮ информацию? Выделяйте только важное!
• Никогда не используйте пробелы для выравнивания текста! Это прошлый век (да-да, двадцатый. Пишущие машинки и пр.);
• Используйте нумерованные и ненумерованные списки для оформления списков! Тогда они будут выглядеть ровно и красиво. Не нужно писать цифры руками;
• Размещайте фотографии и контактные данные сотрудников только если о них нет упоминания в левой колонке (для большинства подразделений туда автоматически вставляется список сотрудников);
• Размещайте только качественные фотографии. Если на фотографии не видно лиц - то стоит ли ее вообще выкладывать? 

Алгоритм переоформления страниц

1. Откройте страницу в визуальном редакторе портала;
2. Проверьте форматирование. Если нужно, отредактируйте документ (удалите пустые строки, таблицы верстки, проверьте чтобы документе помещался по ширине в белое поле редактора);
3. Сохраните страницу.

1. Пример картинки, которая изначально была 1600x1200: