Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Wprowadzenie
10
18
Rozdzia 2: Projektowanie
54
Atlantis
Zunflower
Springtime
viridity
Ballade
Night Drive
56
62
68
74
80
86
Rozdzia 3: Ukad
92
Backyard
Entomology
White Lily
prt--porter
CS(S) Monk
Not So Minimal
Rozdzia 4: Obrazy
Japanese Garden
Revolution!
Deco
No Frontiers!
Coastal Breeze
What Lies Beneath
Coastal Breeze, strona 156
ROZDZIA 3
94
100
106
112
118
124
130
132
138
144
150
156
162
Rozdzia 5: Typografia
Oceans Apart
si6
Release One
Dead or Alive
Blood Lust
Golden Mean
168
170
176
182
188
194
200
206
208
214
220
226
232
238
Gemination, strona 214
Rozdzia 7: Rekonstrukcja
244
Hedges
Radio Zen
South of the Border
Corporate ZenWorks
Open Window
mnemonic
246
252
258
264
270
276
Myli na zakoczenie
Skorowidz
282
291
South of the Border, strona 258
LAYOUT
Rozdzia
Projektowanie
Chocia proces projektowania witryn
Springtime, strona 68
Projekty omawiane w tym rozdziale ilustruj zagadnienie, ktre staje si coraz bardziej istotne
podczas tworzenia witryn. W jaki sposb efektywnie
zarzdza tym procesem? Niezalenie od tego, czy
jeste przyzwyczajony do rozpoczynania pracy od
projektw wstpnych w programie Adobe Photoshop,
szkicowania pomysw na kartce papieru, tworzenia
prototypw w CSS lub pisania kodu od pocztku, na
pewno w tym rozdziale znajdziesz propozycje nowych,
uytecznych metod pracy.
projektowanie
55
Atlantis
Minimalizm, jedno i symbolika
56
ROZDZIA 2 / projektowanie
Minimalizm
To, co natychmiast rzuca si w oczy w trakcie ogldania projektu Atlantis, to jego
wzgldna prostota, panujca na caej stronie za wyjtkiem precyzyjnego kolau
wnagwku. Poprzez poczenie elementw fotograficznych z pozornie prostym
ukadem Davis uzyska niepowtarzaln mieszank skomplikowanego iprostego.
Ogrd Zen tworzony by w czasie, gdy wikszo projektw opartych na technologii CSS uwaano za nieatrakcyjne z powodu zbytniego minimalizmu i racej
kanciastoci (patrz rysunki 2.1A, 2.1B i 2.1C). W pokazanych tu projektach waciwie nie ma niczego zego, pod warunkiem, e s wykorzystywane w odpowiednim
kontekcie i celu.
Niech do tak rozumianych typowych projektw CSS wynika z maego nieporozumienia twrcy tych prac nie byli projektantami-grafikami w tradycyjnym
znaczeniu tego terminu przez to ucierpiaa technologia. Oczywicie, to by jeden
z problemw, ktre mia rozwiza ogrd Zen.
Atlantis jednak zatacza koo i jest wyranym dowodem na to, e sowo minimalizm nie oznacza wcale mao atrakcyjnych projektw. Po prostu, gdy ogldasz
wiele przykadw wykonanych wedug tego samego projektu, szybko Ci one
znudz. Podawanie pure ziemniaczanego, pieczonych ziemniakw, ziemniakw
z wody i frytek na jeden obiad to lekka przesada. Jednak zgrabna kulka pure obok
indyka na talerzu dopenia skromny, lecz jake smaczny posiek.
Wniosek z tego taki, e proste, minimalistyczne projekty maj swoje miejsce ifunkcj. Tak naprawd projekt powinien by uzaleniony od zawartoci treciowej, zatem jeli zawarto jest wizualnie zoona lub jej poznanie wymaga znacznej uwagi,
przecianie jej zbdnymi ozdobnikami jest niecelowe.
atlantis
57
W nauce ukadania poszczeglnych elementw moe pomc analiza bardzo minimalistycznych projektw typu Atlantis. Jeli usunie si obraz nagwka, charakter
projektu staje si bardziej oczywisty (rysunek 2.2). Obok obszaru zwaciw zawartoci, po lewej stronie znajduje si niewielkie menu.
Typografia
Tekst w gwnej sekcji witryny Atlantis jest zauwaalnie wikszy ni tekst menu. Te
dwie czci zostay zrnicowane w ten sposb, aby podkreli, e to, co znajduje
si po lewej stronie, nie jest tak wane, jak tre po prawej (rysunek 2.3). Podobnie
uycie wikszej czcionki w nagwku odrnia go od tekstu w sekcji gwnej. Te wyrniki przekazuj dodatkowe informacje o hierarchii fragmentw tekstu.
Rysunek 2.2. Projekt Atlantis
Ikonkografia
W menu po lewej stronie Davis obok kadej z nazw projektw wstawi mae ikonki.
Poniewa rozmiar ikonek jest zbliony do rozmiaru czy, wspgraj one z tekstem
i peni funkcj nieodwracajcych uwagi punktorw. Ten szczeg odrnia gwne
cza od tych, ktre znajduj si tu pod nimi, i sprawia, e banalne menu staje si
bardziej interesujce.
Ikony s uproszczonymi symbolami reprezentujcymi pewne obiekty i idee lub przekazujcymi pewn tre bez koniecznoci stosowania dugich opisw tekstowych.
Obiekty mona ilustrowa w sposb dosy oczywisty, natomiast trudniej za pomoc
ikonek wyraa idee, procesy i czynnoci. Dobrych ikonek nie trzeba dodatkowo objania, ale s one czsto niepotrzebnie wizualnie oderwane od rzeczywistoci. Istotne
jest silne i spjne powizanie ikonki z pewn ide, aby pniejsza identyfikacja staa
si bardziej intuicyjna.
Linia
Davis wybra dwa rodzaje linii, za pomoc ktrych oddziela rne fragmenty projektu. Linia przerywana otacza dwa akapity nachodzce na obraz z nagwka, a linia ciga
oddziela nagwek i stopk od reszty strony (patrz rysunek 2.4). Te proste elementy
wzbogacaj wizualnie stron bez angaowania wiadomej uwagi ogldajcego.
58
ROZDZIA 2 / projektowanie
Poprzez uycie linii mona zdefiniowa obszary strony, ustali jej granice i uatwi
odbiorcy waciwe pogrupowanie elementw wizualnych i tekstowych, a take wprowadzi dodatkowy wymiar. Niebezpieczestwo tkwi w naduywaniu linii niedomknite prostokty i zbyt wiele rwnolegych linii moe sugerowa obecno siatki
i struktury, ktrej tak naprawd nie ma. oko bdzie prbowao znale wzory, ktre
nie istniej, zatem uycie linii powinno by wywaone i uzasadnione.
mARgineSy
Poprzez ograniczenie projektu do rodkowej kolumny Davis uzyska maksymaln
kontrol rozoenia elementw na stronie. Marginesy o zmiennej szerokoci po obu
stronach przesuwaj zawarto na rodek okna przegldarki. Czasami korzystniej jest
wypeni cae okno ukadem strony, a czasami lepszy okazuje si projekt ograniczony.
W obu przypadkach spore marginesy po lewej i po prawej stronie zapobiegaj zbytniemu stoczeniu tekstu. Domylnie wikszo przegldarek definiuje jak najmniejszy margines wok strony, co powoduje, e tekst swobodnie zajmuje cae miejsce od
lewej do prawej strony i jest rzadko zawijany.
jest to niekorzystne w sensie estetycznym. tekst musi oddycha i potrzebuje wolnego miejsca, ale brak marginesw spowoduje, e zleje si on z zawartoci ekranu
znajduj si poza oknem przegldarki. Wartoci domylne marginesw nie s odpowiednie w tej sytuacji, zatem na projektancie ciy odpowiedzialno za rozwizanie
tego problemu.
W przypadku projektu minimalistycznego, w ktrym marginesy s jednym z nielicznych elementw kompozycji, ich prawidowe ustawienie ma ogromne znaczenie.
Due marginesy ksztatuj scen, na ktrej w oknie przegldarki wystpi tekst, a take
uatwiaj uytkownikowi koncentracj na treci.
jednoisymbolika
Uwaga
Dlawikszociprojektantwniedopuszczalne
domylnewartocimargineswniestanowi
problemu,poniewaitaktemarginesyzmodyfikuj.jednakdobrypunktwyjciabyby
korzystnydlatychwszystkich,ktrzyprojektantaminies,atakedlapocztkujcych.
niktnietraci,jeliokrelonatechnologiajest
bardziejdopracowanaidomylnemarginesy
slepiejustawionenaprzykadstandardowadrukarkabiurowadrukujezesporym
zapasemmarginesw,abyniepowstawa
tegorodzajubaagan.
atlantis
59
Spjno
Barwy muszli zostay zmodyfikowane tak, aby pasowaa ona do kolau w tle. Wprogramie Adobe Photoshop zmikczono take jej krawdzie, dziki czemu jeszcze
bardziej zlaa si z tem. Jednak Davis nie przesun wszystkich odcieni wkierunku
bkitu i pozostawi tym samym mile widziany kontrast tworzony przez kolor oceanu
i rdzawy wapienny osad (patrz rysunek 2.5). Konsekwentne uycie bkitu wcaym
projekcie przeciyoby klimat kompozycji (patrz rysunek 2.6).
Elementy kompozycji mog by rne, lecz oglny cel zachowania spjnoci jest
bardzo istotny. Zamiast monotonnych schematw kolorystycznych mona zastosowa bardziej subtelne metody zachowywania spjnego wygldu projektu naladowanie dominujcych ksztatw przy uyciu elementw graficznych izdjciowych oraz dopasowywanie proporcji i rozmiarw czcionek, a take otaczajcych je
krzywych i linii.
W projekcie Atlantis w nagwku wystpuj biae okrgi krelone cigymi krzywymi
naoone na muszl i kola. Bez kontekstu takie okrgi nic specjalnego nie znacz,
lecz na bkitnym tle przypominaj fale. Ich ksztat i rozmiar jest take bardzo zbliony do okrgw wystpujcych na muszli, co silnie czy te dwie grupy elementw.
Reprezentacja
Ta metoda reprezentacji koncepcji projektowych uycie prostych elementw kompozycyjnych wyraajcych bardziej zoone idee i zamysy ma duy potencja, jeli
chodzi o wyraanie subtelnej gbi. Biaych linii moge nawet wcale nie zauway,
dopki o nich nie wspomnielimy, a teraz stay si bardzo widoczne.
Symbolika ukryta w projekcie Atlantis nie koczy si na biaych liniach. Bardziej
oczywiste s obrazy w nagwku. Atlantyda dawnych czasw bogate i prne imperium kamiennych kolumn i zdobionych posgw zostaa umieszczona ztyu, za
centraln i bardziej wyrniajc si Atlantyd dzisiejsz zniszczon, pokryt morskim osadem, rozpadajc si pod wod. Imperium za mg, dawno majce za sob
czasy rozkwitu, opisywane jest przez zwizki pomidzy dwiema poowami projektu.
Ten prosty, aczkolwiek niebanalny ukad tworzy opowie ipogbia znaczenia, ktre
bdzie odkrywa ogldajcy.
Dla wytrawnego uytkownika internetu uycie muszli jako motywu obrazu nagwka
bdzie miao dodatkowe znaczenie: wybr morskiej muszli przez Davisa jest hodem
dla klasycznej ju strony prezentujcej technologi CSS. Strona ta nosi nazw Complexspiral i zostaa stworzona przez Erika Meyera. Mona j znale pod adresem
www.meyerweb.com/eric/css/edge/compelxspiral/demo.html (rysunek 2.7).
60
ROZDZIA 2 / projektowanie
atlantis
61
Zunflower
Zabawa wiatem, cieniem,
ksztatem i przestrzeni
62
ROZDZIA 2 / projektowanie
Odnalewiato
Gdziekolwiek by teraz nie siedzia, do czytania wykorzystujesz przynajmniej jedno
rdo wiata. Unie na chwil wzrok znad ksiki. Skd pada najwicej wiata?
W jaki sposb ukada si ono na otaczajcych Ci przedmiotach? Gdzie s cienie?
wiatocienie wykorzystywane s przez grafikw do uzyskiwania pewnego realizmu prezentowanej sceny, do stworzenia odpowiedniej atmosfery i do wzbogacenia
dziea poprzez wyrnienie pierwszego planu.
jeli spojrzymy wstecz, na poprzedni dekad projektowania witryn internetowych,
wskaza moemy wiele zastosowa wiata. tworzenie gradientw (patrz rySuNeK 2.8), ukosowanych krawdzi (patrz rySuNeK 2.9), efektu cienia rzucanego
przez elementy kompozycji (patrz rySuNeK 2.10) to tylko niektre przykady wykorzystania wiata w internecie.
Niestety, niekiedy wiato wymyka si spod kontroli niezbyt dowiadczonym projektantom. trendy wpywaj take na technik projektowania wiele osb naduywa efektw zwizanych ze wiatem. Nie przeszkadza im to, e ich projekty wygldaj nierealistycznie, a rda wiata pozostaj ze sob w wyranym konflikcie
(patrz rySuNeK 2.11).
Zatrzymacie
Na stronie zunflower wida poprawne uycie wiata do tworzenia cieni. Chocia zdecydowane gradienty i mocne ukosowania nie s ju modne w dziedzinie projektowania
uytkowych witryn internetowych, cienie nadal s uywane, z kilku powodw:
o wzbogacaj stron,
o tworz wraenie trzeciego wymiaru, zarwno jeli chodzi o obiekt, jak i o stron,
zunflower
63
wskazwka
jeliwykorzystujeszefektywarstwwprogramieAdobephotoshop,upewnijsi,eopcja
Use Global Angle (Uyj wiata oglnego) jest
zaznaczona.wtensposbkierunekpadania
wiatabdziezawszetakisam.
aby unikn problemw, ktre mog powsta, gdy wykorzystywany jest efekt cienia
(na przykad niezgodnych kierunkw padania wiata), zapoznaj si z nastpujcymi
wskazwkami:
o zwracaj szczegln uwag na jasno cieni sprawd, czy nasycenie cienia zgadza si z logicznym dystansem wzrokowym. Ciemne cienie sprawiaj, e obiekt
wydaje si znajdowa bliej ta, janiejsze cienie odsuwaj obiekt od ta.
o Szeroko i wysoko cienia take wpywa na postrzeganie dystansu obiektu od
ta. Wski cie daje wraenie niewielkiego oddalenia obiektu od ta, natomiast
szersze cienie wizualnie oddalaj obiekty.
o Naladuj wiato w sposb realistyczny. jeli na stronie znajduj si dwa obiekty,
cienie przez nie rzucane powinny by spjne.
Na przykad pierwsze dwa nachodzce na siebie prostokty tworzce rodkow kolumn projektu zunflower rzucaj takie same cienie, padajce z lewej strony (patrz
rySuNeK 2.12).
take efekt zanikania zastosowany na prawym kocu paska wzmacnia efekt gry wiata w projekcie. wiato wydaje si ucieka i chowa cz obrazu przed wzrokiem
patrzcego (patrz rySuNeK 2.13).
nadawanieksztatu
Podobnie jak kolory, rne ksztaty oddziauj na ludzi w rny sposb. z kadym
z nich zwizane s pewne cechy, ktre mona wykorzystywa w projekcie w celu
wywoania okrelonych odczu u widzw.
od chwili powstania pierwszych piktogramw na cianach grot ludzie wykorzystuj
znaczenie ksztatw. znajdujemy je wszdzie s czci naszego wiata i dotycz
wszystkiego, czym zajmuj si ludzie. Niezalenie od kontekstu ich uycia od
zapisu wzorw matematycznych, poprzez tworzenie akcentw architektonicznych
na budynkach, do wyraania przynalenoci religijnej i plemiennej (krzy wity,
Gwiazda Dawida, sztuka tatuau) ksztaty s czci natury, a ich odtwarzanie
lub nadawanie bywa rodkiem wyraania wasnego ja projektanta.
W projekcie zunflower najwiksze znaczenie ma zdjcie kwiatu. Przyciga ono uwag swoim kolorem i zmusza do zastanowienia si nad tym, co wyraa jego ksztat.
64
ROZDZIA 2/pROjektOwAnIe
Ksztaty podstawowe
Okrgi i koa najczciej kojarzone s z kobiecoci, ciepem, komfortem, zmysowoci, mioci oraz innymi podobnymi pojciami. Okrgi i koa (lub uki) wykorzystywane s czsto w celu wyraenia pojcia wsplnoty, caoci, wysiku, ruchu
ibezpieczestwa. Wiele projektw witryn internetowych zawierajcych tre skierowan do kobiet, zwizanych z rnymi spoecznociami, traktujcych o yciu duchowym lub o romansach opartych jest na okrgach, ktre wzmacniaj w przekaz.
Trjkty uwaane s za symbole mskie, wyraajce takie cechy, jak sia, agresja,
dynamiczny ruch. Kierunek wskazywany przez trjkt ma wpyw na znaczenie tego
symbolu. Oko zwykle zatrzymuje si na dominujcym wierzchoku. Jeeli trjkt
skierowany jest w gr, sugeruje, e ruch i natarcie skierowane s wanie tam. Jeeli natomiast skierowany jest przeciwnie, moe to budzi negatywne skojarzenia,
na przykad bierno i bezradno.
Oczywicie, prostokty (w tym kwadraty) take maj pewne symboliczne powizania. Prostokty oznaczaj si i solidne podstawy, prawdopodobnie z powodu zwartoci ich formy i wraenia masy. Elementy graficzne zawierajce motywy prostoktw mog sugerowa istnienie porzdku, logiki oraz rwnowagi i dawa wraenie
bezpieczestwa.
Potrzeba przestrzeni
Podobnie jak w przypadku barw, wiata, cienia i ksztatu, przestrze ma bardzo ciekawe psychologiczne, archetypiczne znaczenie, ktre przez wieki wykorzystywali artyci, aby wywoa reakcje ogldajcych.
zunflower
65
66
ROZDZIA 2 / projektowanie
Przestrze ujemna pomaga okreli dodatni, a krawdzie obiektw definiuj pocztek przestrzeni ujemnej, ktra take ma ksztat (patrz rysunek 2.16).
Profesjonalne wykoczenie
Zrozumienie technik operowania wiatem moe pomc w tworzeniu efektw cienia oraz innych efektw z tym zwizanych. Rol ksztatu w projektowaniu warto
przeanalizowa bardziej szczegowo, zarwno w dziedzinie oglnego projektowania
graficznego, jak i w okrelonych dziedzinach bardziej okrelonych, takich jak na przykad projektowanie logotypw i ikon. W kocu wyczucie przestrzeni i sposb manipulowania ni wraz z szerszym zrozumieniem jej roli pomoe Ci przekaza janiejsz
i wyraniejsz wiadomo odwiedzajcym.
Dziki wadzy nad wiatem, przestrzeni oraz ksztatem wzbogacisz projekt tak korzystnie, jak stao si to w przypadku ukadu Zunflower.
zunflower
67
Springtime
Wywoywanie emocji przy uyciu koloru
68
ROZDZIA 2 / projektowanie
wpywkoloru
Uwaga
Oczywicie,przewrotneuycieodwrotnych
nispodziewanekolorwmoeprowadzi
dopowstaniakonfliktu,aletakemoe
stanowiinteresujcepodejciedoprojektu
idadoskonaerezultaty.jednakpodejmowanietegorodzajudecyzjiwymagawieluprb
itestw.trzebazyskapewno,ewybrane
kolorysprawdzajsi.Sztukjesttakidobr
kolorw,abypowodowayonezamierzon
reakcjuogldajcych.
springtiMe
69
Odcie koloru moe zmieni jego wag. Inne uczucia wywouje kolor jasnozielony,
a inne ziele khaki. Podobnie postrzeganie koloru mona modyfikowa, wprowadzajc tekstur. W tabeli 2.1 umieszczono popularne kolory i opisano ich zwizki
skojarzeniowe.
Tabela 2.1. Psychologiczne zwizki skojarzeniowe popularnych kolorw
Kolor
Skojarzenie
Czerwony
Niebieski
Zielony
Pomaraczowy
rado, szczcie
ty
Fioletowy
Brzowy
Szary/Srebrny
Czarny
Biay
70
ROZDZIA 2 / projektowanie
KoloR, KultuRA i Pe
attila jest Wgrem. Czy kulturowe korzenie artysty i rodowisko, w ktrym yje, maj
wpyw na decyzje projektowe i percepcj kolorw? eksperci potwierdziliby, e tak
jest w istocie. Podobnie pe i zaplecze kulturowe odbiorcy projektu Springtime maj
jaki wpyw na percepcj.
kultura i pe rozszerzaj i komplikuj podstawowe reakcje na kolor oraz skojarzenia
omawiane w poprzednim punkcie. W tABeli 2.2 omwiono niektre ze skojarze
i znacze, jakie maj wybrane kolory w zalenoci od kultury i pci. jak mona si
szybko zorientowa dobr kolorw na tak midzynarodowym forum, jakim jest
internet, musi by bardzo staranny.
Uwaga
wicejinformacjiifaktwdotyczcychteorii
koloru,atakewynikirozmaitychbada,artykuy,ksikiznajdzieszwwitrynieprofesora
j.L.Mortona,Colorcom(www.colorcom.com).
Drugwspaniawitrynpowiconkolorom
jestCausesofColor(http://www.webexhibits.
org/causesofcolor).
Kolor
Wpyw
Czerwony
Niebieski
Zielony
Pomaraczowy
ty
Fioletowy
Brzowy
Czarny
Biay
springtiMe
71
Uwaga
przedwdroeniemprojektudobrzejest
stworzykilkapalettestowych.Monato
atwozrobiwprogramieAdobephotoshop
(rysunek2.18).Stwrzpustydokumentiprzy
uyciunarzdziakroplomierzadodawajkolory
dopaska,sprawdzajc,jakdosiebiewzajemniepasujijaksicz.nastpniemoesz
przygotowaprojekttestowyiprzypisamu
wybranekoloryzapomocCSS.
technologiaCSSjestpomocnawfazie
tworzeniaprototypuprojektumona
utworzykilkaarkuszystylwodpowiadajcychkadejpalecietestowejiprzypisa
odpowiednigamkolorwprzygotowanemudokumentowitestowemu.Moesztake
wczytczynnodostudiumergonomii,
przedstawiajcbadanympodmiotomrne
zestawybarwizbierajcichopinie.
paletykolorwdostosowania
wwitrynachinternetowych
Podczas tworzenia palet na potrzeby wasnych projektw powiniene bra pod
uwag omawiane w tej czci rozdziau kwestie. aby stworzy odpowiednie palety,
oprcz wiadomoci treci, jakie chcesz przekazywa, musisz pozna take oczekiwania ogldajcych.
Moliwocistosowania
koloruwCSS
Na szczcie technologia CSS oferuje wiele moliwoci w zakresie okrelania kolorw. Mona stosowa dowoln z nastpujcych notacji:
72
ROZDZIA 2/pROjektOwAnIe
Uwaga
wicejinformacjinatematswkluczowych
reprezentujcychkolorysystemoweznajduje
sipodadresemwww.w3.org/TR/CSS21/
ui.html#system-colors.pamitaj,etekolory
niebdczcimoduukolorwwspecyfikacjiCSS3.0.
Color: WindowText;
barwne wnioski
Niezalenie od tego, czy projektujesz z powodw osobistych, czy zawodowych, prac
najlepiej zacz od zrozumienia przekazywanej treci i jej odbiorcw. Dysponujc
tak wiedz, bdziesz dokonywa trafniejszych wyborw barwy, wspomagajcych
proces przekazywania informacji.
Projekt Springtime to doskonay przykad zastosowania kolorw w projekcie w idealnej zgodzie z celami, ktre projektant chcia osign.
Uwaga
wieleosbnadalprojektujewitrynyprzyuyciupaletyweb-safe,aleponiewawikszo
dzisiejszychkomputerwmoewywietla
milionykolorw,trzymaniesitejzasadynie
jestuzasadnione,chybaewymagategokonkretnyprzypadek.Uytkownicy,ktrzyznaj
paletweb-safe,odrazustwierdz,ekolory
wprojekcieSpringtimewistotnysposbwykraczajpozagrup256barwztejpalety.
springtiMe
73
viridity
Gra wzorw, tekstur i kontrastw
74
ROZDZIA 2 / projektowanie
Wzory
Obrazy uyte w projekcie viridity to gwnie podobne do siebie z wygldu wzory. Po
szczegowym ich przeanalizowaniu stwierdzisz, e s spjne i mona wrd nich
wyrni dwie kategorie: jedna z nich zawiera wzory utworzone z punktw rastra,
adruga odciski motyww rolinnych, odygi i licie (patrz rysunki 2.21 i 2.22). Kady wzr zosta utworzony poprzez naoenie filtrw programu Adobe Photoshop na
kilka rysunkw. Wprowadzono tu te celowo pewne rnice, tak aby ostateczny efekt
skada si z niepowtarzalnych elementw i nie wydawa si nudny.
Wzr to zwykle powtarzajcy si element-ksztat lub kilka elementw, ktre wypeniaj dany obszar. Wzory stosowane s szeroko wszdzie tam, gdzie tworzy si jakie
projekty, na przykad w modzie i planowaniu wntrz. Wystpuj one take w naturze
wystarczy przyjrze si porom na skrce pomaraczy lub strukturze licia.
Dobry wzr moe by najlepszym przyjacielem projektanta witryn internetowych.
Naley jako osabi wraenie, jakie robi dobrze zdefiniowane due obszary strony:
w niektrych projektach jednolite wypenienie moe spenia swoj rol, w innych
lepiej pozostawi bia przestrze, a jeszcze w innych wystpuje potrzeba wprowadzenia elementu wizualnego wykraczajcego poza proste, jednorodne pola.
Ograniczenia, ktre napotykamy w dzisiejszych czasach podczas projektowania witryn internetowych, zwikszaj potrzeb uycia wzorw. Pojedynczym, maym obrazem zaprojektowanym tak, aby mona go byo powiela na wikszej powierzchni,
atwo wypeni ca stron, a mniejsza objto pliku oznacza, e zwikszona szczegowo kosztuje niewiele kilobajtw. Na przykad, jeli powielisz obraz oobjtoci
500 bajtw, moesz atwo wypeni obszar o szerokoci 900 pikseli.
Parametry powtarzania mona atwo ustawia przy uyciu wasnoci backgroundrepeat dostpnej w CSS. Moliwe wartoci to repeat, no-repeat, repeat-x, repeat-y. Oznaczaj one odpowiednio ustawienie powtarzania obrazu w obu kierunkach na paszczynie, wyczenie powtarzania i ustawienie powtarzania w jednym,
wybranym kierunku.
h3 {
background-repeat: no-repeat;
}
body {
background: #669999 url(z_bgrnd.gif) repeat-x 0px 1px;
}
viridity
75
Przedstawiony przykad pokazuje, e wasno background-repeat moe by stosowana niezalenie od innych opcji dotyczcych ustawie ta lub jako wasno skrcona wewntrz duszej reguy ustawiajcej to.
Tekstura
W internecie nie powica si duo czasu i miejsca dotykowemu sposobowi przekazywania informacji. To twierdzenie jest prawdziwe dla caej dziedziny komputerowej. Proste kontrolery i kierownice do gier majce funkcj przekazywania siy
oczywicie s produkowane, ale na rynku nie wystpuj adne inne produkty konsumenckie tego rodzaju.
Rysunek 2.23. Te rzeby maj faktur majc
imitowa szaty
Na pocztku tej dekady firma Logitech eksperymentowaa z myszkami komputerowymi z serii iFeel, ktre reagoway na zmian podoa pod kursorem. Na przykad
przesunicie i umieszczenie kursora na czu uytkownik mg odczuwa jak przesunicie myszki na gumow powierzchni. Nie syszelimy odalszym rozwoju tej
technologii, a firma Logitech ju nie produkuje tych myszek. Chocia ta technologia
bya bardzo ciekawa, nikt nigdy nie wymyli, do czego tak naprawd moe si przyda. Prawdopodobnie z tego wanie powodu si nie przyja.
W swoim tradycyjnym znaczeniu tekstury s reprezentowane w internecie wsposb niewystarczajcy. Klikanie to najbardziej interaktywna odpowied komputera,
jedyna, jak moesz poczu. Jednak tekstury mona nie tylko poczu, mona je
take zobaczy.
Posgi mog by ubrane w swobodnie opadajce, pofalowane szaty wyryte wkamieniu. Podwiadomie doskonale zdajemy sobie spraw, e dotykajc szat posgu, poczujemy jedynie gadk, tward powierzchni (patrz rysunek 2.23). Odbieramy je
jednak jak reprezentacj prawdziwych ubra, poniewa szaty zkamienia, jak i prawdziwe, maj wsplne niektre cechy wygldu.
Wzory i tekstury s ze sob powizane. Czsto wzr moe tworzy (symulowa) tekstur w sposb niezamierzony i odwrotnie, wiele tekstur w sposb naturalny moe
formowa wzory skadajce si z powtrze jednego motywu.
Tekstury niekoniecznie powstay na podstawie zdj, lecz w sposb oczywisty przypominaj wzory zapoyczone z przyrody i otaczajcego nas wiata. Tekstury utworzone z punktw przywodz na myl chropowat powierzchni, a rozmyte kwadraty
przypominaj materia typu flanela. Inne wzory mog pochodzi prosto ze starych,
zdobionych firan. Oglnie projekt viridity wywiera pozytywne wraenie kojarzy
si z komfortowym krzesem, ktre zachca, by na nim spocz.
76
ROZDZIA 2 / projektowanie
Kontrast
Nieumiejtne uycie monotonnej gamy kolorw moe prowadzi do powstania
problemw. Jeli na stronie znajduje si zbyt wiele kolorw i szczegw, naley liczy si z kopotami zwizanymi z kontrastem.
Odpowiedni kontrast jest wymagany, aby mona byo atwo odrnia poszczeglne
elementy: jeli jest on zbyt may, elementy te bd zlewa si ze sob, a tekst bdzie
nieczytelny. Zbyt duy kontrast powoduje z kolei, e ogldajcy czuje si przytoczony dominujcymi, narzucajcymi si obiektami.
Wysoki kontrast
Zbyt wysokie kontrasty pojawiajce si w projekcie prowadz do toku wizualnego.
Niski kontrast kolorystyczny w projekcie viridity sprawdza si, poniewa kontrast znaczeniowy uzyskiwany jest poprzez uycie odpowiednich tekstw iczcionek. Szerszy
zakres kolorw uytych w tym projekcie wydawaby si przesadny (rysunek 2.24).
Rysunek 2.24. Duy kontrast kolorystyczny koliduje z bardzo szczegowymi wzorami i teksturami projektu viridity
Przez wieki ksiki i gazety drukowano czarnymi czcionkami na biaym tle. Chocia
kolorowy atrament istnieje od bardzo dawna, czarny i biay tworz najwikszy moliwy do osignicia kontrast i zapewniaj najwiksz wygod czytania. Generalnie ta
sama zasada pozostaje aktualna w przypadku ekranu. Najwikszy kontrast otrzymuje
si, umieszczajc czarny tekst na biaym tle.
Jednak istniej tu wyjtki, co wynika z faktu, e monitor komputera emituje wiato,
a wydruk papierowy nie. Z monitorami zwizane s pewne ograniczenia. Jasny
ekran LCD uywany w ciemnym pomieszczeniu moe emitowa zbyt intensywne wiato powodujce uczucie dyskomfortu u ogldajcego. Prba czytania tekstu
zekranu wtakich warunkach to prba wytrzymaoci wzrokowej dla uytkownika.
Uycie kolorw w projekcie stawia przed Tob kolejne zadania dotyczce kontrastu.
Niektre zestawienia kolorw bd wywoyway wraenie migotania bdce wynikiem
zjawiska noszcego nazw jednoczesnego kontrastu. Gdy umiecisz obok siebie prbki
dwch dopeniajcych si kolorw, na przykad niebieskiego i pomaraczowego lub
czerwonego i zielonego, uzyskasz najwikszy kontrast, agranica pomidzy kolorami
bdzie szczeglnie intensywna (rysunek 2.25). Wmiejscu czenia dwch kolorw
dopeniajcych z powodu kontrastu wystpuje nieprzyjemne napicie optyczne.
Jednak w mniej intensywnej formie jednoczesny kontrast moe by cennym narzdziem do wzbogacania projektu i wprowadzania w nim subtelnoci. to-pomaraczowy element bdzie wydawa si bardziej pomaraczowy na tym tle, a bardziej
ty, gdy umiecisz go na tle pomaraczowym lub czerwonym (patrz rysunek 2.26).
Poprzez otoczenie ciemnego obszaru kolorami jeszcze ciemniejszymi optycznie rozjaniasz ten obszar. Nisko nasycony czerwony kolor moe wyda si janiejszy, gdy
prezentowany jest na szarym tle.
viridity
77
Niski kontrast
Zbyt niska kontrastowo, ktr charakteryzuj si niektre projekty, powoduje, e
strona wydaje si przygaszona i zbyt monotonna. Kontrast jest potrzebny, aby wprowadzi odrobin wicej wyrazu i wyrni pewne obszary i elementy. Monotonne
odcienie zieleni w projekcie viridity rozcigaj si od najjaniejszych do najciemniejszych. Uycie mniejszej iloci odcieni zakcioby gr elementw graficznych, zniweczyo rozbyski oraz pola, na ktrych oko moe odpocz. Wrezultacie mogoby
zrujnowa ca rwnowag wizualn (patrz rysunek 2.27).
Nisk kontrastowo stosuje si czsto w celu zachowania subtelnoci projektu. Piksele s stosunkowo due za due do celw projektowych. Linia nigdy nie moe
by ciesza ni jeden piksel, poniewa piksela nie mona podzieli. Jednak poprzez
zmniejszenie kontrastowoci linii mona doprowadzi do osabienia jej znaczenia,
awic sprawi, e wyda si ona ciesza (rysunek 2.28).
Analogicznie poprzez zmniejszenie oglnego kontrastu pomidzy elementami-skadnikami projektu uzyskuje si efekt wyciszenia i osabienia znaczenia ukadu kompozycyjnego. Fragment tekstu o mniejszym znaczeniu mona osabi wizualnie, nadajc
mu mniej kontrastujcy z otoczeniem kolor, a nieaktywne ikonki lub cza mona
zastpi ich niskokontrastowymi wersjami, ktre sprawiaj wraenie mniej wanych,
niedostpnych.
Daltonizm
Kolejny aspekt, ktry warto rozway, to wpyw niskiego kontrastu na zdolno
widzenia przez osoby dotknite daltonizmem (patrz rysunki 2.29A i 2.29B). Wystpuje kilka form zaburze widzenia kolorw i wiele ich odmian. Dwie najczciej
wystpujce to:
o Protanomalia (deuteranomalia) w przypadku tego zaburzenia, lejszego
z dwch omawianych, ogldajcy postrzega wikszo barw, lecz jego zdolno
rozrnienia pewnych kolorw jest mniejsza.
78
ROZDZIA 2 / projektowanie
Spjnoijedno
Projektowanie z myl o wizualnej spjnoci oznacza rwne traktowanie wszystkich
aspektw kompozycji. Projekt w rodzaju viridity mgby atwo zmieni swj charakter na bardzo przytaczajcy i zbyt niejednoznacznie intensywny, jeli autorka nie
rozwayaby gry tekstur i kolorw, czcionek i wzorw. Poniewa laura Macarthur
powicia szczegln uwag rwnowadze elementw kompozycji, wynik jej pracy
jest o wiele bardziej zachwycajcy ni suma skadnikw kompozycji.
Uwaga
wwitrynieColorblindwebpageFilter(pod
adresem http://www.colorfilter.wickline.org)
znajdujesifiltrsymulujcywidzeniezzaburzeniamipercepcjikolorw.
viridity
79
Ballade
Wyobrania, ktra wodzi oko wzdu cieki
80
ROZDZIA 2 / projektowanie
Prowadzenie wzroku
Dobry projekt graficzny charakteryzuje si tym, e wzrok poda przez istotne elementy, postrzegajc je w logicznej kolejnoci w sposb podwiadomy, tak e ogldajcy nawet nie zdy zorientowa si, e jego oczy s wodzone. Jest to jeden ze
sposobw, w jaki projektanci przekazuj informacje bez zbytniej nachalnoci.
Aby mc wodzi oko, trzeba dysponowa pewnymi rodkami, ktre pozwol zbudowa ciek dla wzroku. Tymi rodkami s obrazy oraz tre. W projekcie Ballade
mamy przykad czytelnej, jake eleganckiej cieki wizualnej.
Ustawienie elementw nawigacyjnych, czy do archiwum oraz zasobw po lewej
stronie spowodowao oddzielenie czci nawigacyjnej od gwnej zawartoci (patrz
rysunek 2.30). Wikszo osb ogldajcych strony internetowe przyzwyczajona jest
do tego, e cza nawigacyjne znajduj si po lewej stronie ekranu lub w jego grnej
czci. Umieszczenie czy w tych miejscach pozwala uytkownikowi szybko przej
do zapoznawania si z gwn zawartoci witryny.
W swoim projekcie pani Lambert prowadzi widzw od sekcji do sekcji tak, jakby
dosownie przechadzali si po ogrodzie. Przechodz oni przez portyk (rysunek 2.31)
i schodz schodami (rysunek 2.32). Kady fragment ogrodu ma swj niepowtarzalny
wygld i wiele miejsca na zawarto. Nagwki informuj o treci informacji w kadej
sekcji, jednoczenie integrujc znaczenie przekazywanej treci ze ciek wizualn.
Innym wanym rodkiem wodzenia oka jest przeznaczenie miejsca na odpoczynek.
Zwykle osiga si to dziki pozostawieniu obok tekstu wystarczajco duej iloci wolnego miejsca (rysunek 2.33). Kluczowe fragmenty tekstu oraz ukadu graficznego
mona oznaczy kolorem, a uoenie ksztatw oraz linii skupia uwag ogldajcego
i wyznacza kierunki.
Twrczyni projektu Ballade skonia si ku umieszczeniu gwnej zawartoci na biaych blokach ekranu, dziki czemu uzyskany kontrast suy czytaniu, a tekst mona
przesuwa w poziomie, co jest zbawienne dla oka mogcego odpocz na biaych
obszarach, przez ktre przechodzi. I chocia gama kolorw jest tu niesychanie uboga, bo obejmuje tylko kolor brzowy, czarny i biay, to pozostaje dla odbiorcy pewn
subteln, intrygujc zagadk, czy jest to ogrd zimowy, czy jesienny. To pytanie podtrzymuje jego zainteresowanie szuka on wicej wskazwek.
Rysunek 2.31. Obraz portyku pochodzcy z projektu Ballade. Rysunek wietnie wzbogaca projekt
Rysunek 2.32. Od drzwi wejciowych do schodw projekt prowadzi widza zarwno w sensie
metaforycznym, jak i dosownym
ballade
81
Na kocu trzeba wspomnie o liciach (rysunek 2.34), mostkach i odciskach ap (rysunek 2.35), bdcych przykadami oryginalnych ksztatw wczonych do projektu.
One jeszcze bardziej przykuwaj wzrok ogldajcego oraz s swoistymi niespodziankami, na ktre trafia on podczas poznawania ukadu strony.
Rysunek 2.33. Kademu blokowi tekstu towarzyszy odpowiednia ilo wolnego miejsca,
co pozwala odpocz oczom i poprawia ogln
czytelno tekstu
82
ROZDZIA 2 / projektowanie
Ciekawym zjawiskiem ostatnich lat s projektanci nowej szkoy, ktrzy nie posuguj
si kategoriami konwencjonalnych, pochodzcych z programu starej szkoy ukadw
HTML opartych na tabelkach. Teraz uwaga skupia si na technologii CSS jako narzdziu tworzenia projektw. Chocia w ogrodzie Zen spodziewamy si nowego sposobu mylenia, spotykamy wielu projektantw nalecych do starej szkoy, przywizanych do sztywnego i czsto bardziej skomplikowanego podejcia polegajcego na
stosowaniu ukadw opartych na tabelach. Wprzypadku Ballade projektantka moga
pracowa bezporednio w jzyku CSS i stworzy w nim ukad projektu. Jednak co
staoby si, gdyby tak nie byo?
<tr>
<td><img name=ballade_r3_c2 src=images/ballade_r3_c2.gif
width=537 height=185 border=0 alt=0></td>
<td><img src=images/spacer.gif width=1 height=185
border=0 alt=0></td>
</tr>
</table>
analizujc ten fragment kodu, szybko uwiadomisz sobie, jak zoony byby ten projekt pod kilkoma wanymi wzgldami:
o Ukady wykonane przy uyciu tabelek zawieraj du ilo zbdnego kodu.
o Uycie w roli dystansw elementw graficznych zamiast wasnoci margin
i padding dostpnych w CSS powoduje niepotrzebny wzrost objtoci strony.
o Wikszo obrazw umieszczona zostaa na stronie przy uyciu fragmentw znakowania bdcego czci kodu strony, co stanowi dodatkowe porcje informacji.
to z kolei zwiksza czas pobierania strony z serwera.
o tego rodzaju ukady stron oparte na tabelkach musz by spjne na przestrzeni
wszystkich podstron witryny. kada podstrona zawiera znakowanie opisujce tabel i wstawione do niej fragmenty obrazw, zatem obrazy i skadniki strony s
ponownie wywietlane w czasie otwierania danej podstrony. W przypadku CSS
ukady strony s zapisywane w pamici przegldarki. W ogrodzie zen kod, ktry
opisuje te obrazy, trzeba odczyta tylko raz.
oczywicie, s to czste problemy wice si z uyciem tabelek. Wikszo projektantw doskonale wie, e naduywanie tabel powoduje jeszcze inne problemy, w tym
kopoty z dostpnoci witryny, poniewa wiele urzdze czytajcych zawarto ekranu (uywanych przez osoby niewidome i sabowidzce) nie radzi sobie z interpretacj
zawartoci umieszczonej w tabelach. Ponadto, jeli wemiemy pod uwag znaczenie
tego projektu jako doskonaego przykadu prowadzenia wzroku, dojrzymy kolejny
problem: udziwnione podejcie do tworzenia ukadw stron rodem ze starej szkoy
zakcioby przepyw obrazw, poniewa zoone ukady oparte na tabelkach zwykle
s adowane i wywietlane w sposb nieprzewidywalny, w przypadkowej kolejnoci.
nowaszkoa
Uwaga
Chociaukadywykonanewtechnologii
CSSwywietlanesszybciejisprawniejni
przeadowaneukadyopartenatabelkach,
wichprzypadkuwystpujezjawiskoonazwie
FOUC,polegajcenatym,epodczasadowaniaogldajcemumoemignzawarto
pozbawionanadanegojejstylu.Zjawisko
FOUCwystpujewprzegldarkachIe,gdy
arkuszstyluCSSjestimportowany(aniepodczany).jeliwnagwkudokumentumamy
element linklubscript,zjawiskoFOUC
niewystpuje.wprojekcieCSSZenGarden
wceluunikniciategoproblemuwykorzystujemywanieelementscript.Dzikitemu
procesadowaniastronyprzebiegabardzo
gadko.wicejinformacjinatematzjawiska
FOUCznajdujesipodadresemhttp://www.
bluerobot.com/web/css/fouc.asp.
Przy wykorzystaniu technologii CSS o wiele atwiej stworzy projekt, ktry aduje
si w sposb cigy i nie drani ogldajcego. zamiast na skomplikowanych tabelach,
nieregularnie pocitych obrazach i graficznych separatorach, projektant moe skupi
si na ksztatowaniu wygldu poszczeglnych elementw.
ballade
83
Uwaga
Osadzanieobrazwwelementachnagwka
moesiprzyda,jeliteobrazyrzeczywicie
penifunkcjnagwkw.wogrodzieZen
wykorzystujemydotegocelutechnikzastpowaniaobrazw.Zastpowanieobrazw
omawiamywrozdziale4.
Uwaga
cignijdarmowerozszerzenieprzegldarek
MozillaiMozillaFirefox(http://chrispederick.
com/work/firefox/webdeveloper)
Wykorzystujc rozszerzenie programw Mozilla i Mozilla firefox o nazwie Web Developer, moesz wczy wywietlanie obwiedni elementw blokowych, a take ich
identyfikatorw oraz klas (rySuNeK 2.36). jak wida, dziki temu mona szybko zorientowa si, gdzie znajduj si rne sekcje projektu.
84
ROZDZIA 2/pROjektOwAnIe
Znale pomost
Zaprojektowanie efektywnej i ergonomicznej strony internetowej nie jest zadaniem
atwym. Projektant musi przeanalizowa wiele zagadnie i kwestii. Projekt Ballade
jasno pokazuje, jak mona wykorzysta ukad graficzny do wodzenia wzroku, w jaki
sposb kolory wywouj okrelone emocje i co daje zmiana podejcia przejcie
ztabelek do CSS. Wydaje si, e poznanie technik opartych na CSS jako pierwotnych
uwalnia adeptw projektowania witryn od myli oograniczeniach i problemach zwizanych z konwencjonalnymi, starymi technikami tworzenia ukadw.
Dla projektantw zmieniajcych filozofi pracy ze starej, opartej na wykorzystaniu
tabelek, na now, opart na CSS, trudno polega na znalezieniu nowych sposobw
twrczego mylenia. Poniewa technologia CSS pozwala naszym mylom wykroczy
poza sawny ju prostokt, Photoshopa, kod i styl, warto naszej pracy staje si niezaprzeczalnie wysoka. Znalezienie pomostu pomidzy starym a nowym moe by
wyzwaniem. W wyniku poczenia wyobrani, artyzmu i CSS Charlotte Lambert zainspirowaa nas projektem Ballade. Dziki temu moemy dostrzec, jak projektanci
przechodz przez kolejne mosty, rwnoczenie stopniowo porzucajc konwencjonaln, ograniczajc technik na rzecz nowej, opartej na technologii CSS.
ballade
85
Night Drive
Przeksztacanie statycznego projektu
w dziaajc stron i rozwizywanie
problemw, ktre pojawiaj si po drodze
zgonikw dobiega melodyjny dwik saksofonu Johna Coltranea, te wiata smu za oknem, granatowe
nasycone niebo rozciga si nad gow. Dave Shea wyruszy
wdrog, aby odtworzy klimat ciepego letniego wieczoru
wprojekcie Night Drive.
Gama ciemnych barw wprowadza wygaszony, ciepy
klimat. Kolor ciemnopomaraczowy uyty do wywietlania
wikszoci tekstw i elementw graficznych zosta zestawiony z janiejszymi, ale rwnie pomaraczowymi obszarami
w celu uzyskania odpowiedniej rwnowagi, aby projekt nie
wyda si zbyt brzowy. Obie te barwy zostay uzupenione
delikatnymi niebieskimi akcentami wystpujcymi gdzie
w tekcie. Dziki temu kontrast zosta celowo osabiony
istonowany, a cao nie wydaje si monotonna.
Zdjcia wybrano ze wzgldu na wystpujce na nich
kolory, atake po czci motywy. Jadc samochodem po
zmroku, moesz spodziewa si rozmytych wiate, szklistych kau i zamglonego, niebieskiego horyzontu.
86
ROZDZIA 2 / projektowanie
Wizualizacja kodu
Kiedy David Shea projektowa ukad Night Drive w programie Adobe Photoshop,
nie myla o tym, jak bdzie wyglda kod. Rozpocz od strony wizualnej, zatem
ewentualne problemy implementacyjne, ktre mogy si pojawi, musia rozwizywa pniej podczas tworzenia kodu.
Jak na podstawie paskiej makiety wykona interaktywn witryn? Naley stworzy
i zapisa wiele obrazw odpowiadajcych pewnym segmentom, na ktre podzielona
jest witryna. Segmenty te zostan pniej odtworzone przy uyciu CSS. Nie istniej
adne zasady dotyczce tego procesu, a kluczem do uzyskania satysfakcjonujcych
rezultatw jest elastyczno. Wczeniejsza znajomo rnych alternatywnych rozwiza uatwia podejmowanie decyzji.
Wybr
Sprbuj zanalizowa nagwek projektu Night Drive zestaw poczonych prostoktnych pl, na ktrych umieszczono pobyskujc t rozet (patrz rysunek 2.37).
Podczas tworzenia takiego nagwka mona napotka dwie trudnoci trudno
moe sprawi poprawne uoenie zdj i linii oraz umieszczenie na wierzchu rozety
przy wykorzystaniu obrazu graficznego z przezroczystoci. Po chwili zastanowienia
Shea uoy dwa plany dziaania:
o Poniewa cay nagwek jest jednym duym obrazem, naley go zapisa wjednym pliku JPG. Dziki temu zachowany zostanie ukad linii, a take zminimalizowane bdzie ryzyko znieksztacenia ukadu. Wad tego rozwizania jest wikszy wynikowy plik JPG.
Night drive
87
Uwaga
Metodyosadzaniaobrazwizwizaneznimi
problemyomwionesbardziejszczegowo
pod adresem www.stopdesign.com/articles/replace_text.
Nadanie stylu elementom span ukrywa tekst znajdujcy si w kodzie htMl, poniewa tekst ten ma by zastpiony elementami graficznymi, chocia ta metoda uwaana
jest ju za przestarza.
Sztuczkizabsolutnym
pozycjonowaniem
Dziki zastosowaniu absolutnego pozycjonowania mona byo umieci fotografie
w nagwku, lecz przeniesienie ich tam stwarzao dodatkowy problem: uycie tej
techniki utrudnia wyrodkowanie elementw na stronie. aby obej ten problem,
Shea zastosowa uyteczn sztuczk. Umieci wszystkie elementy nadrzdne przy
lewej krawdzi ekranu i ustawi ich szeroko na 100%, co spowodowao ich rozcignicie w poziomie na cay obszar okna przegldarki. Nastpnie wyrodkowa elementy
potomne w tym przypadku elementy span wewntrz elementw nadrzdnych.
88
ROZDZIA 2/pROjektOwAnIe
Uwaga
wartoparametrupaddingmusibywiksza,
nimogobysiwydawa.
nadaniewartoci100pxparametrowi
padding-rightspowodujeprzesunicieelementuwprawotylkoo50pxodosirodkowej.
poniewaelementjestwyrodkowany,
zwikszanieparametrupaddingpowoduje
zwikszanieszerokocielementu,wzwizku
zczymprzesuwasionrwnomierniewobu
kierunkach.truethatcolumnarCS
Przedstawiony kod sprawdza si, jeli element podrzdny ma by umieszczony idealnie na rodku. jednak co zrobi, gdy projekt wymaga, aby go troch od rodka odsun? Ustawienie wasnoci padding dla elementu podrzdnego zwiksza jego czn
szeroko, odsuwajc go od rodka. Naley pamita przy tym o dwch sprawach: poprzez ustawienie wasnoci padding poszerza si element, ktry jest nastpnie rodkowany. trzeba zatem ustawi warto bdc dwukrotnoci podanego przesunicia. Ustawienie wasnoci padding dla lewej strony powoduje przesunicie elementu
w prawo, a ustawienie jej dla prawej strony powoduje przesunicie elementu w lewo.
zatem jeli chcesz przesun obraz w lewo, naley zmodyfikowa wasno padding
dla prawej krawdzi elementu.
kuglarstwo
Prbujc doczy utworzony nagwek do reszty zawartoci, Shea napotka kolejny
problem. Wczeniej zaplanowa on, e pomidzy kolumnami bdzie biega pionowa
podwjna linia. jednak proste ustawienie powtarzajcego si w pionie ta nie rozwizuje tego problemu. lewa kolumna nie siga wystarczajco daleko, a prawa skada si
z trzech osobnych elementw div (#quickSummary, #preamble i #supportingText).
z braku odpowiedniego pojedynczego elementu Shea nada to wszystkim trzem
warstwom, zakadajc, e bd one miay t sam szeroko i tym samym uo si
idealnie zgodnie w pionie:
#quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left repeat-y;
margin: 0 0 0 400px;
width: 342px;
}
night drive
89
Warstwy s wyrwnane w pionie wzgldem siebie, ale pojawi si kolejny, nieoczekiwany problem. Pomidzy elementami div wida szczeliny (patrz rySuNeK 2.40).
adnej z warstw nie przypisano okrelonej wartoci marginesw, zatem skd bior
si te szczeliny?
Zlewaniesimarginesw
rySuNeK 2.40. Kopotliwe przerwy pomidzy
krawdziami
Uwaga
wspecyfikacjiCSS2.1zlewaniesimargineswzdefiniowanejestjakoczeniemargineswdwchlubwikszejliczbyprzystajcych
lubzagniedonychprostoktnychniepustych
obszarwbezwasnocipadding ani border,
takabypowstajedenmargines(www.w3.org/
TR/CSS21/box.html#collapsing-margins).
jednym z nieprzyjemnych dziwactw modelu kontenerowego CSS jest wystpowanie zjawiska zlewania si marginesw. Polega ono na tym, e jeli dwa elementy
znajduj si jeden nad drugim i oba maj zdefiniowane niezerowe marginesy, ale
zerowe odstpy, krawdzie itp., czna wysoko obu marginesw bdzie mniejsza
ni ich suma. zatem jeli oba elementy maj marginesy o wysokoci 20 pikseli, to
ich suma bdzie mniejsza ni 40 marginesy te zlej si i otrzymamy wsplny
margines o wysokoci 20 pikseli.
ale co to ma wsplnego ze szczelinami? efekt zlewania dotyczy zarwno elementw
nadrzdnych, jak i podrzdnych. Poniewa warstwy nie maj marginesw pionowych, dolny margines kadej z nich zlewa si z dolnym marginesem podrzdnego
akapitu, a poniewa suma marginesw nie jest zerowa, zlewaj si one i w tym przypadku otrzymujemy warto wynikow 10 pikseli. Margines wystaje na zewntrz
nadrzdnej warstwy (patrz rySuNeK 2.41).
Po zdiagnozowaniu problem mona naprawi: jeli warstwom przypisze si wasnoci padding o niewielkiej wartoci, na przykad 1 piksela, warunek konieczny wystpowania zjawiska zlewania si marginesw nie jest speniony i szczeliny znikaj:
# quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left repeat-y;
margin: 0 0 0 400px;
padding: 1px 0;
width: 342px;
}
90
ROZDZIA 2/pROjektOwAnIe
Czarynaobrazach
Gdy ustalono ju konstrukcj sekcji body i nagwka, czas przenie uwag na rozet
widniejc w prawym grnym rogu projektu. Umieszczenie obrazu zawierajcego
przezroczyste obszary (w tym przypadku efekt cienia) nad innymi obrazami wie
si oglnie z uwzgldnieniem charakterystyki zasanianych elementw. Shea mg
spaszczy projekt rozety i zapisa go w pliku Gif lub jPG razem z fragmentami
fotografii i linii znajdujcych si pod spodem, zachowujc tym samym efekt przezroczystoci (patrz rySuNeK 2.42). Mg take pozby si elementw ta i zapisa
obraz w pliku Gif z przezroczystoci, ale efekt cienia byby osabiony, aby nie rzec
zniweczony (patrz rySuNeK 2.43).
Zamiast tego, poniewa rozeta traktowana jest w tym projekcie jako nieobowizkowa, Shea zdecydowa si uy formatu PNG i oszczdzi sobie zmartwie. W pliku
PNG o 256 stopniach przezroczystoci efekt cienia bdzie zachowany niezalenie do
tego, nad czym znajduje si rozeta. Na rysunkach 2.44 i2.45 wida rozet umieszczon na dwch rnych tach.
Format PNG zostanie bardziej szczegowo omwiony w dalszej czci tej ksiki. W tym miejscu naley tylko zwrci uwag na fakt, e Internet Explorer dla
Windows nie wywietla kanau przezroczystoci w plikach PNG o 24-bitowej gbi
koloru, zatem trzeba ukry przed nim takie pliki. Najprostszym sposobem jest tu
uycie selektora elementu podrzdnego, ktrego przegldarka Internet Explorer dla
Windows nie obsuguje, i udostpnianie obrazu PNG jedynie tym przegldarkom,
ktre mog go wywietli.
Rysunek 2.43.
Rozeta z wycitym
tem zapisana w pliku
GIF o ograniczonej
moliwoci kodowania
przezroczystoci
Night drive
91