Практическая работа оформление сайта в среде frontpage
Цель работы: использовать возможности FrontPage для оформления сайта
ВОПРОСЫ ДЛЯ САМОПОДГОТОВКИ
Создание анимации средствами Macromedia Flash MX.
Использование Web-компонентов для оформления сайта.
Создание фонового рисунка.
КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Для оформления сайтов в настоящее время широко применяются анимационные ролики, создаваемые в среде Macromedia Flash. При запуске Flash на экране отображается следующая информация:
Центральную часть экрана занимает рабочая область, где непосредственно и создается ролик. Выше рабочей области расположен монтажный стол, на котором отображается счетчик кадров и информация о слоях. Перемещаясь от одного кадра к другому, можно прорисовать то или иное действие анимационного ролика. В ряде случаев оказывается возможным заполнить кадры начала и окончания действия, а промежуточные кадры будут прорисованы автоматически.
В данной практической работе будет описано создание простейшего анимационного ролика и его размещение на странице ранее созданного сайта.
ЗАДАНИЯ ДЛЯ ПРАКТИЧЕСКОЙ РАБОТЫ
Задание 1
Создайте анимационный ролик в среде Flash.
Разместите ролик на главной странице index.htm ранее созданного сайта.
Разместите на странице s1.htm бегущую строку
Cоздайте на странице s2.htm фоновый рисунок и введите поверх рисунка текстовую информацию
Ход выполнения задания 1
№ |
Кратко |
Подробно |
1 |
Копирование рисунка для создания анимационного ролика
Описание движения автомобиля
Сохранение ролика
Размещение ролика на главной странице
Проверка работоспособности ролика |
Копирование рисунка выполняется из коллекции Microsoft Office. Для этого следует открыть Word и выполнить команду Вставка – Рисунок – Картинки Из коллекции картинок выбрать любое изображение автомобиля, разместить его на чистом листе и выполнить для него команду «Копировать». Открыть приложение Macromedia Flash и выполнить в нем команду Редактирование – Специальная вставка В окне «Вставить» щелкнуть по строке «Картинка (метафайл)», а затем – по кнопке «Ok». Тем самым изображение автомобиля попадет в первый кадр создаваемого ролика. Сместить автомобиль на первом кадре к краю этого кадра. Щелкнуть правой кнопкой мыши по кадру с номером 25, в появившемся меню выполнить команду «Создать ключевой кадр» («Создать клавиатуру»). Сместить автомобиль в 25-ом кадре к противоположному краю кадра. Щелчком мыши перейти на первый кадр и в области «Свойства» установить Твин «Движение». В результате на монтажном столе должна появиться стрелка, идущая от 1-ого кадра к 25-ому. Выполнить команду Файл – Экспорт – Экспорт фильма Сохранить созданный файл в папке site2 Под именем auto.swf. Закрыть Word и Flash. При необходимости проверить работу ролика, запустив его двойным щелчком из Проводника. Запустить FrontPage. Открыть страницу index.htm. Установить курсор в правую чась окна и выполнить команду Вставка – Рисунок – Фильм в формате Flash В качестве файла для вставки выбрать auto.swf. После вставки ролика щелкнуть по его области правой кнопкой мыши, выбрать в появившемся меню «Свойства фильма в формате Flash» и установить Масштаб «без границы». Выбрать произвольный цвет фона и нажать «Ok». Запуская страницу в режиме просмотра при необходимости изменить цвет фона, подобрать размеры области для воспроизведения ролика |
2 |
Размещение на странице s1.htm бегущей строки
Проверка работоспособности созданного компонента |
Двойным щелчком по имени файла перейти на страницу s1.htm. Установить курсор в правую часть страницы и выполнить команду Вставка – Веб-компонент В разделе «Динамические эффекты» выбрать эффект «Бегущая строка» и нажать «Готово». Набрать текст Мы приветствуем Вас на нашем сайте Выбрать цвет фона и нажать «Ok». Запуская страницу в режиме просмотра при необходимости изменить цвет фона, подобрать размеры области бегущей строки |
3 |
Создание фонового рисунка
|
Двойным щелчком по имени файла перейти на страницу s2.htm. Установить курсор в правую часть страницы и выполнить команду Вставка – Слой Щелкнуть правой кнопкой мыши в области созданного слоя и выполнить команду «Свойства слоя». Щелкнуть мышью по строке «Границы и заливка» и на закладке «Заливка» с помощью кнопки «Обзор» выбрать имя файла с фоновым рисунком, указанное преподавателем. При необходимости изменить размеры фонового рисунка. Затем поверх рисунка набрать следующий текст На этой странице размещен фоновый рисунок Убедитесь, что текст печатается поверх фонового рисунка |
Задание 2
Используйте изученные эффекты для оформления созданного на предыдущих занятиях сайта «Моя личная страничка».