Laboratorium, TIiM, CSS

W ramach dzisiejszego laboratorium dodadzą Państwo formatowanie do zestawu stron przygotowanych w ramach poprzednich zajęć.

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 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ą walidatorem HTML).

Użyteczny m.in. do manipulacji i tworzenia stylów CSS jest dodatek przeglądarki Firefox 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.

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.

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)

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.

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.

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.

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].

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.

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.

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.

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.

Proszę pobrać 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.

Proszę wejść na 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 (Safari lub Chrome). FireFox obsługuje przejścia CSS (CSS Transitions) dopiero w wersji 4 beta.

Obejrzyj przykład przedstawiony na tej stronie (działające demo znajduje się tu).

Uwaga: przekształcenia 3D dostęne są tylko w najnowszych wersjach engine'u WebKit - aby je przetestować, najlepiej pobrać najnowszy nightly build stąd.

Tutaj znajduje się rozbudowana wersja kostki, obsługująca gesty wykonywane myszką oraz gesty z urządzeń dotykowaych.