Главная » Методическая копилка » Информатика » Уроки, конспекты

Методическая разработка урока по дисциплине “Web-дизайн” по теме: “Встраивание готовых динамических объектов на страницу сайта”

(1.93 Mb)	02.12.2016, 09:00
Пирязева Наталья Владимировна
преподаватель спецдисциплин высшей квалификационной категории, ТОГАПОУ "Промышленно-технологический колледж"
Форма проведения: Практическая работа Цель занятия: приобретение навыков работы по созданию флеш анимации на странице сайта или блога. Задачи: а) образовательные: закрепить понятие html-код, навыки встраивания динамических объектов на страницы сайта или блога. б) развивающие: развитие способности применять приёмы встраивания флеш анимации, развитие воли и самостоятельности (развитие уверенности в своих силах, развитие настойчивости, умения преодолевать трудности; развитие умений владеть собой, действовать самостоятельно), познавательного интереса и творческой активности. в) воспитательные: воспитание эстетических взглядов. Продолжительность: 45 минут Оборудование: ноутбук, операционная система Windows 7-10, браузер Google Chrome. Подготовительный этап Инструктаж по технике безопасности при работе на компьютерах. (2 минуты) План урока: Организационный этап (3 минуты) Выполнение практической работы (33 минуты) Подведение итогов (7 минут) Ход урока: Организационный момент. Flash-анимация – это создание небольших видео (мультфильмов) из уже готовых изображений или же фрагментов фильмов. Кроме того, что создание flash-анимации – увлекательнейшее занятие, оно ещё и может быть достаточно полезным. Анимированный (движущийся) баннер скорее привлечёт внимание, чем неподвижный. Симпатичная анимированная заставка на вашем сайте или же анимированный аватар не только выразит ваше мироощущение, но и может стать настоящей виртуальной визитной карточкой, благодаря которой вас будут узнавать. На этом занятии мы будем использовать уже готовый сгенерированный html-код для встраивания флеш анимации. Выполнение практической работы Загружаем компьютер и открываем браузер Google Chrome используя иконку на рабочем столе или на панели Задач (кликаем левой кнопкой мыши по иконке браузера) Открываем (заходим) на свой сайт или на зарегистрированную личную страницу в любом сообществе (вводим в соответсвующие поля логин и пароль указанные при регистрации). Открываем новую вкладку в браузере кликнув левой кнопкой мышки по соответствующей кнопке В поисковую строку новой вкладки вводим запрос, по заданию практической работы, на поиск уже сгенерированных анимационных объектов. После ввода жмем кнопку Enter для активации поиска. Из перечня, полученных по запросу, ссылок выбираем сайт Agitki.ru (наводим указатель мышки, кликаем левой кнопкой мышки и переходим по ссылке в новое окно) Это открытый сайт (http://agitki.ru/load/flesh_animacija/1) и все флешки выложены в открытом доступе. Знакомимся с содержимым сайта, листаем страницы и вкладки. Флешка которую мы будем использовать находится на странице №3 (переходим на нее кликнув левой кнопкой мыши по соответствующей кнопке навигации) Находим в списке предложенных на странице флешек “Макбук с видео”. Эта флешка дает возможность не только встроить готовый html-код выбранной анимации на страницу своего сайта, но и внедрить в нее любое видео с YouTube. Кликаем левой кнопкой мышки по названию выбранной анимации и переходим на страницу данной флешки. Под динамическим изображением находится поле с готовы html-кодом. Выделяем его с помощью правой кнопки мышки и копируем в буфер обмена используя контекстное меню (правый клик мыши по выделенному фрагменту) или комбинацию клавиш Ctrl+C. Переходим на страницу своего сайта (страницу в сообществе) кликнув по соответствующей вкладке браузера которую мы открыли еще в начале занятия. Создаем новый информационный блок, в который будем внедрять скопированный html-код. Для этого используем кнопки навигации (они индивидуальны для каждого сайта/сообщества) Для выполнения нашей практической работы мы используем личные страницы в сообществе (http://uchportfolio.ru/). Добавляем на Главной странице новый “Текстовый информационный блок” Меняем стиль ввода информации с текстового поля на “< >Источник”, так как именно это позволит внедрить скопированный html-код с флеш анимацией на страницу нашего сайта (кликаем левой кнопкой мышки по соответствующей иконке в меню блока). Переводим указатель мыши в рабочее поле блока “<>Источник”, вызываем контекстное меню и выбираем инструмент “Вставить” или используем комбинацию клавиш Ctrl+V. Итогом выполнения данных манипуляций будет появление извлеченного из буфера обмена html-кода скопированной нами флеш анимации. Найдем во встроенном коде ссылку на видео с YouTube. Именно этот блок нам нужно будет заменить на ID адрес видео, созданным и размещенным на YouTube лично вами или любым другим видео, размещенном на сайте, но не нарушая авторских прав (обязательно указываем автора используемого вами продукта) Открываем новую вкладку в окне браузера и делаем набор с клавиатуры запроса на открытие видео хостинга YouTube (набор можно делать с русской раскладки клавиатуры просто набрав запрос “ютюб” и нажав кнопку Enter для активизации поиска). Откроется перечень ссылок по вашему запросу. Переходим на видео хостинг по прямой ссылке (кликнув левой кнопкой мыши). В поисковую строку видео хостинга вводим запрос на поиск видео. В нашем случае мы ищем любое видео со звуками природы. В последующем вы можете ввести любой другой запрос. В открывшемся перечне ссылок на видео, отвечающих вашему запросу выбираем любое которое больше нравится (или какое-то определенное) и переходим на страницу кликнув левой кнопкой мышки по адресу в списке. Находим под видеофайлом кнопку “Поделиться” (клик левой кнопкой мышки) и копируем ID-адрес видео в буфер обмена используя либо контекстное меню (предварительно выделив адрес), либо комбинацию клавиш Ctrl+С. Возвращаемся в окно нашего сайта и меняем блок VIDEO в html-коде (этот блок мы выделили на предыдущем этапе нашей работы) на ID-адрес видео (с помощью контекстного меню). В итоге наших манипуляций произойдет замещение выделенного фрагмента на тот, что мы поместили в буфер обмена. Но не торопимся нажимать кнопку “Сохранить”. Перед этим нам необходимо будет изменить размер нашей флеш анимации. Найдем в html-коде параметр отвечающий за ширину (“width”) нашей флеш анимации и изменим его значение (опытным путем мы установили, что оптимальное значение ширины для нашей страницы – 650). Меняем значение 990 на 650 (двойным кликом выделяем заданный фрагмент и вводим с клавиатуры нужное значение). Вот теперь мы можем сохранить все внесенные в блок изменения (нажмем на кнопку “Сохранить” внизу блока) и переходим в режим “Просмотр” (нажав на иконку с изображением домика в верхнем левом углу страница сайта). Перейдя на главную страницу сообщества нажмите на вашу аватарку в блоке “Люди на сайте” (для того чтобы зайти на вашу страницу в режиме просмотра и увидеть вашу работу в том ракурсе в котором ее видят все остальные пользователи) Итогом нашей работы будет появление на странице вашего сайта флеш анимации с встроенным в него видео.
Категория: Уроки, конспекты \| Добавил: NataljaPV75 \| Теги: практическая работа, конспект урока, Информатика
Просмотров: 3181 \| Загрузок: 56 \| Рейтинг: 0.0/0

Понравился материал? Оставьте свой комментарий ;) Всего комментариев: 0