Professional Documents
Culture Documents
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
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
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
Podsumowanie
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
Podsumowanie
Definiowanie witryny
Budowa zespou
Badania uytkownikw
Badanie samych siebie
Definiowanie specyfikacji technicznych
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
Szukanie bdw
Zmiany
Gdzie to si podziao?
Podsumowanie
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
153
155
156
157
165
168
Typy mediw
Problem z wyborem
169
173
173
176
180
181
181
183
183
Tworzenie ukadu
Ukad projektu
183
184
Tworzenie witryny
186
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
211
211
212
Drukowanie projektu
Tworzenie ukadu tabelkowego
Korygowanie projektu
Analiza wpywu regu CSS na szablon
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
Podsumowanie
231
232
233
233
235
235
235
237
241
243
243
247
249
250
253
255
256
259
267
274
276
277
283
289
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.
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.
98
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
100
Rysunek 3.4. Przy uyciu narzdzia zaznaczania prostoktnego zaznaczono powtarzalny obszar
o wysokoci jednego piksela i szerokoci pozwalajcej zahaczy kawaek ta
101
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
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
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
104
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
106
107
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
Rysunek 3.11. Strona PGA w Firefoksie z wczonym obramowaniem elementw listy i obrazw
przy uyciu dodatku Web Developer
109
110
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;
}
111
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.
112
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.
113
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