Веб превосходен в том, что касается распространения контента, но мне всегда не хватало WYSIWYG инструментов столь привычных в печатном мире. Работая над дизайном своего сайта, я хотел добиться гибкости работы с иллюстрациями свойственной этим инструментам.

Вот пример того, что получилось.

Основа разметки

Для этой статьи, мы будем использовать простую семиколоночную сетку, состоящую из колонок шириной 100px с расстоянием между ними 10px (вы можете использовать любые единицы измерения, но размер колонок должен оставаться постоянным). Ширина всех изображений будет связана с шириной колонок (в нашем примере 100px, 210px, 320px, 430px, 540px, 650px или 760px), а высотам может быть такой как потребуется.

Зная, что ширина наших изображений будет равна одному из этих значений, мы создадим CSS стили управляющие их размещением, в большинстве случаев будет достаточно трех классов: идентификатор, размер и размещение

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

Идентификатор

Указывает на тип элемента: обычно это изображение (pic) или отрывок текста(caption).

Размер

Поскольку размер изображений согласован с модульной сеткой, выразим их ширину в количестве столбцов сетки, например, one, two, three, four, five, six, или seven.

Размещение

Указывает элементу где он должен быть. В нашем примере для этого используются классы left и right, которые устанавливают соответствующее привило float.

Дополнительные классы

Я создал несколько дополнительных классов: solo, чтобы добавить немного больше места после изображений без подписи, frame для изображений с рамкой и inset для элементов которые размещаются внутри текстового блока. По умолчанию у меня изображения вынесены из текста, но вы легко можете выбрать другие умолчания и создать класс outset для вынесенных изображений.

CSS

/* ИДЕНТИФИКАТОР */
.pic p, .caption {
font-size: 11px;
line-height: 16px;
font-family: Verdana, Arial, sans-serif;
color: #666;
margin: 4px 0 10px;
}
 
/* РАЗМЕЩЕНИЕ */
.left {float: left; margin-right: 20px;}
.right {float: right; margin-left: 20px;}
.right.inset {margin: 0 120px 0 20px;} /* изображение в тексте справа */
.left.inset {margin-left: 230px;} /* изображение в тексте слева */
 
/* РАЗМЕР */
.one {width: 100px;}
.two {width: 210px;}
.three {width: 320px;}
.four {width: 430px;}
.five {width: 540px;}
.six {width: 650px;}
.seven {width: 760px;}
.eight {width: 870px;}
 
/* ДОПОЛНЕНИЯ */
.frame {border: 1px solid #999;}
.solo img {margin-bottom: 20px;}

Использование

Пример к статье хорошо показывает возможности подхода.

Код изображения с подписью, шириной в пол страницы, будет выглядеть так:

<div class="pic four left">
  <img src="image.jpg" />
  <p>Caption goes here.</p>
</div>

Та же самая картинка с рамкой и без подписи:

<img src="image.jpg" class="pic four left frame solo"/>

Вы просто указываете список классов свойства которых хотите применить к элементу.

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

<p class="caption two left">Caption goes here.</p>

Предостережение

Очевидно, что этот метод не совсем семантичен. Классы pic и caption еще можно считать семантичными, но left и right едва-ли удастся оправдать. Вы должны сами решить подойдет ли вам такой метод, я считаю что несколько классов four или left приемлемая плата за простоту и гибкость данного метода. Полностью семантическое решение с теми же возможностями будет столь же некрасиво, сколь некрасиво это решение с точки зрения семантики.

IE6 не поддерживает цепочки классов (например, .right.inset), если поддержка этого браузера обязательна, то вам придется написать еще несколько правил, чтобы преодолеть этот недостаток.

Возможности

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

Примеры: без модульной сетки и с модульной сеткой.