Как разбить html страницу на блоки. Как сделать блок в html и умело научиться размещать его на своей web-странице. И напоследок… качаем видео уроки

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

Как работает блок?

Для выполнения данного типа верстки используются два файла (index.html и style.css ) содержащие код HTML и стилевое оформление сайта соответственно.

В первом файле прописываются непосредственно div -контейнеры, которые являются своеобразным фундаментом для макета, а во втором - описываются стилевые особенности и положение наших div -контейнеров.

Чтобы наблюдать результат совершаемых манипуляций в реальном времени, необходимо ввести в адресной строке браузера: http://URL/test.

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

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

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

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

Каждый элемент макета необходимо поместить в отдельный «контейнер», с помощью тега div . В файле CSS необходимо добавить свойства элементов, определив параметры внешнего вида и размещения элементов (ширина, высота, шрифт, кегль и так далее).

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

"http://www.w3.org/TR/html4/loose.dtd">

Блочная верстка - дубль 2

Шапка

Левая колонка

Содержимое страницы

Подвал

После выполненных манипуляций необходимо открыть файл Style.css и описать стили для данных контейнеров. В первую очередь необходимо описать стили для основных тегов Body и Html , обнулив отступы от края страницы, чтобы обеспечить кроссбраузерную совместимость:

body, html {
margin:0px;
padding:0px;
}

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
}

Чтобы получить более подробный мастер-класс на тему того, как сверстать сайт на основе div , вы можете просмотреть следующие видео:

https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI

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

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

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

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

Блок 1

Блок 2

Блок 3

Добавим значение ширины для каждого блока:

Блок 1

Блок 2

Блок 3

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

Теперь возникает вопрос, как расположить блоки div на одной строке , друг за другом?

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

Свойство float имеет следующие значения:

left - блок выравнивается по левому краю, обтекание справа
right - блок выравнивается по правому краю, обтекание слева
none - обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

Блок 1

Блок 2

Блок 3

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством , которое управляет поведением плавающих элементов:

left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
rigth - запрещает обтекание элемента с правой стороны
both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.