Библиотека Интернет Индустрии I2R.ru

• Предыдущий материал - Основы web-дизайна. Фреймы

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

HTML предлагает нам урезанную версию этой техники: пользуясь специальными контейнерами, мы можем позиционировать прямоугольные блоки контента поверх базовой страницы, иногда даже в несколько слоёв, и менять их порядок.

Синтаксис

HTML предлагает несколько синтаксисов описания слоёв. Мы поговорим о единственном из используемых контейнеров, распознаваемом в этом качестве обоими браузерами: контейнере <DIV>.

В общем виде он записывается примерно так:

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

Теперь подробнее. Параметр id определяет уникальный идентификатор объекта (контейнера) <DIV>, иначе говоря, задаёт имя слоя. Дальше идёт описание стиля объекта: кроме непривычного синтаксиса, который мы рассмотрим во время уроков, посвящённых CSS, там всё должно быть достаточно ясно, за исключением, пожалуй, двух параметров.

Запись position:absolute определяет тип позиционирования объекта. Вдаваться в подробности мы сейчас не будем, достаточно понять, координаты, приведённые чуть дальше в том же стиле, жёстко заданы для верхнего левого угла слоя, а точка отсчёта привязана к верхнему левому углу документа (бордюр и тулбары окна браузера не в счёт).

Запись z-index:0 задаёт порядок следования слоёв. Слой с меньшим индексом находится ниже, с большим -- выше.

А ещё слои можно «включать» и «выключать», то есть по желанию делать их то видимыми, то невидимыми: именно так, кстати, работают динамические меню. Но об этом мы поговорим попозже.

top

Заключение

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

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

На сегодняшний день -- при условии, что вы занимались самостоятельно -- вы уже ЗНАЕТЕ основы языка HTML. Я ничего не говорил о таблицах? Просмотрите ровно пять строк спецификации, посвящённые этим непостижимым объектам. ;-)

Впереди практические советы по вёрстке страниц, и вот там уж мы поговорим и о королях, и о капусте: сейчас достаточно было понять, из чего сделан HTML. Эти уроки прежде всего рассчитаны на думающих людей. То есть на вас.

• Предыдущий материал - Основы web-дизайна. Фреймы