Закажи “Сайт под ключ” и получи

в подарок:

  • Домен !
  • Хостинг !
  • 10% скидки на следующий заказ !

Статьи

Основы div верстки

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

Принцип работы div верстки заключается в том, что с помощью блочных элементов создаются зоны для отдельных модулей шаблона. Внутренние элементы div-a по умолчанию получают некоторые свойства «родителя», например цвет, обтекание, оформление etc.

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

 А теперь поподробнее о понятиях, которые также входят в основы div верстки:

 а) Выравнивание блока задается свойством float, при этом следует понимать что если блок имеет «родителя», то он не выйдет за его границы. Также стоит помнить, что по умолчанию остальные элементы шаблона будут обтекать его с других сторон.

б) Каждый новый блок автоматически растягивается на весь родительский элемент или окно браузера, но с помощью задания пиксельного или процентного значения для свойств width и height его можно корректировать. Чтобы наглядно посмотреть текущие размеры любого блока, достаточно добавить в его стили border: 2px solid red.

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

г) Стандартно блоки размещаются «друг на друга» в порядке их прописывания в файле html, но этот порядок меняется с помощью свойства z-index. В таком случае высшим слоем будет тот div, в котором задано большее числовое значение z-index. Безусловно ознакомить вас с основами div верстки в таком коротком посте не очень просто, впрочем вы получили необходимую информацию для создания собственной базовой структуры шаблона. Таким образом эта статья должна обратить ваше внимание на ту технологию кодинга, которая в ближайшем будущем будет использоваться абсолютным большинством верстальщиков.

Добавить комментарий