Macromedia Dreamweaver MX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<нтмь>

<НЕАБ>

<ТТТЪЕ>Пример ЭДеЬ-Страницы</ТТТЪЕ>

</НЕАБ>

<ВСЮУ>

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

</ВСЮУ>

</НТМЬ>

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

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

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

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

<HTML>

<HEAD>

<ТТТЪЕ>Пример ЭДеЬ-Страницы</ТТТЪЕ>

<STYIiE>

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

Background-color: #00FF00;}

</B0DY>

</HTML>

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

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

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

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

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

3 Пример Web-страницы - Microsoft Internet Exp... яви

Файл Правка Вид Избранное Сервис Справ

О''0’0[Й|РЙ^Г^|Э’'| Адресі

Это текст, который будет показан в окне 'А'еЬ-обозревателя. Это текст, который будет показан в окне Д/еЬ-обозревателя. Это текст, который будет показан в окне Д/еЬ-обозревателя. Это текст, который будет показан в окне Д/еЬ-обозревателя. Это текст, который будет показан в окне Д/еЬ-обозревателя. Это текст, который будет показан в окне Д/еЬ-обозревателя.

, Готово

Рис. 11.1. Свободно позиционируемый абзац текста на странице 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: #00FF00; overflow: scroll}

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

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

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

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

<HTML>

<HEAD>

<Т1ТЪЕ>Пример ДОеЬ-Страницы</Т1ТЪЕ>

<SCRIPT>

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

</SCRIPT>

</HEAD>

<BODY>

<DIV ID="para" STYLE="position: absolute; left: 50; top: 50; width: 200; height: 100; background-color: #00FF00; overflow: зсго11">Это текст, который будет показан в окне

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

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

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

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

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

Web-обозревателя.</DIV>

</BODY>

</HTML>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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