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

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

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

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

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

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

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

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

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

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

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

Принципы блочной вёрстки

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

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

      
 
header (шапка сайта)
 
 
Блок навигации
 
 
Левая панель
 
 
Основной контент страницы
 
 
footer (низ сайта)
 
 
  

Разберём некоторые моменты.

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

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

body < background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; >#header < background: #F5DEB3; width: 100%; height: 55px; >#container < background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; >#navigation < background: #FE9798; width: 100%; height: 25px; >#sidebar < background: #40E0D0; float: left; width: 20%; height: 280px; >#content < background: #DCDCDC; float: right; width: 80%; height: 280px; >#clear < clear: both; >#footer

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

#clear запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Источник

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

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

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

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

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

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

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

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

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

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

Сам по себе элемент располагается только внутри тега и устанавливает связь с внешними файлами, отвечающими за стили.

Настало время задать цветное оформление и расположение блокам.

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

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

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

Для того чтобы вы смогли лицезреть данный пример во всей красе во вкладке браузера, создайте простой текстовый файл и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега href=»style.css».

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

Теперь давайте разберем строки css-кода. Для наглядности я структурировал все в таблицу с двумя колонками.

Свойство	Значение
opacity	Отвечает за прозрачность объекта. При opacity равному 0 элементы становятся полностью прозрачными, при 1 – полностью видимыми.
width	Отвечает за ширину блочных элементов.
background	Задает характеристические параметры фона, который в свою очередь может задаваться как цветом, так и картинкой.
border	Позволяет установить толщину, цвет и стиль границ вокруг объекта.
float	Задает выравнивание элемента. Остальные объекты по умолчанию обтекают данный. Можно задать значения: left, right, none (не задает обтекание элементов) или inherit (повторяет значение родительского объекта).
border-radius	Способствует округлению углов блока. Можно указывать как одинаковый радиус для всех углов, так и уникальный для каждого.
top	Определяет расстояния между верхними границами родительского элемента и дочернего.
left	Определяет расстояния между левыми границами родительского и дочернего элементов.

Обратите внимание на строку в коде примера position: relative в element2. Так как этому атрибуту, определяющему позиционирование объекта, задано значение relative, то расположение самого объекта будет меняться не от координат верхнего края браузера, а от координат верхней границы первого блока element1.

Вот почему при задании top = 55px и left = -65px второй блочный элемент сдвинулся вниз на 55 пикселей и вправо на 65 пикселей от границ первого блока.

Кстати, особо внимательные могли заметить, что left = -65px и right = 65px – это одно и то же.

А что же HTML 5

Напоследок хотел бы добавить, что в современной платформе html 5 есть нововведенные блочные теги , , , и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.

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

Источник