|
|
Импортирование таблицы стилей в документ(CSS в отдельных файлах) Для импортирования таблицы стилей после тэга <STYL_TYPE=”TEXT/CSS” >следует задать значение свойства @import, которое определяет адрес файла таблицы стилей, импортируемой в документ. @import специальная инструкция,вот ее формат:
@import URL(“адрес_ файла_ стилей“),
он проставляется между тэгами<STYLE> И </STYLE> .
Другой способ использования внешних таблиц стилей основан на применении тэга <LINK> внутри тэга <HEAD>.
Например:
<HEAD> <LINK_REL=STYLESHEET_TYPE=”text/css”_HREF=”адрес_таблицы_стилей_TITLE=”style” </HEAD> С помощью свойств позиционирования нетрудно создавать эффекты трехмерности для надписей. Тут смысл в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и имеющими различные цвета.
Примеры сценариев 2.4.1.Реакция на действия пользователя. Пользователь может выполнять различные действия - щелкнуть кнопкой мыши, нажать клавишу на клавиатуре, поместить курсор мыши на некоторый элемент и т.д. Для организации взаимодействия с пользователем обычно применяются такие специальные элементы, как кнопки, переключатели, поля ввода данных и меню. Можно устроить так, чтобы на то или иное действие пользователя последовала на странице некая реакция. Тогда возникает эффект интерактивности страницы (диалога взаимодействия). В нижеприведенном примере при щелчке мыши по тексту выведется панель с сообщением : Был щелчок!и кнопкой OK! В этом примере использовалось событие On Click! (щелчок), стандартная (встроенная в Java Script) функция alert( ) для вывода сообщений и функций My_func( ), которую мы определяем самостоятельно. Функция My_func( ) просто вызывает стандартную функцию alert( ).Таким образом и получается написанным сценарий обработки события «щелчок кнопкой мыши» - простейший пример интерактивной страницы. Цель данного примера- продемонстрировать, что мы принципиально можем, во-первых «поймать» событие и во-вторых отреагировать на него. Приведенный ниже текст HTML-программы содержит сценарий написанный на Java Script.
Рассмотрим еще один пример, в котором при щелчке на тексте Попробуй, щелкни по этому тексту в окне браузера появляется новы текст: Не надо щелкать где попало. Для этой цели используется метод write() объекта document, записывающий в документ текст, указанный в качестве параметра. Объект document является одним из элементов объектной модели, у которой имеется множество свойств и методов, обеспечивающий доступ к HTML-документам и его частям.
НАПРИМЕР:
Таким образом, полностью изменено содержание страницы(один текст заменен другим). Необходимо обратить внимание на то, что в последнем случае в документ записан не просто текст, а инструкция HTML-программы. Метод write() позволяет поменять содержание загруженного документа, но не делает изменений в HTML-файле. Вернемся еще раз к напоминанию, что объект document является подъобъектом объекта windous. Движущийся элемент. В следующем примере рассмотрим, как можно организовать движение элемента по странице. Из курса по статическому HTML известно, что позиционирование элемента задается свойствами top и left (координатами x и y). Если организовать изменение значений этих свойств во времени, то получится эффект движения. Мы изменяем координаты элемента страницы, заданного тэгом <DIV>. Тэг <DIV> служит для выделения части страницы, он задает контейнер для группы других элементов. В представленном в данном пособии примере- это картинка в тексте. Движение организуется при помощи двух функций: startmove() и move(). Первая из них делает некоторые начальные установки и запускает вторую функцию, которая изменяет координаты элемента страницы. При этом функция move() вызывается периодически с помощью метода setinterval().В дальнейшем мы часто будем использовать этот метод.
Событие, вызывающее функцию startmove() является Onload() .Это означает, что функция выполняется сразу же после загрузки страницы. В результате элемент будет перемещаться в заданной области страницы, изменяя направление движения при достижении границ области. Вот пример программы с движущимся элементом.
Кажущаяся замысловатость функции move() объясняется тем, что требуется организовать отражение движущегося элемента от границ области. Нужно обратить внимание, что функция move() запускается из функции startmove() , причем к ней применяется метод setinterval() объекта окна window: window.setinterval("move()",100);
Этот метод запускает в качестве первого параметра функцию (в нашем случае move() ) через каждые 100мс. Изменяя второй числовой параметр, можно ускорить или замедлить движение элемента. В теле функции startmove() используется область dynamic, которая была определена в тэге <DIV>. Стандартная функция parseint() преобразует строковые значения в целые числа. Дело в том, что используемые свойства элементов возвращают значения в виде символьных строк, а не чисел. Поскольку они используются в числовых операциях, требуется сначала привести их к числовому типу. Следует заметить, что при чтении текстов HTML-программ следует сначала разобраться с основной частью, находящейся внутри тэга <BODY>, а затем уже перейти к рассмотрению сценария внутри тэга <SCRIPT>. Это потому, что сценарий обычно расположен вначале, а использует индентификаторы, определенные в конце HTML-программы.
Элемент движется к месту указанному мышью.
Теперь рассмотрим сценарий, приводящий к тому, что картинка сначала неподвижная, двигается к месту экрана, где произошел щелчок. Этот сценарий аналогичен предыдущему. Используем свойства x и y объекта event(событие), которые содержат координаты мыши в момент щелчка (событие On Click). Далее вычисляются новые координаты (px и py) картинки так, чтобы расстояние между нею и местом щелчка уменьшилось. Формулы вычисления координат выбраны таким образом, чтобы скорость движения уменьшалась по мере приближения к выбранному параметру: px=px+(x_mouse-px)/100; py=py=(y_mouse-py)/100;
|
|
Для примера попробуем создать трехмерный эффект при помощи стилей (Рис. ):
Рис. Пример создания трехмерной надписи с помощью CSS
Поскольку в приведенном примере пользовательская функция просто вызывает стандартную функцию alert( )и больше ничего не делает, то аналогичного результата можно было достичь с помощью программы без сценария.
В этих формулах число 100-просто масштабирующий коэффициент. Переменные x_mouse и y_mouse — координаты места щелчка. Заметим, что как только координаты щелчка станут равными соответствующим текущим координатам элемента, последние уже не будут изменяться: элемент остановиться. Напомним, что метод setinterval(”move()”, 100) запускат функциюmove() через каждые 100 мс.