Особенности блочной вёрстки!

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

Употребление таблиц нарушает первостепенный принцип современной вёрстки веб-страниц – раздельное определение структуры и свойств отображения дизайна и информации html-документа.

Вёрстка на основе таблиц привлекает в основном начинающих веб-дизайнеров своей простотой исполнения и реализации. Без сомнения в ущерб скорости загрузки будущего сайта.

Употребление табличных тегов для размещения нетабличных элементов нарушает логическую структуру страниц. Оттого стандарты верстки практикуют определение отдельных логических блоков, как к примеру навигации, шапки сайта, контента с помощью тегов-контейнеров. Если вам необходимо выделить количество документа, чтобы применить какой либо  дизайн, стиль, используют теги-контейнеры «div» и «span».

Теги «div» и «span» только определяют доля документа. Как правило, им назначают параметры id или class, чтобы позволительно было применить к ним таблицу стилей CSS. Тег-контейнер «div» является элементом уровня блока, служащим для выделения фрагмента документа. Тег «span» является строчным элементом, служащим для выделения фрагмента внутри блока.

В теге «div», по умолчанию, ширина блока автоматически занимает всё доступное пространство по горизонтали. Если вложить в тег «div» вовнутрь другого, то ширина внутреннего будет формироваться сравнительно его родителя, внешнего контейнера. Блочные элементы начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.

Типичный поток позиционирования

В соответствии спецификации CSS: Блочные элементы располагаются дружбан за другом вертикально, начиная с верхнего края содержащего их элемента. Вертикальное пространство между двумя сестринскими блоками определяется с помощью свойства margin. Вертикальные поля между соседними блоками перекрываются.

Определение свойства float

Единственный из способов позиционирования элементов на основе CSS свойств содержится в применении свойства float. Качество float – управляет перемещением блочного элемента. Определяет обтекание элемента другими элементами с правой стороны или слева. Float не возбраняется направлять как для блочных элементов так и строчных.  При этом строчные элементы автоматически становятся блочными.

Значения у float такие:

• none – компонент размещается по умолчанию;
• left и right сообразно слева и справа.

Свойство float может сдвинуть ингредиент к одной из сторон потока тегов, правой или левой.

В программе Dreamweaver задать свойство float разрешено в категории Box окна CSS Rule definition.

Удачного Вам изучения всех трюков CSS.

---

Современные методы и приёмы web-дизайна
Если вы хотите перейти на современные методы и приёмы web-дизайна, а как раз новые способы вёрстки веб-сайтов на CSS, XHTML в программе Dreamweaver CS3, тогда наши видео-курсы для вас.

На нашем вебсайте, вы изучите на примерах:

• Планирование Web-ресурсов
• Практические навыки работы в программе
• Современные методы вёрстки
• Алгоритмы CSS для оформления Web-страниц

Кейвуды: