Добрый день.

На сайт добавлена статья Игоря Бурцева - Главное оружие сайта.
Краткая аннотация:
Содержание – вот, что требует особого внимания при оптимизации сайта. Безусловно, можно добиться высокого позиционирования только за счет CY (Индекса цитирования) или плотности ключевых слов на отдельной странице. Но если вы хотите, чтобы сайт надолго закрепил за собой первые позиции в поисковых системах необходимо много работать над его содержанием.

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

Адрес статьи на сайте - www.htmlbook.ru/content/?id=175.

Создание паспарту

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

Рис. 1. Пример паспарту

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

Чтобы получить результат аналогичный приведенному рисунку, самое простое – использовать таблицу (пример 1). Цвет паспарту определяется параметром bgcolor, в данном случае он серый, а цвет внешней рамки – bordercolor. Вокруг самого изображения тоже можно установить рамку, указав ее толщину параметром border тега IMG. Ширина и высота паспарту определяется размерами таблицы.

Чтобы картинка размещалась строго по центру рамки, необходимо у ячейки таблицы установить параметр align=center.

Если нужно получить двойную рамку, следует изменить параметр cellspacing и задать ему ненулевое значение.

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

Использование стилей предпочтительно, когда требуется сделать паспарту для большого количества изображений. Создав один класс с нужными параметрами его, затем, можно применять где угодно. Однако не все так просто – атрибуты привязаны к размерам изображения, и сделать универсальный код можно, только пожертвовав одним из браузеров. Все дело в том, что нужны одинаковые отступы по горизонтали и вертикали от края рамки до изображения. И если с горизонтальными отступами не возникает никаких проблем, то вертикальные категорически не хотят быть одинаковыми в браузерах Internet Explorer и Opera. Придется заняться вычислениями. Берем общую высоту паспарту, которую сами и определяем, отнимаем от нее высоту картинки и делим все пополам. Полученное значение будет отступом сверху и снизу, определяемое параметрами padding-top и padding-bottom (пример 2).

Здесь:
width – ширина паспарту в пикселях, ее необходимо задавать обязательно, в противном случае, ширина рамки будет равна ширине окна браузера;
background-color – цвет фона;
border – параметры рамки вокруг фоновой области, этот атрибут одновременно устанавливает толщину, цвет и тип рамки;
text-align – выравнивание изображения по центру.

Чтобы не создавать множество классов для разных изображений, часть параметров, которые зависят от размеров картинок, можно включить прямо в описание тега DIV (пример 3).

Какой из описанных способов создания паспарту предпочесть, зависит большей частью от изображений. Если их размер одинаков, то стили подойдут как нельзя лучше. При большом разбросе размеров картинок, и таблицы и стили работают практически одинаково.