Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.

В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!

Особенности блочных элементов

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

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

Главным в блоке выступает контент .

Вокруг него расположены поля, которые называются padding . Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.

После идут сами границы, которые именуются английским словом border .

И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.

В качестве примера запрограммируем 2 и заполним созданные элементы текстом.

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

Внесем-ка ярких красок в обыденную жизнь html

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

Для этого в контейнере head после тега

Содержимое файла style.css :

body { background: #f3f2f3; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } #container { background:#99CC99; margin: 30px auto; width: 900px; height: 600px; } #header { background: #66CCCC; height: 100px; width: 900px; } #navigation { background: #FF9999; width: 900px; height: 20px; } #menu { background: #99CC99; float: left; width: 200px; height: 400px; } #content { background: #d2d0d2; float: right; width: 700px; height: 400px; } #clear { clear:both; } #footer { background: #0066FF; height: 80px; width: 900px; }

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

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

Отличия блочной вёрстки от табличной

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

, то концепция блочной вёрстки основана на активном использовании универсальных тегов

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

Блочная вёрстка лишена недостатков табличной - поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки

, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как

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

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

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок

: верх сайта - в первый, меню - во второй, контент - в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков

с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом , или как минимум в контейнере

1

2

3

4

Результат:

Рис.2. Жесткая блочная верстка из двух колонок

Фиксированный дизайн для трех колонок

При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

1. Использование свойства для расположения колонок рядом.
2. Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

Рассмотрим первый случай.

Использование свойства float для макета в три колонки

На рис. 3 — результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

Рис. 3. Фиксированный дизайн в три колонки

Пример: создать веб-страницу с макетом из трех колонок, изображенную на рис. 3 . Использовать приемы фиксированного блочного макетирования

Выполнение:

• Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
• Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
• Получим схематичное изображение расположения блоков:

Получим следующую html-структуру:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<body > <div class = "container" > <div id = "header1" > Евгений Евтушенко</ div > <div id = "header2" > Валерий Брюсов</ div > <div id = "header3" > Эдуард Асадов</ div > </ div > <div class = "container" > <div id = "col1" > Мне снится старый друг,<br / > который стал врагом,<br / > но снится не врагом,<br / > а тем же самым другом.<br / > Со мною нет его,<br / > но он теперь кругом,<br / > и голова идет<br / > от сновидений кругом. </ div > <div id = "col2" > Великое вблизи неуловимо,<br / > Лишь издали торжественно оно,<br / > <br / > </ div > <div id = "col3" > <br / > <br / > <br / > </ div > </ div > </ body >

Евгений Евтушенко

Валерий Брюсов

Эдуард Асадов

Мне снится старый друг,
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом.

Великое вблизи неуловимо,
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено.

В любых делах при максимуме сложностей
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.

2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

• Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }

• Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }

• Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; }

• Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family , font-weight , font-size , color).

#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Получим код:

#header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ /* Рамка вокруг слоя */ /* Не серифный или рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ }

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

• Установим задний фон отдельно для каждого селектора.

#header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Смотрим промежуточный результат:

Рис. 4. Промежуточный результат

3. Задание стиля для контейнеров

• Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)

.container { clear : both ; /* Отменяет действие обтекания float */ }

Container { clear: both; /* Отменяет действие обтекания float */ }

• Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.

#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }

Итоговый код: всё вместе

<style type = "text/css" >

Евгений Евтушенко

Валерий Брюсов

Эдуард Асадов

Мне снится старый друг,
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом.

Великое вблизи неуловимо,
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено.

В любых делах при максимуме сложностей
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.

Результат:

Рис. 5. Результат

Использование позиционирования слоев для макета в три колонки

Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

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

Выполнение:

1. Создание структуры html-кода

• Для данного макета достаточно создать три слоя div для каждой колонки.

Поэтому структура будет простой:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<body > <div id = "col1" > Иван Бунин</ br ></ br > </ br > </ br > </ br > </ div > <div id = "col2" > </ br > Золотится отблеском окно. </ br > </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > </ br > </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body >

Иван Бунин

На окне, серебряном от инея,
За ночь хризантемы расцвели.
В верхних стёклах - небо ярко-синее
И застреха в снеговой пыли.

Всходит солнце, бодрое от холода,
Золотится отблеском окно.
Утро тихо, радостно и молодо.
Белым снегом всё запушено.

И всё утро яркие и чистые
Буду видеть краски в вышине,
И до полдня будут серебристые
Хризантемы на моём окне.

1903

2. Добавление стилей для колонок

• Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; }

• Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float .

#col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 0 6px ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }

• Так как разделительная граница должна присутствовать только с внутренних сторон слоев, то рамку необходимо добавить только у двух слоев с одной стороны (border).

#col1 , #col2 { border-right : 1px solid #000 ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ } #col1 , #col2 { border-right : 1px solid #000 ; /* Параметры линии справа от текста */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

</ style > </ head > <body > <div id = "col1" > Иван Бунин</ br ></ br > На окне, серебряном от инея,</ br > За ночь хризантемы расцвели.</ br > В верхних стёклах - небо ярко-синее</ br > И застреха в снеговой пыли. </ div > <div id = "col2" > Всходит солнце, бодрое от холода, </ br > Золотится отблеском окно. </ br > Утро тихо, радостно и молодо. </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > Буду видеть краски в вышине, </ br > И до полдня будут серебристые </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body >

Иван Бунин

На окне, серебряном от инея,
За ночь хризантемы расцвели.
В верхних стёклах - небо ярко-синее
И застреха в снеговой пыли.

Всходит солнце, бодрое от холода,
Золотится отблеском окно.
Утро тихо, радостно и молодо.
Белым снегом всё запушено.

И всё утро яркие и чистые
Буду видеть краски в вышине,
И до полдня будут серебристые
Хризантемы на моём окне.

1903

Дизайн в три колонки готов!

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка)

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

Мы не будем использовать элемент

, так как он поддерживается не всеми браузерами.

Элементы

,

и