Umieszczanie grafiki wektorowej w stronach internetowych HTML - konspekt lekcji z informatyki

KONSPEKT LEKCJI
mgr inż. Grzegorz Romotowski
Szkoła: Zespół Szkół Technicznych
Przedmiot: Multimedia i Grafika Komputerowa
Klasa: - 3 A Technikum Informatyczne Data zajęć: 08.03.10r (45min)

Temat Lekcji: Umieszczanie grafiki wektorowej w stronach Internetowych HTML.

Cele Kształcenia
I. Poziom wiadomości
A. Zapamiętanie:
- Wymienić polecenia używane w umieszczaniu grafiki wektorowej w stronach html,
B. Zrozumienie:
- Wyjaśnić w jaki sposób tworzy się animacje wektorową oraz jak umieszcza się ją na stronach html,

II. Poziom umiejętności
C. Stosowanie wiadomości w sytuacjach typowych:
- Umieścić grafikę wektorową na stronie html,
D. Stosowanie wiadomości w sytuacjach problemowych:
- Zaproponować inne możliwości wykorzystania grafiki wektorowej na stronach html.

III. Postawy: Automatyzacja wykonywania danych czynności, ogólny zarys umieszczania grafiki wektorowej w stronach internetowych.
Strategia: A, O
Metody Nauczania: pokaz, ćwiczenia
Środki Dydaktyczne: komputery ćwiczeniowe, rzutnik multimedialny, program do animacji grafiki komputerowej Macromedia Flash 8, notatka.

TOK LEKCJI
Ogniwo:
1.
Wprowadzenie ładu zewnętrznego i wewnętrznego.
2.
Sprawdzenie pracy domowej.
3.
Uświadomienie uczniom celu lekcji – podanie nazwy i znaczenie danego działania.
4.
Ustalenie zasad i reguł, które w danym działaniu mają znaleźć zastosowanie.
5.
Wzorowy pokaz danej czynności.
6.
Wykonanie zadania przez uczniów pod kontrolą nauczyciela.
7.
Systematyczne i samodzielne ćwiczenie odpowiednio urozmaicone.
8.
Usystematyzo-
wanie i utrwalanie zdobytej wiedzy.
9.
Wbudowanie nowych treści w system dotychczasowej wiedzy.
10.
Zastosowanie nowej wiedzy w nowych sytuacjach dla ucznia.
11.
Zadanie pracy domowej w celu utrwalenia umiejętności.

Przebieg Lekcji

N: wprowadza uczniów do klasy, wycisza ich, prosi o zajęcie miejsc, sprawdza listę obecności.

N: sprawdza pracę domową (jeżeli była zadana).

N: „Celem naszej dzisiejszej lekcji będzie zapoznanie się z podstawowymi poleceniami umieszczania grafiki wektorowej w stronach Internetowych.”

N: przedstawia na rzutniku sposób wykonania animacji wektorowej za pomocą polecenia Motion Tween (animacji kluczowej). Omawia czynności które będą wykonywane przez uczniów. Omawia sposób wyeksportowania animacji do pliku (File > Export > Export Movie) oraz umieszczania jej w stronie internetowej.
Załącznik: notatka.doc

U: słuchają oraz przypatrują się. Zapisują w zeszycie ważniejsze informacje.

N: wykonanie pierwszych zadań pokazuje na rzutniku multimedialnym.
U: przypatrują się oraz zapisują w zeszycie ważniejsze informacje.

N: prosi uczniów o samodzielne wykonanie kolejnych poleceń pokazanych na rzutniku. Nauczyciel kontroluje przebieg ćwiczeń oraz ewentualnie udziela pomocy.
Ćwiczenie 1.fla
U: ćwiczą tworzenie animacji wektorowej oraz umieszczania jej na stronach internetowych html.

N: prosi uczniów o wykonanie poleceń w dalszej części pokazu (pokazuje je na rzutniku) które są odpowiednio urozmaicone.
Ćwiczenie 2.fla

U: ćwiczą tworzenie animacji wektorowej oraz umieszczania jej na stronach internetowych html.

N: Podsumowuje dotychczasowe działania, przypomina na co należy zwracać uwagę przy poszczególnych czynnościach i poleceniach oraz omawia błędy z ćwiczeń jeżeli takowe zaistniały.
U: słuchają.

N: podaje przykłady możliwego wykorzystania poznanych metod
w szerszym zastosowaniu, do czego będą przydatne uczniom poznane funkcje. (bannery internetowe na stronach internetowych)
U: słuchają.

N: informuje że animacja grafiki wektorowej w większym stopniu opanowania pozwala na Tworzenie całych stron internetowych tzw. Stron prezentacyjnych bogatych w animację. Animacja wykorzystywana jest także do Tworzenia rozmaitych gier flash dostępnych w Internecie. Podstawy tworzenia takich animacji oraz umieszczanie jej w stronach html poznaliśmy na dzisiejszej lekcji.
U: słuchają.

Przećwiczenie poznanych umiejętności programu w domu (program można ściągnąć z Internetu jako darmowa 30 dniowa wersja).


Literatura dla ucznia: Macromedia Flash 8 Professional. Księga eksperta.
Literatura dla nauczyciela: Program nauczania

~~~~Notatka~~~~
Umieszczanie animacji grafiki wektorowej na stronie internetowej html:
Kod źródłowy strony html z grafiką wektorową:

<html>

<head>
<title>Strona z animacją Flash</title>
</head>

<body>
<p align="center">
<embed width="700" height="400" src="nazwa animacji.swf">
</p>
</body>

</html>
Ćwiczenie 1

Animacja (powiększenie napisu) do umieszczenia na stronie www.
Ćwiczenie 2

Animacja (powiększenie 3 liter oraz linii bocznych) do umieszczenia na stronie www.