Отличие блочной верстки от табличной. Табличная вёрстка VS Блочная вёрстка. но мы сейчас не об этом. Настоящая ошибка - злоупотребление элементом. следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться

Достоинства табличной верстки:

1.Удобство и простота работы с ячейками таблицы, используемыми в качестве элементов структуры электронного издания. С помощью таблицы можно достаточно просто создавать несложные структуры. В случае необходимости задания более сложной структуры мы потратим немного больше времени. Но при масштабировании окна браузера колонки сохранят свой исходный вид, а также взаимное расположение. К тому же, независимо от наполнения соседних ячеек, по высоте они останутся одинаковыми.

2.Использование табличной верстки хорошо подходит для создания так называемого «резинового» макета, в котором ширина зависит от ширины окна браузера.

3.В ячейках таблицы мы можем одновременно выравнивать по горизонтали и вертикали.

4.Меньше всего зависит от выбранного пользователем браузера.

Недостатки табличной верстки:

1.Для отображения страницы надо дождаться, пока браузер загрузит всю таблицу.

2.Более громоздкий и менее понятный код при создании таблиц, т.к. сложная иерархическая структура вложенных тегов.

3.Отсутствует разделение оформления и содержимого.

4.Плохая индексация. Раздробленность информации затрудняет правильное индексирование страницы поисковыми системами.

5.Отсутствие полосы прокрутки (при фреймовой верстве можно прокручивать части).

6.Верстка не соответствует стандартам html и css (таблицы должны быть только для табличных данных).

Достоинства блочной верстки:

1.Сильно уменьшен код html-страниц за счет использования элементов div.

2.Есть возможность нестандартного вложения блоков друг в друга – можно размещать элементы как хотим.

3.Блоки отображаются по мере своей загрузки, что ускоряет работу с электронными изданиями.

4.Лучшая индексация поисковыми системами.

5.Есть возможность расположения нескольких слоев друг над другом, что помогает улучшить индексацию.

6.Возможность использования полосы прокрутки отдельных блоков.

7.С точки зрения моды – данная верстка сейчас самая популярнаяJ

Недостатки блочной верстки:

1.При низком разрешении экрана у монитора пользователя блоки могут поменять свое взаимное расположение.

2.В разных браузерах (старых версий) верстка может выглядеть по-разному.

3.Эта верстка самая сложная.

Блочная фиксированная разметка с помощью CSS.

Существует четыре различных метода позиционирования.

Статическое позиционирование

HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.

Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.

Фиксированное Позиционирование

Элемент с фиксированным положением позиционирован относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Пример:

Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.

Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.

Зафиксированные элементы могут перекрывать другие элементы.

Абсолютное Позиционирование

:

Пример:

position:absolute;

Блочная гибкая разметка с помощью CSS.

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

Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.

Относительное позиционирование

Пример:

position:relative;

Пример:

position:relative;

Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.

Применение абсолютного позиционирования на странице. Правило z-index.

Абсолютное Позиционирование

Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается :

Пример

position:absolute;

Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.

Абсолютно расположенные элементы могут перекрывать другие элементы.

Свойство z-index указывает вертикальный порядок для элемента.

position:absolute;

Элемент с большим вертикальным порядком всегда отображается впереди элемента с меньшим вертикальным порядком.

Замечание: z-index работает только для позиционированных элементов (position:absolute, position:relative или position:fixed).

Свойство z-index поддерживается всеми основными браузерами.

Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления!DOCTYPE. IE9 поддерживает "inherit".

Значения Свойства:

Auto: устанавливает вертикальный порядок такой же, как у родительского элемента. Используется по умолчанию

Число: устанавливает значение вертикального порядка элемента. Отрицательные значения допустимы

Inherit: указывает, что вертикальный порядок должен наследоваться от родительского элемента

Применение относительного позиционирования. Создание эффектов объема и тени.

Относительное Позиционирование

Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.

Пример

position:relative;

Примерh2.pos_top

position:relative;

CSS3 Тень Контейнера

В CSS3, свойство box-shadow используется для добавления тени к контейнерам:

Пример

Добавление тени контейнера к элементу div:

box-shadow: 10px 10px 5px #888888;

Webkit-box-shadow: 10px 10px 5px #888888; /* Safari */}

CSS3 Граница-Изображение

Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:

Свойство border-image позволяет вам указать границу-изображение.

Пример

Использование изображения для создания границы вокруг элемента div:

border-image:url(border.png) 30 30 round;

Moz-border-image:url(border.png) 30 30 round; /* Firefox */

Webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */

O-border-image:url(border.png) 30 30 round; /* Opera */}

Новые Свойства:

border-image: Стенографическое свойство для установки всех свойств группы border-image-* 3

border-radius: Стенографическое свойство для установки всех четырех свойств border-*-radius 3

box-shadow: Присоединяет один или более эффектов отбрасывания тени к контейнеру

Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной , сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.

Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты . Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки .
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.

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

Виды верстки

Табличная верстка

Табличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта

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

таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.

Достоинства и недостатки табличной верстки:

• Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
• Интуитивно понятна при построении, минимум CSS правил (+ )
• Трудно разбираться в HTML коде при более сложной структуре сайта (- )
• Пока вся таблица не загрузиться она не будет показана на экране (- )
• Сложный дизайн с перекрытием элементов не реализуем (- )
• Много лишнего кода (- )

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

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

float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.

Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.

float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).

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

теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.

Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.

как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.

Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;

Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.

Достоинства и недостатки блочной верстки:

• Меньший вес страницы за счет меньшего кода (+ )
• Реализация сложного дизайна с перекрывающимися блоками (+ )
• Трудно освоить, табличная верстка проще (- )
• Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (- )

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

На этом все дорогие читатели, заходите по-чаще.

В этой статье речь будет идти о видах верстки. Сразу хочу отметить что при создании веб страницы совсем не обязательно выбрать один вид верстки и использовать только его. Элементы одного вида можно (иногда даже нужно) использовать в других видах верстки. Главное делать это правильно.

Верстка таблицами

С начала 90 годов используется табличная верстка и до сих пор множество веб - программистов используют ее в своих проектах. Табличная верстка предполагает построение страницы с помощью html тега

Самым большим плюсом табличной верстки является легкость в восприятии и создании страниц. Для этого вида верстки не нужны большие знания CSS. Табличная верстка стабильна и надежна, отображается всеми браузерами одинаково. Недостатком табличной верстки является то, что большая часть кода пишется в самом html, делая код большой веб - страницы не читабельной. Таблицы нельзя наложить друг на друга, что приводит к большим трудностям. Таблицы отображаются браузерами как один большой объект, который нужно полностью загрузить, а потом только отобразить. Это можно считать большим минусом.

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

Главным элементом блочной верстки является html тег