Polecenie 1

Zapoznaj się z ilustracją interaktywną, która prezentuje fragment przykładowej strony internetowej, stworzonej na potrzeby omawianego projektu. Następnie wykonaj ćwiczenia.

1
R3oey8Q6oLSkE1
Źródło: Contentplus.pl sp. z o.o., licencja: CC BY-SA 3.0.

Na ilustracji widoczny jest fragment strony WWW. Na Górnym pasku znajduje się przepis na ciasto. W głównej części strony znajduje się galeria zdjęć ułożonych obok siebie poziomo, na jasno - beżowym tle. Zdjęcia przedstawiają makaron i warzywa umieszczone w głębokim naczyniu. Pierwsze zdjęcie jest kolorowe dwa kolejne czarno - białe. Poniżej w treści strony zapisano Lorem ipsum.

Zdjęcie makaronu i warzywa umieszczonych w głębokim naczyniu z galerii portalu Pixaby. Obok zdjęciach Widoczne są informacje na temat licencji zdjęcia oraz miniaturki zdjęć pokrewnych.

Ilustracja przedstawia trzy prostokąty ułożone poziomo obok siebie. Poniżej widoczna jest miarka. Prostokąty mają ten sam rozmiar.

Na ilustracji zaprezentowano kod galerii.

Zrzut ekranu przedstawia fragment kodu. Linia 1 . images‑gallery img  { Linia 2 display: inline‑block !important; Linia 3 position: relative; Linia 4 width: 18rem; Linia 5 height: 12.5rem; Linia 6 border‑radius: 6px; Linia 7 filter: grayscale(100%); Linia 8 opacity: 0.5; Linia 9 transition: 0.4s ease; Linia 10 } Linia 11 pusta Linia 12 images‑gallery img:hover {Linia 13 cursor: pointer;  Linia 14 filter: grayscale(0%); Linia 15 opacity: 1; Linia 16 transform: scale(1.9); Linia 17 z‑index: 99; Linia 18 }

Na ilustracji zaprezentowano wtyczkę, którą wykorzystuje kod galerii.

Pokaż ćwiczenia:
1
Ćwiczenie 1
RzzVJZ2AYGdnq
Wskaż typy zdjęć, jakie planujesz wykorzystać w swojej galerii. Możliwe odpowiedzi: 1. darmowe zdjęcia, 2. własne zdjęcia oraz grafiki, 3. płatne zdjęcia
R6P8A9VYqm0lU
Wybierz jedno nowe słowo poznane podczas dzisiejszej lekcji i ułóż z nim zdanie.
2
Ćwiczenie 2
RBENfWaTjxHa8
Zaprezentuj i omów przykład ciekawego wykorzystania galerii. (Uzupełnij).
3
Ćwiczenie 3

Do wykonania ćwiczenia potrzebujesz plików źródłowych przykładowej strony internetowej (znajdziesz je w sekcji „Prezentacja multimedialna”).

Pobierz załącznik. Zawiera on trzy pliki graficzne.

RN8zDIrN0aIez

Przycisk do pobrania pliku ZIP ze zdjęciami.

Plik ZIP o rozmiarze 803.73 KB w języku polskim

Zastąp nimi trzy identyczne zdjęcia dodane do galerii przykładowej strony, które w dotychczasowym projekcie wyglądają następująco:

R116Be0X3KNej

Dodaj do zdjęć odpowiednich autorów i licencje:

  • plik ciasto – autor: RitaE, licencja: CC0,

  • plik warzywa – autor: LubosHouska, licencja: CC0,

  • plik zupa – autor: Pexels, licencja: CC0.

Galeria powinna wyglądać tak:

RYkUs0K3qQCFo

Po kliknięciu środkowego obrazka, powinien pojawić się widok:

R1JT92zojvE4J