Pożyteczne drobiazgi

Atrakcyjne wizualnie strony WWW są z reguły "ciężkie" od plików graficznych, czy flashowych animacji. Prezentujemy garść przykładów, pokazujących, że do uzyskania ciekawych efektów wystarczy jedynie kilka linii prostego kodu, który możesz wykorzystać na swojej stronie.

Atrakcyjne wizualnie strony WWW są z reguły "ciężkie" od plików graficznych, czy flashowych animacji. Prezentujemy garść przykładów, pokazujących, że do uzyskania ciekawych efektów wystarczy jedynie kilka linii prostego kodu, który możesz wykorzystać na swojej stronie.

Przykłady

Pobierz przykłady

Omawiane techniki, za wyjątkiem przykładu pierwszego, prezentują zagadnienia związane z dynamicznym HTML'em, czyli połączeniem możliwości JavaScriptu z kaskadowymi arkuszami stylów (CSS) i funkcjami obsługi zdarzeń. Dla ułatwienia pod nagłówkiem każdego z przykładów umieściliśmy ikonki symbolizujące najpopularniejsze przeglądarki internetowe. Informują one o tym, które programy obsługują omawianą technikę. Jednocześnie dobraliśmy je tak, żeby nie powodowały błędów i niepożądanych efektów w przeglądarkach nie obsługujących danej techniki.

W przykładach zastosowań DHTML znajdziesz wydruk kodu, który pozwoli na uzyskanie omawianego efektu. W tej wersji został on skrócony do minimum - nie zawiera np. znaczników otwierających dokument HTML. Na końcu artykułu znalazły się "pełne wersje" kodu, umieszczonego już we właściwym miejscu w dokumencie HTML. Przygotowaliśmy również pliki graficzne, pozwalające obejrzeć omawiane efekty.

Jeśli chcesz zastosować któryś z przykładów na swojej stronie, musisz umieścić kod w odpowiedniej części dokumentu HTML. W przypadku technik związanych z arkuszami stylów prezentowany kod musi znaleźć się w nagłówku, pomiędzy znacznikami HEAD. Drugim sposobem jest stworzenie zewnętrznego arkusza stylów w oddzielnym pliku. Musi on mieć rozszerzenie CSS. Dodatkowo musisz usunąć z kodu znaczniki STYLE, a w nagłówku dokumentu umieścić odwołanie do pliku CSS. Ma ono postać:

<LINK href="moj_styl.css" rel="stylesheet" type="text/css">

W wypadku technik związanych z JavaScriptem podaliśmy - do każdej oddzielnie - co należy zrobić z danym kodem.

Jeśli zdecydujesz się na przepisanie kodu z wydruków, koniecznie usuń numerację linii. Została ona wprowadzona dla wygody odwoływania się w tekście do konkretnych elementów.

Przykład 1 - Favicon

IE, Netscape, Opera

Favicon to nazwa grafiki, którą czasem możemy zobaczyć w Internet Explorerze po dodaniu strony WWW do menu "Ulubione". Widoczna jest również w innych przeglądarkach, np. Netscape 7, tym razem w polu adresu. Uzyskanie takiego efektu jest bardzo proste i sprowadza się do przygotowania grafiki o wymiarach 16x16 pikseli i zapisaniu jej w pliku o nazwie favicon w formacie ICO. Cała nazwa pliku musi brzmieć: favicon.ico Następnie należy umieścić taki plik na serwerze, w katalogu, w którym przechowujemy naszą stronę i gotowe.

Przykład 2 - wypunktowanie

IE, Netscape, Opera

Korzystając z arkuszy stylów możemy ożywić listy, umieszczając przed każdym punktem niewielki plik graficzny.

Korzystając z arkuszy stylów możemy ożywić listy, umieszczając przed każdym punktem niewielki plik graficzny.

Arkusze stylów pozwalają nam również na ożywienie list (wypunktowań) umieszczanych na stronie. Tradycyjnie kolejne punkty listy są wyróżnione myślnikiem, kółkiem czy inną prostą figurą geometryczną. Za pomocą CSS możemy zastąpić je grafiką.

W tym celu należy umieścić widoczny kod w nagłówku dokumentu HTML, pomiędzy znacznikami HEAD, lub w zewnętrznym arkuszu stylów. W linii 1 wpisujemy element, który chcemy sformatować. W naszym przykładzie jest to lista nienumerowana (UL). Możemy tu również wpisać znacznik listy numerowanej (OL). Linia 2 zawiera definicję stylu list-style-image, która informuje przeglądarkę, że przed każdy punktem listy musi pojawić się grafika. Nazwę pliku graficznego wraz z ścieżką dostępu należy podać w nawiasie.

1: <STYLE> UL {

2: list-style-image: url(strzalka.gif);

3: }

4: </STYLE>

Przykład 3 - Kolorowe paski

IE

Internet Explorer pozwala na pokolorowanie widocznych w oknie przeglądarki pasków przewijania. W ten sposób możemy je dopasować do kolorystyki strony i nadać całości bardziej atrakcyjny wygląd. Do uzyskania takiego efektu posłużymy się kaskadowymi arkuszami stylów (CSS).

Kolorowe paski przewijania mogą nadać naszej stronie ciekawszy wygląd. Niestety efekt ten widoczny będzie tylko w Internet Explorerze.

Kolorowe paski przewijania mogą nadać naszej stronie ciekawszy wygląd. Niestety efekt ten widoczny będzie tylko w Internet Explorerze.

Poniższy kod pozwolił na uzyskanie efektu widocznego na ilustracji. Należy go umieścić pomiędzy znacznikami HEAD, albo w zewnętrznym arkuszu stylów (wtedy bez znaczników STYLE). Linie od 2 do 8, w których określamy wygląd pasków, składają się z dwóch elementów: nazwy elementu paska przewijania oraz nazwy koloru, jaki chcemy mu nadać. Możemy zdefiniować, jak ma wyglądać suwak i tło strzałek (linia 2), tło paska (linia 3), "cień" (linia 4), "oświetlenie" (linia 5), obwódki suwaka (linie 6 i 7) oraz strzałki (linia 8). Obowiązują angielskie nazwy dla 16 podstawowych kolorów, których pełną listę umieściliśmy na dołączonej płycie. Kolor można określić podając jego wartość w systemie szesnastkowym według schematu: #FFFFFF (odpowiada kolorowi białemu).

1: <STYLE> BODY {

2: SCROLLBAR-FACE-COLOR: green;

3: SCROLLBAR-TRACK-COLOR: blue;

4: SCROLLBAR-DARKSHADOW-COLOR: blue;

5: SCROLLBAR-3DLIGHT-COLOR: blue;

6: SCROLLBAR-SHADOW-COLOR: black;

7: SCROLLBAR-HIGHLIGHT-COLOR: black;

8: SCROLLBAR-ARROW-COLOR: black;

9: }

10: </STYLE>

Przykład 4 - własny kursor

IE

Okazuje się, że za pomocą arkuszy stylów można nawet zmienić wygląd kursora. Sprawa jest stosunkowo prosta, największą trudność sprawi znalezienie odpowiedniego kursora.

Krok 1

Animowany banan zamiast tradycyjnego kursora. Pomysł niezbyt poważny, ale dobrze obrazuje, co możemy zrobić z kursorem myszy.

Animowany banan zamiast tradycyjnego kursora. Pomysł niezbyt poważny, ale dobrze obrazuje, co możemy zrobić z kursorem myszy.

W linii 1 kodu umieszczamy znacznik elementu strony, nad którym kursor zmieni swoją szatę. Tu widzimy znacznik BODY, co oznacza, że kursor będzie wyglądać po naszemu nad całym obszarem strony. Możemy również ograniczyć obszar występowania odmienionego kursora, wpisując tu takie znaczniki, jak P (akapit), A (odnośnik), czy IMG (grafiki).

Krok 2

Linia 2 zawiera polecenie cursor, po którym w nawiasie podajemy nazwę pliku zawierającego projekt kursora. Musi to być plik graficzny o rozszerzeniu CUR (statyczny kursor) lub ANI (animowany). Sporą ich liczbę znajdziemy w katalogu Windows\Cursors.

1: <STYLE> body {

2: cursor: url(banana.ani);

3: }

4: </STYLE>


Zobacz również