Serwis Edukacyjny
w I-LO w Tarnowie
obrazek

Materiały dla uczniów liceum

  Wyjście       Spis treści       Wstecz  

Autor artykułu: mgr Jerzy Wałaszek

©2022 mgr Jerzy Wałaszek
I LO w Tarnowie

obrazek

Materiały dla klasy III

Strony WWW z nawigacją

Projekt

SPIS TREŚCI

Arkusz stylów

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:

obrazek

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 początek:  podrozdziału   strony 

Materiały do lekcji

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:

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.

Na początek:  podrozdziału   strony 

Zespół Przedmiotowy
Chemii-Fizyki-Informatyki

w I Liceum Ogólnokształcącym
im. Kazimierza Brodzińskiego
w Tarnowie
ul. Piłsudskiego 4
©2022 mgr Jerzy Wałaszek

Materiały tylko do użytku dydaktycznego. Ich kopiowanie i powielanie jest dozwolone
pod warunkiem podania źródła oraz niepobierania za to pieniędzy.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

Serwis wykorzystuje pliki cookies. Jeśli nie chcesz ich otrzymywać, zablokuj je w swojej przeglądarce.

Informacje dodatkowe.