====== Laboratorium, JiTW, 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]]). Większość przeglądarek posiada obecnie możliwość interaktywnej edycji CSS. Jest to funkcja wbudowana albo dostępna jako rozszerzenie. Przykładowo Firefox posiada zarówno wbudowane narzędzia - menu Tools/Web Developer, jak i rozszerzenia np. [[https://addons.mozilla.org/en-US/firefox/addon/web-developer/|Web Developer Extension]] czy też [[https://addons.mozilla.org/en-US/firefox/addon/firebug|Firebug]]. Z perspektywy niniejszego projektu pozwalają one 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 **[1 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]**: * główny 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 okna przeglądarki), * 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ść w zależności od zawartości; przy przewijaniu treści strony, jej spis treści ma się nie przesuwać. 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 **[1 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 stylów 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. ==== Ćwiczenie 9: style warunkowe ==== Zmodyfikuj styl podstawowy tak, żeby zawartość menu była widoczna tylko jeżeli przeglądarka renderuje stronę z rozdzielczością poziomą większą od 800 pikseli. Jeżeli rozdzielczość jest mniejsza zamiast menu renderuj napis 'MENU', który po wskazaniu kursorem myszy rozwija się pokazując wszystkie pozycje menu. **[2 punkty]** ===== Ciekawostki CSS ===== ==== Labirynt ==== Zagraj w prostą grę dostępną pod adresem: [[http://www.cssplay.co.uk/menu/pyramid]]. Proszę zauważyć, że do jej implementacji **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)? ==== 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. ==== 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 nowszych wersjach przeglądarek... [[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ń dotykowych.