- •Южно-Уральский государственный университет
- •И дизайн сайтов
- •Лабораторная работа № 1 Создание Web-страниц. Работа с текстом
- •1.1. Введение в язык html
- •Минимальный html-код
- •1.2. Основные теги языка html
- •1.2.2. Заголовок внутри документа
- •1.2.3. Теги для форматирования отдельных символов или групп символов
- •1.2.4. Физические теги форматирования
- •1.2.5. Размер, гарнитура и цвет шрифта
- •1.2.6. Теги абзаца и перевода строки
- •1.2.7. Выравнивание текста
- •1.2.8. Комментарии
- •1.2.9. Форматирование с использованием каскадных таблиц стилей (css)
- •1.2.9.1. Назначение стилей отдельным элементам страницы
- •1.2.9.2. Назначение стилей нескольким элементам одной страницы – создание внедренной таблицы стилей
- •1.2.9.3. В следующем примере в качестве селекторов используются непосредственно теги html
- •1.2.9.4. Селектор class
- •1.2.9.5. Идентификаторы селекторов
- •1.2.9.6. Контекстные селекторы
- •1.2.9.7. Назначение стилей для нескольких страниц сайта
- •1.2.9.8. Импортирование таблиц каскадных стилей
- •1.2.10.2. Свойства тега, определенные в .Block1 и .Block2 и другие часто применяемые свойства блоковых структур:
- •1.3. Задание к лабораторной работе №1
- •2.1.2. Теги абзаца и перевода строки для графики
- •2.1.3. Дополнительные элементы оформления
- •2.1.3.1. Разделительные полосы
- •2.1.3.3. Фоновый звук
- •2.1.4. Добавление внедренных объектов мультимедиа
- •2.1.5. Добавление элементов управления ActiveX
- •2.2. Задание к лабораторной работе №2
- •Лабораторная работа №3 Организация гипертекстовых связей
- •3.1. Методические рекомендации
- •3.1.1. Ссылки на фрагмент документа
- •3.1.2. Графические ссылки
- •3.1.3. Цвета гиперссылок
- •3.1.4.1. Настройка эффектов перехода Web-страницы
- •3.2. Задание к лабораторной работе №3
- •4.1.2. Текст заранее заданного формата (преформатированный текст)
- •Смещение текста
- •4.1.4. Воспроизведение видео в Internet Explorer
- •4.1.5. Бегущая строка
- •4.1.6. Организация возвратов
- •4.1.7. Списки определений (словарные списки)
- •4.2. Задание к лабораторной работе №4
- •Определение структуры и цветовое оформление таблиц
- •5.1.2. Выравнивание в таблицах
- •5.1.3. Составные ячейки
- •6.1.2. Плавающие фреймы
- •6.1.2. Изображения-карты
- •6.1.3. Интерактивные элементы – Roll Over (обработчик событий MouseOver)
- •6.2. Задание к лабораторной работе №6
- •7.1.2. Элементы управления формы
- •7.1.2.1 Поля ввода
- •7.1.2.2. Текстовые области
- •7.1.2.3. Переключатели
- •7.1.2.4. Флажки
- •7.1.2.5. Раскрывающиеся списки
- •7.1.3. Встроенные фильтры ie
- •Фильтр glow()
- •Расширенный язык разметки гипертекста
- •Библиографический список
- •Оглавление
6.1.3. Интерактивные элементы – Roll Over (обработчик событий MouseOver)
Такие элементы повышают привлекательность WEB-страниц, придают им некоторую динамику и наглядность.
Одним из событий, воспринимаемых программой, является наведение курсора на ссылку (или графическое изображение) документа HTML. Встроенная JavaScript-программа onMouseOver отслеживает это событие и может выполнить некоторую функцию. Эта функция описывается как JavaScript-программа внутри заголовка документа – тег <head>. Аналогично описывается функция для программы onMouseOut, отслеживающей событие отведения курсора от ссылки (или графического изображения). В следующем примере при помощи функций over(img, ref ) и out(img, ref ) производится замена изображения графической ссылки (параметр img ) на некоторое новое графическое изображение (параметр ref).
Пример:
<HTML>
<head>
<SCRIPT LANGUAGE="JavaScript">
function over(img, ref) { document.images[img].src = ref;}
function out(img, ref) { document.images[img].src = ref;}
</script>
</head>
<BODY BGCOLOR=”#0000aa” background="back.gif" text=”red”>
<H2 align=”center”> Интерактивные блоки - Пример на RollOver <br>
(Обработчики событий) </h2>
<a href="my1.htm" onMouseOver="over('glav','glav-1.gif');"
onMouseOut="out('glav','glav.gif');">
<IMG SRC="glav.gif" name="glav" border=”0”> </a> <BR>
<a href="my2.htm" onMouseOver="over('cork','cork-1.gif');"
onMouseOut="out('cork','cork.gif');">
<IMG SRC="cork.gif" name="cork" border=”0”> </a> <BR>
</body>
</html>
6.2. Задание к лабораторной работе №6
Создать HTML-документ, состоящий из трех фреймов – один горизонтальный и два вертикальных. Верхний горизонтальный фрейм должен содержать презентационную информацию, левый – ссылочный фрейм: содержит каталог просматриваемых файлов, правое – большое окно: служит для отображения просматриваемых файлов.
Ссылки в левом окне организовать при помощи изображения-карты, разработанной в Photoshop.
Разработать пример интерактивной (Rollover) структуры, обеспечивающей изменение формы шрифта гипертекстовой ссылки, замену базового изображения и т. п.
ЛАБОРАТОРНАЯ РАБОТА №7
Элементы программирования форм, фильтры IE
7.1. Методические рекомендации
7.1.1. Программирование форм
Фомы представляют собой наборы элементов управления, таких, как командные кнопки, переключатели, флажки, раскрывающиеся списки, поля для ввода информации и пр. формы работают вместе с установленным на сервере сценарным приложением, которое обрабатывает введенную информацию. Написание таких приложений выходит за рамки задач данного учебного пособия.
Объект формы создается тегами <FORM>….</FORM>. Формы не отображаются в окне браузера до тех пор, пока в него будут добавлены элементы формы.
С помощью атрибутов тега <FORM> можно настроить общие параметры работы формы.
METOD – определяет метод передачи данных формы на Web-сервер.
NAME – имя формы, по которому к форме и к ее элементам можно обращаться на JavaScript.
ACTION – адрес сценария обработки данных формы. Это может быть адрес URL ресурса в Интернет или адрес электронной почты, например,
<FORM METOD=”post” ACTION=mailto:MyAddress@mail.ru ENCTYPE =”text/plain”>
POST – это метод передачи информации сценарному приложению сервера.
ENCTYPE – формат данных формы. Если данные формы предназначены для передачи по адресу электронной почты, этому атрибуту следует присвоить значение “plain/text”.
ACCEPT-CHARSET – поддерживаемая кодировка текста. Если в полях формы предполагается ввод текста с использованием символов кириллицы, следует установить поддержку соответствующей кодировки текста, например, KOI8-R.
В документ <HTML> можно включить несколько форм, а в форму – любое количество полей ввода разных типов, но вложение форм не допускается.