Tworzenie stron WWW

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:

 

 

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 Kompozer obsługuje arkusze stylów.

 

Łączenie arkusza stylów ze stronami WWW

Otwórz aplikację Kompozer. Utwórz w swojej witrynie nowy katalog o nazwie oceany (jak to zrobić opisaliśmy krok po kroku w materiałach poprzedniej lekcji).

 

 

Sformatuj stronę w edytorze za pomocą opcji menu Format → Page Title and Properties (pamiętaj o kliknięciu myszką w okno edytora).

 

 

Trzy pierwsze pola wypełnij bezpośrednio z klawiatury. Język i zestaw znaków wybierz za pomocą widocznych z prawej strony przycisków. Po wypełnieniu treści okno Page Properties zamknij przyciskiem OK. Stronę zapisz w katalogu oceany w swojej witrynie pod nazwą index.html:

 

 

Teraz utworzymy plik pustego arkusza stylów. Musimy zrobić to w obcym programie, ponieważ aplikacja Kompozer nie zawiera opcji tworzenia plików arkuszy stylów – potrafi je tylko edytować. Kliknij przycisk startowy, Akcesoria i Leafpad. Zostanie otworzony notatnik. Nic do niego nie wpisuj, ponieważ potrzebny nam jest pusty plik. Z menu notatnika wybierz opcję Plik i Zapisz (możesz również nacisnąć kombinację klawiszy Ctrl+S). Pojawi się okno zapisu na dysk:

 

 

Jako nazwę pliku wpisz style.css. Następnie wybierz katalog oceany w swojej witrynie i kliknij przycisk Zapisz. Aplikację Leafpad możesz zamknąć. Odśwież panel menadżera witryn. Powinieneś otrzymać taki widok:

 

 

Plik style.css musi zostać połączony w odpowiedni sposób z plikiem strony WWW, aby strona ta korzystała z informacji o formatowaniu zawartych w pliku arkusza stylów. Na pasku narzędziowym u góry okna kliknij ikonę edytora stylów:

Pojawi się okno kaskadowych arkuszy stylów:

 

 

Kliknij małą strzałkę w dół obok ikony palety w lewym górnym rogu okna dialogowego i z menu wybierz opcję:

 

 

Zawartość okienka zmieni się i da ci możliwość wybrania pliku arkusza stylów, z którym będzie współpracowała twoja strona WWW.

 

 

W okienku kliknij przycisk Choose File (wybierz plik), a następnie wskaż plik style.css i kliknij przycisk otwórz. W polu URL powinien pojawić się adres pliku:

 

 

Teraz kliknij w przycisk Creare Stylesheet (utwórz arkusz stylów). Na liście Sheets and rules powinien pojawić się plik style.css:

 

 

Okienko zatwierdź przyciskiem OK. Arkusz stylów został dołączony do naszej strony. Aby to sprawdzić, przejdź w edytorze na zakładkę Source (źródło strony) i wyszukaj znacznika:

 

 

Jeśli go nie znajdziesz, to zapewne popełniłeś błąd przy dołączaniu arkusza do strony. Wróć i wykonaj całą operację jeszcze raz.

Powracamy do trybu Design (projekt strony). Stronę zapisz na dysku (Ctrl+S).

Teraz naszą stronę index.html skopiujemy na dysk pod nazwami s1.html, s2.html i s3.html. Zadanie to wykonaj w sposób następujący:

 

 

Najpierw czerwonym X usuń z edytora stronę (na zakładce pojawi się napis untitled), a następnie, podwójnie klikając kolejno w pliki stron w oknie menadżera witryn, załaduj je do edytora. U góry okna edycji otrzymasz dla każdego pliku zakładkę z jego tytułem.

Przejdź do pliku Oceany Ziemi i utwórz w nim nagłówek pierwszego poziomu:

 

 

Plik zapisz na dysku (Ctrl+S).

Teraz wypróbujemy działanie arkusza stylów. Zdefiniujemy standardowy styl dla dokumentu strony. Kliknij edytor stylów:

 

 

Pojawi się okno dialogowe CSS Stylesheets. W panelu bocznym kliknij w plik style.css.

 

Teraz kliknij w paletę. Okienko zmieni zawartość.

 

 

U góry powinna być zaznaczona opcja pierwsza (styl stosowany do elementów danego typu). W polu tekstowym wpisujemy nazwę znacznika, którego działanie styl będzie modyfikował (tutaj, niestety, znajomość nazw znaczników jest niezbędna). My chcemy zmienić kolor całej strony, zatem wpisujemy tutaj body i klikamy na przycisk Create Style rule (utwórz regułę stylu). Okienko znów zmieni zawartość:

 

 

To jest właśnie edytor stylów wbudowany w aplikację Kompozer. Wybierz zakładkę Tekst, a następnie zmień kolor tekstu na jasno niebieski. Wybierz zakładkę Background (tło).

 

 

Dla tła wybierzemy kolor ciemno niebieski. Zatwierdź zmiany przyciskiem OK. Strona zmieni wygląd.

Edytor KompoZera czasami wykazuje dziwne zachowanie. Jeśli coś nie chce ci działać, po prostu zapisz stronę, usuń z edytora i otwórz ją jeszcze raz. Wtedy wszystko wróci do normy. Program jest darmowy i w wersji beta, zatem nie wymagajmy od niego zbyt wiele.

Pod nagłówkiem wpisz:

 

 

Pod tym napisem wstaw linię poziomą (Insert → Horizontal Line), a pod nią umieść poniższy obrazek (obrazek skopiuj do katalogu oceany, a następnie przeciągnij i upuść na stronie).

 

 

Pod obrazkiem wstaw jeszcze jedną linię poziomą oraz napis copyright. Zaznacz całość strony (Ctrl+A) i wycentruj.

 

 

 

Teraz dorobimy łącza do pozostałych stron WWW w naszej witrynie. Zaznacz wyraz Fauna i kliknij narzędzie hiperłącza: . Pojawi się okno dialogowe własności hiperłącza:

 

 

W polu Link Location (położenie wskazywanego obiektu) wpisz nazwę pliku strony s1.html i kliknij przycisk OK. Napis Fauna stanie się hiperłączem, czyli elementem strony WWW, którego kliknięcie myszką spowoduje załadowanie do przeglądarki wskazywanej strony WWW. Hiperłącza są standardowo niebieskie i źle je widać na naszym tle. Zaraz temu zaradzimy.

W podobny sposób zaznacz napis Flora i zrób z niego hiperłącze do pliku s2.html. Na koniec zaznacz oba wyrazy Galeria fotografii i zmień na hiperłącze do pliku s3.html. Zapisz na dysku edytowaną stronę WWW (Ctrl+S).

Aby sprawdzić wygląd strony i działanie hiperłącz, kliknij w narzędzie przeglądarki: .  Kliknij w każde z hiperłączy i sprawdź, czy powoduje załadowanie się właściwej strony. Powrót do strony głównej nastąpi po kliknięciu wyszką strzałki cofania. Wróć do KompoZera.

Teraz zdefiniujemy kolory hiperłączy. Oczywiście zrobimy to w arkuszu stylów. Kliknij ikonę edytora stylów:

W okienku zaznacz z lewej strony plik style.css, kliknij ikonę palety.

 

 

Zaznacz opcję custom style rule (własna reguła stylu) i w polu tekstowym wpisz a:link, po czym kliknij w przycisk Create Style rule.

 

 

Wybierz zakładkę Text, kolor czcionki jasnoniebieski i zaznacz opcję Text decorations: None (upiększenia tekstu: brak). Kliknij w przycisk OK.  Kolory hiperłączy powinny się zmienić na jasnoniebieskie:

 

 

Dodamy teraz do tych hiperłączy efekt dynamiczny, który spowoduje, że będą one zmieniać kolor i wygląd po wskazaniu myszką. Ponownie wejdź do edytora stylów, zaznacz plik style.css i kliknij paletę.

 

 

Powtórz zaznaczenie opcji custom style rule i w polu tekstowym wpisz a:visited (hiperłącze już wcześniej odwiedzone). Kliknij w przycisk Create Style rule.

 

 

Wybierz zakładkę Text, ustaw kolor na jasnofioletowy i zaznacz opcję None w sekcji Text decorations. Styl zatwierdź, klikając w OK.

W identyczny sposób dodaj style:

 

 

Zapisz stronę na dysku i przeglądnij ją w przeglądarce. Zwróć uwagę, że wskazane hiperłącze zmienia się dynamicznie.

 

 

Zadanie dla ciebie

 

---

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

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

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe