Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Модель визуального форматирования

Дата:7.05.15 в 15:32
Раздел: 

модель визуального форматирования

Думаю, любой начинающий веб-мастер в первую очередь вникает в то, что любой сайт строится на базе тегов HTML. Но это еще не все. Стоит учитывать тот факт, что посредником между верстальщиком и пользователем является интернет-браузер или пользовательский агент. Для корректной работы последнего элемента были созданы правила по созданию HTML файлов:

  1. Чтение кода машиной осуществляется сверху вниз и никак иначе;
  2. Все теги на странице располагаются по принципу блочной системы. Соответственно и сами теги имеют очертания прямоугольного блока;
  3. Каждому блоку присваивается свои ширина и высота;
  4. Блоки разделяются на родительские и дочерние элементы;
  5. Позиция по умолчанию нового блока начинается от нижнего левого угла своего родителя;
  6. Расположение блоков на прямую зависит от положения соседних.

Именно о разборе этих постулатов пойдет речь в данной статье.

На заметку начинающему веб-мастеру!

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

Визуальный браузер

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

пример полосы прокрутки на сайте

Блок HTML-файла

Опираясь на спецификации CSS, можно констатировать, что скелет веб-ресурса состоит из прямоугольных составляющих, которые называются чаще всего блоками. Для закрепления и лучшего разъяснения данного тезиса воспользуемся следующим примером:

<html>
<body>
   <p>Абзац с важной информацией.</p>
   <ul>
      <li>Первый тезис</li>
      <li>Второй тезис</li>
   </ul>
</body>
</html>

Для улучшения визуализации следует еще добавить отступы и присвоить каждому блоку свой цвет. В результате получим:

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

А вот реальный пример того, как простейшая блочная система на практике превращается в стильный дизайн:

пример блочной системы

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

Контейнер

Контейнер – это особый блок, который внутри себя содержит еще несколько блоков. Язык HTML позволяет нам достаточно просто отличить их от обычных блоков: это те теги, которые могут открываться и закрываться. К примеру ul (<ul></ul>), div (<div></div>), strong (<strong></strong>) и p (<p></p>). В тоже время <img/> не является контейнером.

Также существует отдельный класс элементов HTML страницы, который носит название Replaced element («Замещаемые элементы» на русском). К таким элементам относят ту часть кода, которая при отображении заменяется другой информацией, отличающейся от исходной. К таким элементам относятся <img/>.

Оценок: 3 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)