Иллюстрированный самоучитель по Dreamweaver MX


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


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

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

<HTML>

<HEAD>

<ТITLЕ>Пример WEB-странииы</ТITLЕ>

</HEAD>

<BODY>

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

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

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

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

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

<HTML>

<HEAD>

<ТITLE>Пример WEB-страницы</ТITLE>

<STYLE>

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

background-color: #00FF00;}

</STYLE>

</HEAD>

<BODY>

<DIV ID="рага">

Это текст, который будет показан в окне

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




Начало  Назад  Вперед



Книжный магазин