Введение

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

Сейчас времена изменились. Во-первых, медленные аналоговые модемы сменяются быстрыми цифровыми, во-вторых, война браузеров, наконец, закончилась и заменилась позитивной конкуренцией: теперь производители пытаются обогнать друг друга в наиболее полной и точной поддержке стандартов W3C.

Иными словами:

  • скорость Интернета возросла;
  • браузеры стали поддерживать стандарты.
 

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

Такой подход позволяет:

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

Начинающий сайтостроитель, берясь за своё дело, сразу начинает проклинать браузеры, думая нехорошими словами об их разработчиках. На картинках-ссылках появляются «хвосты», строчный элемент вылезает за пределы своего родителя, блочный со 100% шириной включает линейку прокрутки…

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

На сайтах Web-разработчиков можно, например, встретить описание «трюка» margin: 0 auto, при помощи которого блок центрируется по горизонтали. На самом деле, это никакой не трюк, а задокументированная стандартом и логичная функциональность.

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

В разделе «Вёрстка потоком» приводятся алгоритмы работы браузера по умолчанию.

В разделе «Позиционирование» рассмотрена вёрстка при помощи блоков, размещаемых в заданных координатах.

Раздел «Плавающие блоки» демонстрирует построение макета страницы при помощи блоков float.

Шаблон HTML для проверки примеров

Примеры, которые содержатся в бумажном варианте, записаны в сокращённой форме: <BODY>содержимое примера</BODY>.

Полный шаблон страницы, в котором работают примеры, имеет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">

  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <META http-equiv="Content-Style-Type" content="text/css">
    <STYLE type="text/css">@import url(main.css);</STYLE>
    <TITLE>Заголовок окна</TITLE>
  </HEAD>

  <BODY>
Содержимое примера
  </BODY>

</HTML>
      

Указана кодировка windows-1251, а в качестве файла со стилями проставлена ссылка на файл main.css.

Для DOCTYPE выбран вариант Transitional.

Подробнее о декларации DOCTYPE