Пакет Adobe GoLive
Позиционирование элементов Webстраницы
Позиционирование элементов Web-страницы
Одним из наиболее используемых преимуществ DHTML является возможность точно позиционировать элементы оформления Web-страницы. Как мы помним, в самом HTML у нас отсутствует возможность четкого позиционирования каких-либо элементов Web-страниц. Технология DHTML исправляет этот недостаток. Более того, DHTML позволяет не только четко устанавливать место отбражения того или иного элемента, но и перемещать его в окне просмотра браузера. Подобная возможность обычно называется "динамическим позиционированием ".
Всего используется три типа позиционирования. Различают статическое позиционирование, относительное и абсолютное. Статическое позиционирование — это порядок размещения элементов Web-страниц самим браузером, исходя из обычных стандартов HTML. Относительное позиционирование позволяет изменять расположение элемента, опираясь на его исходное расположение. То есть, его смещение отсчитывается от исходных координат. На основе относительного позиционирования обычно создают различные эффекты анимации текста. А абсолютное позиционирование позволяет нам указывать кооцдинаты элементов, относительно окна браузера. То есть, мы можем точно знать в каждый момент времени, в какой точке окна просмотра находится тот или иной элемент. Чаще всего для эффектов динамического позиционирования используется именно эта разновидность.
Необходимо осознавать, что статическое позиционирование полностью опирается на порядок расположения элементов, который указан в HTML-коде и умолчаниях браузера. Но если мы для какого-либо элемента установим абсолютное позиционирование, то он уже не будет учитываться браузером при размещении остальных элементов. Он как будто вынимается из процедуры статического позиционирования и не оказывает никакого влияния на соседние элементы.
Теперь от теории перейдем к практике. Попробуем создать HTML-документ, в котором текстовый абзац мог бы изменять свое расположение в тот момент, когда пользователь наводит на него курсор мыши. Код подобного документа приведен в листинге 7.6.
