Блочные макеты сайта



Блочная верстка начинается как и табличная с основы страницы HTML.

<html> <head> <title>Блочный макет</title> </head> <body> </body> </html>

Блочная верстка идет между тегами <body> </body>. Каждый элемент страницы (картинка, абзац текста, таблица, список и т.д. называется блоком. В предыдущем уроке мы уже знакомились со свойствами блочных элементов. Блоки по-умолчанию всегда располагаются один под другим. Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы.



Рамка (border) — можно установить толщину, цвет и тип линии.
Поля (padding) — отделяют блок от его рамки, чтобы текст не прилипал к стенкам блока.
Отступы (margin) — это пустое пространство между различными блоками.
Содержимое блока всегда имеет рамку. Она может быть видимой или невидимой. Если толщина равна нулю, то она невидима. Поля, рамки могут иметь отступы или прижиматься к ним. Это позволяет регулировать размещение блоков на странице. Достаточно задать значения отступам и полям.





Мы уже знаем, что атрибутами тега DIV являются:

Внимание!
Тег div закрывающийся!
  • id — атрибут, позволяющий придать тегу уникальное значение и используется только один раз.
  • class — атрибут, который можно используют для нескольких элементов.

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

На уроке "Универсальный табличный макет" мы присваивали идентификатор строкам таблицы. Давайте присвоим те же названия идентификаторов нашим блокам. Здесь мы также будем работать с таблицей стилей.

Обязательным условием является присоединение таблицы стилей <link href="css/style.css" rel="stylesheet" type="text/css" /> к HTML странице.


Пример записи кода:

    Таблица стилей CSS

<html> <head> <title>Блочный макет</title> <link href="../Poleznoe/Les_Maket_saita/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="conteiner"> <div id="header"> <div align="center"><img src="img_maket/logo1.png" alt="" width="100" height="100" align="left">Здесь ваш логотип</div> <div align="center" id="hed">Шапка</div> </div> <div id="menu"> <h1>Меню</h1> </div> <div id="content"> <h1>Это пример блочного макета сайта </h1> </div> <div id="clear"></div> <div id="footer"> <div align="center"><strong><em>Здесь - низ сайта</em></strong><br></div> </div> </div> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


В таблице стилей CSS дано подробное описание каждого свойства. Но есть некоторые нюансы:

  • Блоку с id="conteiner" задаем ширину равную 800px, a margin:0 auto; центрирует блок и всё его содержимое.
  • Блок id="content" делается таким же образом как и шапка, но чтобы блок тянулся вниз с увеличением контента (текста), фиксированная высота height убирается.
  • Для того, чтобы блок #menu примыкал к левой стороне используем float:left.
  • Добавляем id="clear" и задаем свойство clear:both; - запрещающее обтекание с двух сторон. Или как говорят прижать к низу footer.

Для того, чтобы преобразовать фиксированный макет в резиновый, достаточно в свойствах для блока с id="conteiner" задать ширину width 100%. Так же как и в случае с табличным макетом.



    Таблица стилей CSS

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Далее рассмотрим: CSS правильное сокращение.