IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

CSS wedug Erica Meyera.

Sztuka projektowania stron WWW
Autor: Eric A. Meyer
Tumaczenie: Andrzej Badowski,
Wojciech Grobel, Joanna Sugiero
ISBN: 83-7361-709-4
Tytu oryginau: Eric Meyer on CSS.
Mastering the Language of Web Design
Format: B5, stron: 322
Ewolucja internetu pocigna za sob rwnie ewolucj technologii wykorzystywanych
do tworzenia stron WWW. Witryny s wywietlane nie tylko na monitorach
komputerw, ale take na wywietlaczach telefonw komrkowych i urzdze
przenonych, drukowane na drukarkach i odczytywane przez urzdzenia
wykorzystywane przez osoby z wadami wzroku. Powstaa wic konieczno ustalenia
standardu formatowania stron, ktry pozwalaby na oddzielenie treci dokumentu
od jego wygldu. Takie wanie zaoenie przywiecao twrcom mechanizmw CSS
kaskadowych arkuszy stylw. Wykorzystujc je, moemy zdefiniowa wygld
i formatowanie tekstu, kolorystyk dokumentw, ukad elementw na stronie,
a nawet zachowanie si jej skadnikw w reakcji na rne dziaania uytkownika.
Dziki technologii CSS moemy cakowicie zmieni wygld strony, modyfikujc
jeden plik zawierajcy definicj stylw.
Ksika CSS wedug Erica Meyera. Sztuka projektowania stron WWW to szczegowe
omwienie kaskadowych arkuszy stylw, autorstwa jednego z najbardziej cenionych
specjalistw w dziedzinie projektowania stron WWW. Autor przedstawia metodologi
projektowania witryn WWW z wykorzystaniem stylw na bazie 13 praktycznych
projektw. Wykonujc je, poznasz wszystkie tajniki kaskadowych arkuszy stylw.
Konwertowanie istniejcych witryn WWW
Definiowanie stylw dla artykuw prasowych
Formatowanie hiperczy i przyciskw nawigacyjnych
Tworzenie stylw na potrzeby drukowania dokumentw
Modyfikowanie wygldu formularzy
Zmiana ukadu strony
Pozycjonowanie elementw strony

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

Eric A. Meyer projektuje witryny WWW od 1993 roku. Obecnie pracuje nad wdraaniem
standardw sieciowych dla Netscape Communications; mieszka w Cleveland w stanie
Ohio. Koordynowa tworzenie dokumentu CSS1 Test Suite przez konsorcjum W3C.
Jest rwnie autorem ksiek CSS. Kaskadowe arkusze stylw. Przewodnik
encyklopedyczny (wydawnictwo Helion), CSS2.0 Programmers Reference
(wydawnictwo Osborne/McGraw-Hill), a take zestawie zgodnoci przegldarek
ze standardami CSS.

SPIS TRECI
O Autorze

O konsultantach technicznych

Przedmowa

Wstp

11

PROJEKT 1. Konwersja istniejcej strony

17

Cel projektu ............................................................................................................................................................18

Przygotowania........................................................................................................................................................19
Na pocztek.............................................................................................................................................................19
Konwersja dokumentu........................................................................................................................................21
Korzyci z naszej pracy ......................................................................................................................................43
Przykadowe modyfikacje..................................................................................................................................45

PROJEKT 2. Style na potrzeby artykuw prasowych

47

Cel projektu ............................................................................................................................................................47

Przygotowania........................................................................................................................................................48
Na pocztek.............................................................................................................................................................48
Style w dokumencie.............................................................................................................................................50
Modyfikowanie stylw .......................................................................................................................................56
Przeksztacanie arkusza stylw na zewntrzny .........................................................................................60
Modyfikacje podstawowego projektu ...........................................................................................................62
Przykadowe modyfikacje..................................................................................................................................65

PROJEKT 3. Formatowanie kalendarza wydarze

67

Cel projektu ............................................................................................................................................................67

Przygotowania........................................................................................................................................................68
Na pocztek.............................................................................................................................................................68
Formatowanie dokumentu ................................................................................................................................70
Praca z bardziej szczegowym kalendarzem ............................................................................................80
Przykadowe modyfikacje..................................................................................................................................87

PROJEKT 4. Oywianie hiperczy

89

Cel projektu ............................................................................................................................................................89

Przygotowania........................................................................................................................................................90
Na pocztek.............................................................................................................................................................90
Formatowanie dokumentu ................................................................................................................................91
Przykadowe modyfikacje............................................................................................................................... 101

PROJEKT 5. Jak upikszy menu

103

Cel projektu ......................................................................................................................................................... 104

Przygotowania..................................................................................................................................................... 104
Na pocztek.......................................................................................................................................................... 104
Formatowanie menu......................................................................................................................................... 106
Zmiana wygldu menu .................................................................................................................................... 116
Przykadowe modyfikacje............................................................................................................................... 121

PROJEKT 6. Formatowanie wydrukw

123

Cel projektu ......................................................................................................................................................... 124

Przygotowania..................................................................................................................................................... 124
Na pocztek.......................................................................................................................................................... 124
Formatowanie dokumentu do druku.......................................................................................................... 126
Style drukowania na potrzeby artykuu prasowego.............................................................................. 134
Formatowanie wydruku kalendarza............................................................................................................ 138
Przykadowe modyfikacje............................................................................................................................... 145

PROJEKT 7. Dbamy o wygld formularzy

147

Cel projektu ......................................................................................................................................................... 147

Przygotowania..................................................................................................................................................... 148
Na pocztek.......................................................................................................................................................... 148
Formatowanie dokumentu ............................................................................................................................. 150
Style wykorzystywane do druku.................................................................................................................. 155
Wykoczenie ....................................................................................................................................................... 163
Przykadowe modyfikacje............................................................................................................................... 165

PROJEKT 8. Tworzenie kartki internetowej z pozdrowieniami

167

Cel projektu ......................................................................................................................................................... 167

Przygotowania..................................................................................................................................................... 168
Na pocztek.......................................................................................................................................................... 168
Stylizujemy dokument..................................................................................................................................... 169
Nieco inne spojrzenie....................................................................................................................................... 177
Jeszcze jeden wariant........................................................................................................................................ 181
Przykadowe modyfikacje............................................................................................................................... 183

PROJEKT 9. Ukad wielokolumnowy

185

Cel projektu ......................................................................................................................................................... 186

Przygotowania..................................................................................................................................................... 186
Na pocztek.......................................................................................................................................................... 186
Stylizujemy dokument..................................................................................................................................... 187
Stylizujemy dokument przez pozycjonowanie....................................................................................... 193
Stylizujemy trzy kolumny .............................................................................................................................. 197
Wracamy do pywania...................................................................................................................................... 205
Przykadowe modyfikacje............................................................................................................................... 207

PROJEKT 10. Ucieczka z pudeka

209

Cel projektu....................................................................................................................................................... 210

Przygotowania .................................................................................................................................................. 210
Na pocztek ....................................................................................................................................................... 210
Stylizujemy dokument .................................................................................................................................. 211
Uwaga, zakrty ................................................................................................................................................. 219
Przykadowe modyfikacje ............................................................................................................................ 229

PROJEKT 11. Pozycjonowanie sposobem ulepszenia projektu

231

Cel projektu....................................................................................................................................................... 232

Przygotowania .................................................................................................................................................. 232
Na pocztek ....................................................................................................................................................... 232
Stylizujemy dokument .................................................................................................................................. 234
Przykadowe modyfikacje ............................................................................................................................ 253

PROJEKT 12. Unieruchamiamy to

255

Cel projektu....................................................................................................................................................... 256

Przygotowania .................................................................................................................................................. 256
Na pocztek ....................................................................................................................................................... 256
Stylizujemy dokument .................................................................................................................................. 257
Inne pomysy .................................................................................................................................................... 271

PROJEKT 13. Eric Meyer o CSS w CSS

273

Cel projektu....................................................................................................................................................... 274

Przygotowania .................................................................................................................................................. 274
Na pocztek ....................................................................................................................................................... 274
Okrelenie stylw w dokumencie ............................................................................................................. 275
Analiza po ukoczeniu projektu ................................................................................................................ 295
Przykadowe modyfikacje ............................................................................................................................ 297

SKOROWIDZ

299

8
TWORZENIE KARTKI
INTERNETOWEJ
Z POZDROWIENIAMI
Kiedy dostajesz kartki na Boe Narodzenie, a sam takowych nie wysyasz,
musisz pogodzi si ze wiadomoci ycia w nieasce przez cztery lata,
ale potem ju wiesz, e ludzie, ktrzy przysyaj Ci kartki na wita, robi to,
by zrobi Tobie przyjemno i nie spodziewaj si odpowiedzi.
QUENTIN CRISP (CYTOWANY

PRZEZ

JONA WINOKURA)

JELI CZYTASZ T KSIK, to jest bardzo prawdopodobne,

e spdzasz duo czasu w internecie. Jest te bardzo prawdopodobne,
e znasz sporo ludzi przyjaci, kolegw, klientw itd. ktrzy
rwnie spdzaj mnstwo czasu w sieci. Postpujc wic zgodnie
z duchem cyfrowego wiata, moesz wysa im wasnorcznie
utworzon kartk z pozdrowieniami witecznymi. Moe to by
bardzo elektryzujce Boe Narodzenie (albo inne dowolne zimowe
wito) dla kadego!

CEL PROJEKTU
Naszym gwnym celem jest utworzenie adnie wygldajcej kartki,
ktr mona potem wysa do przyjaci i kolegw. Dokonamy
tego za pomoc podstawowych sposobw pozycjonowania w celu
ustawienia tekstu ponad obrazkiem, dowiemy si te, jak zapobiec
zlewaniu si tekstu z czciami obrazka podobnymi kolorystycznie.
Nastpnie utworzymy inaczej wygldajce kartki, dokonamy tego

168

PROJEKT 8

przez odmienne rozmieszczenie elementw tekstowych wzgldem gwnego obrazka.

Na kocu otrzymamy trzy rne ukady kartki.

PRZYGOTOWANIA
Instrukcje dotyczce
pobierania plikw z serwera
znajduj si we wstpie
do tej ksiki.

Z serwera FTP naley pobra pliki do projektu 8. Jeeli planujesz wprowadza modyfikacje
rwnolegle z czytaniem ksiki, otwrz w dowolnym edytorze tekstw plik ch08proj.html.
Wanie ten plik bdziemy w miar postpu prac edytowa, zapisywa, a nastpnie
odwiea jego wygld w przegldarce.

NA POCZTEK
Potrzebujemy odpowiedniego do pory roku obrazka i ycze. Na rysunku 8.1 przedstawiono
to, od czego musimy zacz.
RYSUNEK 8.1.
Bazowa kartka
z pozdrowieniami,
jeszcze niezmieniona
przy uyciu stylw CSS

Aby umoliwi efektywne wykorzystanie stylw, musimy okreli struktur strony. Chcemy
zachowa maksimum elastycznoci, wic kad lini zawrzemy w osobnym elemencie
,
a cao z kolei w nadrzdnym elemencie
. W nastpnym etapie wyrzucimy wszystkie
elementy , poniewa ju nie bdziemy ich potrzebowa. Natura blokowa elementw

pomoe nam w rozmieszczeniu kolejnych linii tekstu. Na listingu 8.1 pokazano te zmiany.
L I S T I N G 8 . 1 . Dokument z nowymi elementami div



 



  !

"#$%%%%&'' "(  )**+

"( +

")*+

 )+"#)
,
-).
 )+

")*+

/*0+

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI








(&
.1.*(&)-#&
 12
%)
()*%
.))


 
+



 

0
03
*
03
4)*
)
5*
#).)
*
-0

"
*
)4)0
)







6)
*
6)
)70

*4+






(&)$

.)+)
)*%
.)+
/0
.
)0)





/*0+

"( +

Element 




 moe wydawa si niepotrzebny, siedzi po prostu midzy
znacznikiem 
 a jego zawartoci. Kiedy pniej zastosujemy nasze style, bez tego
elementu o wiele trudniej byoby powiza wszystko razem.

STYLIZUJEMY DOKUMENT
Jedn z najwaniejszych rzeczy, ktre musimy wiedzie w czasie projektowania tej kartki,
jest wielko bazowego obrazka. W tym przypadku ma on 575 pikseli szerokoci i 384
piksele wysokoci. Przy projektowaniu stron internetowych szeroko jest zazwyczaj
waniejsza ni wysoko, poniewa elementy przewanie s odpowiednio wysokie
w stosunku do swojej zawartoci. Oznacza to, e autorzy rzadko musz si martwi
o wysoko elementu, a powicaj o wiele wicej czasu na decydowanie, jak szeroki
lub jak wski ma by element. Wkrtce przekonamy si, e przy rozmieszczeniu wysoko
rwnie odgrywa istotn rol.

Wyrodkowanie kartki
Aby nasza elektroniczna kartka bya bardziej podobna do zwykej kartki, powinnimy jej
zawarto wyrodkowa w poziomie.
Najlepszym sposobem, aby to zrobi, jest ustawienie bezporedniej wartoci dla waciwoci

nadrzdnego elementu
, a nastpnie ustalenie wartoci prawego i lewego
marginesu na . Kiedy elementowi blokowemu, takiemu jak
, nadaje si bezporedni
warto waciwoci 
, a lewy i prawy margines zostaj ustawione na , zostaje im
automatycznie nadana identyczna szeroko, co wyrodkowuje ten element.

169

Wybr medium
Arkusz stylw tego projektu
zoptymalizujemy pod ktem
wywietlania go na ekranie,
poniewa konstrukcje, ktre
utworzymy, nie nadaj si
zbytnio do drukowania.
Projekty oparte na
pozycjonowaniu czsto
stwarzaj problemy podczas
drukowania, a e mamy zamiar
umieszcza tekst ponad
obrazkami, to drukowanie
stanie si jeszcze bardziej
problematyczne. W zwizku
z tym, e nasze style bd
ograniczone tylko do ekranu,
wszelkie wydruki bd
pozbawione stylu,
a tekst pojawi si na nich
pod gwnym obrazkiem.
Zapobiegnie to problemom
zwizanym z elementami
nakadajcymi si na siebie.

Renderowanie
"strict" i "loose"
Podczas pozycjonowania
i wykonywania innych
zaawansowanych czynnoci
zwizanych z CSS warto
wiedzie, w jakim trybie
renderowania pracuje
przegldarka. W nowoczesnych
przegldarkach wybr trybu
renderowania dokonywany jest
za pomoc deklaracji
,
znajdujcej si na pocztku
dokumentu.

0 )
0#)1)8.
()*1.))+



  !"#  ! $

0 )+

Problem jest w tym, e przegldarka Internet Explorer obsuguje t cakiem prost operacj
dopiero od wersji IE6, a nawet w tym przypadku udaje si to tylko wtedy, kiedy pracuje
w trybie renderowania strict. Na szczcie istnieje sposb, aby zmusi IE5.x/Win
do poprawnego wywietlenia ukadu, ktry prbujemy utworzy.

Wicej informacji
na ten temat mona znale
w rozdziale Picking a
Rendering Mode w witrynie
WWW tej ksiki.

170

PROJEKT 8

W starszych wersjach przegldarka Internet Explorer przyjmowaa, e jeli waciwoci

!" nadana bya warto , to i elementy blokowe, takie jak
, powinny by
wyrodkowane. Nie jest to sposb, w jaki maj dziaa style CSS, ale tak dziaa Internet
Explorer. Jeli wic nadamy styl elementowi 
, to wyrodkujemy zewntrzny element

 w przegldarce IE5.x dla Windows i wczeniejszych (nie wspominajc o IE6 w trybie
lunego renderowania).

0 )
0#)1)8.
()*1.))+

!" $
/* IE5.X workaround */
*49.*
:%*"$
;<;#8=
(& )5$
3=
(&&"$
3=>

Wykorzystujc ten dodatkowy parametr, uniknlimy bdw przegldarki i wyrodkowalimy

kartk. Przy okazji wyrodkowalimy te tekst znajdujcy si na kartce, co nie byo naszym
zamiarem, ale na razie nie bdziemy si tym zajmowa. Zmienimy to pniej bez wikszego
problemu.
Aby mie lepsz kontrol nad prac, dodamy teraz do elementw
 obramowanie.
Pozwoli to zobaczy, gdzie przegldarka umieszcza te elementy (patrz rysunek 8.2).

0 )
0#)1)8.
()*1.))+


%

 $
/* temporary borders */
/*0
:)8 &$
.))=>
/* IE5.X workaround */

RYSUNEK 8.2.
Wyrodkowana kartka
z wyrodkowanym
tekstem i obramowaniem
elementw dodanym
dla przejrzystoci

Znaczenie absolutu
Istnieje tendencja do
przyjmowania, e element
pozycjonowany w sposb
absolutny zachowuje si jak
ramka i nie da si go przewin
w obrbie dokumentu.
Tak naprawd jest to dobra
definicja elementu ustalonego
(fixed-position element).
Element pozycjonowany
w sposb absolutny
umieszczany jest wzgldem
swojego bloku obejmujcego,
wic jeli da si ten blok
obejmujcy przewija razem
z dokumentem, tak samo
bdzie si zachowywa
element pozycjonowany
w sposb absolutny.

Wyrodkowalimy wic kartk i ustawilimy pomocne obramowanie elementw
.

Nie jest to prawdziwe pozycjonowanie raczej przeformatowanie normalnej zawartoci.
Aby przej do prawdziwego pozycjonowania, musimy zbudowa fundament.

Tworzenie kontekstu
Aby pozycjonowa element, najpierw musimy utworzy kontekst. Przecie zawsze
pozycjonujemy co wzgldem czego innego. Terminologia CSS okrela taki kontekst
nazw bloku obejmujcego, a z definicji kady pozycjonowany w sposb absolutny
element posiada blok obejmujcy. Co skada si na taki blok obejmujcy?

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

171

Blok obejmujcy kadego pozycjonowanego w sposb absolutny elementu zdefiniowany

jest jako najbliszy element przodek (ancestor), ktry zosta pozycjonowany. Innymi sowy,
jeli jeden z przodkw pozycjonowanego w sposb absolutny elementu zosta rwnie
pozycjonowany w jaki sposb, to jest to blok obejmujcy.
Jeli nie ma takich pozycjonowanych przodkw, to blok obejmujcy staje si elementem
podstawowym (root element), ktry interpretowany jest przez przegldark jako element

 lub  ". Jeli po prostu pozycjonowalibymy nasze yczenia (blok sentiment),
to ich blokiem obejmujcym byby element podstawowy (patrz rysunek 8.3).
*49.*
:%*"$
;<;#8=
(& )5$
3=
(&&"$
3=>

 " & & !" $

0 )+

RYSUNEK 8.3.
Pozycjonowanie elementu
w obrbie grnego
prawego elementu
podstawowego

Stosujc t zasad, udao nam si ustawi yczenia w grnym, prawym rogu dokumentu,
ale nie kartki. Chcemy jednak, eby yczenia wyglday tak, jakby byy czci kartki.
Byoby o wiele wygodniej, aby sama kartka staa si blokiem obejmujcym. Na szczcie
nie bdzie to trudne, poniewa nasz element znajduje si ju na waciwym miejscu.
Musimy tylko go spozycjonowa
/*0
:)8 &$
.))=>
/* IE5.X workaround */
*49.*
:%*"$
;<;#8=
(& )5$
3=
(&&"$
3=

" >
*49)()
:#$
/ 3)=
#$
=
&"$
=
)8 &$
&"=>

Stosujc ten jeden prosty dodatek, sprawilimy, e zewntrzny element
 sta si blokiem
obejmujcym (kontekstem pozycjonujcym) dla caej zawartoci kartki. Zatem podczas
pozycjonowania w sposb absolutny jakiegokolwiek elementu
w obrbie kartki, a nawet
samego obrazka, kontekstem, w ktrym pozycjonujemy, stanie si element
zawierajcy
identyfikator '
(
. W naszym przypadku yczenia bd teraz pozycjonowane
w grnym, prawym rogu kartki, a nie caego dokumentu.
Udaje si to zrobi, poniewa spozycjonowalimy w sposb relatywny zewntrzny element

, ale dokonalimy tego bez adnych przesuni. Zatem spozycjonowany relatywnie
element
 pozostaje dokadnie tam, gdzie powinien by, jeli nie zostaby w ogle

Wyczamy tryb
normal flow
Zauwa, e po
spozycjonowaniu ycze
przestrze wok nich
w normalnym ukadzie
dokumentu zostaa
zamknita. Spjrz jeszcze raz
na rysunek 8.3. Zauwa,
e midzy doln krawdzi
obrazka a elementem 

napisu Joe and Jane Dezynor

nie ma wolnego miejsca.
Tak wanie miao by.

172

PROJEKT 8

spozycjonowany. Wizualnie nie ma adnej zmiany. Pomimo braku zmiany pooenia,

ten element
 staje si blokiem obejmujcym dla wszystkich swoich potomkw oraz
kontekstem, wzgldem ktrego moemy pozycjonowa w sposb absolutny nasz podpis,
yczenia itd.

Zachowanie czytelnoci
Jeli zamierzamy umieci tekst na tle obrazka, musimy zapewni jego czytelno. Moemy
zmieni wielko liter, ich kolor itd., ale cigle istnieje niebezpieczestwo, e kolor i jasno
obrazka moe by rna, wic cz tekstu bdzie czytelna, a cz nie. Zobaczmy, jakie
bd efekty, jeli przesuniemy tekst nieco w d i w lewo, wybielimy go i powikszymy
(patrz rysunek 8.4).
*49.*
:%*"$
;<;#8=
(& )5$
3=
(&&"$
3=

#$
) 4)=>
*49)()
:#$
/ 3)=
#$
)&
&"$
* 
&+

)8 &$
&"=
#""
*,"-!# "
>

0 )+

RYSUNEK 8.4.
Umieszczenie tekstu
na tle obrazka moe
powodowa problemy
z kontrastem

Wielko czcionki
ustawiona w pikselach?
W wikszoci przypadkw
wielko czcionek nie powinna
by ustawiana w pikselach,
poniewa moe to prowadzi
do problemw z dostpnoci.
W tym konkretnym przypadku
czysto wizualna natura naszego
projektu przemawia za uyciem
pikseli. Ale gdybymy nawet
wykorzystali procenty
lub jednostki em, nasz projekt
nie ucierpiaby na tym.

Waciwoci przesunicia
Poniewa wartoci  ,
 ,  i  okrelaj
wielko przesunicia midzy
krawdzi pozycjonowanego
elementu a jego blokiem
obejmujcym, nazywane s
waciwociami przesunicia
(offset properties).

Ustawiajc waciwo  na )&, a  na *, przesunlimy ten element w d

o 30 pikseli i w lewo o 25 pikseli. Zabieg ten przesunie tekst, aby nie zasania obramowania,
dekorujcego bazowy obrazek. Te dwie waciwoci (razem z  i "#) definiuj
przesunicia wzgldem krawdzi bloku obejmujcego. Zatem ustawilimy zewntrzn,
grn krawd ycze o 30 pikseli poniej grnej krawdzi bloku obejmujcego,
a zewntrzn, praw krawd o 25 pikseli w lewo od prawej krawdzi bloku obejmujcego.
Mimo e na tym etapie nasz tekst jest cakiem czytelny, to przejcie z jasnego do ciemnego
ta i z powrotem jest w czasie czytania nieco mczce dla oczu. Musimy wygadzi kontrast
midzy tekstem a obrazkiem.
Aby tego dokona, musimy doda do ycze obrazek ta, ale nie jaki zwyky, stary obrazek.
Wykorzystujc trik opracowany przez Todda Fahrnera, dowiadczonego projektanta witryn

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

173

internetowych i uznanego eksperta w dziedzinie CSS, zastosujemy do naszych ycze co,

co nazywa si obrazkiem typu halfscreen, a wyglda jak szachownica kolorowych
i przezroczystych pikseli (patrz rysunek 8.5).
RYSUNEK 8.5.
Obrazek ta
typu halfscreen
w powikszeniu 1600%,
widziany w programie
Photoshop

Kady czarny piksel widoczny na tym powikszeniu bdzie widoczny na ekranie,

ale pozostae piksele pozostan przezroczyste i pozwol na wywietlenie tego, co znajduje
si pod nimi. Kiedy do naszych ycze dodamy ten obrazek ta razem z odrobin
wypenienia (padding) otrzymamy czytelniejszy blok tekstu (patrz rysunek 8.6).
*49)()
:#$
/ 3)=
#$
#8=
&"$
?;#8=
%*"$
;@=

)8 &$
&"=
5$
 .
/ *
?;#8
2 A
)5=
. $
%")=




.

"'"#!"./#( >

0 )+

RYSUNEK 8.6.
yczenia s teraz
o wiele atwiejsze
do przeczytania,
a jednoczenie przez nie
moemy zobaczy
bazowy obrazek kartki

Tymczasowe
obramowanie
Pamitaj, e obramowanie
znajdujce si wok ycze
jest reliktem naszej zasady
poka mi wszystkie elementy

i zostanie usunite
w kocowej fazie projektu.

Zauwa, e obrazek typu halfscreen, ktry wykorzystujemy, ma rozmiar 1010 pikseli. Mona
zastosowa nawet obrazek o wymiarach 22, ale uoenie obok siebie tak maych obrazkw
ta moe znaczco spowolni prac przegldarek w czasie renderowania kartki. Poniewa
czas pobierania obrazka o wymiarach 22 jest praktycznie taki sam jak obrazka 1010
(nawet przez modem), wykorzystujemy wiksz wersj, aby nieco odciy przegldarki.

174

PROJEKT 8

Podpisywanie kartki
Waciwoci left,
right, i width
Waciwociom ,
  i   nadalimy
bezporednie wartoci w celu
uniknicia bdw Explorera
zwizanych z pozycjonowaniem.
Usunicie jednej lub kilku tych
wartoci, nawet jeli da si to
zrobi, moe prowadzi do
przesunicia wzgldem siebie
lub nawet niewywietlenia
przez IE5.X niektrych
elementw.

Nadszed czas, aby w kontekcie kartki umieci podpis (blok signature). Wyrodkujemy
tekst, napiszemy go czcionk pogrubion i umiecimy go w dolnej czci obrazka. Najatwiej
to zrobi przez ustawienie przesunicia wzgldem bloku obejmujcego i dodanie stylu
pogrubionego.
*49)()
:#$
/ 3)=
#$
#8=
&"$
?;#8=
%*"$
;@=

)8 &$
&"=
5$
 .
/ *
?;#8
2 A
)5=
. $
%")=

#**&$
;#8=
/.B&3*$
#)
3 C" 5.))/ .B&5D
.))
)#)=>

" )) "#& & 
%&&+

#!"
$

0 )+

Teraz, kiedy spozycjonowalimy podpis, okazuje si, e znajduje si on tu pod obrazkiem.

Podpis zosta umieszczony w taki sposb, e jego grna krawd jest o 335 pikseli oddalona
od grnej krawdzi bloku obejmujcego (patrz rysunek 8.7).

RYSUNEK 8.7.
Podpis zosta
rozmieszczony
na podstawie zarwno
odziedziczonych,
jak i specjalnie
okrelonych stylw

Tekst jest wyrodkowany, poniewa odziedziczona zostaa warto  waciwoci

!", co byo czci naszego obejcia bdw IE5.X i co jest nawet wygodne
w uyciu. Ustawilimy warto szerokoci (
) na %&&+, poniewa to gwarantuje,
e przegldarki bd utrzymyway szeroko bloku
 rwn szerokoci caej kartki,
a co za tym idzie, umieszcz tekst na rodku kartki.

Stylizowanie informacji o autorze zdjcia

Ostatnim wanym elementem, za ktry musimy si zabra, jest informacja o autorze zdjcia
(blok credit), znajdujca si w dolnej czci obrazka. Nie chcemy, eby zajmowaa ona
zbyt wiele miejsca na kartce, dlatego zmniejszymy rozmiar czcionki, ustawimy jasnoszary
kolor tekstu oraz wyrwnamy go do prawej strony. Pniej podniesiemy go o par pikseli
w gr, aby nakada si nieco na doln krawd obrazka (patrz rysunek 8.8).

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

175

RYSUNEK 8.8.
Informacja o autorze
zdjcia zabiera teraz
mniej miejsca i jest mniej
widoczna

*49&3)
:#$
/ 3)=
#$
;#8=
)5$
=
&"$
=
%*"$
E@=

5%)&"$
/ *=>


"" #!01&+ !" "

!%& $

0 )+

Tym razem spozycjonowalimy relatywnie element
 i moemy zobaczy rezultat

element
 zawierajcy informacj o autorze zdjcia zosta podniesiony. Zauwa
jednak, e zostao troch miejsca midzy jego doln krawdzi a doln krawdzi
zewntrznego elementu
. Kiedy element jest pozycjonowany relatywnie, przestrze
wok niego nie zostaje zamknita. Zamiast tego dokument zostaje rozmieszczony tak,
jakby jego elementy nie byy pozycjonowane, a relatywnie pozycjonowany element
zostaje podniesiony zgodnie z wartociami waciwoci jego przesunicia (, "# itd.).
Jak wida na rysunku 8.8, oznacza to, e informacje o autorze zdjcia zostay przesunite
do gry o 10 pikseli.
Wyglda to niebyt adnie, bo tekst wychodzi poza praw krawd obramowania obrazka.
Musimy z powrotem przesun tekst troch w lewo. Mona to zrobi na trzy sposoby:

ustawi warto waciwoci  na *,

ustawi warto waciwoci ! na *,
ustawi warto waciwoci 

! na *.
W tym konkretnym przypadku wszystkie sposoby dadz identyczny efekt wizualny. Naley
jednak pamita, e zwikszenie wartoci waciwoci wypenienia powikszy rwnie
odstp ktry mg by ustawiony midzy zawartoci a krawdziami. Lepiej zatem
ustawia ten rodzaj przesunicia, stosujc albo waciwo , albo !.
Dla odmiany zastosujmy to drugie rozwizanie.
*49.)*
:. $
 4)=
57)$
,@=
)8 &$
&"=
#$
) 4)=

#$
E#8=
!* >

0 )+

176

PROJEKT 8

Zabieg ten przesunie zawarto (obramowania te) w praw stron, ale pamitaj, e warto
waciwoci  wynosi cigle &. Marginesy, tak jak wszystko w obrbie elementu, s
mierzone wzgldem punktw zdefiniowanych przez waciwoci przesunicia.

Gotowy produkt
Kiedy wreszcie spozycjonowalimy elementy, moemy wreszcie usun zasad poka mi
obramowanie, aby nasza kartka wygldaa tak piknie, jak zawsze sobie to wyobraalimy
(patrz rysunek 8.9).

0 )
0#)1)8.
()*1.))+
/* border-rule deleted */
/*0
:)8 &$
.))=>
/* IE5.X workaround */

RYSUNEK 8.9.
Gotowa cyfrowa kartka
z pozdrowieniami

Zauwa, e po usuniciu obramowa da si zauway pewne przesunicia w rozmieszczeniu

elementw. Dzieje si tak, poniewa obramowania rwnie zajmuj nieco miejsca
i przesuwaj obszary zawartoci troch dalej od punktw zdefiniowanych przez waciwoci
przesunicia. Jest to mao istotny efekt, ktry nie psuje caego projektu, ale warto o nim
pamita w bardziej skomplikowanych sytuacjach zwizanych z pozycjonowaniem.
Za pomoc tych kilku cakiem prostych krokw doszlimy do arkusza stylw pokazanego
na listingu 8.2. Pjdmy jednak dalej!
L I S T I N G 8 .2 . Kompletny arkusz stylw

0 )
0#)1)8.
()*1 +
/*0
:)8 &$
.))=>
/* IE5.X workaround */
*49.*
:%*"$
;<;#8=
(& )5$
3=
(&&"$
3=

#$
) 4)=>
*49)()
:#$
/ 3)=
#$
#8=
&"$
?;#8=
%*"$
;@=

)8 &$
&"=
5$
 .
/ *
?;#8
2 A
)5=
. $
%")=

#**&$
;#8=
/.B&3*$
#)
3 C" 5.))/ .B&5D
.))
)#)=>
*49&3)
:#$
/ 3)=
#$
;#8=
)5$
=
&"$
=
%*"$
E@=

5%)&"$
/ *=>

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

177

*49.)*
:. $
 4)=
57)$
,@=
)8 &$
&"=
#$
) 4)=

#$
E#8=
(&&"$
?;#8=>

0 )+

NIECO INNE SPOJRZENIE

Przyjmijmy, e po kilku przemyleniach zdecydowalimy, e chropowato wygldajca
krawd bdzie wydawaa si naszym odbiorcom troch zbyt surowa. Moe powinnimy
zastosowa tu co nowoczeniejszego i kanciastego.
Aby tego dokona, musimy wrci do poprzednich znacznikw i stylw, jakie przedstawia
rysunek 8.2, a nastpnie utworzy wok obrazka czarne obramowanie gruboci 2 pikseli.
Aby si to udao, musimy dopasowa waciwo 
zewntrznego elementu
,
poniewa obrazek (szerokoci 575 pikseli) plus obramowanie (2 piksele z kadej strony)
daje razem 579 pikseli szerokoci, a nie 575.

0 )
0#)1)8.
()*1.))+
/*0
:)8 &$
.))=>
/* IE5.X workaround */
*49.*
:%*"$
2
(& )5$
3=
(&&"$
3=

#$
) 4)=>


 
*"
". $
*49)()
:#$
/ 3)=
#=
#8=
&"$
?;#8=
%*"$
;@=

)8 &$
&"=
5$
 .
/ *
?;#8
2 A
)5=
. $
%")=

#**&$
;#8=
/.B&3*$
#)
3 C" 5.))/ .B&5D
.))
)#)=>

0 )+

Zauwa, e nie pozbywamy si obejcia bdw IE5 (cigle chcemy, eby kartka bya
wyrodkowana) oraz stylw ycze, ale wszystko inne wyrzucamy. Po wprowadzeniu
zmian szeroko kartki zostaje dopasowana, a do obrazka dodane obramowanie.
Moglibymy zatrzyma reszt stylw z poprzedniej kartki, co pewnie byoby interesujce,
ale zobaczmy, czy potrafimy utworzy od pocztku nieco inny wygld. Patrzc na rysunek
8.10., widzimy trzy rzeczy, ktre powinny zosta ulepszone:

Podpis powinien by umieszczony w interesujcy sposb.

Trzeba nada styl informacji o autorze zdjcia.
yczenia mogyby znale si bliej krawdzi obrazka.
Zajmijmy si tymi problemami po kolei.

Ponowne umieszczanie podpisu

Poniewa liczy si pomys, niech nasi odbiorcy wiedz, kto na niego wpad. Moemy uzyska
to przez wiksze ni w poprzednim projekcie uwypuklenie podpisu. Byoby cakiem
szykownie, gdyby udao si utworzy efekt w rodzaju wiszcej wizytwki, w ktrym podpis
zostaje umieszczony w ramce, podzielonej na p przez obramowanie obrazka.

Nowy obrazek
Zmieniamy take obrazek.
Plik card-image.jpg
zosta zamieniony na
card-image2.jpg. Mona
to sprawdzi w rdle pliku
ch08prog10.html.

178

PROJEKT 8

RYSUNEK 8.10.
Zaczynamy od pocztku
z nieco zmienionym
obrazkiem

Najpierw musimy wybra style czcionki, ta i obramowania podpisu. Jak ju to zrobimy

(patrz rysunek 8.11), moemy spozycjonowa podpis.
*49)()
:#$
/ 3)=
#$
#8=
&"$
?;#8=
%*"$
;@=

)8 &$
&"=
5$
 .
/ *
?;#8
2 A
)5=
. $
%")=

#**&$
;#8=
/.B&3*$
#)
3 C" 5.))/ .B&5D
.))
)#)=>

#!"
#!0%1 
%"
".

.
" 
*  & 

&/* $

0 )+

RYSUNEK 8.11.
Teraz podpis wyglda
bardziej jak wizytwka,
ale nie jest jeszcze
na swoim miejscu

Kiedy style s ju gotowe, musimy zdecydowa, jak zamierzamy uzyska efekt,

w ktrym podpis w poowie nasuwa si na doln cz obrazka. Jednym ze sposobw
jest spozycjonowanie relatywne podpisu z przesuniciem ku grze, ale to ju robilimy
z informacjami o autorze zdjcia w poprzednim projekcie. W takim razie spozycjonujmy
go w sposb absolutny wzgldem kartki (ktra, jak pamitamy, te jest blokiem
obejmujcym).

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

179

Jest to dobry plan, ale musimy postpowa ostronie. Moemy sprbowa spozycjonowania
podpisu, uywajc ujemnego przesunicia wzgldem dou, ale to by go przesuno
wzgldem dou kartki, a nie dou bazowego obrazka. Definitywnie chcemy, aby podpis
by umieszczony wzgldem obrazka. Na szczcie gra kartki i gra obrazka znajduj si
w tym samym miejscu, wic zdefiniujemy przesunicie wzgldem gry ().
*49&3)
:5%)&"$
/ *=
57)$
E,#8=
/*)$
E#8
 *
/ .B=

/.B&3*$
 4)=
%*"$
?<;#8=
(&$

3=
#**&$
?;)(=

" )& "#%* %* >

0 )+

Zauwa, e nadalimy wartoci waciwociom "# i , co pomaga unikn bdw

w Explorerze. Wiemy, e obrazek ma 384 piksele wysokoci, wic, okrelajc warto
waciwoci  na )&, umiecimy podpis w miejscu, w ktrym ma si znajdowa
(patrz rysunek 8.12).
RYSUNEK 8.12.
Wykorzystujc
przesunicie wzgldem
gry, moemy umieci
podpis bardzo precyzyjnie,
ale informacja o autorze
zdjcia zostaje w tym
procesie zaciemniona

A co si stao z informacj o autorze zdjcia? Wida tylko sam jej d, wystajcy spod
podpisu na rysunku 8.12. Wsuna si pod podpis, poniewa podpis nie jest ju czci
normalnego ukadu dokumentu. Jeli nie chcemy cakiem pozby si informacji o autorze,
musimy j spozycjonowa, aby bya widoczna.

Gdzie umieci informacj o autorze zdjcia?

Sposb, w jaki nadalimy styl informacji o autorze w poprzednim projekcie, nie by zy,
ale moe umieci j na grze obrazka zamiast na dole? A moe umiecimy j tu nad
obrazkiem?
*49&3)
:5%)&"$
/ *=
57)$
E,#8=
/*)$
E#8
 *
/ .B=

/.B&3*$
 4)=
%*"$
?<;#8=
(&$

3=
#**&$
?;)(=

#$
/ 3)=
#$
<#8=
)5$
E;#8=
&"$
E;#8=>


#%%,"-!# !" "

!%) "#& & 
%&&+ "222 $

0 )+

180

PROJEKT 8

Nie ma tu zbyt wielu nowoci. Zmienilimy kolor tekstu na jasnoszary i wyrwnalimy go

do prawej. Ustawilimy wartoci waciwoci "#,  i 
, eby unikn kopotw
z Explorerem. Ustawilimy rozmiar i rodzaj czcionki. Jedyn prawdziw rnic jest
nadanie waciwoci  wartoci ujemnej, co spowodowao, e element zosta umieszczony
na zewntrz swojego wasnego bloku obejmujcego (patrz rysunek 8.13).
RYSUNEK 8.13.
Umieszczenie informacji
o autorze zdjcia nad
obrazkiem oznacza,
e obrazek ten zosta
spozycjonowany
na zewntrz swojego
bloku obejmujcego

Inne przesunicia
W podobny sposb moglibymy
ustawi informacje o autorze
zdjcia po prawej stronie
obrazka, wykorzystujc
ujemn warto
waciwoci  .

To nie bd, tylko dokadnie to, co miao si sta. Zasadniczo powiedzielimy,

e przesunicie midzy gr elementu
, zawierajcego informacj o autorze zdjcia,
a grn krawdzi bloku obejmujcego powinno wynosi !%). Poniewa dodatnie
wartoci przesuni powoduj dodatnie wartoci odstpu midzy tymi dwoma krawdziami,
to jednoczenie powoduj one przesunicie spozycjonowanych elementw w kierunku
rodka ich bloku obejmujcego. Wynika z tego, e ujemne wartoci powinny wypycha
spozycjonowane elementy na zewntrz.

Wracamy do ycze

Niezgodno szerokoci
Zauwa: mimo e IE5/Mac
i Netscape 6.x s zgodne
z arkuszami stylw CSS
i traktuj waciwo  
inaczej ni   (oraz  ),
to Explorer 4.x, 5.x, i 6.x
w trybie lunego renderowania
traktuj  , jakby by
czci   (oraz  )
elementu. IE6 w trybie cisego
renderowania zgadza si
z arkuszami stylw CSS.

Teraz, kiedy podpis jest bardziej widoczny, musimy co zrobi, aby poprawi wygld ycze.
Moemy to osign, zwikszajc rozmiar czcionki elementu, co zrobimy, ale sprbujemy
take uwypukli to tego elementu w obrbie obramowania obrazka. Bdziemy take chcieli
zwikszy warto wypenienia elementu z yczeniami. Ta zmiana spowoduje konieczno
dodania czarnego obramowania gruboci 1 piksela wok ycze.
*49.*
(&
:/*)$
?#8
 *
/ .B=>
*49)()
:#$
/ 3)=
#$
&=

&"$
&=
%*"$
))+=
)8 &$
&"=
5$
 .
/ *
*1
2 A

)5=
. $
%")=
#**&$
*& 
%"
".

/.B&3*$
#)
3 C" 5.))/ .B&5D
.))
)#)=>

Rwnie atwo moglibymy ustawi warto waciwoci 
 ycze w pikselach,

ale bardziej interesujce bdzie wykorzystanie procentw. (Jeli jeste ambitny, sam oblicz
warto szerokoci). Obramowanie pomaga okreli region ycze, nie naraajc go na
zbytnie nakadanie si na inne elementy, oraz zapobiega wystpieniu efektu chropowatej
krawdzi, co poprzednio widzielimy przy yczeniach. Modernizm gr!

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

181

RYSUNEK 8.14.
Przesunicie ycze
w gr wzgldem
obramowania obrazka
prowadzi do kilku
innych zmian

Wprowadzajc te zmiany, doszlimy do cakiem ciekawego wariantu naszego pierwszego

projektu. Na listingu 8.3 pokazano kompletny arkusz stylw tego projektu.
L I S T I N G 8 .3 . Kompletny arkusz stylw wariantu

0 )
0#)1)8.
()*1.))+
/*0
:)8 &$
.))=>
/* IE5.x workaround */
*49.*
:%*"$
;<F#8=
(& )5$
3=
(&&"$
3=

#$
) 4)=>
*49.*
(&
:/*)$
?#8
 *
/ .B=>
*49)()
:#$
/ 3)=
#$
=
&"$
=
%*"$
@=

)8 &$
&"=
5$
 .
/ *
?,#8
2 A
)5=

. $
%")=
#**&$
?#8=
/.B&3*$
#)
3 C" 5.))/ .B&5D

.))
)#)=>
*49&3)
:5%)&"$
/ *=
57)$
E,#8=
/*)$
E#8
 *
/ .B=

/.B&3*$
 4)=
%*"$
?<;#8=
(&$

3=
#**&$
?;)(=

#$
/ 3)=
#$
<#8=
)5$
E;#8=
&"$
E;#8=>
*49.)*
:5$
EE#8
2 A
)5=
)8 &$
&"=
#$
/ 3)=

#$
E#8=
)5$
=
&"$
=
%*"$
E@=
. $
9FFF=>

0 )+

JESZCZE JEDEN WARIANT

Nie moemy si powstrzyma od jeszcze jednego maego zestawu zmian w projekcie.
Bdzie to wymagao tylko kilku niewielkich zmian. Najpierw przeniemy yczenia na
lew stron i dopasujmy do tego ich style. Bdziemy musieli przesun je nieco w d,
a take troch rozszerzy ramk z yczeniami.
Zauwa, e w tym wariancie, usunlimy z ycze czarne obramowanie (patrz rysunek 8.15).

Wicej informacji na temat

sposobw obchodzenia
problemu niezgodnoci
szerokoci mona znale
w artykule Tricking Browsers
and Hiding Styles,
znajdujcym si w witrynie
WWW tej ksiki.

182

PROJEKT 8

RYSUNEK 8.15.
Jeszcze jedna
stylizacja ycze

*49.*
(&
:/*)$
?#8
 *
/ .B=>
*49)()
:
#$
/ 3)=
#$
%1&=
"#
=
%*"$
)&=

)8 &$
"#=
5$
/ *
?,#8
2 A
)5=
. $
%")=

#**&$
%&%&*&=
/.B&3*$
#)
3 C" 5.))/ .B&5D

.))
)#)=>

Niespozycjonowane
pocieszenie
Sprbuj po prostu usun style
pozycjonujce, aby zobaczy,
jak wyglda teraz kartka
moesz by zaskoczony jej
dobrym wygldem. Symulacja
wersji kartki pozbawionej
stylw nie wymaga niczego
wicej, tylko sprawdzenia
rysunku 8.1.

Jak widzisz, przesuwanie spozycjonowanego elementu z jednego miejsca w inne jest proste
i wymaga tylko kilku dopasowa stylw. Dodatkow zalet jest to, e uytkownik bdzie
nadal mg doskonale przeczyta tekst, nawet jeli korzysta ze starszej przegldarki, ktra
nie obsuguje pozycjonowania.

TWORZENIE KARTKI INTERNETOWEJ Z POZDROWIENIAMI

PRZYKADOWE MODYFIKACJE
Jest wiele innych sposobw na stylizowanie formy podobnej do tej, nad ktr
pracowalimy w tym projekcie. Oto kilka sugestii.

1. Sprbuj wyrodkowa yczenia

z pierwszego wariantu i nada im to
w postaci biaego obrazka typu
halfscreen. Bdziesz musia te
zmieni kolor tekstu na jaki
ciemniejszy. adnie wygldaoby te
tutaj obramowanie. Moe pokusi
si o podwjne, grube obramowanie?

2. Przesu wariant podpisu dosy

daleko w praw stron, aby zwisa
z krawdzi obrazka. Powinno to
da Ci do miejsca, aby umieci
informacje o autorze zdjcia
w dolnym, lewym rogu obrazka,
co byoby wydajniejszym
wykorzystaniem miejsca.

183

184

PROJEKT 8

3. A teraz dodatkowe wyzwanie:

sprbuj wykorzysta szary obrazek
typu halfscreen jako to dla ycze,
biay jako to dla podpisu, a ciemny
z szarym kolorem tekstu na
informacje o autorze zdjcia.
Wszystko to umie na grze
obrazka kartki i niech adne
elementy nie nakadaj si na siebie.
Moesz uywa jakiegokolwiek
obrazka dla kartki, ale dostaniesz
dodatkowe punkty, jeli
wykorzystasz wersj obrazka
z chropowatym obramowaniem.