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

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. Web Developer Extension czy też 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.

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

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

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

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.

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.

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.

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]

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)?

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.

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

Uwaga: przekształcenia 3D dostęne są tylko w nowszych wersjach przeglądarek…

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