IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

Tworzenie stron WWW.

Ilustrowany przewodnik
Autor: Aleksandra Tomaszewska-Adamarek
ISBN: 83-246-0608-4
Format: A5, stron: 184

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Stwrz i opublikuj wasn stron WWW

Wykorzystaj edytory wizualne
Poznaj jzyk HTML i JavaScript
Umie stron w sieci
Trudno wyobrazi sobie wspczesny wiat bez internetu. Poczta elektroniczna,
Gadu-Gadu, Skype, sklepy internetowe i portale s dzi rwnie powszechne jak
kilkanacie lat temu radio i telewizja. Internet to potne medium informacyjne
i komunikacyjne. W dziesitkach milionw witryn internetowych firmy prezentuj swoj
ofert, organizacje polityczne swoje mniej lub bardziej niemoliwe do zrealizowania
programy, a osoby prywatne swoje zainteresowania, fotografie i coraz czciej
opowieci o wasnym yciu. W sieci mona znale firmy oferujce nieodpatnie konta,
na ktrych mona opublikowa witryn WWW. Tylko jak j zrobi?
W ksice Tworzenie stron WWW. Ilustrowany przewodnik znajdziesz odpowied na
to pytanie. Czytajc j, poznasz wszystkie zagadnienia niezbdne do tego, aby Twoja
witryna WWW pojawia si w sieci. Dowiesz si, w jaki sposb stworzy stron WWW,
korzystajc z dostpnych w sieci narzdzi lub piszc j samodzielnie w jzyku HTML.
Poznasz najpopularniejsze edytory suce do pisania kodu stron, nauczysz si
przygotowywa grafik na potrzeby sieci i rejestrowa swoj witryn w katalogach
i wyszukiwarkach.
Tworzenie wasnego blogu
Edytory kodu i narzdzia wizualne
Przetwarzanie grafiki
Elementy tekstowe
Tworzenie formularzy
Formatowanie stron za pomoc arkuszy stylw
Tworzenie elementw dynamicznych w JavaScript
Przygotowywanie animacji w programie Macromedia Flash
Rejestracja witryny w wyszukiwarkach
Przekonaj si, e zaprojektowanie witryny WWW

Spis treci
Wstp..............................................................................................................6
Rozdzia 1. Trzy, dwa, jeden START!.................................................................. 9
Blog........................................................................................................... 10
Serwisy stron WWW..................................................................................16
Rozdzia 2. Edytory WYSIWYG, czyli chopcy od brudnej roboty....................... 22
Edycja kodu...............................................................................................34
Szablony....................................................................................................40
Zarzdzanie szablonami...........................................................................43
Rozdzia 3. Grafika................................................................................................ 44
Dodawanie obrazkw do strony................................................................49
Tworzenie grafiki.......................................................................................54
Kadrowanie...............................................................................................56
Photoshop.............................................................................................56
Fireworks...............................................................................................56
Zmiana wielkoci i rozdzielczoci..............................................................57
Photoshop.............................................................................................57
Fireworks...............................................................................................57
Obracanie..................................................................................................58
Photoshop.............................................................................................58
Fireworks...............................................................................................58
Wyostrzanie i rozmazywanie.....................................................................59
Photoshop.............................................................................................59
Fireworks...............................................................................................59
Stosowanie filtrw efektw artystycznych.................................................61
Photoshop.............................................................................................61
Fireworks...............................................................................................61
Darmowa grafika.......................................................................................62
Tworzenie elementw rollover...................................................................64
Dzielenie obrazw na fragmenty...............................................................67

Tworzenie stron WWW. Ilustrowany przewodnik

Rozdzia 4. HTML jzyk Internetu...............................................................70

Podstawy i struktura dokumentu...............................................................71
Polecenia w nagwku...........................................................................73
Ciao dokumentu...................................................................................75
Nagwki................................................................................................75
Akapity...................................................................................................76
Cytaty....................................................................................................76
Listy.......................................................................................................77
cza.....................................................................................................78
Tabele....................................................................................................80
Formularze............................................................................................83
Pole INPUT.......................................................................................83
Pole SELECT....................................................................................84
Pole TEXTAREA...............................................................................84
Ramki....................................................................................................86
Adresowanie dokumentw wewntrz ramek.........................................88
Dodatkowe znaczniki.............................................................................88
Rozdzia 5. Co to znaczy mie styl, czyli sw kilka o CSS...........................90
Formatowanie . .........................................................................................98
Pionowe i poziome wyrwnanie tekstu..................................................98
Wcicie pierwszego wiersza akapitu.....................................................98
Odstpy.................................................................................................98
Dekoracja tekstu....................................................................................99
Mae i wielkie litery..............................................................................100
Formatowanie wygldu czcionki..........................................................100
Kolor i to.............................................................................................104
Marginesy............................................................................................105
Programy do tworzenia arkuszy stylw...................................................109
Rozdzia 6. Tworzenie dynamicznych stron WWW,
czyli JavaScript w akcji............................................................. 111
Typy danych............................................................................................ 114
Boolean............................................................................................... 114
Number................................................................................................ 114
String................................................................................................... 114
Null i Undefined....................................................................................... 115
Wyraenia i warunki................................................................................ 116
Inne operatory......................................................................................... 118
Wprowadzanie polece........................................................................... 119

Spis treci

Wprowadzanie polece w elemencie SCRIPT........................................120

czenie polece w funkcje....................................................................123
Sterowanie przepywem..........................................................................125
if...else.................................................................................................125
while....................................................................................................126
do...while.............................................................................................126
for........................................................................................................ 126
break i continue...................................................................................127
switch...................................................................................................127
Okna .......................................................................................................129
Tworzenie nowego okna przegldarki.....................................................131
Uruchamianie skryptw za pomoc zdarze...........................................133
Rozdzia 7. Animacja Flash................................................................................ 136
Przygotowywanie grafiki..........................................................................137
Proste obiekty geometryczne..............................................................139
Wypenienie.........................................................................................141
Linie.....................................................................................................144
Transformacje......................................................................................144
Skalowanie i obracanie.......................................................................145
Przeksztacenia numeryczne...............................................................146
Tekst....................................................................................................146
Animacje..............................................................................................147
Przesuwanie grafiki po ciece...........................................................152
Dwik.....................................................................................................156
Eksportowanie i publikowanie filmw......................................................158
Wskazwki pomocne w optymalizowaniu animacji Flash.......................166
Rozdzia 8. Promocja..................................................................................161
Wyszukiwarki internetowe.......................................................................162
Rejestracja..............................................................................................165
Element TITLE.....................................................................................165
Reklama..................................................................................................169
Katalogi internetowe................................................................................171
Ogoszenia prasowe................................................................................172
Poczta elektroniczna...............................................................................173
Banery reklamowe...................................................................................174
Agencje reklamowe.................................................................................176
Skorowidz....................................................................................................177

Rozdzia 5.

Co to znaczy mie styl,

czyli sw kilka o CSS

rzyciski, paski menu, zdjcia, obrazy

nieodczne czci stron WWW.
Wiesz ju, jak je tworzy i jak budowa
z nich cao za pomoc edytorw tekstowych oraz programw WYSIWYG.
Znasz podstawy jzyka HTML, a teraz
nadszed czas, aby wyjani, co to s te
kaskadowe arkusze stylw, ktre wielokrotnie pojawiay si w poprzednich rozdziaach. W Paryu lub Nowym Jorku
okrelenie mie styl oznacza, e chodzisz w butach od Gucciego, marynarkach od Armaniego i dinsach od Marca Jacobsa. Na szczcie w wirtualnym
wiecie styl kosztuje duo mniej. Aby
mie styl, wystarczy si zapozna ze
specyfikacj kaskadowych arkuszy stylw i stosowa t technologi do budowy
tworzonych stron.
Kaskadowe arkusze stylw (ang. cascading style sheets CSS) s stosowane
do formatowania stron i pozwalaj uzyska doskona kontrol nad wygldem
caego dokumentu. Sensowno korzystania z kaskadowych arkuszy stylw
nietrudno udowodni wyobra sobie
witryn skadajc si z duej liczby
stron WWW, nad ktr pracuje caa grupa programistw. Majc ju wyobrae-

90

nie o stopniu skomplikowania zadania

polegajcego na stworzeniu kilku stron,
na ktrych uywana bdzie ta sama stylistyka krj, kolor, wielko czcionki,
kolorystyka elementw czy wygld tabel, wyobra sobie, jak trudno jest zapanowa nad tymi wszystkimi elementami,
gdy masz do ogarnicia kilkaset stron
projektowanych przez kilka rnych
osb.
Korzystanie z kaskadowych arkuszy stylw oznacza rwnie oszczdno miejsca, poniewa styl kadego elementu jest
definiowany jednokrotnie w pliku definicji stylw, a nie przy kadym wystpieniu elementu na stronie, czyli w przypadku takich elementw jak na przykad
akapit czy nagwek kilkadziesit razy
na kadej stronie.

Wskazwka
Szczegowe informacje na temat kaskadowych arkuszy stylw znajdziesz pod
adresem:
http://www.w3.org/TR/REC-CSS 2

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Definicje stylw mona wprowadza do

opisu strony na kilka sposobw, ktre
teraz omwi. Pamitaj, e kady z tych
sposobw ma swoje wady i zalety, a wybr najlepszego sposobu zaley od preferencji programisty oraz sytuacji, w ktrej
styl ma by zastosowany.
Sposb 1.
<p style=color: blue; font-family:
Arial; font-size: 12pt; > Zawarto
akapitu itd. itd. itd. </p>

Definicja stylu jest umieszczona bezporednio w znaczniku. Zalet tego rozwizania jest prostota jego uycia. Styl jest
umieszczony wewntrz znacznika tak,
jak umieciby tam odpowiednie atrybuty znacznika. Wad jest konieczno
powtarzania tej definicji dla kadego
kolejnego znacznika umieszczanego na
stronie.

<body>
<p>Pierwszy akapit</p>
<p>Drugi akapit</p>
</body>
</html>

Definicja stylu jest umieszczona w nagwku dokumentu. Tak zdefiniowany

styl odnosi si do wszystkich znacznikw tego typu w dokumencie. W naszym
przykadzie styl dotyczy wszystkich akapitw, ktre zostan umieszczone wdokumencie. Ale jeli znajd si wnim
rwnie nagwki, obrazy czy tabele,
to definicja stylu nie bdzie si ju do
nich odnosi bd one wywietlane
zgodnie z domylnymi wartociami. Takie rozwizanie pozwala na jednokrotn
definicj stylu dla elementu w obrbie
strony. Jeli jednak zechcesz uy tego
samego stylu na innych stronach, to musisz go ponownie zdefiniowa w nagwkach tych stron.

Sposb 2.
<html>

Sposb 3.

<head>

<html>

<style type=text/css>

<head>

<link href=style.css
rel=stylesheet type=text/css>

{
color: blue;
font-family: Arial;
font-size: 12pt;
}
</style>
</head>

</head>
<body>
<p>Pierwszy akapit</p>
<p>Drugi akapit</p>
</body>
</html>

91

Tworzenie stron WWW. Ilustrowany przewodnik

Trzecim sposobem jest umieszczenie

definicji stylw w osobnym pliku o rozszerzeniu *.css, ktry jest powizany
z dokumentem strony poprzez uycie
znacznika <LINK>. Atrybut href wskazuje
ciek dostpu do pliku arkuszy stylw.
Wywoanie zewntrznego arkusza stylw znajduje si w nagwku i dotyczy
caej strony WWW, czyli wszystkich elementw danego typu.
W pliku zewntrznego arkusza stylw
znajduj si wycznie wpisy definiujce style okrelonych elementw. Do
tak zdefiniowanego arkusza mona podczy wiele stron witryny i wszystkie
bd miay zdefiniowane te same style.
Dziki temu w jednym miejscu moesz
definiowa i zarzdza wygldem caej
witryny.

za pomoc zewntrznego arkusza

stylw styl jest definiowany dla
danego typu elementu dla wszystkich
stron powizanych z arkuszem.

Filozofia kaskadowych arkuszy stylw

czy w sobie elastyczny sposb kontroli stylw stron WWW i poszczeglnych
elementw na stronach z odpowiedni
hierarchi stylw, ktra pozwala unika
konfliktw, jeli style elementw s definiowane na kilku poziomach. Sposb1.
(atrybut style) ma najwysz rang
whierarchii, sposb 2. (element STYLE) ma
wysz rang ni styl definiowany przez
zewntrzny arkusz stylw, ale nisz ni
atrybut style. Jak atwo si domyli, najnisz rang ma styl przypisywany przez
zewntrzny arkusz stylw. Takie rozwizanie pozwala unikn konfliktw, ktre

Arkusz stylw moe mie w tym wypadku posta:

p

Wskazwka

{
color: blue;
font-family: Arial;
font-size: 12pt;
}

Kaskadowe arkusze stylw nieprzypadkowo nosz tak nazw, bo jak wiesz,

style mona wprowadza na trzech rnych poziomach:

za pomoc atrybutu style (sposb 1.)

styl definiowany kolejno dla poszczeglnych elementw na stronie;
za pomoc elementu STYLE (sposb 2.)
styl elementu jest okrelany dla caej strony;

92

Pamitaj, e zarwno element <STYLE>,

jak i element <LINK> musz by umieszczone wewntrz nagwka strony.

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

mogyby wynikn, jeli na stronie uylibymy wszystkich trzech metod definiowania stylw. Hierarchia struktura
stylw przypomina stopnie wodospadu, std bierze si w nazwie okrelenie
kaskadowy.
Hierarchizacja stylw obejmuje nie tylko rne sposoby definiowania stylw,
ale rwnie sytuacj, gdy do jednej strony podczonych jest kilka rnych zewntrznych arkuszy stylw. Przegldarka
uwzgldnia w takim wypadku kolejno
wprowadzania stylw. Zewntrzny arkusz wprowadzony jako pierwszy dominuje nad arkuszem, ktry jest wprowadzony jako nastpny w kolejnoci.
Problem polega na tym, e jeli w zewntrznych arkuszach stylw wystpuj
wzajemne konflikty, trudno przewidzie
efekt graficzny, dopki strona nie zostanie wywietlona w przegldarce.
Do okrelenia wartoci atrybutw arkusze stylw wykorzystuj wzgldne i bezwzgldne jednostki miary oraz okrelone
definicje kolorw.
Jednostki wzgldne:

px piksele jednostka definiowana w oparciu o pojedyncze punkty

wietlne monitora;
em okrela zaleno pomidzy
wysokoci elementu a wielkoci
zdefiniowanej czcionki;
ex proporcje do wysokoci litery;
% procenty okrelenie wielkoci wzgldem wartoci domylnej.

Wskazwka
Istnieje take moliwo importowania arkusza stylw wewntrz innego arkusza stylw. W tym celu naley uy nastpujcej
konstrukcji:
@import url(style.css) ;
body {background-image: url(obraz.
gif) ;}
W takiej sytuacji importowany arkusz ma
niszy priorytet ni arkusz, do ktrego import nastpuje.

Jednostka em jest jednostk umown, ktra jest rwna innej zdefiniowanej wartoci.
Jeli ustalimy wielko czcionki na 12 pt,
to 1em bdzie rwny wanie tej ustalonej
wartoci, czyli 12 pt. Jeli okrel inny
atrybut jako 2 em, bdzie on dwukrotnoci wczeniej zdefiniowanej wartoci (czyli w tym wypadku bdzie to 24 pt).
Jednostki bezwzgldne:
in cale jednostka najczciej uywana w USA, rzadko uywana w Polsce
(1 in = 2,54 cm);
pt punkty wywodz si z typografii, gdzie s standardow jednostk miary (72 pt = 1 in);
cm centymetry jednostka pochodna systemu metrycznego, czsto stosowana w Europie;
mm milimetry jednostka pochodna
systemu metrycznego, czsto stosowana
w Europie;
pc pica jednostka wywodzca si
ztypografii (1 pica = 12 pt).

93

Tworzenie stron WWW. Ilustrowany przewodnik

W kaskadowych arkuszach stylw mona definiowa kolory poprzez uycie ich

nazw angielskich, jak blue czy yellow.
Wszystkie kolory, ktre nie zostay zdefiniowane przez uycie ich nazw, musz by okrelone przez wykorzystanie
modelu RGB. Polega on na przypisaniu
liczb cakowitych z przedziau od 0 do
255 kadej z wartoci skadowych palety
RGB. Na przykad color: rgb(0,12,255).
Kolor mona rwnie zapisa, definiujc
procent nasycenia danej barwy, na przykad color: rgb(10%, 50%, 0%).

Schemat konstrukcji stylu mona zapisa

w nastpujcy sposb:
selektor {cecha: warto; cecha: warto; itd.}

Kolor mona rwnie zapisa, stosujc

metod szesnastkow, na przykad color: #ff2c00.
black

#000000

green

#008000

silver

#C0C0C0

lime

#00FF00

gray

#808080

olive

#808000

white

#FFFFFF

yellow

#FFFF00

maroon #800000
navy

#000080

red

#FF0000

blue

#0000FF

purple

#800080

teal

#008080

fuchsia #FF00FF
aqua

#00FFFF

selektor znacznik jzyka

HTML, np. p to paragraf, h1 nagwek pierwszy, a table tabela.
cecha wpis okrelony specyfikacj kaskadowych arkuszy stylw.
Przykadowe waciwoci okrelone
przez specyfikacj kaskadowych arkuszy stylw to background-color, border-style, font-family itd. Warto
jest zazwyczaj przypisana do danej cechy, ale moe si zdarzy, e bdzie podobna dla kilku zupenie rnych cech.

Oglnie przyjmujemy, e selektor to dowolny znacznik jzyka HTML. Moemy jednak wyrni kilka rodzajw selektorw:

Selektory proste selektor bdcy

pojedynczym znacznikiem jzyka
HTML, odnoszcy si jedynie do tego
elementu. Jest to najczciej spotykany rodzaj selektora.
Selektor uniwersalny uywany,
gdy jakie cechy i wartoci s uniwersalne i powinny dotyczy wszystkich
elementw na stronie.
Potomek selektor zbudowany
woparciu o zalenoci panujce pomidzy poszczeglnymi znacznikami
jzyka HTML.

Przykady selektorw uniwersalnych:

*
{color: blue;}
BODY
{color: blue}

94

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Tak zapisane selektory dziaaj dla

wszystkich elementw strony nagwki, akapity, listy itd. bd miay kolor niebieski.
Przykady potomkw:
p
{color: blue}
p > span
{font-style: italic}

Kolor tekstu akapitu bdzie niebieski,

ale dodatkowo, jeli wewntrz akapitu
pojawi si znacznik <SPAN>, to otoczony
nim tekst bdzie pochylony.
Specyfikacja kaskadowych arkuszy stylw
dopuszcza rwnie moliwo grupowania selektorw. Jeli na przykad chciaby,
aby wszystkie listy, ktre wystpi w dokumencie, miay kolor czerwony, zamiast
definiowa styl dla kadego typu listy moesz zastosowa nastpujcy zapis:
ul, ol, dl
{

Aby utworzy akapit zawierajcy tekst

wkolorze czerwonym, musisz go wywoa przez uycie zdefiniowanej nazwy:
<p id=wazny> Bardzo wane informacje wyrnione kolorem czerwonym</p>

Pozostae akapity bdziesz tworzy, uywajc znacznika <p>.

Definicja identyfikatora moe rwnie
mie nastpujc posta:
#duzy_czerwony_tekst
{font-size: 20pt; color: red}

Identyfikator ten moesz wywoa w dowolnym znaczniku, korzystajc z atrybutu ID.

Uwaga
Deklaracja selektora ID musi by poprzedzona znakiem #, ale znaku tego nie uywa
si do odwoywania si do wartoci atrybutu ID.

color: red
}

Selektory ID pozwalaj okreli styl danego elementu na stronie, co pozwala

zrnicowa formatowanie elementw
tego samego typu na stronie. Wyobra
sobie, e wszystkie akapity na stronie
maj mie kolor granatowy, ale w jednym tekst powinien by czerwony, bo
zawiera on szczeglnie wane informacje. W tym celu moesz zdefiniowa style w nastpujcy sposb:
p {color: navy}

Kolejnym podstawowym elementem

specyfikacji kaskadowych arkuszy stylw jest klasa. Klas konstruuje si wnastpujcy sposb:
selektor.nazwa_klasy {cecha: warto}
Tak zdefiniowana klasa moe by wywoana tylko w znaczniku, dla ktrego
zostaa utworzona.
Aby wywoa klas w dokumencie, naley uy atrybutu CLASS.

p#wazne {color: red}

95

Tworzenie stron WWW. Ilustrowany przewodnik

Na przykad tworzc klas akapitu zawierajcego tekst w kolorze czerwonym,

naley wpisa definicj:
p.czerwony {color: red}

Aby wywoa t klas w dokumencie,

wpisz:
<p class=czerwony> Czerwony tekst
</p>

Uwaga
Pamitaj, aby definiujc klas, umieci
znak kropki midzy selektorem a nazw
klasy.

Dziedziczenie i kaskadowo to cechy,

ktrym kaskadowe arkusze stylw zawdziczaj swj dynamiczny rozwj
ipozycj. O kaskadowoci rozmawialimy ju wczeniej w tym rozdziale,
a teraz warto wspomnie kilka sw
odziedziczeniu.
Jeli chcesz okreli kolor tekstu w komrce tabeli, zrobisz to przez uycie
elementu TD. Moesz to rwnie zro-

96

bi przez uycie elementu TABLE i wtedy wszystkie komrki tabeli, zarwno

wwierszach, jak i w nagwkach, bd
miay okrelony dla tabeli kolor. Ale moesz to rwnie zrobi, definiujc kolor
tekstu dla elementu BODY. Wtedy nie tylko tekst w komrkach tabeli bdzie mia
okrelony kolor, ale rwnie tekst w akapitach, nagwkach, listach bdzie mia
okrelony kolor. Na tym wanie polega
dziedziczenie w kaskadowych arkuszach
stylw elementy nadrzdne domylnie przekazuj zdefiniowane waciwoci elementom, ktre znajduj si niej
w hierarchii.
W naszym przykadzie kolor niebieski
dla tekstu zdefiniowany w elemencie
BODY bdzie oznacza rwnie niebieski
kolor tekstu we wszystkich komrkach
tabeli. Jeli jednak okrelimy atrybut
elementu podrzdnego, to nie przekae
on tej waciwoci w gr hierarchii.
Wnaszym przykadzie niebieski tekst
zdefiniowany dla komrki tabeli nie
bdzie oznacza niebieskiego tekstu dla
wszystkich elementw wewntrz elementu BODY.

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Dziedziczenie dziaa domylnie, czyli dla tych elementw, dla ktrych nie
okrelono innej wartoci waciwoci
ni ta, ktr wskazano dla elementu nadrzdnego. Moemy zdefiniowa czerwony tekst wkomrkach tabeli, mimo e
dla elementu BODY zdefiniowano, e tekst
ma by niebieski.

<li><a href= > Misja</a></li>

Wikszo ludzi ogranicza wykorzystanie kaskadowych arkuszy stylw do

okrelania koloru tekstu w dokumencie
lub kroju czcionki w nagwkach. Jednak istniej rwnie ciekawsze zastosowania kaskadowych arkuszy stylw
mog one suy do tworzenia menu,
do ktrego wikszo projektantw zaangaowaaby JavaScript.

<ul>

<li><a href= > Historia</a></li>

<li><a href= > Kontakt</a></li>
</ul>
</li>
<li>Ofetra

<li><a href= > Outsourcing </a></li>

<li><a href= > Konsulting</a></li>
<li><a href= > Projektowanie aplikacji</a></li>
</ul>
</li>
</ul>

Menu utworzone bez uycia JavaScriptu,

a wycznie z wykorzystaniem kaskadowych arkuszy stylw
</body>
</html>
menu.css:
body{background-color: lightblue;
font-size: larger}
<html>
<head><link rel=stylesheet
href=menu.css type=text/css>
</head>
<body>
<ul id=menu>
<li>Firma

#menu { background-color: blue;

float: left }
#menu li {font-size: x-large; color:
yellow}
#menu li a {color: lime}
#menu li a hover {color: navy; background-color: white; font-size:
larger }

<ul>

97

Tworzenie stron WWW. Ilustrowany przewodnik

Formatowanie
Pionowe i poziome
wyrwnanie tekstu
Specyfikacja kaskadowych arkuszy stylw pozwala na kontrolowanie nastpujcych waciwoci tekstu:

wyrwnanie poziome i pionowe,

wcicie,
odstpy midzy wierszami,
odstpy midzy wyrazami,
odstpy midzy literami,
dekoracja tekstu,
przeksztacanie tekstu,
kontrola pustej przestrzeni.
do prawej text-align: left,
do lewej text-align: right,
wyrodkowanie text-align:
center,
wyjustowanie bloku tekstu textalign: justify,
do gry vertical-align: top,
do rodka vertical-align:middle,
do dou vertical-align: bottom,
indeks dolny vertical-align: sub,
indeks grny vetical-align: super.

Wcicie pierwszego
wiersza akapitu
Aby uzyska efekt wcicia pierwszego
wiersza w akapicie, naley uy polecenia text-indent i okreli gboko
tego wcicia w jednostkach wzgldnych
lub bezwzgldnych. Na przykad:
p {text-indent: 1 cm}

98

Odstpy
Za sterowanie odstpem pomidzy wierszami tekstu odpowiada polecenie lineheight, ktre moe przyjmowa wartoci
dodatnie i ujemne. Przy uyciu wartoci
dodatnich odstpy midzy wierszami si
zwikszaj, a gdy uyjesz wartoci ujemnych, tekst bdzie si zagszcza.

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Kaskadowe arkusze stylw pozwalaj

rwnie definiowa odstpy pomidzy
poszczeglnymi wyrazami tekstu. Waciwo ta jest okrelana przez parametr
word-spacing. Rwnie i w tym wypadku
moliwe jest podanie wartoci dodatnich
(zwikszenie odstpu midzy wyrazami)
i ujemnych (zmniejszenie odstpu midzy wyrazami).

Dekoracja tekstu
Uywajc kaskadowych arkuszy stylw,
twrcy stron mog kontrolowa wygld
tekstu za pomoc waciwoci text-decoration. Korzystajc z tego parametru,
mog oni sprawi, e tekst bdzie:
podkrelony text-decoration: underline,
przekrelony text-decoration: linethrough,
nadkrelony text-decoration: overline,

migajcy text-decoration: blink,

nie bdzie dekoracji tekstu text-decoration: none.
Korzystajc z tego parametru, moesz na
przykad wyczy podkrelenia wszystkich czy na stronie:
Twrcy kaskadowych arkuszy stylw
poszli jeszcze o krok dalej i pozwolili
projektantom stron wpywa nawet na
odstp liter w tekcie. Efekt ten mona
uzyska korzystajc z polecenia letterspacing.

A {text-decoration: none;}

Na przykad:
P {letter-spacing: 5pt}

99

Tworzenie stron WWW. Ilustrowany przewodnik

Mae i wielkie litery

Nie trudzc si zbytnio, moesz zamieni cay tekst na stronie na wielkie litery,
chocia oryginalnie w pliku jest on wpisany maymi literami. Na tak wygod
pozwala parametr text-transform. Moe
on przyjmowa nastpujce wartoci:

tylko due litery text-transform:

uppercase,
tylko mae litery text-transform:
lowercase,
kada pierwsza litera w sowie jest
zamieniana na wielk text-transform: capitalize,
bez zmian text-transform: none.

Zamiast wstawia do dokumentu twarde spacje, moesz uy parametru white-space, ktry przyjmuje nastpujce
wartoci:

normal spacje s redukowane do

jednej,
pre zachowanie dokadnej liczby
spacji znajdujcych si w tekcie,
nowrap blokuje automatyczne amanie wierszy.

Formatowanie
wygldu czcionki
Zgodnie ze specyfikacj kaskadowych
arkuszy stylw moliwe jest definiowane
nastpujcych wasnoci czcionki:

rodzaju atrybut font-family,

rozmiaru atrybut font-size,
wagi atrybut font-weight,
stylu atrybut font-style.

Pod pojciem rodzaju czcionki kryje si

rozrnienie pomidzy krojami czcionek
lub rodzinami czcionek. Za pomoc kaskadowych arkuszy stylw moesz okreli rodzaj czcionki, z ktrego chcesz korzysta przy wywietlaniu wskazanego
fragmentu tekstu. Konstrukcja stylu jest
budowana wedug nastpujcej definicji:
selektor {font-family: nazwa wasna
czcionki lub nazwa rodzajowa czcionki}
nazwa wasna czcionki np.
Arial, Times New Roman, Verdana; nazwa rodzajowa czcionki jedna zpiciu wartoci: serif, sans-serif,
monospace, cursive lub fantasy.
Czcionki szeryfowe (serif) charakteryzuj
si tym, e kada litera posiada ozdobniki zwane szeryfami. Dodatkowo czcionki
tego typu s proporcjonalne, gdy kada litera ma inn szeroko. Typowym
przedstawicielem tej grupy czcionek jest
czcionka Times New Roman.
Przykad czcionki szeryfowej (serif)

100

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Czcionki bezszeryfowe nie maj adnych

ozdobnikw na czcionce, ale rwnie s
proporcjonalne. Ten rodzaj czcionek jest
najczciej uywany do tworzenia tekstu
przeznaczonego do czytania (tre strony). Typowym przedstawicielem tej grupy czcionek jest czcionka Arial.

Czcionki typu fantasy to czcionki, ktrych

nie da si zakwalifikowa do adnego
zopisanych powyej rodzajw czcionek.
Przykad czcionki typu fantasy

Przykad czcionki bezszeryfowej (sansserif)

Czcionki tego typu s nieproporcjonalne,

co oznacza, e kada litera ma tak sam
szeroko. Ten rodzaj czcionek automatycznie kojarzy si z tekstem napisanym na maszynie do pisania. Typowym
przedstawicielem tej grupy czcionek jest
czcionka Courier New.
Przykad czcionki typu monospace

Czcionki tego typu charakteryzuj si

duym podobiestwem do pisma odrcznego, mog te zawiera rnego
rodzaju ozdobniki w postaci zawijasw.
Przykadem czcionki typu cursive moe
by czcionka Comic Sans MS.
Przykad czcionki typu cursive

Uwaga
Naley pamita, e czcionki zdefiniowane
w arkuszu stylw s pobierane z komputera uytkownika przegldajcego stron.
Jeli w systemie nie ma zainstalowanej
czcionki okrelonej przez arkusz stylw,
przegldarka zastpi j domyln czcionk dla danego systemu. Dlatego przy projektowaniu stron nie naley uywa zbyt
wymylnych i rzadko spotykanych krojw
czcionek. Warto trzyma si najpopularniejszych, jak Times, Arial czy Helvetica.

Za rozmiar czcionki uytej na stronie

odpowiada parametr font-size. Rozmiar
czcionki moe by podany w jednostkach
wzgldnych lub bezwzgldnych. Moesz
w zwizku z tym uywa nastpujcych
definicji rozmiarw czcionki:

font-size: 20 pt,
font-size: 12 px,
font-size: 200%.

Ciekawym rozwizaniem jest rwnie

moliwo korzystania ze zdefiniowanych wielkoci: xx-small, x-small, medium, large, x-large, xx-large.

101

Tworzenie stron WWW. Ilustrowany przewodnik

Dodatkowo istnieje rwnie moliwo

okrelenia wzgldnych rozmiarw za
pomoc opcji larger oraz smaller. Na
przykad:
BODY
{font-size: large;}
.wiekszy
{ font-size: larger;}
.mniejszy
{font-size: smaller;}

Pojcie wagi czcionki odnosi si do jej

gruboci, a do definiowania gruboci
czcionki uywany jest atrybut fontweight. Warto moe by okrelona za
pomoc liczb z przedziau od 100 do 900
oraz nazw bold, bolder, lighter i normal.
Styl czcionki jest definiowany przez parametr font-style, ktry moe przyjmowa jedn z dwch wartoci italic
(kursywa) lub oblique.

102

Kontrola nad wygldem list za pomoc kaskadowych arkuszy stylw polega

na sterowaniu waciwociami uytej
czcionki oraz okrelaniu typu listy, uytego punktora graficznego oraz definiowaniu pozycji elementw listy wzgldem punktora.
Typy list dzielimy na punktowane, numerowane i definicje. Od typu listy uzalenione s rodzaje punktorw, ktrych
moemy uy w licie. Dla list numerowanych punktorami mog by litery
(mae lub wielkie) oraz cyfry (arabskie
lub rzymskie). Dla list punktowanych
moemy uy takich punktorw jak
kwadrat, koo lub okrg.
Typ listy okrela waciwo list-style-type. Dla listy punktowanej moe on
przyjmowa wartoci:

disc punktor ma posta koa;

circle punktor ma posta okrgu;
square punktor ma posta
kwadratu.

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Dla listy numerowanej waciwo liststyle-type moe przyjmowa wartoci:

decimal odpowiada liczbom arabskim;

lower-roman odpowiada maym
liczbom rzymskim;
upper-roman odpowiada duym
liczbom rzymskim;
lower-alpha odpowiada maym literom;
upper-alpha odpowiada duym literom;
none brak wypunktowania.

Czasem projektanci chc zabysn zupenie now i niestandardow koncepcj

listy, i wanie na takie okazje twrcy kaskadowych arkuszy stylw przygotowali
parametr list-style-image, ktry pozwala uy jako punktora listy wskazanego pliku graficznego w formacie GIF,
JPG lub PNG.

Czasem moe rwnie wystpi konieczno regulacji pooenia tekstu

wzgldem punktora. Do tego celu suy
parametr list-style-position.
Parametr list-style-position przyjmuje nastpujce wartoci:

outside punktor znajduje si wyranie poza list;

inside punktor jest schowany
wtekcie listy.

Jeeli lista zawiera krtkie wpisy wkadym punkcie, to rnica pomidzy ustawieniami parametru list-style-position bdzie dla uytkownika trudna do
zauwaenia. Stosowanie tego parametru
jest zasadne, jeli kada pozycja listy
skada si z wicej ni jednego wiersza.

Naley jednak pamita, e obrazek nie

powinien by zbyt duy, gdy bdzie
psu efekt listy.

103

Tworzenie stron WWW. Ilustrowany przewodnik

Kolor i to
Kady element strony, ktry moesz
sformatowa przez uycie kaskadowych
arkuszy stylw, moe mie zdefiniowany
kolor i to. Jako to elementy mog mie
zdefiniowany kolor lub uycie wskazanego obrazu.
Aby przypisa kolor do elementu strony, naley uy parametru color i poda warto koloru przez uycie jego
zwyczajowej nazwy angielskiej, zapisu
palety rgb lub okrelenie wartoci szesnastkowej koloru. Szczegowe sposoby
definiowania kolorw znajdziesz wczeniej w tym rozdziale.

Za powielanie obrazu w obrbie elementu, dla ktrego zdefiniowane jest to

bdce obrazem, odpowiada parametr
background-repeat, ktry moe przyjmowa nastpujce wartoci:

no-repeat to nie bdzie powielane i zostanie wywietlone tylko jeden

raz;
repeat-x to bdzie powielane wyczenie w poziomie;
repeat-y to bdzie powielane wycznie w pionie;
repeat to bdzie powielane w pionie i w poziomie.

To elementu moesz okreli poprzez

podanie koloru ta:
selektor {background-color: warto;}
lub wskazanie obrazu, ktry ma zosta
uyty jako to obiektu:
selektor {background-image: URL
(obraz.gif)}
Obraz uyty jako to elementu strony
musi by zapisany w formacie JPG, GIF
lub PNG.
Jeli rozmiar obrazu uytego jako to
elementu jest mniejszy ni rozmiar tego
elementu, to obraz w tle bdzie powielany, aby wypeni cakowicie to. Jednak
za pomoc kaskadowych arkuszy stylw
moliwe jest wprowadzenie kontroli nad
powielaniem oraz zablokowanie przewijania ta.

Dodatkowo istnieje moliwo zatrzymania ta, aby nie przesuwao si wraz z zawartoci caej strony. Do tego celu uywa si parametru background-attachment
z ustawion wartoci fixed. Na przykad:
BODY
{background-image: url(tlo.gif);
background-attachment: fixed;
}

104

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Specyfikacja kaskadowych arkuszy stylw pozwala nie tylko zdefiniowa sposb powtarzania obrazu umieszczonego
w tle elementu, ale rwnie pozwala
okreli pozycj obrazu wzgldem okna
przegldarki lub jego lewego grnego
rogu. Waciwo t okrela parametr
background-position, ktry moe przyjmowa jedn z nastpujcych wartoci:

Jeli zdecydowae si na uycie wartoci liczbowych do okrelenia pooenia

ta, moesz stosowa wartoci wzgldne
lub bezwzgldne.
Szczegowy opis wartoci wzgldnych
i bezwzgldnych stosowanych w kaskadowych arkuszach stylw znajdziesz
wczeniej w tym rozdziale.

center to wyrodkowane,
left to z lewej strony okna,
right to z prawej strony okna,
top to znajduje si na grze okna,
bottom to znajduje si na dole
okna,
warto liczbowa okrela odlego ta od lewego grnego rogu
okna przegldarki.

Wartoci parametrw mona ze sob czy, dziki czemu mona na przykad

umieci to w prawym grnym rogu
okna przegldarki, stosujc zapis
background-position: right top

Marginesy
Podczas tworzenia stron WWW mona
definiowa dwa rodzaje marginesw:
zewntrzne i wewntrzne. Marginesy
zewntrzne strony to margines lewy, prawy, grny i dolny. Do okrelania szerokoci marginesu naley uy parametru
margin w poczeniu z okreleniem pooenia marginesu:

margin-left lewy margines,

margin-right prawy margines,
margin-top grny margines,
margin-bottom dolny margines.

105

Tworzenie stron WWW. Ilustrowany przewodnik

Parametr przyjmuje wartoci liczbowe

wzgldne i bezwzgldne. Marginesy s
definiowane w sposb niezaleny od
siebie (grny moe by inny ni dolny,
a prawy moe by inny ni lewy) i mog
przyjmowa wartoci ujemne.

Uwaga

Wskazwka
Jeli chcesz ustawi identyczne wartoci
dla wszystkich marginesw, moesz to zrobi, uywajc wycznie parametru margin, na przykad:
BODY
{
margin: 12 pt
}

Pamitaj, e marginesy rnych elementw si sumuj. Jeli na przykad ustawisz

lewy margines dla elementu BODY na 2 cm,
a nastpnie umiecisz na stronie tabel,
dla ktrej ustawisz lewy margines na 2 cm,
to lewa krawd tabeli zostanie odsunita
od lewej krawdzi strony o 4 cm.

Przykadowa definicja marginesw na

stronie:
BODY
{
margin-left: 1 cm;
margin-right: 2 cm;
margin-top: 1 cm;
margin-bottom: 3 cm;
}

Margines wewntrzny jest definiowany

za pomoc parametru padding wpoczeniu z okreleniem strony, ktrej dotyczy margines. Okrelenie strony naley poda w jzyku angielskim: right
(prawy), left (lewy), top (grny) i bottom (dolny).

106

Kaskadowe arkusze stylw pozwalaj

pozycjonowa na stronie dowolne elementy. Moesz to robi na trzy sposoby:

bezwzgldnie,
wzgldnie,
statycznie.

Pozycjonowanie bezwzgldne polega

na okrelaniu dokadnego pooenia
elementw wzgldem lewego grnego
rogu okna przegldarki. Przyjmuje si,
e lewy grny rg okna przegldarki ma
wsprzdne (0, 0). Elementy na stronie
pozycjonuje si przez podanie wartoci trzech parametrw: position, left
itop.

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Przykad pozycjonowania bezwzgldnego tabeli:

TABLE
{
position: absolute;
left: 100px;
top: 150px;

Dla wybranych elementw mona rwnie zdefiniowa ich wysoko i szeroko. Do tego celu w kaskadowych arkuszach stylw su parametry width
iheight. Korzystajc z pozycjonowania
i wymiarowania, moesz stworzy dwa
akapity tekstu, ktre bd umieszczone
obok siebie i w okrelonym miejscu na
stronie.

Przykad wymiarowania elementw za

pomoc kaskadowych arkuszy stylw:
<html>
<head>

Pozycjonowanie wzgldne definiuje

si rwnie przez podanie wartoci dla
parametrw left i top, ale waciwo
position przyjmuje warto relative.
Pozycjonowanie wzgldne odnosi si
do domylnego pooenia elementu na
stronie.

<style type=text/css>

Przykad definicji stylu dla pozycjonowania wzgldnego:

width: 200px;

DIV

p.drugi

{position: absolute;

position: absolute;

left: 250px;

top: 20px;

top: 20 px;

left: 20px;

width: 200px;

p.pierwszy
{position: absolute;
left: 20px;
top: 20 px;

107

Tworzenie stron WWW. Ilustrowany przewodnik

</style>
</head>
<body>
<p class=pierwszy> Zawarto
pierwszego akapitu, ...</p>
<p class=drugi> Zawarto drugiego
akapitu, ...</p>
</body>
</html>

Obecno i wygld obramowania takich

elementw jak tabele czy akapity mona
rwnie kontrolowa z wykorzystaniem
kaskadowych arkuszy stylw. Suy
do tego celu parametr border uywany
wpoczeniu z okreleniem strony elementu, ktrej dotyczy definicja obramowania, np. border-left lub border-top.
Parametrowi naley przypisa warto solid, aby okreli, e obramowanie dla elementu ma by widoczne.
Naprzykad:
TABLE{ border-left: solid; borderright: solid; border-top: solid; border-bottom: solid}

lub
TABLE {border: solid;}

Parametr border-style moe przyjmowa nastpujce wartoci:

none, hidden ramka jest niewidoczna;

dotted ramka skada si z linii
wykropkowanej;
solid ramka skada si z linii
cigej;
double ramka skada si z linii
podwjnej;
groove; ridge, outset ramka daje
efekt wypukoci elementu;
inset ramka daje efekt wklsoci elementu.

Grubo obramowania elementw moe

mie rn warto i jest definiowana
przez uycie parametru border-width.
Rwnie w przypadku tego parametru
moemy definiowa grubo krawdzi
dla kadej strony elementu osobno, na
przykad border-bottom-width.
Kolor obramowania jest definiowany
przez uycie parametru border-color.
Jeli chcesz, aby kada z krawdzi elementu miaa inny kolor, moesz zastosowa nastpujcy kod:
P{

Kolejnym parametrem okrelajcym
wygld obramowania jest jego styl definiowany za pomoc parametru borderstyle.

border-top-color: blue;

Parametr boder-style moe by okrelony dla caego elementu lub tylko dla niektrych jego stron, na przykad borderleft-style lub border-top-style.

border-style: double;

108

border-bottom-color: navy;
border-left-color: #FF0080;
border-right-color: #008080;

Rozdzia 5.

Co to znaczy mie styl, czyli sw kilka o CSS

Programy do tworzenia arkuszy stylw

Mam dla Ciebie dobr wiadomo nie
zawsze bdziesz musia tworzy kaskadowe arkusze stylw samodzielnie, poniewa
istniej programy, ktre zrobi za Ciebie
brudn robot. W takie funkcje wyposaone s dobre edytory WYSIWYG (jak
na przykad Dreamweaver, oczym m-

wilimy szczegowo wrozdziale2.),

ale programy do tworzenia arkuszy
stylw moesz rwnie pobra zsieci. Do takich programw naley Style
Master, ktrego testow wersj moesz
pobra pod adresem http://www.westciv.
com/style_master.

109

Tworzenie stron WWW. Ilustrowany przewodnik

Jeli zainteresowaa Ci tematyka kaskadowych arkuszy stylw, moesz pogbi swoj wiedz, odwiedzajc witryny
powicone tematyce kaskadowych arkuszy stylw.
http://www.csszengarden.com

http://www.kurshtml.boo.pl/

110

http://www.w3schools.com/css/