Автор: Пользователь скрыл имя, 08 Января 2012 в 16:48, курс лекций
Лекции по основным темам по предмету "Мультимедийные технологии"
ОГЛАВЛЕНИЕ 1
Лекция 1. Локальные и глобальные компьютерные сети, сетевые технологии обработки информации 2
История 2
Виды компьютерных сетей 2
Информационная безопасность 3
Межсетевые экраны (firewalls) 3
Лекция 2. Интернет и его возможности 5
Интегрированные приложения для работы в Интернете 5
Система адресации в сети интернет 5
Лекция 3. Поисковые системы в Internet 10
Лекция 4. Язык гипертекстовой разметки HTML 11
Структура HTML документа 12
форматирование заголовков, шрифтов, абзацев 13
создание и изменение списков 15
Дизайн web-страницы с использованием графики 16
гипертекстовые ссылки 17
Дизайн web-страницы с использованием карты изображений 18
фреймы 21
Лекция 5. Средства разработки мультимедийных приложений 23
Лекция 6. Создание мультимедийной презентации 24
Факторы 24
Например:
<OL TYPE= «а» START=5>
<OL VALUE = «7»>
Дизайн web-страницы с использованием графики
| <BODY BGCOLOR="код_цвета"> | Задание цвета фона |
| <BODY TEXT="код_цвета"> | Задание цвета для всего текста |
| <BODY BACKGROUND="имя_файла"> | Заполнение фона картинкой |
| <IMG SRC="имя_файла"> | Изображение переносится на WEB-страницу с сохранением размера. |
| WIDHT= | Атрибут для задания ширины иллюстрации, измеряется в пикселях |
| HEIGHT= | Атрибут для задания высоты иллюстрации, измеряется в пикселях |
| ТОР | Выравнивает текст по верху изображения. |
| MIDDLE | Выравнивает текст по середине изображения. |
| BOTTON | Выравнивает текст по низу изображения |
| align=LEFT | Обтекаемое текстом изображение прижато к левой стороне окна браузера. |
| align= RIGHT | Обтекаемое текстом изображение прижато к правой стороне окна браузера |
| VSPACE= | Атрибут для задания верхнего и нижнего поля от иллюстрации до текста |
| HSPACE= | Атрибут для задания левого и правого поля от иллюстрации до текста |
| <BR CLEAR> | Отмена обтекания графики текстом |
Пример:
<BODY BACKGROUND="графика1.gif"> - файл графика1.gif является фоновой картинкой, находится в текущей папке.
<BODY
BACKGROUND="с:\HOME\Картинки\
<IMG
SRC="sofia.gif" WIDHT=100 HEIGHT=50 align= RIGHT HSPACE=10>
гипертекстовые ссылки
| <A HREF= «адрес ссылки»> текст ссылки </A> | Текстовая ссылка |
| <A HREF= «адрес ссылки»> <IMG SRC= «имя графического файла»> </A> | Графическая ссылка |
| <A NAME= «имя метки»> … </A> | Размещение метки на странице для дальнейшего возврата к данному фрагменту |
| ALT | подсказка |
| <A HREF= «#имя метки»> адрес перемещения </A> | Ссылка на метку |
| <BODY LINK= «ЦВЕТ»> | Цвет текста ссылки |
| <BODY А LINK= «ЦВЕТ»> | Цвет текста активной ссылки |
| <BODY V LINK= «ЦВЕТ»> | Цвет текста просмотренной ссылки |
Примеры:
<A HREF= «карта.html»> Это текстовая ссылка </A>
<A HREF= «роза.html»> <IMG SRC= «my1.jpg» WIDHT=60 HEIGHT=80> </A>
Дизайн web-страницы
с использованием карты
изображений
Карта изображений – графический рисунок, фрагменты которого используются в качестве отдельных гиперссылок. Графическая карта задается с помощью нескольких тегов.
| <MAP NAME = «имя_карты»> | Тег, открывающий карту, содержащий имя_карты |
| <AREA …> | Определяет область на картинке посредством параметров SHAPE, COORDS. |
| HREF= «адрес_ссылки» | Строка, определяющая адрес ссылки |
| SHAPE= «форма_области» | Тег, определяющий форму области: |
| «DEFAULT» | по умолчанию (обычно прямоугольник) |
| «RECT» | прямоугольник задаются 4 координаты: верхнего левого и нижнего правого углов |
| «CIRCLE» | круг
задаются 3 координаты: центр и радиус. |
| «POLYGONE» или «POLY» | многоугольник произвольной формы, задаются координаты каждого угла |
| COORDS | Координаты области задаются в пикселах, в виде перечня чисел, разделенных запятыми. Отчет начинается с нуля. |
| </MAP> | Тег, закрывающий карту |
| <IMG SRC = “имя_графического_файла” USEMAP=”# имя_карты” WIDHT=ширина HEIGHT=высота | Тег, распределяющий ссылки по картинке, вставляющий графическое изображение и реализующий привязку карты к нему, в котором используется атрибут связи с картой |
| USEMAP | Аргумент, задает расположение схемы распределения |
Пример:
<MAP NAME = «карта_1»>
<AREA HREF= «файл_1.html» SHAPE =«RECT» COORDS = «200, 10, 400, 100»>
</MAP>
<IMG SRC = “имя_графического_файла” USEMAP=”# карта_1” WIDHT=400 HEIGHT=400>
ДИЗАЙН
WEB – СТРАНИЦ С ИСПОЛЬЗОВАНИЕМ
ТАБЛИЦ
При создании дизайна WEB – страницы, размещения данных, используют таблицы.
<TABLE>…</TABLE> тег, открывающий и закрывающий таблицу
<TН>…</TН> заголовок таблицы. По умолчанию текст располагается по центру, имеет жирное начертание
<TR>…</TR> строка таблицы
<TD>…</TD> ячейки с данными
COLSPAN = кол-во_ячеек объединение столбцов
ROWSPAN – кол-во_строк объединение строк
HEIGHT = высота всей таблицы или ячейки, группы ячеек
CELLPADDING = ширина пустого пространства между содержимым ячейки и ее границами
ALIGN = выравнивание текста в ячейке по горизонтали
VALIGN = выравнивание текста в ячейке по вертикали
«TOP» по верхнему краю
«BOT - TOM» по высоте
«CENTER» по центру
«BASELINE» по нижнему краю
BORDER = рамка таблицы
CELLSPACING = ширина промежутков между ячейками
Ц
BORDERCOLOR = цвет линий, обрамляющих таблицу
BORDERCOLORDARK = атрибут для создания трехмерных таблиц
BORDERCOLORLIGHT
= атрибут для создания трехмерных таблиц
Пример:
<TABLE BORDER = 1 CELLSPACING = 0 CELLSPACING = 0 HEIGHT = «1» BORDERCOLOR = # 334455 BORDERCOLORLIGHT = # 334455>
<CAPTION> Таблица</CAPTION> - заголовок таблицы
<TR BGCOLOR = # 000055>
<TD WIDTH = «400»>
<BR>
</TD>
</TR>
<TR BGCOLOR = # 000066>
<TD WIDTH = «400»>
<BR>
</TD>
</TR>
</TABLE>
фреймы
Технология фреймирования позволяет просматривать в одном окне обозревателя несколько гипертекстовых документов. Один фрейм отображает только один гипертекстовый документ.
| <FRAMESET>
</FRAMESET> |
Тег создания и окончания фреймов |
| <NOFRAMES>
</NOFRAMES> |
Теги для описания фрейма для браузера, не поддерживающего фреймы |
| <FRAMESET COLS= «фрейм_1, фрейм_2, …»> | Определяет
количество и размеры горизонтальных
подокон.
Размер подокна определяется в пикселах, процентах (%) или в пропорциях (*). |
| <FRAMESET ROWS= «фрейм_1, фрейм_2, …»> | Определяет количество и размеры вертикальных подокон. |
| <FRAME> | Тег позволяет настроить свойства фрейма, имеет атрибуты: |
| SRC= | Адрес документа, который будет отображаться внутри фрейма |
| NAME= | Имя фрейма |
| MARGINWIDTH= | Горизонтальный отступ (от 1 до 6) между фреймом и границей |
| MARGINHEIGHT= | Вертикальный отступ (от 1 до 6) между фреймом и границей |
| SCROLLING=
SCROLLING= YES SCROLLING= NO SCROLLING= AUTO |
Прокрутка фрейма:
создать полосу прокрутки полоса прокрутки отсутствует полосы прокрутки отображаются в зависимости от свойств обозревателя |
| NORESIZE= | Фиксированный размер фрейма |
| SRC= | Задать гипертекстовый документ для фрейма |
| TARGET= “имя_фрейма” | Открыть ссылку
во фрейме с именем имя_ссылки.
Размещается в теге <A HREF=”…” TARGET=”…”> или в теге описания фрейма. |
| TARGET=”_blank” | Загрузить документ в новом окне |
| TARGET=”_self” | Загрузить документ в текущее окне |
| TARGET=”_top” | Загрузить документ в самый верхний фрейм окна |
Примеры:
<FRAMESET ROWS="*,*">
<FRAMESET COLS="65%,35%">
<FRAME SRC="link1.html">
<FRAME SRC="link2.html">
</FRAMESET>
<FRAMESET COLS="*,40%,*">
<FRAME SRC="link3.html">
<FRAME SRC="link4.html">
<FRAME SRC="link5.html">
</FRAMESET>
</FRAMESET>
Результат:
| 65% по горизонтали | 35% по горизонтали | ||
| Половина от оставшихся 60% | 40% по горизонтали | Половина от оставшихся 60% | |
Лекция 5. Средства разработки мультимедийных приложений
Лекция 6. Создание мультимедийной презентации
Планирование Web-сайта
Возможно, всю эту работу, включая создание и выпуск сайта, придется выполнить самостоятельно.