Zadanie wykonania strony internetowej

1. Zadanie wykonania strony internetowej polega na utworzeniu strony o nazwie animacje.html oraz założeniu dokumentu style.css
2. Zanim będziemy wykonywać poniższe ćwiczenie na ocenę, proszę o zapoznanie się z tutorialem wykonania animacji
3. Podaje poniżej 2 krótkie tutoriale do których zachęcam aby obejrzeć je przed wykonaniem ćwiczenia
4. Tutorial 1

5. Tutorial 2

Tworzymy główną strukturę HTML strony - układ projektu strony

1. W edytorze sublime tworzymy plik o nazwie: animacje.html
2. Zakładamy główną strukturę HTML5

3. Dodajemy kod obsługi baneru, uzyjemy znacznika "div" i prostego napisu nazwy naszej szkoły

4. Tworzymy "menu" dla strony

5. Dodajemy kod html dla artykułów (w sumie będziemy mieli 3x ten sam kod - strona będzie posiadać trzy artykuły)

6. Tworzymy stopkę "footer" dla naszej strony i wpis w znaczniku "h3" ze swoim imieniem i nazwiskiem ucznia

7. Kopiujemy 2 x artykuł czyli zaznaczamy znacznik html od "article" do "/article" pierszego artykułu i wklejamy wewnątrz znacznika "div class=artykuly"

Podpięcie arkusza styli oraz proste animacje

1. Za pomocą znacznika "link" podłączam arkusz styli

2. Tworzę nowy plik o nazwie style.css do tego samego folderu co animacje.html i wprowadzam nazwy klas i znaczników w celu sformatowania strony html

3. Dodaje w pliku style.css styl dla klasy ".baner"

4. Dodaje do styli właściwości dla klasy ".menu"

5. Aktualizuję klasę ".menu" oraz dodaje styl dla listy "ul li",które prezentują zakładki naszego menu

6. Teraz formatujemy klasę ".artykuly" oraz znacznik "article"

7. Dodajemy dla znacznika "article" tło oraz dodajemy styl dla znacznika "footer" stopki strony

Animacje na stronie

1. Zapomocą właściwości "animation" tworzę animację o nazwie "animacja-baneru", animacja dotyczy klasy ".baner"

2. Dodaję pod klasą ".baner" obsługę utworzonej animacji: "animacja-baneru" "@keyframes"

3. Dodajemy animacje dla obsługi menu a konkretnie dla list ".menu ul li > a" w której znajduje się hiperłącze, tutaj po najechaniu mychą na menu zmieniamy wyglad przez animację dla pseudoklasy ".menu ul li > a:hover"

4. Dodajemy obsługę styli dla znacznika "article img"

5. Dodajemy animacje dla przycisku w artykułach ".przycisk" oraz styl dla pseudoklasy ".przycisk :hover"

Efekt finalny strony

1. Efekt końcowy w postaci finalnej strony aminacje.html powinien wyglądać jak pokazano poniżej na obrazku

Dziękuję za uwagę w razie pytań proszę kontakt: informatyka@pszczyna.edu.pl