You are on page 1of 23

CSS.

Projektowanie
profesjonalnych stron WWW
Autor: Ch. Schmitt, T. Dominey, C. Li,
E. Marcotte, D. Orchard, M. Trammell
Tumaczenie: ukasz Piwko
ISBN: 978-83-246-2067-8
Tytu oryginau: Professional CSS:
Cascading Style Sheets for Web Design
Format: 168x237, stron: 320
Twrz profesjonalne strony WWW, korzystajce z CSS!
Dlaczego naley oddziela warstw prezentacji od struktury?
Jak stworzy rne ukady strony z wykorzystaniem CSS?
Jak wykorzysta format graficzny PNG?

W 1996 roku projektanci stron WWW mogli odetchn z ulg. To wanie wtedy
pojawia si pierwsza oficjalna dokumentacja CSS, a z ni nadzieja na lepsze, atwiejsze
i bardziej uniwersalne zarzdzanie wygldem stron. Trzeba pamita, e wczeniej
kady z producentw przegldarek wprowadza swoje wasne znaczniki, pozwalajce
kontrolowa kolory czy typografi. Oczywicie producenci robili to bez porozumienia
z innymi atwo wic sobie wyobrazi, jaki stanowio to kopot dla projektantw stron
WWW. Na szczcie nadszed wspomniany rok 1996, a w latach nastpnych pojawiy
si nowsze przegldarki, coraz lepiej wspierajce kaskadowe arkusze stylw.
Dziki tej ksice poznasz najlepsze praktyki zwizane z CSS oraz XHTML.
Na przykadzie prawdziwych witryn dowiesz si, jak zapewni rne funkcjonalnoci
za pomoc kaskadowych arkuszy stylw. Analityczny opis strony Blogger.com pozwoli
zaprezentowa rne efekty, choby takie, jak rollover dla tekstu, czy oraz tabel.
Z analiz dotyczcych innych witryn dowiesz si, jak zapewni efekt cienia, rozwijane
menu czy te dynamiczne przeczanie arkuszy CSS. Ponadto poznasz sposoby
wykorzystania przezroczystych grafik w formacie PNG, zasady tworzenia ukadw CSS
oraz metody pozycjonowania elementw na stronie. Znajdziesz tu take wiele innych
zagadnie, ktre pozwol Ci zbudowa wasn profesjonaln i atrakcyjn
witryn WWW.
Deklarowanie typw dokumentu
Oddzielenie warstwy prezentacji od struktury
Typy selektorw
Wykorzystanie efektu rollover
Tworzenie cieni oraz rozwijanego menu
Zapewnienie poprawnoci semantycznej
Techniki przeczania CSS
Wykorzystanie formatu PNG w rnych przegldarkach
Przygotowywanie ukadw przy uyciu CSS
Sposoby rozwizywania problemw z kaskadowymi arkuszami stylw
Rozwizywanie problemw z przegldarkami

Stwrz wasn, profesjonaln stron WWW!

Spis treci
Rozdzia 1. Najlepsze praktyki w XHTML i CSS
Upychanie warstwy strukturalnej i prezentacyjnej razem
Pokocha swj kod
XHTML nowa era
Oddzielenie struktury od stylu

CSS dodawanie warstwy stylw


Lepiej zapoznaj si z selektorami
Inne selektory
czenie deklaracji
Selektory grupujce
Tajniki dziedziczenia
Wykorzystanie wszystkiego w praktyce

Kaskadowo
Pochodzenie stylw
Sortowanie wedug precyzji
Sortowanie wedug kolejnoci

Praktyka
Praca w solidnej przegldarce
Usprawiedliwienie potrzeby stosowania hackw
Problem hackw
Hackowanie dla zabawy i poytku

Podsumowanie

Rozdzia 2. Blogger.com: efekt rollover i design touches


Wywiad z projektantem
Efekt rollover w CSS
Zmienianie koloru tekstu i ta odnonikw atwe
Zmiana koloru tekstu i ta odnonikw skomplikowane
Zmienianie koloru ta wierszy tabeli
Zmienianie koloru tekstu
Zmienianie pozycji ta odnonikw

Podsumowanie

Rozdzia 3. Witryna internetowa mistrzostw PGA


Efekt cienia
Tworzenie iluzji
Dodanie realizmu

17
18
23
24
27

34
34
39
42
42
44
46

52
52
55
56

57
57
57
61
62

64

65
66
69
70
71
79
83
86

96

97
98
99
103

Spis treci
Tworzenie w CSS menu rozwijanych
Pozycjonowanie menu rozwijanych
Dostrajanie: stylizacja menu rozwijanych

Wstawianie filmw Flasha w zgodzie ze standardami


Metoda Flash Satay
Wpisywanie znacznikw object i embed przy uyciu JavaScriptu
SWFObject

Podsumowanie

Rozdzia 4. Witryna University of Florida


Powrt do przeszoci
Przemylenia na temat kolejnych wersji
Aktualna witryna

Definiowanie witryny
Budowa zespou
Badania uytkownikw
Badanie samych siebie
Definiowanie specyfikacji technicznych

Tworzenie gwnej struktury nawigacyjnej

108
109

113
113
113
114

114

115
115
116
118

119
119
120
120
121

122

Kod XHTML
Kod CSS
Grafika
Maymi krokami naprzd

122
125
126
126

Nawigacja uzupeniajca

130

Kod XHTML
Kod CSS

Jeszcze raz o Flashu


Jeszcze raz o metodzie Satay
Detekcja po stronie klienta przy uyciu metody Flash Satay

Szukanie bdw
Zmiany
Gdzie to si podziao?

Podsumowanie

Rozdzia 5. Stuff and Nonsense Ltd.:


strategie przeczania arkuszy stylw
Kadzenie fundamentw
Przeczanie CSS
Szczegy techniczne
Trwae arkusze stylw
Preferowane arkusze stylw

107

130
132

137
138
140

142
142
142

142

143
144
150
152
152
152

Spis treci
Alternatywne arkusze stylw
Inne rozwizanie, ktrego prawie nie moesz zastosowa

Rzeczywisto, czyli jak to moe dziaa dzisiaj?


Wykorzystanie JavaScriptu
Zastosowanie PHP

153
155

156
157
165

CSS poza przegldark

168

Typy mediw
Problem z wyborem

169
173

Stuff and Nonsense: budowa lepszego przecznika


Spotkanie z projektantem Andym Clarkeem
Podsumowanie

Rozdzia 6. Przygody CindyLi.com: modyfikacja blogu


Blogi
CSS: Cindy Li zaczyna publikowa
Elementy projektu

173
176
180

181
181
183
183

Tworzenie ukadu
Ukad projektu

183
184

Tworzenie witryny

186

Projektowanie paska nawigacyjnego


Grafiki efektu rollover
Pisanie kodu XHTML i CSS dla nawigacji
Integracja grafik rollover

Chmurka ze sowami
Kod chmurki
Ponowne wykorzystanie efektu
Wstawianie plakietki Flickr

Formatowanie pl wyboru
Podsumowanie

186
188
189
192

194
195
197
197

203
210

Rozdzia 7. AIGA Cincinnati: szablony HTML


wiadomoci e-mail

211

Problemy z formatem HTML wiadomoci e-mail


Tworzenie szablonu

211
212

Drukowanie projektu
Tworzenie ukadu tabelkowego
Korygowanie projektu
Analiza wpywu regu CSS na szablon

Stosowanie stylw liniowych


Usuga Premailer
Podsumowanie

213
213
222
224

227
228
229


Spis treci
Rozdzia 8. Witryna internetowa ksiki:
uywanie przezroczystych obrazw PNG
Obsuga formatu PNG przez przegldarki
Sztuczka z uyciem filtru obrazw
Obejcie problemu obsugi przezroczystoci przez Internet
Explorer 6 za pomoc skryptu HTC
Kolory a format PNG

Uywanie opcji przezroczystoci alfa


Lepsze cienie
Uywanie odcieni kolorw

Podsumowanie

Rozdzia 9. Tworzenie ukadw CSS


O siatkach i ukadach
Robienie tego, co w druku jest niemoliwe
Pozycjonowanie przy uyciu CSS podstawy
Pozycjonowanie bezwzgldne
Pozycjonowanie absolutnie wzgldne

Ukad trzykolumnowy kadzenie fundamentw


Pisanie kodu XHTML od makiety do gotowego projektu
Warstwa stylw
Zwalczanie bdw przegldarek

Okrelanie granic: wasno max-width


Podsumowanie

231
232
233
233
235

235
235
237

241

243
243
247
249
250
253

255
256
259
267

274
276

Dodatek A Elementy HTML 4.01

277

Dodatek B Zasady konwersji HTML na XHTML

283

Dodatek C Wasnoci CSS 2.1

289

Dodatek D Rozwizywanie problemw z CSS

303

Skorowidz

309

3
Witr yna i n t e r n et owa
mi s t r z o s t w P G A
Wiem, e coraz lepiej gram w golfa, poniewa rzadziej trafiam w widzw.
Gerald Ford
Mistrzostwa PGA s jednym z najwaniejszych wydarze sportowych. Odbywajce si
co roku pod koniec lata mistrzostwa PGA Ameryki s ostatnim wanym wydarzeniem
sezonu golfowego, przybywaj na nie najlepsi profesjonalni golfici oraz miliony fanw
z caego wiata.
Turner Sports Interactive, oddzia firmy Time Warner, by odpowiedzialny za rozwj
witryny i jej tre podczas mistrzostw. Celem byo utworzenie dynamicznej, bogatej i zgodnej ze standardami witryny przy uyciu CSS, atwo przyswajalnego kodu
XHTML oraz dodatkw specjalnych w technologii Flash. Z kreatywnego punktu
widzenia witryna miaa mie unikalny wygld, powinna by wyrafinowana, a przede
wszystkim naleao ustrzec si powielania oklepanych motyww z typowych witryn
powiconych golfowi. Zdecydowano si na palet sabo nasyconych i neutralnych
barw oraz kolory czarny i biay w celu podkrelenia oryginalnych fotografii i skierowania uwagi na zawarto tekstow.
Niedugo po zaprezentowaniu w lipcu 2004 roku witryna mistrzostw PGA uzyskaa
wietne opinie fanw golfa z caego wiata i spoecznoci projektantw sieciowych
za unikalny wygld, trzymanie si standardw oraz oglny projekt. Liczba odwiedzajcych wzrosa niebotycznie ju pierwszego dnia zawodw, gdy redaktorzy PGA.
com zaczli dostarcza wiadomoci, informacje o punktacji oraz tre multimedialn
w godzinnych odstpach.
Od pojawienia si tej wersji witryny mistrzostw PGA mino ju kilka lat, przewino
si te kilka rnych wersji tego projektu. Skupimy si jednak na roku 2004. Utworzona
wtedy witryna bya klasycznym, solidnym projektem z niesamowitymi fotografiami
pl golfowych. Osignito to oczywicie przy uyciu CSS i XHTML.

Rozdzia 3. Witryna internetowa mistrzostw PGA


W rozdziale szczegowo opisz niektre z technik zastosowanych w kilku miejscach oryginalnej wersji tej witryny. Nie zabraknie oglnych wskazwek i sztuczek CSS i XHTML oraz
opisu niektrych puapek, ktrych naley wystrzega si we wasnych projektach. Oto lista
poruszonych tematw.
Uzyskanie warstwowego efektu cienia przy uyciu CSS i programu Photoshop.
Tworzenie za pomoc CSS ultralekkich menu rozwijanych.
Wstawianie dodatkw Flasha bez amania zasad zgodnoci ze standardami.

Efekt cienia
Jedn z najbardziej wpadajcych w oko cech witryny PGA byo prawie trjwymiarowe
podzielenie treci na warstwy. Efekt by subtelny, ale po dokadnym przyjrzeniu si stronie
gwnej (www.pga.com/pgachampionship/2004/index.html) widocznej na rysunku 3.1, mona byo
zauway, e lewa kolumna wydaje si unosi nad otaczajc j treci. Nie by to tylko wizualny trick. Miao to take inne znaczenie. Lewa kolumna zawieraa najnowsze wiadomoci
z mistrzostw. Wyniesienie tego obszaru nieco do gry (w niezauwaalny sposb) sprawio, e
uytkownicy mogli szybko znale miejsce, w ktrym znajdoway si najwiesze wiadomoci.

Rysunek 3.1. Strona gwna mistrzostw PGA

98

Rozdzia 3. Witryna internetowa mistrzostw PGA


Lewa kolumna nie moga by po prostu wysza od ssiednich, ale musiaa czciowo zasania
tre, dziki czemu wydawao si, e rzeczywicie si unosi nad stron. Technik t zastosowano
przy tworzeniu nagwka Top Story w grnej czci lewej kolumny. Poniewa sprawia wraenie,
jakby by zczony z kolumn i rzuca pocztkowy fragment cienia biegncego w d strony, wyglda tak, jakby by utworzony w XHTML i unosi si nad filmem Flasha, ale to bya tylko iluzja.
Efekt kocowy moe wydawa si skomplikowany i wymagajcy duej szybkoci czy,
ale w rzeczywistoci zajmowa niewiele bajtw i kodu oraz mona go byo w miar szybko
utworzy przy odrobinie zaawansowanego planowania. W rozdziale opisuj ten efekt uzyskany przy uyciu programu Photoshop, technologii Flash oraz CSS i XHTML.

Tworzenie iluzji
Zanim przejd do szczegw, cofn si na chwil i jeszcze raz przedstawi cel naley
wizualnie scali film Flasha umieszczony na grze strony ze znajdujc si pod nim treci
oraz stworzy wraenie, e lewa kolumna znajduje si na warstwie lecej nad otaczajc j
treci, poprzez utworzenie cienia biegncego w d. Trudno polega na tym, e efekt byby
zrujnowany, jeli film Flasha lub elementy XHTML przesunyby si choby o jeden piksel.
Jednak precyzja CSS i XHTML sprawia, e dao si to zrobi.
Filmy we Flashu, jak kady wstawiany element, s prostoktne. Obiekty Flasha nie mog
mie nieregularnych ksztatw. Aby obej te ograniczenia i utworzy iluzj warstw, cz
lewej kolumny zostaa przedstawiona w obiekcie Flasha. Film ten zosta wypozycjonowany
z dokadnoci do jednego piksela w taki sposb, e po dodaniu kodu XHTML obie czci
pasoway do siebie jak ula, tworzc iluzj.
Najpierw w programie Photoshop powsta nowy dokument, ktry zosta wypeniony kolorem uytym w filmie Flasha i kolumnie biegncej w d strony. Utworzono te now warstw o nazwie bar. Nastpnie zaznaczono obszar o takiej samej szerokoci jak lewa kolumna
(przy uyciu narzdzia prostoktnego zaznaczania) i wypeniono go wybranym kolorem.
Efekt cienia zosta zastosowany do warstwy bar, a sam cie zosta tak opracowany, aby nie
by zbyt ciki, ale na tyle widoczny, by stwarza zudzenie oddzielenia od reszty treci.
Po ukoczeniu dokument wyglda tak, jak na rysunku 3.2.

Rysunek 3.2. Dokument Photoshopa powikszony dwukrotnie, aby lepiej byo wida cie

99

Rozdzia 3. Witryna internetowa mistrzostw PGA


Gdy cie by ju dobry, wyczono warstw w tle i za pomoc narzdzia prostoktnego
zaznaczania zaznaczono sam cie (rysunek 3.3). Skopiowano go do schowka i utworzono
nowy dokument Photoshopa z przezroczystym tem, do ktrego wklejono cie. Powsta
grafik zapisano w formacie PNG i umieszczono w filmie Flasha (w ktrym znajdowaa si
ju wektorowa figura o tej samej szerokoci i wysokoci).

Rysunek 3.3. Zaznaczenie obszaru cienia


Moesz si zastanawia, dlaczego zdecydowano si na format PNG zamiast popularniejszego GIF lub JPEG. Ten pierwszy jest preferowany podczas importu map bitowych do
Flasha. Dlaczego? Poniewa zawiera kana alfa oferujcy 256 poziomw przezroczystoci.
Dziki temu mona eksportowa szczegowe grafiki z edytorw map bitowych (Photoshop,
Fireworks itp.), importowa je do Flasha i publikowa filmy zachowujce ich przezroczyste
obszary przy jednoczesnym zastosowaniu stratnej kompresji JPEG. Jest to poczenie najlepszych cech wizualna jako formatu PNG i niewielkie rozmiary formatu JPEG.
Flash przesta ju by potrzebny, teraz naleao powieli cie przy uyciu CSS i XHTML. Aby
cie nie bieg do samego dou strony, trzeba byo zbudowa dla niego osobn sekcj. To wymagao utworzenia grafiki, ktra nie tworzya adnych dziur, przerw oraz innych anomalii
i mona byo powtarza j w pionie. W zwizku z tym zaznaczono obszar o wysokoci jednego piksela (rysunek 3.4) i odpowiedniej szerokoci, aby zahaczy take kawaek ta.
Po skopiowaniu tego obszaru utworzono nowy dokument (ktrego rozmiary zostay automatycznie odpowiednio ustawione przez Photoshop) i wklejono do niego skopiowany
fragment (rysunek 3.5).

100

Rozdzia 3. Witryna internetowa mistrzostw PGA

Rysunek 3.4. Przy uyciu narzdzia zaznaczania prostoktnego zaznaczono powtarzalny obszar
o wysokoci jednego piksela i szerokoci pozwalajcej zahaczy kawaek ta

Rysunek 3.5. Zawarto schowka


wklejona do nowego dokumentu
i powikszona, aby ukaza szczegy
W ten sposb poradzono sobie z cieniem, ale jeszcze brakowao janiejszego ta pod lew kolumn. W tym celu zwikszono rozmiar cienia obrazu na odpowiedni szeroko, a sam cie
wyrwnano do prawej. Jak wida na rysunku 3.6, przezroczysty obszar zosta wypeniony
kolorem, a cao zapisano jako obraz GIF.

Rysunek 3.6. Ostateczny obraz ta zawierajcy to lewej kolumny i cie

101

Rozdzia 3. Witryna internetowa mistrzostw PGA


Zatrzymam si na chwil i dodam kilka sw na temat formatw plikw. Czemu tutaj zosta
uyty GIF zamiast PNG? Powodem jest niesawna przegldarka Internet Explorer i jej saba
obsuga formatu PNG. Prawie osiem lat temu Microsoft rozgasza w biaej ksidze, e
Internet Explorer 4.0 bdzie natywnie obsugiwa ten format, w przeciwiestwie do innych przegldarek, ktre dodaj obsug formatu PNG jako osobny dodatek. Obietnic tych
jednak nie speniono, co wicej, musiao upyn ponad dziewi lat do pojawienia si
Internet Explorera 7 aby firma to zrobia. Mimo e Internet Explorer 7 obsuguje ju PNG,
Internet Explorer 6 ma nadal bardzo wielu uytkownikw, a wic w tym projekcie nie mona
byo ich pomin.
Na razie rozwizanie przy uyciu obrazu GIF odpowiada wikszoci przegldarek oraz
pozwala uy bezstratnej kompresji idealnej dla obrazw niebdcych zdjciami.
Przyjrzyjmy si teraz kodowi CSS. W arkuszu stylw zosta utworzony kontener przy uyciu
elementu div niewidocznego bloku stanowicego zewntrzn ramk suc do pozycjonowania grup treci (czyli w tym przypadku lewej i prawej kolumny). Gdy zwikszaa si
ilo treci w kolumnach, otaczajcy je element odpowiednio powiksza swoje rozmiary.
Dlatego wanie to zostao nadane kontenerowi, a nie samym kolumnom wwczas obraz
byby powtarzany bez wzgldu na ilo wewntrznej treci. Zaatwiono to przy uyciu poniszej reguy CSS:
#colwrap {
width:740px;
background:#96968C
url(http://i.pga.com/pga/images/pgachampionship/img/bg_home_content.gif) repeat-y;
}

Najpierw ustawiono szeroko tego elementu, potem zdefiniowano atrybuty ta (najwaniejszego w tym miejscu). Zosta ustawiony kolor taki sam jak filmu Flasha i prawej kolumny,
podano adres URL wymaganego obrazu oraz poinstruowano przegldark, eby powtarzaa
ten obraz pionowo (repeat-y) przez ca dugo elementu div.
Gdyby nie wasno repeat-y, przegldarka domylnie powtrzyaby obraz nie tylko w pionie, ale i w poziomie. To spowodowaoby, e lewa krawd grafiki pojawiaby si ponownie
obok cienia. Oczywicie, to nie byoby dobre dla projektu, dlatego postanowiono uy
wasnoci repeat-y, aby powtrzy obraz tyko w pionie. Gdyby potrzebne byo powtarzanie
tylko w poziomie, naleaoby skorzysta z wasnoci repeat-x.
Poniewa CSS pozwala na zastosowanie zarwno koloru, jak i obrazu do jednego elementu, mona oszczdzi kilka bajtw poprzez wypenienie obszarw jednolitego koloru przy
uyciu CSS. Dlatego wanie obraz ta kontenera zosta przycity zaraz za cieniem. Reszt
ta (ciemnoszary obszar, w ktry przechodzi cie) narysowaa przegldarka przy uyciu
wyznaczonego koloru. Mimo e metoda ta nie bya konieczna (cao mona byo umieci
na obrazku GIF), pozwolia zaoszczdzi kilka bajtw. A wiadomo, e kady bajt si przyda.
Ukoczony element div wyglda tak, jak na rysunku 3.7.
Po ukoczeniu ta elementu div umieszczono nad nim film Flasha, ktry doskonale do niego
pasowa (rysunek 3.8).

102

Rozdzia 3. Witryna internetowa mistrzostw PGA

Rysunek 3.7. Kontener div z grafik w tle widziany w przegldarce. Zostay dodane wskazwki
informujce, ktry obszar jest zajmowany przez obraz, a ktry zosta narysowany przez
przegldark

Rysunek 3.8. Film Flasha umieszczony nad kontenerem z rysunku 3.7


Zanim przejd dalej, podam jedn wskazwk. Zawczasu upewnij si, e projekt jest na stae
przymocowany do swojego miejsca, najlepiej przy uyciu siatki elementw ustawionych
z dokadnoci do jednego piksela. Uzyskanie takiego efektu wymaga, by z gry zna uoenie treci na stronie. Jeli sprbujesz wyprzedzi czas i zastosowa takie efekty do jeszcze
nieustalonego ukadu, bdziesz musia wicej ni raz zaczyna wszystko od pocztku. Efekt,
taki jak ten, potraktuj jak dopieszczanie projektu. Odrobina cierpliwoci i planowania pozwoli unikn problemw i zaoszczdzi duo czasu.

Dodanie realizmu
To jest dobre miejsce na podanie dodatkowej wskazwki, ktra umoliwi dodanie wikszego
realizmu do efektu cienia.
W realnym wiecie (tym poza monitorem) przezroczysto cienia jest zalena od powierzchni, na jak pada. Jeli jest biaa, cie jest jasnoszary. Jeli jest ciemna, cie wydaje si duo
ciemniejszy. To wszystko jest oczywiste, ale w paskim wiecie ekranw monitorw nie jest
takie proste.

103

Rozdzia 3. Witryna internetowa mistrzostw PGA


Na witrynie PGA posunito si nieco dalej i ustawiono rne kolory cienia, zalene od tego,
z jakim kolorem ta oddziaywa. Wikszo treci w prawej kolumnie miaa przezroczyste
to, a wic korzystaa z koloru zdefiniowanego pod spodem, ale odnoniki do wiadomoci
sprawiay problemy. Uytkownikom trudno byo je odrni. W zwizku z tym, to co drugiego elementu wiadomoci byo przyciemnione (jak wiersze w tabeli) i zmieniano odcie
cienia, jeli byo trzeba.
W tym celu ponownie otwarto oryginalny dokument Photoshopa i zmieniono kolor na nieco
ciemniejszy (#828279), ktry dobrze wspgra z reszt ukadu. Zaznaczono obszar o wysokoci
jednego piksela (tak jak poprzednio) i skopiowano ten obszar do nowego dokumentu. Grafika
wygldaa bardzo podobnie do poprzedniej, tylko bya nieco ciemniejsza (rysunek 3.9).

Rysunek 3.9. Cie z nieco ciemniejszym tem zaznaczony narzdziem


do prostoktnego zaznaczania
W kodzie XHTML utworzono list nieuporzdkowan. Z semantycznego punktu widzenia
elementy listy doskonale nadaj si do oznaczania danych, takich jak paski nawigacyjne
(o czym przekonasz si nieco dalej). W poczeniu z CSS mona przy ich uyciu uzyska
wiele efektw wizualnych.
W prawej kolumnie szablonu XHTML zostaa utworzona ponisza lista elementw wiadomoci:
<ul class=stories>
<li>DiMarco and Riley play their way into Ryder Cup</li>
<li>No question PGA will return to Whistling Straits</li>
<li>Sullivan lowest club professional at PGA since 1969</li>
<li>PGA of America adjusts Sunday yardages at Whistling Straits</li>
</ul>

Nastpnie klas przypisan elementowi tej listy zdefiniowano w CSS:


ul.stories {
margin:0;
padding:0;
color:#E9E9DF;
}

104

Rozdzia 3. Witryna internetowa mistrzostw PGA


Najpierw przypisano klas stories do elementu listy nieuporzdkowanej. Dziki temu zostay wyzerowane domylne wasnoci, ktre przegldarka zastosowaaby wobec tego elementu. Ustawiono margines i dopenienie na zero oraz zdefiniowano kolor tekstu w caej licie.
Z technicznego punktu widzenia, mona byo opuci element ul w selektorze i zostawi sam
klas. Mimo e przypisywanie klas bezporednio do elementw HTML nie jest najlepszym sposobem projektowania, tak napisane arkusze stylw znacznie atwiej si czyta. Traktuj te elementy
jak komentarze pozwalajce szybko si zorientowa, jakie jest przeznaczenie danego selektora
po kilku miesicach, gdy trzeba wprowadzi jakie poprawki lub nad stron pracuje wicej ni
jedna osoba. Dobra organizacja na pocztku skutkuje oszczdnoci czasu w przyszoci.

Po sformatowaniu samego elementu ul przyszed czas na zajcie si elementami wewntrz


listy:
ul.stories li {
list-style:none;
margin-bottom:2px;
padding:4px 4px 4px 10px;
}

Przeanalizuj ten kod wiersz po wierszu. Najpierw wasno list-style zostaa ustawiona
na none, co spowodowao zniknicie domylnych okrgych punktorw. Nastpnie dodano
niewielki margines dolny, aby odsun od siebie elementy listy w pionie, oraz dopenienie
(4piksele od gry, prawej i dou oraz 10 z lewej strony).
Domylnie wartoci te zostay zastosowane do kadego elementu listy nieuporzdkowanej
nalecej do klasy stories. Na tym etapie wszystkie miay takie samo to (przewitujce spod
spodu), ale ponisza regua odpowiada za dodatkowy efekt:
ul.stories li.odd {
background:#828279
url(http://i.pga.com/pga/images/pgachampionship/img/bg_stories_shadow.gif) repeat-y;
}

Dziki piknu dziedziczenia klasa odd nie musiaa ju implementowa wszystkich wczeniejszych wasnoci, a tylko t, ktra bya potrzebna to. Zostao zastosowane ciemniejsze to
i podano adres URL drugiego obrazu ta oraz poinstruowano przegldark, aby powtrzya
obraz tylko w pionie.
Kod listy nieuporzdkowanej zosta dodany do dokumentu XHTML i klasa odd zostaa zastosowana (rcznie, chocia mona byo to zrobi przy uyciu JavaScriptu lub jzyka PHP itp.)
do co drugiego elementu listy:
<ul class=stories>
<li class=odd>DiMarco and Riley play their way into Ryder Cup</li>
<li>No question PGA will return to Whistling Straits</li>
<li class=odd>Sullivan lowest club professional at PGA since 1969</li>
<li>PGA of America adjusts Sunday yardages at Whistling Straits</li>
</ul>

105

Rozdzia 3. Witryna internetowa mistrzostw PGA


Wydaje si, e powysza lista nieuporzdkowana jest czci prawej kolumny umieszczon
pod cieniem gwnego obszaru treci, ale w rzeczywistoci znajduje si nad utworzonym
wczeniej tem (rysunek 3.10). Sztuczka polega na umieszczeniu prawej kolumny (zawierajcej list nieuporzdkowan) bezporednio nad praw krawdzi lewej kolumny. To tworzy
zudzenie, e ciemniejsze to elementw listy jest czci cienia, podczas gdy w rzeczywistoci znajduje si nad nim.

Rysunek 3.10. Elementy listy z ciemniejszym tem umieszczone w kontenerze div


Oto kod CSS prawej i lewej kolumny:
#lcol {
width:468px;
float:left;
}
#rcol {
width:271px;
float:right;
}

Podstawowy kod XHTML potrzebny do uzyskania tego efektu wyglda nastpujco:


<div id=colwrap>
<div id=lcol>
<! Zawarto lewej kolumny >
</div>
<div id=rcol>
<ul class=stories>
<li class=odd>DiMarco and Riley play their way into Ryder Cup</li>
<li>No question PGA will return to Whistling Straits</li>
<li class=odd>Sullivan lowest club professional at PGA since 1969</li>
<li>PGA of America adjusts Sunday yardages at Whistling Straits</li>
</ul>
</div>
</div>

Dodatkowy efekt cienia zosta ukoczony.

106

Rozdzia 3. Witryna internetowa mistrzostw PGA


Jeli miaby zapamita tylko jedn rzecz, pamitaj o tym, e wykorzystujc zdolno przegldarki do automatycznego powtarzania obrazw ta i jednoczesnego stosowania koloru ta
tego samego elementu wizualn gbi do paskiego i statycznego projektu mona dodawa
na wiele sposobw. Wymaga to tylko nieco cierpliwoci, planowania i poeksperymentowania.

Tworzenie w CSS menu rozwijanych


Pod koniec lat 90. ubiegego wieku, w najlepszych czasach dotcomw znakiem rozpoznawczym wyrafinowanej, utworzonej przy uyciu najnowoczeniejszych technik witryny byo
rozwijane menu nawigacyjne. Menu takie prezentoway si bardzo atrakcyjnie, ale za nimi
stao mnstwo kodu JavaScript, rozdtego HTML, a nawet elementw dziaajcych tylko
w konkretnych przegldarkach. Zamiast podnosi komfort uytkownika wiele wczesnych
menu rozwijanych tylko go pogarszao (szczeglnie wtedy, gdy nie chciay dziaa), a na
dodatek niepotrzebnie rozdymao objto kodu.
Wwczas pojawiy si CSS i magiczny selektor pseudoklasy :hover. Guru CSS, tacy jak
Eric Meyer i Christopher Schmitt, publikowali kursy uczce, jak wykorzystywa moliwoci nowej funkcji. Stosujc j w poczeniu ze zwykymi listami, mona byo uzyska
menu rozwijane podobne do tworzonych przy uyciu JavaScriptu, ale duo lejsze i mniej
skomplikowane.
Byo jednak jedno ale: Internet Explorer dla Windows. Zdecydowanie najpopularniejsza
przegldarka internetowa nie obsugiwaa w peni pseudoklasy :hover (ani CSS, ale to ju
inna historia), przez co nie radzia sobie z menu rozwijanymi w CSS. Menu te stay si co
najwyej zajciem dla hobbystw.
Zmiany zaczy si w 2003 roku, kiedy Patrick Griffiths i Dan Webb postawili spoeczno
CSS na gowie swoim skryptem Suckerfish Dropdowns (www.alistapart.com/articles/dropdowns).
By to lekki, zbudowany przy uyciu CSS system menu rozwijanych, ktry dziaa w prawie
kadej przegldarce, wcznie z Internet Explorerem dla Windows. Suckerfish by rewelacj
nie tylko pod wzgldem objtoci, lecz take zgodnoci z przegldarkami, standardami; by
bogaty semantycznie oraz szeroko dostpny.
Dodatkowo menu te byy niezwykle atwe do zbudowania. Kady, kto potrafi utworzy list
nieuporzdkowan w XHTML, mia uatwione zadanie. Wszystkie waciwoci prezentacyjne i funkcjonalne byy kontrolowane przez niewielki zestaw regu stylistycznych.
Kilka miesicy pniej Griffiths i Webb zaktualizowali swj produkt, nazywajc go Son of
Suckerfish. Bya to jeszcze lejsza i lepiej wsppracujca z przegldarkami wersja poprzedniego skryptu, umoliwiajca tworzenie wielopoziomowych menu. W witrynie PGA uyto
wanie drugiej wersji, ale nie bd tu zgbia podstawowych szczegw (przykady
mona pobra ze strony www.htmldog.com/articles/suckerfish). Opisz natomiast, jakich dokonano przerbek, omwi potencjalne puapki oraz podam oglne wskazwki dotyczce
uytkowania tych menu.

107

Rozdzia 3. Witryna internetowa mistrzostw PGA

Pozycjonowanie menu rozwijanych


Pierwszy problem napotkany podczas modyfikowania skryptu Suckerfish na potrzeby
witryny PGA dotyczy pozycjonowania menu. Domylnie zagniedone wysuwane menu
pokazyway si bezporednio pod swoim elementem rodzicem, w zalenoci od wysokoci
grafiki lub tekstu, ktre si w nim znajdoway. W witrynie PGA grafiki rodzicw byy krtsze
ni otaczajcy je obszar (aby zmniejszy wag plikw). W zwizku z tym, menu rozwijane,
zamiast pojawia si pod biaym paskiem nawigacyjnym (tak jak w ostatecznej wersji), pojawiay si pod odnonikami graficznymi.
cza graficzne mona byo edytowa z dodatkow pust przestrzeni na dole, aby
przenie menu rozwijane do podanej lokalizacji, ale to spowodowaoby zwikszenie
rozmiaru plikw i powstanie czy w miejscach, w ktrych nic nie wida. Wyzwanie zatem
polegao na tym, aby zepchn menu rozwijane pod biay pasek nawigacyjny, nie naruszajc istniejcej treci.
Pierwszy krok by atwy. Kada zagniedona nieuporzdkowana lista (menu rozwijane)
bya pozycjonowana bezwzgldnie, a wic przeniesiono je niej przy uyciu wasnoci top:
#nav li ul {
position:absolute;
left:-999em;
top:20px;
}

W ten sposb przesunito kade menu rozwijane o 20 pikseli poniej jego rodzica, a zatem
pod biay pasek nawigacyjny. Pojawi si jednak nowy problem. Obszar midzy gwnymi
odnonikami a menu rozwijanymi (ten sam, ktry nie powinien by odnonikiem) wycza
efekt rollover, gdy kursor przesuwa si w d. Zatem kolejnym krokiem byo podtrzymanie
widocznoci menu rozwijanych, gdy kursor wchodzi na ten pusty obszar.
Domylnie wysoko elementu listy jest zdeterminowana przez jego tre. Mona to jednak
zmieni za pomoc CSS:
#nav li {
position:relative;
float:left;
margin:0 15px 0 0;
padding:0;
width:auto;
height:20px;
}

Najwaniejsza w tym kodzie jest wasno height. Jej zdefiniowanie sprawio, e przesonito
domylne, wspomniane wczeniej zachowanie elementw listy i niewidoczny blok kadego
z nich rozcign si, zapeniajc luk. Teraz elementy listy zachowuj si tak, jakby zawieray obrazy o wysokoci 20 pikseli, ale w rzeczywistoci s znacznie krtsze. Jednak przegldarki nie widz rnicy, dziki czemu menu dziaaj zgodnie z oczekiwaniami.

108

Rozdzia 3. Witryna internetowa mistrzostw PGA


Aby zobaczy efekt, spjrz na rysunek 3.11. Za pomoc dostpnego bezpatnie rozszerzenia
Web Developer (ktrego autorem jest Chris Pederick http://chrispederick.com/work/
web-developer) dla Firefoksa sprawiem, e niewidoczne bloki elementw listy stay si
widzialne. Stanowi to wizualne potwierdzenie dokonanych zmian i pozwala zobaczy,
co w rzeczywistoci wywietla przegldarka. Dodatek ten przyda si wiele razy podczas pracy
nad witryn PGA i polecam go kademu, kto zajmuje si tworzeniem stron internetowych.

Rysunek 3.11. Strona PGA w Firefoksie z wczonym obramowaniem elementw listy i obrazw
przy uyciu dodatku Web Developer

Dostrajanie: stylizacja menu rozwijanych


Po zmuszeniu menu rozwijanych do prawidowego funkcjonowania i pojawiania si we
waciwym miejscu nadszed czas na modyfikacj wygldu ich opcji.
Najpierw kolor ta zagniedonych list nieuporzdkowanych ustawiono na biay oraz nadano im jednakow szeroko (rwn najduszemu elementowi):
#nav li ul {
margin:0;
padding:0;
position:absolute;
left:-999em;
top:20px;
background:#fff;
width:146px;
}

109

Rozdzia 3. Witryna internetowa mistrzostw PGA


Jak wida na rysunku 3.12, problem atwo dostrzec. Lewa krawd kadego menu rozwijanego jest wyrwnana z lew krawdzi zawierajcego je elementu listy, a opcje nie s wystarczajco oddzielone.

Rysunek 3.12. le wyrwnane menu z mdo wygldajcymi opcjami


W zwizku z tym, dokonano pewnych modyfikacji:
#nav li li {
height:auto;
margin:0;
padding:0;
width:100%;
font-size:9px;
border-bottom:1px solid #F5F5F0;
}

Poniewa szeroko kadego zagniedonego elementu listy zostaa ustawiona na 100%,


rozszerza si on na ca szeroko swojego elementu nadrzdnego ktry w tym przypadku ma szeroko 146 pikseli. Jeli domylna szeroko elementw listy nie jest zmieniona,
przegldarka rysuje doln krawd tylko na szeroko treci. Ustawienie jej na 100% nadaje
opcjom jednolity wygld, bez wzgldu na tre.
Nastpnie zajto si zawartoci tekstow:
#nav li li span {
display:block;
margin:0;
padding:3px 4px 3px 7px;
position:relative;
}

110

Rozdzia 3. Witryna internetowa mistrzostw PGA


Aby lepiej mona byo kontrolowa pozycj kadego bloku tekstu, opcje zostay opakowane
w znacznik span, ktry pozwala unikn uywania kolejnej klasy i lepiej nadaje si z semantycznego punktu widzenia ni div, p lub jakikolwiek inny. A wic wasno display elementu
span zostaa zmieniona na block (domylnie jest inline). Dziki temu mona definiowa atrybuty blokw, takie jak margin i padding. Po odpowiednim zdefiniowaniu dopenienia menu
wyglda tak, jak na rysunku 3.13.

Rysunek 3.13. Opcje menu rozwijanego po sformatowaniu, ale niewyrwnane z lewym marginesem
gwnych odnonikw nawigacyjnych
Menu wygldaj na ukoczone, ale do zrobienia pozostaa jeszcze jedna rzecz. Opcje tekstowe nie s wyrwnane z lew krawdzi swoich elementw nadrzdnych. Mimo e nie
trzeba tego zmienia, zdecydowano, e bd lepiej wyglday, jeli zostan przesunite nieco
w lewo. Na szczcie, wystarczy tylko przesun kad list nieuporzdkowan w lewo:
#nav li ul {
margin:0 0 0 -8px;
padding:0;
position:absolute;
left:-999em;
top:20px;
background:#fff;
width:146px;
}

Dobrze, e mona uywa ujemnych wartoci! Zmiana lewego marginesu na -8 (kolejno


wartoci marginesw to gra, prawa, d, lewa) spowodowaa przeniesienie nieuporzdkowanej listy o osiem pikseli w lewo (gdyby warto bya dodatnia, przeniesienie byoby
w prawo). Dziki temu lewa krawd kadej opcji tekstowej wyrwnuje si ze swoim nadrzdnym elementem tak, jak na rysunku 3.14.

111

Rozdzia 3. Witryna internetowa mistrzostw PGA

Rysunek 3.14. Ukoczone menu rozwijane

Uwaga na puapk
Po zapoznaniu si z technikami modyfikowania oryginalnego kodu rdowego przyszed
czas na ostrzeenie przed potencjalnym problemem, ktry moe pojawi si podczas uywania
skryptu Suckerfish. Wymaga on wczonego JavaScriptu w Internet Explorerze dla Windows. Zalicz
to do zestawu nieudolnych implementacji CSS w tej przegldarce. W przegldarkach Mozilla,
Firefox i Safari skrypt ten dziaa wycznie przy uyciu CSS, ale w Internet Explorerze do dziaania wymaga JavaScriptu. Hack ten jest niewielki i naprawia brak obsugi pseudoklasy :hover,
dodajc niestandardowe zachowania do obiektowego modelu dokumentu (DOM). W tym ley
sedno problemu. Jeli uytkownik Internet Explorera wyczy JavaScript, menu w ogle si nie
pojawi. Mimo e bardzo mao osb tak postpuje, trzeba to bra pod uwag.

Uyteczno menu rozwijanych


Problem zgodnoci z przegldarkami zosta rozwizany, zatem poniej przedstawiam kilka
wskazwek dotyczcych wdraania menu rozwijanych na wasnych stronach.
Wskazwka 1. Zagwarantuj wyjcie awaryjne. Ze wzgldu na opisane wczeniej problemy ze zgodnoci, naley bezwzgldnie wyposay stron w dodatkowy system
nawigacji, na wypadek gdyby gwny nie zadziaa. Inaczej odwiedzajcy nie bd
mogli porusza si po witrynie. Powinna to by standardowa procedura podczas uywania kadego rodzaju nawigacji opartej na menu rozwijanych, nie tylko Suckerfish.
Wskazwka 2. Uwaaj na Internet Explorera, Suckerfisha i Flasha. Przegldarka
Internet Explorer dla Windows, napotykajc film Flasha, przenosi go na sam wierzch
stosu warstw. Oznacza to, e menu mog znale si pod filmem, co uniemoliwi
uytkownikom klikanie jego elementw. Rozwizaniem jest uycie parametru wmode
(szczegowe informacje na ten temat znajduj si na stronie www.macromedia.com/
support/flash/ts/documents/flash_top_layer.htm).
Wskazwka 3. Jeli dokument zawiera warstwy, uywaj wasnoci z-index. Jeeli
strona zawiera obiekty na warstwach z wasnoci z-index, nawigacja Suckerfish
rwnie musi j mie, ale ustawion na poziom wyszy ni wszystkie pozostae.

112

Rozdzia 3. Witryna internetowa mistrzostw PGA


Wasno t mona zastosowa wobec nadrzdnej listy nieuporzdkowanej lub (tak
zrobiono na stronie PGA) mona nawigacj wstawi do elementu div i wasno z-index zastosowa do niego. Wtedy nawigacja bdzie znajdowaa si nad wszystkim i po
rozwiniciu menu zawsze bdzie na wierzchu.

Kocowe uwagi
Skoro jest tyle problemw, po co w ogle uywa nawigacji Suckerfish? Odpowied jest prosta.
Poza opisanymi niedogodnociami, Suckerfish jest jednak najlepiej dostpnym, dziaajcym we
wszystkich przegldarkach rozwizaniem. Ponadto zajmuje znacznie mniej bajtw ni jakiekolwiek inne konkurencyjne rozwizanie oraz jest atwiejszy w utrzymaniu i modyfikacji. Jeli
implementujesz menu w witrynie z duym ruchem (witryna PGA np. odnotowywaa miliony
odwiedzin na godzin), zastosowanie lekkiego wariantu jest optymalnym rozwizaniem.

Wstawianie filmw Flasha


w zgodzie ze standardami
Jednym z najczstszych problemw nkajcych twrcw stron internetowych dbajcych
o zgodno ze standardami jest wstawianie animacji Flasha. Wikszo z nich kopiuje i wkleja standardowy kod wygenerowany przez Flash. Poniewa jednak jest on najeony rnymi
niestandardowymi atrybutami i elementami, obraca wniwecz zgodno dokumentu ze standardami sieciowymi. Znacznik embed nie naley do adnej specyfikacji W3C.
Na szczcie, mona te problemy obej. Poniej przedstawiam trzy najpopularniejsze obecnie rozwizania problemu zgodnoci ze standardami podczas wstawiania treci Flasha na
strony internetowe.

Metoda Flash Satay


Metoda Flash Satay (www.alistapart.com/articles/flashsatay) usuwa znacznik embed i niektre
niepotrzebne atrybuty znacznika object. Dziaa doskonale, ale ma jedn du wad:
w przegldarce Internet Explorer dla Windows animacje Flasha zaczynaj dziaa dopiero
po zaadowaniu caego filmu.
Metoda Satay oferuje rozwizanie tego problemu, polegajce na oszukiwaniu Internet Explorera poprzez dodanie pustego filmu kontenera z takimi samymi parametrami (szeroko, wysoko itd.) jak prawdziwy i zaadowanie podanej treci za pomoc tego filmu zastpczego.
Internet Explorer wwczas z powodzeniem odtwarza animacj strumieniowo, a kod XHTML
jest poprawny. Koszt to konieczno tworzenia dodatkowych pustych filmw i katalogw.

Wpisywanie znacznikw object i embed


przy uyciu JavaScriptu
Metoda ta polega na pozostawieniu bez zmian elementw object i embed, ale przeniesieniu
ich do zewntrznego pliku JavaScript. Tre Flasha jest wwczas zapisywana w dokumencie
za pomoc serii metod JavaScript document.write. Walidatory (wietny jest walidator W3C
http://validator.w3.org) widz tylko poprawny element JavaScript a nie znajdujce si
w nim elementy object i embed, dziki czemu wyniki walidacji s pozytywne.

113

Rozdzia 3. Witryna internetowa mistrzostw PGA


To rozwizanie zastosowano w witrynie PGA. Nie tylko kod XHTML pozosta poprawny,
lecz rwnie dziki uyciu JavaScriptu mona byo sprawdzi obecno wtyczek w przegldarce, na wypadek gdyby trzeba byo zaadowa alternatywn tre.
Po utworzeniu pliku JavaScript (zbyt dugi, aby go tutaj drukowa http://www.pga.com/
pgachampionship/2004/js/flash_home.js) naley go doczy do strony w nastpujcy sposb:
<script type=text/javascript
src=http://www.pga.com/pgachampionship/2004/js/flash_home.js></script>

Metoda nie jest idealna. Po pierwsze, puryci powiedz, e plik JavaScript jest w rzeczywistoci koniem trojaskim przemycajcym nieprawidowy i nieobsugiwany kod XHTML
w tajemnicy przed walidatorami (tak rzeczywicie jest). Po drugie, wstawiajc tre za pomoc JavaScriptu, zakadasz, e uytkownicy go nie wyczyli u siebie (wikszo osb tego nie
robi, ale niektrzy wyczaj, aby przyspieszy przegldanie i pozby si reklam). W kocu
kada animacja Flasha wymaga wasnego osobnego pliku .JS, co nie jest duym problemem
przy maej liczbie filmw, ale szybko moe sta si uciliwe.

SWFObject
Metoda SWFObject opublikowana kilka miesicy po premierze witryny PGA z 2004 roku jest
najbardziej wyrafinowanym i niezawodnym, aktualnie dostpnym rozwizaniem. Napisany
w JavaScripcie przez Geoffa Stearnsa pakiet stanowi bezporedni odpowied na ograniczenia obu wymienionych wczeniej metod. Umoliwia stosowanie prostszego kodu przechodzcego walidacj jako XHTML 1.0 Transitional i wyej.
SWFObject oferuje wszystko, czego potrzebuje programista Flasha wykrywanie odtwarzacza, moliwo zaprezentowania alternatywnej treci tym, ktrzy go nie maj, metody
przekazywania dodatkowych parametrw i zmiennych, pozycjonowanie obiektw w dowolnym miejscu za pomoc elementw div, a nawet zmienn pozwalajc obej wykrywanie
odtwarzacza i wymuszenie wywietlenia filmu bez wzgldu na to, czy w przegldarce zosta
zainstalowany ten dodatek, czy nie.
SWFObject jest te przyjazna dla wyszukiwarek, co jest rzadkoci we Flashu. Uytkownicy
tworz element div w swoich dokumentach, zapeniaj go zwyk treci HTML, jaka pniej
moe zosta zindeksowana i wywietlona tym, ktrzy nie maj odpowiedniej wtyczki. Jeli
wtyczka Flasha jest zainstalowana, zawarto elementu div zostaje zastpiona animacj. Zatem zarwno ci, ktrzy maj wtyczk, i jak ci, ktrzy jej nie maj, mog oglda bogat tre
strony, a programista nie musi si zbytnio napracowa.
Wicej informacji o pliku SWFObject (ktry jest darmowy) mona znale na stronie
http://blog.deconcept.com/swfobject.

Podsumowanie
Zaprezentowaem tu wiele informacji, od tworzenia wizualnych efektw w Photoshopie po
menu rozwijane, pozycjonowanie elementw przy uyciu CSS i problemy z walidacj treci
Flasha w dokumentach XHTML. Przedstawione tutaj techniki powinny zachci Ci do dalszych poszukiwa i eksperymentw przy uyciu CSS.
W nastpnym rozdziale przyjrzysz si procesowi przeprojektowania witryny University of
Florida. Dowiesz si, jaka bya jej historia, jakie problemy napotkano przy aktualizowaniu
starej treci oraz szczegowo zapoznasz si z uytym na niej kodem CSS.

114

You might also like