Darmowy fragment publikacji:
IDZ DO
IDZ DO
PRZYK£ADOWY ROZDZIA£
PRZYK£ADOWY ROZDZIA£
SPIS TREĎCI
SPIS TREĎCI
KATALOG KSI¥¯EK
KATALOG KSI¥¯EK
KATALOG ONLINE
KATALOG ONLINE
ZAMÓW DRUKOWANY KATALOG
ZAMÓW DRUKOWANY KATALOG
TWÓJ KOSZYK
TWÓJ KOSZYK
DODAJ DO KOSZYKA
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
CENNIK I INFORMACJE
ZAMÓW INFORMACJE
ZAMÓW INFORMACJE
O NOWOĎCIACH
O NOWOĎCIACH
ZAMÓW CENNIK
ZAMÓW CENNIK
Projektowanie stron
WWW. Jak to zrobiæ?
Autorzy: Robin Williams, John Tollet
T³umaczenie: S³awomir Dzieniszewski (rozdz. 1 - 8),
£ukasz Ko³odziej (rozdz. 9), Sebastian Marek
(rozdz. 10 - 13, dod. A)
ISBN: 83-7361-234-3
Tytu³ orygina³u: The Non-Designer s Web Book, 2nd Edition
Format: B5, stron: 300
Gdyby tworzenie stron internetowych by³o zarezerwowane jedynie dla profesjonalistów,
internet ġwieci³by pustkami. Ka¿dy, równie¿ Ty, mo¿e spróbowaæ swoich si³
w projektowaniu stron. Byæ mo¿e Twoja witryna bêdzie niezbyt skomplikowana i mniej
rozbudowana, ni¿ strony tworzone przez zawodowców, ale to nie znaczy, ¿e musi byæ
nieatrakcyjna i niefunkcjonalna.
W ksi¹¿ce „Projektowanie stron WWW. Jak to zrobiæ?” Robin Williams przekazuje
amatorom tworzenia stron internetowych ca³¹ wiedzê, niezbêdn¹ by zaistnieæ w sieci.
Nie jest to podrêcznik HTML-a jakich wiele: znajdziesz tu komplet informacji
potrzebnych do stworzenia strony, której nie bêdziesz musia³ siê wstydziæ, a wiêc
tak¿e wskazówki dotycz¹ce tworzenia uk³adu strony, grafiki, umieszczania strony
na serwerze i jej promocji. A wszystko to podane przystêpnie i prosto.
CZYTELNIA
CZYTELNIA
Dziêki ksi¹¿ce dowiesz siê:
FRAGMENTY KSI¥¯EK ONLINE
FRAGMENTY KSI¥¯EK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
• Jak korzystaæ z mo¿liwoġci internetu i wyszukiwaæ w nim informacje
• Gdzie szukaæ miejsca, w którym umieġciæ witrynê
• Czym ró¿ni¹ siê publikacje internetowe od klasycznych drukowanych
• Jakie s¹ podstawowe zasady projektowania, które musz¹ znaæ nawet
pocz¹tkuj¹cy
• Na czym polega projektowanie systemu nawigacji po stronach internetowych
• Jak tworzyæ grafikê na potrzeby stron WWW
• Jak w³aġciwie dobraæ krój pisma
• Jakie sztuczki mo¿esz zastosowaæ, by uatrakcyjniæ stronê
• Jak przes³aæ swoj¹ stronê na serwer
• Jakie s¹ metody promocji gotowej witryny WWW
Wieloletnie doġwiadczenie Robin Williams i jej wyj¹tkowy styl, trafiaj¹cy w potrzeby
osób bez specjalistycznego przygotowania sprawi, ¿e nauka projektowania stron
stanie siê satysfakcjonuj¹c¹ przygod¹.
Jeġli dopiero rozpoczynasz zabawê z tworzeniem stron internetowych —
zacznij odtej ksi¹¿ki.
Proj_Stron_WWW_R00.qxd 17-12-03 21:29 Page 5
Spis treści
5
Wprowadzenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Część pierwsza: Korzystanie z sieci WWW
1
2
Czym jest sieć WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Modemy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Prędkości modemów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Usługi online i dostawcy usług internetowych . . . . . . . . . . . . . . . . . . . . . . 19
Co można znaleźć w internecie? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Sieć WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Orientowanie się w sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Przeglądarka przeglądarce nierówna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Adresy internetowe, czyli inaczej adresy URL . . . . . . . . . . . . . . . . . . . . . . . 25
Wprowadzanie adresu URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Więcej o nazwach domen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Więcej o adresach URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Co to takiego dodatki? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Który plikściągnąć? (.sit .hqx .bin .sea .zip .mme) . . . . . . . . . . . . . . . . . . . . 29
Usługa online czy dostawca usług internetowych? . . . . . . . . . . . . . . . . . . . 30
Komercyjna usługa online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Dostawca usług 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 wskazówki! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Więcej informacji na temat
sposobów przeszukiwania internetu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Adresy ułatwiające wyszukiwanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Nie ograniczajcie się tylko do tych narzędzi . . . . . . . . . . . . . . . . . . . . . . . . . 43
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Proj_Stron_WWW_R00.qxd 17-12-03 21:29 Page 6
6
Część druga: Tworzenie stron WWW
3
4
Czym właściwie są strony WWW? . . . . . . . . . . . . . . . . . . . . . . . 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 kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
Co warto wiedzieć zanim zaczniemy
tworzyć własną witrynę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Organizowanie plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Organizowanie plików z pomocą folderów . . . . . . . . . . . . . . . . . . . . . . 70
Organizowanie plików za pomocą nazw . . . . . . . . . . . . . . . . . . . . . . . . 70
Wymogi nazywania plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Zachowywanie stron i nadawanie im tytułów . . . . . . . . . . . . . . . . . . . . . . 72
Co tak naprawdę robi przeglądarka? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Co to jest serwer WWW? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Jak znaleźć serwer WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Opłaty za goszczenie stron internetowych . . . . . . . . . . . . . . . . . . . . . . 77
O co należy pytać właściciela serwera WWW . . . . . . . . . . . . . . . . . . . . 78
Nazwa domeny i reszta twojego adresu URL . . . . . . . . . . . . . . . . . . . . . . . . 79
Własna domena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Serwery wirtualne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Wstępne planowanie witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Do kogo witryna jest adresowana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Przygotowanie wstępnego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Zbieranie i porządkowanie materiałów . . . . . . . . . . . . . . . . . . . . . . . . . 82
Zachowywanie materiałów roboczych . . . . . . . . . . . . . . . . . . . . . . . . . 82
Lista czynności wstępnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
7
Kontakt z klientem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Świat informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Rozmiar plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Dźwięk i animacje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Rozmiary i dostępność 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
Wyrównanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Bliskość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Akapit a kod Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Powtórzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Tworzenie punktu koncentracji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Ortografia! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Łączenie różnych 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
Więcej niż jeden sposób nawigowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Tematyka witryny narzuca styl systemu nawigowania . . . . . . . . . . . . . . 138
Indeks zawartości lub mapa witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Ostrożne korzystanie z łączy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Należy unikać tworzenia irytujących łącz . . . . . . . . . . . . . . . . . . . . . . 141
Uczmy się od innych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 143
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Jak odróżnić dobry projekt od złego . . . . . . . . . . . . . . . . . . . 145
Złe projekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Dobre projekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Lista kontrolna złych pomysłów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Lista kontrolna dobrych pomysłów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
6
7
8
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
8
Głębia kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Rozdzielczość monitora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Rozdzielczość ilustracji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Bezpieczne kolory przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Skąd wziąć bezpieczne kolory przeglądarki? . . . . . . . . . . . . . . . . . . . . . 167
Tworzenie bezpiecznych kolorów przeglądarki . . . . . . . . . . . . . . . . . . . . . 168
Hybrydowe bezpieczne kolory przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . 170
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
10 Podstawy grafiki komputerowej . . . . . . . . . . . . . . . . . . . . . . . 173
Formaty plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Terminologia formatów plików graficznych . . . . . . . . . . . . . . . . . . . . 175
Format GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Zalety plików GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Kiedy wybrać format GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Format pliku JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Postępowość plików JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Zalety plików JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Kiedy wybrać format JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Antyaliasowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Rozmiar plików graficznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Mała lekcja o bitach i bajtach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Jak określić prawidłową 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 plików graficznych używanych w internecie . . . . . . . . . . . . . . . . 190
Jeżeli nie chcesz sam tworzyć elementów graficznych . . . . . . . . . . . . . . . . 191
Jeżeli nie masz Photoshopa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Tanie oprogramowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Programy shareware do konwertowania plików . . . . . . . . . . . . . . . . . 192
Photoshop to inwestycja w przyszłość . . . . . . . . . . . . . . . . . . . . . . . . . 192
Jak przenieść zdjęcia i grafiki do komputera . . . . . . . . . . . . . . . . . . . . . . . 193
Wyślij negatyw do studia fotograficznego . . . . . . . . . . . . . . . . . . . . . . 193
Co powiedzieć osobie, której zlecasz skanowanie . . . . . . . . . . . . . . . . . 194
Samodzielne skanowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Używanie aparatu cyfrowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Szczegółowe instrukcje
Tworzymy plik GIF (patrz również: strony 202 – 203!) . . . . . . . . . . . . . . 198
Tworzymy plik JPEG(zobacz również strony 202 – 203!) . . . . . . . . . . . . . 200
Tworzymy pliki GIF i JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Tworzymy mapę obrazu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Tworzymy obrazek na tło strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Obrazek przy lewej krawędzi strony jako jej tło . . . . . . . . . . . . . . . . . . 207
Obrazek przy górnej krawędzi strony jako jej tło . . . . . . . . . . . . . . . . . 208
Tworzenie tła z teksturą . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Proj_Stron_WWW_R00.qxd 17-12-03 21:29 Page 9
9
Filtr Tworzenie płytek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Obrazek o takim kolorze tła, jak kolor tła strony . . . . . . . . . . . . . . . . . 211
Co w przypadku, gdy na tle strony
została umieszczona kolorowa tekstura? . . . . . . . . . . . . . . . . . . . . . 212
Duży obrazek w tle strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Unikanie efektu poświaty oraz artefaktów . . . . . . . . . . . . . . . . . . . . . 214
Tworzymy animowanego GIF-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
12 Typografia w sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Czytelność a przejrzystość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Czytelność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Przejrzystość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Łamanie zasad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Bądź rozsądny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Cudzysłowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Domyślny rodzaj i rozmiar czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Ostatnia uwaga: nie kontroluj wszystkiego . . . . . . . . . . . . . . . . . . . . . 224
Uniwersalne czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Zmienne środowiskowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Inne ważne rzeczy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Proporcjonalne i nieproporcjonalne . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Style fizyczne i logiczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Inne znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Przekleństwo podkreślenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
W trakcie pracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Kaskadowe arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Czcionki dynamiczne oraz TrueDoc . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Czcionki OpenType . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Darmowe czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Wycieczka bez przewodnika po sieci WWW . . . . . . . . . . . . . . . . . . . . . . . . 231
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
13 Wskazówki i podpowiedzi dla zaawansowanych . . . . . . . 233
Zabawa z tabelami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Bogatsze kolory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Wstępne ładowanie obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Czytelniejsze małe czcionki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Zastępcze źródło niskiej jakości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Cięcie plików na kawałki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Cięcie pliku GIF w celu stworzenia animacji . . . . . . . . . . . . . . . . . . . . . 242
Cięcie obrazka w celu stworzenia oryginalnego układu strony . . . . . . . 244
Przydatne wskazówki dla użytkowników Photoshopa . . . . . . . . . . . . . . . 247
Skróty klawiaturowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Dostosowywanie opcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Sposoby na ułatwienie pracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Wykorzystanie wielu warstw do stworzenia przycisków nawigacyjnych . 250
Rzucamy cień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Efekt rollover oraz efekt zmiany obrazków . . . . . . . . . . . . . . . . . . . . . . . . 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ęść piąta: Skończyłeś — i co dalej?
14 Przetestuj i popraw witrynę . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Oprogramowanie wspomagające
zarządzanie witrynami internetowymi . . . . . . . . . . . . . . . . . . . . . . . . . 266
Testowanie witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Najpierw przenieś swój folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Test w przeglądarce w trybie offline . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Obserwuj innych, jak przeglądają twoją witrynę . . . . . . . . . . . . . . . . . 269
Różne przeglądarki dla różnych ludzi . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Poprawki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Inne wskazówki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
15 Jak przesłać i uaktualnić witrynę na serwerze . . . . . . . . 273
Zanim prześlesz witrynę na serwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Zgromadź pliki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Przesyłanie plików na serwer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Sprawdź witrynę w sieci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Uaktualnianie plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Dodatkowe witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
16 Jak zarejestrować witrynę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Wyszukiwarki internetowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Specjalistyczne narzędzia zrobią to za ciebie . . . . . . . . . . . . . . . . . . . . . 284
Więcej 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 głównej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Zaśmiecanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Znaczniki meta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Zareklamuj witrynę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Reklamuj się wszędzie, gdzie tylko możesz . . . . . . . . . . . . . . . . . . . . . 288
Wyróżnienia i nagrody . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Dodawaj regularnie witrynę do wyszukiwarek . . . . . . . . . . . . . . . . . . 289
Znajdź swoją witrynę . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Czas na quiz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Dodatki
Odpowiedzi do quizów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Indeks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 263
część piąta
Skończyłeś
— i co dalej?
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 264
Ta bezprzewodowa skrzynka grająca nie ma żadnej wyobrażalnej
wartości handlowej. Kto będzie chciał płacić za przesyłanie wiadomości
do nieznanego odbiorcy?
Wspólnicy Dawida Sarnoffa w odpowiedzi na jego usilne prośby o zainwestowanie w radio, rok 1920
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 265
14Przetestuj
i popraw witrynę
Zanim udostępnisz stronę całemu światu, musisz jeszcze sprawdzić, czy działa poprawnie.
Zapewniamy cię, iż wyjątkiem jest strona, która po przesłaniu na serwer wygląda ide-
alnie. W tym rozdziale powiemy o oprogramowaniu wspomagającym zarządzanie wit-
rynami internetowymi, które pomoże zapanować nad poszczególnymi częściami witry-
ny. Poprowadzimy cię także przez proces testowania strony oraz poprawiania prostych
błędów. Mimo iż jest to najbardziej frustrujący etap procesu tworzenia witryny WWW,
nie można sobie pozwolić na jego pominięcie.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 266
266
P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
Oprogramowanie wspomagające
zarządzanie witrynami internetowymi
W całej książce staraliśmy się przewidzieć sytuacje, w jakich możesz popełnić błędy.
Pamiętaj, aby umieszczać pliki graficzne w odpowiednim folderze, zanim zostaną wyko-
rzystane na stronie. Nie przenoś plików do innych folderów ani nie zmieniaj ich nazw po
połączeniu ze stroną. Jeżeli zastosujesz się do naszych zaleceń, nie będziesz musiał póź-
niej poprawiać łączy do stron i plików graficznych. Zaoszczędzisz tym samym wiele cza-
su. Załóżmy, że zapisałeś ilustrację w pliku home.gif oraz że wykorzystujesz ją na każdej
stronie WWW. Jeżeli przeniesiesz ten plik do innego folderu albo zmienisz jego nazwę
na gohome.gif, będziesz musiał zmienić nazwę tego pliku na każdej stronie, na której on
występuje. Nie stanowi to wielkiego problemu w przypadku, gdy witryna składa się z pię-
ciu stron. Jeżeli jednak pracujesz nad witryną składającą się z 30, 150 lub 600 stron,
wykonanie takiej zmiany jest już większym problemem. Podobna sytuacja wystąpi wte-
dy, gdy planujesz stworzenie witryny składającej się tylko z pięciu stron, ale w miarę
upływu czasu rozrasta się ona do 120 stron i w związku z tym wymaga reorganizacji,
stworzenia folderów dla nowych sekcji itd. Ręczne wprowadzanie takich zmian jest bar-
dzo czasochłonne i nudne. W takich przypadkach zastosowanie znajduje oprogramowanie
wspomagające zarządzanie witrynami WWW.
Oprogramowanie to, jak sama nazwa wskazuje, pomaga w zarządzaniu witryną, którą
tworzysz. Dobry program potrafi przeszukać wszystkie strony witryny i poinformować
o znalezionych błędach. Możesz zmienić nazwę pliku, a program poprawi za ciebie błędy
związane z nieprawidłową budową łącza. Poinformuje cię także o tym, które ilustracje
nie znajdują się tam, gdzie powinny.
Wiele programów wspomagających tworzenie witryn internetowych posiada narzędzia
do zarządzania witrynami. Dreamweaver może dołączyć do serwisu pliki graficzne, któ-
re na początku znajdowały się w innym folderze. Microsoft FrontPage posiada kilka przy-
datnych opcji we wbudowanym narzędziu, zwanym FrontPage Explorer. Adobe GoLive
posiada potężne narzędzia do zarządzania całą witryną WWW i sprawowania nad nią
kontroli.
BBEdit jest najpopularniejszym edytorem HTML dla komputerów Macintosh, dostar-
czanym razem z Dreamweaverem. Luckman’s WebEdit Pro i Sausage Software’s HotDog Pro
to popularne edytory HTML dla systemu operacyjnego Windows. Wielu użytkowni-
ków wykorzystuje je do tworzenia nieskomplikowanych witryn. Za ich pomocą można
przeszukać cały folder witryny i zamienić tekst jednocześnie w wielu plikach, włączając
w to łącza. Ale takie oprogramowanie nie podpowie, jakie błędy wkradły się na stronę.
BBEdit można pobrać z witryny www.barebones.com, HotDog Pro z witryny www.sausa-
ge.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
1 4 : P R Z E T E S T U J I P O P R A W W I T R Y N Ę
267
Macromedia
Dreamweaver, jak
większość programów
wspomagających
zarządzanie witrynami
WWW, bez problemu
radzi sobie
z otwieraniem stron
WWW stworzonych
w innych
programach tego
typu. Posiada
również
mechanizmy,
które pozwalają
kilku projektantom
na jednoczesną
pracę nad tą samą
witryną.
Adobe GoLive posiada narzędzia, które
pomagają w zarządzaniu istniejącymi
już witrynami. Może też zostać
wykorzystany do projektowania
nowych witryn za pomocą tzw. stron
tymczasowych (placeholder pages).
Jeżeli korzystasz z programu
Microsoft FrontPage, zwróć
uwagę na wbudowanego
w niego FrontPage Explorera,
który pomaga w zarządzaniu
serwisem.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 268
268
P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
Testowanie witryny
Ważne jest, aby przed umieszczeniem witryny na serwerze, przetestować ją i zobaczyć,
jak działa. Upewnij się, że:
I wszystkie ilustracje znajdują się w odpowiednich folderach i pokazują się
na stronie,
I wszystkie łącza działają,
I nie ma żadnych problemów z formatowaniem oraz rozmieszczeniem tekstu
na stronie.
Witryna powinna zostać przetestowana w różnych przeglądarkach oraz na różnych plat-
formach (przynajmniej Linux oraz Windows), przy użyciu różnych monitorów z różnymi
ustawieniami, z wyłączonym wyświetlaniem grafiki oraz przy odmiennych ustawie-
niach rodzaju i rozmiaru domyślnej czcionki. Różnorodność środowisk, w jakich można
oglądać witrynę, sprawia, że projektowanie witryn WWW jest jednocześnie zabawne
i frustrujące. Jeżeli weźmiesz to wszystko pod uwagę, zwiększysz szanse na to, że zapro-
jektowana przez ciebie witryna będzie wyglądała tak, jak tego oczekujesz.
Jeżeli projektujesz małą witrynę, na której nie spodziewasz się dużego ruchu, nie ma sen-
su testować jej przy tak wielu różnych parametrach. Ale jeżeli tworzysz witrynę dla fir-
my, w wielu wersjach językowych lub o dużym znaczeniu kulturalnym, lepiej przetes-
tuj ją dokładnie.
Najpierw przenieś swój folder
Najlepszym sposobem na przetestowanie strony jest przeniesienie całego folderu, w któ-
rym znajduje się witryna, do innego folderu na twardym dysku. Otwórz stronę główną
i podążaj za wszystkimi znajdującymi się na niej łączami, aby sprawdzić, czy wszystkie
działają poprawnie. Jeżeli umieściłeś na stronie element, który wcześniej znajdował się
w innym folderze, test ten pozwoli ci wykryć błąd związany z brakiem pliku (np. ilus-
tracja na stronie nie pojawi się). W takim przypadku, przed poprawieniem łącza na stro-
nie, spróbuj najpierw odszukać brakujący plik i umieścić go w odpo-
wiednim folderze witryny.
Test w przeglądarce w trybie offline
Tworząc witrynę, na bieżąco sprawdzaj, jak strony prezentują się w przeglądarce. Unikniesz
wtedy przykrych niespodzianek.
1. Na komputerze klasy Mac stwórz alias do twojej przeglądarki, a na komputerze
klasy PC — skrót.
2. Umieść alias lub skrót w widocznym miejscu na Pulpicie.
3. Nie łącz się z internetem (oczywiście możesz to zrobić, jednak nie jest to
potrzebne do przeprowadzenia testu).
4. Przeciągnij ikonę strony, którą chcesz przetestować, i upuść ją na alias lub skrót
przeglądarki. Uruchomi się przeglądarka, która automatycznie wyświetli tę
stronę bez próby połączenia się z internetem.
5. Wyświetlona przez przeglądarkę strona będzie prawdopodobnie wyglądać trochę
inaczej niż w programie do tworzenia witryn WWW. Jeżeli zauważysz błędy na
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 269
1 4 : P R Z E T E S T U J I P O P R A W W I T R Y N Ę
269
stronie, otwórz ją w tym programie. Jeśli twój monitor jest dostatecznie duży,
umieść ją sąsiadująco w pionie obok strony wyświetlonej w przeglądarce.
Popraw błędy na stronie, wykorzystując do tego program do tworzenia witryn
WWW.
Zapisz stronę. Ta czynność jest bardzo istotna. Nie zauważysz zmian
w przeglądarce, dopóki nie zapiszesz strony.
W przeglądarce kliknij przycisk Reload (Załaduj) lub Refresh (Odśwież) albo
wybierz Reload lub Refresh z menu View (Widok). Zobaczysz wtedy, jakie zmiany
zostały wprowadzone na stronie. Jeżeli na stronie nic się nie zmieniło,
prawdopodobnie zapomniałeś o zapisaniu zmian w programie do tworzenia
witryn WWW.
6. Zanim prześlesz witrynę na serwer, sprawdź łącza do zewnętrznych stron
WWW. Większość programów pozwala określić, w jakiej przeglądarce takie
strony powinny się otwierać — odszukaj odpowiednie ustawienie w opcjach
programu i wybierz przeglądarkę. Połącz się z internetem i sprawdź, czy
zewnętrzne łącza działają poprawnie. Połączenie z internetem w żaden sposób nie
wpływa na witrynę ładowaną z lokalnego dysku twardego. Ciągle możesz
otwierać te strony w przeglądarce. Po dokonaniu zmian na stronie wystarczy ją
tylko przeładować w przeglądarce.
Obserwuj innych, jak przeglądają twoją witrynę
Nie mów nic, tylko obserwuj innych podczas przeglądania twojej witryny. Bez żadnego
wyjaśniania, przepraszania, wskazywania na pomocne opcje czy mówienia, w które
miejsca należy się udać. Obserwuj, jak poruszają się po witrynie, w których miejscach
utkną, gdzie spędzają najwięcej czasu, co pomijają, co działa, a co nie działa. Następnie
weź długopis i rób notatki — zapisuj, co trzeba poprawić. Na koniec zapytaj użytkow-
ników, o czym myśleli podczas przeglądania witryny. Nic nie mów, tylko słuchaj. Dokonaj
wszelkich koniecznych poprawek i usprawnień.
Różne przeglądarki dla różnych ludzi
Nawet najprostsza strona będzie wyglądała trochę inaczej w różnych przeglądarkach, na
komputerze klasy Mac lub PC, przy innych ustawieniach rozdzielczości monitora czy też
z innym rodzajem lub rozmiarem czcionki. Spodziewaj się różnic — musisz tylko zad-
bać o to, aby strona w innej przeglądarce nie wyglądała brzydko.
Najbardziej polecaną przeglądarką jest Netscape. Microsoft Internet Explorer, jak wszystkie
inne programy firmy Microsoft, nie zawsze trzyma się obowiązujących standardów.
Dzięki Billowi Gatesowi projektowanie stron internetowych jest bardziej skomplikowa-
ne, niż mogłoby być (opinia Robin). Dostosowywanie stron do Internet Explorera może
być bardzo drażniące.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 270
270
P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
Poprawki
Przeglądanie stron w przeglądarce może ujawnić szczegóły, które cię zaskoczą. A to spac-
je są tam, gdzie nie powinny, wers kończy się w innym miejscu, przestrzeń wokół ilus-
tracji nie jest taka, jak chciałeś, elementy na stronie układają się inaczej, tabele wyglądają
zabawnie. I ty myślałeś, że to koniec pracy?
I Problemy ze znakiem spacji. Pamiętaj, że przeglądarka nie wyświetla dodatkowych
znaków spacji, utworzonych za pomocą klawisza spacji — wyświetlany jest tyl-
ko jeden znak spacji między wyrazami. Często akapit wygląda inaczej, niż się tego
spodziewasz (zwłaszcza przed lub za ilustracją). Sztuczka z zamalowanymi krop-
kami lub przeźroczystym GIF-em pomoże ci uzyskać odpowiednią przestrzeń tam,
gdzie tego potrzebujesz, na przykład wokół ilustracji (patrz: strony 258. i 271).
I Porozjeżdżane tabele. Musisz wrócić do programu wspomagającego tworzenie wit-
ryn WWW i upewnić się, że całej tabeli, jak i jej każdej komórce, przypisałeś odpo-
wiedni rozmiar. Sprawdź, czy każda komórka jest prawidłowo wyrównana, zarów-
no w pionie, jak i w poziomie. Nie zapomnij o obramowaniu oraz odstępach między
komórkami. W starszych przeglądarkach nie są widoczne kolory poszczególnych
komórek. Twój program może także wyświetlić większą przestrzeń między komór-
kami, niż będzie to widoczne w przeglądarce.
I Nie pokazują się ilustracje. Gdy nie pojawi się żadna ilustracja, najpierw sprawdź,
czy nie zostało wyłączone pokazywanie grafiki w przeglądarce. Jeżeli opcja ta jest
włączona, prawdopodobnie przeniosłeś lub zmieniłeś nazwę pliku po umieszcze-
niu 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, znajdującym się wewnątrz folderu witryny. W przy-
padku, gdy ilustracja została przeniesiona albo gdy zmieniona została nazwa jej
pliku, najpierw usuń ją ze strony, a następnie wstaw w to miejsce tę, która znaj-
duje się w folderze witryny. Nawet jeżeli program potrafi naprawić błąd związany
z łączem, to i tak musisz umieścić tę ilustrację w folderze z witryną przed przesła-
niem jej na serwer.
I Nie działają łącza. Jeżeli zmieniłeś nazwę strony lub przeniosłeś ją w inne miejsce już
po połączeniu jej z witryną, łącze będzie nieprawidłowe. Wróć do programu wspo-
magającego tworzenie witryn WWW i utwórz łącze na nowo. Oczywiście najpierw
upewnij się, że strona znajduje się w odpowiednim folderze — w tym samym, co
reszta stron1.
1 Na stronie 75. znajdują się wskazówki dotyczące edycji kodu HTML w celu poprawy łączy
do obrazków i stron internetowych. Oczywiście edycja kodu ma sens tylko wtedy, jeżeli
wcześniej upewniłeś się, że obrazek lub strona znajdują się w odpowiednim folderze.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 271
1 4 : P R Z E T E S T U J I P O P R A W W I T R Y N Ę
271
Inne wskazówki
Jednym z największych problemów podczas projektowania witryn internetowych jest
pozostawianie wolnej przestrzeni na stronie. Istnieją dwa sposoby rozwiązania tego prob-
lemu. Jeden jest bardzo prosty i poręczny, gdy tło strony ma jednolity kolor. Drugi przy-
da się w przypadku, gdy kolor tła jest niejednolity.
Tło jednolite. Wstaw kilka kropek lub liter (np. xxx) w miejscu, w którym chcesz uzys-
kać trochę przestrzeni, na przykład między ilustracjami lub między łączami. Następnie
przypisz tym znakom taki kolor, jaki ma tło strony (spójrz poniżej).
Tło niejednolite. Stwórz małego, przeźroczystego GIF-a — może być nawet wielkości 1×1
piksel. Wykorzystaj do tego celu jakiś program graficzny albo program wspomagający
tworzenie witryn internetowych. Taki przeźroczysty GIF może zostać użyty do oddzie-
lania słów. Na przykład umieść go między dwoma pierwszymi łączami w linii kilku łączy
(tak jak na rysunku poniżej), a następnie rozciągnij do potrzebnych rozmiarów, skopiuj
i wklej pomiędzy inne łącza. Jeżeli potrzebna ci jest przestrzeń nad albo pod ilustracją,
wstaw przeźroczysty obrazek w to miejsce i nadaj mu wymagany rozmiar. Sposób ten
można również wykorzystać do uzyskania wcięć w akapicie.
Każde tło. Aby uzyskać większą przestrzeń między liniami tekstu, zaznacz znak spacji
między dwoma wyrazami i zwiększ jego rozmiar. Najlepiej do tego celu wykorzystać
znak spacji występujący po kropce lub przecinku. Taka zmiana jest wtedy mniej widocz-
na. Ponieważ nie wiadomo, w którym miejscu nastąpi złamanie linii w przeglądarce
użytkownika, staraj się zmienić rozmiar znaku spacji parę razy w jednej linii.
Stwórz
przeźroczystego
GIF−a.
Umieść tego GIF−a
między wyrazami,
aby zwiększyć przestrzeń
między nimi.
Aby zwiększyć przestrzeń między
liniami tekstu, tak jak to pokazano
poniżej, zwiększ rozmiar kilku
znaków spacji w danej linii.
Rozmiar tego
znaku spacji
jest większy niż
reszty tekstu.
Zobacz również
przykład
przedstawiony
na stronie 235.
Użyj przeźroczystego
GIF−a do uzyskania efektu
wcięcia tekstu w akapicie.
Jeżeli tło strony jest jednolitego koloru, wstaw kilka znaków
przed akapitem i nadaj im taki sam kolor, jaki posiada tło.
Staną się one wtedy niewidoczne.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 272
272
P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
C z a s n a
quiz!
Poniżej, po lewej, przedstawiona jest strona, otwarta w programie wspomagającym two-
rzenie witryn internetowych. Po prawej — ta sam strona w przeglądarce internetowej.
Wskaż pięć różnic między nimi. Które różnice stanowią problem i jak go rozwiązać? Określ,
dlaczego pozostałe różnice nie mają znaczenia.
1
2
3
4
5
Odpowiedzi na stronie 292.
Pobierz darmowy fragment (pdf)
