Tworzenie stron WWW: zaawansowanie techniki CSS

Tworzenie stron WWW: zaawansowanie techniki CSS
Cele szkolenia
1. Zdobycie umiejętności w zakresie posługiwania się technikami CSS do tworzenia
zaawansowanych graficznie stron i serwisów internetowych (zob. np. galerię projektów
na www.csszengarden.com).
2. Zdobycie umiejętności tłumaczenia poszczególnych elementów projektów graficznych
(m.in. tytułów, tabel, menu i układów stron) na języki HTML/XHTML i CSS (użycie
mechanizmu „widzę – zapisuję”).
3. Przygotowanie biblioteki gotowych do wykorzystania technik – głównie w zakresie
formatowania treści, tabel, menu, wyróżniania tytułów oraz tworzenia różnych układów
stron (w tym galerii).
4. Przygotowanie uczestników do dalszego samodzielnego rozwoju – nabierania
stopniowej wprawy w myśleniu w językach HTML/XHTML i CSS (czyli „mam
pomysł/projekt – zapisuję”) poprzez praktyczną realizację stron WWW i poszukiwanie
potrzebnych technik w dokumentacji w/w języków.
Profil słuchaczy
Szkolenie przeznaczone jest dla osób tworzących i projektujących wszelkiego rodzaju
strony i serwisy internetowe (w tym również projekty wzorcowe przeznaczone do
automatycznej generacji np. za pośrednictwem języka PHP).
Wymagania wstępne
Od uczestników szkolenia wymagana jest znajomość środowiska Windows oraz
podstawowa znajomość języków HTML/XHTML oraz CSS – w zakresie omawianym na
szkoleniu „Tworzenie stron WWW (HTML4/HTML5/XHTML/CSS)”.
Czas trwania
3 dni po 8 godzin lekcyjnych
Metoda realizacji szkolenia
Szkolenie realizowane jest w formie naprzemiennie następujących po sobie mini
wykładów oraz ćwiczeń praktycznych. Szkolenie łączy w sobie fachową wiedzę
merytoryczną z praktycznymi przykładami jej wykorzystania w środowisku pracy.
Wiedza teoretyczna i praktyczna
Wprowadzenie
[opcja] Cechy dobrego edytora do tworzenia kodu HTML/XHTML/CSS
Jak działają przeglądarki
Poprawna budowa strony WWW
(Moduł trwa łącznie ok. 20 minut)
Tagowanie treści w pliku HTML
Przypomnienie zasad
Najczęściej używane elementy i znaczniki treści stron WWW
(Moduł obejmuje łącznie ok. 15 minut wykładu i ok. 15 min. ćwiczeń)
Formatowanie treści strony
Przypomnienie zasad używania stylów CSS
Przypomnienie najczęściej używanych parametrów tekstu, tła, krawędzi i grafiki w tle
Inicjały
Style związane z warstwami
Warianty stylów dla elementów w poszczególnych warstwach
(Moduł obejmuje łącznie ok. 35 minut wykładu i ok. 85 min. ćwiczeń)
Formatowanie tytułów
Najczęściej używane parametry formatowania tytułów oraz wyróżnień
Automatyczne numerowanie elementów (np. rozdziałów lub sekcji strony, akapitów, ilustracji,
tabel itp.)
(Moduł obejmuje łącznie ok. 20 minut wykładu i ok. 70 min. ćwiczeń)
Tabele
Główne elementy składowe tabeli oraz ich formatowanie
Używanie klas stylów
Tworzenie nagłówków nadrzędnych dla więcej niż jednej kolumny lub wiersza tabeli (scalanie
komórek tabeli)
(Moduł obejmuje łącznie ok. 30 minut wykładu i ok. 60 min. ćwiczeń)
Listy (wypunktowane, numerowane i definicji)
Podstawowe elementy składowe list
Tworzenie list zagnieżdżonych
Najczęściej wykorzystywane parametry formatowania list
Najczęściej wykorzystywane parametry formatujące zawartość/pozycje listy
Elementy typu „in-line” a elementy typu „block” oraz możliwość zmiany sposobu zachowania
(przełączenia między tymi typami)
(Moduł obejmuje łącznie ok. 30 minut wykładu i ok. 90 min. ćwiczeń)
Układy stron
Najczęściej używane układy stron z użyciem podziału na warstwy
Pojemnik nadrzędny i automatyczna szerokość marginesów bocznych
Układ powiększony o stopkę strony
Technika warstwy trójdzielnej
Układy wieloszpaltowe
Konstrukcja „stosu warstw” i sterowanie kolejnością warstw na stosie oraz kontrola położenia
warstw
Mapy obrazów (image maps)
(Moduł obejmuje łącznie ok. 100 minut wykładu i ok. 180 min. ćwiczeń)
Galerie grafik
Cechy, rodzaje i zastosowanie
Główne zasady projektowania i ograniczenia techniczne
Przypomnienie – zasady wstawiania grafiki do treści strony
Przypomnienie – tworzenie klas stylów oraz rozróżnienie między użyciem dla warstw
identyfikatorów oraz klas
Wyświetlanie elementów blokowych (np. elementów listy) obok siebie
Wyłączanie ramki dla obrazków będących linkami
Zachowanie obrazków będących linkami przy zmianie koloru tła dla linków a:hoover
Rodzaje ramek
Model pudełkowy (box model) w kontekście obrazków
Oblewanie obrazka tekstem
Iluzja trójwymiarowości (złudzenie światłocienia)
Wyróżnianie wewnętrznego menu galerii
Płaskie lub „wypukłe” pseudoprzyciski
Automatyczne numerowanie obrazków (w obrębie strony lub wybranej warstwy nadrzędnej)
poprzez wstawienie numerów (np. do podpisów)
(Moduł obejmuje łącznie ok. 85 minut wykładu i ok. 165 min. ćwiczeń)
Umiejętności
Po ukończeniu kursu uczestnik/czka będzie potrafił/a:
• projektować zaawansowane graficznie strony WWW,
• tworzyć kod HTML/CSS takich stron,
• ulepszać pod względem typograficznym wszelkiego rodzaju strony (firmowe,
sklepy internetowe, serwisy informacyjne, blogi itp.).
Ścieżka rozwoju
Po zakończeniu szkolenia rekomendowane jest skorzystanie z:
• Dave Shea, Molly E. Holzschlag, „Zen stosowania CSS. Źródło oświecenia dla
projektantów stron WWW”,
• dokumentacji języka HTML (www.w3.org/TR/1999/REC-html401-19991224 i ew.
www.w3.org/TR/2012/CR-html5-20121217)
oraz
XHTML
(www.w3.org/TR/2002/REC-xhtml1-20020801 i www.w3.org/TR/2010/ RECxhtml-basic-20101123),
• dokumentacji języka CSS (www.w3.org/TR/2011/REC-CSS2-20110607).