1
Scenariusz zajęć
IV etap edukacyjny, informatyka
Temat: Style CSS
Treści kształcenia:
Informatyka:
4. Opracowywanie informacji za pomocą komputera, w tym: rysunków, tekstów, danych liczbowych, animacji, prezentacji multimedialnych i filmów. Uczeń:
9) projektuje i tworzy stronę internetową, posługując się stylami, szablonami i elementami programowania.
Cele zoperacjonalizowane:
Uczeń:
● Potrafi tworzyć i analizować dokument zawierający opis stylów CSS
● Potrafi stosować style CSS podczas tworzenia strony WWW
● Potrafi modyfikować utworzone style CSS
● Umie powiązać style CSS z dokumentem HTML
Nabywane umiejętności:
Uczeń:
● Umie wymienić elementy dokumentu opisującego style CSS
● Rozumie możliwości, jakie daje stosowanie stylów CSS
● Definiuje zawartość dokumentu stylów CSS
● Kształci w sobie poczucie porządku
Kompetencje kluczowe:
● Kompetencje informatyczne
● Kompetencje społeczne
Środki dydaktyczne:
● Film samouczek: „Wykorzystanie stylów CSS”
● Komputer podłączony do Internetu
● Ćwiczenie: „Style CSS w praktyce” (do indywidualnego wykonania)
● Rzutnik
● Tablica
Metody nauczania:
● Eksponujące: film
● Problemowe: dyskusja
● Praktyczne: ćwiczenia, instruktaż
2
Formy pracy:
● Praca zbiorowa
● Praca indywidualna
Przebieg zajęć:
Etap wstępny
Nauczyciel rozpoczyna zajęcia od przypomnienia informacji na temat języka HTML.
Wskazuje na fakt, że obecnie język HTML doczekał się piątej wersji i staje się językiem dynamicznego przetwarzania i prezentowania danych. Nauczyciel wykazuje, że obecnie zaawansowane strony WWW są atrakcyjne dzięki stosowaniu elementów dodatkowych, takich jak style CSS, programy JavaScript czy animacje flash.
Nauczyciel przypomina podstawowe elementy języka HTML, znaczniki, ze szczególnym naciskiem na znaczniki odpowiedzialne za wstawianie odnośników (<a href ...>) oraz list numerowanych (<ol>) i nienumerowanych (<ul>).
Etap realizacji
Nauczyciel wyświetla film samouczek pt. „Wykorzystanie stylów CSS”, dotyczący tworzenia menu dla przykładowej strony WWW z zastosowaniem stylów CSS. Materiał ten jest wprowadzeniem do części ćwiczeniowej.
Nauczyciel zapisuje na tablicy strukturę pliku CSS. Tłumaczy uczniom, iż w arkuszu stylów znajdują się reguły, które składają się z dwóch części: selektora i bloku deklaracji. Selektor zawiera listę nazw elementów, których dotyczy dana reguła. Blok deklaracji umieszczony jest w nawiasach klamrowych i zawiera zbiór par właściwości: wartości, po których następuje średnik. Nauczyciel zapisuje na tablicy przykład formatowania akapitu, przedstawiony na rys. 1, a następnie omawia poszczególne właściwości i ich wartości.
P{
font-size:12pt;
font-style:bold;
color:black;
text-align:right;
}
Rys.1. Przykładowa reguła CSS
Następnie nauczyciel prosi wybranego ucznia, by określił regułę dla nagłówka pierwszego poziomu (H1), który powinien być napisany czcionką w rozmiarze 20 punktów (font- size:20pt;), kursywą (font-style:italic;), kolorem czerwonym (color:red;) i powinien być wyśrodkowany (text-align:center;). Nauczyciel podpowiada uczniowi.
Nauczyciel zapoznaje uczniów z ćwiczeniem pt. „Style CSS w praktyce” i rozdaje zadania do indywidualnego wykonania przez uczniów. W pracy uczniowie wspierają się samouczkiem.
3
Nauczyciel kontroluje proces pracy uczniów z plikami strony WWW i udziela im pomocy w przypadku problemów.
Etap końcowy
Nauczyciel zadaje pytania kontrolne uczniom:
1. Co to są style CSS?
2. Wymień przykłady elementów strony WWW, które mogą być opisane za pomocą stylów CSS?
3. Jaki znacznik jest odpowiedzialny za utworzenie na stronie WWW listy numerowanej, a jaki za utworzenie listy nienumerowanej?
Zadanie domowe:
Wykorzystując pliki z lekcji, dodaj do strony WWW jeszcze jedno menu, ale korzystające z innego dokumentu stylów CSS.
Słowa kluczowe:
style CSS, język HTML, lista numerowana, lista nienumerowana, rozmiar czcionki, formatowanie, reguły, selektor, blok deklaracji, odnośnik, strona WWW
