GIMP. Animacje. Składnia HTML/CSS/JavaScript

Zadanie: Tajne animacje.(3h)

Przygotuj dokumenty cw601.html oraz cw601.css zgodnie z wytycznymi poniżej.
1. Tło całej strony: #fff2e6
2. Tytuł strony: TAJNE 2020
3. Nagłówek pierwszego poziomu o treści: Imię, Nazwisko, Klasa/Grupa. Tekst wyśrodkowany
4. Ponizej...
5. BANER (w górnej części strony)
   • Wymiary: 1920x365 pikseli / tło przeźroczyste
   • Obraz animowany z formacie GIF (program GIMP)
   • Na obrazie pojawiające się kolejno elementy graficzne (minimum 5 z czego conajmniej 3 różne) oraz napis (literki)
   • Animacja zapętlona w nieskończoność
   • Kliknięcie na banerze przenosi nas na stronę główną projektu (do pliku cw601.html)
   • Obraz dostosowujący rozmiar do szerokości okna
   • Materiały Przykład
6. Blok lewy (menu):
   • Wysokość: 350 pikseli / szerokość: 30%
   • Lista wypunktowana z elementami: Obraz 1, Obraz 2, Obraz 3
   • Każdy element listy jest odnośnikiem do strony: obraz1.html, obraz2.html, obraz3.html
   • Usuwamy widoczność znaczników listy
   • Formatowanie odnośników:
     1. szerokość: 250 pikseli / wysokość 40 pikseli
     2. Kolor tła zielony
     3. Kolor liter złoty
     4. Tekst wyśrodkowany
     5. Po najechaniu kursorem myszy na obszar odnośnika pojawia się dodatkowo obramowanie linią ciągłą w kolorze czerwonym o szerokości 2 piksele
7. Blok prawy
   • Wysokość: 350 pikseli / szerokość: 70%
   • Po załadowaniu strony głównej widoczny wyśrodkowany tekst: TAJNE OBRAZKI
   • Powyższy napis o wysokości 150 pikseli z efektem cieniowania
   • Po wybraniu pliku obraz1.html:
     1. Pojawia się okno dialogowe z napisem: Podaj tajne hasło
     2. Jeżeli zostanie podane prawidłowe hasło (hasło: abc) to wyświetlony zostanie obraz anim1.gif, w przeciwnym wypadku widoczny jest jedynie napis (nagłowek poziomu drugiego) o treści: Podałeś będne hasło.
     3. anim1.gif (GIMP)
     4. Wymiary 400x400 pikseli
     5. Tło przeźroczyste
     6. Animowany czarny tekst: BRAWO
     7. Na koniec zmienia się kolor tekstu na czerwony
     8. Animacja zapętlona w nieskończoność
   • Po wybraniu pliku obraz2.html:
     1. Widoczne dwa pola formularza opisane jako Podaj A i Podaj B
     2. Poniżej przycisk Sprawdź
     3. Klikniecie przycisku sprawdza czy suma liczb jest podzielna przez 3.
     4. Jeżeli warunek jest spełniony to poniżej wyświetlony zostaje obraz anim2.gif sformatowany CSSem tak, że ma kształt okręgu
     5. Jeżeli warunek nie jest spełniony to poniżej wyświetlony zostaje obraz anim2.gif w domyślnym kształcie.
     6. anim2.gif (GIMP)
     7. Wymiary 250x250 pikseli
     8. Zmieniający się kolor wypełnienia: zielony, czerwony, niebieski.
     9. Animacja zapętlona w nieskończoność
   • Po wybraniu pliku obraz3.html:
     1. Widoczne dwa przyciski opsane jako: Pokaż i Ukryj
     2. Po kliknięciu przycisku Pokaż zostaje wyświetlony obraz anim3.gif
     3. Po kliknięciu przycisku Ukryj zostaje ukryty obraz anim3.gif
     4. anim3.gif (GIMP)
     5. Wymiary 300x300 pikseli
     6. Obraz podzielony na cztery części (szachownica - 4 kwadraty) wypełniające się 4 różnymi kolorami
     7. Animacja zapętlona w nieskończoność
8. STOPKA
   • Nagłówek poziomu trzeciego o treści: Lekcja 60-62 / 2020. Tekst wyśrodkowany.
   • Wysokość nagłówka: 60 pikseli. Tekst wyśrodkowany w pionie.

 

Pytania i odpowiedzi: