Результаты моих экспериментов
Выпуск # 1
Данные видеоуроки бесплатны только для покупателей моего видеокурса.
Однажды я обратила внимание на один шаблон, который был создан с помощью таблиц.
Его HTML-код показал мне, насколько труден табличный путь к созданию форм с закругленными углами. Новичку явно не под силу разобраться в этом самостоятельно.
Посмотрите этот шаблон и обратите внимание, как он выглядит в процессе загрузки.
Период ожидания посетителем загрузки вашего сайта очень важен. Когда изображения загружаются какими-то нелогичными кусками, когда долго нет представления о полной картине, это вполне может испортить первое впечатление о сайте.
Поэтому была поставлена задача — создать тот же самый дизайн без таблиц и добиться того, чтобы уже в первые мгновения загрузки сайт выглядел привлекательно.
Оказалось, что это сделать достаточно просто. Для этого нужно иначе структурировать содержание сайта, иначе разделить изображения и применить ряд нехитрых CSS-правил.
При этом можно добиться значительного уменьшения всех файлов:
| Файлы | Вес файла, КБ. | Изменения, в % | |
| Показатели табличного шаблона |
Показатели шаблона без таблиц | ||
| html | 10.9 | 3.49 | -68% |
| css | 4.59 | 2.77 | -40% |
| image | 206 | 88.6 | -57% |
Примечание: суммарный вес изображений снизился не только из-за более рационального их деления, но и замены заголовков и меню из фоновых изображений на текстовые.
Поскольку формы с загругленными углами веб-мастерами применяются нынче очень часто, то я уверена, что урок по созданию такого сайта вам обязательно пригодится.
На уроке рассматриваются вопросы:
- Основы семантически правильной верстки.
- Применение абсолютного позиционирования;
- Горизонтальное выравнивание по центру абсолютно позиционируемого блока;
- Вставка изображений (с помощью тега img и background);
- Применение классов, их отличия от id;
- Относительные размеры шрифтов в em, %.
Видеоурок состоит из двух частей (разбит на два файла, общая длительность — 1 час 21 мин. ):
1. Особенности создания HTML-разметки. Основы семантически правильной верстки.
Длительность видеоурока — 21 мин. 07 сек. Он упакован в RAR-кий архив semantica_html.rar и занимает 14.7 мб.
2. Особенности внешнего оформления сайта.
Длительность видеоурока — 59 мин. 51 сек. Он упакован в RAR-кий архив experimental_results_css.rar и занимает 42.9 мб.
Внимание! В этом архиве содержится не только видеоурок, но и папка с исходниками, т.е. с файлами, созданными в первой и второй части урока (HTML / CSS / image). Вы можете открыть HTML-код в Dreamweaver и самостоятельно просмотреть все правила.
Для просмотра уроков необходим Flash Player (от 7 версии и выше).
Как скачать?
Файлы размещены на http://www.sharemania.ru/.
Ссылки на файлы и пароль отправляются в электронном письме после оплаты урока.
Если вы оформляли подписку на мои бесплатные видеоуроки (для этого достаточно отправить запрос), то получаете скидку на уроки из серии «Результаты моих экспериментов» в размере 40%.
Другие желающие могут скачать видеоурок (две части) за 90 рублей (цена для подписчиков — 54 рубля).