ГЛАВА 11
Свободно позиционируемые элементы
Свободно позиционируемые элементы — совсем недавнее нововведение в HTML . Фактически они появились в 1997 году, одновременно с таблицами стилей. И это не случайно: для создания свободно позиционируемых элементов используются особые атрибуты стилей, задающие координаты и размеры таких элементов.
Было сказано, что свободно позиционируемые элементы появились совсем недавно, но в мире компьютерных вообще и интернет-технологий в частности время летит очень быстро, и пять лет истории какоголибо нововведения — это целая эпоха. Однако до сих пор свободно позиционируемые элементы не снискали особой популярности у Web -дизайнеров. И автор не знает, в чем причина: консерватизм Web -дизайнеров или неприспособленность этих элементов к применению в Web -дизайне.
Однако потенциал свободно позиционируемых элементов очень велик. В самом деле, они позволяют полностью освободиться от "потока" текста, расположить фрагменты содержимого страницы так, как нужно Web -дизайнеру, без оглядки на ограничения таблиц и фреймов. При этом фрагменты могут располагаться друг относительно друга как угодно и даже перекрывать друг друга, чего никак не удастся сделать, используя таблицы. И все это великолепие достигается столь компактным HTML -кодом, что свободно позиционируемые элементы оказываются вне конкуренции.
У свободно позиционируемых элементов есть еще одно неоспоримое преимущество: они предоставляют Web -дизайнеру полнейший контроль над Web -страницей. Используя специально написанные сценарии, разработчик может заставить отдельные элементы страниц двигаться, создавая впечатляющие анимационные эффекты. (Вы, наверно, часто встречали на некоторых страницах анимированные курсоры мыши. Это как раз свободно позиционируемые элементы, "наученные" двигаться за мышью.) Идя дальше, программист (именно так, не Web -дизайнер, а Web -программист!) может создать на странице строку меню с выпадающими подменю и, в конце концов, превратить Web -страничку в подобие окна Windows -приложения. Один знакомый автора написал, таким образом, целую информационную систему — поверьте, это впечатляет!
Но хватит пустых восторгов! Давайте трезво посмотрим на свободно позиционируемые элементы и выясним, что они собой представляют.
Введение в свободно позиционируемые элементы
Прежде всего нам необходимо выяснить, как создаются свободно позиционируемые элементы страниц. И рассмотрим мы это на небольшом примере, который сделаем вручную, не прибегая к помощи Dreamweaver . Это позволит нам лучше понять, что такое свободно позиционированные элементы, "подержать" их в руках.
Но сначала — немного теории. Куда же без нее...
Что такое свободно позиционируемый элемент
Давайте возьмем какойнибудь элемент страницы и рассмотрим его. Неважно, будет ли он фрагментом текста, изображением, фильмом или элементом управления ActiveX . С точки зрения Web -обозревателя, все они одинаковы (до известного предела, разумеется). Неважно, будет ли рассматриваемый нами элемент страницы помещен в основной "поток" текста, вынесен во фрейм или "втиснут" в ячейку таблицы. И первый, и второй, и третий способы никак не позволяют реально "освободить" элемент страницы, а только создают видимость этой свободы.
Откройте какуюнибудь страницу, сделанную ранее, и выберите любой ее элемент. Что он такое? Часть содержимого этой страницы. Его размерами управляет Web -обозреватель, основываясь на размерах его родителя, иначе говоря, на размерах свободного пространства, которое можно под него выделить. Точно так же дело обстоит и с позиционированием элемента страницы — оно зависит от размеров и месторасположения его "соседей" и его родителя. А они, в свою очередь, зависят от размера окна Web -обозревателя. Как видите, способа точно контролировать размеры и координаты элемента страницы не существует — все эти параметры зависят от множества факторов, исключить которые обычным способом невозможно.
Конечно, Web -дизайнеры пытаются как-то ограничить действие этих факторов. Они форматируют страницы с использованием таблиц разметки, в результате чего получают более полный контроль над параметрами отдельных элементов страниц. Однако это не более чем выдумки, на которые,как говорится, голь хитра. Каждый элемент страницы в любом случае зависит от своих "соседей".
Выход: убрать этих "соседей" подальше! "Переселить" элемент страницы из "коммунальной" в "отдельную" квартиру!
Представьте себе, что, помещая на Web -страницу фрагмент текста или изображение, вы задаете его координаты и размеры, руководствуясь только своими нуждами, не принимая во внимание "соседей". А если ваш элемент и "наползет" на тот или иной соседний элемент, ничего страшного не произойдет — он его просто перекроет. (Вы даже можете специально перекрывать одним элементом страницы другие.) Такой "освобожденный" элемент страницы так и называется — свободно позиционируемый или просто свободный. Он не только вынесен за пределы "потока" текста, но и не зависит от "соседей".
Какими же параметрами свободно позиционируемого элемента можно управлять? А вот какими:
координатами его левого верхнего угла;
геометрическими размерами;
слоем (уровнем), или z -индексом;
видимостью или невидимостью;
Поведением в случае, если содержимое этого элемента выйдет за его размеры;
Некоторыми другими, о которых будет рассказано ниже.
О z -индексе нужно рассказать подробнее. Предположим, что все созданные нами на странице свободно позиционируемые элементы "сложены" в своеобразную "стопку". И не просто "сложены", а еще и пронумерованы в порядке "снизу" "вверх". При этом, как вы поняли, элементы с большими номерами перекрывают элементы с меньшими номерами. Так вот этот номер в воображаемой "стопке" и есть z -индекс.
Внимание!
Свободно позиционируемый элемент в любом случае перекрывает обычное содержимое страницы , лежащее в " потоке " текста .
Как видите, вы можете задать для свободного элемента довольно много параметров. Вы даже можете сделать его видимым или невидимым, что часто используется в анимации и при создании различного рода спецэффектов. Кроме того, это пригодится, если вы будете программировать для своей страницы интерфейс, аналогичный интерфейсу Windows -приложения.
Отдельно хотелось бы остановиться на одной особенности свободных элементов. Как вы поняли, они могут содержать внутри себя некое содержимое, т. е. могут являться родителями для других элементов. Так вот: можно задать поведение такого свободного элемента в случае, если его содержимое перестанет в нем помещаться. Вы можете задать, появится ли в элементе-родителе полоса прокрутки или не помещающееся в нем содержимое будет "отрезано". Таким образом, вы можете создавать своеобразные "документы в документе" без использования фреймов.
И еще. Свободно позиционируемый элемент может содержать внутри себя другие свободно позиционируемые элементы. Во многих случаях это может быть полезным.
