====== Laboratorium, TIiM, CSS ====== W ramach dzisiejszego laboratorium dodadzą Państwo formatowanie do zestawu stron przygotowanych w ramach poprzednich zajęć. ===== Narzędzia ===== Większość edytorów HTML pozwala również na edycję stylów CSS i poprawnie podświetla ich składnię. Do sprawdzania poprawności stylu CSS służy usługa [[http://jigsaw.w3.org/css-validator/|W3C CSS Validation Service]]. Proszę pamiętać, ze dołączenie stylu CSS i związane z tym operacje (m.in. przypisanie elementom identyfikatorów i klas) nie powinno wpłynąć na zgodność kodu XHTML ze specyfikacją (sprawdzamy ją [[http://validator.w3.org/|walidatorem HTML]]). Użyteczny m.in. do manipulacji i tworzenia stylów CSS jest dodatek przeglądarki Firefox [[https://addons.mozilla.org/en-US/firefox/addon/web-developer/|Web Developer]]. Pozwala on m.in. na wyświetlanie dyrektyw formatujących dla danego elementu, wyłączanie wybranych stylów czy edycję poszczególnych dyrektyw. ===== Ćwiczenia ===== W każdym ćwiczeniu przyrostowo budują Państwo arkusz stylów, które będą wpływały na element dokumentu: * akapity tekstu, * listy, * nagłówki, * tabele. Arkusze stylów **muszą** być zdefiniowane w **osobnych plikach**. Użycie atrybutu ''style'' w kodzie XHTML jest niedozwolone. ==== Ćwiczenie 0: Wstęp do CSS ==== Zapoznaj sie z możliwościami CSS: http://www.barelyfitz.com/screencast/html-training/css/positioning/ oraz pozycjonowaniem: http://www.w3.org/Style/Examples/007/ Na stronie: http://www.w3.org/Style/CSS/ zmien wizualizacje korzystajac ze stylów alternatywnych (Menu: Widok/Styl strony) ==== Ćwiczenie 1: formatowanie tekstu ==== Format powinien obejmować **[1 punkt]**: * zmianę czcionki, * ustawienie różnych kolorów czcionki dla kolejnych nagłówków (h1, h2, ...), * dla nagłówka ''h1'' proszę zwiększyć //o d s t ę p y// pomiędzy literami, * pierwsze linijki akapitów powinny posiadać wcięcie. ==== Ćwiczenie 2: formatowanie tabel ==== Należy określić styl tabel **[2 punkty]**: * kolor tła komórek tabeli i jej krawędzi, * przynajmniej dwie kolumny muszą różnić się kolorem tła, * osobne formatowanie nagłówka tabeli i jej treści, * litery tekstu w nagłówkach kolumn tabeli powinny być zamienione na wielkie. Proszę sprawdzić poprawność stylu za pomocą walidatora. ==== Ćwiczenie 3: formatowanie list ==== Proszę przerobić listę tak, aby składała się wyłącznie list numerowanych i miała trzy poziomy, a następnie proszę **nie korzystając z klas ani identyfikatorów** określić tryby numerowania **[2 punkt]**: * dla pierwszego poziomu - duże liczby rzymskie (I, II, III, ...), * dla drugiego poziomu - małe liczby rzymskie (i, ii, iii, ...), * dla trzeciego poziomu - litery greckie (alfa, beta, gamma, ...). Proszę sprawdzić poprawność stylu. ==== Ćwiczenie 4: formatowanie obrazów ==== Przy pomocy dyrektyw CSS proszę wyrównać obrazki odpowiednio do lewej i prawej krawędzi ekranu (zakładając, że w dokumencie znajdują się przynajmniej dwa obrazki) **[1 punkt]**. ==== Ćwiczenie 5: układ strony ==== W każdym z dokumentów XHTML, z poprzedniego ćwiczenia spis treści oraz zasadnicza treść strony znajduje się w osobnych elementach ''div'' (kontenerach). Korzystając z CSS odpowiednio określ wygląd dokumentu, tak aby **[2 punkty]**: * kontener z treścią sformatować tak, aby osiągał **maksymalnie** wybraną szerokość w pikselach (np. 960); kontener powinien mieć tło inne niż jego marginesy, * tytuł strony zajmował całą szerokość kontenera (niezależnie od rozmiarów okienka), * spis treści (menu) był w postaci prostokątów o wybranym kolorze i wyśrodkowanych napisach; powinien zajmować pionowy pasek przy lewej lub prawej (do wyboru) krawędzi kontenera z treścią, mieć stałą szerokość i wysokość równą przestrzeni przeznaczonej na treść strony i przewijany razem z nią, * niewykorzystana przez przyciski część paska spisu treści po lewej stronie powinna mieć tło w innym kolorze niż pozostałe elementy strony, * treść strony powinna zajmować pozostałą część głównego kontenera (pomiędzy paskiem menu a jego prawą krawędzią) i dostosowywać swoją szerokość do szerokości strony. Dobrym pomysłem będzie przypisanie wszystkim kontenerom identyfikatorów. Proszę sprawdzić poprawność stylu. ==== Ćwiczenie 6: pseudoklasy i pseudoelementy ==== Proszę uzupełnić style tak, aby **[2 punkt]**: * pierwsza litera każdego z akapitów była sformatowana inaczej niż reszta tekstu akapitu * elementy menu zmieniały swój kolor gdy znajduje się nad nimi kursor myszy; kursor powinien być strzałką nawet gdy znajduje się nad tekstem będącym hiperpołączeniem. Proszę sprawdzić poprawność stylu. ==== Ćwiczenie 7: style na inne media niż ekran ==== Proszę przygotować arkusz styli przeznaczony do druku - bez układu strony z ćw.5, z wyraźnym, czarno-białym formatowaniem. Menu nie powinno się pojawiać na wydruku **[1 punkt]**. Proszę sprawdzić osiągnięty efekt korzystając z podglądu wydruku w przeglądarce. ==== Ćwiczenie 8: style alternatywne ==== Proszę przygotować alternatywny arkusz stylów - taki, aby elementy menu pojawiały się w poziomym pasku pod tytułem strony (a treść zajmowała całą szerokość głównego kontenera) **[1 punkt]**. Proszę sprawdzić poprawność stylu oraz jego wygląd przełączając aktywny styl w odpowiednim menu przeglądarki. ===== Ciekawostki CSS ===== ==== Labirynt ==== Proszę pobrać {{http://home.agh.edu.pl/~ernst/_media/wstie:ti2010:labs:puzzle1.html.zip|ten plik}}. Wewnątrz archiwum znajduje się plik HTML z niezbyt skomplikowanym kodem HTML i dyrektywami CSS. Obejrzyj działanie tego pliku. Proszę zauważyć, że do implementacji tej gry **nie użyto języka JavaScript** - cała dynamika opiera się o CSS. Przeanalizuj sposób implementacji gry. Czy umiesz (nie dodając żadnych obrazków, itd.) zmodyfikować kod tak, aby po "przegranej" na planszy pojawiał się pisany dużą czcionką napis "LOSER" (ale żeby kiedy indziej nie był widoczny)? //Przedstawiony w celach edukacyjnych przykład pochodzi ze strony [[http://www.cssplay.co.uk/menu/pyramid]].// ==== Animacje CSS ==== Proszę wejść na [[http://webkit.org/blog/138/css-animation/|tę stronę]], przewinąć w dół i zobaczyć jak poszczególne ramki reagują na umieszczenie na nich kursora myszy/klikanie. Przeanalizuj kod źródłowy. **Uwaga:** do poprawnego działania tej strony potrzebna jest w miarę aktualna przeglądarka oparta na WebKit ([[http://www.apple.com/safari/|Safari]] lub [[http://www.google.com/chrome|Chrome]]). FireFox obsługuje przejścia CSS (//CSS Transitions//) dopiero w wersji 4 beta. ==== CSS 3D ==== Obejrzyj przykład przedstawiony na [[http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/|tej stronie]] (działające demo znajduje się [[http://www.paulrhayes.com/experiments/cube-3d/index.html|tu]]). **Uwaga:** przekształcenia 3D dostęne są tylko w najnowszych wersjach engine'u WebKit - aby je przetestować, najlepiej pobrać najnowszy //nightly build// [[http://nightly.webkit.org|stąd]]. [[http://www.paulrhayes.com/experiments/cube-3d/touch.html|Tutaj]] znajduje się rozbudowana wersja kostki, obsługująca gesty wykonywane myszką oraz gesty z urządzeń dotykowaych.