Stwórz i opublikuj własną stronę WWW * Wykorzystaj edytory wizualne * Poznaj język HTML i JavaScript * Umieść stronę w sieci Trudno wyobrazić sobie współczesny świat bez internetu. Poczta elektroniczna, Gadu-Gadu, Skype, sklepy internetowe i portale są dziś równie powszechne jak kilkanaście lat temu radio i telewizja. Internet to potężne medium informacyjne i komunikacyjne. W dziesiątkach milionów witryn internetowych firmy prezentują swoją ofertę, organizacje polityczne -- swoje mniej lub bardziej niemożliwe do zrealizowania programy, a osoby prywatne -- swoje zainteresowania, fotografie i coraz częściej opowieści o własnym życiu. W sieci można znaleźć firmy oferujące nieodpłatnie konta, na których można opublikować witrynę WWW. Tylko jak ją zrobić? W książce "Tworzenie stron WWW. Ilustrowany przewodnik" znajdziesz odpowiedź na to pytanie. Czytając ją, poznasz wszystkie zagadnienia niezbędne do tego, aby Twoja witryna WWW pojawiła się w sieci. Dowiesz się, w jaki sposób stworzyć stronę WWW, korzystając z dostępnych w sieci narzędzi lub pisząc ją samodzielnie w języku HTML. Poznasz najpopularniejsze edytory służące do pisania kodu stron, nauczysz się przygotowywać grafikę na potrzeby sieci i rejestrować swoją witrynę w katalogach i wyszukiwarkach. * Tworzenie własnego blogu * Edytory kodu i narzędzia wizualne * Przetwarzanie grafiki * Elementy tekstowe * Tworzenie formularzy * Formatowanie stron za pomocą arkuszy stylów * Tworzenie elementów dynamicznych w JavaScript * Przygotowywanie animacji w programie Macromedia Flash * Rejestracja witryny w wyszukiwarkach Przekonaj się, że zaprojektowanie witryny WWW leży w zasięgu Twoich możliwości.

1. IDZ DO
PRZYK£ADOWY ROZDZIA£
SPIS TREœCI
Tworzenie stron WWW.
Ilustrowany przewodnik
KATALOG KSI¥¯EK Autor: Aleksandra Tomaszewska-Adamarek
ISBN: 83-246-0608-4
KATALOG ONLINE Format: A5, stron: 184
ZAMÓW DRUKOWANY KATALOG
TWÓJ KOSZYK
Stwórz i opublikuj w³asn¹ stronê WWW
DODAJ DO KOSZYKA • Wykorzystaj edytory wizualne
• Poznaj jêzyk HTML i JavaScript
• Umieœæ stronê w sieci
CENNIK I INFORMACJE Trudno wyobraziæ sobie wspó³czesny œwiat bez internetu. Poczta elektroniczna,
Gadu-Gadu, Skype, sklepy internetowe i portale s¹ dziœ równie powszechne jak
ZAMÓW INFORMACJE kilkanaœcie lat temu radio i telewizja. Internet to potê¿ne medium informacyjne
O NOWOœCIACH i komunikacyjne. W dziesi¹tkach milionów witryn internetowych firmy prezentuj¹ swoj¹
ofertê, organizacje polityczne — swoje mniej lub bardziej niemo¿liwe do zrealizowania
ZAMÓW CENNIK programy, a osoby prywatne — swoje zainteresowania, fotografie i coraz czêœciej
opowieœci o w³asnym ¿yciu. W sieci mo¿na znaleŸæ firmy oferuj¹ce nieodp³atnie konta,
na których mo¿na opublikowaæ witrynê WWW. Tylko jak j¹ zrobiæ?
CZYTELNIA W ksi¹¿ce „Tworzenie stron WWW. Ilustrowany przewodnik” znajdziesz odpowiedŸ na
to pytanie. Czytaj¹c j¹, poznasz wszystkie zagadnienia niezbêdne do tego, aby Twoja
FRAGMENTY KSI¥¯EK ONLINE witryna WWW pojawi³a siê w sieci. Dowiesz siê, w jaki sposób stworzyæ stronê WWW,
korzystaj¹c z dostêpnych w sieci narzêdzi lub pisz¹c j¹ samodzielnie w jêzyku HTML.
Poznasz najpopularniejsze edytory s³u¿¹ce do pisania kodu stron, nauczysz siê
przygotowywaæ grafikê na potrzeby sieci i rejestrowaæ swoj¹ witrynê w katalogach
i wyszukiwarkach.
• Tworzenie w³asnego blogu
• Edytory kodu i narzêdzia wizualne
• Przetwarzanie grafiki
• Elementy tekstowe
• Tworzenie formularzy
• Formatowanie stron za pomoc¹ arkuszy stylów
Wydawnictwo Helion • Tworzenie elementów dynamicznych w JavaScript
ul. Koœciuszki 1c • Przygotowywanie animacji w programie Macromedia Flash
44-100 Gliwice • Rejestracja witryny w wyszukiwarkach
tel. 032 230 98 63 Przekonaj siê, ¿e zaprojektowanie witryny WWW
e-mail: helion@helion.pl

2. Spis treści
Wstęp..............................................................................................................6
Rozdział 1. Trzy,.dwa,.jeden….START!................................................................. 9
.
Blog........................................................................................................... 10
Serwisy.stron.WWW. ................................................................................16
.
Rozdział 2. Edytory WYSIWYG, czyli chłopcy od brudnej roboty....................... 22
Edycja kodu...............................................................................................4
Szablony. ..................................................................................................40
.
Zarządzanie szablonami...........................................................................4
Rozdział 3. Grafika................................................................................................ 44
Dodawanie obrazków do strony................................................................49
Tworzenie grafiki.......................................................................................54
Kadrowanie...............................................................................................56
Photoshop.............................................................................................56
Fireworks...............................................................................................56
Zmiana wielkości i rozdzielczości..............................................................57
Photoshop.............................................................................................57
Fireworks...............................................................................................57
Obracanie..................................................................................................58
Photoshop.............................................................................................58
Fireworks...............................................................................................58
Wyostrzanie i rozmazywanie.....................................................................59
Photoshop.............................................................................................59
Fireworks...............................................................................................59
Stosowanie filtrów efektów artystycznych.................................................61
Photoshop.............................................................................................61
Fireworks...............................................................................................61
Darmowa grafika.......................................................................................62
Tworzenie elementów rollover...................................................................64
Dzielenie obrazów na fragmenty...............................................................67

3. Tworzenie stron WWW. Ilustrowany przewodnik
Rozdział 4. HTML – język Internetu. .............................................................70
.
Podstawy i struktura dokumentu...............................................................71
Polecenia w nagłówku...........................................................................7
Ciało dokumentu...................................................................................75
Nagłówki................................................................................................75
Akapity. .................................................................................................76
.
Cytaty....................................................................................................76
Listy.......................................................................................................77
Łącza.....................................................................................................78
Tabele....................................................................................................80
Formularze............................................................................................8
Pole.INPUT.......................................................................................8
Pole.SELECT....................................................................................84
Pole.TEXTAREA...............................................................................84
Ramki....................................................................................................86
Adresowanie dokumentów wewnątrz ramek.........................................88
Dodatkowe.znaczniki. ...........................................................................88
.
Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS...........................90
Formatowanie . .........................................................................................98
Pionowe i poziome wyrównanie tekstu. ................................................98
.
Wcięcie pierwszego wiersza akapitu.....................................................98
Odstępy.................................................................................................98
Dekoracja tekstu. ..................................................................................99
.
Małe i wielkie litery..............................................................................100
Formatowanie wyglądu czcionki. ........................................................100
.
Kolor i tło.............................................................................................104
Marginesy............................................................................................105
Programy do tworzenia arkuszy stylów...................................................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
Wyrażenia i warunki................................................................................ 116
Inne operatory......................................................................................... 118
Wprowadzanie poleceń........................................................................... 119
4

4. Spis treści
Wprowadzanie poleceń w elemencie SCRIPT........................................120
Łączenie poleceń w funkcje....................................................................12
Sterowanie przepływem..........................................................................125
if...else.................................................................................................125
while....................................................................................................126
do...while.............................................................................................126
for........................................................................................................ 126
break i continue...................................................................................127
switch..................................................................................................127
.
Okna........................................................................................................129
Tworzenie nowego okna przeglądarki.....................................................11
Uruchamianie skryptów za pomocą zdarzeń. .........................................1
.
Rozdział 7. Animacja Flash................................................................................ 16
Przygotowywanie grafiki..........................................................................17
Proste obiekty geometryczne..............................................................19
Wypełnienie.........................................................................................141
Linie.....................................................................................................144
Transformacje. ....................................................................................144
.
Skalowanie i obracanie.......................................................................145
Przekształcenia numeryczne. .............................................................146
.
Tekst....................................................................................................146
Animacje. ............................................................................................147
.
Przesuwanie grafiki po ścieżce...........................................................152
Dźwięk.....................................................................................................156
Eksportowanie i publikowanie filmów......................................................158
Wskazówki pomocne w optymalizowaniu animacji Flash.......................166
Rozdział 8. Promocja..................................................................................161
Wyszukiwarki internetowe.......................................................................162
Rejestracja..............................................................................................165
Element TITLE....................................................................................165
.
Reklama..................................................................................................169
Katalogi.internetowe................................................................................171
Ogłoszenia prasowe................................................................................172
Poczta.elektroniczna...............................................................................17
Banery reklamowe. .................................................................................174
.
Agencje reklamowe.................................................................................176
Skorowidz....................................................................................................177
5

5. Rozdział 5.
Co to znaczy mieć styl,
czyli słów kilka o CSS
P rzyciski, paski menu, zdjęcia, obrazy
— nieodłączne części stron WWW.
Wiesz już, jak je tworzyć i jak budować
nie o stopniu skomplikowania zadania
polegającego na stworzeniu kilku stron,
na których używana będzie ta sama sty-
z nich całość za pomocą edytorów teks- listyka — krój, kolor, wielkość czcionki,
towych oraz programów WYSIWYG. kolorystyka elementów czy wygląd ta-
Znasz podstawy języka HTML, a teraz bel, wyobraź sobie, jak trudno jest zapa-
nadszedł czas, aby wyjaśnić, co to są te nować nad tymi wszystkimi elementami,
kaskadowe arkusze stylów, które wielo- gdy masz do ogarnięcia kilkaset stron
krotnie pojawiały się w poprzednich roz- projektowanych przez kilka różnych
działach. W Paryżu lub Nowym Jorku osób.
określenie „mieć styl” oznacza, że cho- Korzystanie z kaskadowych arkuszy sty-
dzisz w butach od Gucciego, marynar- lów oznacza również oszczędność miej-
kach od Armaniego i dżinsach od Mar- sca, ponieważ styl każdego elementu jest
ca Jacobsa. Na szczęście w wirtualnym definiowany jednokrotnie w pliku defi-
świecie styl kosztuje dużo mniej. Aby nicji stylów, a nie przy każdym wystą-
mieć styl, wystarczy się zapoznać ze pieniu elementu na stronie, czyli w przy-
specyfikacją kaskadowych arkuszy sty- padku takich elementów jak na przykład
lów i stosować tę technologię do budowy akapit czy nagłówek kilkadziesiąt razy
tworzonych stron. na każdej stronie.
Kaskadowe arkusze stylów (ang. casca-
ding style sheets — CSS) są stosowane
do formatowania stron i pozwalają uzy-
skać doskonałą kontrolę nad wyglądem
całego dokumentu. Sensowność korzy- Wskazówka
stania z kaskadowych arkuszy stylów
nietrudno udowodnić — wyobraź sobie Szczegółowe informacje na temat kaska-
dowych arkuszy stylów znajdziesz pod
witrynę składającą się z dużej liczby
adresem:
stron WWW, nad którą pracuje cała gru- http://www.w3.org/TR/REC-CSS 2
pa programistów. Mając już wyobraże-
90

6. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Definicje stylów można wprowadzać do body
opisu strony na kilka sposobów, które pPierwszy akapit/p
teraz omówię. Pamiętaj, że każdy z tych
pDrugi akapit/p
sposobów ma swoje wady i zalety, a wy-
bór najlepszego sposobu zależy od prefe- /body
rencji programisty oraz sytuacji, w której /html
styl ma być zastosowany.
Definicja stylu jest umieszczona w na-
główku dokumentu. Tak zdefiniowany
Sposób 1. styl odnosi się do wszystkich znaczni-
p style=”color: blue; font-family:
ków tego typu w dokumencie. W naszym
Arial; font-size: 12pt; ” Zawartość
przykładzie styl dotyczy wszystkich aka-
akapitu itd. itd. itd. /p pitów, które zostaną umieszczone w do-
kumencie. Ale jeśli znajdą się w nim
Definicja stylu jest umieszczona bezpo- również nagłówki, obrazy czy tabele,
średnio w znaczniku. Zaletą tego rozwią- to definicja stylu nie będzie się już do
zania jest prostota jego użycia. Styl jest nich odnosić — będą one wyświetlane
umieszczony wewnątrz znacznika tak, zgodnie z domyślnymi wartościami. Ta-
jak umieściłbyś tam odpowiednie atry- kie rozwiązanie pozwala na jednokrotną
buty znacznika. Wadą jest konieczność definicję stylu dla elementu w obrębie
powtarzania tej definicji dla każdego strony. Jeśli jednak zechcesz użyć tego
kolejnego znacznika umieszczanego na samego stylu na innych stronach, to mu-
stronie. sisz go ponownie zdefiniować w nagłów-
kach tych stron.
Sposób 2.
html Sposób 3.
head html
style type=”text/css” head
p link href=”style.css”
rel=”stylesheet” type=”text/css”
{
/head
color: blue;
body
font-family: Arial;
pPierwszy akapit/p
font-size: 12pt;
pDrugi akapit/p
}
/body
/style
/html
/head
91

7. Tworzenie stron WWW. Ilustrowany przewodnik
Trzecim sposobem jest umieszczenie
definicji stylów w osobnym pliku o roz-
• za pomocą zewnętrznego arkusza
stylów — styl jest definiowany dla
szerzeniu *.css, który jest powiązany danego typu elementu dla wszystkich
z dokumentem strony poprzez użycie stron powiązanych z arkuszem.
znacznika LINK. Atrybut href wskazuje
ścieżkę dostępu do pliku arkuszy stylów. Filozofia kaskadowych arkuszy stylów
Wywołanie zewnętrznego arkusza sty- łączy w sobie elastyczny sposób kontro-
lów znajduje się w nagłówku i dotyczy li stylów stron WWW i poszczególnych
całej strony WWW, czyli wszystkich ele- elementów na stronach z odpowiednią
mentów danego typu. hierarchią stylów, która pozwala unikać
konfliktów, jeśli style elementów są de-
W pliku zewnętrznego arkusza stylów finiowane na kilku poziomach. Sposób 1.
znajdują się wyłącznie wpisy definiu- (atrybut style) ma najwyższą rangę
jące style określonych elementów. Do w hierarchii, sposób 2. (element STYLE) ma
tak zdefiniowanego arkusza można pod- wyższą rangę niż styl definiowany przez
łączyć wiele stron witryny i wszystkie zewnętrzny arkusz stylów, ale niższą niż
będą miały zdefiniowane te same style. atrybut style. Jak łatwo się domyślić, naj-
Dzięki temu w jednym miejscu możesz niższą rangę ma styl przypisywany przez
definiować i zarządzać wyglądem całej zewnętrzny arkusz stylów. Takie rozwią-
witryny. zanie pozwala uniknąć konfliktów, które
Arkusz stylów może mieć w tym wypad-
ku postać:
p
{
Wskazówka
color: blue; Pamiętaj, że zarówno element STYLE,
jak i element LINK muszą być umiesz-
font-family: Arial; czone wewnątrz nagłówka strony.
font-size: 12pt;
}
Kaskadowe arkusze stylów nieprzypad-
kowo noszą taką nazwę, bo jak wiesz,
style można wprowadzać na trzech róż-
nych poziomach:
• za pomocą atrybutu style (sposób 1.)
— styl definiowany kolejno dla po-
•
szczególnych elementów na stronie;
za pomocą elementu STYLE (sposób 2.)
— styl elementu jest określany dla ca-
łej strony;
92

8. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
mogłyby wyniknąć, jeśli na stronie uży-
libyśmy wszystkich trzech metod defi-
niowania stylów. Hierarchia — struktura Wskazówka
stylów — przypomina stopnie wodospa-
du, stąd bierze się w nazwie określenie Istnieje także możliwość importowania ar-
kaskadowy. kusza stylów wewnątrz innego arkusza sty-
lów. W tym celu należy użyć następującej
Hierarchizacja stylów obejmuje nie tyl- konstrukcji:
ko różne sposoby definiowania stylów, @import url(style.css) ;
ale również sytuację, gdy do jednej stro- body {background-image: url(obraz.
ny podłączonych jest kilka różnych ze- gif) ;}
wnętrznych arkuszy stylów. Przeglądarka W takiej sytuacji importowany arkusz ma
niższy priorytet niż arkusz, do którego im-
uwzględnia w takim wypadku kolejność
port następuje.
wprowadzania stylów. Zewnętrzny ar-
kusz wprowadzony jako pierwszy do-
minuje nad arkuszem, który jest wpro- Jednostka em jest jednostką umowną, któ-
wadzony jako następny w kolejności. ra jest równa innej zdefiniowanej wartości.
Problem polega na tym, że jeśli w ze- Jeśli ustalimy wielkość czcionki na 12 pt,
wnętrznych arkuszach stylów występują to 1em będzie równy właśnie tej ustalonej
wzajemne konflikty, trudno przewidzieć wartości, czyli 12 pt. Jeśli określę inny
efekt graficzny, dopóki strona nie zosta- atrybut jako 2 em, będzie on dwukrotnoś-
nie wyświetlona w przeglądarce. cią wcześniej zdefiniowanej wartości (czy-
Do określenia wartości atrybutów arku- li w tym wypadku będzie to 24 pt).
sze stylów wykorzystują względne i bez- Jednostki bezwzględne:
względne jednostki miary oraz określone in — cale — jednostka najczęściej uży-
definicje kolorów. wana w USA, rzadko używana w Polsce
Jednostki względne: (1 in = 2,54 cm);
• px — piksele — jednostka definio-
wana w oparciu o pojedyncze punkty
pt — punkty — wywodzą się z typogra-
fii, gdzie są standardową jednostką mia-
ry (72 pt = 1 in);
•
świetlne monitora;
em — określa zależność pomiędzy cm — centymetry — jednostka pochod-
wysokością elementu a wielkością na systemu metrycznego, często stoso-
•
zdefiniowanej czcionki; wana w Europie;
•
ex — proporcje do wysokości litery; mm — milimetry — jednostka pochodna
% — procenty — określenie wielko- systemu metrycznego, często stosowana
ści względem wartości domyślnej. w Europie;
pc — pica — jednostka wywodząca się
z typografii (1 pica = 12 pt).
93

9. Tworzenie stron WWW. Ilustrowany przewodnik
W kaskadowych arkuszach stylów moż- Schemat konstrukcji stylu można zapisać
na definiować kolory poprzez użycie ich w następujący sposób:
nazw angielskich, jak blue czy yellow. selektor {cecha: wartość; cecha: war-
Wszystkie kolory, które nie zostały zde- tość; itd.}
•
finiowane przez użycie ich nazw, mu-
szą być określone przez wykorzystanie selektor — znacznik języka
modelu RGB. Polega on na przypisaniu HTML, np. p to paragraf, h1 — na-
•
liczb całkowitych z przedziału od 0 do główek pierwszy, a table — tabela.
255 każdej z wartości składowych palety cecha — wpis określony specyfi-
RGB. Na przykład color: rgb(0,12,255). kacją kaskadowych arkuszy stylów.
Kolor można również zapisać, definiując Przykładowe właściwości określone
procent nasycenia danej barwy, na przy- przez specyfikację kaskadowych arku-
kład color: rgb(10%, 50%, 0%). szy stylów to background-color, bor-
der-style, font-family itd. Wartość
Kolor można również zapisać, stosując jest zazwyczaj przypisana do danej ce-
metodę szesnastkową, na przykład co- chy, ale może się zdarzyć, że będzie po-
lor: #ff2c00.
dobna dla kilku zupełnie różnych cech.
black #000000
green #008000 Ogólnie przyjmujemy, że selektor to dowol-
ny znacznik języka HTML. Możemy jed-
silver #C0C0C0 nak wyróżnić kilka rodzajów selektorów:
lime
gray
#00FF00
#808080
• Selektory proste — selektor będący
pojedynczym znacznikiem języka
HTML, odnoszący się jedynie do tego
olive #808000
elementu. Jest to najczęściej spotyka-
white #FFFFFF
•
ny rodzaj selektora.
yellow #FFFF00 Selektor uniwersalny — używany,
gdy jakieś cechy i wartości są uniwer-
maroon #800000
salne i powinny dotyczyć wszystkich
navy #000080
•
elementów na stronie.
red #FF0000 Potomek — selektor zbudowany
w oparciu o zależności panujące po-
blue #0000FF
między poszczególnymi znacznikami
purple #800080 języka HTML.
teal #008080
Przykłady selektorów uniwersalnych:
fuchsia #FF00FF
*
aqua #00FFFF
{color: blue;}
BODY
{color: blue}
94

10. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Tak zapisane selektory działają dla Aby utworzyć akapit zawierający tekst
wszystkich elementów strony — na- w kolorze czerwonym, musisz go wywo-
główki, akapity, listy itd. będą miały ko- łać przez użycie zdefiniowanej nazwy:
lor niebieski. p id=”wazny” Bardzo ważne informa-
Przykłady potomków: cje wyróżnione kolorem czerwonym/p
p Pozostałe akapity będziesz tworzyć, uży-
{color: blue}
wając znacznika p.
p span
Definicja identyfikatora może również
mieć następującą postać:
{font-style: italic}
#duzy_czerwony_tekst
Kolor tekstu akapitu będzie niebieski,
{font-size: 20pt; color: red}
ale dodatkowo, jeśli wewnątrz akapitu
pojawi się znacznik SPAN, to otoczony Identyfikator ten możesz wywołać w do-
nim tekst będzie pochylony. wolnym znaczniku, korzystając z atrybu-
Specyfikacja kaskadowych arkuszy stylów tu ID.
dopuszcza również możliwość grupowa-
nia selektorów. Jeśli na przykład chciałbyś,
aby wszystkie listy, które wystąpią w do-
kumencie, miały kolor czerwony, zamiast
Uwaga
definiować styl dla każdego typu listy mo-
żesz zastosować następujący zapis: Deklaracja selektora ID musi być poprze-
ul, ol, dl dzona znakiem #, ale znaku tego nie używa
się do odwoływania się do wartości atry-
{ butu ID.
color: red
}
Selektory ID pozwalają określić styl da- Kolejnym podstawowym elementem
nego elementu na stronie, co pozwala specyfikacji kaskadowych arkuszy sty-
zróżnicować formatowanie elementów lów jest klasa. Klasę konstruuje się w na-
tego samego typu na stronie. Wyobraź stępujący sposób:
sobie, że wszystkie akapity na stronie
selektor.nazwa_klasy {cecha: wartość}
mają mieć kolor granatowy, ale w jed-
nym tekst powinien być czerwony, bo Tak zdefiniowana klasa może być wy-
zawiera on szczególnie ważne informa- wołana tylko w znaczniku, dla którego
cje. W tym celu możesz zdefiniować sty- została utworzona.
le w następujący sposób: Aby wywołać klasę w dokumencie, nale-
p {color: navy} ży użyć atrybutu CLASS.
p#wazne {color: red}
95

11. Tworzenie stron WWW. Ilustrowany przewodnik
Na przykład tworząc klasę akapitu za- bić przez użycie elementu TABLE i wte-
wierającego tekst w kolorze czerwonym, dy wszystkie komórki tabeli, zarówno
należy wpisać definicję: w wierszach, jak i w nagłówkach, będą
p.czerwony {color: red}
miały określony dla tabeli kolor. Ale mo-
żesz to również zrobić, definiując kolor
Aby wywołać tę klasę w dokumencie, tekstu dla elementu BODY. Wtedy nie tyl-
wpisz: ko tekst w komórkach tabeli będzie miał
p class=”czerwony” Czerwony tekst określony kolor, ale również tekst w aka-
/p pitach, nagłówkach, listach będzie miał
określony kolor. Na tym właśnie polega
dziedziczenie w kaskadowych arkuszach
stylów — elementy nadrzędne domyśl-
Uwaga nie przekazują zdefiniowane właściwo-
ści elementom, które znajdują się niżej
Pamiętaj, aby definiując klasę, umieścić
w hierarchii.
znak kropki między selektorem a nazwą
klasy. W naszym przykładzie kolor niebieski
dla tekstu zdefiniowany w elemencie
BODY będzie oznaczał również niebieski
Dziedziczenie i kaskadowość to cechy, kolor tekstu we wszystkich komórkach
którym kaskadowe arkusze stylów za- tabeli. Jeśli jednak określimy atrybut
wdzięczają swój dynamiczny rozwój elementu podrzędnego, to nie przekaże
i pozycję. O kaskadowości rozmawia- on tej właściwości w górę hierarchii.
liśmy już wcześniej w tym rozdziale, W naszym przykładzie niebieski tekst
a teraz warto wspomnieć kilka słów zdefiniowany dla komórki tabeli nie
o dziedziczeniu. będzie oznaczał niebieskiego tekstu dla
Jeśli chcesz określić kolor tekstu w ko- wszystkich elementów wewnątrz ele-
mórce tabeli, zrobisz to przez użycie mentu BODY.
elementu TD. Możesz to również zro-
96

12. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Dziedziczenie działa domyślnie, czy- lia href=” ” Misja/a/li
li dla tych elementów, dla których nie lia href=” ” Historia/a/li
określono innej wartości właściwości
lia href=” ” Kontakt/a/li
niż ta, którą wskazano dla elementu nad-
rzędnego. Możemy zdefiniować czerwo- /ul
ny tekst w komórkach tabeli, mimo że /li
dla elementu BODY zdefiniowano, że tekst
ma być niebieski. liOfetra
Większość ludzi ogranicza wykorzy- ul
stanie kaskadowych arkuszy stylów do lia href=” ” Outsourcing /a/li
określania koloru tekstu w dokumencie
lia href=” ” Konsulting/a/li
lub kroju czcionki w nagłówkach. Jed-
nak istnieją również ciekawsze zasto- lia href=” ” Projektowanie apli-
sowania kaskadowych arkuszy stylów kacji/a/li
— mogą one służyć do tworzenia menu, /ul
do którego większość projektantów za-
/li
angażowałaby JavaScript.
/ul
Menu utworzone bez użycia JavaScriptu,
a wyłącznie z wykorzystaniem kaskado-
wych arkuszy stylów
/body
/html
menu.css:
body{background-color: lightblue;
font-size: larger}
#menu { background-color: blue;
html
float: left }
headlink rel=”stylesheet”
#menu li {font-size: x-large; color:
href=”menu.css” type=”text/css”
yellow}
/head
#menu li a {color: lime}
body
#menu li a hover {color: navy; ba-
ul id=”menu” ckground-color: white; font-size:
liFirma larger }
ul
97

13. Tworzenie stron WWW. Ilustrowany przewodnik
Formatowanie
Pionowe i poziome
wyrównanie tekstu
Specyfikacja kaskadowych arkuszy sty-
lów pozwala na kontrolowanie następu-
jących właściwości tekstu:
•
•
wyrównanie poziome i pionowe,
•
wcięcie,
•
odstępy między wierszami,
•
odstępy między wyrazami,
•
odstępy między literami,
Odstępy
•
dekoracja tekstu,
•
przekształcanie tekstu,
Za sterowanie odstępem pomiędzy wier-
•
kontrola pustej przestrzeni.
szami tekstu odpowiada polecenie line-
•
do prawej — text-align: left,
height, które może przyjmować wartości
•
do lewej — text-align: right,
dodatnie i ujemne. Przy użyciu wartości
wyśrodkowanie — text-align:
dodatnich odstępy między wierszami się
•
center,
zwiększają, a gdy użyjesz wartości ujem-
wyjustowanie bloku tekstu — text-
nych, tekst będzie się zagęszczał.
•
align: justify,
•
do góry — vertical-align: top,
•
do środka — vertical-align:middle,
•
do dołu — vertical-align: bottom,
•
indeks dolny — vertical-align: sub,
indeks górny — vetical-align: super.
Wcięcie pierwszego
wiersza akapitu
Aby uzyskać efekt wcięcia pierwszego
wiersza w akapicie, należy użyć pole-
cenia text-indent i określić głębokość
tego wcięcia w jednostkach względnych
lub bezwzględnych. Na przykład:
p {text-indent: 1 cm}
98

14. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Kaskadowe arkusze stylów pozwalają Dekoracja tekstu
również definiować odstępy pomiędzy
Używając kaskadowych arkuszy stylów,
poszczególnymi wyrazami tekstu. Właś-
twórcy stron mogą kontrolować wygląd
ciwość ta jest określana przez parametr
tekstu za pomocą właściwości text-de-
word-spacing. Również i w tym wypadku
coration. Korzystając z tego parametru,
możliwe jest podanie wartości dodatnich
mogą oni sprawić, że tekst będzie:
(zwiększenie odstępu między wyrazami)
i ujemnych (zmniejszenie odstępu mię- podkreślony — text-decoration: un-
dzy wyrazami). derline,
przekreślony — text-decoration: line-
through,
nadkreślony — text-decoration: over-
line,
migający — text-decoration: blink,
nie będzie dekoracji tekstu — text-de-
coration: none.
Korzystając z tego parametru, możesz na
przykład wyłączyć podkreślenia wszyst-
kich łączy na stronie:
Twórcy kaskadowych arkuszy stylów A {text-decoration: none;}
poszli jeszcze o krok dalej i pozwolili
projektantom stron wpływać nawet na
odstęp liter w tekście. Efekt ten można
uzyskać korzystając z polecenia letter-
spacing.
Na przykład:
P {letter-spacing: 5pt}
99

15. Tworzenie stron WWW. Ilustrowany przewodnik
Małe i wielkie litery Formatowanie
Nie trudząc się zbytnio, możesz zamie- wyglądu czcionki
nić cały tekst na stronie na wielkie litery, Zgodnie ze specyfikacją kaskadowych
chociaż oryginalnie w pliku jest on wpi- arkuszy stylów możliwe jest definiowane
sany małymi literami. Na taką wygodę następujących własności czcionki:
•
pozwala parametr text-transform. Może
•
on przyjmować następujące wartości: rodzaju — atrybut font-family,
• •
rozmiaru — atrybut font-size,
•
tylko duże litery — text-transform: wagi — atrybut font-weight,
•
uppercase, stylu — atrybut font-style.
tylko małe litery — text-transform:
Pod pojęciem rodzaju czcionki kryje się
•
lowercase,
każda pierwsza litera w słowie jest rozróżnienie pomiędzy krojami czcionek
zamieniana na wielką — text-trans- lub rodzinami czcionek. Za pomocą ka-
skadowych arkuszy stylów możesz okre-
•
form: capitalize,
bez zmian — text-transform: none. ślić rodzaj czcionki, z którego chcesz ko-
rzystać przy wyświetlaniu wskazanego
Zamiast wstawiać do dokumentu twar- fragmentu tekstu. Konstrukcja stylu jest
de spacje, możesz użyć parametru whi- budowana według następującej definicji:
te-space, który przyjmuje następujące
selektor {font-family: nazwa własna
wartości: czcionki lub nazwa rodzajowa czcionki}
• normal — spacje są redukowane do nazwa własna czcionki — np.
•
jednej, Arial, Times New Roman, Verdana; na-
pre — zachowanie dokładnej liczby zwa rodzajowa czcionki — jed-
•
spacji znajdujących się w tekście, na z pięciu wartości: serif, sans-serif,
nowrap — blokuje automatyczne ła- monospace, cursive lub fantasy.
manie wierszy. Czcionki szeryfowe (serif) charakteryzują
się tym, że każda litera posiada ozdobni-
ki zwane szeryfami. Dodatkowo czcionki
tego typu są proporcjonalne, gdyż każ-
da litera ma inną szerokość. Typowym
przedstawicielem tej grupy czcionek jest
czcionka Times New Roman.
Przykład czcionki szeryfowej (serif)
100

16. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Czcionki bezszeryfowe nie mają żadnych Czcionki typu fantasy to czcionki, których
ozdobników na czcionce, ale również są nie da się zakwalifikować do żadnego
proporcjonalne. Ten rodzaj czcionek jest z opisanych powyżej rodzajów czcionek.
najczęściej używany do tworzenia tekstu Przykład czcionki typu fantasy
przeznaczonego do czytania (treść stro-
ny). Typowym przedstawicielem tej gru-
py czcionek jest czcionka Arial.
Przykład czcionki bezszeryfowej (sans-
serif)
Czcionki tego typu są nieproporcjonalne, Uwaga
co oznacza, że każda litera ma taką samą
Należy pamiętać, że czcionki zdefiniowane
szerokość. Ten rodzaj czcionek automa- w arkuszu stylów są pobierane z kompu-
tycznie kojarzy się z tekstem napisa- tera użytkownika przeglądającego stronę.
nym na maszynie do pisania. Typowym Jeśli w systemie nie ma zainstalowanej
przedstawicielem tej grupy czcionek jest czcionki określonej przez arkusz stylów,
przeglądarka zastąpi ją domyślną czcion-
czcionka Courier New. ką dla danego systemu. Dlatego przy pro-
Przykład czcionki typu monospace jektowaniu stron nie należy używać zbyt
wymyślnych i rzadko spotykanych krojów
czcionek. Warto trzymać się najpopular-
niejszych, jak Times, Arial czy Helvetica.
Za rozmiar czcionki użytej na stronie
odpowiada parametr font-size. Rozmiar
czcionki może być podany w jednostkach
Czcionki tego typu charakteryzują się względnych lub bezwzględnych. Możesz
dużym podobieństwem do pisma od- w związku z tym używać następujących
ręcznego, mogą też zawierać różnego definicji rozmiarów czcionki:
•
rodzaju ozdobniki w postaci zawijasów.
•
Przykładem czcionki typu cursive może font-size: 20 pt,
•
być czcionka Comic Sans MS. font-size: 12 px,
font-size: 200%.
Przykład czcionki typu cursive
Ciekawym rozwiązaniem jest również
możliwość korzystania ze zdefiniowa-
nych wielkości: xx-small, x-small, me-
dium, large, x-large, xx-large.
101

17. Tworzenie stron WWW. Ilustrowany przewodnik
Dodatkowo istnieje również możliwość
określenia względnych rozmiarów za
pomocą opcji larger oraz smaller. Na
przykład:
BODY
{font-size: large;}
.wiekszy
{ font-size: larger;}
.mniejszy
{font-size: smaller;}
Kontrola nad wyglądem list za pomo-
cą kaskadowych arkuszy stylów polega
na sterowaniu właściwościami użytej
czcionki oraz określaniu typu listy, uży-
tego punktora graficznego oraz definio-
waniu pozycji elementów listy wzglę-
dem punktora.
Typy list dzielimy na punktowane, nu-
merowane i definicje. Od typu listy uza-
leżnione są rodzaje punktorów, których
możemy użyć w liście. Dla list nume-
rowanych punktorami mogą być litery
(małe lub wielkie) oraz cyfry (arabskie
lub rzymskie). Dla list punktowanych
Pojęcie wagi czcionki odnosi się do jej możemy użyć takich punktorów jak
grubości, a do definiowania grubości kwadrat, koło lub okrąg.
czcionki używany jest atrybut font-
Typ listy określa właściwość list-sty-
weight. Wartość może być określona za
le-type. Dla listy punktowanej może on
pomocą liczb z przedziału od 100 do 900
przyjmować wartości:
oraz nazw bold, bolder, lighter i normal.
Styl czcionki jest definiowany przez pa-
rametr font-style, który może przyjmo-
•
•
disc — punktor ma postać koła;
•
circle — punktor ma postać okręgu;
wać jedną z dwóch wartości — italic square — punktor ma postać
(kursywa) lub oblique. kwadratu.
102

18. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Dla listy numerowanej właściwość list- Czasem może również wystąpić ko-
style-type może przyjmować wartości: nieczność regulacji położenia tekstu
•
względem punktora. Do tego celu służy
decimal — odpowiada liczbom arab- parametr list-style-position.
•
skim;
lower-roman — odpowiada małym Parametr list-style-position przyjmu-
je następujące wartości:
• •
liczbom rzymskim;
upper-roman — odpowiada dużym outside — punktor znajduje się wy-
• •
liczbom rzymskim; raźnie poza listą;
lower-alpha — odpowiada małym li- inside — punktor jest schowany
•
terom; w tekście listy.
upper-alpha — odpowiada dużym li-
•
terom;
none — brak wypunktowania.
Jeżeli lista zawiera krótkie wpisy w każ-
dym punkcie, to różnica pomiędzy usta-
wieniami parametru list-style-posi-
tion będzie dla użytkownika trudna do
zauważenia. Stosowanie tego parametru
jest zasadne, jeśli każda pozycja listy
Czasem projektanci chcą zabłysnąć zu- składa się z więcej niż jednego wiersza.
pełnie nową i niestandardową koncepcją
listy, i właśnie na takie okazje twórcy ka-
skadowych arkuszy stylów przygotowali
parametr list-style-image, który po-
zwala użyć jako punktora listy wskaza-
nego pliku graficznego w formacie GIF,
JPG lub PNG.
Należy jednak pamiętać, że obrazek nie
powinien być zbyt duży, gdyż będzie
psuł efekt listy.
103

19. Tworzenie stron WWW. Ilustrowany przewodnik
Kolor i tło Za powielanie obrazu w obrębie ele-
mentu, dla którego zdefiniowane jest tło
Każdy element strony, który możesz
będące obrazem, odpowiada parametr
sformatować przez użycie kaskadowych
background-repeat, który może przyj-
arkuszy stylów, może mieć zdefiniowany
mować następujące wartości:
kolor i tło. Jako tło elementy mogą mieć
zdefiniowany kolor lub użycie wskaza-
nego obrazu.
• no-repeat — tło nie będzie powiela-
ne i zostanie wyświetlone tylko jeden
•
Aby przypisać kolor do elementu stro- raz;
ny, należy użyć parametru color i po- repeat-x — tło będzie powielane wy-
•
dać wartość koloru przez użycie jego łączenie w poziomie;
zwyczajowej nazwy angielskiej, zapisu repeat-y — tło będzie powielane wy-
•
palety rgb lub określenie wartości szes- łącznie w pionie;
nastkowej koloru. Szczegółowe sposoby repeat — tło będzie powielane w pio-
definiowania kolorów znajdziesz wcześ- nie i w poziomie.
niej w tym rozdziale.
Tło elementu możesz określić poprzez
podanie koloru tła:
selektor {background-color: wartość;}
lub wskazanie obrazu, który ma zostać
użyty jako tło obiektu:
selektor {background-image: URL
(obraz.gif)}
Obraz użyty jako tło elementu strony
musi być zapisany w formacie JPG, GIF
lub PNG.
Jeśli rozmiar obrazu użytego jako tło Dodatkowo istnieje możliwość zatrzyma-
elementu jest mniejszy niż rozmiar tego nia tła, aby nie przesuwało się wraz z za-
elementu, to obraz w tle będzie powiela- wartością całej strony. Do tego celu uży-
ny, aby wypełnić całkowicie tło. Jednak wa się parametru background-attachment
za pomocą kaskadowych arkuszy stylów z ustawioną wartością fixed. Na przykład:
możliwe jest wprowadzenie kontroli nad
BODY
powielaniem oraz zablokowanie przewi-
jania tła. {background-image: url(tlo.gif);
background-attachment: fixed;
}
104

20. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Specyfikacja kaskadowych arkuszy sty- Jeśli zdecydowałeś się na użycie warto-
lów pozwala nie tylko zdefiniować spo- ści liczbowych do określenia położenia
sób powtarzania obrazu umieszczonego tła, możesz stosować wartości względne
w tle elementu, ale również pozwala lub bezwzględne.
określić pozycję obrazu względem okna Szczegółowy opis wartości względnych
przeglądarki lub jego lewego górnego i bezwzględnych stosowanych w kaska-
rogu. Właściwość tę określa parametr dowych arkuszach stylów znajdziesz
background-position, który może przyj-
wcześniej w tym rozdziale.
mować jedną z następujących wartości:
•
•
center — tło wyśrodkowane,
•
left — tło z lewej strony okna,
•
right — tło z prawej strony okna,
•
top — tło znajduje się na górze okna,
bottom — tło znajduje się na dole
•
okna,
wartość liczbowa — określa odle-
głość tła od lewego górnego rogu
okna przeglądarki.
Wartości parametrów można ze sobą łą-
czyć, dzięki czemu można na przykład
umieścić tło w prawym górnym rogu Marginesy
okna przeglądarki, stosując zapis
Podczas tworzenia stron WWW można
background-position: right top definiować dwa rodzaje marginesów:
zewnętrzne i wewnętrzne. Marginesy
zewnętrzne strony to margines lewy, pra-
wy, górny i dolny. Do określania szero-
kości marginesu należy użyć parametru
margin w połączeniu z określeniem poło-
żenia marginesu:
•
•
margin-left — lewy margines,
•
margin-right — prawy margines,
•
margin-top — górny margines,
margin-bottom — dolny margines.
105

21. Tworzenie stron WWW. Ilustrowany przewodnik
Parametr przyjmuje wartości liczbowe
względne i bezwzględne. Marginesy są
definiowane w sposób niezależny od Wskazówka
siebie (górny może być inny niż dolny,
a prawy może być inny niż lewy) i mogą Jeśli chcesz ustawić identyczne wartości
przyjmować wartości ujemne. dla wszystkich marginesów, możesz to zro-
bić, używając wyłącznie parametru mar-
gin, na przykład:
BODY
{
margin: 12 pt
}
Uwaga
Pamiętaj, że marginesy różnych elemen-
tów się sumują. Jeśli na przykład ustawisz
lewy margines dla elementu BODY na 2 cm,
a następnie umieścisz na stronie tabelę,
dla której ustawisz lewy margines na 2 cm,
to lewa krawędź tabeli zostanie odsunięta
od lewej krawędzi strony o 4 cm.
Przykładowa definicja marginesów na
stronie:
BODY
{
Kaskadowe arkusze stylów pozwalają
pozycjonować na stronie dowolne ele-
margin-left: 1 cm; menty. Możesz to robić na trzy sposoby:
margin-right: 2 cm;
margin-top: 1 cm; •
•
bezwzględnie,
•
względnie,
margin-bottom: 3 cm; statycznie.
} Pozycjonowanie bezwzględne polega
na określaniu dokładnego położenia
Margines wewnętrzny jest definiowany elementów względem lewego górnego
za pomocą parametru padding w połą- rogu okna przeglądarki. Przyjmuje się,
czeniu z określeniem strony, której do- że lewy górny róg okna przeglądarki ma
tyczy margines. Określenie strony na- współrzędne (0, 0). Elementy na stronie
leży podać w języku angielskim: right pozycjonuje się przez podanie warto-
(prawy), left (lewy), top (górny) i bot- ści trzech parametrów: position, left
tom (dolny). i top.
106

22. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Przykład pozycjonowania bezwzględne- Dla wybranych elementów można rów-
go tabeli: nież zdefiniować ich wysokość i szero-
TABLE
kość. Do tego celu w kaskadowych ar-
kuszach stylów służą parametry width
{ i height. Korzystając z pozycjonowania
position: absolute; i wymiarowania, możesz stworzyć dwa
akapity tekstu, które będą umieszczone
left: 100px;
obok siebie i w określonym miejscu na
top: 150px; stronie.
}
Przykład wymiarowania elementów za
pomocą kaskadowych arkuszy stylów:
html
head
Pozycjonowanie względne definiuje style type=”text/css”
się również przez podanie wartości dla
p.pierwszy
parametrów left i top, ale właściwość
position przyjmuje wartość relative. {position: absolute;
Pozycjonowanie względne odnosi się left: 20px;
do domyślnego położenia elementu na
top: 20 px;
stronie.
width: 200px;
Przykład definicji stylu dla pozycjono-
wania względnego: }
DIV p.drugi
{ {position: absolute;
position: absolute; left: 250px;
top: 20px; top: 20 px;
left: 20px; width: 200px;
} }
107

23. Tworzenie stron WWW. Ilustrowany przewodnik
/style Parametr border-style może przyjmo-
/head wać następujące wartości:
body
• none, hidden — ramka jest niewi-
•
p class=”pierwszy” Zawartość doczna;
pierwszego akapitu, .../p dotted — ramka składa się z linii
•
wykropkowanej;
p class=”drugi” Zawartość drugiego
solid — ramka składa się z linii
akapitu, .../p
•
ciągłej;
/body double — ramka składa się z linii
•
podwójnej;
/html
groove; ridge, outset — ramka daje
Obecność i wygląd obramowania takich
•
efekt wypukłości elementu;
elementów jak tabele czy akapity można inset — ramka daje efekt wklęsło-
również kontrolować z wykorzystaniem ści elementu.
kaskadowych arkuszy stylów. Służy
do tego celu parametr border używany Grubość obramowania elementów może
w połączeniu z określeniem strony ele- mieć różną wartość i jest definiowana
mentu, której dotyczy definicja obramo- przez użycie parametru border-width.
wania, np. border-left lub border-top. Również w przypadku tego parametru
Parametrowi należy przypisać war- możemy definiować grubość krawędzi
tość solid, aby określić, że obramo- dla każdej strony elementu osobno, na
wanie dla elementu ma być widoczne. przykład border-bottom-width.
Na przykład: Kolor obramowania jest definiowany
TABLE{ border-left: solid; border-
przez użycie parametru border-color.
right: solid; border-top: solid; bor-
Jeśli chcesz, aby każda z krawędzi ele-
der-bottom: solid}
mentu miała inny kolor, możesz zastoso-
wać następujący kod:
lub
P{
TABLE {border: solid;}
border-top-color: blue;
Kolejnym parametrem określającym border-bottom-color: navy;
wygląd obramowania jest jego styl de- border-left-color: #FF0080;
finiowany za pomocą parametru border-
style. border-right-color: #008080;
Parametr boder-style może być określo- border-style: double;
ny dla całego elementu lub tylko dla nie- }
których jego stron, na przykład border-
left-style lub border-top-style.
108

24. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS
Programy do tworzenia arkuszy stylów
Mam dla Ciebie dobrą wiadomość — nie wiliśmy szczegółowo w rozdziale 2.),
zawsze będziesz musiał tworzyć kaskado- ale programy do tworzenia arkuszy
we arkusze stylów samodzielnie, ponieważ stylów możesz również pobrać z sie-
istnieją programy, które zrobią za Ciebie ci. Do takich programów należy Style
„brudną robotę”. W takie funkcje wypo- Master, którego testową wersję możesz
sażone są dobre edytory WYSIWYG (jak pobrać pod adresem http://www.westciv.
na przykład Dreamweaver, o czym mó- com/style_master.
109

25. Tworzenie stron WWW. Ilustrowany przewodnik
Jeśli zainteresowała Cię tematyka kaska- http://www.w3schools.com/css/
dowych arkuszy stylów, możesz pogłę-
bić swoją wiedzę, odwiedzając witryny
poświęcone tematyce kaskadowych ar-
kuszy stylów.
http://www.csszengarden.com
http://www.kurshtml.boo.pl/
110