СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Проектирование и дизайн ИС Практическая работа №7

Категория: Прочее

Нажмите, чтобы узнать подробности

https://cloud.mail.ru/public/J74D/CNMnoNvJi - МАТЕРИАЛ К ПР №7

Просмотр содержимого документа
«Проектирование и дизайн ИС Практическая работа №7»

Практическое занятие №7


Тема: Вставка видео и аудио файлов. Работа с фреймами

Цель работы: научиться использовать мультимедийные файлы и фреймы

Приобретаемые умения и навыки: Умение работать с языком программирования HTML

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet



Теоретический материал


Вставка аудио файлов на страницу

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


Синтаксис


 src="URL"


Атрибуты

autoplay - Звук начинает играть сразу после загрузки страницы.

audio autoplay="autoplay"

controls - Добавляет панель управления к аудиофайлу.  controls="controls"

loop - Повторяет воспроизведение звука с начала после его завершения.

 loop="loop"

preload - Используется для загрузки файла вместе с загрузкой веб-страницы.  preload="none | metadata | auto"

src - Указывает путь к воспроизводимому файлу.  src="URL"



Вставка видео файлов на страницу


Тег video добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице Путь к файлу задается через атрибут src или вложенный тег .


Синтаксис

video

source src="URL"

video


Атрибуты

controls - Добавляет панель управления к видеоролику.

height - Задает высоту области для воспроизведения видеоролика.

Src - Указывает путь к воспроизводимому видеоролику.

width - Задает ширину области для воспроизведения видеоролика.



Пример использования атрибутов




Фреймы


Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область



При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.


Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 1).














Пример 1. Файл index.html


В данном примере окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src. В левое окно будет загружен файл, названный menu.html (пример 2), а в правое — content.html (пример 3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name.


Пример 2. Файл menu.html



Пример 3. Файл content.html



В данном случае опять используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись (пример 4).



Пример 4. Три фрейма



Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру.


Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру




Бегущая строка


Тег  создает бегущую строку на странице. На самом деле содержимое контейнера  не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Атрибуты

bgcolor - Цвет фона. marquee bgcolor="цвет"...marquee

direction - Указывает направление движения содержимого контейнера .

Синтаксис

 direction="down | left | right | up"...

Значения

Down - Движение сверху вниз.

Left - Движение справа налево.

Right - Движение в правую сторону.

Up - Движение вверх.


Линия разделения


Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег  относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.


Атрибуты

align - Определяет выравнивание линии.

color - Цвет линии. hr color="цвет"

size - Толщина линии. hr size="число"

width - Ширина линии hr width="число%"


Создание фона сайта


Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта.


Синтаксис

body background="URL"...body


Ход работы


Задание: С помощью тегов приведенных в теоретическом материале и изученный ранее создать простой сайт по примеру. Результат сайта представлен ниже. Материалы для практической работы вам предоставит преподаватель.


Результат









Контрольные вопросы


  1. Что такое фреймы?

  2. Опишите способ вставки аудио и видео файлов?