Zadania

Rozgrzewka

  1. Zaprojektować jedną tabelkę do obowiązującego planu zajęć dla pierwszego, drugiego i trzeciego roku. Tabelkę umieścić w pliku plan_zajec.html. Elementy tabelki nie powinny zawierać żadnych atrybutów za wyjątkiem atrybutu cellspacing ustawionego na 0. Uwaga: w specyfikacji CSS2 zapisano, że marginesów nie można stosować do komórek tabeli; zamiast cellspacing/marginesów można użyć własności border-spacing. Tabelkę należy wystylizować wyłącznie za pomocą zewnętrznego arkusza stylów o nazwie plan_zajec.css.

  2. Przygotować formularz wykorzystujący wszystkie elementy opisane na stronie P. Wimmera Formularze. W atrybucie action elementu form umieścić swój adres email. Formularz ma być funkcjonalny. Co to oznacza, można przeczytać tutaj, tutaj,

    Formularze testujemy wpisując w atrybucie action elementu form swój adres email. Po kliknięciu przycisku submit, na wpisany adres zostanie przesłany email.

    Ale można też postąpić inaczej — można uruchomić prostą aplikację Sinatry. Reszta jest opisana w README.

    W HTML 5 poświęcono sporo uwagi formularzom. Można o tym poczytać tutaj: A vocabulary and associated APIs for HTML and XHTML, a tutaj jest proste demo: HTML 5 Forms Demo.

  3. Przygotować w oparciu o arkusz stylu CSS galerię zdjęć. Tutaj, tutaj, tutaj i tutaj można znaleźć interesujące projekty.
    A tutaj jest lista wszystkich projektów umieszczonych na CSS play.

Fiki miki różne triki

W poniższych zadaniach należy dostarczyć plik HTML 4.01 nie zawierający tabelek, z osadzonym kodem CSS oraz bez wspomagajacego kodu Javascript.

Kod ma działać w Firefoxie, w IE niekoniecznie.

Zaprogramować taką czerwono-niebieską ramkę jak na załączonym poniżej obrazku.

rollover

2. W tym zadaniu należy uzyskać efekt roll over, taki jak na załączonym obok obrazku. Tak ma wyglądać „menu” po najechaniu kursorem myszki na Love. Przesunięcie kursora niżej na Linux powinno zmienić kolor Love na niebieski, a kolor Linux na żółty i tak dalej.

Jak uzyskać (prawie) taki efekt jest opisane w klasycznym artykule przedrukowanym w HTML Dog.

Zaczynamy od takiego kodu: z wpisaną listą i ustawionymi kolorami…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.:|:.</title>
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
  <style type="text/css">

    ul#navlist {
      list-style-type: none;
      font-family: sans-serif;
      width: 160px;
    }
    ul#navlist a {
      width: 100%;
      text-align: center;
      background-color: #003366; color: #EEEEEE;
      text-decoration: none;
    }
    ul#navlist li.active a {
      background: #ffffcc; color: red;
    }
    ul#navlist li a:hover {
      background: #ffffcc; color:black;
    }

  </style>
</head>
<body>
  <ul id="navlist">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Linux</a></li>
    <li><a href="#">Ascii Art</a></li>
    <li><a href="#">Pets</a></li>
  </ul>
</body>
</html>

alternate colors

3. (i) Przygotować CSS kolorujacy górną połowę wiersza tekstu na niebiesko, a dolną na czerwono. (i) Pokolorować kolejne litery, w jednym wierszu podanego tekstu, na przemian na niebiesko i czerwono.

Efekt, który należy osiągnąć ma być taki jak na obrazku obok.

Uwaga: Taki oto kod:

<p class="blue">a<span class="red">b</span>c<span class="red">...

w którym używamy jednego elementu span na jedną literę nie zalicza tego zadania. Należy ten efekt osiągnąć oszczędniejszymi środkami, ale zamiast spanów można użyć fontu monospaced (wskazówka?).

E. Meyer, CSS I

większy obrazek

Konwersja istniejącej strony

Przejście od strony z samym kodem w HTML do strony z HTML + CSS wymaga dwóch kroków:

Tutaj mamy stronę w czystym HTML.

A tutaj mamy stronę z wyciętym kodem.

Twoje zadanie polega na dodaniu kodu CSS przywracającego oryginalny wygląd strony. Kodu HTML w zasadzie nie powinieneś zmieniać. Jedyne dopuszczalne zmiany w HTML, to dodanie atrybutów class do niektórych elementów.

Zmienić kolorystykę strony. Kolory wybrać korzystając z narzędzia Color Scheme Designer. Za pomocą tego narzędzia możemy zobaczyć jak postrzega świat 15% ludzi.

BlueprintCSS Framework

  1. Zainstalować framework BlueprintCSS z servera github.com.

  2. Wygenerować swoje pliki CSS za pomocą programu compressor.rb (znajdziesz go w katalogu lib).

  3. Przygotować stronę demonstrującą możliwości frameworka. Najpierw obejrzeć gotowca tests/parts/sample.html.