Артефакт

Урок 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. Объектная модель документа

Новости раздела

4 августа 2008 г.
Copy Editing: последняя часть

Ещё на сайте

Библиотека
Языки
Друзья
Канада
Авторский угол

Интернет

CPAN
Citforum
W3C.org
useit.com
Типомания
Code Charts
ру/ководство
Лаборатория dk
WebReference.com
Спецификация Perl
Заметки HTML-кодера
Анатомия Adobe Photoshop
The Apache Software Foundation


Рейтинг@Mail.ru

wordpress statistics

Рейтинг@Mail.ru