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

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

Zwiksz szybko!
Optymalizacja serwisw
internetowych
Autor: Andrew B. King
Tumaczenie: Marek Suczyk (rozdz. 1 11),
Jacek Smycz (rozdz. 12 19)
ISBN: 83-7361-134-7
Tytu oryginau: Speed Up Your Site Web Site Optimization
Format: B5, stron: 416
Przykady na ftp: 80 kB
Cierpliwo uytkownika jest jak bomba zegarowa. Kade wejcie na Twoj stron
WWW uruchamia odliczanie. Masz zaledwie kilka sekund, by dostarczy
odwiedzajcemu treci, ktrych poszukuje. Jeli nie zdysz, moesz si poegna
ze swoim gociem (i z ewentualnymi zyskami, ktre osignby dziki jego wizycie).
Nie moesz liczy na szybkie cza. W dalszym cigu wielu goci Twojej witryny uywa
sieci telefonicznej i zwykych modemw. Albo zdysz, nim skoczy si ich cierpliwo,
albo przegrasz. Dlatego powiniene sign po t ksik. Dowiesz si z niej, jak
skrci o poow czas wczytywania strony. Zmniejszysz rozmiary plikw HTML,
XHTML, CSS, ilustracji i skryptw JavaScript oszczdzajc dodatkowo na kosztach
czy. Przykady wzite z praktyki przedstawiaj techniki przynoszce rzeczywiste
rezultaty. Po przeczytaniu tej ksiki bdziesz ju wiedzia, jak tworzy strony
pojawiajce si na ekranie w mgnieniu oka.
Nauczysz si:
Przyspiesza adowanie si stron WWW
Angaowa uytkownikw w proces przegldania strony
Analizowa efekty psychologiczne wywoywane wolnym adowaniem si stron
Zmniejsza rozmiary i stopie skomplikowania plikw HTML
Stosowa skrty w CSS
Przyspiesza i odchudza JavaScript
Zmniejsza rozmiary plikw graficznych i multimedialnych
Oszczdza przepustowo czy (a do 60%!) stosujc kompresj HTTP
Andrew B. King (Andy) jest zaoycielem WebReference.com oraz JavaScript.com
(obie witryny zostay nagrodzone w klasyfikacji stron przeznaczonych dla
programistw). WebReference.com utworzona w 1995 roku, a nastpnie w 1997 r.
zaadoptowana przez Macklermedia (obecnie Jupitermedia) urosa do rangi jednej
z najpopularniejszych stron internetowych dla programistw.
Kto wszed na Twoj stron? Nie ka mu czeka!
Praktyczne sposoby przyspieszania stron WWW
Psychologia cierpliwoci co powoduj, e uytkownicy uciekaj ze strony
Oszczdzanie czasu i oszczdzanie przepustowoci: kompresja HTTP
Zmniejszanie rozmiarw plikw graficznych i multimedialnych.

Spis treci
O Autorze .......................................................................................... 9
Przedmowa...................................................................................... 13
Wstp ............................................................................................. 15

Cz I

Psychologia wydajnoci..................................................21

Rozdzia 1. Czas odpowiedzi: osiem +/ dwie sekundy ....................................... 23

Szybko gwny skadnik wpywajcy na wygod uywania systemu......................25
Krtka historia o wydajnoci sieci ....................................................................................27
Czas reakcji a zadowolenie uytkownika..........................................................................29
Wskanik rezygnacji i granica uwagi................................................................................34
Zdolno dostosowania .....................................................................................................37
Podsumowanie ..................................................................................................................40

Rozdzia 2. Przepyw w projektowaniu stron internetowych ................................. 43

Mihaly Csikszentmihalyi i przepyw.................................................................................44
Co powoduje uczucie przepywu w sieci internetowej? ...................................................46
Uczucie przepywu i projektowanie stron internetowych .................................................50
Podsumowanie ..................................................................................................................52

Cz II

Optymalizacja kodu HTML i XHTML.................................53

Rozdzia 3. Optymalizacja HTML ........................................................................ 55

Co to jest optymalizacja kodu HTML? .............................................................................56
Zoono kodu a przepustowo cza ............................................................................56
Jak nowoczesne przegldarki wsppracuj z HTML?.....................................................59
W jaki sposb optymalizowa HTML? ............................................................................61
Podsumowanie ..................................................................................................................76

Rozdzia 4. Zaawansowane metody optymalizacji ............................................... 77

Wskazwki do projektowania tabel ..................................................................................77
Optymalizacja formularzy.................................................................................................92
Skrty URL .......................................................................................................................98
HTML i kompresja..........................................................................................................100
Podsumowanie ................................................................................................................101

Zwiksz szybko! Optymalizacja serwisw internetowych

Rozdzia 5. Ekstremalny XHTML ...................................................................... 103

Korzyci pynce z XHTML ...........................................................................................104
XHTML kontra HTML ...................................................................................................106
Anatomia dokumentu XHTML.......................................................................................106
Zasady skadni XML.......................................................................................................110
Konwersja z HTML do XHTML ....................................................................................116
Optymalizacja kodu XHTML .........................................................................................117
Podsumowanie ................................................................................................................120

Rozdzia 6. Studium przypadku: PopularMechanics.com.................................... 123

Automatyczna optymalizacja ..........................................................................................126
Optymalizacja rczna ......................................................................................................127
Podsumowanie ................................................................................................................132

Cz III Optymalizacja DHTML: CSS i JavaScript ........................135

Rozdzia 7. Optymalizacja CSS......................................................................... 137
Mdre stosowanie stylw ................................................................................................138
Usuwanie wolnych przestrzeni........................................................................................139
Wycinanie komentarzy....................................................................................................139
Minimalizacja da HTTP ............................................................................................140
Uywanie prostych selektorw i podstawie ..................................................................140
Grupowanie .....................................................................................................................143
Dziedziczenie ..................................................................................................................145
Warstwy stylw a szybko ............................................................................................146
Skracanie waciwoci.....................................................................................................146
Optymalizacja kolorw CSS ...........................................................................................154
Jednostki dugoci: wszystko jest wzgldne ...................................................................156
Podsumowanie ................................................................................................................158

Rozdzia 8. Zaawansowana optymalizacja kodu CSS......................................... 161

Zasady optymalizacji arkuszy CSS .................................................................................161
Elementy zastpcze .........................................................................................................164
Tabele i CSS....................................................................................................................176
Kontrolowanie ukadu za pomoc arkuszy CSS .............................................................177
Podsumowanie ................................................................................................................180

Rozdzia 9. Optymalizacja kodu JavaScript pod ktem szybkoci adowania....... 183

Kiedy zdecydowa si na optymalizacj?.......................................................................184
Zrzucenie zbdnych kalorii .............................................................................................184
Mdre stosowanie JavaScriptu ........................................................................................187
Minimalizacja da HTTP ............................................................................................188
Skrty i odwzorowanie....................................................................................................191
Zagszczanie i zaciemnianie ...........................................................................................192
JavaScript i kompresja ....................................................................................................196
Podsumowanie ................................................................................................................197

Rozdzia 10. Optymalizacja kodu JavaScript pod ktem szybkoci dziaania......... 199
Poziomy projektowania...................................................................................................200
Sprawdzanie zmian .........................................................................................................201
Algorytmy i struktury danych .........................................................................................201
Upraszczanie kodu ..........................................................................................................203
Minimalizacja wspdziaania modelu DOM z wejciem-wyjciem..............................203
Optymalizacja lokalna.....................................................................................................208
Dostrajanie wyrae........................................................................................................220
Podsumowanie ................................................................................................................222

Spis treci

Rozdzia 11. Studium przypadku: DHTML.com .................................................... 225

Cz IV Optymalizacja grafiki i multimediw ..............................229

Rozdzia 12. Optymalizacja grafiki stron internetowych....................................... 231
Tworzenie i przygotowanie obrazkw ............................................................................232
Optymalizacja plikw JPEG ...........................................................................................233
Optymalizacja plikw GIF ..............................................................................................243
Optymalizacja PNG.........................................................................................................250
Czas pobierania: liczba pakietw a rozmiar strony.........................................................255
Na horyzoncie: JPEG2000 i grafika wektorowa .............................................................256
Podsumowanie ................................................................................................................257

Rozdzia 13. Minimalizacja multimediw ............................................................ 259

Podstawy multimediw ...................................................................................................260
Kompresja i optymalizacja audio....................................................................................271
Optymalizacja wideo.......................................................................................................277
Optymalizacja PDF .........................................................................................................289
Podsumowanie ................................................................................................................293

Rozdzia 14. Studium przypadku: Apple.com....................................................... 295

Output (wyjcie)..............................................................................................................296
Tracks (cieki) ...............................................................................................................296
Image (obraz) ..................................................................................................................296
Adjust (dostosowanie).....................................................................................................297
Encode (kodowanie)........................................................................................................297
Audio...............................................................................................................................298
Ostateczne wyniki ...........................................................................................................298

Cz V

Optymalizacja mechanizmw wyszukiwania ...................299

Rozdzia 15. Optymalizacja sw kluczowych ...................................................... 301

Oglny obraz ...................................................................................................................301
Optymalizacja sw kluczowych porady....................................................................304
Strategie projektowe przyjazne dla pajkw...................................................................318
Charakterystyka strony o wysokiej pozycji w rankingach..............................................319
Podsumowanie ................................................................................................................320

Rozdzia 16. Studia przypadkw: PopularMechanics.com i iProspect.com ........... 323

PopularMechanics.com ...................................................................................................323
iProspect.com ..................................................................................................................328

Cz VI Zaawansowane techniki optymalizacji .........................333

Rozdzia 17. Techniki dziaajce po stronie serwera ........................................... 335
Server-Side Includes .......................................................................................................336
Zalety SSI: szybko i dua zgodno ............................................................................337
Dostrajanie mod_include.................................................................................................338
Wykrywanie przegldarek po stronie serwera ................................................................340
Skracanie adresw URL za pomoc mod_rewrite ..........................................................351
Optymalizacja formularzy i CGI.....................................................................................358
Nigdy wicej www..........................................................................................................362
Podsumowanie ................................................................................................................363

Zwiksz szybko! Optymalizacja serwisw internetowych

Rozdzia 18. Kompresowanie stron internetowych .............................................. 365

Algorytmy kompresji tekstu............................................................................................366
Kompresja zawartoci .....................................................................................................367
Kompresja zawartoci: strona klienta .............................................................................369
Kompresja zawartoci: strona serwera............................................................................373
Kompresja zawartoci oparta na proxy ...........................................................................389
Narzdzia oceniajce.......................................................................................................390
Na horyzoncie .................................................................................................................391
Podsumowanie ................................................................................................................392

Rozdzia 19. Studia przypadkw: Yahoo.com i WebReference.com ...................... 395

Skracanie Yahoo.com......................................................................................................395
Skracanie WebReference.com ........................................................................................397

Dodatki ...................................................................................... 399

Skorowidz...................................................................................... 401

Rozdzia 8.

Zaawansowana
optymalizacja kodu CSS
Oprcz omwionych korzyci pyncych z buforowania plikw CSS i zmniejszenia
obcienia cza, CSS pozwala na zastpienie elementw strony, ktre pochaniaj
znaczne zasoby i wyduaj czas adowania (np. grafika nakadkowa), na lekkie
elementy, nieobciajce strony. W tym rozdziale zamieszczone zostay informacje
omawiajce cztery gwne sposoby wykorzystania arkuszy CSS do przyspieszenia
stron internetowych. Zagadnienia te dotycz:

mniejszych rozmiarw arkuszy stylw,

elementw zastpczych,

szybszych tabel,

kontroli ukadu i rozmieszczenia elementw.

Zasady optymalizacji arkuszy CSS

Na podstawie metod, ktrych zdye si nauczy w rozdziale 7., bdziesz mg zobaczy, w jaki sposb przeprowadzana jest optymalizacja starego arkusza stylw strony
WebReference.com (listing 8.1).
Listing 8.1. Oryginalny arkusz stylw WebReference.com


 




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

162

Cz III Optymalizacja DHTML: CSS i JavaScript

) *+,'#$ -..&&!!
/0)**!1#
# 2"1 -33




W powyszym arkuszu mona zauway wiele technik omawianych we wczeniejszych rozdziaach ksiki. Uywane s skrty, jednoznakowe nazwy klas (jak
 i
),
proste selektory typw (), pseudoklasa 
. Arkusz nie jest poczony ze stron,
lecz jest w niej osadzony. Zawsze jednak mona co zrobi lepiej. Wykorzystajmy
skrcone waciwoci  i 
, jak rwnie skorzystajmy ze skrconego zapisu szesnastkowego:


 




 !"#$$
 %&'$"#$
(&'$"#$
*+&'"%
)*+,'#$ -.&!
/0)**!1#
# 2"1-3




Dziki wykorzystaniu skrconych waciwoci oszczdzamy 99 bajtw (ilo znakw

zmniejsza si z 449 do 350). Poniewa skrcona waciwo  wymaga wartoci
, moe pojawi si problem z list definicji, jeeli uytkownik wybierze
czcionk 
. Elementy  bd wwczas pisane czcionk szeryfow, a elementy  bezszeryfow. Aby temu zaradzi, mona ustawi czcionk dla elementu 
na 
:


 


*

 !"#$$
 %&'$"#$
(&'$"#$
*+&'"%
)*+,'#$ -.&!
/0)**!1#
# 2"1-3




Lecz jak si okazuje, duszy zapis waciwoci  i pozostawienie  jest

w rzeczywistoci krtsze o 4 znaki (360 zamiast 364 znakw):


 




 !"#$$
 %&'$"#$

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

163

(&'$"#$
)" *+&'"%
)*+,'#$ -.&!
/0)**!1#
# 2"1-3




W tym miejscu pierwotny arkusz stylw zosta zmniejszony o 20% (z 449 znakw do
360). W dalszej czci optymalizacji mona pogrupowa rodziny czcionki na trzy style
i osobno okreli ich rozmiary:


 




$ $$"#$
  !
  %&'
 (&'
)" *+&'"%
)*+,'#$ -.&!
/0)**!1#
# 2"1-3




Ilo znakw zmniejszya si do 348. Mona uzyska jeszcze lepszy rezultat uywajc oglnych rodzin czcionki, mniejszych rozmiarw oraz skrconej waciwoci 
(listing 8.2).
Listing 8.2. Zoptymalizowany arkusz stylw WebReference.com


 




$ $%&'
 
)" *+&'"%
)*+,' -.&!
/0)**!1#
# 2"1-3




Wielko kodu zostaa zmniejszona do 276 bajtw, czyli o 38 procent wzgldem

pierwotnego rozmiaru. Czy zwrcie uwag na poczenie metody grupowania ze
skrcon waciwoci ? Zauwa, e powyszy kod mona jeszcze bardziej
zmniejszy usuwajc z niego wszystkie znaki kocowe i niepotrzebne spacje (pamitaj, e linia nie powinna by dusza ni 255 znakw). Dziki kaskadowaniu, dziedziczeniu, grupowaniu i skracaniu waciwoci mona zmniejszy rozmiar arkusza CSS
o ponad 50 procent.

Cz III Optymalizacja DHTML: CSS i JavaScript

164

Elementy zastpcze
Coraz wicej przegldarek obsuguje pseudoklas 
arkusza CSS2. Dziki temu
mona uzyska efekty nakadkowe, ktre pobieraj znacznie mniej zasobw ni JavaScript. Mona wyrni dwa podstawowe sposoby optymalizacji elementw nakadkowych:

za pomoc grafiki nakadkowej CSS2 przeroczyste GIF-y oraz kolorowe

ta mog o poow zmniejszy ilo potrzebnych obrazkw,

za pomoc samych nakadek CSS2 obrazki zostaj cakowicie zastpione

tekstem.
Bez wzgldu na to, z ktrego sposobu skorzystasz, zawsze rezultatem bdzie zmniejszenie iloci da HTTP i wielkoci kodu.

Grafika nakadkowa CSS2

Grafika nakadkowa CSS2 polega na uywaniu przeroczystych GIF-w oraz pseudoklasy 
do zmiany ta za obrazkiem nakadkowym. Efekt jest taki sam, jak podczas korzystania z dodatkowych obrazkw i kodu JavaScript. Stuart Robertson z Designmeme.com przedstawi sposb ulepszenia paska narzdzi na stronie Zeldman.com
(rysunek 8.1).
Rysunek 8.1.
Grafika nakadkowa
CSS2 (http://
designmeme.com/
zeldman)

Wszystko, co jest potrzebne, to zaledwie kilka obrazkw z przeroczystymi wycinkami oraz kilka wierszy kodu CSS:
  2)*&& 2"1 -&&&&&&
 # 2"1 -4455&&

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

165

Uproszczony kod HTML wyglda nastpujco:

# 




&
 "
&
  "
&




" 
-&&&&&&

 )))  "1

"
"

""
)
*&&
"
*.


&

6789:6;<;=09>5?@"  
A





Ta pomysowa metoda zmienia kolor ta cza za obrazkiem nakadkowym. Poniewa

tekst na obrazku jest przeroczysty, przebija przez niego kolor ta. Oczywicie powyszy kod mona lepiej zoptymalizowa uywajc skrconej waciwoci 

 i krtkich szesnastkowych zapisw kolorw. Teraz jednak chodzi o przedstawienie samego pomysu. Opisana metoda znakomicie dziaa w starszych przegldarkach
i nie wymaga korzystania z kodu JavaScript.

Proste nakadki CSS

Moesz zrobi kolejny krok i wymieni wszystkie obrazki na CSS2. Proste nakadki
CSS2 uywaj stylw zarwno dla pierwszoplanowych elementw menu, jak i dla
samego ta menu. Autorzy stron znaleli pomysowy sposb na przeksztacenie czy
w nakadki. Niektrzy tworz przyciski trjwymiarowe, inni przeksztacaj cza
w elementy blokowe, a jeszcze inni zmieniaj listy w wewntrzne elementy wierszy.
Bez wzgldu na to, ktry sposb wybierzesz, wszystkie metody bazuj na pseudoklasie

, umoliwiajcej utworzenie prostej nakadki tekstowej.

Proste nakadki tekstowe

Najprostszym sposobem dodania efektu nakadkowego do cza jest uycie pseudoklasy 
. cza s tworzone w normalny sposb, lecz dodawany jest do nich
kolor ta:
# 2"1-3

Z technicznego punktu widzenia powysza metoda moe mie wpyw na wszystkie

zakotwiczone obiekty (nie tylko na cza) i wszdzie wywietla efekt 
. Dokadniejsza definicja stylu 
dla czy jest nastpujca:
2# 2"1-3
## 2"1-3

Dodatkowe informacje
Wicej informacji o grafice nakadkowej CSS mona znale na nastpujcych stronach:

http://www.alistapart.com/stories/rollovers/

http://www.designmeme.com/zeldman/

Cz III Optymalizacja DHTML: CSS i JavaScript

166

W momencie, gdy uytkownik wskae cze, zgodnie z powysz zasad kolor ta cza zmieni si na ty. Aby mie pewno, e zmiana koloru ta nie zmniejszy czytelnoci wywietlanego tekstu, naley rwnie okreli kolor pierwszoplanowy:
2# 2"1-3 -&&
## 2"1-3 -&&

Zebranie wszystkich pseudoklas czy moe zosta zapisane w nastpujcy sposb:

2 -&&B) CD E2B
# -.&!B) CD E 2CB
2# -3B)2   1F2)2EFGCB
## -3B)2   1F2)2EFGCB
2 # B2)CD B
# # B2)CD B

Moesz uzyska odwrotny efekt poprzez zamian koloru pierwszoplanowego z kolorem ta.
2 -&& 2"1- &
# -.&!
2# - & 2"1-&&
## - & 2"1-&&
2 # B2)CD B
# # 

Pionowe menu CSS2

Na stronie WebReference.com utworzone zostay przykadowe pionowe nakadki
CSS2, ktre nie s prawidowo wywietlane w Netscape 4 (http://www.webreference.
com/new/rollovers). W przegldarce Netscape 4 wygldaj niemal identycznie, lecz
nie maj efektu nakadkowego. W przegldarkach obsugujcych pseudoklas 

(Opera 3.5, IE4+, Netscape 6+/Mozilla) dziaaj poprawnie.

Po dokadnych testach znalelimy rozwizanie, ktre dziaao prawidowo we wszystkich przegldarkach biorcych udzia w testach. Uyty zosta znacznik cza dla arkuszy
stylw. Wyniki zostay przedstawione na rysunku 8.2. Listing 8.3 prezentuje kod CSS.
czenie pseudoklas
Internet Explorer dla Windows moe mie pewne problemy z acuchami pseudoklas. Wyglda
na to, e wersje IE4, IE5 i IE6 mog ignorowa wszystkie, z wyjtkiem ostatniej pseudoklasy
w acuchu. Dzieje si to tak dugo, dopki nie pojawi si identyfikator elementu. Na szczcie w tym przypadku nie stanowi to problemu, gdy 
i  
maj
okrelony ten sam styl (Internet Explorer efektywnie skraca oba zapisy do 
). To samo
dotyczy  . Internet Explorer moe zachowywa si dziwnie, gdy zechcesz nada rne
style poczonym pseudoklasom, albo gdy nadasz styl tylko czci z nich. Wikszo projektantw nie ma problemu z takim zachowaniem, gdy uywa prostszego selektora 

albo selektora kontekstowego. Wicej informacji znajdziesz pod adresem http://www.

meyerweb.com/eric/css/tests/css2/sec05-10.htm.

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

167

Rysunek 8.2.
Proste pionowe
nakadki CSS2

Listing 8.3. Pionowe nakadki CSS2 (kod CSS)

 2"1-
H"&"&3" 
#1
)*+,
 2"1-
"&
"*
*-&&&

#1
 2
"&
)*&&'
"&3
)"
*-&&&
 -&&
 

#1)1
#1# 2"1-&&& -

Aby uzyska efekt nakadkowy na caej szerokoci menu, wykorzystana zostaa sztuczka zapoyczona z www.tantek.com. Szeroko cza jest ustawiana na  dla przegldarek innych ni IE6:
#1)1

Autorzy, ktrzy nie chc korzysta z tej sztuczki, mog napisa  dla czy
blokowych. Internet Explorer naoy nakadk tylko na cza. Wszystkie pozostae
przegldarki zgodne z CSS2 bd poprawnie obsugiwa cay pojemnik, a cze bdzie aktywne.
Spacje na listingu 8.4 zostay dodane z myl o zachowaniu czy w starszych przegldarkach. Na zewntrz czy znaczniki 
 mog zostawia pionow luk. Aby
unikn wywietlania luk, naley przenie je na zewntrz czy i nie stosowa stylu
dla przegldarek niezgodnych z CSS:
#1

Cz III Optymalizacja DHTML: CSS i JavaScript

168

Listing 8.4. Pionowe nakadki CSS (kod HTML)

I;4@7J?K@69J=L9>4
M34I@IK@69H&*?/

))))3"@<H 







J2C2400+


2


"%3 

 






# 
1


H61@
H


1 
J1 




# 
0# 




1
:1




  
4 



#





Aby najwyszy element menu by rwnie aktywny, mona zmieni nagwek w styl
cza, analogicznie do pozostaych elementw:

# 
1




K




1 
J1 



Pojawia si jednak inny problem grna krawd menu jest rysowana podwjn lini, gdy zarwno zewntrzny , jak i cze  maj krawd grn (rysunek 8.3).
Rysunek 8.3.
Proste pionowe
nakadki CSS2
zwr uwag
na podwjn
krawd grn

Aby pozby si dodatkowej linii, wystarczy usun j z grnej krawdzi , tak jak
zostao to przedstawione poniej (spjrz na rezultat na rysunku 8.4):
#1
)*+,
 2"1-
"&
"*
*-&&&
&B11N)GODPB


Rozdzia 8. Zaawansowana optymalizacja kodu CSS

169

Rysunek 8.4.
Proste pionowe
nakadki CSS2
z pojedyncz
grn krawdzi

W przypadku korzystania z polece CSS2, ktre mog by przyczyn potencjalnych

problemw w Netscape 4, mona opcjonalnie zastosowa dyrektywy 
, aby
czyta z zewntrznego arkusza stylw. Powysze przykady zostay przedstawione
dla czarno-biaych kolorw. Generalnie nie zalecam uywania czarnych czy. Nawet
w menu uytkownicy spodziewaj si domylnego, niebieskiego koloru czy. cza
powinny odrnia si od zwykego tekstu.

Prawdziwy przykad nakadek CSS2

Projektanci zamieniaj stare nakadki bazujce na grafice i kodzie JavaScript na nowe,
lekkie menu CSS2. Przyjrzyjmy si prawdziwym przykadom korzystajcym z nakadek CSS2. Zacznijmy od Designmeme.com.

Designmeme.com
Stuart Robinson, webmaster na Uniwersytecie Guelph w Kanadzie, na swojej stronie
internetowej uywa dwch typw nakadek CSS2, ktre zostay przedstawione na rysunku 8.5. Z lewej strony widoczne jest menu utworzone za pomoc przeroczystych
GIF-w i pseudoklasy 
(bez korzystania z nakadek graficznych JavaScript). Pionowy pasek menu, widoczny po prawej stronie, korzysta natomiast z prostych nakadek CSS2, bez adnej dodatkowej grafiki.
Rysunek 8.5.
Designmeme.com

Cz III Optymalizacja DHTML: CSS i JavaScript

170

Stuart Robinson jest pionierem w dziedzinie nakadek CSS, ktrych uywa od maja
2001 r.

Strona CSS Edge Erica Meyera

Eric Meyer jest autorem ksiek: Cascading Style Sheets: The Definitive Guide
(OReilly, 2000 r.) (CSS. Kaskadowe arkusze stylw. Przewodnik encyklopedyczny,
Helion, 2001 r.) oraz Eric Meyer on CSS (New Riders, 2002 r.). W swoich ksikach omawia wiele technik uywania arkuszy CSS. Na jego stronie CSS Edge mona
znale wiele technik opartych na arkuszach stylw CSS, ktre mog poprawnie pracowa w nowszych przegldarkach (rysunek 8.6).
Rysunek 8.6.
Strona CSS Edge
Erica Meyera
(http://www.meyerweb.
com/eric/css/edge/)

Poziome nakadki CSS2

Uywajc podobnych metod i bez stosowania sztuczki  , mona utworzy
poziome nakadki CSS2. Mike Hall na stronie Brainjar.com przedstawia bardzo dobry
przykad poziomego paska menu bazujcego na nakadkach CSS2 (rysunek 8.7). Poprzez wykorzystanie offsetu i efektu jasnych krawdzi (ang. light-sourced) przyciski
menu zyskay trjwymiarowy wygld.
Mike Hall poszed krok dalej, dodajc hierarchiczne rozwijane menu korzystajce
z -w i odrobiny JavaScript. Menu jest poprawnie wywietlane w Netscape 6 i Internet Explorerze 5.5, lecz nie sprawdza si w IE5 Mac i Operze1 (rysunek 8.8).
Dziki Kwon Ekstrom i za pozwoleniem Mikea Halla moemy zajrze do rodka
trjwymiarowego menu, aby wycign z niego to, co najistotniejsze. Zacznijmy od
HTML:

Opera 7.x radzi sobie ju z opisan technik do dobrze przyp. red.

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

171

Rysunek 8.7.
Strona BrainJar
Mikea Halla
(http://www.
brainjar.com/)

Rysunek 8.8.
Strona BrainJar.
Hierarchiczne menu
oparte na modelu
DOM

# 
1
)
*&&'


 
1 #


K


 
1

1 
J1 


 
1

# 
0# 


 
1

  
4 


#


Jedyn niestandardow rzecz w powyszym zapisie jest klasa  . Zoptymalizowany arkusz stylw na listingu 8.5 definiuje pasek nawigacyjny i sprawia, e aktywny
przycisk wyglda tak, jakby by wcinity.

Cz III Optymalizacja DHTML: CSS i JavaScript

172

Listing 8.5. Trjwymiarowe poziome menu CSS2


 2"1-
 -&&&

#1$#11
!$# $
 
 1

#1
 2"1-&
"H+
+
 -!-(((-(((-!
"B Q2)B

#11
 2"1
*-&
 11
&
&
"*
"*H
#
 *&&

#11#
 2"1
 -!-!!3-!!3-!
 1

#1 #$
#1L ##
 2"1-(((
 -333-!-!-333
 -
*
*


Zasada 
 i odpowiadajce jej style 

s kluczem do sukcesu. Przycisk jest
definiowany tym samym kolorem ta (przeroczysty), co otaczajcy go , dziki czemu
wtapia si on w pasek nawigacyjny. Ustawiajc offset i cie, mona zasymulowa
wygld wcinitego przycisku (rysunek 8.9). Styl 

zmienia kolor wszystkich czterech krawdzi, nadajc trjwymiarowy wygld. Aktywny styl 
przesuwa przycisk o 1 piksel w d i w prawo, zamieniajc kolory krawdzi i przyciemniajc to. Wicej informacji o pasku menu znajdziesz na stronie BrainJar.com w czci
Revenge of the Menu Bar.

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

173

Rysunek 8.9.
Pasek menu CSS2

Dynamiczny pasek menu CSS2

Mona poczy ide interaktywnego trjwymiarowego przycisku z warunkowym SSI
i utworzy dynamiczny pasek menu oparty na CSS2. Zacznijmy od prezentacji kodu
HTML paska menu i odpowiadajcemu arkuszowi CSS (listing 8.6).
Listing 8.6. Szablon HTML paska menu CSS2




I21400



 



R
 1 









- 1#1
 1+






Powyszy kod pozwala na umieszczenie na stronie paska menu o szerokoci strony.

Konieczna jest aktualizacja tylko dwch plikw. Zwr uwag, e doczony zostaje
plik HTML, a nie plik tekstowy. Poprzez ustawienie flagi w pliku konfiguracyjnym
serwera (patrz rozdzia 17.) mona doczy warunkowy SSI w kadym doczonym
pliku HTML (listing 8.7).
Listing 8.7. Warunkowe SSI paska menu

-
STI;4=6?/@U=<> VW1 WBX


# 
1
)
*&&'


 
1


K


 
1 #

1 
J1 


 
1

# 
0# 


 
1

  
4 


#

-
STI;4=6?/@U=<> VW# WBX


# 
1
)
*&&'


 
1


K


 
1

1 
J1 


 
1 #

# 
0# 


 
1

  
4 


#

-
STI;4=6?/@U=<> VW  WBX


# 
1
)
*&&'


 
1


K


 
1

1 
J1 


 
1

# 
0# 


 
1 #

  
4 


#

Cz III Optymalizacja DHTML: CSS i JavaScript

174

-
SSTI;4=6?/@U=<> VWTXYYSTI;4=6?/@U=<>
VWWXX


# 
1
)
*&&'


 
1 #


K


 
1

1 
J1 


 
1

# 
0# 


 
1

  
4 


#

-

# 
1
)
*&&'


 
1


K


 
1

1 
J1 


 
1

# 
0# 


 
1

  
4 


#

-

Nakadkowy pasek menu bdzie zmienia wygld aktywnego przycisku. Przycisk bdzie aktywny, jeeli kursor bdzie znajdowa si w danym menu hierarchicznym, wywietlonym za pomoc tego przycisku. W arkuszu stylw z listingu 8.5 wystarczy
zmieni lokalizacj klasy  w HTML. Przykadowo, przy wybraniu pozycji
, warunkowy SSI z listingu 8.7 sprawdza biecy URL i znajduje odpowiedni instrukcj:

-
STI;4=6?/@U=<> VW  WBX


Wyraenie odpowiada kademu adresowi URL zaczynajcemu si od , jak

np. 
 (rysunek 8.10).
Rysunek 8.10.
Dynamiczny pasek
menu CSS2

To samo przypisanie  mona uzyska za pomoc kodu JavaScript, lecz jak
wida na powyszym przykadzie mona si bez niego obej.

Menu oparte na licie

Christopher Schmitt, zaoyciel BabbleList.com, jest najprawdopodobniej pierwsz
osob, ktra opublikowaa sztuczk polegajc na uzyskaniu poziomego nakadkowego menu przy uyciu  na elementach listy. Na rysunku 8.11 przedstawiony zosta przykad.
Rysunek 8.11.
Strona CSSBook.com
Christophera
Schmitta. Menu
oparte na licie
(http://www.cssbook.
com/cssnav/css2.html)

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

175

Rnica pomidzy t i wczeniej opisan metod polega na tym, e w tym przypadku

elementy menu s oddzielone od siebie wewntrznymi elementami listy. Korzy jest
taka, e aktywny jest cay pojemnik, ktry w caoci jest czem. Margines wok cza tworzy przestrze otaczajc tekst. Nie ma potrzeby, aby uywa czy elementw blokowych. Poniej przedstawiony zosta kod HTML:

#
#

/#"

1


2
:2






L




1 2
41 2




1

I1






?


1
#

W prosty i jasny sposb   otacza nieuporzdkowan list. Wystarczy nada

styl wywietlania listy ( zamiast domylnego  ):
-#
"&
"&
B  2)")B
 &!
Z$:$K# $


Nastpnie naley doda troch marginesu wewntrznego i efekt 

:
-#

"(
"&
 -333
 2"1 - 
 &!
Z$:$K# $
 

-##
 -
 2"1 -...
 &!
Z$:$K# $
 


Zauwa, e powyszy kod mona zoptymalizowa za pomoc skrconych waciwoci i usunicia paru nadmiarowych informacji. Kocowy, zoptymalizowany kod arkusza stylw zosta przedstawiony na listingu 8.8.
Listing 8.8. Zoptymalizowane menu oparte na elementach listy
-#
1
*+
*+
 -
 2"1
&!#$$# $


Cz III Optymalizacja DHTML: CSS i JavaScript

176
-#1$1
"&
"&


-#
"&
"&

&!#$$# $

-#

"(
"&
 -333
 2"1- 
&!#$$# $
 

-##
 -
 2"1-...

-# #
 - 
 2"1-333


Tabele i CSS
W rozdziale 4. Zaawansowane metody optymalizacji dowiedziae si, w jaki sposb naley przyspiesza wywietlanie tabel za pomoc waciwoci CSS2   
!  oraz elementw 
 i . Innym sposobem jest wykorzystanie
arkuszy CSS do okrelenia koloru ta komrek tabeli. Dziki temu nie trzeba w kadym miejscu pisa 
. Zamiast:

" 
- &&


" 
2





" 
2



Dodatkowe informacje
Wicej informacji o menu opartym na wewntrznych elementach listy mona znale na
stronie Christophera Schmitta CSSBook.com albo w jego ksice Designing CSS Web Pages, New Riders, 2002 r. Polecam rwnie stron Davea Lindquista, omawiajc menu
DHTML tworzone na bazie list (rozwijane i rozszerzalne poniej 6 kB) http://www.gazingus.
org/dhtml/?id=109.

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

177

naley napisa:
 2"1- & 2"1-!  2"1-3 

 



 






 




Wszystkie przegldarki od wersji 4. obsuguj powysz metod.

Kontrolowanie ukadu
za pomoc arkuszy CSS
Rozmieszczenie elementw strony za pomoc arkuszy CSS moe przeksztaci stary
tabelaryczny ukad w elegancki ukad bazujcy na CSS. Wielu projektantw przekonao si, e zmiana sposobu rozmieszczenia elementw moe zmniejszy obcienie
cza oraz koszty utrzymania. Pozbycie si tabel daje rwnie wiksz elastyczno,
pozwalajc na wywietlanie rnej zawartoci z tymi samymi stylami. Przenoszc
warstw prezentacyjn do arkuszy stylw, struktura dokumentu staje si przejrzysta.
Zmiana ukadu strony sprowadza si do zmiany jednego arkusza stylw. Przeniesienie
zawartoci na inn platform (inn przegldark lub wersj przegldarki) albo inny
typ mediw wymaga jedynie zastosowania innego arkusza stylw i nie zmusza do ponownego przepisywania kodu dokumentu.
Najpopularniejszym ukadem jest struktura dwu- lub trjkolumnowa (zachowanie
zgodnoci z Netscape 4 jest tutaj pewnym wyzwaniem). Spjrzmy na przykadowy
ukad trjkolumnowy z listingu 8.9.
Listing 8.9. Ukad trjkolumnowy stary sposb





 
+


"G2)" OS 2)2X










)2)" O






"CG) 








Cz III Optymalizacja DHTML: CSS i JavaScript

178

W arkuszu CSS komrki tabeli s zastpione elementami  (listing 8.10).

Listing 8.10. Ukad trjkolumnowy nowy sposb

#
#


"G2)" OS 2)2X


#

#
#


)2)" O


#

#



"CG) 


#

Powyszy kod jest znacznie bardziej przejrzysty. Zwr uwag, e elementy  s
nazywane funkcjonalnie, a nie na podstawie lokalizacji. Dodajmy teraz CSS, aby odpowiednio rozmieci elementy (listing 8.11).
Listing 8.11. Ukad trjkolumnowy CSS


 



#-#
 2"1- 
)1
"&
"&,

#-#
 2"1-

)+,'
""&,
"&,

#-
 2"1-& 
"+,'
"&,





Kluczowymi elementami dla ukadw dwu- i trjkolumnowych s: , 

 
i
.  przesuwa dany element do prawej lub lewej strony (pozostaa zawarto
go otacza). W tym przypadku nawigacyjny  jest ustawiony po lewej stronie, ma
okrelon szeroko i margines wewntrzny oraz margines zewntrzny po stronie prawej. Dla gwnej zawartoci  ustawiany jest lewy margines zewntrzny, ktry ma
odpowiada szerokoci elementu przesunitego do lewej strony.

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

179

Zwikszenie skutecznoci
Im wyej umiecisz gwn zawarto dokumentu w kodzie HTML, tym wiksza bdzie skuteczno wyszukiwania sw kluczowych na stronie. Mona wykorzysta
CSS do sztuczki wywietlania tabeli opisanej w rozdziale 4. Na listingu 8.12 przedstawiony zosta sposb odwrotnego wyrwnywania elementw zamiast przesunicia paska nawigacyjnego do lewej strony gwna zawarto  jest przesuwana do
strony prawej.
Listing 8.12. Udoskonalony ukad trjkolumnowy (kod CSS)


 



#-#
 2"1- 
)1
"&
"&,

#-
"
)(,'
 2"1-& 
"&,
"&,

#-#
 2"1-
""(,'
"&,





Mona teraz zamieni pozycje -w  z , umieszczajc gwn zawarto
wczeniej w kodzie HTML (listing 8.13).
Listing 8.13. Udoskonalony ukad trjkolumnowy (kod HTML)

#
#


"G2)" OS 2)2X


#

#



"CG) )Q[


#

)2)" O


#

Strona wyglda identycznie, lecz gwna zawarto jest wczeniej umieszczona w kodzie, dziki czemu jest szybciej wywietlana. Jeeli chcesz, moesz j nawet umieci
na samej grze dokumentu, a dopiero za ni  z reklamami i nawigacj.

Cz III Optymalizacja DHTML: CSS i JavaScript

180

Dodatkowe informacje
Na poniszych stronach znajdziesz dodatkowe informacji o sposobach tworzenia ukadw
dokumentw na podstawie CSS:

http://www.alistapart.com A List Apart korzysta z ukadu opartego na arkuszach

CSS i uczy programistw, jak z nich korzysta.

http://www.meyerweb.com/eric/css/edge/ strona CSS Edge Erica Meyera jest

prawdziwym placem zabaw z metodami bazujcymi na arkuszach CSS.

http://developer.apple.com/internet/css/introcsslayout.html wstp do ukadw

stron opartych na arkuszach CSS (autorstwa Erica Costello).

Podsumowanie
Aby w peni wykorzysta arkusz CSS, niezbdne jest przeksztacenie kodu dokumentu. Naley korzysta ze skrconych nazw  i , uywa skrconych waciwoci oraz grupowa waciwoci minimalizujc rozmiar arkusza stylw. Naley
zamieni stary tabelaryczny ukad dokumentu oraz nakadki oparte na obrazkach
i JavaScripcie na struktur bazujc na arkuszach CSS. Aby zmniejszy tabele, naley
nada styl za pomoc arkuszy CSS (a nie umieszcza w kadym miejscu waciwoci

). Warto take przenie gwn zawarto dokumentu na wysz pozycj
w kodzie HTML (sztuczka wywietlania tabeli albo metody CSS). Poniej przedstawiona zostaa lista wskazwek omwionych w niniejszym rozdziale:

Uywaj skrconych waciwoci, grupowania i skrtw do optymalizacji

arkuszy CSS.

Zamieniaj kod efektw nakadkowych JavaScript/obrazki na CSS.

Twrz efekty nakadkowe CSS2 za pomoc pseudoklasy 
,

stylizowanych czy albo list.

Uywaj   ! , 
 i , aby zwikszy prdko

wywietlania tabel.

Uywaj arkuszy CSS do ustawiania kolorw komrek tabeli (dziaa tylko

z przegldarkami w wersji 4+).

Definiuj ukad i rozmieszczenie elementw poprzez arkusze CSS i XHTML,

aby oddzieli warstw prezentacyjn od struktury i zmniejszy rozmiar kodu.

Staraj si, aby ukad dokumentu by elastyczny.

Zwiksz skuteczno wyszukiwania na swojej stronie.

Rozdzia 8. Zaawansowana optymalizacja kodu CSS

Polecane publikacje

Cascading Style Sheets: The Definitive Guide, Eric Meyer, OReilly 2000r.

(CSS. Kaskadowe arkusze stylw. Przewodnik encyklopedyczny, Helion, 2001 r.)

doskonae wprowadzenie do CSS.

Eric Meyer on CSS, Eric Meyer, New Riders, 2002 r. Meyer przedstawia

prawdziwy wiat CSS (13 projektw konwersji).

A List Apart pod przewodnictwem Jefferya Zeldmana (http://www.alistapart.com)

dobre rdo informacji o standardach internetowych, w tym midzy innymi o CSS.

Cascading Style Sheets 1, 2 i 3, World Wide Web Consortium

(http://www.w3.org/Style/CSS/) oficjalna specyfikacja CSS.

The Web Standards Project pod przewodnictwem Jefferya Zeldmana

(http://www.webstandards.org) ustalenie standardw dla producentw

przegldarek internetowych. Powrt do WaSP (The Web Standards Project).

181