Видеоуроки

Оформление информационных блоков на основе ссылок
дата: 13.09.2008

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

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

Идея создания этого урока появилась у меня после посещения сайта хостинговой компании http://domishko.ru/ (примечание: в настоящее время этих блоков уже нет). На главной странице сайта была дана наглядная информация о тарифах компании с помощью рисунков. Скриншот с сайта представлен ниже (59,4 КБ).

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

<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/domtheme/topnavi01.jpg" width="287" height="44"></td>
<td><a href="/hosting/"><img src="/domtheme/topnavi02.jpg" alt="Хостинг" width="113" height="44" border="0"></a></td>
<td><a href="/vdsservers/"><img src="/domtheme/topnavi03.jpg" alt="VDS/сервера" width="138" height="44" border="0"></a></td>
<td><a href="/domains/"><img src="/domtheme/topnavi04.jpg" alt="Домены" width="121" height="44" border="0"></a></td>
<td><a href="/sites/"><img src="/domtheme/topnavi05.jpg" alt="Создание сайтов" width="169" height="44" border="0"></a></td>
<td><a href="/promotion/"><img src="/domtheme/topnavi06.jpg" alt="Продвижение сайтов" width="172" height="44" border="0"></a></td>
</tr>
</table>

Мы видим, что в данном случае параметры ячеек (столбцов) одни и те же (ширина равна 209 px, высота — 150). А так же повторяются 6 раз размеры изображений (ширина равна 210 px, высота — 149).

Мое предложение

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

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

Я не имею ничего против использования на сайте фотографий и других изображений, но, по-моему мнению, не следует увлекаться добавлением текстов на рисунки, так как они не будут доступны для 100% посетителей. Каждый раз мы должны стремиться к золотой середине: с одной стороны, блок должен быть привлекательным, с другой — он не должен превращаться в ничто перед посетителем, который по привычке отключил изображения в браузере. Другими словами, информация на сайте должна быть представлена таким образом, чтобы посетителю было легко и приятно ее усваивать, т.е. текст, передающий информацию, должен удовлетворять требованиям доступности и привлекательности. В свою очередь, я сама стремлюсь к соблюдению этих условий и даже выделила в специальный раздел своего видеокурса «Доступность и привлекательность текста».

Информационные наглядные блоки, которые представлены на сайте http://domishko.ru/, можно сделать на основе обыкновенных текстовых ссылок (6 блоков создаются на основе 6 ссылок). При отключении картинок в браузере содержание блока остается. Посмотреть пример.

На видеоуроке вы узнаете:

1. Каким образом ссылка может получить свойства блока (т.е. ей можно установить ширину, высоту и добавить фоновое изображение).
2. Каким образом текст одной ссылки можно разделить на части и придать им особое оформление.

При этом в HTML-разметке нет ничего лишнего, избыточного. Решение, предложение на уроке, создается только с помощью CSS.