IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Projektowanie stron
WWW. Jak to zrobi?
Autorzy: Robin Williams, John Tollet
Tumaczenie: Sawomir Dzieniszewski (rozdz. 1 - 8),
ukasz Koodziej (rozdz. 9), Sebastian Marek
(rozdz. 10 - 13, dod. A)
ISBN: 83-7361-234-3
Tytu oryginau: The Non-Designer's Web Book, 2nd Edition
Format: B5, stron: 300
Gdyby tworzenie stron internetowych byo zarezerwowane jedynie dla profesjonalistw,
internet wieciby pustkami. Kady, rwnie Ty, moe sprbowa swoich si
w projektowaniu stron. By moe Twoja witryna bdzie niezbyt skomplikowana i mniej
rozbudowana, ni strony tworzone przez zawodowcw, ale to nie znaczy, e musi by
nieatrakcyjna i niefunkcjonalna.
W ksice Projektowanie stron WWW. Jak to zrobi? Robin Williams przekazuje
amatorom tworzenia stron internetowych ca wiedz, niezbdn by zaistnie w sieci.
Nie jest to podrcznik HTML-a jakich wiele: znajdziesz tu komplet informacji
potrzebnych do stworzenia strony, ktrej nie bdziesz musia si wstydzi, a wic
take wskazwki dotyczce tworzenia ukadu strony, grafiki, umieszczania strony
na serwerze i jej promocji. A wszystko to podane przystpnie i prosto.
Dziki ksice dowiesz si:
Jak korzysta z moliwoci internetu i wyszukiwa w nim informacje
Gdzie szuka miejsca, w ktrym umieci witryn
Czym rni si publikacje internetowe od klasycznych drukowanych
Jakie s podstawowe zasady projektowania, ktre musz zna nawet
pocztkujcy
Na czym polega projektowanie systemu nawigacji po stronach internetowych
Jak tworzy grafik na potrzeby stron WWW
Jak waciwie dobra krj pisma
Jakie sztuczki moesz zastosowa, by uatrakcyjni stron
Jak przesa swoj stron na serwer
Jakie s metody promocji gotowej witryny WWW
Wieloletnie dowiadczenie Robin Williams i jej wyjtkowy styl, trafiajcy w potrzeby
osb bez specjalistycznego przygotowania sprawi, e nauka projektowania stron
stanie si satysfakcjonujc przygod.
Jeli dopiero rozpoczynasz zabaw z tworzeniem stron internetowych
zacznij odtej ksiki.

Proj_Stron_WWW_R00.qxd

17-12-03

21:29

Page 5

Spis treci
Wprowadzenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Cz pierwsza: Korzystanie z sieci WWW

1

Czym jest sie WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Modemy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Prdkoci modemw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Usugi online i dostawcy usug internetowych . . . . . . . . . . . . . . . . . . . . . . 19
Co mona znale w internecie? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Sie WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Orientowanie si w sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Przegldarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Przegldarka przegldarce nierwna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Adresy internetowe, czyli inaczej adresy URL . . . . . . . . . . . . . . . . . . . . . . . 25
Wprowadzanie adresu URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Wicej o nazwach domen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Wicej o adresach URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Co to takiego dodatki? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Ktry plikcign? (.sit .hqx .bin .sea .zip .mme) . . . . . . . . . . . . . . . . . . . . 29
Usuga online czy dostawca usug internetowych? . . . . . . . . . . . . . . . . . . . 30
Komercyjna usuga online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Dostawca usug internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . . 31
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Przeszukiwanie internetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Przeszukiwanie internetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Katalogi internetowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Yahoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Kolejna dobra strona Yahoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Wyszukiwarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Czytaj wskazwki! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Wicej informacji na temat
sposobw przeszukiwania internetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Adresy uatwiajce wyszukiwanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Nie ograniczajcie si tylko do tych narzdzi . . . . . . . . . . . . . . . . . . . . . . . . . 43
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Proj_Stron_WWW_R00.qxd

17-12-03

21:29

Page 6

Cz druga: Tworzenie stron WWW

3

Czym waciwie s strony WWW?

Co warto wiedzie zanim zaczniemy

tworzy wasn witryn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . . . 47
Czym s strony WWW? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Jak tworzy si stron WWW? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
To wcale nie takie trudne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Akapit a kod Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Zmienianie kolorw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Tworzenie czy internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Tworzenie cza pocztowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Dodawanie grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Tworzenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Absolutna i relatywna szeroko tabeli . . . . . . . . . . . . . . . . . . . . . . . . . 62
Czym s ramki? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Samodzielne pisanie kodu HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Tworzenie kolejnych stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Co dalej? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . . 67
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Organizowanie plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Organizowanie plikw z pomoc folderw . . . . . . . . . . . . . . . . . . . . . . 70
Organizowanie plikw za pomoc nazw . . . . . . . . . . . . . . . . . . . . . . . . 70
Wymogi nazywania plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Zachowywanie stron i nadawanie im tytuw . . . . . . . . . . . . . . . . . . . . . . 72
Co tak naprawd robi przegldarka? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Co to jest serwer WWW? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Jak znale serwer WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Opaty za goszczenie stron internetowych . . . . . . . . . . . . . . . . . . . . . . 77
O co naley pyta waciciela serwera WWW . . . . . . . . . . . . . . . . . . . . 78
Nazwa domeny i reszta twojego adresu URL . . . . . . . . . . . . . . . . . . . . . . . . 79
Wasna domena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Serwery wirtualne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Wstpne planowanie witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Do kogo witryna jest adresowana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Przygotowanie wstpnego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Zbieranie i porzdkowanie materiaw . . . . . . . . . . . . . . . . . . . . . . . . . 82
Zachowywanie materiaw roboczych . . . . . . . . . . . . . . . . . . . . . . . . . 82
Lista czynnoci wstpnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . . 85
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Cz trzecia: Projektowanie publikacji WWW

5

Publikacje drukowane a publikacje w sieci WWW

. . . . . . 89
Koszty publikacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Kolor! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Poprawki, aktualizacje i archiwizowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Rozprowadzanie informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Proj_Stron_WWW_R00.qxd

17-12-03

21:29

Page 7

Kontakt z klientem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
wiat informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Rozmiar plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Dwik i animacje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Rozmiary i dostpno informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Miejsce zamieszkania projektanta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Zalety wydawnictw drukowanych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 103
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Podstawowe zasady projektowania

. . . . . . . . . . . . . . . . . . . 105
Wyrwnanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Blisko . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Akapit a kod Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Powtrzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Tworzenie punktu koncentracji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Ortografia! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
czenie rnych technik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 123
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Projektowanie interfejsu i systemu nawigowania

. . . . 125
Zacznijmy od prostego planu witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Formatowanie strony w poziomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Standardowy rozmiar strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Projektowanie systemu nawigowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Style nawigowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Nawigowanie a ramki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Powtarzalno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Gdzie si znajdujemy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Wicej ni jeden sposb nawigowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Tematyka witryny narzuca styl systemu nawigowania . . . . . . . . . . . . . . 138
Indeks zawartoci lub mapa witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Ostrone korzystanie z czy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Naley unika tworzenia irytujcych cz . . . . . . . . . . . . . . . . . . . . . . 141
Uczmy si od innych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 143
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Jak odrni dobry projekt od zego . . . . . . . . . . . . . . . . . . . 145

Ze projekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Dobre projekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Lista kontrolna zych pomysw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Lista kontrolna dobrych pomysw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Cz czwarta: Kolory, grafika i czcionki

9

Kolory w internecie

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Estetyka koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Kolory CMYK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Kolory RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Kolory indeksowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Proj_Stron_WWW_R00.qxd

17-12-03

21:29

Page 8

Gbia kolorw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Rozdzielczo monitora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Rozdzielczo ilustracji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Bezpieczne kolory przegldarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Skd wzi bezpieczne kolory przegldarki? . . . . . . . . . . . . . . . . . . . . . 167
Tworzenie bezpiecznych kolorw przegldarki . . . . . . . . . . . . . . . . . . . . . 168
Hybrydowe bezpieczne kolory przegldarki . . . . . . . . . . . . . . . . . . . . . . . . 170
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

10 Podstawy grafiki komputerowej . . . . . . . . . . . . . . . . . . . . . . . 173

Formaty plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Terminologia formatw plikw graficznych . . . . . . . . . . . . . . . . . . . . 175
Format GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Zalety plikw GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Kiedy wybra format GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Format pliku JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Postpowo plikw JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Zalety plikw JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Kiedy wybra format JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Antyaliasowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Rozmiar plikw graficznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Maa lekcja o bitach i bajtach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Jak okreli prawidow wielko pliku? . . . . . . . . . . . . . . . . . . . . . . . 181
Mapy obrazu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Mapy obrazu po stronie klienta i po stronie serwera . . . . . . . . . . . . . . 182
Rezerwowe etykiety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Miniaturki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 187
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

11 Jak przygotowa pliki graficzne

do wykorzystania w sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 189
Wykaz plikw graficznych uywanych w internecie . . . . . . . . . . . . . . . . 190
Jeeli nie chcesz sam tworzy elementw graficznych . . . . . . . . . . . . . . . . 191
Jeeli nie masz Photoshopa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Tanie oprogramowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Programy shareware do konwertowania plikw . . . . . . . . . . . . . . . . . 192
Photoshop to inwestycja w przyszo . . . . . . . . . . . . . . . . . . . . . . . . . 192
Jak przenie zdjcia i grafiki do komputera . . . . . . . . . . . . . . . . . . . . . . . 193
Wylij negatyw do studia fotograficznego . . . . . . . . . . . . . . . . . . . . . . 193
Co powiedzie osobie, ktrej zlecasz skanowanie . . . . . . . . . . . . . . . . . 194
Samodzielne skanowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Uywanie aparatu cyfrowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Szczegowe instrukcje
Tworzymy plik GIF (patrz rwnie: strony 202 203!) . . . . . . . . . . . . . . 198
Tworzymy plik JPEG(zobacz rwnie strony 202 203!) . . . . . . . . . . . . . 200
Tworzymy pliki GIF i JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Tworzymy map obrazu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Tworzymy obrazek na to strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Obrazek przy lewej krawdzi strony jako jej to . . . . . . . . . . . . . . . . . . 207
Obrazek przy grnej krawdzi strony jako jej to . . . . . . . . . . . . . . . . . 208
Tworzenie ta z tekstur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Proj_Stron_WWW_R00.qxd

17-12-03

21:29

Page 9

Filtr Tworzenie pytek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Obrazek o takim kolorze ta, jak kolor ta strony . . . . . . . . . . . . . . . . . 211
Co w przypadku, gdy na tle strony
zostaa umieszczona kolorowa tekstura? . . . . . . . . . . . . . . . . . . . . . 212
Duy obrazek w tle strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Unikanie efektu powiaty oraz artefaktw . . . . . . . . . . . . . . . . . . . . . 214
Tworzymy animowanego GIF-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

12 Typografia w sieci WWW

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Czytelno a przejrzysto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Czytelno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Przejrzysto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
amanie zasad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Bd rozsdny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Cudzysowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Domylny rodzaj i rozmiar czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Ostatnia uwaga: nie kontroluj wszystkiego . . . . . . . . . . . . . . . . . . . . . 224
Uniwersalne czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Zmienne rodowiskowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Inne wane rzeczy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Proporcjonalne i nieproporcjonalne . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Style fizyczne i logiczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Inne znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Przeklestwo podkrelenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
W trakcie pracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Kaskadowe arkusze stylw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Czcionki dynamiczne oraz TrueDoc . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Czcionki OpenType . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Darmowe czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 231
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

13 Wskazwki i podpowiedzi dla zaawansowanych . . . . . . . 233

Zabawa z tabelami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Bogatsze kolory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Wstpne adowanie obrazkw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Czytelniejsze mae czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Zastpcze rdo niskiej jakoci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Cicie plikw na kawaki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Cicie pliku GIF w celu stworzenia animacji . . . . . . . . . . . . . . . . . . . . . 242
Cicie obrazka w celu stworzenia oryginalnego ukadu strony . . . . . . . 244
Przydatne wskazwki dla uytkownikw Photoshopa . . . . . . . . . . . . . . . 247
Skrty klawiaturowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Dostosowywanie opcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Sposoby na uatwienie pracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Wykorzystanie wielu warstw do stworzenia przyciskw nawigacyjnych . 250
Rzucamy cie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Efekt rollover oraz efekt zmiany obrazkw . . . . . . . . . . . . . . . . . . . . . . . . 253
Proste poprawki w kodzie HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Animacje Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Proj_Stron_WWW_R00.qxd

17-12-03

21:29

Page 10

10

Cz pita: Skoczye i co dalej?

14 Przetestuj i popraw witryn

. . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Oprogramowanie wspomagajce
zarzdzanie witrynami internetowymi . . . . . . . . . . . . . . . . . . . . . . . . . 266
Testowanie witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Najpierw przenie swj folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Test w przegldarce w trybie offline . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Obserwuj innych, jak przegldaj twoj witryn . . . . . . . . . . . . . . . . . 269
Rne przegldarki dla rnych ludzi . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Poprawki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Inne wskazwki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

15 Jak przesa i uaktualni witryn na serwerze

. . . . . . . . 273
Zanim przelesz witryn na serwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Zgromad pliki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Przesyanie plikw na serwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Sprawd witryn w sieci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Uaktualnianie plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Dodatkowe witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

16 Jak zarejestrowa witryn

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Wyszukiwarki internetowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Specjalistyczne narzdzia zrobi to za ciebie . . . . . . . . . . . . . . . . . . . . . 284
Wicej wcale nie znaczy lepiej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Wyszukiwarki specjalistyczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Dodaj moje cze, ja dodam twoje . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Popularno witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Czego szukaj wyszukiwarki? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Tytu strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Pierwszy akapit strony gwnej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Zamiecanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Znaczniki meta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Zareklamuj witryn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Reklamuj si wszdzie, gdzie tylko moesz . . . . . . . . . . . . . . . . . . . . . 288
Wyrnienia i nagrody . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Dodawaj regularnie witryn do wyszukiwarek . . . . . . . . . . . . . . . . . . 289
Znajd swoj witryn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

Dodatki
Odpowiedzi do quizw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Indeks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

Proj_Stron_WWW_R14.qxd

27-11-03

01:55

Page 263

cz pita
Skoczye
i co dalej?

Proj_Stron_WWW_R14.qxd

27-11-03

01:55

Page 264

Ta bezprzewodowa skrzynka grajca nie ma adnej wyobraalnej

wartoci handlowej. Kto bdzie chcia paci za przesyanie wiadomoci
do nieznanego odbiorcy?
Wsplnicy Dawida Sarnoffa w odpowiedzi na jego usilne proby o zainwestowanie w radio, rok 1920

Proj_Stron_WWW_R14.qxd

27-11-03

01:55

Page 265

14

Przetestuj
i popraw witryn

Zanim udostpnisz stron caemu wiatu, musisz jeszcze sprawdzi, czy dziaa poprawnie.
Zapewniamy ci, i wyjtkiem jest strona, ktra po przesaniu na serwer wyglda idealnie. W tym rozdziale powiemy o oprogramowaniu wspomagajcym zarzdzanie witrynami internetowymi, ktre pomoe zapanowa nad poszczeglnymi czciami witryny. Poprowadzimy ci take przez proces testowania strony oraz poprawiania prostych
bdw. Mimo i jest to najbardziej frustrujcy etap procesu tworzenia witryny WWW,
nie mona sobie pozwoli na jego pominicie.

Proj_Stron_WWW_R14.qxd

266

27-11-03

P R O J E K T O WA N I E

01:55

STRON

Page 266

W W W.

JAK

TO

ZROBI?

Oprogramowanie wspomagajce
zarzdzanie witrynami internetowymi
W caej ksice staralimy si przewidzie sytuacje, w jakich moesz popeni bdy.
Pamitaj, aby umieszcza pliki graficzne w odpowiednim folderze, zanim zostan wykorzystane na stronie. Nie przeno plikw do innych folderw ani nie zmieniaj ich nazw po
poczeniu ze stron. Jeeli zastosujesz si do naszych zalece, nie bdziesz musia pniej poprawia czy do stron i plikw graficznych. Zaoszczdzisz tym samym wiele czasu. Zamy, e zapisae ilustracj w pliku home.gif oraz e wykorzystujesz j na kadej
stronie WWW. Jeeli przeniesiesz ten plik do innego folderu albo zmienisz jego nazw
na gohome.gif, bdziesz musia zmieni nazw tego pliku na kadej stronie, na ktrej on
wystpuje. Nie stanowi to wielkiego problemu w przypadku, gdy witryna skada si z piciu stron. Jeeli jednak pracujesz nad witryn skadajc si z 30, 150 lub 600 stron,
wykonanie takiej zmiany jest ju wikszym problemem. Podobna sytuacja wystpi wtedy, gdy planujesz stworzenie witryny skadajcej si tylko z piciu stron, ale w miar
upywu czasu rozrasta si ona do 120 stron i w zwizku z tym wymaga reorganizacji,
stworzenia folderw dla nowych sekcji itd. Rczne wprowadzanie takich zmian jest bardzo czasochonne i nudne. W takich przypadkach zastosowanie znajduje oprogramowanie
wspomagajce zarzdzanie witrynami WWW.
Oprogramowanie to, jak sama nazwa wskazuje, pomaga w zarzdzaniu witryn, ktr
tworzysz. Dobry program potrafi przeszuka wszystkie strony witryny i poinformowa
o znalezionych bdach. Moesz zmieni nazw pliku, a program poprawi za ciebie bdy
zwizane z nieprawidow budow cza. Poinformuje ci take o tym, ktre ilustracje
nie znajduj si tam, gdzie powinny.
Wiele programw wspomagajcych tworzenie witryn internetowych posiada narzdzia
do zarzdzania witrynami. Dreamweaver moe doczy do serwisu pliki graficzne, ktre na pocztku znajdoway si w innym folderze. Microsoft FrontPage posiada kilka przydatnych opcji we wbudowanym narzdziu, zwanym FrontPage Explorer. Adobe GoLive
posiada potne narzdzia do zarzdzania ca witryn WWW i sprawowania nad ni
kontroli.
BBEdit jest najpopularniejszym edytorem HTML dla komputerw Macintosh, dostarczanym razem z Dreamweaverem. Luckmans WebEdit Pro i Sausage Softwares HotDog Pro
to popularne edytory HTML dla systemu operacyjnego Windows. Wielu uytkownikw wykorzystuje je do tworzenia nieskomplikowanych witryn. Za ich pomoc mona
przeszuka cay folder witryny i zamieni tekst jednoczenie w wielu plikach, wczajc
w to cza. Ale takie oprogramowanie nie podpowie, jakie bdy wkrady si na stron.
BBEdit mona pobra z witryny www.barebones.com, HotDog Pro z witryny www.sausage.com, natomiast WebEdit Pro znajduje si na wielu witrynach internetowych. Wystarczy
skorzysta z popularnych wyszukiwarek, aby go odszuka.

Proj_Stron_WWW_R14.qxd

27-11-03

01:55

Page 267

14:

PRZETESTUJ

POPRAW

WITRYN

Macromedia
Dreamweaver, jak
wikszo programw
wspomagajcych
zarzdzanie witrynami
WWW, bez problemu
radzi sobie
z otwieraniem stron
WWW stworzonych
w innych
programach tego
typu. Posiada
rwnie
mechanizmy,
ktre pozwalaj
kilku projektantom
na jednoczesn
prac nad t sam
witryn.

Adobe GoLive posiada narzdzia, ktre

pomagaj w zarzdzaniu istniejcymi
ju witrynami. Moe te zosta
wykorzystany do projektowania
nowych witryn za pomoc tzw. stron
tymczasowych (placeholder pages).

Jeeli korzystasz z programu

Microsoft FrontPage, zwr
uwag na wbudowanego
w niego FrontPage Explorera,
ktry pomaga w zarzdzaniu
serwisem.

267

Proj_Stron_WWW_R14.qxd

268

27-11-03

P R O J E K T O WA N I E

01:55

STRON

Page 268

W W W.

JAK

TO

ZROBI?

Testowanie witryny
Wane jest, aby przed umieszczeniem witryny na serwerze, przetestowa j i zobaczy,
jak dziaa. Upewnij si, e:

wszystkie ilustracje znajduj si w odpowiednich folderach i pokazuj si

na stronie,

wszystkie cza dziaaj,

nie ma adnych problemw z formatowaniem oraz rozmieszczeniem tekstu

na stronie.

Witryna powinna zosta przetestowana w rnych przegldarkach oraz na rnych platformach (przynajmniej Linux oraz Windows), przy uyciu rnych monitorw z rnymi
ustawieniami, z wyczonym wywietlaniem grafiki oraz przy odmiennych ustawieniach rodzaju i rozmiaru domylnej czcionki. Rnorodno rodowisk, w jakich mona
oglda witryn, sprawia, e projektowanie witryn WWW jest jednoczenie zabawne
i frustrujce. Jeeli wemiesz to wszystko pod uwag, zwikszysz szanse na to, e zaprojektowana przez ciebie witryna bdzie wygldaa tak, jak tego oczekujesz.
Jeeli projektujesz ma witryn, na ktrej nie spodziewasz si duego ruchu, nie ma sensu testowa jej przy tak wielu rnych parametrach. Ale jeeli tworzysz witryn dla firmy, w wielu wersjach jzykowych lub o duym znaczeniu kulturalnym, lepiej przetestuj j dokadnie.

Najpierw przenie swj folder

Najlepszym sposobem na przetestowanie strony jest przeniesienie caego folderu, w ktrym znajduje si witryna, do innego folderu na twardym dysku. Otwrz stron gwn
i podaj za wszystkimi znajdujcymi si na niej czami, aby sprawdzi, czy wszystkie
dziaaj poprawnie. Jeeli umiecie na stronie element, ktry wczeniej znajdowa si
w innym folderze, test ten pozwoli ci wykry bd zwizany z brakiem pliku (np. ilustracja na stronie nie pojawi si). W takim przypadku, przed poprawieniem cza na stronie, sprbuj najpierw odszuka brakujcy plik i umieci go w odpowiednim folderze witryny.

Test w przegldarce w trybie offline

Tworzc witryn, na bieco sprawdzaj, jak strony prezentuj si w przegldarce. Unikniesz
wtedy przykrych niespodzianek.
1.

Na komputerze klasy Mac stwrz alias do twojej przegldarki, a na komputerze

klasy PC skrt.

2.

Umie alias lub skrt w widocznym miejscu na Pulpicie.

3.

Nie cz si z internetem (oczywicie moesz to zrobi, jednak nie jest to

potrzebne do przeprowadzenia testu).

4.

Przecignij ikon strony, ktr chcesz przetestowa, i upu j na alias lub skrt
przegldarki. Uruchomi si przegldarka, ktra automatycznie wywietli t
stron bez prby poczenia si z internetem.

5.

Wywietlona przez przegldark strona bdzie prawdopodobnie wyglda troch

inaczej ni w programie do tworzenia witryn WWW. Jeeli zauwaysz bdy na

Proj_Stron_WWW_R14.qxd

27-11-03

01:55

Page 269

14:

PRZETESTUJ

POPRAW

WITRYN

stronie, otwrz j w tym programie. Jeli twj monitor jest dostatecznie duy,
umie j ssiadujco w pionie obok strony wywietlonej w przegldarce.
Popraw bdy

na stronie, wykorzystujc do tego program do tworzenia witryn

WWW.
Ta czynno jest bardzo istotna. Nie zauwaysz zmian
w przegldarce, dopki nie zapiszesz strony.

Zapisz stron.

W przegldarce kliknij przycisk Reload (Zaaduj) lub Refresh (Odwie) albo

wybierz Reload lub Refresh z menu View (Widok). Zobaczysz wtedy, jakie zmiany
zostay wprowadzone na stronie. Jeeli na stronie nic si nie zmienio,
prawdopodobnie zapomniae o zapisaniu zmian w programie do tworzenia
witryn WWW.
6.

Zanim przelesz witryn na serwer, sprawd cza do zewntrznych stron

WWW. Wikszo programw pozwala okreli, w jakiej przegldarce takie
strony powinny si otwiera odszukaj odpowiednie ustawienie w opcjach
programu i wybierz przegldark. Pocz si z internetem i sprawd, czy
zewntrzne cza dziaaj poprawnie. Poczenie z internetem w aden sposb nie
wpywa na witryn adowan z lokalnego dysku twardego. Cigle moesz
otwiera te strony w przegldarce. Po dokonaniu zmian na stronie wystarczy j
tylko przeadowa w przegldarce.

Obserwuj innych, jak przegldaj twoj witryn

Nie mw nic, tylko obserwuj innych podczas przegldania twojej witryny. Bez adnego
wyjaniania, przepraszania, wskazywania na pomocne opcje czy mwienia, w ktre
miejsca naley si uda. Obserwuj, jak poruszaj si po witrynie, w ktrych miejscach
utkn, gdzie spdzaj najwicej czasu, co pomijaj, co dziaa, a co nie dziaa. Nastpnie
we dugopis i rb notatki zapisuj, co trzeba poprawi. Na koniec zapytaj uytkownikw, o czym myleli podczas przegldania witryny. Nic nie mw, tylko suchaj. Dokonaj
wszelkich koniecznych poprawek i usprawnie.

Rne przegldarki dla rnych ludzi

Nawet najprostsza strona bdzie wygldaa troch inaczej w rnych przegldarkach, na
komputerze klasy Mac lub PC, przy innych ustawieniach rozdzielczoci monitora czy te
z innym rodzajem lub rozmiarem czcionki. Spodziewaj si rnic musisz tylko zadba o to, aby strona w innej przegldarce nie wygldaa brzydko.
Najbardziej polecan przegldark jest Netscape. Microsoft Internet Explorer, jak wszystkie
inne programy firmy Microsoft, nie zawsze trzyma si obowizujcych standardw.
Dziki Billowi Gatesowi projektowanie stron internetowych jest bardziej skomplikowane, ni mogoby by (opinia Robin). Dostosowywanie stron do Internet Explorera moe
by bardzo dranice.

269

Proj_Stron_WWW_R14.qxd

270

27-11-03

P R O J E K T O WA N I E

01:55

STRON

Page 270

W W W.

JAK

TO

ZROBI?

Poprawki
Przegldanie stron w przegldarce moe ujawni szczegy, ktre ci zaskocz. A to spacje s tam, gdzie nie powinny, wers koczy si w innym miejscu, przestrze wok ilustracji nie jest taka, jak chciae, elementy na stronie ukadaj si inaczej, tabele wygldaj
zabawnie. I ty mylae, e to koniec pracy?
Pamitaj, e przegldarka nie wywietla dodatkowych
znakw spacji, utworzonych za pomoc klawisza spacji wywietlany jest tylko jeden znak spacji midzy wyrazami. Czsto akapit wyglda inaczej, ni si tego
spodziewasz (zwaszcza przed lub za ilustracj). Sztuczka z zamalowanymi kropkami lub przeroczystym GIF-em pomoe ci uzyska odpowiedni przestrze tam,
gdzie tego potrzebujesz, na przykad wok ilustracji (patrz: strony 258. i 271).

Problemy ze znakiem spacji.

Musisz wrci do programu wspomagajcego tworzenie witryn WWW i upewni si, e caej tabeli, jak i jej kadej komrce, przypisae odpowiedni rozmiar. Sprawd, czy kada komrka jest prawidowo wyrwnana, zarwno w pionie, jak i w poziomie. Nie zapomnij o obramowaniu oraz odstpach midzy
komrkami. W starszych przegldarkach nie s widoczne kolory poszczeglnych
komrek. Twj program moe take wywietli wiksz przestrze midzy komrkami, ni bdzie to widoczne w przegldarce.

Porozjedane tabele.

Gdy nie pojawi si adna ilustracja, najpierw sprawd,

czy nie zostao wyczone pokazywanie grafiki w przegldarce. Jeeli opcja ta jest
wczona, prawdopodobnie przeniose lub zmienie nazw pliku po umieszczeniu obrazka na stronie. Powr do programu i upewnij si, e plik znajduje si
w odpowiednim folderze albo w tym samym, co reszta stron, albo przynajmniej
w folderze z ilustracjami, znajdujcym si wewntrz folderu witryny. W przypadku, gdy ilustracja zostaa przeniesiona albo gdy zmieniona zostaa nazwa jej
pliku, najpierw usu j ze strony, a nastpnie wstaw w to miejsce t, ktra znajduje si w folderze witryny. Nawet jeeli program potrafi naprawi bd zwizany
z czem, to i tak musisz umieci t ilustracj w folderze z witryn przed przesaniem jej na serwer.

Nie pokazuj si ilustracje.

Jeeli zmienie nazw strony lub przeniose j w inne miejsce ju

po poczeniu jej z witryn, cze bdzie nieprawidowe. Wr do programu wspomagajcego tworzenie witryn WWW i utwrz cze na nowo. Oczywicie najpierw
upewnij si, e strona znajduje si w odpowiednim folderze w tym samym, co
reszta stron1.

Nie dziaaj cza.

Na stronie 75. znajduj si wskazwki dotyczce edycji kodu HTML w celu poprawy czy
do obrazkw i stron internetowych. Oczywicie edycja kodu ma sens tylko wtedy, jeeli
wczeniej upewnie si, e obrazek lub strona znajduj si w odpowiednim folderze.

Proj_Stron_WWW_R14.qxd

27-11-03

01:55

Page 271

14:

PRZETESTUJ

POPRAW

WITRYN

Inne wskazwki
Jednym z najwikszych problemw podczas projektowania witryn internetowych jest
pozostawianie wolnej przestrzeni na stronie. Istniej dwa sposoby rozwizania tego problemu. Jeden jest bardzo prosty i porczny, gdy to strony ma jednolity kolor. Drugi przyda si w przypadku, gdy kolor ta jest niejednolity.
To jednolite. Wstaw kilka kropek lub liter (np. xxx) w miejscu, w ktrym chcesz uzyska troch przestrzeni, na przykad midzy ilustracjami lub midzy czami. Nastpnie
przypisz tym znakom taki kolor, jaki ma to strony (spjrz poniej).
To niejednolite. Stwrz maego, przeroczystego GIF-a moe by nawet wielkoci 11
piksel. Wykorzystaj do tego celu jaki program graficzny albo program wspomagajcy
tworzenie witryn internetowych. Taki przeroczysty GIF moe zosta uyty do oddzielania sw. Na przykad umie go midzy dwoma pierwszymi czami w linii kilku czy
(tak jak na rysunku poniej), a nastpnie rozcignij do potrzebnych rozmiarw, skopiuj
i wklej pomidzy inne cza. Jeeli potrzebna ci jest przestrze nad albo pod ilustracj,
wstaw przeroczysty obrazek w to miejsce i nadaj mu wymagany rozmiar. Sposb ten
mona rwnie wykorzysta do uzyskania wci w akapicie.
Kade to. Aby uzyska wiksz przestrze midzy liniami tekstu, zaznacz znak spacji
midzy dwoma wyrazami i zwiksz jego rozmiar. Najlepiej do tego celu wykorzysta
znak spacji wystpujcy po kropce lub przecinku. Taka zmiana jest wtedy mniej widoczna. Poniewa nie wiadomo, w ktrym miejscu nastpi zamanie linii w przegldarce
uytkownika, staraj si zmieni rozmiar znaku spacji par razy w jednej linii.

Stwrz
przeroczystego
GIFa.

Umie tego GIFa

midzy wyrazami,
aby zwikszy przestrze
midzy nimi.
Aby zwikszy przestrze midzy
liniami tekstu, tak jak to pokazano
poniej, zwiksz rozmiar kilku
znakw spacji w danej linii.

Uyj przeroczystego
GIFa do uzyskania efektu
wcicia tekstu w akapicie.
Jeeli to strony jest jednolitego koloru, wstaw kilka znakw
przed akapitem i nadaj im taki sam kolor, jaki posiada to.
Stan si one wtedy niewidoczne.

Rozmiar tego
znaku spacji
jest wikszy ni
reszty tekstu.
Zobacz rwnie
przykad
przedstawiony
na stronie 235.

271

Proj_Stron_WWW_R14.qxd

272

27-11-03

P R O J E K T O WA N I E

01:55

STRON

Page 272

W W W.

JAK

TO

ZROBI?

Czas na

quiz!
Poniej, po lewej, przedstawiona jest strona, otwarta w programie wspomagajcym tworzenie witryn internetowych. Po prawej ta sam strona w przegldarce internetowej.
Wska pi rnic midzy nimi. Ktre rnice stanowi problem i jak go rozwiza? Okrel,
dlaczego pozostae rnice nie maj znaczenia.

1
2
3
4
5
Odpowiedzi na stronie 292.