CSS. Projektowanie profesjonalnych stron WWW

...
43 downloads 95 Views 58MB Size
Download PDF

div td="footer*'

Rysunek 1.6. Szkic nowego dokumentu XHTML Na tym etapie kod XHTML jest czystą tablicą, na którą można nałożyć style. Użytkownicy niemogący zobaczyć stylów mają do dyspozycji dobrze uformowaną i łatwą do zrozumienia strukturę (rysunek 1.7). Do końca tej książki będziesz poznawać techniki pozwalające jak najlepiej umieścić warstwę prezentacyjną na fundamentach z dobrze uformowanego kodu XHTML.

CSS — dodawanie warstwy stylów Tak jak z wszystkimi językami, opanowanie CSS zależy od zapoznania się z jego składnią. Pozwala to nie tylko na uzyskanie biegłości w pisaniu arkuszy stylów, lecz również lepsze zrozumienie, w jaki sposób pisane przez Ciebie reguły interpretuje przeglądarka.

Lepiej zapoznaj się z selektorami Kod CSS składa się z reguł, które przeglądarka interpretuje i stosuje do odpowiednich elementów w dokumencie. Spójrz np. na rysunek 1.8.

34

Rozdział 1. Najlepsze praktyki w XHTML i CSS © O ©

Default Session (78,51)

O

Welcome to Harvard University (Standards style...) (pl of 2)

A

Skip navigation. * Home * Admissions & Financial Aid * Employment * Libraries * Museums * Arts * * * * * * *

President Administration Schools Campus Life Athłetics Alumni Search

Harvard Athłetics Image of female hockey players In 2004, the women's hockey team captured its sixth-straight Beanpot champ squad in the Boston area; Angela Ruggiero, who embraced the Beanpot after later named the 2004 recipient of the Patty Kazmaier Memoriał Award. The Schools of Harvard: * * * * * * * * * * * *

Co11ege/Gradua te Government Business Law Continuing Education Dental Design Medical Divinity Public Health Education Rade1 iffe Institute

m

* Events

Ł

Arrow keys: Up and Down to move. Right to folIow a link; Left to go bock. H)elp O)ptions P)rint G)o h)ain screen Q)uit /=search [delete]=history list

•

|

Rysunek 1.7. Widok poprawionej strony w przeglądarce Lynx

Selektor A

hl

Deklaracja

r

1

,

{ c o l o r : #36C; } ' i — " — r Własność

Wartość

Rysunek 1.8. Przykładowa reguła stylistyczna Każda reguła CSS składa się z tych dwóch części: selektora, informującego przeglądarkę, którego elementu dotyczy, oraz deklaracji, określającej, które własności elementu mają zostać zmodyfikowane. Na rysunku 1.8 widać, że na selektor składa się wszystko, co znajduje się przed pierwszą klamrą ({).

35

Rozdział 1. Najlepsze praktyki w XHTML i CSS Klamry otaczają blok deklaracji decydujący o działaniu całej reguły. Składa się on z przynajmniej jednej deklaracji oraz par własność-wartość określających sposób modyfikaq'i elementów wyznaczonych przez selektor. Na rysunku 1.8 własnością jest col or, a #36c jest jej wartością. Jeśli wydaje Ci się, że to jest proste, masz rację. Składnia CSS jest oparta na zdrowym rozsądku. To jednak tylko początek. Stosując te proste zasady, można tworzyć bardzo skomplikowane reguły pozwalające jeszcze lepiej kontrolować prezentację strony.

Selektor

typu

Wróćmy do prostej reguły modyfikującej nagłówek h 1: hl { color: #36C; } Jest to tzw. selektor typu, ponieważ instruuje przeglądarkę, żeby zastosowała tę regułę do wszystkich elementów wymienionego typu (w tym przypadku wszystkich elementów hl) i wyświetliła je w niebieskim kolorze. W tej właśnie chwili tysiące znaczników font wyzionęło dech i odeszło w niepamięć. Ciekawi Cię, co to jest, ta dziwna wartość #36C? Jest to skrócony zapis koloru w systemie szesnastkowym. W ten sposób można skracać wartości RGB, jeśli każda z par opisujących poszczególne komponenty składa się z takich samych wartości. A więc zamiast pisać I3366CC, możesz napisać #36C, ponieważ wartości składników czerwonego (33), zielonego (66) i niebieskiego (CC) składają się z dwóch takich samych znaków. Analogicznie można skrócić wartość IFFFFOO do #FF0, #000000 do #000 oraz #CC3300 do #C30 itd.

Selektor

uniwersalny

Inny selektor o znacznie szerszym zasięgu to selektor uniwersalny. Nie wybiera on tylko elementów określonego typu, a dopasowuje wszystkie elementy w ogóle. Ma postać gwiazdki, zwanej też często symbolem wieloznacznym: * { color: #000; } Powyższa reguła zamienia kolor treści w całym dokumencie na czarny. Proste, prawda? Takich reguł nie spotyka się jednak często, ponieważ zakres selektora uniwersalnego jest w wielu przypadkach zbyt szeroki. Ponadto istnieje kilka kwestii związanych z obsługą, które mogą wymusić dodatkowe testowanie. Później przedstawię kilka specyficznych zastosowań tego selektora.

Selektor

potomka

Wyobraź sobie, że masz poniższy kod XHTML:

Po prostu kocham wyróżnienie!

  • A Ty?!


    • 36

    Rozdział 1. Najlepsze praktyki w XHTML i CSS
  • 0ch, rozumiem.
    1. Nadal to kocham!




Domyślnie większość przeglądarek wyświetla zawartość elementu em kursywą. Ale co zrobić, jeśli masz ochotę trochę pozmieniać? Wyobraź sobie, że chcesz, aby zawartość wszystkich elementów em znajdujących się w elementach ul była pisana wielkimi literami. Wykorzystując zdobytą dotychczas wiedzę, możesz z użyciem selektora typu napisać regułę dopasowującą wszystkie elementy em: em { text-transform: uppercase;

) Jednak chcesz dopasować tylko te elementy em, które znajdują się w elementach ul — innymi słowy, elementy em w otwierającym akapicie nie powinny być modyfikowane przez tę regułę. Zwykłe użycie selektora em spowoduje dopasowanie wszystkich elementów tego typu, a więc trzeba napisać bardziej konkretny selektor: ul em {

)

text-transform: uppercase;

Na początku powyższej reguły znajduje się selektor potomka instruujący przeglądarkę, żeby „wybrała wszystkie elementy em będące potomkami elementów ul". Tak jak Ty jesteś dzieckiem swoich rodziców, jesteś też potomkiem swoich dziadków, pradziadków itd. W ten sposób powyższy styl zostałby zastosowany do każdego elementu em na każdym poziomie listy nieuporządkowanej. Co najważniejsze, reguła ta nie wybrałaby elementu em w otwierającym akapicie p, zgodnie z Twoimi intencjami. Zgoda, takie wystylizowanie elementu em nie zdarza się zbyt często. Zapamiętaj jednak, że selektory tego rodzaju umożliwiają bardzo precyzyjną kontrolę wyglądu strony. Jeśli kiedykolwiek będziesz potrzebował wyróżnienia określonej sekcji treści z globalnych reguł, dysponujesz już odpowiednim do tego celu narzędziem.

Selektor

klasy

Potrzebujesz jeszcze bardziej precyzyjnej kontroli? Arkusze stylów można związać z innymi aspektami strony. Pamiętasz atrybut cl ass użyty w przeróbce strony Harvarda? Wtedy posłużył do oznaczenia kategorii i tem elementów di v. Oto przykład użycia tego selektora: input.text { border: lpx solid #C00;

} Powyższy selektor pozwala dostać się do tych elementów, których atrybut cl ass ma wartość podaną po kropce. W tym przypadku powyższa reguła wybiera wszystkie elementy i nput z atrybutem cl ass ustawionym na text:


37

Rozdział 1. Najlepsze praktyki w XHTML i CSS





Przycisk zatwierdzający, który znajduje się na końcu formularza, pozostaje nietknięty, a reguła zostanie zastosowana do dwóch pól tekstowych, których atrybuty cl ass mają wartość text. Jeśli chcesz uogólnić selektor klasy, możesz usunąć to, co znajduje się przed kropką: .text { border: lpx solid #C00;

} Mimo że nie zdajesz sobie z tego sprawy, w tej regule został użyty selektor uniwersalny Można by ją było z takim samym skutkiem zapisać następująco: *.box { border: lpx solid #C00;

} Oba selektory działają tak samo: wybierają wszystkie elementy, których atrybut cl ass ma wartość text.

Selektor

identyfikatora

Podobnie jak selektor klasy, selektor identyfikatora pozwala wybrać element na podstawie wartości atrybutu id: hl#page-title { text-align: right;

} Podczas gdy w selektorze klasy używa się kropki, w selektorze identyfikatora korzysta się ze znaku #. Powyższa reguła wybiera elementy hl z atrybutem id mającym wartość taką samą jak tekst za znakiem #, czyli page-ti tl e. Również, tak jak w przypadku selektora klasy, i tu można używać niejawnego selektora uniwersalnego, opuszczając znacznik hl: #page-title { text-align: right;

} Jak to możliwe? Wartość atrybutu id musi być unikatowa w skali całego poprawnego dokumentu XHTML — żaden inny element w jego treści nie może mieć takiego samego atrybutu. Dlatego wiadomo, że żadna z tych reguł nie zostanie zastosowana do jakiegokolwiek innego elementu, dzięki czemu obie one dają taki sam rezultat.

38

Rozdział 1. Najlepsze praktyki w XHTML i CSS Możesz stwierdzić, że to nic wielkiego. Prawdziwa siła selektorów identyfikatora ujawnia się, gdy zostaną użyte jako podstawa selektorów potomka, jak poniżej: #content hZ { text-transform: uppercase;

} Tego rodzaju reguły są podstawowym budulcem skomplikowanych układów. Przy ich użyciu można tworzyć style, które doskonale rozpoznają swój kontekst. Powyższa reguła wybierze wszystkie elementy h2, które są potomkami elementu z identyfikatorem content. Wszystkie inne nagłówki drugiego stopnia pozostaną nietknięte.

Inne selektory W tym punkcie opiszę kilka innych selektorów wymienianych w specyfikami CSS. IV czasie pisania tego tekstu przeglądarka Microsoft Internet Explorer 6 dla Windows (MSIE 6/Win) nie obsługiwała tych selektorów. Inne przeglądarki natomiast radziły sobie z nimi bardzo dobrze (np. Internet Explorer 7, Firefox, Opera i Safari). Podczas gdy wiele z nich zostało wprowadzonych w CSS 2, przeglądarka MSIE 6/Win, delikatnie mówiąc, słabo radzi sobie z tą specyfikacją. Mimo że przeglądarka Internet Explorer 7 radzi sobie z tym bardzo dobrze i z czasem wyprze swoją poprzedniczkę, warto sprawdzić dzienniki swojej witryny przed zastosowaniem tych selektorów, aby dowiedzieć się, czy nie odwiedza jej wielu użytkowników korzystających ze starego oprogramowania.

Selektor

dziecka

Wcześniej opisałem reguły pozwalające zmienić wygląd wszystkich elementów będących potomkami jednego określonego elementu. Wyobraź sobie, że chcesz zmienić styl wszystkich akapitów w swoim dokumencie:

Jestem modelem...

Nowoczesnego sposobu pisania kodu.

Najlepiej się mnie uczyć już za młodu.

Aby tekst wszystkich akapitów był pogrubiony, można użyć jednej z poniższych reguł: P ( font-weight: bold; 1 lub body p { font-weight: bold;

}

39

Rozdział 1. Najlepsze praktyki w XHTML i CSS Obie dadzą taki sam efekt. Jak pisałem wcześniej, wybrałyby one wszystkie akapity znajdujące się w elemencie body, na każdym poziomie. Co jednak zrobić, aby ograniczyć zakres dopasowania do akapitów będących bezpośrednimi potomkami elementu body w hierarchii dokumentu? Trzeba użyć selektora dziecka: body>p { font-weight: bold;

} Znak większości (>) informuje klienta, aby regułę zastosował do wszystkich elementów p będących dziećmi elementu body, a nie ogólnie potomkami. W związku z tym, akapity znajdujące się w elementach di v zostałyby niezmienione, ponieważ są dziećmi tego elementu, a nie body. Natomiast akapity znajdujące się przed elementem di v i za nim zmieniłyby wygląd, ponieważ ich rodzicem jest element body.

Selektor

atrybutu

Aby umożliwić uniknięcie „przyprawiania" dokumentu zbyt dużą liczbą atrybutów cl ass, w specyfikacji CSS zdefiniowano selektory atrybutów. Pozwalają one tworzyć dopasowania w oparciu nie tylko o atrybut cl ass, ale także o inne atrybuty. Selektory atrybutów oznaczane są kwadratowymi nawiasami i mogą mieć jedną z czterech form wymienionych w poniższej tabeli. Składnia selektora atrybutu

Wynik

[x]

Dopasowanie, jeśli element ma określony atrybut x, bez względu na jego wartość.

[x=y]

Dopasowanie, jeśli atrybut x elementu ma wartość y.

[x~=y]

Dopasowanie, jeśli wartość atrybutu x elementu jest rozdzielaną spacjami listą słów, z których jedno to y.

[x | =y]

Dopasowanie, jeśli wartość atrybutu x elementu jest listą słów oddzielanych myślnikami, z których pierwsze to y.

Wydaje się nieco skomplikowane? Poniższa tabela zawiera kilka przykładów użycia tych selektorów oraz opis elementów, które zostałyby przez nie wybrane. Selektor

Znaczenie

Co wybierze?

Czego nie wybierze?

pflang]

W y b i e r a wszystkie elementy p z atrybutem lang.









Wybiera wszystkie elementy p, których atrybut 1 ang









p[lang="fr"]

m a wartość f r.

40

Rozdział 1. Najlepsze praktyki w XHTML i CSS Selektor

Znaczenie

Co wybierze?

Czego nie wybierze?

p[lang~="fr"]

Wybiera wszystkie elementy p, których atrybut 1 ang zawiera słowo fr.





p[lang|="en"]

Wybiera wszystkie elementy p, których atrybut 1 ang zawiera wartość en lub zaczynającą się od en-.





Potencjalne zastosowania tych selektorów są — delikatnie mówiąc — fascynujące. Przy użyciu zaprezentowanego wcześniej formularza praca z nimi stała się znacznie łatwiejsza.



<1 abel for="text-one">Box #l:



<1abel for="text-two">Box #2:



Za pomocą selektora atrybutu można z łatwością dostać się do wszystkich elementów i nput, których atrybut type ma wartość text: input[type="text"] { border: lpx solid #C00;

} Zaletą tej metody jest to, że element pozostaje nietknięty, a więc obramowanie zostanie utworzone tylko wokół pożądanych pól tekstowych. Nie trzeba już nadużywać prezentacyjnych atrybutów cl ass. W zamian można skorzystać z kodu XHTML jako pewnego rodzaju API dla arkuszy stylów, umożliwiającego pisanie selektorów „wgryzających się" w strukturę dokumentu. Na wypadek, gdyby ktoś chciał oskarżyć mnie o zadzieranie nosa wobec selektorów klasy, pragnę zapewnić, że moją intencją nie jest wywarcie jak największego wrażenia za pomocą wywodów na temat składni. W ostatecznym rozrachunku selektory, których możesz używać — tzn. obsługiwane przez przeglądarkę Internet Explorer—są doskonałymi, jeśli nie idealnymi narzędziami. Mimo że klasy w formularzach może nie są rozwiązaniem najwyższych lotów, z punktu widzenia składni, dają programiście bardzo dużą elastyczność w kontroli struktury dokumentu.

41

Rozdział 1. Najlepsze praktyki w XHTML i CSS

Łączenie

deklaracji

Wszystkie prezentowane do tej pory reguły stylistyczne składały się tylko z jednej deklaracji — na szczęście, nie jest to wymóg. Wyobraź sobie, jak rozwlekłe byłyby pliki CSS, gdy trzeba było pisać taki kod: hl hl hl hl hl

{ { { { (

color: #36C; } font-weight: normal; } letter-spacing: .4em; } margin-bottom: lem; } text-transform: lowercase; )

Gdyby przeglądarki czytały ten kod na głos, byłby to doskonały lek na bezsenność. Brzmiałoby to mniej więcej tak: „Znajdź wszystkie elementy hl i pokoloruj je na kolor #36c. Znajdź wszystkie elementy hl i ustaw im normalną grubość pisma. Znajdź wszystkie elementy hl i ustaw w nich odstęp międzyliterowy na kropka cztery em. Znajdź wszystkie elementy hl i zastosuj dolny margines o wartości jeden em. Znajdź wszystkie elementy hl i zamień ich wszystkie litery na małe". Niezbyt zajmująca lektura, prawda? Nie martw się, poradzimy sobie z tymi nudami szybciej, niż myślisz. Na szczęście, można uniknąć tego przerostu formy nad treścią. Wszystkie deklaracje mające ten sam selektor można skompaktować w jednej, łatwej do odczytu regule, oddzielając je od siebie średnikami. Spójrzmy na poprawioną wersję powyższego kodu: hl { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: lem; text-transform: lowercase;

} Wygląda lepiej. Jak widać, za pomocą jednej reguły można nadać styl wielu różnym własnościom jednego elementu. Dzięki temu łatwiej utrzymać porządek w arkuszach stylów. Zaiste, zwięzłość jest istotą stylu. W regułach składających się z kilku deklaracji średnik pełni rolę znaku oddzielającego. Można go opuścić za ostatnią deklaracją w regule, chociaż dla zachowania spójności zaleca się nierobienie tego. Dzięki temu, jeśli zechcesz zmienić miejsce występowania deklaracji w regule lub zmienić jakąś wartość, nie trzeba pamiętać o tym, że może brakować średnika.

Selektory

grupujące

Czy da się zastosować reguły elementów hl do innych elementów? Jeśli chcesz, aby wszystkie nagłówki h2 i h3 miały taki sam styl jak hl, możesz — oczywiście — napisać to bezpośrednio tak: hl { color: #36C; font-weight: normal; letter-spacing: ,4em; margin-bottom: lem; text-transform: lowercase;

}

42

Rozdział 1. Najlepsze praktyki w XHTML i CSS h2 { color: #36C; font-weight: normal; letter-spacing: ,4em; margin-bottom: lem; text-transform: lowercase;

} h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: lem; text-transform: lowercase;

} Trochę dużo kodu? To prawda. Ale tę sytuację także przewidziano w specyfikacji, aby umożliwić oszczędzanie łączy użytkowników poprzez tworzenie zwięzłych arkuszy stylów. Jeśli kilka reguł ma takie same deklaracje, ich selektory można zgrupować na jednej liście, oddzielając je przecinkami. Przykładowo powyższe trzy reguły można zapisać jako jedną obejmującą wszystkie: hl, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: lem; text-transform: lowercase;

} Kolejność selektorów na liście jest bez znaczenia. Wszystkie deklaracje zostaną zastosowane do każdego z elementów wyznaczonych przez każdy z tych selektorów. Oczywiście, grupowanie selektorów można wykorzystać w bardziej inteligentny sposób. Jeśli reguły mają wspólne tylko niektóre deklaracje, można je wydzielić do jednej wspólnej reguły, a pozostałe umieścić w osobnych regułach, np.: Icontent { border: lpx solid #C00; padding: 10px; width: 500px;

} #footer { padding: 10px; width: 500px;

}

#supplement { border: lpx solid #C00; padding: 10px; position: absolute; left: 510px; width: 200px;

}

43

Rozdział 1. Najlepsze praktyki w XHTML i CSS Widać, że wszystkie powyższe reguły ustawiają dopełnienie na 10 pikseli. Reguły #content i #footer mają takie same szerokości. Reguły #content i fsuppl ement ustawiają natomiast 1-pikselowe czerwone obramowanie. Przy tych podobieństwach można własności o takich samych wartościach skonsolidować w następujący sposób: fcontent, #footer, #supplement { padding: 10px;

} fcontent, #footer { width: 500px;

}

#content, Isupplement { border: lpx solid #C00;

}

#supplement { position: absolute; left: 510px; width: 200px;

}

Może się wydawać, że niewiele udało się uzyskać. Wcześniej było 16 wierszy kodu, a teraz jest 14 i na dodatek przybyła jedna reguła do pilnowania. Zalety tej metody mają jednak charakter kumulacyjny i w pełni ujawniają się dopiero przy tworzeniu bardziej skomplikowanych reguł. Dzięki konsolidacji wspólnych deklaracji wystarczy zmodyfikować tylko jedną regułę, aby zmienić kolor obramowania elementów #content i fsuppl ement albo zwiększyć szerokość elementów #content i Ifooter. Gdy Twoje arkusze stylów zamiast kilkunastu wierszy kodu będą zawierać po kilkaset, takie grupowanie może zaoszczędzić naprawdę dużo czasu, jeśli wyniknie konieczność edytowania wspólnych wartości.

Tajniki

dziedziczenia

Pisząc reguły CSS, należy pamiętać, że niektóre własności (i przypisane im wartości) zostaną odziedziczone przez elementy potomne. W istocie proces ten można z powodzeniem porównać do dziedziczenia w rodzinie. Pod tym względem strony internetowe bardzo się od nas nie różnią. Istnieją na nich pokrewieństwa typu rodzic-dziecko, powodujące, że elementy dziedziczą własności stylistyczne po tych elementach, które je zawierają. Można nawet narysować drzewo rodzinne elementów strony, np. takie jak to na rysunku 1.9.

Rysunek 1.9. Drzewo hierarchii elementów

44

Rozdział 1. Najlepsze praktyki w XHTML i CSS Hierarchia

elementów

Element html jest korzeniem drzewa, a więc znajduje się u jego podstawy. Jest rodzicem swoich elementów-dz/ea — czyli elementów head i body, które mają swoje dzieci, mające własne dzieci itd. Elementy mające tego samego rodzica nazywają się siostrami. Znaczniki znajdujące się więcej niż jeden poziom poniżej innego znacznika są jego potomkami. Analogicznie elementy wyżej w hierarchii mogą być przodkami tych, które znajdują się niżej. Tak wygląda całe drzewo hierarchii znaczników HTML i nie ma w nim takich przyjemności, jak wujek Stasiek opowiadający sprośne kawały w czasie Wigilii (uwierzcie mi, znacznie lepiej piszę książki 0 projektowaniu witryn internetowych, niż opowiadam dowcipy genealogiczne). Mając w głowie taki hierarchiczny obraz swoich znaczników, łatwiej można wyobrazić sobie, w jaki sposób style będą rozchodzić się na poszczególne gałęzie. Spójrz na poniższy przykład: body { color: #000; f o n t - f a m i l y : Georgia, "Times New Roman", serif;

}

font-size: 12px;

Wiesz już, że reguła ta nakazuje klientowi znalezienie wszystkich elementów body i zastosowanie w nich szeryfowego kroju pisma (najpierw ma poszukać fontu Georgia, później Times New Roman, a na końcu generycznego fontu bezszeryfowego) o rozmiarze 12 pikseli 1 czarnym kolorze (#000). Zasady dziedziczenia sprawiają, że te trzy własności zostaną odziedziczone przez wszystkie elementy znajdujące się w elemencie body albo — użyję tu terminologii rodzinnej — własności te zostaną zastosowane do wszystkich elementów będących potomkami elementu body. Wiesz już zatem, w czym tkwi siła CSS jako narzędzia prezentacyjnego. Cztery wiersze składające się na jedną prostą regułę stylistyczną wykonują zadanie całej chmary znaczników font. Mimo że dziedziczenie jest jednym z najpotężniejszych aspektów CSS, czasami może być też źródłem największych nieporozumień. Pamiętaj, że nie wszystkie własności są dziedziczone. Dwa przykłady takich własności to marginesy i dopełnienie. Są stosowane do konkretnie wyznaczonych elementów i nie podlegają dziedziczeniu przez potomków. Najlepszym źródłem informacji, które własności są dziedziczone, jest specyfikacja CSS (www.w3.org/TR/CSS21/about.html#property-defs).

Uchylanie

dziedziczenia

Co zrobić, jeśli nie chcesz, aby któraś część dokumentu dziedziczyła niektóre własności po przodkach? Spójrz na poniższy przykład:

Bardzo lubię duże bloki,

    < l i > . . . a l e l i s t y są jeszcze fajniejsze.


45

Rozdział 1. Najlepsze praktyki w XHTML i CSS Gdyby wykorzystano tutaj zaprezentowaną wcześniej regułę dla elementu body, tekst w elementach p i l i odziedziczyłby zadeklarowane w niej własności. A tu przychodzi klient i żąda, aby wszystkie elementy listy miały kolor czerwony (bo taki najbardziej lubi jego żona) i były drukowane pismem bezszeryfowym. Wtedy wystarczy napisać regułę wybierającą te elementy potomne, które Cię interesują: body { color: #000; font-family: Georgia, „Times New Roman", serif; font-size: 10px; li { color: #C00; font-family: Verdana, sans-serif;

}

To Twoje pierwsze zetknięciem z kaskadowością kaskadowych arkuszy stylów. Ponieważ elementy listy są potomkami elementu body, druga reguła wyłamuje się z łańcucha dziedziczenia i stosuje zadeklarowane style do odpowiednich elementów — tutaj 1 i. Ponieważ jednak nie zadeklarowano dla nich nowego rozmiaru pisma, nadal będzie dziedziczony po przodku body (10px). Ostatecznie użytkownicy zobaczą czerwoną listę z bezszeryfowym krojem pisma, podczas gdy wszystkie pozostałe elementy będą dziedziczyć swoje własności po elemencie body. Miejmy nadzieję, że klient i jego żona będą zadowoleni z efektu.

Wykorzystanie wszystkiego w praktyce Spójrz na kolejny przykład niezbyt udanego kodu HTML. Zwróć uwagę na mało ozdobny pasek nawigacyjny widoczny na rysunku 1.10.

* } Mozilla Firefox Plik

Edycja

Widok

Historia

Zakładki

c x ^ [• fife Home About Us Our Products

Zakończono Rysunek 1.10. Prosty pasek nawigacyjny

Spójrz na trzy odnośniki na jasnoszarym tle, z których każdy jest otoczony 1-pikselową czarną ramką. Wydaje się to dosyć skromne, dopóki nie weźmie się pod uwagę tradycyjnego sposobu pisania kodu do uzyskania tego efektu:

46

Rozdział 1. Najlepsze praktyki w XHTML i CSS
Home 0 nas Nasze produkty


Do utworzenia tego prostego paska nawigacyjnego zostały użyte aż dwie tabele. Pierwsza z nich, zewnętrzna, ma czarne tło (bgcol or="#000000"). Wewnętrzna natomiast nie ma w ogóle własnego tła, ale ma własność cel 1 spaci ng ustawioną na jeden piksel. Dzięki temu czarne tło tabeli nadrzędnej przebija się, co tworzy efekt ramki otaczającej odnośniki. Dodatkowe dopełnienie o wartości 3 pikseli (cel 1 paddi ng) wewnętrznej tabeli odsuwa tekst znajdujący się w komórkach (td) od ich krawędzi. W końcu tło każdej komórki zostało ustawione na kolor szary (bgcolor="#DDDDDD") oraz użyto elementu font do określania własności pisma. Zużyto 24 wiersze kodu — około 1 kB danych — co może wydawać się całkiem niewinne w postaci pojedynczego fragmentu kodu w książce. Wyobraź sobie jednak, że kod ten rozciąga się na 20 stron Twojej witryny, a może nawet na setki lub tysiące. Co zrobisz, gdy będzie trzeba go zmodyfikować? Gdy przykładowo dział marketingu zażąda zmiany szarego tła na wszystkich stronach na jasnozielone albo uzna, że standardowym fontem firmy będzie Arial? W każdym z tych przypadków nie ma innego wyjścia, jak edytować, ponownie wdrożyć i przetestować kod na wszystkich tych 20,100 lub 1000 stronach. Najdelikatniej mówiąc, nie jest to zachęcająca perspektywa. Na szczęście, możesz wykorzystać zdobytą do tej pory wiedzę na temat XHTML i CSS, poprawić powyższy pasek nawigacyjny i w ten sposób ułatwić sobie życie. Zacznij od odświeżenia kodu HTML. Zamiast rozdętych i naszpikowanych znacznikami font tabel zastosuj inne podejście:

47

Rozdział 1. Najlepsze praktyki w XHTML i CSS Dobrze widzisz, to jest nieuporządkowana lista. Jak pisałem wcześniej, na tym etapie nie musisz przejmować się prezentacją. Musisz tylko tak oznaczyć treść strony, aby miało to sens. Taki właśnie jest powyższy kod. Jego skromne początki przedstawiam na rysunku 1.11.

^Nawigacja-Mozill... Pik

Edycja *

Widok C

X

UM|[Xj

Historia

Zakładki

Harzi

tjtf

( J fileft

*

• Home • O nas • Nasze produkty Zakończono

Rysunek 1.11. Prosta, nieuporządkowana lista

Najpierw trzeba pozbyć się niepotrzebnych, staroświecko wyglądających punktorów. ul#nav, ul#nav li { list-style: none; margin: 0; padding: 0;

} Wynik przedstawiam na rysunku 1.12.

" >Nawigacja - Mozill... Plik

Edycja -

Widok C

X

Historia nr

UJ|nJ[Xj Zakłacki

Co.

Narz<

flle-uT '

Home O nas Nasze produkty

Zakończono

Rysunek 1.12. Lista nieuporządkowana bez punktorów

Jak widać, selektory identyfikatora są tutaj używane dosyć liberalnie. Za pomocą selektora ul #nav można nadać styl liście nawigacyjnej (i elementom w niej się znajdującym) niezależnie od reszty kodu na stronie. Natomiast zgrupowanie reguł selektorów ul #nav i ul #nav 1 i pozwala na jednoczesne usunięcie punktorów z elementów listy (1 i st-styl e: none;) oraz niepotrzebnych już marginesu i dopełnienia (margi n: 0; puddi ng: 0;).

48

Rozdział 1. Najlepsze praktyki w XHTML i CSS Oczywiście, oryginalna tabela paska nawigacyjnego była ułożona poziomo, a lista w obecnym stanie nie jest nawet bliska tego stanu. Można to jednak łatwo zmienić: ul#nav, ul#nav l i { float: l e f t ; list-style: none; margin: 0; padding: 0;

} Wynik zademonstrowałem na rysunku 1.13.

O Nawigacja - Mozill... Pik

Edycja Widok *

c

x

Historia

Zakładki Narz<

fkM • f i t e f t '

HomeO nasNasze produkty

Zakończono Rysunek 1.13. Użycie własności do zmiany orientacji listy

Po zdefiniowaniu w regule własności float lista układa się poziomo. Każdy element leży po lewej stronie swojego następcy. Model elementów pływających jest ważną funkcją kaskadowych arkuszy stylów, na której oparto wiele układów stron utworzonych przy użyciu tej technologii. Szczegółowy opis tej techniki znajduje się w artykule Erica Meyera Containing Floats (http://www.complexspiral.com/publications/ containing-floats). Autor wyjaśnia w nim także kilka nieporozumień związanych z tym niezwykle przydatnym narzędziem. Interesujący punkt widzenia na temat stosowania elementów pływających do centrowania elementów listy prezentuje w swoim artykule When Is a Float Not a Float David Hopkins (www.search-this.com/2007/09/19/when-is-a-float-not-a-float). Gdy masz podstawowy szkielet, możesz zacząć dodawać kolejne komponenty wizualne. Jako kolejny cel wyznaczamy sobie utworzenie czarnego obramowania i szarego tła: ul#nav { font-family: Verdana, Geneva, Helvetica, sans-serif; font-size: .82em; background-color: #DDD;

}

ul#nav l i a { border: łpx solid #000; display: błock; float: left; padding: 3px;

Rozdział 1. Najlepsze praktyki w XHTML i CSS Wynik można zobaczyć na rysunku 1.14.

V N a w i g a c j a - M o z i l l . . . |__||n_||_X Plik

Edycja Widok

Historia

Zakładki NarzĘ

D - e x & (jiflb^ |Home|o nas Nasze produkty

Zakończono Rysunek 1.14. Lista z obramowaniami i kolorami

Jak widać, szary kolor tła został bezpośrednio nadany liście nieuporządkowanej. A przy użyciu ustawienia dla niej atrybutów pisma pozwala odziedziczyć je wszystkim elementom potomnym. Domyślnie łącza są traktowane jak elementy liniowe. Jest to pewien problem, ponieważ przez to dopełnienie będzie miało wpływ tylko na ich poziome krawędzie. Aby utworzyć dopełnienie o wartości trzech pikseli po każdej stronie odnośników, należy zamienić je w elementy blokowe. Służy do tego deklaraq'a display: błock;. Jednak nie wszystko wygląda tak, jak powinno. Widać, że między odnośnikami Home i O nas oraz O nas i Nasze produkty krawędź jest za gruba. Powodem jest to, że krawędzie każdego z tych elementów mają grubość jednego piksela, co w sumie daje w każdym z przypadków po dwa piksele. W związku z tym, trzeba wprowadzić do arkusza stylów pewne modyfikacje: ul#nav li a { border-color: #000; border-width: lpx lpx łpx 0; border-style: solid; display: błock; float: left; padding: 3px;

} Wynik przedstawiam na rysunku 1.15.

Rysunek 1.15. Modyfikacja obramowania

50

Rozdział 1. Najlepsze praktyki w XHTML i CSS Mniej więcej o to chodziło. Bardziej rozwlekłe deklaracje (border-color, border-width oraz border-style) dają taki sam efekt jak wcześniejsza border: lpx solid #000;. Jednak 0 na końcu deklaracji border-width instruuje przeglądarkę, aby nie wyświetlała lewej krawędzi każdego z elementów listy i pozostawiła grubość jednego piksela wszystkich pozostałych. Teraz trzeba tylko przywrócić lewą krawędź pierwszego elementu listy — tylko pierwszego, ponieważ nie ma potrzeby znowu wywoływać efektu podwójnych krawędzi, który dopiero co został usunięty. W tym celu pierwszemu elementowi listy należy nadać atrybut cl ass:

Po wstawieniu tego punktu zaczepienia do struktury dokumentu napisanie odpowiedniej reguły tworzącej lewą krawędź wybranego elementu nie powinno nastręczać żadnych trudności: ul#nav 1 i .first a { border-width: łpx;

} Wynik przedstawiono na rysunku 1.16.

r Nawigacja - Mozill... 1 Plik

Edycja

D '

Widok

C

Historia

Zakładki

X ttri j

file O

NarzJ -

Home O nas Nasze produkty

j Zakończono

Rysunek 1.16. Ostateczny wygląd listy

To wszystko! Poniżej znajdują się wszystkie napisane do tej pory reguły. ul#nav, ul#nav li { float: left; list-style: none; margin: 0; padding: 0;

} ul#nav { font-family: Verdana, Geneva, Helvetica, sans-serif; font-size: .82em; background-color: #DDD;

} ul#nav li a { border-color: #000;

51

Rozdział 1. Najlepsze praktyki w XHTML i CSS border-width: lpx lpx lpx 0; border-style: solid; display: błock; float: left; padding: 3px;

} ul#nav li .first a {

}

border-width: lpx;

Z powodzeniem zastosowałeś grupowanie, selektory identyfikatorów i klas oraz dziedziczenie, aby zamienić skromną listę nawigacyjną w poziome menu nawigacyjne. Zamiast jednak spocząć na laurach (bez względu na to, jak są wygodne), pomyśl, ile korzyści przynosi stosowanie tej metody. Czy to na pewno jest w czymkolwiek lepsze od tabel? Bez wątpienia tak. To prawda, że liczba wierszy kodu drastycznie nie zmalała, jeśli połączy się kody XHTML i CSS w całość, ale udało się oddzielić strukturę dokumentu od jego prezentacji. Zamiast używać zaciemniających obraz znaczników prezentacyjnych, pozwalasz CSS wykonać cały lifting interfejsu użytkownika. Aby teraz dodać do menu nowy odnośnik, wystarczy utworzyć nowy element 1 i na końcu listy nawigacyjnej, a CSS automatycznie zrobi resztę.

Kaskadowość Po zapoznaniu się z podstawami składni CSS czas na dokładniejsze przyjrzenie się mechanizmom działającym w tle tej technologii. Dowiesz się, jak klient wyznacza style, które docierają do użytkownika.

Pochodzenie

stylów

Aby odkryć pochodzenie poszczególnych stylów, trzeba zidentyfikować odpowiednie reguły. Pochodzenie stylu wyznacza jego „znaczenie" w kaskadzie. Poniżej znajduje się lista trzech najważniejszych źródeł, z których mogą pochodzić style.

52

•

Klient — aby w pełni odpowiadać wymaganiom zgodności ze specyfikacją CSS (www.w3.org/TR/CSS21/conform.htmlltconformance), klient przed zastosowaniem jakichkolwiek innych reguł stylistycznych musi do każdego dokumentu zastosować własny, domyślny zestaw. Ten wewnętrzny arkusz stylów odpowiada za domyślny sposób wyświetlania wszystkich elementów HTML. To dzięki temu arkuszowi przeglądarka „wie", że nagłówki hl ma wyświetlać pismem bezszeryfowym olbrzymich rozmiarów oraz przed każdym elementem listy nieuporządkowanej umieszczać punktor.

•

Użytkownik — tak, użytkownicy także mogą pisać arkusze stylów. Arkusze stylów użytkownika zostały wprowadzone w CSS 2 jako technika umożliwiająca im przesłanianie własności pisma i kolorów zdefiniowanych przez autora strony. Mimo iż niektórzy projektanci narzekają na tę nowość, jest to ważny krok w kierunku tego, by sieć stała się bardziej dostępna. W niektórych warunkach pewna grupa użytkowników może nie obejrzeć Twojej strony. Tworząc własne arkusze stylów, użytkownicy ci mogą zwiększać rozmiar pisma lub unikać niektórych kombinacji kolorów, które są dla nich niewidoczne.

•

Autor — tzn. Ty. Są to arkusze stylów tworzone przez projektanta i właśnie na nich głównie skupia się ta książka.

Rozdział 1. Najlepsze praktyki w XHTML i CSS Gdy klient odbierze arkusze stylów z tych trzech źródeł, musi zdecydować, które z nich zaprezentuje użytkownikowi. Dlatego każdemu z nich przypisuje określony stopień ważności. Powyższa lista została ustawiona od najmniej ważnego do najważniejszego arkusza stylów. Znaczy to, że domyślne style przeglądarki mają mniejszą wagę niż style użytkownika, a te z kolei są mniej ważne od stylów umieszczonych przez programistę na serwerze. Jednak zarówno projektant, jak i użytkownik mogą definiować reguły z atrybutem ! important: h2 {

font-size: 2em !important; color: #C00 iimportant;

} Zgodnie ze specyfikacją CSS (www.iv3.org/TR/CSS21/cascade.htmlttimportant-rules), reguły ! important „wytwarzają równowagę między autorem a użytkownikiem". Jak napisałem wcześniej, reguły znajdujące się w arkuszach stylów użytkownika mają mniejszą wagę od stylów projektanta. Natomiast reguła ! important odwraca tę zależność. Deklaracje zdefiniowane przy jej użyciu przez użytkownika mają pierwszeństwo przed takimi samymi regułami programisty. Ilustruje to rysunek 1.17.

Przeglądarka

I

<*>

fl Z""""

Użytkownik

\

/I

Autor

/i

Autor Iimportant

I

Użytkownik Iimportant

yRysunek 1.17. Pochodzenie stylów i kaskada — od najmniej ważnych do najważniejszych

53

Rozdział 1. Najlepsze praktyki w XHTML i CSS Jaki to ma w p ł y w na pisane arkusze stylów? Wyobraź sobie, że przeglądarka próbuje określić styl elementu p. Po przeanalizowaniu wszystkich dostępnych arkuszy stylów — przeglądarki, użytkowania i autora — odpowiednie reguły są wyznaczane, tak jak przedstawiają listingi 1 . 1 , 1 . 2 i 1.3.

Listing 1.1. Arkusz stylów przeglądarki p{ color: #000; font-size: lem; margin: ,9em; 1

Listing 1.2. Arkusz stylów użytkownika p { color: #060 Iimportant;

}

Listing 1.3. Arkusz stylów autora p{ color: #300; font-size: 1.2em; line-height: 1.6em; padding: 10px;

} C h w i l o w o z a p o m n i j m y o arkuszu użytkownika. W ó w c z a s t y p o w y użytkownik zobaczy akapity sformatowane zgodnie z poniższą, ostatecznie w y z n a c z o n ą regułą:

P{

}

color: #300; font-size: 1.2em; line-height: 1.6em; margin: .9em; padding: 10px;

/* /* /* /* /*

reguła autora ma pierwszeństwo reguła autora ma pierwszeństwo zdefiniowana tylko przez autora zdefiniowana tylko przez autora zdefiniowana tylko przez autora

Zwróć uwagę na komentarze w powyższym parami ukośnika i gwiazdki.

przed regułą przeglądarki */ przed regułą przeglądarki */ */ */ */

kodzie CSS. Oznacza się je dopełniającymi

się

Teraz, jeśli stronę z p o w y ż s z y m k o d e m otworzy u ż y t k o w n i k używający arkusza z listingu 1.2, wynik będzie nieco inny:

P ( color: #060; font-size: 1.2em; line-height: 1.6em; margin: .9em; padding: 10px;

54

}

/* /* /* /* /*

reguła Iimportant użytkownika przesłania regułę autora */ reguła autora ma pierwszeństwo przed regułą przeglądarki */ zdefiniowana tylko przez autora */ zdefiniowana tylko przez przeglądarkę */ zdefiniowana tylko przez autora */

Rozdział 1. Najlepsze praktyki w XHTML i CSS

Sortowanie według precyzji Każdy selektor ma określony współczynnik precyzji, który stanowi kolejny rodzaj wskaźnika wagi selektora w kaskadzie (www.w3.org/TR/CSS21/cascade.htmlttspecificity). Im większą precyzję ma dany selektor, tym większa jego waga w kaskadzie. Przykładowo selektory identyfikatorów są z zasady bardziej specyficzne od selektorów klas, ponieważ identyfikator może w jednym dokumencie wystąpić tylko raz. Precyzja selektorów jest obliczana na podstawie składni oraz oceniana na podstawie czterech oddzielnych czynników. Oto one. A . Czy selektor jest atrybutem styl e elementu języka HTML, a nie prawdziwym selektorem. B . Liczba atrybutów id w selektorze. C . Liczba nazw innych atrybutów (np. [lang], [rei], [href]) i pseudoklas (np. :hover, : visited, :first-chi 1 d) w selektorze. Pamiętaj, że selektory klasy (typu li .active) są rodzajem selektora atrybutu i są zaliczane do tej kategorii. D • Liczba nazw elementów (np. a, l i , p itp.) i pseudoelementów (np. :before, :after itp.) w selektorze. Przy użyciu tych czterech składników można z łatwością obliczyć wagę każdego selektora w kaskadzie. W poniższej tabeli przedstawiam listę selektorów od najmniej do najbardziej precyzyjnego. Selektor

A

B

C

D

Precyzja

a

0

0

0

1

0,0,0,1

h3 a

0

0

0

2

0,0,0,2

ul ol+li

0

0

0

3

0,0,0,3

ul ol li.red

0

0

1

3

0,0,1,3

li,red.level

0

0

2

1

0,0,2,1

#other-news

0

1

0

0

0,1,0,0

style="..."

1

0

0

0

1,0,0,0

Dysponując tą wiedzą, wrócimy do wcześniejszych stylów akapitu i obliczymy ich precyzję (listingi 1.4,1.5 i 1.6).

Listing 1.4. Arkusz stylów przeglądarki p { color: #000; font-size: lem; margin: .9em; } /* A:0, B:0, C:0, D:1 precyzja = 0,0,0,1 */

Listing 1.5. Arkusz stylów użytkownika p { color: #060 limportant; } /* A:0, B:0, C:0, 0:1 precyzja = 0,0,0,1 */

55

Rozdział 1. Najlepsze praktyki w XHTML i CSS Listing 1.6. Arkusz stylów programisty p { color: #300; font-size: 1.2em; line-height: 1.6em; padding: 10px; } /* A:0, B:0, C:0, D:1 precyzja = 0,0,0,1 */ p.gazette { color: #0C0; } /* A:0, B:0, C:l, 0:1 precyzja = 0,0,1,1 */ p#footer { color: #FFF; } /* A:0, B:1, C:0, D:1 precyzja = 0,1,0,1 */ Ponieważ dla własności col or zostało zdefiniowanych kilka reguł, przeglądarka będzie musiała skorzystać z zasad precyzyjności, aby podjąć decyzję, jaki kolor zastosować do akapitu z identyfikatorem p#footer i klasą p.gazette. Wiadomo, że p#footer ma najwyższą precyzję, a p.gazette jest na drugim miejscu. Przy założeniu, że odwiedzający witrynę nie ma własnego arkusza stylów (a więc nie ma reguły Iimportant): 1 . akapit z identyfikatorem footer będzie biały (#FFF), 2. akapity z klasą gazette będą zielone (#0C0), 3. wszystkie pozostałe będą ciemnoczerwone (#300). Wszystkie akapity w dokumencie używają wartości zadeklarowanych w oryginalnej regule p: pismo wielkości lem, wysokość linii 1.6em, dopełnienie 10px. Natomiast domyślny margines przeglądarki o rozmiarze 0. 9em nadal jest honorowany, ponieważ nie został zmieniony w arkuszu stylów programisty.

Sortowanie według kolejności Wyobraź sobie, że w arkuszu stylów programisty znajdują się dwie reguły dotyczące tego samego elementu. Druga z poniższych reguł definiujących kolor będzie miała pierwszeństwo przed pierwszą (i zostanie użyta). A więc zostanie zastosowany kolor #000, czyli czarny w zapisie szesnastkowym. p { color: #C00; } p { color: #000; } Gdy kilka reguł ma tę samą precyzję, wagę oraz pochodzenie, decyduje pochodzenie. Zgodnie z tą zasadą, wszystkie akapity będą miały kolor czarny. Oczywiście, można zmienić wagę reguł i sprawić, że zastosowana zostania pierwsza reguła: p { color: #C00 Iimportant; } p { color: #000; } Reguły te nie są już równoznaczne, ponieważ reguły ! important autora mają większą wagę niż zwykłe reguły autora dokumentu. W związku z tym, akapity będą miały kolor czerwony.

56

Rozdział 1. Najlepsze praktyki w XHTML i CSS

Praktyka Oczywiście, dyskusja na temat specyfikacji CSS jest tylko dyskusją (aczkolwiek jestem przekonany, że niezwykle interesującą). Zastosowanie standardów w praktyce dnia codziennego jest jednak czymś kompletnie innym. Przyjrzymy się dwóm najważniejszym narzędziom w zestawie nowoczesnego projektanta.

Praca w solidnej

przeglądarce

Jeśli testujesz tworzoną stronę w wadliwej przeglądarce, napiszesz kod dopasowany do nieprawidłowego sposobu interpretacji. To tak, jakbyś budował dom na fundamentach z piasku. Gdy rozpoczniesz testowanie w innych przeglądarkach i na innych platformach, wszystkie usterki staną się widoczne. Lepiej zaczynaj pracę od nowoczesnej przeglądarki, znanej z tego, że dobrze radzi sobie ze standardami. W dalszej części tego rozdziału dowiesz się, że z gorszymi przeglądarkami można sobie poradzić, stosując specjalne sztuczki. Nie próbuję się tu pojednać ze snobami przeglądarkowymi ani też zmusić Cię do zmiany ulubionej przeglądarki. Twierdzę tylko, że takie podejście pozwala zaoszczędzić czas i zasoby. Jeśli pracę rozpoczniesz od dopasowywania do błędów jednej przeglądarki, spędzisz znacznie więcej czasu na testowaniu i usuwaniu usterek, niż gdybyś zaczął od lepszego oprogramowania. W tej chwili do wyboru są cztery dobre przeglądarki: Opera, Safari oraz oparte na silniku Gecko Camino, Mozilla i Firefox. Zapewne widzisz, że na liście tej zabrakło Internet Explorera. Niestety, to nie pomyłka. Mimo iż przez ostatnich kilka lat znacznie usprawniono implementację standardów w tej przeglądarce, Internet Explorer dla Windows nadal jest uważany za pozostający daleko za innymi nowoczesnymi przeglądarkami w takich kwestiach jak obsługa CSS i XHTML. A przecież klienci jeszcze nie żądają lepszej prezentaq'i witryny w Firefoksie lub poprawy układu pod Operą. Mimo iż są to wspaniałe programy, upłynie jeszcze sporo czasu, zanim podbiją serca, umysły i rynek Twoich klientów.

Usprawiedliwienie potrzeby stosowania

hacków

Oczywiście, w czasie pracy nad układami opartymi na CSS problemy muszą się pojawić. Mimo że w ostatnich latach twórcy przeglądarek znacznie ulepszyli swoje produkty, cały czas nie są one jednolite. Jeśli nie projektujesz tylko dla jednej przeglądarki na jednej platformie, prawie na pewno czekają Cię kłopoty podczas testowania stron na różnych platformach i w odmiennych przeglądarkach. Zwolennicy układów tabelkowych mogą interpretować te sprawy jako słabość kaskadowych arkuszy stylów, które — według nich — są podatne na błędy. Natomiast problem dotyczy przeglądarek, a nie specyfikacji CSS. Każda przeglądarka ma swoje własne problemy z interpretacją CSS, jednak nie jesteś w najgorszej sytuacji. Większość z nich (oraz ich powody) została dobrze udokumentowana i w wielu przypadkach rozwiązana. Poniżej opisuję jeden z najczęściej spotykanych błędów przeglądarek. Nie jest to jedyny, jaki spotkasz, ale stanowi doskonały przykład użycia niektórych dostępnych obejść. Gdy nic się nie udaje i przeglądarki źle się zachowują, prawie zawsze jest jakieś wyjście.

57

Rozdział 1. Najlepsze praktyki w XHTML i CSS Błąd Zgodnie ze specyfikacją CSS (www.w3.org/TR/CSS21/box.html), każdy element drzewa dokumentu posiada obszar treści. Może to być tekst, obraz itp. Dodatkowo obszar ten może być otoczony dopełnieniem, ramką oraz marginesami. Ilustruje to rysunek 1.18.

Treść Dopełnienie

Rysunek 1.18. Model blokowy

Jeśli model blokowy w czarno-białej kolorystyce niezbyt do Ciebie przemawia, warto obejrzeć trójwymiarowy kolorowy diagram stworzony przez Jona Hicksa (www.hicksdesign.co.uk/ *journal/483/3d_css_box_model). Rozmiary trzech dodatkowych obszarów — dopełnienia, ramki oraz marginesów — są wliczane w całkowitą szerokość i wysokość obszaru treści. Spójrz na regułę stylistyczną, która to ilustruje: p#hack { border: 20px solid #C00; padding: 30px; width: 400px;

} Własność width określa, że szerokość treści akapitów nie przekroczy 400 pikseli. Do tego dodane zostaje 30 pikseli dopełnienia i 20 pikseli ramki na każdą stronę bloku — góra, prawa, dół i lewa. A więc, aby dowiedzieć się jaka jest całkowita szerokość akapitów, należy zsumować wszystkie własności od lewej do prawej: Lewa krawędź: Lewe dopełnienie: Treść: Prawe dopełnienie: Prawa krawędź: Szerokość całkowita:

20 +30 +400 +30 +20 500 pikseli

Mówiąc krótko, zgodnie ze specyfikacją dopełnienie i ramka znajdują się poza zadeklarowanym obszarem treści. Jednak starsze wersje przeglądarki Internet Explorer dla systemu Windows mają niepoprawną (lub ściślej, niestandardową) implementację modelu blokowego i zaliczają dopełnienie i ramkę do obszaru treści. Jako pierwszy dobrze wykonuje te obliczenia Internet Explorer 6, ale tylko wtedy, jeśli działa w trybie zgodności ze standardami — a więc, gdy na początku strony znajduje się deklaracja typu dokumentu. W przeciwnym przypadku przeglądarka ta

58

Rozdział 1. Najlepsze praktyki w XHTML i CSS na 400 pikselach upchnie treść, dopełnienie i ramkę. Zatem obliczenia jednej z tych przeglądarek wyglądałyby tak: Zadeklarowana szerokość: Lewa krawędź: Lewe dopełnienie: Prawe dopełnienie: Prawa krawędź: Szerokość treści:

400 -20 -30 -30 -20 300 pikseli

Aby zapewnić spójny wygląd strony w różnych przeglądarkach, nawet różnica jednego piksela jest nie do zaakceptowania. Kilkaset pikseli wystarczy, aby niejednego pchnąć z powrotem w ramiona tabelek. Na szczęście, jest wyjście. Warto uściślić, że błąd ten pojawia się tylko wówczas, gdy element ma zadeklarowaną szerokość i dopełnienie, obramowanie lub jedno i drugie. Innym sposobem na uniknięcie tych problemów jest zastosowanie dopełnienia w rodzicu, a szerokości w dziecku lub odwrotnie. Wiedza na temat powodu występowania błędu jest czasami ważniejsza od znajomości rozwiązania i pozwala lepiej zaprojektować architekturę arkusza stylów.

Rozwiązanie Hacki CSS pozwalają obejść niespójne działanie przeglądarek, takich jak Internet Explorer, i zapewnić wszędzie odpowiedni wygląd stron. Najczęściej sztuczki te polegają na wykorzystaniu błędów implementacji CSS w przeglądarkach, co pozwala na ukrywanie przed nimi niektórych partii kodu. W efekcie można dostarczyć poprawne wartości dla bardziej zgodnych przeglądarek, jednocześnie serwując „niepoprawne" tym, które źle wykonują obliczenia. Poniżej znajduje się kod CSS omijający omawiany wcześniej błąd przeglądarek Internet Explorer. p#hack { border: 20px solid #C00; padding: 30px; width: 400px;

} * html ptfhack { width: 500px; w\idth: 400px;

}

Jedna reguła CSS została zamieniona na dwie. Pierwsza z nich definiuje informacje dotyczące ramki i dopełnienia akapitu oraz żądanej szerokości 400 pikseli. Druga (zaczynająca się od uniwersalnego selektora *) zawiera sztuczki. Gdyby przeczytać selektor * html p#hack w ludzkim języku, brzmiałby on mniej więcej tak: „Znajdź wszystkie elementy p z atrybutem id o wartości hack, które są potomkami elementu html będącego potomkiem dowolnego innego elementu". Końcowa część poprzedniego zdania została wyróżniona, ponieważ opisuje prezentowaną sztuczkę. Skoro html jest głównym elementem całego dokumentu, nie może być potomkiem żadnego innego. A skoro ta reguła nie pasuje do żadnego elementu, po co jej używać? W istocie reguła ta dobrze działa we wszystkich wersjach Internet Explorera (dla systemów Windows i Macintosh), które błędnie ignorują selektor uniwersalny i interpretują ją jako html p#hack. W wyniku jest ona rozpoznawana tylko przez tę przeglądarkę, a ignorowana przez wszystkie inne. Pierwsza własność deklaruje „niepoprawną" szerokość 500 pikseli,

59

Rozdział 1. Najlepsze praktyki w XHTML i CSS co zapewnia odpowiednio dużo miejsca dla treści. Ponieważ przeglądarki te zaliczają dopełnienie i ramkę do zadeklarowanej szerokości, trzeba podać im taką szerokość, która będzie w końcowym rozrachunku odpowiadała prawidłowej wartości. A dzięki temu, że selektor html plhack jest bardziej precyzyjny od tego drugiego, reguła ta ma pierwszeństwo. To jeszcze nie wszystko. Przeglądarki Internet Explorer 6 w Windows i 5.x w systemach Macintosh poprawnie implementują model blokowy, a więc powyższy hack spowodował podanie złej wartości 500px dwóm dobrym przeglądarkom. Aby rozwiązać ten problem, użyłem drugiej wartości poprawnie ustawiającej szerokość na 400px. Użycie ukośnika przed literą i (w\i dth) powoduje, że można wykorzystać błąd starszych wersji Internet Explorera i ukryć tę deklarację przed nimi. Po zastosowaniu sztuczki w sztuczce problem został rozwiązany! Jeśli zakręciło Ci się w głowie, rozumiem. Na szczęście, istnieją doskonałe źródła, z których można nauczyć się lepiej rozumieć sztuczki CSS. Zalecam zapoznanie się z zawartością witryny http://css-discuss.incutio.com, na której znajduje się dogłębna analiza przedstawionego przeze mnie hacka modelu blokowego (http://css-discuss.incutio. com/?page=BoxModelHack). Warto też zajrzeć na stronę zawierającą listę prawie wszystkich hacków arkuszy stylów (http://css-discuss.incutio.com/?page=CssHack) oraz wskazówki, jak uniknąć niepotrzebnych hacków (http://css-discuss.incutio.com/ ?page=AvoidingHa cks).

Jeszcze długa droga Jak widzisz, kilka dziwacznych przeglądarek, które trzeba brać pod uwagę podczas pracy, sprawia, że testowanie kodu CSS jest niezbędną częścią procesu rozwoju witryny. W porównaniu z sytuacją sprzed kilku lat obsługa standardów przez przeglądarki jest bardzo dobra, jednak z pewnością napotkasz wiele takich błędów. Nie martw się jednak — jest to naturalny składnik procesu tworzenia witryny internetowej. Każdy projektant CSS natrafia na przeszkody. Jeśli ktoś mówi, że wszystkie strony, które utworzył, działały od razu bez zarzutu, lepiej powoli się odsuń od tej osoby — albo kłamie, albo jest szalona. Jeśli nie możesz naprawić problemu we własnym zakresie (przecież kod jest poprawny), jest kilka wspaniałych witryn, na których możesz szukać pomocy. Kiedy napotkasz w swoim układzie jakiś niewyjaśniony błąd, znajomość dostępnych zasobów wiedzy jest ważniejsza od natychmiastowego poznania rozwiązania. Istnieje bardzo duże prawdopodobieństwo, że ktoś już kiedyś zetknął się z takim samym problemem.

CSS-Discuss Lista mailingowa CSS-Discuss (wurw.css-d.iscuss.org) została założona w 2002 roku i aktualnie pieczę nad nią trzyma Erie Meyer, guru CSS i były gorący zwolennik standardów Netscape. Zgodnie z manifestem tej witryny, lista stanowi „miejsce, w którym autorzy mogą dyskutować o rzeczywistych problemach związanych z używaniem CSS". Z tego punktu widzenia, jest ona wielkim sukcesem. Zapisała się do niej cała armia pomocnych i doskonale znających CSS projektantów. Każdy z nich jest chętny i gotowy pomagać innym w przecieraniu szlaków w CSS, dzięki czemu ci drudzy mogą szybciej nauczyć się, jaką przyjemnością jest używanie tej technologii. Nie mniej wartościowa jest witryna Wiki CSS-Discuss (http://css-discuss.incutio.com). Ta tworzona i edytowana przez społeczność witryna zawiera informacje dotyczące rozmiarów pisma (http://css-discuss.incutio.com/?page=FontSize), technik tworzenia układów stron (http://css-discuss.incutio.com/?page=CssLayouts), edytorów CSS (http://css-discuss.incutio.com/ y-*?page=CssEditors) i — oczywiście — hacków (http://cssdiscuss.incutio.com/?page=CssHacks).

60

Rozdział 1. Najlepsze praktyki w XHTML i CSS Position Is Everything

(PIE)

Witryna Position Is Everything (www.positioniseverything.net) jest wyczerpującym źródłem wiedzy na temat CSS, tym, do którego należy zwracać się zawsze, gdy napotka się nierozwiązywalny problem z przeglądarką. Zarządzana przez Johna Gallanta i Holly Bergevin (dwoje niezwykle utalentowanych programistów CSS) witryna PIE zawiera oszałamiającą ilość artykułów na tematy związane z dziwactwami przeglądarek, ich obejściami oraz nienaprawionymi błędami — wszystkie zostały napisane czystym i łatwym do zrozumienia stylem, z którego tych dwoje słynie.

Problem hacków Oczywiście, wpisywanie hacków bezpośrednio w kod CSS jest dozwolone, możesz napisać: znajdź błąd w Internet Explorerze 5 dla systemu Macintosh OS X, wyodrębnij problematyczną regułę, dodaj hacka, przejdź do kolejnego problemu. Takie robocze podejście jest najczęściej stosowane przez większość programistów i umożliwia najelastyczniejsze radzenie sobie z problemami. Dodatkowo wpisywanie obejścia bezpośrednio w kod CSS ma jeszcze jedną zaletę związaną z bezpieczeństwem. Napisz, przetestuj i idź dalej. Proste, prawda? W istocie jednak takie improwizowane stosowanie hacków stanowi źródło potencjalnych problemów związanych z użytecznością kodu w przyszłości. Po pierwsze, bardzo łatwo można przeładować kod dużą liczbą hacków, tak jak poniżej: #album-thumbs ( float: left; list-style-image: none; list-style: none; margin: 0; padding: 0;

} /* ukrycie przed MacIE5 \*/ * html #album-thumbs { display: inline; height: 1%; width: auto Mmportant; width 1**1\ 90%;

} /* ukrycie przed MacIE5 */ #album-thumbs a { display: błock; float: left; padding: 6px; margin: 5px; width: 70px;

} #album-thumbs a { \width: 60px; \width: 50px;

}

61

Rozdział 1. Najlepsze praktyki w XHTML i CSS Wygląda jak stek bzdur? Niewiele mu brakuje. Autor tego arkusza stylów nie pozostawił żadnych komentarzy informujących o przeznaczeniu poszczególnych części tej mieszaniny reguł. Lewy ukośnik w pierwszym komentarzu (/*...\*/) powoduje, że przeglądarka Internet Explorer dla systemów Macintosh nie będzie przetwarzała kodu CSS aż do napotkania kolejnego poprawnie sformatowanego komentarza (/*...*/). Tylko wersje 5.x Internet Explorera odczytają deklaraq'ę z ukośnikiem przed literą w (\wi dth). I tak dalej, i tak dalej. Kto chciałby oglądać taki kod na co dzień? Jeśli sprawia trudności Tobie, jest prawie pewne, że inni również będą mieć z nim problemy. Inni członkowie zespołu, współpracownicy, stażyści, zabłąkane owieczki — jeśli ktokolwiek ma odpowiadać za edycję Twojego kodu, taki sposób posługiwania się hackami nie jest dobry. Zapomnijmy jednak na chwilę o przejrzystości kodu (a raczej jej braku); reguły te są poprawnym kodem CSS i spełniają swoje zadanie — naprawiają błędy różnych przeglądarek na różnych platformach. A więc w czym problem? Wyobraź sobie, że masz arkusz stylów zaśmiecony takim kodem. Co się stanie, gdy będzie trzeba usunąć jeden z tych hacków? Gdy np. jedna z przeglądarek zostanie uaktualniona lub kolejna wersja Internet Explorera nie będzie odczytywać arkusza stylów od hacka dla Opery. Może się zdarzyć, że będzie konieczne usunięcie niektórych hacków z kodu CSS. Co zrobisz, gdy nie są one rozproszone w 30 wierszach kodu, a w 3000?

Hackowanie dla zabawy i pożytku Zamiast zamulać arkusz stylów hackami przeznaczonymi dla konkretnych przeglądarek, lepiej wszystkie obejścia umieszczać w osobnych arkuszach przeznaczonych dla nich. Mimo iż nie jest to konieczne, pozwala na oddzielenie „czystego" kodu CSS od hacków potrzebnych dla różnych nietrzymających standardów przeglądarek. Spójrz na rysunek 1.19.

— @import -

T\

-

@import { @import



}

HTML

CSS

@import

Hacki Rysunek 1.19. Skalowalny system zarządzania hackami

62

Rozdział 1. Najlepsze praktyki w XHTML i CSS W tym modelu występuje znacznik link wskazujący arkusz stylów — nic specjalnego. Jednak właśnie ten pierwszy arkusz stylów służy jako brama dla wielu innych arkuszy dołączanych za pomocą reguły @import. Pierwszy importowany arkusz stylów zawiera czyste, pozbawione wszelkich hacków reguły prezentacyjne. Po nim można zaimportować arkusze przeznaczone dla konkretnych przeglądarek z hackami zapewniającymi odpowiedni wygląd stron we wszystkich przeglądarkach. Oczywiście, hackami można zarządzać na różne sposoby. Programista internetowy Mark Pilgrim (http://diveintomark.org/archives/2003/01/16/the_one_ive_neverjried) opisuje, jak steruje dostarczaniem stylów przeznaczonych dla konkretnych przeglądarek za pomocą systemu detekcji tych aplikacji działającego na jego serwerze. Tego rodzaju negocjacja na serwerze jest doskonałym rozwiązaniem, ale wymaga większej wiedzy i umiejętności konfiguracji komponentu mod_rewrite serwera Apache. A więc mimo iż poprzeczka jest tutaj wyżej ustawiona niż w proponowanym przeze mnie rozwiązaniu, jest to bardzo dobre wyjście z sytuacji. W pierwszym wierszu zbiorczego arkusza stylów należy zaimportować podstawowy arkusz: Pimport url(„core.css"); Nie ma w nim niczego niezwykłego. Prosta reguła @import importuje zawartość pliku core.css, który został dobrze przetestowany w godnych zaufania, obsługujących standardy przeglądarkach. Gdyby pozostałe pliki zostały dodane przy użyciu kolejnych reguł @import, zostałyby one przetworzone przez wszystkie przeglądarki. Muszą być importowane selektywnie, aby odczytywały je tylko aplikacje sprawiające problemy. Najlepiej, żeby „dobre" przeglądarki pozostały nieskażone wiedzą o tych hackach. Jak to zrobić? Ogień najlepiej zwalczać ogniem. Dlatego do bardziej inteligentnego hackowania należy użyć hacków CSS. Najpierw zajmę się Internet Explorerem 5.x dla Windows. Jego implementacja modelu blokowego CSS sprawia ciągłe problemy i na pewno będziesz mieć z nią problemy. A więc zamiast dodawać hacki do głównego arkusza stylów, możesz zastosować cudowną technikę o nazwie Mid Pass Filter: /* Import hacków IE5x/Win */ @media tty { i{content:;/*" "*/}} Pimport 'hacks.win.ie5.css'; /*";} }/*

7

Opracowana przez pioniera CSS i programistę internetowego Tanteka ęelika technika pozwala na dostarczenie arkuszy stylów tylko dla przeglądarek Internet Explorer 5.x dla Windows. Wszystkie inne przeglądarki ignorują tę regułę, ponieważ nie mają takiego błędu. Mimo iż Internet Explorer dla systemów Macintosh jest uważany za dużo lepszy w obsłudze CSS od swoich odpowiedników dla Windows, nie jest pozbawiony błędów. Rozwój tej przeglądarki zarzucono w połowie 2003 roku, pozostawiając projektantów z jej wadami. Na szczęście, jest jeszcze inny filtr, tzw. TE5/Mac Band Pass Filter: /* Import hacków dla IE5/Mac */ /*\7/7 @import url("hacks.mac.ie5.css"); /**/

63

Rozdział 1. Najlepsze praktyki w XHTML i CSS Ten także został opracowany przez Tanteka ęelika, a spopularyzowany przez innego projektanta Douga Bowmana. Filtr IE5/Mac Band Pass Filter serwuje importowane arkusze stylów tylko przeglądarce Internet Explorer 5 dla systemów Mac OS. Efekt jest taki sam jak przy poprzednim filtrze. Inne przeglądarki ignorują ten arkusz stylów, który został utworzony tylko dla jednej. Opis innych filtrów i technik zarządzania hackami znajduje się w artykule Molly Holzschlag Integrated Web Design: Strategies for Long-Term CSS Hack Management (www.informit. ^>-com/articles/article.asp?p=170511). Dużo z tego świetnego artykułu skorzystałem, pisząc ten podrozdział, jednak zawiera także opis innych filtrów, o których nie wspomniałem. Możesz zadać pytanie, czemu te błędy w przetwarzaniu CSS są najlepszym sposobem na zarządzanie innymi hackami. Naprawdę nie próbuję wprowadzać niepotrzebnej abstrakcji. Dzięki oddzieleniu hacków przeznaczonych dla konkretnych przeglądarek od podstawowego kodu CSS odniesiemy dwie wymierne korzyści. Po pierwsze, inne osoby łatwiej będą mogły je znaleźć i zmodyfikować. Po drugie, zostaje rozwiązana kwestia używalności. Jeśli zechcesz zarzucić obsługiwanie którejś z przeglądarek, wystarczy, że usuniesz tylko kilka wierszy kodu z głównego arkusza stylów i po sprawie.

Podsumowanie W kolejnych rozdziałach nauczysz się profesjonalnych strategii wykorzystywania CSS do maksimum. W tym rozdziale opisałem podstawy wysokiej jakości projektowania przy użyciu technologii CSS i XHTML oraz zamierzenia i cele, o których będzie mowa w dalszych, bardziej praktycznych rozdziałach. Gdy na początku utworzysz poprawny i dobrze uformowany kod XHTML, później łatwiej zapanujesz nad prezentacją stron przy użyciu CSS. Podejście takie pozwala odchudzić strony, zmniejszyć koszty ich utrzymania i przyszłych modyfikacji oraz zwiększyć dostępność. W drugim rozdziale dokładnie zapoznasz się z pierwszą z kilku firm opisywanych w tej książce — Google. Gdy weźmiemy pod uwagę niektóre z opisanych tutaj korzyści, nowy projekt należącej do tej firmy witryny Blogger stanowi cenne studium przypadku oraz udowadnia, że projektowanie przy użyciu CSS jest naprawdę pasjonujące.

64

Blogger.com: efekt rollover i design touches Projektanci potrafią stworzyć coś z niczego. Posiadają zdolność jasnego przekazywania komunikatów poprzez organizację i manipidację obrazów oraz słów. — Jeffery Veen W sierpniu 1999 roku niewielka firma Pyra Labs udostępniła w sieci produkt o nazwie Blogger. Miał on w przyszłości nie tylko zapewnić jej pracownikom sławę i pieniądze, lecz także zapoczątkować rewolucję dzienników internetowych. Witryna Blogger dosłownie każdemu umożliwia opublikowanie własnej witryny internetowej, a mówiąc ściślej, dziennika internetowego. Wystarczy kilka prostych i krótkich czynności. Dodatkowo nie trzeba nic płacić, co jest jednym z bonusów sieci, w której wszyscy oczekują, żeby wszystko było za darmo. W lutym 2003 roku firma o nazwie Google (możliwe, że słyszałeś o niej) złapała się za portfel i kupiła Pyra Labs, włączając Bloggera do swojego inwentarza. Razem z umowami i funduszami pracownicy Pyra Labs otrzymali jeszcze coś równie cennego — przycisk BlogThis! na pasku narzędzi Google. Dzięki niezliczonej rzeszy ludzi korzystających z tego paska każdego dnia witryna blogger.com notowała niebywały wzrost liczby odwiedzin. Równolegle należało spodziewać się podobnej rewolucji w liczbie nowych blogerów. Nic takiego jednak się nie stało. Dlaczego? Kilka rozmów telefonicznych i fachowcy zajmujący się wrażeniami użytkownika z firmy Adaptive Path już pracowali nad tą sprawą. Razem z nimi pojawił się projektant i mistrz CSS Douglas Bowman z firmy Stopdesign. Mieli za zadanie wspólnie zbadać zachowanie użytkowników w witrynie Blogger.com i odkryć, jakie podstawowe błędy poprzedników powstrzymywały odwiedzających przed zamianą w klientów. Okazało się, że problemem był sam projekt.

Rozdział 2. Blogger.com: efekt rollover i design touches Opracowano plany, znaleziono mnóstwo pomysłów i w końcu po sześciu miesiącach pracy nowy projekt był gotowy Witryna Blogger.com miała całkiem nową twarz, której zadaniem było przyciągnąć rzeszę nowych klientów. Od tamtej pory witryny ta i jej podobne stały się ważnym środkiem komunikacji przez internet, a liczba klientów wzrosła niebotycznie. Przeprojektowanie witryny przez Bowmana polegało na zastosowaniu kilku subtelnych, ale bardzo efektywnych usprawnień. W rozdziale tym zostały opisane niektóre z jego działań oraz sposoby wykorzystania najczystszego kodu XHTML i najsprytniejszego kodu CSS. Dodatkowo opisuję problemy, jakie sprawiała wówczas przeglądarka Internet Explorer oraz jak je rozwiązywano (jeśli było to w ogóle możliwe). Po przeczytaniu rozdziału zrozumiesz, co jest możliwe, jeśli Twoją pierwszą myślą przed rozpoczęciem projektu nie jest: „Czy to da się zrobić w Internet Explorerze?", lecz: „Jak mogę to zrobić, aby uzyskać jak najczystszy i najbardziej przyszłościowy efekt?". Rozwiązania prezentowane w tym rozdziale może nie nadają się do zastosowania od razu w praktyce (decyzja należy do Ciebie), ale stanowią dobry punkt startowy całego procesu rozwoju projektu. Zacznij od idealnego rozwiązania, a następnie cofaj się, aż dojdziesz do praktycznego. Dla wielu deweloperów te dwa punkty mogą się pokrywać. Ci mogą opisywane tutaj techniki zastosować praktycznie w swojej kolejnej witrynie. Dla innych dystans ten może występować, co oznacza, że nieco więcej uwagi poświęcają zapewnieniu jak najlepszej zgodności z przeglądarką Internet Explorer, a mniej — czystości rozwiązania. A więc przeczytaj ten rozdział, weź sobie do serca przedstawiony w nim materiał i projekt po projekcie, witryna po witrynie decyduj, do jakiego stopnia chcesz iść na kompromis między idealnym rozwiązaniem a zgodnością z niestandardowymi przeglądarkami.

Wywiad z projektantem Douglas Bowman jest wpływowym projektantem, którego szeroko znane i efektywne prace polegające na odświeżaniu projektów, takich jak Blogger, Wired News i Adaptive Path, wyniosły na wyżyny środowiska projektantów dbających o zgodność ze standardami. Jakiś czas po ukończeniu tego projektu Bowman objął nowo utworzone stanowisko szefa do spraw projektowania wizualnego Google. P: Czy cieszysz się z tego, jak wszystko się potoczyło? O: Jestem całkiem zadowolony z wyników całego projektu. Najważniejszym miernikiem sukcesu dla mnie jest to, czy udało się spełnić lub przekroczyć wszystkie oczekiwania klienta. Zazwyczaj, jeśli klient jest zadowolony, ja też. W tym przypadku jednym z celów było zwiększenie liczby osób zakładających konta. Drugim — ogólne zwiększenie użycia (przez już istniejących użytkowników) Bloggera. Nie mogę podać konkretnych liczb, ale powiem, że ostateczny wynik znacznie przewyższył oczekiwania Google. Projekt ten miał kilka aspektów i wszystkie w jakimś stopniu wpłynęły na wielki sukces nowego wyglądu witryny. Firmy Adaptive Path i Stopdesign współpracowały z Google w celu zmiany i uproszczenia strony głównej Bloggera i systemu rejestracji. Poza tym głównym zadaniem, firma Stopdesign wynajęła pięciu dodatkowych projektantów, aby pomogli utworzyć trzydzieści nowych szablonów dla użytkowników. Firma Google naprawdę ciężko pracowała nad tym, by podnieść poprzeczkę, rozszerzając funkcjonalność i możliwości swojej nowej witryny. Profile użytkowników, możliwość komentowania, nowe i pozbawione reklam strony na BlogSpot oraz przeszukiwanie blogów to tylko niektóre z nowych funkcji, które zostały dodane w tym samym czasie lub nieco później.

Rozdział 2. Blogger.com: efekt rollover i design touches P: Z której części projektu zespół jest najbardziej zadowolony? Która część najbardziej podoba się odwiedzającym? O: Wydaje mi się, że odpowiedź zależy od tego, komu zostanie zadane to pytanie. Z rozmów z programistami i inżynierami z Google wynika, że najbardziej podoba im się system projektowania oraz to, jak łatwo można rozszerzać i personalizować strony. Projekt jest prosty i przejrzysty. Oczywiście, oparty został na prostym kodzie HTML i CSS. Google zdecydowała się użyć naszych szablonów XHTML i CSS ze stron głównej i rejestracji jako podstawy do przebudowy całej aplikacji. Poza wymaganymi przez Google stronami dostarczyliśmy kilka ogólnych szablonów, które można szybko przerobić do utworzenia nowych sekcji. Gdyby spytać kierowników produktu, powiedzą, że najbardziej podoba im się prostota nowego projektu. Szczególnie zaś to, że nowa strona główna wiele lepiej przekazuje komunikat, czym jest dziennik internetowy, i jakie korzyści płyną z natychmiastowego utworzenia własnego. Odwiedzający witrynę zapewne w ogóle nie zauważają jej projektu. W istocie, jeśli dobrze wykonaliśmy naszą pracę, użytkownicy powinni wiedzieć, jak wygląda nasza witryna, ale nie zwracać uwagi na to, jak została zaprojektowana. Powinni natychmiast dowiedzieć się, co mogą zyskać, oraz widzieć prostą ścieżkę do opublikowania własnego błoga w jak najkrótszym czasie. Użytkownicy natychmiast dostrzegli zwiększoną liczbę szablonów do wyboru przy tworzeniu błoga. Gdy przychodzi do personalizacji, wszystkie te opcje dają im mnóstwo możliwości do wyrażenia swojego zdania i osobowości. P: W dalszej części tego rozdziału prezentowany jest kod odpowiedzialny za utworzenie zaokrąglonych rogów w witrynie Blogger.com, ale proponujemy inne rozwiązanie niż to, które zastosowałeś w swojej witrynie. Nasza metoda nie wymaga użycia dodatkowych znaczników di v, ale ma wadę: nie we wszystkich przeglądarkach działa tak samo. Przykładowo w Internet Explorerze tych zaokrągleń w ogóle nie widać. Gdybyś jeszcze raz pracował nad tym samym projektem, przyjąłbyś takie rozwiązanie, czy raczej — jako projektant — icolisz ściśle trzymać się każdego elementu? O: Gdyby wybór zależał tylko ode mnie i jako jedyny pisałbym kod, wybrałbym zgrabniejsze rozwiązanie bez dodatkowych znaczników. Jestem w na tyle komfortowej sytuaqi, że dokładnie wiem, jakie są wady i zalety każdego rozwiązania, oraz jak działa bardziej zaawansowany kod CSS. Chudszy i prostszy kod XHTML jest zawsze lepszy, a szczególnie wtedy, gdy część znaczników została dodana tylko dla osiągnięcia jakiejś sztuczki. Moduł strony byłby nie tylko prostszy, ale i bardziej stabilny, dzięki czemu mniej zależny od dokładnej liczby elementów di v z atrybutami cl ass. W kilku moich ostatnich projektach utworzyłem dla przeglądarki Internet Explorer tylko podstawowy zestaw stylów, a dla innych, które lepiej radzą sobie z CSS, dodatkowe arkusze. Tego typu podejście nazywa się progresywnym ulepszaniem (ang. progressive enhancement). Pojęcie to ukuł Steven Champeon w artykule napisanym kilka lat temu dla Webmonkey. Oznacza ono dostarczenie niektórym słabym przeglądarkom tylko podstawowej funkcjonalności, a lepszym — rozszerzonej. Niestety, tu decyzja nie należała tylko do mnie. W tym przypadku zaokrąglone rogi w całym projekcie były bardzo ważnym elementem planu, który zakładał, że witryna ma być bardziej przyjazna dla oka. Duża liczba (możliwe nawet, że większość) użytkowników Bloggera cały czas używa Internet Explorera jako swojej głównej przeglądarki. Gdybyśmy zastosowali progresywne podejście, wszyscy oni nie zobaczyliby nawet części nowego projektu witryny.

67

Rozdział 2. Blogger.com: efekt rollover i design touches W innych projektach uzyskanie idealnego wyglądu w Internet Explorerze może nie być takie ważne. Ponieważ jednak Google kierowało swój nowy produkt do szerszej grupy odbiorców nieposiadających dużej wiedzy technicznej (czyli takich, którzy najczęściej używają przeglądarki Internet Explorer), poświęcenie wyglądu na rzecz odchudzonego kodu HTML mogłoby nie być najlepszym rozwiązaniem. P: Czy zoitryna Blogger.com odniosła jakieś korzyści z nowego projektu ? Były korzyści finansowe czy tylko dotyczące liczby przyciąganych klientów? O: Tak jak wcześniej, nie mogę podawać żadnych liczb. Mogę tylko powiedzieć, że liczba rejestracji nowych użytkowników znacząco wzrosła od czasu odświeżenia wyglądu witryny i systemu rejestracji. Nowy projekt strony głównej zachęca więcej użytkowników do zarejestrowania. System rejestracji z kolei składa się z mniejszej liczby stron niż poprzedni. Został zaprojektowany tak, aby szybko przeprowadzić użytkownika przez cały proces oraz umożliwić mu pisanie postów po upływie nie więcej niż pięciu minut. Te zmiany przede wszystkim przesądziły o powodzeniu, ale nawet Google nie wiedziała, że sukces będzie taki duży. P: Patrząc wstecz, zrobiłbyś coś inaczej? O: W każdym większym projekcie po tygodniu lub dwóch zauważam, że coś można było zrobić lepiej. Zapala mi się w głowie taka żarówka, jakieś usprawnienie, które znacznie ułatwiłoby pracę. Czasami przypominam sobie o jakimś selektorze CSS, którego nigdy wcześniej nie używałem, i znajduję dla niego mnóstwo zastosowań. Jeśli chodzi o Bloggera, użyłem tam mnóstwo pływających elementów, ale wolałbym, by ich nie było. Niektóre zostały użyte tylko po to, aby naprawić błędy jednej lub dwóch przeglądarek. Inne natomiast mają szlachetniejsze przeznaczenie, ponieważ służą np. jako kontenery innych pływających elementów. Zawsze też chciałem być zaangażowany w późniejsze aspekty projektu. Zespół Google bardzo dobrze wykonał zadanie rozszerzenia dostarczonych przez nas szablonów. Chciałbym jednak być przy niektórych z tych czynności, aby zapewnić spójność i jakość stosowanego podejścia. W takich przypadkach czynnikiem ograniczającym jest zawsze budżet i po prostu nie było wystarczająco dużo środków, aby angażować firmy Adaptive Path i Stopdesign we wszystkie etapy. P: Do jakiego stopnia przeprojektowanie witryny Blogger wywołało zainteresowanie twoją osobą? Czy są firmy, które po zobaczeniu tego projektu chcą czegoś podobnego? O: Przeprojektowanie Bloggera było świetnym projektem. Współpraca z Adaptive Path także była pouczającym doświadczeniem. Praca z zespołem Bloggera dała dobre wyniki, ponieważ oni po prostu wiedzą, o co chodzi. Okazja wykonania zakończonego sukcesem projektu dla Google zwróciła uwagę wielu osób zarówno na firmę Adaptive Path, jak i Stopdesign. Dzięki Bloggerowi i kilku polecającym osobom z Google obie otrzymały propozycje wykonania projektów. Moim zdaniem, odświeżony projekt Bloggera jest dla dużych firm kolejnym twardym dowodem, który świadczy o tym, że obecnie jedyna droga to stosowanie standardów. Połącz wszystkie korzyści z trzymania się standardów z siłą i talentem kilku doradców do spraw projektowania. Później dodaj fakt, że projekt był wykonywany dla wysokiej klasy klienta, którego produkty są używane i opisywane przez rzesze ludzi każdego dnia. Bez wątpienia przeprojektowaniu witryny Blogger.com towarzyszyło duże zainteresowanie. Stanowi to dobry przykład tego, jak ważny jest efektywny projekt i solidna implementacja. Miejmy nadzieję, że pomoże to także innym projektantom i poprawne projektowanie zacznie być lepiej cenione. P: Dwóch największych konkurentów Bloggera od pewnego czasu także stosuje się do standardów. Myślisz, że decyzję tę podjęto ze względu na odświeżenie Bloggera, czy uważasz, że to naturalna kolej rzeczy?

Rozdział 2. Blogger.com: efekt rollover i design touches O: Nie wydaje mi się, żeby szefowie Google myśleli sobie „A niech to, nasza konkurencja ma projekty zgodne ze standardami, musimy ich dogonić i też takie sobie zrobić". Kiedy zwrócili się do nas, zaplanowali już kilka prostych celów. Prawdopodobnie nie wiedzieli jeszcze, jak je zrealizować, ale wiedzieli, że my możemy im w tym pomóc i znacząco poprawić jakość oferowanych przez nich usług. Zarówno w Google, jak i Adaptive Path wiedziano, jaki jest stosunek firmy Stopdesign do implementowania projektów. A więc myślę, że standardowe rozwiązania były czymś oczywistym. Czasami klienci mają niejasne pojęcie, jakie korzyści płyną ze stosowania standardów. Najczęściej jednak zaczynają to rozumieć i ekscytować się, gdy rozpoczną pracę nad takim projektem dla siebie. Na papierze mamy teorię, która w czasie pracy przekształca się w namacalny projekt. Im chudsze są użyty system zarządzania treścią i język skryptowy generujący kod HTML, tym lepiej. Po prostu pozwalają na szybszą oraz łatwiejszą pracę i można je praktycznie natychmiast analizować bez potrzeby przedzierania się przez tabele i ich komórki. Kiedy podstawowy projekt został zatwierdzony i był w miarę stabilny, inżynierowie z Google i programiści mogli kontynuować dokonywanie zmian w bazie kodu, podczas gdy my mieliśmy pliki CSS i cały czas wprowadzaliśmy poprawki. Był to wygodny sposób współpracy.

Efekt rollover w CSS Jeśli jest coś, co kaskadowe arkusze stylów uprościły w internecie, jest to na pewno efekt rolloyer — zamiana obrazka lub koloru na inny, gdy nad określoną sekcją strony pojawi się kursor. Do 2001 roku jedynym sposobem na jego uzyskanie było użycia JavaScriptu, tak jak poniżej:



Na szczęście, CSS pozwala na osiągnięcie tego samego celu na kilka różnych sposobów, a na dodatek wszystkie są cudownie proste. Przyjrzymy się im.

69

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

Zmienianie koloru tekstu i tła odnośników — łatwe Jest to najprostsza (i najczęściej stosowana) technika pozwalająca uzyskać efekt rollover przy użyciu CSS. Ma za zadanie poinformować użytkownika, że kursor znalazł się nad odnośnikiem. Na rysunku 2.1 przedstawiam kilka przykładów tego efektu. Aby zobaczyć świetny przykład efektu rollover w akcji, odwiedź poniższe witryny: •

h ttp://poota to.org/examples/rollover.

•

h ttp://poota to.org/tu

html

torials/css/css-rollovers/

Przyjrzyjmy się drugiemu przykładowi i zobaczmy, jak można go skopiować.

Styl domyślny

Pseudoklasa :hover

i y own from scratch. So I'm not even going i

i y own from scratch. So I'm not even going i

omething or create a test example. Others s

omething or create a test example. Others s

t or create code, or test this approach howet

t or create code, or test this approach howe\

i that this is a very simitar idea to the solutii

i that this is a very similar idea to the solutic

recently devised for the opposite problem: I

recently devised for the opposite problem: ł

ontent or morę design when the browser wir

ontent or more design when the browser wir

See his Resolution dependent layout, 2 1 Sep

See his Resolution dependent tayout, 2 1 Sep

'm simply recommending going backfeone ste

'm simpiy recommending going b a M one ste

Dn is doing. A simple, basie style sheet is api

Dn is doing. A simple, basie style sheet is api

and handheld media types, and takes care o

and handheld media types, and takes care o

in denominator that still supports CSS. Then

>n denominator that still supports CSS. Then

vindow widths results in the application of a

vindow widths results in the application of a

t e e t that breaks the page into multiple colun

l e e t that breaks the page into multiple colun

an's idea enters in for applying yet m o r e styl

Dn's idea enters in for applying yet more styl

ii IE5/Win?

m IE5/Win?

• but Dog es, Ethan

and I were having a

haff-joked about hiding styles from

• hut

Doug, Ethan

and I were having a

half-joked about hiding styles from

s a question I've been pondering a bit, and

s a question I've been pondering a bit, and

/en more, with his dectston to hide his site's

/en more, with his decisi^to hide his site's

Natu rally, here f all traffic iurely, a thinking about ere, are highly id in, is getting

%

LI

Naturally, here f all traffic Jurely, a thinking about iere, are highly 2d in, is getting

%

LI

dients are references. Our obsession with si called "the masters par excellence of HTMini Desioners. and the sttes we'»e designed pro experts. dients. and others are saying abou

dients are references. Our obsession with si called "the masters par excellence of HTMini Desioners. and the sites we^e desioned pro experts. dients. and others arę saying abou

How do Z know if w e ' r e a good match? We work with smart dients who understanc

How do I know if w e ' r e a good match? We work with smart dients who understanc

Rysunek 2.1. Domyślny styl odnośników z użyciem pseudoklasy :hover z różnych stron

70

Rozdział 2. Blogger.com: efekt rollover i design touches Kod XHTML Poniżej znajduje się kod XHTML:

Jeśli jesteś zainteresowany, wyślij mi e-mail żebyśmy mogli przedyskutować, czego chcesz.



A więc potrzebny jest tylko jeden znacznik. A jak wygląda kod CSS?

Kod CSS Oto on: a { border-bottom: lpx solid #eee; color: #dl7e62;

}

text-decoration: none;

a:visited { border-bottom: lpx solid #eee; color: #9d604c; text-decoration: none;

} a:hover { background-color: #ffffda; border-bottom: lpx solid #ddd; color: #c30; text-decoration: none;

} Ważna jest kolejność, w jakiej są zapisane powyższe reguły. Pierwsza z nich dotyczy wszystkich odnośników. Druga tylko tych, które zostały już przez użytkownika odwiedzone (na podstawie informacji w pamięci podręcznej przeglądarki). Ostatnia tyczy się odnośników, nad którymi aktualnie znajduje się kursor. Zgodnie z zasadą kaskadowości CSS (www.htmlhelp.com/reference/css/structure.htmHtcascade), każda z tych reguł ma pierwszeństwo przed tą, która znajduje się nad nią. A więc styl zwykłego odnośnika zostanie przesłonięty przez styl odwiedzonego, który z kolei zostanie przesłonięty przez styl odnośnika wskazywanego aktualnie przez kursor. Takie proste, a nawet nie wyobrażasz sobie, ile osób myli tę kolejność.

Zmiana koloru tekstu i tła odnośników — skomplikowane Jest to świetny trick do tworzenia szybkich, niepochłaniających dużo czasu podczas transferu efektów rollover, który Bowman wykorzystał w witrynie Bloggera. Polega na zmianie koloru tła elementu przy jednoczesnym trzymaniu nad nim cały czas tego samego obrazka (może być wstawiony jako element liniowy lub jako tło przy użyciu CSS). Jak wygląda, możesz zobaczyć na rysunku 2.2, przedstawiającym stronę główną blogger.com. Rysunek 2.3 ilustruje, co się dzieje po najechaniu kursorem na te odnośniki.

71

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

Blogger: Utwórz darmowego błoga - Mozilla Firefox I Pik | £ £

Edycja -

Widok

Historia

C

Zakładki lO!

,lt,

Narzędzia

Ps://www.bbgger.com/start

Blogger BŁOGI ZAKTUALIZOWANE O GODZINIE 12:44 Download Mo»ies

Co

tO

jest blog?

-

X

Pomoc Ó - 1 ' H -

»gie

Zaloguj się za p o m o c ą k o n t a Google azwa użytkownika (adres d-tarfity'. (?)

NAJCIEKAWSZE BŁOGI Alicja Policia

Obejrzyj prezentację Funkcje

więcej >1

Załóż błoga w 3 prostych krokach: U t w ó r z konto Nazwij błoga

Publikuj prremyślenia

Uzyskaj opinie

Publikuj zdjęcia

Twórz przez e-mail

Blog jest prostą w użyciu witryną internetową, na której możesz szybko publikować swoje myśli, odpowiadać na komentarze i nie tylko. A to wszystko ZA DARMO.

W y b i e r z szablon

UTWÓRZ BŁOGA TERAZ

Slrww ttowna j funfctie | Informacje i Buzz ! Pomoc ! Jgzyk | Pfmmriiti I Sprzęt Wawlii korzystania z uthięi f Piywatnoit | Zatady zawartości i © 1999 - 2008 Google

www.blogger.com Q

R y s u n e k 2.2. Cztery odnośniki na stronie g ł ó w n e j blogger.com (reszta została wytłumiona, aby skupić się tylko na nich)

Zauważysz, że kolor tła ulega zmianie, a w r a z z n i m słowo „przemyślenia" zmienia kolor na czarny. Natomiast sam obraz pozostaje taki sam. Jak to u z y s k a n o ? Najpierw spójrz na kody X H T M L , C S S i obrazy użyte w tej sekcji.

Kod XHTML O t o kod X H T M L :
  • Publ i kuj przemyśleni a
    • <1 i id="wcon">L)zyskaj opinie <1 i id="wshr">Publ i kuj zdjęcia <1 i id="wpst">Twórz przez e-mail

    72

    Rozdział 2. Blogger.com: efekt rollover i design touches H U E

    ' ; Bloggei : Utwórz darmowego błoga - Mozilla Firefox Pik

    Bfycja

    W

    •

    Widok C

    Historia ,

    Zakładki

    Narzędzia

    Pomot

    O j https://www.blogger.com/5tart

    8

    Zaloguj się za pomocą konta Google

    Blogger

    i j.

    BŁOGI ZAKTUALIZOWANE O GODZINIE 11:47

    HmMi ?

    NAJCIEKAWSZE BŁOGI

    BestLandNews

    Alicia Policia

    Co tO jest blog?

    Obejrzyj prezentację Funkcje

    Załóż błoga w 3 prostych krokach:

    GT %

    ©

    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemyślenia

    opinie

    zdjęcia

    przez e-mail

    O Blog jest pros tą w użyciu witryną internetową,

    na której możesz szybko publikować swoje myśli, odpowiadać na komentarze i nie tylko. A to wszystko ZA DARMO

    ^ ^

    Utwórz konto

    ^ ^

    Nazwij błoga Wybierz szablon

    UTWÓRZ BŁOGA TERAZ

    Strona główna ( funkcje | Informacje { Buzz j Pomoc | Język i Program | Sprzęt Warunki korzystania z usługi ( Prywatność | Zasady zawartości | © 1999 - 2008 Google

    https ://www.blogger .com/fcour_pub.g

    www.blogger.com

    Rysunek 2.3. Jeden z odnośników rollover w akcji

    Kod

    css

    Poniżej znajduje się kod CSS: ul {

    }

    list-style: none; margin: 0; padding: 0;

    ul li { float: l e f t ; margin: 0; padding: 0;

    } ul li a { color: #777; display: błock; padding: 80px 10px 5px;

    73

    Rozdział 2. Blogger.com: efekt rollover i design touches text-align: center; text-decoration: none; width: 75px;

    } ul li#wpub a { background: transparent url(icon_wpub.gif) no-repeat top center;

    } ul lilwcon a { background: transparent url(icon_wcon.gif) no-repeat top center;

    } ul lilwshr a { background: transparent url(icon_wshr.gif) no-repeat top center;

    } ul li#wpst a { background: transparent url(icon_wpst.gif) no-repeat top center;

    } ul li a strong { color: #000; font-size: larger;

    } ul li a strong { color: #000; display: błock; font-size: larger;

    } ul ul ul ul

    li#wpub a:hover, lilwcon a:hover, li#wshr a:hover, li#wpst a:hover { background-color: #f8f2eb;

    } ul li a:hover { color: #000;

    }

    Obrazki Aby metoda ta zadziałała, należy użyć obrazków z przezroczystymi obszarami, przez które będzie prześwitywać tło. Na każdym z obrazków widocznych na rysunku 2.4 przezroczyste obszary zostały zastąpione kratką, dzięki czemu widać, które części są przezroczyste, a które nie.

    R y s u n e k 2.4. Kratka wskazuje przezroczyste obszary

    74

    Rozdział 2. Blogger.com: efekt rollover i design touches Objaśnienie Na rysunku 2.5 przedstawiam początkowy efekt.

    • Publikuj przemyślenia • U z y s k a j opinie • Publikuj zdie:ia • Twórz przez e-mail

    Rysunek 2.5. Odnośniki bez stylów Teraz prześledzę kod CSS wiersz po wierszu i wyjaśnię, co robi każdy jego element. Najpierw usunę punktory znajdujące się przed wszystkimi elementami listy (rysunek 2.6). ul { list-style: none;

    } • Publikuj przemyślenia • U z y s k a j opinie • Publikuj zdięcia • Twórz przez e-mail

    Rysunek 2.6. Usunięcie punktorów Następnie usunę marginesy i dopełnienie, które mogłyby być ustawione w liście nieuporządkowanej (rysunek 2.7): Ul {

    list-style: none; margin: 0; padding: 0;

    } • Publikuj przemyślenia • U z y s k a j opinie • Publikuj zdiscia • T w o r t przez e-mail

    Rysunek 2.7. Usunięcie marginesów i dopełnienia Jest to potrzebne, aby przy pozycjonowaniu ukończonej listy na stronie nie trzeba było walczyć z domyślnymi ustawieniami przeglądarki. Później dodam reguły stylistyczne dla elementów listy. Najpierw sprawię, że każdy z nich stanie się elementem pływającym do lewej, dzięki czemu zamiast jeden pod drugim ustawią się w poziomie obok siebie, jak na rysunku 2.8. Ponadto usuwam marginesy i dopełnienie tych elementów. ul li { float: left; margin: 0; padding: 0;

    }

    75

    Rozdział 2. Blogger.com: efekt rollover i design touches Publikuj przemyśleniaUiyskai opimePublikiii zdiectaTwón przez e-mail

    Rysunek 2.8. Pływające elementy listy

    Teraz przejdę do określenia stylu odnośników. Zacznę od koloru pisma (rysunek 2.9): ul li a { color: #777;

    } P u b l i k u j przemyślemaUzyskaj opiniePubliknj zdjęciaTwórz przez e-mail

    Rysunek 2.9. Ustawienie koloru pisma

    Teraz zamieniam łącza w elementy blokowe (display: błock) oraz ustawiam ich szerokość na 75 pikseli, jak na rysunku 2.10 (taką szerokość mają obrazki, których zamierzam użyć): ul li a { color: #777; display: błock; width: 75px;

    } Publikuj Uzyskaj przernyśleniaopirae

    Publikuj zdjęcia

    Twóra przez e-mail

    Rysunek 2.10. Odnośniki zamienione w elementy blokowe Teraz trzeba dodać nieco wolnej przestrzeni, aby obrazki (które za chwilę dołączę) miały trochę miejsca (rysunek 2.11). W tym celu ustawiam 80-pikselowe górne dopełnienie (75 pikseli dla obrazka i 5, aby utworzyć odstęp między obrazkiem a tekstem). ul li a { color: #777; display: błock; padding: 80px 0 0 0; width: 75px;

    }

    Publikuj

    Uzyskaj

    przemyśleniaopinie

    Publikuj

    Twórz

    zdjęcia

    przez e-mail

    Rysunek 2.11. Wstawienie pustej przestrzeni dla obrazków

    76

    Rozdział 2. Blogger.com: efekt rollover i design touches Następnie dodaję 10-pikselowe dopełnienie z lewej i prawej strony oraz 5-pikselowe u dołu (rysunek 2.12): ul li a { color: #777; display: błock; padding: 80px 10px 5px; width: 75px;

    }

    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemyślenia

    opime

    zdjęcia

    przez e-mail

    Rysunek 2.12. Dodanie dopełnienia Na zakończenie p o d s t a w o w e g o formatowania u s t a w i a m tekst o d n o ś n i k ó w na środku ich elementów i u s u w a m podkreślenie (rysunek 2.13): ul li a { color: #777; display: błock; padding: 80px 10px 5px; text-align: center; text-decoration: none; width: 75px;

    }

    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemyślenia

    opinie

    zdjęcia

    przez e-mail

    Rysunek 2.13. W y ś r o d k o w a n i e tekstu i usunięcie podkreślenia Nadszedł czas na dodanie obrazków tła każdego z o d n o ś n i k ó w (rysunek 2.14): ul li#wpub a { background: transparent url (icon_wpub.gif) no-repeat top center;

    }

    ul li#wcon a { background: transparent url(icon_wcon.gif) no-repeat top center;

    } ul li#wshr a { background: transparent url(icon_wshr.gif) no-repeat top center;

    } ul li#wpst a { background: transparent url(icon_wpst.gif) no-repeat top center;

    }

    77

    m%

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

    Publikuj

    Uzyskaj

    Publikuj

    Tw 017.

    przemyślenia

    opinie

    zdjęcia

    przez e-mai!

    Rysunek 2.14. Dodanie obrazków tła

    Wszystko zaczyna coraz ładniej wyglądać. Następnie sprawię, że pierwsze słowo każdego odnośnika będzie nieco większe i ciemniejsze (rysunek 2.15): ul l i a strong { color: #000; font-size: larger;

    }


    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemyślenia

    opinie

    zdjęcia

    przez e-mail

    Rysunek 2.15. Przyciemnienie i powiększenie pierwszych słów odnośników

    Aby mieć pewność, że drugie słowo każdego z łączy zawsze znajdzie się w drugim wierszu (rysunek 2.16), dodałem poniższą regułę: ul li a strong { color: #000; display: błock; font-size: larger;

    ^ $

    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemyślenia

    opinie

    zdjęcia

    przez e-mail

    Rysunek 2.16. Teraz na pewno drugie słowo będzie znajdować się w drugim wierszu Całość wygląda już bardzo ładnie, a więc teraz zajmę się kodem CSS odpowiedzialnym za efekt rollover. Poniższa reguła zmienia kolor tła każdego odnośnika, gdy znajdzie się nad nim kursor (rysunek 2.17): ul ul ul ul

    }

    78

    li#wpub a:hover, li#wcon a:hover, li#wshr a:hover, li#wpst a:hover { background-color: #f8f2eb;

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

    Br %

    ©

    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemienia

    opinie

    zdjęcia

    przez e-mail

    Rysunek 2.17. Zmienianie koloru tła

    Na zakończenie dodam poniższą regułę, która zmienia kolor tekstu na czarny po najechaniu na niego kursorem (rysunek 2.18): ul li a:hover { color: #000;

    &Q®©

    }

    Publikuj

    Uzyskaj

    Publikuj

    Twórz

    przemyślenia

    opime

    zdjęcia

    przez e-mail

    Rysunek 2.18. Efekt końcowy

    To wszystko!

    Zmienianie koloru tła wierszy tabeli Zmienianie koloru co drugiego wiersza tabeli stało się ważnym aspektem projektowania tego elementu (zobacz np. iTunes). Dzięki temu struktura długich tabel jest lepiej widoczna i użytkownikowi łatwiej znaleźć informacje. Jeśli połączy się to jeszcze z wyróżnianiem wiersza, nad którym znajduje się kursor, można uzyskać atrakcyjny i funkcjonalny efekt wizualny, taki jak na rysunku 2.19.

    FAMILY STATISTICS Name

    Age

    Sex

    Hair Color

    Alastair

    31

    Małe

    Brown

    Dunstan

    29

    Małe

    Brown

    3

    Małe

    Brown

    Manella

    33

    Female

    Brown

    Morąg

    55

    Female

    Brown

    Nicole

    29

    Female

    Black

    Paul

    59

    Małe

    Black

    Poppy

    3

    Female

    White

    Lucas

    Rysunek 2.19. Przykład naprzemiennego pokolorowania wierszy tabeli i wyróżnienia tego, nad którym znajduje się kursor

    79

    Rozdział 2. Blogger.com: efekt rollover i design touches K o d pozwalający uzyskać ten efekt nie m o ż e być prostszy. Poniżej przedstawiam kody X H T M L i C S S potrzebne do utworzenia tej tabeli.

    Kod XHTML Poniżej znajduje się kod X H T M L : < t r class="even">

    80

    < t r class="odd">

    Rozdział 2. Blogger.com: efekt rollover i design touches
    Statystyki rodzinne
    Imię Wiek Płeć Kolor włosów
    Aleksander 31 Mężczyzna Brązowe
    Daniel 29 Mężczyzna Brązowe
    Łukasz 3 Mężczyzna Brązowe
    Mariola 33 Kobieta Brązowe
    Maria 55 Kobieta Brązowe
    Nina 29 Kobieta Czarne
    Paweł 59 Mężczyzna Czarne
    Krystyna 3 Kobieta Siwe


    Kod CSS Większość p o n i ż s z e g o k o d u C S S służy d o stylizacji tabeli. R e g u ł y o d p o w i e d z i a l n e z a w y r ó ż nienie o d p o w i e d n i e g o wiersza s ą p o g r u b i o n e . table { background-color: #fff; border: lpx solid #ddd; empty-cells: show; font-size: 90%; margin: 0 0 20px 0; padding: 4px; text-align: left; width: 300px;

    } table caption { color: #777; margin: 0 0 5px 0; padding: 0; text-align: center; text-transform: uppercase;

    } table thead th { border: 0; border-bottom: lpx solid #ddd; color: #777; font-size: 90%; padding: 3px 0; margin: 0 0 5px 0; text-align: left;

    } table tbody tr.odd { background-color: #f7f7f7;

    } table tbody tr.even { background-color: #fff;

    81

    Rozdział 2. Blogger.com: efekt rollover i design touches } table tbody tr:hover { background-color: #ffe08e;

    } table tbody td { color: #888; padding: 2px; border: 0;

    } table tbody tr:hover td { color: #444;

    }

    Co to wszystko

    oznacza?

    Nie będę szczegółowo analizował każdego wiersza kodu CSS, ponieważ nie wszystko dotyczy opisywanego efektu. Warto jednak przyjrzeć się kilku ostatnim regułom. Po pierwsze, należy zauważyć, że każdej klasie wierszy tabeli (odd i even) zostało nadane tło o określonym kolorze: table tbody tr.odd { background-color: #f7f7f7;

    } table tbody tr.even { background-color: #fff;

    } W ten sposób uzyskano naprzemienne pokolorowanie wierszy tabeli. Następna reguła zmienia kolor tła wiersza, nad którym znajduje się kursor: table tbody tr:hover { background-color: #ffe08e;

    } Ostatnia reguła zmienia kolor tekstu na ciemniejszy w wierszu, nad którym znajduje się kursor, aby odróżniał się od nowego koloru tła: table tbody tr:hover td { color: #444;

    } To było naprawdę proste.

    82

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

    Zmienianie koloru tekstu Ostatnie zastosowanie pseudoklasy :hover, które przedstawię w tym rozdziale, to wyróżnianie tekstu (może być zwykły lub odnośnik) w odpowiedzi na najechanie kursorem na di v lub inny element. Do czego to się może przydać? Wyobraź sobie stronę upstrzoną odnośnikami. Najczęściej projektanci nadają im żywe kolory, aby odróżniały się od reszty tekstu. To wystarcza, jeśli strona zawiera tylko kilka łączy. Co się natomiast dzieje, gdy są ich setki? Oczy użytkownika zostaną zaatakowane jaskrawymi kolorami, którymi pokolorowane są proszące o uwagę łącza. Jak można dostrzec subtelności projektu strony, gdy w oko wpada morze kolorów? Jedno z rozwiązań tego problemu jest bardzo proste. Jeśli te jaskrawe kolory zostaną ukryte, dopóki użytkownik nie umieści kursora nad odpowiednią sekcją strony, początkowy efekt wizualny będzie znacznie łagodniejszy. Odnośniki stają się widoczne dopiero wówczas, gdy odwiedzający jasno da do zrozumienia, że jest zainteresowany określoną sekcją, najeżdżając na nią kursorem myszy. Jest to bardzo efektywna technika. Zobaczmy, jak można to zrobić.

    Kod XHTML Poniżej znajduje się kod XHTML:

    83

    Rozdział 2. Blogger.com: efekt rollover i design touches Kod CSS O t o kod CSS: di v#li nks { color: #333; border: 2px solid #ddd; padding: 10px; width: 240px;

    } html > body di v#li nks { width: 220px;

    } di v#l i nks ul { margin: 0 0 0 19px; padding: 0;

    } di v#1i nks ul li { 1ist-style-image: url('list-dot.gif'); margin: 0 0 .5em 0;

    } html > body di v#li nks ul li a { color: #333; text-decoration: none;

    } div#links:hover ul li a { color: #0000ff; text-decoration: underline;

    } di v#li nks ul li a:hover { background-color: #ffff66; color: #000; text-decoration: none;

    }

    Obrazy Jedyny potrzebny w tym przypadku obraz to mała kropka mająca zastąpić domyślny punktor listy (rysunek 2.20).

    O Rysunek 2.20. Zastępnik dla d o m y ś l n e g o punktora listy

    84

    Rozdział 2. Blogger.com: efekt rollover i design touches Co to wszystko

    oznacza?

    Ponownie nie będę szczegółowo analizował całego kodu, tylko skupię się na tym, co jest ważne z punktu widzenia opisywanej techniki. Oto kilka fragmentów, którym warto poświęcić nieco uwagi. Najpierw został ustawiony domyślny kolor dla treści znacznika di v. Wybrałem odcień szarości, ponieważ jest to kolor bardzo miły dla oka. A taki właśnie uspokajający efekt chciałem osiągnąć. div#links { color: #333;

    } Następnie zmieniłem styl łączy, aby zgadzały się z resztą tekstu, usuwając wszystko, co mogłoby je wyróżniać z otoczenia: html > body div#links ul li a { color: #333; text-decoration: none;

    } W regule tej celowo użyłem selektora dziecka (>), aby przeglądarka Internet Explorer (nieobsługująca tego selektora) nie mogła jej zastosować. Aby dowiedzieć się, dlaczego tak zrobiłem, przeczytaj kolejny podpunkt — „Problem Internet Explorera". Dalej znajdują się dwie reguły z użyciem pseudoklasy : hover. Pierwsza z nich zadziała, gdy użytkownik najedzie kursorem na element di v. Spowoduje ona zmianę szarego koloru odnośników na niebieski i wyświetlenie ich podkreślenia. div#links:hover ul li a { color: #0000ff; text-decoration: underline;

    } Druga z nich włącza się, gdy użytkownik najedzie bezpośrednio na odnośnik. Zmienia jego kolor na czarny, usuwa podkreślenie i ustawia tło na jaskrawożółte. di v#li nks ul li a:hover { background-color: #ffff66; color: #000; text-decoration: none;

    } To wszystko.

    Problem Internet

    Explorera

    Internet Explorer nie rozpoznaje pseudoklasy : hover w selektorach dotyczących innych elementów niż odnośniki. Ale Firefox, Opera, Safari i Internet Explorer 6 rozpoznają to: a:hover { color: red;

    }

    85

    Rozdział 2. Blogger.com: efekt rollover i design touches Natomiast poniższy kod rozpoznają tylko przeglądarki Firefox, Opera i Safari: div:hover { color: yellow;

    } div:hover a { color: green;

    } Jakie to ma znaczenie? Otóż, ma to wpływ na zaprezentowaną przed chwilą technikę. Wyobraź sobie, że przeglądasz stronę internetową przy użyciu przeglądarki Firefox. Strona się ładuje i CSS ustawia kolor wszystkich odnośników i tekstu na szary, aby nie razić oczu. Znajdujesz interesującą Cię sekcję. Przesuwasz nad nią kursor i wszystkie odnośniki robią się niebieskie, możesz łatwo odróżnić je od zwykłego tekstu. Teraz wyobraź sobie, że oglądasz tę samą stronę w przeglądarce Internet Explorer. Strona zostaje załadowana, CSS ustawia kolor wszystkich odnośników i tekstu na szary. Znajdujesz interesującą sekcję. Przesuwasz nad nią kursor i nic. Nie zostają wyróżnione żadne odnośniki i masz przed sobą tylko morze szarego tekstu niereagującego na zdarzenia. Dlaczego? Ponieważ Internet EXplorer nie rozpoznaje zdarzenia najechania kursorem na element di v, przez co nie może zastosować odpowiednich stylów do odnośników. Katastrofa! Dlatego już wiesz, czemu nie zmieniłem koloru odnośników na szary na samym początku w przeglądarce Internet Explorer. Nie ma sensu tego robić, skoro później przeglądarka nie potrafi tego zmienić. Dlatego został użyty selektor dziecka. Jednak ukrywanie stylów przed Internet Explorerem przy użyciu selektora dziecka ma jedną ciekawą cechę: Internet Explorer dla komputerów PC nie rozpoznaje go, natomiast Internet Explorer 5 dla komputerów Mac tak! A więc blokując tę przeglądarkę przy użyciu selektora >, należy zawsze pamiętać, że dotyczy to tylko jej wersji dla Windows.

    Zmienianie pozycji tła odnośników Drugim sposobem na uzyskanie efektu rollover jest zamienianie nie tylko koloru tła, lecz także samych obrazków. Wykorzystuje się tu zdobywającą popularność metodę pozycjonowania tła. Jeśli pierwszy raz o tym słyszysz, nie masz powodu do niepokoju. Technika ta jest prosta, chociaż wymaga objaśnień.

    Efekt rollover w oparciu o wbudowane

    obrazki

    Wyobraź sobie, że otrzymujesz od klienta stronę widoczną na rysunku 2.21 z prośbą o uatrakcyjnienie znajdującego się na niej zdjęcia — dodanie efektu rollover, może jakiegoś cienia, czegoś, co sprawi, że będzie bardziej efektowne. Potrafisz to zrobić, prawda? A gdyby nie można było nic zmieniać w kodzie XHTML? Nadal potrafisz to zrobić? Spójrzmy na fragment kodu:

    Tako rzecze Łu kasz...

    CzeSć, nazywam się Łukasz. Mam trzy lata i już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi ż Polski. Lubię samochody I ciężarówki, I autobusy, I pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką I Walijczykami. Moja babcia ma psa o Imieniu Reksio. Jest miły i słodki, I gdy jest zadowolony, to macha ogonem. Gdy dorosnę, chcę być jak mój wujek, ale z niego goić...

    Rysunek 2.21. Potrafisz podmienić to zdjęcie przy użyciu CSS?

    Jeśli masz szczęście i przekazano Ci dobrze przemyślany kod XHTML, tego rodzaju przeróbka to bułka z masłem. Może to zabrzmieć przytłaczająco, ale przy użyciu programu Adobe Photoshop i pewnej ilości kodu CSS można bardzo szybko utworzyć układ, który nie tylko wstawia nowy obraz i zmienia jego położenie, lecz również tworzy na tym obrazie efekt rollover, widoczny, gdy użytkownik ustawi kursor w ramce „Tako rzecze Łukasz...". Rysunek 2.22 przedstawia efekt końcowy. Jest on przedstawiony dwa razy: jeden raz w normalnym stanie (po lewej, a drugi z efektem rollover (po prawej).

    87

    Rozdział 2. Blogger.com: efekt rollover i design touches Tako rzecze Łukasz.

    Tako rzecze Łukasz..

    Cześć, nazywam się Łukasz. Mam trzy lata i Już znam dwa Języki, ponieważ mój ojciec Jest Anglikiem, a mama pochodzi z Polski.

    Cze SC, nazywam się Łukasz. Mam trzy lata i już znam dwa Języki, ponieważ mój ojciec Jest Anglikiem, a mama pochodzi z Polski.

    Lubię samochody I ciężarówki, I autobusy, I pociągi, a nawet wszystko, co się nisza. Nie przepadam za brukselką i Walijczykami.

    Lubię samochody I ciężarówki, i autobusy, i pociągi, a nawet wszystko, co się rusza. Nie ^ przepadam za brukselką I Walijczykami.

    Moja babcia ma psa o imieniu Reksio. Jest mały I słodki, i gdy jest zadowolony, to macha ogonem.

    Moja babcia ma psa o Imieniu Reksio. Jest mały 1 słodki, i gdyjest zadowolony, to macha ogonem.

    Gdy dorosnę, chcę być jak mój wujek, ale z niego gość...

    Gdy dorosnę, chcę być jak mój wujek, ale z niego gość...

    Rysunek 2.22. Ukończony układ i efekt rollover. Najechanie kursorem na tekst powoduje w y w o ł a n i e efektu roliover i pojawienie się kolorowego obrazka

    Zobaczmy, jak się to robi.

    Kod XHTML Skoncentruję się na sekcji kodu ze zdjęciem, która została pogrubiona na poniższym listingu:

    88

    Rozdział 2. Blogger.com: efekt rollover i design touches Kod CSS Spójrz na kod CSS. Za jego pomocą usunąłem oryginalny obraz i zastępuję go innym. Na dodatek utworzyłem efekt rollover przy użyciu tylko jednego obrazka. .box { position: relative;

    } html > body div#photo-lucas img { left: -5000px; position: absolute;

    } html > body div#photo-lucas { background: transparent url(lucas-rollover.png) no-repeat top left; height: 124px; left: 185px; position: absolute; width: 160px;

    } div.box:hover div#photo-lucas { background-position: top right;

    }

    Obrazy Na rysunku 2.23 przedstawiam oryginalny obraz JPG wskazany w kodzie XHTML.

    Rysunek 2.23. Oryginalny obraz wskazany w kodzie XHTML (lucas.jpg, o wymiarach 150 x 100 pikseli)

    Na rysunku 2.24 przedstawiam plik PNG, który zostanie użyty do podmiany Użycie tego formatu jest podyktowane chęcią otrzymania realistycznego półprzezroczystego cienia, którego nie da się uzyskać ani w plikach JPG, ani GIF.

    Rysunek 2.24. Obraz użyty do podmiany (Lucas-rollover. png, o wymiarach 320 x 124 piksele). Przezroczyste obszary są zaznaczone wzorem kratki

    89

    Rozdział 2. Blogger.com: efekt rollover i design touches Co to wszystko

    oznacza?

    Nie ma sensu analizować kodu XHTML, ale warto spojrzeć na CSS. Na rysunku 2.25 przedstawiam wersję początkową.

    Tako rzecze Łukasz. „

    Cześć, nazywam się Łukasz. Mam trzy lata I już znam dwa Języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi z Polski. Lubię samochody I ciężarówki, I autobusy, I pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką I Walijczykami. Moja babcia ma psa o Imieniu Reksio. Jest mały I słodki, I gdy jest zadowolony, to macha ogonem. Gdy dorosnę, chcę byćjak mój wujek, ale z niego gość...

    Rysunek 2.25. Wersja początkowa

    Najpierw trzeba usunąć oryginalny obrazek lucas.jpg. Przy użyciu CSS można to zrobić na kilka sposobów, ale najlepszym jest ustawienie pozycjonowania na bezwzględne i wyrzucenie jak najdalej poza ekran (rysunek 2.26). html > body div#photo-lucas img { left: -5000px; position: absolute;

    } Użycie deklaraq'i position: absolute zamiast position: reiative jest podyktowane tym, że pozycjonuje ona element bezwzględnie, a więc usuwa go całkowicie z normalnego układu dokumentu. W tym przypadku powoduje, że jej element rodzic (div#photo-lucas) zapada się i pozwala znajdującemu się pod nim tekstowi przesunąć się do góry w celu zapełnienia wolnego miejsca. Po usunięciu starego obrazka przyszedł czas na wstawienie nowego. Wstawię go jako tło elementu di v#photo-l ucas, czyli di v, który zawierał oryginał (rysunek 2.27): html > body div#photo-lucas { background: transparent url(lucas-rollover.png) no-repeat top left;

    }

    90

    Rozdział 2. Blogger.com: efekt rollover i design touches Tako rzecze Łukasz... Cześć, nazywam się Łukasz. Mam trzy lata I już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi z Polski. Lubię samochody i ciężarówki, i autobusy, i pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką i Walijczykami. Moja babcia ma psa o imieniu Rekslo. Jest mały i słodki, i gdy jest zadowolony, to macha ogonem. Gdy dorosnę, chcę być jak mój wujek, ale z niego gość...

    Rysunek 2.26. Usunięcie obrazka

    Tako rzecze Łukasz... Cześć, nazywam się Łukasz. Mam trzy lata i już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi z Polski. Lubię samochody i ciężarówki, i autobusy, i pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką i Walijczykami. Moja babcia ma psa o imieniu Rekslo. Jest mały i słodki, i gdy jest zadowolony, to macha ogonem. Gdy dorosnę, chcę być jak mój wujek, ale z niego gość...

    Rysunek 2.27. W s t a w i a n i e n o w e g o obrazka

    Skoro go wstawiłem, to gdzie jest? Przypomnij sobie, że jest to obraz tła elementu di v#photo-l ucas, który zawierał oryginalne zdjęcie. Ponieważ jednak oryginał został w y r z u c o n y poza ekran, element di v#photo-l ucas nie m a żadnej treści, a to oznacza, że m a zerowe wymiary. A więc n o w y obraz tła jest, ale jego elementowi trzeba nadać odpowiednie wymiary, aby stał się w i d o c z n y (rysunek 2.28): html > body div#photo-lucas { background: transparent url(lucas-rollover.png) no-repeat top left; height: 124px; width: 160px;

    }

    91

    Rozdział 2. Blogger.com: efekt rollover i design touches Tako rzecze Łukasz...

    Cześć, nazywam się Łukasz. Mam trzy lata I już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi z Polski. Lubię samochody 1 ciężarówki, i autobusy, 1 pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką i Walijczykami. Moja babcia ma psa o imieniu Reksio. Jest mały i słodki, I gdy jest zadowolony, to macha ogonem. Gdy dorosnę, dicę być jak mój wujek, ale z niego goić...

    Rysunek 2.28. Pokazanie ukrytego obrazka

    A więc jest! Zauważ, że wysokość ustawiona w powyższej regule odpowiada wysokości nowego obrazu (lucas-rollover.png) oraz szerokość wynosi dokładnie połowę jego szerokości. Dzięki temu w danym momencie widać tylko połowę obrazu lucas-rollover.png, czyli dokładnie tyle, ile trzeba. Mamy nowy obraz na ekranie, trzeba go przesunąć w prawo. W tym celu ponownie należy użyć deklaracji position: absolute (rysunek 2.29): html > body div#photo-lucas { background: transparent url(lucas-rollover.png) no-repeat top left; height: 124px; position: absolute; width: 160px;

    } Nie martw się, wszystko jest pod kontrolą. Element di v#photo-l ucas został tylko usunięty ze zwykłego układu elementów w dokumencie, co oznacza, że nie wchodzi w interakcje z innymi elementami w sąsiedztwie. Unosi się nad nimi (albo pod, jeśli użyjesz własności z-i ndex) i można umieścić go w dowolnym miejscu. W takim razie przesunę go trochę w prawo. Na początek trzeba zmodyfikować nieco oryginalny blok (box) i wstawić poniższą regułę: .box { position: relative;

    }

    92

    Rozdział 2. Blogger.com: efekt rollover i design touches Tako rzecze Łukasz...

    I autobusy, f pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką I Walijczykami. Moja babcia ma psa o Imieniu Reksio. Jest mały I słodki, I gdy Jest zadowolony, to macha ogonem. Gdy dorosnę, chcę być jak mój wujek, ale z niego goić...

    Rysunek 2.29. Zmiana położenia obrazka

    To oznacza, że bez względu na to, jakie współrzędne nadasz elementowi di v#photo-l ucas, będzie on zawsze pozycjonowany względem zawierającego go elementu (z klasą box). Wartość top 1 eft oznacza lewy górny róg tego bloku, bottom ri ght — prawy dolny itd. Gdy mamy ustalony punkt odniesienia, możemy przesunąć obraz. Najpierw ustaw pozycjonowanie z lewej strony (rysunek 2.30): html > body div#photo-lucas { background: transparent url(lucas-rollover.png) no-repeat top left; height: 124px; left: 185px; position: absolute; width: 160px;

    }

    Tako rzecze Łukasz... Cześć, nazywam się Łukasz. Mam trzy lata I już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi z Polski. Lubię samochody I ciężarówki I autobusy, I pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką I Walijczykami. Moja babcia ma psa o Imieniu Reksio. Jest mały I słodki, I gdy jest zadowolony, to macha ogonem. Gdy dorosnę, chcę być Jak mój wujek, ale z niego gość...

    Rysunek 2.30. Ustawienie pozycjonowania z lewej strony

    93

    Rozdział 2. Blogger.com: efekt rollover i design touches Idealnie. Nie trzeba ustawiać pozycjonowania od góry ponieważ obraz znajduje się tam, gdzie trzeba. Pozostało jeszcze tylko włączyć główny punkt tej prezentacji, czyli efekt rollover, tak jak na rysunku 2.31. Mam nadzieję, że zaczynasz rozumieć, jak łatwy jest ostatni etap: div.box:hover div#photo-lucas { background-position: top right;

    } Tako rzecze Łukasz... CżeSć, nazywam się Łukasz. Mam trzy lata I już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi ż Polski. Lubię samochody I ciężarówki, I autobusy, I pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką I Walijczykami. Moja babcia ma psa o Imieniu Rekslo. Jest mały 1 słodki, I gdy jest zadowolony, to macha ogonem. Gdy dorosnę, chcę być jak mój wujek, ale z niego goić...

    Rysunek 2.31. Włączenie efektu rollover

    Problem Internet

    Explorera

    Przeglądarka Internet Explorer jest tu potraktowana niezbyt przyjaźnie. Nie dość, że nie obsługuje pseudoklasy : hover dla elementów di v, to jeszcze nie radzi sobie z przezroczystymi obrazkami PNG. W konsekwencji zablokowano w niej implementację tych zmian przy użyciu selektora dziecka, o czym pisałem nieco wcześniej. Z pewnością można by zastosować przyjazną dla Internet Explorera 6 dla Windows wersję tej techniki. Można by użyć zwykłego obrazu JPG zamiast PNG (nie udałoby się uzyskać cienia, ale to nie zawsze jest problemem). Dopóki oryginalny obraz znajdowałby się w odnośniku, efekt rollover działałby (do pewnego stopnia). Możesz sobie pomyśleć: „Nie chcę oglądać projektów, które i tak nie działają w Internet Explorerze". Jednak dzięki temu tekstowi powinieneś uświadomić sobie, jakie możliwości oferują dzisiaj najlepsze przeglądarki. Gdy już będziesz wiedzieć, co można osiągnąć, możesz zacząć przerabiać projekty, aż do uzyskania właściwej równowagi między CSS a zgodnością z wieloma przeglądarkami, między chudym kodem XHTML a zmuszeniem witryny do działania na komputerach wszystkich odwiedzających.

    94

    Rozdział 2. Blogger.com: efekt rollover i design touches Spróbuję jednak zmusić ten projekt do działania w Internet Explorerze 6. N a p o n i ż s z y m listingu zostały pogrubione z m i a n y kodu. Wstawiłem obraz w formacie J P G dla przeglądarki Internet Explorer 6 i zastąpiłem go i n n y m dla przeglądarek Firefox, O p e r a i Safari. Jak z w y kle, użyłem w tym celu selektora dziecka. .box { position: relative;

    } div#photo img { left: -5000px; position: absolute;

    } body div#photo-lucas { background: transparent url (lucas-ie.png) no-repeat top left; border: 2px solid #eld4c0; height: 113px; left: 175px; position: absolute; width: 156px;

    } html > body div#photo-lucas { background: transparent url(lucas-rollover.png) no-repeat top left; border: none; height: 124px; left: 185px; position: absolute; width: 160px;

    } div.box:hover div#photo-lucas { background-position: top right;

    } Na rysunku 2.32 przedstawiam n o w y obraz tylko dla przeglądarki Internet Explorer.

    Rysunek 2.32. Plik lucas-ie.jpg, o w y m i a r a c h 156 * 113 piksele

    Jak to wygląda w Internet Explorerze? Zobacz rysunek 2.33.

    95

    Rozdział 2. Blogger.com: efekt rollover i design touches Tako rzecze Łukasz... Cześć, nazywam się Łukasz. Mam trzy lata i już znam dwa języki, ponieważ mój ojciec jest Anglikiem, a mama pochodzi z Polski.

    lubię samochody i ciężarówki, i autobusy, i pociągi, a nawet wszystko, co się rusza. Nie przepadam za brukselką i Walijczykami.

    Moja babcia ma psa o imieniu Rekslo.Jest mały i słodki, i gdy jest zadowolony, to macha ogonem.

    Gdy dorosnę, chcę być jak mój wujek, ale z niego gość...

    Rysunek 2.33. Ukończony produkt w przeglądarce Internet Explorer

    Nie jest źle.

    Podsumowanie W rozdziale tym przedstawiłem efekt rollover polegający na zmianie koloru tekstu i tła oraz zmianie położenia obrazów w tle. Zaznaczyłem, że niekompletna obsługa pseudoklasy : hover przez przeglądarkę Internet Explorer przysparza sporo kłopotów. Po przeczytaniu rozdziału powinieneś znać podstawy, na których opiera się opisywana tu technika, co pozwoli nie kopiować na ślepo przykładów kodu. Jeśli nie uda Ci się zastosować tych technik na stronach Twoich klientów, możesz przynajmniej pomanipulować nimi. Zdziwisz się, jakie to może być proste, oraz jak łatwo można skopiować i wkleić kod, aby od razu działał. W następnym rozdziale poznasz tajniki wewnętrznej implementacji odnoszącej sukcesy i opartej na zdarzeniach witryny mistrzostw PGA.

    96

    Witryna internetowa m i s t r z o s t w PGA Wiem, że coraz lepiej gram w golfa, ponieważ rzadziej trafiam w widzów. — Gerald Ford Mistrzostwa PGA są jednym z najważniejszych wydarzeń sportowych. Odbywające się co roku pod koniec lata mistrzostwa PGA Ameryki są ostatnim ważnym wydarzeniem sezonu golfowego, przybywają na nie najlepsi profesjonalni golfiści oraz miliony fanów z całego świata. Turner Sports Interactive, oddział firmy Time Warner, był odpowiedzialny za rozwój witryny i jej treść podczas mistrzostw. Celem było utworzenie dynamicznej, bogatej i zgodnej ze standardami witryny przy użyciu CSS, łatwo przyswajalnego kodu XHTML oraz dodatków specjalnych w technologii Flash. Z kreatywnego punktu widzenia witryna miała mieć unikalny wygląd, powinna być wyrafinowana, a przede wszystkim należało ustrzec się powielania oklepanych motywów z typowych witryn poświęconych golfowi. Zdecydowano się na paletę słabo nasyconych i neutralnych barw oraz kolory czarny i biały w celu podkreślenia oryginalnych fotografii i skierowania uwagi na zawartość tekstową. Niedługo po zaprezentowaniu w lipcu 2004 roku witryna mistrzostw PGA uzyskała świetne opinie fanów golfa z całego świata i społeczności projektantów sieciowych za unikalny wygląd, trzymanie się standardów oraz ogólny projekt. Liczba odwiedzających wzrosła niebotycznie już pierwszego dnia zawodów, gdy redaktorzy PGA. com zaczęli dostarczać wiadomości, informacje o punktacji oraz treść multimedialną w godzinnych odstępach. Od pojawienia się tej wersji witryny mistrzostw PGA minęło już kilka lat, przewinęło się też kilka różnych wersji tego projektu. Skupimy się jednak na roku 2004. Utworzona wtedy witryna była klasycznym, solidnym projektem z niesamowitymi fotografiami pól golfowych. Osiągnięto to — oczywiście — przy użyciu CSS i XHTML.

    Rozdział 3. Witryna internetowa mistrzostw PGA W rozdziale szczegółowo opiszę niektóre z technik zastosowanych w kilku miejscach oryginalnej wersji tej witryny. Nie zabraknie ogólnych wskazówek i sztuczek CSS i XHTML oraz opisu niektórych pułapek, których należy wystrzegać się we własnych projektach. Oto lista poruszonych tematów. •

    Uzyskanie warstwowego efektu cienia przy użyciu CSS i programu Photoshop.

    •

    Tworzenie za pomocą CSS ultralekkich menu rozwijanych.

    •

    Wstawianie dodatków Flasha bez łamania zasad zgodności ze standardami.

    Efekt cienia Jedną z najbardziej wpadających w oko cech witryny PGA było prawie trójwymiarowe podzielenie treści na warstwy. Efekt był subtelny, ale po dokładnym przyjrzeniu się stronie głównej (urww.pga.com/pgachampionship/2004/index.html) widocznej na rysunku 3.1, można było zauważyć, że lewa kolumna wydaje się unosić nad otaczającą ją treścią. Nie był to tylko wizualny trick. Miało to także inne znaczenie. Lewa kolumna zawierała najnowsze wiadomości z mistrzostw. Wyniesienie tego obszaru nieco do góry (w niezauważalny sposób) sprawiło, że użytkownicy mogli szybko znaleźć miejsce, w którym znajdowały się najświeższe wiadomości.

    The Official Site of The 86th PGA Championship - Mozilla Firefox

    Elk EdycjaftidokHistoria Zakładki Narzędzia Pomoc ( ^jjp * c JJ 1 V http://www.pga.ram/fagadTairpionsh^

    £ 'j a-

    THE 8 6 T H PGA C H A M P ł O N S H I P

    TOP STORY

    Singli wins three-hole playoff for second PGA title

    P6A of Am«rie« Piilito M Tnwhf to tmpion Vlj»y Sii CEM . . Pio Po
    August 15, 2004 — Vijay Singh didn't make a birdie during regulation play Sunday at Whistling Straits, but he made a huge one on the first of three playoff holes to defeat Justin Leonard and Chris DiMarco and win the 6óth PGA Championship. Singh's fifth win of the year and second PGA title gave him three career majors and likely sealed his selection as the PGA Tour Player of the Year, Fuli Story Finał Leaderboard More Headlines

    ING

    INTE*VIEWS

    HEADLINES •No ą u e s t i o n ' PGA will r e t u r n to W h i s t l i n g S t r a i t s flHtigpB August i?, 200-: — PGA of America chief executive officerjim j j g g ^ Awtrey said Sunday that he and Whistling Straits owner Herb Kohler 3r. are in talks to bring the PGA Championship back to the links-style course, adding that "someday there will be a Ryder Cup here." Fuli Story S u t t o n f a c e s tough decisions before Monday a n n o u n c e m e n t

    Zakończono

    Du're up! • -Q*t breaking ni

    Rysunek 3.1. Strona główna mistrzostw PGA

    98

    Rozdział 3. Witryna internetowa mistrzostw PGA Lewa kolumna nie mogła być po prostu wyższa od sąsiednich, ale musiała częściowo zasłaniać treść, dzięki czemu wydawało się, że rzeczywiście się unosi nad stroną. Technikę tę zastosowano przy tworzeniu nagłówka Top Story w górnej części lewej kolumny. Ponieważ sprawiał wrażenie, jakby był złączony z kolumną i rzucał początkowy fragment cienia biegnącego w dół strony, wyglądał tak, jakby był utworzony w XHTML i unosił się nad filmem Flasha, ale to była tylko iluzja. Efekt końcowy może wydawał się skomplikowany i wymagający dużej szybkości łączy, ale w rzeczywistości zajmował niewiele bajtów i kodu oraz można go było w miarę szybko utworzyć przy odrobinie zaawansowanego planowania. W rozdziale opisuję ten efekt uzyskany przy użyciu programu Photoshop, technologii Flash oraz CSS i XHTML.

    Tworzenie iluzji Zanim przejdę do szczegółów, cofnę się na chwilę i jeszcze raz przedstawię cel — należy wizualnie scalić film Flasha umieszczony na górze strony ze znajdującą się pod nim treścią oraz stworzyć wrażenie, że lewa kolumna znajduje się na warstwie leżącej nad otaczającą ją treścią, poprzez utworzenie cienia biegnącego w dół. Trudność polega na tym, że efekt byłby zrujnowany, jeśli film Flasha lub elementy XHTML przesunęłyby się choćby o jeden piksel. Jednak precyzja CSS i XHTML sprawiła, że dało się to zrobić. Filmy we Flashu, jak każdy wstawiany element, są prostokątne. Obiekty Flasha nie mogą mieć nieregularnych kształtów. Aby obejść te ograniczenia i utworzyć iluzję warstw, część lewej kolumny została przedstawiona w obiekcie Flasha. Film ten został wypozyq'onowany z dokładnością do jednego piksela w taki sposób, że po dodaniu kodu XHTML obie części pasowały do siebie jak ulał, tworząc iluzję. Najpierw w programie Photoshop powstał nowy dokument, który został wypełniony kolorem użytym w filmie Flasha i kolumnie biegnącej w dół strony. Utworzono też nową warstwę o nazwie bar. Następnie zaznaczono obszar o takiej samej szerokości jak lewa kolumna (przy użyciu narzędzia prostokątnego zaznaczania) i wypełniono go wybranym kolorem. Efekt cienia został zastosowany do warstwy bar, a sam cień został tak opracowany, aby nie był zbyt ciężki, ale na tyle widoczny, by stwarzać złudzenie oddzielenia od reszty treści. Po ukończeniu dokument wyglądał tak, jak na rysunku 3.2. nr) o

    r\ |2ó t

    9 shadow.psd @ 200% (background, RGB/8) . . lc? |8? | [lBo, liga lifó, |iso i [i8i j pa^

    pźtr |a4ai

    LŁ|»K ChinMii H Oparty [lOMi H lock: P i ^ l a ] MII: [mm M

    •

    bar

    •

    Effecis

    jjjj^ Drop Shadow

    l

    background

    Doc: 2S37W9S8 2K

    -i i c . a i c

    Rysunek 3.2. Dokument Photoshopa powiększony dwukrotnie, aby lepiej było widać cień

    99

    Rozdział 3. Witryna internetowa mistrzostw PGA Gdy cień był już dobry wyłączono warstwę w tle i za pomocą narzędzia prostokątnego zaznaczania zaznaczono sam cień (rysunek 3.3). Skopiowano go do schowka i utworzono nowy dokument Photoshopa z przezroczystym tłem, do którego wklejono cień. Powstałą grafikę zapisano w formacie PNG i umieszczono w filmie Flasha (w którym znajdowała się już wektorowa figura o tej samej szerokości i wysokości).

    Lay*rf

    Chinntlf

    Normal

    P U W I

    :

    1

    Opadły 1 0 0 *

    0

    Fili. 1100%

    200*

    Rysunek 3.3. Zaznaczenie obszaru cienia

    Możesz 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 oferujący 256 poziomów przezroczystości. Dzięki temu można eksportować szczegółowe grafiki z edytorów map bitowych (Photoshop, Fireworks itp.), importować je do Flasha i publikować filmy zachowujące ich przezroczyste obszary przy jednoczesnym zastosowaniu stratnej kompresji JPEG. Jest to połączenie najlepszych cech — wizualna jakość formatu PNG i niewielkie rozmiary formatu JPEG. Flash przestał już być potrzebny, teraz należało powielić cień przy użyciu CSS i XHTML. Aby cień nie biegł do samego dołu strony, trzeba było zbudować dla niego osobną sekcję. To wymagało utworzenia grafiki, która nie tworzyła żadnych dziur, przerw oraz innych anomalii i można było powtarzać ją w pionie. W związku z tym zaznaczono obszar o wysokości jednego piksela (rysunek 3.4) i odpowiedniej szerokości, aby zahaczyć także kawałek tła. Po skopiowaniu tego obszaru utworzono nowy dokument (którego rozmiary zostały automatycznie odpowiednio ustawione przez Photoshop) i wklejono do niego skopiowany fragment (rysunek 3.5).

    100

    Rozdział 3. Witryna internetowa mistrzostw PGA champ_flash_window.png @ 500% (RGB/8)

    Rysunek 3.4. Przy użyciu narzędzia zaznaczania prostokątnego zaznaczono powtarzalny obszar o wysokości jednego piksela i szerokości pozwalającej zahaczyć kawałek tła

    G O © * 2 U n t i t l e d - l @ 160096 (La "FTTT T T T T T 7 F T T 7

    Rysunek 3.5. Zawartość schowka wklejona do nowego dokumentu i powiększona, aby ukazać szczegóły

    W ten sposób poradzono sobie z cieniem, ale jeszcze brakowało jaśniejszego tła pod lewą kolumną. W tym celu zwiększono rozmiar cienia obrazu na odpowiednią szerokość, a sam cień wyrównano do prawej. Jak widać na rysunku 3.6, przezroczysty obszar został wypełniony kolorem, a całość zapisano jako obraz GIF.

    l?ą |.nri

    *2Untitled-l @ 1600% (Layer 1, RCB/8) |434 |436 [438 |440 |44g [444 |ł-is |450 145Ż |4 54 |4-sa |46D |46? |4<4 ftf.f, |4C8 p76

    nin l

    n<

    >] f

    f

    ł« »

    Rysunek 3.6. Ostateczny obraz tła zawierający tło lewej kolumny i cień

    101

    Rozdział 3. Witryna internetowa mistrzostw PGA Zatrzymam się na chwilę i dodam kilka słów na temat formatów plików. Czemu tutaj został użyty GIF zamiast PNG? Powodem jest niesławna przeglądarka Internet Explorer i jej słaba obsługa formatu PNG. Prawie osiem lat temu Microsoft rozgłaszał w białej księdze, że Internet Explorer 4.0 będzie „natywnie obsługiwać" ten format, w przeciwieństwie do „innych przeglądarek, które dodają obsługę formatu PNG jako osobny dodatek". Obietnic tych jednak nie spełniono, co więcej, musiało upłynąć ponad dziewięć lat — do pojawienia się Internet Explorera 7 — aby firma to zrobiła. Mimo że Internet Explorer 7 obsługuje już PNG, Internet Explorer 6 ma nadal bardzo wielu użytkowników, a więc w tym projekcie nie można było ich pominąć. Na razie rozwiązanie przy użyciu obrazu GIF odpowiada większości przeglądarek oraz pozwala użyć bezstratnej kompresji idealnej dla obrazów niebędących zdjęciami. Przyjrzyjmy się teraz kodowi CSS. W arkuszu stylów został utworzony kontener przy użyciu elementu di v — niewidocznego bloku stanowiącego zewnętrzną ramkę służącą do pozycjonowania grup treści (czyli w tym przypadku lewej i prawej kolumny). Gdy zwiększała się ilość treści w kolumnach, otaczający je element odpowiednio powiększał swoje rozmiary. Dlatego właśnie tło zostało nadane kontenerowi, a nie samym kolumnom — wówczas obraz byłby powtarzany bez względu na ilość wewnętrznej treści. Załatwiono to przy użyciu poniższej reguły CSS: #colwrap { width:740px; background: #%968C url(http://i.pga.com/pga/images/pgachampionship/img/bg_home_content.gif) }

    repeat-y;

    Najpierw ustawiono szerokość tego elementu, potem zdefiniowano atrybuty tła (najważniejszego w tym miejscu). Został ustawiony kolor taki sam jak filmu Flasha i prawej kolumny, podano adres URL wymaganego obrazu oraz poinstruowano przeglądarkę, żeby powtarzała ten obraz pionowo (repeat-y) przez całą długość elementu div. Gdyby nie własność repeat-y, przeglądarka domyślnie powtórzyłaby obraz nie tylko w pionie, ale i w poziomie. To spowodowałoby, że lewa krawędź grafiki pojawiłaby się ponownie obok cienia. Oczywiście, to nie byłoby dobre dla projektu, dlatego postanowiono użyć własności repeat-y, aby powtórzyć obraz tyko w pionie. Gdyby potrzebne było powtarzanie tylko w poziomie, należałoby skorzystać z własności repeat-x. Ponieważ CSS pozwala na zastosowanie zarówno koloru, jak i obrazu do jednego elementu, można oszczędzić kilka bajtów poprzez wypełnienie obszarów jednolitego koloru przy użyciu CSS. Dlatego właśnie obraz tła kontenera został przycięty zaraz za cieniem. Resztę tła (ciemnoszary obszar, w który przechodzi cień) narysowała przeglądarka przy użyciu wyznaczonego koloru. Mimo że metoda ta nie była konieczna (całość można było umieścić na obrazku GIF), pozwoliła zaoszczędzić kilka bajtów. A wiadomo, że każdy bajt się przyda. Ukończony element di v wyglądał tak, jak na rysunku 3.7. Po ukończeniu tła elementu di v umieszczono nad nim film Flasha, który doskonale do niego pasował (rysunek 3.8).

    102

    Rozdział 3. Witryna internetowa mistrzostw PGA r s f> r\

    PCA Championshlp (3

    z '

    A

    ;

    C | I +

    !

    ? file:///dropshadow.html

    Szerokość 475px, wysokość 1 px (grafika powtarzana pionowo)

    Hf^Coo^lr

    $

    Jednolity kolor -#96968C (rysowany przez przeglądarkę)

    Rysunek 3.7. Kontener div z grafiką w tle widziany w przeglądarce. Zostały dodane wskazówki informujące, który obszar jest zajmowany przez obraz, a który został narysowany przez przeglądarkę n n n

    n ^ f r i G - r

    PCA Championship

    A

    | O ||+

    * file:///dropshadov».html

    Google

    Ij&l

    A Animacja Flash PIERWSZY ARTYKUŁ

    w

    Rysunek 3.8. Film Flasha umieszczony nad kontenerem z rysunku 3.7

    Zanim przejdę dalej, podam jedną wskazówkę. Zawczasu upewnij się, że projekt jest na stałe przymocowany do swojego miejsca, najlepiej przy użyciu siatki elementów ustawionych z dokładnością do jednego piksela. Uzyskanie takiego efektu wymaga, by z góry znać ułożenie treści na stronie. Jeśli spróbujesz wyprzedzić czas i zastosować takie efekty do jeszcze nieustalonego układu, będziesz musiał więcej niż raz zaczynać wszystko od początku. Efekt, taki jak ten, potraktuj jak dopieszczanie projektu. Odrobina cierpliwości i planowania pozwoli uniknąć problemów i zaoszczędzi dużo czasu.

    Dodanie realizmu To jest dobre miejsce na podanie dodatkowej wskazówki, która umożliwi dodanie większego realizmu do efektu cienia. W realnym świecie (tym poza monitorem) przezroczystość cienia jest zależna od powierzchni, na jaką pada. Jeśli jest biała, cień jest jasnoszary. Jeśli jest ciemna, cień wydaje się dużo ciemniejszy. To wszystko jest oczywiste, ale w płaskim świecie ekranów monitorów nie jest takie proste.

    103

    Rozdział 3. Witryna internetowa mistrzostw PGA Na witrynie PGA posunięto się nieco dalej i ustawiono różne kolory cienia, zależne od tego, z jakim kolorem tła oddziaływał. Większość treści w prawej kolumnie miała przezroczyste tło, a więc korzystała z koloru zdefiniowanego pod spodem, ale odnośniki do wiadomości sprawiały problemy. Użytkownikom trudno było je odróżnić. W związku z tym, tło co drugiego elementu wiadomości było przyciemnione (jak wiersze w tabeli) i zmieniano odcień cienia, jeśli było trzeba. W tym celu ponownie otwarto oryginalny dokument Photoshopa i zmieniono kolor na nieco ciemniejszy (#828279), który dobrze współgrał z resztą układu. Zaznaczono obszar o wysokości jednego piksela (tak jak poprzednio) i skopiowano ten obszar do nowego dokumentu. Grafika wyglądała bardzo podobnie do poprzedniej, tylko była nieco ciemniejsza (rysunek 3.9).

    2

    .

    .

    champ_flash_wmdow p . rtg @ 1600% (Layer 1, R.. I2 . I4. I€ i I8 . I10. W. 1". K I". K

    r S-

    UHHHMf HPm

    r r

    1600%

    Doc: 57 byt«ffl5r bytf

    •]

    Rysunek 3.9. Cień z nieco ciemniejszym tłem zaznaczony narzędziem do prostokątnego zaznaczania

    W kodzie XHTML utworzono listę nieuporządkowaną. Z semantycznego punktu widzenia elementy listy doskonale nadają się do oznaczania danych, takich jak paski nawigacyjne (o czym przekonasz się nieco dalej). W połączeniu z CSS można przy ich użyciu uzyskać wiele efektów wizualnych. W prawej kolumnie szablonu XHTML została utworzona poniższa lista elementów wiadomości:
    • DiMarco and Riley play their way into Ryder Cup
    • 'No question' PGA will return to Whistling Straits
    • Sullivan lowest club professional at PGA sińce 1969
    • PGA of America adjusts Sunday yardages at Whistling Straits
    Następnie 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 nieuporządkowanej. Dzięki temu zostały wyzerowane domyślne własności, które przeglądarka zastosowałaby wobec tego elementu. Ustawiono margines i dopełnienie na zero oraz zdefiniowano kolor tekstu w całej liście. Z technicznego punktu widzenia, można było opuścić element ul w selektorze i zostawić samą klasę. Mimo że przypisywanie klas bezpośrednio do elementów HTML nie jest najlepszym sposobem projektowania, tak napisane arkusze stylów znacznie łatwiej się czyta. Traktuj te elementy jak komentarze pozwalające szybko się zorientować, jakie jest przeznaczenie danego selektora po kilku miesiącach, gdy trzeba wprowadzić jakieś poprawki lub nad stroną pracuje więcej niż jedna osoba. Dobra organizacja na początku skutkuje oszczędnością czasu w przyszłości. Po sformatowaniu samego elementu ul przyszedł czas na zajęcie się elementami wewnątrz listy: ul.stories 1 i { list-style:none; margin-bottom:2px; padding:4px 4px 4px 10px;

    } Przeanalizuję ten kod wiersz po wierszu. Najpierw własność 1 i st-styl e została ustawiona na none, co spowodowało zniknięcie domyślnych okrągłych punktorów. Następnie dodano niewielki margines dolny, aby odsunąć od siebie elementy listy w pionie, oraz dopełnienie (4 piksele od góry, prawej i dołu oraz 10 z lewej strony). Domyślnie wartości te zostały zastosowane do każdego elementu listy nieuporządkowanej należącej do klasy stories. Na tym etapie wszystkie miały takie samo tło (prześwitujące spod spodu), ale poniższa reguła odpowiada za dodatkowy efekt: ul .stories 1 i.odd { background:#828279 url(http://i.pga.com/pga/images/pgachampionship/img/bg_stories_shadow.gif) repeat-y; } Dzięki pięknu dziedziczenia klasa odd nie musiała już implementować wszystkich wcześniejszych własności, a tylko tę, która była potrzebna — tło. Zostało zastosowane ciemniejsze tło i podano adres URL drugiego obrazu tła oraz poinstruowano przeglądarkę, aby powtórzyła obraz tylko w pionie. Kod listy nieuporządkowanej został dodany do dokumentu XHTML i klasa odd została zastosowana (ręcznie, chociaż można było to zrobić przy użyciu JavaScriptu lub języka PHP itp.) do co drugiego elementu listy:
    • DiMarco and Riley play their way into Ryder Cup
    • 'No question' PGA will return to Whistling Straits
    • Sullivan lowest club professional at PGA sińce 1969
    • PGA of America adjusts Sunday yardages at Whistling Straits


    105

    Rozdział 3. Witryna internetowa mistrzostw PGA Wydaje się, że powyższa lista nieuporządkowana jest częścią prawej kolumny umieszczoną pod cieniem głównego obszaru treści, ale w rzeczywistości znajduje się nad utworzonym wcześniej tłem (rysunek 3.10). Sztuczka polega na umieszczeniu prawej kolumny (zawierającej listę nieuporządkowaną) bezpośrednio nad prawą krawędzią lewej kolumny. To tworzy złudzenie, że ciemniejsze tło elementów listy jest częścią cienia, podczas gdy w rzeczywistości znajduje się nad nim. "^'O-Ty

    PGA Championship

    *^ O f

    | ! (3 ] l a ? H C ] I + 1 0hle:///dropsh4dow.html Zawartość lewej kolumny

    i

    DiMa-cc and Rlley play ttwslr way Into Ryder Cup ' 'Mo questlon" PGA will return to Whistling Straits Sul!ivan lowest club professional at PGA •ince 1969 PGA of AmeriCfł a d j u s t s Sunday yardages at

    Whtólinfl StraiU

    1

    |

    Rysunek 3.10. Elementy listy z ciemniejszym tłem 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 wygląda następująco:
    • DiMarco and Riley play their way into Ryder Cup
    • 'No question' PGA will return to Whistling Straits
    • Sullivan lowest club professional at PGA sińce 1969
    • PGA of America adjusts Sunday yardages at Whistling Straits


    Dodatkowy efekt cienia został ukończony.

    106

    Rozdział 3. Witryna internetowa mistrzostw PGA Jeśli miałbyś zapamiętać tylko jedną rzecz, pamiętaj o tym, że — wykorzystując zdolność przeglądarki do automatycznego powtarzania obrazów tła i jednoczesnego stosowania koloru tła tego samego elementu — wizualną głębię do płaskiego i statycznego projektu można dodawać na wiele sposobów. Wymaga to tylko nieco cierpliwości, planowania i poeksperymentowania.

    Tworzenie w CSS menu rozwijanych Pod koniec lat 90. ubiegłego wieku, w najlepszych czasach dotcomów znakiem rozpoznawczym wyrafinowanej, utworzonej przy użyciu najnowocześniejszych technik witryny było rozwijane menu nawigacyjne. Menu takie prezentowały się bardzo atrakcyjnie, ale za nimi stało mnóstwo kodu JavaScript, rozdętego HTML, a nawet elementów działających tylko w konkretnych przeglądarkach. Zamiast podnosić komfort użytkownika wiele wczesnych menu rozwijanych tylko go pogarszało (szczególnie wtedy, gdy nie chciały działać), a na dodatek niepotrzebnie rozdymało objętość kodu. Wówczas pojawiły się CSS i magiczny selektor pseudoklasy : hover. Guru CSS, tacy jak Erie Meyer i Christopher Schmitt, publikowali kursy uczące, jak wykorzystywać możliwości nowej funkcji. Stosując ją w połączeniu ze zwykłymi listami, można było uzyskać menu rozwijane podobne do tworzonych przy użyciu JavaScriptu, ale dużo lżejsze i mniej skomplikowane. Było jednak jedno „ale": Internet Explorer dla Windows. Zdecydowanie najpopularniejsza przeglądarka internetowa nie obsługiwała w pełni pseudoklasy :hover (ani CSS, ale to już inna historia), przez co nie radziła sobie z menu rozwijanymi w CSS. Menu te stały się co najwyżej zajęciem dla hobbystów. Zmiany zaczęły się w 2003 roku, kiedy Patrick Griffiths i Dan Webb postawili społeczność CSS na głowie swoim skryptem Suckerfish Dropdowns (www.alistapart.com/articles/dropdowns). Był to lekki, zbudowany przy użyciu CSS system menu rozwijanych, który działał w prawie każdej przeglądarce, włącznie z Internet Explorerem dla Windows. Suckerfish był rewelacją nie tylko pod względem objętości, lecz także zgodności z przeglądarkami, standardami; był bogaty semantycznie oraz szeroko dostępny. Dodatkowo menu te były niezwykle łatwe do zbudowania. Każdy, kto potrafił utworzyć listę nieuporządkowaną w XHTML, miał ułatwione zadanie. Wszystkie właściwości prezentacyjne i funkcjonalne były kontrolowane przez niewielki zestaw reguł stylistycznych. Kilka miesięcy później Griffiths i Webb zaktualizowali swój produkt, nazywając go Son of Suckerfish. Była to jeszcze lżejsza i lepiej współpracująca z przeglądarkami wersja poprzedniego skryptu, umożliwiająca tworzenie wielopoziomowych menu. W witrynie PGA użyto właśnie drugiej wersji, ale nie będę tu zgłębiać podstawowych szczegółów (przykłady można pobrać ze strony www.htmldog.com/articles/suckerfish). Opiszę natomiast, jakich dokonano przeróbek, omówię potencjalne pułapki oraz podam ogólne wskazówki dotyczące użytkowania 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. Domyślnie zagnieżdżone wysuwane menu pokazywały się bezpośrednio pod swoim elementem rodzicem, w zależności od wysokości grafiki lub tekstu, które się w nim znajdowały. W witrynie PGA grafiki rodziców były krótsze niż otaczający je obszar (aby zmniejszyć wagę plików). W związku z tym, menu rozwijane, zamiast pojawiać się pod białym paskiem nawigacyjnym (tak jak w ostatecznej wersji), pojawiały się pod odnośnikami graficznymi. Łącza graficzne można było edytować z dodatkową pustą przestrzenią na dole, aby przenieść menu rozwijane do pożądanej lokalizacji, ale to spowodowałoby zwiększenie rozmiaru plików i powstanie łączy w miejscach, w których nic nie widać. Wyzwanie zatem polegało na tym, aby zepchnąć menu rozwijane pod biały pasek nawigacyjny, nie naruszając istniejącej treści. Pierwszy krok był łatwy. Każda zagnieżdżona nieuporządkowana lista (menu rozwijane) była pozycjonowana bezwzględnie, a więc przeniesiono je niżej przy użyciu własności top: #nav li ul { position:absolute; left:-999em; top:20px;

    } W ten sposób przesunięto każde menu rozwijane o 20 pikseli poniżej jego rodzica, a zatem pod biały pasek nawigacyjny. Pojawił się jednak nowy problem. Obszar między głównymi odnośnikami a menu rozwijanymi (ten sam, który nie powinien być odnośnikiem) wyłączał efekt rollover, gdy kursor przesuwał się w dół. Zatem kolejnym krokiem było podtrzymanie widoczności menu rozwijanych, gdy kursor wchodził na ten pusty obszar. Domyślnie wysokość elementu listy jest zdeterminowana przez jego treść. Można to jednak zmienić za pomocą CSS: #nav li { position:relative; float:1eft; margin:0 15px 0 0; paddi ng:0; width:auto; height:20px;

    } Najważniejsza w tym kodzie jest własność height. Jej zdefiniowanie sprawiło, że przesłonięto domyślne, wspomniane wcześniej zachowanie elementów listy i niewidoczny blok każdego z nich rozciągnął się, zapełniając lukę. Teraz elementy listy zachowują się tak, jakby zawierały obrazy o wysokości 20 pikseli, ale w rzeczywistości są znacznie krótsze. Jednak przeglądarki nie widzą różnicy, dzięki czemu menu działają zgodnie z oczekiwaniami.

    108

    Rozdział 3. Witryna internetowa mistrzostw PGA Aby zobaczyć efekt, spójrz na rysunek 3.11. Za pomocą dostępnego bezpłatnie rozszerzenia Web Developer (którego autorem jest Chris Pederick — http://chrispederick.com/work/ *+web-developer) dla Firefoksa sprawiłem, że niewidoczne bloki elementów listy stały się widzialne. Stanowi to wizualne potwierdzenie dokonanych zmian i pozwala zobaczyć, co w rzeczywistości wyświetla przeglądarka. Dodatek ten przydał się wiele razy podczas pracy nad witryną PGA i polecam go każdemu, kto zajmuje się tworzeniem stron internetowych. O H O

    The Offkial Site of The 86th PGA Championship

    C^a*

    Jg^

    ^llf

    9 h«qD:/Awiw.pga.corn/p9acharnpłorsliip/2004/

    o \

    • © '

    t *

    fśdĘ&i THE 8 6 T H PGA C H A M P I O N S H I P < August 2eo4 Whistling StraHs Kohler, Wiśconsin USA

    S J H E K E S j J * COURMTOUR

    f«ME 1

    2

    I

    4

    S

    NEWS 4»

    7

    t

    j>CCJRlM* 8

    9

    fDffEIGSj 10

    Z*

    H

    4

    f¥TEflriRFq

    12

    13

    OlRTY

    -....,,. "-'SSS*-

    '*'

    14

    IS

    pOORSE 16

    BlSTDFf;

    WCOHMEUIS

    17

    18

    CŁOSŁTOUR

    ^

    W

    t

    mti ovrs narration: "rwt nintm HCH.E IS "DOWN ANO OIRTY.A COOO .,„• U l i. THI5, B«IVE VOU'U H*VE A /; • aooo cmamci to lłt it <*o causs ***** - i ^Mjlpi^W^M^^^H IT NflU. HIT THE V ALLE*. IT KI ND OF H „ ^ S ^ j j ^ E f MOLO& irtOStTHtR.SOlf VOU MISS i i ITAUTTLERIGHTORAUTTLELEFT, f THE KALL HAS A SOOO CHAMCE OF | lOUNClNu BA CK INTO THC CAIRWAV. YOURSCCOND SMOT S P fMOJGM. Bt Vtfl
    Ę

    ^

    f

    jSTOKE

    ^

    •

    T O P STORY

    * ..

    __ "*.

    J ^ Ę

    A T

    S i n g h w i n s t h r e e - h o l e p l a y o f f f o r s e c o n d P G A title /

    —-

    '

    -

    *

    Rysunek 3.11. Strona PGA w Firefoksie z włączonym obramowaniem elementów listy i obrazów przy użyciu dodatku Web Developer

    Dostrajanie: stylizacja menu rozwijanych Po zmuszeniu menu rozwijanych do prawidłowego funkq'onowania i pojawiania się we właściwym miejscu nadszedł czas na modyfikację wyglądu ich opcji. Najpierw kolor tła zagnieżdżonych list nieuporządkowanych ustawiono na biały oraz nadano im jednakową szerokość (równą najdłuższemu 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 krawędź każdego menu rozwijanego jest wyróv- >ina z lewą krawędzią zawierającego je elementu listy, a opcje nie są wystarczająco oddzielone. The Official Site of The 86th PGA Championship http://www.pgd.coni/pgachampionship/2004/

    0 . - Google

    THE 86TH PGA CHAMPIONSHIP Augml 9.1;. 2004 - Whistling Slraln Kolii*!. Wiconsln USA HOME

    NEWS

    SCORING

    PLAYERS /EVENT INK) mclcets

    COURSE

    HISTORY

    MULTIMEDIA

    STORĘ

    "

    |Spectator's Guide |Cofflmuhitv D a y s lAccommod^tlons ITrafflc Iflfo

    '*k Info 12003 PGA c K ł m p i o n s h i p

    Rysunek 3.12. Źle wyrównane menu z mdło wyglądającymi opcjami

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

    } Ponieważ szerokość każdego zagnieżdżonego elementu listy została ustawiona na 100%, rozszerza się on na całą szerokość swojego elementu nadrzędnego — który w tym przypadku ma szerokość 146 pikseli. Jeśli domyślna szerokość elementów listy nie jest zmieniona, przeglądarka rysuje dolną krawędź tylko na szerokość treści. Ustawienie jej na 100% nadaje opcjom jednolity wygląd, bez względu na treść. Następnie zajęto się zawartością 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 można było kontrolować pozycję każdego bloku tekstu, opcje zostały opakowane w znacznik span, który pozwala uniknąć używania kolejnej klasy i lepiej nadaje się z semantycznego punktu widzenia niż di v, p lub jakikolwiek inny. A więc własność di spl ay elementu span została zmieniona na bl ock (domyślnie jest i nl i ne). Dzięki temu można definiować atrybuty bloków, takie jak margi n i paddi ng. Po odpowiednim zdefiniowaniu dopełnienia menu wygląda tak, jak na rysunku 3.13.

    ^

    0

    The Official Site of The 86th PGA Championship V http://vvww.pqa.com/pqachampionship/2004/

    " ' O . - Google

    i ^ ^ t THE 86TH PGA CHAMPIONSHIP IMĘł^łT

    i) 1 5 . 2 C 0 4 tołllłt.

    ©

    { { J S K ^

    Wronim

    Whiitlmg StrslH USA

    HOME

    NEWS

    SCORING

    Rysunek 3.13. Opcje menu rozwijanego po sformatowaniu, ale niewyrównane z lewym marginesem głównych odnośników nawigacyjnych

    Menu wyglądają na ukończone, ale do zrobienia pozostała jeszcze jedna rzecz. Opcje tekstowe nie są wyrównane z lewą krawędzią swoich elementów nadrzędnych. Mimo że nie trzeba tego zmieniać, zdecydowano, że będą lepiej wyglądały, jeśli zostaną przesunięte nieco w lewo. Na szczęście, wystarczy tylko przesunąć każdą listę nieuporządkowaną w lewo: #nav li ul { margin:0 O O -8px; padding:0; position:absolute; left:-999em; top:20px; background:#fff; width:146px;

    } Dobrze, że można używać ujemnych wartości! Zmiana lewego marginesu na -8 (kolejność wartości marginesów to góra, prawa, dół, lewa) spowodowała przeniesienie nieuporządkowanej listy o osiem pikseli w lewo (gdyby wartość była dodatnia, przeniesienie byłoby w prawo). Dzięki temu lewa krawędź każdej opcji tekstowej wyrównuje się ze swoim nadrzędnym elementem tak, jak na rysunku 3.14.

    111

    Rozdział 3. Witryna internetowa mistrzostw PGA o n o

    The Official Site of The 86th PGA Championship +

    9 http://www.pga.com/pgachamplon5hip/2004/

    • M M M M M I

    •"^•''•'Jij

    ^ S C Za ®

    •

    THE 8 6 T H P G A C H A M P I O N S H I P l f f l Ł T AugoM 2004 WhistWng StialH tS^SpT KoMm. WiscMstil USA PSA

    HOME

    NEWS

    SCORING

    PLAYERS

    EVENTINFO

    COURSE

    H1STORY

    MULTIMEDIA

    STORĘ

    Rysunek 3.14. Ukończone menu rozwijane

    Uwaga na pułapkę Po zapoznaniu się z technikami modyfikowania oryginalnego kodu źródłowego przyszedł czas na ostrzeżenie przed potencjalnym problemem, który może pojawić się podczas używania skryptu Suckerfish. Wymaga on włączonego ]avaScriptu w Internet Explorerze dla Windows. Zalicz to do zestawu nieudolnych implementacji CSS w tej przeglądarce. W przeglądarkach Mozilla, Firefox i Safari skrypt ten działa wyłącznie przy użyciu CSS, ale w Internet Explorerze do działania wymaga JavaScriptu. Hack ten jest niewielki i naprawia brak obsługi pseudoklasy : hover, dodając niestandardowe zachowania do obiektowego modelu dokumentu (DOM). W tym leży sedno problemu. Jeśli użytkownik Internet Explorera wyłączy JavaScript, menu w ogóle się nie pojawi. Mimo że bardzo mało osób tak postępuje, trzeba to brać pod uwagę.

    Użyteczność menu

    rozwijanych

    Problem zgodności z przeglądarkami został rozwiązany, zatem poniżej przedstawiam kilka wskazówek dotyczących wdrażania menu rozwijanych na własnych stronach.

    112

    •

    Wskazówka 1. Zagwarantuj wyjście awaryjne. Ze względu na opisane wcześniej problemy ze zgodnością, należy bezwzględnie wyposażyć stronę w dodatkowy system nawigacji, na wypadek gdyby główny nie zadziałał. Inaczej odwiedzający nie będą mogli poruszać się po witrynie. Powinna to być standardowa procedura podczas używania każdego rodzaju nawigacji opartej na menu rozwijanych, nie tylko Suckerfish.

    •

    Wskazówka 2. Uważaj na Internet Explorera, Suckerfisha i Flasha. Przeglądarka Internet Explorer dla Windows, napotykając film Flasha, przenosi go na sam wierzch stosu warstw. Oznacza to, że menu mogą znaleźć się pod filmem, co uniemożliwi użytkownikom klikanie jego elementów. Rozwiązaniem jest użycie parametru wmode (szczegółowe informacje na ten temat znajdują się na stronie www.macromedia.com/ ^•support/flashltsldocumentslflash_top_layer.htm).

    •

    Wskazówka 3. Jeśli dokument zawiera warstwy, używaj własności z-index. Jeżeli strona zawiera obiekty na warstwach z własnością z-index, nawigacja Suckerfish również musi ją mieć, ale ustawioną na poziom wyższy niż wszystkie pozostałe.

    Rozdział 3. Witryna internetowa mistrzostw PGA Własność tę można zastosować wobec nadrzędnej listy nieuporządkowanej lub (tak zrobiono na stronie PGA) można nawigację wstawić do elementu di v i własność z-i ndex zastosować do niego. Wtedy nawigacja będzie znajdowała się nad wszystkim i po rozwinięciu menu zawsze będzie na wierzchu.

    Końcowe uwagi Skoro jest tyle problemów, po co w ogóle używać nawigacji Suckerfish? Odpowiedź jest prosta. Poza opisanymi niedogodnościami, Suckerfish jest jednak najlepiej dostępnym, działającym we wszystkich przeglądarkach rozwiązaniem. Ponadto zajmuje znacznie mniej bajtów niż jakiekolwiek inne konkurencyjne rozwiązanie oraz jest łatwiejszy w utrzymaniu i modyfikacji. Jeśli implementujesz menu w witrynie z dużym ruchem (witryna PGA np. odnotowywała miliony odwiedzin na godzinę), zastosowanie lekkiego wariantu jest optymalnym rozwiązaniem.

    Wstawianie filmów Flasha w zgodzie ze standardami Jednym z najczęstszych problemów nękających twórców stron internetowych dbających o zgodność ze standardami jest wstawianie animacji Flasha. Większość z nich kopiuje i wkleja standardowy kod wygenerowany przez Flash. Ponieważ jednak jest on najeżony różnymi niestandardowymi atrybutami i elementami, obraca wniwecz zgodność dokumentu ze standardami sieciowymi. Znacznik embed nie należy do żadnej specyfikacji W3C. Na szczęście, można te problemy obejść. Poniżej przedstawiam trzy najpopularniejsze obecnie rozwiązania problemu zgodności ze standardami podczas wstawiania treści Flasha na strony internetowe.

    Metoda Flash Satay Metoda Flash Satay (www.alistnpnrt.com/articles/flashsatay) usuwa znacznik embed i niektóre niepotrzebne atrybuty znacznika object. Działa doskonale, ale ma jedną dużą wadę: w przeglądarce Internet Explorer dla Windows animacje Flasha zaczynają działać dopiero po załadowaniu całego filmu. Metoda Satay oferuje rozwiązanie tego problemu, polegające na oszukiwaniu Internet Explorera poprzez dodanie pustego filmu kontenera z takimi samymi parametrami (szerokość, wysokość itd.) jak prawdziwy i załadowanie pożądanej treści za pomocą tego filmu zastępczego. Internet Explorer wówczas z powodzeniem odtwarza animację strumieniowo, a kod XHTML jest poprawny. Koszt to konieczność tworzenia dodatkowych pustych filmów i katalogów.

    Wpisywanie znaczników object i embed przy użyciu JavaScriptu Metoda ta polega na pozostawieniu bez zmian elementów object i embed, ale przeniesieniu ich do zewnętrznego pliku JavaScript. Treść Flasha jest wówczas zapisywana w dokumencie za pomocą serii metod JavaScript document .wri te. Walidatory (świetny jest walidator W3C — http://validator.w3.org) widzą tylko poprawny element JavaScript — a nie znajdujące się w nim elementy object i embed, dzięki czemu wyniki walidacji są pozytywne.

    113

    Rozdział 3. Witryna internetowa mistrzostw PGA To rozwiązanie zastosowano w witrynie PGA. Nie tylko kod XHTML pozostał poprawny lecz również dzięki użyciu JavaScriptu można było sprawdzić obecność wtyczek w przeglądarce, na wypadek gdyby trzeba było załadować alternatywną treść. Po utworzeniu pliku JavaScript (zbyt długi, aby go tutaj drukować — http://www.pga.com/ +pgachampionship/2004/js/flash_home.js) należy go dołączyć do strony w następujący sposób: Metoda nie jest idealna. Po pierwsze, puryści powiedzą, że plik JavaScript jest w rzeczywistości koniem trojańskim przemycającym nieprawidłowy i nieobsługiwany kod XHTML w tajemnicy przed walidatorami (tak rzeczywiście jest). Po drugie, wstawiając treść za pomocą JavaScriptu, zakładasz, że użytkownicy go nie wyłączyli u siebie (większość osób tego nie robi, ale niektórzy wyłączają, aby przyspieszyć przeglądanie i pozbyć się reklam). W końcu każda animacja Flasha wymaga własnego osobnego pliku ,/S, co nie jest dużym problemem przy małej liczbie filmów, ale szybko może stać się uciążliwe.

    SWFObject Metoda SWFObject opublikowana kilka miesięcy po premierze witryny PGA z 2004 roku jest najbardziej wyrafinowanym i niezawodnym, aktualnie dostępnym rozwiązaniem. Napisany w JavaScripcie przez Geoffa Stearnsa pakiet stanowi bezpośrednią odpowiedź na ograniczenia obu wymienionych wcześniej metod. Umożliwia stosowanie prostszego kodu przechodzącego walidację jako XHTML 1.0 Transitional i wyżej. SWFObject oferuje wszystko, czego potrzebuje programista Flasha — wykrywanie odtwarzacza, możliwość zaprezentowania alternatywnej treści tym, którzy go nie mają, metody przekazywania dodatkowych parametrów i zmiennych, pozycjonowanie obiektów w dowolnym miejscu za pomocą elementów di v, a nawet zmienną pozwalającą obejść wykrywanie odtwarzacza i wymuszenie wyświetlenia filmu bez względu na to, czy w przeglądarce został zainstalowany ten dodatek, czy nie. SWFObject jest też przyjazna dla wyszukiwarek, co jest rzadkością we Flashu. Użytkownicy tworzą element div w swoich dokumentach, zapełniają go zwykłą treścią HTML, jaka później może zostać zindeksowana i wyświetlona tym, którzy nie mają odpowiedniej wtyczki. Jeśli wtyczka Flasha jest zainstalowana, zawartość elementu di v zostaje zastąpiona animacją. Zatem zarówno ci, którzy mają wtyczkę, i jak ci, którzy jej nie mają, mogą oglądać bogatą treść strony, a programista nie musi się zbytnio napracować. Więcej informacji o pliku SWFObject (który jest darmowy) można znaleźć na stronie http://blog.deconcept.com/swfobject.

    Podsumowanie Zaprezentowałem tu wiele informacji, od tworzenia wizualnych efektów w Photoshopie po menu rozwijane, pozycjonowanie elementów przy użyciu CSS i problemy z walidacją treści Flasha w dokumentach XHTML. Przedstawione tutaj techniki powinny zachęcić Cię do dalszych poszukiwań i eksperymentów przy użyciu CSS. W następnym rozdziale przyjrzysz się procesowi przeprojektowania witryny University of Florida. Dowiesz się, jaka była jej historia, jakie problemy napotkano przy aktualizowaniu starej treści oraz szczegółowo zapoznasz się z użytym na niej kodem CSS.

    114

    Witryna University of Florida Częstym błędem popełnianym przez osoby próbujące zaprojektować coś całkowicie odpornego na głupotę jest niedocenianie genialnej pomysłowości kompletnych idiotów. — Douglas Adams University of Florida (UF) ze swoimi 16 wydziałami należy do światowej czołówki uniwersytetów oferujących najbardziej różnorodne kierunki kształcenia. UF, którego korzenie sięgają East Florida Seminary założonego w 1853 roku, może poszczycić się długą historią międzynarodowych programów edukacyjnych, badawczych i usługowych; ma swoje placówki we wszystkich 67 hrabstwach Florydy. Liczba studentów tego uniwersytetu sięga 50 000, co daje mu drugie miejsce w USA. Jego witryna internetowa w pewien sposób odzwierciedla tendencje zauważalne ogólnie w sieci. Zmiany głównych zainteresowań programistów sieciowych (i programistów przeglądarek, w których ich strony są oglądane) można dostrzec w mikroświecie witryny UF. W tym rozdziale prześledzisz niektóre decyzje podjęte przez władze UF w stosunku do tej witryny internetowej oraz techniki wykorzystane do wprowadzenia ich w życie.

    Powrót do przeszłości UF opublikował swoją witrynę internetową w 1995 roku. Wówczas nie wyróżniała się niczym szczególnym. Strony były dobrze zbudowane pod względem strukturalnym i charakteryzowały się lekkim stylem. Witryna z 1995 roku miała przede wszystkim utylitarny charakter. Zawierała łącza do informacji, które można znaleźć także w aktualnej wersji (rysunek 4.1).

    Rozdział 4. Witryna Uniyersity of Florida Uniyersity of Florida Home Page

    UNIVERSITY OF

    IPIFLORIDA. Welcome! I About the University of Florida • UF Facts wili help oriem you to Gaior Country • Pictures of U F will show you our hcautifu! campus • Maps will help you find your way around UF

    2

    University of Florida Information

    Many UF units pro\'ide on-linc information. Thcsc can bc located by sclecting one of the fołłowing mcthods: • Alphabetic lndex • Organization View and Administratiye Information • ACIIYC UF WWW Sitcs

    Rysunek 4.1. Strona gówna University of Florida z 1995 roku

    Poniżej przedstawiam fragment kodu pierwszej wersji:

    ** About the University of Florida

      * UF Facts will help orient you to Gator Country
      * Pictures of UF will show you our beautiful campus
      * Maps will help you find your way around UF
    Łatwo można zidentyfikować kilka elementów semantycznych. Nagłówki zostały odpowiednio oznaczone, listy nieuporządkowane oznaczono właściwie. Pominięto znaczniki elementów listy. Zamiast elementu 1 i użyto obrazków i znacznika br. Najprawdopodobniej było to podyktowane chęcią uzyskania odpowiedniego stylu list.

    Przemyślenia na temat kolejnych

    wersji

    Kolejne wersje witryny zmierzały w kierunku opartego na rodzajach odwiedzających systemu nawigacyjnego, składającego się z pięciu głównych sekcji (rysunek 4.2):

    116

    •

    Prospective

    •

    Current

    Students,

    Students,

    Rozdział 4. Witryna Uniyersity of Florida •

    Campus Visitors,

    •

    Faculty & Staff,

    •

    Alumni, Parents & Friends. Uniyersity of Fiorida Home Page

    mt awh | płion»boot G a m e s y i l l e , FL 3 2 6 1 1 -

    Prospective Students Current Students Campus Visitors Facułty & Staff Alumni, Parents & Friends

    vUN!VERSITYOF

    352.392.3261

    PFLORIDA

    From Chloroform To Epidurals: New Book By UF Physician Examines History of Labor Pain Relief, more . UF Researcher Develops New Strawberry Varieties. more_

    * • • *

    Colleges & Schools Admissions % Student Info-ISIS Admin Info-SOARS * Athłetics Computing % Libraries Research & Grad Programs * NOTICE - Home page survey completed.

    Current Interest: Campus Map | UF Presidential Search | GatorUnk | Graduate Fellowshlp Initiatiye | Course Schedules | Scholars Program | Seeking PREVIEW Adyisors | Online Giying

    prospetnye Stuocms | Ctgrent StwKnts | Campus yisitore i Faculty a Staff | 5. I Contact Uf t Web Site LisOno i SearehftDirectones I Sita Map Rysunek 4.2. Zaktualizowana wersja strony głównej Uniyersity of Florida z 1999 roku

    Odwiedzający należący do którejkolwiek z tych grup może znaleźć wszystkie informacje, które uniwersytet uznał za ważne dla niego. W sekcji Prospective Students (potencjalni studenci) znajdują się informacje dotyczące zasad przyjęć na studia, wskazówki dla chcących zwiedzić kampus, informacje o uniwersytecie itd. Dla każdej grupy opracowano podobne zestawy odpowiednich informacji. Tendencja do dzielenia nawigacji na tego typu sekcje była zauważalna zarówno w witrynie UF, jak i całej sieci. Ten nowy, przepełniony grafiką sposób projektowania nie był jednak idealny. Mimo iż styl witryny UF z 1999 roku zyskał więcej opinii pozytywnych niż negatywnych, było wiele skarg na zbyt długi czas ładowania stron. W tym stanie przeglądarka odwiedzającego musiała wykonać ponad 30 żądań do serwerów w celu pobrania różnych części strony: kodu HTML, obrazów, kodu JavaScript itd. Każde żądanie wydłużało czas potrzebny do załadowania strony. Poprawki te spowodowały zatarcie dobrej semantyki kodu. Nieuporządkowane listy i nagłówki zostały wyrzucone, a w ich miejsce użyto map obrazkowych, efektów rollover w JavaScripcie i tabel.

    117

    Rozdział 4. Witryna Uniyersity of Florida

    Aktualna witryna W związku z rosnącą popularnością przeglądarek zgodnych ze standardami, UF zdecydował się na utworzenie nowego projektu (rysunek 4.3). Aby przeprojektować witrynę, UF potrzebował: •

    określenia głównych odbiorców oraz profilu użytkownika, aby odpowiedzieć na jego wymagania,

    •

    strukturalnego rozmieszczenia informacji na stronach,

    •

    dokładnego przetestowania przez użytkowników,

    •

    opinii zaprzyjaźnionych witryn

    Aktualna strona została opublikowana w 2004 roku. Mimo że projekt został zmodyfikowany, nadal widać jego pierwotne cechy (rysunek 4.4). Witrynę tę odwiedza obecnie około 100 000 osób dziennie. W pozostałej części tego rozdziału opisuję proces tworzenia nowej witryny.

    Centers & Institutes. Fellowships, Programs, Undergrad Research, ...

    > Services Goods & Shopping, Health 8t Safety, Computing, Transportation, ...

    :• Beer-Drinking Rats Count Calories Better Than Many Peopfe, UF Researctiers say. morę... Did You Know...? > U F f a c u l t y a t t r a c t e d m o r e t h a n $ 4 5 8 million in r e s e a r c h a n d t r a i n i n g g r a n t s in 2 0 0 2 - 0 3 .

    > Students :• F a c u l t y & Staff > A f u m n i , D o n o r s &' Friends > P a r e n t s , P a t i e n t s & Visitors

    © Universlty of Florida, Galnesvllle, FL 32611; 352.392.3261 | Page last updated; January 12, 2005. About This Slte | Prlvacy Policy

    Rysunek 4.3. Wersja witryny z 2004 roku

    118

    Rozdział 4. Witryna Uniyersity of Florida Uniyersity of Florida EEH ' y T c o o g l e

    Uniyersity of Florida

    About UF Administration, Maps, Tours, Facts, Giving, Jobs, News, Spotlights, ...

    :-Academics Colleges, Courses, Libraries, I S I S , Advising, Continuing, Distance, ...

    Admissions Undergrad, Graduate, Transfer, International, Financial Aid, ...

    Research News Breakthroughs & discoverles

    > Campus Life Arts, Community Service, Athłetics, Housing, Student Involvement, ...

    >Research Centers & Institutes, Fellowships, Programs, Undergrad Research, ...

    > Services

    > T o o m u c h f r u c t o s e c o u l d leave d l e t e r s s u g a r shocked. more... > U F e n g i n e e r s : Wireless c h a r g e r provides efficlent cord-free charglng. more...

    InsideUF

    Your campus nem

    sourte

    ••• U F e n g i n e e r w i n s presidential a w a r d for y o u n g

    Goods & Shopping, Health & Safety, Computing, Transportation, ...

    r e s e a r c h e r s . more... > S t r e e t r e n a m e d a n d m o n u m e n t u n v e i l e d in h o n o r of Lt. D a h l e m . more...

    > Students > Faculty & Staff > A l u m n i , Donors & Friends > Parents, Patients & Visitors

    & Universlty of FlońCa, Gainesvllle, FL 32611; 3S2.392.326l / UpćateO: Decem ber 8, 200 About This Site | Dlsabllity Services | Prlvacy Policy i' Regulatlons

    F L O R I D A I THE CAMPAIGN FOR THE UNIVERSITY OF FLORIDA iriMnoaru/ I

    Rysunek 4.4. Podczas aktualizacji w 2008 roku wprowadzono tylko niewielkie poprawki

    Definiowanie witryny Podczas oceniania powodzenia witryny uniwersytetu wskaźniki, np. finanse i przejścia do koszyka z zakupami, zostają odsunięte na dalszy plan i ustępują miejsca szerszym zagadnieniom, takim jak satysfakcja odwiedzających i postrzeganie projektu. Dzięki temu identyfikacja celów witryny jest prosta: wystarczy porozmawiać z odwiedzającymi, podejrzeć, jak z niej korzystają, i dać im to, czego chcą.

    Budowa zespołu Większość członków społeczności UF ma wiele zadań. Przy odwiedzających, którzy szukają tak wielu różnych typów treści w jednej witrynie, konieczne było utworzenie projektu nie tylko opartego na rodzajach użytkowników, lecz również na członkach personelu i kadry. Zespół reprezentujący 20 obszarów z całego kampusu opracował zagnieżdżoną listę typów użytkowników witryny UF. Głównym rodzajem użytkownika jest student. W tej kategorii wyróżniono również licencjatów, magistrantów, obcokrajowców itd. Następnie na niższych poziomach znaleźli się potencjalni studenci, studenci przenoszący się z innych uczelni itd. Później zespół wyodrębnił zadania, jakie każdy rodzajów użytkowników mógłby wykonać.

    119

    Rozdział 4. Witryna Uniyersity of Florida

    Badania

    użytkowników

    Tak jak w wielu dużych organizacjach, pracownicy UF często muszą wykonywać prace w różnych charakterze. Pracownik personelu może uczestniczyć w kursach i brać udział w wydarzeniach sportowych, a magistrant może prowadzić kursy i być absolwentem studiów licencjackich. Objawiło się to podczas badań użytkowników przeprowadzonych na potrzeby poprzedniej witryny UF, na której użytkownicy musieli zgadywać, do której grupy się zaliczają, aby uzyskać potrzebne informacje. Odwiedzający wybierali także różne grupy na podstawie swoich życzeń, a niekoniecznie aktualnego statusu. Przykładowo wielu potencjalnych studentów (tzn. uczniów szkół średnich) klikało odnośnik Current Students zamiast Prospectwe Students (potencjalni studenci). Kiedy spytano ich, dlaczego, odpowiedzi można było podzielić na trzy główne kategorie. Oto one. •

    Uczę się już w mojej aktualnej szkole.

    •

    Co znaczy „potencjalny"?

    •

    Chciałem zobaczyć, co prawdziwi studenci UF robią. (Tego rodzaju odpowiedź padała najczęściej — i była najbardziej interesująca — wśród potencjalnych studentów, którzy kliknęli odnośnik inny niż Prospective Students).

    Szybko stało się jasne, że zastosowana przez uniwersytet metoda klasyfikacji ludzi, mimo iż poprawna i przydatna dla samej uczelni, niezbyt pokrywała się z tym, jak ludzie sami siebie klasyfikowali. A to sugestia, że system nawigacji oparty na rodzajach użytkowników nie powinien być głównym systemem witryny. Trzeba było dokonać mariażu tego spojrzenia na odwiedzających z aktualnymi tendencjami obserwowanymi w witrynach uniwersyteckich.

    Badanie samych siebie Ważnym etapem definiowania witryny było przyjrzenie się innym witrynom środowiska akademickiego. Mimo że na wielu witrynach uniwersyteckich główny system nawigacyjny jest oparty na typach użytkowników, wiedziano już, że w przypadku UF nie będzie to najlepsze rozwiązanie. Dzięki obserwacji witryn innych uniwersytetów można było wyodrębnić pewien stały zestaw fraz, pod którymi ukrywano różne rodzaje treści. Na uniwersytecie zrozumiano już na początku, że ostateczna struktura witryny UF będzie unikalna. Natomiast takie przyjrzenie się tendencjom w szerokiej skali pozwoliło wyodrębnić najczęściej używane frazy. Przebadano ponad tysiąc witryn uniwersyteckich w poszukiwaniu powtarzających się wyrażeń. Takie frazy jak „About (University/College X)", „Academics", „Admissions" i „Alumni" szybko znalazły drogę na szczyt listy. Odpowiadały one wynikom badań użytkowników (przeprowadzonych metodą sortowania kart) i zostały użyte jako główne frazy nawigacji. Sortowanie kart to prosta (ale bardzo użyteczna) technika badania potrzeb odwiedzających podczas projektowania architektury informacji. Badanym przedstawia się karty zawierające krótkie opisy treści i zadania dotyczące witryny. Mają je pogrupować i nazwać grupy. Więcej na ten temat można znaleźć w książce Mike'a Kuniavsky'ego Observing the User Experience: A Practitioner's Guide to User Research (Morgan Kaufmann, 2003).

    120

    Rozdział 4. Witryna Uniyersity of Florida Wiele witryn sporo traciło z powodu zbyt dużej liczby akronimów i innych wyrażeń ściśle związanych z daną uczelnią. Czasami nie da się ich uniknąć, należy jednak starać się liczbę tę sprowadzić do minimum. Ponadto zauważono, że bardzo rzadko podawano rozwinięcia akronimów.

    Definiowanie specyfikacji

    technicznych

    Jednym z problemów, który uniwersytet chciał rozwiązać bez wracania do dziewiczego projektu z 1995 roku, był wydłużony czas otwierania stron spowodowany dużą ilością grafiki. Jednak chciano wrócić do (poprawionej) semantyki zastosowanej w poprzednim projekcie. Gdyby, ogólnie rzecz biorąc, odwiedzający posługiwali się oprogramowaniem umożliwiającym oglądanie ściśle standardowych stron, UF gotów był pójść tym tropem.

    Stosowanie standardów

    sieciowych

    Już na wczesnym etapie podjęto decyzję, że w witrynie treść zostanie oddzielona od warstwy prezentacyjnej. Można to było zrobić, dysponując odpowiednimi informacjami. Oto one. •

    Ilu użytkowników straci po zastosowaniu standardów?

    •

    Jak szybko ci użytkownicy porzucą swoje, nieobsługujące standardów przeglądarki?

    Powody do użycia zgodnego ze standardami kodu XHTML i zgodnego z zasadami semantycznymi wykorzystania znaczników były następujące. •

    Ciągła migracja użytkowników przeglądarki Netscape do wersji 7. i w końcu Mozilli lub Firefoksa (omówię to bardziej szczegółowo później).

    •

    Z reguły użytkownicy niezgodnych ze standardami przeglądarek używają wolniejszych łączy internetowych. Zmniejszenie czasu ładowania strony (z 50 kB i 30 żądań HTTP do 30 kB i, co ważniejsze, tylko 3 żądań HTTP dla użytkowników przeglądarek niezgodnych ze standardami) jest znacznie ważniejsze od uproszczenia stylu. Dotyczy to szczególnie tych użytkowników, którzy regularnie mają do czynienia ze stronami słabo współpracującymi z przestarzałymi przeglądarkami.

    •

    Dodanie systemu zarządzania zasobami, który nie pozwala na wykonywanie operacji finansowych przy użyciu przestarzałych przeglądarek, wymusza na użytkownikach przejście na nowe przeglądarki (około 40% ruchu na stronie głównej UF generują studenci i kadra korzystający z uniwersyteckiej sieci).

    •

    Dzięki użyciu arkuszy stylów użytkownicy niezgodnych ze standardami przeglądarek, które nie obsługują reguły @import, zobaczyliby dokument o bardzo prostym formatowaniu.

    Dbanie o dostępność UF bardzo zależało, aby tworzona witryna była dostępna dla wszystkich członków społeczności, bez względu na to, jakiego rodzaju medium używają. Dotyczyć to miało także osób korzystających z alternatywnych technik przeglądania stron z powodu upośledzeń słuchu, wzroku lub problemów z poruszaniem się. Podejście zgodne ze standardami było częścią całego procesu pracy nad witryną, a nie tylko dodatkiem wstawionym przed jej opublikowaniem lub — co gorsza — w wyniku spostrzeżenia, że witryna jest mało dostępna, i utworzenia wersji tekstowej. Więcej informacji na temat technologii pomocniczych, takich jak programy czytające, wyświetlacze Brailla oraz mówiące przeglądarki, można znaleźć w książce Building Accessible Websites, której autorem jest Joe Clark (New Riders Press, 2002).

    121

    Rozdział 4. Witryna Uniyersity of Florida

    Tworzenie głównej struktury nawigacyjnej Witryna University of Florida zawiera ponad milion stron o tematyce od inżynierii lotniczej po zoologię. Nawigacja musi zatem już na pierwszy rzut oka uwidaczniać bogactwo badawcze i działalność edukacyjną uniwersytetu oraz umożliwiać intuicyjne dojście do wszystkich zasobów. Nieodłączną wadą graficznych lub dynamicznych efektów rollover używanych jako narzędzia nawigacyjne jest to, że ukrywają podstawową strukturę. Odwiedzający nie ma możliwości przejrzenia całej zawartości witryny. Musi zgadywać, co się kryje w każdym menu, i sprawdzać, czy miał rację. Ponieważ efekty rollover pozwalają zobaczyć tylko jedną gałąź struktury witryny na raz, bardzo przydatne mogłoby być dostarczenie rzutu całej architektury, który nie wymagałby od użytkownika zgadywania. Sześć głównych sekcji stanowiących przegląd struktury uniwersytetu znacznie lepiej spełnia swoje zadanie, gdy część ich zawartości zostaje wyświetlona pod nagłówkami (rysunek 4.5).

    e

    o

    I *

    o

    _

    * .{T^fl

    UniV' +

    h F http://www.ufl.

    Uniyersity of Florida

    Uniyersity of Florida

    >AboutUF Administration, Maps, Tours, Facts, Giving, Jobs, News, Spotlights, ...

    > Academics Colleges, Courses, Libraries, I S I S , Advising, Continuing, Distance, ...

    > Admissions Undergrad, Graduate, Transfer, International, Financial Aid,...

    > C a m p u s Life Arts, Community Service, Athłetics, Housing, Student Invoivement, ...

    >Research Centers & Institutes, Fellowships, Programs, Undergrad Research, ...

    :-Services Goods & Shopping, Health & Safety, Computing, Transportation, ...

    Rysunek 4.5. Główna nawigacja witryny Uniyersity of Florida

    Kod XHTML W witrynie UF przeznaczeniem głównej nawigacji nie jest tylko zaprowadzenie użytkownika z jednej strony na inną. Jest to jedna z najważniejszych części strony i kod użyty do jej utworzenia musi być tego potwierdzeniem.

    122

    Rozdział 4. Witryna Uniyersity of Florida Listy

    nieuporządkowane

    Zgrupowanie zbiorów podobnych informacji (jak m a to miejsce w p r z y p a d k u użycia list nieuporządkowanych) sprawia, że m o ż n a skorzystać z: •

    formatowania za p o m o c ą CSS,

    •

    semantycznego grupowania podobnych obiektów,

    •

    łatwiejszego przechodzenia przez grupy treści, zwłaszcza przez p r o g r a m y czytające.

    Zagnieżdżone listy

    nieuporządkowane

    Na pierwszy rzut oka w y d a j e się, że najlepszym sposobem na opracowanie głównej nawigacji witryny U F jest użycie zagnieżdżonych list nieuporządkowanych. Istnieje lista głównych tematów zawierających zestawy odnoszących się do nich łączy (rysunek 4.6). M o ż e to wyglądać tak:

    .

    A b o u t UF o Administration, o Maps, o Tours, o Facts, o ...

    Rysunek 4.6. Niesformatowane zagnieżdżone listy nieuporządkowane

    123

    Rozdział 4. Witryna Uniyersity of Florida Mimo że nie ma problemów z poprawnością, elementy listy służące jako nagłówki (About UF, Administration itd.) nie zostały oddzielnie oznaczone elementami nagłówków. Jeśli główne sekcje witryny zostaną oznaczone jako elementy listy, ich znaczenie będzie zaniżone.

    Dbanie o poprawność

    semantyczną

    Aby oddać prawdziwe znaczenie głównych nagłówków w całej witrynie, nawigację umieszczono w elemencie div i opracowano jako zestaw nagłówków z nieuporządkowanymi listami (rysunek 4.7): f o n n *

    • 1 i C | | + I FhttP^/www ufl edu/

    About UF • • • • •

    Administration, Maps, Tours, Facts, ...

    Rysunek 4.7. Niesformatowane nieuporządkowane listy z nagłówkami

    Zastosowane tu nagłówki nadają znaczenie zarówno bieżącej stronie, jak i całej witrynie. Skorzystają na tym użytkownicy programów czytających, takich jak Jaws i IBM Home Page Reader, umożliwiających nawigację polegającą na przechodzeniu od nagłówka do nagłówka. Dodatkowo warto pamiętać, że niektóre wyszukiwarki przyznają większą wartość tekstowi znajdującemu się w nagłówkach.

    124

    Rozdział 4. Witryna Uniyersity of Florida Ponieważ pierwsze litery zintegrowanego systemu informacji studenckiej U F (Integrated Student Information System) — sieciowego systemu umożliwiającego zapisywanie się n a zajęcia i wnoszenie opłat, który znajduje się w sekcji A c a d e m i c s — tworzą dające się w y m ó wić słowo ISIS (angielska w y m o w a jak „eye-sis"), skrótowiec ten jest a k r o n i m e m . G d y b y litery te były w y m a w i a n e pojedynczo, (jak H T M L ) , słowo to byłoby u z n a w a n e za z w y k ł y skrót i użyto b y znacznika abbr. Elementy abbr i acronym umożliwiają rozszerzenie znaczenia tekstu prezentowanego użytkownikowi. Należy ich z a w s z e u ż y w a ć d o z n a k o w a n i a pierwszych wystąpień skrótów lub a k r o n i m ó w w dokumencie. Dzięki t e m u p r o g r a m y czytające i wyszukiwarki, takie jak Google, wiedzą, z c z y m m a j ą d o czynienia.

    Kod CSS *

    {

    padding: 0; margin: 0;

    } ul { list-style: none;

    } li { font-size: llpx; color: #444;

    } h2 { font-weight: normal; font-size: 21px;

    } a { text-decoration: none;

    } a: 1 ink, a:visited { color: #0021a5;

    } a:hover, a:active { color: #ff4a00;

    } acronym { border: 0; font-style: normal;

    } #priNav { width: 248px; float: left; padding: 6px 2px 0 0; margin: 0 2px;

    }

    125

    Rozdział 4. Witryna University of Florida #priNav h2 { padding: 7px 0 0 20px; letter-spacing: lpx; line-height: 22px; background: url(images/pointer.gif) no-repeat 9px 14px;

    } #priNav ul { padding: 0 0 7px 20px; height: 26px; border-bottom: lpx solid #eee;

    } #priNav li { display: inline; line-height: 13px; padding-right: 4px; float: left;

    }

    Grafika W

    głównej nawigacji witryny U F użyto d w ó c h o b r a z ó w : navDropShadow.jpg

    i pointer.jpg

    (rysunek 4.8)

    (rysunek 4.9). Pierwszy z nich został p o ż y c z o n y z g ł ó w n e g o kontenera H T M L .

    O b r a z background.gif

    znajdujący się w tle e l e m e n t u body w i d a ć p o b o k a c h r y s u n k u 4.3. O O f t

    ' navDropShadow.jpg @ 100% (RGB)

    I

    1

    iook roi Rysunek 4.8. navDropShadow.jpg

    O f t f t !

    pointer.gif

    • ioo%

    0

    Rysunek 4.9. pointer.gif

    Małymi krokami

    naprzód

    N a j p i e r w z a p o m o c ą selektora uniwersalnego w y z e r o w a n o d o m y ś l n y m a r g i n e s i dopełnienie wszystkich e l e m e n t ó w . Własności te są najczęściej u ż y w a n e d o o d s u w a n i a e l e m e n t ó w o d siebie. M a r g i n e s t w o r z y odstęp p o zewnętrznej stronie elementu, a dopełnienie — * { padding: 0; margin: 0;

    }

    126

    wewnątrz.

    Rozdział 4. Witryna University of Florida Następnie zostały usunięte p u n k t o r y wszystkich list oraz p o p r a w i o n o w y g l ą d n a g ł ó w k ó w h2 i e l e m e n t ó w 1 i: ul { list-style: none;

    } li ( font-size: llpx;

    } h2 { font-weight: normal; font-size: 21px;

    } Oficjalne kolory U F to niebieski i p o m a r a ń c z o w y , a z a t e m kolor wszystkich o d n o ś n i k ó w zostaje z m i e n i o n y n a ten pierwszy, a a k t y w n y c h — n a drugi: a:link, a:visited { color: #0021a5;

    } a:hover, a:active { color: #ff4a00;

    } Strona g ł ó w n a U F zawiera b a r d z o d u ż o o d n o ś n i k ó w (witryna ufl.edu

    składa się z p o n a d

    miliona stron), przez co podkreślenie ich wszystkich nie w y g l ą d a ł o b y zbyt dobrze. Dlatego zostało usunięte: a { t e x t - d e c o r a t i o n : none; ł a:link, a:visited { color: #0021a5;

    } a:hover, a:active { color: #ff4a00;

    } W

    witrynie użyto też kilku a k r o n i m ó w . Z a c h o w a n i e d o m y ś l n e j wartości własności border-

    bottom niektórych przeglądarek działałoby rozpraszająco i przyciągało w z r o k d o łączy zawierających akronimy. N i e chciano tego, a w i ę c usunięto efekt podkreślenia a k r o n i m ó w : acronym { border: 0;

    }

    Budowa bloku G ł ó w n a n a w i g a q a m a stałą szerokość: #priNav { width: 248px;

    }

    127

    Rozdział 4. Witryna University of Florida W ł a s n o ś ć float: 1 eft p o w o d u j e , że nawigacja będzie z n a j d o w a ć się p o lewej stronie, a reszta treści p o prawej: #priNav { width: 248px; float: left;

    } K o n t e n e r treści m a ustawione dopełnienia lewe i p r a w e o wartości d w ó c h pikseli, a w i ę c należy także tutaj d o d a ć 2-pikselowy m a r g i n e s p o prawej stronie głównej nawigacji. Użycie m a r g i n e s u zamiast dopełnienia p o z w a l a u t r z y m a ć zapisywalny obszar b l o k u w odległości 2 pikseli o d k r a w ę d z i g ł ó w n e g o kontenera i 2 pikseli o d g ł ó w n e g o obszaru treści: #priNav { width: 248px; float: left; m a r g i n - r i g h t : 2px;

    } A b y u z y s k a ć nieco miejsca dla gradientu cienia n a g ł ó w k a i o d s u n ą ć tekst o d prawej k r a w ę dzi, d o d a n o dopełnienie g ó r n e i p r a w e : #priNav { width: 248px; float: left; padding: 6px 2px 0 0; margin-right: 2px;

    } I tak powstał g ł ó w n y kontener nawigacji. Teraz przejdę d o f o r m a t o w a n i a e l e m e n t ó w sekcji.

    Formatowanie

    nagłówków

    K a ż d y element h2 w głównej nawigacji znakuje jedną z sześciu najważniejszych sekcji witryn y U F . Własności p i s m a zostały już ustawione globalnie, tutaj natomiast został z m o d y f i k o w a n y odstęp m i ę d z y literami: #priNav h2 { letter-spacing: lpx;

    } Szerokość została u s t a w i o n a w g ł ó w n y m kontenerze, dzięki c z e m u tutaj nie trzeba już tego robić. Potrzebne jest natomiast dopełnienie i górne, i lewe: #priNav h2 { padding: 7px 0 0 20px; letter-spacing: lpx;

    } Własności background-image, background-repeat i background-position m o ż n a połączyć w jedną własność — background. W

    t y m p r z y p a d k u skorzystano z tej możliwości, a b y przed

    k a ż d y m e l e m e n t e m h2 umieścić p u n k t o r ( p o i n t e r . g i f ) . L e w y g ó r n y róg tego punktora znajduje się w odległości 9 pikseli o d lewej i 14 pikseli o d górnej k r a w ę d z i u s t a w i o n e g o obszaru do-

    128

    Rozdział 4. Witryna University of Florida pełnienia. M o ż n a także dołączyć własności background-color i background-attachment, ale nie są tutaj potrzebne. #priNav h2 { padding: 7px 0 0 20px; letter-spacing: lpx; background: u r l ( i m a g e s / p o i n t e r . g i f )

    no-repeat 9px 14px;

    } A b y m i e ć p e w n o ś ć , że dolne w y d ł u ż e n i a liter nie n a c h o d z ą n a sąsiednie wiersze, zdefiniow a n o o d p o w i e d n i ą w y s o k o ś ć linii: #priNav h2 { padding: 7px 0 0 20px; letter-spacing: lpx; line-height:

    22px;

    background: url(images/pointer.gif) no-repeat 9px 14px;

    }

    Formatowanie list N a początek f o r m a t o w a n i a list znajdujących się p o d wszystkimi n a g ł ó w k a m i d o d a n o d o e l e m e n t ó w ul p i o n o w y o d p o w i e d n i k dopełnienia u s t a w i o n e g o dla e l e m e n t ó w h2 (element h2 jest domyślnie blokowy). #priNav ul { padding: 0 0 7px 20px;

    } Następnie, a b y z m u s i ć elementy 1 i d o ustawienia się jeden o b o k drugiego, należy zmienić ich własność bl ock n a i nl i ne: #priNav li { display: inline; 1 A b y ustawić w y s o k o ś ć listy, trzeba d o d a ć własność height d o e l e m e n t ó w ul i 1 ine-height d o li: #priNav ul { padding: 0 0 7px 20px; height: 26px;

    } #priNav l i { display: inline; line-height:

    13px;

    } Teraz d o d a m o b r a m o w a n i e oddzielające sekcje: #priNav ul { padding: 0 0 7px 20px; height: 26px;

    129

    Rozdział 4. Witryna University of Florida border-bottom: lpx s o l i d #eee;

    } #priNav li { display: inline; line-height: 13px;

    } T o było proste, p r a w d a ? D o k o n a n e z m i a n y w ż a d e n s p o s ó b nie w p ł y n ę ł y n a s e m a n t y k ę głównej nawigacji, a n a g ł ó w k i i znajdujące się p o d n i m i listy w y g l ą d a j ą tak, jak p o w i n n y M a m już o p r a c o w a n ą g ł ó w n ą nawigację, przejdę z a t e m d o innego rodzaju n i e u p o r z ą d k o w a n y c h list, czyli d o nawigacji uzupełniającej.

    Nawigacja uzupełniająca P r z e z n a c z e n i e m nawigacji uzupełniającej jest to, n a co w s k a z u j e jej n a z w a . Uzupełnia g ł ó w n ą nawigację łączami d o sekcji znajdujących się n a niższych p o z i o m a c h hierarchii. O p i s y w a n a tutaj nawigacja składa się z d w ó c h części: funkcjonalnej i podzielonej n a rodzaje u ż y t k o w n i k ó w (rysunek 4.10).

    yicfco/Photos «_ Spotlights |cal«ndar

    <

    J w e b Stte Listing

    PCSEESai Rysunek 4 . 1 0 . Nawigacja uzupełniająca witryny UF

    Zauważ, że przyciski Video/Photos nawigacji

    i Spotlights są częścią animacji Flasha, a nie

    uzupełniającej.

    Kod XHTML P o n i e w a ż nawigaq'a uzupełniająca składa się z d w ó c h oddzielnych części, k a ż d ą z nich trzeba zdefiniować osobno. Struktury o b u są b a r d z o p o d o b n e . N a j p i e r w opiszę nawigację funkq'onalną.

    Nawigacja

    funkcjonalna

    N a w i g a c j a funkcjonalna składa się z listy o d n o ś n i k ó w d o często u ż y w a n y c h sekq'i witryny. W

    p r z y p a d k u U F są to m a p a k a m p u s u , kalendarz w y d a r z e ń , książka telefoniczna, dostęp d o

    poczty elektronicznej itd. W

    przeszłości g r u p y n i e p o w i ą z a n y c h ze s o b ą łączy f o r m a t o w a n o

    przy użyciu p i o n o w y c h kresek i r ó ż n e g o rodzaju grafik. Technika ta nie u m o ż l i w i a oznaczania w ż a d e n s e n s o w n y s p o s ó b e l e m e n t ó w użytych jako separatory, ani nie p o z w a l a w y k o rzystać funkcjonalności przeglądarek.

    130

    Rozdział 4. Witryna University of Florida N a j l e p s z y m s p o s o b e m n a rozsądne p o g r u p o w a n i e tego rodzaju narzędzi jest użycie nieupor z ą d k o w a n y c h list. Lista, którą opiszę, w y g l ą d a tak: K a ż d y o d n o ś n i k znajduje się w j e d n y m elemencie 1 i z a w a r t y m w elemencie ul o identyfikatorze uti 1 Nav. T o jest pierwsza część nawigacji uzupełniającej. Teraz czas n a drugą.

    Nawigacja oparta na rodzajach

    użytkowników

    Odejście o d p o m y s ł u użycia nawigacji opartej n a rodzajach u ż y t k o w n i k ó w jako głównej zostało o m ó w i o n e wcześniej. J e d n a k nie chciano z r e z y g n o w a ć z niej całkowicie. M o ż n a ten rodzaj nawigaq'i utrzymać, ale zmniejszyć znaczenie przez przeniesienie w dół k o d u X H T M L oraz umieszczenie jej w bloku, w p r a w y m d o l n y m r o g u projektu: P o d o b n i e jak w nawigacji funkcjonalnej, k a ż d y rodzaj jest e l e m e n t e m listy n i e u p o r z ą d k o w a nej z identyfikatorem roleNav.

    Łączenie obu rodzajów

    nawigacji

    G d y m a m y u t w o r z o n e o b a rodzaje nawigacji, m o ż n a z g r u p o w a ć je jako nawigację uzupełniającą. Wystarczy w t y m celu u ż y ć z w y k ł e g o e l e m e n t u di v z identyfikatorem suppNav:

    131

    Rozdział 4. Witryna Uniyersity of Florida T o działa, ale użyte g r u p y nawigacyjne nie m a j ą definicji. Trzeba w o b u rodzajach nawigacji w s t a w i ć n a g ł ó w k i opisujące, co się w nich znajduje. W

    ten s p o s ó b u z y s k a n o d w i e listy o prawidłowej strukturze. Pozostało tylko je doszlifować.

    Kod CSS D o s f o r m a t o w a n i a są trzy konkretne elementy: nawigacja funkcjonalna, n a w i g a q a oparta n a rodzajach u ż y t k o w n i k ó w oraz nawigacja uzupełniająca, pełniąca rolę kontenera. Najpierw z a j m ę się k o n t e n e r e m .

    Formatowanie nawigacji

    uzupełniającej

    N a początek trzeba określić szerokość kontenera suppNav: #suppNav { width: 200px;

    } Cała nawigacja uzupełniająca m u s i zostać wyjęta z n o r m a l n e g o u k ł a d u i przesunięta w praw o . W t y m celu należy zastosować p o z y c j o n o w a n i e b e z w z g l ę d n e : #suppNav { width: 200px; p o s i t i o n : absolute; top: 195px; r i g h t : 2px; ł D o każdej z g r u p zostały d o d a n e nagłówki, a teraz z a c z y n a m f o r m a t o w a n i e grup. C h c ę oddzielić listy o d informacji znajdujących się w o k ó ł nich, a w i ę c u k r y w a m n a g ł ó w k i znajdujące się w nawigacji uzupełniającej: #suppNav h2 { display: none;

    }

    132

    Rozdział 4. Witryna University of Florida P o n i e w a ż ten styl znajduje się w e w n ą t r z arkusza dołączanego z a p o m o c ą reguły @import, n a g ł ó w k i nadal b ę d ą o d p o w i e d n i o wyświetlane w w y s z u k i w a r k a c h oraz przestarzałych przeglądarkach. T a k s f o r m a t o w a n y element di v będzie doskonale służyć jako kontener dla o b u r o d z a j ó w nawigacji.

    Formatowanie nawigacji

    funkcjonalnej

    E l e m e n t y listy p o w i n n y p ł y w a ć i w y p e ł n i a ć kontener wszerz. N a j p i e r w zmienię własności e l e m e n t ó w li, a b y były liniowe, p o d o b n i e jak zrobiłem z e l e m e n t a m i w nawigacji głównej: #utilNav li { display: inline;

    } Następnie trzeba u t w o r z y ć blok, w k t ó r y m będzie z n a j d o w a ć się k a ż d e z narzędzi. P o n i e w a ż m u s i b y ć określona w y s o k o ś ć i szerokość k a ż d e g o bloku, u s t a w i a m obie te własności. A b y skorzystać z d o m y ś l n e g o centrowania e l e m e n t ó w w pionie, u ż y w a m własności 1 i ne-height. #utilNav li { width: 99px; l i n e - h e i g h t : 21px; display: inline;

    } Kontener m a 200 pikseli szerokości, dzięki c z e m u elementy listy m a j ą nieco miejsca. M a r g i nes 1-pikselowy z lewej strony p o w i n i e n zostać u z u p e ł n i o n y takim s a m y m o d dołu: #utilNav li { width: 99px; line-height: 21px; margin: 0 0 lpx l p x ; display: inline;

    } P o ustawieniu r o z m i a r u i o d s t ę p ó w e l e m e n t ó w listy m o ż n a przejść d o f o r m a t o w a n i a znajdujących się w nich o d n o ś n i k ó w . A b y element a p r a w i d ł o w o obsługiwał efekt rollover, jego d o m y ś l n y sposób wyświetlania trzeba zmienić n a b l o k o w y . R o z m i a r b l o k u zawierającego łącze p o w i n i e n o d p o w i a d a ć r o z m i a r o w i bloku u t w o r z o n e g o przez element listy. Dlatego elementowi a u s t a w i a m odpowiednie w y m i a r y : #utilNav li a { width: 99px; height: 21px; display: błock;

    } A b y o d s u n ą ć tekst nieco o d lewej k r a w ę d z i — i uniknąć p r o b l e m ó w z w i ą z a n y c h z r ó ż n y m i interpretacjami m o d e l u b l o k o w e g o — zamiast dopełnienia lepiej zastosować wcięcie: #utilNav li a { text-indent: 3px; width: 99px;

    133

    Rozdział 4. Witryna Uniyersity of Florida height: 21px; display: błock;

    } U p i ę k s z ę odnośniki, nadając i m kolor i wstawiając obraz. Grafika ta zostanie u m i e s z c z o n a w p r a w y m d o l n y m r o g u k a ż d e g o łącza, tworząc efekt r o g u ściętego p o d k ą t e m 45 stopni: #utilNav li a { text-indent: 3px; width: 99px; height: 21px; color: # f f f ; display: błock; background: #94a2d9 url(images/chamfer.gif)

    no-repeat r i g h t bottom;

    } D o d a n i e reakcji o d n o ś n i k ó w n a zdarzenia w y m a g a tylko zastosowania pseudoklasy :hover. W t y m p r z y p a d k u z m i e n i a m nieznacznie kolor, natomiast grafikę p o z o s t a w i a m b e z zmian: #utilNav li a:hover { background-color: #566cc3;

    }

    Problemy z modelem

    blokowym

    E l e m e n t y listy m o g ą sprawiać p r o b l e m y w przeglądarce Internet Explorer dla W i n d o w s i k o m p u t e r ó w M a c . Wcięcie tekstu zamiast użycia dopełnienia p o z w a l a p o z b y ć się problem ó w w e wszystkich innych przeglądarkach. G d y tekst jest wcięty w elemencie listy, przegląd a r k a Internet Explorer w wersji 5. t w o r z y m a r g i n e s p o z a b l o k i e m o szerokości równej t e m u wcięciu. T y m s a m y m poszerza cały blok i psuje ustawienie e l e m e n t ó w . M o ż n a t e m u łatwo zaradzić, wykorzystując jedno z d z i w a c t w tych przeglądarek. A b y z m u sić przeglądarkę Internet Explorer w wersji 5. dla W i n d o w s i k o m p u t e r ó w M a c d o zaprzestania tworzenia d o d a t k o w e g o odstępu, wystarczy u ż y ć własności float: 1 eft: #uti1Nav l i { width: 99px; line-height: 21px; margin: 0 0 lpx lpx; display: inline; float: l e f t ;

    } #utilNav li a { text-indent: 3px; width: 99px; height: 2łpx; color: #fff; display: błock; background: #94a2d9 url(images/chamfer.gif) no-repeat right bottom; float: l e f t ;

    } #utilNav li a:hover { background-color: #566cc3;

    }

    134

    Rozdział 4. Witryna Uniyersity of Florida Przy okazji warto z a u w a ż y ć , że w trakcie pracy n a d projektem nie trzeba było w

    żaden

    sposób f o r m a t o w a ć e l e m e n t u #uti 1 Nav ul. E l e m e n t ten w y k o r z y s t a m przy f o r m a t o w a n i u kolejnego e l e m e n t u nawigacyjnego.

    Formatowanie

    rodzajów

    N a w i g a q a oparta n a rodzajach u ż y t k o w n i k ó w jest p o d w i e l o m a w z g l ę d a m i p o d o b n a d o sformatowanej p r z e d chwilą funkcjonalnej, chociaż są m i ę d z y n i m i różnice. C h c e m y u z y s k a ć efekt tekstu otoczonego blokiem, a nie pojedyncze przyciski. W

    t y m p r z y p a d k u niektóre

    czynności w y k o n u j e m y w elemencie listy nieuporządkowanej. S p o s ó b obejścia p r o b l e m u z d o d a t k o w y m o d s t ę p e m w nawigacji funkcjonalnej odbija się tutaj. P o n i e w a ż elementy tej listy pływają d o lewej, punkt, w k t ó r y m przeglądarka wyświetla bieżący element, n i g d y się nie poruszył. Obejściem tego p r o b l e m u jest użycie własności cl ear dla wszystkich e l e m e n t ó w pływających d o lewej: ul#roleNav { elear: left;

    } Element ul p o w i n i e n rozciągać się, aby wypełniać swój kontener, dzięki c z e m u nie trzeba ustawiać jego szerokości. W y s o k o ś ć również będzie ustawiała się automatycznie. A b y lewa strona nawigaq'i opartej n a rodzajach u ż y t k o w n i k ó w w y r ó w n y w a ł a się z l e w ą stroną k a ż d e g o z u t w o rzonych wcześniej b l o k ó w e l e m e n t ó w listy, należy d o d a ć jeden piksel l e w e g o marginesu: ul#roleNav { elear: left; margin-left: lpx;

    } M o ż n a tu w y k o r z y s t a ć ten s a m plik chamfer.gif, nawigacji funkcjonalnej:

    którego u ż y ł e m wcześniej w

    elementach

    ul#roleNav { background: #dbe0f2 url(images/chamfer.gif)

    no-repeat r i g h t bottom;

    elear: left; margin-left: lpx;

    } Blok listy potrzebuje nieco miejsca, a b y rozciągać się w górę i w dół, a w i ę c dodaję sześć pikseli: ul#roleNav { padding: 6px 0 ; background : #dbe0f2 url(images/chamfer.gif) no-repeat right bottom; elear: left; margin-left: lpx;

    } A b y u t w o r z y ć odstęp m i ę d z y e l e m e n t a m i listy i w y r ó w n a ć k a ż d y z nich w pionie, u s t a w i a m o d p o w i e d n i o własność 1 ine-height: ul#roleNav li { line-height: 22px;

    }

    135

    Rozdział 4. Witryna Uniyersity of Florida A b y u s u n ą ć d o d a t k o w y odstęp t w o r z o n y przez przeglądarkę Internet Explorer 5 p o d każd y m e l e m e n t e m listy u s t a w i a m własność di spl ay n a i nl i ne: ul#roleNav l i

    {

    line-height: 22px; display:

    inline;

    } Trzeba ustawić w y s o k o ś ć o d n o ś n i k ó w , tak jak dla listy funkcjonalnej. P o n a d t o własność di spl ay należy ustawić n a bl ock. P o d o b n i e jak elementy listy i lista, w której się znajdują, rozciągną się one, a b y w y p e ł n i ć kontener: ul#roleNav l i a { height: 22px; display: błock;

    } A b y o d s u n ą ć tekst o d lewej k r a w ę d z i bloku, u s t a w i a m własność paddi ng-1 eft n a wartość wystarczająco dużą, a b y b e z p r o b l e m u zmieściły się t a m punktory: ul#roleNav l i a { p a d d i n g - l e f t : 16px; height: 22px; display: błock;

    } T a k jak w poprzedniej nawigacji, u m i e s z c z a m p u n k t o r w l e w y m dopełnieniu za p o m o c ą o b r a z u tła odsuniętego o d k r a w ę d z i n a 8 pikseli i w y ś r o d k o w a n e g o w pionie (jeśli drugi p a r a m e t r własności background-posi tion zostanie opuszczony, d o m y ś l n i e m a wartość center). U s t a w i a m także kolor i rozmiar pisma: ul#roleNav l i a { padding-left: 16px; f o n t - s i z e : 12px; height: 22px; display: błock; c o l o r : #596ec4; background: #dbe0f2 u r l ( i m a g e s / p o i n t e r s m a l 1 . g i f )

    no-repeat 8px;

    } ul#roleNav l i a:hover { color: #0021a5;

    }

    Wynik końcowy Poniżej znajduje się k o m p l e t n y arkusz stylów nawigacji uzupełniającej: #suppNav { width: 200px; position: absolute; top: 195px; right: 2px;

    }

    136

    Rozdział 4. Witryna University of Florida #suppNav h2 { display: none;

    } #utilNav li { width: 99px; line-height: 21px; margin: 0 0 lpx lpx; display: inline; float: left;

    } #uti1Nav li a { text-indent: 3px; width: 99px; height: 21px; color: #fff; display: błock; float: left; /* Dla IE5 */ background: #94a2d9 url(images/whiteCornerNik.gif) no-repeat right bottom;

    } #utilNav li a:hover { background-color: #566cc3;

    } ul#roleNav { padding: 6px 0; background : #dbe0f2 url(images/whiteCornerNik.gif) no-repeat right bottom; elear: left; margin-left: lpx;

    } ul#roleNav li { line-height: 22px; display: inline;

    } ul#roleNav li a { padding-left: 16px; font-size: 12px; height: 22px; display: błock; color: #596ec4; background: #dbe0f2 url(images/pointer_small.gif) no-repeat 8px;

    } ul#roleNav li a:hover { color: #0021a5;

    } To wszystko.

    Jeszcze raz o Flashu W ł a d z e U F chciały aby n a stronie zamiennie p o k a z y w a ł y się grafiki reprezentujące trzy wydziały (rysunek 4.11). Podjęto decyzję, że zostanie to w y k o n a n e przy użyciu Flasha (a nie Javy lub JavaScriptu).

    137

    Rozdział 4. Witryna University of Florida

    LaceyLogsdon Senior Departments of History and Połitical Science Native daughter

    • Video/Photos < Spotlights

    MarkAtkinson American Diabetes Association eminent scholar jBESi^y^Kla^* Qe|łartrrient jfjPathology, Immunotogy łd Laboratory Medicine

    I

    M\\i§

    H H f J : ' M f l f l a a 0 SSflł M-

    A bird's-eye view

    Vidco/Photos 4

    Spotlights

    4

    Rysunek 4 . 1 1 . Przykłady ilustracji użytych w animacji Flash

    U ż y c i e Flasha oznaczało, że trzeba było o p r a c o w a ć d o d a t k o w o wyjście awaryjne. G d y n a stronę w s z e d ł u ż y t k o w n i k , niemający Flasha, strona nadal musiała działać poprawnie. A n i m a c j a musiała b y ć w z b o g a c e n i e m witryny, a nie barierą dla tych, którzy nie zainstalowali o d p o w i e d n i e j wtyczki. W p o p r z e d n i m rozdziale zostały opisane m e t o d y wstawiania animacji Flasha n a strony internetow e . Przyjrzymy się jednej z nich uważniej, a będzie to Satay (xmvw.alistnpart.com/articles/flashsatay).

    Jeszcze raz o metodzie

    Satay

    Jak napisano w rozdziale 3., m e t o d a wstawiania animacji Flasha n a strony internetowe o naz w i e Satay polega n a z m o d y f i k o w a n i u elementu embed u ż y w a n e g o przez stare przeglądarki i n i e s t a n d a r d o w y c h atrybutów e l e m e n t u object. A b y lepiej zrozumieć, o c z y m m o w a , spójrz n a poniższy, t y p o w y fragment k o d u służący d o wstawienia animacji Flasha n a stronę.

    138

    Rozdział 4. Witryna University of Florida Flash Satay u s u w a z n a c z n ą część tego k o d u i pozostawia w miarę czysty kod: T e n n o w y film ładujący (niewielki plik zajmujący około 4 kB) służy tylko d o z a ł a d o w a n i a w i ę k s z e g o filmu z pełną treścią (rysunek 4.12). T o p o z w a l a obejść p r o b l e m z przeglądarką Internet Explorer dla W i n d o w s , w której film z a ł a d o w a n y z atrybutu e l e m e n t u object nie jest przesyłany strumieniowo, co p o w o d u j e , że u ż y t k o w n i k m u s i poczekać, aż cały film zostanie pobrany, z a n i m będzie m ó g ł zacząć jego odtwarzanie.

    k i

    •

    5' About UF

    loader.swf n

    ^H > Academics 'Admissions »Campus Life

    spotlight.swf ©

    *Research »S«fvlces

    (JłdWłuKnow.

    Rysunek 4 . 1 2 . Metoda Flash Satay polega na użyciu dodatkowego filmu Flasha

    Jeśli użytkownik nie m a zainstalowanego Flasha, zostaje wyświetlona treść alternatywna. Elem e n t object w bardzo w y g o d n y sposób umożliwia dostarczenie tej treści poprzez dodanie jej p o p i e r w s z y m parametrze. W t y m p r z y p a d k u został użyty w i d o k k a m p u s u z oddali (rysunek 4.13). Century Tower Photo and University Auditorium Gdzieś w głównej nawigacji znajduje się o d n o ś n i k d o tych s a m y c h p u n k t ó w , d o których prow a d z ą odnośniki w animacji. Jeśli z a t e m u ż y t k o w n i k nie m a zainstalowanego lub w ł ą c z o n e g o Flasha, ta s a m a treść jest nadal dostępna. S p r a w d z a się to w e wszystkich n o w o c z e s n y c h przeglądarkach, a przynajmniej tak się w y d a je. Niestety, b a r d z o r o z p o w s z e c h n i o n a usterka (której p r z y c z y n ą jest u s z k o d z o n a kontrolka ActiveX odtwarzacza Flash) p o d c z a s aktualizacji Internet Explorera 5.5 d o wersji 5.01 p o w o duje, że zamiast ż ą d a n e g o obiektu ( w t y m p r z y p a d k u filmu w s t ę p n e g o ) wyświetla się obszar tekstowy, jeśli brakuje atrybutu cl assi d. A b y Internet Explorer działał p r a w i d ł o w o z n o w y m , z g o d n y m ze standardami p i ę k n y m k o d e m , trzeba uciec się d o sztuczki.

    139

    Rozdział 4. Witryna University of Florida 'Uniyersity o f Rorida : • :

    C

    ....

    ' i i | " ' 5 r

    f * http //www.utl.edu/

    ......

    f

    Uniyersity of Florida H H

    H |

    g

    Ba

    w

    » h ""łh Google : § Search

    |

    > About U F

    M

    , don, Maps, Tours, Facts, Giving, Jobs, News, Spotlights, .

    i .

    1 ;-Academics •HSB^H J H ^ H

    •

    •

    jHB«H|P ^

    B

    B

    Colleges, Courses, Libraries, ISIS, Advising, Continuing, Distancc,

    i . * '

    ' Admissions Undergrad, Graduate, Transfer, Internationa!, Financial Aid, ...

    > C a m p u s Life

    Poccsarrh NAUK

    Arts, Community Serwice, Athłetics, Housing, Student Involvement, ...

    & ^^mmM^ĘĘ^miidim-'

    > Too much fructose couid ieave dieters sugar shocked. more...

    >Research

    > UF engmeers: Wirełess charger provides efficient cord-free charging. more...

    |1|||

    insideUF

    >Facułty& 5taff

    > Services

    >• UF engineer wins presidential award for young

    Centers & JnsBtutes, Felłowships, Programs, Undergrad Research, ...

    Goods & Shopping, Heaith a Safety, Computing, Transportation, ...

    researchers. more... > Street renamtKl and monument unvelled in honor of Lt. Dahiem. more...

    ' "

    f

    S '' '

    © U-wersity of Florida, GaineswWe, FL 32611; 3S2.392.326i | Updated: Oecember 8, 2007. About ras Site i Disabtilty Semces ; Privacy Policy ; Regołatioos S S 8 J J 3 & i WE CAMPAIGN FOR THE UM!VERSHY OF RORIDA TOMOWICWI

    i

    i

    Rysunek 4 . 1 3 . Elementy wstawione za parametrem filmu są wykorzystywane jako treść alternatywna

    Detekcja po stronie klienta przy użyciu metody Flash Satay M e t o d a Flash Satay zaleca u ż y w a n i e e l e m e n t u object b e z atrybutu embed, a b y wstawianie animacji Flasha o d b y w a ł o się z g o d n i e ze standardami. W

    witrynie U F w y k o r z y s t a n o tę

    m e t o d ę i ominięto p r o b l e m z Internet E x p l o r e r e m 5.5, d o k o n u j ą c małej p o p r a w k i — zastosow a n o detekcję przeglądarki p o stronie serwera.

    Serwer Apache i dyrektywa

    BrowserMatch

    A b y właściwie posłużyć się a t r y b u t e m cl assi d, trzeba przekazać g o tylko u ż y t k o w n i k o m przeglądarki Internet Explorer. A b y sprawdzić, jakiej przeglądarki u ż y w a odwiedzający, m o ż n a z b a d a ć zawartość żądania w y s ł a n e g o d o serwera. S e r w e r zazwyczaj zapisuje p o d s t a w o w e informacje o żądaniach: n a z w ę pliku, czas, to, czy operacja p o w i o d ł a się, rozmiar pliku oraz (co w t y m p r z y p a d k u jest najważniejsze) rodzaj przeglądarki. O p i s y w a n a tutaj m e t o d a w y m a g a serwera A p a c h e . M n i e j więcej p o ł o w a wszystkich witryn internetowych (włącznie z witryną U F ) jest h o s t o w a n a n a t y m serwerze, u d o s t ę p n i a n y m n a licencji o p e n source. M o ż n a jednak tak z m o d y f i k o w a ć witrynę, a b y działała n a innych serwerach, takich jak np. Microsoft IIS. N a j p i e r w znajdź lub u t w ó r z plik .htaccess w katalogu g ł ó w n y m witryny lub w katalogach, w których znajdują się d o k u m e n t y wykorzystujące animacje Flasha. Jest to prosty plik tekstowy zawierający d y r e k t y w y odpowiedzialne z a obsługę przez serwer d o k u m e n t ó w

    140

    Rozdział 4. Witryna University of Florida i katalogów. Jeśli jeszcze tego nie zrobiłeś, poinformuj serwer, a b y przetwarzał u ż y w a n y typ d o k u m e n t ó w . Jeśli u ż y w a s z d o k u m e n t ó w X H T M L , dodaj poniższą d y r e k t y w ę AddHandler dla rozszerzenia s w o i c h plików: AddHandler server-parsed .html Jeśli treść jest już w formacie p r z e t w a r z a n y m przez serwer, d y r e k t y w a nie jest potrzebna. Następnie u s t a w z m i e n n ą ś r o d o w i s k o w ą , która p o z w o l i zidentyfikować treść w d o k u m e n tach (tzn. classid) p r z e k a z y w a n y c h d o Internet Explorera dla W i n d o w s . W s t a w d o pliku .httaccess poniższy wiersz: BrowserMatch MSIE msie N a k a z u j e o n s e r w e r o w i ustawienie zmiennej ś r o d o w i s k o w e j o n a z w i e msi e n a true, jeśli User-Agent m a wartość MSIE (Internet Explorer dla W i n d o w s ) . Spójrz teraz n a k o d X H T M L : Century Tower M a j ą c z m i e n n ą informującą, czy odwiedzający u ż y w a przeglądarki Internet Explorer dla W i n d o w s , m o ż n a selektywnie w s t a w i a ć i u s u w a ć atrybut classid. K o d d o tego potrzebny znajduje się poniżej: classi d="clsi d:D27CDB6E-AE6D-llcf-96B8-444553540000" Te cztery elementy di v umożliwiają dodanie obrazów i utworzenie chmurki.

    195

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu Pierwsza część to dół chmurki, co widać na rysunku 6.22. Formatuje ją następujący k o d CSS: /* chmurka 7 .bubble { background: url(../images/bgbubblebottom.gif) no-repeat bottom left;

    The Adventures of Clndyli.com Welcome to the redesign! April 12th 2006 Lorem ipsum dolor sil amet. consectetuer adipiscing elit. Pelientesque neque. Pellentesque in Curabitur ullamcorper Ieo ut nisi. Nam at massa non nisi tristique porttitor. Nuilam uMugue M>lll IWWWindWWMWBIW. fium mim?. Hmregemr WrrcWont rtsos; *

    E

    Rysunek 6.22. Dolny element div

    K o d potrzebny d o sformatowania chmurki musi składać się z trzech części. Pierwsza tworzy dolny element di v. D r u g a o d p o w i a d a za górę (.bubble . inner-bubble), trzecia natomiast za środek (.bubble .inner-bubble .i nner-bubbl e2), który zawiera obraz powtarzający się w miarę d o d a w a n i a treści. O t o k o d tych trzech sekcji: .bubble .inner-bubble ( width: 520px; padding:102px 0 38px 0; background: url(../images/bg_bubble_top.gif) no-repeat;

    } .bubble .inner-bubble .inner-bubble2 { padding:lpx 20px 0 40px; background: url (../images/bg_bubble_tile.gif) repeat-y; bubble .inner-bubble .inner-bubble2 div { margin-top:-90px; bubble .inner-bubble .inner-bubble2 div.flickr_badge_image { margin-top: Opx; bubble img { padding:4px; margin-right:29px; border:lpx dashed #fff; background-color:#badbef; float: left;

    }

    196

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu .bubble p.centered img { float: none;

    } .bubble ul li { color: #666; background: url (../images/bullet star-pink.gif) no-repeat Opx 3px; padding:0 O 8px 12px; margi n-top:8px; border-bottom:łpx dashed #a8cfe4;

    Ponowne wykorzystanie

    efektu

    Techniki wykorzystanej d o utworzenia z w o j u użyto w witrynie CindyLi.com także w innych miejscach — w liście Lifełime To Do list oraz grafikach Design Rabbit (rysunek 6.23).

    O Design Rabbit

    ifetime To Oo list Any suggestions: Email me:) Go to England tor New Years ding peace :) See Geeky Chlx project live

    Reart entire łtst>

    Some fun iilustrations and projects l've worked on.

    Rysunek 6.23. Nowe zastosowania techniki ze zwojem

    Wstawianie

    plakietki

    Flickr

    Następna rzecz d o zrobienia to utworzenie plakietki Flickr, która umożliwia wstawienie pewnej liczby zdjęć z konta Flickr n a d o w o l n ą stronę internetową. Wejdź na stronę plakietki Flickr http://flickr.com/badge.gne, którą widać n a rysunku 6.24 (musisz mieć konto w Flickr, ale jego utworzenie trwa krótko i nic nie kosztuje).

    197

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu njn

    o ŃC**

    Flickr. Make a badge tS? "

    ••http://www.flickr.com/badge.gne

    53 T Google

    flickr

    Signed in as cirdyli

    Organize

    Groups

    Exp!ore

    282 rew)

    Help

    Sigr Out

    Search

    rch ev©ryofW"s photos

    Create your own Flickr badge Step 1: What sort of badge would you like to use? There are two types or badge to choose from HTML or Flash. You will be able to select to display photos from your own collecoon. one of your groups, oreveryones photos. You can ałsofilter anyof these options by a tag, if you wish. (The examples below are set to show your photos.))

    C

    <5- An HTML badge

    A Flash badge

    www.fltckr.com

    E3.U t l i l i what te this?

    - i

    Łg- M •

    More of

    g

    photos

    g

    j

    B B a s E s a s B E a Or. go backtoyour photos

    Activity

    On Your Photos Comments You"ve Made Ir Your Groups Photos from your friends

    You

    Your Photos Organize Upload Your Account: Do More with Your Photos

    £xptore

    Places Last 7 Days This Month Popular Tags Creatwe Commors

    Help

    Community Guidelines The Help Forum FAQ Tools

    Flickr Blog About Flickr Terms of Service YourPrivacy

    3

    Serd to a frierd Save todel.icio.us

    Search

    Siterrtap Help by Email

    CopyrighyiP Poficy Report Abuse

    a"YKHoO?corapany

    Rysunek 6.24. Strona Flickr służąca do utworzenia plakietki

    M o ż n a ustawić wyświetlanie 1, 3, 5 lub 10 zdjęć n a raz. W witrynie CindyLi.com zdecydowan o się n a cztery zdjęcia, a więc w y b r a n o opcję z trzema (rysunek 6.25) i zastosowano p e w n e modyfikacje. K o d z ramki n a stronie Flickr działa, jeśli chce się użyć plakietki, takiej jak w przykładzie: Jednak, jak już w s p o m n i a ł e m , Cindy musiała zmodyfikować zmienne, aby uzyskać pożądan y efekt.

    198

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu n

    o

    Flickr: Make a badge

    O ^ »

    ^

    Flickr. Make a badge

    @

    flickr Home

    You

    teO,J o.

    ! • • http://www.flickr.com/badge.gne

    in as cindy 1

    Organ ize

    Contacts

    Groups

    Explore

    S3 {282 new)

    JSoarch everyofte"s pNotos

    Help

    Sigr Out

    Search

    C r e a t e y o u r o w n Flickr b a d g e You chosa an HTML

    You chosa to display 2 • your pubHe photos

    Q J

    You to display 3 • recont photos at sguara size. with a •sertscai toyouf (Chanoe!

    Get the codo to copy * ar d pasto irtoyour website.

    Your badge!

    This is the code you need All you need to do is copy and pastę this chunk of code into your website where you'd like your badge to appear. background:inherit!important;color:#3993ff;} #flickr_badge._wrapper {background-color:#mnf:border solid 1 px #000000} WlickrIbadge_source {padding:0 Iimportant; font: Hpx Arial. Heiyetica. Sans serif Iimportant. color:#666666 Iimportant;}
    www.r.com
    Następnie d o d a ł e m tekst wypełniający, z którego część była u ż y w a n a przez projektanta w oryginalnym projekcie, jak n a rysunku 7.14. Tekst ten dodaje szablonowi nieco życia.

    221

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail !/(,', 1

    Cincinnati

    Tekst Tekst HOW

    Tekst

    « flickr

    Nawigacja stopki

    Rysunek 7.13. Grafiki nagłówka dodane do szablonu

    Korygowanie

    projektu

    Po utworzeniu szkicu szablonu za p o m o c ą tabel H T M L zastosowanie kilku reguł C S S w celu skorygowania jego w y g l ą d u i upodobnienia do oryginału jest już bardzo ł a t w y m zadaniem (rysunek 7.15). h2

    {

    font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.3; color: #8a8b8c; font-weight: bold; padding: 0; margin: 0;

    } P { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.4; color: #8a8b8c; margin: 0;

    }

    222

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail a { color: #f030a2; text-decoration: none;

    } #eventinfo p { margin-left: 8px;

    } #badgel { padding-right: 28px;

    }

    Thursday, May 24 2007 Shaker Town, Kentucky 6:30 P M Map

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim vcniam. quis nosirud exercitation ullanico laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprchenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia descnint mollit anim id est laborum. Click here for more

    HOW

    Supporting Sponsors: Art Academy of Cincinnati, RIS the paper housee

    Mentoring Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mentoring site

    AIGA Flickr Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Our Flickr site

    www.cincinnau.aiffa.orp I Join I A I G A Jobs I Conferences t Unsubscribc

    A I G A I the Professional association for design

    Rysunek 7.14. Dzięki użyciu tekstu wypełniającego m o ż n a lepiej zorientować się, jak będzie wyglądać ukończony produkt

    223

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail

    Origination Design Show & Competition Thursday, May 24 2007 Shaker Towru, Kentucky 6:30 PM Map

    Lorem ipsum dolor sit amet, consectetur adlplsldng elit, sed do elusmod tempor Incldldurtt ut labore et doiore magna ailqua. Ut enlm ad mlnlm venlam, quis nostrud exerdtatlon ullamco laborls nisl ut allqulp ex ea commodo consequat. Duls aute Irure dolor in reprehenderlt in yoluptate velit esse cillum doiore eu fuglat nulla parlatur. Excepteur slnt occaecat cupldatat non proident, suwt In culpa qul offlcla deserunt mol lit anlm Id est labo rum. Cl lek here for more Supporting Sponsors: Art Academy of Cincinnati, RIS tlte paper housee

    Mentoring Lorem Ipsum dolor sit amet, consectetur adlplslcfrtg elit, sed do elusmod tempor Incidldunt ut labore et doiore magna aliqua. Mentor! ng site

    A I G A Flickr

    vi"-T twe flickr

    mnm.ixxi

    Lorem Ipsum dolor sit amet, consectetur adlplslclng elit, sed do elusmod tempor Incidldunt ut labore et doiore magna alląua. Our Flickr site

    www.dnclnnatLalga.org | Joln | AIGA Jobs | Carrfererwes | Unsubscrlbe AIGA | the professional association for design

    Rysunek 7.15. Szablon HTML poprawiony za pomocą kilku reguł CSS

    Zwróć uwagę na brak skróconych reguł CSS. Zrobiłem to celowo, ponieważ niektóre pocztowe mogą ich nie rozpoznawać. Dlatego lepiej się ubezpieczyć i stosować tylko wersje deklaracji.

    programy pełne

    Analiza wpływu reguł CSS na szablon Przeanalizuję zastosowane reguły C S S wiersz p o wierszu, aby pokazać, jaki efekt każda z nich wywołuje. W p o d n a g ł ó w k a c h — Mentoring i AIGA Flickr — p i s m o jest bezszeryfowe o rozmiarze 12 pikseli, pogrubione i m a szary kolor (rysunek 7.16). Ponadto dopełnienie i marginesy zostały ustawione n a zero.

    224

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail Może zadajesz sobie pytanie, czemu rozmiar pisma ustawiono w pikselach. Oto powód. Słowo kluczowe em we własności font-size nie jest rozpoznawane przez klientów poczty, o czym pisze Jeffrey Zeldman w swoim starym artykule Fear of Style Sheets (http://alistapart.com/ ^•artides/fear), piksele są jedynym pewnym wyjściem. h2

    {

    font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.3; color: #8a8b8c; font-weight: bold; padding: 0; margin: 0;

    }

    Mentoring

    Lorem ipsum dolor

    SSt^af

    A I G A Flickr

    Lorem ipsum -i-i —

    Rysunek 7.16. Dostosowywanie podnagłówków

    Następnie zająłem się akapitami (rysunek 7.17). Ich formatowanie p r z y p o m i n a nieco podnagłówki, ale — oczywiście — brakuje pogrubienia i zmniejszyłem rozmiar pisma, aby zwiększyć czytelność. P {

    font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.4; color: #8a8b8c; margin: 0;

    } i Origination Design Show & Competition Thurstiay, May 24 2007 S ha ker Town, Kentucky 6:30 PM Map

    Lorem ipsum dolor sit amet, consectetur adipisicing eilt, sed eto eiusmod tempor inddldunt ut labore et dolore magna alioua. Ut enlm ad mlnim veniam, quls nostrud exercltatlon ullamco laboris nisl ut alipulp ex ea commodo conseouat. Duis aute Irure dolor in reprehendertt In voluptate velft esse dlium dolore eu fuglst nulla psrietur. £xcepteur sint oecaecat cupk&tst non proident, sunt in aiip» qui officla deserunt molllt anim Id est laborum. Cllck here for more

    HOW

    Supporting Sponsors: Art Academy of Cincinnati, RI5 the paper housee

    Mentoring

    A I G A Flickr

    Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna allgua.

    Lorem Ipsum doior sit amet, consectetur adipisicing elit, sed do eiusmod tempor Inddldunt ut labore et dolore magna alięua.

    Mentoring site

    Our Flickr site

    Rysunek 7.17. Formatowanie akapitów

    225

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail W dalszej kolejności sformatowałem kolory odnośników. Zamiast u ż y w a ć pseudoklas, takich jak linki hover, które są w y k o r z y s t y w a n e d o uzyskania efektu rollover, chcę, aby wszystkie łącza miały zawsze ten s a m kolor, n a w e t jeśli zostały już o d w i e d z o n e przez odbiorcę wiadomości, dzięki c z e m u zawsze b ę d ą wyglądały „świeżo" (rysunek 7.18). a { color: #f030a2; text-decoration: none;

    Origination Design Show & Competition TTiursday, May 24 2007 StiakerTown, Kentucky 6:30 PM Map

    Lorem ipsum dolor sit amet, consectetuf adiplsicing eiit, sed do efusmod tempor incididunt ut Sabore et dofore magna aliqua. Ut enfm ad minim veniam, quis nostrud exercitation ullamco labons nisi ut aiiqulp ex ea commodo conseguat. Duis aute irure dolor in reprehenderit in voluptate velit esse dllum doiore eu fugfat nulla pariatur. Excepteur sSnt occaecat cupidatat non proident, sunt Sm culpa qul offida deserunt molllt anim td est laborum. Cl lek here for more

    HOW

    iiniii

    Mentoring Lorem Ipsum dolor sit amet, consectetur adspśsksng elit, sed do etusmod tempor tntidldumt ut labore et doSore magna a!squa. Mentoring site

    Supporting Sponsors: Art Academy of Cincinnati, RIS the paper housee

    toit rw flickr MłOTOSAttlRt

    AIGA Flickr Lorem (psum dolor sit amet, conseaetur ad.pssiang elit, sed do elusmod tempor inddldum ut labore et doiore magna ałiqua. Our Flickr site

    www.cindrviati.3iga.on] I *>ln I AIGA Joto | Conferences i Unsubscrlbe

    Rysunek 7.18. Ustawienie koloru odnośników

    N a k o ń c u zdefiniowałem w y r ó w n a n i e tekstu w kilku akapitach. Informacje o wydarzeniach są w y r ó w n a n e z lewą krawędzią nagłówka, a akapitowi w sekcji Mentoring nadałem dopełnienie z prawej strony (rysunek 7.19). #eventinfo p { margin-left: 8px;

    } #badgel { padding-right: 28px; 1

    226

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail Origination Design Show & Competition Thursday, May 24 2007 S ha ker Town, Kentucky 6:30 PM Map

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et ttolore magna allttua. Ut enlm ad mi nim veniam, quls nostrud ewrcltation ullamco laboris nisl ut aiigulp ex ea commodo conseouat. Ouls aute Irure dolor In reprenenderit In voluptate velit esse clllum dolore eu fugiat nulla pariatur, £xcepteur slnt occaecat cupidatat non proident, sunt In culpa qul officla deserunt mol lit anim Id est laborum. Cl lek here for more Supporting Sponsors: Art Academy of Cincinnati, RIS the paper housee

    Mentoring Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna alląua. Mentoring site

    łisiT t m

    flickr

    Marreaiuflrr

    A I G A Flickr Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed co eiusmod tempor Incididunt ut labore et dolore magna allgua. Our Flickr site

    Rysunek 7.19. Ustawienie marginesów i dopełnienia

    Stosowanie stylów liniowych N a stronach internetowych arkusze stylów są zazwyczaj dołączane za p o m o c ą elementu linki reguły @import. Technika ta m a n a celu oddzielenie w a r s t w y prezentacyjnej o d treści. Dzięki t e m u k o d H T M L pozostaje czysty, a C S S m o ż n a modyfikować, niezależnie o d d o k u m e n t ó w z treścią. Jednak w przypadku wiadomości e-mail taki rozdział m ó g ł b y mieć katastrofalne skutki, ponieważ p r o g r a m y pocztowe m o g ą nie rozpoznawać stylów osadzonych lub zewnętrznych. Rozwiązaniem tego problemu jest zastosowanie stylów liniowych, czyli skrupulatne skopiowanie wszystkich reguł C S S d o odpowiednich elementów w kodzie H T M L . Poniżej znajduje się przykładowy k o d komórki z informaq'ami o wydarzeniach: M i m o że rozwiązuje to problem, podczas ręcznego wpisywania wszystkich stylów bardzo łatwo o błąd, nie wspominając o tym, jakie to ż m u d n e . N a szczęście, proces ten m o ż n a zautomatyzować.

    227

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail

    Usługa Premailer W internecie dostępna jest usługa o nazwie Premailer (http://code.dunae.ca/premailer.web/), której autorem jest Alex D u n a e . U m o ż l i w i a ona przekonwertowanie zwykłej strony internetowej z w b u d o w a n y m i i zewnętrznymi arkuszami stylów oraz w z g l ę d n y m i ścieżkami d o obrazów na wersję bardziej przyjazną klientom poczty e-mail. Ponadto Premailer w y k o n u j e jeszcze jedną wartościową czynność — analizuje k o d C S S w celu sprawdzenia, czy jest obsługiwany przez niektóre popularne p r o g r a m y pocztowe (rysunek 7.20).

    code.dunae.ca

    Premailer: preflight for HTML e-mail. URL Of HTML file

    (http //codo.durao.ca/womakf.wohfosWost.html

    "" Create a plain text veralon?

    Premailer was updated on December 17,2007. The automaiic 'body imposter' wrapper is gone, though you cen still add your own. Plain text generation was improvtd. Print styiesheets are now ignored. E-mail comments to 'aJe^at 'dunae'[dot] ca.

    Marsy thanks to Camoalgn Monitor, Pfernaik»r's now sponsor. I asked thom to sponsor this script sinco 1 only want a company 1 know and trust on this site. CM'» Interfaco is pretty, oasy and poworful and. ovory socond Friday betwoon 10am and 12pm Pacific time, they make my o-mail marketing oxporionce almost orsjoyabtol W you havont chocked thom out yet, I heartiły rocomrmend you do.

    What is thta? For the best HTML e-mail delivery results, CSS should be inline. This Is a huge paln and a simple newsletter becomes un-managable very qulckly. This script Is my solutlon. • CSS styles are converted to inline style attributes Checks s t y l e and l i n k [ r « l - s t y l e s h e e t ) tags and preserves oxisting inline attributes • Relative paths are cor>verłed to absolute paths Chocka links in href, sre and CSS u r l ( ' ' ) • CSS properties are checked against e-mail client capabilities Bas od on the Ęmall Standards Pro|oct's fluldes • A plain text version is created Optional

    Rysunek 7.20. Witryna usługi Premailer

    P o wysłaniu szablonu H T M L na serwer, wpisaniu jego adresu U R L w polu tekstowym i naciśnięciu przycisku Submit Query (zatwierdź) program przekonwertuje reguły C S S na liniowe i wyświetli raport przedstawiający, jak zostaną zinterpretowane przez różne p r o g r a m y pocztowe (rysunek 7.21).

    228

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail text-decoratlon CSS property Support leveł:SAFE

    May not render properly In Eudora

    color CSS property Support level:SAFE

    May not render properly in Eudora. dotMac

    tont-elze CSS property Support level: SAFE

    May not render properly in Eudora. dotMac

    margin CSS property Support level: RISKY

    May no! render property in AOL. Live Mail. Hotmail. Notes 6, Eudora, dotMac

    llne-helght CSS property Support level: POOR

    May noi render property in Notes 6, Eudora, dotMac

    lont-famlly CSS property Support level: POOR

    May not render properly in Gmail. Eudora, dotMac

    paddlng-right CSS property Support level: POOR

    May not render property in Notes 6, Eudora, dotMac

    lont-weight CSS property Support level: SAFE

    May not render properly in Eudora, dotMac

    padding CSS property Support level: POOR

    May not render property in Notes 6, Eudora. dotMac

    Rysunek 7.21. Wyniki działania usługi Premailer

    Raport wskazuje, że używanie własności margi n jest ryzykowne. Ponieważ w t y m p r z y p a d k u została zastosowana tylko po to, aby bardzo nieznacznie przesunąć tekst w celu uzyskania odpowiedniego w y g l ą d u projektu, m o ż n a ją zostawić. Aby pozbyć się ryzykownej własności definiującej margines, można (zgodnie z sugestią programu) utworzyć bardziej skomplikowaną tabelę HTML z dodatkowymi komórkami, które przejęłyby rolę własności paddi ng i margi n.

    Podsumowanie Prześledziłeś proces cięcia układu strony internetowej za p o m o c ą narzędzia Slice (Cięcie na plasterki) p r o g r a m u A d o b e Photoshop w celu utworzenia g o t o w e g o d o użycia szablonu wiadomości e-mail. Ponadto opisałem, jak dodać reguły CSS, aby wysyłane wiadomości e-mail dały się odczytać w e wszystkich klientach poczty. W następnym rozdziale zostały opisane sposoby używania o b r a z ó w w formacie P N G w przeglądarce Internet Explorer 6 i nie tylko.

    229

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail

    230

    Witryna internetowa książki: używanie przezroczystych o b r a z ó w PNG Kobieca intuicja to często nic innego jak zdolność przejrzenia mężczyzny na wylot — George Jean Nathan W t y m rozdziale nauczysz się umieszczać obrazy P N G n a stronach internetowych. Jako praktyczny przykład została wykorzystana strona główna witryny www.procssbook.com, którą przedstawiam na rysunku 8.1. N a stronie tej zastosowano przezroczyste obrazy w formacie P N G . Z a n i m przejdę d o objaśniania, jak u ż y w a ć o b r a z ó w P N G , m u s z ę wyjaśnić, dlaczego zroczyste obrazy P N G są przydatne przy tworzeniu u k ł a d ó w stron.

    prze-

    Obrazy P N G , podobnie jak G I F i JPEG, idealnie nadają się d o wykorzystania w sieci. Tak jak GIF, format P N G dobrze s p r a w d z a się w tworzeniu niewielkich o b r a z ó w zawierających małą liczbę kolorów, takich jak logo i ikony. Ponadto format P N G m a kilka zalet w porównaniu z GIF. Przede wszystkim posiada kanał alfa. C o to oznacza? W pliku G I F piksel m o ż e być tylko całkowicie przezroczysty lub nieprzezroczysty — jest to tzw. przezroczystość binarna. Jeśli jednak obraz zawiera w a r s t w y alfa, w y b r a n e jego części m o g ą być tylko częściowo przezroczyste. P o z i o m tej przezroczystości m o ż n a określić w skali o d 0 d o 255. N a rysunku 8.2 przedstawiam porównanie o b r a z ó w o r ó ż n y m stopniu przezroczystości. W większości p r z y p a d k ó w format P N G umożliwia uzyskanie lepszej kompresji niż GIF. O b r a z y P N G oferują znacznie bardziej r o z b u d o w a n e możliwości przy ustawianiu przezroczystości. Ponadto format ten umożliwia użycie znacznie większej liczby kolorów niż m o ż n a uzyskać w standardowych obrazach GIF. M o ż n a skorzystać formatu truecolor, którego głębia kolorów sięga 48 bitów, w p o r ó w n a n i u z 8 bitami (czyli 256 kolorami). Dzięki t e m u projektant m a np. lepszą kontrolę n a d o b r a z e m i m o ż e stworzyć bardziej płynne efekty cieniowania. Dzięki t y m w s z y s t k i m właściwościom format P N G p o z w a l a utworzyć wiele ciekawych efektów d o wykorzystania n a stronach internetowych, takich jak półprzezroczyste obrazy tła i cienie.

    Rozdział 8. Witryna internetowa książki Back

    -

    fotw&ra ..

    fteload Stos

    Home

    del.icio.us

    Professional CSS Book tag this Adblock Plus . j http://prOCSSbOOk.COni/

    CD •

    Co

    O ' Google

    Search £

    "Books about CSS-based design are only as good as the CSS and the design they contain. Professional CSS boasts the best of b o t h . " Jeffrey Zeldman, author of Designing with Web Standards

    • Download a sampte chapter • Download the table of contents • Download the cod© and ^camples 1 BUY THE BOOK

    » Buy the book from Ama2w1.com • Buy the book from Ama20n.c0.uk • Buy the book from Amazon.ca • Buy the book from Ama2w1.de • Buy the book from Amazon.co.jp

    http;/m«iU.w.kY.COfn/prOdu«.ancilUiY/39;0764S883/DOWMOAD/076<588318 Ch09 Code-Zip

    r,

    o

    Rysunek 8.1. Witryna internetowa pierwszego wydania książki Professional CSS znajduje się pod adresem procssbook.com

    8

    O O

    ' transparent.png @ 100%

    ,.!?,.,., . . . h t . , . . . J i t f

    I:!',.,.,

    . W

    " mai

    Rysunek 8.2. Różne poziomy przezroczystości

    Format P N G jest ś w i e t n y m w y b o r e m , ale G I F przewyższa go w d w ó c h aspektach: możliwości tworzenia animacji i lepszej obsłudze przez przeglądarki. M i m o swoich zalet, obrazy P N G nie dorównują popularnością o b r a z o m GIF, głównie z p o w o d u , że te pierwsze nie są obsługiwane przez wiele przeglądarek. Twierdzenie to jest jednak nieco przesadne.

    Obsługa formatu PNG przez przeglądarki Podczas g d y przeglądarka Internet Explorer 6 dla W i n d o w s i jej wcześniejsze wersje nie obsługują przezroczystości o b r a z ó w P N G , wszystkie inne popularne przeglądarki

    232

    Rozdział 8. Witryna internetowa książki — Safari, Opera, Firefox, a n a w e t następczyni Internet Explorera 6, czyli Internet Explorer 7 dla W i n d o w s — tak. Czy w obliczu tych wszystkich nowoczesnych przeglądarek obsługujących format PNG warto jeszcze zwracać uwagę na Internet Explorera 6? Odpowiedź brzmi: „To zależy". Sprawdź dzienniki swojej witryny i zobacz, ilu jej użytkowników używa tego programu. Jeśli odsetek jest niewielki lub zerowy, możesz przestać zajmować się Internet Explorerem 6. M i m o że p o d s t a w o w a wersja Internet Explorera 6 nie obsługuje przezroczystości alfa, m o ż n a to ograniczenie obejść.

    Sztuczka z użyciem filtru

    obrazów

    Microsoft stworzył m n ó s t w o filtrów wizualnych i przekształceń (http://msdn2.microsoft.com/ ^ en-us/library/ms532847.aspx), których m o ż n a u ż y w a ć w przeglądarkach Internet Explorer 4+. Ich funkcją jest umożliwienie zastosowania różnych efektów multimedialnych (przekształceń jednego obrazu w inny, efektów świetlnych itp.) d o obrazów u ż y w a n y c h na stronach internetowych oglądanych w tej przeglądarce. Jeden z tych filtrów o nazwie AlphalmageLoader umożliwia wyświetlanie obrazów P N G z przezroczystością w Internet Explorerze 6. Filtru tego m o ż n a użyć w kodzie H T M L strony, tworząc element di v i wstawiając d o niego odpowiedni k o d C S S (rysunek 8.3):


    Rysunek 8.3. Jasnofioletowy kolor przebija się przez przezroczyste części obrazów PNG

    Kluczowe znaczenie m a tu własność fil ter. M i m o że nie jest to standardowa własność CSS, umożliwia zastosowanie filtru AlphalmageLoader do obrazu określonego w nawiasach. Poniew a ż jednak k o d ten nie przechodzi pomyślnie walidacji, możesz zastosować tę własność tylko wówczas, g d y jest potrzebna (tzn., g d y strona jest otwierana w przeglądarce Internet Explorer 6). Przy użyciu tej m e t o d y m o ż n a tworzyć bogate projekty pełne o b r a z ó w z przezroczystością alfa, takie jak dla nowoczesnych przeglądarek typu Safari, Firefox czy Internet Explorer 7, które posiadają n a t y w n ą obsługę tej funkcji.

    Obejście problemu obsługi przezroczystości przez Internet Explorer 6 za pomocą skryptu HTC Inną m e t o d ą umożliwiającą wykorzystanie pełni możliwości o b r a z ó w P N G w przeglądarce Internet Explorer 6 jest użycie skryptu .htc.

    233

    Rozdział 8. Witryna internetowa książki Najpierw pobierz g o z witryny TwinHelix Designs (www.twinhelix.com). H T C to skryptowy język p r o g r a m o w a n i a u ż y w a n y wyłącznie w przeglądarce Internet Explorer (ponieważ został o p r a c o w a n y przez Microsoft). Działanie o p i s y w a n e g o tu skryptu polega n a zastosow a n i u zawartego w n i m filtru A l p h a l m a g e L o a d e r d o wszystkich o b r a z ó w znajdujących się n a stronie internetowej. M o ż n a g o u ż y w a ć z a r ó w n o n a serwerze IIS (Internet Information Services) Microsoftu, jak i n a Apache, który jest udostępniany n a licencji o p e n source. P o pobraniu skryptu z internetu wyślij g o n a swój serwer. Następnie u t w ó r z pusty obraz G I F o w y m i a r a c h 1x1 piksel i kolorem u s t a w i o n y m na przezroczysty. M o ż e s z także pobrać taki obraz ze strony W

    skrypcie .htc z m i e ń odwołanie d o pliku blank.gif

    www.twinhelix.com/css/iepngfix. aby w s k a z y w a ł o ten n a T w o i m serwerze.

    U t w ó r z o s o b n y plik C S S o n a z w i e ie.css i wpisz w n i m poniższy k o d zawierający ścieżkę d o pliku .htc. img { behavior: url (ieprigfix.htc);

    } W ł a s n o ś ć behavi or wiąże skrypt z jakimś selektorem ( w t y m p r z y p a d k u z elementami img). A więc ten plik C S S wiąże plik .htc z wszystkimi obrazami n a stronie i w ten sposób stosuje d o nich efekt filtru. T e n plik C S S m u s i być ł a d o w a n y tylko w przeglądarce Internet Explorer 6. A b y to było m o ż liwe, w n a g ł ó w k u strony umieść poniższy komentarz w a r u n k o w y : Tego rodzaju komentarze są rozpoznawane przez Internet Explorer. Oznacza on, że „jeśli przeglądarką jest Internet Explorer 6 lub wcześniejsza, należy odczytać k o d znajdujący się w t y m komentarzu; w przeciwnym przypadku powinien zostać zignorowany". Komentarze w a r u n k o w e są w y g o d n y m sposobem n a używanie k o d u H T M L lub C S S przeznaczonego tylko dla Internet Explorera. W t y m przypadku arkusz stylów ie.css zostanie załadowany tylko w przeglądarce Internet Explorer 6, dzięki c z e m u niestandardowy k o d jest u ż y w a n y tylko wówczas, g d y to niezbędne. W

    niektórych sytuaq'ach m o g ą nie działać t y p o w e techniki prezentacji o b r a z ó w liniowych. • •

    N o r m a l n e zachowanie obrazu umieszczonego w tle elementu to powtarzanie kafelkow e . Jeśli stosujesz to rozwiązanie, obraz P N G nie zachowuje się w ten sposób. Nie stosuj tego rozwiązania w połączeniu z techniką C S S sprites. A b y uzyskać odpowiedni efekt, u ż y w a j tylko i wyłącznie jednego obrazu.

    •

    Jeśli uruchamiasz kilka wersji Internet Explorera w t y m s a m y m systemie W i n d o w s za p o m o c ą m e t o d y opisanej np. n a stronie http://tredosoft.com/Multiple_IE, komentarze w a r u n k o w e m o g ą nie zadziałać. S a m o rozwiązanie p o w i n n o jednak działać bez zarzutów. Spróbuj rozwiązać ten problem przy użyciu jednego z narzędzi d o testowania, np. B r o w s e r C a m ( h t t p : / / b r o w s e r c a m . c o m ) .

    Skrypt Internet Explorera 6 działa poprzez umieszczenie obrazu wstawionego liniowo w tle elementu.

    234

    Rozdział 8. Witryna internetowa książki Kolory a format PNG Kolejnym p r o b l e m e m jest korekcja kolorów. Zauważyłeś, że w komputerach M a c są one zazwyczaj jaśniejsze niż w P C ? Odpowiedzialne za to są osoby, które o p r a c o w y w a ł y system y operacyjne dla tych komputerów. O b r a z P N G m o ż e zawierać informacje g a m m a , które umożliwiają skorygowanie różnicy. Proces ten w y g l ą d a następująco: edytor grafiki zapisuje informacje g a m m a r a z e m z innymi niezbędnymi d a n y m i podczas tworzenia pliku P N G . Następnie plik ten zostaje wysłany na serwer i wyświetlony na wielu komputerach z różnymi systemami operacyjnymi i przeglądarkami. Dzięki zawartości informaq'i g a m m a przeglądarka lub d o w o l n a inna aplikacja renderująca obraz wyświetla go przy zastosowaniu odpowiedniej korekcji kolorów. Problem polega na tym, że informacje te są niepełne. Przez to aplikaq'a renderująca nie m o ż e odtworzyć oryginalnej palety kolorów w i n n y m systemie i nie m a odpowiednich ustawień, aby wyświetlić te kolory poprawnie (kiedy ostatni raz kalibrowałeś ustawienia swojego monitora?). M ó w i ą c krótko, systemy próbują zgadnąć, jaki jest najlepszy sposób wyświetlenia obrazu P N G z informacją g a m m a . To działanie jednak zamiast poprawiać sytuację, tylko ją pogarsza. Oczywiście, jest to uproszczony http://hsivonen.iki.fi/png-gamma.

    opis tego, co się dzieje. Więcej szczegółów

    znajdziesz

    na stronie

    Najlepiej pozbyć się informacji g a m m a zawartej w plikach P N G . Jak to zrobić? Jeśli u ż y w a s z funkcji zapisywania dla internetu p r o g r a m u A d o b e Photoshop d o zapisywania o b r a z ó w w formacie P N G , informacje te są u s u w a n e automatycznie. Jeśli nie m a s z tego p r o g r a m u i pracujesz n a komputerze M a c , wypróbuj aplikację G a m m a s l a m m a (http://mac.softpedia.com/ ^*get/Graphics/GammaSlamma.shtml), której autorem jest Shealan Forshaw.

    Używanie opcji przezroczystości alfa Format P N G m a kilka zalet, które sprawiają, że jest wart uwagi, m i m o słabej obsługi przez przeglądarkę Internet Explorer 6.

    Lepsze cienie Korzystając z formatu P N G , łatwiej u z y s k a m y efekt cienia. Przy użyciu obrazów G I F z ustaw i o n y m tylko j e d n y m kolorem n a przezroczysty płynne gradienty, takie jak w cieniach, musiałyby być idealnie w y r ó w n a n e , aby uzyskać odpowiedni efekt. Jeśli obraz przesunie się choćby o jeden piksel, co pokazano na rysunkach 8.4 i 8.5, efekt m o ż e być inny niż zamierzony. N a rysunku 8.4 cień obrazu jest idealnie w y r ó w n a n y z tłem. Jeśli położenie obrazu G I F jest precyzyjnie określone, m o ż e wystąpić przesunięcie, jak n a rysunku 8.5. Przy użyciu obrazów w formacie P N G , które umożliwiają stopniowanie przezroczystości, m o ż n a uzyskać cień niepsujący efektu, nawet jeśli obrazy nie zostaną d o p a s o w a n e z dokładnością d o jednego piksela (a w internecie prawie nic nie jest tak precyzyjne!), jak na rysunku 8.6.

    235

    Rozdział 8. Witryna internetowa książki

    css

    far«M<>0*«Cn

    BOOK HEADING Rysunek 8.4. Cień obrazu jest wyrównany z tłem

    ProfessorW

    CSS BOOK HEADING Rysunek 8.5. Przesunięcie

    © O © Back

    Professional CSS Book Forward

    Reload

    Stop

    Home

    CD deMcio.us

    tag this

    Adbloc

    Professional

    Cascading Style Sheets for Web Design CMituphcr SchniK, Mdl Jfjryryft tihjn \Un(Kłr. (XmUn OahjrdtoddCtanwy Foreword by Jeffrey Zełdman tbppyCogSlwSot łMff.- ,v> «.»; i>»- -rt.1 Hmtatfrotf turonMmmcMouan

    Already own the book? Please write a review at Amaz

    Done

    Rysunek 8.6. Cień na okładce książki

    236

    Rozdział 8. Witryna internetowa książki N a rysunku 8.7 widać, że n a w e t zmiana rozmiaru tekstu nie p o w o d u j e interferencji cienia P N G z resztą projektu.

    ©

    O

    ©

    Back

    Professional CSS Book Forward

    .

    Reload

    Stop

    Home

    CD dct.kio.us

    tag this

    Adbloc

    Rysunek 8.7. Cień obrazu PNG nie wpływa na wygląd reszty strony

    Używanie odcieni

    kolorów

    Odcienie kolorów to niewielkie obrazy P N G wypełnione białym lub czarnym kolorem 0 określonej przezroczystości, których u ż y w a się d o z m i a n y b a r w tła lub innych obrazów. Zestaw takich plików m o ż n a pobrać ze strony http://christopherschmitt.com/2007/03/16/ color-shades/ lub utworzyć je samodzielnie. A b y opracować własne odcienie, utwórz w Photoshopie obraz o rozmiarach 24x24 piksele 1 zastosuj ustawienia przezroczystości, takie jak n a rysunku 8.8. Następnie wyeksportuj plik d o formatu P N G - 2 4 za p o m o c ą polecenia File/Save for Web and Devices (Plik/Zapisz dla Internetu i urządzeń), jak na rysunku 8.9.

    237

    Rozdział 8. Witryna internetowa książki ® O © f l i u n t i t l e d - l @ 10...

    _ X m Layers X f > Ai^itoteStedMiMltó.i) MvXT~ Normai

    9

    • 10054

    |

    JOpaclty:|ss*

    j ^ H

    j

    M

    Black

    j Transparent

    | w | A . : a : ©.! -1 ! i l ! 9

    Rysunek 8.8. Przezroczystość górnej warstwy została ustawiona na 5 5 %

    o

    ą Save For Web & Deyices j OrigtnaT f Optimized \ > U p \ 4 - U p ~~ ,

    Save

    "y

    Cancel

    A

    f Preset: -{ [Unnamed] 'i } icy

    j Color Table

    Looping Options: 1 of 1

    "BI

    -- C: — i:

    Stee '

    JS

    I • I ftJ i a li J T ?

    PNG-24 134 bytes 1 sec @ 28.8 Kbps

    It

    H Interlaced Matte: f

    "

    S B

    (

    Once

    | | l > | »

    J5

    |

    bevice Central...

    Rysunek 8.9. Okno dialogowe Save for Web and Devices (Zapisz dla Internetu i urządzeń)

    Interesującym s p o s o b e m użycia odcieni kolorów jest wykorzystanie efektu warstwowego. W e ź d w a obrazy. Pierwszy jest z w y k ł y m odcieniem, ale zamiast jednolitym kolorem jest wypełniony p i o n o w y m gradientem przechodzącym o d białego d o przezroczystości. N a rys u n k u 8.10 został p o d n i m umieszczony obraz z c i e m n o c z e r w o n y m tłem, aby lepiej uwidocznić gradient.

    238

    Rozdział 8. Witryna internetowa książki alpha_10.fade.png @ 66.796 (Layer 1, RGB/8)

    © o o s •4 . 1°... .T .°..

    r

    1

    1

    66.67*

    3

    [ISO _ [200 _ |2S0 _ [300^ 35C_ J _ J400 _ |tS 0 _ [500 _ [SSO _ |600 _ |S5C

    [100

    Doc: 63.1 K/21.OK

    Ol

    . K . . . K .

    |100

    [150

    (200

    |2SC

    [• 350

    |30C

    [400

    [450

    [500

    |SSC

    |6CC

    [650

    |7.°.C. . I7.5?.

    I8.0.0. IS.S.C. I9.0

    5" 66.675S

    i

    Doc 63.1Kf21.0K

    )

    >

    Rysunek 8.10. Gradient przechodzi od przezroczystości do 1 0 % białego od lewej strony do prawej

    r procss_bkgd_Frame.jpg ę SO% (RCB/8*)

    flOft

    Rysunek 8.11. Zauważ zmiany kolorów w obrazie tła

    Drugi obraz, jak widać n a rysunku 8.11, to abstrakcyjny kolorowy rysunek z g ł ó w n e g o tła witryny internetowej tej książki. Tych d w ó c h obrazów m o ż n a użyć d o uzyskania ciekawego efektu, umieszczając je n a obrazie tła (rysunek 8.12). Obrazy P N G m o ż n a wykorzystać n a w e t w efekcie rollover, co przedstawiono n a rysunk u 8.13. #buybook

    ul:hover

    {

    background-image: url(/_assets/img/alpha_90_fade_blck.png);

    }

    239

    Rozdział 8. Witryna internetowa książki » 8 « Back

    CD

    Professional CSS Book Forward .

    Reioad

    Stop

    Home

    del.icio.us

    tag this

    Adblock Pius » @ http//procssbook.com/

    Search ?

    "Books about CSS-based design are only as good as the CSS and the design they contain. Professional CSS boasts the best of both." Jeffrey Zeldman,

    authorofDesigning

    with Web

    Standards

    DOWNLOADS • Download a sampte chapter • Download the table of contents • Download the code and examples from the book BUY THE BOOK • Buy the book from Amazon.com • Buy the book from Amazon.co.uk • Buy the book from Amazon.ca

    •

    • Buy the book from Amazon.de • Buy the book from Amazon.co.jp

    Si

    O

    Rysunek 8.12. Dzięki ciemnemu obrazowi w tle widoczny jest jasny gradient

    eoe Sack

    Professional CSS Book Forward .

    Rcload

    Stop

    Home

    del.icio.us

    tag this

    CD

    Adblock Plus , 0 http://procssbook.com/

    •

    Co

    |G]*

    Search

    "Books about CSS-based design are oniy as good as the CSS and the design they contain. Professional CSS boasts the best of both." Jeffrey Zeldman,

    authorofDesigning

    with Web

    Standards

    DOWNLOADS • Download a sample chapter • Download the table of contents • Download the code and examptes from the book BUY THE BOOK • Buy the book from Amazon.com

    >b

    • Buy the book from Amazon.co.uk • Buy the book from Amazon.ca • Buy the book from Amazon.de • Buy the book from Amazon.co.jp

    http://www.amazon.eom/exec/obldoi/ASIN/0764588338/h.atvlsloncom-20

    Rysunek 8.13. Odcień koloru ustawiony na 90% użyty w efekcie rollover

    240

    jri

    O

    f

    Rozdział 8. Witryna internetowa książki

    Podsumowanie W rozdziale t y m opisałem sposoby u ż y w a n i a przezroczystych o b r a z ó w w formacie P N G . Przedstawiłem ich słabe strony oraz praktyczne sposoby wykorzystania. Dowiedziałeś się, jak stosować takie obrazy w przeglądarkach internetowych, a n a w e t jak obejść problem braku obsługi tego formatu w Internet Explorerze 6. Ponadto o m ó w i ł e m kwestie związane z kolorami oraz sposoby wykorzystania przezroczystości alfa i odcieni kolorów w celu polepszenia w y g l ą d u projektów. W n a s t ę p n y m rozdziale opisano zastosowanie C S S w poprawianiu projektu witryny.

    241

    Rozdział 8. Witryna internetowa książki

    242

    T w o r z e n i e u k ł a d ó w CSS Kochamy chaos, ponieważ uwielbiamy porządkować. — M. C. Escher Z a n i m rok 2003 zaczął się n a dobre, proces był już w dosyć z a a w a n s o w a n y m stadium. W październiku 2002 roku w witrynie W i r e d N e w s porzucono tradycyjny tabelkowy układ n a rzecz CSS. Nie był to pierwszy projekt tego typu w o w y m czasie, ale z pewnością dotyczył witryny o największym natężeniu ruchu. G ł ó w n y projektant D o u g l a s B o w m a n wybrał dobrze znaną, o ugruntowanej pozycji rynkowej m a r k ę i stworzył n o w y , fascynujący projekt. Użycie takich nowatorskich technologii jak C S S i X H T M L tłumaczył chęcią „ w y d o b y c i a sieci z czeluści m r o k u " (zvww.wired.eom/news/culture/0,1284,55675,00.html). Przez kilka następnych miesięcy prawie m o ż n a było słyszeć granie świerszczy. Witryn a W i r e d N e w s w y d o b y ł a arkusze stylów z m u r ó w akademickich, o d w y m a c h u j ą c y c h szabelkami szerzycieli standardów i przeniosła je p e w n i e i bez k o m p l e k s ó w d o g ł ó w n e g o nurtu sieci.

    O siatkach i układach U k ł a d y swoje istnienie zawdzięczają praktyce projektowania przy użyciu siatki. Dzieląc stronę n a logiczne i powtarzalne sekcje, m o ż n a w chaosie zaprowadzić porządek. Ponieważ stronę b ę d ą oglądać ludzie, którzy chcą u p o r z ą d k o w a n e g o życia, treść m u s i być zorganizowana w logiczną prezentację. D o jej uzyskania służą właśnie siatki i tworzone z nich układy. D o s k o n a ł y m przykładem układu z n a n e g o k a ż d e m u człowiekowi jest gazeta codzienna. K a ż d e g o dnia na jej pierwszej stronie znajdują się dziesiątki historii i e l e m e n t ó w opisujących najprzeróżniejsze tematy.

    Rozdział 9. Tworzenie układów CSS Spójrz n a układ gazety widocznej n a rysunku 9.1. Z w r ó ć u w a g ę na ilość tekstu na tylko tej jednej stronie oraz różne rodzaje historii i informacji.

    U t a h ' *

    [ \ II I I ' I : \ U i. \ r

    V o i c K SIMCE

    W W W . 8 L T R I B . LAKERS 123, J A Z Z 109: UTAH D0ESNT GET MUCH OF A CHANCE. Dl

    HS^'

    INJERUSALEM

    ®

    Avolatik goodbye toBhutto

    TOP INVESTMENT CPAUC TH AUmn SCAMS TO AVOID

    U K looks too good, think agata. El

    fjul»ł III* In tlto h»«rt of Uw blbłtc«] world. Cl

    P a k i s t a n o n fire

    1871

    Farewell, friend or beat it, blowhard?

    As unaM spreads iiciws the iwition. itflMńiiUcIiTtin lin cslrrmbt linUil t« »l-QaKki*Miind tlić assasmiatiiia

    Liteafter Anderson: L o v e h i m , l o a t h e h i m , legacyispianting thesealal ncee that Salt could «rf*fc"ew»3n4hl»«>4v sterani- Lakę City i

    b u t Salt Lakc City will ncvcr bc the same Hi rn mi, r. .HSM>

    .

    nwli>iih«>torllow

    B

    :

    m.ich"u,sxKy ! w v - S - KtnrwsłWatwMlta) Doadly blaze

    Son dics tning to help fkthcr

    actualfyOeeome an interestra w rit>TwrłłHwiN™mjn.<ł-mi <* piace to Kve

    ANI)1-RS()N'S I.KGACY » Iłomorungi'flaję
    A surpriso uoto 1 aytorwiOe man Bush lyjccts dcfcusc bill, says it afi?ły„ iskilM may hrinfi |>riccy lawsuits to lniq at lir ri--cnti-rs the Imniinn housc

    Samoan adoption scandal

    Affidavits: Parents knew they were giving up rights can pnwew' Miyamisrcl Wal

    IPRf Rysunek 9.1. Układ gazety oparty na kilku kolumnach (autor zdjęcia theogeo: http://tinyurl.com/3b3poy)

    244

    Rozdział 9. Tworzenie układów CSS G d y b y treść nie została podzielona na kolumny, widoczne n a rysunku 9.2, pierwszą stronę gazety bardzo trudno czytałoby się (ponadto dzięki projektantom n a jednej strome m o ż n a upchnąć więcej treści).

    U TA II 'S 1 X 1> li 1* E N D F. NT VoiCK SlNCK 1K

    TOP INVESTMENT SCAMS TO AV0ID

    LAKERS 123, J A 2 2 109: UTAH DOESNT GET MUCH OF A CHANCE. Dl

    IN JERUSALEM

    Ufelooka too good. thlnfc again. Cl

    A qutot III* In the h*«rt ol th« blbllcol world. Cl

    Pakistan on fire . „

    Avolatile goodbye toBhutto

    Fareweli, f n e n d -

    or beat iłi bi°whanł?

    As trama spłwtiiU .'ktoss ihe uation, oflW-iiibcliiiiii an wHnanfet linkwl (o al-Q.titla h hcltiml the awiKiiiialitm

    Life after Anderson: Lovc him, loathe hin but Salt Lake City will never be the .same 363*1 lł»t >)ll«l S* !';rfttnlunKrtfltehIłowi*. piace

    g J itow

    Dg

    .fn
    Sondiestiying to help fatlicr

    i M P H

    „H.iw r . j f uillfcs. c, ' . • • n - ^ i i u n • Fn Krom oraiip.' flags antł OHnipks tolmpcath Bush* A6 SI ;nu B,t'0 M •> See a galłery ofphotos coverirtg Rocky Amfcrsons cight-year tenure as ttiayor. Saraoan adoption scandaJ

    T;i)fn"t know his Bush tvjects ddćnsc bill, says it iliul had jtunpwltosafcty.ił kilJul inay bring prfoey lawswtts to Inuj as hc rc-cotm the łtunung łiouw

    Affidavits: Parcnts k n e w they wcrc giving u p

    railtfchl *h>ut* MM K«-Jl'

    rights

    ciujpnwmt«nj;ht. ,u.w>«™> ir.-^-, a ..., sn' arai*«l 1,'tnh rmtple ktt h"'<1**™telt"wwl'

    Corning Sunday Trihune honors Ulahnsof2007 Koa (oma w*«-w* n«n tąm «* «K!> lOf Jłf**

    «* tf* >OtSX

    ... •SilttahiptMi.fur tMWjiMtfttółłhMsmoBa. tiutlwlttwtóma *»» MmcM »MJtłWtS łl KM-WW l S i Wl W® ' : 'Kto! HK»(eS»S«/.l>lłi>>(lly

    W

    I

    •mm

    Rysunek 9.2. Kolumny zostały wyróżnione

    245

    Rozdział 9. Tworzenie układów CSS K o l u m n y , które o d lat stosuje się w druku, m o g ą zdziałać cuda także w internecie. Przykład e m m o ż e być witryna M i d S o u t h Credit Union, która przeszła face lifting, a starą wersję przedstawiono n a rysunku 9.3.

    0 ^

    O

    ©

    MidSouth Federal Credit Union % <'

    IS?

    € l

    ^ hle://localhost/Users/christopher/Work/Clients/Mid5

    't^Coogle

    _ MidSouth Federal Cred... j

    a v a MidSouth Kiss y o u r worries g o o d b y e . And say hello to frvendty faces. • FREE Personal Checking

    » FREE internet Banking & Bill Pay • 24-Hour ATM

    • w&ACartJOptloiw • Great Loan Rates&Mofef

    H Home & Family Finance

    A A . MidSouth FEDERAL C«ED!T UMtON

    CI) MEMBBRS MORTGAGE

    M

    Thii Cradlt Union li fadarally iniurad by tha National Cradll Union Adminiilralion

    ^

    ^

    CREDIT UNIONS'

    Click 10 yerify

    <£ 2004 MidSouth FCU. All rights reserved.

    LENDER

    About Us | Products | Senrtces | Prlvacv S t a t e m e n t | Contact Us | Site Map This web site is hosted by Earthiink. This site was designed by CU SupportNet. It is best v«wed with Microsoft I n t e r n e t Explorer 5.x or Netscape 4 . 7 x and wrth a display setting of 800 x 600 pixels

    Rysunek 9.3. Poprzedni projekt witryny MidSouth Federal Credit Union

    Jak widać, elementy zostały tak rozmieszczone, aby było jak najmniej pustego miejsca. Wypełniają prawie każdą lukę. Ponieważ niektóre są trójkątne lub ustawione p o d kątem 45 stopni, odbiło się to na spójności prezentowania treści. P o przeróbkach polegających n a utworzeniu d w u k o l u m n o w e g o układu o stałej szerokości (rysunek 9.4) widać, że na stronie z a p r o w a d z o n o porządek. M e n u nawigacyjne zostało okiełznane i uporządkowane, ale nie schowane, a treść m a nieco wolnej przestrzeni w o k ó ł siebie.

    246

    Rozdział 9. Tworzenie układów CSS ©

    Q

    M i d S o u t h Federal Credit Union

    O l

    0

    Back

    I

    D

    https.//www.msfcu.biz/

    B

    Reload

    Federal Cred.. O MidSouth " Contact Us i About MidSouth j Your Privacy

    a v a MidSouth F E D E R A L

    CREDIT

    MIDSOUTH ONLINE

    SAVINGS & CHECKING

    Home Banking f U>«in >

    News Llke all credit unloras, MidSouth Federal Credit Union malls a quarterly newsletter to members. Learn More >

    U N I O N CARD SERVICES

    LOANS

    SPECIALITY SERVICES

    C U S T O M E R SERVICE

    READY FOR 2

    SOMETHING DIFFERENT? Try b a n k i n g at the s p e e d of light... N o lines, just great service.

    Anytime Advisor , Anytime Advisor Coaches W CU Members Mortgages Fast Track Auto Loans Home & Family Finance MidSouth Promotions Spedals & Programs

    CLICK HERE T O LEARN MORE

    •

    About Home Banking With MidSouth FCU Home Banking y o u can access y o u r accounts 24 hours a d a y , 7 days a week, f r o m just about anywhere. You can also... •

    Pay Bills Online

    •

    Check Balances

    *• Transfer Funds Between MidSouth FCU Savings Accounts •

    Transfer Funds from MidSouth FCU Savings Accounts to Make Loan Payments

    •

    Download Transaction History to Microsoft Money and Qufcken

    y

    Receive 24/7 Customer Services

    Learn About e-Statements >

    Learn About EZCall >

    MidSouth Online | Savings & Checking | Card Services | Loans | Specialty Services | Customer Service t S t Equal Housing Lender

    B I

    Federally Insured By The NCUA

    Copyright 2006 MidSouth Federal Credit Union. All Rights Reserved.

    Rysunek 9.4. W odświeżonym projekcie postawiono na układ składający się z dwóch kolumn

    Robienie tego, co w druku jest niemożliwe T y m , czego nie m o ż n a zrobić w druku, a m o ż n a n a stronie internetowej, jest utworzenie płynnego układu. Spójrz n a witrynę Molly E. Holzschlag (molly.com), która jest przedstawiona na rysunku 9.5. Pomijając świeży schemat kolorystyczny, układ tej witryny jest niezwykle elastyczny. Zamiast pójść na łatwiznę, tworząc układ o stałej szerokości, Molly zdecydowała się na b u d o w ę witryny dopasowującej się d o rozmiaru o k n a przeglądarki użytkownika. Zobacz n a rysunku 9.6, jak g ł ó w n a ś r o d k o w a k o l u m n a wygląda, kiedy jest rozciągnięta d o m a k s y m a l nej szerokości w rozdzielczości 1280x600. Zobaczmy, jak tworzy się układ, p o d o b n y d o tego n a stronie Molly, ale trzykolumnowy.

    247

    Rozdział 9. Tworzenie układów CSS

    MOLLY.COM ELSEWHKRE Q: W h a t ' s t h i s web site?

    JŁECENT ^twitter Sucked the tging Out of Me

    End to Browser Murder Tales Best Bets for Browsfi Bug Bashing

    A: I ' m Molly E. Holzschlag, and t h i s web site shares m y w e b d e v e l o p m e n t w o r k a n d p e r s o n a l t h o u g h t s . T h i n k of it as a personality site. Given t h a t , one hopes 1 have an i n t e r e s t i n g e n o u g h personality t o keep you e n t e r t a i n e d for at least a l i t t l e while. i~°l SATUROAY s JANUARY 2 0 0 8 T W I T T E R SUCKED T H E BLOGCMNG O U T OF M E I often p o s t p i c t u r e s and w o r d s a b o u t weather. B i t s of m e here and there. T h e n , somehow, T w i t t e r sucked t h e blogging o u t of m e . Made m e w r i t e in 1 4 0 characters less. People ask " w h y d o n ' t you blog so m u c h a n y m o r e , Molly? I s it your w o r k ? "

    Yes Ladies and 1. We Hav« a SraHey FUCKR

    Nah, i t ' s T w i t t e r . Sucked t h e blog out of m e i n 2 0 0 7 . I ' m a l m o s t ready t o m a k e 2 0 0 8 T w i t t e r - f r e e . Close t o m a k i n g it I M - f r e e too.

    End of Support for Netscape web browsers The Netscape Blog Weil, ifs official. Bye bye Netscape. We've loved you, we've hated you, we've pretty much fbrgotten you by now.

    base2, which Dean Edwards says he's put years into in order "to solve yarious problems JavaSeript implementations and a littJe sugar to the

    Hiy

    Rysunek 9.5. Witryna internetowa Molly E. Holzschlag

    MOI.LY.COM Q: W h a f s this web site?

    P?

    A: I ' m Molly E. Holzschlag, and this web site shares my w e b development w o r k and persona! thoughts. Think of it as a personality site. Given that, one hopes I have an interesting enough personality to keep you entertained for at least a little while. USATOROAS! 3 JANUARY 2 0 0 S TWITTER SUCKED THE BLOGGING OUT o r M E I often post pictures and words about weather. Bits of me here and there. Then, somehow, Twitter sucked the blogging out of me. Made me write in 140 characters less. People ask "why don't you blog so much anymore, Molly? Is it your work?" Nah, i f s Twitter. Sucked the blog out of me in 2007. I ' m almost ready to make 2008 Twitter-free. Close to making it IM-free too. How about you? Filed under: policles, pop culture, software, society, moliy asks you, Posted by: Molly | 4:18 p m | Comments ( 1 )

    Weil, ifs official. Bye bye Netscape. We've loved you, t»e've hated you, we've pretty much forgotten you by now.

    base2, which Dean Edwards says he's put solve yarious problems with inconsistent JavaScript a little sugar to the language at the same time." is now In public

    HOSUNaW 3 0 Dfil F UBEK 2 0 0 7

    Rysunek 9.6. Układ witryny rozciąga się, dopasowując swój rozmiar do okna przeglądarki

    248

    Rozdział 9. Tworzenie układów CSS

    Pozycjonowanie przy użyciu CSS — podstawy Przed rozpoczęciem replikacji układu M o l l y zatrzymamy się na chwilę, aby przejrzeć niektóre techniki pozycjonowania p r z y u ż y c i u CSS. Jak dowiedziałeś się w poprzednich rozdziałach, każdy element w dokumencie H T M L zajmuje jakieś miejsce w jego układzie. Elementy blokowe — np. nagłówki, elementy di v, listy i akapity — ustawiają się jeden pod drugim jak bloki. Rozciągają się wszerz, aby zająć całą dostępną im w t y m kierunku przestrzeń. Natomiast elementy liniowe układają się poziomo w zawierających je elementach blokowych, jeden obok drugiego. D o tej kategorii należą np. odnośniki, obrazy i elementy, takie jak em czy strong. Początkowo każdy element w dokumencie bez dołączonego arkusza stylów ma pozycję statyczną, czyli jego położenie nie zostało zmienione w stosunku do pierwotnego. Dlatego właśnie akapit pojawia się pod nagłówkiem, a obraz w e w n ą t r z elementu di v. Oficjalna nazwa tego rodzaju pozycjonowania to „normalny u k ł a d " dokumentu. Jeśli spojrzysz na niesformatowany za pomocą arkuszy stylów dokument H T M L , zobaczysz, że elementy blokowe (takie jak p, hl i di v) układają się pionowo w zawierających je blokach, bezpośrednio jeden pod drugim. Natomiast elementy liniowe (takie jak span, a oraz img) układają się w kontenerze poziomo, jeden obok drugiego. Jeśli nie dostarczysz żadnych reguł CSS, domyślne rozmieszczenie elementów pozostanie nienaruszone. Oczywiście, naszym celem jest wszystko pozmieniać. Jestem niczym, jeśli można przewidzieć moje posunięcia. T y m , co sprawia, że CSS jest tak d o b r y m narzędziem do tworzenia układów, jest możliwość przesłaniania domyślnych reguł pozycjonowania i tworzenia niezwykle skomplikowanych układów bez otwierania nawet jednego elementu td. M o ż n a w y j ą ć d o w o l n y element z normalnego układu za pomocą prostej reguły ustawiającej nową wartość własności posi t i on: P

    {

    position: absolute;

    } Własność posi t i on może poza stati c przyjmować jeszcze t r z y inne wartości: •

    fixed,

    •

    relative,

    •

    absolute.

    Każda z tych trzech wartości u m o ż l i w i a wyjęcie elementu z normalnego układu dokumentu na różne sposoby i umieszczenie go w i n n y m miejscu strony. P r z y j r z y m y się dokładnie d w ó m z nich — rei ati ve i absol ute — temu, co je łączy oraz jak można je wykorzystać podczas opracowywania układów.

    249

    Rozdział 9. Tworzenie układów CSS

    Pozycjonowanie

    bezwzględne

    Położenie elementu pozycjonowanego bezwzględnie określa się za pomocą własności top, right, bottom i l e f t : div#content { position: absolute; l e f t : 10px; top: 100px;

    } Własności 1 eft i top w p o w y ż s z y m kodzie określają przesunięcie elementu di v z atrybutem i d o wartości content. Element ten, zamiast pojawiać się między znajdującymi się za i przed n i m elementami b l o k o w y m i , zostaje całkowicie w y j ę t y z normalnego układu dokumentu. Gdzie w takim razie się pojawi? A b y znaleźć odpowiedź na to pytanie, spójrz na poniższy kod, który powinien znajdować się w poprawnie sformatowanym dokumencie X H T M L :

    To jest akapit w zewnętrznym bloku.

    To j e s t akapit w wewnętrznym bloku.

    Są to d w a skromne elementy di v, z których jeden o identyfikatorze i nner jest zagnieżdżony w d r u g i m o identyfikatorze outer. K a ż d y z nich zawiera jeden akapit, a więc nie ma tu niczego wyjątkowego. A b y przenieść ten kod na ekran, zastosujemy podstawowe formatowanie: #outer { background: #DDF; border: 4px solid #006; height: 300px; margin: 120px 20px 0;

    } #inner { background: #FDC; border: 4px solid #930;

    } Oczywiście, te d w i e reguły także nie mają za zadanie nikogo powalić na kolana. Pierwsza dotyczy elementu div z identyfikatorem outer. Ustawia niebieskie obramowanie, fioletowy kolor tła, wysokość 300 pikseli oraz zwiększa marginesy, aby przesunąć element 120 pikseli w dół i odsunąć o 20 pikseli o d obu krawędzi bocznych. D r u g a reguła ustawia jasny kolor tła i o d p o w i e d n i kolor obramowania dla elementu di v z identyfikatorem i nner. Tak właśnie ma być: czerwony na niebieskim. N i g d y nie dyskryminowałem żadnych połączeń p r z y zestawianiu p r z y k ł a d ó w kodu.

    250

    Rozdział 9. Tworzenie układów CSS Z a n i m z h u k i e m zamkniesz tę książkę, wstrząśnięty t y m , co zrobiłem, zobacz, jak te d w a elementy układają się na stronie. Jak w i d a ć na r y s u n k u 9.7, p o z w o l i ł e m sobie zastosować podstawowe formatowanie pisma. D z i ę k i zastosowaniu tych, muszę p r z y z n a ć , k r z y k l i w y c h k o l o r ó w i włączeniu o b r a m o w a ń widać, że elementy znajdują się na swoich n o r m a l n y c h pozycjach — blok w e w n ę t r z n y jest dzieckiem zewnętrznego i jest to odzwierciedlone w aktualn y m w y g l ą d z i e strony.

    wsmm

    t> Pozycjonowanie e l e m e n t ó w - Mozilla Firefox 1 El*

    Edycja W -

    Widok C

    X

    Historia H (

    Zakłada

    Narzędzia

    Pomoc

    httpi/Aical

    -> •

    H -

    To jest akapit w zewnętrznym bloku.

    To jest akapit w wewnętrznym bloku.

    Zakończono

    Rysunek 9.7. Mdłe elementy w normalnym układzie dokumentu

    Zmieniając wartość własności posi t i on w e w n ę t r z n e g o elementu, m o ż n a jednak zmienić zależność rodzic-dziecko. D o d a m t r z y wiersze k o d u d o r e g u ł y #inner: #inner {

    background: #FDC; border: 4px s o l i d #930; position: absolute; right: 20px; top: 20px;

    } Różnica jest doskonale w i d o c z n a (rysunek 9.8). W i z u a l n i e r o z e r w a ł e m z w i ą z e k rodzicdziecko m i ę d z y t y m i d w o m a elementami. M i m o że w e w n ę t r z n y di v nadal jest dzieckiem zewnętrznego w kodzie X H T M L , za pomocą CSS z m i e n i ł e m położenie tego pierwszego w dokumencie. Jest p o z y c j o n o w a n y b e z w z g l ę d n i e — przesunięty o 20 pikseli o d górnej i prawej k r a w ę d z i elementu body.

    251

    Rozdział 9. Tworzenie układów CSS Plik

    Edycja -

    Widok C

    X

    Historia .

    Zćttadkl (

    Narzędzia

    Pomoc

    §0

    jhttp://bcal

    To jest akapit w wewnętrznym bloku.

    Zakończono

    Rysunek 9.8. W kodzie element znajdujący się na górze jest dzieckiem dolnego. Dzięki użyciu deklaracji position: absolute; udało się ten blok wyjąć z głównego nurtu i wypozycjonować względem krawędzi okna przeglądarki

    W e w n ę t r z n y b l o k w normalnej sytuacji znajdowałby się na s w o i m z w y k ł y m miejscu w układzie d o k u m e n t u , w kontekście o k r e ś l o n y m przez inne elementy blokowe, które otaczają go w kodzie. Ta reguła zmieniła ó w kontekst i ustaliła jego położenie w z g l ę d e m k r a w ę d z i okna przeglądarki. Dlatego właśnie g ł ó w n y element d o k u m e n t u — html — jest n a z y w a n y pierwszym kontenerem. Stanowi o n p u n k t odniesienia d o p o z y c j o n o w a n i a w s z y s t k i c h znajdując y c h się w n i m elementów. Ponadto n o w y kontekst odniesienia elementu #i nner d o t y c z y także elementów, które się w n i m znajdują — tzn. zawartego w n i m akapitu. I n n y m i słowy, zmieniło się nie t y l k o położenie samego elementu di v, ale też w s z y s t k i c h znajdujących się w n i m elementów. Stanie się to bardziej oczywiste, jeśli dodasz d o p o z y c j o n o w a n e g o b e z w z g l ę d n i e b l o k u jeszcze kilka akapitów, jak na r y s u n k u 9.9. G d y d o w e w n ę t r z n e g o elementu div zostały dodane d w a akapity, o d z i e d z i c z y ł y one kontekst p o z y q o n o w a n i a swojego elementu nadrzędnego. Kolejną w a ż n ą rzeczą, na którą trzeba z w r ó c i ć u w a g ę na t y m r y s u n k u , jest to, że g d y z w i ę k s z y się w y s o k o ś ć b e z w z g l ę d n i e p o z y c j o n o w a n e g o elementu, zasłoni o n kawałek zewnętrznego. Pamiętaj, że stosując własność position na rzecz bloku, usuwasz go z normalnego układu. P r z y p o z y c j o n o w a n i u b e z w z g l ę d n y m przeglądarka nie rezerwuje miejsca dla takich elementów. Dlatego takie elementy zasłaniają inne elementy na stronie, c z y to p o z y q o n o wane w jakiś sposób, c z y nie. Jest to b a r d z o w a ż n a rzecz, o której należy pamiętać podczas b u d o w y układu. Wrócę d o niej i opiszę ją szczegółowo dalej.

    252

    Rozdział 9. Tworzenie układów CSS O Pozycjonowanie e l e m e n t ó w - Mozilla Firefox Plik

    Edycja

    Hldok C

    X

    Historia tu

    Jakladki (

    tlarzędzia

    Pomoc •j Google

    http ;//local

    To jest akapit w wewnętrznym bloku. Drugi akapit w wewnętrznym bloku. I jeszcze jeden akapit w wewnętrznym bloku. To jest akapit w zewnętrzem bloku.

    Rysunek 9.9. Dodanie większej ilości treści do bezwzględnie pozycjonowanego bloku pozwala zobaczyć, jak daleko został przesunięty

    Pozycjonowanie absolutnie

    względne

    C o jednak zrobić, aby zyskać jeszcze bardziej p r e c y z y j n ą kontrolę n a d p o ł o ż e n i e m w e wnętrznego bloku? W y o b r a ź sobie np., że chcesz go p o z y c j o n o w a ć nie w z g l ę d e m okna przeglądarki a w z g l ę d e m k r a w ę d z i zewnętrznego elementu di v. O k a z u j e się, że o p i s y w a n e dotychczas pozycjonowanie b e z w z g l ę d n e jest t y l k o domyślnym rodzajem. Jeśli b e z w z g l ę d nie p o z y c j o n o w a n y element nie znajduje się w i n n y m p o z y c j o n o w a n y m elemencie — tzn. wszystkie jego nadrzędne elementy są p o z y c j o n o w a n e domyślnie, c z y l i statycznie — zostanie w y p o z y q ' o n o w a n y , tak jak na r y s u n k u 9.4, c z y l i w z g l ę d e m k r a w ę d z i pierwszego b l o k u kontenera, a więc elementu body. C o zatem dzieje się, jeśli element p o z y c j o n o w a n y b e z w z g l ę d n i e zostanie u m i e s z c z o n y w i n n y m p o z y c j o n o w a n y m elemencie? Spójrz, co się stanie p o ustaleniu p o z y q o n o w a n i a zewnętrznego elementu di v, k t ó r y — jak w i e m y — jest elementem n a d r z ę d n y m elementu pozycjonowanego bezwzględnie. #outer { background: #DDF; border: 4px s o l i d #006; height: 300px; margin: 120px 20px 0; position: r e l a t i v e ;

    }

    253

    Rozdział 9. Tworzenie układów CSS Jak w i d a ć na r y s u n k u 9.10, z m i a n y w p o z y c j o n o w a n i u tego elementu mają uderzający efekt. P o n i e w a ż z e w n ę t r z n y element jest teraz pozycjonowany, stanowi kontekst pozycjonowania dla znajdujących się w n i m elementów p o z y c j o n o w a n y c h bezwzględnie. Dlatego przesunięcie r i g h t : 20px i top: 20px nie jest teraz obliczane w z g l ę d e m k r a w ę d z i g ł ó w n e g o elementu d o k u m e n t u a w stosunku d o kontenera di v p o z y c j o n o w a n e g o w z g l ę d n i e (posi t i o n : rei ati ve). A b y u t r w a l i ć sobie tę wiedzę, z m i e n i m y deklarację top: 20px; w regule #inner na bottom: 20px; (efekt p r z e d s t a w i o n o na r y s u n k u 9.11): #inner {

    background: #FDC; border: 4px s o l i d #930; p o s i t i o n : absolute; r i g h t : 20px; bottom: 20px;

    } Zamiast t w o r z y ć przestrzeń m i ę d z y g ó r n y m i k r a w ę d z i a m i elementów w e w n ę t r z n e g o i zewnętrznego, ten p i e r w s z y został umieszczony w odległości 20 pikseli o d dolnej k r a w ę d z i d r u g i e g o — w y m a g a ł o to m o d y f i k a c j i t y l k o jednej deklaraqi w regule. Zalety tej metody opisuję dalej. N a razie taka znajomość zachowania elementów p o z y c j o n o w a n y c h b e z w z g l ę d nie w elementach p o z y q ' o n o w a n y c h w z g l ę d n i e p r z y d a C i się p r z y t w o r z e n i u elastycznego t r z y k o l u m n o w e g o u k ł a d u w s t y l u w i t r y n y Molly.com.

    O Pozycjonowanie e l e m e n t ó w - Mozilla Firefox 0k

    Edycja

    &Uok e

    tllslnrla ».

    Zakłada 1

    Narzędzi

    Pomot

    z a

    http://local

    To jest akapit w zewnętrznym bloku. To jest akapit w wewnętrznym bloku. Drugi akapit w wewnętrznym bloku. I jeszcze jeden akapit w wewnętrznym bloku.

    Zakończono

    Rysunek 9.10. Dzięki ustawieniu własności position zewnętrznego bloku na relative wewnętrzny blok jest pozycjonowany względem niego

    254

    Rozdział 9. Tworzenie układów CSS W Pozycjonowanie e l e m e n t ó w - Mozilla Firefox Plik

    Edycja Widok

    Historia

    Zakładki

    Narzędzia

    Pomoc

    1

    To jest akapit w zewnętrznym bloku.

    To jest akapit w wewnętrznym bloku. Drugi akapit w wewnętrznym bloku. I jeszcze jeden akapit w wewnętrznym bloku.

    Rysunek 9.11. Uprzejmości CSS zawdzięczam, że mogłem umieścić element w prawym dolnym rogu kontenera. Czy ta technologia nie jest piękna?

    Układ trzykolumnowy — kładzenie fundamentów Tak jak strona g ł ó w n a H a r v a r d University, która została p r z e k o n w e r t o w a n a na X H T M L i CSS (rozdział 1.), nasz u k ł a d musi zostać oparty na l e k k i m i o d p o w i e d n i o s f o r m a t o w a n y m kodzie. W z w i ą z k u z t y m , zacznij o d sporządzenia inwentarza obszarów treści, które będą występować na stronie (rysunek 9.12). Skoncentruję się na g ł ó w n y c h obszarach u k ł a d u strony głównej, takich jak: •

    p o z i o m y n a g ł ó w e k obejmujący górną część strony,

    •

    g ł ó w n a k o l u m n a ś r o d k o w a zawierająca najważniejszą treść i inne elementy,

    •

    k o l u m n y lewa i p r a w a zawierające treść wspomagającą, taką jak d o d a t k o w a n a w i g a cja, banery reklamowe itp.

    P o m y ś l o k a ż d y m z t y c h e l e m e n t ó w jak o kontenerze na treść. W k a ż d y m t a k i m b l o k u możesz umieścić inne elementy z treścią i d o k a ż d e g o z n i c h zastosować o d p o w i e d n i e r e g u ł y formatujące.

    255

    Rozdział 9. Tworzenie układów CSS molly.com lii http://moiiy.com/ fijck

    Re!oad

    'Q»G Location

    ,„m 0 «y.co m

    Nagłówek

    Lewa

    Środek

    Prawa

    Rysunek 9.12. Rozmieszczenie obszarów treści na stronie, które należy utworzyć w kodzie XHTML (ze względu na ograniczoną ilość miejsca nie pokazano stopki)

    O p r a c o w a n i e takiego elastycznego t r z y k o l u m n o w e g o u k ł a d u jest g ł ó w n y m celu tego rozdziału. G d y będzie j u ż g o t o w y , m o ż n a przejść d o stylizowania i n n y c h elementów, zgodnie z w ł a s n y m gustem. A zatem koncentrujemy się na t y m szkielecie — nagłówek, treść oraz lewa i p r a w a kolumna — aby dojść do profesjonalnie wyglądającej strony w efekcie k o ń c o w y m .

    Pisanie kodu XHTML — od makiety do gotowego

    projektu

    Pamiętając o w s z y s t k i m , co d o tej p o r y zostało powiedziane, napiszę k o d X H T M L tworzący o p r a c o w a n y wcześniej szkielet (listing 9.1).

    Listing 9.1. Podstawowy kod układu trzykolumnowego

    256

    Rozdział 9. Tworzenie układów CSS Mój trzykolumnowy układ

    Lewa kolumna.

    Jakieś podstawowe informacje.

    < ! - - Więcej t r e ś c i . - - >
    Witaj w moim układzie strony.

    Certe, inquam, pertinax non ero tibique, si mihi probabis ea...

    < ! - - Więcej t r e ś c i . - - >
    Pragnąc odzwierciedlić w kodzie X H T M L strukturę przedstawioną na rysunku 9.12, oznaczyłem wszystkie cztery sekcje w odpowiedni sposób, tzn. u ż y ł e m elementów di v o określonych identyfikatorach. K a ż d y z tych elementów odpowiada jednej sekcji. Zatem di v z identyfikatorem header odpowiada nagłówkowi, l e f t — lewej kolumnie itd. Ponadto na dole strony pozwoliłem sobie dodać stopkę. Identyfikatory

    użyte w tym przykładowym

    ter wyłącznie demonstracyjny. miejscu ekranu są wyświetlane, zbyt przyjemnie, dowała po prawej

    Nazywając

    kodzie (i w pozostałej elementy

    wiążesz swój kod z jedną

    gdybyś kiedyś zdecydował

    części rozdziału)

    według tego, jak wyglądają konkretną

    się przeprojektować

    prezentacją.

    mają

    charak-

    lub w którym Nie byłoby

    witrynę i lewa kolumna

    wylą-

    stronie.

    Lepiej zatem przy tworzeniu nazw elementów

    brać pod uwagę znaczenie znajdującej się w nich

    treści. I tak lepszą nazwą zamiast r i ght mogłaby być a d v e r t i s i ng albo zamiast 1 e f t np. subnav. Nie ma jednego poprawnego rozwiązania tej kwestii. Należy zawsze kierować się zasadą, aby tworzyć jak najbardziej opisowe nazwy, co zapewnia jeszcze lepsze oddzielenie

    prezentacji

    od struktury.

    257

    Rozdział 9. Tworzenie układów CSS W każdej sekcji strony w s t a w i ł e m nieco nieskomplikowanej (i zapewne dzięki temu pięknej) treści służącej jako tymczasowa makieta. Jednak nawet podczas takich w s t ę p n y c h c z y n n o ści staram się zachować p r a w i d ł o w ą strukturę dokumentu. A to oznacza, że najważniejszy n a g ł ó w e k został oznaczony jako hl, w obu kolumnach b o c z n y c h u ż y ł e m n a g ł ó w k ó w h2, a reszta treści została opisana o d p o w i e d n i o znacznikami listy i akapitów. Bez ż a d n y c h reguł s t y l i s t y c z n y c h d o k u m e n t w przeglądarce nie w y g l ą d a imponująco (rysunek 9.13).

    Lubisz jabłka?

    Lewa kolumna. Jakieś podstawowe informacje

    Prawa kolumna. • Wiesz, że Hsty są me do pobicia? • Naprawdę. • Nie oszukuję.

    Witaj w moim układzie strony. Certe, mquam, pertinax non ero tibiąue, si mihi probabis ea..

    Te jabłka byfy bardzo smaczne.

    Rysunek 9.13. Dokument HTML bez formatowania za pomocą stylów

    W t y m momencie staje się widoczne, jak bardzo potrzebny jest bogaty semantycznie i dobrze oznaczony kod. Jeśli prezentaq'ę d o k u m e n t ó w opracowujesz p r z y u ż y c i u k a s k a d o w y c h a r k u s z y stylów, musisz w z i ą ć p o d uwagę, jak strona będzie w y g l ą d a ł a u t y c h u ż y t k o w n i ków, k t ó r z y u ż y w a j ą przeglądarki nieobsługującej tej technologii. W c h o d z ą c na stronę, która w y g l ą d a , tak jak na r y s u n k u 9.9, odwiedzający m o g ą nie dostrzec T w o j e g o skrupulatnie opracowanego projektu. N a d a l jednak będą w stanie uzyskać dostęp do treści. Stąd użycie w n a g ł ó w k u i stopce p o z i o m y c h l i n i i (znaczniki hr). M i m o że elementy te zostaną później u k r y t e za pomocą CSS, stanowią doskonały separator treści w przeglądarkach, które nie obsługują CSS. M ó w i ą c bardziej konkretnie, w e ź m y np. d w a p o z i o m y n a g ł ó w k ó w u ż y t e w kodzie strony. N o r m a l n i e w i d z ą c y u ż y t k o w n i c y przeglądający ją w u r z ą d z e n i u nieobsługującym CSS o d r a z u zorientują się, że napis Witaj w moim układzie strony ma większą w a g ę niż n a g ł ó w k i kol u m n bocznych. P r o g r a m y czytające informują o p o z i o m i e o d c z y t y w a n e g o nagłówka, dzięki c z e m u n i e w i d z ą c y u ż y t k o w n i c y będą m o g l i szybko zorientować się w hierarchii dokumentu. Jak z w o l e n n i c y dostępności p o w i e d z ą , n a j w i ę k s z y m n i e w i d z ą c y m u ż y t k o w n i k i e m internetu jest Google, c z y l i — inaczej m ó w i ą c — w y s z u k i w a r k i internetowe nie są zainteresowane w y g l ą d e m stron, a ich zawartością. Zastosowanie tego rodzaju inteligentnego k o d u nie tylko u ł a t w i a nawigację p o w i t r y n i e l u d z i o m , lecz r ó w n i e ż u m o ż l i w i a w y s z u k i w a r k o m o d p o w i e d nie zindeksowanie stron.

    258

    Rozdział 9. Tworzenie układów CSS

    Warstwa stylów Wracając do tematu, listing 9.2 zawiera kilka podstawowych reguł CSS, które zastosujemy, aby nieco poprawić w y g l ą d treści.

    Listing 9.2. Podstawowe reguły CSS dla dokumentu body { color: #000; font: 76%/1.5em „Lucida Grandę", Verdana, Geneva, Helvetica, sans-serif; margin: 0; padding: 0;

    } h l , h2 { font-family: „Trebuchet MS", Verdana, Geneva, Helvetica, sans-serif; font-wei ght: normal; line-height: lem; margin-top: 0;

    } #header { background-color: #DFD; border: 2px solid #060;

    } #footer { background-color: #FDD; border: lpx solid #C00;

    } # l e f t , #right { background-color: IDDF; border: 2px solid #00C;

    } #header hr, #footer hr { display: none;

    } Pierwsza definiuje kolor i rodzaj pisma dla elementu body. Definicje te zostaną odziedziczone przez wszystkie pozostałe elementy w dokumencie, z w y j ą t k i e m tych, których bardziej szczegółowe reguły je przesłonią. Zmieniając własność font-fami l y n a g ł ó w k ó w (hl i h2), przesłaniamy odziedziczone wartości i stosujemy inny styl niż domyślny. Dzięki temu, m a m nadzieję, p o w i n n y one wyróżniać się nieco na tle reszty elementów. Następne trzy reguły definiują obramowanie i kolor tła g ł ó w n y c h sekcji dokumentu — jaskrawozielony w nagłówku, czerwony w stopce oraz niebieski w kolumnach bocznych. M o i m celem jest stworzenie kontrastu, a nie projektowanie z rozmachem. Jak widać na r y sunku 9.14, udało m i się.

    259

    Rozdział 9. Tworzenie układów CSS x

    f M ó j trzykolumnowy układ - Mozilla Firefox Pik

    Edycja

    B P I !

    Widok C

    X

    Historia &

    Zakładki C

    Narzędzia

    Pomoc ^"""'l [ H H ^ f e

    httpi/Zbcał"

    '

    Lubisz jabłka?

    Lewa kolumna. Jakieś podstawowe informacje.

    Prawa kolumna. • "Wiesz, że Esty są nie do pobicia? • Naprawdę. • Nie oszukuję.

    Witaj w moim układzie strony. Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliąua Ut emm ad mimm veniam, qms nosliud exercitation ullamco labons msi ut aliquip ex ea commodo consequat. Duis aute imre dolor in reprehendent in voluptatr ve]it esse cillum dolore eu fugiat nulla panatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciahs unde omnis iste natus error sit vohiptatem accusantium doloremque laudantium, totam rem apeńam, eaque ipsa quae ab illo mventore ventatis et quasi architecto beatae vitae dicta sunt exptcabo. Nemo enim ipsam yoluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia conseąuuntur magni dolores cos qui ratione voluptatem sequi nesciunt Neque ponro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima vemam, quis nostram exercitahonem uDam coiporis suscipit labonosam, msi ut aliquid ex ea commodi conseąuatur? Quis autem vel eum nire reprehendent qui in ea voluptate velit esse quam niM molestiae consequatur, vel illum qui dolorem eum fugiat quo vohjptas nulla panatur? Te jabłka byty bardzo smaczne

    Zakończono

    Rysunek 9.14. Dokument HTML po zastosowaniu podstawowych reguł CSS definiujących kolory i własności pisma

    Wprowadzenie

    do zasad

    pozycjonowania

    W i e m y , gdzie k o ń c z y się k a ż d y element, m o ż e m y zatem przystąpić do o p r a c o w y w a n i a układ u (rysunek 9.15): #left { position: absolute; l e f t : 0; top: 0; width: 175px;

    } #right { position: absolute; r i g h t : 0; top: 0; width: 175px;

    }

    260

    Rozdział 9. Tworzenie układów CSS ^ M ó j t r z y k o l u m n o w y układ - Mozilla Firefox Plik

    Edycja

    '

    Widok

    C

    Historia

    X

    &

    Zakładki

    (

    Narzędzia

    Pomoc

    http://bcal

    • Odnośnik 1 • Odnośnik 2 • Odnośnik 3 Jakieś podstawowe informacje.

    p\

    -> ' ! O^Googte

    P r a w a kolumna.

    Lewa kolumna.

    • Wiesz, że listy są nie do pobicia?

    m układzie strony.

    • Naprawdę.

    • Nie oszukuję. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doiore magna aliąua. lico laboris nisi ut aliąuip ex ea commodo conseąuat. Duis aute irure dolor in reprehenderit in vc Curabitur elementarni nulla sit '. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt molHt anim id amet erat. Integer venenatis.

    Praesenl adipiscing fringilla tellus. Praesent ullamcorper. ventatis et quasi architecto b eatae vilae dicta sunt explicabo. Nullam id erat. Morbi lobortis odio ut nisL Sed Nemo enim ipsam vohiptate m quia voluptas sit aspematur aut odit aut fugit, sed quia consequuntur magni dolores eos qui rati gravida posuere massa. Duis nesciunt. Neąue porro quisq uam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquai diam nunc, convalHs quis, incidunt ut labore et doiore nagnam aliquam quaerat voluptatem. sollicitudin ac, rhoncus quis, quam. Sed ullamcorper Ut enim ad minima veniam, [uis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi eon massa quis sem. Maecenas eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fiigiat quo v< eu mauris in velit dictum omare. Vestibułum malesuada Nullam tellus. i Te jabłka byty bardzo smaczne. Sed ut perspiciatis unde ornilis iste natus error sit voluptatem accusantium doloremąue laudantium, totam rem aperiam, eaąue

    Zakończono

    Rysunek 9.15. Pozycjonowanie bezwzględne umożliwia przemieszczenie kolumn bocznych, chociaż to jeszcze nie to

    Te d w i e reguły w y j m u j ą obie k o l u m n y z normalnego u k ł a d u elementów na stronie i p o z y c j o nują je bezwzględnie. K a ż d e m u z t y c h elementów div nadano szerokość 175 pikseli i w y s ł a no p o d górną k r a w ę d ź okna (top: 0;). Ustawienia położenia w p o z i o m i e (1 e f t : 0; dla lewej k o l u m n y i r i ght: 0; dla prawej) dopełniają efektu i stwarzają p o d w a l i n y p o d nasz t r z y k o l u m n o w y układ. Bloki l e w y i p r a w y zaczynają położeniem o d p o w i a d a ć s w o i m n a z w o m i p o w o l i w y ł a n i a się obraz k o l u m n . Jak jednak widać, d o końca jeszcze d ł u g a droga. K o l u m n y nachodzą na nagłówek, stopkę i g ł ó w n ą kolumnę z treścią. Pozycjonowanie b e z w z g l ę d n e s p o w o d o w a ł o w y j ę c i e ich z normalnego u k ł a d u elementów. O z n a c z a to, że pozostałe elementy — m i m o iż m o ż n a ich p o ł o żenie ustalić z dokładnością d o jednego piksela — nie odsuwają się, aby zrobić i m miejsce. N a l e ż y zatem w y k o n a ć kilka d o d a t k o w y c h czynności.

    Pamiętaj o pozycjonowaniu

    absolutnie

    względnym

    G d y zaczniesz zastanawiać się nad t y m problemem, p r z y p o m n i j sobie, że j e d y n y m p o w o dem, dla którego te d w a b l o k i są p o z y q o n o w a n e w z g l ę d e m elementu html, jest to, że nie są potomkami żadnego pozycjonowanego elementu. C o się stanie, jeśli to z m i e n i m y ? N a listingu 9.3 t r z y b l o k i p o d n a g ł ó w k i e m zostały umieszczone w elemencie div o identyfikatorze container.

    261

    Rozdział 9. Tworzenie układów CSS Listing 9.3. Wstawienie kontenera do kodu

    Lewa kolumna.

    < ! - - Więcej t r e ś c i . - - >
    Witaj w moim układzie strony.

    Certe, inquam, pertinax non ero tibique, si mi hi probabis ea...

    < ! - - Więcej t r e ś c i . - - >


    Kontener ten, z semantycznego punktu widzenia, nie wnosi nic do dokumentu. Puryści mogliby go nazwać sztuczką prezentacyjną, czyli elementem, którego zadaniem jest wyłącznie uzyskanie określonego prezentacyjnego celu. Jednak i kontener, i zastosowana na jego rzecz reguła CSS będą bardzo ważne dla naszego układu (rysunek 9.16). #container { position: r e l a t i v e ;

    } Ponieważ element di v pełniący rolę kontenera jest pozycjonowany, stanowi n o w y kontekst p o z y q o n o w a n i a dla wszystkich pozycjonowanych elementów będących jego potomkami, c z y l i dla obu bocznych kolumn. Własności 1 ef t i top nie odnoszą się już teraz do elementu html, a do kontenera. Oznacza to, że jeśli kontener powiększy się lub zmniejszy w poziomie, k o l u m n y odpowiednio zmienią swoje położenie. Jeśli — p o w i e d z m y — zwiększy się pionow y rozmiar nagłówka (rysunek 9.17), zostanie przesunięty kontener, a wraz z n i m znajdujące się wewnątrz pozostałe bloki. Jednak, m i m o uporania się z widocznością nagłówka, znaczna część strony nadal pozostaje poza zasięgiem w z r o k u . Ratunku przed zasłonięciem nadal wymagają kolumna z treścią i stopka. Jak to zrobić, jeśli w e ź m i e m y pod uwagę, że obszar treści musi być elastyczny?

    262

    Rozdział 9. Tworzenie układów CSS E 0 H

    W Mój trzykolumnowy układ - Mozilla Firefox Pik

    Edycja I

    Widok C

    Historia

    X

    A

    Zakładki (

    Narzędzia

    Pomoc [»|Googie

    http://bcal

    3

    Lubisz jab&a?

    układzie strony.

    Lewa kolumna"!"

    Prawa kolumna.

    onsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliąua co laboris msi ut aliąuip ex ea commodo conseąuat. Duis aute irure dolor in reprehendent in ^ Excepteur sint occaecat cupidatal non proident, sunt in culpa qui officia deserunt moUit anim i

    • Odnośnik 1 • Odnośnik 2 • Odnośnik 3

    • "Wiesz, że Hsty są nie do pobicia? • Naprawdę. • Nie oszukuję.

    iste natus error sit vohiptatem accusanbum doloremque laudantium, totam rem apeiiam, eaqi atae vitae dicta sunt expHcabo. Curabitur elementum nulla sit erat. Integer venenatis. >Temo enim ipsam voluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia conseąuuntur magm dolores eos qui ra Praest isent adipiscing fiingilla nesciunt. Neąue porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nonnumqu Praesent ullamcorper. incidunl ut labore et dolore magnam aliquam ąuaerat voluptałem Nullam id erat. Morbi lobortis odio ut nisL Sed Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodiu co gravida posuere massa. Duis eum lure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel llłum qui dolorem eum fugiat quo diam nunc, convalKs quis, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper Te jabflca były bardzo smaczne. quis sem. Maecenas eu mauris in velit dictum ornare. Vestibulum Nullam tellus. Jakieś podstawowe informacje.

    Rysunek 9.16. Dzięki zastosowaniu deklaracji position: relative; do nowego bloku kolumny boczne nie wychodzą poza swój element nadrzędny. Co jednak z treścią strony?

    w Mój trzykolumnowy układ - Mozilla Firefox Pik

    Edycja

    WUJ*

    • C

    Historia

    X

    «

    &*ład(i

    (

    tjarzędzia

    Pomoc

    -htlp://bcal

    T o jest nowy nagłówek Uwa - kolumna" • odnośnik l • Odnośnik 2 • Odnośnik 3

    ^

    ^

    consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali ation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre lulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui offitia desei

    Prawa kolumna. • Wiesz, że listy s ą nie do pobicia? • Naprawdę. • Nie oszukuję.

    lakieś podstawowe informacje.

    lis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam Curabitur elementum nulla irchitecto beatae vitae dicta sunt explicabo. sit amet erat. Integer venenatis. Praesent Nemo enim ipsam voluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia consequuntur magni dolores eos adipiscing fringilla tellus. ;equi nesriunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia n Praesent ullamcorper. :empora incidunt ut labore et dolore magnam aliquam quaerat Yoluptatem. Nullam id erat. Morbi Ut enim ad minima veniam, quis nostrum exercitationem uliam corporis suscipit laboriosam, nisi ut aliquid ex ea commod lobortis odio u t nisl. Sed vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fu gravida posuere massa. Duis diam nunc, convallis pariatur? Te jabłka były bardzo smaczne.

    ;, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper massa quis sem. Maecenas eu mauris in velit dictum ornare. Vestibulum malesuada. Nullam tellus.

    Rysunek 9.17. Treść znajdującą się przed kontenerem można edytować bez obawy, że zburzy to wypracowany układ

    263

    Rozdział 9. Tworzenie układów CSS N a szczęście, nie trzeba j u ż stosować ż a d n y c h reguł p o z y q o n u j ą c y c h . W i e m y , że k o l u m n y boczne mają szerokość p o 175 pikseli każda, zatem problem ten m o ż n a rozwiązać za pomocą poniższej r e g u ł y : #content { margin: 0 190px;

    } U s t a w i a ona p o z i o m e marginesy o szerokości 190 pikseli — 175, aby ominąć boczną k o l u m nę, oraz 15 pikseli odstępu. Po zastosowaniu tych marginesów d o b l o k u jego obliczona szerokość zmniejsza się, d z i ę k i czemu w p a s o w u j e się m i ę d z y d w i e k o l u m n y (rysunek 9.18).

    Mój t r z y k o l u m n o w y układ - Mozilla Firefox Edycja

    Wbok

    Historia

    Saklacki

    [Jarzędzia

    Pomoc

    -»

    I C H Google

    3

    Lubisz jabłka?

    To jest nowy nagłówek Lewa kolumna. » Odnośnik l » Odnośnik 2 • Odnośnik 3 Jakieś podstawowe informacje.

    Witaj w moim układzie strony. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doiore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in yoluptate velit esse rillum doiore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et doiore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea yoluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    Prawa kolumna. • Wiesz, że listy są nie do pobicia? • Naprawdę. • Nie oszukuję. Curabitur elementum nulla sit amet erat. Integer venenatis. Praesent adipiscing fringilla tellus, Praesent ullamcorper. Nullam id erat. Morbi lobortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convallis quis, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper massa quis sem. Maecenas eu mauris in velit dictum ornare.

    Te jabłka były bardzo smaczne.

    Rysunek 9.18. Dzięki dodaniu marginesu do elementu z treścią o szerokości odpowiadającej szerokości znajdujących się po jego bokach kolumn uzyskano złudzenie, że na stronie znajdują się trzy niezwiązane ze sobą kolumny

    Jeśli usuniesz na chwilę k o l u m n y (albo ukryjesz je za pomocą CSS), w y r a ź n i e j zobaczysz, co tu się dzieje (rysunek 9.19). M i m o że k o l u m n y boczne nie dotykają j u ż b l o k u z treścią (i nawzajem), jest to t y l k o iluzja stworzona p r z y u ż y c i u CSS. Jakiekolwiek z m i a n y szerokości okna p o w o d u j ą , że treść strony zmienia swoje położenie.

    264

    Rozdział 9. Tworzenie układów CSS • 0 ®

    O Mój trzykolumnowy układ - Mozilla Firefox | Pik

    Edycja "

    Widok C

    X

    Historia &

    Zaklacki (

    Narzędzia

    Pomoc

    http://local

    ->

    .

    A

    Lubisz jabłka?

    Witaj w moim układzie strony. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doiore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doiore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit autfugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et doiore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Fe jabłka były bardzo smaczne.

    Zakończono

    Rysunek 9.19. Usuń na chwilę kolumny boczne, aby zobaczyć, jaki wpływ na div z treścią mają zastosowane marginesy

    Niestety, to co w i d a ć na r y s u n k u 9.19, nie jest tak dobre, jak w y g l ą d a . G ó r n a część strony i boki zostały już opanowane, jednak stopka nadal pozostaje zaniedbana. M i m o że boczne k o l u m n y są pozycjonowane w z g l ę d e m kontenera, ich rozmiar nie jest ustalany w e d ł u g niego. Jeśli ich wysokość p r z e k r o c z y w y s o k o ś ć tego elementu, znajdujące się niżej b l o k i znajdą się w bardzo złej sytuacji. W i d a ć to na r y s u n k u 9.20. Dodanie k i l k u akapitów tekstu d o prawej k o l u m n y s p o w o d o w a ł o zasłonięcie części stopki. Jak już wiesz, elementy znajdujące się w z w y k ł y m nurcie (nagłówek, k o l u m n a z treścią i stopka) są p o z y c j o n o w a n e w e d ł u g innego p u n k t u odniesienia n i ż elementy p o z y c j o n o w a n e bezwzględnie. T o właśnie jest p o w o d e m nałożenia się k o l u m n b o c z n y c h najpierw na nagłówek, a teraz na stopkę. N a szczęście, problem stopki m o ż n a r o z w i ą z a ć w ten sam sposób, co problem nagłówka. Znając m o d e l b l o k o w y , m o ż n a zdefiniować marginesy w o k ó ł stopki jeszcze raz i u t w o r z y ć złudzenie, że środkowa k o l u m n a jest niezależna o d bocznych. Zatem elementowi div pełniącemu rolę stopki należy ustawić, takie same jak wcześniej, poziome marginesy o szerokości 190 pikseli. W obecnej sytuacji masz d o w y b o r u d w a wyjścia: •

    napisać regułę CSS ustawiającą te marginesy,

    •

    umieścić stopkę w kolumnie z treścią, co spowoduje dostosowanie jej szerokości do szerokości elementu, w k t ó r y m zostanie umieszczona.

    265

    Rozdział 9. Tworzenie układów CSS B B B

    w Mój trzykolumnowy układ - Mozilla Firefox Elk

    Edycja

    fflldok

    C

    Historia

    X

    Jakładkl

    ffiy c

    Narzędzia

    Pomoc

    p://local Lubisz jabłka?

    W i t a j w moim układzie strony.

    Lewa kolumna.

    Prawa kolumna.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    » Odnośnik 1 • Odnośnik 2 ' Odnośnik 3 Jakieś podstawowe informacje.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam yoluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat yoluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Fe jabłka były bardzo smaczne.

    • Wiesz, że listy są nie do pobicia? • Naprawdę. • Nie oszukuję. Curabitur elementum nulla sit amet erat. Integer yenenatis. Praesent adipiscing fringilla tellus. Praesent ullamcorper, Nullam id erat. Morbi lobortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convallis quis, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper massa quis sem. Maecenas eu mauris in velit dictum omare. Morbi lobortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convallis quis, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper massa quis sem. Maecenas eu mauris in velit dictum ornare.

    Rysunek 9.20. Dodanie kilku akapitów tekstu spowodowało nałożenie się bezwzględnie pozycjonowanego elementu na znajdujący się pod nim element statyczny

    O b a r o z w i ą z a n i a w y w o ł a j ą taki sam efekt (rysunek 9.21). Stopka zawsze będzie znajdować się m i ę d z y k o l u m n a m i b o c z n y m i , bez w z g l ę d u nato, c z y p o d nimi, c z y nie. M o ż n a też stopkę umieścić w elemencie g ł ó w n e j treści, aby uniknąć nałożenia się na nią k o l u m n bocznych. Jeśli jednak k o l u m n y te będą d u ż o dłuższe o d środkowej, stopka będzie się znajdowała znacznie p o w y ż e j d o ł u strony. Jest to p o w a ż n a w a d a m o d e l u p o z y c j o n o w a n i a b e z w z g l ę d n e g o . P r a w d ą jest, że m o ż n a d o w o l n y element w y j ą ć z normalnego u k ł a d u i umieścić w d o w o l n y m miejscu na stronie. Jednak p o w a ż n ą w a d ą tego m o d e l u jako narzędzia projektanta jest to, że nie rozpoznaje kontekstu elementów otaczających p o z y c j o n o w a n y element. Elementy p o z y c j o n o w a n e b e z w z g l ę d n i e nie t y l k o m o g ą nachodzić na elementy, które nie są pozycjonowane, lecz także na inne elementy p o z y q ' o n o w a n e w ten sam sposób. Z tego p o w o d u w i e l u projektantów korzystających z CSS w y b i e r a m o d e l elementów pływających. Istnieją

    rozwiązania

    Znany projektant

    problemu

    i deweloper

    z zasłanianiem

    ^com/mentary/past/absolutely_positive.php) bezwzględnie Oczywiście,

    pozycjonowanych

    którym

    266

    Mimo że rozwiązują

    trzeba się będzie

    niewymagające

    skrypt JavaScript

    automatycznie

    zapobiegający

    użycia C S S .

    (www.shauninman. nakładaniu

    się

    elementów.

    przed użyciem jakichkolwiek

    nie przetestować.

    dolnych elementów

    Shaun Inman napisał elegancki

    zajmować.

    sztuczek jakiś

    na swojej stronie,

    bieżący problem,

    stanowią

    należy je zawsze dodatkowy

    dokład-

    inwentarz,

    Rozdział 9. Tworzenie układów CSS WMój trzykolumnowy uktad - Mozilla Firefox 1 Pik

    Edycja •

    Widok C

    X

    Historia O

    Zakładki !

    Narzędzia

    n r B|5cl

    Pomoc

    B-

    http://1ocal

    1 2

    Lubisz jabłka?

    Lewa kolumna. . (JęlnQŚnik 1 • Odnośnik 2 • Odnośnik 3 Jakieś podstawowe informacje.

    Witaj w moim układzie strony. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doiore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doiore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et doiore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Te jabłka były bardzo smaczne.

    Prawa kolumna. • Wiesz, że listy są nie do pobicia? • Naprawdę. • Nie oszukuję. Curabitur elementum nulla sit amet erat, Integer venenatis, Praesent adipiscing fringilla tellus. Praesent ullamcorper. Nullam id erat. Morbi obortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convallis quis, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper massa quis sem. Maecenas eu mauris in velit dictum ornare, Morbi lobortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convallis quis, sollicitudin ac, rhoncus quis, quam, Sed ullamcorper massa quis sem. Maecenas eu mauris in velit dictum ornare.

    Rysunek 9.21. Dzięki zastosowaniu odpowiednich marginesów dla elementu stopki udało się uniknąć jej przesłonięcia przez boczne kolumny

    Zwalczanie błędów

    przeglądarek

    G d z i e jesteśmy? U k ł a d w y g l ą d a dobrze w naszej przeglądarce, k o d X H T M L jest p r a w i d ł o w y a arkusze s t y l ó w spisują się świetnie. A więc w e w s z y s t k i c h z n a n y c h ludzkości przeglądarkach T w o j a strona w y g l ą d a tak samo, prawda? Jeśli w to wierzyłeś, możesz poczuć się bardzo rozczarowany. M i m o że obecne przeglądarki w d u ż y m stopniu obsługują kaskadowe arkusze stylów, obsługa ta znacznie się r ó ż n i m i ę d z y poszczególnymi aplikacjami — lubię mawiać, że przeglądarka przeglądarce nierówna. N i e stety, p r a w i d ł o w y k o d wcale nie oznacza idealnej prezentacji w e w s z y s t k i c h przeglądarkach. Ze w z g l ę d u na bogactwo b ł ę d ó w oferowanych przez każdą z nich, nie m a innego w y j ś c i a jak g r u n t o w n e przetestowanie każdej strony. C o gorsza, w większości p r z y p a d k ó w konieczne jest dodanie s t y l ó w p r z e z n a c z o n y c h dla konkretnej przeglądarki, aby z a p e w n i ć taki sam rezultat dla w s z y s t k i c h odwiedzających w i t r y n ę . P r z y j r z y m y się d w ó m b ł ę d o m w n a s z y m układzie i spróbujemy coś na nie zaradzić.

    Internet Explorer 5 dla Macintoshy Po otwarciu naszej strony w przeglądarce Internet Explorer 5 dla k o m p u t e r ó w Macintosh wszystko wydaje się w porządku, dopóki nie spojrzysz na sam dół okna przeglądarki (rysunek 9.22). A b y rozwiązać ten problem, spróbujmy znaleźć jego przyczynę. Ponieważ z a r ó w n o

    267

    Rozdział 9. Tworzenie układów CSS kod X H T M L , jak i CSS przeszły pomyślnie walidację, wiadomo, że nie w t y m leży sedno problemu. Zastosujemy następującą metodę r o z w i ą z y w a n i a problemu: najpierw spróbuj edytować poszczególne części kodu, aby dowiedzieć się, czy można go powiązać z jedną konkretną sekcją strony. Jeśli tak, d o w i e d z się, czy modyfikacja reguł CSS zastosowanych do tej sekq'i rozwiązuje problem. Po ustaleniu, co powoduje błąd, możesz u t w o r z y ć i zastosować lepsze rozwiązanie. W dodatku D zostały opisane jeszcze inne wskazówki, jak radzić sobie z tego rodzaju

    problemami.

    S p r a w d ź m y zatem, c z y da się w y i z o l o w a ć ź r ó d ł o p r o b l e m u w kodzie. Ponieważ błąd występuje p o prawej stronie, w a r t o b y ł o b y zacząć właśnie o d tego miejsca. Usunięcie całej prawej k o l u m n y z k o d u i odświeżenie strony p o t w i e r d z a te przypuszczenia. P o z i o m y pasek przewijania znikł. W n i o s e k jest oczywisty. P o w o d e m b ł ę d u b y ł a p r a w a k o l u m n a (rysunek 9.23). W i e m y , gdzie jest ź r ó d ł o problemu, jak zatem sprawdzić, co dokładnie go powoduje? A co ważniejsze, jak go naprawić? Teraz następuje m a ł o pasjonujący zestaw czynności polegających na pisaniu kodu, u s u w a n i u go, p r z e s z u k i w a n i u internetu oraz testowaniu. Ponieważ każda przeglądarka ma własne błędy, spotkanie z k a ż d y m z t y c h p r o g r a m ó w po raz p i e r w s z y m o ż e b y ć bardzo frustrujące. Jednak p o p e w n y m czasie, g d y zdobędziesz p e w i e n zasób doświadczeń, proces usuwania b ł ę d ó w będzie się stawał coraz mniej czasochłonny i — oczywiście — mniej frustrujący. Niestety, d o p ó k i obsługa standardów sieciowych nie zostanie ujednolicona w e w s z y s t k i c h przeglądarkach, d o p ó t y faza testowania strony m u s i b y ć stałym p u n k t e m w harmonogramie każdego projektanta. Podejrzewam, że prędzej m i kaktus na d ł o n i w y r o ś n i e niż to nastąpi, ale nastawiam się optymistycznie. Po k i l k u m i n u t a c h eksperymentowania jest jakiś przełom. D z i ę k i zmianie wartości własności r i ght m o ż n a sprawić, że pasek przewijania znika. M ó w i ą c konkretnie, wartość ta nie może b y ć mniejsza n i ż 15 pikseli. R o z w i ą z a n i e nie jest jednak idealne, ponieważ m i m o to układ nie w y g l ą d a dokładnie tak, jak p o w i n i e n (rysunek 9.24). e o n Back

    Forward

    Stop

    o

    Refresh

    f~l Moja trzykolumnowa strona Home

    AutoFill

    a

    Print

    is

    e rwa

    Mail

    Lubisz jabłka?

    Lewa kolumna. • OdnoSnikl • Odnośnik 1 • Odnośnik 3 Jakieś podstawowe informacje.

    1

    Witaj w moim układzie strony.

    Prawa kolumna.

    Cene. inquam. pcninax non ero tibique. si mihi probabis sed ut perspiciatis unde omnis

    * Wiesz. 2e listy są nie do

    iste natus error sit voluptatem accusantium doloremque laudantium, totam rem apcriam.

    pobicia?

    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitac dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione vo!uptatem sequi nesciunt. Ncquc porro quisquam est, qui dolorem ipsum quia dolor sit amet. consectetur, adipisci velit. sed quia

    * Naprawdę. * Nie oszukuję. Więcej treSci.

    non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat Et harum quidem rerum facilis est et j

    voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis

    expedita distinctio. Nam libero

    suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

    tempore. cum soluta nobis est eligendi optio cumque nihil impedit

    |

    voluptatum dcleniti atquc corrupti quos dolores et quas molestias excepturi sint occaccati

    quo minus id quod maximc placeat

    I

    cupiditate non piwkiem, similkjue sunt in culpa qui officia deserunt mollitia animi, id est

    facere possimus. omnis voluptas

    laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

    assumend.

    Nam libero tempore. cum soluta nobis est eligendi optio cumque nihil impedit quo minus

    At vero eos et accusamus et iusto

    id quod maxime placeat fucuu possimus, omnis voluptas assumenda est, omnis dolor

    odio dignissimos.

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

    repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae, Itaque earum

    J

    rerum hic tenetur a sapiente delectus. ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repcllat.

    1

    1

    {jjgilLocal machinę zone

    Rysunek 9.22. Skąd się wziął ten poziomy pasek przewijania?

    268

    Rozdział 9. Tworzenie układów CSS ono

    *

    Back

    Q Moja trzykolumnowa strona Forward

    Stop

    o

    Refresh

    fi

    Home

    a

    ": AutoFill

    Print

    e

    ss

    Mail

    Lubisz jabłka?

    Lewa kolumna.

    Witaj w moim układzie strony.

    • Odnośnik 1

    Certe. inquam, pertinax non ero tibique, si mihi probabis sed ut perspiclatis unde

    • Odnośnik ł

    omnis iste natus error sit voluptatem accusantium doioremque laudantium, totam rem aperiam. eaque ipsa quae ab ilio inventore vcritatis et quasi architocto beatae vitae

    • Odnośnik 3

    dicta sunt esplicabo. Nemo enim ipsam voiuptatem quia vołuptas sit aspematur aut Jakieś podstawowe informacje.

    odit aut fugit,sed quia conse>quuntur magni dołores eos qui rationc voluptatem sequi nesciunt- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adtpisci vclit, sed quia non numquam eius modi tempora incidunt ut labore et doiore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam. quis nostrum exercitationem ułiam oorporis suscipit laboriosam, nisi ut aliqukl ex ea commodi consequatur? i

    At vero eos et aocusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint oocaecati cupiditate non provident, simiłique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expcdita distinctio. Nam libero tempore, cum sohita nobis est eligendi optio cumque nihil impedit quo minus id quod maxime plaeeat facere possimus, omnis voluptas assumenda est,

    i

    omnis dolor repellendus. Temporibus autem quibusdam et aut officus debitis aut rerum necesshatibus saepe eveniet ut et voluptates repudiandae sint et molestias non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

    1

    @ http: //www .microsoft.com/mac/ie/

    Rysunek 9.23. Jeśli masz wątpliwości, usuń niektóre sekcje strony

    rt O o 4 Back

    j

    Q. Moja trzykolumnowa strona

    O

    Forward

    Stop

    Refresh

    A

    Home

    :

    fi

    AutoFill

    Print

    a

    Mail

    JrVfM^;//localhost/1

    mśammrnmmmmm^M^ J w ii B • • • • • • M 90

    Lubisz jabłka?

    Lewa kolumna.

    Witaj w moim układzie strony. Prawa kolumna.

    • Odnośnik i

    Certe, inquam, pertinax non ero tibique, si mihi probabis sed ut perspiciatLs unde

    • Odnośnik 1

    omnis iste natus error sit voluptaiem accusantium doloremque laudantium. totam ren

    • Odnośnik 3

    aperiam. eaque ipsa quac ab ilto inventore veritatis et quasi architccto beatae vitae

    * Naprawdę.

    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspematur aut

    • Nie oszukuję.

    Jakieś podstawowe informacje.

    11

    * Wiesz, te listy s 3 nie do pobicia?

    odit aut fugit, sed quia consequuntur magni dolores eos qui rationc voluptatem sequi nesciunt. Neque porro quisquam est , qui dolorem ipsum quia dolor sit amet,

    Więcej treści.

    consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et doiore magnam alkjuam quaerai \oluptatem. Ut enim ad minima veniam.

    Et harum quidem rerum facilis est et

    quis nostrum exerdtatk>nem ullam corporis suscipit laboriosam. nisi ut alkjuid ex ea expedita distinctio. Nam libero tempore, cum soluta nobis est commodi consequatur? eligendi optio cumque nihil impedit At vero eos et aecusamus et iusto odio dignissimos ducimus qui blanditiis

    quo minus id quod maxime piątka

    praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias

    facere possimus.omnis voluptas

    exccpturi sint occaecati cupiditate non provident, similigue sunt in culpa qui officia

    assumend.

    deserunt mollitia animi. id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

    At vero eos et accusamus et iusto odio dignissimos.

    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat faoere possimus, omnis vo!uptas assumenda est. omnis dolor repellendus. Temporibus autem quibusdam et aut offkais debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus. ut aut reiciendis vo!uptatibus maiores alias consequatur auł perferendis doloribus asperiores repellat.

    Te jabłka były bardzo smaczne. (JjjLocal machinę zono

    1

    Rysunek 9.24. Zmiana wartości własności right w regule #right na 15 pikseli spowodowała zniknięcie paska przewijania, ale to nie rozwiązało problemu do końca

    269

    Rozdział 9. Tworzenie układów CSS M i m o że pasek przewijania zniknął, p r a w a k o l u m n a nie jest w y r ó w n a n a z krawędzią okna. Trzeba to p o p r a w i ć w miarę możliwości. Podsumujmy, co w i e m y . 1.

    M i m o że dla elementu di v nie ustawiono żadnego marginesu, w y d a j e się, że przeglądarka i tak t w o r z y margines szerokości 15 pikseli.

    2.

    W n i o s e k z tego taki, że Internet Explorer 5 dla k o m p u t e r ó w Macintosh w i d z i deklarację m a r g i n - r i g h t : 0; jako margin-right: 15px;.

    A więc c z y deklaracja m a r g i n - r i g h t : 15px; nie dałaby takiego samego efektu jak margin-right: 0; normalnie? Spróbuję z m o d y f i k o w a ć regułę #right: #right ( p o s i t i o n : absolute; r i g h t : 0; top: 0; width: 175px;

    } Z o b a c z m y teraz, c z y uda się zastosować trochę p r z y j a z n y c h dla Internet Explorera obliczeń: #right { p o s i t i o n : absolute; margin-right: -15px; right: 15px;

    top: 0; width: 175px;

    } O d ś w i e ż stronę w przeglądarce i zobacz, co się dzieje (rysunek 9.25). Voila\ D z i ę k i zastosowaniu obejścia w s z y s t k o z n o w u w y g l ą d a świetnie. U d a ł o się p r z y w r ó c i ć porządek w przeglądarce Internet E x p l o r e r 5 dla k o m p u t e r ó w Macintosh, w y k o r z y s t u j ą c jedno z jej d z i w a c t w . Ponadto na p i e r w s z y rzut oka w y d a j e się, że te d w a d o d a t k o w e wiersze nie mają żadnego ujemnego w p ł y w u na inne, lepiej zachowujące się przeglądarki. A b y jednak się zabezpieczyć, m o ż n a o p r a c o w a n y hack ł a t w o oddzielić o d p r a w d z i w e j reguły: #right { p o s i t i o n : absolute; top: 0; r i g h t : 0; width: 175px;

    } /*\*//*/ #right { margin-right: -15px; right: 15px;

    } /**/

    270

    Rozdział 9. Tworzenie układów CSS Q Moja trzykolumnowa strona

    « o n 4

    Back

    O

    Forward

    Stop

    Refresfo

    f )

    Home

    AutoFi

    n

    PrSiH

    uaMW j aWW

    ) file://localhost/|

    Lewa kolumna.

    Witaj w moim układzie strony. Certe. inquam, pertina* non erotit>k|ue.si n-Ihi probafcis sod ut perspiciatis unde omnis iste natus error sit voluptaKm accusantium doloremque laudaniiuir,. totam rem Łperiam.

    Odnp$ruk3 ti podstawowe informacje.

    eaque ipsa ąuas ab iUo inventore veritatis et quasi architecto bratać vtoe dicta sunt explicabo. Neiro enim ipsair. vctoptatem quia vobiptas sit aspematur aut odit san fugit. sed quia oonsajuuntur raagni dolores oas qui ratfone volupł«cem soqui nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit ansa, oonsectetur, adipisci velit,

    Prawa kolumna. • Wiesz, ze listy są nie do • Naprawdę. • Nte oszukuję. Więcej treSci.

    sed quia non nurnquam eius ittcdi tempera incidunt ut labore et dolore magnam aliquam quasrat voiuptajem. Ut enim ad minima veniam. quis nostrum exercitati©nem ullam

    a harum quidem rerum facilis est et

    corporis suscipit laboriosam. nisi ut aliquid ex ea oommcdi consequatur?

    wpedite distinctio. Nam libero

    At ven> eos et accusamus et Iusto odio dignissimos ducimus qui btandltiis pfassentlum

    eligendi optio cumque nihil impedit

    voluptiaum deleniti atque corrupti quos dolores et quas rrastatta excepłuri sint

    quo minus id quod nmime ptoasat

    occaecałi cuptditate non providem, similique sunt in culpa qul officia deserunt mollitia

    facere possimus. omnis votop«as

    animi. id est laionim et dotorum fuga. El harum quidem rerum facilis est et espedita

    assumsnd.

    ore, cum soluta nobis est

    distinctio. At vera e*» et accusamus et iusto Nam libero sempore, cum soluta nobis est eligendi optio cumque nilu! impedit quo

    odio dignissimos.

    minus id quod nrninue ptoeait facsre possimus,orents voiupłas assutnendaest,omnis dolor repellendus. Temporibus snem quibwdam et ant efficiis debitis aut rerum noressitsaibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandse. Itaque earum rerum hic tenetur t sapienK detectus. ut aut reiciendis voluptaibus iratiores alias consequ&ur aut perferendis doloribus asperiores repetlat.

    Te.iafc&a byty bardzo smaczne. BjLocał machinę zorte

    Rysunek 9.25. Po zastosowaniu sztuczki poziomy pasek przewijania zniknął

    Pierwsza z p o w y ż s z y c h to oryginalna reguła #right, której u ż y w a ł e m d o tej pory. D r u g a zawiera deklaraq'e naprawiające b ł ę d y przeglądarki Internet E x p l o r e r 5 dla k o m p u t e r ó w M a cintosh. Została ona umieszczona w o d p o w i e d n i m k o m e n t a r z u filtrującym (więcej informacji na ten temat znajdziesz w rozdziale 2.). Ten d z i w n i e w y g l ą d a j ą c y ciąg z n a k ó w sprawia, że reguła jest r o z p o z n a w a n a t y l k o przez Internet E x p l o r e r 5 dla k o m p u t e r ó w Macintosh, dzięki czemu zastosowane w niej obliczenia nie z b u r z ą strony w i n n y c h przeglądarkach. Jeden błąd z g ł o w y , trzeba zająć się kolejnym. Jak pewnie pamiętasz

    z rozdziału 2., można utworzyć osobne arkusze stylów przeznaczone

    konkretnych przeglądarek,

    z których każdy zawiera wszystkie przeznaczone

    dla nich hacki.

    dla Zalety

    i szczegóły tej metody zostały opisane w tamtym rozdziale. Przypomnę tylko, że dzięki niej główny plik arkuszy stylów pozostaje wolny od hacków, a dzięki temu jest łatwiejszy w

    konserwacji.

    Internet Explorer 5.x+ dla Windows Jak w i d a ć na r y s u n k u 9.26, w y g l ą d naszej strony w Internet Explorerze 5.0, 5.5 lub 6.0 dla W i n d o w s pozostawia wiele d o życzenia. Po naprawieniu p r o b l e m u z blokiem #right pojawia się jego przeciwieństwo! N o , może prawie. L e w a kolumna, zamiast w y r ó w n a n i a z lewą k r a w ę d z i ą okna, utknęła w e w n ą t r z b l o k u z treścią. Po zastosowaniu a l g o r y t m u postępowania opisanego w p r z y p a d k u przeglądarki Internet Explorer 5 dla k o m p u t e r ó w Macintosh — polegającego na u s u w a n i u i przeglądaniu k o d u oraz dostrajaniu CSS — w y d a j e się, że nic nie m o ż n a zrobić.

    271

    Rozdział 9. Tworzenie układów CSS Pik

    Edycja

    Wiek*

    Adres

    Ulubione

    Jarzędaa

    o - i r f i ii

    '

    Pomoc

    &

    — €>

    e • J © f l 0 Jł

    httpi/Jocal

    v ( g g Przejdź Lubisz jabłka?

    Lewa kolumna. • Odnośnik 1 • Odnośnik 2 • Odnośnik 3

    n układzie strony. consectetur adipisidng elit, sed do eiusmod tempor inadidunt ut labore e t doiore magna aliqua. Ut enim ad >xercitation ułlamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in •lore eu fugiat nuda pariatur. Excepfceur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

    Jakieś podstawowe nformacje. us iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ilio inventore veritatis et quasi architecto beatae vitae dicta sunt expBcabo. Nemo enim ipsam voluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci vełit, sed quia non numquam eius modi tempora inddunt ut labore e t doiore magnam aliquam quaerat tfoluptatem. Ut enim ad minima veniam, quis nostrum exercitabonem ullam corpons suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in e a voiuptate veNt e s s e quam nihil molesbae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    Prawa kolumna. • Wiesz, że listy s ą nie do pobicia? • Naprawdę. • Nie oszukuję. Curabitur elementum nulla sit amet erat. Integer venenatis. Praesent adipisting fringtfla teflus. Praesent ullamcorper. Nullam id erat. Morbi lobortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convaHis quis, sollicitudin ac, rhoncus quis, quam. Sed

    Rysunek 9.26. Problem z lewą kolumną

    N a szczęście, w internecie m o ż n a ł a t w o znaleźć informacje o z n a n y m błędzie Internet Explorera dla W i n d o w s . Przeglądarka ta, jeśli ma d o czynienia z blokiem bez określonych r o z m i a r ó w (jak kontener di v), ma p r o b l e m z takim jego narysowaniem, aby pomieścił swoją treść. R o z w i ą z a n i e m jest p o i n f o r m o w a n i e p r o g r a m u , że „blok jednak ma określony rozmiar i — jeśli nie jest to z b y t k ł o p o t l i w e — m ó g ł b y go narysować poprawnie". W t y m k o n k r e t n y m p r z y p a d k u na ratunek p r z y c h o d z i hack o n a z w i e The Holly Hack (www.commnnitymx.com/abstract.cfin?cid=AAA7C45E7CD65D33 lub http://positionisevery*-+thing.net/articles.html). /* Ukryte przed Mac IE5 \*/ * html #container { height: 1%;

    } /* KONIEC ukrywania */ Ten hack, n a z w a n y po s w o i m t w ó r c y H o l l y m Bergevinie, składa się w istocie z d w ó c h części. U k o ś n i k znajdujący się na końcu p i e r w s z e g o komentarza powoduje, że przeglądarka Internet E x p l o r e r 5 dla k o m p u t e r ó w Macintosh ignoruje w s z y s t k o d o zamknięcia komentarza. P i e r w s z a deklaraq'a zaczyna się o d selektora uniwersalnego (*) z elementem html, za k t ó r y m znajduje się selektor sprawiającego p r o b l e m y elementu — tutaj elementu div. Jak się okazuje, przeglądarka Internet E x p l o r e r z a r ó w n o dla W i n d o w s , jak i k o m p u t e r ó w Macintosh rozpoznaje n i e w i d o c z n y element otaczający . Hack, z n a n y p o d n a z w ą Star HTML Hack, polegający na u ż y c i u selektora uniwersalnego p r z e d elementem html działa t y l k o w przeglądarce Internet Explorer. Dlatego w p i e r w s z y m w i e r s z u u k r y t o tę regułę p r z e d przeglądarką Internet E x p l o r e r dla k o m p u t e r ó w Macintosh, w której ten problem nie występuje.

    272

    Rozdział 9. Tworzenie układów CSS Zobacz, jak układ będzie w y g l ą d a ł po ustawieniu w y s o k o ś c i na 1% (rysunek 9.27). Reguła ustawiająca w y s o k o ś ć na 1% u m o ż l i w i ł a naprawienie błędnej interpretaq'i k o d u przez przeglądarkę Internet Explorer. D z i ę k i tej maleńkiej wartości przeglądarka ta „ w i e " , że trzeba rozszerzyć blok, aby zrobić miejsce dla jego zawartości ( p o w i n n a to wiedzieć i bez tego, ale lepiej nie czekać, aż przeglądarki zaczną n a m ułatwiać życie). Po tych w s z y s t k i c h przeżyciach dochodzisz do w n i o s k u , że T w ó j t r z y k o l u m n o w y u k ł a d w y g l ą d a pięknie w e w s z y s t k i c h testowanych przeglądarkach. Jednak d o t y c h c z a s o w y projekt nie ma jednego k l u c z o w e g o składnika. P r z e j d ź m y d o jego utworzenia, aby doszlifować naszą imitację u k ł a d u Molly.com i skończyć z układem t r z y k o l u m n o w y m raz na dobre.

    Pbk

    §dyqa

    ^

    ' ^

    Widok

    ' C

    rtstona

    te>

    Nakładki

    j ł

    Q Pozycjonowanie elementów

    I

    Narzędzia

    Pomoc

    W"* Q

    Lubisz jabłka? Lewa kolumna. • Odnośnik 1

    • Odnpgnik 2 • Odnośnik 3

    Dakieś podstawowe informacje.

    Witaj w moim uktadzie strony. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam yoluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione yoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat yoluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    Prawa kolumna. • Wiesz, że listy są nie do pobicia? • Naprawdę. • Nie oszukuję. Curabitur elementum nulla sit amet erat. Integer venenatis. Praesent adipiscing fringilla tellus. Praesent ullamcorper. Nullam id erat. Morbi lobortis odio ut nisl. Sed gravida posuere massa. Duis diam nunc, convallis quis, sollicitudin ac, rhoncus quis, quam. Sed ullamcorper massa quis sem. Maecenas eu mauris

    Zakończono

    Rysunek 9.27. Jeden hack więcej i wracamy do gry

    273

    Rozdział 9. Tworzenie układów CSS

    Określanie granic: własność max-width Ostatnie zadanie to nadanie u k ł a d o w i elastyczności. Obecnie dopasowuje się on szerokością do okna bez w z g l ę d u na jego rozmiar. Po przekroczeniu pewnej granicy wiersze tekstu w tak i m układzie mogą stać się bardzo długie, co utrudnia czytanie. A b y temu zaradzić, można użyć własności CSS max-width. Jak nazwa wskazuje, umożliwia ona określenie maksymalnej szerokości dla elementu. Zastosujmy ją do naszego projektu i zobaczmy, co z tego wyjdzie. Poniższa reguła ustawia maksymalną szerokość na 1000 pikseli: #header, #container { max-width: 1000px;

    } Po odświeżeniu m o ż e m y nie zobaczyć żadnej różnicy. U j a w n i się dopiero po odpowiednim rozszerzeniu okna (rysunek 9.28). G d y okno przeglądarki zmniejsza się lub rozszerza, układ robi to razem z nim, ale tylko do granicy 1000 pikseli. Z a pomocą własności max-width można ograniczyć możliwości rozszerzania układu w poziomie, pozostawiając u ż y t k o w n i k o m pole manewru na tyle duże, że w n i c z y m i m to nie przeszkadza. Niestety, własność max-wi dth należy do tych części specyfikacji CSS, które nie cieszą się zbyt dużą popularnością w przeglądarkach. Mówiąc inaczej, jest świetnie obsługiwana przez Twoją przeglądarkę, ale tylko pod warunkiem, że nie u ż y w a s z Internet Explorera. W czasie, g d y piszę te słowa, najbardziej popularna przeglądarka na świecie jest kompletnie ślepa na tę i inne z nią spokrewnione właściwości, tj. min-width, min-height oraz max-height. Brak obsługi w Internet Explorerze powoduje, że własności te można traktować jako jedynie teoretycznie najlepsze rozwiązanie, którego nie można aktualnie zastosować. N a szczęście, nie uniemożliwia to stosowania tych technik całkowicie. Można pogodzić się z tym, że w niektórych przeglądarkach układ będzie rozciągał się bez ograniczeń (rysunek 9.29). Przeglądarkę Opracowano

    Internet Explorer można zmusić do obsługi wielu wartościowych

    *com/code/max_width_in_ie). stylów własności działających nie przejdzie pomyślnie

    tylko w tej przeglądarce. i może niekorzystnie

    Należy wówczas pamiętać, wpłynąć na inne

    Warto wiedzieć, że Dean Edwards napisał w języku JavaScript bibliotekę Poprawia

    Internet Explorer 5+. Dzięki zastosowaniu przejdą pomyślnie

    274

    walidację.

    produkcyjnym.

    http://svendtofte.

    Niestety, większość z nich wymaga wprowadzenia

    walidacji

    (http://dean.edwards.name/IE7).

    wisku

    własności CSS.

    w tym celu wiele technik (opis jednej z nich znajduje się na stronie

    Należy jednak

    ona obsługę specyfikacji

    do arkuszy że taki kod

    przeglądarki. o nazwie

    CSS w

    IE7

    przeglądarkach

    wyłącznie kodu JavaScript arkusze stylów na pewno dokładnie ją przetestować

    przed użyciem w środo-

    Rozdział 9. Tworzenie układów CSS Hstww ZmkUdu tjarzęrfeia Pomoc

    - C X

    .

    hnp:/Axal

    1

    _ ;!• [ a

    Moj trzykolumnowy układ - Mozilla Firefox eił: Ecłftja UK**

    Cl Lubisz )abH-3?

    Witaj w moim układzie strony.

    Lewa kolumna.

    Prawa kolumna.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed • Wiesz, ae list* są nie do eiusmod tempor inndidunt ut labore et dolore maona do pobtoa? aliqua. Ut enim ad mirwm yeniam, guis nostrud exercitaboi • Naprawdę. ullamco laboris nisi ut aliquip ex ea commodo conseguat. Ouis • Nie oszukuję. aute rure dolor in reprehendent m vo3uptate velit esse ollum Curabitur elementum null3 dolore eu fugiat nulla panatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa gui offma deserunt moHł s« amet erat. Integer anim id est laborum. yanenatis. Praesent adipiscing fringilla tellus. Sed ut perspiciabs unde omnis iste natus error sit yoluptatem Praesent ullamcorper. accusantium doloremque laudantium, totam rem apenam, Muiiam id erat. Hoib. eaque ipsa guae ab illo inventore »eraatis at quasi architecto obortis. odio ut nisl. Sed

    • pdno^rafc i • Odnoiri* 2.

    8 0 0 x 6 0 0

    • Odnośni 3 lakiei podstawowe nformacje.

    Zakończono

    'Mój trzykolumnowy układ - Mozilla Firefox ei* Edycja ftrtjt traoru tm«ftla Pomoc

    CX.

    IW***

    K0

    Witaj w moim układzie strony. Lorem ipsum dolor s* amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (Jt enim ad mirtim vemam, quis nostrud e*eratatmn ullamco laboris nisi ut aSipuip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in yoluptate velit esse ollum dolore eu fugiat nulla panatur. Excepteur sint occaecat cupidatat non proident, sunt «n culpa qui offioa deserunt mollit anim id est laborum.

    • Odnośnik 1

    • OdnpiriU-; 3 1 0 2 4 x 7 6 8

    >rawa kolumna. • Wiesz, le listy s * nie do pobicia?

    • Naprawdę-

    • fłeosztfkuj^.

    lurabitur elementum nuda Sed ut perspuaatw unde omnis iste natus ei ;it amet erat. Integer laudantium, totam rem apenam, e*que ipS4 Kenenatis. Praesertt beatae «tae dicta sunt expbcabo. adipiscing fringilla teflus. Praesent ullamcorper. Nemo erem ipsam yoSuptatem quia yoluptas « aspematur aut odit aut fug*, sed quia Nullamrclerat. Mcwta consequuntur magni dolores eos qwi ratione yoluptatem se
    " M ó j trzykolumnowy układ - Mozilla Firefox Elfc gdycja tfdck JafcUdki ti»ZQ(fca Pomoc B

    B

    i

    c

    X

    &

    Witaj w moim układzie strony.

    Jakieś podstawowe

    Lorem ipsum dolor sfi amet.ransertetur*dipt«>r»o elit, sed do eiusmod tempor inddhkmt ut labore « dolore magna #hqua. Ut amm ad mmw v«m»m, guis nostrud łwotation utlameo iabons r*n ut aliQu® ex ea commodo conseguat Ou* aule
    1 2 8 0 x 1 0 2 4

    •» •

    (Jlm»;/»icH

    N*mo smm ipsam yo&iptatem qu>a *o«u w>seouur*ur magni dolores eos qt» ra » « . gui dolorem ipsum qi»a dołor « an mod. tempora moduot ut labore et dolore magnam ahguam guaerat yoluptatem. w enim ad minima wroam, g* dolorem eum fugiat guo yoluptas nuBa panatur?

    a-

    'rawa kolumna.

    Wiesz. »SiM¥fHnia

    CurabAur elementum nulla sit am«t erat. Integer aćpisang fmgJla tellus. 'raesent u*amcorper, •ft&am id erat, Morbi is odio utiról, Sed ^anda posuere massa. X»s (tam nunc, con»allis soilKJtudiri ac, rhoncus »«..gu»m. SOd

    lem. Maecenas eu mauns >eU: aKtum ornare. Morbi obortrt odio ut: mai. Std

    jratśda powor® massa.

    «bam nunc, onyallit jws, softotudm ac, rhoncus guam.Sed

    Rysunek 9.28. Własność max-width umożliwia ograniczenie szerokości obszaru z treścią

    275

    Rozdział 9. Tworzenie układów CSS Q Moja trzykolumnowa strona

    4

    Back

    O

    Forward

    Stop

    Refresh

    *

    Home

    AotoFiil

    Print

    file://looalhost/

    Lewa kolumna.

    Witaj w moim układzie strony. Certc, inquam. pertinax non ero tibique, si mihi probabis sed ut pcrspiciatis unde omnis iste natus error sit voiuptatem accusantium dok>remque

    • Odnośnik i * Odnośnika

    * Wiesz, ze listy są nie do

    laudantium. totam rem aperiam, eaquc ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt cxplicabo. Nemo enim ipsam

    pobicia?

    voluptatem quia voluptas sit aspematur aut odit aut fugit, sed quia consoąuuntur magni dolores cos qui rationc voluptatem sequi nesciunt. Neque

    * Naprawdę.

    porro qutsquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. sed quia non numquam eius modi tempora incidunt ut labore £ podstawowe informacje.

    Prawa kolumna.

    * Nie oszukuję.

    et doiore magnam aliquam quaerat voluptatem. Ut enim ad minima vcniam. quis nostrum exercitationem ullam corporis suscipit laboriosam. nisi ut alkjukl ex ea commodi consequamr?

    Więcej treści.

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas

    Et harum quidem rerum facilis est et

    molestias exccpturi sint oocaecati cupiditate non provklent, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum

    expedita distinctio. Nam libero

    fuga. Et harum quidcm rerum facilis est et expedita distinctio.

    sre, cum soluta nobis est eligendi optio cumque nihil impedit

    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placcat facere possimus, omnis voluptas

    quo minus id quod maxime placcat

    assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiLs debitis aut rerum necessitatibus saepe eveniet ut et voluptates

    facere possimus, omnis voluptas

    repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptaubus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iu Te jabłka były bardzo smaczne.

    odio dignissimos.

    Rysunek 9.29. W przeglądarkach nieobsługujących własności max-width (takich jak pokazany tu Internet Explorer dla Macintoshy) układ rozciąga się na całą szerokość okna

    Podsumowanie K u r s t w o r z e n i a u k ł a d ó w t r z y k o l u m n o w y c h rozpoczął się niewinnie — o d z w y k ł e g o niesformatowanego dokumentu. P o s ł u ż y ł o n jako punkt w y j ś c i o w y d o przeanalizowania własności p o z y c j o n u j ą c y c h CSS, które u m o ż l i w i a j ą wyjęcie elementów z normalnego u k ł a d u strony i umieszczenie ich w d o w o l n y m miejscu. W i e d z a na temat p o z y c j o n o w a n i a w z g l ę d n e g o i b e z w z g l ę d n e g o u m o ż l i w i ł a C i zbudowanie u k ł a d u t r z y k o l u m n o w e g o . D z i ę k i umieszczeniu p o z y c j o n o w a n y c h b e z w z g l ę d n i e b l o k ó w w e w z g l ę d n i e p o z y c j o n o w a n y m kontenerze udało się opracować p ł y n n y t r z y k o l u m n o w y układ. Zastosowanie h a c k ó w p o z w o l i ł o natomiast sprawić, że strona w y g l ą d a doskonale w e w s z y s t k i c h przeglądarkach. Teraz pozostaje już t y l k o dodać w ł a ś c i w ą treść.

    276

    El e m e n t y HTML 4.01 Zanim zaczniesz tworzyć arkusze stylów, musisz odpowiednio oznakować treść w dokumentach H T M L . A b y arkusze b y ł y efektywne, musisz wiedzieć, jakiego rodzaju treść umieszczać w znacznikach odpowiedniego rodzaju. W poniższej tabeli przedstawiam wszystkie elementy wymienione w specyfikacji W 3 C (organizacji opracowującej standardy internetowe) H T M L 4.01. Pierwsza kolumna zawiera nazwę elementu. Druga określa, czy element posiada znacznik otwierający. Kolejne trzy zawierają bardziej szczegółowe informacje o znaczniku. Litera O oznacza, że coś jest opcjonalne, Z — zabronione, P — znacznik jest pusty, a W — wycofywany. W kolumnie DTD znajduje się informacja, do której definicji t y p u dokumentu dany element należy. Jeśli element można znaleźć w tylko jednej definicji typu dokumentu, litera L oznacza Loose, a F — Frameset.

    Nazwa

    Znacznik otwierający

    Znacznik zamykający

    Pusty

    Wycofywany

    A

    DTD

    Opis

    L

    Kotwica

    ABBR

    Skrótowiec (np. W W W , HTTP)

    ACRONYM

    Akronim

    ADDRESS

    Dane autora

    APPLET AREA

    W Z

    P

    Aplet Javy Obszar mapy obrazkowej po stronie klienta Ciąg dalszy na następnej stronie

    Dodatek A Elementy HTML 4.01 Nazwa

    Znacznik otwierający

    Znacznik zamykający

    Pusty

    Wycofywany

    DTD

    B

    Opis

    Pogrubienie tekstu

    BASE

    Z

    P

    BASEFONT

    Z

    P

    Bazowy U R I dokumentu W

    L

    Podstawowy rozmiar pisma

    BDO

    Kierunek tekstu

    BIG

    Powiększony tekst Długi cytat

    BODY BR

    O

    O Z

    Ciało dokumentu P

    Łamanie wiersza

    BUTTON

    Przycisk

    CAPTION

    Podpis tabeli W

    CENTER

    L

    Wyśrodkowanie treści

    CITE

    Cytat

    CODE

    Fragment kodu programu

    COL

    Z

    COLGROUP

    O

    DD

    o

    P

    Kolumna tabeli Grupa kolumn tabeli Definiq'a

    DEL

    Usunięty tekst

    DFN

    Definiowana fraza

    DIR DI V

    278

    W

    L

    Lista katalogów Blok

    Dodatek A Elementy HTML 4.01 Nazwa

    Znacznik otwierający

    Znacznik zamykający

    Pusty

    Wycofywany

    DTD

    Opis

    Lista definiq'i

    DL

    Definiowana fraza

    O

    DT

    EM

    Emfaza

    FIELDSET

    Grupa elementów formularza W

    FONT

    L

    Format pisma Formularz interaktywny

    FORM

    Z

    FRAME

    P

    FRAMESET

    F

    Ramka

    F

    Kontener ramek

    Hl

    Nagłówek poziomu 1.

    H2

    Nagłówek poziomu 2.

    H3

    Nagłówek poziomu 3.

    H4

    Nagłówek poziomu 4.

    H5

    Nagłówek poziomu 5.

    H6

    Nagłówek poziomu 6.

    HEAD

    O

    Z

    HR HTML

    O

    Nagłówek dokumentu

    O

    o

    P

    Pozioma linia G ł ó w n y element do kumentu Ciąg dalszy na następnej stronie

    279

    Dodatek A Elementy HTML 4.01 Nazwa

    Znacznik otwierający

    Znacznik zamykający

    Pusty

    Wycofywany

    DTD

    Opis

    Tekst pochylony

    I

    L

    IFRAME

    Ramka wewnętrzna

    IMG

    Z

    P

    Obraz

    I NPUT

    Z

    P

    Kontrolka formularza Wstawiony tekst

    INS ISINDEX

    Z

    P

    W

    L

    Jednowierszowe pole przyjmujące tekst

    KBD

    Tekst, który powinien zostać wpisany przez użytkownika

    LABEL

    Etykieta pola formularza

    LEGEND

    Legenda grupy pól formularza

    LI

    O

    LINK

    Z

    Element listy Niezależne od medium łącze

    P

    MAP

    Graficzna mapa odsyłaczy W

    MENU META

    NOFRAMES

    280

    Z

    L

    Lista typu menu Metadane dokumentu

    P

    F

    Alternatywna treść dla przeglądarek nieobsługujących ramek

    Dodatek A Elementy HTML 4.01 Nazwa

    Znacznik otwierający

    Znacznik zamykający

    Pusty

    Wycofywany

    DTD

    Opis

    NOSCRIPT

    Alternatywna treść dla przeglądarek nieobsługujących skryptów

    OBJECT

    Obiekt

    OL

    Lista uporządkowana

    OPTGROUP

    Grupa opcji

    OPTION

    O

    Opcja

    P

    O

    Akapit

    PARAM

    Z

    Parametr obiektu

    P

    PRE

    Tekst preformatowany

    Q

    Krótki cytat w środku wiersza tekstu

    S

    W

    L

    Przekreślenie tekstu

    SAMP

    Przykładowy wynik działania programu, skryptu itp.

    SCRIPT

    Skrypt

    SELECT

    Selektor opcji

    SMALL

    Pomniejszony tekst

    SPAN

    Kontener na treść wewnątrz wiersza tekstu

    STRIKE

    W

    L

    Przekreślenie tekstu

    Ciąg dalszy na następnej stronie

    281

    Dodatek A Elementy HTML 4.01 Nazwa

    Znacznik otwierający

    Znacznik zamykający

    Pusty

    Wycofywany

    DTD

    Opis

    STRONG

    Mocne wyróżnienie

    STYLE

    Arkusz stylów

    SUB

    Indeks dolny

    SUP

    Indeks górny

    TABLE

    Tabela

    TBODY TD

    O

    O

    Korpus tabeli

    O

    Komórka tabeli Wielowierszowe pole tekstowe

    TEXTAREA

    TFOOT

    O

    Stopka tabeli

    TH

    O

    Komórka nagłówka tabeli

    THEAD

    O

    Nagłówek tabeli Tytuł dokumentu

    TITLE TR

    Wiersz tabeli

    O

    Tekst maszynowy

    TT U

    W

    L

    Podkreślenie

    UL

    Lista nieuporządkowana

    VAR

    Zmienna lub argument procedury programu

    Ta lista elementów H T M L 4.01 pochodzi ze strony www.w3.org/TR/html4/index/elements.html (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University) z 24 grudnia 1999 roku. Wszystkie prawa zastrzeżone. www.w3.org/Consortium/Legal/2002/copyright-docume7its-20021231.

    282

    Zasady konwersji HTML na XHTML

    Hypertext Markup Language ( H T M L ) to prosty język, który p r z y c z y n i ł się do dynamicznego rozwoju internetu w latach 90. ubiegłego wieku. Niestety, prostota ta była też czynnikiem hamującym ó w rozwój. Początkowy sukces H T M L - a przyciągnął w i e l u deweloper ó w w e b o w y c h i rozbudził chęci rozwinięcia tego medium. W końcu oczekiwania zaczęły przerastać jego możliwości. Przykładowo wstawianie obrazów na strony internetowe p r z y u ż y c i u H T M L - a jest łatwe. A l e umieszczenie ich dokładnie w w y b r a n y m miejscu jest niemożliwe bez nieprawidłowego użycia tabel. To samo dotyczy obiektów multimedialnych. A b y je wstawić, zazwyczaj konieczne jest użycie niestandardowych znaczników i atrybutów. Ponadto H T M L składa się z ograniczonej liczby elementów i atrybutów. Z tego p o w o d u speq'aliści z różnych dziedzin, takich jak chemia czy inżynieria, nie mogli odpowiednio oznaczyć swoich formuł. Dlatego zamiast opracowywać nadający się do wszelkich zastosowań język H T M L , organizaqa W 3 C opracowała Extensible M a r k u p Language ( X M L ) , czyli elastyczny metajęzyk. X M L jest szkieletem, na bazie którego t w o r z y się inne języki. K a ż d y może u t w o r z y ć własny język, zamiast męczyć się w ograniczonym środowisku H T M L - a . Jednak dla większości deweloperów znających H T M L główne zalety języka X M L (możliwość tworzenia n o w y c h elementów i definiowania ich własności) są nieważne. W 3 C przeformułowało H T M L , opierając go na X M L - u . W ten sposób powstał język X H T M L , który jest z g o d n y ze starszymi urządzeniami, ale ma wszystkie zalety X M L - a . I n n y m i słowy, X H T M L jest zestawem jasnych reguł umożliwiających deweloperom, znającym H T M L , tworzenie dokumentów X M L bez zbytniego zagłębiania się w szczegóły.

    Dodatek B Zasady konwersji HTML na XHTML Przejście z języka H T M L na X H T M L w i e l u przysparza kłopotów. Składnia nowej technologii jest bardziej restrykcyjna, a więc pozwala na mniej niedociągnięć niż stara wersja. A b y pomóc C i lepiej zrozumieć zasady pisania k o d u X H T M L , w t y m dodatku zamieszczam w s k a z ó w k i dotyczące przechodzenia z H T M L na X H T M L .

    Deklaracja XML Bez wątpienia każdy programista wie, jak ważny jest element html na początku dokumentu. Osoby używające X H T M L p o w i n n y na samej górze wstawiać poniższy wiersz kodu:

    Informuje on przeglądarkę, że na stronie użyto wersji 1.0 języka X M L i kodowania iso-8859-2. U ż y w a n i e tej deklaracji jest zalecane, ale niewymagane. Skoro to tylko krótki fragment kodu umieszczany na samym początku strony, czemu go nie używać? Poniżej znajduje się lista potencjalnych problemów, które mogą wystąpić. •

    Niektóre przeglądarki mogą nie zinterpretować strony, tylko wyświetlić jej kod źródłowy.

    •

    Niektóre przeglądarki mogą przetworzyć dokument jako drzewo X M L , zamiast zinterpretować jako stronę internetową.

    •

    Przeglądarka Internet Explorer 6.0 dla W i n d o w s przestawi się w tryb zgodności wstecznej nawet wtedy, jeśli dokument będzie poprawny.

    •

    Osoby używające języka P H P zauważą, że początek tego wiersza kodu (\n"; ?>

    Każdy znajdzie coś dla siebie Język X H T M L występuje w trzech różnych odmianach: s t r i c t , transitional oraz frameset. Każda z nich ma inną definicję t y p u dokumentu ( D T D ) . Dokumenty D T D definiują X H T M L i określają, których elementów można u ż y w a ć oraz w jaki sposób. Można je traktować jak słowniki d o z w o l o n y c h elementów dla określonego dokumentu. A b y dokument X H T M L b y ł poprawny, musi zawierać deklarację DOCTYPE, która zajmuje nie więcej niż d w a wiersze p o d deklaracją X M L (jeśli ktoś zdecyduje się na jej użycie). Określa się w niej rodzaj użytego D T D oraz p r z y g o t o w u j e grunt do pracy dla przeglądarek i walidatorów.

    284

    Dodatek B Zasady konwersji HTML na XHTML W y b ó r wersji s t r i c t oznacza chęć całkowitego przestrzegania prawa pod k a ż d y m w z g l ę dem. Znaczy to, że jesteś p r a w d z i w y m wielbicielem X H T M L - a i nie masz zamiaru u ż y w a ć żadnych elementów charakterystycznych dla jego poprzednika. W tej wersji elementy X H T M L używane są wyłącznie do znakowania treści, a nie jej formatowania. Poniższy kod należy umieścić pod deklaracją X M L i przed elementem html: Jeśli trudno Ci rozróżnić literki, informuję, że jest to deklaracja

    wersji XHTML1, a nie

    XHTM11.

    Wersja transi t i onal jest idealna dla tych, którzy chcą używać X H T M L , ale pragną jednocześnie pozostawić sobie możliwość korzystania z wycofywanych lub klasycznych elementów H T M L - a :

    Wersja frameset służy do tworzenia dokumentów z ramkami:

    Deklaracji frameset należy u ż y w a ć wyłącznie na tych stronach, które służą jako kontenery ramek. Nie trzeba jej stosować na każdej stronie w y k o r z y s t y w a n e j jako ramka. W dokumentach tych należy stosować deklarację s t r i c t lub transi t i onal.

    Reguły XHTML Po w y b r a n i u odpowiedniej deklaracji D T D i podjęciu decyzji dotyczącej deklaracji X M L czas na poprawne sformatowanie dokumentu. W poniższych punktach opisuję zasady poprawnego oznaczania treści i używania elementów X H T M L .

    Pamiętaj o przestrzeni nazw Określenie t y p u dokumentu umieszczone na górze strony determinuje elementy i atrybuty, jakich można w n i m używać. Obok deklaracji D O C T Y P E , d r u g i m sposobem identyfikaq'i dokumentu jest atrybut określający przestrzeń nazw, do której należy. W t y m celu do elementu html należy dodać tzw. atrybut przestrzeni nazw xml ns:
    lang="pl">

    285

    Dodatek B Zasady konwersji HTML na XHTML

    Wartości atrybutów umieszczaj w cudzysłowach Wartości wszystkich atrybutów elementów muszą b y ć otoczone p o d w ó j n y m i cudzysłowami. W z w i ą z k u z tym, poniższy kod jest niepoprawny:

    A poniższy tak:

    Nie obcinaj

    atrybutów

    W niektórych elementach H T M L (np. hr) atrybuty można obcinać w ten sposób, że wystarczy napisać tylko samą nazwę atrybutu:


    W X H T M L natomiast nie w o l n o tego robić. Jeśli chcesz u ż y ć atrybutu, który n i g d y nie w y m a g a ł wartości, w p i s z jego nazwę. W p r z y p a d k u elementu hr wartością atrybutu noshade może być noshade:


    Domykaj puste elementy Elementy puste to takie, które nie występują w parach znacznik otwierający-znacznik zamykający (np. img, br, hr). Elementów niepustych, t y p u p lub h2, jest w języku H T M L bardzo dużo. W y k o r z y s t y w a n e są do oznaczania początku i końca znakowanego fragmentu treści. Element p służy do oznaczania akapitów, co widać w p o n i ż s z y m przykładzie:

    Wtedy właśnie pomyślałem sobie, że powinienem odmówić drugiej dokładki jej niesławnego spaghetti i klopsików.



    W X H T M L wszystkie elementy, włącznie z pustymi, muszą być zamknięte. A b y w X H T M L można b y ł o u ż y w a ć pustych elementów, konieczna była pewna modyfikaq'a. Przed zamykającym nawiasem ostrym należy wstawić ukośnik: Company logo

    Zauważ, że spacja przed t y m ukośnikiem nie jest wymagana przez specyfikację, ale dzięki niej starsze przeglądarki, takie jak Netscape Navigator 4, również poprawnie odszyfrują ten element.

    Uporządkuj

    zagnieżdżanie

    Poprawne zagnieżdżanie elementów jest łatwe i p o w i n n o być czymś o c z y w i s t y m dla każdego dewelopera. W p o n i ż s z y m przykładzie zamykający znacznik elementu strong znajduje się za zamykającym znacznikiem elementu p.

    286

    Dodatek B Zasady konwersji HTML na XHTML

    Wtedy właśnie pomyślałem sobie, że powinienem odmówić drugiej dokładki jej niesławnego spaghetti i klopsików.



    Poprawna wersja tego kodu może wyglądać następująco:

    Wtedy właśnie pomyślałem sobie, że powinienem odmówić> drugiej dokładki jej niesławnego spaghetti i klopsików.



    XHTML a pliki CSS i JavaScript Preferowanymi technikami kontrolowania w y g l ą d u i zachowań elementów w dokumencie są odpowiednio dołączane pliki CSS i JavaScript: Jeśli musisz wstawić k o d JavaScript bezpośrednio d o d o k u m e n t u , umieść g o m i ę d z y otwierającym znacznikiem .

    Nazwy elementów i atrybutów pisz małymi literami W X H T M L n a z w y wszystkich elementów i atrybutów muszą być pisane m a ł y m i literami. Nie można używać ani samych wielkich liter, ani trochę małych i trochę wielkich. Poniżej znajdują się p r z y k ł a d y niepoprawnych nazw:

    Poniżej znajduje się p o p r a w n y przykład:

    Oczywiście, w wartościach atrybutów można u ż y w a ć liter dowolnej wielkości: Zdjęcia kosmitów

    Z atrybutem name używaj id W X H T M L atrybut name jest w y c o f y w a n y i w przyszłości zostanie usunięty ze specyfikacji. Zamiast niego należy u ż y w a ć atrybutu id. D o p ó k i atrybut name nie zostanie całkiem odrzucony, używaj i d razem z nim. Administrator

    287

    Dodatek B Zasady konwersji HTML na XHTML

    Stosuj encje XML Jeśli w wartości a t r y b u t u u ż y w a s z z n a k u &, zastąp go encją z n a k o w ą &. Jeśli kodujesz z n a k i & i w pracy w y k o r z y s t u j e s z d y n a m i c z n e strony, parametry w łańcuchach U R L przekazuj w następujący sposób: Dodaj do koszyka

    Jeśli masz wątpliwości, użyj walidatora W s z y s c y jesteśmy l u d ź m i i p o p e ł n i a m y błędy. A b y o d k r y ć ź r ó d ł o p r o b l e m ó w z dokumentam i lub u p e w n i ć się, że u t w o r z o n y d o k u m e n t jest w pełni p o p r a w n y , s p r a w d ź go w walidatorze — np. http://validator.w3.org — i rób to często. Także niektóre p r o g r a m y d o tworzenia stron internetowych mają w b u d o w a n e walidatory. Informacje na ich temat m o ż n a znaleźć w dokumentacji.

    288

    W ł a s n o ś c i CSS 2.1

    Oznaczając treść w dokumencie H T M L , trzeba wiedzieć, jakie elementy ma się do dyspozycji. To samo dotyczy CSS — aby efektywnie posługiwać się arkuszami stylów, trzeba znać wszystkie dostępne własności i wiedzieć, jakie wartości mogą przyjmować. W poniższej tabeli zestawiono wszystkie własności CSS 2.1. W pierwszej kolumnie znajduje się nazwa własności, w drugiej opis m o ż l i w y c h wartości. Dalej jest wartość początkowa, informacja, do jakiego rodzaju elementów dana własność ma zastosowanie oraz czy jest dziedziczna. Ostatnia kolumna zawiera informację, jakiego rodzaju mediów dotyczy każda z własności. P'zec!stawhna

    tu lista własności C S S 2.1 (www.w3.org/TR/CSS21/propidx.html)

    niona prawami

    autorskimi

    tium (Massachusetts and Mathematics,

    z 25 lutego 2004

    Institute of Technology, EuropeanResearch

    Keio University).

    Wszystkie prawa zastrzeżone.

    *Legal/2002/copyright-documents-20021231

    jest

    chro-

    roku, które należą do World Wide Web ConsorConsortium

    for

    Informatics

    www.w3.org/Consortium/

    IS}

    co o

    Nazwa

    Wartości

    o

    o

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    | [ [ l e f t - s i d e | f a r - l e f t | l e f t | c e n t e r - l e f t | center | center-right | right | f a r - r i g h t | r i g h t - s i d e ] || behind ] | leftwards | rightwards | inherit

    center

    Wszystkie

    'background-attachment1

    scroll | fixed | inherit

    scroll

    'background-color'

    | transparent | inherit

    transparent

    Wszystkie

    Nie

    Wizualne

    o co co

    'background-image'

    | none | inherit

    none

    Wszystkie

    Nie

    Wizualne

    ro

    'background-position'

    [ [ | | l e f t | center | right ] [ | | top | center | bottom ]? ] | [ [ l e f t | center | right ] || [ top | center | bottom ] ] | inherit

    0% 0%

    Wszystkie

    Nie

    Wizualne

    'background-repeat'

    repeat | repeat-x | repeat-y | no-repeat | inherit

    repeat

    Wszystkie

    Nie

    Wizualne

    'background'

    ['background-color' || dimage' || 'background-repeat' 'background-attachment' 'background-position']

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Wizualne

    separate

    Elementy table i inline-table

    Tak

    Wizualne

    'azimuth'

    'border-collapse'

    Tak

    Słuchowe

    CL

    0) r+

    CD O 0) c/5

    Wszystkie

    Nie

    Wizualne

    o o

    'backgroun|| || | inherit

    collapse | separate | inherit

    IO <£

    Nazwa

    Wartości

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    'border-color'

    [ | transparent ]{1,4} | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Wizualne

    'border-spacing'

    ? | inherit

    0

    Elementy table i inline-table

    Tak

    Wizualne

    'border-style'

    {l,4} | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Wizualne

    'border-top', 'border-right', 'border-bottom', 'border-left'

    [ || || 'border-top-color' ] | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Wizualne

    Wartość własności color

    Wszystkie

    'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'

    | transparent | inherit

    'border-top-style', 'border-right-style', 'border-bottom-styl e ' , 'border-left-style'

    | inherit

    O O O. O) r-h

    CD

    O Nie

    Wizualne

    OJ (f) =3 O C/H o

    none

    Wszystkie

    Nie

    Wizualne

    o co

    C/5 ro H

    1

    N> (O (O

    Nazwa

    1 border-top-width 1 ,

    Wartości | inherit

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    medium

    Wszystkie

    Nie

    'border-ri ght-wi dth 1 , 'border-bottomwidth 1 , 'border-left-width'

    Wizualne

    O

    o

    o . OJ r+

    CD O 0)

    fS) =3

    'border-width 1

    {l,4} | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Wizualne

    O o

    o co co K) i-1

    'border'

    [ || | 'border-top-color' ] | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Wizualne

    'bottom'

    | | auto | inherit

    auto

    Elementy pozycjonowane

    Nie

    Wizualne

    'caption-side'

    top | bottom | inherit

    top

    Elementy table-caption

    Tak

    Wizualne

    'elear'

    none | l e f t | right | both | inherit

    none

    Elementy blokowe

    Nie

    Wizualne

    •cl ip'

    | auto | inherit

    auto

    Elementy pozycjonowane bezwzględnie

    Nie

    Wizualne

    Nazwa

    Wartości

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    'color'

    | inherit

    Zależna o d klienta

    Wszystkie

    Tak

    Wizualne

    'content'

    normal | [ | | | attr() | open-quote | close-quote | no-openquote | no-close-quote ]+ | inherit

    normal

    Pseudoelementy :before i :after

    Nie

    Wszystkie

    ' counter-i ncrement'

    [ ? ]+ | none | inherit

    none

    Wszystkie

    Nie

    Wszystkie

    'counter-reset'

    [ ? ]+ | none | inherit

    none

    Wszystkie

    Nie

    Wszystkie

    'cue-after'

    | none | inherit

    none

    Wszystkie

    Nie

    Słuchowe

    'cue-before'

    | none | inherit

    none

    Wszystkie

    Nie

    Słuchowe

    O

    'cue'

    [ 'cue-before' || 'cue-after' ] | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    Nie

    Słuchowe

    OJ r+

    auto

    Wszystkie

    'cursor'

    Ni (O

    W

    [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

    o

    CL

    CD O 0)

    Tak

    Wizualne, interaktywne

    C/> =3

    o

    CTK O

    O cn

    in ro h*

    to

    Nazwa

    Wartości

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    I t r | r t l | inherit

    Itr

    Wszystkie

    Tak

    Wizualne

    inline | błock | l i s t - i t e m | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

    inline

    Wszystkie

    Nie

    Wszystkie

    | below | level | above | higher | lower | inherit

    level

    'empty-cells'

    show | hide | inherit

    show

    Elementy tabl e-cel 1

    Tak

    Wizualne

    'float'

    l e f t | right | none | inherit

    none

    Wszystkie elementy, z wyjątkiem pozycjonowanych i treści generowanej

    Nie

    Wizualne

    'font-family'

    [ [ | ] [ , | ]* ] | inherit

    Zależy o d klienta

    Wszystkie

    Tak

    Wizualne

    'font-size'

    | | | | inherit

    medi um

    Wszystkie

    Tak

    Wizualne

    'font-style'

    normal | i t a l i e | oblique | inherit

    normal

    Wszystkie

    Tak

    W T izualne

    'font-variant'

    normal | small-caps | inherit

    normal

    Wszystkie

    Tak

    Wizualne

    1

    di recti

    on1

    'display'

    'elevation'

    O O

    CL 03 r+

    CD O

    CD (f) =3 O O

    Wszystkie

    Tak

    Słuchowe

    o co co ro H'

    Nazwa

    Wartości

    'font-weight'

    normal | bold | boi der | l i g h t e r | 100

    |

    2 0 0

    |

    3 0 0

    |

    4 0 0

    |

    5 0 0

    |

    6 0 0

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy mediów (domyślne: wszystkie)

    normal

    Wszystkie

    Tak

    Wizualne

    Wszystkie

    Tak

    Wizualne

    Nie Wszystkie elementy poza niezastąpionymi elementami l i n i o w y mi, kolumnami tabeli oraz grupami kolumn

    Wizualne

    Elementy pozycjonowane

    Nie

    Wizualne

    |

    700 | 800 j 900 j inherit 'font'

    [ [ ' f o n t - s t y l e ' || ' f o n t - v a r i a n t ' Własność skró|| 'font-weight' ]? ' f o n t - s i z e ' [ cona. Zobacz / ' l i n e - h e i g h t ' ]? ' f o n t - f a m i l y ' ] poszczególne | caption | i eon | menu | messagebox własności | smali-caption | status-bar | wchodzące inherit w jej skład

    'height'

    | | auto | inherit

    auto

    o

    | | auto | inherit

    auto

    'letter-spacing'

    normal | | inherit

    normal

    Wszystkie

    Tak

    Wizualne

    'line-height'

    normal | | | | inherit

    normal

    Wszystkie

    Tak

    Wizualne

    '1ist-style-image'

    | none | inherit

    none

    Elementy z własnością display: l i s t - i t e m ;

    Tak

    Wizualne

    'left'

    o

    CL OJ r+

    CD 7? O

    CD C/5

    =3

    ' 1 i st-style-posi t i on' fO
    insi de | outside | inherit

    outside

    Elementy z własnością Tak display: l i s t - i t e m ;

    O

    C/h O

    O CO Wizualne

    co ro

    N>

    iD a>

    Nazwa 11

    i st-style-type'

    Wartości disc | c i r c l e | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lowerlatin | upper-latin | armenian | georgian | none | inherit

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    disc

    Elementy z własnością display: l i s t - i t e m ;

    Tak

    Wizualne

    o

    o

    o . O) I-+• CD O 03

    =3 O

    'list-style'

    [ ' 1 i st-style-type' | 'list-styleposition' | | 'list-style-image' ] | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Elementy z własnością display: l i s t - i t e m ;

    Tak

    Wizualne

    O

    o

    C/5 CO K)

    'margin-right', 'margin-left'

    | inherit

    0

    Wszystkie elementy Nie poza tymi, których własność display ma wartość inną niż tabl e lub i n l i n e - t a b l e

    Wizualne

    'margin-top', 'margin-bottom'

    | inherit

    0

    Wszystkie elementy Nie poza tymi, których własność di spl ay ma wartość inną niż table lub i n l i n e - t a b l e

    Wizualne

    'margin'

    {l,4} | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie elementy Nie poza tymi, których własność di spl ay ma wartość inną niż table lub i n l i n e - t a b l e

    Wizualne

    Nazwa

    Wartości

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    'max-height 1

    | | none | inherit

    none

    Wszystkie elementy Nie poza niezastąpionymi elementami l i n i o w y m i oraz tabelami

    Wizualne

    'max-width'

    | | none | inherit

    none

    Wszystkie elementy Nie poza niezastąpionymi elementami l i n i o w y m i oraz tabelami

    Wizualne

    'min-height'

    | | inherit

    0

    Wszystkie elementy Nie poza niezastąpionymi elementami l i n i o w y m i oraz tabelami

    Wizualne

    'min-width'

    | | inherit

    0

    Nie Wszystkie elementy poza niezastąpionymi elementami l i n i o w y m i oraz tabelami

    Wizualne CL OJ

    r-ł-

    'orphans'

    | inherit

    2

    Elementy blokowe

    Tak

    Wizualne, stronicowane

    'outline-color'

    | invert | inherit

    i nvert

    Wszystkie

    Nie

    Wizualne, interaktywne

    'outline-style'

    'outline-width' fO (O -sj

    o

    o

    | inherit

    | inherit

    none

    medi um

    Wszystkie

    Nie

    Wizualne, interaktywne

    Wszystkie

    Nie

    Wizualne, interaktywne

    CD

    TT

    o

    OJ C/J

    =3 O

    C/J* O

    O

    co co 10 i-1

    ro

    co

    Nazwa

    oo

    Wartości

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy (domyślne: wszystkie) mediów

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie

    vi si ble

    Elementy blokowe i zastępowalne, komórki tabeli, bloki liniowe

    Nie

    O

    o o .

    CD r+

    'outline'

    'overflow'

    [ ' o u t l i n e - c o l o r ' || ' o u t l i n e s t y l e ' || 'outline-width' ] | inherit

    vi si ble | hidden | scroll | auto | inherit

    Nie

    Wizualne, interaktywne

    CD TT

    O CD C/5

    Z5

    O C/h

    Wizualne

    o

    o (7)

    C roO

    'padding-top', 1paddi ng-ri g h t ' , 'padding-bottom', 'padding-left'

    | inherit

    0

    Wszystkie elementy poza tymi, których własność di spl ay ma wartość inną niż table, i n l i n e - t a b l e , lub table-cell

    Nie

    Wizualne

    'padding'

    {l,4} | inherit

    Własność skrócona. Zobacz poszczególne własności wchodzące w jej skład

    Wszystkie elementy poza tymi, których własność di spl ay ma wartość inną niż table, i n l i n e - t a b l e , lub table-cell

    Nie

    Wizualne

    'page-break-after'

    auto | always | avoid | l e f t | right | inherit

    auto

    Elementy blokowe

    Nie

    Wizualne, stronicowane

    'page-break-before'

    auto | always | avoid | l e f t | right | inherit

    auto

    Elementy blokowe

    Nie

    Wizualne, stronicowane

    Nazwa

    Wartości

    Wartość początkowa

    Zastosowanie Dziedziczenie Grupy mediów (domyślne: wszystkie)

    'page-break-inside'

    avoid | auto | inherit

    auto

    Elementy blokowe

    Tak

    Wizualne, stronicowane

    'pause-after'


    Activtty

    On Your Photos Commerts You*ve Made In Your Groups Photo® from your friends

    You

    Your Photos Organize Upload Your Account Do More with Your Photos

    Expiot»

    Places Last 7 Days This Month Popular Tags Creath/e Commons Soarch

    Help

    Community Guideiir.es The Help Forum FAO Tools Sitemap Help by Email

    9 Send to a frierd Savetodel.icio.us

    »"VXHoO!coi»p«o i

    Fickr Btog About Flickr Terms of Service YourPrivacy Copyright/IP Policy Report Abuse

    S U * * i Deutsch Engteh Espatol Franęais 9 3

    Italiano Portugufts

    Rysunek 6.25. Pobieranie kodu z witryny Flickr

    199

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu W t y m celu skopiuj cały k o d d o swojego szablonu lub d o k u m e n t u sieciowego. Następnie skopiuj n a z w ę użytkownika, która u Cindy w y g l ą d a tak: 43082001%40N00 (pamiętaj, że znaki & m u s z ą zostać zamienione n a &, aby k o d X H T M L pomyślnie przechodził walidację). Z m i e ń wartość count=3 n a count=4, aby wyświetlić na stronie cztery obrazy: Następnie k o d plakietki Flickr umieść w elemencie di v. N a rysunku 6.26 przedstawiam rezultat.

    Flickr Badge

    < / d i v >

    The Adverjtures of Cindy Li £3 T

    O Iwcp://www.cindyli.com/index.php

    E3 * Google

    The Adventures of Clndyll.com home about archive contact links * Dream Job? SBp&Tter27.2007

    29.oonmerte

    G x © upon a time.,.

    • about f m IMng In San Francisco, Ca. Consuntły. trying to learn new things, and on the way I get to meet some amazing people wtth my camera by my skłe. XOXO!

    fiole boys and girls were asked what they wanced 5o be wften they grew up. The answers ranged from ftreftghters, astronauts, iawyers. doctor s to balie rina. The internet wasn't in the equaticn when I was a kid. The economy is dang reafiy we U and k is possible to go soto today. I krrow a few of my frieods leawig their fuli-erae jobs and strtking it out on their own. What wouid you do if you Seft your current job* Wousd it be related to the internet? What is your dream job? What makes you truty happy?

    • on flickr

    pr-l - i

    rm

    1

    t

    m O Design Rabbit

    Some ftm iHustraóons and prsgeess fve worked on.

    <* Cooi s i t e s » Diraltó- Ve«?le * Nciud • AdacSo: Jeremy Kerth

    Rysunek 6.26. Zdjęcia ze strony Flickr niepoddane działaniu stylów

    200

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu A b y odpowiednio ustawić zdjęcia w r ó ż o w y m pasie p o lewej stronie, potrzebny jest element div o w y m i a r a c h 200 * 200 pikseli. Dopełnienie zostało ustawione n a 5 pikseli, a margines na 10. Dzięki m a r g i n e s o m obrazy ustawiają się w d w ó c h rzędach p o d w a zdjęcia. N a rysunk u 6.27 widać ukończoną sekcję zdjęć.

    The Adver>tu»res of Cindy Li ^

    http//www.cindyli.com/index.php

    S3 * i i * .

    ( " O * Coogle

    The Adventures of CindylLcom home about archwe contact links *

    Dream Job? Septern&ef2?.2007

    29con¥rienls

    Onceuponatima. limie bojre and girls were asfeed! whaU they wantecl to be when they grew up. The answeits ranged from irefighters, astronauts, fcawyers, doctors to ballerina- The Internet wasn't in the eguation when i was a kid. The economy

    • about

    is doing really well and it is possible to go solo today. I know a few of my

    Cm IMng in San Francisco, Ca. Constantly, trylng to learn new thłngs, and on the way I get to meet some amazing people with my camera by my skde. XOXO!

    friends teawng their fuil-time jobs and striking it out o n their own. What woałd you d o if you feft your current job? Woutel it be related to the internet? What is your d r e a m joto? What makes you truty happy?

    • on flickr

    0

    Design Rabbit

    Sam fc® iliustrations. and projed» l*we worked on.

    » Bjogsthat linkhere » Vlew my profile

    0

    O

    Conferences * Some wishes are comim®

    mm...

    CooisUes

    * Osfflfi;: Yeerle

    * Wefe D t o o w s Nortfc Jan 21-Fe& 2 , yaraeswer, Canada,

    * Metal * Adadtto: Jeremy ICeith * Kevin Lawver * Rtofiy.com: Motóy Holzscftiag

    " SXSW 2 0 0 8 Meraałve:&lards 7 - l i , 2008, tetin/TK Cspeate#

    * Aft That Malarkey: Andy Garke * sixtwothree. jason Garber Refresh DC, Feariess leader * CofSectiye ldea:web apps company * Dan Webb: Kuby Raite guy Just too cool * Dawą Sfoea: CSS Zen GarSere, photograptoer,, designer * Erie Meyer * Thomas VaraJer Wa! * Html Dog: Guide toCSS/HTMi

    v Exprcsslon Engine O

    Rn<Ł

    Ą

    Next

    Previous

    Q

    RSS feed artitles

    „3 Highlight all

    O

    Ma,ch

    case

    Done

    Rysunek 6.27. Ukończona sekcja ze zdjęciami

    201

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu Jest znane powiedzenie mówiące, że siłę drużyny w y z n a c z a jej najsłabsze ogniwo. Jeśli potraktować swoją witrynę jak łańcuch, dodanie d o niej innej witryny oznacza wstawienie drugiego łańcucha. Optymalizacja własnej witryny p o d w z g l ę d e m szybkości ładowania jest bardzo ważna, ale jeśli ta druga ładuje się powoli, nic nie d a się zrobić. Jeśli usługa Flickr B a d g e z jakiegoś p o w o d u będzie nieczynna, w witrynie Cindy b ę d ą widoczne puste prostokąty (rysunek 6.28).

    The Adyentures o f Cindy Li ^

    0 • ;>

    0 http: ,Vwww.cindyli.com/index.php

    1 3 * Google

    The Adventures ofClndyll.com home about archive contact links

    Dream Job? Sepember27,2007

    29comments

    Once upon a tirne.. little boys and girls were asked what they wanted to be when they grew up. The answers ranged from firefighters, astronauts, lawyers, doctors to

    • about Tm IMng In San Francisco, Ca. Constantly, trying to learn new things, and on the way I get to meet some amazlng people wtth my camera by my slde. XOXOI

    ballerina. The internet wasn't in the equation when I was a kid. The economy is doing really well and it is possible to go solo today. I know a few of my friends leaving their full-time jobs and striking it out on their own. What would you do if you left your current job? Would It be related to the internet? What is your dream job? What makes you truły happy?

    • on flickr

    Q Design Rabbit

    Some fun illustratiorss and projeas l*ve worked on.

    » Blogs that link here » View my profile

    # Cooi sites

    O Conferences * Some wishes are coming true...

    * DuoW: Veerle

    " Web Directions North, jarł 28-Feb 2. Vancouver. Ca nada,

    * Nel ud * Adactio: Jeremy Keith * Kevln Lawver * Molly.com: Molly Holzschiag

    * SXSW 2008 ltueractive:March 7-11, 2008, Austin. TX (speaklng)

    * Ali That Malarkey: Andy Ciarkę * sixtwothree; jason Carber Refresh DC, Fearless leader * Cołlective Ideaweb apps company * Dan Webb:Ruby Rails guy just too cool * Dave Shea: CSS Zen Garden, photographer, designer * Erie Meyer * Thomas yąnderWal * Html Dog: Guide to CSS/HTML

    by-Expression Engi n » \ ? Q RSS feed artlclts ©

    Find:

    Ć^

    # Next

    yi Previous

    Highlight al!

    • Match case

    Done

    Rysunek 6.28. Tak wygląda blog, gdy jest awaria witryny Flickr

    202

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu

    Formatowanie pól wyboru Lista Lifełime to do list została utworzona na podstawie listy nieuporządkowanej z polami w y b o r u (rysunek 6.29). The Adyentures of Cindy Li

    Sjii-

    |jjp*

    i

    I* http://www.cindyli.com/index.php/todo/lndex/

    fi>

    »

    ;'0'<:

    The Ack/entures of CLndyLl.com home about archive contact links Lifetime to do list... I starred this Ksc when my friend Jody and I went «o NY for flash forward. V Bied to get ftckets for a show and we got on tfte Car&on Dały show.

    •about Tm IMng in San Francisco, Ca. Constandy, trying to learn new things, and on amazing people with my camera by my side. XOXOt

    ••arg

    sjfcyExprcssłorv Engine

    RSS eed artlcl!

    '

    Rysunek 6.29. Strona z listą rzeczy do zrobienia w życiu

    203

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu A b y uzyskać ten efekt, należy utworzyć d w a pola w y b o r u — jedno zaznaczone i jedno niezaznaczone. N a rysunku 6.30 widać zaznaczone pole w y b o r u w oknie programu A d o b e Photoshop. C i n d y utworzyła swoje pola w y b o r u w programie A d o b e Photoshop, stosując ustawienia widoczne na rysunku 6.31. W programie A d o b e Photoshop Creative Suitę (CS) 3 utwórz obraz o w y m i a r a c h 11x13 pikseli, używając trybu R G B . W y s o k o ś ć jest w y z n a c z a n a przez haczyk w polu wyboru, który wystaje poza pole o w y m i a r a c h 8x8 pikseli.

    Rysunek 6.30. Pole wyboru

    New OK

    Name: bullet_check_on.gif Preset:

    Tl

    Custom

    c

    Cancel Save Preset...

    Size: Width: 11

    pixe!s

    Height: 13

    pixels

    3 }

    • e l e t e Preset...

    ( Deyice Central... '' pixels/inch

    Resolution: 72 Color Mode:i RCB Color Background Contents: 1 White !

    T l

    8 bit Image Size: 4 2 9 bytes

    » ] Advanced

    Rysunek 6.31. Okno dialogowe Create New Image (Nowy dokument) programu Adobe Photoshop

    204

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu W tle tego obrazu Cindy użyła p o m a r a ń c z o w e g o koloru #f6851f (R:246, G: 133, B:31), co widać na rysunku 6.32.

    builet_check_on.tif @ 100SŚ
    Color Picker (Foreground Color)

    I m

    -

    ! '

    O S : |87 O B : [96~jK O * O & p T ]

    • o * |5T] Only Web Colors # f6851f

    Rysunek 6.32. Okno dialogowe Color Picker (Wybierz kolor) programu Adobe Photoshop z wybranym kolorem pomarańczowym

    U t w ó r z n o w ą warstwę, klikając ikonę znajdującą się n a dole m i ę d z y ikonami folderu a śmietnika w oknie Layers (Warstwy) (widać ją w p r a w y m d o l n y m rogu rysunku 6.33), lub kliknij polecenie Layers/New Layer (Warstwy/Utwórz warstwę).

    VI O r\

    bullet_check_on.tif ę 100%(C...

    : cha™.u | paih, |

    a ^ ł i

    •

    TdS'TqT

    ":[ZHB

    i ^ T A T a r r g j j i a i

    a

    Rysunek 6.33. Okno obrazu w programie Adobe Photoshop

    Następnie utwórz 8-pikselową ramkę, przytrzymując klawisz Shift podczas przeciągania narzędzia Rectartgular Marąuee (Zaznaczanie prostokątne — rysunek 6.34). Biały 8-pikselowy kwadrat jest położony w odległości jednego piksela o d górnej i lewej krawędzi, co widać na rysunku 6.35.

    205

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu

    Rysunek 6.34. Pasek narzędzi programu Adobe Photoshop z zaznaczonym narzędziem Rectangular Marquee (Zaznaczanie prostokątne)

    Rysunek 6.35. Przykład białej kwadratowej ramki na pomarańczowym tle

    206

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu U t w ó r z jeszcze jedną warstwę dla pola w y b o r u i za p o m o c ą narzędzia w e k t o r o w e g o narysuj strzałkę. Następnie wybierz dla niej kolor. W witrynie CindyLi.com użyto koloru #dlff44 (R:209, G: 255, B: 68), jak widać n a rysunku 6.36.

    Pick a solid color; OK

    C

    J

    Cancel

    ( Add To Swatches ) (

    OL

    94

    |X

    0 «

    -33

    O B : | l 0 0 ;«

    Ob

    ©H:

    [wn-

    O S : j 73

    p"

    O *

    •

    Color Libraries

    [209]

    78

    Cj22

    OC:[25?l

    0

    O b : fes

    92

    1

    Only Web Colors * clff44

    )

    I * * %

    [o~l*

    Rysunek 6.36. Okno dialogowe Color Picker (Wybierz kolor) programu Adobe Photoshop, w którym wybrany został kolor wypełnienia strzałki

    Następnie zastosuj poniższe ustawienia, aby utworzyć cień pola w y b o r u (rysunek 6.37).

    Opcja

    Wartość

    Blend mode (Tryb Opacity Angle

    (Krycie) {Kąt)

    Distance Spread Size

    mieszania)

    (Odległość) (Zasięg)

    (Rozmiar)

    Następnie zapisz plik p o d n a z w ą

    Multiply

    (Mnożenie)

    20% 120" 2 px (piks) 0% 0 px (piks)

    bidlet_check_on.gif.

    207

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu Layer Styte Styles Blending Options: Default V Drop Shadow f

    !

    Stracture Blend Mode: 1 Multipiy Opacity:

    InnerShadow

    O Outer Clow O l«ner Clow O Bevel and Emboss OContour QTexture

    Angle: Distance:

    » P®

    O

    |I20

    1*

    ] * h / Use Global Light

    (

    OK

    (

    Cancel

    ")

    ( New StyleZT) Preview

    >

    Spread: i

    1*

    >

    Size: i Ouality

    O Satin Contour:

    Anti-aliased

    Q Color Overlay O Gradient Overiay O Pattern Overiay

    |5-

    Noise:

    Layer Knocks Out Drop Shadow

    O Stroke

    Rysunek 6.37. Okno dialogowe Layer Style (Styl warstwy) programu Adobe Photoshop z ustawieniami, które mają stworzyć cień pola wyboru

    A b y utworzyć niezaznaczone pole w y b o r u (rysunek 6.38), wyłącz warstwę z haczykiem (rysunek 6.39) i zapisz plik p o d n a z w ą bullet_check_off.gif.

    •

    Rysunek 6.38. Pole wyboru bez haczyka

    208

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu | Layers X [ Channels f Paths i ; i Opaclry: 100* |*j •

    >1+ a

    ™

    100% !»;

    f* -

    |» £ff«cts

    |» w

    • •

    S» Drop Siudów Layer 3

    Background

    a

    /*.

    a

    ©J

    J

    a l

    a

    Rysunek 6.39. Okno warstw programu Adobe Photoshop

    Poniżej znajduje się k o d X H T M L listy Lifetime To Do List:

    Lifetime to do list

    • Finish blog design
      • <1i class="undone">Go to England for New Years
    • Finding peace :)
    • See Geeky Chix project live
    Z a u w a ż , że elementy 1 i mają atrybut cl ass. Wartość tego atrybutu określa, czy d a n y element listy został zrealizowany, czy nie. Z a p o m o c ą atrybutu cl ass C i n d y w y z n a c z a odpowiednią grafikę użytą jako punktor. K o d C S S formatujący tę listę znajduje się poniżej (rezultat widać n a rysunku 6.40): .lifetime li { color:#952300; paddi ng-1eft:15px; background: url(../images/bullet_check_off.gif) no-repeat;

    } .lifetime li.done { background: url(../images/bullet_check_on.gif) no-repeat;

    }

    I

    FInish my blog redesign Go to England for New Years Finding peace :) Łee Geeky Chix project livt

    Rysunek 6.40. Przykładowa lista z j e d n y m elementem zaznaczonym

    209

    Rozdział 6. Przygody CindyLi.com: modyfikacja blogu

    Podsumowanie W rozdziale t y m zostały opisane najważniejsze czynności potrzebne d o przemienienia prostego szablonu blogu w w y s o c e funkcjonalne dzieło sztuki. Zapoznałeś się z k o d e m C S S u ż y t y m d o b u d o w y tej witryny, który sprawił, że stała się tak funkq'onalna. Ponadto nauczyłeś się o p r a c o w y w a ć układy stron oraz tworzyć, p r z y g o t o w y w a ć d o użytku i personalizować błogi. D o d a t k o w o m o g ł e ś podejrzeć proces tworzenia rozszerzającej się w pionie chmurki składającej się z części górnej i dolnej, m o g ł e ś zobaczyć p o p r a w n y k o d plakietki Flickr oraz pola w y b o r u , które m o ż n a zaznaczać i u s u w a ć ich zaznaczenie. Ponadto nauczyłeś się b u d o w a ć paski nawigacyjne, tworzyć efekty oraz d o d a w a ć elementy za p o m o c ą CSS.

    210

    AIGA C i n c i n n a t i : s z a b l o n y HTML w i a d o m o ś c i e - m a i l Wyślij swoje paczki wcześnie, aby poczta miała czas zgubić je jeszcze przed świętami. — Johnny Carson American Institute of Graphics Artists ( A I G A ) został założony w 1914 roku w celu promocji sztuki projektowania jako „działalności zawodowej, narzędzia strategicznego oraz niezbędnej siły kulturowej". Liczy 16 000 członków ze wszystkich zakątków kraju oraz posiada 56 lokalnych filii, jest najstarszą i najprężniejszą organizacją zrzeszającą projektantów. Filie, takie jak w Cincinnati, zostały założone n a terenie całego kraju, aby pielęgnować związki z członkami. Ich z a d a n i e m jest tworzyć banki pracy oraz oferować upusty n a produkty i usługi, a także urządzać konferencje, umożliwiać kontakty m i ę d z y r ó ż n y m i osobami oraz organizować warsztaty. Chcąc p r o m o w a ć swoje inicjatywy, A I G A Cincinnati postanowiła ulepszyć swoje w i a d o m o ści e-mail wysyłane d o członków, aby za ich pośrednictwem podnieść ś w i a d o m o ś ć o d b y w a jących się w y d a r z e ń oraz w ten sposób zwiększyć liczbę uczestników. D o tego celu chciano użyć szablonów H T M L . Zaprojektowane n a konkretne potrzeby szablony nadają się d o informowania o większości działań p o d e j m o w a n y c h przez organizację każdego roku (wydarzenia h a p p y h o u r służące n a w i ą z y w a n i u kontaktów, p r o g r a m y mentoringu dla studentów kierunków związanych z p r o g r a m o w a n i e m oraz konkursy projektanckie), ale są n a tyle elastyczne, że m o ż n a je zaadaptować także d o innych wydarzeń, jeśli się pojawią.

    Problemy z formatem HTML wiadomości e-mail Język H T M L został o p r a c o w a n y w celu umożliwienia przesyłania czystego tekstu. W y korzystanie go w wiadomościach e-mail, aby wysyłać obrazy przez internet, jest tylko

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail naturalnym następstwem; środowisko biznesowe i k o n s u m e n c i w swoich wiadomościach potrzebowali lepiej przedstawionych i bogatszych treści. Obecnie prawie wszystkie popularne aplikacje pocztowe obsługują H T M L . P r o g r a m y te, p o z a z w y k ł y m tekstem, oferują możliwość wysyłania w i a d o m o ś c i w formacie H T M L jako d o m y ś l n y m . Bardzo często u ż y t k o w n i k n a w e t nie wie, że wysyła e-mail w H T M L - u ani że istnieje opcja pozwalająca wrócić d o z w y k ł e g o tekstu. Marketing m a i l o w y z wykorzystaniem H T M L - a jest bardziej efektywny niż e-maile wysyłan e jako z w y k ł y tekst i inne f o r m y reklamy ( h t t p : / / e m a i l - m a r k e t i n g - r e p o r t s . c o m / b a s i c s / w h y . h t m ) , charakteryzuje się w y ż s z y m w s k a ź n i k i e m kliknięć, posiada możliwości d o d a w a n i a obrazów, wstawiania bezpośrednich o d n o ś n i k ó w d o witryny firmy itd. W a d ą takich w i a d o m o ś c i e-mail jest to, że nie wszystkie aplikacje pocztowe obsługują język H T M L w taki s a m sposób i nie tak dobrze jak przeglądarki internetowe typu Safari czy Internet Explorer 7 dla W i n d o w s . Sytuacja p r z y p o m i n a w o j n ę przeglądarek, która toczyła się w latach 90. ubiegłego wieku, kiedy to jedna strona m o g ł a świetnie w y g l ą d a ć w jednej przeglądarce i była nieczytelna w innej. Dziś w podobnej sytuaq'i są p r o g r a m y pocztowe. W czasie pisania tych słów d o klientów zaliczanych d o g r u p y p r o g r a m ó w słabo obsługujących standardy w e d ł u g Email Standards Project, o k t ó r y m piszę dalej, należą . M a c firmy Apple, Google Gmail, Lotus Notes 8, Microsoft Outlook 2007 oraz W i n d o w s Live Hotmail. Projekt s t a n d a r d ó w sieciowych i programiści sprawili, że producenci przeglądarek w k o ń c u zaczęli przykładać się d o p o p r a w n e j implementacji H T M L i C S S w swoich produktach. W p o d o b n y sposób n i e d a w n o u t w o r z o n y Email Standards Project (www.email-standards.org) zachęca p r o d u c e n t ó w i programistów d o d o k o n y w a n i a z m i a n n a rzecz pełnej obsługi stand a r d ó w H T M L w wiadomościach e-mail.

    Tworzenie szablonu Projekt szablonów A I G A Cincinnati (rysunek 7.1) został o p r a c o w a n y przez projektanta Joego Napiera. P o n i e w a ż e-maile w formacie H T M L to nic innego jak ministrony internetowe wysyłane d o środowiska, w k t ó r y m obsługa C S S w najlepszym p r z y p a d k u jest niedokładna, d o kontroli układu użyto tabel. M i m o iż ten styl pracy jest z d e c y d o w a n i e o d r a d z a n y n a z w y k ł y c h stron a c h internetowych, w t y m p r z y p a d k u jego zastosowanie jest konieczne. Dlaczego? U k ł a d y H T M L oparte n a tabelach nie są zależne o d CSS. Taki układ daje większe szanse, że elementy w i a d o m o ś c i b ę d ą znajdowały się tam, gdzie powinny, bez w z g l ę d u n a to, w jakim stopniu d a n y klient obsługuje k a s k a d o w e arkusze stylów. N i e chcę powiedzieć, że C S S są całkowicie ignorowane. W szablonach H T M L wiadomości e-mail u ż y w a się ich d o definiowania własności p i s m a i kolorów oraz ustawiania mniej w a ż n y c h własności z w i ą z a n y c h z pozyq'onowaniem, takich jak dopełnienie czy marginesy.

    212

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail AIGAI Cincinnati

    Design Revival

    2008

    Tłimsday, May 24 2007 ShaterTownKeotucky 630 PM

    Lorem ipsum dolor sit amet, consectetur adipisscing elit, sed do e«usmod tempor incididunr ut labore et doiore magna alicjua. Ut eoim ad minim veniam, quis nostrud exerotation uHamco laboris nisi ut aliquip ex ea commodo consequat. Dii a aute irure dolor in reprebeoderit in voluptate ve!it esse cillurn dobre eu fugiat nulla pariatur, Excepteur sint occaecat cupłdatat non proidene, surtt in cuipa quv ofFicia deserunt moBtt anim id est labo rum. Clhrtiheiefor more

    HOW Mentoring Lorem ipsum dolor sit amet, consectetur adipisidng elit, sed do etusmod tempor inrididunt ut labone et dolore magna al qua. Mentoring site

    AIGA Fłicker Lorem ipsum dolor sit amet, consectetur adipisścing elit. sed do eiusmod tempor inddkłunt ut labore et dołore magna aliqua. Our Rfcto site

    www.cincinnatiaq8.oig | Joln | AGA Jabs | Contr ences | Unsubscribe

    Rysunek 7.1. Szablon HTML wiadomości e-mail

    Drukowanie

    projektu

    Pierwszą rzeczą, którą należy w y k o n a ć , jest w y d r u k o w a n i e projektu. Z a p o m o c ą ołówka i linijki narysuj komórki tabeli, która zawiera cały układ. Dzięki t e m u dowiesz się, ile w przybliżeniu będziesz potrzebować wierszy i kolumn. M e t o d a ta umożliwia projektantowi zorientowanie się, jaka mniej więcej będzie struktura tabeli H T M L (rysunek 7.2).

    Tworzenie układu

    tabelkowego

    Znając strukturę tabeli H T M L , m o ż n a przejść d o etapu projektowania układu w Photoshopie. Narysuj komórki tabeli za p o m o c ą narzędzia Slice (Cięcie na plasterki — rysunek 7.3). Umożliwia ono zdefiniowanie granic kilku grafik w j e d n y m pliku. Przy użyciu funkcji d o p a s o w y w a n i a ustawienie k o m ó r e k w jednej linii jest dziecinnie proste. Linie z wcześniej narysowanych figur są wykorzystywane jako w s k a z ó w k i przy wyznaczaniu wysokości i szerokości n o w y c h fragmentów (rysunek 7.4). Zauważ, że nie pokazano górnej części szablonu HTML Jest to spowodowane tym, że obrazy te — główna grafika i nagłówek AIGA Cincinnati — miały zająć całą szerokość tabeli. Dlatego na tym etapie można obejść się bez ich cięcia. Można je dodać do tabeli indywidualnie, dopisując w kodzie dwa nowe wiersze.

    213

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail

    Origination Design Show & Competition Mair'24200?'" 2©*h Cenłury Th»*?i« 9:00 PM

    U>nsmi]łsum dolftf sil amet, cow&ectetur adipisidSg .Sr eiusmod temper irodidunt ut labore et n uiiamco iaeons Msi ut aliqui0 ex ea commodo cóftsiKiuat. Duis aute irure dolor eł hwse

    Ipsum dolor sa consectetur dipisicifur elit, sed do labcre et magna ałioua.

    ikr s-te

    | Joto | AIGA Jobs | Cowfrwwss f

    Rysunek 7.2. Określanie położenia komórek tabeli

    P o nakreśleniu k o m ó r e k należy przejść d o każdej z nich i określić jej własności przy użyciu palety opcji. A b y zaznaczyć konkretny kawałek, należy użyć narzędzia Slice Select (Zaznaczanie plasterków). Narzędzie to włącza się, klikając p r a w y m przyciskiem m y s z y Slice (Cięcie na plasterki) i wybierając je z m e n u , które się w ó w c z a s pojawia. Ikona narzędzia Slice Select (Zaznaczanie plasterków) o b o k ostrza noża m a jeszcze strzałkę (rysunek 7.5). Teraz kliknij pierwszy kawałek w l e w y m g ó r n y m rogu. A b y zobaczyć odpowiadające m u opcje, widoczne na rysunku 7.6, użytkownik komputera P C powinien kliknąć p r a w y m przyciskiem myszy, a komputera M a c — przytrzymać klawisz Ctrl podczas klikania.

    214

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail

    H P, \ n W

    y . S.

    Narzędzie Slice (Cięcie na plasterki)

    Ł. &

    ca i. V A. T.

    Ś.

    O A

    •r

    m m

    Rysunek 7.3. Narzędzie Slice (Cięcie na plasterki) zaznaczone na pasku narzędzi programu Adobe Photoshop

    © O 0

    • aiga_email01-4_Competition Production.psd @ 100% (Layer 1, RCB/8)

    Design Show

    SOD uu usmod tempor intódidunt ut łatwe et doiore magna afigua. ut ad mionn veniam, QuiS nostrud eKercitation uliamco łabońs ut alsgutp ex ea commodo consequat. Ouis ante trure dolor epreftendertt m yoiuptate vel>t esse ciltum dcrtore eu fugtat nulla ariatur. EKcepteur sśrtt occaecat cupidatat non proident, sunt in ul pa gui offctia deserunt molłit anim id est laborum,

    ?0th Csntury Th»»tr« 9;00 PM

    the

    SpcHłsors: Art AtaKlwuy of Cmcmrssts. howe

    fiCllal ram

    WMĘ

    BHFloring .orem tpsum dolor at sroet, consectetur sdipisicing ebt, sed do siusmod tempor rsadidunt ut labore et. jolore magna afiqua. ^entormo site

    Lorem ipsum dolor sit amet, consectetur adiptsicing elit, sed do eiusmod tempor inadtdunt ut labore et

    m m 7.tinenw\ali.a>4a.c
    Rysunek 7.4. Pokrojony szablon HTML

    Pierwszy kawałek chcę wyeksportować jako obraz o unikatowej nazwie. N a d a m m u n a z w ę header_tidbit (rysunek 7.7).

    215

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail Ps

    m

    2 3

    m

    Narzędzie Slice Select (Zaznaczanie plasterków)

    ttim

    Z , i . U V i. T G S I JL

    Ą

    o

    [K2J

    W Rysunek 7.5. Ikona narzędzia Slice Select (Zaznaczanie plasterków)

    8

    6

    6

    ' aiga_enait01-4_Compe|

    • O n g i n a t i o n D e s i g n S| r

    —

    iiłlłl.i.

    Delete Slice

    1

    P f o m o t e t o U s e r Slice C o m b i n e Siices

    Divide Slice...

    -

    Bring to Front Bring Forward Send Backward Send t o Back

    HO

    Rysunek 7.6. Opcje kawałka obrazu

    P o d o b n e ustawienia zastosuj w o b e c wszystkich pozostałych kawałków, których chcesz użyć jako obrazów. Natomiast dla obszarów, które mają być wypełnione tekstem, ustaw opcję Slice Type (Typ plasterka) n a wartość No Image (Brak obrazu), tak jak na rysunku 7.8. Po zakończeniu pracy z kawałkami kliknij polecenie File/Save for Web & Devices (Plik/Zapisz dla Internetu i urządzeń), które otwiera o k n o dialogowe Savefor Web & Devices (Zapisz dla Internetu i urządzeń) widoczne n a rysunku 7.9. U ż y w a j ą c narzędzia Slice Select (Zaznaczanie plasterków), ustawiam opcje eksportu każdego kawałka, który przeznaczyłem d o wyeksportowania jako obraz.

    216

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail Slice Options i- Slice Type.

    c:°* 3

    Image

    Name: jheader_tidbit|

    (

    Cancel

    )

    URL: [ ~ Target: [ Message Text: Alt Tag:

    — Dimensions X: 0 Y: Slice Background Type:

    W 58

    jo

    |

    None

    H: [60 Background Color:

    Rysunek 7.7. Okno dialogowe Slice Options (Opcje plasterka)

    • O

    O

    ©

    aięa.emaiio 1 -4_Competition Production.psd ę 100SS CLayer 1, RCB/8)

    Lmgination Design Show & Competition »

    ' «Mtr*

    : iĄ 1SB Mpwane efrt, 'sed 00 teasfisKJ tempa* tnodwJurct ut labore et defes« atujua. ut pwtł && mmm ows noserud emccitmm utsamcó łabom

    Slice Options Slice Type

    i |

    No Image

    OK

    3

    Tent Displayed in C d i :

    — — « •

    Tekst...

    •i:

    X: ;S8

    im&

    9

    '

    Y: '73 Slice Background Type

    None

    j

    W: | l 6 1 H

    164

    1

    i ! Sackground Color:

    Rysunek 7.8. Ustawienia eksportu tekstu zamiast obrazu

    Zgodnie z tradycją, obrazy do opublikowania w sieci zawierające płaskie obszary jednolitego koloru są zapisywane w formacie GIF, a bardziej złożone, takie jak główny obraz projektu, w wysokiej jakości formacie JPEG.

    217

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail ą Save For Web & Devices Ongmal

    Optimized \ 2 - U p

    ©

    4-Up

    O

    B

    Save Cancel

    3

    Done

    /

    gination Design Show & Competition

    —

    CIF Seetire

    Mg||is}|»p?ium dolor sil amet. conseci-ir ęjjr sed do eiusmod temoor mcididunt ut labore et doiore magna aiiqua. ut ŁOim ad mi rum veniam, guts nostrud exercitat
    HOW

    !3J

    UiS, [o

    • • ł oi

    Celo'-, f j

    No Dither Transparency

    Matte:]

    NoTranspare... :

    <2

    T

    Dither. 1 0 0 *

    j 1 Amount:

    Interlaced

    .

    None

    • '

    100%

    •

    Web Snap: 0%

    " a

    Color Table • Image Slze

    Eaur

    mur

    [DEDonrig •rem ipsum dolor st net, consectetur jdipisiong efit, sed do usmod temper (Odidunt ut lat>ore et jolore magna alięua. :or;ing s-ste

    j j L

    mit tm flickr

    A Flicker Lorem ipsum dolor s amet, consectetur adspisicing elit, sed c eiusmod tempor inodidunt ut labore < doiore magna aliqua

    moroMLtWT

    m u r L o o p n g Options

    «

    CIF 2 sec @ 28.8 Kbps

    — C

    Once

    > I ll> 1

    0% dither Selective palette 32 colors

    2.012K

    nar

    Ol

    — B:

    --

    Alpha:

    —

    Hex:

    (

    Dęyice Central...

    )

    Rysunek 7.9. Okno dialogowe Save for Web & Devices (Zapisz dla Internetu i urządzeń)

    P o nadaniu n a z w wszystkim o b r a z o m kliknij przycisk Save (OK) w oknie d i a l o g o w y m Save for Web & Devices (Zapisz dla Internetu i urządzeń), co spowoduje pojawienie się okna dialogow e g o Save Optimized As (Zapisz zoptymalizowane jako), widocznego na rysunku 7.10. Z listy Format wybierz opcję HTML and Images (HTML i obrazy) i kliknij przycisk Save (Zapisz). Spowoduje to wyeksportowanie wszystkich obrazów z Photoshopa i automatyczne wygenerowanie tabel H T M L stanowiących podstawę szablonu wiadomości e-mail (rysunek 7.11).

    218

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail Save For Web & Devices Optlmized ] o

    O

    Save Optimized As

    @

    Save As:

    aśga_ematS01-4_Competition-Producti-

    1K)

    versionl •

    *

    Christopher S..

    O, search

    Date Modified

    Network

    j Desktop Applications

    I33E3

    war

    a gjjjj k

    U l

    p O

    Documents Movies Musie Work

    1

    IDEI

    Format:

    I B

    Images Only

    Settings:

    Default Settings

    Slices:

    All Slices

    129 byrtes 1 sec ę 28.8 Kbps ( New Folder j

    ( Cancel )

    (

    Save

    -fwm-

    ^ P M P I R M M P M P

    ) "

    *

    Rysunek 7.10. Okno dialogowe Save Optimized As (Zapisz zoptymalizowane jako)

    format:

    HTML and Images

    Settings:

    Default Settings

    Slices:

    All Slices

    3 g

    Rysunek 7.11. Ustawianie formatu eksportu

    Poniżej znajduje się w y g e n e r o w a n y k o d H T M L , którego w y n i k widać n a rysunku 7.12.

    219

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail

    width="85"



    width="121"



    220

    Rozdział 7. AIGA Cincinnati: szablony HTML wiadomości e-mail
    Tekst Tekst
    Tekst
    Tekst Tekst Nawigacja stopki


    Origination Design Show & Competition

    Tekst Tekst Tekst

    Nawigacja stopki

    Rysunek 7.12. Podstawowy szablon HTML

    Jak pamiętasz, oryginalne nagłówki nie zostały p o d d a n e działaniu narzędzia Slice (Cięcie na plasterki), ponieważ w y m a g a ł y pełnej szerokości tabeli H T M L . D o wygenerowanej przez program podstawowej struktury tabeli m o ż n a dodać d w a wiersze zawierające te grafiki, tak jak na rysunku 7.13.
    AIGA Cincinnati

    Czwartek, 24 maja 2007
    Klewki, Polska
    18:30
    Mapa