Projektowanie stron Lekcja 62

Obsługa dynamicznych rozmiarów
- Użyj calc(), gdy musisz łączyć różne jednostki (np. procenty, piksele, wymiary) dla szerokości, wysokości, marginesów
- Przykład: szerokość: calc (100% - 50px); zapewnia, że element przyjmuje pełną szerokość minus ustalony margines.
Tworzenie responsywnych układów
- Użyj clamp(), aby elementy były responsywne, przy jednoczesnym poszanowaniu wartości minimalnych i maksymalnych.
- Przykład: rozmiar czcionki: clamp(16px, 2.5vw, 24px); ustawia rozmiar skalując ją względem szerokości portu widokowego (wyświetlacza), ale utrzymuje ją w określonym zakresie (min 16px, max 24px).
Zapobieganie przepełnieniom (overflows) przy projektowaniu Layoutu
- Użyj max() lub min(), aby upewnić się, że elementy nie przekraczają ani nie spadną poniżej określonych rozmiarów.
- Przykład: width: min(80%, 500px); ogranicza szerokość elementu do 80% jego pojemnika, ale jednocześnie pilnuje żeby nie przekroczył 500px dla większych ekranów.
Dopasowanie przestrzeni
- Użyj calc() do definiowania marginesów w oparciu o zależności między różnymi elementami.
- Przykład: margin-top: calc(50px + 1em); dodaje margines bazowy i skaluje go z rozmiarem czcionki
Pozycjonowanie elementów
- Użyj calc(), aby dopracować pozycje elementów na podstawie wymiarów portu (viewport) lub pojemnika (container).
- Przykład: top: calc(50% - 100px); centruje element pionowo, ale kompensuje go dla stałego rozmiaru.
Przykłady

cw 620

Dodaj sekcję stopki, w której umieścisz dodatkowe informacje lub linki, takie jak dane kontaktowe (adres szkoły) oraz profile w mediach społecznościowych (fb szkolny).
Umieść prosty pasek nawigacyjny na górze strony (poniżej nagłówka), aby uzyskać lepszą strukturę i użyteczność.
- Odnośnik do strony szkoły: School
- Odnośnik do strony w3schools: w3schools
- Odnośnik do strony Microsoft Learn
- Odnośnik do strony Free Code Camp
Dodaj formatowanie CSS do menu nawigacyjnego
Dodaj sekcję z trzema filmami udostępnionymi na zasadzie licencji Creative Commons, aby uczynić swój projekt wizualnie atrakcyjnym. Wybierz miejsce w projekcie na umieszczenie filmu. Dobierz styl pasujący do projektu.

cw 621