Мультимедиа
<<  История Пажеского корпуса и Суворовского училища Вышивание крестом 3 класс  >>
технология Создания мультимедийных дисков и виртуальных выставок
технология Создания мультимедийных дисков и виртуальных выставок
Что понадобится для изучения
Что понадобится для изучения
Термины
Термины
Термины
Термины
Термины
Термины
Структура web-документа
Структура web-документа
Вставка комментария
Вставка комментария
Создаем свою первую страничку
Создаем свою первую страничку
Создаем свою первую страничку
Создаем свою первую страничку
Создаем свою первую страничку
Создаем свою первую страничку
Работаем с текстом
Работаем с текстом
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Основные элементы форматирования текста
Списки
Списки
Списки
Списки
Списки
Списки
Списки
Списки
Списки
Списки
Покоряем HTML ссылки
Покоряем HTML ссылки
Как сделать ссылку внутри страницы
Как сделать ссылку внутри страницы
Дополнительные атрибуты
Дополнительные атрибуты
Работаем с изображениями
Работаем с изображениями
Примеры вставки изображения
Примеры вставки изображения
Необходимые атрибуты
Необходимые атрибуты
Примеры
Примеры
Цвет фона и текста
Цвет фона и текста
Цвет фона и текста
Цвет фона и текста
Цвет фона и текста
Цвет фона и текста
TABLE - Элемент для создания html таблицы
TABLE - Элемент для создания html таблицы
Таблицы
Таблицы
Объединение ячеек
Объединение ячеек
Таблицы
Таблицы
Таблицы
Таблицы
Таблицы
Таблицы
Пример:
Пример:
Результат в баузере:
Результат в баузере:
Второй пример:
Второй пример:
Результат в браузере:
Результат в браузере:
Пример виртуальной выставки
Пример виртуальной выставки
Каркас выставки
Каркас выставки

Презентация на тему: «Технология Создания мультимедийных дисков и виртуальных выставок». Автор: usfuntiv. Файл: «Технология Создания мультимедийных дисков и виртуальных выставок.ppt». Размер zip-архива: 2417 КБ.

Технология Создания мультимедийных дисков и виртуальных выставок

содержание презентации «Технология Создания мультимедийных дисков и виртуальных выставок.ppt»
СлайдТекст
1 технология Создания мультимедийных дисков и виртуальных выставок

технология Создания мультимедийных дисков и виртуальных выставок

Фунтикова И. В. ведущий программист НБЧР

2 Что понадобится для изучения

Что понадобится для изучения

Браузер Блокнот Пуск – Программы – Стандартные - Блокнот

3 Термины

Термины

Тег.

Тег- оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком < и заканчиваются знаком >

4 Термины

Термины

Атрибут.

Атрибут –это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки.

5 Термины

Термины

Элемент.

Элемент – понятие, введенное чисто для удобства обьяснения. Например, элемент HEAD состоит из двух тегов – открывающего <HEAD> и закрывающего </HEAD>. Таким образом, элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.

6 Структура web-документа

Структура web-документа

7 Вставка комментария

Вставка комментария

8 Создаем свою первую страничку

Создаем свою первую страничку

Шаг 1:

Шаг 2:

Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ.

Создайте на своем ПК папку с названием сайта; Внутри папки создайте ещё одну папку с названием www, а внутри её ещё одну для изображений img

9 Создаем свою первую страничку

Создаем свою первую страничку

ШАГ 3: Пишем в блокноте текст простейшей странички:

10 Создаем свою первую страничку

Создаем свою первую страничку

Шаг 4:

Шаг 5:

Запустим файл index.html и увидим следующее:

Теперь сохраните ваш документ как index.html

11 Работаем с текстом

Работаем с текстом

12 Основные элементы форматирования текста

Основные элементы форматирования текста

13 Основные элементы форматирования текста

Основные элементы форматирования текста

Просмотр в браузере

Текст внутри документа

P - используется для разметки параграфов в документах. Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине. По умолчанию имеет значение left.

Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е. <p align="right"> а не <p align=" right "> иначе не будет работать!

14 Основные элементы форматирования текста

Основные элементы форматирования текста

Просмотр в браузере

Текст внутри тела документа

Н1, Н2,… Н6 - Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right.

Примечание: закрывающий тег обязателен!

15 Основные элементы форматирования текста

Основные элементы форматирования текста

Просмотр в браузере

Текст внутри тела документа

BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега.

Примечание: Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос!

16 Основные элементы форматирования текста

Основные элементы форматирования текста

Текст внутри тела документа

Просмотр в браузере

DIV - используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать.

Атрибуты: ALIGN - определяет способ горизонтального выравнивания контейнера. Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине.По умолчанию имеет значение left.

17 Основные элементы форматирования текста

Основные элементы форматирования текста

18 Основные элементы форматирования текста

Основные элементы форматирования текста

19 Основные элементы форматирования текста

Основные элементы форматирования текста

20 Основные элементы форматирования текста

Основные элементы форматирования текста

21 Основные элементы форматирования текста

Основные элементы форматирования текста

22 Списки

Списки

Различают списки двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные).

Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

23 Списки

Списки

UL

UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Текст внутри тела документа

Просмотр в браузере

24 Списки

Списки

OL

OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка. Атрибуты: START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа) . Если не указывать, начинается с начала. TYPE – определяет стиль нумерации пунктов списка. Возможные значения: "A" – заглавные буквы A, B, C ... "a" – строчные буквы a, b, c ... "I" – большие римские числа I, II, III ... "i" – маленькие римские числа i, ii, iii ... "1" – арабские числа 1, 2, 3 ...

25 Списки

Списки

OL

26 Списки

Списки

LI

LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам. Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

Текст внутри тела документа

Просмотр в браузере

27 Покоряем HTML ссылки

Покоряем HTML ссылки

<a href=“http://www.nbchr.ru”>Эта ссылка на сайт nbchr.ru</a> <a href=“page2.htm”>Для перехода на page2 щелкните здесь</a> <a href=“www/page2.htm”>Для перехода на page2 щелкните здесь</a> <a href="pdf/life_001.pdf">Нажав эту ссылку, вы перейдёте на документ pdf</a>

28 Как сделать ссылку внутри страницы

Как сделать ссылку внутри страницы

Текст внутри страницы:

В браузере:

29 Дополнительные атрибуты

Дополнительные атрибуты

TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank". TITLE - указывает заголовок ссылки, который появляется при наведении на нее.

<a href="http://www.nbchr.ru" target="_blank"> Это ссылка на сайт nbchr.ru, откроется в новом окне</a> <br> <br> <a href="http://www.nbchr.ru" title="Сайт Национальной библиотеки ЧР"> Эта - тоже на nbchr.ru. При наведении появится заголовок.</a>

30 Работаем с изображениями

Работаем с изображениями

<img src=“pic1.jpg">

GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)

31 Примеры вставки изображения

Примеры вставки изображения

<!-- Если изображение находится в папке images --> <img src="images/pic1.Jpg"> <!-- если находится на сайте www.Nbchr.Ru --> <img src="http://www.Nbchr.Ru/pic1.Jpg"> <!-- если находится на сайте www.Nbchr.Ru в папке images --> <img src="http://www.Nbchr.Ru/images/pic1.Jpg">

32 Необходимые атрибуты

Необходимые атрибуты

ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство. HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ. HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.

33 Примеры

Примеры

34 Цвет фона и текста

Цвет фона и текста

Вот необходимые атрибуты: BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

35 Цвет фона и текста

Цвет фона и текста

Текст

Браузер

36 Цвет фона и текста

Цвет фона и текста

Текст

Браузер

37 TABLE - Элемент для создания html таблицы

TABLE - Элемент для создания html таблицы

Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах. TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен. TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

38 Таблицы

Таблицы

Текст

В баузере

39 Объединение ячеек

Объединение ячеек

Для этого существуют данные атрибуты. COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

40 Таблицы

Таблицы

Вот еще полезные атрибуты: CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом. CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html. WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

41 Таблицы

Таблицы

42 Таблицы

Таблицы

ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы .Возможные значения: top, bottom, middle. (прижать к верху, прижать к низу, и установить посередине). BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но: если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.

43 Пример:

Пример:

<!-- Задаем ширину , высоту, рамку, выравнивание по центру и фоновый цвет всей таблицы--> <table width="400" height="100" border="1" align="center" bgcolor="#fff8d2"> <tr> <!-- эту ячейку оставляем по умолчанию--> <td>ряд 1 ячейка1</td> <!-- содержимое горизонтально выравниваем по центру, вертикально - прижимаем к верху--> <td align="center" valign="top">ряд1 ячейка2</td> </tr> <tr> <!-- содержимое горизонтально выравниваем по центру, вертикально - прижимаем к низу--> <td align="center" valign="bottom">ряд 2 ячейка 1</td> <!-- содержимое горизонтально выравниваем по правому краю, вертикально - посередине, и меняем фоновый цвет--> <td align="right" valign="middle" bgcolor="#33ff99">ряд 2 ячейка 2</td> </tr> </table>

44 Результат в баузере:

Результат в баузере:

45 Второй пример:

Второй пример:

<!-- Задаем ширину , высоту, рамку, фоновый цвет всей таблицы, выравнивание оставляем по умолчанию(по левому краю)--> <table width="400" height="100" border="1" bgcolor="#fff8d2"> <tr> <!-- горизонтальное-по центру, вертикально по умолчанию(по центру)--> <td align="center"> ряд 1 ячейка1 </td> <!-- горизонтальное-по центру, вертикально по умолчанию(по центру) и делаем фоновый рисунок--> <td align="center" background="pchela.Jpg"> ряд1 ячейка2 </td> </tr> <tr> <!-- горизонтальное-по центру, вертикально по умолчанию(по центру)--> <td align="center"> ряд 2 ячейка 1 </td> <!-- горизонтальное-по центру, вертикально по умолчанию(по центру) и меняем фоновый цвет--> <td align="center" bgcolor="#33ff99">ряд 2 ячейка 2</td> </tr> </table>

46 Результат в браузере:

Результат в браузере:

47 Пример виртуальной выставки

Пример виртуальной выставки

48 Каркас выставки

Каркас выставки

«Технология Создания мультимедийных дисков и виртуальных выставок»
http://900igr.net/prezentacija/informatika/tekhnologija-sozdanija-multimedijnykh-diskov-i-virtualnykh-vystavok-154056.html
cсылка на страницу
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > Мультимедиа > Технология Создания мультимедийных дисков и виртуальных выставок