Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
HTML. Kurs
webmastera
Autor: Donna L. Baker
Tumaczenie: Tomasz mijewski
ISBN: 83-7361-511-3
Tytu oryginau: HTML Complete Course
Format: B5, stron: 360
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Wstp
Na zacht
9
13
Wstp
13
14
16
18
20
Wykaczanie witryny
23
Cz I Przygotowanie do pracy
Podstawy HTML
HTML
27
27
30
31
32
33
Tutorial Files
34
35
35
37
38
40
47
49
52
55
Podsumowanie lekcji
56
Inne projekty
56
58
60
61
63
poszczeglnych orodkw
66
71
72
74
Podsumowanie lekcji
76
Inne projekty
76
42
44
80
82
85
Od organizacji pomysw
do organizacji witryny
pierwszej strony
Cz II Zaczynamy
Lekcja 1. Tworzenie zarysu witryny
45
33
33
Podsumowanie lekcji
Inne projekty
97
98
98
Spis treci
102
104
107
109
pojedynczego orodka
112
114
Eksport logo
116
Podsumowanie lekcji
119
Inne projekty
119
122
129
132
135
Rozmieszczenie tabel
na stronie o rezerwacjach
o rezerwacjach
Podsumowanie lekcji
Inne projekty
Lekcja 6. Uycie obrazkw
Dzielenie obrazka na czci
Sprawdzanie jakoci obrazka
Zmiana wymiarw obrazka
140
142
142
144
146
149
151
156
159
161
163
165
165
170
171
172
174
175
177
178
181
168
Korzystanie z ramek
Podsumowanie lekcji
Inne projekty
138
154
Cz V Struktura witryny
127
Dodanie zastrzee
Cz IV Grafika i obrazki
na stronach
Lekcja 5. Dostosowywanie tabel
za pomoc stylw
182
182
184
186
ze strony gwnej
187
189
191
193
195
196
198
199
199
Spis treci
Cz VI Uatrakcyjnianie witryny
202
za pomoc JavaScriptu
Zapis nagwkw i stylw tekstu
204
206
208
210
212
215
217
219
219
Zmiana komunikatu
w pasku stanu przegldarki
222
229
230
231
227
257
259
259
262
do strony logo
264
Ostateczne poprawki
267
238
pokazu slajdw
268
270
271
273
276
280
280
282
Wywietlanie uytkownikowi
komunikatw
238
284
255
224
253
Pseudoklasy i pseudoelementy
Tworzenie stylw hiperczy witryny
Stosowanie zwielokrotnionych
ramki nawigacyjnej
250
244
247
249
286
w JavaScripcie
288
Definiowanie formularza
291
292
294
298
Podsumowanie lekcji
301
Inne projekty
301
Spis treci
304
306
308
311
313
314
316
319
322
Podsumowanie lekcji
Inne projekty
325
328
Rozdzielczo ekranu
Testowanie witryny
przy rnych ustawieniach ekranu
325
330
331
witryny Sizzle
334
337
340
Podsumowanie lekcji
343
Inne projekty
343
Dodatki
Zawarto pyty CD-ROM
347
Skorowidz
353
Analiza
Lekcja 8.
Przewodnik
OSTRZEENIE
W poszczeglnych krokach przewodnika odwoujemy
si do numerw wierszy. Numery wierszy u Czytelnika
mog by nieco inne ni pokazane na zrzutach ekranw
czy podawane w opisie. Numerw tych naley uywa
jako punktw odniesienia, ale trzeba te uwanie
sprawdza zawarto danego wiersza, aby poprawia
odpowiedni kod lub dopisywa go we waciwym
miejscu.
W wierszu 40. piszemy .
Po tabeli wstawiamy koniec wiersza, aby optycznie
tabele byy od siebie oddzielone.
W wierszach od 41. do 48. piszemy:
!"
#$%%&'(#)*+,
#$%%&'%-)*+,
#$%%&'./0,1$'
187
Cz V
Struktura witryny
UWAGA
Kiedy przesuwamy kursor nad hiperczem, jego
ksztat zmienia si na do, a w pasku stanu pojawia
si adres wskazywany przez to hipercze.
Sprawdzamy wszystkie trzy cza.
Jeli ktre z nich nie dziaa tak, jak to opisano
w tym przewodniku, trzeba sprawdzi, czy w kod
dodany w kroku 6. nie wkrady si jakie bdy.
Wyczamy przegldark. Do naszej strony dodalimy
niewielk tabel z przypisanym stylem. Dodalimy
i sprawdzilimy cza wewntrzne wskazujce strony
poszczeglnych orodkw.
188
Lekcja 8.
Przewodnik
2
45
8
.
UWAGA
189
Cz V
Struktura witryny
WSKAZWKA
Wszystkie hipercza powinny dziaa tak, jak to tu
opisujemy. Jeli tak nie jest, trzeba sprawdzi kod
wstawiony w wiersze od 36. do 38.
Klikamy dwukrotnie przycisk Wstecz, aby wrci
na stron main.html.
Kiedy przesuwamy wskanik myszy nad przyciskiem
Wstecz, tytu strony pokazuje si w polu tekstowym
obok tego przycisku.
UWAGA
Prawidowo zaprojektowana witryna nie powinna
opiera swojego dziaania na przyciskach
nawigacyjnych przegldarki, takich jak wanie
przycisk Wstecz. W dalszym cigu nauki stworzymy
map obrazkow witryny, ktra powie trzy strony
poszczeglnych orodkw.
UWAGA
190
Lekcja 8.
Przewodnik
UWAGA
Do tekstu tego dodano puste wiersze, aby rozgraniczy
grupy akapitw. Te puste wiersze uatwiaj podzielenie
strony na czci.
Wybieramy z menu Plik/Otwrz, wybieramy plik
basic.html.
Plik ten take znajduje si w folderze Storage.
Przechodzimy do wiersza 11., zaznaczamy w nim
tymczasowo wstawiony tekst. Wciskamy Delete.
Tekst ten zastpimy treci pliku sitemap.txt.
Wybieramy z menu Edycja/Wstaw.
Tekst skopiowany z pliku sitemap.txt jest wklejany
na stron. Upewniamy si, czy znacznik kocowy
7 znajduje si za wklejonym tekstem.
Przechodzimy do wiersza 6. i tymczasowy tytu
strony, midzy znacznikami
, zastpujemy
nastpujcym: <77#
.
Teraz nasza strona ma tytu.
Zapisujemy plik w folderze Sizzle jako sitemap.html.
Mamy gotow nastpn stron naszej witryny.
Otwieramy plik fine_print.html z foldera witryny Sizzle.
Na stronie tej dodamy dwie zakadki.
UWAGA
Zauwamy, e wiersze tekstu uywane jako hipercza
nie s jeszcze identyfikowane. W dalszej czci tego
przewodnika dodamy do nich zakadki.
UWAGA
191
Cz V
Struktura witryny
192
Lekcja 8.
Przewodnik
UWAGA
W tabeli podano numery wierszy, tekst oryginalny
i tekst, jaki powinien w pliku znale si ostatecznie.
Tekst trzech stron poszczeglnych orodkw jest
zawinity, aby poprawi czytelno kodu.
Tekst pierwotny
Ostateczna posta
14
$25
8
2
545
$25
8
15 16
#
(8>6
2
3
45
#
(8>6
5!
17 18
#
%8> ?8
@
6
7
2
3
45
#
%8> ?8
@6
7
19 20
#
A6
> 5A!8
6
2
3645
#
A6
> 5A!86
21
.
7 2 5
.
7
2
=
45
2 5
22
.
2
45
8
23
.
B
.
B
2
45
24
2
45
87!8
193
Cz V
Struktura witryny
WSKAZWKA
Trzeba przetestowa wszystkie hipercza.
Konieczne jest sprawdzenie, czy wszystkie strony
aduj si prawidowo do drugiego okna
przegldarki. Sprawdzamy, czy cza do zakadek
pokazuj odpowiedni fragment strony. Jeli ktre
cza nie bd dziaay prawidowo, sprawdzamy
kod dodany w krokach 3. i 5.
Zamykamy oba okna przegldarki.
Tekst pierwotny
Ostateczna posta
27
9
2
45
9
28
&
2
45 C
&
29
0
2
2
345
0
30
#
2
2
345 C=
#
31
(7
2
2
345 C=
(7
194
Lekcja 8.
Przewodnik
UWAGA
cza zewntrzne z naszej witryny naley tak
zapisywa, aby powodoway otwieranie osobnych
okien. Dziki temu cudza witryna nie pojawi si
wewntrz naszej. Jeli nie zdefiniujemy atrybutu
, przegldarka zaaduje wskazywan stron
do zestawu ramek Sizzle.
195
Cz V
Struktura witryny
Przewodnik
WSKAZWKA
Kiedy przesuwamy kursor myszy nad obrazkiem, jego
ksztat zmienia si w do, pokazywany jest tekst
zastpczy, a w pasku stanu przegldarki pojawia si
adres docelowy hipercza.
Ukrywamy okno przegldarki.
UWAGA
UWAGA
Hipercza mona sprawdza bezporednio na
odpowiednich stronach, bez uywania zestawu ramek.
Wskazywane witryny nie s istotne w naszym
przewodniku, su jedynie jako przykady.
196
Lekcja 8.
Adresy komputerw
Zestaw protokow, czyli pewnych regu, nazywany
TCP/IP (Transmission Control Protocol/Internet
Protocol, Protok sterowania transmisj/Protok
internetowy) okrela, jakie komunikaty s przesyane
midzy komputerami. TCP odnosi si do procesu
przenoszenia danych midzy komputerami, IP za
dotyczy informacji przesyanych w niewielkich
porcjach nazywanych pakietami.
Kady komputer ma niepowtarzalny adres IP.
Spjrzmy na lewy dolny rg okna przegldarki, kiedy
wejdziemy do Sieci. Czsto pojawiaj si tam cigi
cyfr, takie jak pokazany na rysunku. S one wywietlane
przed zaadowaniem strony. Jest to adres IP strony.
197
Cz V
Struktura witryny
Przewodnik
WSKAZWKA
UWAGA
198
Lekcja 8.
Podsumowanie lekcji
W tej lekcji do naszej witryny dodalimy wiele hiperczy. Dodalimy cza wewntrzne do stron,
umoliwiajce uytkownikom przegldanie witryny i pobieranie interesujcych ich danych bez koniecznoci
korzystania z menu nawigacyjnego. Obrazek na pocztku tej sesji pokazuje doln cz gwnej strony
witryny. Ostatni obrazek pokazuje t sam stron, ale ju z nowymi hiperczami wewntrznymi.
Nauczylimy si tworzy map witryny i wiza j ze stronami. Powizalimy te obrazki ze stronami,
korzystajc po raz pierwszy z adresw bezwzgldnych. cza s powizane z obrazkami logo towarzystw
lotniczych, po klikniciu powoduj otwieranie witryn tych towarzystw. S tak ustawione, aby otwieray
si w nowym oknie przegldarki, poza nasz witryn.
Odpowiedzi na podane niej pytania pomog utrwali sobie wiedz z tej lekcji. Wszystkie znale mona
w przewodnikach wskazanych w nawiasach.
Czy na witrynie warto stosowa wicej ni jedn metod nawigacji? Uzasadnij odpowied. (Analiza.
Projektowanie nawigacji po witrynie)
Do czego przydaje si mapa witryny? (Analiza. Projektowanie nawigacji po witrynie)
Gdzie w oknie przegldarki mona zobaczy, co si kryje na drugim kocu hipercza? (Przewodnik.
Dodajemy hipercza ze strony gwnej)
Czy mona oglda strony poza ramkami witryny? Kiedy si to robi? (Przewodnik. Tworzenie czy
midzy stronami)
Czy podczas nawigacji po witrynie mona polega na uyciu przycisku Wstecz przegldarki?
(Przewodnik. Tworzenie czy midzy stronami)
Do czego suy mapa witryny? Do czego moe si przyda uytkownikowi? (Przewodnik.
Przygotowanie mapy witryny)
Jeli powiemy hiperczem informacje na stronie, to czy trzeba dodawa zakadk na stronie
docelowej, jeli interesujce nas informacje znajduj si na grze strony? (Przewodnik.
Przygotowanie mapy witryny)
Kiedy trzeba dodawa atrybut
w przypadku korzystania ze znacznikw ? (Przewodnik.
Wizanie hiperczy z mapy witryny)
Jak w atrybucie
2 wskazuje si zakadk? (Przewodnik. Wizanie hiperczy z mapy witryny)
Czy podczas dodawania do tabeli nowych wierszy trzeba zmienia wartoci atrybutu ?
(Przewodnik. Dostp do mapy witryny z ramek)
Czy Internet Explorer uywa do hiperczy stylw domylnych? (Przewodnik. Wykorzystanie
obrazkw jako hiperczy)
Jak mona usun obramowanie wstawiane domylnie przez przegldark wok cza w formie
obrazka? (Przewodnik. Wykorzystanie obrazkw jako hiperczy)
Co to jest cieka bezwzgldna? Jak si jej uywa? (Przewodnik. Wykorzystanie obrazkw jako
hiperczy)
Co jest wywietlane przez przegldark, kiedy przesuwamy wskanik myszy nad obrazkiem bdcym
linkiem? (Przewodnik. Logo linii lotniczych jako hipercza)
Inne projekty
Uyj usugi W3C Validator do sprawdzenia stron booking.html oraz sitemap.html.
199