Div верстка: Почему верстка на div — это зло? — Хабр Q&A

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

Div верстка является актуальной моделью создания сайтов.

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

Оглавление:

1. Поток HTML документа
2. DIV верстка сайта
3. HTML каркас
4. CSS стили
5. Заключение
6. Наши рекомендации
7. Стоит почитать

Поток HTML документа

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

Итак, мы имеем некий поток данных, из которых и собирается HTML страница. На данный момент различают два типа структурных элементов: блочные и строчные. Блочные, в нормальном HTML потоке располагаются друг за другом в вертикальном порядке. При этом, по умолчанию ширина блока занимаем все доступное место, относительно страницы или родительского элемента. В свою очередь, строчные элементы располагаются друг за другом в горизонтальном порядке.

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

Соответственно, если речь идет о нормальном HTML потоке, все блоки div будут располагаться друг под другом, а span в линию.

Как вы понимаете, строчными элементами не получится создать нормальную разметку для сайта. Поэтому несколько лет назад, на смену табличной верстке, решили применять верстку на основе блоков DIV.

DIV верстка сайта

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

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

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

Как вы видите на картинке, для верстки макета у нас используются следующие основные блоки:

• MAIN
• header
• nav
• content
• footer

Блок Main используется как контейнер для всего содержимого. Header — шапка сайта. Nav — блок навигации. Content — основная информация и контент. Footer — подвал сайта.

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

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

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

HTML каркас

Если пропустить все служебные теги, то каркас нашего сайта будет выглядеть вот так.

<div>
<div>Шапка</div>
<!--header-->
<div>
<div>Контент</div>

<div>Навигация</div>
<!--nav-->

</div>
<!--main-->

</div>
<!--wrapper-->
<div>Подвал</div>
<!--footer-->

Для каждого блока у нас назначен класс. С его помощью мы будет задавать стили для блока — это поможет нам добиться нужного расположения на странице.

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

CSS стили

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

Float

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

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

Свойство float имеет четыре значения: none, right, left, inherit.

Нас интересует значение «слева» и «справа».

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

В нашем случае, для блока навигации мы должны указать значение left, а для основного контента значение right. Вот как это будет выглядеть в файле стилей:

.nav {
float:left;
}

.content {
float:right;
}

Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float.

Отступы в CSS: margin и padding

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

Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN, имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main, свойство margin. Оно отвечает за внешние отступы блока.

Свойство margin имеет следующие значения: [значение | проценты | auto] {1,4} | inherit.

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

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

.main {
margin-top:10px;
}

Теперь наш блок main будет иметь верхний отступ в 10 пикселей.

Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.

За это отвечает свойство padding, имеющее следующие значения: [значение | проценты] {1, 4} | inherit

Здесь тот же принцип, что и со свойством margin — можно задавать отступ для каждой стороны отдельно.

Давайте для начала отодвинем ссылки в навигации от левого края на 15 пикселей. Затем текст в блоке контента на 20 пикселей от правой стороны. В итоге наш CSS код немного дополнится:

 

.nav {
float:left;
padding-left: 15px;
}

.content {
float:right;
padding-right: 20px;
}

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

Видео к статье:

Заключение

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

Наши рекомендации

Как удалить страницу в инстаграм.

Создаем кнопки для сайта онлайн.

Популярные тэги в инстаграм.

Стоит почитать

Зачем искать информацию на других сайтах, если все собрано у нас?

Все для создания сайтов. Web-forSite.ru

В последнее время очень много было рассказано о превосходстве блочной верстки над простой табличной. Скорость загрузки страниц растет в несколько раз, код становится логичнее и понятнее. И вообще, каждый считающий себя хорошим HTML-верстальщиком, просто обязан верстать div-ами для того, чтобы на него потом не тыкали пальцем, посмеиваясь. Специально для HTML-верстальщиков без опыта мы подготовили видео- уроки div-верстки. В процессе их вы повысите свой профессионализм: Разберетесь, как должен выглядеть достойный psd-макет сайта и как анализировать его. Научитесь применять программы Photoshop и Dreamweaver для верстки сайта. Изучите основы CSS и HTML. Познакомитесь с разными плагинами для браузеров, облегчающими работу верстальщика. Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8 Урок 9 Урок 10 Урок 11 Урок 12 Урок 13 Урок 14

Блочная верстка тегов div HTML

Еще каких-то десять лет назад в рунете наиболее часто использовалась так называемая табличная верстка. Ввиду того что стандарты некоторых браузеров значительно отличались друг от друга, приходилось искать решение, которое бы позволило правильно отобразить интернет-документ во всех приложениях. Но время шло, развивались стандарты, и на смену достаточно жесткой и негибкой табличной пришла хорошо изменяемая и отзывчивая блочная верстка. Во главе угла такой технологии лежит принцип использования элементов <div>. HTML-документы в большинстве своем начали строиться на основе отдельных блоков, которые, в отличие от табличной верстки, могут быть независимыми друг от друга.

Возникновение

Усложнение веб-страниц и развитие компьютерной техники привело к тому, что веб-документ был разделен на две части — каркас (HTML-код) и оформление (таблицы стилей). Благодаря этому удалось достичь небывалого развития веба, результаты которого мы сейчас можем лицезреть на большинстве современных сайтов. Кроме улучшения процесса разработки <div> HTML позволил определить для каждого отдельного элемента свои правила оформления. Это способствовало улучшению читаемости кода веб-страницы и уменьшению времени загрузки документа. Теперь поисковые машины гораздо быстрее и лучше обрабатывают информацию, доступную на сайте.

Стандарты и проверка

Тег <div> в HTML используется в строгом соответствии со стандартами W3C (Консорциума всемирной паутины). Проверка кода страницы проводится специальным инструментом — валидатором, который парсит (сканирует и ищет) всевозможные ошибки на странице. Валидная страница означает, что все теги были использованы правильно и полностью отвечают требованиям стандартов.

Теги <div> позволяют создавать блоки или, как их еще называют, контейнеры. При этом отдельные элементы могут вкладывать друг в друга, создавая при этом структуры необходимой конфигурации и сложности. Использование тега <div> без сопровождения классом или идентификатором практически не встречается. Это обусловлено «безликостью» элемента. Если ему не присвоить класс, то в итоге все контейнеры будут иметь идентичную конфигурацию.

Для того чтобы создать действительно правильный документ, необходимо использовать следующую структуру тега <div> class= «какое-то_имя». Обращаясь по имени класса, в таблицах стиля можно определить положение, размер, подведение и другие параметры отдельного блока в документе.

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

Блок <div> HTML может определяться как идентификатором id, так и классом class. Отличие первого от второго в том, что id используется на странице документа только один раз. То есть его используют для определения уникальных элементов, которые более нигде не повторяются в коде страницы. Атрибут класса позволяет применять те же правила стилей к нескольким элементам. Такой подход значительно упрощает разработку и поддержку кода. Кроме того, один объект может иметь одновременно несколько классов. Для правильного распознания их просто разделяют пробелами.

Естественно, блочная структура документа вовсе не подразумевает использование только лишь одних тегов <div>. В структуре любой интернет-страницы всегда будут и другие элементы. Кроме того, сам по себе блочный элемент <div> может иметь совсем другой вид отображения. Делается это при помощи свойства display. Элемент может иметь строчное или даже табличное отображение, что позволяет значительно увеличить гибкость использования блока и создать сайт любой конфигурации.

Тег <div>. HTML-свойства

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

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

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

Позиционирование блоков

Использование атрибута position позволяет изменить метод позиционирования выбранного элемента. Так, существует три типа позиционирования:

• Статическое (static) — используется по умолчанию. В этом случае элемент располагается в соответствии с позицией в HTML-коде.
• Относительное (relative). В данном случае расположение объекта рассчитывается так же, как и в случае со статическим позиционированием, но данное свойство позволяет изменять позицию для дочерних элементов.
• Абсолютное (absolute). Положение его рассчитывается относительно элемента с относительным позиционированием.

Другие атрибуты

Для изменения позиции относительно точки начала координат используются атрибуты top и left. Значения могут быть как положительными, так и отрицательными. Ширина и высота блочного элемента задается атрибутами width и height соответственно. Если они не были указаны в таблицах стилей, то блок будет занимать всю ширину родительского элемента. Если контент блока не помещается по всей ширине «родителя», то тогда поведение элемента определяется атрибутом overflow.

Надеемся, данная стать помогла разобраться с вопросом о том, что такое <div> в HTML.

PavelDev: DIV верстка

Давненько о WEB-разработке ничего не писал – надо приступить к этому. Про CSS вы уже знаете, но сегодня нам css-стили не понадобятся, в следующий раз будем использовать. А сегодня я только расскажу о верстке HTML-страниц с помощью DIV-элементов. Дам небольшие примеры.

Вообще, что такое верстка? Грубо говоря это расположение элементов соответственно с эскизом сайта. Если у нам задали (или мы хотим) чтобы у нас был на сайте основной блок информации и дополнительный (с боку) – то так и должно быть. Мы должны сверстать там, чтобы информация появлялась по центру (основная) и сбоку (дополнительная).

Раньше эту задачу решали с помощью таблиц (TABLE в HTML). Таблица – это элемент, в котором есть строки, столбцы и ячейки. Можно всю страницу разделить на большое количество ячеек (каждую из которых – также можно разделить на ячейки). И в эти ячейки помещать необходимые объекты. В принципе – просто.

Но объем кода в несколько раз возрастает. И для его понимания требуется много ресурсов. Так что на смену табличной верстке пришла блочная (DIV) верстка. Все объекты разделяются на блоки (с помощью DIV-тегов) и из этих блоков мы и будем конструировать наши странички, изменять их цвет и тд.

По умолчанию блок занимает все отведенное ему от левой границы до правой (высотой блок именно столько, сколько занимает объект в нем). Но такую растяжку можно исправить, это делается с помощью CSS (в следующий раз расскажу). И теперь небольшой пример HTML-странички с DIV-версткой:

<html>

<head>

            <title>DIV верстка:</title>

</head>

<body>

            <hr>

            <div>

                        Первый блок

            </div>

            <hr>

            <div>

                        Второй блок

            </div>

            <hr>

            <div>

                        Блок побольше<br>

                        Из нескольких строк<br>

                        Высота — всего 4 строки<br>

                        А ширина — весь дисплей<br>

            </div>

            <hr>

            <div>

                        Еще блок

                        <div>

                                   &nbsp&nbsp&nbspПодблок

                        </div>

            </div>

            <hr>

            <div>

                        Класс отдельный, но стиль берется из класса C1

            </div>

            <hr>

</body>

<html>

Все просто, есть несколько блоков. В блоках можно объявлять другие блоки. И еще одна особенность у DIV-блоков. У них можно объявить идентификатор (ID) и класс (CLASS). С помощью названий, которые стоят после ID или CLASS можно в CSS обращаться к данным блокам и изменять их внешний вид.

Отличие следующее – ID уникален, CLASS – может повторяться. Обычно идентификатор применяется для блоков страницы (верхняя часть, центральная, боковая и нижняя), а классы – применяются к повторяющимся блокам типа P, H и тд.

В следующий статье я приведу описание примера, в котором будет создана очень простая верстка без картинок (для упрощения понимания). А для тех, кому дорого свое время на изучение данной темы (и особенно для тех, кто проживает в нашей Северной Столице) – говорю что сайт в спб — это недорого и довольно быстро. По ссылке можете перейти на ресурс, который предлагает геогрифически-ориентированные услуги по созданию сайтов (в данном случае – для жителей Петербурга). Цены хорошие, переходите – и все сами узнаете.Макет

Div против макета таблицы

Большинство веб-дизайнеров напрямую выбирают макет на основе таблиц для своих веб-сайтов. Причина этого в том, что создать веб-страницу проще, чем собираетесь использовать макет на основе div, или веб-дизайнеры не так хорошо знакомы с CSS. Но у него много недостатков.

Размер страницы увеличится на

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

В то время как в макете Div это только один тег Div, все стили могут быть объявлены в файлах CSS, которые уменьшают размер веб-страницы.

Отрисовка страницы будет медленной

Отрисовка страницы будет медленнее в макете на основе таблицы, потому что содержимое страницы не будет отображаться до тех пор, пока не будет достигнут конечный тег таблицы. Но в макете на основе Div рендеринг будет быстрее, так как он не будет ждать конечного тега для отображения содержимого.

Сложно поддерживать

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

Нет согласованности на страницах

В макете Div будет согласованность на всех страницах, но в макете таблицы если мы пропустим какой-либо параметр, такой как table-border, padding или что-то еще, весь контент будут изменены и не будут соответствовать всем страницам.

Разделение содержимого и визуальной презентации

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

Инструменты поисковых систем

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

Макет Div — без кода

1. …
2. …
3. …
4. …
5. …
   
   

Макет стола — Подробнее Код

1. ….
   …	…	…
   …

   
   

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

Так что выбирайте макеты Div вместо макета таблицы. Использовать макет таблицы только для отображения табличная информация и не во всех областях. Макет веб-страницы

div | Дайджест веб-дизайна

тегов