28 сентября 2009

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

div верстка сайта - учебный видеокурс

Быстро скачать весь видеокурс по div верстке


Уважаемый читатель, если вы хотите без лишних слов на высокой скорости скачать весь видеокурс по div верстке (включая psd-дизайн-макет и исходники результата верстки) в лучшем качестве, то я предлагаю вам услугу быстрого платного скачивания с выделенного сервера.

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

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

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

Стоимость быстрого скачивания курса — $4,25.

Введите Ваш адрес эл. почты (после оплаты мы отправим на него ссылку для загрузки видеокурса):





Хотите узнать подробности - читайте дальше.

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 и писать валидный код. Вам этого хочется?

Если нет — пойдем другим путем:

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

div верстка валидна

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

HTML Validator в действии

 

На сладкое

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

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

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

Все уроки по div верстке сайта, объеденные одной меткой.

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

Скачать psd-макет дизайна сайта и готовую верстку.

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

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


По многочисленным просьбам моих читателей, желающих быстро скачать видеокурс по div верстке сайта, я выложил его одним архивом (с дополнительными видеоуроками и всеми исходниками) на выделенный сервер. Теперь вы можете скачать видеокурс со скоростью до 4 МБит/сек.

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

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

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

Стоимость быстрого скачивания курса — $4,25.

Введите Ваш адрес эл. почты (после оплаты мы отправим на него ссылку для загрузки видеокурса):





Вы можете познакомиться с дополнительными видеоуроками по div верстке сайта, не вошедшими в базовый видеокурс.

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

С уважением, Андрей Морковин.

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить