Kuloodporne strony internetowe.

Jak poprawi elastyczno

z wykorzystaniem XHTML-a
i CSS. Wydanie II
Autor: Dan Cederholm
Tumaczenie: Anna Trojan
ISBN: 978-83-246-1474-5
Tytu oryginau: Bulletproof Web Design: Improving
flexibility and protecting against worst-case
scenarios with XHTML and CSS (2nd Edition)
Format: 170x230, stron: 328
Poznaj tajniki projektowania doskonaych stron internetowych
Jak zbudowa elastyczne mechanizmy nawigacyjne?
W jaki sposb stosowa elementy pywajce?
Jak w peni wykorzysta moliwoci kaskadowych arkuszy stylw?

W coraz dynamiczniej rozwijajcym si internecie kadego dnia pojawiaj si tysice

witryn WWW. Wiele z nich to prawdziwe arcydziea zarwno pod wzgldem
projektowym, jak i merytorycznym. Czsto jednak, otwierajc swoj ulubion witryn
WWW nie w tej przegldarce, co dotychczas, widzimy co zupenie innego! Ile razy,
podczas projektowania witryny WWW szukamy rozwizania problemw zwizanych
z rnymi interpretacjami standardw W3C w rnych przegldarkach? Ile czasu zajmuje
zmiana ukadu graficznego strony lub dodanie nowych elementw? Ilu projektantw
stron WWW zastanawia si nad tym, jak poprawi ich elastyczno i uniwersalno?
Ksika Kuloodporne strony internetowe. Jak poprawi elastyczno z wykorzystaniem
XHTML-a i CSS. Wydanie II opisuje techniki tworzenia niemal doskonaych witryny
WWW. Doskonaych bo wygldajcych rwnie dobrze w kadej przegldarce i przy
kadej rozdzielczoci ekranu, atwych w nawigacji i prostych w rozbudowie. Czytajc j,
poznasz najnowsze standardy XHTML i CSS, nauczysz si odpowiednio dobiera
czcionki i ich rozmiary, korzystajc z jednostek em; dowiesz si, jak pozycjonowa
elementy strony i budowa uniwersalne mechanizmy nawigacyjne. Odkryjesz sposoby
tworzenia uniwersalnych stron internetowych.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Dobr rozmiaru i jednostek miary tekstu

Skalowalne menu
Zastpowanie tabel elementami pywajcymi
Pozycjonowanie skadnikw strony
Definiowanie stylw dla ramek
Oddzielanie warstwy prezentacji od treci strony
Korzystanie z narzdzi do weryfikacji konstrukcji strony
Budowanie skalujcego si ukadu strony

Wykorzystaj wiedz zawart w tej ksice i twrz strony internetowe,

ktre zachwyc nie tylko wygldem, ale te uniwersalnoci

Spis treci

Wprowadzenie ............................................................................ 9
Rozdzia 1. Elastyczny tekst ........................................................................15
Rozmiar tekstu naley ustala przy uyciu sw kluczowych oraz wartoci
procentowych lub em, dziki czemu uytkownicy bd mieli nad
nim kontrol ....................................................................................... 16
Czste rozwizanie ................................................................................... 17
Wszystkie moliwoci ............................................................................... 20
Rozwizanie kuloodporne ........................................................................ 22
Dlaczego rozwizanie to jest kuloodporne ............................................... 27
Elastyczna baza i co dalej? ................................................................... 28
Stosowanie sw kluczowych i wartoci procentowych ............................ 32
Elastyczny rozmiar tekstu dziki em ......................................................... 38
Podsumowanie ......................................................................................... 40

Rozdzia 2. Skalowalna nawigacja ..............................................................43

Naley zapewni nawigacj, ktra skaluje si w zalenoci
od ustawionej wielkoci tekstu oraz od objtoci treci
umieszczonych na stronie ................................................................... 44
Czste rozwizanie ................................................................................... 45
Dlaczego rozwizanie to nie jest kuloodporne ......................................... 47
Rozwizanie kuloodporne ........................................................................ 49
Dlaczego rozwizanie to jest kuloodporne ............................................... 58
Podobny przykad wykorzystujcy em ...................................................... 59
Dodatkowe przykady ............................................................................... 61
Podsumowanie ......................................................................................... 64

Rozdzia 3. Elastyczne wiersze ....................................................................67

Nie naley definiowa wysokoci poziomych elementw strony i trzeba
zaplanowa moliwo powikszenia ich w pionie ............................. 68
Czste rozwizanie ................................................................................... 69
Dlaczego rozwizanie to nie jest kuloodporne ......................................... 70
Rozwizanie kuloodporne ........................................................................ 72
Dlaczego rozwizanie to jest kuloodporne ............................................... 87
Inny przykad rozcigania ......................................................................... 88
Podsumowanie ......................................................................................... 93

Spis treci

Rozdzia 4. Pomysowe rozmieszczanie elementw ................................... 95

Zamiast stosowa tabele, lepiej jest uywa elementw pywajcych ...... 96
Czste rozwizanie ................................................................................... 97
Dlaczego rozwizanie to nie jest kuloodporne ......................................... 98
Rozwizanie kuloodporne ........................................................................ 99
Dlaczego rozwizanie to jest kuloodporne ............................................. 136
Podsumowanie ...................................................................................... 136

Rozdzia 5. Niezniszczalne ramki .............................................................. 139

Zanim zacznie si tworzy style dla ramek, naley wszystko dokadnie
zaplanowa ...................................................................................... 140
Czste rozwizanie ................................................................................. 141
Dlaczego rozwizanie to nie jest kuloodporne ....................................... 143
Rozwizanie kuloodporne ...................................................................... 144
Dlaczego rozwizanie to jest kuloodporne ............................................. 150
Inne techniki tworzenia zaokrglonych naronikw ............................... 151
Iluzja ramki ............................................................................................ 159
Podsumowanie ...................................................................................... 166

Rozdzia 6. Brak rysunkw? Brak CSS? Brak problemw! ........................ 169

Naley upewni si, e tre strony jest czytelna, nawet jeli strona
zostanie pozbawiona rysunkw i stylw CSS .................................... 170
Czste rozwizanie ................................................................................. 171
Dlaczego rozwizanie to nie jest kuloodporne ....................................... 174
Rozwizanie kuloodporne ...................................................................... 174
Dlaczego rozwizanie to jest kuloodporne ............................................. 176
Ze stylami lub bez .................................................................................. 179
Test Dig Dug .......................................................................................... 184
Narzdzia do sprawdzania kuloodpornoci stron ................................... 185
Podsumowanie ...................................................................................... 193

Rozdzia 7. Konwersja tabel ...................................................................... 197

Naley usun z tabel kod prezentacyjny, a ich wygld zdefiniowa
za pomoc CSS ................................................................................. 198
Czste rozwizanie ................................................................................. 199
Dlaczego rozwizanie to nie jest kuloodporne ....................................... 200
Rozwizanie kuloodporne ...................................................................... 201
Dlaczego rozwizanie to jest kuloodporne ............................................. 222
Podsumowanie ...................................................................................... 224

Rozdzia 8. Pynny oraz elastyczny ukad strony ...................................... 225

Eksperymentuj z projektowaniem ukadw stron, ktre rozszerzaj si
i zwaj ........................................................................................... 226
Czste rozwizanie ................................................................................. 227
Dlaczego rozwizanie to nie jest kuloodporne ....................................... 229
Rozwizanie kuloodporne ...................................................................... 231

Kuloodporne strony internetowe

Dlaczego rozwizanie to jest kuloodporne ............................................. 264
Ukad strony oparty na em ..................................................................... 264
Podsumowanie ....................................................................................... 272

Rozdzia 9. czenie w cao ....................................................................275

Zastosuj kuloodporne rozwizania do projektu caej strony
internetowej ..................................................................................... 276
Cel .......................................................................................................... 277
Dlaczego rozwizanie to jest kuloodporne ............................................. 278
Konstrukcja ............................................................................................ 283
Modyfikacja stylw ze wzgldu na przegldark IE ................................ 310
Podsumowanie ....................................................................................... 314

Skorowidz ...................................................................................................315

Rozdzia 2. Skalowalna nawigacja[RS1]

SKALOWALNA
NAWIGACJA

44

Rozdzia 2.

Naley zapewni nawigacj,

ktra skaluje si w zalenoci
od ustawionej wielkoci tekstu
oraz od objtoci treci
umieszczonych na stronie
Nawigacja czsto stanowi najwaniejszy element projektu witryny internetowej. Komponent ten umieszczony jest w widocznym miejscu i kady
uytkownik witryny z niego korzysta. Tradycyjny sposb projektowania
polega na tym, e twrca witryny otwiera ulubiony program graficzny
i rysuje przyciski, zakadki czy tekst, ktre zostan osadzone wewntrz
kilku zagniedonych tabel. Czsto stosowany jest te efekt podmiany,
ktry pozwala zastpowa jeden zestaw grafik innym, gdy uytkownik
najedzie mysz na odpowiedni obszar. Do uzyskania tego efektu wykorzystuje si na przykad skrypty jzyka JavaScript. Utworzona w taki
sposb strona moe wyglda olniewajco, jednak kryjcy si za ni
kod moe nie by ju tak perfekcyjny, co zobaczymy na przykadzie
czsto stosowanego rozwizania.
Przyjrzyjmy si naszemu przykadowi stylowym zakadkom zaprojektowanym w tradycyjny sposb i umieszczonym na stronie w postaci
obrazkw. Najpierw przeanalizujemy wady takiego rozwizania, a nastpnie zaprojektujemy bardzo podobny komponent, tyle e bdzie
on kuloodporny. Nasze rozwizanie bdzie si skada z poprawnego
i zwizego kodu, trzech niewielkich obrazkw oraz stylw CSS.

Skalowalna nawigacja

Czste rozwizanie
Zakadki nawigacyjne z witryny LanceArmstrong.com (rysunek 2.1) wybraem jako przykad z dwch powodw. Pierwszy powd jest taki,
e jestem fanem Lancea Armstronga. Drugi bardziej istotny to
fakt, i wykorzystanie CSS przy przebudowie tego projektu moe znacznie zwikszy jego elastyczno. Naszym celem jest pomysowe zastosowanie stylw CSS, dziki czemu bdziemy mogli pozby si duych
kawakw kodu, a nowa wersja witryny bdzie atwa w utrzymaniu
oraz skalowalna.

Rysunek 2.1. adnie zaprojektowane zakadki nawigacyjne w witrynie

LanceArmstrong.com, w ktrych wyranie wyrniono aktywny
i nieaktywny stan zakadek
Przyjrzyjmy si dokadnie naszemu przykadowi i sprawdmy, jakie elementy projektowe si na niego skadaj.

WYRANE ZAKADKI
Zakadki z przykadu charakteryzuje pewien detal, dziki ktremu odrniaj si one od zwykych zakadek skadajcych si z obramowania
oraz ta. To kadej zakadki zarwno w stanie aktywnym, jak i nieaktywnym posiada wypenienie gradientowe. Jako to zakadek
wywietlony jest powtarzany w poziomie wski obrazek, ktrego kolor
stopniowo zmienia si z ciemniejszego u gry na janiejszy u dou
zakadki (biay w przypadku stanu aktywnego oraz jasnoty w przypadku stanu nieaktywnego). Na samej grze zakadki widoczne jest
take podwietlenie o szerokoci jednego piksela jest to pasek, ktrego kolor jest o jeden odcie janiejszy ni kolor zakadki. Pasek ten
wprowadza wraenie trjwymiarowoci tak jakby wiato padao
z gry strony na d (rysunek 2.2).
Zanim przejd do dalszych rozwaa, chc podkreli, e projekt zakadek wyglda wietnie. Ocena projektu jest spraw gustu (kady moe
mie inne zdanie), dlatego powinnimy przynajmniej zgodzi si, e
kto powici duo czasu, by nawigacja w witrynie LanceArmstrong.
com bya atrakcyjna i funkcjonalna. Cel zosta osignity i jest to
kolejny argument za tym, by witryna ta posuya nam za przykad.

45

46

Rozdzia 2.

Rysunek 2.2. Powikszenie, na ktrym szczegowo przedstawiono

obydwa stany zakadek. Na grze kadej zakadki widoczne jest
delikatne podwietlenie, a kolor zakadki stopniowo si zmienia
takie rozwizanie daje efekt trjwymiarowoci zakadki
i padajcego z gry wiata
W witrynie LanceArmstrong.com wszystkie zestawy zakadek (kady
z inn wyrnion zakadk) to osobne obrazki. Na kadym z nich
znajduje si take logo witryny. Na rysunku 2.3 widoczny jest jeden
z czterech dostpnych obrazkw.

Rysunek 2.3. Cay zestaw zakadek i logo umieszczone s w jednym duym obrazku.
W witrynie wykorzystywane s przynajmniej trzy inne bardzo podobne obrazki (rnice
si tylko tym, ktra zakadka jest podwietlona)

EFEKT PODMIANY
W pasku nawigacyjnym witryny LanceArmstrong.com nie jest aktualnie
wykorzystywany aden efekt podmiany. Dodanie go nie jest rzecz
niemoliw wystarczy napisa skrypt w jzyku JavaScript oraz wczeniej zaadowa pozostae obrazki jednak byoby to zwizane
z dodatkowym zwikszeniem iloci kodu. W dalszej czci tego rozdziau, w podrozdziale Rozwizanie kuloodporne, odtworzymy przykadowy projekt i dodamy do niego efekt podmiany obrazkw. Uzyskamy go jednak dziki wprowadzeniu tylko kilku dodatkowych regu CSS,
a nie zwikszajc objto kodu, dodajc rysunki i skrypt w JavaScripcie.
Na pierwszy rzut oka widzimy zbir zakadek nawigacyjnych, ktre s
zaprojektowane w taki sposb, by pasoway do projektu caej strony.
Kliknicie kadej zakadki powoduje przejcie do gwnych sekcji wi-

Skalowalna nawigacja
tryny, a z kad zakadk zwizana jest odpowiednia etykieta tekstowa.
Teraz zajrzymy temu rozwizaniu pod mask, a na koniec dowiemy
si, jak mona uzyska podobny efekt w alternatywny sposb.

Dlaczego rozwizanie to
nie jest kuloodporne
Dlaczego opisane rozwizanie nie jest dobre? Nie mamy zamiaru
krytykowa projektantw odpowiedzialnych za witryn LanceArmstrong.com metody zastosowane w tej witrynie mona odnale
w milionach witryn w caej Sieci. Przedstawiamy t witryn jako przykad gwnie dlatego, e jej projekt graficzny jest bardzo dobry, a odtworzenie tej strony przy uyciu CSS i poprawnego, dostpnego kodu
bdzie proste. Przedstawmy wic negatywne cechy tego rozwizania.

OGROM KODU
Cecha przeladujca witryny, w ktrych nawigacji wykorzystywane s
obrazki oraz skrypty napisane w JavaScripcie, to dua ilo kodu potrzebnego do zdefiniowania ukadu strony i zapewnienia jej dynamiki
(innymi sowy przeczenia stanw przy podmianie). Zazwyczaj kad
zakadk stanowi osobny obrazek (a tak naprawd jeden obrazek dla
kadego stanu zakadki), ktry jest osadzany w kilku zagniedonych
tabelach. Do rozwizania dochodz jeszcze wypeniacze GIF (przezroczyste obrazki stosowane do tworzenia pustych przestrzeni midzy
elementami strony) oraz zbdny kod. Wszystkie te elementy su tylko
i wycznie do tworzenia precyzyjnego co do piksela ukadu strony.
W ten sposb uzyskujemy ogromne iloci kodu, co oznacza potencjalne
wyduenie czasu pobierania stron oraz wikszy rozmiar plikw.
W przypadku witryny LanceArmstrong.com wszystkie cztery zakadki
umieszczone s w jednym pliku graficznym, do ktrego przypisana
jest mapa obrazu, dziki czemu istnieje moliwo kliknicia obszaru
kadej z zakadek. Z takim rozwizaniem zwizana jest mniejsza ilo
kodu w porwnaniu z opcj, gdy kada zakadka jest osobn grafik
umieszczon w oddzielnej komrce tabeli i oboon wypeniaczami
GIF. Jednak problemy wymienione w dalszej czci tego rozdziau dotycz obydwu rozwiza.

47

48

Rozdzia 2.

PROBLEMY Z DOSTPNOCI

Wyjtkiem od ograniczenia
zwizanego ze skalowalnoci strony jest opcja powikszenia strony dostpna
w przegldarkach Internet
Explorer 7 oraz Opera,
ktra pozwala na powikszenie caego dokumentu.

Kolejnym efektem ubocznym stosowania duych iloci kodu jest dawienie nim przegldarek tekstowych oraz oprogramowania pomocniczego stosowanego przez uytkownikw z wadami wzroku. Caa
nawigacja mieci si w jednym obrazku (jak wida na rysunku 2.3),
a wikszo twrcw stron nie definiuje tekstu alternatywnego (atrybut alt) dla wszystkich obszarw aktywnych w mapie obrazu. Uytkownicy korzystajcy z czytnikw ekranu oraz ci, ktrzy wyczaj wywietlanie obrazkw, by skrci czas pobierania strony (czsto stosowana
metoda przy wolnym poczeniu z Internetem), bd odczuwali trudnoci przy nawigacji w takiej witrynie.

PROBLEMY ZE SKALOWALNOCI
Ten problem jest bardzo powany. Zakadki s rysunkami, dlatego
osoby z wadami wzroku nie maj moliwoci powikszenia w przegldarce rozmiaru tekstu, by zwikszy jego czytelno. Nawigacja
utworzona na podstawie obrazkw nie powikszy si, gdy zajdzie taka
potrzeba.

BRAK ELASTYCZNOCI
W przyszoci redaktorzy witryny LanceArmstrong.com bd mieli spory
kopot, gdy bd chcieli zmieni opis ktrej z zakadek na przykad wyraenie About Lance na Why Lance Rules. Przeredagowanie, usunicie czy zamiana opisu ktrejkolwiek z zakadek wymagaj
utworzenia w programie graficznym nowych obrazw oraz zmiany
wymiarw okrelonych w kodzie mapy obrazu. Z takimi drobnymi
zmianami wie si duo pracy wszystkich osb zaangaowanych
w projekt.
Wszystkie zakadki zostay umieszczone w jednym obrazie, std wprowadzenie jednej zmiany oznacza konieczno zaktualizowania przynajmniej czterech rysunkw (jeden dla kadej wyrnionej zakadki),
co z pewnoci kadego projektanta moe przyprawi o bl gowy.
Jak wida, w projekcie tym mona wiele poprawi. W zalenoci od
naszych wasnych priorytetw kada z wymienionych wczeniej wad
moe by wystarczajcym powodem, by zacz szuka alternatywnego rozwizania. A wic zrbmy to.

Skalowalna nawigacja

Rozwizanie kuloodporne
Znajc ju wady tradycyjnych technik projektowania nawigacji opartej
na obrazkach, moemy przebudowa omawiany projekt zakadek ze
strony LanceArmstrong.com. Skorzystamy z prostej, bazujcej na standardach metody wykorzystujcej style CSS, ktrej implementacja nie
wymaga duych iloci kodu. Celem naszego projektu jest rozwizanie
omwionych wczeniej problemw wystpujcych w wariancie tradycyjnym.
Jak ma to miejsce w przypadku kadego idealnego projektu, najpierw
musimy zdecydowa si na rozwizanie, ktre zapewni nam funkcjonalno, prostot oraz dostpno kodu. W przypadku nawigacji najbardziej odpowiedni struktur dla grupy odnonikw wydaje si
jak nietrudno odgadn lista.
<ul id="nav">
<li id="t-intro"><a href="/">Introduction</a></li>
<li id="t-about"><a href="about.html">About
Lance</a></li>
<li id="t-news"><a href="news.html">News &amp;
Events</a></li>
<li id="t-sponsors"><a href="sponsors.html">
Sponsors</a></li>
</ul>

Do utworzenia kuloodpornego zestawu zakadek nawigacyjnych wystarczy nam zwyka lista wypunktowana (nieuporzdkowana). Prosty
kod zapewni dobr czytelno we wszystkich przegldarkach, urzdzeniach i oprogramowaniu pomocniczym, nie wspominajc ju o tym,
e jest on bardzo zwizy i schludny. Wystarczy porwna ilo kodu
w tym przykadzie z iloci kodu uytego do utworzenia zagniedonych tabel. Rnica jest bardzo widoczna.
Kady element listy ma przypisany unikatowy identyfikator (atrybut id).
Identyfikatory przydadz si nam pniej, gdy bdziemy chcieli wyrni zakadk odpowiadajc stronie, na ktrej obecnie znajduje si
uytkownik.

BEZ STYLW
Lista wypunktowana, ktrej wygldu nie okrelaj adne dodatkowe
style, zwykle ma posta pionowej listy elementw; po lewej stronie
kadego elementu wywietlany jest znak wypunktowania (rysunek

49

50

Rozdzia 2.
2.4). Tak list nawigacyjn be adnych trudnoci i problemw mog
wywietli urzdzenia lub przegldarki tekstowe, ktre nie obsuguj CSS.

Rysunek 2.4. Wygld

listy wypunktowanej,
ktrej nie przypisano
adnych stylw CSS

Kolejn zalet stosowania

listy jest fakt, e czytnik
ekranu przed odczytaniem wszystkich punktw
listy powie uytkownikowi, ile lista ma elementw. Dziki takiej informacji
osoba odwiedzajca stron
jest wiadoma tego, co j
czeka. W ten sposb uytkownik popularnej aplikacji
czytajcej JAWS firmy Freedom Scientific po usyszeniu liczby elementw znajdujcych si na licie moe
przej do nastpnej listy
lub kolejnego elementu
strony. Wicej informacji
na temat sposobu odczytywania stron internetowych
w aplikacji JAWS mona
znale pod adresem

www.freedomscientific.com/
fs_products/Surfs_Up/
Navigating.htm.

DWA MAE OBRAZKI

W stosowanym pocztkowo rozwizaniu wszystkie zakadki znajdoway
si w jednej grafice. Tak naprawd istniay cztery rne rysunki, a na
kadym z nich wyrniona bya zakadka innego dziau witryny. Aby
uproci cao rozwizania, uyjemy tylko dwch maych obrazkw,
ktre bdziemy powiela w poziomie wewntrz kadej zakadki. Obrazki
bd powielane, dlatego nie musimy martwi si o ich szeroko ani
wysoko jest to wany temat, do ktrego wrcimy w dalszej
czci tego rozdziau, w podrozdziale Dlaczego rozwizanie to jest
kuloodporne.
Ponownie przyjrzyjmy si oryginalnym zakadkom przenoszc wzrok
od grnej krawdzi w d zakadki, widzimy, e kolor ta stopniowo si
zmienia, a na dole zakadka ma ju jednolity kolor, zgodny z kolorem ta strony. Uywajc naszego ulubionego programu graficznego
(na przykad Adobe Photoshop), tworzymy dwa obrazki (jeden dla
zakadek w stanie aktywnym, a drugi dla zakadek nieaktywnych),
na ktrych widoczne jest stopniowe przejcie koloru zakadki w jednolite to (rysunek 2.5). Jednolity obszar na dole kadego z obrazkw
wycinamy i ustawiamy jako przezroczysty. W miejscu, gdzie obrazek
jest przezroczysty, widoczne bdzie to, ktrego kolor zdefiniujemy
przy uyciu stylw CSS.

Rysunek 2.5. Powikszenie dwch obrazkw, ktrymi wypenione

bdzie to kadej z zakadek. Obszar obrazka, w ktrym to jest
jednolite, ustawilimy jako przezroczysty (jest to obszar oznaczony
wzorem szachownicy). W obszarach tych widoczne bdzie to
elementu zdefiniowane w stylach CSS
Obydwa obrazki maj szeroko 10 pikseli. Wzdu grnej krawdzi
widoczne jest podwietlenie wysokoci jednego piksela. Wypenienie
obrazka jest gradientowe i przechodzi w przezroczyste to na dole
obrazka.

Skalowalna nawigacja

STOSOWANIE STYLW
Przygotowalimy ju wszystkie skadniki. Teraz musimy wzi nasz
list wypunktowan oraz dwa obrazki, ktrymi zamierzamy wypeni
to zakadek, i poczy te skadniki w jedn cao, stosujc odpowiednie style CSS.
Pierwszy etap zadania polega na utworzeniu deklaracji, dziki ktrym
lista nawigacyjna uzyska posta poziom zamiast domylnej postaci
pionowej.
#nav {
margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D;
}
#nav li {
float: left;
margin: 0 1px 0 0;
padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 80%;
}

Dziki zastosowaniu waciwoci float pozycje listy zostan uoone

w linii poziomej. W tym miejscu moemy take zadeklarowa ty
kolor ta dla paska, na ktrym zostan wywietlone zakadki. Deklaracja koloru ta jest bardzo wana, poniewa bez niej cay system
(ty pasek i umieszczone na nim zakadki) nie bdzie skalowalny.
Poszlimy take krok do przodu i wyzerowalimy domylne wielkoci
marginesw (margin) i dopenienia (padding), dodajc jednak kadej
zakadce jednopikselowy margines prawy w celu uzyskania odpowiednich odstpw. Ustawilimy take wielko czcionki na 80% podstawowej wielkoci czcionki na stronie. Korzystajc z wiedzy zdobytej
w rozdziale 1., Elastyczny tekst, ustawilimy podstawow wielko
czcionki poprzez podanie sowa kluczowego small jako wartoci waciwoci font-size w deklaracji dla elementu <body>. Teraz moemy
spa spokojnie, poniewa mamy pewno, e uytkownicy przegldarki
IE/Win bd mogli dowolnie zmienia wielko tekstu wywietlanego
w zakadkach.
Na rysunku 2.6 przedstawiono aktualny wygld tworzonego systemu
nawigacyjnego.
Wiem, uzyskany efekt nie jest nawet bliski oryginalnego wygldu. Ale
wystarczy tylko kilka deklaracji i bdziemy mogli otwiera szampana.

51

52

Rozdzia 2.

Rysunek 2.6. Na razie system nawigacji wydaje si dosy niestaranny

PYWANIE NA RATUNEK
I pojawi si pierwszy problem, ktremu musimy stawi czoo. Elementy
<li> ustawilimy jako pywajce, dlatego zostay one wyjte z normalnego ukadu dokumentu i nie wypeniaj zewntrznego elementu
<ul>, w ktrym zdefiniowano kolor ta. Innymi sowy, gdy elementy
wewntrzne ustawione s jako elementy pywajce, zewntrzny element <ul> nie wie, jak powinien mie wysoko.
Istnieje proste rozwizanie wystarczy ustawi cay element <ul>
jako pywajcy. Dziki temu elementy <li> bd mogy wypeni przestrze elementu <ul> i rozcign jego to tak, by byo za nimi widoczne. Poniewa element pywajcy kurczy si bd rozszerza akurat na
tyle, ile potrzeba do wywietlenia jego zawartoci, dodamy rwnie
zdefiniowan warto szerokoci elementu <ul>, wyobraajc sobie
(na potrzeby tego przykadu), e znajduje si on wewntrz ukadu
strony o staej szerokoci o podobnym rozmiarze (rysunek 2.7).

Rysunek 2.7. Ustawienie elementu <ul> oraz wszystkich pozycji

listy jako elementw pywajcych powoduje rozcignicie ta listy
i wywietlenie go za wszystkimi jej pozycjami

Cho dla elementw #nav

zadeklarowalimy szeroko 720 pikseli, w celu
wcicia zakadek przypisujemy im rwnie dopenienie lewe o wielkoci 46 pikseli. Poniewa dopenienie
dodawane jest do szerokoci
elementu, cakowita szeroko menu nawigacyjnego
wynosi 766 pikseli.

#nav {
float: left;
width: 100%;
margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D;
}
#nav li {
float: left;
margin: 0 1px 0 0;
padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 80%;
}

Przykad wyglda ju troch lepiej. Mamy teraz pewno, e bez wzgldu na wielko listy te to bdzie powiksza si wraz z wywie-

Skalowalna nawigacja
tlan treci. Opisana tu metoda to wygodny sposb na uniknicie
wprowadzania dodatkowych elementw <div>, ktre zapewniyby
prawidowe wywietlanie ta. W ten sposb nie musimy take definiowa wysokoci (<height>) listy czego nie naley robi, jeli chce
si zachowa elastyczno projektu.

NADANIE ZAKADKOM KSZTATU

Nastpnie definiujemy style dla odnonikw dodajemy dopenienie, obramowanie i kolor ta:
#nav a {
float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9;
}

Zadecydowalimy, e odnoniki w zakadkach bd wywietlane jako

elementy blokowe (display: block;), dziki czemu uytkownik
bdzie mg klikn w dowolnym miejscu zakadki. Elementy blokowe
domylnie wywietlane s w osobnych wierszach, dlatego korzystajc
z waciwoci float, ustawiamy wszystkie zakadki w jednej linii.
Nastpnie zwikszamy dopenienie odnonikw, zmieniamy ich kolor,
wyczamy dekoracj tekstu oraz dodajemy obramowanie na wszystkich bokach poza dolnym. Dla elementw <a> ustawiamy take dopenienie, poniewa w ten sposb zwikszamy obszar, ktry mona klikn (klikn bdzie mona ca zakadk, a nie tylko jej tekst).
Zakadki zaczynaj zyskiwa interesujcy ksztat dziki dodaniu tylko
tych kilku deklaracji CSS (rysunek 2.8).

Rysunek 2.8. Ustawienie dopenienia w elemencie <a> umoliwia

kliknicie caego obszaru zakadki, co znacznie uatwia nawigacj
w witrynie

53

Gdy element o identyfikatorze #nav ustawimy jako

element pywajcy, musimy zapewni, by kolejne
elementy strony nie byy
wywietlane obok elementw pywajcych. Dla kolejnego elementu strony (na
przykad poziomego wiersza lub bloku treci) musimy zadeklarowa regu
clear: left, by by on
wywietlany pod nawigacj.

54

Rozdzia 2.

WYRWNANIE OBRAZKW TA
Kolejne zadanie zwizane jest z utworzonymi wczeniej obrazkami.
Chcemy wywietli je w taki sposb, by byy powielane w poziomie
w tle zakadek:
#nav a {
float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9 url(img/off_bg.gif) repeat-x
top left;
}

Uylimy skrtowej metody definiowania koloru i obrazka ta w jednej

regule. Zdefiniowany kolor ta (#F9E9A9) bdzie przewitywa w przezroczystym obszarze obrazka. Kolor ten bdzie widoczny na dole obrazka, w miejscu, w ktrym w programie graficznym ustawilimy przezroczysto.
Wyrwnalimy obrazek do grnego brzegu zakadki i przy uyciu atrybutu repeat-x ustawilimy jego powielanie w poziomie (rysunek 2.9).
W miejscu, w ktrym koczy si obrazek (wcznie z obszarem przezroczystym), rozpoczyna si to zdefiniowane jako jednolity kolor.

Rysunek 2.9. Umieszczenie w tle obrazka i powielenie go w poziomie

wprowadzi efekt pionowej zmiany koloru oraz podwietlenia na grze
zakadki. Obrazek jest automatycznie powielany w tle, dlatego zmiana
szerokoci lub wysokoci zakadki nie popsuje wygldu projektu
Pozostao nam dodanie stylw dla zaznaczonej zakadki oraz dla zakadki, nad ktr aktualnie znajduje si kursor myszy (ktre w naszym
przykadzie bd wyglda tak samo). Jednak najpierw wywietlimy
obramowanie wystpujce na dole niewybranych zakadek, tworzc
wraenie, e wybrana zakadka jest czci znajdujcej si poniej
biaej strony.

Skalowalna nawigacja

55

Z mojego dowiadczenia wynika, e najatwiejszym i najlepszym sposobem utworzenia obramowania, ktre czasami ma by zasonite przez
inny element, jest utworzenie maego obrazka o wysokoci odpowiadajcej gruboci obramowania, ktry bdzie wielokrotnie powielany
w tle elementu, tak by uzyska dug lini obramowania. W tym miejscu zastosujemy trzeci obrazek, jednak jest on tak may, e praktycznie
si nie liczy (rysunek 2.10).
Obrazek GIF o wymiarach 137 pikseli bdzie powielany w poziomie
wzdu dolnej krawdzi zbioru zakadek. Szeroko obrazka nie ma
w tym momencie adnego znaczenia, poniewa jest on powielany
w poziomie. Sam nie mam zielonego pojcia, dlaczego utworzyem
obrazek o takiej wanie szerokoci.
Rysunek 2.10. Obrazek o wysokoci jednego
piksela uyty jako dolne obramowanie zakadek.
Gdy zakadka staje si aktywna, zasania
obramowanie, dziki czemu to wybranej zakadki
zlewa si z tem biaej strony znajdujcej si
poniej
Na rysunku 2.11 przedstawiono kolejno wywietlania elementw
nawigacji. Najpierw wywietlane jest to, nad nim wywietlane jest
obramowanie dolne o gruboci jednego piksela, a na wierzchu wywietlane s zakadki uzupeniajce cay projekt.

Rysunek 2.11. Trjwymiarowy obraz, na ktrym przedstawiono,

w jaki sposb mona uy obrazka ta do utworzenia dolnego
obramowania paska nawigacyjnego

DODANIE DOLNEGO OBRAMOWANIA

Do wczeniejszej deklaracji stylw CSS dla elementu o identyfikatorze
#nav dodajemy nastpujce odwoanie do obrazka ta:

Jeli w tle wywietlamy

obrazki o wikszych rozmiarach, zwiksza si wydajno wywietlania ich
w przegldarce Internet
Explorer w systemie Windows. Przegldarka ta dziaa
czasem ospale przy wywietlaniu i powielaniu w tle
bardzo maych obrazkw.

56

Rozdzia 2.
#nav {
float: left;
width: 720px;
margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D url(img/nav_bg.gif) repeat-x
bottom left;
}

Deklarujemy, e obrazek ma by powielany w poziomie i wyrwnany

do dolnej krawdzi. Obrazek ma tylko jeden piksel wysokoci zadeklarowane te to (#FFCB2D) bdzie widoczne w pozostaej czci
paska nawigacyjnego (rysunek 2.12).

Rysunek 2.12. Poprzez uycie w rozwizaniu obrazka linii jako ta paska nawigacyjnego coraz
bardziej zbliamy si do zamierzonego efektu

EFEKT PODMIANY
Dla stanw, w ktrych zakadka jest wybrana lub znajduje si nad ni
kursor myszy, sprbujemy odtworzy stosowany w witrynie LanceArmstrong.com szary kolor zakadki. Wystarczy tylko zamieni beowy
obrazek ustawiony jako domylne to odnonikw. Obydwie sytuacje
moemy uj w jednej deklaracji CSS. Zacznijmy od utworzenia stylu
dla sytuacji, w ktrej kursor myszy znajdzie si nad zakadk:
#nav a:hover {
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(img/on_bg.gif) repeat-x top
left;
}

Przyciemnilimy kolor tekstu i obramowania, ustawilimy szar wersj

ta obrazka, ktra na dole przechodzi w kolor biay (#fff). Zwikszylimy take o jeden piksel dolne dopenienie zakadki (z 4 na 5 pikseli). Dodatkowy piksel dopenienia spowoduje, e wybrana zakadka
oraz zakadki, nad ktrymi znajduje si kursor myszy, bd zasania

Skalowalna nawigacja
obramowanie dolne zdefiniowane jako to paska nawigacyjnego (obramowanie to take ma jeden piksel wysokoci). Dziki temu wybrana
zakadka bdzie wyglda tak, jakby stanowia jedn cao z pozosta czci strony (rysunek 2.13).

Rysunek 2.13. Zwikszajc dolne dopenienie odnonika aktywnej

zakadki z 4px na 5px, przykrywamy znajdujce si poniej
obramowanie, co daje wraenie, e zakadka wywietlana
jest na pierwszym planie

WYRNIONA ZAKADKA
Skd wiadomo, ktra zakadka ma by wyrniona? W tym miejscu
w gr wchodz selektory elementw potomnych. Dodamy je do deklaracji okrelajcej styl elementw, nad ktrymi znajduje si kursor myszy tak by miay one ten sam styl:
#nav a:hover, body#intro #t-intro a

Selektor elementu potomnego daje moliwo zdefiniowania stylw

dla konkretnego elementu w zalenoci od jego przodkw (elementw
zawierajcych). Podajc elementy rozdzielone spacjami, moemy zawzi list elementw docelowych w zalenoci od tego, jakie miejsce
zajmuj one w drzewie dokumentu. Wicej informacji na temat selektorw mona znale w powiconym im rozdziale specyfikacji CSS
dostpnym pod adresem www.w3.org/TR/REC-CSS2/selector.html.
Jeli zatem do elementu <body> strony dodamy atrybut id o wartoci
intro, na przykad:
<body id="intro">

to umieszczon wyej deklaracj CSS mona odczyta tak: Na stronach, na ktrych identyfikator elementu body ma warto intro,
zastosuj inne to, ciemniejsze kolory itp.. Jest to bardzo przydatny
sposb na okrelenie stylw CSS dla sytuacji typu jeli jeste na danej
stronie, dlatego jest on czsto wykorzystywany przy projektowaniu
nawigacji. Definicj wygldu zaznaczonej zakadki oraz zakadki, nad
ktr znajduje si kursor myszy, umiecilimy w jednej deklaracji CSS.

57

58

Rozdzia 2.

Dlaczego rozwizanie to
jest kuloodporne
Wzilimy adny projekt zakadek nawigacyjnych ze znanej witryny,
rozbilimy go na czci i utworzylimy bardzo podobny system. Nowy
system zbudowany jest jednak przy uyciu znacznie mniejszej iloci
kodu, kod ten mona atwo aktualizowa, a do tego rozwizanie to jest
bardziej dostpne dla szerszej gamy przegldarek, urzdze i oprogramowania pomocniczego. I co najwaniejsze nowy system jest elastyczny bez wzgldu na wielko i ilo umieszczonego w nim tekstu.
Ze wzgldu na kroki, ktre podjlimy przy wyrwnywaniu obrazw
ta i przypisywaniu kolorw, caa zakadka ulega skalowaniu. Jeli
uytkownik zdecyduje si zwikszy o kilka punktw rozmiar tekstu,
by poprawi jego czytelno, cay projekt bdzie si skalowa wraz
z tekstem (rysunek 2.14).

Rysunek 2.14. Wielko zakadek mona skalowa w gr i w d

poprzez zmian rozmiaru tekstu w przegldarce
W cigu kilku minut moemy take zmieni sowa wywietlane na
poszczeglnych zakadkach oraz doda lub usun zakadki. W tym
celu edytujemy list wypunktowan, ktra nadaje elementom nawigacyjnym odpowiedni struktur (rysunek 2.15). Wystarczy w kodzie
zmieni tekst wewntrz odpowiedniej pozycji listy:
<ul id="nav">
<li id="t-intro"><a href="/">Home</a></li>
<li id="t-about"><a href="about.html">Why Lance
Rules</a></li>
<li id="t-news"><a href="news.html">The Latest
News</a></li>
<li id="t-sponsors"><a href="sponsors.html">People
Who Like Lance</a></li>
</ul>

Skalowalna nawigacja

Rysunek 2.15. Zmiana tekstu wywietlanego w zakadkach zajmie

nam tylko kilka sekund wystarczy uaktualni tekst w czytelnej licie
wypunktowanej

Podobny przykad
wykorzystujcy em
W naszej rekonstrukcji zakadek ze strony Lancea Armstronga podalimy dopenienie wok tekstu odnonikw w pikselach. W czci
byo nam to potrzebne do zwikszenia dopenienia dolnego o jeden
piksel, tak by nakadao si ono na jednopikselowe obramowanie
dolne paska nawigacyjnego. Potrzebna bya nam dokadno co do
piksela.
Jeli zlikwidujemy konieczno korzystania z tego jednopikselowego
obramowania, moemy dopenienia wok tekstu odnonika kadej
zakadki zdefiniowa w em. Dlaczego em? Jak zostao to pokazane
w rozdziale 1., em to jednostka elastyczna, ktrej wielko uzaleniona jest od aktualnej wielkoci czcionki. Podajc dopenienie w em
zamiast w pikselach, moemy zapewni, e caa zakadka (a nie tylko znajdujcy si w niej tekst) bdzie skalowana proporcjonalnie do
tekstu, jeli jego rozmiar zostanie zmieniony przez uytkownika.
Na rysunku 2.16 zaprezentowano uproszczon wersj poprzedniego
przykadu z zakadkami, w ktrych usunite zostao jednopikselowe
obramowanie znajdujce si na dole paska nawigacyjnego, a kolor
ta zmieni si na szary.

Rysunek 2.16. Uproszczona wersja nawigacji bez obramowania

dolnego
#nav {
float: left;
width: 50em;
margin: 0;
padding: 1em 0 0 5em;
list-style: none;
background: #666;
}

59

60

Rozdzia 2.
Tym razem szeroko ustalilimy na 50 em, zakadajc, e wielko ta
zmieci si wewntrz ukadu strony o tym samym rozmiarze (wicej
informacji o ukadach strony opartych na em znajduje si w rozdziale
8., Pynny oraz elastyczny ukad strony). Rwnie dopenienie wok
zakadek podano w em ma ono warto 1 em na grze i 5 em po
lewej stronie, dziki czemu powstaje tam niewielkie wcicie tekstu.
Zmienimy teraz rwnie deklaracj #nav a w taki sposb, by rwnie
wykorzystywaa em (dodatkowo zmieniajc kolor ta na jasnoszary
i usuwajc obramowanie znajdujce si wok zakadek):
#nav a {
float: left;
display: block;
margin: 0;
padding: .5em 1em;
color: #333;
text-decoration: none;
background: #ccc;
}

W deklaracji tej wida regu padding: .5em 1em;, ktr mona przeczyta jako: Na grze i dole kadego odnonika znajduje si dopenienie o wielkoci p em, natomiast po prawej i lewej stronie jeden
em. Jeli teraz zmienimy rozmiar tekstu, zauwaymy, e tekst zakadek oraz odstpy midzy zakadkami skaluj si w sposb proporcjonalny (rysunek 2.17). Do sprytne, prawda? Zamiast wic wykorzystywa system, w ktrym tekst otacza zawsze taka sama liczba pikseli
bez wzgldu na rozmiar tego tekstu dziki em uzyskalimy w peni
skalowalny system, ktry nie zmienia si, kiedy rozmiar czcionki si
zwiksza lub zmniejsza.

Rysunek 2.17. Wersja zakadek oparta na em, w ktrej zmieniamy rozmiar tekstu
w celu pokazania, e proporcje pozostaj bez zmian

Skalowalna nawigacja
Wspomniaem o tej wersji projektu przede wszystkim po to, by kady
zacz sobie przyswaja moliwo zmiany pikseli na em dla dopenienia, marginesw, wysokoci wiersza i podobnych waciwoci. Nie
zawsze jest to moliwe (przykadem takiej sytuacji jest strona Lancea
Armstronga), ale w zalenoci od wymaga zastosowanie em moe by
korzystne i umoliwi nam zachowanie proporcji w caym projekcie
strony bez wzgldu na rozmiar tekstu. Warto sprbowa!

Dodatkowe przykady
Pomys przedstawiony w tym rozdziale mona rozwin. W tym podrozdziale omawiamy inne projekty, ktre s tak samo elastyczne, jak
zakadki nawigacyjne utworzone w tym rozdziale.

MOZILLA.ORG
www.mozilla.org
Niedawno przeprowadzono zmian wygldu witryny Mozilla.org i wprowadzono zakadki nawigacyjne z zaokrglonymi naronikami. Zakadki
te oczywicie skaluj si wraz z umieszczonym w nich tekstem (rysunek 2.18).

Rysunek 2.18. Zaokrglone naroniki mona w prosty sposb uzyska

przy uyciu techniki Sliding Doors
Zesp projektantw witryny Mozilla zastosowa technik opracowan
przez Douglasa Bowmana, znan pod nazw Sliding Doors (po polsku: rozsuwane drzwi) www.alistapart.com/articles/slidingdoors/.
Bowman wymyli sprytny sposb stosowania dwch obrazkw ta,
ktre rozsuwaj si, gdy rozszerza si zawarta midzy nimi tre. Dwa
oddzielne obrazki zaokrglonych naronikw (lub innych form nieprostoktnych) wyrwnujemy do krawdzi zakadek, a cay projekt pozostaje elastyczny.

61

62

Rozdzia 2.

SKOSY
www.simplebits.com/bits/bulletproof_slants.html
Przy realizacji nowego zlecenia dla klienta zaistniaa potrzeba zaprojektowania elastycznej nawigacji, w ktrej kolejne elementy byyby
oddzielone skonymi liniami. Opracowane rozwizanie wymaga zastosowania tylko jednego obrazka w tle, ktry bdzie wywietlany
w mniejszej lub wikszej czci w zalenoci od wielkoci tekstu
umieszczonego w pasku nawigacyjnym (rysunek 2.19).

Rysunek 2.19. Gdy w tle umiecimy za duy obrazek ze skon lini,

to projekt bdzie dobrze wyglda nawet po zwikszeniu rozmiaru
tekstu
Jeli umieszczony w tle obrazek skonej linii bdzie wikszy, ni jest
to konieczne przy domylnej wielkoci tekstu, to po zwikszeniu rozmiaru tekstu wywietlona zostanie wiksza cz obrazka (rysunek 2.20).

Rysunek 2.20.
Powikszenie
ukonego
separatora
wywietlana
jest tylko
niezbdna
cz obrazka

WYSZUKIWANIE W WITRYNIE ESPN.COM

www.espn.com
Zakadki stosowane do przeczania filtrw na wykorzystywanym do
niedawna projekcie strony wyszukiwania w witrynie ESPN.com zostay
utworzone przy uyciu metody podobnej do opisywanej w tym rozdziale. Jako to posuy duy obrazek z gradientowym wypenieniem,
ktrego jaka cz jest wywietlana w zalenoci od wielkoci tekstu.

Skalowalna nawigacja
Na rysunku 2.21 widoczne s zakadki wywietlone przy dwch rnych
wielkociach czcionki.

Rysunek 2.21. Zakadki

na stronie wyszukiwania
w poprzedniej wersji
witryny ESPN skaluj si
wraz z wielkoci tekstu
i jego dugoci
Aby zrozumie, w jaki sposb efekt zosta osignity, przyjrzyjmy si
zakadce w stanie nieaktywnym. Na lewym i grnym brzegu obrazka
widoczne jest podwietlenie o szerokoci jednego piksela. Podwietlenie to widoczne jest tylko na tych dwch krawdziach, dlatego jako
to wystarczy nam jeden obrazek, ktry jest wystarczajco duy, by
pomieci tekst napisany nawet bardzo du czcionk.
Na rysunku 2.22 widoczna jest zakadka wywietlona przy domylnym
rozmiarze tekstu odsonita jest wtedy tylko grna lewa cz obrazka ta. Natomiast na rysunku 2.23 widoczna jest ta sama zakadka
przy wikszym rozmiarze czcionki odsonita cz obrazka ta jest
duo wiksza. Wyrwnujc obrazek do grnego lewego rogu elementu
<a> w zakadce, moemy pokaza efekty podwietlenia i gradientu
bez wzgldu na ilo lub wielko tekstu umieszczonego wewntrz
zakadki.

Rysunek 2.22. Gdy zakadka wywietlana jest przy domylnej

wielkoci czcionki, widoczna jest tylko grna lewa cz obrazka
Zmienna szeroko zakadki bya niezbdnym elementem projektu,
poniewa liczba wynikw jest wywietlana obok etykiety zakadki
(liczba umieszczona w nawiasie). Ze wzgldu na rn dugo liczby
wynikw zakadce naleao zostawi miejsce, tak by moga si ona rozszerza lub kurczy, zachowujc przy tym dobry wygld.

63

64

Rozdzia 2.

Rysunek 2.23. Zwikszenie wielkoci czcionki powoduje odsonicie

wikszego obszaru obrazka ta, na grnym i lewym brzegu zakadki
nadal widoczne jest delikatne podwietlenie

Podsumowanie
Ch opracowania nowej metody tworzenia zakadek nawigacyjnych
w miejsce powszechnie stosowanej metody wykorzystujcej due iloci
grafiki pozwolia nam zidentyfikowa kilka wad stosowania tej ostatniej. Jednoczenie odkrylimy zalety stosowania prostej listy wypunktowanej i przypisania jej pomysowych stylw CSS. Zalety te to nie tylko
moliwo zmiany wielkoci nawigacji wraz ze zmian wielkoci tekstu, ale take moliwo umieszczenia bardzo rnych iloci treci
w zakadkach.
Poniej znajduje si kilka wskazwek, o ktrych warto pamita przy
projektowaniu nawigacji.

Stosowanie nawigacji opartej na grafice oznacza, e uytkownicy

z wadami wzroku nie mog dostosowa wielkoci tekstu do swoich potrzeb.

Prosty kod (na przykad lista wypunktowana) zapewnia lepsz

dostpno treci dla szerszego zakresu przegldarek, urzdze
i oprogramowania dodatkowego.

Nawigacj tekstow duo prociej si aktualizuje i redaguje nie

trzeba tworzy nowych rysunkw przy wprowadzaniu kadej
zmiany.

Pomysowe rozmieszczenie obrazkw ta moe wprowadzi do

projektu nawigacji ciekawe efekty, nie pogarszajc przy tym jego
elastycznoci.

Warto sprbowa wykorzysta em do definiowania marginesw,

dopenienia czy wysokoci wierszy, tak by cay projekt strony
(a nie tylko tekst) by w peni skalowalny bez wzgldu na rozmiar
tekstu.

Skalowalna nawigacja

Czasami uycie obrazkw w nawigacji jest koniecznoci. Moe

to by zwizane ze specjaln czcionk stosowan we wszystkich
firmowych materiaach lub z ograniczon przestrzeni do zagospodarowania. Zastosowanie graficznej formy nawigacji to nie
koniec wiata.

Ostatni punkt w powyszej licie jest bardzo wany. W wiecie rzeczywistym wymagania zwizane z czcionkami, szerokoci lub wysokoci paska nawigacyjnego mog by narzucone z zewntrz i by niezalene od projektanta witryny. W takiej sytuacji naley ucieka jak
najdalej. Nie, niezupenie teraz jestemy przygotowani, by zaproponowa w miejsce takiego projektu bardziej elastyczne rozwizanie.
Nie ma zych odpowiedzi, istniej tylko rozwizania dziaajce lepiej
od innych, biorc pod uwag dan sytuacj.
Opracowalimy projekt elastycznej nawigacji, teraz moemy przej
do innych czsto spotykanych komponentw stron internetowych
i sprbowa je ulepszy.

65