ПЕЙЗАЖ Много раз мы встречали фотографии в рамках. Нет я сейчас не говорю о рамках специальных, а о простых - состоящих из фотки поля вокруг него и подписи. Такие рамки легко реализуются все одним - тремя тегами, без сложной конструкции в виде таблицы или других наборов тегов HTML. Итак давайте определим основные атрибуты нашей будущей рамки.
Здесь мы видим фотографию, которая и представляет собой типичный случай, как можно используя всего три тега показать фотографию, а так же подпись под ней в достаточно выразительном виде. Давайте посмотри как это выглядит реально в тегах HTML и расскажем конкретно о каждом атрибуте нашей конструкции, а так же о возможные настройках ее.
<div style="box-shadow: 1ex 1ex 1em #CCC; margin-right: 1em; float:left; padding: 1ex; background-color: #FFF; color: #000; text-align: center; border-radius: 1ex; font-size: 1.5ex; line-height: 1em; width: %wd%;"> <img src="%url%" width="99%" /> <br /><br /> %text% </div>
*** атрибуты заключенные в %% определяют наполнение нашей рамочки, в все остальные определяют ее стиль, который в свою очередь создает всю конструкцию.
Основной атрибут это %url% = ссылка на изображение, причем здесь важным моментом отмечается то что ширина картинки обязательна должна укладываться внутри родительского тега, как width="99%"/. Можно было бы указать и 100% но я предпочитаю дать один 1% на утряску ужимку-корректировку при выравнивании самой конструкции браузером.
Следующий момент конструкции - это идущие за IMG-тегом два подряд BR-тега новой строки, причем первый начинает с новой строчке содержимое подписи, а второй обеспечивает отступ книзу на одну строчку. Если делать всего один тег, то строчка подписи будет начинаться сразу под изображением, и хотя это не испортит внешний вид, но как бы чуть чуть его искривит.
Чтобы задать саму подпись достаточно ее вставить в настраиваемый атрибут %text% = подпись , который сам определяется стилистикой font-size: 1.5ex; line-height: 1em;, которые как минимум задают размер шрифта и расстояния между строчками, при выполнении процедуры выравнивания подписи внутри рамки. К стилистикам подписи так же относится вспомогательные стилистики настройки цвета рамки и цвета подписи background-color: #FFF; color: #000;, а так же тип выравнивания text-align: center; - относительно центра рамки по горизонтали. Все эти стилистики могут быть изменены дизайнером, для получения наибольших удобств для отображения, а так же быть дополнены любыми другими, которые дополняют стилистику самой подписи в вашем вкусе. В нашем конкретном отображении изменен цвет фона на #FFE и добавлена стилистика жирного стиля подписи font-weight: bold;
Важным аспектом стилистики рамочки выполняет настройка расстояния между внутренними объектами и самой рамкой - стилистика padding: 1ex; - она задает отступ от внутренней границы рамки к любым внутренним объектам. Наибольший шарм самой рамочки задается с помощью стилистики - тени box-shadow: 1ex 1ex 1em #CCC;, среза уголков рамочки с помощью стилистики радиуса границы border-radius: 1ex;. В принципе можно задать и стилистику которая определит границу рамочки, но игра на светотени между разными фонами и тенью - дает возможность не использовать эту стилистику.
Следующим аспектом реаллизации это комбинация стилистик, которая обеспечивает плавное обтекание текстом заметки нашей конструкции. В данном случае мы используем левый сдвиг float: left; и правый отступ margin-right: 1em;. Если требуется чтобы картинка с рамочкой позиционировалась на правом крае то эти атрибуты меняются соответственно на правый сдвиг float: right и левый отступ margin-left: 1em;, а в случае ненужности обтекания текстом - они не должны указываться совсем, но при этом и атрибут ширины рамки, о котором разговор пойдет ниже нужно задать как 99%
Теперь осталось поговорить о последнем задаваемом атрибуте отображения в стилистике ширины width: %wd%;=ширина рамки. Эта величина может иметь абсолютно разные значения в широком спектре единиц и величин, но надо понимать, что наиболее приемлемые размерности - это относительные размерности, такие как %, em, ex- которые исчисляются относительно размеров либо самого отображения, либо от размерности символа на отображении.
