div верстка сайта - итог видеокурса

Подытожим 14-серийную эпопею видеоуроков по div верстке сайта.
Верстка сайта — это непростая наука, освоив которую вы с легкостью сможете преобразовывать psd-макет дизайна сайта в HTML + CSS код, который одинаково хорошо выглядит во всех популярных браузерах.
div верстка — это разновидность верстки сайта, в которой для позиционирования элементов на странице применяются теги div. Данный вид верстки гораздо предпочтительнее табличного подхода.
На протяжении 14-ти видеоуроков мы с вами, уважаемый читатель, шаг-за-шагом верстали из psd-макета дизайна страницы, разработанного в Photoshop, кроссбраузерный HTML + CSS каркас веб-документа.

Полученная верстка полностью соответствует стандартам (т.е. валидная) и с точки зрения HTML, и с точки зрения CSS.

Серия из 14-ти обучающих бесплатных видеоуроков по div верстке будет полезна не только для желающих перейти с морально устаревшей табличной модели на блочную, но и для желающих понять принципы создания сайта.
В видеуроках я рассказываю об основных понятиях языка разметки гипертекста HTML и каскадных таблиц стилей CSS, а так же на примерах показываю основные моменты работы в программах Photoshop и Dreamweaver.

div верстка сайта и ее приемущества

До недавнего времени (пока браузеры были молодыми и неопытными) верстка сайта осуществлялась при помощи таблиц. Элементы страницы размещались в ячейках и таким образом позиционировались в браузере. Больше никаких инструментов, сравнимых по мощи и гибкости с таблицами, для HTML верстки не было.
Но с наступлением XXI-века, слава Богу, браузеры поумнели и теперь для позиционирования элементов на странице можно применять блочную верстку (или div верстку).
Основным инструментом для позиционирования блоков является контейнер div и свойства CSS, которые на него накладываются.
Приведу яркий пример преимущества div верстки перед табличной.
1) Размещение блока на странице при помощи таблиц:

<table>
<tr>
<td>Содержимое блока</td>
</tr>

</table>

2) Вот что нам на это скажет div верстка:

<div>Содержимое блока</div>

И что же мы имеем? В первом случае, для расположения одного блока на странице, нам потребовалось указать кучу лишних тегов, из-за которых структура документа становится не прозрачной и путанной. Во втором случае мы позиционируем элемент на странице используя всего один тег div и добиваемся того же самого эффекта.
Теперь на минутку представьте структуру табличной верстки сложного сайта, когда приходится вкладывать таблицы в таблицы n-ное количество раз. Страшно?
А теперь представьте что в этом винегрете n-размерности необходимо что-то поправить. Вот теперь точно страшно.
Используя div верстку сайта вы избавитесь от этого геморроя. Структура HTML-документа становится более понятной и для верстальщика и для SEO-оптимизатора (без SEO сейчас никуда). Если вы вынесли описание внешнего вида div структуры в CSS-файл, как это и полагается делать, то его исправление вызовет одни лишь положительные эмоции (или, по крайней мере, не столь отрицательные как в случае табличной  верстки).
Для высоконагрузочного проекта div верстка обязательна! Как говорит dimox: «Прирост скорости обработки страницы весьма ощутим (еще бы, 2-3 раза — это не шутки)».
В случае блочного подхода таблицы применяются по их прямому назначению: для верстки таблиц, представьте себе; ну или когда уж совсем припекло и div верстка не помогает (в таком случае, обычно, помогает 10 минут размышлений и таблицы снова идут лесом).
При прочих равных, применяя div верстку вы становитесь героем в глазах мировой общественности, т.к. этими действиями снижаете мировой нагрузочный трафик.
Я очень надеюсь на то, что для наращивания вашего геройского профессионализма нелишними окажутся те 14 бесплатных видеоуроков по блочной div верстке сайта, которые я записал.

Валидность верстки

Пару слов по поводу соответствия стандартам организации W3C.
Очень приятно, когда верстка страницы соответствует стандартам. В принципе, как говорит некий А. Лебедев: «Лучший валидатор — это браузер», но все же. Можно изучить всю спецификацию на сайте W3C и писать валидный код. Вам этого хочется?
Если нет — пойдем другим путем:

• Используем в нашем нелегком труде верстальщика браузер Mozilla Firefox (здесь можно скачать Firefox с предустановленным Яндекс.Баром, что очень приятно).
• В браузер устанавливаем следующие дополнения: Web Developer и HTML Validator.

Web Developer — это куча инструментов, среди которых есть валидатор верстки HTML и CSS (еще и JavaScript, но это уже из другой песни), который встраивается в панель инструментов браузера и показывает нам зеленые огоньки если все ОК или тычет пальцем в наши просчеты.

Другой инструмент валидации верстки, к сожалению только HTML — это HTML Validator. Его плюсом является подробное описание ошибок HTML-структуры документа.

На сладкое

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

• Хочу порекомендовать вам интересный блог, посвященный верстке сайта.
• HTMLbook.ru — отличный ресурс с подробной информацией по HTML-тегам и CSS-свойствам.
• Csstemplater.com — как вы помните, именно посредством этого ресурса мы создавали с вами отличный HTML-каркас страницы для последующей div-верстки. Ресурс, все в том же виде, переехал на другое доменное имя (раньше это был CSStool.ru). Видимо связано это с новыми правилами регистрации доменов в RU-сегменте.

Ссылки на скачивание уроков по div верстке сайта

Все уроки по div верстке сайта, объеденные одной меткой.
Т.к. сервисы RuTube и YouTube, из-за своих алгоритмов сжатия, серьезно ухудшают качество картинки и мелкие детали могут быть плохо различимы, предлагаю вам скачать весь видеокурс в лучшем качестве, разбитый на четыре архива с Deposit Files.

• Видеоуроки по div-верстке сайта с 1 по 5 (*.zip 111.3 МБайта)
• Видеоуроки по div-верстке сайта с 6 по 9 (*.zip 129.2 МБайта) + png-фикс для IE6.
• Видеоуроки по div-верстке сайта с 10 по 12 (*.zip 115.6 МБайта)
• Видеоуроки по div-верстке сайта с 13 по 14 (*.zip 105.9 МБайта)

Скачать psd-макет дизайна сайта и готовую верстку.
Скачивая видео с Deposit-а без Gold-аккаунта наберитесь терпения и помните, что это не самый долгий процесс из возможных.

Желающим быстро закачать видеокурс

---

По многочисленным просьбам моих читателей, желающих быстро скачать видеокурс по div верстке сайта, я выложил его одним архивом (с дополнительными видеоуроками и всеми исходниками) на выделенный сервер. Теперь вы можете скачать видеокурс со скоростью до 4 МБит/сек.
Стоимость услуги – $4,25. Оплатить можно пластиковыми картами Visa и Mastercard, мобильным платежом (Мегафон, МТС, Билайн), а также WebMoney, Яндекс.Деньгами, Qiwi и другими популярными платежными системами.

Модуль оплаты встроен в WordPress при помощи этого плагина.

После оплаты вам будет предоставлена ссылка для быстрого скачивания архива (511 Мбайт, *.zip). Скорость закачки – до 1.5 Мегабит в секунду.

Стоимость быстрого скачивания курса — $4,25.
Введите Ваш адрес эл. почты (после оплаты мы отправим на него ссылку для загрузки видеокурса):

---

Вы можете познакомиться с дополнительными видеоуроками по div верстке сайта, не вошедшими в базовый видеокурс.
Чтобы не пропустить выхода новых видеокурсов для веб-мастера, а так же дополнительных видеоуроков к данному курсу подписывайтесь на RSS или получайте обновления блога на эл. почту.
С уважением, Андрей Морковин.