MENU

O upiekszaniu strony WWW

Każda osoba posiadająca własną stronę WWW zapewne wie, że nic tak nie rujnuje swojej zrobionej w pocie czoła strony jak przeciętny wygląd. W tym artykule chciałbym opisać proste metody upiększania strony. Nie mówię o skomplikowanych językach skryptowych, lecz o bardzo prostych zabiegach w arkuszu stylu CSS. Jak wiadomo kaskadowe arkusze stylów doskonale upiększają stronę internetową. 
Coraz więcej stron posiada kolorowe "strzałki" (tzw. Scrollbary) do przewijania zawartości ekranu. Aby uzyskać ten ciekawy efekt musimy najpierw wstawić znacznik <style>, następnie zacząć nowy element stylu o nazwie "BODY" i rozpoczynamy klamrę
"{". Załóżmy, że nasza witryna ma żółte tło, a więc aby uzyskać ciekawy efekt musimy kolorystykę ustawić tak, aby tło strzałki i całego pola było takiego samego koloru jak tło, a kontrast zapewni czarne obramowanie. Teraz przedstawię elementy, które powinny się znaleźć pomiędzy klamrami, najpierw opiszę każdą z nich, a później przedstawię końcowy efekt. Oto elementy: 

SCROLLBAR-FACE-COLOR: #ffff00; - tło strzałek, oraz scrollbara
SCROLLBAR-HIGHLIGHT-COLOR: #000000; - kolor siatki, czyli obramowanie
SCROLLBAR-SHADOW-COLOR: #000000; - kolor cienia
SCROLLBAR-3DLIGHT-COLOR: #ffff00; -kolor efektu 3-d
SCROLLBAR-ARROW-COLOR: #000000; -wypełnienie strzałeczki
SCROLLBAR-TRACK-COLOR: #ffff00; -kolor "ścieżki"

Oto cały kod:

<style>
BODY {
SCROLLBAR-FACE-COLOR: #FFFF00; 
SCROLLBAR-HIGHLIGHT-COLOR: #000000; 
SCROLLBAR-SHADOW-COLOR: #000000; 
SCROLLBAR-3DLIGHT-COLOR: #FFFF00; 
SCROLLBAR-ARROW-COLOR: #000000; 
SCROLLBAR-TRACK-COLOR: #FFFF00; 
}
</STYLE>

Drugim sposobem, który chciałbym zaprezentować jest efekt zmiany koloru, oraz ozdobienia linka po najechaniu na niego kursorem. Tu także posłużymy się stylami. Nasz link będzie miał kolor czerwony, będzie także podkreślony, oraz pogrubiony. Po najechaniu nad nim myszką zmieni się na kolor niebieski, oraz uzyska podkreślenie górne oraz dolne. Obydwa warianty będą miały rozmiar 10 oraz czcionkę Verdana. Dobrze, jak zwykle najpierw opiszę wszystkie elementy stylu.

A:link {..} -definiuje standartowy wygląd linka
A:hover {..} -definiuje wygląd linka po najechaniu myszką 
Font-family - określa czcionkę/czcionki
Font-size - rozmiar czcionki
Color- kolor czcionki
Text-decoration- określa dekorację
-underline -podkreślenie dolne
-overline -podkreślenie górne
Ostateczny wygląd naszego stylu:

<style>
A:link { font-family: Verdana; color: #FF0000; font-size: 10pt; text-decoration: underline; }

A:hover { font-family: Verdana; font-size: 10pt; color: #00FFFF; text-decoration: underline overline; }

</style> 

Jeśli chcesz zdefiniować parę rodzajów stylów dla różnych linków (np. menu), to szkielet będzie wyglądał następująco:

A.jakaśnazwa:link {...}
A.jakaśnazwa:hover {...}

Link na stronie będzie miał taką konstrukcję:

<a href="strona.html" class=jakaśnazwa>Strona</a>

Mam nadzieję, że moje porady przydały się wam w upiększaniu swojej strony.

 

Autor :
SSimon 
Ssimon@go2.pl

 

Contents copyright © 2000 - 2001, Krzysztof Dziewoński. All rights reserved.