Введение
В конце прошлого века и самом начале нынешнего сайтостроители работали в тяжёлых условиях: медленный Интернет ограничивал творческие порывы, а каждый браузер требовал особого программирования.
Сейчас времена изменились. Во-первых, медленные аналоговые модемы сменяются быстрыми цифровыми, во-вторых, война браузеров, наконец, закончилась и заменилась позитивной конкуренцией: теперь производители пытаются обогнать друг друга в наиболее полной и точной поддержке стандартов W3C.
Иными словами:
- скорость Интернета возросла;
- браузеры стали поддерживать стандарты.
В соответствие с этим дизайнеры по всему миру стали по-другому строить свои сайты. В настоящее время стало, наконец, возможным изолировать визуальный образ сайта (в файле CSS) от его содержания (в файлах HTML).
Такой подход позволяет:
- Сократить объём HTML-кода за счёт удаления из тегов значительной части атрибутов (сокращение может достигнуть 50%).
- Уменьшить время загрузки страниц за счет того, что единственный файл CSS кэшируется браузером.
- Упростить работу по изменению внешнего вида сайта. Редактировать придётся единственный файл со стилевыми определениями, а не многочисленные файлы с кодами гипертекстовых страниц.
- Легко настраивать сайт на разные средства просмотра.
- Использовать гораздо больше свойств и значений 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.