Что такое блочная верстка сайта? Базовые понятия.1

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

На сегодняшний день применяют два типа верстки — табличная и блочная (ее еще называют версткой слоями или дивной версткой). В этой статье мы рассмотрим основные понятия блочной верстки.

Сначала разберем что такое блочный элемент, или просто блок. Любой блочный элемент представляет из себя прямоугольник, границы рамки которого прозрачны. К таким злементам можно отнести абзацы <p>, цитаты <blockquote>, формы <form> и др. Но основным блочным элементом по праву считается <div>. Этот блок специально создан для позиционирования помещенных в него элементов веб-страницы относительно друг друга, создавая тем самым дизайн сайта.

Сам по себе, без наполнения, дивный блок  на странице не виден. Но попробуйте задать ему фон, рамку, или наполните текстом — и он начнет свое существование на сайте.

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

поля-отступы-границы

Так, как блок имеет прямоугольную форму, то каждое свойство имеет по четыре значения. А порядок задания значений свойств выглядит так: верхнее, правое, нижнее и левое — т.е. сверху и по часовой стрелке.

Border — граница блока. Характеризуется тремя значениями:
Style — оп ределяет стиль рамки. По-умолчанию — none. Также часто используемые: dotted, solid, dashed, double, hidden, и другие, применяемые редко.
Width — задает толщину рамки. Может определяться в PX, %, EM, и т.д.
Color — определяет цвет рамки. Задается значениями, применяемыми в интернете.

Padding — отступы. Определяют расстояние от границы блока до его содержимого. Их еще называют внутренними отступами. Чаще всего задаются в пикселах.

Margin — поля(или внешние отступы). Задают отступы блока от соседних элементов веб-страницы. Измеряются в принятых интернетом единицах, но часе в пикселах.

polya-otstupy-granicy

То, что отмечено для отступов и полей, аналогично действует и для границ.

Синтаксис написания значений трех свойств одинаков.

  1. Задание каждой стороны отдельно: { margin-top:8; margin-right:5; margin-bottom:15; margin-left:5; }.
  2. Задание четырех сторон сокращенно: { border: 8; 5; 15; 5; }.
  3. Задание трех сторон: { padding: 5; 3; 7; }. При таком определении : 5 — верх блока, 3 — левая и правая стороны, 7 — низ блока.
  4. При написании дух значений: Первое — определяет верхнийи нижний размеры, а второе — правое и левое значения.
  5. Один заданный параметр действует ко всем сторонам блока.

При верстке сайта необходимо учитывать одну особенность свойств
Border и Padding. Они увеличивают размер блока, соответственно размерам своих значений.
А со свойством Margin разговор особый, который продолжится в другом посте.

Любая работа не обходится без расходования энергии, и интернет-бизнес не исключение. Чтобы ее восполнить мы все иногда едим :) .  Я например, очень уважаю хорошо приготовленное мясо. Моим главным помощником в этом деле служит каменная сковородка. У такой сковородки много достоинств, а главное — мясо  не подгорает, если чуть-чуть забыл и завис у компьютера.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha