Блочная верстка сайта div верстка: Блочная верстка с помощью div

Блочная верстка с помощью div

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

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

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

Блочная верстка — это подход, при котором сайт строят на основе блоков, в качестве блоков выступают теги div.

Теги div имеют некоторые свойства:

• div — блочный элемент, поэтому, если не задана ширина, растягивается на всю ширину окна браузера;
• div — высота блока, если она не задана, равна содержимому. Пустой блок div имеет высоту — 0 px, поэтому не отображается на странице;
• div не имеет оформления. Чтобы его увидеть нужно задать ему стили в CSS.
• div не несет смысловой нагрузки, это просто способ структурировать сайт
• div — может содержать любое количество вложенных элементов. Так в div можно вкладывать другие блоки div, заголовки, параграфы, изображения и многие другие элементы

В HTML блок div записывается

<div>Пример</div>

<div>Пример</div>

Рассмотрим как оформить div с помощью CSS:

See the Pen div by Alex (@Asmodey) on CodePen.

Рассмотрим примененные к div свойства более подробно

Свойство border

Свойство border изображает границу вокруг элемента. Синтаксис свойства:

border: Толщина_линии вид_линии цвет;

border: Толщина_линии вид_линии цвет;

При подставлении полных параметров:

border: 2px solid red;

border: 2px solid red;

Где solid — сплошная линия, 2px — толщина обводки и red — цвет. Видов линии существует очень много, но на практике чаще всего применяют:

• solid — сплошная линия
• dotted — точки
• dashed — пунктирная линия

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

border-top: 1px solid red; border-left: 4px solid yellow;

border-top: 1px solid red;   border-left: 4px solid yellow;

т. е. можно задать оформление конкретной границе.

Скругление углов элемента

Для скругления углов элемента используется border-radius. В примере показанном выше при использовании синтаксиса:

border-radius: 5px;

border-radius: 5px;

все углы скруглятся на 5 px. Если необходимо округлить каждый угол в отдельности, можно задать следующий синтаксис:

See the Pen border-radius by Alex (@Asmodey) on CodePen.

Первое число соответствует левому верхнему углу, второе правому верхнему, затем правому нижнему и левому нижнему. Т.е. обход идет по часовой стрелке.

Обратите внимание, что использовать border-radius можно без применения границы.

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

Табличная верстка используется только для email рассылок.

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

2018-06-07 0 ∞ 5

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

• Верстка сайта – ремесло для посвященных
  • Как происходит блочная верстка?
  • Свое роднее!

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

• Отделение стиля элементов от кода html;
• Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
• Лучшая индексация поисковиками;
• Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
• Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки (слои). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» href=»style. css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

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

Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" href="style.css" />
</head>
 
<body>
 
<div>
	<div>
	<h3>Шапка</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Меню</h3>
	</div>
		 
	<div>
	<h3>Контент</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>Подвал сайта</h3>
	</div>
</div>
		 
</body>
</html>

Содержимое файла 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;
}

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

Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css. А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.

Для редактирования кода страниц сайта используются специальные редакторы html. Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме «дизайн». Но такой код не является валидным, и чаще всего нуждается в «ручной» доводке:

С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы «перемоете» собственными руками.

ДИДмитрий Ивашкоавтор

Блочный и встроенный макет в обычном потоке — CSS: каскадные таблицы стилей

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

Обычный поток определен в спецификации CSS 2. 1, которая объясняет, что любые поля в нормальном потоке будут частью контекста форматирования . Они могут быть как блочными, так и встроенными, но не тем и другим одновременно. Мы описываем блоки блочного уровня как участвующие в контексте форматирования блока 9.0006 , а блоки встроенного уровня как участвующие во встроенном контексте форматирования .

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

.

«В контексте блочного форматирования блоки располагаются один за другим по вертикали, начиная с верхней части содержащего блока. Расстояние по вертикали между двумя соседними блоками определяется свойствами поля. Вертикальные поля между соседними блоками — поля уровня в контексте форматирования блока сворачиваются.0016 В контексте блочного форматирования левый внешний край каждого блока касается левого края содержащего его блока (для форматирования справа налево касаются правые края). » — 9.4.1

Для элементов со встроенным контекстом форматирования:

«В контексте встроенного форматирования блоки располагаются горизонтально один за другим, начиная с верхней части содержащего блока. Между этими блоками соблюдаются горизонтальные поля, границы и отступы. Блоки могут быть выровнены по вертикали по-разному. : их нижние или верхние части могут быть выровнены, или базовые линии текста внутри них могут быть выровнены. Прямоугольная область, содержащая блоки, образующие линию, называется строковым блоком». — 9.4.2

Обратите внимание, что спецификация CSS 2.1 описывает документы как находящиеся в горизонтальном режиме письма сверху вниз. Например, описывая расстояние по вертикали между блочными блоками. Поведение блочных и встроенных элементов одинаково при работе в режиме вертикального письма, и мы рассмотрим это в будущем руководстве по Flow Layout и режимам письма.

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

В режиме вертикальной записи выложил бы горизонтально.

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

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

Если мы установим поля элемента абзаца равными 0 , тогда границы соприкоснутся.

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

Сжатие полей

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

В приведенном ниже примере абзацы имеют верхнее поле 20 пикселей и нижнее поле 40px . Размер поля между абзацами составляет 40 пикселей , так как меньшее верхнее поле второго абзаца свернуто с большим нижним полем первого.

Подробнее о схлопывании маржи вы можете прочитать в нашей статье Как свернуть маржу.

Примечание: Если вы не уверены, что поля схлопываются, проверьте значения Box Model в DevTools вашего браузера. Это даст вам фактический размер поля, который может помочь вам определить, что происходит.

Строковые элементы отображаются один за другим в том направлении, в котором идут предложения в данном конкретном режиме письма. Хотя мы не склонны думать о встроенных элементах как о рамке, как и обо всем, что они делают в CSS. Эти встроенные блоки расположены один за другим. Если в содержащем блоке недостаточно места для всех блоков, блок может перейти на новую строку. Созданные линии известны как линейные блоки.

В следующем примере у нас есть три встроенных блока, созданных абзацем с элемент внутри него.

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

Размер линейного блока в направлении блока (т. е. высота при работе на английском языке) определяется самым высоким блоком внутри него. В следующем примере 9элемент 0041 — 300%; поскольку это содержимое занимает две строки, теперь оно определяет высоту строковых блоков этих двух строк.

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

В дополнение к правилам, существующим в CSS2.1, новые уровни CSS дополнительно описывают поведение блочных и встроенных блоков. Свойство display определяет поведение блока и любых блоков внутри него. В модели отображения CSS уровня 3 мы можем узнать больше о том, как 9Свойство 0040 display изменяет поведение блоков и блоков, которые они генерируют.

Тип отображения элемента определяет тип внешнего отображения; это определяет, как поле отображается рядом с другими элементами в том же контексте форматирования. Он также определяет тип внутреннего отображения, который определяет поведение блоков внутри этого элемента. Мы очень ясно видим это при рассмотрении гибкого макета. В приведенном ниже примере у меня есть