Praca będzie wymagała od Was połączenia wielu narzędzi informatycznych, celem stworzenia ciekawego projektu końcowego.
Poniżej znajdziecie dokładne szczegóły tworzenia pracy.
Praca, którą musicie wykonać jest swego rodzaju podsumowaniem zagadnień związanych z tworzeniem stron internetowych.
Do jej wykonania potrzebujemy narzędzi:
-przeglądarka internetowa
-program do obróbki grafiki sugeruję Paint.Net
-edytor kodu strony - notatnik ++
Zadaniem każdego ucznia jest wykonanie animacji w języku HTML przedstawiającej dużą przestrzeń: np:
-pole z motylami
-łąkę ze zwierzętami
-zbiornik wodny np: morze, ocean z rybami
-przestrzeń kosmiczną itp.
Pamiętaj, że to Ty decydujesz jaką przestrzeń wybierzesz!
Kolejne kroki w rozwiązaniu zadania:
- Otwórz zwykły program Paint i ustaw wielkość obszaru roboczego taką samą jak dużą masz rozdzielczość w monitorze. Należy to zrobić, żeby wielkość naszego tła była taka sama, jak rozdzielczość naszego monitora. W innym przypadku tło, które będzie innej wielkości będzie nakładało się na siebie tworząc zły efekt.
2. Zapisz rozmiary ustawionego wyżej Narysuj na ustawionym obszarze roboczym dowolne tło przedstawiające przestrzeń np: akwarium, kosmos, lotnisko, pole itd.
3. Zapisz tło pod nazwą np: tlo.jpg (nie używaj polskich znaków)
4. Za pomocą programu notatnik utwórz nową, pustą stronę internetową pod nazwą np: akwarium.html
5. Wstaw szkielet pustej strony:
<html> <head> <title>Tu wpisz tytuł strony</title> </head> <body> Tu wpiszesz swój kod </body> </html>
6. Używając polecenia:
<body background=tlo.jpg>
umieść narysowane przez siebie tło na stronie.
7. Zastanów się jakie obiekty chcesz umieścić na tle, i narysuj pierwszy.
Używając programu Paint.NET
(jeśli go nie masz to pobierz: https://www.dotpdn.com/downloads/pdn.html)
dokładnie wytnij np, narysowaną rybkę, aby nie miała dookoła tła, i zapisz ją z rozszerzeniem .png
dzięki, któremu obiekt będzie mógł zachować przezroczystość.
8. Przypomnij sobie animację gif, którą tworzyliście na początku roku szkolnego i wykorzystaj tą wiedzę, do stworzenia np. rybki jako gifa. Do tego będziesz potrzebował przynajmniej 3 rysunków rybki w różnych fazach ruchu. Połącz różne fazy ruchu rybki w gif używając strony:
www.gifmaker.me
9.Strona:
http://www.kurshtml.edu.pl/przyklady/html/marquee.html
przedstawia wszystkie polecenia animacji, które można sobie wyobrazić i od razu zobaczysz efekt, który możesz uzyskać używając któregoś z nich.
np. Polecenie:
<marquee direction=right><img src=rybka.gif></marquee>
Spowoduje przesunięcie się animowanej - gif - rybki w prawą stronę ekranu z domyślną prędkością.
Jeśli chcesz zmienić prędkość użyj kolejnych poleceń:
10. Podstawowe polecenia marquee:
<marquee> <img src=rybka.jpg></marquee>
<marquee behavior="typ"><img src=rybka.gif></marquee>
gdzie jako "typ" należy wpisać:
•scroll - obiekt przesuwa się od prawej do lewej (domyślnie)
•alternate - obiekt przesuwa się od prawej do lewej, a następnie "odbija się" i powraca
•slide - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy
<marquee direction="kierunek"><img src=rybka.gif></marquee>
gdzie jako "kierunek" należy wpisać:
•left - obiekt będzie przesuwał się w lewo (domyślnie)
•right - tekst będzie przesuwał się w prawo
•up - przesuwanie w górę
•down - przesuwanie w dół
Określona szybkość przesuwania się tekstu:
•<marquee scrollamount="n">Tu wpisz tekst</marquee>
11. wybierz polecenia, które potrzebujesz i wprowadź je do kodu strony.
Zwróć uwagę, na rozmiar animacji w rozdzielczości monitora oraz na to, żeby obiekty gify, np rybki były dobrze wycięte bez tła.
Pamiętaj: Rysuj małe obiekty i przycinaj obszar roboczy do wielkości obrazka
Zdjęcie przedstawia opcję przycięcia obrazka do zaznaczenia
Gdy przytniesz obiekt do jego wielkości usuń mu tło używając magicznej różdżki i klikając nią w tło
Pamiętaj: obiekty i tło muszą być narysowane własnoręcznie - nie używaj grafik z sieci.
1 komentarz:
Solidnie napisane. Pozdrawiam i liczę na więcej ciekawych artykułów.
Prześlij komentarz