Урок 7. Слои
Странная вещь веб-дизайн: разных ограничений и запретов в нём значительно больше, чем возможностей. Скажем, в любой программе для создания графики можно накладывать объекты друг на друга, создавая многослойные структуры, менять порядок следования и взаимное расположение слоёв, короче говоря — некоторым образом выходить из плоскости страницы в третье измерение.
HTML предлагает нам урезанную версию этой техники: пользуясь специальными контейнерами, мы можем позиционировать прямоугольные блоки контента поверх базовой страницы, иногда даже в несколько слоёв, и менять их порядок.
Синтаксис
HTML предлагает несколько синтаксисов описания слоёв. Мы поговорим о единственном из используемых контейнеров, распознаваемом в этом качестве обоими браузерами: контейнере <DIV>.
В общем виде он записывается примерно так:
<DIV id="имя_слоя"
style="position:absolute; left:0; top:0; width:637px;
height:266px; z-index:0">
...
</DIV>
Область, ограниченная этим контейнером, получает независимость в пределах окна браузера и может быть размещена где угодно в этом окне поверх основной страницы или под ней (к слову сказать, второе в Netscape сработает только в том случае, если основную часть контента мы тоже оформим как слой).
Теперь подробнее. Параметр id определяет уникальный идентификатор объекта (контейнера) <DIV>, иначе говоря, задаёт имя слоя. Дальше идёт описание стиля объекта: кроме непривычного синтаксиса, который мы рассмотрим во время уроков, посвящённых CSS, там всё должно быть достаточно ясно, за исключением, пожалуй, двух параметров.
Запись position:absolute определяет тип позиционирования объекта. Вдаваться в подробности мы сейчас не будем, достаточно понять, координаты, приведённые чуть дальше в том же стиле, жёстко заданы для верхнего левого угла слоя, а точка отсчёта привязана к верхнему левому углу документа (бордюр и тулбары окна браузера не в счёт).
Запись z-index:0 задаёт порядок следования слоёв. Слой с меньшим индексом находится ниже, с большим — выше.
А ещё слои можно 'включать' и 'выключать', то есть по желанию делать их то видимыми, то невидимыми: именно так, кстати, работают динамические меню. Но об этом мы поговорим попозже.
Заключение
Следующий урок я хочу посвятить объектной модели документа HTML. С этого момента начнётся систематический подход к изучению структуры веб-страницы, и многие уже описанные вещи будут рассмотрены заново на качественно ином уровне.
Спеша перейти к более серьёзным вещам, я потратил очень немного времени на описание фреймов и слоёв. Тем не менее, так и нужно было поступить: обе темы не заслуживают долгих рассуждений, достаточно того, что вы попробуете применить полученные знания на практике хотя бы один раз, но уж это совершенно необходимо: иначе дальше будет действительно сложно.
На сегодняшний день — при условии, что вы занимались самостоятельно — вы уже ЗНАЕТЕ основы языка HTML. Я ничего не говорил о таблицах? Просмотрите ровно пять строк спецификации, посвящённые этим непостижимым объектам. ;-)
Впереди практические советы по вёрстке страниц, и вот там уж мы поговорим и о королях, и о капусте: сейчас достаточно было понять, из чего сделан HTML. Эти уроки прежде всего рассчитаны на думающих людей. То есть на вас.
До встречи!
Урок 6. Фреймы | Урок 8. Объектная модель документа
наверх
| 
