- Димитрий М. САГАЙДАК (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/
|