1. Захват видеосигнала с видеокамеры
Его можно осуществить, подключив камеру к порту IEEE1394
(«FireWire») (с другими источниками сигнала программа не работает) и
активизировав функцию захвата щелчком на кнопке
или командой
меню Файл – Записать. Процесс захвата можно контролировать на мони-
торе.
После того как захват остановлен, программа предложит вам сохра-
нить файл видеофрагмента в удобное для вас место. Выбираем нужный ка-
талог, даем какое-нибудь название нашему файлу и щелкаем по кнопке
Сохранить.
После захвата программа создает проект с тем именем, которое вы
указали при сохранении файла, а сам видеофрагмент появляется в списке
файлов проекта. Можно начинать монтаж.
2. Импортирование файла
Хоть Movie Maker и дает возможность захвата видеосигнала, весьма
возможно, что вам захочется – как сейчас, так и в будущем, – использовать
материал из других источников: со своего жесткого диска, из сети, с ком-
пакт-диска и т. д. Кроме того, Movie Maker позволяет импортировать зву-
ковые файлы и статичные изображения. Это могут быть заставки, титры к
вашему фильму, записанная отдельно звуковая дорожка.
Файлы импортируются в Movie Maker командой Файл – Импорт. По-
сле того, как файл выбран и импортирован, он помещается в библиотеку
клипов Сборники.
Отсюда клип можно перетащить на временную шкалу, просмотреть
или просто так полюбоваться. Клипы помещаются в папку Сборники на
постоянное хранение, то есть вы можете создать библиотеку клипов для
каждого фильма.
Работа со сборником клипов
Можно кое-что сделать с клипами еще до начала монтажа, чтобы не-
141
много упростить дальнейшую работу. Movie Maker позволяет делить и
объединять клипы.
Деление клипа на две части
Если ваш клип содержит два отрывка, каждый из которых представ-
ляет самостоятельный интерес, лучше представить его как два отдельных
клипа. Сделать это легко: щелкните на клипе в сборнике, переместите ука-
затель воспроизведения на панели просмотра к «точке деления» и нажмите
кнопку
Разделить.
После того, как это будет сделано, в сборнике появятся два клипа с
похожими именами: Clip 1 и Clip 1(1).
Все просто. Ну, а если вы поспешили и разрезали клип неудачно, как
же склеить части опять?
Объединение нескольких клипов
Выбрав клипы, которые нужно соединить, щелчком правой кнопки
мыши вызовите контекстное меню, выберите команду Объединить. Оба
приема позволят вам слегка упорядочить клипы и несколько упростить
следующий шаг.
Режимы монтажа в Movie Maker
Монтаж в Movie Maker производится в основном посредством «пере-
таскивания», этот процесс прекрасно знаком пользователям Windows.
«Взяли» клип с панели клипов – и «положили» его в нужное место. Факти-
чески процесс монтажа, расположения клипов в нужном порядке в Movie
Maker имеет две разновидности – временная диаграмма (timeline) и рас-
кадровка (storyboard). Они весьма отличаются друг от друга, однако оба
чрезвычайно полезны в «технологическом процессе» Movie Maker. Вы
можете переключаться с одного режима на другой в любое время в ходе
работы над проектом, пользуясь для этого переключателем, расположен-
ным чуть выше и левее рабочей области:
Режим «раскадровка»
В режиме раскадровки клипы располагаются в хронологической по-
следовательности – фильм будет проигрываться по порядку слева направо.
Режим раскадровки великолепен для быстрого монтажа без всяких «хитро-
стей». Это простой процесс: мы перетаскиваем клипы с панели, «уклады-
ваем» их в «кадры» фильма, а затем нажимаем кнопку воспроизведения и
смотрим, устраивает ли нас такая последовательность. Этот режим стано-
вится непригодным, когда необходима точнейшая обработка, отделка и
хронометраж клипов. В этом случае на помощь приходит режим времен-
ной диаграммы.
Режим «временная диаграмма»
Этот режим позволяет гораздо более тонкий монтаж, чем в режиме
раскадровки; дает возможность обрезать клипы и применять некоторые
основные типы переходов, обеспечивает контроль над общим хрономет-
142
ражем проекта. Режим временной диаграммы выглядит посложнее, но
только из-за способа отображения длительности клипов. Как и в режиме
раскадровки, клипы перетаскиваются на временную диаграмму. При этом
Movie Maker проявляет некоторый «интеллект», предлагая поместить клип
до или после клипа, уже присутствующего на временной шкале. Затем
можно сделать «тонкую настройку» положения клипов на шкале, перетас-
кивая их уже внутри временной диаграммы. Здесь пригодятся кнопки из-
менения масштаба (увеличения и уменьшения), которые позволят с боль-
шой точностью отрегулировать расположение клипов и переходы. Кроме
того, в режиме временной диаграммы можно немного обрезать наши кли-
пы путем передвижки моментов начала и окончания, а также добавить не-
которые основные переходы.
Практическая часть
Задание 1. Обрезка и монтаж фрагментов «встык»
1. Импортируйте готовый видеофрагмент (исходный файл называется
Tea.avi), используя команду Файл – Импорт.
Разумеется, программа принимает не все форматы видеофайлов. Но
многие ей знакомы. Файл сохранен в формате MPEG4 и требует наличия в
системе драйвера MPEG4.
2. Перетащите мышкой видеофрагмент (видеофрагменты) из списка
на монтажную линейку (рис. 46).
Запустите и посмотрите фрагмент (фрагменты). Придумайте и со-
ставьте алгоритм монтажа. Дело это сугубо творческое и требует нетриви-
ального подхода.
Рис. 46.
143
О сценарии. Допустим, мы хотим показать, как из чайника в чашку
наливается чай, а затем в ту же чашку опускается ложка. Сюжет простой.
Но в исходном материале много лишнего.
3. Резать и склеивать кадры удобнее в режиме временной диаграммы.
Перейдем в этот режим, щелкнув по кнопке
слева от монтажной ли-
нейки. Линейка приобретает более удобный вид. В ее верхней части мы
видим временную шкалу, которая позволяет иметь точное представление о
том, где именно мы находимся.
Если видеофрагмент не умещается на монтажной линейке целиком,
щелкните по кнопке уменьшения масштаба. Теперь ясно видны границы
видеофрагмента.
Рис. 47.
Первый кадр, согласно сценарию должен начинаться с того момента,
когда рука уже поставила чашку на стол. Значит, все, что имеется до этого
момента, нужно убрать. Отметьте видеофрагмент на монтажной линейке
щелчком мышки, затем щелкните по кнопке
Разделить клип. У нас
получилось два кусочка ленты. На первом остались ненужные нам кадры о
том, как рука ставит чашку на стол. А второй кусочек (отмеченный на
монтажной линейке) начинается уже с того момента, который должен вой-
ти в фильм.
Рис. 48.
Так как первый кадр нам не нужен, его необходимо удалить с мон-
тажной линейки. Для этого щелкаем мышкой по кадру так, чтобы он выде-
лился цветом, и нажимаем на клавишу Delete на клавиатуре. Кадр исчезает
с линейки, а второй кадр автоматически «подтягивается» к началу. При
разрезании и удалении частей видеофрагмента сам файл остается в непри-
косновенности. Но обратите внимание на то, что программа не имеет
функции отмены операции. Поэтому надо действовать поточнее.
4. Аналогично, перемещая движок-указатель, приблизьтесь к тому
моменту, когда чай налит в чашку, но рука еще не положила ложку. Снова
разрежьте фильм, щелкнув по кнопке Разделить клип.
144
Рис. 49.
5. Аналогичным способом вырежьте из фильма кадр, где рука кладет
ложку в стакан. Ненужные фрагменты удалите (можно отметить сразу не-
сколько кадров, удерживая клавишу Ctrl).
6. Просмотрите фильм целиком с нормальной скоростью, щелкнув по
кнопке воспроизведения. При этом должны быть отмечены все кадры, вхо-
дящие в фильм.
7. Сохраните проект фильма командой Файл – Сохранить проект
как. При сохранении проекта нам предстоит выбрать название для файла
проекта и каталог на жестком диске, куда мы запишем этот файл.
8. Сохраните получившийся фильм в виде отдельного файл с учетом
всех монтажных изменений. Для запуска функции просчета фильма, щелк-
ните по кнопке Сохранить фильм или через меню Файл – Сохранить
фильм.
Фильм может быть сохранен в разных форматах. Напомним, что про-
грамма Movie Maker предназначена, в основном, для формирования ком-
прессированных роликов для Интернета. Поэтому по умолчанию она пред-
лагает именно такие форматы видеофайлов. Но в списках форматов можно
найти и возможность сохранения фильма в цифровом формате DV-AVI,
если выбрать из списков те пункты, которые показаны на рис. 50.
Рис. 50. Параметры сохранения фильма
При необходимости мы можем снабдить файл нашего фильма ком-
145
ментариями, поясняющими содержание фильма. После того как все на-
стройки сделаны, остается только щелкнуть по кнопке ОК.
Программа попросит вас указать название файла фильма и выбрать
каталог, куда будет сохранен этот файл. После того как вы проделаете все
это и щелкнете по кнопке Сохранить, начнется просчет фильма и запись
его в файл.
Просчет фильма может занять некоторое время. После того как про-
счет фильма закончен, программа сообщит вам об этом и предложит про-
смотреть готовый ролик.
Задание 2. Монтаж с эффектом плавного перехода
Возможности программы Movie Maker позволяют создавать плавные
переходы между кадрами. Давайте вернемся к нашему проекту и попробу-
ем сделать так, чтобы кадры менялись не резко, а постепенно.
1. Откройте файл проекта, сохраненный в предыдущем упражнении.
2. На монтажной линейке щелчком мышки отметьте второй кадр.
3. Захватите мышкой второй кадр и перетащите его немного влево,
так чтобы его начало накрывало конец первого кадра (рис. 51). Область
пересечения кадров в момент перетаскивания будет обозначаться индика-
тором уровня с плавно поднимающимся белым сектором.
Рис. 51.
После перемещения кадра образуется область пересечения кадров. В
этой области программа сформирует так называемую «шторку», где изо-
бражение первого кадра будет плавно вытесняться вторым кадром. Про-
грамма Movie Maker, в отличие от более серьезных программ монтажа,
умеет делать только один вид «шторок». Но зато шторка с плавным вытес-
нением наиболее употребительна в практике монтажа.
Если переместить курсор-указатель в область шторки, то в окошке
предварительного просмотра можно наблюдать эффект плавной смены
изображения.
4. Сохраните фильм с плавным переходом между кадрами и посмот-
рите его целиком.
Задание 3. Монтаж видеофрагментов и статичных изображений
Программа Movie Maker умеет работать не только с видеофрагмента-
ми, но и со статичными изображениями – фотографиями, картинками. Для
примера, поставим в конце нашего фильма фотографию в формате BMP,
146
заранее сохраненную на жестком диске.
1. Откройте файл проекта, сохраненный в предыдущем упражнении.
2. Импортируйте фотографию Tea.bmp в проект фильма. Файл фото-
графии появится в списке файлов проекта. Теперь с ней можно работать
так же, как и с файлами видеофрагментов
Для лучшего результата необходимо, чтобы фотография была при-
мерно такого же размера, как и кадры фильма. В нашем случае размер фо-
тографии соответствует размеру кадров фильма (720x576 точек). Фотогра-
фия, отличающаяся по размеру или соотношению ширины и высоты от
кадров фильма, будет автоматически смасштабирована, и изображение на
фотографии может исказиться.
3. Захватите фотографию мышкой и переместить ее на монтажную
линейку, в конец фильма. Обратите внимание на то, что фотография пре-
вращается в видеофрагмент. То есть она будет демонстрироваться не-
сколько секунд. Время демонстрации можно изменить, двигая края фото-
графии на монтажной линейке.
4. К фотографии можно применить «шторку» так же, как к видео-
фрагменту. Захватите фотографию на монтажной линейке и сместите ее
влево, так чтобы начало фотографии немного наложилось на конец преды-
дущего видеофрагмента. Область пересечения фотографии и видеофраг-
мента программа Movie Maker превратит в область плавного перехода изо-
бражения.
Сохраните фильм и посмотрите его целиком.
Задание для самостоятельного выполнения
Создание титров к фильму
Статичные изображения в фильме можно использовать в качестве тит-
ров. Создайте два графических файла, которые будут использованы в каче-
стве титров к вашему фильму: название фильма в начале и надпись «Конец
фильма» – в конце. Эти картинки можно подготовить в любом графиче-
ском редакторе, например, в редакторе Paint, сохраните их в BMP-файлах.
При желании к титрам можно применить эффект «шторок».
Задание 4. Озвучивание ролика
Оригинального звука, захваченного с видеокамеры, не всегда бывает
достаточно. Иногда хочется добавить комментарии голосом или наложить
на фильм фоновую музыку. Программа Movie Maker позволяет проделать
все эти трюки. На монтажной линейке под линией видеофрагментов рас-
полагается линейка дополнительного аудиотрека. На этот аудиотрек мож-
но поместить заранее подготовленный файл или записать звук «на лету», в
момент проигрывания фильма. Чтобы активировать функцию записи, щел-
каем по кнопке
Записать комментарий.
На экране появляется окошко записи комментария (рис. 52). По умолча-
147
нию функция настроена на запись с микрофона. Достаточно подключить
микрофон к соответствующему входу звуковой платы, установить желае-
мый уровень записи регулятором и щелкнуть по кнопке Запись. Начнется
воспроизведение фильма с параллельной записью звука с микрофона.
Можно надиктовать свои комментарии к происходящему на экране.
Рис. 52. Окно записи комментария
Источником звука может быть не только микрофон. Все возможности
звуковой платы к вашим услугам. Можно одновременно с проигрыванием
фильма запустить проигрыватель звуковых файлов или CD-плеер. Платы
серии SBLive и Audigy позволяют выбрать также суммарный выходной
канал What u hear, позволяющий выполнить запись с нескольких источни-
ков, микшируя их в реальном времени. Возможности для творчества прак-
тически неограниченные.
Добавление звукового сопровождения к видеоролику
1. Нажмите на кнопку
Записать комментарий.
2. В окне Запись комментария
нажмите кнопку Изменить. В окне
Настройка аудио выберите входной
канал Stereo Mixer.
3. Запустите проигрыватель зву-
ковых файлов.
4. Нажав на кнопку Запись, вы-
полните синхронную запись музыки
необходимой продолжительности. В
конце фильма переместите регулятор уровня записи вниз, уменьшая уро-
вень фоновой музыки. По окончании необходимого времени записи щелк-
ните по кнопке Остановить.
148
5. Программа предложит сохранить звуковой файл комментария на
диске. Напишем имя файла (например, music) и выберем каталог для его
сохранения (рис. 53).
Рис. 53.
6. Записанный нами звуковой файл появится в списке файлов проекта.
Одновременно на линейке звукового трека появится его отображение.
С этим треком можно выполнить простейшие монтажные операции.
Подтянуть мышкой конец трека к концу видеоряда, разрезать трек или
сместить его по времени.
7. Звуковой файл можно не только записывать «на лету», но и импор-
тировать в проект так же, как видео и графические файлы.
8. Щелкнув по кнопке баланса
звука
, вызовите на экран ми-
ниатюрный микшер. Он имеет все-
го один регулятор, позволяющий
устанавливать баланс между ори-
гинальным звуком видеофрагмента
и дополнительным аудиотреком. Если вы хотите, чтобы звук камеры зву-
чал громче, а звук трека – тише, то сдвиньте регулятор влево.
9. Просмотрите озвученный ролик и сохраните фильм.
Задания для самостоятельного выполнения
1. Озвучьте ролик, импортировав звуковой файл.
2. Используя все описанные приемы, придумайте сценарий и смонти-
руйте ролик на основе 2-3 видеофрагментов.
Лабораторная работа № 7.
149
Создание простейших файлов HTML
Задание 1. Создание простейших файлов HTML
Чтобы создать свой файл HTML, сделайте следующее:
1. Создайте папку HTML, в которой мы будем сохранять созданные
Web-страницы.
2. Запустите стандартную программу Блокнот (Notepad).
3. Наберите в окне редактора простейший текст файла HTML:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
расписание занятий на вторник
</body>
</html
4. Сохраните файл под именем RASP.HTM
5. Для просмотра созданной Web-страницы загрузите броузер Micro-
soft Internet Explorer.
6. Откройте в меню броузера Файл (File), Открыть (Open), Про-
смотр(Обзор – Browse) и найдите в папке KURS файл RASP.HTM и загру-
зите его. Убедитесь, что название Web-страницы (Учебный файл HTML)
отразилось в верхней статусной строке броузера.
Задание 2. Управление расположением текста на экране
1. При необходимости выполните п.п. 5-6 задания 1.
2. Откройте первоисточник Web-страницы – в меню броузера Вид
(View )– Просмотр HTML-кода откроется окно со стандартной программой
Блокнот (Notepad), в котором ваша Web-страница представлена в командах
HTML.
3. Внесите изменения в текст файла HTML, расположив слова «Распи-
сание», «занятий», «на вторник» на разных строках:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
расписание
занятий
на вторник
150
</body>
</html>
4. Сохраните внесенные изменения в файле RASP.HTM, с помощью
команд Файл (File), Сохранить (Save). Закройте программу Блокнот (Note-
pad).
5. Просмотрите с помощью броузера Microsoft Internet Explorer новую
полученную Web-страницу используя клавишу F5 или с помощью команд
Вид(View), Обновить (Refresh). Изменилось ли изображение текста на эк-
ране?
Примечание
В дальнейшем после внесения изменений в Web-страницу всегда вы-
полняйте п.п.4-5.
Задание 3. Тэги перевода строки и абзаца
1. Внесите изменения в текст файла HTML:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
расписание<p>
занятий<br>
на вторник
</body>
</html>
2. Сохраните внесенные изменения в файле RASP.HTM.
3. Просмотрите с помощью броузера Microsoft Internet Explorer новую
полученную Web-страницу. Как изменилось изображение текста на экра-
не?
Задание 4. Выделение фрагментов текста
Информация. Тэги выделения фрагментов текста позволяют управ-
лять отображением отдельных символов и слов. Существует три тэга вы-
деления фрагментов текста:
<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
1. Внесите изменения в файл RASP.HTM:
<html>
151
<head>
<title> учебный файл html </title>
</head>
<body>
<b> расписание </b><i>занятий</i> <u> на вторник</u>
</body>
</html>
2. Посмотрите новую полученную Web-страницу.
Задание 5. Использование стилей заголовка
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<h1> расписание </h1><i>занятий</i> <u> на вторник</u>
</body>
</html>
2. Посмотрите новую полученную Web-страницу.
Задание 5. Задание размера текущего шрифта.
Информация. Тэг шрифта <FONT> позволяет задавать размер теку-
щего шрифта в отдельных местах текста. Диапазон установки текущего
шрифта – от 1 до 7.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<font size=«7»> расписание </font>
занятий на вторник
</body>
</html>
2. Самостоятельно измените размер шрифта для текста «занятия на
вторник», используя тэг <FONT>.
3. Измените текст HTML-документа, используя тэги выделения фраг-
ментов текста и тэги перевода строки и абзаца.
152
Задание 6. Гарнитура и цвет шрифта
Примеры записи цвета в формате RGB приведены в таблице4.
Таблица 4.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<u><i><b> <font color= «#ff0000» face= «arial» size= «7»> расписание
</font> ></b></i></u>
занятий на вторник
</body>
</html>
2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста до-
кумента.
Задание 7. Выравнивание текста по горизонтали
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<p align=center>
<font color= «#008080» size= «7»><b> расписание
</b></font><br>
<font size= «6»><i>занятий на вторник</i></font>
</p>
</body>
</html>
153
Задание 8. Задание цвета фона и текста
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body bgcolor= «#ffffcc» text= «#330066»>
<p align=center>
<font color= «#008080» size= «7»><b> расписание
</b></font><br>
<font size= «6»><i>занятий на вторник</i></font>
</p>
</body>
</html>
Лабораторная работа № 8.
Вставка изображение в HTML-документ
Задание 1. Размещение графики на Web-странице
Информация. Тэг <IMG …> позволяет вставить изображение в доку-
мент. Изображение появится в том месте документа, в котором записан
этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий тэг
не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF,
JPG, PNG. Для выполнения упражнения считаем, что графический файл
Wagon.gif хранится в рабочем каталоге HTML, где находится и наша Web-
страница.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body bgcolor= «#ffffff» text= «#330066»>
<p align=center>
<font color= «#008080» size= «7»><b> расписание
</b></font><br>
<font size= «6»> <i>занятий на вторник</i></font><br><br>
<img src= «wagon.gif»>
</p>
</body>
154
</html>
Тэг <IMG …> имеет немало атрибутов (см. таблицу 5), которые мож-
но задавать дополнительно. Они могут располагаться где угодно в тэге по-
сле кода IMG.
Таблица 5. Атрибуты изображения
Атрибут
ALT <IMG
BORDER <IMG
ALIGN <IMG
HEIGHT <IMG
WIDTH <IMG
VSPACE <IMG
HSPACE <IMG
Формат
SRC=«Wagon.gif»
ALT= «картина»>
SRC=«Wagon.gif»
BORDER= «3»>
SRC=«Wagon.gif»
ALIGN=TOP>
SRC=«Wagon.gif»
HEIGHT=111>
SRC=«Wagon.gif»
WIDTH=220 >
SRC=«Wagon.gif»
VSPACE= «8»>
SRC=«Wagon.gif»
HSPACE= «8»>
Описание
Если броузер не воспринимает
изображение, вместо него появ-
ляется заменяющий текст.
Задает толщину рамки вокруг
изображения. Измеряется в
пикселах.
Выравнивает изображение от-
носительно текста:
по верхней части изображения
– TOP,
по нижней – BOTTOM,
по средней – MIDDLE.
Задает вертикальный размер
изображения внутри окна бро-
узера.
Задает горизонтальный размер
изображения внутри окна бро-
узера.
Добавляет верхнее и нижнее
пустые поля.
Добавляет левое и правое пус-
тые поля.
Задание 2. Атрибуты изображения.
1. Самостоятельно внесите изменения в файл RASP.HTM, опробовав
использование таких атрибутов графики как ALT, BORDER, HEIGHT,
WIDTH.
Примечание. Всегда обращайте внимание на размеры (объем в бай-
тах) своего графического файла, т.к. это влияет на время загрузки Web-
страницы.
Задание 3. Фоновое изображение графики на Web-странице
Информация. Фоновое изображение – это графический файл с изо-
155
бражением небольшой прямоугольной плашки. При просмотре в броузере
эта плашка многократно повторяется, заполняя все окно, независимо от его
размеров.
Графика, используемая в качестве фоновой, задается в тэге <BODY> в
начале файла HTML.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body background= «bgr.gif» text= «#330066»>
<p align=center>
<font color= «#008080» size= «7»><b> расписание
</b></font><br>
<font size= «6»> <i>занятий на вторник</i></font><br><br>
</p>
</body>
</html>
На экране вы увидите (рис. 54):
Рис. 54.
На самом деле графический файл BGR.GIF выглядит так ( рис. 55):
156
Задание 4. Таблицы.
Рис. 55.
Информация. Таблицы представляют собой особую часть HTML-
документа. Данные в ней организованы в виде прямоугольной сетки, со-
стоящей из вертикальных столбцов и горизонтальных рядов. Каждая клет-
ка таблицы является ячейкой.
Ячейки могут содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
• название таблицы,
• заголовки столбцов,
• ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой сле-
ва направо. Заполнение начинается с левого верхнего угла и заканчивается
правым нижним. Каждая ячейка должна быть заполнена. Для создания
пустых ячеек используются пробелы.
Теги оформления таблиц
Тег
TABLE <TABLE>
Форма записи
текст</TABLE>
Примечание
Объявление таблиц
TR <TR>текст</TR>
TD <TD>текст</TD>
Тег строки
Тег данных
Атрибут
Атрибуты тега <TABLE>
Форма записи
Примечание
BORDER <TABLE
WIDTH <TABLE
DER=X>
WIDTH=XX%>
BOR-
Задает рамку вокруг табли-
цы
Задает ширину таблицы как
ХХ% от ширины страницы
или как ХХ пикселов
BGCOLOR <TABLE
BGCOLOR=
«#RRGGBB»>
157
Задает цвет фона таблицы
Атрибут
Атрибуты тегов <TD> и <TR>
Форма записи
Примечание
ALIGN <TD
VALIGN <TD
BGCOLOR <TD
ALIGN=X>
VALIGN=X>
BGCOLOR=
«#RRGGBB»>
Устанавливает выравнива-
ние по горизонтали (Right,
Left, Center)
Устанавливает выравнива-
ние по вертикали (Top, Mid-
dle, Bottom, Baseline)
Задает цвет фона ячейки
1. Запустите стандартную программу Блокнот (Notepad).
2. Наберите в окне редактора:
<html>
<head>
<title> Расписание занятий 5 классов </title>
</head>
<body bgcolor= «#ffffff»>
<p align=center>
<font color= «red» size= «6» face= «arial»><b> 5 класс
</b></font><br>
</p>
<font color= «blue» size= «4» face=«courier»>
<b> понедельник </b></font><br>
<table border=«1» width=100% bgcolor=«#99cccc»>
<tr bgcolor=«#ccccff» align=center>
<td>урок</td> <td>5 а</td> <td>5 б</td> <td>5 в</td>
</tr>
<tr>
<td>1</td> <td>русский язык</td> <td>литература</td>
<td>история</td>
</tr>
<tr>
<td>2</td> <td>алгебра</td> <td>информатика</td>
<td>англ.язык</td>
</tr>
<tr>
<td>3</td> <td>история</td> <td>информатика</td>
<td> алгебра </td>
</tr>
</table>
</body>
</html>
158
3. Сохраните файл под именем 5.HTM
4. Для просмотра созданной Web-страницы загрузите броузер Micro-
soft Internet Explorer.
Задание 5.
1. Дополните полученную Web-страницу по аналогии расписанием на
последующие дни: ВТОРНИК, СРЕДУ, ЧЕТВЕРГ, ПЯТНИЦУ, СУББОТУ.
Лабораторная работа № 9.
Списки и гиперссылки
Задание 1. Маркированные и нумерованные списки
1. Создайте новый документ HTML. Назовите его Список.htm
2. Ниже тега <body> введите
<h2 align=center> Список предстоящих экзаменов </h2>
3. Создайте маркированный список предстоящих экзаменов. Для соз-
дания маркированного списка используется пара тегов <ul> </ul> которая
ограничивает список. Каждый элемент списка должен начинаться тегом
<li>, причем нет необходимости закрывать данный тег. Для указания кон-
кретного вида маркера в теге <li> предусмотрен атрибут type. Значение ат-
рибута disk задает отображение маркера в виде закрашенных кружков, cir-
cle – в форме пустых окружностей, square – в виде закрашенных квадрати-
ков. По умолчанию маркеры имеют форму окружности.
Пример.
<ul>
<li>Математика
<li>Информатика
<li>История
<li>Философия
<li>Биология
</ul>
4. Ниже списка экзаменов создайте заголовок «список зачетов» и вве-
дите их пронумерованный список. Для этого воспользуйтесь тегом
<ol>...</ol>. Каждый элемент списка должен начинаться тегом <li>. Тег
<ol> имеет следующие атрибуты:
type – указывает вид нумерации в списке. Значение атрибута 1 задает
нумерацию в виде арабских цифр. А – с помощью прописных латинских
букв, а– в виде строчных латинских букв, I – с помощью больших римских
цифр, i – и виде маленьких римских цифр. По умолчанию элементы списка
159
нумеруются арабскими цифрами.
Start – определяет номер первого элемента в списке. В качестве зна-
чения всегда нужно указывать натуральное число. Например, если для
строчных латинских букв значение данного атрибута 2 то нумерация спи-
ска будет начинаться с буквы b. По умолчанию значение атрибута равно 1.
Сохраните файл со списком в той же папке, где находится ваши фай-
лы.
Задание 2. Создание гиперссылки
1. Откройте первый файл. Создадим ссылку на новую страницу. Для
этого воспользуемся парой тегов <а> </а>. Данный тег имеет единствен-
ный атрибут href, значением которого является адресная часть ссылки, т.е.
имя документа на который нужно сослаться, или его электронный адрес
для загрузки из Интернета.
2. После тега <body> напишите слово «экзамены».
3. Замените слово «экзамены» на HTML-код со ссылкой на новый
файл со списком экзаменов:
Пример.
<а href= «список.html» экзаменов </а>
4. Следует отметить, что вы можете установить нужный цвет указате-
ля ссылки. Атрибут link тега <body> определяет цвет непросмотренной
ссылки, vlink – просмотренной ссылки, alink – задает цвет ссылки в мо-
мент, когда на ней установлен указатель и нажата левая кнопка.
5. Закройте блокнот и сохраните изменения.
6. Обновите HTML в браузере и проверьте работоспособность ссылки.
Лабораторная работа № 10.
Таблицы
1. Создайте новый файл HTML с таблицей.
2. В заголовке между тегами <title> и </title> укажите заголовок до-
кумента «Таблица».
3. Таблица начинается тегом <table> и заканчивается тегом </table>.
Любая таблица состоит из нескольких строк. Каждая строка заключена
между тегами <tr> и </tr>. Строка может включать несколько ячеек.
Ячейка обрамляется парой тегов <td> и </td>. Количество строк в таблице
определяется числом тегов <tr>, а количество столбцов – максимальным
числом тегов <td> в строке.
Пример.
160
<table>
<tr><td>Иванов</td></tr>
<tr><td>Петров</td></tr>
<tr><td>Сидоров</td></tr>
<tr><td>Кузнецов</td></tr>
</table>
4. Задайте ширину линий сетки таблицы с помощью атрибута border
тега <table>.
Пример.
<table border=2 >
5. Сохраните HTML-документ на диске под именем Таблица.html
6. Создайте гиперссылку на файл Таблица.html из файла Список.html.
Лабораторная работа № 11.
Структурирование Web-страницы
Задание 1.
1. Создайте новый HTML-файл «Стихи» в нем напишите два четверо-
стишия из вашего любимого стиха в две колонки. В качестве фона исполь-
зуйте рисунок. Рисунок может быть любым. Для этого используется атри-
бут background=имя файла тега <body>, который задает изображение,
служащее фоном для текста и других изображений. Как и любое другое
изображение, фон должен быть представлен в формате GIF (файл с рас-
ширением *.gif) или JPG (файл с расширением *.jpg или *.jpeg).
Какой пассаж, какой кошмар,
Земля не круглая, а шар
Там подо мной за много миль
Все так же мчит автомобиль.
И не срываясь в пустоту
Играют дети в чехарду.
От этого я сам не свой, –
Как можно жить вниз головой?
Мне объяснили, как смогли,
О притяжении Земли.
В какой из стран ни окажись -
Там тучи верх, а лужи – низ.
Земля – такой большой магнит,
Что вверх ни брось, то вниз летит
Подсказка: для принудительного перехода на новую строку восполь-
зуйтесь тегом <br>.
Задание 2.
1. На главной (первой) странице создаем ссылку на страничку «Сти-
хи». В качестве ссылки используем бегущую строку с текстом «МОЙ ЛЮ-
БИМЫЙ СТИХ».
2. Для создания эффекта бегущей строки используется парный тэг
<MARQUEE>. Для регулирования скорости движения применяется атри-
бут «scrollAmount=» тега <MARQUEE>, чем больше число стоящее после
161
знака «=», тем быстрее двигается текст.
3. Сделайте так, чтобы ссылки, изменяли свои цвета при наведении на
них курсора и после перехода по ссылке.
4. Сделайте ссылку при нажатии, на которую будет появляться рису-
нок, вставленного в работе 1, с исходными размерами (т.е. без уменьше-
ния). В качестве ссылки используйте уменьшенную картинку.
5. Добавьте к таблице выполненной в предыдущей работе еще два
столбца с именами в одном и отчествами в другом. Затем сверху добавьте
строку, в которой будут находиться имена столбцов: «Фамилия», «Имя»,
«Отчество». Внизу таблицы вставьте строку, в которой будет находиться
ссылка на «главную» страницу. Данная строка должна состоять из одной
ячейки ширина, которой должна быть равна ширине 3-х столбцов. Все
строки таблицы закрасьте разными цветами.
6. Содержимое первого столбца выровняйте по левому краю, второго
по центру, третьего по правому.
Подсказка: тег <tr> может иметь ряд атрибутов, в частности bgcolor
– указывает цвет строки.
7. Для выравнивания ячеек используйте атрибут тега <td> align=left
(right, center, justify). Атрибут colspan указывает количество столбцов,
на которые необходимо расширить ячейку.
8. На главной странице создайте ссылку на вашу электронную почту и
сайт университета. В качестве адресной части ссылки используется адрес
электронного документа. В общем случае это так называемый URL (Uni-
form Resource Locator – Универсальный указатель ресурсов) – адрес любо-
го ресурса в Интернете, например Web-страницы или электронной почты.
В указателе, кроме адреса компьютера, содержится информация о типе ре-
сурса и полный путь к файлу на сервере. Например, URL
http://www.hermitage.ru/html Ru/index.html показывает, что нужный доку-
мент является Web-страницей в силу типа ресурса или протокола http, рас-
положен на сервере www.hermitage.ru в папке html_Ru и обладает именем
index.html. Если URL – адрес электронной почты, то в качестве электрон-
ного указателя на тип ресурса нужно использовать mailto. например,
mailto:webmaster@yandex.ru.
Лабораторная работа № 12.
Создание карты-изображения
Создайте карту-изображение. В качестве рисунка используйте файл
man.gif. В качестве активных зон используйте голову, руки и ноги челове-
ка.
Для создания карты-изображения используйте следующие теги.
<map>...</map> – создает карту-изображение, т.е. рисунок, элемен-
там которого можно назначить гипертекстовые ссылки. Области карты
162
изображения описываются внутри элемента <map>...</map> с помощью
тега <аrea>. Тег <map> имеет следующие атрибуты:
Name – указывает имя карты-изображения, которое должно соответ-
ствовать значению атрибута usemap1тега <img> (знак # не ставится).
Приме.:
<img src=«atlant.gif» usemap=«#pict»>
<map name=«pict»>Здесь описание карты
</map>
Тег <area> – задает активную область в карте-изображении. Имеет
следующие атрибуты:
Shape – указывает форму активной области. По умолчанию активной
областью является прямоугольник. Значением атрибута могут быть:
rect – активная область будет иметь вид прямоугольника.
circle – активная область будет обладать формой круга.
poly – активная область будет иметь вид многоугольника.
default – активная область будет определять все точки области.
Cords – задает координаты активной области. Начало координат на-
ходится в левом верхнем углу и соответствует 0,0. Для прямоугольника
указываются координаты левого верхнего и правого нижнего углов. Для
круга задаются координаты центра и радиус. Для многоугольника указы-
ваются координаты его вершин.
href – для области определяет электронный адрес ссылки, который
может записываться в абсолютной или относительной форме.
nohref – указывает, что для активной области нет ссылок.
target – задает имя фрейма, в котором будет размещен документ, за-
гружаемый по данной ссылке.
alt – определяет альтернативный текст для активной области изобра-
жения.
Пример.
<img src=«Man.gif» usemap=«#pict»>
<map name=«pict»>
<area shape=rect circle=«10,10,100» href=«head.htm»>
<area shape=rect coords=«120,120,300,300» href=«hand.htm»>
</map>
Примените для изображения человека специальные фильтры для это-
1 Атрибут usemap указывает электронный адрес для связи навигационной карты-изображения с
элементом, значение данного атрибута должно начинаться со знака #.
163
го используется атрибут style тега <img>. В значении атрибута укажите
слово filter: и имя фильтра (flipv, fliph, blur, xray, wave).
Пример.
<img style =«filter:wave» src=«hlpbell.gif» width=150 height=50>
Лабораторная работа № 13.
Анимация движения (Motion Tweening)
Задание 1. Анимация перемещения объекта
1. В левом верхнем углу кадра нарисуйте простейший объект, напри-
мер, квадрат.
2. Первый кадр шкалы времени видоизменился – окрасился в бледно-
фиолетовый цвет, и в нем появилась жирная черная точка – кадр стал клю-
чевым. Только в ключевом кадре можно редактировать свойства объекта.
3. Щелкните правой кнопкой мыши по этому кадру и контекстном
меню выберите команду Create Motion Tween. Вокруг объекта появится
голубая рамка, в его центре – окружность с крестом. Рисованный объект
превратился в так называемый символ.
4. На шкале времени выделите конечный кадр анимации (например,
20) и контекстном меню этого кадра выберите команду Insert Keyframe
(Вставить ключевой кадр) или нажмите F6. Кадры временной шкалы меж-
ду начальным и конечным ключевыми кадрами окрасились в бледно-
фиолетовый цвет, а между ключевыми кадрами появилась сплошная
стрелка.
5. Находясь в последнем ключевом кадре (в 20 кадре), переместите
объект в новое положение, например, в правый верхний угол.
6. Чтобы проверить выполнение анимации, нажмите клавишу Enter.
7. Если необходимо изменить темп движения объекта, переместите
конечный ключевой кадр влево – для ускорения движения, вправо – для
замедления. Чтобы передвинуть ключевой кадр выполните следующие
действия:
– нажмите клавишу Ctrl;
– наведите курсор на ключевой кадр до появления двунаправленной
стрелки;
– нажмите кнопку мыши и, не опуская ее, передвиньте кадр.
Задание 2. Анимация изменения размера объекта
1. Создайте новый файл. Нарисуйте простейший объект, например,
прямоугольник.
2. В 1-м ключевом кадре в контекстном меню выберите Create Motion
Tween.
3. В конечном кадре анимации (например, в 20) – Insert Key frame
164
(Вставить ключевой кадр).
4. Выделите конечный ключевой кадр и измените размер объекта, ис-
пользуя инструмент «Трансформация»
.
5. Просмотрите анимацию, нажав клавишу Enter.
Задание 3. Анимация изменения цвета объекта
1. Создайте новый файл. Нарисуйте объект. Примените к нему прави-
ла создания анимации движения.
2. Находясь в конечном ключевом кадре, выделите объект инструмен-
том «Стрелка»
(Свойства).
и измените его свойства, используя панель Properties
3. На панели Properties (Свойства) высветится поле Color (Цвет), ко-
торое имеет раскрывающийся список со следующими вариантами:
• Brightness – изменение яркости;
• Tint – изменение цвета;
• Alpha – изменение прозрачности;
• Advanced – комбинация эффектов Tint и Alpha.
4. Просмотрите анимацию, нажав клавишу Enter.
Задание 4. Одновременное изменение нескольких свойств объекта
Одновременно можно изменять несколько свойств объектов. Для это-
го в конечном ключевом кадре необходимо указать их новые значения, на-
пример, переместить объект и одновременно изменить его размер.
Можно задать анимацию, не изменяя ни одного свойства. В результа-
те объект «замрет» на протяжении указанного промежутка времени.
Задание 5. Несколько последовательных шагов анимации
Создадим анимацию, в котором шар сначала перемещается, а потом
останавливается и увеличивается в размере.
1. Создайте новый файл. Нарисуйте объект, например, круг.
2. От 1-го до 20-го кадра создайте анимацию перемещения шара уже
известным способом.
3. В кадр № 30 вставьте ключевой кадр.
4. Находясь в кадре № 30 увеличьте размер шара с помощью инстру-
мента «Трансформация»
. На шкале времени образовалась последова-
тельность фиолетовых кадров, содержащих три ключевых кадра, соеди-
ненных сплошными стрелками.
5. Просмотрите анимацию, нажав клавишу Enter.
6. Анимационную последовательность можно продолжить, каждый
раз создавая очередной ключевой кадр по команде Insert Key frame и за-
давая в нем новые свойства объекта.
165
Задание 6. Задания для самостоятельного выполнения