Видеоуроки

Создание блочного сайта на примере табличного шаблона

Однажды я обратила внимание на один шаблон, который был создан с помощью таблиц.

Его HTML-код показал мне, насколько труден табличный путь к созданию форм с закругленными углами. Новичку явно не под силу разобраться в этом самостоятельно.

Посмотрите этот шаблон и обратите внимание, как он выглядит в процессе загрузки.

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

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

Оказалось, что сделать это достаточно просто. Для этого нужно иначе структурировать содержание сайта, иначе разделить изображения и применить ряд нехитрых CSS-правил.

При этом можно добиться значительного уменьшения всех файлов:

Файлы	Вес файла, КБ.		Изменения, в %
	Показатели табличного шаблона	Показатели шаблона без таблиц
html	10.9	3.49	-68%
css	4.59	2.77	-40%
image	206	88.6	-57%

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

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

На уроке рассматриваются вопросы:

1. Основы семантически правильной верстки.
2. Применение абсолютного позиционирования;
3. Горизонтальное выравнивание по центру абсолютно позиционируемого блока;
4. Вставка изображений (с помощью тега img и background);
5. Применение классов, их отличия от id;
6. Относительные размеры шрифтов в em, %.

Видеоурок состоит из двух частей (разбит на два файла, общая длительность — 1 час 21 мин. ):

1. Особенности создания HTML-разметки. Основы семантически правильной верстки.

Длительность видеоурока — 21 мин. 07 сек. Он упакован в RAR архив semantica_html.rar и занимает 14.7 мб.

2. Особенности внешнего оформления сайта.

Длительность видеоурока — 59 мин. 51 сек. Он упакован в RAR архив experimental_results_css.rar и занимает 42.9 мб.

Для просмотра уроков необходим Flash Player (от 7 версии и выше).