- Димитрий М. САГАЙДАК (Sagaydak@bigfoot.com)
Если вы захотите создать HTML-страницу, то наверняка
столкнетесь с проблемой, как расположить элементы на странице. И вот
почему.
Особенность HTML-языка - его условность, т. е. "ход
событий" зависит от того, какие именно тэги (их характеристики),
а также настройки браузера вы используете. Самый простой пример: на
странице элементы располагаются в том порядке, в каком они записаны
в исходном коде. В зависимости от браузера отклонения возможны только
в горизонтальном и/или вертикальном выравнивании, цвете ссылок, способе
обтекания объекта текстом и в некоторых других случаях.
Данную проблему решают таблицы.
Сейчас практически во всех качественных цельных (не фреймовых) страницах
используются табличные тэги. В этом случае вы сможете разместить элементы
страницы друг относительно друга самым невероятным (или, наоборот,
самым разумным) способом. Но и это не всегда оптимальное решение.
Все возрастающие требования к дизайну и достаточно ограниченные возможности
табличных тэгов заставляют разработчиков искать новые инструменты.
Один из способов решить эти проблемы - конструировать HTML-документ
с помощью слоев.
Слой - это участок документа, выделенный как совершенно
самостоятельная часть, этакий документ в документе. Это значит, что
он может иметь собственное оформление, содержать в себе элементы,
никак не реагирующие на изменения, происходящие вне слоя, в конце
концов, у него возможна другая плоскостная ориентация.
Слои можно создавать двумя способами. Во-первых, с помощью тэгов DIV
(по версии от Microsoft) и LAYER (ILAYER) (то
же самое от Netscape) ?. Это парные тэги и действуют они одинаково
- выделяют участок документа. Но отличаются они следующим.
1. Netscape считает себя центром вселенной.
2. Microsoft считает себя (см. пункт 1).
3. У каждого из них свой взгляд на развитие Интернет-стандартов.
4. В результате, для определения характеристик тэга DIV используются
свойства CSS, а для тэга LAYER (ILAYER) - стандартные
характеристики HTML-тэгов.
5. DIV более гибкий, чем LAYER (ILAYER).
6. Соперники не поддерживают модели друг друга. Противоборствующими
сторонами тэги противника не поддерживаются ?.
Прежде детальнее рассмотрим тэг DIV, поскольку он более "гибкий"
и более функциональный.
Итак, DIV размечает слой в документе. С помощью CSS ему назначаются
вертикальные и горизонтальные координаты (начало, местоположение,
ширина и высота), а также месторасположение в документе. Для этого
используются следующие параметры: position, top, left, width, height,
margin и z-index.
Если вы читали мою статью, посвященную CSS ("CSS - каскад возможностей",
№ 45, 48 за 1999 год), то уже знаете, что position имеет три значения:
absolute, relative и static. В случае со слоями актуальны
только два первых, так как третий может привести к неожиданным и не
очень желательным результатам.
Position:absolute располагает элемент в окне браузера,
а position:relative - относительно его места в исходном
коде. Таким образом, если тэгу DIV назначено свойство style="position:absolute",
это указывает на то, что слой будет иметь собственное место в документе,
и никакой другой элемент не изменит этого.
С помощью свойств top и left мы устанавливаем,
соответственно, верхнюю и левую границы слоя: style="position:absolute;
top:0; left:0". А добавив width, height
и margin, определим его ширину, высоту и область внутри
слоя, в границах которой и будут располагаться все элементы: style="position:absolute;
top:0; left:0; width:600; height:100; margin:10".
После того, как мы установили горизонтально-вертикальные параметры
слоя, зальем его каким-нибудь цветом (или оставить прозрачным) или
определим (если необходимо) цвет текста, который вы хотите разместить
на слое. Для этого нужно поработать со свойствами background
и color. Цвет задается и номером, и английским названием,
например: style="position:absolute; top:0; left:0; width:600;
height:100; margin:10; background:#8B0000; color:silver".
Количество слоев в документе варьируется от двух (включая плоскость
самого документа) до бесконечности. Они могут перекрывать друг друга,
и не всегда это будет удобно. В окне браузера слои располагаются так
же, как в исходном коде. Поэтому чтобы разместить перекрывающиеся
слои в нужном порядке (независимо от их места в исходном коде), используется
z-index. Он имеет положительное или отрицательное числовые
значения: style="position:absolute; top:0; left:0; width:600;
height:100; margin:10; background:#8B0000; color:silver; z-index:-1".
Слой с таким z-index'ом будет находиться ниже слоя, имеющего z-index,
равный 1.
Итак, в исходном коде запись, указывающая на создание слоя, будет
выглядеть так:
<DIV style="position:absolute; top:0; left:0; width:600; height:100;
margin:10; background:#8B0000; color:silver; z-index:-1"></DIV>.
Внутри парного тэга DIV располагаются те элементы, которые должны
находиться в пределах этого слоя. Они будут иметь один и тот же z-index,
аналогичный z-index'у слоя, и располагаться в окне браузера с левого
края, в темно-бордовом прямоугольнике размером 590Х90 пикселей. Цвет
текста, находящегося в прямоугольнике, светло-серый, размер и гарнитура
шрифта такие же, как и установленные по умолчанию для браузера. Если,
конечно, последние два параметра не заданы свойствами CSS в тэге <P>.
Однако, каждый элемент должен иметь собственный position и, как минимум,
top и left (расстояние от края слоя).
Благодаря позиционированным слоям, мы получаем полностью отформатированную
Web-страницу, ее главное достоинство - каждый элемент располагается
на своем месте. Поэтому страница отображается одинаково в окне MSIE
4.0 и выше, какие бы настройки по умолчанию он не имел.
Вот образец кода такого документа.
<HTML>
<HEAD>
<TITLE>Starting page of PCP Web Site</TITLE>
<META NAME="author" content="D.M. Sagaydak">
<style type="text/css">
<!-- P {font-family: "Arial, sans-serif"; font-size:
92} -->
</style>
</HEAD>
<BODY bgcolor=#8B0000>
<div style="position:absolute; top:80; left:70; width:600;
height:100; margin:10; color:black">
<p>PCP Web Site</p>
</div>
<div style="position:absolute; top:220; left:70; width:600;
background:white; height:50">
<a href="home.html"><img src="home.gif"
alt=HomePage BORDER=0 height=20 width=100 style="position:absolute;
top:15; left:20; background:#8B0000"></a>
</div>
</BODY>
</HTML>
Это самый простой пример позиционирования с помощью слоев в среде
MSIE.
Теперь рассмотрим, как создаются слои в среде Netscape.
В этом случае участок документа под слой размечается, в первую очередь,
с помощью тэгов LAYER и ILAYER, дополнительно
используется NOLAYER (но о нем позже).
При определении исходных границ позиционирования тэг <LAYER>
работает так же, как и <DIV style="position:absolute">,
а <ILAYER> аналогичен <DIV style="position:relative">.
Параметры слоев LAYER/ILAYER задаются с помощью обычных свойств языка
HTML: top, left, width, height, margin. А параметры элементов, расположенных
внутри слоя, - как обычными тэгами и свойствами языка HTML, так и
свойствами CSS или JSS (язык, разработанный Netscape,
и практически аналогичный CSS).
<layer top=0 left=0 width=600 height=100 margin=10><font
color=red><p>это пример слоя в Netscape</p></font></layer>
<Ilayer top=20 left=0 width=50 height=50 margin=10><img src="IMG.gif"
alt=картинка BORDER=0 height=20 width=20><p>это пример другого
слоя в Netscape</p></Ilayer>
Если вы зададите слою фоновый цвет (bgcolor), элементы, находящиеся
внутри слоя (между тэгами <LAYER></LAYER> или <ILAYER></ILAYER>),
могут быть полностью перекрыты им (они станут недоступны). И хотя
теоретически LAYER/ILAYER поддерживает свойство z-index (или, как
любит Netscape, zindex ?), я, например, ни разу его в этом тэге не
использовал и, честно говоря, не представляю, как его тут применять.
Ниже дается пример страницы, написанной для Netscape.
<HTML>
<HEAD>
<TITLE>Starting page of PCP Web Site</TITLE>
<META NAME="author" content="D. M. Sagaydak">
<style type="text/JSS">
<!-- P {fontfamily:"Arial", "sans-serif"; fontsize:92}
-->
</style>
</HEAD>
<BODY bgcolor="#8B0000">
<layer top="80" left="70" width="600"
height="100" margin="10">
<font color="black"><p>PCP Web Site</p></font>
</layer>
<layer top="220" left="150" width="600"
height="50" margin="10">
<a href="home.html"><img src="home.gif"
alt="Home" BORDER="0" height="20" width="100"></a>
</layer>
</BODY>
</HTML>
Если какой-то участок кода страницы не поддерживается Netscape, но
может и/или должен выполняться другими браузерами, используется тэг
NOLAYER. Он отмечает внутри слоя "непонятный"
участок кода, например, VBS-скрипт, и браузер его "не
видит", но целостность слоя при этом сохраняется:
<LAYER>...<NOLAYER>
<SCRIPT NAME="VBS-script">...</SCRIPT>
</NOLAYER></LAYER>.
Точно также можно комбинировать на одной странице участки кода для
Netscape и MSIE:
<LAYER><NOLAYER>
<DIV>
</NOLAYER>...<NOLAYER>
</DIV>
</NOLAYER></LAYER>.
Однако страница получается громоздкой, опыт же показывает, что добиться
одинакового результата при комбинировании слоев не удается.
Тэг LAYER (ILAYER) не имеет таких широких возможностей, как DIV (благодаря
Биллу Гейтсу и 3WC ?). Фактически он предназначен для разметки документа
на участки, реагирующие на события благодаря сценариям (абракадабра
из Dynamic HTML). Конечно, слой с его помощью создать можно, но средств
для оформления и работы с элементами внутри слоя явно недостаточно.
Какой вывод из всего можно сделать?
Для создания и просмотра Web-страниц, где используются слои, оптимальное
решение - Microsoft-версия языка HTML, соответственно, и браузеры
этого производителя. Но данная версия не является стандартом. Но эта,
без сомнения, качественная и перспективная технология Web-дизайна
будет широко использоваться только, когда HTML 4.0 и
DHTML официально признают новыми стандартами языка гипертекстовой
разметки электронного документа.
Сейчас же, подобная практика - удел или специалистов, создающих программные
Интернет-продукты под конкретные цели и задачи, или же "фанатов",
которые не боятся экспериментировать, искать и применять новые методы
для работы в Сети. Собственно, благодаря этим людям Сеть еще развивается
?!
Источник: http://www.mycomp.com.ua/
|
