Macromedia Dreamweaver MX

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

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

Прежде всего, свободно позиционируемые элементы предполагают статич­ный дизайн 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.

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

Переключатель Most Accurate включает режим максимально точного преоб­разования. При этом будут соблюдены все размеры и расстояния. В свою очередь, переключатель Smallest: Collapse Empty Cells предписывает Dream­weaver убрать из получившейся таблицы ячейки и строки, размеры которых меньше заданной в поле ввода 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.

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

Что дальше?

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

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

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

Как это делается? Читайте дальше!