Отправляет email-рассылки с помощью сервиса Sendsay

Обучающие видеоуроки по созданию сайтов

Рассылка закрыта

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

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Регина Шайбакова

Статистика

1.036 подписчиков
0 за неделю
←   Все выпуски   →

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


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

Выпуск № 6 от 13.09.2008
Ведущий рассылки: Регина Шайбакова

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

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

<table border="0" cellspacing="0" cellpadding="5" align="center">
<tbody>
<tr>
<td width="209" height="150" align="right"><a href="../tariffs/palatka"><img src="../domtheme/tariffs/t_0.jpg" border="0" alt="" width="210" height="149" /></a><br /></td>
<td width="209" height="150"><a href="../tariffs/domishko"><img src="../domtheme/tariffs/t_1.jpg" border="0" alt="" width="210" height="149" /></a></td>
<td width="209" height="150"><a href="../tariffs/domik"><img src="../domtheme/tariffs/t_2.jpg" border="0" alt="" width="210" height="149" /></a></td>
</tr>
<tr>
<td width="209" height="150"><a href="../tariffs/townhouse"><img style=""height:150px;"" src="../domtheme/tariffs/t_3.jpg" border="0" alt="" width="210" height="149" /></a></td>
<td width="209" height="150"><a href="../tariffs/cottage"><img src="../domtheme/tariffs/t_4.jpg" border="0" alt="" width="210" height="149" /></a></td>
<td width="209" height="150"><a href="../tariffs/villa"><img src="../domtheme/tariffs/t_5.jpg" border="0" alt="" width="210" height="149" /></a></td>
</tr>
</tbody>
</table>

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

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

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

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

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

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

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

2. Каким образом текст одной ссылки можно разделить на части и придать им особое оформление.

При этом в HTML-разметке нет ничего лишнего, избыточного. Секреты оформления находятся в CSS-файле.

Как скачать?

1. Длительность видеоурока — 38мин. 32 сек. Размер ролика — 830 х 740. Упакован в rar архив lessons_6.rar (65.3 мб).

Просматривать можно в проигрывателях Windows Media, Media Player Classic. Не забывайте о полноэкранном режиме.
Как извлечь файл из архива: в программе WinRAR выбрать "Операции" > "Мастер" > указать папку для извлекаемого файла.
Уроки до 4 выпуска были записаны в формате .swf, для просмотра которых требуется Flash Player.
В архиве есть так же папка links_img с исходными файлами (html/css/img). Не забывайте извлекать и эту папку тоже.

Файлы в настоящее время находятся на файлообменнике Яндекса. Скачать можно по ссылке http://narod.ru/disk/2566763000/lessons_6.rar.html.

Если изменится ссылка, то ее можно будет найти на моем сайте — http://shaybakova.com/lessons/links_img.php.

2. Есть отдельный видеоурок, посвященный созданию формы с закругленными уголками в Adobe Photoshop. Длительность — 11 мин 50 сек. Упакован в rar архив forma.rar (10.5 мб). Скачать можно по ссылке http://narod.ru/disk/2566890000/forma.rar.html.

Жду Ваши отзывы и предложения.

Адрес данного выпуска на сайте — http://shaybakova.com/lessons/links_img.php.

Архив


Рассылку ведет: Регина Шайбакова, автор 24-часового видеокурса на DVD «Воплоти свою мечту вместе с программой Macromedia Dreamweaver».
http://shaybakova.com/
В избранное