Wyobraź sobie następującą sytuację. Zostałeś projektantem stron WWW i pracujesz w dużej firmie. W ciągu lat firma dorobiła się tysięcy stron WWW. Wszędzie stosowane są nagłówki w kolorze zielonym. Zmienia się kierownictwo i nowy prezes ma pomysł na inny wizerunek firmy. Wzywa cię do swojego gabinetu i zarządza zmianę koloru nagłówków z zielonych na brązowe. Wzdychasz ciężko, wracasz do swojego gabinetu i zaczynasz pracowicie edytować stronę za stroną. Zmieniasz na tych stronach kolory nagłówków. Musisz każdą stronę dokładnie przejrzeć, aby nie pominąć żadnego nagłówka. Po dwóch tygodniach pracy ponad siły wracasz do gabinetu prezesa i informujesz go, że praca została ukończona. Na to prezes, rzuciwszy okiem na kilka stron, stwierdza, że owszem, ładnie, ale jednak firma powinna mieć nagłówki czerwone. Zaczynasz mieć mordercze myśli...

Tak bywało kiedyś, jeszcze zanim wymyślono arkusze stylów. Co to jest styl? Jest to format elementu strony WWW, np. kolor tekstu, wielkość czcionki, położenie akapitu, itp. Różnica jest tylko taka, że format ten nie jest umieszczony na stronie WWW, lecz w osobnym pliku zwanym arkuszem stylów. Co nam to daje? Bardzo dużo. Z danym arkuszem stylów możemy połączyć dowolną ilość stron:

W arkuszu stylów definiujemy kolor nagłówków. Wszystkie strony połączone z arkuszem stylów będą miały ten właśnie kolor nagłówków. Jeśli zajdzie potrzeba zmiany koloru, to zamiast edytować setki stron, edytujemy jeden plik arkusza stylów i w nim zmieniamy definicję koloru. Korzyść jest oczywista. Obecnie panuje tendencja formatowania wszystkich stron WWW wyłącznie za pomocą stylów. Aplikacja Microsoft Expression Web 4 obsługuje arkusze stylów.

Na swoim dysku utwórz katalog w02, uruchom Expression Web 4 i utwórz w tym katalogu pustą witrynę.

W witrynie utwórz plik index.htm i sformatuj go zgodnie z poleceniami nauczyciela.

Utwórz plik arkusza stylów, zapisz go w witrynie pod nazwą style.css i połącz go z plikiem  index.html wg poleceń nauczyciela. Po połączeniu z arkuszem stylów nie zapomnij zapisać w witrynie pliku index.html.

Przejdź na zakładkę Site view (widok witryny) i skopiuj trzy razy plik index.html. Zmień nazwy kopii na s1, s2 i s3. W witrynie powinny być teraz 4 pliki:

Załaduj do edytora pliki s1, s2 i s3. Ponieważ są one kopiami pliku index, to arkusz stylów jest już z nimi połączony.

Przejdź na zakładkę style.css i utwórz formaty dla znaczników body, a, h1, h2 oraz p.

Teraz edytuj pliki stron wg wskazówek nauczyciela. Na stronie index wykorzystaj obrazek:

Jako zadanie masz odpowiednio zredagować strony s1,s2 i s3 i przesłać katalog w02 do oceny. Projekt będzie realizowany przez dwie lekcje.