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

На чтение 12 мин

Содержание

Блочная верстка сайта
Отличия блочной вёрстки от табличной
Суть блочной вёрстки
Принципы блочной вёрстки
Пример блочной вёрстки
header (шапка сайта)
Блок навигации
Левая панель
Основной контент страницы
footer (низ сайта)
Как создать блоки на странице

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

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

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

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

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

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

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

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

Каждая часть страницы помещается в свой блок : верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами 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 — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Источник

Как создать блоки на странице

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

Рис. 1 Четыре блока с закруглёнными углами и тенью.

В общем-то, вариантов разбивки очень много. Думаю, что разобрав эти 4, Вы уже сами дальше сможете комбинировать блоки.

Итак смотрим код варианта показанного на Рис. 1.

< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 »/>
< title >Документ без названия< /title >
< style >
#glaw margin : auto ;
width : 880px ;
>
.blok1, .blok2, .blok3, .blok4 float : left ;
margin : 3px 3px 3px 5px ;
width : 200px ;
height : 200px ;
padding : 5px ;
text-align : center ;
border-radius : 4px ;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
>
< /style >
< /head >
< body >
< h2 >Как разбить страницу на отдельные блоки< /h2 >
< div id color: #008080;">glaw «>
< div class color: #008080;">blok1 «>
< h3 >Добрый день!< /h3 >
< img class color: #008080;">alignright size-full wp-image-533 »
src color: #008080;»>ttp://starper55plys.ru/wp-content/uploads/2013/03/i-5.jpg »
align color: #008080;»>left » width color: #008080;»>50 » height color: #008080;»>80 »/>
< p >Всем привет! Желаю творческих успехов< /p >
< /div >
< div class color: #008080;">blok2 » >Блок 2< /div >
< div class color: #008080;">blok3 «>Блок 3< /div >
< div class color: #008080;">blok4 «>Блок 4< /div >

< /body >
< /html >

Что здесь можно подкорректировать?

Во первых — это конечно width и height (ширина и высота) блоков.

Во вторых, можно изменить цвет блоков background , изменить радиус углов border-radius , и можно придать блокам тень box-shadow .

Подробно показано, как это делается в статье Как сделать тень для текста, картинки, блока.

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

Чтобы сделать вариант Рис. 2, нужно просто весь селектор блоков повторить ещё раз, и добавить дивы в тело тега body.

< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 »/>
< title >Документ без названия< /title >
< style >
#glaw display : inline ;
width : 880px ;
>
.bl ok1, .blok2, .blok3, .blok4 float : left ;
margin : 3px 3px 3px 5px ;
background : #F0FCE8 ;
width : 200px ;
height : 200px ;
padding : 5px ;
text-align : center ;
border-radius : 4px ;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
>
.blok5, .blok6, .blok7, .blok8 float : left ;
margin : 3px 3px 3px 3px ;
background : #F0FCE8 ;
width : 200px ;
height : 200px ;
padding : 5px ;
text-align : center ;
border-radius : 4px;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
>
< /style >
< /head >
< body >
< h2 >Как разбить страницу на отдельные блоки< /h2 >
< div id ="glaw">
< div class ="blok1">
< h3 >Добрый день!< /h3 >
< img class color: #008080;">alignright size-full wp-image-533 »
src color: #008080;»>https://starper55plys.ru/wp-content/uploads/2013/03/i-5.jpg »
align color: #008080;»>left » width color: #008080;»>50 » height color: #008080;»>80 »/>
< p >Всем привет! Желаю творческих успехов!< /p >

< div class color: #008080;">blok2 «>Блок 2< /div >
< div class color: #008080;">blok3 «>Блок 3< /div >
< div class color: #008080;">blok4 «>Блок 4< /div >
< div class color: #008080;">blok5 «>Блок 5< /div >
< div class color: #008080;">blok6 «>Блок 6< /div >
< div class color: #008080;">blok7 «>Блок 7< /div >
< div class color: #008080;">blok8 «>Блок 8< /div >
< /div >
< /body >

Читайте также: Красивый серый цвет css

Точно таким образом можно нашлёпать таких блоков хоть сотню. Менять можно число блоков в строке и их размер.

Вариант Рис. 3 делается немного по другому. Блоки не собираются в один селектор, а прописываются друг за другом.

< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 »/>
< title >Документ без названия< /title >
< style >
#glaw display : inline ;
width : 880px ;
>
. blok1, .blok2, .blok3, .blok4 border-radius : 4px;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
>
.blok1 margin :6 px 3px 3px 3px ;
background : #F0FCE8 ;
width : 400px ;
height : 150px ;
padding : 5px ;
text-align : center ;
>
.blok2 margin : 6px 3px 3px 3px ;
background : #F0FCE8 ;
width : 400px ;
height : 150px ;
padding : 5px ;
text-align : center ;
>
.blok3 margin : 6px 3px 3px 3px ;
background : #F0FCE8 ;
width : 400px ;
height : 150px ;
padding : 5px ;
text-align : center ;
>
.blok4 float : left ;
margin-top : -495px ;
margin-left : 420px ;
background : #F0FCE8 ;
width : 250px ;
height : 480px ;
padding : 5px ;
text-align : center ;
>
< /style >
< /head >
< body >
< div id color: #008080;">glaw «>
< div class color: #008080;">blok1 «>
< h3 >Добрый день!< /h3 >
< img class color: #008080;">alignright size-full wp-image-533 »
src color: #008080;»>https://starper55plys.ru/wp-content/uploads/2013/03/i-5.jpg »
align color: #008080;»>left » width color: #008080;»>50 » height color: #008080;»>80 »/>
< p >Всем привет! желаю творческих успехов!

< /div >
< div class color: #008080;">blok2 «>Блок 2

< div class color: #008080;">blok3 «>Блок 3< /div >
< div class color: #008080;">blok4 «>Блок 4< /div >
< /div >
< /body >
< /html >

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

Можно убрать из группового селектора все свойства border-radius и box-shadow, а вместо них прописать рамку:

Тогда страница приобретёт такой вид:

< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 »/>
< title >Документ без названия< /title >
< style >
#wrapper background :# cd7f32 ;
width : 900px ;
height : 600px ;
margin : auto ;
position : relative ;
>
div background : # f5f5dc ;
width : 200px ;
height : 150px ;
padding : 20px ;
>
.one, .two, .three, .four position : absolute ;
border-radius : 5px ;
box-shadow : rgba(0,0,0,1.2) 0px 1px 3px ;
>
.one top : 50px ;
left : 60px ;
z-index : 10 ;
>
.two top : 50px ;
left : 180px ;
z-index : 100 ;
>
.three top : 1 00px ;
left : 380px ;
z-index : 150 ;
>
.four top : 150px ;
left : 580px ;
z-index : 300 ;
>
< /style >
< /head >

Как видите, размещать блоки можно и по оси Z. И такой метод предоставляет большие возможности для дизайна.

Читайте также: Подключение скриптов

Представьте, что вместо блоков У Вас изображения. Убрав у них тень, можно одно изображение накладывать на другое (блоки у меня ведь накладываются друг на друга), и таким образом создать оригинальную картинку.

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

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

На этом блоге установлена стандартная, идущая в WordPress по умолчанию, тема — TwentyTen.

А сделаем мы примерно вот так: (Это не картинка. Это html + css)

Количество блоков в строке, а так-же их размер — на Ваше усмотрение.

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

< div style color: #008080;">display: inline; width: 600px; «>
< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; «>Блок 1< /p >

< p style color: #008080;">float: left; font-family: Verdana; padding: 10px; font-size: 14px; margin: 3px 3px 3px 5px; width: 170px; height: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,5.2) 0px 1px 3px; «>Блок 2< /p >

После того как все размеры, отступы, и оформление подогнаны, нужно перенести все стили в файл style.css шаблона.

Для этого в имеющихся блочных элементах (в нашем случае это div и p , вместо атрибута style , с значениями, прописываем class , с произвольным названием.

Потом идём в файл style.css шаблона, и вписываем этот класс.

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

В тексте остаётся только такой html код:

А в файле style.css — такой:

.okno1 float: left;
font-family: Verdana;
padding: 10px;
font-size: 14px;
margin: 3px 3px 3px 5px;
width: 170px;
height: 200px;
border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
>

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

Но это уже зависит от особенностей темы.

Перемена

Классный руководитель:
— Ну, как вы трудились дома?
— Дома я трудился над тарелкой с пирожками, а потом над компотом.

Источник