Что такое свободно позиционируемый элемент

Давайте возьмем какой-нибудь элемент страницы и рассмотрим его. Неважно, будет ли он фрагментом текста, изображением, фильмом или элементом управления ActiveX. С точки зрения Web-обозревателя, все они одинаковы (до известного предела, разумеется). Неважно, будет ли рассматриваемый нами элемент страницы помещен в основной "поток" текста, вынесен во фрейм или "втиснут" в ячейку таблицы. И первый, и второй, и третий способы никак не позволяют реально "освободить" элемент страницы, а только создают видимость этой свободы.

Откройте какую-нибудь страницу, сделанную ранее, и выберите любой ее элемент. Что он такое? Часть содержимого этой страницы. Его размерами управляет Web-обозреватель, основываясь на размерах его родителя, иначе говоря, на размерах свободного пространства, которое можно под него выделить. Точно так же дело обстоит и с позиционированием элемента страницы — оно зависит от размеров и месторасположения его "соседей" и его родителя. А они, в свою очередь, зависят от размера окна Web-обозревателя. Как видите,'способа точно контролировать размеры и координаты элемента страницы не существует — все эти параметры зависят от множества факторов, исключить которые обычным способом невозможно.

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

Выход: убрать этих "соседей" подальше! "Переселить" элемент страницы из "коммунальной" в "отдельную" квартиру!

Представьте себе, что, помещая на Web-страницу фрагмент текста или изображение, вы задаете его координаты и размеры, руководствуясь только своими нуждами, не принимая во внимание "соседей". А если ваш элемент и "наползет" на тот или иной соседний элемент, ничего страшного не произойдет — он его просто перекроет. (Вы даже можете специально перекрывать одним элементом страницы другие.) Такой "освобожденный" элемент страницы так и называется — свободно позиционируемый или просто свободный. Он не только вынесен за пределы "потока" текста, но и не зависит от "соседей".

Какими же параметрами свободно позиционируемого

Какими же параметрами свободно позиционируемого элемента можно управлять? А вот какими:

координатами его левого верхнего угла;

геометрическими размерами;

слоем (уровнем), или z-индексом;

видимостью или невидимостью;

поведением в случае, если содержимое этого элемента выйдет за его размеры;

некоторыми другими, о которых будет рассказано ниже.

z-индексе нужно рассказать подробнее. Предположим, что все созданные нами на странице свободно позиционируемые элементы "сложены" в своеобразную "стопку". И не просто "сложены", а еще и пронумерованы в -порядке "снизу" "вверх". При этом, как вы поняли, элементы с большими номерами перекрывают элементы с меньшими номерами. Так вот этот номер в воображаемой "стопке" и есть z-индекс.

Внимание!

Свободно позиционируемый элемент в любом случае перекрывает обычное содержимое страницы, лежащее в "потоке" текста.

Как видите, вы можете задать для свободного элемента довольно много параметров. Вы даже можете сделать его видимым или невидимым, что часто используется в анимации и при создании различного рода спецэффектов. Кроме того, это пригодится, если вы будете программировать для своей страницы интерфейс, аналогичный интерфейсу Windows-приложения.

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

И еще. Свободно позиционируемый элемент может содержать внутри себя другие свободно позиционируемые элементы. Во многих случаях это может быть полезным.

Свободно позиционируемые элементы

Свободно позиционируемые элементы — совсем недавнее нововведение в HTML. Фактически они появились в 1997 году, одновременно с таблицами стилей. И это не случайно: для создания свободно позиционируемых элементов используются особые атрибуты стилей, задающие координаты и размеры таких элементов.

Было сказано, что свободно позиционируемые элементы появились совсем недавно, но в мире компьютерных вообще и интернет-технологий в частности время летит очень быстро, и пять лет истории какого-либо нововведения — это целая эпоха. Однако до сих пор свободно позиционируемые элементы не снискали особой популярности у Web-дизайнеров. И автор не знает, в чем причина: консерватизм Web-дизайнеров или неприспособленность этих элементов к применению в Web-дизайне.

Однако потенциал свободно позиционируемых элементов очень велик. В самом деле, они позволяют полностью освободиться от "потока" текста, расположить фрагменты содержимого страницы так, как нужно Web-дизайнеру, без оглядки на ограничения таблиц и фреймов. При этом фрагменты могут располагаться друг относительно друга как угодно и даже перекрывать друг друга, чего никак не удастся сделать, используя таблицы. И все это великолепие достигается столь компактным HTML-кодом, что свободно позиционируемые элементы оказываются вне конкуренции.

У свободно позиционируемых элементов есть еще одно неоспоримое преимущество: они предоставляют Web-дизайнеру полнейший контроль над Web-страницей. Используя специально написанные сценарии, разработчик может заставить отдельные элементы страниц двигаться, создавая впечатляющие анимационные эффекты. (Вы, наверно, часто встречали на некоторых страницах анимированные курсоры мыши. Это как раз свободно позиционируемые элементы, "наученные" двигаться за мышью.) Идя дальше, программист (именно так, не Web-дизайнер, а Web-программист!) может создать на странице строку меню с выпадающими подменю и, в конце концов, превратить Web-страничку в подобие окна Windows-приложения. Один знакомый автора написал, таким образом, целую информационную систему — поверьте, это впечатляет!

Но хватит пустых восторгов! Давайте трезво посмотрим на свободно позиционируемые элементы и выясним, что они собой представляют.

Как создается свободно позиционируемый элемент

Итак, мы выяснили, что такое свободно позиционируемый элемент. Осталось разобраться, как он создается.

Рассмотрим небольшую Web-страничку, содержащую фрагмент текста. Ее HTML-код приведен ниже.

<HTML>

<HEAD>

<ТITLЕ>Пример WEB-странииы</ТITLЕ>

</HEAD>

<BODY>

<Р>Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это,текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.</Р> </BODY> </HTML>

Как видите, ничего сложного в нем нет. Эта страничка специально была максимально упрощена, чтобы никакие "навороты" не отвлекали вас от главного.

Что же мы увидим, если откроем данную страничку в Web-обозревателе0 Ничего особенного: просто абзац с повторяющимся текстом. Вы можете проверить, если не верите автору на слово.

Этот текст — типичный пример фиксированного элемента страницы, находящегося в "потоке" текста и зависящего от "соседей". В данном случае, правда, никаких "соседей" нет. Однако Web-обозреватель сам решает, где и как расположить этот абзац, основываясь на свободном пространстве, которое он может ему отвести. Мы не можем поместить этот абзац там, где хочется, и дать ему нужные размеры.

Теперь преобразуем его в свободно позиционируемый элемент. Для этого просто допишем кое-какой код (в листинге он выделен полужирным шрифтом).

<HTML>

<HEAD>

<ТITLE>Пример WEB-страницы</ТITLE>

<STYLE>

#para (position: absolute; left: 50; top: 50; width: 200; height: 100;

background-color: #00FF00;}

</STYLE>

</HEAD>

<BODY>

Это текст, который будет показан в окне

Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.

</DIV>

</BODY>

</HTML>

Сохраните этот код в файле под именем 11.1.htm и откройте его в Web-обозревателе. Результат показан на рис. 11.1.

Вот мы и сделали первый свободно позиционируемый элемент. И для этого нам потребовалось внести в исходный HTML-код совсем небольшие изменения. Давайте рассмотрим их подробнее.

Прежде всего мы для создания абзаца использовали тег <DIV> вместо тега <р>. Тег <DIV> применяется для создания любого элемента страницы, фиксированного или свободно позиционируемого, содержащего внутри себя любое, простое или сложное, содержимое. В частности, его можно использовать для создания обычного текстового абзаца, что только что и было сделано. А элемент страницы, созданный с помощью тега <р>, т. е. обычный текстовый абзац, не может быть позиционирован свободно.

Затем мы дали нашему элементу уникальное имя. Назвали его para и сделали это с помощью атрибута ID, поддерживаемого практически всеми "видимыми" тегами. С помощью данного имени мы в дальнейшем зададим для этого абзаца стиль.

Такой принцип создания свободно позиционируемых элементов использовался старыми версиями Dreamweaver. Две последние версии — 4.0 и MX — применяют для этого внутренние стили, что, на взгляд автора, порождает более компактный HTML-код, но, возможно, менее наглядно.

Недостатки свободно позиционируемых элементов и их преодоление

Напоследок, по уже устоявшейся традиции, поговорим о недостатках свободно позиционируемых элементов. Итак, чем же они нам не угодили?

Прежде всего, свободно позиционируемые элементы предполагают статичный дизайн Web-страниц, не меняющийся при изменении размеров окна Web-обозревателя. Поясним это на примере. Когда вы просматриваете в Web-обозревателе обычную страницу, при изменении размеров окна, в котором она отображается, содержимое страницы также меняет размеры. Загрузите в Web-обозревателе страницу default.htm нашего первого сайта Sample site 1 и измените размеры его окна. Вы увидите, что ее содержимое "расползается" или "сужается" для того, чтобы максимально полно занять окно по ширине. А теперь загрузите только что законченную страницу default2.htm, попробуйте изменить размеры окна — и что же? Свободные элементы в любом случае остаются на своих местах, не делая попытки "подстроиться" под новые размеры., Они статичны, как гвозди, вколоченные в стену.

"Классические" Web-страницы почти всегда разрабатываются с определенным запасом "гибкости", позволяющей им подстраиваться под любой размер окна Web-обозревателя. Исключений из этого правила всего два: страницы, созданные на основе таблицы разметки фиксированной ширины, и... на основе свободно позиционируемых элементов.

В самом деле, свободные элементы всегда находятся на тех местах страницы, куда вы их поместили. Сдвинуть их с места средствами HTML абсолютно невозможно. Язык HTML не предназначен для того, чтобы описывать поведение элементов страницы при наступлении какого-либо события, например изменения размеров окна Web-обозревателя. HTML описывает внешний вид страницы — и только. Если же вы хотите, чтобы при изменении размеров окна менялся также и дизайн страницы, пишите сценарии на языке программирования JavaScript, помещайте их в HTML-код и привязывайте к соответствующим событиям. Но для этого нужно быть не только знатоком HTML и JavaScript, но и виртуозным программистом, да и в этом случае у вас может не все получиться.

Бесспорно, что в некоторых случаях статичность свободных элементов может быть даже полезна. Если вы разрабатываете стильный "авторский" дизайн, свободные элементы помогут вам сделать то, что надо, и сохранить все на своих местах. Также свободные элементы могут пригодиться для создания дизайна, напоминающего интерфейс Windows-приложений. И, разумеется, без свободных элементов не обойтись, если вы собираетесь оживить свои страницы анимацией. В других случаях, вероятно, лучше обойтись "классическими" Web-страницами.

Так, со статичностью разобрались. Какие же сюрпризы еще приготовили нам свободные элементы?

Несовместимость.

Как вы помните, свободно позиционируемые элементы возникли одновременно с каскадными таблицами стилей CSS. И программами Web-обозревателей они стали также поддерживаться одновременно: в 1997 году, начиная с четвертых версий Internet Explorer и Navigator. С более старыми версиями они не совместимы.

Что значит "несовместимы"? Не поддерживают. Содержимое свободно позиционируемых элементов они отобразят, конечно, правильно, только находиться оно будет в общем "потоке" текста. И уж, естественно, сложнейший дизайн, над которым столько дней и ночей корпел автор, исчезнет без следа. И ничего тут не сделаешь.

Конечно, в настоящее время подавляющее большинство программ Web-обозревателей, эксплуатируемых интернетчиками, составляют более-менее "свежие". Процент же старых программ настолько мал, что им можно пренебречь. Но вполне возможна такая ситуация, что вам придется делать страницы, которые обязательно должны поддерживаться всеми версиями этих программ (за исключением, может быть, самых уж древних и экзотических). Что делать в таком случае?

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

Второй путь — преобразовать свободные элементы в таблицы разметки, т. е. использовать табличный дизайн. Это решает многие проблемы. (Если, конечно, свободные элементы не являются жизненно необходимыми, например, для создания анимации.) Благо Dreamweaver предоставляет для такого решения стандартные инструменты преобразования свободных элементов в таблицы и, наоборот, таблиц в свободные элементы.

Один из таких инструментов мы уже использовали в главе 10, когда преобразовывали стили CSS в HTML-разметку. Этот инструмент доступен после выбора пункта 3.0 Browser Compatible подменю Convert меню File. На рис. 10.39 показано диалоговое окно Convert to 3.0 Browser Compatible, открывающееся после выбора названного пункта. В группе переключателей Convert мы рассмотрели только переключатель CSS Styles to HTML Markup, выполняющий упомянутое выше преобразование. А для преобразования свободных элементов в таблицы предназначен переключатель Layers to Table. Переключатель Both преобразует и то и другое.

Однако существует и другой инструмент, позволяющий выполнить более точное преобразование. Он появляется после выбора пункта Layers to Table в подменю Convert меню Modify. Точнее, не инструмент, а появляющееся при этом диалоговое окно Convert Layers to Table, показанное на рис. 11.22.

Параметры свободно позиционируемых элементов

Набор параметров свободных элементов, которые мы можем задать в Dreamweaver, весьма обширен. Все они будут представлены в редакторе свойств, когда вы выделите границу свободного элемента (рис. 11.9).

Пример использования свободно позиционируемых элементов

Напоследок рассмотрим небольшую Web-страницу, использующую свободно позиционируемые элементы для размещения содержимого. Пусть это будет новая начальная страница для нашего сайта. Разместим на ней заголовок, портрет гипотетического создателя, полосу навигации, начальный текст и сведения об авторских правах. Предположим, что мы уже разработали умопомрачительный дизайн, и перейдем сразу к следующему этапу.

Откройте панель Site Dreamweaver, если вы ее уже закрыли. Переключитесь на первый наш сайт Sample site 1. Создайте в этом сайте новую страницу по имени default2.htm. Это и будет наша новая главная страница. Откройте ее.

Автор уже не будет предлагать вам задать ее параметры, т. е. название, цвета фона, текста и гиперссылок. Это само собой разумеется. И не будет предлагать вам значения этих параметров. Примените фантазию. Единственное условие: ваше творение должно хорошо выглядеть. Хотя, вероятно, наилучший результат — следовать оформлению старой главной страницы этого сайта (помните о принципе единства оформления). Мы так и сделали.

Теперь давайте откроем старую главную страницу. Разместите окна со старой и новой главными страницами на экране так, чтобы они не перекрывали или не сильно перекрывали друг друга. Таким образом, вы будете видеть обе страницы и сможете без проблем копировать содержимое из одной страницы в другую.

Как любой театр начинается с вешалки, так и любая Web-страница начинается с заголовка. Для него мы создадим свободно позиционируемый элемент, расположенный в верхней части страницы, и назовем его Header. Просто создадим его, не заботясь о реальных размерах и местоположении. Все эти параметры мы скорректируем потом, когда будет готово все содержимое страницы.

Скопируйте со старой страницы текст заголовка в созданный нами свободный элемент. Измените тег с <р> (присваиваемый по умолчанию) на <HI> (заголовок первого уровня), выбрав пункт Heading 1 в раскрывающемся списке Format редактора свойств. Задайте для заголовка выравнивание по центру. (Как видите, текст теперь будет выровнен по центру свободного элемента.) Измените размеры свободного элемента так, чтобы он занимал минимальное пространство страницы. Результат показан на рис. 11.15.

Продолжаем работу над страницей. Давайте создадим тень для нашего свободно позиционируемого заголовка. Для этого поместим под него еще один свободно позиционируемый элемент точно таких же размеров, но не имеющий содержимого и "залитый" черным цветом. Это обычная практика в такого рода случаях.

Работа с группой свободно позиционируемых элементов

Dreamweaver, кроме всего прочего, позволяет выделить одновременно несколько свободно позиционируемых элементов и произвести над ними некоторые манипуляции. В этом случае все выделенные элементы ведут себя как одна группа.

Чтобы выделить сразу несколько свободных элементов, поступите следующим образом. Сначала выделите один из них, щелкнув на нем мышью (выделен сам элемент или его граница — значения не имеет). После этого щелкните на границах всех остальных элементов, удерживая нажатой клавишу <Shift>. Все элементы, по границам которых вы щелкнули, будут выделены. Заметьте, что маркеры изменения размеров всех этих элементов, кроме того, на котором вы щелкнули в последнюю очередь, будут иметь вид белых, а не черных квадратов (рис. 11.10).

Прежде всего, вы можете перемещать выделенные таким образом свободные элементы. При этом будет перемещаться сразу вся группа элементов.

Также вы можете изменить размеры выделенных элементов. Точнее, уравнять их ширину или высоту. Для этого выберите в подменю Align меню Modify, соответственно, пункт Make Same Width (или нажмите комбинацию клавиш <Ctrl>+<Shift>+<7>) или Make Same Height (комбинация клавиш <Ctrl>+<Shift>+<9>).

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

Работа со свободно позиционируемыми элементами

Если на вашей странице создано несколько свободно позиционируемых элементов, управлять ими удобнее всего в специальной панели. Панель Layers появляется на экране после включения пункта-выключателя Layers подменю Others меню Window или нажатия клавиши <F2>. Вы можете также щелкнуть по любому свободному элементу правой кнопкой мыши и выбрать в контекстном меню пункт Layers Panel. Сама эта панель показана на рис. 11.11.

Теперь рассмотрим, как в Dreamweaver создаются свободно позиционируемые элементы.

Свободно позиционируемый абзац текста на странице 11.1.htm

Теперь рассмотрим таблицу стилей. В ней мы использовали множество новых атрибутов, которые сейчас и рассмотрим.

Этот атрибут делает элемент страницы свободно позиционируемым:

position: absolute;

Запомните его — он обязательно должен присутствовать в определении стиля любого свободного элемента. Если у вас что-то не работает, прежде всего, проверьте, задали ли вы для данного атрибута соответствующее значение.

У обычного фиксированного элемента названный атрибут установлен в значение static. Это же его значение по умолчанию.

Эти атрибуты задают, соответственно, горизонтальную и вертикальную координаты левого верхнего угла свободного элемента:

left: 50; top: 50;

В данный момент они заданы в пикселах, хотя вы можете использовать любую из поддерживаемых CSS единиц измерений. Имейте в виду, что данные атрибуты имеют силу только для свободно позиционируемых элементов, т. е. тех, у которых атрибут position установлен в значение absolute.

Примечание

Запомните, что координаты свободно позиционируемого элемента отсчитываются относительно родителя, а не относительно окна Web-обозревателя. Поскольку в нашем случае родителем является сама-страница, это несущественно, но вообще об этом забывать не следует.

А эти атрибуты задают, соответственно, ширину и высоту свободно позиционируемого элемента:

width: 200; height: 100;

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

А теперь взгляните еще раз на рис. 11.1. Вы видите, что высота нашего свободного элемента заметно больше ста пикселов (сравните ее с шириной). Дело в том, что по умолчанию свободный элемент растягивается по вертикали, если его содержимое в нем не помещается. А у нас как раз такой случай. (Как уже говорилось, вы можете задать другое поведение, но об этом позже.)

background-color: #00FF00;

Здесь специально задан зеленый фон для свободно позиционируемого элемента, чтобы он был заметнее.

А теперь держитесь крепче! Добавлением всего одной строки в таблицу стилей мы превратим свободно позиционируемый элемент в небольшую "страничку в странице" (добавленный текст выделен полужирным шрифтом).

#para {position: absolute; left: 50; top: 50; width: 200; height: 100;

background-color: #OOFFOO; overflow : scroll }

Сохраните новый файл под именем 11.2.htm и откройте его в Web-обозревателе. И как оно вам (рис. 11.2)?

Давайте еще раз взглянем на добавленную нами строку:

overflow: scroll

overflow — атрибут, как раз и задающий поведение свободно позиционируемого элемента, когда его содержимое в нем не помещается. Значение по умолчанию — auto — заставляет элемент растягиваться по вертикали, что мы и наблюдали в предыдущем случае. А значение scroll заставляет элемент отобразить полосы прокрутки.

Свободно позиционируемый абзац текста с возможностью прокрутки содержимого

Теперь посмотрим, как это выглядит в Dreamweaver MX, т. е. самой последней (да и в предыдущей версии — 4.0 — этот код будет выглядеть так же).

<ТITLE>Пример WEB-страницы</ТITLE>

<!— Сценарий, необходимый для нормальной работы этой Web-страницы в старых версиях Navigator —> </SCRIPT> </HEAD> <BODY>

Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.

</DIV>

</BODY> </HTML>

Этот код дает тот же самый результат, что и предыдущий. Просто выглядит более компактным, особенно если выбросить код сценария, "отвечающего" за совместимость с Navigator.

Вот и все. Как видите, превратить фиксированный элемент страницы в свободный не составляет особого труда. Нужно всего лишь задать соответствующие стили и заменить теги <р> на <DIV>. А в большинстве случаев вам даже не нужно будет более-менее серьезно переделывать дизайн ваших страниц, если, конечно, они не основаны на фреймах или таблицах.

Вопрос в другом. Так ли уж нужны нам эти свободно позиционируемые элементы?

Кнопка Draw Layer панели объектов

Однако после нажатия этой кнопки новый свободный элемент на странице не появится. Его нужно будет нарисовать примерно так же, как мы рисовали ячейки и таблицы разметки в главе 8. Поместите курсор мыши в окно документа — вы видите, что он принял вид крестика. Это значит, что теперь вы можете нарисовать свободный элемент. Щелкните мышью туда, где должен быть его верхний левый угол, и проведите мышью, не отпуская ее девой кнопки. Вы увидите, что между курсором мыши и точкой, где вы щелкнули, тянется прямоугольник, обозначающий границы вновь создаваемого элемента. После того как он примет желаемые размеры, отпустите левую кнопку мыши. Все, свободно позиционируемый элемент готов (рис. 11.4).

Свободно позиционируемый элемент в окне документа Dreamweaver

Второй способ создания свободного элемента — выбор пункта Layer меню Insert. В этом случае вам не придется рисовать в окне элемент — он появится сразу же. Вам останется только изменить его размеры и местоположение.

Посмотрите на рис. 11.4. Изображенный на нем свободный элемент в настоящий момент выбран. Текстовый курсор находится внутри него, поэтому вы сразу же можете создать какое-либо содержимое. Чтобы выйти из свободного элемента, щелкните мышью где-либо вне его. А чтобы вернуться в свободный элемент, щелкните мышью по нему (но не по его границе).

Заметьте, что граница невыбранного свободного элемента отображается тускло-серым цветом, чтобы не отвлекать вас. Если же она вам все-таки мешает, вы можете отключить показ границ невыбранных свободных элементов. Для этого отключите пункт-выключатель Layer Borders подменю Visual Aids меню Views. После этого границы невыбранных свободных элементов пропадут, однако граница выбранного элемента все еще будет видна.

Теперь щелкните где-нибудь на границе свободного элемента. Вы также можете щелкнуть внутри свободного элемента, удерживая нажатой клавишу <Shift>. Результат показан на рис. 11.5.

Свободно позиционируемый элемент с выделенной границей

Как видите, в данном случае свободно позиционируемый элемент предлагает вам набор маркеров изменения размера. Кроме того, в верхнем левом углу вы видите небольшой прямоугольник, называемый "захватом" (рис. 11.6) "Ухватившись" за него мышью, вы можете двигать свободный элемент. Точно такого же результата можно достичь, "ухватившись" мышью за саму границу элемента, но специальный "захват", согласитесь, удобнее. Щелкнув по нему, вы также сможете выделить границу свободного элемента.

Захват" свободно позиционируемого элемента

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

Значок свободно позиционируемого элемента

Чтобы удалить свободный элемент, выделите его границу и нажмите клавишу <Del>.

Вы также можете создавать свободно позиционируемые элементы, вложенные в другие свободно позиционируемые элементы. Для этого достаточно просто нарисовать или вставить новый элемент внутрь уже существующего. Пример вложенных друг в друга свободных элементов показан на рис. 11.8.

Свободно позиционируемые элементы, вложенные друг в друга (сетка временно отключена)

Вы уже знаете, что свободно позиционируемые элементы могут перекрывать друг друга. Обычно элементы, созданные позже, перекрывают элементы, созданные раньше, но вы можете изменить порядок перекрытия. Для этого выберите нужный свободный элемент и в подменю Arrange меню Modify выберите пункт Bring To Front, чтобы увеличить z-индекс элемента, или пункт Send To Back, чтобы его уменьшить. Однако эти пункты работают очень странно, и для задания z-индекса вам лучше воспользоваться другими средствами, описанными ниже.

В том же самом подменю Arrange меню Modify находится пункт-выключатель Prevent Layer Overlaps. Если он включен, Dreamweaver не позволит вам "наложить" один свободно позиционируемый элемент на другой, т. е. вы не сможете ни переместить его, ни изменить его размеры так, чтобы он перекрыл другие свободные элементы. Однако те элементы, которые уже "лежат" на других, останутся на своих местах.

Сохраните готовую Web-страницу под именем 11.3.htm.

Вид панели редактора

В поле ввода Layer ID вводится уникальное имя свободного элемента. Dreamweaver по умолчанию подставляет туда автоматически сгенерированное имя вида Layer<парядковый номер>. Если хотите, можете ввести более вразумительное имя. Вы можете также выбрать пункт ID контекстного меню свободного элемента и ввести новое имя в диалоговом окне Change Attribute.

В полях ввода L и Т вводятся, соответственно, горизонтальная и вертикальная координаты верхнего левого угла свободно позиционируемого элемента. Заметьте, что эти величины могут быть заданы в любой из единиц измерений, поддерживаемых CSS.

В полях ввода W и Н вводятся, соответственно, ширина и высота свободно позиционируемого элемента. Эти величины также могут быть заданы в любой из единиц измерений, поддерживаемых CSS.

В поле ввода Z-Index задаётся уже известный вам z-индекс, иначе говоря, порядковый номер данного свободного элемента в "стопке" других. Эта величина может быть как положительной, так и отрицательной. Свободный элемент перекрывает все элементы с меньшим значением z-индекса и перекрывается элементами с большим его значением. Кроме того, свободный элемент перекрывает обычное содержимое страницы, лежащее в "потоке" текста.

С помощью раскрывающегося списка Vis вы можете задать, будет ли свободный элемент видим на странице. Здесь доступны четыре пункта:

inherit - заставляет элемент "наследовать" видимость от, родителя, т. е. если родитель видим, видим и сам элемент, и наоборот;

visible — делает элемент видимым;

hidden — делает элемент невидимым (скрытым); ,

default — как правило, аналогично inherit.

Похожую функцию выполняет подменю Visibility контекстного меню свободного элемента. Оно содержит те же четыре пункта, что и раскрывающийся список Vis.

В поле ввода Bg Image вводится имя файла графического изображения, которое будет использовано в качестве фона. Вы также можете щелкнуть значок папки, расположенный справа от поля ввода, и выбрать нужный файл в появившемся на экране диалоговом окне Select File.

С помощью селектора цветов Bg Color задается цвет фона свободного элемента.

В раскрывающемся списке Tag выбирается тег, с помощью которого создается свободно позиционируемый элемент. Этот список содержит только два пункта: SPAN и DIV. Их назначение должно быть вам понятно. По умолчанию свободный элемент создается с использованием тега <DIV>.

Аналогичную функцию выполняет подменю Tag контекстного меню свободного элемента. Оно содержит те же четыре пункта, что и раскрывающийся список Tag.

С помощью раскрывающегося списка Overflow задается поведение свободного элемента в случае, если его содержимое в нем не помещается. Здесь доступны четыре пункта:

visible — заставляет свободный элемент растянуться по вертикали, чтобы вместить в себя все содержимое;

hidden — просто скрывает ("обрезает") ту часть содержимого свободного элемента, которая превышает его размеры;

scroll — заставляет свободный элемент отобразить полосы прокрутки независимо от того, помещается ли в нем все содержимое или нет;

auto -заставляет свободный элемент отобразить полосы прокрутки только тогда, когда его содержимое в нем не помещается;

пункт <пустая строка> — аналогичен visible (значение по умолчанию).

Пункт scroll предусмотрен для таких случаев, когда содержимое свободно позиционируемого элемента точно выверено, и появление и исчезновение полос прокрутки может его изменить. В других случаях используйте пункт auto или другие пункты.

Группа полей ввода Clip позволяет задать координаты видимой области свободного элемента. Каждый свободный элемент может иметь такую видимую область, иначе говоря, фрагмент содержимого, который виден в окне Web-обозревателя. Содержимое, не входящее в эту область, скрывается. Задание видимой области может понадобиться для создания каких-либо спецэффектов на Web-странице.

В группу полей ввода Clip входят четыре поля:

L горизонтальная координата верхнего левого угла;

Т — вертикальная координата верхнего левого угла;

R — горизонтальная координата нижнего правого угла;

В — вертикальная координата нижнего правого угла.

Группа выделенных свободно позиционируемых элементов

Для задания выравнивания используется четыре других пункта подменю Align меню Modify:

Left (комбинация клавиш <Ctrl>+<Shift>+<!>) — выравнивание по левому краю;

Right (комбинация клавиш <Ctrl>+<Shift>+<3>) — по правой стороне;

Тор (комбинация клавиш <Ctrl>+<Shift>+<4>) — по верхней стороне;

Bottom (комбинация клавиш <Ctrl>+<Shift>+<6>) — по нижней стороне.

Имейте в виду, что у свободных элементов нет никаких параметров, задающих выравнивание. Реально выравнивание производится заданием соответствующих значений параметров местоположения.

И наконец, вы можете задавать некоторые параметры сразу для нескольких свободных элементов. К таким параметрам относятся: местоположение и размеры (поля ввода L, Т, W и Н редактора свойств), видимость (раскрывающийся список Vis), тег (раскрывающийся список Tag), фоновое изображение (поле ввода Bg Image) и цвет фона (поле ввода Bg Color).

Панель Layers

Как видите, большую часть этой панели занимает список свободно позиционируемых элементов, имеющихся на странице. Данный список представляет собой таблицу, состоящую из трех колонок: изображение глаза (видимость), Name (имя свободного элемента) и Z (z-индекс). Вы можете менять размеры двух последних колонок, перетаскивая мышью границу между ними. И, разумеется, любой из элементов, перечисленных в списке, можно выбрать и произвести над ним предусмотренные в Dreamweaver манипуляции.

В верхней части панели находится флажок Prevent Overlaps. Если он включен, Dreamweaver следит, чтобы свободные элементы не перекрывали друг друга. Этот флажок аналогичен пункту Prevent Layer Overlaps, находящемуся в подменю Arrange меню Modify. Так что вы можете пользоваться либо пунктом меню, либо флажком.

Пункты списка свободных элементов выбираются так же, как пункты любого другого списка. Но, кроме того, вы можете выбрать сразу несколько элементов. Для этого выберите первый элемент обычным щелчком мыши, после чего щелкните на остальных элементах, удерживая нажатой клавишу <Shift>.

Как только вы выбираете какие-либо из элементов, они тотчас же отображаются в окне документа как выделенные. Это очень удобно — вы сразу же видите, какие именно свободные элементы вы выбрали. И, наоборот, когда вы выделяете один или несколько элементов в окне документа, они отображаются выбранными в панели Layers.

Вы можете изменить имя дюбого из свободных элементов, перечисленных в списке. Для этого используется уже знакомая вам методика: вы выбираете соответствующий пункт списка и щелкаете по нему снова в колонке Name (имя). (Возможно, щелкнуть придется дважды.) После этого вместо имени свободного элемента появится поле ввода, в котором вы сможете ввести новое имя. Не забудьте нажать клавишу <Enter> для сохранения нового имени или клавишу <Esc> — для отказа от него и возврата к старому имени.

Теперь обратите внимание на колонку Z списка элементов. Дело в том, что свободные элементы отображаются в списке в том порядке, в котором они перекрывают друг друга. Иначе говоря, они отсортированы по z-индексу. И Dreamweaver предоставляет вам несколько возможностей по изменению данного порядка.

Самый простой способ изменить порядок перекрытия — это перетащить нужный элемент на новое место в списке. При этом Dreamweaver сам изменит значения z-индексов всех свободных элементов, расположенных на странице. Увы, иногда он делает это не очень корректно; в таком случае не обойтись без ручной коррекции, о которой мы сейчас и узнаем.

Если вы хотите точно управлять перекрытием одними свободно позиционируемыми элементами других, задайте значения z-индекса вручную. Для этого также выберите нужный элемент в списке и снова щелкните по нему в колонке Z. Вместо значения z-индекса появится поле ввода, в котором вы сможете ввести новое значение, после чего нажмите клавишу <Enter> для его сохранения или клавишу <Esc> — для его отмены. Останется только проверить и, если нужно, изменить значения z-индекса у соседних свободных элементов в списке, чтобы они не совпадали с уже введенным.

Также панель Layers предлагает вам самый простой способ изменить видимость свободного элемента. Для этого используется колонка с изображением глаза, самая левая в списке. Выберите нужный элемент в списке и последовательно щелкайте по нему в колонке со значком глаза. При этом содержимое колонки будет последовательно меняться:

изображение закрытого глаза — элемент невидим;

изображение открытого глаза — элемент видим;

пустая колонка — элемент "наследует" видимость у родителя.

В качестве примера см. рис. 11.12 — на нем изображены все три значения параметра видимости, доступных для свободно позиционируемого элемента.

Три свободно позиционируемых

Самая интересная возможность, предлагаемая панелью Layers, — возможность "переноса" одних элементов в другие. Иначе говоря, создание вложенных элементов. Для этого также используется перетаскивание свободных элементов с помощью мыши.

Выберите в списке свободный элемент, который вы хотите "вложить" в другой. После этого найдите в списке элемент, в который вы хотите "вложить" выбранный, но не выбирайте его. А перетащите на него выбранный элемент, удерживая нажатой клавишу <Ctrl>; при этом элемент, на который вы "тащите" выбранный, будет выделен тонкой синей рамкой. Осталось только "отпустить" перетаскиваемый элемент; на рис. 11.13 изображен результат этого действия. Также, возможно, придется подкорректировать z-индекс.

Вложенные свободно позиционируемые элементы в списке панели Layers

Как видите, в случае наличия вложенных свободных элементов в списке создается "дерево", "растущее" из родителя. Вы можете упорядочивать вложенные элементы, изменяя их z-индекс, независимо от невложенных элементов. Также вы можете создавать целые структуры свободных элементов, многократно вложенных друг в друга. Пример такой структуры показан на рис. 11.14. Это вполне возможно сделать, правда, трудно вообразить себе такую ситуацию, когда бы такие структуры понадобились.

Структуры свободно позиционируемых элементов многократной вложенности

Если вы хотите "вынести" вложенные элементы из родителя, просто перетащите их в нужную позицию в списке. После этого в большинстве случаев придется изменить z-индекс.

Заголовок страницы Layers.htm

Создадим данный элемент. Назовем его Headershadow и зададим ему черный цвет фона. После этого переключимся на элемент Header и зададим для него такой же цвет, как у фона самой Web-страницы, иначе расположенный ниже элемент-тень будет "просвечивать" сквозь него. Заодно установим параметр Overflow в hidden, чтобы размеры свободного элемента-заголовка случайно не изменились (Internet Explorer имеет такой грешок). Перепишем (или запомним) значения размеров, местоположения и z-индекса элемента-заголовка. Они потом нам очень пригодятся.

Теперь вернемся к нашему элементу-тени. Зададим для него такую же ширину (поле ввода W) и высоту (Н), как и для элемента-заголовка, — это важно. А для горизонтальной и вертикальной координат (поля ввода, соответственно, L и Т) зададим небольшое смещение (пиксела на четыре в большую сторону), ведь тень всегда немного сдвинута относительно "хозяина". Z-индекс (поле ввода Z) зададим меньшим, чем у элемента-заголовка. И посмотрим на результат — рис. 11.16.

Готовый заголовок с тенью

Красиво, не так ли? Единственный недостаток: если вы хотите изменить размеры и (или) местоположение такого заголовка, вам также придется, соответственно, изменить размеры и (или) местоположение его тени.

Теперь давайте поместим на страницу начальный текст, содержащий приветствие. Это совсем простая задача. Создадим новый свободный элемент, назовем его content и поместим под заголовком. После этого остается только скопировать в него со старой страницы сам текст приветствия. Результат см. на рис. 11.17.

Точно так же создадим еще один свободный элемент и поместим в него портрет нашего героя. Вновь созданный элемент назовем Photo и поместим его правее текста приветствия. Для портрета зададим достаточно маленькие размеры, чтобы он поместился на небольшом пространстве нашей странички. То, что у вас должно получиться в результате, показано на рис. 11.18.

Следующий элемент — полоса навигации. Но мы с вами не хотим создавать унылую, выровненную по линеечке, словно взвод солдат, замерших по стойке "смирно", полосу навигации. Давайте применим свою фантазию, прибавим к ней изумительные свойства свободно позиционируемых элементов и создадим что-нибудь пооригинальнее. А именно набор гиперссылок, "рассыпанных" по всей странице.

Заголовок, текст приветствия и портрет

Первая такая гиперссылка будет вести на страницу списка увлечений нашего незабвенного Ивана Ивановича. А именно на страницу Passions.htm. Создадим небольшой новый элемент, назовем его Passionsiink и зададим для него белый фон. После этого введем в него слово Увлечения, выровняем его по центру и превратим в гиперссылку. Результат показан на рис. 11.19.

Заголовок, текст приветствия, портрет и гиперссылка

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

Создайте таким образом все гиперссылки набора и разместите их на странице, назвав, соответственно, Projectsiink (список завершенных проектов), Linkslink (набор ссылок на "дружественные" ресурсы) и Aboutlink (сведения об авторе сайта). В результате у вас может получиться что-то похожее на рис. 11.20.

Теперь настала очередь сведений об авторских правах. Поместим их внизу, прямо под текстом приветствия, а свободный элемент назовем copyrights.

Заголовок, текст приветствия, портрет, набор гиперссылок и сведения об авторских правах

Не забываем выровнять текст по правой стороне. Получится у нас вот что (рис. 11.21).

Вот и вся главная страница. Откройте ее в Web-обозревателе и посмотрите на окончательный результат.

При желании вы можете переделать весь сайт на основе свободно позиционируемых элементов. Назовите его Sample site 4 или еще как-нибудь. Таким образом, у вас будет уже четвертый сайт, созданный вашими собственными руками.

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

Конечно, никто не заставляет вас использовать шаблоны. Вы можете сделать каждую страницу сайта непохожей на другие. Благо свободно позиционируемые элементы дают вам такую возможность.

Диалоговое окно Convert Layers to Table

Элементы управления группы Table Layout задают параметры таблицы разметки, которая будет сгенерирована Dreamweaver на основе исходного набора свободных элементов.

Переключатель Most Accurate включает режим максимально точного преобразования. При этом будут соблюдены все размеры и расстояния. В свою очередь, переключатель Smallest: Collapse Empty Cells предписывает Dreamweaver убрать из получившейся таблицы ячейки и строки, размеры которых меньше заданной в поле ввода Less than Pixels Wide величины. (Данная величина задается в пикселах.) При этом получившаяся таблица разметки может немного отличаться от того, что планировалось, но будет компактнее.

Включенный флажок Use Transparent GIFs предписывает Dreamweaver использовать в получившейся таблице разметки "распорки" из прозрачных однопиксельных GIF-изображений. В этом случае таблица разметки будет правильно отображаться любым браузером. Рекомендуется всегда оставлять этот флажок включенным.

Включенный флажок Center on Page заставляет Dreamweaver помещать получившуюся таблицу разметки в центре страницы.

Флажки группы Layout Tools задают вспомогательные параметры:

Prevent Layer Overlaps — запрещает или разрешает свободным элементам перекрывать друг друга;

Show Layers Panel — выводит на экран панель Layers или убирает ее;

Show Grid — выводит на экран координатную сетку или скрывает ее;

Snap to Grid — включает или отключает режим "прилипания" к линиям координатной сетки.

Преобразование выполняется после нажатия кнопки ОК. Кнопка Cancel позволяет вам отказаться от преобразования.

Чтобы выполнить обратное преобразование — таблицу разметки в набор свободно позиционируемых элементов — используйте пункт Tables to Layers в подменю Convert меню Modify. После его выбора на экране появляется диалоговое окно Convert Tables to Layers, показанное на рис. 11.23.

Диалоговое окно Convert Tables to Layers

В этом окне находится только группа флажков Layout Tools, уже нам знакомая. Поэтому не будем описывать ее снова, а скажем только, что кнопка ОК запускает преобразование, а кнопка Cancel позволяет от него отказаться.

Создание свободно позиционируемых элементов

Создайте в Dreamweaver новую Web-страницу. С ней мы и будем экспериментировать.

Однако прежде, чем начинать свои эксперименты, давайте выполним некоторые предварительны? операции. Сначала включим измерительные линей ки, для чего включим пункт-выключатель Show в подменю Rulers меню Modify или нажмем комбинацию клавиш <Ctrl>+<Alt>+<R>. После этого включим координатную сетку, включив пункт-выключатель Show Grid полменю Grid меню View или нажав комбинацию клавиш <Ctrl>+<Alt>+<G> И напоследок включим "прилипание", включив пункт-выключатель Snap То Grid подменю Grid меню View или нажав комбинацию клавиш <Ctrl>+ +<Alt>+<Shift>+<G>. Подробнее обо всех этих манипуляциях см. главу 8.

Примечание

Имейте, однако, в виду, что это всего лишь рекомендации. Измерительные линейки, сетка и "прилипание", по идее, должны помочь вам, но если вы привыкли работать без таких визуальных "подсказок", не включайте их.

Чтобы создать свободно позиционируемый элемент, проще всего нажать кнопку Draw Layer (рис. 11.3), расположенную на вкладке Common панели объектов.

Введение в свободно позиционируемые элементы

Прежде всего нам необходимо выяснить, как создаются свободно позиционируемые элементы страниц. И рассмотрим мы это на небольшом примере, который сделаем вручную, не прибегая к помощи Dreamweaver. Это позволит нам лучше понять, что такое свободно позиционированные элементы, "подержать" их в руках.

Но сначала — немного теории. Куда же без нее...

Зачем нужны свободно позиционируемые элементы

Действительно, зачем?

Подавляющее большинство Web-дизайнеров и Web-сайтов до сих пор прекрасно обходятся традиционными способами дизайна. Применять на своих страницах свободные элементы никто особо не хочет. Даже анимированные элементы, казалось бы, замечательное средство привлечь внимание посетителя, — большая редкость на просторах Сети.

Вполне возможно, это обычный консерватизм, уже погубивший множество перспективных технологий. Конечно, не стоит сбрасывать со счетов и то, что свободно позиционируемые элементы поддерживаются только новыми версиями программ Web-обозревателей (фактически теми из них, которые поддерживают таблицы стилей). Но это не довод: те же таблицы стилей применяются несравнимо чаще. Видимо, все-таки консерватизм...

Но если подавляющее большинство Web-дизайнеров как-то обходятся без свободно позиционируемых элементов, так ли уж они нужны? Стоит ли их применять? Может, лучше остаться при своих таблицах и фреймах?

Это решать вам.

Нужны ли вам свободно позиционируемые элементы? Нужны ли они вашему сайту? Сможете ли вы без них обойтись? Вот вопросы, ответы на которые вам стоит поискать.

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

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

Как гласил рекламный лозунг фильма "Годзилла", размер имеет значение. В самом деле, если ваши Web-страницы сделаны на основе таблиц разметки и достаточно сложны, HTML-код догоняет в габаритах вышеупомянутое земноводное. А чем больше страница, тем дольше она будет загружаться... Свободно позиционируемые элементы позволят радикально сократить размер HTML-кода страниц и при этом добавят им такие возможности, которых у таблиц просто нет и не будет.

Вы задумали такой дизайн для своих Web-страниц, который никак не создать без использования свободно позиционируемых элементов. Подобный дизайн может включать "окошки в окошке" для показа фрагментов текста, перекрывающиеся элементы и т. п.

Вы собираетесь анимировать некоторые элементы страницы. Но прежде чем их анимировать, нужно сделать их свободно позиционируемыми.

Вот, вроде бы, и все случаи, когда вам не обойтись без свободных элементов. В остальных случаях они не обязательны.