Tworzenie Stron WWW. Biblia. Wydanie III

Tworzenie stron WWW.
Biblia. Wydanie III

Autor: Phillip Crowder, David A. Crowder
Tumaczenie: Tomasz Walczak
ISBN: 978-83-246-2116-3
Tytu oryginau: Creating Web Sites Bible, Third Edition
Format: 172x245, stron: 824
Oprawa: twarda
Poznaj najwiksze sekrety tworzenia stron WWW i rozkr wasny e-biznes!

Zaprojektuj i zbuduj wasn stron WWW!
Przycignij rzesze uytkownikw!
Rozkr swj e-biznes!
Jeli chcesz zbudowa wasn stron WWW lub sklep internetowy, potrzebujesz
odpowiednich narzdzi oraz rzetelnej wiedzy, jak je wykorzysta. Wszystko to zapewni
Ci ksika, ktr trzymasz w rkach. Znajdziesz tu praktyczne informacje odnonie
tego, jak krok po kroku stworzy stron, przykady architektury prawdziwych aplikacji,
a take interesujce materiay dodatkowe, zapewniajce kontekst dla poznawanych
zagadnie. Nauczysz si m.in. jzyka HTML i JavaScript oraz zrozumiesz,
jak wykorzysta multimedia i blogi. Dziki temu obszernemu podrcznikowi tworzenie
stron WWW nie bdzie miao przed Tob adnych tajemnic!
Ksika Tworzenie stron WWW. Biblia. Wydanie III stanowi kompleksowe rdo
wiedzy na temat projektowania witryn, umieszczania ich w sieci WWW, uaktualniania
i wykorzystania w e-biznesie. Trzecie wydanie zostao wzbogacone o liczne przykady
tworzenia witryn WWW przy uyciu HTML mona je zastosowa jako model dla
wasnej strony. Zostay tu rwnie dodane nowe rozdziay, dotyczce technologii
XHTML, XML, RSS i AJAX. Z tym podrcznikiem szybko nauczysz si projektowa
i budowa wyjtkowe strony internetowe, umieszcza witryny w Internecie
oraz promowa je w taki sposb, aby przyczyniay si do rozwoju Twojego e-biznesu.
HTML i JavaScript
Tabele, ramki i formularze
Okrelanie stylu stron WWW przy uyciu CSS
XHTML, XML i AJAX
Wyszukiwanie, tworzenie i wzbogacanie grafiki w sieci
Tworzenie sklepu
Umieszczanie witryny w sieci
Uaktualnianie witryny i RSS
Reklama i blogi
Multimedia
Zaprojektuj, zbuduj, zarabiaj!
Spis treci
O autorach ....................................................................................................... 19
Podzikowania ................................................................................................ 21
Wstp ............................................................................................................... 23
Cz I Wprowadzenie .................................................................. 29
Rozdzia 1. Podstawy tworzenia stron i witryn internetowych ................... 31
Przegldarki internetowe .....................................................................................................................32
Strony WWW .....................................................................................................................................37
Witryny WWW ...................................................................................................................................41
Klasyfikacja witryn internetowych .....................................................................................................43
Prywatne strony domowe ..............................................................................................................44
Witryny informacyjne ...................................................................................................................44
Witryny organizacji ......................................................................................................................47
Witryny o tematyce politycznej ....................................................................................................47
Witryny komercyjne .....................................................................................................................49
Wprowadzenie do demografii rynku internetowego ...........................................................................51
Odnajdywanie dobrych informacji ................................................................................................51
Badanie preferencji goci witryny internetowej ............................................................................53
Przygotowanie planu ...........................................................................................................................53
Koncentracja na celach .................................................................................................................54
Okrelanie poziomu zoonoci ....................................................................................................54
Planowanie budetu ......................................................................................................................55
Co robi, a czego unika przy tworzeniu witryn WWW? ...................................................................56
Cechy dobrych witryn WWW ......................................................................................................56
Cechy zych witryn .......................................................................................................................57
Podsumowanie ....................................................................................................................................58
Rozdzia 2. Popularne narzdzia do tworzenia stron WWW .......................... 59
Adobe Creative Suite 3 (CS3) .............................................................................................................59
Photoshop .....................................................................................................................................60
Dreamweaver ................................................................................................................................64
Illustrator ......................................................................................................................................70
Flash Professional .........................................................................................................................70
Photoshop Extended .....................................................................................................................71
Fireworks ......................................................................................................................................72
Tworzenie stron WWW. Biblia

Acrobat .........................................................................................................................................73
Contribute .....................................................................................................................................73
Oprogramowanie freeware i shareware ...............................................................................................74
Programy do edycji obrazw ........................................................................................................75
Programy do tworzenia obrazw ..................................................................................................76
Inne programy graficzne ...............................................................................................................77
Projektowanie stron na urzdzenia przenone .....................................................................................78
Historia projektowania stron na urzdzenia przenone .................................................................79
Trudnoci w korzystaniu z sieci WWW przez urzdzenia przenone ...........................................81
Przyszo Internetu mobilnego ....................................................................................................81
Podsumowanie ....................................................................................................................................82
Cz II Podstawy .......................................................................... 83
Rozdzia 3. Historia i rozwj Internetu oraz jzyka HTML .............................. 85
Pocztki Internetu ...............................................................................................................................86
Pocztki komutacji pakietw i ARPANET ...................................................................................86
Ewolucja Ethernetu .......................................................................................................................89
Publicznie dostpny Internet .........................................................................................................91
Powstanie hipertekstu ...................................................................................................................93
Rozwj i ewolucja jzyka HTML .......................................................................................................94
Hypercard .....................................................................................................................................95
HTML ...........................................................................................................................................96
Przyszo jzyka HTML ..............................................................................................................98
Nadejcie jzyka XHTML ............................................................................................................99
Podsumowanie ..................................................................................................................................100
Rozdzia 4. Elementy jzyka HTML .................................................................. 101
Tworzenie stron WWW za pomoc jzyka HTML ...........................................................................102
Sekcje head i body ............................................................................................................................109
Sekcja <head> .............................................................................................................................109
Sekcja <body> ............................................................................................................................112
Elementy blokowe ............................................................................................................................113
Sekcja nagwkowa ....................................................................................................................114
Tytu ...........................................................................................................................................114
Ciao ...........................................................................................................................................114
Elementy wewntrzwierszowe ....................................................................................................115
Akapity .......................................................................................................................................117
Listy nieuporzdkowane .............................................................................................................118
Listy uporzdkowane ..................................................................................................................119
Listy definicji ..............................................................................................................................121
Nagwki ....................................................................................................................................121
Narzdzia do sprawdzania kodu HTML ...........................................................................................121
Programy sprawdzajce cza .....................................................................................................121
Programy sprawdzajce zgodno kodu .....................................................................................122
Programy sprawdzajce zgodno z typami przegldarek ..........................................................122
Narzdzia do tworzenia stron WWW ................................................................................................124
Edytory tekstu .............................................................................................................................124
Edytory HTML ...........................................................................................................................126
Programy WYSIWYG ................................................................................................................127
Spis treci
Programy do zaawansowanej edycji tekstu .................................................................................129

Inne programy .............................................................................................................................130
Projektowanie prostej strony WWW .................................................................................................130
Elementy logiczne i fizyczne ............................................................................................................135
Znaczniki fizyczne ......................................................................................................................135
Znaczniki logiczne ......................................................................................................................136
Stosowanie znacznikw logicznych i fizycznych .......................................................................136
Znaki specjalne oraz schematy kodowania ASCII i Unicode ............................................................139
Krtki przegld elementw ...............................................................................................................140
Podsumowanie ..................................................................................................................................140
Rozdzia 5. Odnoniki tekstowe, mapy graficzne
oraz nawigacja w witrynach WWW ............................................. 143
Przykadowa witryna ........................................................................................................................145
Odnoniki wewntrzne w formie znacznikw kotwicy .....................................................................148
Tworzenie przykadowej witryny ......................................................................................................150
Nawigacja po witrynie ................................................................................................................152
Odnoniki do innych stron witryny .............................................................................................153
Dodawanie stron o rodzinie i sporcie ..........................................................................................154
Tworzenie strony o rodzinie .......................................................................................................156
Dodawanie sekcji o sporcie i szkole ...........................................................................................160
cieki bezwzgldne i wzgldne .......................................................................................................161
Wprowadzanie adresw URL za pomoc elementu BASE .........................................................162
Odnoniki do poprzedniej i nastpnej strony ....................................................................................163
Odnoniki zewntrzne .......................................................................................................................164
Wprowadzanie waciwych adresw w czach ..........................................................................164
Tworzenie wewntrznych czy za pomoc odnonikw ...........................................................165
Wysyanie wiadomoci poczty elektronicznej za pomoc cza mailto ......................................165
Inne rodzaje czy .......................................................................................................................166
Odnoniki w postaci rysunkw ...................................................................................................166
Odnoniki w postaci map graficznych ........................................................................................167
Projektowanie struktury witryny .......................................................................................................170
Krtki przegld odnonikw .............................................................................................................172
Podsumowanie ..................................................................................................................................173
Rozdzia 6. Kolor i rysunki na stronach WWW ............................................... 175
Okrelanie atrybutw koloru .............................................................................................................176
Zmienianie ustawie kolorw .....................................................................................................176
Ustawianie koloru ta ..................................................................................................................177
Wybr koloru tekstu ...................................................................................................................177
Okrelanie koloru czy ..............................................................................................................178
Zasada trzech k: komplementarno, kontrast i koordynacja ........................................................178
Wybr kolorw komplementarnych ...........................................................................................179
Dobr odpowiedniego kontrastu .................................................................................................180
Koordynacja schematu kolorw .................................................................................................180
Wprowadzenie do temperatury kolorw .....................................................................................181
Nazwy i kody szesnastkowe kolorw ...............................................................................................181
Kody RGB kolorw ....................................................................................................................183
Nazwy kolorw ...........................................................................................................................183
Paleta bezpiecznych kolorw ......................................................................................................184

Popularne formaty plikw graficznych .............................................................................................187
Graphics Interchange Format (GIF) ............................................................................................187
Joint Photographic Experts Group (JPEG i JPG) ........................................................................189
Portable Network Graphics (PNG) .............................................................................................189
Ustawianie kolorw ta i tekstu .........................................................................................................189
Ustawianie koloru ta ..................................................................................................................190
Okrelanie koloru tekstu .............................................................................................................191
Dodawanie grafiki jako ta ................................................................................................................191
Definiowanie wielkoci obrazkw wielokrotnie powielanych ....................................................191
Wprowadzanie ta z bocznym motywem ....................................................................................192
Obrazki ta bez widocznych spoin ..............................................................................................195
Unikanie ta rozpraszajcego uwag ...........................................................................................196
Wybr koloru i kontrastu ............................................................................................................197
Dodawanie obrazkw do strony ........................................................................................................197
Manipulowanie obrazkami za pomoc stylw CSS ....................................................................198
Wyrwnywanie obrazkw ................................................................................................................199
Jednoczesne rozmieszczanie kilku obrazkw .............................................................................203
Dodawanie marginesw ..............................................................................................................204
Okrelanie gruboci ramki ..........................................................................................................204
Okrelanie rozmiaru rysunkw .........................................................................................................206
Wykorzystywanie atrybutw height i width ...............................................................................207
Rozwizywanie problemw z obrazkami ..........................................................................................209
Wykorzystywanie miniaturek obrazkw .....................................................................................209
Osadzanie na stronie specjalnych krojw czcionek ....................................................................210
Krtki przegld .................................................................................................................................211
Podsumowanie ..................................................................................................................................212
Rozdzia 7. Formatowanie tekstu .................................................................. 215
Czcionki ............................................................................................................................................215
Style znakw .....................................................................................................................................217
Kursywa ......................................................................................................................................217
Tekst pogrubiony ........................................................................................................................218
Tekst preformatowany ................................................................................................................218
Dodawanie indeksw grnych i dolnych za pomoc kodu HTML i CSS ...................................219
Elementy <span> i <div> ............................................................................................................220
Elementy FONT i BASEFONT ........................................................................................................221
Wyznaczanie wielkoci czcionki ................................................................................................221
Rozmiar czcionki i style wewntrzwierszowe ............................................................................222
Skalowalno i miary bezwzgldne ............................................................................................224
Wzgldna wielko czcionki .......................................................................................................225
Porwnanie wielkoci czcionki i wielkoci nagwka ................................................................225
Zmiana domylnego kroju czcionki ............................................................................................225
Kolor czcionki ............................................................................................................................227
Modyfikowanie czcionki za pomoc stylw ...............................................................................227
Wyrwnywanie tekstu i wprowadzanie wci ..................................................................................229
Co robi z elementami przestarzaymi? ......................................................................................230
Wprowadzanie wci za pomoc elementu BLOCKQUOTE .....................................................231
Wybr zestawu znakw ....................................................................................................................232
Znaki specjalne .................................................................................................................................236
Podsumowanie ..................................................................................................................................244
Spis treci
Cz III Projektowanie zaawansowane ..................................... 245

Rozdzia 8. Wykorzystywanie tabel na stronach WWW ................................ 247
Wstawianie tabel i definiowanie ich rozmiarw ...............................................................................248
Obramowania tabel ...........................................................................................................................253
Atrybuty frame i rules .................................................................................................................256
Odstpy w tabelach ...........................................................................................................................267
Wyrwnywanie tabel i zawartoci komrek .....................................................................................269
Wyrwnywanie w poziomie .......................................................................................................270
Wyrwnywanie w pionie ............................................................................................................276
Zablokowanie zawijania tekstu w komrkach ............................................................................276
czenie komrek .............................................................................................................................278
Obrazki i kolory w tabelach ..............................................................................................................279
Dodawanie obrazkw ta do tabeli ..............................................................................................280
Definiowanie koloru ta tabeli ....................................................................................................283
Krtki przegld informacji o tabelach ...............................................................................................287
Podsumowanie ..................................................................................................................................288
Rozdzia 9. Projektowanie ukadu witryny za pomoc ramek ..................... 291
Projektowanie ukadu ramek .............................................................................................................292
Funkcje ramek ............................................................................................................................293
Projektowanie ukadu nawigacji .................................................................................................293
Ukad ramek typu dziaanie wynik ..........................................................................................295
Tworzenie dokumentw ukadu ramek .............................................................................................295
Wstawianie ramek pionowych i poziomych ...............................................................................296
Definiowanie wymiarw ramki w pikselach, wartociach procentowych i wzgldnych ............300
Zablokowanie moliwoci zmiany wielkoci ramek ...................................................................303
Definiowanie nazw i zawartoci ramek ......................................................................................303
Zagniedanie dokumentw ukadu ramek .................................................................................305
Zastosowanie elementu NOFRAMES ........................................................................................307
Wykorzystywanie odnonikw w ramkach .......................................................................................308
Lokalizowanie odnonikw w okrelonych ramkach .................................................................308
Element base target .....................................................................................................................309
Listy rozwijane ...........................................................................................................................309
Wykorzystywanie zarezerwowanych nazw ramek ......................................................................312
Definiowanie obramowania i marginesw ramek .............................................................................313
Okrelanie gruboci linii obramowania ......................................................................................313
Definiowanie kolorw obramowania ..........................................................................................315
Wprowadzanie szerokoci marginesw ramki ............................................................................315
Konfigurowanie opcji paska przewijania ..........................................................................................316
Alternatywy dla ramek ................................................................................................................316
Unikanie problemw z ramkami .......................................................................................................318
Sprawdzanie, czy zostaa zdefiniowana waciwa liczba ramek .................................................318
Dodawanie obcych elementw ...................................................................................................319
Jakich rozdzielczoci monitora najczciej uywaj uytkownicy? ...........................................319
Projektowanie waciwej liczby ramek .......................................................................................320
Zamieszczanie pocze do menu nawigacyjnego ......................................................................320
Krtki przegld informacji na temat ramek .......................................................................................320
Podsumowanie ..................................................................................................................................322
10

Rozdzia 10. Pobieranie informacji za pomoc formularzy .......................... 323
Wstawianie formularzy .....................................................................................................................324
Element INPUT ..........................................................................................................................324
Wprowadzanie nazw kontrolek ...................................................................................................325
Wprowadzanie krtkich informacji za pomoc pl tekstowych ........................................................326
Definiowanie rozmiaru pola tekstowego ....................................................................................328
Definiowanie maksymalnej dugoci wprowadzanego tekstu .....................................................328
Wprowadzanie wartoci pocztkowych w polu tekstowym ........................................................329
Definiowanie pl przeznaczonych tylko do odczytu i nieaktywnych .........................................330
Wprowadzanie kompleksowych informacji za pomoc wielowierszowych pl tekstowych ............331
Definiowanie wielkoci wielowierszowych pl tekstowych .......................................................332
Zawijanie tekstu ..........................................................................................................................332
Wprowadzanie domylnej zawartoci .........................................................................................334
Wykorzystywanie pl wyboru i przyciskw wyboru ........................................................................334
Dodawanie pl wyboru ...............................................................................................................335
Grupowanie przyciskw wyboru ................................................................................................336
Definiowanie domylnie zaznaczanego wyboru .........................................................................337
Wprowadzanie list wyboru za pomoc elementw SELECT oraz OPTION ....................................338
Wprowadzanie wartoci ..............................................................................................................339
Wywietlanie menu przewijanego ..............................................................................................340
Moliwo wyboru wielu opcji w menu przewijanym ................................................................341
Wprowadzanie domylnie zaznaczanej opcji ..............................................................................341
Wykorzystywanie przyciskw INPUT ..............................................................................................342
Wstawianie przycisku Submit .....................................................................................................342
Wstawianie przycisku Reset .......................................................................................................344
Tworzenie wasnych przyciskw ................................................................................................344
Wstawianie obrazkw penicych funkcj przyciskw ...............................................................345
Wykorzystywanie elementu BUTTON .............................................................................................346
Wstawianie pl ukrytych ..................................................................................................................348
Dodawanie etykiet ............................................................................................................................348
Definiowanie kolejnoci tabulacji .....................................................................................................350
Definiowanie klawiszy skrtw ........................................................................................................350
Wysyanie formularza .......................................................................................................................352
Wprowadzenie do modelu DOM ......................................................................................................353
Podsumowanie ..................................................................................................................................355
Cz IV Profesjonalny wygld ................................................... 357

Rozdzia 11. Dodawanie obiektw multimedialnych .................................... 359
Dodawanie dwiku ..........................................................................................................................360
Wybr formatu pliku dwikowego ...........................................................................................361
Osadzanie dwiku .....................................................................................................................362
Definiowanie gonoci ...............................................................................................................364
Uycie elementu NOEMBED .....................................................................................................364
rda muzyki cyfrowej ..............................................................................................................364
Osadzanie plikw wideo ...................................................................................................................368
Odtwarzanie filmu ......................................................................................................................370
rda cyfrowych filmw wideo .................................................................................................371
Spis treci
11
Tworzenie animacji za pomoc Flasha .............................................................................................371

Ukad programu Flash .......................................................................................................................371
Obraz ..........................................................................................................................................372
Sceny ..........................................................................................................................................373
Warstwy ......................................................................................................................................373
Listwa czasowa ...........................................................................................................................374
Przybornik ..................................................................................................................................375
Panele narzdzi ...........................................................................................................................377
Tworzenie obiektw ..........................................................................................................................377
Rysowanie linii za pomoc narzdzia Line .................................................................................379
Zmiana waciwoci rysowanych linii ........................................................................................379
Zaznaczanie i usuwanie obiektw ...............................................................................................381
Narzdzia do rysowania dowolnych ksztatw ...........................................................................381
Zapisywanie dotychczasowej pracy ............................................................................................382
Importowanie grafiki ..................................................................................................................382
Korzystanie z biblioteki ..............................................................................................................383
Modyfikowanie obiektw .................................................................................................................384
Rozciganie i znieksztacanie obiektw ......................................................................................384
Grupowanie obiektw .................................................................................................................386
Skalowanie ..................................................................................................................................386
Obracanie i pochylanie ...............................................................................................................386
Prostowanie i wygadzanie .........................................................................................................388
Wypenianie gradientami ............................................................................................................388
Wypenianie bitmapami ..............................................................................................................389
Praca z tekstem .................................................................................................................................390
Dodawanie tekstu ........................................................................................................................390
Wybr czcionki ...........................................................................................................................391
Definiowanie waciwoci czcionki ............................................................................................391
Tworzenie rnych efektw za pomoc tekstu ...........................................................................393
Wykorzystywanie listwy czasowej do tworzenia animacji ...............................................................394
Wykorzystywanie klatek .............................................................................................................394
Wprowadzanie klatek kluczowych .............................................................................................394
Dodawanie warstw ......................................................................................................................394
Dodawanie obiektw do warstwy ...............................................................................................395
Zamiana obiektw na symbole ...................................................................................................396
Tworzenie animacji ....................................................................................................................397
Tworzenie automatycznej animacji ............................................................................................398
Tworzenie dodatkowych efektw na innych warstwach .............................................................398
Dodawanie dwiku ....................................................................................................................401
Dodawanie plikw dwikowych MP3 ......................................................................................402
Synchronizacja dwiku i zdarze ..............................................................................................402
Wykorzystywanie zaawansowanych funkcji .....................................................................................403
Programowanie w ActionScript ..................................................................................................403
Wprowadzanie operacji ..............................................................................................................403
Eksportowanie i publikowanie filmw ..............................................................................................404
Eksportowanie filmw ................................................................................................................404
Publikowanie filmw ..................................................................................................................406
Wskazwki pomocne w optymalizowaniu filmw .....................................................................409
Podsumowanie ..................................................................................................................................410
12

Rozdzia 12. Projektowanie stron za pomoc CSS ......................................... 411
Testowanie przegldarki WWW .......................................................................................................412
Obsuga CSS w przegldarce WWW ................................................................................................413
Kaskadowa hierarchia .......................................................................................................................413
Zastosowanie atrybutu style ........................................................................................................414
Osadzanie stylw za pomoc znacznika <STYLE> ....................................................................414
Doczanie zewntrznych arkuszy stylw ..................................................................................415
Zmiana waciwoci elementw HTML ...........................................................................................417
Przypisywanie klas ............................................................................................................................418
Wykorzystywanie selektorw ID ......................................................................................................418
Definiowanie waciwoci elementw zagniedonych ....................................................................419
Niektre ciekawe moliwoci CSS .............................................................................................420
Specyfikacja CSS ..............................................................................................................................422
Waciwoci CSS1 ......................................................................................................................422
Waciwoci CSS2 ......................................................................................................................431
Programy do tworzenia arkuszy stylw ............................................................................................458
Przydatne witryny powicone CSS .................................................................................................459
Dodawanie warstw ............................................................................................................................460
Wykorzystywanie CSS do rozmieszczania elementw ...............................................................460
Rne ukady ..............................................................................................................................461
Bezwzgldny i wzgldny sposb rozmieszczania warstw ..........................................................461
Elementy zagniedone ..............................................................................................................464
Warstwy nachodzce na siebie ...................................................................................................465
Ukadanie warstw w stos za pomoc atrybutu z-index ...............................................................465
Zastosowanie przezroczystoci i kolorw ta warstwy ...............................................................465
Wycinanie fragmentw warstw .........................................................................................................466
Widoczno warstw ....................................................................................................................467
Wywietlanie elementw wikszych od rozmiarw warstwy ...........................................................468
Warstwy widoczne ......................................................................................................................468
Warstwy ukryte ...........................................................................................................................469
Paski przewijania ........................................................................................................................469
Krtki przegld informacji na temat CSS i warstw ...........................................................................470
Podsumowanie ..................................................................................................................................471
Rozdzia 13. Tworzenie dynamicznych stron WWW
z zastosowaniem JavaScript ..................................................... 473
Pierwsze prby ..................................................................................................................................474
Wprowadzenie do jzyka JavaScript .................................................................................................475
Zmienne, stae i literay ..............................................................................................................475
Zmiana wartoci zmiennych za pomoc operatorw ..................................................................479
Dodawanie polece za pomoc procedur obsugi zdarze ..........................................................483
czenie polece w funkcje ........................................................................................................489
Dokonywanie wyboru za pomoc if oraz ifelse ......................................................................492
Wykorzystywanie ptli ...............................................................................................................494
Uruchamianie skryptw za pomoc zdarze .....................................................................................498
Wywoywanie polece JavaScript przy adowaniu strony i przechodzeniu na inn stron .........499
Reagowanie na ruchy mysz .......................................................................................................500
Pojedyncze i podwjne kliknicie mysz ...................................................................................502
Wciskanie i zwalnianie klawiszy ................................................................................................503
Spis treci
13
Obiekty w JavaScript ........................................................................................................................504

Waciwoci ................................................................................................................................505
Metody ........................................................................................................................................507
Sprawdzanie danych formularza .......................................................................................................507
Sprawdzanie kompatybilnoci przegldarki ......................................................................................511
Krtki przegld informacji na temat jzyka JavaScript .....................................................................515
Podsumowanie ..................................................................................................................................516
Rozdzia 14. Umieszczanie witryny w Internecie .......................................... 517
Jak uzyska wasn nazw domeny? .................................................................................................517
Wybr nazwy domeny ................................................................................................................518
Wybr firmy rejestrujcej nazwy domen ....................................................................................520
Puapki rejestracji .......................................................................................................................522
Wybr firmy udostpniajcej miejsce na serwerze WWW ...............................................................523
Wybr najlepszego serwera WWW ............................................................................................523
Ilo potrzebnego miejsca na serwerze .......................................................................................526
Sposb przechowywania witryny WWW na serwerze ...............................................................526
Wybr odpowiednich usug ........................................................................................................528
Sprawdzanie firm udostpniajcych miejsce na serwerach WWW ............................................530
Inne czynniki wpywajce na wybr firmy .......................................................................................531
Obsuga klienta ...........................................................................................................................531
Korzystanie z pomocy technicznej .............................................................................................531
Unikanie nieuczciwych firm .............................................................................................................532
Na co zwrci szczegln uwag? ..............................................................................................532
Kradzie nazw domen .................................................................................................................533
Puapka nielimitowanej liczby odwiedzin na stronie lub nieograniczonego miejsca na dysku .......533
Puapka ofert promocyjnych .......................................................................................................534
Usugi dodatkowe .............................................................................................................................534
Dodatkowe konta poczty elektronicznej .....................................................................................534
Przekierowanie wiadomoci poczty elektronicznej ....................................................................534
Konta pocztowe automatycznie wysyajce odpowiedzi ............................................................536
Statystyki odwiedzin ...................................................................................................................537
Konfigurowanie parametrw witryny za pomoc panelu administracyjnego .............................538
Redystrybucja miejsca na serwerze WWW ................................................................................540
adowanie stron na serwer WWW ...................................................................................................541
Transfer poprzez FTP .................................................................................................................541
Transfer za pomoc przegldarki WWW poprzez HTTP ...........................................................546
Krtki przegld informacji na temat umieszczania witryn w Internecie ...........................................547
Podsumowanie ..................................................................................................................................548
Cz V Krok w przyszo: XHTML, XML i Ajax ........................... 549

Rozdzia 15. XHTML .......................................................................................... 551
Krtki przegld jzyka HTML ..........................................................................................................552
Pocztki jzyka XHTML ..................................................................................................................553
Przechodzenie na jzyk XHTML 1.0 ................................................................................................554
Definicje typu dokumentu (DTD) ...............................................................................................554
Kompatybilno HTML-a i XML-a ............................................................................................561
Porwnanie XHTML-a i HTML-a 4.0 ........................................................................................563
Moduy .......................................................................................................................................564
Niezalecane techniki oparte na skadni HTML ...........................................................................565
14

Tworzenie dokumentw XHTML .....................................................................................................568
Przestrze nazw ..........................................................................................................................569
Dane CDATA i PCDATA ..........................................................................................................570
Odstpy .......................................................................................................................................572
Walidacja kodu w dokumentach XHTML ........................................................................................572
Tworzenie witryn na urzdzenia przenone za pomoc WAP i WML ..............................................575
Co to jest WML? ...............................................................................................................................575
Pierwsze kroki w WML-u ...........................................................................................................576
Znaczniki WML ..........................................................................................................................578
Tasowanie kart ............................................................................................................................579
Interakcja z uytkownikiem ..............................................................................................................582
Formularze w jzyku WML ........................................................................................................582
Definiowanie formatu wprowadzanych danych ..........................................................................583
Definiowanie dopuszczalnych wartoci wprowadzanych danych ...............................................584
Tworzenie menu w jzyku WML ...............................................................................................585
Menu wielokrotnego wyboru ......................................................................................................585
Rnice pomidzy listami w HTML-u i WML-u .......................................................................586
Przeksztacanie kodu XHTML na WML ..........................................................................................587
Witryny oparte na WML-u ...............................................................................................................590
Podsumowanie ..................................................................................................................................591
Rozdzia 16. Projektowanie stron z wykorzystaniem jzyka XML ............... 593
Projektowanie z wykorzystaniem XML-a .........................................................................................593
Zasady obowizujce w jzyku XML .........................................................................................595
Wsppraca rnych sownikw XML-a przestrzenie nazw ..................................................596
Klasyfikowanie zawartoci a definiowanie ukadu wywietlanej strony ....................................597
Definiowanie CSS ......................................................................................................................598
Tworzenie arkusza stylw XSL ..................................................................................................599
Podobiestwa do jzykw programowania .................................................................................603
Definiowanie struktury dokumentu XML ...................................................................................606
Dodawanie kolejnych znacznikw ..............................................................................................607
Dodatkowe informacje na temat definicji typu dokumentu (DTD) .............................................608
Szablony ...........................................................................................................................................610
Typ string i typy liczbowe ..........................................................................................................611
Typy zwizane z dat i czasem ...................................................................................................614
Proste typy danych ......................................................................................................................615
Struktura szablonu ......................................................................................................................615
Witryny na temat jzyka XML .........................................................................................................616
Podsumowanie ..................................................................................................................................617
Rozdzia 17. Ajax ............................................................................................. 619
Obiekt XMLHttpRequest ..................................................................................................................620
Instrukcja switch z warunkiem 0 ................................................................................................624
Zgaszanie da XMLHttpRequest ...........................................................................................628
Interfejs obsugi wzw w specyfikacjach DOM 3 w jzyku IDL ...................................................630
Ajax i Internet mobilny .....................................................................................................................631
Krtki przegld informacji na temat Ajaksa .....................................................................................632
Podsumowanie ..................................................................................................................................632
Spis treci
15
Cz VI Grafika w sieci WWW ..................................................... 635

Rozdzia 18. Wyszukiwanie, tworzenie i retuszowanie obrazkw
na potrzeby stron WWW ........................................................... 637
Rodzaje plikw graficznych ..............................................................................................................637
GIF ..............................................................................................................................................638
JPEG ...........................................................................................................................................638
PNG ............................................................................................................................................639
Porwnanie formatw .................................................................................................................639
Wybr programu graficznego ...........................................................................................................639
Photoshop ...................................................................................................................................639
Fireworks ....................................................................................................................................640
Painter X .....................................................................................................................................641
Paint Shop Pro ............................................................................................................................641
Xara ............................................................................................................................................643
Modyfikowanie obrazkw ................................................................................................................643
Kadrowanie .................................................................................................................................644
Zmiana wielkoci i rozdzielczoci ..............................................................................................646
Obracanie i odwracanie ..............................................................................................................649
Wyostrzanie i rozmazywanie ......................................................................................................652
Stosowanie filtrw efektw artystycznych .................................................................................653
Wykorzystywanie programw do tworzenia grafiki trjwymiarowej ...............................................656
Poser ...........................................................................................................................................656
Bryce ..........................................................................................................................................656
trueSpace ....................................................................................................................................657
Korzystanie z darmowej grafiki dostpnej w Internecie ...................................................................658
Fotografie oglnie dostpne ........................................................................................................659
Wykorzystywanie dzie grafikw ...............................................................................................660
Wybr waciwych artystw .......................................................................................................660
Wykorzystywanie kolekcji fotografii ..........................................................................................661
Unikanie problemw prawnych ........................................................................................................661
Wykorzystywanie materiau chronionego prawem autorskim ....................................................661
Poszanowanie znakw towarowych ............................................................................................662
Podsumowanie ..................................................................................................................................663
Cz VII E-biznes ......................................................................... 665

Rozdzia 19. Zakadanie sklepu internetowego ............................................ 667
Wybr rodzaju dziaalnoci ...............................................................................................................667
Witryny oferujce pojedyncze lub wyspecjalizowane produkty .................................................668
Witryny sprzedajce rnorodne produkty .................................................................................669
Witryny oferujce usugi ............................................................................................................671
Centra handlowe .........................................................................................................................673
Sklepy partnerskie ......................................................................................................................673
Konfigurowanie koszyka zakupw ...................................................................................................674
Kwestia bezpieczestwa .............................................................................................................675
Zakadanie sklepu w istniejcym centrum handlowym ...............................................................676
Zakup komercyjnych programw ...............................................................................................677
Korzystanie z programw o otwartym dostpie do kodu rdowego ........................................677
16

Pobieranie opat ................................................................................................................................679
Karty kredytowe i debetowe .......................................................................................................680
Problem obcie zwrotnych ......................................................................................................682
Czeki ...........................................................................................................................................683
E-pienidz ...................................................................................................................................685
Procedury zwrotu towarw i pienidzy .......................................................................................685
Zakadanie sklepu powizanego z witryn ..................................................................................687
Wzorce dokonywania zakupw w Internecie ....................................................................................688
Uaktualnianie witryny .......................................................................................................................690
Systematyczne uaktualnianie witryny ...............................................................................................691
Zamieszczanie najnowszych informacji .....................................................................................691
Ustalanie harmonogramu zmian .................................................................................................692
Przygotowywanie aktualnych informacji ....................................................................................692
Zachcanie uytkownikw do prezentowania opinii ..................................................................693
Techniki budowania staych relacji z klientami ................................................................................694
Tworzenie biuletynw i czasopism elektronicznych ...................................................................695
Opinie o produkcie .....................................................................................................................696
Tworzenie wirtualnych przewodnikw .......................................................................................696
Podsumowanie ..................................................................................................................................697
Rozdzia 20. Reklama ....................................................................................... 699
Reklamowanie si poprzez Google i inne wyszukiwarki internetowe ..............................................699
Reklama poprzez Google ............................................................................................................700
Reklamowanie si w innych wyszukiwarkach ............................................................................705
Reklama z uyciem banerw ......................................................................................................708
Wsppraca z agencjami reklamowymi ............................................................................................709
Znajdowanie odpowiedniej agencji reklamowej .........................................................................709
Programy partnerskie ..................................................................................................................710
Promowanie witryny .........................................................................................................................711
Wykorzystywanie wyszukiwarek internetowych ..............................................................................712
Zasada dziaania robotw i pajkw ...........................................................................................714
Rejestrowanie si w przegldarce ...............................................................................................715
Jak uatwi wyszukiwanie kluczowych informacji na stronie? ...................................................715
Przykad wykorzystania opisu zawartoci strony ........................................................................718
Ranking wynikw wyszukiwania ...............................................................................................719
Portale .........................................................................................................................................719
Blokowanie przeszukiwania witryny ..........................................................................................720
Korzystanie z katalogw internetowych ...........................................................................................722
Ranking stron w katalogu ...........................................................................................................722
Zgaszanie witryny do katalogu ..................................................................................................723
Usugi katalogowe typu Free-For-All .........................................................................................724
Publikowanie ogosze prasowych ...................................................................................................724
Nawizywanie i podtrzymywanie kontaktu z klientem ...............................................................725
Odnajdywanie adresw poczty elektronicznej ............................................................................725
Formatowanie e-maili HTML czy zwyky tekst? ...................................................................726
Wykorzystywanie wzajemnych odnonikw ....................................................................................726
Wykorzystywanie banerw reklamowych ........................................................................................727
Tworzenie banerw ....................................................................................................................727
Projektowanie efektywnych banerw .........................................................................................728
Reklamy multimedialne ..............................................................................................................729
Spis treci
17
Wymiana banerw ......................................................................................................................729

Reklama tradycyjna ....................................................................................................................729
Inne formy reklamy ...........................................................................................................................730
Reklama za pomoc e-maili ........................................................................................................730
Zbieranie adresw e-mail ............................................................................................................730
Rozsyanie biuletynw pocztowych ............................................................................................731
Podsumowanie ..................................................................................................................................732
Rozdzia 21. Rne aspekty prowadzenia witryny internetowej ................ 733
Uywanie nazw domen i znakw towarowych .................................................................................733
Dyskusja zwizana z nazwami domen ........................................................................................734
Ustawa ACPA .............................................................................................................................736
Odszukiwanie nazw domen w Internecie ....................................................................................737
Dbanie o swoj domen ..............................................................................................................737
Sprawdzanie znakw towarowych w Internecie .........................................................................738
Rozwiewanie obaw ...........................................................................................................................740
Informowanie o bezpieczestwie witryny ..................................................................................740
Polityka prywatnoci ..................................................................................................................741
Zasady reklamacji i zwrotw towarw .............................................................................................743
Moliwoci zarabiania w Internecie ..................................................................................................744
Zamieszczanie reklam .................................................................................................................745
Optymalizacja witryny pod ktem wyszukiwarek ......................................................................747
Podsumowanie ..................................................................................................................................749
Cz VIII Uaktualnianie witryny ................................................. 751

Rozdzia 22. Administrowanie witryn .......................................................... 753
Testowanie witryny ...........................................................................................................................753
Oce witryn z punktu widzenia uytkownika ...........................................................................755
Zlecanie testowania witryny osobom z zewntrz ........................................................................755
Analiza opinii osb testujcych lub odwiedzajcych witryn .....................................................757
Zmiany sposobu wywietlania witryny .............................................................................................758
Konfiguracja przegldarki ..........................................................................................................759
Spjno elementw witryny ............................................................................................................760
Dbaj o komfort goci Twojej witryny .........................................................................................760
Podstawowe zadania administratora witryny ..............................................................................761
Wybr narzdzi do administrowania ..........................................................................................761
Programy monitorujce prac serwerw .....................................................................................762
Podsumowanie ..................................................................................................................................762
Rozdzia 23. Kanay RSS ................................................................................... 763
Pocztki technologii RSS ..................................................................................................................763
Strona NASA z odnonikami do kanaw RSS .................................................................................765
Krtki przegld informacji na temat kanaw RSS ...........................................................................771
Podsumowanie ..................................................................................................................................771
Rozdzia 24. Blogi ............................................................................................ 773
wiat blogw ....................................................................................................................................773
Korzystanie z witryny Blogger.com ..................................................................................................775
Krtka historia Bloggera .............................................................................................................775
Tworzenie bloga w witrynie Blogger ..........................................................................................776
Dodawanie nowych wpisw do bloga .........................................................................................781
18

Inne narzdzia do tworzenia blogw .................................................................................................785
blogs.com i TypePad ..................................................................................................................786
LiveJournal .................................................................................................................................787
Radio UserLand ..........................................................................................................................788
Dodatki dla blogerw ..................................................................................................................790
Integrowanie blogw z witrynami WWW ........................................................................................791
Blogowanie jako styl pisania ......................................................................................................792
Integrowanie bloga z witryn za pomoc czy ..........................................................................792
Pena integracja bloga z witryn .................................................................................................792
Podsumowanie ..................................................................................................................................793
Skorowidz ...................................................................................................... 795
Rozdzia 6.
Kolor i rysunki
na stronach WWW
W tym rozdziale:
Okrelanie atrybutw koloru
Zasada trzech k: komplementarno, kontrast i koordynacja
Nazwy i kody szesnastkowe kolorw
Popularne formaty plikw graficznych
Ustawianie kolorw ta i tekstu
Dodawanie grafiki jako ta
Dodawanie obrazkw do strony
Wyrwnywanie obrazkw
Okrelanie rozmiaru rysunkw
Rozwizywanie problemw z obrazkami
Kolory s jedn z najwaniejszych rzeczy, na jakie naley zwrci uwag w trakcie

projektowania witryny internetowej. Waciwy ich dobr decyduje o dwch moliwych
skutkach:
albo osoby odwiedzajce Twoj witryn polec j innym i same na ni powrc,
albo witryna stanie si przykadem ilustrujcym, czego nie naley robi.
W tym rozdziale omawiamy kwesti definiowania atrybutw kolorw w kodzie HTML

i CSS oraz zagadnienie poprawnego wykorzystania kolorw, tak by unikn przykrych
sytuacji. Zajmujemy si nie tylko wyborem odpowiedniego koloru ta, tekstu i grafiki, ale
zwracamy te uwag na ich walor estetyczny. Podpowiadamy take, co zrobi, by zastosowane kolory zostay prawidowo odwzorowane na rnych wywietlaczach.
176
Cz II Podstawy
Okrelanie atrybutw koloru

Kiedy po raz pierwszy uruchamiasz przegldark WWW, korzysta ona z domylnych
ustawie wywietlania kolorw elementw stron WWW (odnonikw, tekstu, nagwkw i tak dalej). Uytkownicy przegldarek Internet Explorer, Firefox i wielu innych
mog zmieni, zgodnie ze swoimi upodobaniami, kolory wywietlanych stron, bez
wzgldu na rodzaj systemu operacyjnego.
Obecnie do najczciej uywanych przegldarek nale Internet Explorer, Firefox, Gecko,
Safari i Konqueror. Inne popularne aplikacje to Opera i America Online. Niezalenie od
uywanego komputera i systemu operacyjnego wikszo uytkownikw korzysta
z jednego lub dwch spord tych programw, dlatego w tym rozdziale omawiamy
przede wszystkim zagadnienia dotyczce tych aplikacji. Jeli uywasz innego programu,
to informacji na temat kolorw musisz poszuka w dokumentacji.
Zmienianie ustawie kolorw

W programie Internet Explorer kolory moesz ustawi w nastpujcy sposb:
1. W pasku menu programu Internet Explorer wybierz opcj Narzdzia.
2. Z menu rozwijalnego wybierz opcj Opcje internetowe.
3. W oknie dialogowym Opcje internetowe wybierz zakadk Oglne i kliknij
przycisk Kolory, ktry znajduje si w lewym, dolnym rogu okna dialogowego.
4. Zostanie wywietlone okno dialogowe Kolory (przedstawione na rysunku 6.1).
Rysunek 6.1.
W oknie dialogowym
Kolory mona
skonfigurowa
kolory wywietlane
w przegldarce
Internet Explorer
Okno dialogowe Kolory jest podzielone na dwie czci panel Kolory oraz cza.
Pierwszy z nich umoliwia zmian kolorw wywietlanego tekstu oraz ta strony. W panelu cza moesz zmieni kolory wywietlanych czy. Jeli klikniesz przycisk OK,
przegldarka powinna wywietli stron zgodnie z now konfiguracj, o ile na stronie
okrelone kolory nie zostay specjalnie zdefiniowane. Jeli wprowadzone zmiany nie
zadowalaj Ci, powtrz wymienione wczeniej czynnoci.
Rozdzia 6. Kolor i rysunki na stronach WWW
177
Ustawianie koloru ta
Kolor ta jest kolorem wywietlanej strony w oknie przegldarki. Jeli strona WWW
posiada wasny, zdefiniowany kolor ta, to bdzie on wywietlany w oknie przegldarki.
Jeli jednak nie okrelono adnego koloru ta, to zostanie wywietlony kolor zdefiniowany
przez Ciebie w oknie dialogowym Kolory.
Ustawienia domylne wywietlania koloru ta i tekstu s zgodne z zadeklarowanymi
ustawieniami systemu Windows. Jeli chciaby korzysta z innych ustawie, w przegldarce Internet Explorer zaznacz okienko Uyj kolorw systemu Windows, a nastpnie
kliknij symbol koloru ta umieszczony po prawej stronie etykiety To:. Zostanie wywietlone okienko dialogowe Kolor, takie jak przedstawione na rysunku 6.2. Wybieranie
kolorw w tym okienku przebiega w podobny sposb jak w systemie Windows: moesz
wskaza kolor (tak zwan prbk) na palecie Kolory podstawowe lub zdefiniowa wasny,
klikajc przycisk Definiuj kolory niestandardowe.
Rysunek 6.2.
W oknie
dialogowym Kolory
moesz wybra
podstawowy kolor
ta wywietlanych
stron WWW
Zwykle nie naley zmienia ustawie domylnych zwizanych z kolorem. Wiele witryn
je zastpuje, dlatego wartoci wybrane przez internautw nie zawsze s widoczne.
Ponadto ustawienia przegldarki projektanta strony nie maj wpywu na przegldarki
uytkownikw jego witryn.
Wybr koloru tekstu

Wybieranie koloru tekstu wywietlanego w oknie przegldarki przebiega w podobny
sposb jak wybieranie koloru ta. Moesz klikn symbol koloru znajdujcy si po prawej
stronie etykiety Tekst:. Kiedy zostanie wywietlone okienko Kolor, przedstawione na
rysunku 6.2, bdziesz mg wybra jeden z podstawowych kolorw lub zdefiniowa
kolor niestandardowy.
178
Cz II Podstawy
Okrelanie koloru czy

W przegldarce Internet Explorer mona okrela kolory tekstu przypisanego do trzech
rodzajw odnonikw, ktre znajduj si na stronie WWW, to znaczy do czy odwiedzonych, nieodwiedzonych i aktywnych.
Tekst czy prowadzcych do stron, ktre zostay odwiedzone przez uytkownikw, jest
wywietlany w kolorze zdefiniowanym w opcji Odwiedzone, w panelu cza okna dialogowego Kolory. Moesz zmieni ten kolor analogicznie do zmiany kolorw ta i tekstu
na stronach WWW.
Tekst oznaczajcy odnonik prowadzcy do stron, ktrych internauci jeszcze nie odwiedzili, jest wywietlany w kolorze zdefiniowanym w opcji Nieodwiedzone, w panelu
cza okna dialogowego Kolory (zobacz rysunek 6.1). Zmienisz ten kolor, postpujc
tak jak w przypadku zmiany kolorw ta i tekstu na stronach WWW.
Jeli nad tekstem oznaczajcym cze zostanie umieszczony wskanik myszy, to przybiera
on kolor cza aktywnego. W programie Internet Explorer domylnie nie jest zdefiniowany aden kolor cza aktywnego. Jeli chciaby przypisa odrbny kolor czom aktywnym, zaznacz opcj Uyj koloru aktywowania, a nastpnie kliknij symbol koloru,
znajdujcy si po prawej stronie od etykiety Aktywowanie:, tak jak na rysunku 6.3. Operacja
ta przebiega tak samo, jak wybr koloru ta lub tekstu.
Rysunek 6.3.
Zaznaczenie opcji
Uyj koloru
aktywowania daje
dostp do kolorw
aktywowania
Zasada trzech k: komplementarno,

kontrast i koordynacja
Jak efektywnie wykorzysta kolory na witrynie? Moe Ci pomc zasada trzech k,
czyli zasada komplementarnoci, kontrastu i koordynacji. Pamitaj, e:
kolory komplementarne, czyli wzajemnie si uzupeniajce, wywouj mie

dla oka wraenie,
179
kolory kontrastowe wyrniaj poszczeglne elementy strony,
koordynacja, harmonia kolorw na kolejnych stronach witryny wzmacnia dobre

wraenie uytkownik, ktry oglda Twoj witryn, wie, e jest to zoone dzieo,
a nie bezadnie poczone strony i zasoby.
Waciwy dobr kolorw na stronach jest jednym z podstawowych zagadnie projektowania witryny internetowej. Jeli bdziesz przestrzega zasad dotyczcych kolorw
komplementarnych, kontrastowych i harmonizowania, zaprojektujesz eleganck i spjn
witryn, tak, ktra zachca do ponownych odwiedzin.
Wybr kolorw komplementarnych

Sie World Wide Web wykorzystuje statyczne i dynamiczne rodki przekazu. Do stron
WWW moesz dodawa dynamiczne elementy (filmy), jednak wikszo elementw
ma charakter statyczny, tak jak strony w czasopismach czy billboardy.
Wicej informacji zwizanych z dodawaniem dynamicznych elementw do strony
WWW znajdziesz w rozdziale 13.
Jeli przegldae ostatnio jakie czasopisma lub billboardy przy szosie przykuy Twoj
uwag (cho mamy nadziej, e w przypadku billboardw przy szosie tylko na chwil),
to na pewno zwrcie uwag na to, jak rol odgrywaj uzupeniajce si kolory. Caa
sztuka polega na tym, by wybra kolory mie dla oka.
Zasada wzajemnego uzupeniania si kolorw znajduje zastosowanie take na stronach
WWW. Jeli na Twojej stronie kolory ta, grafiki i tekstu bd zharmonizowane, to
strona stanie si nie tylko bardziej czytelna, ale i zrobi lepsze wraenie na odbiorcach.
Im bardziej pocigajca szata graficzna, tym wicej osb odwiedzi witryn internetow
(i tym wicej do niej powrci).
Ktre kolory wzajemnie si uzupeniaj? Przedstawiamy to na rysunku 6.4. Cho ilustracje w ksice s czarno-biae, w sieci WWW znajdziesz ten rysunek w wersji kolorowej (wpisz w wyszukiwarce wyraenie color wheel).
Rysunek 6.4.
Koo kolorw
jest podstawowym
narzdziem artysty
W najwszym tego sowa znaczeniu kolorami komplementarnymi s dwa kolory,

ktre znajduj si naprzeciw siebie na kole kolorw, narzdziu od dawna wykorzystywanym przez tradycyjnych artystw.
180
Cz II Podstawy
Kolorami analogicznymi s dwa kolory, ktre znajduj si tu obok siebie na kole

kolorw. Na przykad kolory analogiczne to kolor niebieski i kolor niebiesko-zielony.
Uzupeniajc definicj kolorw komplementarnych, naley doda, e jako takie naley
traktowa kolory analogiczne do kolorw komplementarnych. Na przykad kolor pomaraczowy wzajemnie si uzupenia z kolorem niebieskim. Kolorami analogicznymi do
niebieskiego s kolory niebiesko-zielony i niebiesko-fioletowy, wic take one bd si
uzupenia z kolorem pomaraczowym.
Opisany model kolorw dostarcza podstawowych informacji, ktre pomagaj waciwie
wykorzysta kolory na stronie WWW, nikt nie zagwarantuje jednak, e rne kolory ta
i tekstu dadz od razu wietny rezultat. Wane, by zadba o waciwy kontrast kolorw.
Dobr odpowiedniego kontrastu

Kolory wzajemnie si uzupeniajce s nazywane kolorami kontrastowymi (ciemniejsze kolory wyrniaj si na tle janiejszych). Najbardziej znane kolory kontrastowe to
biay i czarny. Ksiki s drukowane czarnym tuszem na biaych kartkach papieru, poniewa atwo si je czyta. Ta sama zasada sprawdza si w przypadku stron WWW, na
przykad odczytanie czarnego tekstu na biaym lub jasnoszarym tle strony nie sprawia
trudnoci.
Jeli sprbujesz umieci biay tekst na czarnym tle, nie bdzie on ju tak atwy w odbiorze. Czarny kolor maskuje krawdzie biaego teksu, dlatego jeli ogldasz witryny
z czarnym tem, tekst jest zapisywany czcionk pogrubion, uatwiajc czytanie. Niektre
witryny, na przykad TrekWeb (www.trekweb.com) wykorzystuj nawet niebieski kolor
ta, aby wyrni biay tekst.
Jeli na stronie WWW stosujesz schemat obejmujcy trjki kolorw (z podzielonym
tem), take powiniene wzi pod uwag reguy kontrastu. Na przykad trjka w postaci
czerwono-zielonego ta i niebieskiego tekstu utrudni uytkownikowi Internetu czytanie.
Jeli zmienisz czerwony kolor ta na ty, niebieski tekst stanie si bardziej kontrastowy,
a tym samym atwiejszy do odczytania.
Koordynacja schematu kolorw

Rwnoczenie z planowaniem ukadu witryny naley okreli kolorystyk poszczeglnych elementw. (Wicej informacji zwizanych z planowaniem witryny znajdziesz
w rozdziale 1. i 4.). Wyjanilimy ju, na czym polega stosowanie kolorw kontrastujcych i komplementarnych, wic przejdmy do koordynacji, harmonizowania tych kolorw na stronie.
Twj schemat kolorw powinien by dostosowany do wymaga, oczekiwa docelowej
grupy uytkownikw. Na przykad jeli Twoja witryna jest przeznaczona dla osb starszych, warto zastosowa kolory o wysokim kontracie (czarny tekst na biaym tle). Jeli
projektujesz witryn dla dzieci, mniejszy kontrast i wiksza liczba kolorw oka si duo
lepszym pomysem.
181
Wprowadzenie do temperatury kolorw

Aby Twoja witryna zapada w pami osb, ktre j odwiedzaj, naley stworzy odpowiednie wraenie emocjonalne. Dziki temu uytkownicy ponownie j odwiedz,
a take bd j reklamowa wrd znajomych. Moesz operowa silnymi, krzykliwymi
kolorami lub wybiera ich agodniejsze warianty.
Przedstawione na rysunku 6.4 koo kolorw zawiera zarwno ciepe, jak i zimne
kolory. Kolory ciepe skadaj si z czerwonych odcieni, od tego po kolor purpury.
Ciepe kolory tchn energi i daj lepsze efekty jako kolory tekstu ni ta.
Kolory zimne skadaj si z odcieni koloru niebieskiego, od zieleni po kolor ciemnoniebieski, emanuj si i spokojem, wic nadaj si na kolor ta.
Kontrastowanie ciepych i zimnych kolorw to, oglnie rzecz biorc, dobry pomys.
Warto wiedzie, e niektre kolory tworz lepszy kontrast ni inne. Na przykad jeli
uywasz jednoczenie koloru jasnoniebieskiego i pomaraczowego, nie bd one stanowiy
dobrego kontrastu, poniewa s jasne. Jeli zmienisz kolor jasnoniebieski na ciemnoniebieski lub pomaraczowy na kolor brzowy, uzyskasz lepszy kontrast, a uytkownicy
odwiedzajcy Twoj stron bd j odczytywa z atwoci.
Jeli chciaby pogbi swoj wiedz o kolorach, moesz odwiedzi witryny wymienione w tabeli 6.1.
Tabela 6.1. Witryny zawierajce informacje o kolorach
Witryna
Adres URL
The 16,777,216 Colors of the Web
the-light.com/16m/16m.html
Web Color Reference
webreference.com/html/reference/color
Nazwy i kody szesnastkowe kolorw

Do wywietlania barw na monitorze komputera wykorzystywane s trzy podstawowe
kolory RGB: Red (czerwony), Green (zielony) i Blue (niebieski). Monitor czy warto
okrelon dla kadego z nich i wywietla w punkcie ekranu nazywanym pikselem (nazwa
pochodzi od ang. picture element, czyli element obrazu). Piksel przybiera kolor biay,
gdy kady z kolorw podstawowych ma peny udzia (100 procent). Jeli natomiast piksel
powinien by wywietlony w kolorze czarnym, to udzia kadego z kolorw wynosi zero
procent.
W jzyku HTML kombinacj kolorw RGB zapisujemy za pomoc kodu szesnastkowego.
W zapisie szesnastkowym posugujemy si 16 liczbami od 0 do 15, inaczej ni
w uywanym na co dzie zapisie dziesitnym, wykorzystujcym cyfry od 0 do 9. Poniewa kadej pozycji w liczbie odpowiada tylko jedna cyfra, wartoci od 10 do 15 s zapisywane za pomoc liter od A do F. Dlatego na przykad liczb 60 w systemie szesnastkowym zapisujemy jako 3C. Zapis 3C jest wygodniejszy ni jego odpowiednik
w systemie binarnym 111100.
182
Cz II Podstawy
Kiedy mamy na myli liczb szesnastkow, ktra wyglda jak liczba dziesitna,
na przykad 43, to nie posugujemy si liczebnikiem czterdzieci trzy, lecz dwoma
liczebnikami: cztery, trzy. Dziki temu wyranie zaznaczamy, e chodzi o liczb
szesnastkow. Jeszcze lepszy jest zwrot: szesnastkowo: cztery trzy.
Przyjrzyjmy si przykadowi. Prawdopodobnie pamitasz, e bajt skada si z 8 bitw,
a pbajt to 4 bity. Kiedy przeksztacamy liczby binarne na szesnastkowe, musimy to
robi po jednym pbajcie. Uatwia to obliczenia.
Liczba 60 to w zapisie binarnym 00111100 (32+16+8+4 = 60).
Kady bajt ma osiem pozycji, ktre okrelaj wartoci od 1 (pierwszy bit od prawej) do
128 (pierwszy bit od lewej). Pozycje z cyfr 0 nie oznaczaj adnej wartoci, dlatego
nie trzeba ich uwzgldnia przy sumowaniu. Przypomina to nieco system dziesitny.
Liczba 109 to jedynka na pozycji oznaczajcej setki, 0 z pozycji okrelajcej dziesitki
i 9 na pozycji oznaczajcej jednoci, co daje 109.
Wartoci pozycji w systemie binarnym opieraj si na potgach dwjki: 20 to 1, 21 to 2,
22 to 4, 23 to 8, 24 to 16, 25 to 32, 26 to 64, a 27 to 128. Po dodaniu wszystkich tych
wartoci (1+2+4+8+16+32+64+128) otrzymamy liczb 255, czyli 11111111 w systemie
binarnym.
Aby przeksztaci t liczb na system szesnastkowy, naley najpierw wzi cztery prawe cyfry i doda ich wartoci, ktre sumuj si do 15. Z wczeniejszego opisu wiesz, e
15 to litera F w systemie szesnastkowym. Nastpnie naley doda wartoci czterech
cyfr lewych: 16+32+64+128, co daje 240. Po dodaniu 240 do 15 otrzymamy 255, czyli
FF w systemie szesnastkowym.
Uwani Czytelnicy mog si zastanawia, dlaczego 1111 to 15 przy pierwszym zbiorze
cyfr i 240 przy zbiorze drugim. Ponadto dlaczego warto 240 odpowiada literze F?
Dobre pytanie. Z powodu takich rozwaa wiele osb rezygnuje z nauki matematyki.
Zapis szesnastkowy jest sensowny, ale trudno go wytumaczy.
Omawian liczb mona postrzega na dwa sposoby: jako dwa pbajty o wartoci 15
lub jako jeden bajt o wartoci 255. W opisie poczylimy obie perspektywy. Cztery
prawe cyfry oznaczaj wartoci 1, 2, 3 i 8, dajc w sumie 15 (F). Z kolei lewy pbajt
okrela wartoci 16, 32, 64 i 128, co daje liczb 240. Po podzieleniu jej przez 16 otrzymamy 15 (1111), co take odpowiada literze F. Dlatego lewy pbajt to rwnie litera F.
240+15 daje 255, czyli FF.
Pamitaj, e bit to porcja informacji odpowiadajca wartociom z par tak nie lub prawda
fasz. Bit jest ustawiony, jeli jego warto to 1 (oznacza wtedy tak lub prawd),
a nieustawiony, jeli ma warto 0 (okrela wtedy nie lub fasz). Pbajt skada si
z czterech bitw, a bajt z omiu. Aby obliczy warto drugiego pbajtu (lewego F),
podnie 15 do kwadratu. Otrzymasz warto 225. Po dodaniu 15 uzyskasz 240.
Jeli teraz dodasz warto prawego pbajta (15), otrzymasz 240+15 = 255.
183
Kody RGB kolorw

W HTML kolor mona zdefiniowa za pomoc liczby szesnastkowej, zoonej z 6 znakw, nazywanej kodem koloru. Kod koloru rozpoczyna si znakiem #. Szecioznakowa
sekwencja to w rzeczywistoci zapis kodu trzech podstawowych kolorw RGB. Mwilimy
wczeniej, e kolory czerwony, zielony i niebieski zdefiniowane w kodzie koloru
tworz ostatecznie barwn plamk wywietlan na ekranie.
Przykadowo, kod #FF00FF definiuje najmocniejszy kolor czerwony (FF), brak koloru
zielonego (00) i najmocniejszy kolor niebieski (FF). Taka kombinacja kolorw w rezultacie
utworzy na ekranie komputera kolor magenta. Przedstawiamy kilka przykadw kodw
kolorw:
#FFFFFF
biay (czerwony, niebieski i zielony),
#000000
czarny (brak czerwonego, brak niebieskiego i brak zielonego),
#FF0000
czerwony,
#00FF00
jasnozielony (cho oficjalna nazwa tego koloru w HTML to Lime,
czyli limonkowy),
#0000FF
niebieski.
Jeli chcesz otrzyma kolor mniej intensywny, moesz zmniejszy warto przypisan
danemu kolorowi w kodzie koloru. Na przykad jeli chciaby wywietli janiejszy
kolor niebieski, uyj kodu koloru #0000AA.
Nazwy kolorw
Posugiwanie si kodami kolorw moe prowadzi do wielu bdw. Zapisywanie kadego sprawdzonego kodu koloru jest rwnie niewygodne kto zechce nosi ze sob
plik nieporcznych notatek? Na szczcie w jzyku HTML zdefiniowano nazwy powszechnie uywanych kolorw, moesz wic zamiast kodu koloru wprowadzi jego nazw.
W tabeli 6.2 umiecilimy niektre ze zdefiniowanych nazw kolorw i odpowiadajce
im kody.
Na przykad jeli chciaby, aby zdanie Witaj na mojej stronie! miao niebieski kolor,
wprowad kod:
<FONT color="blue">Witaj na mojej stronie!</FONT>
Liczba zdefiniowanych nazw kolorw w jzyku HTML jest ograniczona. Jeli chcesz
unikn gromadzenia notatek z kodami kolorw, moesz zastosowa inne rozwizanie,
na przykad arkusze stylw. Pozwalaj one powiza dowolne nazwy kolorw z kodami
kolorw, wwczas kody kolorw trzeba wprowadzi tylko raz.
Wicej informacji o arkuszach stylw znajdziesz w rozdziale 12.
184
Cz II Podstawy
Tabela 6.2. Wybrane nazwy kolorw w HTML

Nazwa koloru
Kod koloru
Kolor
aqua
#00FFFF
seledynowy
black
#000000
czarny
blue
#0000FF
niebieski
fuchsia
#FF00FF
rowy
gray
#808080
szary
green
#008000
zielony
lime
#00FF00
jasnozielony
maroon
#800000
bordowy
navy
#000080
granatowy
olive
#808000
oliwkowy
purple
#800080
fioletowy
red
#FF0000
czerwony
silver
#C0C0C0
srebrny
teal
#008080
morski
white
#FFFFFF
biay
yellow
#FFFF00
ty
Paleta bezpiecznych kolorw

Aby wspomc projektantw w ich pracy, zdefiniowano 216 kolorw bezpiecznych dla
WWW, to znaczy takich, ktre wywietlane przez inny komputer, na innym monitorze
i przez inn przegldark zachowaj sta, t sam barw. Pozostae kolory tworzone s
za pomoc symulacji zwanej roztrzsaniem (ang. dithering) proces polega na tworzeniu wzoru zoonego z rnych kolorw, dziki czemu uzyskujemy wraenie wywietlania innego, nowego koloru.
W efekcie wywietlania symulowanego koloru odnosimy wraenie jakbymy ogldali
materia w szkock krat. Co wicej, kolor symulowany jest rnie wywietlany, zaley
to od systemu i przegldarki. Stosowanie 216 kolorw bezpiecznych dla WWW jest jedynym sposobem, by zapewni stronom WWW ten sam wygld w rnych systemach.
Dobrym sposobem wybierania bezpiecznych kolorw jest korzystanie z palety. Jeli posugujesz si programem sucym do tworzenia stron WWW (takim jak Dreamweaver), to
kolory bezpieczne dla WWW moesz wybra bezporednio w tym programie. Jeli nie,
powiniene poszuka informacji w Internecie.
Witryna Microsoft Developer Network udostpnia palet kolorw bezpiecznych pod
adresem http://msdn2.microsoft.com/en-us/library/bb250466.aspx. Strona, ktrej fragment
przedstawia rysunek 6.5, zawiera wszystkie kolory bezpieczne dla WWW. Zostay one
185
Rysunek 6.5.
Witryna Microsoft
Developer Network
przedstawia
palet kolorw
bezpiecznych
pogrupowane na dwa sposoby kolejno oraz jako kolory podobne. Kiedy umiecisz
wskanik myszy nad interesujcym Ci kolorem, w okienku tekstowym zostanie wywietlony jego kod.
Okno dialogowe Kolory z pakietu Office 2007 zawiera standardow palet kolorw
bezpiecznych dla WWW. Przedstawia j rysunek 6.6. Program ten wywietla kolory
bezpieczne dla stron WWW stosowane w przegldarkach Internet Explorer. Kody kolorw moesz skopiowa z programu i wklei je bezporednio do kodu rdowego Twojej
strony. Jeli posiadasz system Windows, moesz te pobra bezpatny program VQPalette
lub uruchomi go bezporednio w przegldarce Internet Explorer.
Rysunek 6.6.
Microsoft Office 2007
udostpnia palet
kolorw bezpiecznych
dla WWW
Strona VisiBone Webmasters Color Lab, dostpna pod adresem http://www.visibone.com/

colorlab (zobacz rysunek 6.7), wywietla palet 216 kolorw bezpiecznych dla WWW.
Jeli wybierzesz konkretny kolor, zostanie wywietlona jego nazwa, kod koloru w HTML,
wartoci w modelach RGB i CMYK (ang. cyan-magenta-yellow-black). Witryna ta jest
cenna z kilku powodw:
Oferuje kolekcj palet kolorw bezpiecznych dla WWW (ktr moesz pobra
i wykorzysta w dowolnym programie sucym do tworzenia grafiki
przeznaczonej do wykorzystania na stronach WWW, na przykad Adobe
Photoshop i Macromedia Fireworks).
Jest obsugiwana w 16 jzykach.
Mona tu zakupi palet Webmastera (w formie plakatu), nie wspominajc

o kilku adnych podkadkach pod mysz.
W tabeli 6.3 przedstawiono adresy URL kilku witryn internetowych, na ktrych znajdziesz palety kolorw.
186
Cz II Podstawy
Rysunek 6.7. Witryna VisiBone Webmasters Color Lab wywietla palet o 216 kolorach
Tabela 6.3. Palety kolorw
Witryna
Adres URL
ColorMaker
www.bagism.com/colormaker
TomaWeb HEX Color Pixer
colors.tomaweb.com
HTML Color Chooser
geocities.com/colorchooser
HTMLcolor
bluefive.pair.com/htmlcolor.htm
Kiras Web Toolbox
lightsphere.com/colors
Czy pojcie kolory bezpieczne dla WWW ma jeszcze jakie znaczenie?

Problem bezpiecznych kolorw dla WWW wynika z ogranicze kart graficznych, ktre wywietlaj
tylko 256 kolorw. Karty te s obecnie przestarzae, a karty graficzne sprzedawane wraz nowymi
komputerami rozrniaj miliony kolorw. Komputery wywietlajce ograniczon liczb kolorw
to przeytek i odeszy w niebyt podobnie jak dinozaury.
Chocia komputery wyposaone w takie karty nie s ju sprzedawane, wiele z nich jest cigle
uywanych. Nie wszyscy przecie unowoczeniaj sprzt komputerowy. Czsto firmy korzystaj
ze starych systemw komputerowych, ktre nie s w stanie konkurowa z nowymi produktami.
Podstawowe pytanie wszystkich projektantw witryn internetowych dotyczy docelowej grupy odbiorcw
witryny. Jeli zaley Ci na dobrych efektach, powiniene uywa bezpiecznych kolorw dla WWW,
aby kady uytkownik mg prawidowo wywietli Twoj stron. Inaczej stracisz cz odbiorcw
swojej witryny, a jeli ma ona charakter komercyjny to rwnie cz potencjalnych klientw.
187
Popularne formaty plikw graficznych

Najpopularniejsze formaty plikw graficznych uywanych w sieci WWW to:
Graphics Interchange Format (GIF),
Joint Photographic (JPEG/JPG),
Portable Network Graphics (PNG).
Przyjrzyjmy si im dokadniej.
Graphics Interchange Format (GIF)

Format GIF suy gwnie do zapisywania ikon, komiksw, logo i innych podobnych
rysunkw. Obsuguje 256 kolorw i przez pewien czas by najpopularniejszym formatem
do zapisywania obrazw. Zmienio si to w wyniku ujawnienia, e uywany w nim algorytm
kompresji danych, LZW (nazwany tak od inicjaw nazwisk trzech jego wsptwrcw
Lempela, Ziva i Welcha, ktrzy wymylili go w 1984 roku), jest opatentowany przez
firm Unisys i chroniony prawem autorskim. Format ten wci jest jednak obsugiwany
przez niemal wszystkie wspczesne przegldarki.
S dwie wersje plikw GIF:
GIF 87 to podstawowa, pierwotna wersja opracowana przez grup inynierw

z rnych firm zajmujcych si rozwojem oprogramowania. Jej rozwijanie
sponsorowaa firma CompuServe.
GIF 89a to wersja z obsug przezroczystoci, animacji i techniki przeplotu.
Przeplot polega na wczytywaniu serii przeplatajcych si linii obrazu. Powoduje to

zwikszanie jakoci grafiki w wyniku kilku odwiee, a efektem kocowym jest wywietlenie ostrego rysunku w penej rozdzielczoci.
Obrazy GIF bez przeplotu s wywietlane od razu w penej rozdzielczoci po jednym
wierszu od gry ekranu do momentu wczytania caego rysunku. Kady wiersz jest wyrany, jednak wywietlenie caego obrazu zajmuje sporo czasu.
Oba sposoby wczytywania plikw graficznych mog by czasochonne, a zaley to od
jakoci poczenia. Zalet obrazw GIF z przeplotem jest to, e umoliwiaj szybki podgld caej grafiki. Pozwala to odbiorcy ustali, czy chce czeka na wczytanie pozostaych
danych, czy woli pomin obraz.
Inny sposb na przyspieszenie podejmowania decyzji to uycie obrazw w niskiej
rozdzielczoci, co skraca wczytywanie strony. Jeli zawiera ona bardzo duy i dugo
wczytywany rysunek, warto przemyle dodanie jego wersji w niszej rozdzielczoci,
czyli kopii niskiej jakoci. Na przykad zamiast kolorowego rysunku mona uy wersji
czarno-biaej albo w skali szaroci. Z uwagi na mniejszy rozmiar plikw o niskiej rozdzielczoci czas ich pobierania jest duo krtszy.
188
Cz II Podstawy
W kodzie HTML mona okreli, e przegldarka ma wywietli obraz o niskiej rozdzielczoci w czasie wczytywania penej wersji. Dziki temu odwiedzajcy wie, na co
czeka. Obraz o niskiej rozdzielczoci mona wskaza za pomoc atrybutu lowsrc:
<IMG src="wielki_plik.gif" width="1200" height="800"
lowsrc="mala_wersja.gif">
Wersja o niskiej rozdzielczoci musi mie te same wymiary, co oryginalny obraz.

Jeli rysunki zajmuj inny obszar, pena wersja moe zosta znieksztacona.
Jednym ze sposobw na przyspieszenie wczytywania dokumentw jest uproszczenie

schematu kolorw. W tym celu naley ograniczy liczb barw wybranych z palety.
Przezroczyste obrazy GIF

Przezroczysto umoliwia stopienie rysunkw GIF z tem strony WWW. W przezroczystych obrazach GIF wybrany kolor nie jest widoczny, kiedy grafika pojawia si na
stronie. Zamiast niego uywane jest to strony.
Projektant moe wybra pomijany kolor na przykad za pomoc narzdzia Rdka
aplikacji Dreamweaver. Kolor ten staje si przezroczysty. Jeli rysunek przedstawia na
przykad hibiskusa na biaym tle, mona okreli, e przezroczyste ma by to tego
obrazu. Gdy umiecimy tak grafik na stronie, widoczny bdzie tylko kwiat na jej tle.
Animowane obrazy GIF

S to zwykle mae rysunki wywietlane po kolei w celu wywoania iluzji ruchu. Niektre
s przyjemne w odbiorze (na przykad polska flaga opoczca na wietrze), jednak przewanie irytuj uytkownikw (na przykad taczce bobasy), a efekt nowoci zwizany
z ruchem szybko przestaje dziaa. Stosowanie animacji moe zniechca internautw
do odwiedzin w witrynie. Po pewnym czasie ogldanie mapy hutajcej si na drzewie
lub umiechnitej twarzy w strasznych kolorach wyaniajcej si z rysunku soca staje
si mczce. Powiniene si cieszy, e ograniczenia techniczne nie pozwalaj przedstawi w ksice niektrych animacji tego typu. Jednak jeli jeste naprawd ciekawy
i chcesz je obejrze, znajdziesz je na licznych stronach, na przykad: www.animation
factory.com, http://harrythecat.com/dorret/ i www.gifanimations.com.
Przy podejmowaniu decyzji o umieszczeniu animowanego obrazu GIF na stronie
moesz posuy si praktyczn regu. Zastanw si, czy chciaby, aby dana animacja
(na przykad nieatrakcyjny taczcy bobas w pieluchach) zapada Ci na zawsze w pami.
Jeli odpowiesz przeczco, nie zmuszaj innych do ogldania grafiki. Jednak prawidowo
stosowane animowane obrazy GIF mog by skuteczne, a ponadto s przesyane duo
szybciej ni opisane w dalszej czci ksiki animacje flashowe.
189
Joint Photographic Experts Group (JPEG i JPG)

Zesp Joint Photographic Experts Group opracowa standard JPEG (JPG) w 1992 roku.
Format ten doskonale nadaje si do wywietlania zdj, poniewa odtwarza do 16,7 miliona kolorw (dla porwnania obrazy GIF maj maksymalnie 256 kolorw). Wielko
pliku mona kontrolowa za pomoc algorytmw kompresji, ktre okrelaj poziom
szczegw w kopii obrazu przesyanej przez Internet. Im wysza kompresja, tym wiksza
utrata jakoci nastpi przy odkodowaniu obrazu i wywietleniu go w przegldarce.
Kompresja przyspiesza przesyanie danych i jest uywana zarwno w formacie GIF, jak
i JPG. Pobieranie duych plikw trwa duej, co jest szczeglnie dotkliwe przy wolnych
czach. Kompresja zmniejsza rozmiar pliku i jako obrazu, ale te skraca czas wczytywania strony. Spadek jakoci obrazu to tak zwana strata. Rysunki bez kompresji to
obrazy bezstratne.
Format GIF duo lepiej nadaje si do kompresji prostych projektw graficznych i rysunkw
kreskowych. Algorytm dyskretnej transformaty falkowej uywany w formacie JPEG
doskonale nadaje si do zapisu zdj.
Pliki JPEG, podobnie jak rysunki GIF, mona wywietla w przegldarce przy uyciu
przeplotu. W obu formatach sprawia to, e obraz w czasie wczytywania staje si coraz
wyraniejszy.
Portable Network Graphics (PNG)

Format PNG zaprojektowano, aby poczy wiele zalet formatw JPG i GIF (bez problemw licencyjnych zwizanych z tym ostatnim). Ma on suy przede wszystkim do
przesyania grafiki przez Internet. PNG ma wszystkie funkcje formatu GIF (przeplot,
przezroczysto i animacje), a przy tym obsuguje tyle kolorw, co JPG (16,7 miliona).
Jednak w PNG, w odrnieniu od formatu JPG, uyto algorytmu bezstratnej kompresji
obrazu. Oznacza to, e przy przesyle pliku nie nastpuje utrata danych.
Wspczynnik kompresji w plikach PNG jest od 10 do 30% niszy ni w formacie GIF.
PNG to format kompresji bezstratnej, ktry dziaa dobrze przy duych blokach koloru.
Starsze przegldarki nie zawsze go obsuguj, jednak dostpne s wtyczki, ktre
umoliwiaj wywietlanie w nich rysunkw PNG.
Format PNG jest zgodny z filozofi otwartych standardw, specyficzn dla rozwoju
Internetu. Kiedy pojawi si w 1996 roku, nie by zbyt popularny z uwagi na syndrom
nowoci i brak zgodnoci ze starszymi wersjami popularnych przegldarek. Jednak
wraz z upywem czasu przestaje to by problemem, a zaawansowane moliwoci sprawiaj, e PNG jest bardzo atrakcyjnym formatem graficznym.
Ustawianie kolorw ta i tekstu

Pora na troch zabawy, jednak warto pamita o pewnym zastrzeeniu. Dowiesz si, jak
ustawi kolor ta w jzyku HTML 4.0 (ktry dziaa dobrze), jednak uyty do tego kod
jest przestarzay. Oznacza to, e w nieokrelonej, odlegej przyszoci przegldarki
190
Cz II Podstawy
mog przesta obsugiwa dany znacznik. Ale nie martw si przedstawiamy te now,
ulepszon technik, opart na stylach CSS.
Ustawianie koloru ta
Aby ustawi kolor ta w jzyku HTML 4.0, uyj nastpujcego kodu:
<body bgcolor="kolor">
Zamy, e chcesz uy czerwonego ta w witrynie Wszystko o mnie utworzonej

w rozdziale 5. Moesz je doda za pomoc poniszego polecenia:
<body bgcolor="red">
Z pewnoci potrafisz ju rozpozna, e bgcolor to atrybut znacznika <body>. Oczywicie

red to tylko jedna z wielu wartoci, ktre mona mu przypisa. Inne to green, yellow
i pozostae wartoci z palety 16,7 miliona kolorw. Jak ju wspomnielimy, nie musisz
pamita nazw wszystkich barw. Moesz uy te wartoci RGB lub szesnastkowych.
Liczba 16,7 miliona to odpowiednik 224.
Trjki RGB to trzybajtowe kody kolorw. Skadowe przyjmuj wartoci z nastpujcych przedziaw:
czerwony 0 255,
zielony 0 255,
niebieski 0 255.
Na przykad kolor zielony to rgb(0,255,0) lub w kodzie szesnastkowym #00ff00. Znak

kratki w tym kontekcie oznacza, e podana sekwencja to liczba w systemie szesnastkowym.
W kodzie HTML kolory te wygldaj nastpujco: <body bgcolor="rgb(0,255,0)"> lub
szesnastkowo <body bgcolor="#00ff00">.
Wyprbuj rne ustawienia na stronie. Poeksperymentuj i pobaw si przez chwil.
Kody w formacie RGB 0 255 znajdziesz w typowych paletach kolorw.
Kolor ta mona zmieni take za pomoc stylw CSS. Do ustawienia czerwonego ta

suy nastpujcy kod:
<body style="background-color: red">
Zwr uwag na sowo style w elemencie <body>. Zauwa, e cudzysowy obejmuj

ca par atrybut warto "background-color: red". Sowo style oznacza format opisu,
ktry informuje przegldark o tym, jak ma wywietli dany element. Tu kod ustawia
kolor ta strony na czerwony.
191
Okrelanie koloru tekstu

Aby ustawi kolor tekstu w jzyku HTML 4.0, naley uy nastpujcego kodu:
<body text="color">
Jednak znacznik ten jest przestarzay. W nowszej wersji jzyka HTML naley wpisa
poniszy kod:
<body style="color: #8a2be2">
Moliwe jest te ustawienie koloru ta i tekstu w jednej instrukcji:

<body style="color: #8a2be2; background-color: red">
Jako to moe posuy rysunek.
Dodawanie grafiki jako ta

Obrazki stanowice to strony WWW, podobnie jak kolor ta, mog poprawi ukad graficzny strony lub nie. Przyczyniaj si do uzupeniania zawartoci witryny i do lepszego
efektu wizualnego, a niewaciwie dobrane nie wiadcz dobrze o wraliwoci estetycznej
twrcy.
Poniszy kod ustawia jako to obraz zapisany w tym samym katalogu, w ktrym znajduje si strona:
<body background="bytebackground.gif">
Rysunek 6.8 pokazuje, jak uy obrazu jako ta strony Wszystko o mnie z rozdziau 5.
Niezliczone bezpatne obrazy znajdziesz w Internecie. Otwrz ulubion wyszukiwark
i poszukaj rysunkw ta, wygaszaczy ekranu i podobnych plikw. To widoczne na
rysunku 6.8 pochodzi ze strony www.freebackgrounds.com. Przy korzystaniu z grafiki
z sieci pamitaj o prawach autorskich.
Definiowanie wielkoci obrazkw wielokrotnie powielanych

Obrazek ta jest klonowany, dopki nie zapeni caego obszaru strony. Powiniene zwrci uwag na ostatni obrazek wywietlany w rzdzie. Na rysunku 6.9 przedstawiono to,
ktrego ostatni element zosta obcity.
Poniewa ludzie odwiedzajcy stron mog mie rne ustawienia ekranu, zawsze istnieje
ryzyko, e zostanie wywietlona strona z obcitym w poowie obrazkiem ta. Mona
temu do pewnego stopnia zapobiega.
Najczstsze obecnie ustawienia szerokoci ekranu to 800 pikseli i 1024 piksele (cho
w uytku wci s starsze komputery z monitorami o szerokoci 640 pikseli). Niektre
systemy potrafi wykorzysta rozdzielczo 1280, a nawet 1600 pikseli. Ekrany o takiej
szerokoci s coraz czciej spotykane z uwagi na rosnc popularno monitorw
panoramicznych. Wszystkie te rozdzielczoci s wielokrotnoci liczby 32, wic obrazki
o szerokoci 32 pikseli mieszcz si w caoci na ekranie.
192
Cz II Podstawy
Rysunek 6.8. Dodanie grafiki jako ta strony pozwala poprawi jej wygld
Jednak obrazek o wielkoci 32 pikseli czsto jest zbyt may, dlatego zdaniem wielu
projektantw naley rozway wykorzystanie obrazka o wielkoci 64 pikseli. Jednak jeli
szeroko ekranu wynosi 800 pikseli, to wzdu ekranu zmieci si 12,5 kopii obrazka.
Czasami po prostu trzeba akceptowa rozwizania nie w peni doskonae.
Wprowadzanie ta z bocznym motywem

Obrazki ta z bocznym motywem (ang. sidebar image) wymagaj zastosowania innej
taktyki. Jeden obrazek powinien zaj ca szeroko strony i jest powtarzany, dopki nie
zajmie caej przestrzeni strony w pionie.
Rysunek 6.10 przedstawia typowy obrazek ta z bocznym motywem, umieszczony na
stronie WWW.
Obrazek wykorzystany jako to zosta przedstawiony na rysunku 6.11. Na poprzednim
rysunku moge zaobserwowa, w jaki sposb go wykorzysta, by utworzy to strony
przypominajce kartk notesu.
Rysunek 6.9. Obrazek jest ucity po prawej stronie i na dole
Rysunek 6.10. Uzyskano adny efekt graficzny wzdu marginesu strony WWW
193
194
Cz II Podstawy
Rysunek 6.11. Ta z bocznym motywem zoone s z maych obrazkw uoonych ssiadujco w pionie
Obrazki ta z bocznym motywem naruszaj jedn z podstawowych zasad tworzenia

strony, gdy zdarza si, e przesaniaj tekst. Aby unikn takiej sytuacji, tekst na stronie naley umieszcza w tabeli lub elemencie DIV o odpowiednim stylu CSS, tak aby nie
zachodzi na motyw graficzny ta.
Tworzenie tabel omwiono w rozdziale 8.
Nieodpowiedni obrazek ta z bocznym motywem moe utrudni odczytanie zawartoci

strony WWW, tak jak przedstawiono to na rysunku 6.12. Problem powstaje, kiedy obrazek z bocznym motywem jest wszy ni strona i kolejne obrazki ssiaduj ze sob
w poziomie. Mona jednak unikn tej sytuacji.
Rysunek 6.12. Jeli obrazki ta z bocznym motywem s zbyt wskie, ssiaduj ze sob w poziomie
195
Problem ten pojawia si, jeli zapominamy, e uytkownicy uywaj komputerw o rnej rozdzielczoci ekranu. Obrazek, ktry wietnie wyglda na ekranie o wymiarach 800
na 600 pikseli, moe si kiepsko prezentowa przy rozdzielczoci 1024 na 768 pikseli.
Najlepiej jest wic uywa na tyle szerokich obrazkw ta, by wyglday dobrze przy
wszystkich rozdzielczociach ekranu, lub uy stylw CSS i wczy powielanie tylko
w pionie. Jeli przegldarka WWW bdzie musiaa wywietli zbyt szeroki obrazek, jego
kocwka zostanie po prostu obcita.
Oczywicie koniecznie przetestuj stron w kilku przegldarkach i na rnych komputerach, zamiast zakada, e witryna bdzie wyglda prawidowo!
Tworzc obrazki ta z bocznym motywem, pamitaj, by byy szerokie. Praktycznie
oznacza to, e typowy obrazek powinien mie co najmniej 1280, a nawet 1600 pikseli
szerokoci.
Obrazki ta bez widocznych spoin

W zasadzie najlepsz metod jest tworzenie ta z obrazkw, ktre ssiaduj z sob w taki
sposb, e nie mona rozrni poszczeglnych jego elementw. Warto zadba o to, by
uzyska efekt jednolitego ta, zamiast zbioru powtarzajcych si obrazkw. Przykad
przedstawilimy na rysunku 6.13.
Rysunek 6.13. Obraz jednolitego ta
Rysunek 6.14 przedstawia to, na ktrym mona wyrni poszczeglne obrazki. Jego
wygld pozostawia wiele do yczenia.
196
Cz II Podstawy
Rysunek 6.14. To zoone z obrazkw wyranie oddzielonych od siebie rozprasza uwag
Unikanie ta rozpraszajcego uwag

Inny problemem jest wykorzystywanie ta, ktre jest na tyle zoone, e odwraca uwag
od teksu i rysunkw. Na rysunku 6.15 przedstawiono przykad takiego ta.
Rysunek 6.15. Niektre obrazki ta nie harmonizuj z elementami strony
197
Uywaj obrazkw ta, ktre nie odwracaj uwagi od podstawowych elementw na stronie.
Wybr koloru i kontrastu

Jeeli kolor ta bdzie zbliony do koloru pooonego nad nim tekstu i obrazkw, odczytanie zawartoci strony jest niemoliwe. Zadziwiajce, jak czsto biay tekst jest
umieszczany na tym tle lub tekst purpurowy na czarnym tle. ycz Ci, by nie musia
nigdy odczytywa strony WWW z pomaraczowym tekstem umieszczonym na czerwonym
tle (zobacz rysunek 6.16).
Rysunek 6.16. Jeeli kolor ta jest zbliony do koloru pooonego nad nim teksu, trudno odczyta zawarto
strony. Nie zobaczysz kolorw na tej stronie, ale pewnie zdoasz oceni, e jest zupenie nieczytelna!
Dodawanie obrazkw do strony

Obrazki umieszcza si na stronie WWW za pomoc elementu IMG. Nazwa i pooenie
obrazka s okrelone w atrybucie src. Oto kod, ktry umoliwia wstawienie grafiki na
stronie WWW:
<IMG src="nazwapliku">
Jeli plik obrazka znajduje si w tym samym katalogu co strona WWW, taki zapis w zupenoci wystarcza. Wiele osb projektujcych witryny internetowe przechowuje jednak
obrazki w innym katalogu ni pliki HTML. W takiej sytuacji naley poda, oprcz nazwy
198
Cz II Podstawy
pliku obrazka, take ciek dostpu do tego pliku. Na przykad jeli przechowujesz obrazki w podkatalogu o nazwie obrazki i zamierzasz umieci na stronie WWW obrazek
o nazwie toster.jpg, musisz poda ciek dostpu do pliku z tym obrazkiem:
<IMG src="obrazki/toster.jpg">
Jeli plik obrazka znajduje si na innym serwerze WWW, konieczne bdzie podanie
penego adresu URL tego pliku, na przykad:
<IMG src="http://www.tujestobrazek.com/toster.jpg">
Informacje o adresach URL oraz adresowaniu plikw znajduj si w rozdziale 5.
Jeli umieszczasz na swojej stronie WWW cze do obrazka przechowywanego na innym

serwerze, uzyskaj na to pozwolenie. Wprowadzenie samego kodu to czynno banalna,
jednak trzeba pamita o dwch kwestiach:
Jest to niewygodne rozwizanie dla webmastera drugiego serwera, poniewa

zwiksza jego obcienie za kadym razem, kiedy jaka osoba przeglda
Twoj stron, serwer, na ktrym zosta umieszczony obrazek, musi przesa go
do przegldarki tej osoby.
Ponadto nie masz adnej kontroli nad zawartoci takiego serwera. Jeli
administrator wprowadzi zmiany w plikach, usunie plik obrazka, do ktrego
wiedzie cze lub serwer zostanie wyczony, Twoja strona nie bdzie
wywietlana prawidowo. Aby zagwarantowa prawidowe dziaanie strony,
najlepiej tworzy cza prowadzce do obrazkw przechowywanych w obrbie
wasnego systemu.
Manipulowanie obrazkami za pomoc stylw CSS

Cho strona Wszystko o mnie ma ju to, nie zawiera Twojego zdjcia. Znajd odpowiedni fotografi, przygotuj j i wyrwnaj na stronie.
Poniszy kod dodaje rysunek i wyrwnuje go do prawego marginesu:
<img src="mojaFotografia.jpg" align="right">
Zamiast tekstu mojaFotografia.jpg uyj nazwy pliku ze zdjciem.

Na potrzeby demonstracji na stronie Wszystko o mnie uyjemy zdjcia mamy Swena
z czasw jej modoci i wyrwnamy obraz do lewej. Efekt dziaania poniszego kodu
przedstawia rysunek 6.17:
<IMG src="MaryPickford.jpg" align=left>
Tak naprawd to Mary Pickford, jednak panie s do siebie podobne jak dwie
krople wody.
199
Rysunek 6.17. Zdjcie mamy Swena na stronie Wszystko o mnie jest teraz wyrwnane
do lewego marginesu
Wyrwnywanie obrazkw
Jak widziae w poprzednim przykadzie, w jzyku HTML w znaczniku rysunku mona
uy atrybutu align: <img src align="pozycja">. Atrybut ten moe mie rne wartoci. Tabela 6.4 przedstawia list przestarzaych znacznikw sucych do wyrwnywania obrazkw. Na razie jednak pozostaw zdjcie przy lewym lub prawym marginesie strony.
Na rysunku 6.17 tekst znajduje si po prawej stronie obrazka wyrwnanego do lewego
marginesu. Mona przenie tekst pod zdjcie, dodajc element <br /> bezporednio po
znaczniku <img>. Efekt tej operacji przedstawia rysunek 6.18:
Atrybut align w przypadku obrazka nie suy do okrelania pooenia obrazka,
lecz znajdujcego si wok niego tekstu.
200
Cz II Podstawy
Tabela 6.4. Pooenie tekstu wzgldem obrazka

Warto atrybutu align
Funkcja
absbottom
Dolna krawd obrazka zostanie wyrwnana do dolnej krawdzi

najwikszego elementu w linii.
absmiddle
Wyrwnanie rodka obrazka do najwikszego elementu linii.
baseline
Wyrwnanie linii tekstu do dolnej krawdzi obrazka.
bottom
Ta sama funkcja co baseline.
left
Obrazek zmienia pocztkowe pooenie, zostaje przeniesiony w wolne

miejsce przy lewym marginesie.
middle
Umieszczenie linii tekstu w poowie wysokoci obrazka.
right
Obrazek zostanie umieszczony przy prawym marginesie.
texttop
Grna krawd obrazka zostanie wyrwnana do grnej linii tekstu.
top
Ta sama funkcja co texttop.
Rysunek 6.18. Dodanie elementu <br /> bezporednio po znaczniku <img> oddziela obraz
od tekstu
201
Jeli chcesz umieci tekst obok obrazka, moesz zmieni odlego midzy nimi przy uyciu
atrybutw hspace i vspace. Pierwszy z nich okrela margines z bokw grafiki. Na rysunku
6.19 jego warto to 30 pikseli, a atrybut vspace jest ustawiony na 60 pikseli, co tworzy
margines wok grnej i dolnej krawdzi zdjcia. Podobny efekt mona uzyska za pomoc
stylw CSS: padding, padding-left, padding-right, padding-top i padding-bottom.
Rysunek 6.19. Atrybuty hspace i vspace pozwalaj doda odstpy midzy tekstem a rysunkiem
Atrybut hspace wprowadza dodatkowe odstpy zarwno z prawej, jak i lewej strony obrazka. Podobnie atrybut vspace wprowadza dodatkowe wolne miejsce jednoczenie nad
i pod obrazkiem. Nie mona wprowadzi rnych odstpw z lewej i prawej strony obrazka
lub nad nim i pod nim w wersji Transitional jzyka HTML.
Pozycj rysunku mona okreli take za pomoc atrybutu float. Tekst znajduje si
wtedy wok obrazka. Za pomoc tego atrybutu mona umieci rysunek przy lewym
lub prawym marginesie strony i otoczy go tekstem. Efekt dziaania poniszego kodu
przedstawia rysunek 6.20:
<img src="imgxyz.jpg" style="float: right">
Zwr uwag na uycie elementu style w poprzednim fragmencie. Style opisuj sposb
wywietlania elementu na stronie. Wicej przykadw ich zastosowania znajdziesz
w omwieniu jzyka CSS w rozdziale 12.
202
Cz II Podstawy
Rysunek 6.20. Tekst otacza rysunek umieszczony przy prawym marginesie
Atrybut clear zapobiega wywietlaniu tekstu obok obrazka, a jego uycie przedstawia
rysunek 6.21. Podany efekt zapewnia poniszy kod:
<HR align=left width="97%" color=blue SIZE=6 style="clear:right">
Rysunek 6.21. Tekst i nagwek znalazy si pod obrazkiem
203
Cho wiele osb projektujcych strony WWW wykorzystuje obrazki jak elementy blokowe, a przecie s one elementami wewntrzwierszowymi, podobnie jak kursywa lub
pogrubienie (elementy B oraz I). Dziki tej waciwoci mona wstawia obrazki wewntrz wiersza, tak jakby stanowiy jedno ze sw w zdaniu.
Wicej informacji zwizanych z elementami blokowymi i liniowymi znajdziesz
w rozdziale 4.
Oczywicie, umieszczanie obrazkw w rodku zdania nastrcza trudnoci ze wzgldu

na ich wielko (obrazki s zazwyczaj wiksze od wpisywanego tekstu). Na rysunku
6.22 pokazano, jak duy obrazek zakca naturalny ukad akapitu.
Rysunek 6.22. Due obrazki doczane w rodku akapitu burz jego ukad
Maych obrazkw, nazywanych ikonami, czsto uywa si w tym samym wierszu co tekst.
Jednoczesne rozmieszczanie kilku obrazkw

Jeli umieszczamy w jednej linii wicej ni jeden obrazek, definiowanie wzajemnego
ich pooenia i tekstu staje si duo trudniejsze. Wartoci atrybutu align wpywaj na
ustawienie tekstu poprzedzajcego obrazek i tekstu nastpujcego po obrazku. Dziki
przedstawionemu kodowi linia tekstu zostanie wyrwnana do grnej krawdzi pierwszego
obrazka i jednoczenie do dolnej krawdzi drugiego obrazka.
<p>Sprbuj naszych warzyw<IMG src="assorted_vegetables.jpg" width="200" height="244"
align="texttop"> i przepysznej babki! <IMG src="cake.jpg"
width="150" height="142" align="bottom">Lepszych nie znajdziesz nigdzie.</p>
Tekst zosta wyrwnany do grnej krawdzi pierwszego obrazka i jednoczenie do dolnej

krawdzi drugiego. Oznacza to, e pierwszy rysunek znajdzie si w dolnej czci strony,
jak to zostao przedstawione na rysunku 6.23.
204
Cz II Podstawy
Rysunek 6.23. Trudno umieci kilka obrazkw w jednej linii tekstu
Dodawanie marginesw
Marginesy dookoa rysunku mona precyzyjnie ustawi za pomoc czterech stylw:
margin-top: liczba pikseli, margin-right: liczba pikseli, margin-bottom: liczba
pikseli, margin-left: liczba pikseli. Mona w ten sposb okreli odlego rysunkw
od innych elementw.
Poniszy kod dodaje margines o szerokoci 10 pikseli wok wszystkich krawdzi
rysunku:
<img src="imgxyz.jpg" style="float: right; margin: 10">
Aby marginesy dolny i grny miay szeroko 10 pikseli, a lewy i prawy 20 pikseli,
naley uy kodu margin: 10, 20.
Uycie trzech wartoci spowoduje dodanie marginesw u gry, z prawej strony i u dou
rysunku.
Jeli chcesz, aby obrazek nachodzi na inne elementy, moesz uy wartoci
ujemnych w stylach margin.
Okrelanie gruboci ramki

Umieszczanie obrazkw przeznaczonych na strony WWW w ramkach, w przeciwiestwie
do pcien sawnych malarzy, nie jest konieczne, ale stanowi dodatkow moliwo.
Obrazki cyfrowe s w tym wzgldzie podobne do zdj czasami lepiej wygldaj
205
z ramk, a czasami bez. Doczanie ramek do obrazkw nie jest obowizkowe i dlatego
wiele osb projektujcych strony WWW umieszcza na stronach WWW obrazki pozbawione ramek. Jeli jednak wykorzystuje si obrazki do tworzenia odnonikw, warto
umieszcza je w ramkach.
Rysunek 6.24 przedstawia dwa obrazki, ktre nie posiadaj ramek. Jeden z nich spenia
funkcj cza. Nic nie wskazuje na rnic midzy tymi obrazkami.
Rysunek 6.24. Obrazki bez ramek ktry z nich jest czem?
Rysunek 6.25 przedstawia dwa obrazki z poprzedniego przykadu, tym razem z doczonymi ramkami. Zwyky obrazek jest wyposaony w czarn ramk, natomiast penicy funkcj poczenia w ramk niebiesk. Wizualna rnica to take wskazwka dla
osb odwiedzajcych witryn, e jeden z obrazkw peni specjaln funkcj. Moesz
take zdecydowa si na inne rozwizanie na przykad bdziesz pozostawia zwyke
obrazki bez ramek, a ramki dodawa tylko do obrazkw penicych funkcj czy. Jeli
nie podobaj Ci si ramki wok obrazkw dziaajcych jak odnoniki, moesz ustawi
atrybut szerokoci obramowania na zero: ="border-width:0". Najwaniejsze, by na
stronie WWW wyrni obrazki stanowice cza.
Poniszy kod dodaje ramk wok odnonika w formie rysunku:
<IMG src="imagelink.jpg" width="200" height="244" border="3"
alt="imagelink">
Niebieski kolor ramki obrazka stanowicego cze i czarny kolor ramki zwykego
obrazka speniaj t sam funkcj, co standardowe kolory tekstu na stronie. Zwyky
tekst jest domylnie wywietlany czcionk czarn, natomiast tekst czy ma kolor
niebieski (zobacz rozdzia 5.). Domylnie wybrany kolor dla tekstu i czy bdzie tak
samo stosowany w ramkach wok obrazkw. Na przykad jeli wprowadzisz domylny
kolor czerwony dla tekstu i zielony dla czy, zwyke obrazki bd otoczone czerwon
ramk, natomiast obrazki speniajce funkcj czy bd wywietlane w ramce zielonej.
206
Cz II Podstawy
Rysunek 6.25. Ramka wok obrazka penicego funkcj cza posiada inny kolor ni ramka
zwykego obrazka (cho trudno to dostrzec na czarno-biaym rysunku)
Niektrzy projektanci stron WWW nie uywaj ramek nawet dla obrazkw stanowicych cza. Decyzj naley podj wedug wasnego uznania. Jeli obrazek nie zostanie
wyrniony (nie bdzie posiada ramki), w jaki sposb uytkownik rozpozna, e stanowi on
poczenie do okrelonego zasobu? Osoby przegldajce strony WWW otrzymuj dwie dodatkowe wskazwki. Po pierwsze, wskanik myszy zmienia ksztat po przesuniciu nad obszar
cza, zwyka strzaka zamienia si w symbol doni. Po drugie, po przesuniciu wskanika
myszy nad cze, jego adres URL pojawia si w dolnym pasku okna przegldarki.
Wytrawni internauci nie potrzebuj ramek wok obrazkw, by zorientowa si, ktre
z nich to cza. Wiedz, e wystarczy umieci wskanik myszy nad obrazkiem. Oznacza to jednak, e musz nasun wskanik myszy po kolei nad wszystkie obrazki, by
sprawdzi, ktry z nich peni funkcj cza. Jeli projekt graficzny Twojej witryny
umoliwia wstawianie ramek wok obrazkw, takie rozwizanie uatwia nawigacj
wrd jej zasobw.
Okrelanie rozmiaru rysunkw

Okrelanie wielkoci rysunkw jest zarazem proste i skomplikowane. Zmniejszanie obrazkw jest atwe wystarczy okreli atrybuty height i width w znaczniku <img src>:
<IMG src="MaryPickford.jpg" align=left vspace="0" hspace="10"
width="50" height="100" style="float: right; margin: 10;">
207
Obrazek zostanie wywietlony zgodnie z wartociami atrybutw height i width, co ilustruje rysunek 6.26. Wielko pliku pozostanie jednak taka sama. Dlatego aby przyspieszy
pobieranie danych, naley zmniejszy pierwotny plik graficzny. Mona uy do tego jednego z narzdzi do edycji rysunkw: Xary, Corela lub Photoshopa.
Rysunek 6.26. Moesz zmniejszy wymiary rysunku na stronie, nie spowoduje to jednak
zmniejszenia wielkoci pliku
Wicej informacji o popularnych narzdziach do edycji rysunkw znajdziesz w rozdziale 2.
Wykorzystywanie atrybutw height i width

Czy zauwaye, e kiedy przegldarka pobiera stron WWW, tekst pojawia si od razu,
natomiast obrazki z pewnym opnieniem (czas oczekiwania zaley od wielkoci pliku
z obrazkiem). Jeli przegldarka nie wie, jaka jest szeroko i wysoko obrazka, nie potrafi okreli, ile powinna przeznaczy dla niego miejsca, zanim zostanie on zaadowany.
Oznacza to, e dopiero kiedy obrazek zostanie pobrany, ukad tekstu jest na nowo dopasowywany do strony. Mona tego unikn poprzez zdefiniowanie w kodzie HTML wysokoci i szerokoci obrazka:
<IMG src="toster.jpg" width="200" height="234">
Jeli korzystasz z programu wspomagajcego projektowanie stron WWW, na przykad

Dreamweaver lub HTML-Kit, pamitaj, e dodaj one automatycznie informacj
o wysokoci i szerokoci obrazka w momencie, gdy jest on umieszczany
na projektowanej stronie.
208
Cz II Podstawy
Atrybuty width (szeroko) i height (wysoko) su do okrelania szerokoci i wysokoci

obrazka wywietlanego na stronie WWW. Parametry obrazka mona zmieni poprzez
nadanie odpowiednich wartoci tym atrybutom. Na przykad jeli chciaby wywietli
obrazek z poprzedniego przykadu, ale dwukrotnie mniejszy, wprowad kod:
Aby dwukrotnie powikszy obrazek, wpisz w kodzie rdowym:

Mona te uy atrybutw width="50%" i width="200%", aby utworzy dwa razy mniejsz

i dwa razy wiksz wersj rysunku.
Na rysunku 6.27 przedstawiono pierwotn wielko obrazka, obrazek dwa razy mniejszy
i dwa razy wikszy.
Rysunek 6.27. Wielko obrazka mona zmienia za pomoc atrybutw width i height
Przy dwukrotnym powikszeniu obrazka ujawnia si jego rastrowa struktura. To efekt

uboczny powikszania obrazkw. Warto pamita, e zmiana waciwoci obrazka dotyczy tylko sposobu jego wywietlania na stronie WWW, a nie waciwoci samego pliku.
Przegldarki WWW nie mog zmienia atrybutw obrazkw. Jeli chciaby powikszy
obrazek, minimalizujc efekty uboczne, powiniene skorzysta z profesjonalnego programu
graficznego, takiego jak Photoshop lub Fireworks.
Staralimy si, aby stosunek szerokoci do wysokoci obrazkw nie zmieni si
przy modyfikowaniu ich wymiarw, ale celowo zmieniajc proporcje, mona uzyska
niestandardowe efekty.
209
Rozwizywanie problemw z obrazkami

Podczas pracy z obrazkami zwyke metody wykorzystania kodu HTML czasem nie s
uyteczne, na przykad w przypadku umieszczania na stronie wielu duych obrazkw
lub uywania niestandardowych krojw czcionek.
Wykorzystywanie miniaturek obrazkw

Miniaturki to mae obrazki, ktre z uwagi na ich niewielki rozmiar mona szybko
wczyta. Dziaaj one jak odnoniki do powizanych stron. Na przykad na stronie
z ofertami sprzeday samochodw mog znajdowa si miniaturki poszczeglnych
pojazdw. Uytkownik moe klikn miniaturk wybranego modelu i przej bezporednio
do nastpnej strony, ktra zawiera wiksze zdjcie samochodu i dodatkowe informacje na
jego temat.
Moesz te przygotowa miniaturki przedstawiajce czonkw rodziny i uy ich jako
odnonikw do stron powiconych poszczeglnym osobom.
Jest wiele programw do tworzenia miniaturek. Witryna Google oraz strony www.
download.com i www.tucows.com to dobre miejsca do poszukiwania popularnych
aplikacji freeware i shareware. Pamitaj, aby zawsze pobiera programy ze sprawdzonych rde.
W niektrych przypadkach trzeba docza do strony WWW wiele duych plikw graficznych. Czy mona w inny sposb zaprojektowa witryn galerii sztuki? Raczej nie.
Jednak nie wolno oczekiwa od osb odwiedzajcych witryn, e zgodz si dugo wyczekiwa na zaadowanie strony z jej wszystkimi obrazkami.
Miniaturki to po prostu odnoniki w formie bardzo maych wersji duych rysunkw.
Przykadow stron z miniaturkami obrazkw przedstawiono na rysunku 6.28.
Rysunek 6.28. Miniaturki usprawniaj dziaanie stron z du liczb obrazkw
210
Cz II Podstawy
Wok miniaturek zobaczysz niebiesk ramk, ktra okrela, e dany rysunek

to odnonik.
Strona z miniaturkami oryginalnych obrazkw zostanie szybko zaadowana, a osoba odwiedzajca witryn bdzie moga zdecydowa, czy chce czeka na wczytanie penej wersji.
Jeli tak, kliknie odnonik i pjdzie przygotowa sobie drugie niadanie. Jeli nie,
przejdzie do nastpnej miniaturki.
Osadzanie na stronie specjalnych krojw czcionek

Trzy gwne kroje czcionek, wykorzystywane na stronach WWW (Arial, Times New
Roman i Courier), wietnie speniaj swoj rol, lecz zdarza si, e wymagania projektu
artystycznego s duo wiksze. Przez lata opracowywano efektywn metod wykorzystania na stronie WWW wielu rodzajw czcionek. Jednym ze sposobw jest stosowanie
podstawowego zestawu czcionek, a w przypadku gdy uytkownik Internetu nie posiada
czcionki uywanej na stronie, musi j pobra. Jak mona si domyli, pobieranie czcionki
wydua czas wywietlania strony w oknie przegldarki. Pomys ten by z gry skazany
na porak, gdy uytkownicy Internetu niechtnie akceptuj dugi czas pobierania
strony WWW.
Wicej informacji zwizanych z wybieraniem czcionek znajdziesz w rozdziale 7.
Co zrobi, jeli chciaby wykorzysta jedn ze swoich efektownych czcionek? Moesz

doczy j do obrazka za pomoc programu graficznego, a nastpnie doda obrazek do
strony WWW (zobacz rysunek 6.29).
Rysunek 6.29. W tekcie doczonym do obrazka mona wykorzysta dowoln czcionk.

Zauwa, e rysunek ten mona wywietli przez kliknicie miniaturki, takiej jak na rysunku 6.28
211
Nieco innym rozwizaniem, ale niewymagajcym wizania tekstu z obrazkiem, jest zapisywanie tekstu w formacie graficznym. Dobry program graficzny pozwala Ci na stronie
WWW uy dowolnej czcionki i wybranego koloru. W ten sposb mona take dodawa
tekstury i uzyskiwa specjalne efekty.
Nie zalecamy jednak tego podejcia. Lepiej jest uy arkusza stylw i poda w nim
preferowan czcionk i zastpnik, ktrego przegldarka uywa, jeli wybrany zestaw
nie jest dostpny.
Tworzenie grafiki zostao szerzej omwione w rozdziale 11.
W ten sposb mona take tworzy fantazyjne, wielkie litery rozpoczynajce akapit
(inicjay), technik wykorzystywan czsto w ksikach. Rysunek 6.30 przedstawia
przykad zastosowania takiego efektu na stronie WWW.
Rysunek 6.30.
Wielkie litery
mog si sta
ozdobnikiem
w tekcie
Krtki przegld
Ponisza lista przedstawia fragmenty kodu zwizane z zagadnieniami opisanymi
w rozdziale.
Ustawianie koloru ta w jzyku HTML 4.0:

<body bgcolor="kolor">
Ustawianie koloru ta za pomoc stylw CSS:

<body style="background-color: red">
212
Cz II Podstawy
Okrelanie kolorw w notacji RGB:

<body bgcolor="rgb(0,255,0)">
Okrelanie kolorw w notacji szesnastkowej:

<body bgcolor="#00ff00">
Okrelanie koloru ta i tekstu za pomoc stylw:

<body style="color: #8a2be2; background-color: red">
Uywanie rysunkw z lokalnego katalogu jako ta:

<body background="bytebackground.gif">
Wyrwnywanie do marginesu w jzyku

<img src="myPhoto.jpg" align="right">
HTML:
Dodawanie marginesw wok obrazka:

<style="margin-bottom: 10">
Okrelanie wielkoci rysunku:

<img src="myPhoto.jpg" height="250" width="250">
Usuwanie tekstu wok obrazka w jzyku HTML:

<br />
Uywanie stylw do wyrwnania obrazka i okrelenia jego rozmiaru:

<img src="MaryPickford.jpg" align=left vspace="0" hspace="10"
width="50" height="100" style="float: right; margin: 10;">
Podsumowanie
Kolor to kluczowa cecha stron. Prawidowy dobr barw wyznacza sukces lub porak
witryny. Rwnie istotne s rysunki. Odpowiednie obrazki wpywaj zarwno na wygld, jak i funkcjonalno witryny.
Na pocztku rozdziau opisalimy ustawianie koloru ta, tekstu i odnonikw. Poznae
cechy barw: komplementarno, kontrast i koordynacj (harmoni). Dowiedziae si,
czym jest koo i temperatura kolorw. Wiesz te, w jakich witrynach szuka informacji
z zakresu teorii kolorw.
Omwilimy rwnie zapis kolorw za pomoc systemu szesnastkowego i kodw RGB.
Poznae rne narzdzia zwizane z barwami: koo kolorw, palet kolorw i zestaw
odcieni bezpiecznych dla WWW.
Ponadto opisalimy gwne cechy trzech najpopularniejszych formatw graficznych.
Rysunki GIF maj do 256 kolorw i s obsugiwane przez prawie wszystkie przegldarki. Jest to format kompresowany z obsug przezroczystoci. Nie nadaje si zbyt dobrze do zapisu zdj i wykorzystano w nim opatentowany algorytm kompresji. Dowiedziae si, jak tchn ycie w statyczne strony WWW za pomoc przezroczystych
i animowanych rysunkw GIF. JPG to doskonay format do zapisu zdj. Take umoliwia
213
kompresj (czasem pliki JPG s mniejsze od ich odpowiednikw w formacie GIF), ale
nie obsuguje przezroczystoci. PNG ma zalety obu poprzednich formatw: 16,7 milionw kolorw (tak jak JPG), przezroczysto (tak jak GIF), otwarte algorytmy kompresji
i obsug w coraz wikszej liczbie przegldarek. Problemem jest natomiast zgodno ze
starszymi wersjami przegldarek.
Poznae sposb wywietlania rysunkw w przegldarkach i zalety rnych rodzajw
obrazkw. Grafika bez przeplotu powoduje wywietlanie linia po linii wyranego rysunku. Przy pobieraniu obrazkw z przeplotem wywietlane s w seriach wybrane linie,
co stopniowo prowadzi do poprawy jakoci rysunku. Dowiedziae si, jak szybko
wywietla grafik za pomoc obrazkw o niskiej rozdzielczoci.
W rozdziale znalazy si te przykady ilustrujce dodawanie kolorw do witryny.
Poznae wygodny sposb oparty na jzyku HTML i metod ustawiania atrybutw
w stylach CSS. Wiesz ju take, jak pobra rysunki i wywietli je w witrynie.
Zobaczye, jak umieci obrazki przy lewym i prawym marginesie za pomoc standardowego kodu HTML i nowszego formatowania przy uyciu stylw. Pokazalimy Ci, jak
otoczy rysunek tekstem, a take jak usun tre z bokw obrazka, uywajc znacznika
<br /> lub stylu clear. Dowiedziae si, jak dodawa do rysunkw marginesy i ramki.
Ponadto omwilimy umieszczanie wielu rysunkw przy lewym i prawym marginesie
za pomoc standardowego kodu HTML i nowszej techniki opartej na stylach. Zobaczye
te, jak uy obu tych podej do zmiany wielkoci obrazkw.
Na zakoczenie dowiedziae si, jak uy miniaturek, aby ekonomicznie wykorzysta
przestrze strony i przepustowo cza. Poznae te techniki osadzania czcionek
w rysunkach.
W rozdziale 7. omawiamy formatowanie tekstu.

Tworzenie Stron WWW. Biblia. Wydanie III

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tworzenie Stron WWW. Biblia. Wydanie III

Uploaded by

Copyright:

Available Formats

Tworzenie stron WWW.

Biblia. Wydanie III

Poznaj najwiksze sekrety tworzenia stron WWW i rozkr wasny e-biznes!

Zaprojektuj, zbuduj, zarabiaj!

Tworzenie stron WWW. Biblia

Programy do zaawansowanej edycji tekstu .................................................................................129

Tworzenie stron WWW. Biblia

Cz III Projektowanie zaawansowane ..................................... 245

Tworzenie stron WWW. Biblia

Cz IV Profesjonalny wygld ................................................... 357

Tworzenie animacji za pomoc Flasha .............................................................................................371

Tworzenie stron WWW. Biblia

Obiekty w JavaScript ........................................................................................................................504

Cz V Krok w przyszo: XHTML, XML i Ajax ........................... 549

Tworzenie stron WWW. Biblia

Cz VI Grafika w sieci WWW ..................................................... 635

Cz VII E-biznes ......................................................................... 665

Tworzenie stron WWW. Biblia

Wymiana banerw ......................................................................................................................729

Cz VIII Uaktualnianie witryny ................................................. 751

Tworzenie stron WWW. Biblia

Okrelanie atrybutw koloru

Zasada trzech k: komplementarno, kontrast i koordynacja

Nazwy i kody szesnastkowe kolorw

Popularne formaty plikw graficznych

Ustawianie kolorw ta i tekstu

Dodawanie grafiki jako ta

Dodawanie obrazkw do strony

Okrelanie rozmiaru rysunkw

Rozwizywanie problemw z obrazkami

Kolory s jedn z najwaniejszych rzeczy, na jakie naley zwrci uwag w trakcie

albo osoby odwiedzajce Twoj witryn polec j innym i same na ni powrc,

albo witryna stanie si przykadem ilustrujcym, czego nie naley robi.

W tym rozdziale omawiamy kwesti definiowania atrybutw kolorw w kodzie HTML

Okrelanie atrybutw koloru

Zmienianie ustawie kolorw

Rozdzia 6. Kolor i rysunki na stronach WWW

Wybr koloru tekstu

Okrelanie koloru czy

Zasada trzech k: komplementarno,

kolory komplementarne, czyli wzajemnie si uzupeniajce, wywouj mie

Rozdzia 6. Kolor i rysunki na stronach WWW

kolory kontrastowe wyrniaj poszczeglne elementy strony,

koordynacja, harmonia kolorw na kolejnych stronach witryny wzmacnia dobre

Wybr kolorw komplementarnych

W najwszym tego sowa znaczeniu kolorami komplementarnymi s dwa kolory,

Kolorami analogicznymi s dwa kolory, ktre znajduj si tu obok siebie na kole

Dobr odpowiedniego kontrastu

Koordynacja schematu kolorw

Rozdzia 6. Kolor i rysunki na stronach WWW

Wprowadzenie do temperatury kolorw

The 16,777,216 Colors of the Web

Web Color Reference

Nazwy i kody szesnastkowe kolorw

Rozdzia 6. Kolor i rysunki na stronach WWW

Kody RGB kolorw

biay (czerwony, niebieski i zielony),

czarny (brak czerwonego, brak niebieskiego i brak zielonego),

jasnozielony (cho oficjalna nazwa tego koloru w HTML to Lime,

Tabela 6.2. Wybrane nazwy kolorw w HTML

Paleta bezpiecznych kolorw

Rozdzia 6. Kolor i rysunki na stronach WWW

Strona VisiBone Webmasters Color Lab, dostpna pod adresem http://www.visibone.com/