| 28.01.2012, 12:47 | |
Применение тега <div> для организации диалога
Абросимов Д.
Одной из задач web-мастера является организация диалога web-страницы с пользователем. Широко известен способ организации диалога посредством механизма форм. Объект "Форма" позволяет разместить на web-странице такие элементы управления, как текстовое окно (однострочное и многострочное), кнопки опций, окна выбора, выпадающие меню и окна списков и командные кнопки. Назначение двух командных кнопок можно определить жестко: очистить форму и переслать данные из формы на сервер, управляющий web-страницей. Имеется возможность применить на web-странице все эти элементы без формы. Однако в любом случае страница получается статической с неизменяемым содержанием. Интересные возможности организации диалога открывает тег <div>. Он работает в паре с тегом </div>. В простейшем случае между этой парой тегов может ничего не быть. В этом случае броузер просто игнорирует эти теги и показывает страницу так, как-будто их нет. Если разместить между этими тегами символ "неразрывный пробел", то броузер покажет эти теги как перевод строки. Если между тегами имеется простой текст, то он демонстрируется обычным образом. Несколько пар тегов <div> – </div> создают множество строк текста без привычных предшествующих пробелов между строками, характерных для абзацев (параграфов). Главное достоинство тега <div> – возможность присвоения имени и управления его атрибутами статическим и программным способом. Определение имени тега выполняется командой id = имя_тега. В этом случае к нему можно обратиться из любого скрипта web-страницы. Внутри тега можно использовать атрибут class, что дает возможность управлять параметрами шрифта и абзаца внутри указанной пары тегов. Для этого необходимо заранее в разделе <head>–</head> парой тегов <style>–</style> определить именованные стили оформления текста. Свойство innerHTML позволяет перепрограммировать HTML-код, содержащийся между парой тегов <div id=имя>…</div>. Это дает возможность изменить во время диалога содержимое web-страницы или, даже, сделать ее наращивающейся по мере продолжения диалога с пользователем. Для получения всплывающего окна необходимо оформить тег <div> в виде:
<div id="имя" style="position:absolute; width: ширина px; height: высота px; z-index: число; left: левая_граница px; top: верхняя_граница px; background-color: цвет; layer-background-color: цвет; border: толщина_рамки px none #000000; visibility: hidden"> HTML-код </div>
Геометрические параметры окна заданы в пикселах. Целесообразно задавать их в процентах от размеров окна. Это окно будет скрыто. В дальнейшем в скриптах, запускающихся каким-либо способом, можно переопределить как содержимое HTML-кода, так и параметры всплывающего окна, создать в нем полосы прокрутки и прочие элементы управления, поместить в него рисунки и т.д. Это позволит создавать всплывающие окна. Изложенные кратко в настоящих тезисах принципы применения тега <div> были проверены на практике при создании электронных методических материалов и показали свою эффективность при организации диалога электронного ресурса с пользователем.
| |
| Категория: Тезисы | | |
| Просмотров: 3320 | Загрузок: 0 | |
| Всего комментариев: 0 | |