7.1.2.5. Раскрывающиеся списки
Выпадающее меню очень похоже на переключатели, которые позволяют выбрать лишь один пункт из списка. Первый пункт списка является выбором, принятым по умолчанию, но при помощи атрибута SELECTED можно заменить значение, принятое по умолчанию, на другое, взятое из списка.
Списки с множественным выбором позволяют выбрать один или несколько пунктов. По умолчанию ни один из вариантов не отмечается при загрузке формы или щелчке на кнопке отмены, но с помощью атрибута SELECTED можно установить отметку, принятую по умолчанию, для любых пунктов списка.
Для раскрывающихся списков используют тег <SELECT> со следующими атрибутами:
NAME= - атрибут, задающий название списка
SIZE= - размер окна списка (указывается в пикселах)
MULTIPLE - ключевое слово, добавляемое для создания списков с множественным выбором
Для списка с множественным выбором далее следует тег <OPTION>.
<HTML> <HEAD> <TITLE>моя первая страничка</TITLE> </HEAD> <BODY> <FORM METHOD="Post" ACTION="bin/level">Выберите уровень сложности: <P><SELECT NAME="level"> <OPTION>Легкий <OPTION SELECTED>Средний <OPTION>Трудный </SELECT> <P>Укажите экзамены, которые хотите сдать: <P><SELECT NAME="test" SIZE=4 MULTIPLE> <OPTION>История <OPTION SELECTED>Математика <OPTION>Английский язык </SELECT> <P><INPUT TYPE=SUBMIT VALUE="Отправить"> </FORM> </BODY> </HTML>
Текст каждого отмеченного пункта используется как его значение в выпадающих меню и списках с множественным выбором. Броузер посылает название и значение каждого отмеченного пункта при щелчке на кнопке отправки.
7.1.3. Встроенные фильтры ie
Фильтр – это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после этого он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр ещё называют переходом из одного состояния отображения в другое.
Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являются окнами, как, например элемент <IFRAME>.
Фильтры не применяются к следующим элементам HTML-страницы: апплеты, Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т.д.
Применить фильтр к элементу просто: достаточно задать значение его свойства filter, следуя правилам задания свойств каскадных таблиц стилей filter: значение. Каждый фильтр, как отмечалось выше, реализует определённый алгоритм преобразования видимого отображения элемента, поэтому значение свойства filter задаётся в форме функции:
filter: имя_фильтра ([параметры]);
а параметры фильтра, если они присутствуют, задаются с использованием синтаксиса именованных параметров функции:
имя_параметра = значение_параметра
Некоторым фильтрам требуется несколько параметров, задаваемых через запятую, а некоторым фильтрам параметры вообще не нужны, но круглые скобки должны присутствовать обязательно.
К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя:
<IMG ID=img1 SRC="пример1.gif" STYLE="filter: blur(strength=50) fliph()”>
В данном примере к графическому изображению применяются два фильтра: первый (blur) размазывает изображение на глубину в 50 пикселов, а второй (fliph) просто зеркально его отображает в горизонтальном направлении.
В Internet Explorer реализовано большое число разнообразных фильтров. В таблице представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.
Таблица/ Фильтры и их краткие описания
alpha |
Устанавливает уровень непрозрачности объекта |
blur |
Создаёт эффект размытия изображения |
chroma |
Делает прозрачными пикселы заданного цвета |
dropshadow |
Рисует сплошной силуэт объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень |
flipH |
Переворачивает объект горизонтально |
flipV |
Переворачивает объект вертикально |
glow |
Добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта |
gray |
Удаляет цветовую гамму объекта и отображает его в серых тонах |
invert |
Меняет оттенок, насыщенность и яркость объекта на противоположные |
light |
Подсвечивает объект |
mask |
Отображает текст так, как будто он выделен мышью |
shadow |
Рисует силуэт объекта вдоль одной из его границ в заданном направлении, создавая эффект тени |
wave |
Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности |
xray |
Изменяет глубину цвета объекта и после этого отображает его в чёрно-белых тонах, имитируя рентгеновский снимок объекта |
Ниже, для примера, приведен листинг HTML- программы, в которой использован фильтр Shadow для придания тексту объема и отбрасывания изящных падающих теней
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<HTML><HEAD><TITLE>…………</TITLE>
<Style>
#tip1{filter:Shadow(Color="#000000", Direction="150")}
.pr2{filter:Shadow(Color="#000000", Direction="150")}
</Style>
</HEAD>
<BODY>
<p id=tip1 style=" width:600; font:50pt; color:ffcc00;">Кафедра Графики </p>
<! width - ширина рамки, в которую вписывается текст.
height- высота рамки, в которую вписывается текст.
Пробелы в тексте надо прописывать явно, т.е.  , иначе текст будет разрываться, если он больше размеров рамки. атрибут style и один из параметров: width или height являются обязательными, остальные - необязательные (но очень удобно) >
<div class="pr2" style="height:16; font:40pt; color:00ccff;">
Кафедра     Графики</div>
<p class="pr2" style="width:10; font:25pt; color:#55ff55; ">
Кафедра Графики</p>
</BODY></HTML>
Ниже показан результат отображения объемного теста в окне браузера Internet Explorer