- •Лабораторная работа №1 создание домашней web - страницы Цели работы:
- •Материально – техническое оснащение
- •Порядок выполнения работы
- •Методические указания
- •Гиперссылки и гипертекст
- •Технология клиент-сервер для World Wide Web
- •Классификация web-сайтов:
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Цветовая гамма html-документа
- •Контрольные вопросы:
- •Задания
- •Лабораторная работа №2 использование ссылок и объектов мультимедиа на web- страницах Цели работы:
- •Порядок выполнения работы
- •Методические указания
- •Объекты
- •Форматы графических изображений
- •Изображения в html-документе
- •Звук в html-документе
- •Видео в html-документе
- •Создание бегущей строки
- •Задания
- •Контрольные вопросы:
- •Лабораторная работа №3 стилевое оформление web - страницы Цели работы:
- •Методические указания
- •Контрольные вопросы:
Звук в html-документе
Вставить звук в качестве фонового можно при помощи двух тегов: <EMBED> или <BGSOUND>. Результат получится один и тот же: звук появится сразу после загрузки файла. Разница лишь в том, что при использовании BGSOUND звук появляется без всяких пояснений, а при употреблении EMBED - на странице появляется панель управления проигрывателя, с помощью которой пользователь может остановить проигрывание, регулировать громкость и т.д.
Параметры BGSOUND :
src - имя звукового файла (например: SRC="Sound.wav");
loop - число повторов (например: LOOP=3).
Параметры EMBED:
width (height) - ширина (высота) пульта управления
controls - тип пульта управления
autostart - если значение равно true, то воспроизведение начнётся сразу после загрузки (значения true или false)
loop - повторять ролик или нет (значения true или false)
play_loop - количество повторений ролика
hidden - показать или скрыть пульт управления (значения true или false)
volume – громкость (от -10000 до 0 – максимальный уровень звука).
Пример 4. Вставка фонового звука на страницу:
<bgsound src="звуки космоса.mp3">
или
<embed src="звуки космоса.mp3" width="1" height="1" volume="50" autostart="true" loop="true"></embed>
Пример 5. Вставка звука на страницу с пультом управления:
<embed src="flourish.mid" width="200" height="40" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="false"></embed>
Видео в html-документе
Пример 6. Вставка видео на страницу:
<img dynsrc="видео_meteorit.avi" width=400 height=400 border=10>
Пример 7. Вставка видео на страницу с пультом управления:
<embed src="видео_meteorit.avi" width="400" height="400" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="false"></embed>
Создание бегущей строки
Тег <MARQUEE> позволяет создавать бегущую строку в документе. При использовании этого HTML элемента необходимо указывать закрывающий тег </MARQUEE>.
Атрибуты:
bgcolor определяет цвет фона бегущей строки;
height определяет высоту, отведенную для бегущей строки;
width определяет ширину, отведенную под бегущую строку;
behavior определяет тип движения строки, возможные значения:
scroll - перемещает текст в направлении, указанном в direction (дойдя до края экрана, движение начинается с противоположной стороны, и так столько раз, сколько указано в loop);
alternate - колебательные движения (первоначальное направление задается в direction);
slide - перемещает текст в указанном направлении и останавливается, свойство loop не имеет воздействия;
direction определяет направление движения строки, возможные значения:
down – вниз;
left – влево;
right – вправо;
up - вверх ;
loop определяет количество повторений, при значении " - 1" - повторяется непрерывно.
Пример 8. Создание бегущей строки:
<MARQUEE BEHAVIOR="scroll" DIRECTION="LEFT" LOOP=" - 1" BGCOLOR="#99FF00"> Бегущая строка SCROLL</MARQUEE>
Задания
-
Создайте отдельную папку «Вставка объектов».
-
Скопируйте в нее картинки из папки «Картинки Космос». В приложении Блокнот создайте файл следующего содержания:
<html>
<head>
<title>Вставка изображения. Пример 1</title>
</head>
<body>
<font color="red"><h3>Солнечная система</h3>
</font>
<map name="test">
<area shape="rect" coords="0, 0, 50, 300" alt="Солнце" href="Солнце.JPG"/>
<area shape="circle" coords=" 130, 120, 20" alt="Земля" href="Земля.JPG"/>
<area shape="circle" coords=" 200, 105, 20" alt="Юпитер" href="Юпитер.GIF"/>
<area shape="circle" coords=" 270, 70, 20" alt="Сатурн" href="Сатурн.JPG"/>
</map>
<img usemap="#test" src="солнечная система.JPG" width="400" height="400" />
</body>
</html>
Сохраните файл под именем «Задание 1.html». Просмотрите его с помощью браузера (обратите внимание: при щелчке мышью на отдельные участки изображения происходит переход по гиперссылке).
-
Дополните карту изображения ссылками на планеты Меркурий, Венеру, Марс.
-
Создайте сайт «Солнечная система», состоящий из нескольких web-страниц. На главной странице разместите изображение «Солнечная система» и текст (используйте изображения, видео, звуки из папки «Картинки Космос», текст из файла «Космос.doc»). Создайте страницы, содержащие информацию о галактиках, Солнце, Сатурне, Земле, Юпитере, Венере, Марсе. Страницы должны содержать:
-
текст;
-
изображения (установите размер изображений, ширину рамки, выравнивание, отступ по горизонтали и вертикали, а также альтернативный текст.);
-
видео;
-
на главной странице вставьте фоновый звук;
-
на главной странице создайте бегущую строку;
-
на страницу «Галактики» вставьте звук с пультом управления;