Pomoc - Zarządzanie informacją

Spis paragrafów >> Style na stronie WWW << Powrót

<< Poprzedni Następny >>

86.4. Style na stronie WWW

Style to zestaw parametrów opisujących rodzaj i kolor czcionek, wygląd nagłówków tekstu, odnośników, wypunktowania, rodzaj tła i inne parametry wyglądu, które mogą być zapisane wewnątrz pliku *.html. Najczęściej jednak są umieszczane w osobnym pliku *.css.

Uwaga. W przykładach do podręcznika posłużyliśmy się osobnym plikiem.

Do nagłówka pliku (pomiędzy znacznikami <head> </head>) dodajemy informację w postaci znacznika:
<link rel="stylesheet" type="text/css" href="css/style.css" />

podając w nim ścieżkę dostępu do pliku *.css (kaskadowego arkusza stylów). Jeśli w znaczniku zmienisz wartość style.css na style2.css (tych użyliśmy w przykładzie na CD) lub usuniesz cały atrybut href="css/style.css", to wygląd strony drastycznie się zmieni.

Uwaga. Mając witrynę składającą się z wielu plików przyjmujących wygląd od jednego pliku *.css, możesz – zmieniając go – bez trudu zmieniać wygląd serwisu bez konieczności poprawiania krok po kroku wszystkich dokumentów *.html czy *.php.

W realizacji stron WWW obecnie oddziela się wyraźnie aktualizację treści od ich wyglądu. Wygląd jest określony w pliku *.css/ lub sekcji style pliku *.html, a treść jest aktualizowana w plikach *.html lub przez zaprogramowane odpowiednio mechanizmy strony wykonanej, na przykład w języku PHP jako system CMS.

Kod pliku css jest przejrzysty jak xhtml. W załączonych na płycie CD przykładach wyraźnie można rozróżnić określenia poszczególnych elementów.

Zastosowanie stylów >>

Kurs XHTML na CD – [odnośnik1]>>

Sposób użycia stylów przy realizacji danej strony WWW zależy od jej autora. Deklaracja stylu może być umieszczona w osobnym, jednym pliku, w kilku plikach przypisanych do odpowiednich stron lub w poszczególnych plikach *.html. W naszych przykładach przyjęliśmy pierwsze rozwiązanie. Zmieniając tylko plik style.css, możemy w jednej chwili zmieniać wygląd całej witryny. Zrzuty ekranowe pokazują wygląd jednej strony (Kontakt) z szablonu witryny po kolejnych zmianach pliku style.css. Aby zaobserwować te zmiany bezpośrednio na szablonie, trzeba folder szablon z folderu WWW_szablon zapisać na dysku komputera i kolejno w znajdującym się w nim folderze css zamienić plik style.css na pliki umieszczone na płycie w folderach css1, css2, css3, css4, css5 i css6.

Wygląd strony dla pliku style.css z folderu css1.

Wygląd strony dla pliku style.css z folderu css2.

Wygląd strony dla pliku style.css z folderu css3.

Wygląd strony dla pliku style.css z folderu css4.

Wygląd strony dla pliku style.css z folderu css5.

Wygląd strony dla pliku style.css z folderu css6.

Poza zamianą pliku style.css w folderze css w żadnym z powyższych przypadków w kodzie XHTML strony kontakt.html niczego nie zmieniono. W prezentowanych przykładach została zachowana pełna szerokość ekranu przy rozdzielczości 1024 x 768. Nie trudno zauważyć, że dla interfejsu przyjęty został wzór z pierwszego przykładu.

<< Powrót [Do góry]