Odwzorowanie Layoutu Wybranej Strony Internetowej

Lekcja: Odwzorowanie Layoutu Wybranej Strony Internetowej

Cel lekcji

Celem tego zadania jest nauczenie się odwzorowywania layoutu strony internetowej przy użyciu różnych metod organizacji układu: float, flexbox i grid. Uczniowie stworzą trzy podstrony, z których każda wykorzysta inną metodę układania elementów.

Wytyczne do projektu

1. Wybór strony do odwzorowania

Uczeń powinien wybrać istniejącą stronę internetową, która:

  • Ma czytelny layout składający się z nagłówka, sekcji głównej, nawigacji i stopki.
  • Zawiera przynajmniej 2 kolumny w układzie treści (np. główny obszar + pasek boczny).
  • Powinna mieć wyraźne elementy interfejsu, takie jak menu, nagłówki i sekcje treści.

👉 Przykłady stron do odwzorowania:

  • Strona bloga
  • Strona z artykułami informacyjnymi
  • Strona firmy

💡 Uwaga: Nie kopiujemy dokładnej zawartości strony! Wykorzystujemy własne treści i style.

2. Struktura projektu

Projekt składa się z 3 stron HTML, każda odwzorowująca wybrany layout w inny sposób:

  1. Strona 1: Layout wykonany za pomocą float.
  2. Strona 2: Layout wykonany za pomocą flexbox.
  3. Strona 3: Layout wykonany za pomocą grid.

Każda strona powinna zawierać:
✅ Nagłówek – z tytułem i nawigacją
✅ Nawigację – z linkami do wszystkich 3 stron i oryginalnej strony wzorcowej
✅ Główna część – treść podzieloną na sekcje i kolumny
✅ Stopkę – informacje końcowe

3. Nawigacja między stronami

Każda strona musi zawierać menu nawigacyjne, które pozwoli przechodzić między trzema wersjami layoutu oraz na stronę, którą odwzorowujemy.

Przykładowy kod HTML dla nawigacji:

<nav>
    <ul>
        <li><a href="float-layout.html">Float Layout</a></li>
        <li><a href="flexbox-layout.html">Flexbox Layout</a></li>
        <li><a href="grid-layout.html">Grid Layout</a></li>
        <li><a href="https://oryginalna-strona.com">Oryginalna strona</a></li>
    </ul>
</nav>

4. Strona 1 – Layout za pomocą Float

Strona powinna być podzielona na nagłówek, główną część z dwoma kolumnami oraz stopkę. Użyjemy float do ustawienia kolumn obok siebie.

Przykładowy układ:

  • Nagłówek (100%)
  • Główna treść (2 kolumny: 70% + 30%)
  • Stopka (100%)

💡 CSS (fragment kodu dla float)

.container {
    width: 100%;
    overflow: hidden;
}
.left-column {
    float: left;
    width: 70%;
    background-color: lightgray;
    padding: 20px;
}
.right-column {
    float: left;
    width: 30%;
    background-color: lightblue;
    padding: 20px;
}
.footer {
    clear: both;
    background-color: darkgray;
    text-align: center;
    padding: 10px;
}

5. Strona 2 – Layout za pomocą Flexbox

Ta strona będzie miała ten sam układ co poprzednia, ale zamiast float użyjemy flexbox.

💡 CSS (fragment kodu dla flexbox)

.container {
    display: flex;
    justify-content: space-between;
}
.left-column {
    flex: 3;
    background-color: lightgray;
    padding: 20px;
}
.right-column {
    flex: 1;
    background-color: lightblue;
    padding: 20px;
}
.footer {
    text-align: center;
    padding: 10px;
    background-color: darkgray;
}

6. Strona 3 – Layout za pomocą Grid

Tutaj układ będzie realizowany przy pomocy grid-template-areas.

💡 CSS (fragment kodu dla grid)

.container {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";
    gap: 10px;
}
.header { grid-area: header; background-color: darkgray; text-align: center; }
.main { grid-area: main; background-color: lightgray; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: lightblue; padding: 20px; }
.footer { grid-area: footer; background-color: darkgray; text-align: center; }

7. Stylizacja i responsywność

Każda strona powinna być dostosowana do różnych szerokości ekranu. Należy zastosować @media queries, aby np. w wersji mobilnej kolumny układały się jedna pod drugą.

💡 Przykład Media Queries

@media (max-width: 768px) {
    .container {
        display: block;
    }
    .left-column, .right-column {
        width: 100%;
    }
}

Podsumowanie

✅ 3 strony HTML z identycznym layoutem, ale różnymi metodami implementacji (float, flexbox, grid).
✅ Odwzorowanie istniejącego layoutu w sposób poprawny semantycznie.
✅ Podstawowa responsywność za pomocą @media queries.

Ocena projektu

Nauczyciel oceni:

  • Poprawność zastosowania float, flexbox i grid.
  • Wierność odwzorowania oryginalnego layoutu.
  • Działające nawigowanie między stronami.
  • Stylizację i responsywność projektu.

Spakowany projekt wysyłamy na: zapsikipolkone@gmail.com Tytuł maila: 3I G2 Imie Nazwisko Layouty-WIAI

🎯 Zadanie dla uczniów:
1️⃣ Wybierz stronę internetową do odwzorowania.
2️⃣ Stwórz 3 pliki HTML i zaimplementuj layout w 3 różnych technologiach.
3️⃣ Dodaj stylizację, linki nawigacyjne i poprawną strukturę dokumentu.
4️⃣ Upewnij się, że strona działa poprawnie na różnych urządzeniach.

💡 Przydatne linki:
🔗 Flexbox - W3C
🔗 CSS Grid - W3C
🔗 Float - W3C

Powodzenia! 🚀