Верстка веб-страниц

Что такое вёрстка веб-страницы?
Это создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

Структура веб-страницы

Типовые веб-макеты

Какие существуют подходы к вёрстке веб-страниц?
Табличный подход
таблица - как структура веб-страницы
Вёрстка слоями
вышедший из употребления тег
Блочная вёрстка
вёрстка с помощью тега
и др.
Вёрстка фреймами
верстка с помощью тега
пример: http://frame.free.nanoquant.ru/

Табличный подход

Преимущества табличной верстки
Удобство и широкие возможности верстки
Создание колонок
«Резиновый» макет
«Склейка» изображений
Фоновые рисунки
Выравнивание элементов
Особенности браузеров

Недостатки табличной верстки
Долгая загрузка
Громоздкий код
Плохая индексация поисковиками
Нет разделения содержимого и оформления
Несоответствие стандартам

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

Блочная верстка
HTML4

Блочная верстка
HTML5

Преимущества блочной верстки
Разделение содержимого и оформления
Быстрая загрузка страницы
Более компактный, лаконичный код
Более правильная индексация страниц, по сравнению с табличной версткой
Соответствие стандартам