"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка сайта
Примеры PHP
Графика
Оптимизация сайта
Полезное
Реклама на сайте:






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


папка digest

Вёрстка сайта. Статья №3

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

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

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

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

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

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

На данный момент самый популярный тип верстки — это блочная верстка. При таком подходе вся веб-страница состоит из блоков, а если говорить профессиональным языком, то из тега DIV. Так же это можно назвать “слоями” так как элементы могут входить друг в друга, тем самым образовывая иерархическую структуру. Тег DIV служит основным строительным элементом который в свою очередь содержит другие элементы страницы такие как текст и изображение. Основными достоинствами блочной верстки является:

  • Краткость кода
  • Гибкость настройки элементов
  • Легкость масштабирования и поддерживания кода

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

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

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. То есть, HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней.

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

Что бы понять основные принципы построения веб-страницы основывающейся на блочной верстке давайте попробуем потренироваться на практике.


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

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

На примере показано что он состоит из 4 элементов. Сразу будем учиться использовать HTML5 по этому наша разметка будет состоять из: 1) — header 2) — aside 3) — div id=”content” и 4) — footer. Вы должны понять, что данные элементы ни чем не отличаются от обычного тега div и используются только для удобства чтения кода.

В результате у нас получиться такая разметка:

Код в документе HTML

<header>
<!-- header (шапка сайта) -->
</header>
<aside>
<!-- aside (Блок навигации) -->
</aside>
<div id="content">
<!-- div (Основной контент страницы) -->
</div>
<footer>
<!-- footer (низ сайта) -->
</footer>

<div id="content"> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри table. Назначение дочерних контейнеров должно быть понятно


Теперь добавим файл CSS, код которого приведён ниже и наши контейнеры примут необходимую форму

Код в документе HTML

    header
	{
		width: 400px;
		height: 40px;
		background: Grey;
	}
	aside
	{
		display: inline-block;
		width: 132px;
		height: 184px;
		background: #0026FF;
	}
	#content
	{
		display: inline-block;
		width: 230px;
		height: 184px;
		background: #0026FF;
	}
	footer
	{
		width: 400px;
		height: 40px;
		background: #808080;
	}


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

 



Создано: 18.10.2020.|Обновлено: 22.12.2022.