Professional Documents
Culture Documents
CSS Według Erica Meyera. Sztuka Projektowania Stron WWW
CSS Według Erica Meyera. Sztuka Projektowania Stron WWW
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
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
17
47
67
89
103
123
147
167
185
209
231
255
273
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)
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
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+
(&
.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
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.
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?
171
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
172
PROJEKT 8
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).
173
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 )+
RYSUNEK 8.7.
Podpis zosta
rozmieszczony
na podstawie zarwno
odziedziczonych,
jak i specjalnie
okrelonych stylw
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 )+
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
177
*49.)*
:. $
4)=
57)$
,@=
)8 &$
&"=
#$
) 4)=
#$
E#8=
(&&"$
?;#8=>
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:
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
RYSUNEK 8.11.
Teraz podpis wyglda
bardziej jak wizytwka,
ale nie jest jeszcze
na swoim miejscu
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 )+
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.
180
PROJEKT 8
Inne przesunicia
W podobny sposb moglibymy
ustawi informacje o autorze
zdjcia po prawej stronie
obrazka, wykorzystujc
ujemn warto
waciwoci .
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
.))
)#)=>
181
RYSUNEK 8.14.
Przesunicie ycze
w gr wzgldem
obramowania obrazka
prowadzi do kilku
innych zmian
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.
PRZYKADOWE MODYFIKACJE
Jest wiele innych sposobw na stylizowanie formy podobnej do tej, nad ktr
pracowalimy w tym projekcie. Oto kilka sugestii.
183
184
PROJEKT 8