UMKD_KSIM
.pdfнумеруются арабскими цифрами.
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 (Uniform 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. Задания для самостоятельного выполнения
6.1. Задача с квадратом
Объект – маленький квадрат, расположен в левом верхнем углу кадра. Анимация включает в себя следующие пять шагов:
1.Квадрат увеличивается.
2.Квадрат движется направо строго горизонтально и останавливается
управой границы кадра.
3.Квадрат движется по диагонали к левому нижнему углу, изменяя свой цвет, и останавливается в точности под своим увеличенным на 1-м шаге изображением.
4.Квадрат некоторое время стоит неподвижно.
5.Квадрат возвращается в исходное положение с изменением размера до первоначального.
Образец решенной задачи можно посмотреть в файле 2-задача.swf. При решении данной задачи следует обратить внимание на два мо-
мента.
Во-первых, использование направляющих линий при размещении объектов. Чтобы воспользоваться направляющими линиями, на экран предварительно необходимо вывести измерительные линейки командой View → Rulers, затем прижатой левой кнопкой мыши «вытащить» с линейки направляющие линии.
При работе с направляющими иногда приходится прибегать к следующим вспомогательным командам:
View → Snap to Objects – притяжение к объектам;
View → Guides → Show Guides – показать направляющие;
View → Guides → Lock Guides – блокировать направляющие;
View → Guides → Snap to Guides – притягивать объекты к направляющим.
Если направляющие линии больше не нужны, их можно переместить мышью за пределы экрана.
Во-вторых, вставка объекта точно на то же место. Для этого:
1.Выделите 1-й ключевой кадр анимации и скопируйте его в буфер обмена командой Edit → Copy.
2.Выделите конечный ключевой кадр анимации, удалите текущий объект, нажав на клавишу Delete, и выполните команду Edit → Paste in Place (Вставить на то же самое место).
3.Сохраните работу.
6.2.Рисуем аквариум
Постановка задачи:
1.На отдельном слое строго горизонтально плывет рыбка от одного края аквариума к другому.
166
2.Достигнув края аквариума, рыбка плавно разворачивается и плывет
впротивоположную сторону.
3.На заднем плане (нижний слой) находятся водоросли и другие элементы оформления аквариума. На этом слое никаких изменений не происходит.
Образец решенной задачи можно посмотреть в файле 2-
аквариум.swf.
Особенности решения
1.Начните решение задачи с определения размера кадра. Для этого выполните команду Modify → Document (рис. 56).
В полях Dimensions (размер) задается ширина и высота кадра.
В раскрывающемся списке Background color можно выбрать цвет фона всех кадров вашего фильма.
В поле Ruler Units устанавливается единица измерения линейки. В поле Frame Rate – скорость воспроизведения фильма.
2.Изюминкой данной задачи является разворот рыбки. Высота рыбки не меняется, зато ее длина сначала уменьшается, доходя до нулевого значения, а потом опять увеличивается до нормального состояния. Голова рыбки оказывается повернутой в противоположную сторону.
Рис. 56. Окно Параметры документа
3. Анимация изменения размера (в данном случае только ширины)
производится с помощью инструмента «Трансформация» 
. Находясь в конечном ключевом кадре (рыбка доплыла до края аквариума), переключитесь на инструмент «Трансформация», создайте еще один шаг анимации. В последнем ключевом карде измените ширину рыбки. Сократив ее до нуля и продолжая перемещать ограничитель в том же направлении, вы увидите, что рыбка развернулась. Но если проверить анимацию, результат вряд ли удовлетворит вас (рис. 57). При развороте рыбка «кивает» головой.
167
Рис. 57. Неправильный разворот рыбки
4.Чтобы разворот получился плавным, его надо разделить на несколько этапов. Для этого стоить создать несколько дополнительных ключевых кадров: перед переходом через ноль и сразу после него (рис. 58).
5.Для фона аквариума создайте новый слой. Нарисуйте водоросли,
дно аквариума, камешки и т. д. Обратите внимание на следующий мо-
мент: номер конечного кадра неподвижного слоя должен совпадать с номером конечного кадра слоя с движущейся рыбкой. Если это не так, и номер меньше, то в какой-то момент при тестировании фильма фон пропадет.
6.Чтобы удлинить последовательность кадров с неподвижной картинкой выполните следующее действие. В кадре, до которого следует продлить анимацию, щелкните правой кнопкой мыши и выберите команду Insert Frame (Вставить пустой кадр).
Рис. 58. Анимация разворота рыбки
7.Сохраните работу.
8.Просмотрите анимацию в независимом режиме. Для этого выполните команду Control → Test Movie (Тестирование анимации) или нажми-
168
те комбинацию клавиш Ctrl+Enter.
9. После выполнения данной команды автоматически создается файл с тем же именем, но с расширением «swf». Его нельзя редактироваться, но можно просмотреть из программы Проводник. Объем такого файла гораздо меньше, чем с расширением «fla».
6.3. Морское дно
Откройте файл 2-дно.swf, попробуйте создать нечто подобное.
Лабораторная работа № 14. Анимация формы
Помимо анимации движения, с помощью которой можно заставить объект двигаться, изменять цвет, размер существует еще один вид анимации. Это анимация формы – изменение во времени формы объекта. Для точного и аккуратного изменения формы система Flash обладает целым набором специальных инструментов.
Задание 1. Рисуем инструментом «Перо» 
Инструмент предназначен для конструирования линий и фигур произвольной формы, требующих большой точности при их создании. Основу построения составляют опорные точки, которые фиксируются щелчком мыши. Линия, состоящая из отдельных сегментов и находящихся на их стыке опорных точек, называется кривой Безье.
1.1.Построение многоугольника
1.Первый щелчок образует точку.
2.Каждый последующий создает прямую линию, соединяющую последнюю точку с предыдущей.
3.Последовательные щелчки, последний из который производится в точке начала создания ломаной линии, создают замкнутую прямолинейную фигуру (рис. 59).
Рис. 59. Построение многоугольника инструментом «Перо»
1.2.Создание плавных переходов
1.Если положение следующей точки обозначить не щелчком, а коротким перемещением курсора при нажатой кнопке мыши, вы получите кри-
169