3.1.4.1. Настройка эффектов перехода Web-страницы

Такие переходы часто применяются в презентационных программах для ор­ганизации переходов между слайдами, когда один слайд эффектно растворя­ется на экране, уступая место другому слайду. Подобные эффекты можно уста­новить для переходов между страницами одного сайта. Для этого используются следующие значения атрибута HTTP-EQUIV:

page-enter – эффект открытия Web-страницы;

page-exit – эффект закрытия Web-страницы.

В атрибуте CONTENT устанавливается способ перехода:

<META HTTP-EQUIV=”page-enter” CONTENT=”RevealTrans (Dura­tion=?, Transition=?”>

Способ перехода задается функцией RevealTrans следующими аргументами:

Duration – время перехода в секундах;

Transition –номер эффекта от 0 до 23, представленных в таб­лице

Таблица эффектов перехода страниц

Значение	Эффект	Значение	Эффект
0	Прямоугольники внутрь	12	Растворение
1	Прямоугольники на­ружу	13	Вертикальная пано­рама внутрь
2	В форме круга внутрь	14	Вертикальная пано­рама наружу
3	В форме круга наружу	15	Горизонтальная па­норама внутрь
4	Наплыв вверх	16	Горизонтальная па­норама наружу
5	Наплыв вниз	17	Уголки влево – вниз
6	Наплыв вправо	18	Уголки влево – вверх
7	Наплыв влево	19	Уголки вправо – вниз
8	Вертикальные жалюзи	20	Уголки вправо – вверх
9	Горизонтальные жа­люзи	21	Случайные горизон­тальные полосы
10	Шажки горизонталь­ные	22	Случайные верти­кальные полосы
11	Шажки вертикальные	23	Случайный выбор эффекта

Эффекты открытия и закрытия Web-страниц будут отображаться на экране только при переходе от страницы к странице по гиперссылке или с помощью кнопок Yfpfl и Вперед. При первом открытии страницы по адресу URL или во время перезагрузки эффекты перехода проявляться не будут.

3.2. Задание к лабораторной работе №3

Используя минимальный HTML-код, создать различающиеся фоновым цве­том заготовки для четырех Web-страниц. Сохранить их в том же ката­логе, что и Ваша первая страница. Главному документу присвоить имя in­dex.htm.

Используя коллекцию графики редактора Photoshop, создать графическое изображение (не более 500х500 пикселей) для использования в качестве изображения заднего плана документа и сохранить его в своем ка­талоге.

В документе index.htm установить это изображение на заднем плане как ста­тичное, не прокручиваемое вместе с прокруткой текста (тег <BODY>, атри­буты BACKGROUND=… и BGPROPERTIES="fixed").

При помощи текстовых и графических ссылок организовать связь глав­ного документа с четырьмя другими документами. С помощью тега <style> со свойством a:hover обеспечить перекрашивание текстовой гиперссылки при наведении на нее курсора.

С помощью ссылок на фрагмент документа организовать переходы по ссыл­кам внутри главного документа, а также переходы на идентифицирован­ные фрагменты текста в других WEB-документах.

Создать гиперссылку для отправки электронной почты.

Создать гиперссылку на URL-адрес действительного сайта Интернета.

ЛАБОРАТОРНАЯ РАБОТА №4

Элементы оформления HTML-страниц

4.1. Методические рекомендации

4.1.1. Списки

Существуют два основных вида списков: упорядоченные (по алфавиту или по цифрам) и неупорядоченные (с вводным маркером). выделяет список из текста отступом от края страницы. Списки могут быть вложенными.

Упорядоченные списки задаются парным тегом <OL>, а неупорядоченные тегом <UL>. Для элементов списка используются непарные теги <LI>.

Для неупорядоченных списков можно выбрать один из трех видов вводных маркеров. Это делается с помощью атрибута TYPE=… внутри тега <UL>. Воз­можные аргументы: disc (круг), circle (окружность), square (квадрат).

Для упорядоченных списков можно выбрать способ индексации: арабскими цифрами, прописными буквами, строчными буквами или римскими цифрами. Это делается с помощью атрибута TYPE=… с соответствующими значениями (соответственно 1, A, a, I). Начальный номер, с которого начинается нумерация элементов списка, задается атрибутом START=… внутри тега <OL>.

<font color="red"> <b> Упорядоченный список </b> </font> <OL TYPE=”1” START=”10”> <LI>Элемент списка 1 <LI>Элемент списка 1 <LI>Элемент списка 1 <OL type=”A”> <LI>Элемент списка 2 <LI>Элемент списка 2 <OL type=”a”> <LI>Элемент списка 3 <LI>Элемент списка 3 <LI>Элемент списка 3 <OL type=”I”> <LI>Элемент списка 4 <LI>Элемент списка 4 </ol> </ol> </ol> </ol>	Отображение в документе Упорядоченный список Элемент списка 1 Элемент списка 1 Элемент списка 1 А. Элемент списка 2 В. Элемент списка 2 а. Элемент списка 3 b. Элемент списка 3 с. Элемент списка 3 I. Элемент списка 4 II. Элемент списка 4
<font color="green"> <b> Неупорядоченный список </b> </font> <UL TYPE=”disc”> <LI>Элемент списка 1 <LI>Элемент списка 1 <LI>Элемент списка 1 <UL type=”circle”> <LI>Элемент списка 2 <LI>Элемент списка 2 <LI>Элемент списка 2 <UL TYPE=”square”> <LI>Элемент списка 3 <LI>Элемент списка 3 <LI>Элемент списка 3 </ul> </ul> </ul>	Отображение в документе Упорядоченный список Элемент списка 1 Элемент списка 1 Элемент списка 1 Элемент списка 2 Элемент списка 2 Элемент списка 2 Элемент списка 3 Элемент списка 3 Элемент списка 3