Руководство по оформлению статей

Руководство
по оформлению статей

Александр Евмененко (Sana)

Я попытался изложить это в краткой и максимально простой форме и… вроде бы, это получилось, по крайней мере, результат налицо. Не прошло и двух дней, с той же просьбой обратился и Миша Worm, и у него тоже получилось.

Зачем это надо?

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

Как это сделать?

Давайте начнём с той инструкции. которую я послал Desperado.

Некоторые пояснения

Возможно, для кого-то самым сложным будет не думать о том, как будет выглядеть тот или иной элемент и поверить в то, что об этом за него уже подумали :) но это правильно. Просто называйте заголовок заголовком, а цитату цитатой и всё получится само :)

При публикации материала не пользуемся редактором, а нажимаем в редакторе кнопку HTML, см. рисунок ниже:

и вставляем текст из блокнота во всплывающее окно:

Конечно, можно потом поработать и в редакторе, но я бы не рекомендовал это делать.

Идём дальше

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

Заголовки

В таблице стилей прописано 5 уровней заголовков:

Главный заголовок:

Заголовок

Имя Автора

Конструкция:

<h2 class="mainheader">Заголовок<div class="author"> Имя Автора </div></h2>

Главный заголовок, <h2 class="mainheader"> — это основной заголовок статьи или блога, может содержать в себе имя автора (<div class="author"> Имя Автора </div>). Главный заголовок должен располагаться ниже строчки <div class="aearticle">

Я часто заменяю главный заголовок картинкой. Для того, чтобы она не проваливалась ниже правой панели, её ширина должна быть 450 пикселей.

Подзаголовок, или заголовок второго уровня:

Подзаголовок

Конструкция:

<h2>Подзаголовок</h2>

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

Заголовок третьего уровня:

Подзаголовок

Конструкция:

<h3>Подзаголовок</h3>

Если материал, отбитый подзаголовком нуждается в дальнейшем структурировании, вводится подзаголовки 3-го, 4-го и т.д. уровней

Заголовок четвёртого уровня:

Подзаголовок

Конструкция:

<h4>Подзаголовок</h4>

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

Подзаголовок

Конструкция:

<h5>Подзаголовок</h5>

Вряд ли кому-то в рыболовных блогах понадобится структура с пятью уровнями подзаголовков, но вдруг…

Информационные блоки

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

Информационный блок

Дополнительный нформационный блок

Блок-предупреждение

Цитата

Если вам нужно процитировать чьё-то длинное высказывание, можно воспользоваться блоком цитаты. Текст цитаты воспроизведётся жирным курсивом с левым отступом.

Конструкция:

<blockquote>
<p>Cодержимое блока</p>
</blockquote>

Изображения

Вставлять фотографии и рисунки в блог можно двумя способами.

Редактор

Первый способ — через стандартный редактор. Это самый простой и очевидный способ, не требующий особых пояснений. Мы просто закачиваем подготовленный текст как HTML, а потом в редакторе нужных местах размещаем изображения.

Внешний альбом

Возможно, кого-то не устроит качество изображений, которое получится при закачке их через редактор. Тогда стоит воспользоваться вторым способом. Он состоит в том, что все изображения готовятся заранее с учётом ширины полосы набора (680 пикселей) и закачиваются в специально созданный альбом, после чего можно использовать ссылки на изображения непосредственно при вёрстке в HTML. Именно так вставлены изображения в эту статью.

---

---