IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

FrontPage 2002/XP PL.

wiczenia praktyczne
Autor: Bartosz Danowski
ISBN: 83-7197-660-7
Format: B5, stron: 112

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Od pojawienia si i spopularyzowania Internetu mino ju sporo czasu. Obecna sie

bardzo rni si od tej, jak znamy sprzed lat. Postp przejawia si niemal w kadym
aspekcie: zarwno nowe technologie, usugi, jak i programowanie zaskakuj nas
codziennie. Projektowanie pierwszych stron WWW wymagao od nas znajomoci
tajemnego kodu i wielu wyrzecze. W chwili premiery najnowszej wersji pakietu MS
Office XP oraz edytora MS FrontPage XP wchodzcego w jego skad, wszystkie dawne
problemy odejd w zapomnienie. Strona tworzy si na naszych oczach niemal sama,
przy udziale rnego rodzaju kreatorw i innych udogodnie.
Dziki tej ksice poznacie najnowsz wersj tego znanego i kontrowersyjnego edytora
stron WWW, pracujcego w trybie graficznym. Praca z nowym edytorem staa si
prawdziw przyjemnoci, a wszelkiego rodzaju wady znane ze starszych wersji
zostay poprawione. Budowa ksiki pozwoli szybko i atwo pozna program
i zbudowa wasn witryn WWW. Szereg dokadnych opisw oraz ilustracji bdzie
dodatkowym uatwieniem. Myl, e cenny dla niemal kadego jest oddzielny rozdzia
powicony kaskadowym arkuszom stylw, ktre pozwalaj na zastosowanie
rewolucyjnych rozwiza na stronach WWW. Dodatkowo wiele przykadw zawiera
odniesienie do czystego jzyka HTML, dziki czemu bdzie atwiej zrozumie pewne
pojcia, co z pewnoci zwikszy rwnie zainteresowanie samym jzykiem HTML,
ktry nadal daje nam lepsz kontrol nad projektem.
Dla pocztkujcych projektantw ksika jest doskonaym wprowadzeniem do pracy
z edytorem. Przyda si rwnie tym, ktrzy znaj ju MS FrontPage i chcieliby jedynie
zapozna si z nowociami oferowanymi w najnowszej wersji. Mam nadziej, e
zawarte tu przykady i wiczenia oka si pomocne w poznaniu programu i jego
moliwoci.

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

W ksice opisano opcje zarwno dla polskiej, jak i angielskiej wersji MS FrontPage
2002/XP.

Rozdzia 1.

Wprowadzenie.................................................................................................................................. 5
Nowe moliwoci MS FrontPage 2002/XP ................................................................................6

Rozdzia 2. Poszczeglne operacje edycyjne........................................................................................... 9

Wprowadzanie tekstu..................................................................................................................9
Waciwoci strony ...................................................................................................................13
Formatowanie tekstu .................................................................................................................19
Nagwki...................................................................................................................................25
Listy ..........................................................................................................................................26
Umieszczanie grafiki w dokumencie HTML............................................................................35
Hipercza .................................................................................................................................48
Hipercze tekstowe i graficzne..........................................................................................49
Kotwice...............................................................................................................................52
Mapa odsyaczy ..................................................................................................................53
Tabele........................................................................................................................................54
Proste tabele........................................................................................................................54
Zagniedanie tabel ............................................................................................................59
Formularze ................................................................................................................................60
Ramki ........................................................................................................................................68
Ramki tradycyjne................................................................................................................68
Ramki pywajce ................................................................................................................73

Rozdzia 3. Kaskadowe arkusze stylw na przykadzie MS FrontPage 2002/XP PL ..............77

Krtkie wprowadzenie do CSS .................................................................................................77
Atrybuty stylw ..................................................................................................................78
Selektory .............................................................................................................................81
Klasy ...................................................................................................................................82
ID ........................................................................................................................................84

Rozdzia 4. Projekt kompletnego orodka WWW ................................................................................. 91

Od czego zacz........................................................................................................................91
Ukad strony........................................................................................................................91
Kolorystyka.........................................................................................................................92

MS FrontPage 2002/XP PL. wiczenia praktyczne

Zaczynamy ................................................................................................................................92
Konstruujemy stron krok po kroku ...................................................................................92
Formatowanie szkieletu strony ...........................................................................................95
Czego brakuje....................................................................................................................99

Rozdzia 5. Publikujemy nasz stron..................................................................................................... 103

Serwer zakadamy konto na nasz stron ..........................................................................103
Publikujemy stron za pomoc MS FrontPage 2002/XP PL ..................................................105
Publikujemy stron za pomoc klienta FTP ...........................................................................107

Dodatek ....................................................................................................................................................................... 109

Dugo si zastanawiaem, jak bez sigania do teorii opisa tak wany element, jak kaskadowe arkusze stylw zaimplementowane w MS FrontPage 2002/XP PL. Doszedem do
wniosku, e nie jest to moliwe, dlatego w dalszej czci rozdziau zamieciem do
dokadny opis zasad konstrukcji i dziaania arkusza CSS, a nastpnie zanalizowaem, jak
caa ta teoria ma si do MS FrontPage 2002/XP PL. Mam nadziej, e takie rozwizanie
bdzie najlepsze. Wydaje mi si, e dokadne przeczytanie poniszych podrozdziaw
bdzie pomocne w zrozumieniu zasady dziaania implementacji CSS w edytorze.

Wyjanijmy najpierw, czym s kaskadowe arkusze stylw. Pojcie to pojawiao si w poprzednim rozdziale prawie na kadej stronie, ale nie zostao dokadnie omwione. Od czasu pojawienia si wersji HTML 3.2 wprowadzono do struktury jzyka pewne innowacje
i zaczto cz znacznikw zastpowa innymi. Nowe znaczniki nazwano kaskadowymi
arkuszami stylw i zaczto stopniowo je rozbudowywa. Dziki stylom moemy mie
pen kontrol nad formatowaniem dokumentu. adne z polece jzyka HTML nie pozwalao nam na regulowanie odstpw pomidzy blokami oraz nakadanie ich na siebie.
Warto wspomnie, e style pozwalaj na kontrol ta poszczeglnych czci dokumentu,
waciwoci stosowanych na stronie czcionek, tabel, formularzy i wielu innych elementw.

78

MS FrontPage 2002/XP PL. wiczenia praktyczne

Kaskadowe arkusze stylw, w skrcie CSS, moemy okreli jako narzdzie formatowania wygldu dokumentw. Nie moemy jednak stworzy za ich pomoc strony. Podobnie jak jzyk HTML, kaskadowe arkusze stylw s standaryzowane przez W3 i tam
naley szuka odpowiedniej dla nich specyfikacji. Na dzie dzisiejszy dostpne s specyfikacje w wersji 1. oraz 2. Konsorcjum W3 pracuje aktualnie nad trzeci specyfikacj, ktra nie zostaa jeszcze zatwierdzona, ale jej projekt jest dostpny razem z obowizujcymi
dokumentami.
Uywanie stylw wie si z pewnym ryzykiem, gdy przegldarki interpretuj tak formatowan stron na rne sposoby. Poczynajc od wersji 3. przegldarek, specyfikacja pierwsza jest obsugiwana w mniejszym lub wikszym stopniu. Czwarta generacja przegldarek
jest bardziej zgodna ze specyfikacj. Podobnie jak w przypadku jzyka HTML, przegldarka MS Internet Explorer o wiele lepiej radzi sobie z CSS ni Netscape Navigator.
Nasze arkusze moemy, podobnie jak jzyk HTML, opatrywa komentarzem wewntrz.
Komentarz musi by umieszczony w nastpujcy sposb:


 
  

Jak wspominaem we wprowadzeniu, style mog formatowa wiele elementw strony,

ale w tym opracowaniu skupimy si jedynie na formatowaniu czcionek, tekstu, kolorw,
ta, marginesw oraz pozycjonowaniu (MS FrontPage 2002/XP PL obsuguje tylko ma
tego cz).
Zacznijmy od umieszczania stylw na naszej stronie. Pierwsz moliwoci jest deklaracja stylw wewntrz dokumentu:
 


 


 

! "#$






% "

% "

 

Jak wida na przykadzie, deklaracja stylw jest umieszczana w nagwku dokumentu

pomidzy znacznikami <style> </style>. Takie rozwizanie jest stosunkowo wygodne
i ma ogromn przewag nad umieszczaniem deklaracji stylw bezporednio w kodzie
HTML, gdy posiadamy wtedy stosunkowo prost moliwo formatowania dokumentu.
Kolejn moliwoci umieszczania stylw w naszym dokumencie jest przygotowanie
ich w oddzielnym pliku.

Plik ten musi mie rozszerzenie CSS: nazwa.css. Tak przygotowany plik wywoujemy
w naszym dokumencie HTML w nastpujcy sposb:
 


&'()**)+
$
, 




% "

% "

 

Rozwizanie to ma wiele zalet. Tak przygotowany arkusz moe by zastosowany w kadym pliku HTML naszej strony; uatwia to ingerowanie w wygld teje strony.
Wszystkie opisy i wiczenia przedstawione w dalszej czci rozdziau opiera si bd
na tym rozwizaniu.
Podpinanie zewntrznego arkusza w edytorze MS FrontPage 2002/XP PL jest moliwe
dziki opcji cza arkusza stylw (Sheet Style Links) w menu Format (Format). Dodawanie arkusza odbywa si za pomoc przycisku Dodaj (Add) i typowego okna, znanego
z wyszukiwania plikw na dysku. Przydatn opcj jest rwnie Usu formatowanie
(Remove Formatting) z menu Format (Format), usuwa ona wszystkie wpisy formatujce
znajdujce si w kodzie HTML.
Rysunek 3.1.
Podczanie
zewntrznego arkusza

Definiowanie arkusza rozpoczynamy od nadania mu etykiety (w celach informacyjnych):


"-





% "./
0
+ 1234/ 5
+ 6+
1"271'$)
7.8

5
9

Jak widzimy na przykadzie, pierwsza cz okrela, ktry element jzyka HTML ma by

formatowany przez CSS w naszym przypadku zajmiemy si <BODY> oraz <P>. Opis
formatowania znajduje si pomidzy nawiasami klamrowymi {} i skada si z dwch
czonw. Pierwszy oddzielony jest od drugiego dwukropkiem, a po ostatnim znajduje si
rednik.

80

MS FrontPage 2002/XP PL. wiczenia praktyczne

Przy formatowaniu kroju czcionki moemy zadeklarowa kilka wartoci, rozdzielajc je

przecinkami. Zalecany przez nas krj warto zamkn pomidzy znakami .
Definicja stylw w MS FrontPage 2002/XP PL polega na utworzeniu nowego, pustego
pliku arkusza. Robimy to za pomoc menu Plik/Nowy/Strona lub sie Web (File/New/
Page or Web), ktry otwiera Okno zada (Task Panel). Z Okna zada (Task Panel)
znajdujcego si po prawej stronie wybieramy opcj Szablony strony (Page Templates).
W nowo otwartym oknie przechodzimy do zakadki Arkusze stylw (Style Sheets), na ktrej znajduje si kilkanacie zdefiniowanych typowych arkuszy oraz jeden pusty Normalny
arkusz stylw (Normal Style Sheet), z ktrego bdziemy korzysta.
Rysunek 3.2.
Nowy arkusz stylw

Zosta utworzony nowy dokument, ktry jest widoczny na pasku zakadek plikw
otwartych w MS FrontPage 2002/XP PL, oraz pasek z przyciskiem Styl (Style), dziki
ktremu moemy definiowa nowe wpisy do arkusza.
Rysunek 3.3.
Definicja wpisw

Na powyszym rysunku dokadnie wida spis wszystkich dostpnych znacznikw, ktre

moemy dowolnie formatowa za pomoc przycisku Modyfikuj (Modify). Formatowanie
odbywa si za pomoc nowo otwartego okna.

Rysunek 3.4.
Definicja wpisw
cig dalszy

Za pomoc przycisku Format moemy zmieni nastpujce atrybuty dla kadego

z obiektw:
L Czcionka (Font) krj, wygld, wielko, kolor i inne waciwoci, omawiane
przy okazji waciwoci tekstu,
L Akapit (Paragraph) wszystkie waciwoci blokw tekstu omawiane na pocztku
ksiki,
L Obramowanie (Border) obramowania i ramki dowolnych obiektw,
L Numerowanie (Numbering) waciwoci list,
L Pozycja (Position) pozycjonowanie elementw.
Dziki opcjom Klasa (Class) i Identyfikator (ID) moemy w prosty sposb odwoa si
do ju istniejcych klas lub ID (o ktrych napisz za chwil).
Po zatwierdzeniu wszystkich deklaracji w naszym arkuszu powinny pojawi si pierwsze
wpisy, podobne do tych z powyszych przykadw.

Selektory to podstawa CSS. Ich zadaniem jest wskazywanie obiektu, ktremu przypisujemy jak warto. Przykady zastosowania selektorw znajdoway si przy opisie
poszczeglnych elementw CSS. Tutaj postaram si jeszcze raz wyjani dokadniej rol
selektorw. Przykadem moe by <P>:
0: :
1"2;1
59

Selektor ten przypisze Arial jako czcionk domyln dla kadego znacznika <P>.

82

MS FrontPage 2002/XP PL. wiczenia praktyczne

Specyfikacja CSS pozwala nam na grupowanie selektorw:

*3.*<.*=02 59

Dziki temu wszystkie nagwki H1, H2, H3 bd miay kolor czerwony.

Grupowanie selektorw moe wyglda rwnie nastpujco:
. &8.
0
2
>"5
9

Z selektorami spotkalimy si w MS FrontPage 2002/XP PL wczeniej, przy omawianiu przykadw, teraz jedynie dowiedzielimy si, e tak si nazywaj i e mona je
dowolnie grupowa.

Prawie kady znacznik jzyka HTML 4 zawiera atrybut o nazwie CLASS=" ", ktry odpowiada za jego formatowanie za pomoc CSS. Zasada jego dziaania jest bardzo prosta. W pliku arkusza stylw definiujemy jak klas, ktr potem moemy wywoa za
pomoc atrybutu CLASS=" " w dowolnym znaczniku. Metoda wywoania nie jest skomplikowana:
/

$
?
"
/

W MS FrontPage 2002/XP PL przypisywanie klas dla elementw HTML polega na

przejciu do tekstowego trybu edycji i przypisaniu odpowiedniemu elementowi atrybutu
class=" ". By ograniczy zakres poszukiwa, moemy posuy si prost sztuczk: w trybie graficznym ustawiamy kursor w miejscu, dla ktrego ma by przypisana klasa i dopiero wtedy przechodzimy do zakadki HTML. Kursor zostanie automatycznie umieszczony
w odpowiednim miejscu.
Konstrukcja klasy w arkuszu stylw rwnie nie powinna sprawi problemu:
,
$
?
"
0: 1234/ 59

Definiowanie klas moe te przybiera nastpujc posta:

0: 1234/ 59
,
"0: 12@/ 59

Taka konstrukcja okrela dla kadego znacznika <P> domyln wielko na 10 pt. Natomiast druga linia,P.maly {font-size: 8 pt;}, tworzy klas definiujc tekst o wielkoci
8 pt. W tworzonym dokumencie wszystkie elementy zamknite w znaczniku <P> bd
posiaday wielko 10 pt, natomiast elementy zamknite w <P class="maly"> poka
tekst o wielkoci 8 pt.
Jak widzimy, jest to rozwizanie bardzo wygodne; pozwala ono rnicowa wygldy
poszczeglnych selektorw.

Edytor MS FrontPage 2002/XP PL pozwala nam definiowa wasne klasy. Proces definiowania polega na klikniciu przycisku Styl (Style) i wybraniu przycisku Nowy (New)
z nowo otwartego okna (pojcie to jest nam dobrze znane).
Rysunek 3.5.
Definicja klasy

Proces definicji naszej klasy polega na wpisaniu w polu Nazwa selektor (Name (selector))
dowolnej nazwy i okreleniu odpowiednich regu za pomoc przycisku Format.
Kaskadowe arkusze stylw posiadaj pewne zdefiniowane, standardowe klasy pseudoklasy. W pierwszej specyfikacji CSS zdefiniowano ich kilka; odnosz si one do nastpujcych elementw: tekstu i odnonikw. Najpierw zajmiemy si najpopularniejszymi
pseudoklasami, czyli odnonikami.
Kady na pewno widzia na stronach odnoniki bez podkrele, ktre czsto zmieniaj
kolor w chwili przesuwania ponad nimi kursora myszy (efekt bajecznie prosty do uzyskania za pomoc CSS i pseudoklas). Za deklarowanie wygldu odnonikw odpowiadaj nastpujce pseudoklasy:
;2&'(
;28&&
;2;A&8

Pseudoklasy uywa si nastpujco:

;21


 $" B1

0
: 123</ 5
2
>"5
9
;2>11  
 B1 $1 "

0
: 123</ 5
2%5
9
;2>
 B1/
!
1
1C"D

0
: 123</ 5
2 5
9

84

MS FrontPage 2002/XP PL. wiczenia praktyczne

Efektem dziaania takiej definicji bdzie zmiana koloru wszystkich odnonikw na

stronie na NAVY granat i wielko 10 pt, a take zmiana odwiedzonych odnonikw
na BLUE niebieski oraz zmiana odnonikw, nad ktrymi znajduje si kursor myszy,
na RED czerwony.
Efekt dziaania definicji jest nam ju znany; wiemy, e odnosi si on globalnie do kadego odnonika na stronie, na ktrej uywamy tego arkusza. Na pewno wielu z Was nasuwa si pytanie, co zrobi, by zrnicowa odnoniki w ramach jednej strony. Sprawa
wbrew pozorom jest stosunkowo prosta: musimy utworzy dodatkowe klasy dla naszych odnonikw.
Przykad poniej przedstawia, jak to powinno wyglda.
;,
"21
 B11!" 

 $C

0
: 12E/ 5
9
;,
"2>11  
 B11!"  $1 C

0
: 12E/ 5
9
;,
"2>
 B11!"/
!
1
1C"D

0
: 12E/ 5
9

Zwrmy uwag, e przy deklaracji nowej klasy uylimy ju tylko innych wielkoci,
gdy chcielimy jedynie pomniejszy nasz odnonik. Pozostae wartoci zostay bez
zmian przeniesione z gwnej definicji wygldu odnonikw. O dziedziczeniu naley
pamita i warto z niego korzysta w pracy nad dokumentami HTML.
MS FrontPage 2002/XP PL posiada pseudoklasy na licie dostpnych znacznikw,
dziki czemu bdziemy w stanie je sformatowa w bardzo prosty sposb. Dodatkowo,
w oknie waciwoci strony znajduje si odpowiednia opcja, pozwalajca na wczenie
zmian odnonikw po najechaniu na nie kursorem myszy. Moim zdaniem lepiej jednak
zdefiniowa odpowiednie wpisy w arkuszu samodzielnie.

W przeciwiestwie do klas, ktre s dziedziczone przez kolejne znaczniki, ID odnosi

si tylko do jednego znacznika, ktremu przypiszemy odpowiednie ID. Definiowanie
ID w arkuszu stylw wyglda tak:
F1"02C59

Wywoanie takiego ID w dokumencie przedstawia si nastpujco:

/& 1"  %G 11"
/

Efektem dziaania takiej konstrukcji bdzie wywietlenie zawartoci <P> w kolorze

zielonym. Zakres dziaania ID ograniczy si wycznie do tego jednego <P>.

Oczywicie, dziaa bdzie rwnie taka deklaracja:

:11!
$
2
,1"02C59
H"$-
1$*I
/A;1"  %G 11"
/

dla tego jednego znacznika <P>, poniewa zadeklarowalimy klas, ale nie przypisalimy do niej adnego selektora. Rozwizanie to jest nieco mniej eleganckie, ale efektywne.
Jak na pewno zaobserwowae, przy formatowaniu jednego selektora lub klasy staraem
si skrupulatnie miesza rne elementy CSS. Chciaem uzmysowi Wam, jak potne
moliwoci daje CSS. Na koniec podam jeszcze przykad, ktry nie powinien by dla Was
zaskoczeniem.
;21
 B11!" 

 $C

0
: 12E/ 5
2%5
9
;2>11  
 B11!"  $1 C

0
: 12E/ 5
2C5
%
C 21>5
9
;2>
 B11!"/
!
1
1C"D

0
: 12E/ 5
2 5
%
C 2"$5
9

Jak wida, okreliem kolor dla ta pod naszymi odnonikami. Domylnie odnonik nie
posiada adnego zdefiniowanego koloru dla ta. Odwiedzony odnonik bdzie mia to
zielone, a odnonik, nad ktrym wanie znajduje si kursor myszki, zmieni kolor ta na
ty, natomiast tekst bdzie czerwony. Skoro potrafimy w tak prosty sposb zmienia
kolor ta odnonika, to wydaje nam si, e nie musimy ju nikogo przekonywa do stosowania CSS.
Niestety, klasa :Hover nie jest obsugiwana przez przegldark Netscape Navigator, ale
mam nadziej, e zostanie ona szybko wprowadzona do uytku (wersja beta szstego
wydania ju interpretuje t klas).
Warto wspomnie, e w celu uzyskania podobnego efektu (bez uycia CSS) musielibymy
siga po Java Script i pisa do rozbudowany skrypt, ktry musiaby przewidywa
dodatkowo rodzaj zastosowanej przegldarki.
MS FrontPage 2002/XP PL nie obsuguje wielu elementw CSS, ale nic nie stoi na przeszkodzie,
bymy sami dopisali je do naszego arkusza rcznie. Naley przy tym zachowa konstrukcj
stosowan przez edytor.

Poniej, w tabelach, znajduje si opis poszczeglnych deklaracji CSS i dostpnych

wartoci. Dodatkowo znajduj si w niej proste przykady dla kadego z elementw.

86

MS FrontPage 2002/XP PL. wiczenia praktyczne

Tabela 3.1. Waciwoci czcionek

Deklaracja

Dostpne wartoci

font-family
font-style
font-variant
font-weight

Dostpne kroje pisma:

p {font-family: Verdana, Arial;}
normal | italic | oblique | inherit
p {font-style: italic;}
normal | small-caps | inherit
p {font-variant: small-caps;}
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
p {font-weight: bold;}
absolute-size | relative-size | length | percentage | inherit
p {font-size: 10pt;}

font-size

Przykadem definicji rozbudowanego arkusza, okrelajcego parametry czcionki wewntrz akapitu <P>, moe by poniszy fragment listy. Efektem jej dziaania bdzie
wywietlenie tekstu za pomoc pogrubionej czcionki VERDANA o wielkoci 16 pt.

0
: :
1"278

75
: 123J/ 5
: $1C 2% 2
9

Fragment ten moe rwnie dotyczy innych elementw, np.:

. &8
0
: :
1"278

75
: 123J/ 5
: $1C 2% 2
9

Ten wpis bdzie formatowa bloki tekstu zamknite w <P> oraz <DIV>. O wygodzie
przedstawionego powyej wpisu nie musz chyba nikogo przekonywa.
Tabela 3.2. Waciwoci tekstu
Deklaracja

Dostpne wartoci

text-decoration

none | underline | overline | line-through | blink

p {text-decoration: underline;}
capitalize | uppercase | lowercase | none
p {text-transform: capitalize;}
left | right | center | justify
p {text-align: left;}
length | percentage
p {text-indent: 3pt;}
baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage
p {vertical-align: baseline;}
normal | length
p {letter-spacing: 3pt;}
normal | length
p {word-spacing: 3pt;}

text-transform
text-align
text-indent
vertical-align
letter-spacing
word-spacing

Nasz tekst moemy rwnie dowolnie formatowa za pomoc CSS podkrela, przekrela, regulowa odstpy pomidzy sowami i znakami, rwna do lewej, prawej,
rodkowa i justowa. Dodatkowo cao moemy rwnie pozycjonowa w pionie, co
jest szczeglnie przydatne przy pozycjonowaniu tekstu w tabeli. Przykadem zastosowania formatowania waciwoci tekstu jest poniszy wpis:

0
 
1C2 5
> 1

1C2% 5
9

Dziki takiemu arkuszowi bdziemy mogli wyrodkowa zawarto komrek w tabeli

zarwno w pionie, jak i w poziomie.
Tabela 3.3. Kolor i to dokumentu
Deklaracja

Dostpne wartoci

color
background-color

deklaracje koloru w postaci: #FFFFFF p {color: #FFCCFF;}

color | transparent | inherit
h1 {background-color: #FF00CC}
url | none | inherit
body {background-image: url(obrazek.jpg)}
repeat | repeat-x | repeat-y | no-repeat | inherit
body {background-repeat: repeat-y;}
scroll | fixed | inherit
body {background-image: url(imagefilename);}
background-attachment: fixed;}
top | center | bottom | left | center | right
percentage | length | percentage | length
background-position: 0% 3cm;
background-position: 100%;
background-position: 100% 100%;

background-image
background-repeat
background-attachment

background-position

Definicja kolorw i ta jest szczeglnie wana przy projektowaniu stron. Kady chce
mie moliwo zdefiniowania ta strony, ta tabeli, ta bdcego obrazkiem, a take
koloru tekstu. Poniej podaj przykad, w ktrym poczyem kilka wczeniej poznanych waciwoci:
KL 
0
%
C 2$1 5
%
C 1
C2M1
C

$
,C1:N5
%
C /
2/
5
2%
5
9

0
:  "28

5
: 123</ 5
  
1C2! 1:"5
2
>"5
9

88

MS FrontPage 2002/XP PL. wiczenia praktyczne

Taka lista CSS pozwolia nam okreli nastpujce waciwoci:

BODY
L kolor ta biay;
L obrazek ta nazwa.gif;
L brak powtarzania ta;
L domylny kolor tekstu czarny.
P
L czcionka Verdana;
L wielko 12 pt;
L tekst wyjustowany;
L kolor tekstu akapitu granatowy.
Tabela 3.4. Marginesy
Deklaracja

Dostpne wartoci

margin-top
margin-right
margin-left
margin-bottom

length | percentage | auto | inherit

body {margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;}
length | percentage | auto | inherit
BODY {margin: 1em, 2em;}
length | percentage | auto | inherit
H1 {margin-top: 2em;}

margin
padding-top
padding-right
padding-bottom
padding-left
padding

length | percentage | length | percentage | inherit

H1 {padding: 1em, 2em;}

Wprowadzenie formatowania marginesw za pomoc CSS byo wielkim krokiem naprzd. Wyobramy sobie, e tworzymy stron zawierajc kilka akapitw tekstu i sytuacja wymaga od nas, by co drugi akapit by w caoci wcity bardziej ni pozostae.
Wobec braku CSS musimy uy tabeli. Poniej przedstawiam przykad.
Tre pierwszego akapitu bez wcicia...
Tre drugiego akapitu wcitego w caoci w stosunku do pierwszego...
Tre trzeciego akapitu bez wcicia....

Dla takiej tabeli musielimy okreli krawdzie jako niewidoczne i wwczas formatowanie zostao wykonane.

Dzi z pomoc przychodzi nam CSS, moemy zapomnie o stosowaniu tabeli. Poniej
przedstawiam ten sam przykad zdefiniowany w oparciu o CSS.
Definicja w arkuszu stylw:

0
: 1234/ 5

C1: 245
9
,$1 "
0

C1: 2OP5
9

Wygld kodu HTML:

BQ/1$C

/1 %$1G1

/

$1 "BQ C1C

/1 $1G C$
-B1$  
/1$C,,,

BQ 1C

/1 %$1G1



Jak wida, definiowanie oparte na CSS jest znacznie wygodniejsze ni definiowanie tabeli. Warto zwrci uwag, e w przypadku pierwszego rozwizania, formatowanie tekstu wewntrz tabeli za pomoc CSS moe nam przysporzy wielu problemw z przegldark Netscape Navigator. Natomiast drugie rozwizanie jest znacznie bardziej dla
niej przyjazne.
Tabela 3.5. Listy
Deklaracja

Dostpne wartoci

list-style-type

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |

upper-alpha | none
OL {list-style-type: lower-alpha;}

list-style-image

inside | outside
UL {list-style-image: url(images/obrazek.gif)}
length | percentage | auto | inherit
UL {list-style: outside}
[disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none] || [inside | outside] || [<url> | none]
UL {list-style: upper-roman inside}

list-style-position
list-style

Przy okazji omawiania list w jzyku HTML wspominaem, e CSS oferuje do rozbudowane wsparcie dla formatowania tego elementu. Domylnie HTML moe definiowa
listy posortowane <OL> oraz nieposortowane <UL>.
Jeli chodzi o listy sortowane, domylnie s one numerowane (1, 2, 3...), a uzyskanie
list numerowanych za pomoc liczb byo moliwe dziki atrybutowi TYPE=" ". Jednak
HTML 4 uznaje ten atrybut za przestarzay i sugeruje uycie do tego celu CSS. Definiowanie listy numerowanej za pomoc liter w CSS wyglda nastpujco:

90

MS FrontPage 2002/XP PL. wiczenia praktyczne

L
0
1  " "/2$
/
5
2 5
 
1C2: 5

C1: 2OP5
9

Tym wpisem do arkusza stylw okrelilimy, e nasza lista <OL> ma by numerowana

za pomoc maych liter. Lista bdzie miaa kolor czerwony i zostanie wyrwnana domylnie do lewego marginesu, ktry ma by wcity o 5% w stosunku do pozostaych
elementw na stronie.
Jak zauwaylicie, rozdzia ten nie zawiera wicze, ale nie martwcie si, wszystko
nadrobimy w trakcie realizacji projektu z kolejnego rozdziau.