HTML W 10 Prostych Krokach

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
HTML w 10 prostych
krokach
Autor: Robert G. Fuller
Tumaczenie: Micha Dadan (rozdz. 1 12),
ukasz Zieliski (rozdz. 13 15)
ISBN: 83-7361-505-9
Tytu oryginau: HTML in 10 Simple Steps or Less
Format: B5, stron: 528
Przykady na ftp: 385 kB
Podczas tworzenia stron WWW czsto napotykamy problemy. Tekst nie wywietla si
prawidowo w przegldarce, tabela nie wyglda tak, jak powinna, obrazek pojawia si
w miejscu, w ktrym nie powinien to tylko niektre z kopotw, z jakimi boryka si
chyba kady pocztkujcy twrca stron WWW. Tworzenie stron w rodowiskach
wizualnych to tylko prodek, poniewa prdzej czy pniej trzeba bdzie poprawi
kod rcznie. Do tego niezbdna jest znajomo jzyka HTML.
HTML w 10 prostych krokach to podrcznik przydatny kademu pocztkujcemu
i rednio zaawansowanemu webmasterowi. Opisuje rozwizania ponad 250 typowych
problemw wystpujcych przy tworzeniu stron WWW. Kady temat przedstawiony jest
w postaci ilustrowanego przykadu. Dziki temu kady moe szybko i bez problemw
pozna jzyk HTML podstaw kadego serwisu WWW. Wykonujc wszystkie zadania
po kolei, mona pozna podstawy projektowania stron WWW, poczwszy od
stosowania pierwszych znacznikw (elementw skadowych jzyka HTML),
skoczywszy na umieszczaniu gotowych witryn na serwerze.
Struktura dokumentu HTML
Znaczniki META
Wprowadzanie i formatowanie tekstu
Umieszczanie obrazw w dokumentach HTML
Osadzanie plikw multimedialnych i apletw Javy
Tworzenie tabel
Projektowanie formularzy
Formatowanie z wykorzystaniem arkuszy stylw CSS
Proste skrypty JavaScript
Korzystanie z narzdzi tekstowych i graficznych
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Ta ksika to prawdziwy szwajcarski scyzoryk znajdziesz w niej wszystkie

wiadomoci, ktre mog okaza si niezbdne przy tworzeniu stron WWW.
Spis treci
O Autorach ................................................................................................................................................................................................... 13
Wprowadzenie ............................................................................................................................................................................................. 15
Cz 1. Struktura dokumentu w jzyku HTML .......................................................................... 19

Zadanie 1. Wprowadzanie znacznikw .................................................................................................................................................... 20
Zadanie 2. Tworzenie struktury dokumentu ........................................................................................................................................... 22
Zadanie 3. Znacznik Meta tworzenie sw kluczowych ...................................................................................................................... 24
Zadanie 4. Znacznik Meta tworzenie opisu strony ............................................................................................................................. 26
Zadanie 5. Znacznik Meta informacje o autorze dokumentu .............................................................................................................. 28
Zadanie 6. Znacznik Meta data wyganicia strony ............................................................................................................................. 30
Zadanie 7. Znacznik Meta odwieanie zawartoci strony ................................................................................................................. 32
Zadanie 8. Znacznik Meta informacje dla robotw internetowych .................................................................................................... 34
Zadanie 9. Kontrolowanie ta dokumentu ............................................................................................................................................... 36
Zadanie 10. Praca z kodem rdowym w przegldarce internetowej .................................................................................................... 38
Cz 2. Praca z tekstem ........................................................................................................ 41

Zadanie 11. Praca z nagwkami ............................................................................................................................................................... 42
Zadanie 12. Praca z akapitami................................................................................................................................................................... 44
Zadanie 13. Stosowanie czcionek ............................................................................................................................................................ 46
Zadanie 14. Ustawianie wielkoci czcionki .............................................................................................................................................. 48
Zadanie 15. Ustawianie koloru czcionki ................................................................................................................................................... 50
Zadanie 16. Stosowanie stylw fizycznych ............................................................................................................................................... 52
Zadanie 17. Stosowanie stylw logicznych .............................................................................................................................................. 54
Zadanie 18. Wstawianie znakw specjalnych .......................................................................................................................................... 56
Zadanie 19. Stosowanie elementu tekst preformatowany ................................................................................................................... 58
Zadanie 20. Stosowanie elementu cytat ............................................................................................................................................... 60
Zadanie 21. Ustawianie marginesw dokumentu .................................................................................................................................... 62
Zadanie 22. Tworzenie listy numerowanej .............................................................................................................................................. 64
Zadanie 23. Modyfikacja stylu listy numerowanej .................................................................................................................................... 66
Zadanie 24. Zmiana wartoci pocztkowej listy numerowanej ............................................................................................................... 68
Zadanie 25. Tworzenie listy wypunktowanej........................................................................................................................................... 70
Spis treci
Zadanie 26. Modyfikacja stylw punktorw ............................................................................................................................................ 72

Zadanie 27. Zagniedanie list .................................................................................................................................................................. 74
Zadanie 28. Tworzenie list definicji .......................................................................................................................................................... 76
Cz 3. Praca z obrazami ....................................................................................................... 79

Zadanie 29. Wstawianie obrazw ............................................................................................................................................................ 80
Zadanie 30. Kontrolowanie odstpw i wyrwnywania ......................................................................................................................... 82
Zadanie 31. Skalowanie obrazw w programie Photoshop Elements ..................................................................................................... 84
Zadanie 32. Optymalizacja obrazw GIF w programie Photoshop Elements ......................................................................................... 86
Zadanie 33. Optymalizacja obrazw JPEG w programie Photoshop Elements ....................................................................................... 88
Zadanie 34. Optymalizacja obrazw PNG w programie Photoshop Elements ....................................................................................... 90
Cz 4. Audio i wideo ............................................................................................................ 93

Zadanie 35. Osadzanie plikw audio ........................................................................................................................................................ 94
Zadanie 36. Dwiki odtwarzane w tle .................................................................................................................................................... 96
Zadanie 37. Osadzanie sekwencji wideo .................................................................................................................................................. 98
Zadanie 38. Osadzanie apletw Javy ..................................................................................................................................................... 100
Cz 5. Hipercza .............................................................................................................. 103

Zadanie 39. Tworzenie hiperczy ........................................................................................................................................................ 104
Zadanie 40. Okrelanie cieek ............................................................................................................................................................. 106
Zadanie 41. Tworzenie odnonikw mailto .......................................................................................................................................... 108
Zadanie 42. Tworzenie odnonikw do innych miejsc w tym samym dokumencie ............................................................................. 110
Cz 6. Tworzenie tabel ....................................................................................................... 113

Zadanie 43. Tworzenie tabel ................................................................................................................................................................. 114
Zadanie 44. Obramowanie tabeli .......................................................................................................................................................... 116
Zadanie 45. Due komrki ................................................................................................................................................................. 118
Zadanie 46. Wyrwnywanie elementw tabeli .................................................................................................................................... 120
Zadanie 47. Okrelanie wymiarw elementw tabeli .......................................................................................................................... 122
Zadanie 48. To tabeli ............................................................................................................................................................................ 124
Zadanie 49. Zagniedanie tabel............................................................................................................................................................ 126
Zadanie 50. Dalsze porzdkowanie danych w tabelach ........................................................................................................................ 128
Spis treci
Cz 7. Praca z formularzami ............................................................................................... 131

Zadanie 51. Dodawanie elementw formularzy ................................................................................................................................... 132
Zadanie 52. Formatowanie pl tekstowych .......................................................................................................................................... 134
Zadanie 53. Formatowanie pl przeznaczonych do wprowadzania hase ............................................................................................ 136
Zadanie 54. Formatowanie obszarw tekstowych ............................................................................................................................... 138
Zadanie 55. Formatowanie pl wyboru ................................................................................................................................................ 140
Zadanie 56. Formatowanie przyciskw opcji ........................................................................................................................................ 142
Zadanie 57. Formatowanie list rozwijanych .......................................................................................................................................... 144
Zadanie 58. Formatowanie list wyboru ................................................................................................................................................. 146
Zadanie 59. Formatowanie pl typu file ................................................................................................................................................ 148
Zadanie 60. Formatowanie przyciskw typu Submit i Reset ................................................................................................................ 150
Zadanie 61. Stosowanie obrazkw w roli przyciskw typu Submit ..................................................................................................... 152
Zadanie 62. Stosowanie ukrytych pl formularzy ................................................................................................................................. 154
Zadanie 63. Okrelanie kolejnoci, w jakiej naley porusza si po polach formularza ....................................................................... 156
Zadanie 64. Stosowanie zestaww pl ................................................................................................................................................. 158
Cz 8. Praca z ramkami ..................................................................................................... 161

Zadanie 65. Tworzenie dokumentu gwnego ..................................................................................................................................... 162
Zadanie 66. Okrelanie rozmiarw ramek ........................................................................................................................................... 164
Zadanie 67. Granice ramek ................................................................................................................................................................... 166
Zadanie 68. Marginesy i paski przewijania ramek.................................................................................................................................. 168
Zadanie 69. Zagniedanie ramek ......................................................................................................................................................... 170
Zadanie 70. Wybr ramki docelowej .................................................................................................................................................... 172
Zadanie 71. Informacje noframes .......................................................................................................................................................... 174
Zadanie 72. Pywajce ramki ................................................................................................................................................................. 176
Cz 9. Kaskadowe arkusze stylw (CSS) .............................................................................. 179

Zadanie 73. Spisywanie regu stylu ........................................................................................................................................................ 180
Zadanie 74. Tworzenie osadzonego arkusza stylw ............................................................................................................................. 182
Zadanie 75. Tworzenie zewntrznego arkusza stylw ......................................................................................................................... 184
Zadanie 76. Tworzenie klas stylw ....................................................................................................................................................... 186
Zadanie 77. Waciwo font-family ...................................................................................................................................................... 188
Zadanie 78. Okrelanie wielkoci czcionki za pomoc sw kluczowych ............................................................................................ 190
Zadanie 79. Okrelanie wielkoci czcionki poprzez podanie jej fizycznych wymiarw ....................................................................... 192
Zadanie 80. Praca ze stylami czcionek .................................................................................................................................................. 194
Spis treci
Zadanie 81. Skrcony zapis waciwoci z grupy font ........................................................................................................................... 196

Zadanie 82. Kolor czcionki i kolor ta ................................................................................................................................................... 198
Zadanie 83. Kontrolowanie odstpw midzy znakami i midzy sowami .......................................................................................... 200
Zadanie 84. Kontrolowanie odstpw midzy wierszami i wyrwnywania w pionie .......................................................................... 202
Zadanie 85. Waciwo text-decoration ............................................................................................................................................. 204
Zadanie 86. Waciwo text-transform ............................................................................................................................................... 206
Zadanie 87. Kontrolowanie wyrwnywania tekstu i wci .................................................................................................................. 208
Zadanie 88. Praca z obrazami wywietlanymi w tle .............................................................................................................................. 210
Zadanie 89. Waciwoci z grupy padding ............................................................................................................................................. 212
Zadanie 90. Waciwoci z grupy border-style ..................................................................................................................................... 214
Zadanie 91. Waciwoci z grupy border-width ................................................................................................................................... 216
Zadanie 92. Waciwoci z grupy border-color .................................................................................................................................... 218
Zadanie 93. Skrcony zapis waciwoci z grupy border ...................................................................................................................... 220
Zadanie 94. Waciwoci z grupy margin .............................................................................................................................................. 222
Zadanie 95. Okrelanie wymiarw poszczeglnych elementw .......................................................................................................... 224
Zadanie 96. Waciwo float ................................................................................................................................................................ 226
Zadanie 97. Kontrolowanie stylw wypunktowania ............................................................................................................................. 228
Zadanie 98. Kontrolowanie stylw numerowania ................................................................................................................................ 230
Zadanie 99. Tworzenie warstw o wsprzdnych bezwzgldnych ....................................................................................................... 232
Zadanie 100. Tworzenie warstw o wsprzdnych wzgldnych .......................................................................................................... 234
Zadanie 101. Deklarowanie obszarw obcinania warstw .................................................................................................................... 236
Cz 10. Proste skrypty w jzyku JavaScript ............................................................................ 239

Zadanie 102. Przygotowywanie dokumentw ...................................................................................................................................... 240
Zadanie 103. Wstawianie informacji o dacie i godzinie ........................................................................................................................ 242
Zadanie 104. Zmiana zawartoci strony w zalenoci od pory dnia ..................................................................................................... 244
Zadanie 105. Umieszczanie informacji na pasku stanu przegldarki ..................................................................................................... 246
Zadanie 106. Ukrywanie adresw e-mail przed spamerami ................................................................................................................. 248
Zadanie 107. Wczytywanie obrazw z wyprzedzeniem ...................................................................................................................... 250
Zadanie 108. Efekt zmieniajcych si obrazw ..................................................................................................................................... 252
Zadanie 109. Tworzenie okien wyskakujcych ..................................................................................................................................... 254
Spis treci
Cz 11. Elementy opracowane przez firmy niezalene .............................................................. 257

Zadanie 110. Dodawanie bezpatnego paska wyszukiwania Google .................................................................................................... 258
Zadanie 111. Dodawanie bezpatnego paska z wiadomociami ........................................................................................................... 260
Zadanie 112. Dodawanie moliwoci gosowania ................................................................................................................................. 262
Zadanie 113. Program partnerski Amazon.com ................................................................................................................................... 264
Zadanie 114. Dodawanie darmowego licznika odwiedzin .................................................................................................................... 266
Zadanie 115. Dodawanie informacji o pogodzie ................................................................................................................................... 268
Cz 12. TextPad ................................................................................................................. 271

Zadanie 116. Pobieranie TextPada z internetu ..................................................................................................................................... 272
Zadanie 117. Tworzenie i otwieranie dokumentw ............................................................................................................................ 274
Zadanie 118. Poruszanie si po tekcie ................................................................................................................................................. 276
Zadanie 119. Zaznaczanie kodu ............................................................................................................................................................ 278
Zadanie 120. Korzystanie ze Schowka .................................................................................................................................................. 280
Zadanie 121. Zarzdzanie plikami ......................................................................................................................................................... 282
Zadanie 122. Narzdzia Znajd i Zastp ............................................................................................................................................... 284
Zadanie 123. Wyszukiwanie acuchw w kilku plikach jednoczenie ................................................................................................. 286
Zadanie 124. Odnajdywanie nawiasw do pary .................................................................................................................................... 288
Zadanie 125. Sprawdzanie pisowni ....................................................................................................................................................... 290
Zadanie 126. Praca z Selektorem dokumentw ................................................................................................................................... 292
Zadanie 127. Tworzenie przestrzeni roboczych .................................................................................................................................. 294
Zadanie 128. Praca z bibliotekami wstawek ......................................................................................................................................... 296
Zadanie 129. Edytowanie bibliotek wstawek ........................................................................................................................................ 298
Zadanie 130. Pobieranie bibliotek wstawek z internetu ....................................................................................................................... 300
Zadanie 131. Wsppraca TextPada z przegldarkami internetowymi ................................................................................................ 302
Zadanie 132. Konfiguracja narzdzia HTML Validator ......................................................................................................................... 304
Zadanie 133. Tworzenie makr wywoywanych z klawiatury ................................................................................................................ 306
Zadanie 134. Tworzenie makr wstawiajcych znaczniki-pojemniki ..................................................................................................... 308
Zadanie 135. Kolorowanie skadni ........................................................................................................................................................ 310
Cz 13. Praca w edytorze HomeSite ...................................................................................... 313

Zadanie 136. Rekonesans po interfejsie edytora HomeSite ................................................................................................................. 314
Zadanie 137. Tworzenie nowego projektu ........................................................................................................................................... 316
Zadanie 138. Organizowanie folderw projektu .................................................................................................................................. 318
Zadanie 139. Rozpoczcie pracy nad nowym dokumentem ................................................................................................................ 320
10
Spis treci
Zadanie 140. Tworzenie i uywanie szablonw stron .......................................................................................................................... 322

Zadanie 141. Wstawianie i konwersja plikw....................................................................................................................................... 324
Zadanie 142. Odnajdywanie i wstawianie znacznikw i atrybutw ..................................................................................................... 326
Zadanie 143. Porzdkowanie kodu za pomoc funkcji CodeSweeper ................................................................................................. 328
Zadanie 144. Edycja kaskadowych arkuszy stylw w oknie edytora stylw ........................................................................................ 330
Zadanie 145. Podgld stron w zewntrznych przegldarkach .............................................................................................................. 332
Zadanie 146. Formatowanie tekstu strony ........................................................................................................................................... 334
Zadanie 147. Tworzenie list .................................................................................................................................................................. 336
Zadanie 148. Sprawdzanie pisowni ....................................................................................................................................................... 338
Zadanie 149. Wstawianie kresek poziomych ....................................................................................................................................... 340
Zadanie 150. Wyszukiwanie cigw znakw w dokumencie HTML .................................................................................................... 342
Zadanie 151. Zamienianie cigw znakw w dokumencie HTML ....................................................................................................... 344
Zadanie 152. Wstawianie obrazw ....................................................................................................................................................... 346
Zadanie 153. Korzystanie z edytora map obrazw .............................................................................................................................. 348
Zadanie 154. Automatyczne wstawianie znacznikw ........................................................................................................................... 350
Zadanie 155. Wstawianie tabel ............................................................................................................................................................. 352
Zadanie 156. Konstruowanie ukadw ramek ...................................................................................................................................... 354
Zadanie 157. Tworzenie formularzy ..................................................................................................................................................... 356
Zadanie 158. Okrelanie wagi strony .................................................................................................................................................... 358
Zadanie 159. Weryfikacja kodu i czy .................................................................................................................................................. 360
Zadanie 160. Dostosowywanie ustawie edytora HomeSite ............................................................................................................... 362
Zadanie 161. Automatyczne tworzenie kopii zapasowych ................................................................................................................... 364
Zadanie 162. Ustawianie opcji publikowania ........................................................................................................................................ 366
Zadanie 163. Publikowanie plikw i folderw ...................................................................................................................................... 368
Cz 14. Praca w rodowisku Dreamweaver ............................................................................. 371

Zadanie 164. Okrelanie przegldarek uywanych do podgldu stron ................................................................................................ 372
Zadanie 165. Definiowanie serwisw ................................................................................................................................................... 374
Zadanie 166. Uywanie map serwisw ................................................................................................................................................. 376
Zadanie 167. Ustalanie waciwoci strony ........................................................................................................................................... 378
Zadanie 168. Ustawianie opcji wywietlania kodu ................................................................................................................................ 380
Zadanie 169. Korzystanie z urywkw kodu.......................................................................................................................................... 382
Zadanie 170. Wstawianie i formatowanie tekstu ................................................................................................................................. 384
Zadanie 171. Tworzenie list .................................................................................................................................................................. 386
Zadanie 172. Sprawdzanie pisowni tekstu ............................................................................................................................................ 388
Spis treci
11
Zadanie 173. Uywanie funkcji wyszukaj i zastp.................................................................................................................................. 390

Zadanie 174. Importowanie kodu HTML wygenerowanego w edytorze Word ................................................................................. 392
Zadanie 175. Importowanie tabel danych z osobnych aplikacji ............................................................................................................ 394
Zadanie 176. Wstawianie i formatowanie obrazw ............................................................................................................................. 396
Zadanie 177. Tworzenie tekstu w formacie Flash ................................................................................................................................ 398
Zadanie 178. Tworzenie przyciskw w formacie Flash ........................................................................................................................ 400
Zadanie 179. Testowanie i dostosowywanie przyciskw w formacie Flash ........................................................................................ 402
Zadanie 180. Wyznaczanie zewntrznego edytora obrazw ............................................................................................................... 404
Zadanie 181. Tworzenie map obrazw ................................................................................................................................................ 406
Zadanie 182. Przygotowywanie obrazw przeczanych ..................................................................................................................... 408
Zadanie 183. Projektowanie paskw nawigacyjnych ............................................................................................................................ 410
Zadanie 184. Tworzenie tabel ............................................................................................................................................................... 412
Zadanie 185. Modyfikowanie istniejcych tabel .................................................................................................................................... 414
Zadanie 186. Tworzenie formularzy ..................................................................................................................................................... 416
Zadanie 187. Opracowywanie ukadw ramek .................................................................................................................................... 418
Zadanie 188. Posugiwanie si technik warstw ................................................................................................................................... 420
Zadanie 189. Tworzenie arkuszy stylw ............................................................................................................................................... 422
Zadanie 190. Definiowanie akcji ........................................................................................................................................................... 424
Zadanie 191. Definiowanie akcji wstpnego pobierania obrazw ....................................................................................................... 426
Zadanie 192. Definiowanie akcji otwierania okna przegldarki ............................................................................................................ 428
Zadanie 193. Definiowanie akcji sprawdzania danych w formularzu ................................................................................................... 430
Zadanie 194. Definiowanie akcji wywietlania tekstu na pasku stanu .................................................................................................. 432
Zadanie 195. Korzystanie z panelu zasobw ........................................................................................................................................ 434
Zadanie 196. Okrelanie danych zdalnego serwera.............................................................................................................................. 436
Zadanie 197. Wysyanie i pobieranie plikw ........................................................................................................................................ 438
Zadanie 198. Zarzdzanie podziaem pracy .......................................................................................................................................... 440
Cz 15. Praca w rodowisku FrontPage .................................................................................. 443

Zadanie 199. Zakadanie serwisu WWW ............................................................................................................................................. 444
Zadanie 200. Tworzenie nowych stron w strukturze nawigacyjnej ..................................................................................................... 446
Zadanie 201. Nadawanie nazw i zapisywanie stron .............................................................................................................................. 448
Zadanie 202. Przegldanie i zmienianie waciwoci stron ................................................................................................................... 450
Zadanie 203. Stosowanie motyww ..................................................................................................................................................... 452
Zadanie 204. Tworzenie nowych motyww ........................................................................................................................................ 454
Zadanie 205. Tworzenie i uywanie szablonw.................................................................................................................................... 456
12
Spis treci
Zadanie 206. Wstawianie i formatowanie tekstu ................................................................................................................................. 458

Zadanie 207. Sprawdzanie i poprawianie tekstu strony ....................................................................................................................... 460
Zadanie 208. Wstawianie obrazw clipart i z pliku .............................................................................................................................. 462
Zadanie 209. Definiowanie zastpczego tekstu .................................................................................................................................... 464
Zadanie 210. Rysowanie i formatowanie ksztatw i linii ..................................................................................................................... 466
Zadanie 211. Wstawianie na strony filmw w formacie Flash .............................................................................................................. 468
Zadanie 212. Tworzenie obiektw WordArt ...................................................................................................................................... 470
Zadanie 213. Dodawanie paskw nawigacyjnych ................................................................................................................................. 472
Zadanie 214. Wstawianie i wyrwnywanie transparentw stron ........................................................................................................ 474
Zadanie 215. Tworzenie przyciskw interaktywnych .......................................................................................................................... 476
Zadanie 216. Zmienianie ta i kolorw stron ........................................................................................................................................ 478
Zadanie 217. Tworzenie list punktowanych i numerowanych ............................................................................................................. 480
Zadanie 218. Wywietlanie obramowania tekstu ................................................................................................................................. 482
Zadanie 219. Cieniowanie blokw tekstu i pustych wierszy ................................................................................................................ 484
Zadanie 220. Wstawianie tabel ............................................................................................................................................................. 486
Zadanie 221. Tworzenie i usuwanie wierszy, kolumn i komrek ........................................................................................................ 488
Zadanie 222. Rozdzielanie i scalanie komrek tabel ............................................................................................................................. 490
Zadanie 223. Zmienianie wymiarw i formatowania komrek ............................................................................................................ 492
Zadanie 224. Wypenianie tabel grafik i tekstem ................................................................................................................................ 494
Zadanie 225. Tworzenie ramek ............................................................................................................................................................ 496
Zadanie 226. Stosowanie techniki warstw ............................................................................................................................................ 498
Zadanie 227. Definiowanie zakadek w tekcie stron ........................................................................................................................... 500
Zadanie 228. Wpisywanie sw kluczowych i opisw stron ................................................................................................................ 502
Zadanie 229. Publikowanie utworzonych serwisw ............................................................................................................................ 504
Skorowidz ............................................................................................................................................................................... 507
Cz 14. Praca w rodowisku Dreamweaver

Zadanie 164.
Zadanie 165.
Zadanie 166.
Zadanie 167.
Zadanie 168.
Zadanie 169.
Zadanie 170.
Zadanie 171.
Zadanie 172.
Zadanie 173.
Zadanie 174.
Zadanie 175.
Zadanie 176.
Zadanie 177.
Zadanie 178.
Zadanie 179.
Zadanie 180.
Zadanie 181.
Zadanie 182.
Zadanie 183.
Zadanie 184.
Zadanie 185.
Zadanie 186.
Zadanie 187.
Zadanie 188.
Zadanie 189.
Zadanie 190.
Zadanie 191.
Zadanie 192.
Zadanie 193.
Zadanie 194.
Zadanie 195.
Zadanie 196.
Zadanie 197.
Zadanie 198.
Okrelanie przegldarek uywanych do podgldu stron

Definiowanie serwisw
Uywanie map serwisw
Ustalanie waciwoci strony
Ustawianie opcji wywietlania kodu
Korzystanie z urywkw kodu
Wstawianie i formatowanie tekstu
Tworzenie list
Sprawdzanie pisowni tekstu
Uywanie funkcji wyszukaj i zastp
Importowanie kodu HTML wygenerowanego w edytorze Word
Importowanie tabel danych z osobnych aplikacji
Wstawianie i formatowanie obrazw
Tworzenie tekstu w formacie Flash
Tworzenie przyciskw w formacie Flash
Testowanie i dostosowywanie przyciskw w formacie Flash
Wyznaczanie zewntrznego edytora obrazw
Tworzenie map obrazw
Przygotowywanie obrazw przeczanych
Projektowanie paskw nawigacyjnych
Tworzenie tabel
Modyfikowanie istniejcych tabel
Tworzenie formularzy
Opracowywanie ukadw ramek
Posugiwanie si technik warstw
Tworzenie arkuszy stylw
Definiowanie akcji
Definiowanie akcji wstpnego pobierania obrazw
Definiowanie akcji otwierania okna przegldarki
Definiowanie akcji sprawdzania danych w formularzu
Definiowanie akcji wywietlania tekstu na pasku stanu
Korzystanie z panelu zasobw
Okrelanie danych zdalnego serwera
Wysyanie i pobieranie plikw
Zarzdzanie podziaem pracy
372
Zadanie
164
Uwagi
Firma Macromedia udostpnia

darmowe wersje prbne swoich
programw, w tym take
rodowiska Dreamweaver MX,
winternecie pod adresem http://
www.macromedia.com/downloads.
Aby przegldark mona byo

umieci na licie, trzeba najpierw
mie j zainstalowan w komputerze.
Najnowsz wersj przegldarki
Microsoft Internet Explorer znajdziesz
w serwisie firmy Microsoft pod
adresem http://www.microsoft.com/
windows/ie_intl/pl/; przegldark
Netscape Navigator na stronach
firmy Netscape (http://channels.
netscape.com/ns/browsers),
natomiast polsk wersj zgodnej
zNetscape Navigator przegldarki
Mozilla pobra mona ze stron
projektu znajdujcych si pod
adresem http://www.mozillapl.org.
wietn kolekcj starszych wersji
rnych przegldarek zebrano
wserwisie http://browsers.evolt.org.
Cz 14.
Okrelanie przegldarek
uywanych do podgldu stron
Dobry projektant stron internetowych, zanim udostpni strony na serwerze,
testuje je w wicej ni jednej przegldarce, a nawet w rnych wersjach
poszczeglnych przegldarek. Dziki temu moe si zorientowa, czy wygld
lub dziaanie ktrej ze stron nie ulegaj zaburzeniu po wywietleniu
zapomoc niektrych przegldarek, czy te nawet tylko jednej z wersji ktrej
z przegldarek. W tym zadaniu ustawimy przegldarki, ktre bd uywane
dopogldu edytowanych stron.
1. Po uruchomieniu rodowiska Dreamweaver MX wybierz z menu File
pozycj Preview in Browser, a z otwartego w ten sposb podmenu polecenie
Edit Browser List.
2. Ukae si okno dialogowe Preferences (rysunek 164.1). Zaznacz po lewej
stronie element Preview in Browser. W prawej czci okna moesz teraz
uzupeni list uywanych przegldarek, klikajc przycisk ze znakiem
plusa.
Naprawd nie sposb mie zbyt

wiele przegldarek do wyboru.
Imwicej rodzajw masz dostpnych,
im wicej wersji kadego typu
przegldarki, tym dokadniej moesz
przetestowa tworzone strony
iusun wszelkie niezgodnoci
przed wysaniem stron na serwer.
Ostrzeenie
Wybierajc do zainstalowania
przegldarki i poszczeglne ich
wersje, bierz pod uwag docelow
grup odbiorcw tworzonych stron.
Jeli bd to w wikszoci osoby
zafascynowane technologi, nie musisz
si za bardzo przejmowa starszymi
wersjami. Jeli serwis ma by
przeznaczony dla szerszej publicznoci,
spord ktrej wiele osb korzysta
prawdopodobnie zestarszego
sprztu ioprogramowania, upewnij
si, estrony bd u nich dziaa.
Przetestuj serwis w rnych
wersjach przegldarek Internet
Explorer i Netscape Navigator
wczeniejszych ni 6.0.
Rysunek 164.1. Widok listy przegldarek uywanych do podgldu umoliwia dodawanie przegldarek do listy
Praca w rodowisku Dreamweaver
373
3. Po klikniciu przycisku ze znakiem plusa, pojawia si okno dialogowe

Add Browser (rysunek 164.2). Wpisz w nim nazw, pod jak przegldarka
bdzie widoczna na licie, wyznacz ciek do pliku programu i zdecyduj,
czy przegldarka ma by moe ustawiona jako gwna (Primary Browser)
albo dodatkowa (Secondary Browser).
Zadanie
164
Wskazwka
Ustawienie przegldarki jako gwnej

oznacza, e mona j szybko
uruchomi klawiszem F12.
Przegldarce dodatkowej odpowiada
kombinacja klawiszy Ctrl+F12.
Pozostae przegldarki trzeba
uruchamia z menu.
Przed rozpoczciem pracy nad

serwisem w jzyku polskim, warto
ustawi domylne kodowanie znakw
w nowo tworzonych dokumentach
nastandard ISO 8859-2. W tym
celu wybierz z menu Edit polecenie
Preferences i w lewej czci okna,
ktre si otworzy, zaznacz element
New Document. Nastpnie z listy
rozwijanej Default Encoding wybierz
pozycj Central European
(ISO-8859-2).
Rysunek 164.2. Okrelanie parametrw przegldarki dodawanej do listy
4. Kliknij przycisk OK, aby zatwierdzi ustawienia przegldarki i powrci

do okna dialogowego Preferences.
5. Powtarzaj kroki od 2. do 4. dla kadej przegldarki, ktr chcesz umieci
na licie.
6. Kliknij przycisk OK, aby zamkn okno dialogowe Preferences.
Odsyacz
Kiedy serwis ju na pewno dobrze

dziaa i wyglda we wszystkich
przegldarkach, wylij jego pliki
naserwer WWW (wicej informacji
na ten temat znajdziesz w zadaniu 197.).
374
Zadanie
165
Uwagi
Nazwa serwisu moe by dowolna,

na przykad moesz wykorzysta
adres domenowy, ale dobrymi
nazwami bd te Serwis
Roberta albo Serwis
korporacji ABC.
Obsuga okien i paneli w obszarze

roboczym Dreamweaver MX jest
charakterystyczna dla programw
Macromedia z oznaczeniem MX,
naprzykad Flash MX. Zawarto
panelu mona na przemian wywietla
i ukrywa, klikajc ikon trjkta
obok nazwy panelu (omawiany
wtym zadaniu panel Site znajduje si
w oknie Files). Jeli niechccy usunie
si z obszaru roboczego okno lub
panel, mona je ponownie wywietli
(lub odsoni zawarto zwinitego
panelu), znajdujc nazw panelu
wmenu Windows.
Cz 14.
Definiowanie serwisw
Prac nad projektem w rodowisku Dreamweaver MX rozpoczyna si
odzdefiniowania serwisu. Trzeba wpisa nazw, okreli lokalne i docelowe
pooenie plikw, a take inne szczegowe ustawienia. Struktura folderw
lokalnych zostanie odtworzona na serwerze, nie bdzie wic problemw
zczami midzy plikami serwisu.
1. Wybierz z menu Site polecenie New Site, aby otworzy okno dialogowe
Site Definition (rysunek 165.1). Bdziemy zajmowa si na razie tylko
panelem Basic, upewnij si wic, e to wanie ten z dwch jest otwarty.
Rysunek 165.1. Pierwszy krok definiowania serwisu to ustalenie nazwy
2. Wpisz nazw nowego serwisu i kliknij przycisk Next.
Ostrzeenie
Edycja plikw na zdalnym serwerze

ma dwie wady. Po pierwsze, strony
s publicznie dostpne w czasie,
gdynad nimi pracujesz. Po drugie,
trzeba specjalnie kopiowa pliki
nadysk lokalny w celu utworzenia
kopii zapasowej.
3. Moesz ustali, e bdziesz uywa jakiego rodzaju technologi

aktywnego generowania stron na serwerze (tak jak ColdFusion,
ASP.NET, JSP czy PHP). Zaznacz opcj Yes, aby wybra konkretn
technologi, lub opcj No, aby zrezygnowa z tych rozwiza.
4. Kliknij przycisk Next. Trzecia strona kreatora zawiera zapytanie o tryb
edycji stron: lokalnie (do wyboru dysk albo sie) czy na zdalnym serwerze.
5. Zaznacz opcj Edit Local Copies on My Machine. Musisz teraz wyznaczy
ciek do folderu, w ktrym chcesz przechowywa pliki nowego serwisu.
6. Kliknij przycisk Next i na nastpnej stronie wybierz metod czenia si
z serwerem zdalnym. W zalenoci od ustawionej metody w panelu
dostpne bd inne opcje szczegowe.
375
7. Kliknij przycisk Next. Na otwartej teraz stronie moesz wczy lub

wyczy system blokowania plikw (Check In-Check Out) dla nowego serwisu.
Zadanie
165
8. Kliknij przycisk Next i sprawd jeszcze raz wszystkie parametry

(rysunek 165.2).
Wskazwki
System blokowania plikw (Check

In-Check Out) suy zapobieganiu
sytuacji, kiedy dwie rne osoby
rwnoczenie zmieniaj ten sam
plik. Jeli pracujesz nad serwisem
razem z kim innym, zaznacz opcj
Yes, enable check in and check out.
Jeli nad serwisem pracujesz tylko
Ty, zaznacz opcj No.
Jeli podczas wczytywania serwisu

wjego gwnym folderze zostanie
wykryty plik index.html lub
index.htm, automatycznie zostanie
on oznaczony jako strona gwna
serwisu. Jeli jednak tworzysz
stron gwn ju po otwarciu
projektu, musisz oznaczy jej plik
rcznie.
Rysunek 165.2. Sprawd ponownie poprawno ustawie
9. Kliknij przycisk Done. Nowy serwis jest ju zdefiniowany i mona teraz

dodawa do niego strony.
10. Przede wszystkim potrzebujesz pliku o nazwie index.html. Zapisz wic
pod t nazw nowy, pusty dokument. W panelu Site w oknie Files kliknij
ikon tego pliku prawym przyciskiem i wybierz z menu polecenie Set as
Home Page, aby oznaczy plik jako stron gwn serwisu. Jeli teraz zlisty
rozwijanej w tym samym panelu (z tej po prawej stronie) wybierzesz
pozycj Map View, zobaczysz zacztek mapy nowego serwisu (rysunek 165.3).
Rysunek 165.3. Na razie mapa serwisu
zawiera tylko jeden element
Odsyacz
Tworzenie serwisu w programie

FrontPage moe polega na wybraniu
szablonu i przygotowywaniu na jego
podstawie kolejnych stron. Przeczytaj
cz 15., aby zdoby wicej
informacji na ten temat.
376
Zadanie
166
Cz 14.
Uywanie map serwisw

Widok mapy serwisu umoliwia tworzenie i nadzr nad ukadem czy
pomidzy stronami, a take otwieranie poszczeglnych plikw do edycji. Jest
to jak gdyby spojrzenie na cay serwis z lotu ptaka, ktrym mona obj siatk
stron i zorientowa si w strukturze serwisu. Istnieje jednake pewna przeszkoda:
najpierw trzeba utworzy serwis, zapisa kilka plikw, a dopiero pniej mona
podziwia ich schemat na mapie serwisu. Przed podjciem poniszych krokw
trzeba wic nie tylko zdefiniowa serwis, ale te zapisa przynajmniej dwa pliki.
W tym przykadzie wykorzystamy pliki strony gwnej index.html oraz podstrony
kontakt.html.
1. Aby wczyta uprzednio utworzony serwis i wywietli jego map, wybierz
z menu Site polecenie Site Map. Jeli dostpny jest wicej ni jeden
serwis, zaznacz na licie wszystkich serwisw (rysunek 166.1 przedstawia
zawierajce j okno) nazw serwisu, ktrym zamierzasz si zajmowa,
apotem kliknij przycisk Done.
Rysunek 166.1. W oknie dialogowym Edit Sites zaznacz
nazw serwisu, nad ktrym bdziesz pracowa
2. Po otwarciu serwisu wywietl, jeli trzeba, widok folderw lokalnych

(panel Site w oknie Files, opcja Local View na prawej licie rozwijanej).
Klikajc ikony plusa lub minusa moesz odsania bd ukrywa
zawarto folderw w sposb analogiczny jak w oknach Eksploratora
systemu Windows. W tym widoku moesz obserwowa rozmieszczenie
plikw serwisu w folderach.
Ostrzeenie
Jeli na licie w oknie Edit Sites nie

ma serwisu, ktry powinien tam si
znajdowa, to znaczy, e w ogle
nie zosta zdefiniowany, czy to
zpowodu roztargnienia, czy te
przerwania procesu definiowania.
Wybierz z menu Site polecenie
NewSite i utwrz serwis, uwanie
podajc wszystkie wymagane
informacje.
3. Aby otworzy jeden z plikw, kliknij dwukrotnie jego ikon w widoku

eksploratora. Plik zostaje otwarty w nowym oknie edytora i mona go
teraz podda edycji.
4. Aby szybko utworzy cze midzy dwoma stronami serwisu, rozszerz
panel Site, klikajc ostatni na pasku narzdzi panelu przycisk Expand/
Collapse. W zalenoci od ukadu obszaru roboczego panel albo przeksztaci
si w okno zmaksymalizowane na cae okno Dreamweaver MX, albo
jedynie zawierajce go okno si poszerzy (rysunek 166.2).
5. Za pomoc pierwszego i trzeciego od lewej przycisku na pasku narzdzi
panelu moesz przecza widok w lewej czci okna pomidzy widokami
folderw serwisu (rysunek 166.3) i mapy serwisu. Przytrzymanie przycisku
trzeciego powoduje otwarcie menu, ktre umoliwia wczenie lub
wyczenie widoku folderw lokalnych w prawej czci okna.
377
6. Zaznacz ikon pliku index.htm na mapie serwisu i przecignij ikon

celownika na nazw pliku w widoku folderw lokalnych po prawej
stronie. Po ustanowieniu cza wybrany plik pojawi si w widoku mapy
serwisu, a samo cze zostanie wywietlone w postaci kreski (rysunek 166.4).
Zadanie
166
7. Kontynuuj tworzenie czy lub zamknij map serwisu, ponownie klikajc

przycisk rozkadania-skadania panelu.
Wskazwki
Aby w widoku folderw odsoni

lub ukry zawarto folderu, moesz
take klikn dwukrotnie jego nazw.
Po utworzeniu cza pomidzy

dwiema stronami w opisany tu
sposb, na stronie pocztkowej
umieszczane jest cze tekstowe
(wtym przypadku bdzie to tekst
kontakt, umoliwiajcy przejcie
dostrony kontakt.html). Pniej
moesz zmieni je na cze graficzne
albo pozostawi tekst, a tylko,
naprzykad, zmieni pooenie
iformatowanie tekstu.
W poprzednich wersjach programu

Dreamweaver mapa serwisu bya
wywietlana w osobnym oknie
iwywietlenie go ponad pozostaymi
oknami w celu korzystania z widoku
mapy wymagao kliknicia na pasku
zada przycisku odpowiadajcego
temu oknu. Przycisk skadania-rozkadania spenia z grubsza podobn
funkcj, umoliwiajc wywietlenie
mapy, jeli jest potrzebna. Ten sam
panel, zablokowany po prawej
stronie obszaru roboczego, moe
suy do otwierania plikw
doedycji.
Rysunek 166.2. Rozszerzony panel Sites
Rysunek 166.3. Ten sam panel po przeczeniu lewej czci okna na widok folderw serwisu
Odsyacz
Rysunek 166.4. cze pomidzy dwiema stronami wywietlone w widoku mapy serwisu
W rodowisku FrontPage dostpny

jest widok nawigacyjny umoliwiajcy
podobne operacje jak widok mapy
serwisu w rodowisku Dreamweaver.
Z czci 15. dowiesz si, jak obsuga
serwisu realizowana jest w rodowisku
FrontPage.
378
Zadanie
167
Uwaga
Obraz szkicu (Tracing Image) peni

rol wzorca. Nie jest wczany
dogotowego serwisu, ale pokazuje
si w edytorze, jak gdyby pod
stron. Dziki tej funkcji mona
doprzygotowanego wczeniej
projektu graficznego strony
dopasowywa wszystkie obrazy,
tabele i ich komrki, ramki i warstwy,
a take wyznacza obszary na tekst.
Za pomoc suwaka regulujcego
stopie przeroczystoci szkicu
(Image Transparency) moesz go
troch rozmy, jeli nie jest od razu
przygotowany w ten sposb.
Niewygodnie jest wywietla obraz
szkicu w cakowitej widzialnoci,
poniewa trudno byoby dostrzec
wyranie elementy wstawiane na tle
szkicu.
Cz 14.
Ustalanie waciwoci strony

Ustawienia poszczeglnych stron serwisu powinny by takie same. Poniewa
waciwoci okrelane w omawianym tu oknie s wane tylko w odniesieniu
doedytowanej w danej chwili strony, trzeba ustawia je za kadym razem tak
samo, jeli nawet nie wszystkie, to przynajmniej w jakiej podstawowej czci,
aby serwis by spjny jako cao.
1. Otwrz stron, ktrej waciwoci zamierzasz dostosowa. Wybierz
zmenu Modify polecenie Page Properties.
2. Wpisz tytu strony w pierwszym polu okna dialogowego Page Properties
(rysunek 167.1).
Rysunek 167.1. Dostosuj prawie wszystkie wasnoci aktywnej strony w oknie dialogowym Page Properties
3. Jeli strona ma zawiera tekst w jzyku polskim, upewnij si,

ekodowanie znakw wyszczeglnione w polu Document Encoding
jestustawione na Central European (ISO-8859-2).
379
4. Wybierz obraz ta strony, jeli chcesz. A jeli wolisz wybra raczej

jednolity kolor ta, skorzystaj w tym celu z palety (rysunek 167.2).
Zadanie
167
Wskazwki
Moesz take klikn to strony

prawym przyciskiem myszy i wybra
polecenie Page Properties
zwywietlonego tym sposobem
menu.
Ustalany tu tytu strony bdzie

pojawia si na pasku tytuowym
okna przegldarki, ilekro uytkownik
otworzy stron. Staraj si ukada
raczej krtkie i rzeczowe tytuy.
Sprbuj zwaszcza nie przekracza
okoo 50 znakw dugoci tytuu,
poniewa tytu duszy moe nie
zmieci si na pasku tytuowym
okna przegldarki.
Jeli chcesz zobaczy skutek

wprowadzanych zmian od razu, bez
koniecznoci zamykania okna, kliknij
przycisk Apply zamiast OK.
Rysunek 167.2. To strony mona ozdobi tapet lub pokry jednolitym kolorem
5. Korzystajc z identycznych przyciskw palety dla kadej z tych opcji,

ustaw kolory tekstu (Text), czy (Links), czy odwiedzonych (Visited
Links) i czy aktywnych (Active Links).
6. Wpisz wielkoci marginesw: lewego (Left Margin), grnego (Top Margin),
lewego i prawego rwnoczenie (Width Margin) lub grnego i dolnego
rwnoczenie (Height Margin).
7. Jeli chcesz korzysta z obrazu szkicu, wyznacz ciek do niego w polu
Tracing Image.
8. Kliknij przycisk OK, aby zatwierdzi ustawienia i zobaczy
zmodyfikowan stron.
Odsyacz
W programie FrontPage okno

waciwoci strony zawiera wikszo
omawianych tu opcji. Wyprbuj je
po zapoznaniu si z czci 15.
380
Zadanie
168
Uwaga
Moesz obserwowa stron

rwnoczenie w trybach graficznym
i tekstowym. Kliknij przycisk
znajdujcy si na prawo
odprzycisku widoku kodu, a obszar
edycyjny zostanie rozdzielony
poziomo na obszary widoku
obutypw.
Cz 14.
Ustawianie opcji wywietlania kodu

Zaufaj nam: nie ma innej drogi ni praca nad kodem. Fakt, e Dreamweaver
toedytor graficzny, wcale jeszcze nie oznacza, e nigdy ju nie bdzie trzeba
oglda zapisu jzyka HTML. Co wicej, rodowisko Dreamweaver stworzono
w sposb zachcajcy do cyzelowania kodu strony, ktry jest tu bardzo atwo
dostpny. P lub cay obszar edycyjny mona przeznaczy na podgld kodu
rdowego strony.
1. Uruchom rodowisko Dreamweaver i skoncentruj si nad obszarem
edycyjnym.
2. Na pasku narzdzi edycyjnych kliknij przycisk widoku kodu (Code View,
rysunek 168.1).
Rysunek 168.1. Przycisk widoku kodu
3. Wybierz z menu View element Code View Options. Pojawi si podmenu

zopcjami wywietlania kodu, a przy kadej z ustawionych w danej
chwili opcji bdzie widoczna parafka (rysunek 168.2).
Rysunek 168.2. Podmenu opcji wywietlania kodu
381
4. Moesz wczy nastpujce opcje:

Word Wrap (zawijanie wierszy) umoliwia czytanie i edycj kodu bez
koniecznoci przewijania w poziomie.
Zadanie
168
Line Numbers (numery wierszy) powoduje wywietlenie numerw

wierszy kodu przy lewej krawdzi okna edytora.
Highlight Invalid HTML wyrniaj nieprawidowy kod HTML. Jeli
ta opcja jest zaznaczona, fragmentu kodu niezgodne z zasadami
skadni jzyka HTML bd oznaczane tym tem. Po klikniciu
wadliwego znacznika, informacja o moliwoci jego poprawienia
zostanie wywietlona w oknie Property (rysunek 168.3).
Rysunek 168.3. Sugestia poprawienia znacznika uyj okna Code Inspector
Wskazwki
Oprcz przyciskw paska narzdzi

przeczanie pomidzy widokami
kodu a projektowym umoliwiaj
polecenie Switch View z menu View,
a take kombinacje klawiszy Ctrl+`
(odwrotny apostrof, na lewo
odklawisza 1 to w przypadku
systemu Windows) lub Command+`
(w przypadku komputera Macintosh).
Okno Code Inspector to po prostu

dodatkowe okno edycyjne
otwierane z podmenu Other menu
Window. Wiele niestety samo
zsiebie nie pomoe, znacznik trzeba
poprawi samodzielnie.
Syntax Coloring (kolorowanie skadni) uywaj, jeli chcesz kolorem

odrnia poszczeglne elementy kodu.
Auto Indent (indentacja automatyczna) nacinicie klawisza Enter
podczas edycji kodu przeniesie kursor do nowej linii, ale pod
pierwszy znak w linii poprzedniej.
5. Aby wyczy aktywn opcj, po prostu kliknij jej nazw, a parafka
zniknie.
Odsyacz
W rodowisku Dreamweaver
standardowo dostpne s urywki
kodu HTML przydatne do typowych
zastosowa. Moesz take tworzy
swoje wasne. Koncepcji urywkw
kodu powicone jest nastpne
zadanie.
382
Zadanie
169
Uwagi
Jeli w kodzie kopiowanym z urywka

ma zosta umieszczony fragment
kodu dokumentu, zaznacz odpowiedni
fragment przed wstawieniem urywka.
Nazwy urywkw nie mog zawiera
znakw, ktre nie s dozwolone
wnazwach plikw: zwykych (/)
lubodwrotnych (\) ukonikw,
znakw cudzysowu i rnych
znakw specjalnych.
Cz 14.
Korzystanie z urywkw kodu

W rodowisku Dreamweaver urywek kodu (ang. code snippet) to po prostu zapisany
fragment kodu HTML, CSS, JavaScript czy jakiegokolwiek innego jzyka.
Wygodny w obsudze panel suy tworzeniu, przechowywaniu ikopiowaniu
urywkw. W pakiecie Dreamweaver od razu instalowana jest pewna liczba
urywkw, ktre mona wykorzysta w charakterze inspiracji.
1. Aby wstawi urywek kodu do dokumentu, ustaw kursor w odpowiednim
miejscu w kodzie dokumentu.
2. Wybierz z menu Windows polecenie Snippets, aby otworzy panel urywkw
(rysunek 169.1). Otwrz ktry z folderw i kliknij dwukrotnie nazw
urywka, ktry chcesz wstawi.
Rysunek 169.1. Panel urywkw
3. Aby utworzy nowy urywek, kliknij przycisk z plusem w prawym dolnym

rogu panelu. Otworzysz okno dialogowe Snippet (rysunek 169.2).
Rysunek 169.2. Okno dialogowe Snippet
383
4. Wpisz kolejno nazw i opis urywka w dwch pocztkowych polach.

5. Wybierz typ urywka:
Zadanie
169
Wrap Selection (owi zaznaczenie). Umoliwi Ci rozdzielenie kodu

urywka pomidzy dwa pola. Cz umieszczona w polu Insert Before
zostanie wstawiona przed kodem zaznaczonym w dokumencie,
acz umieszczona w polu Insert After po zaznaczonym fragmencie.
Insert Block (wstaw blok). Po prostu, zawarto pola Insert Code zostanie
wstawiona do dokumentu.
Wskazwka
6. Wybierz typ podgldu:

Design (projektowy). Po zaznaczeniu urywka, w grnej przegrdce
panelu Snippets pojawi si jego podgld graficzny.
Code (kodu). W charakterze podgldu wywietlany bdzie kod
rdowy urywka.
Moesz take wstawi urywek,

klikajc jego nazw prawym
przyciskiem (w systemie Windows)
lub trzymajc klawisz Control
(nakomputerach Macintosh)
iwybierajc z menu kontekstowego
polecenie Insert.
7. Kliknij przycisk OK, aby zamkn okno dialogowe Snippet.

8. Aby zmodyfikowa lub usun urywek, zaznacz go w panelu przycisk
z owkiem (edycja urywka) lub z koszem na mieci (usunicie urywka).
9. Aby organizowa urywki w folderach, korzystaj z przycisku z folderem,
a powstanie nowy folder, do ktrego mona bdzie przecign wybrane
urywki z folderw, ktre istniay ju wczeniej.
Odsyacz
Dobrze, a teraz nauczmy si

wreszcie, jak na serio zaprzc
Dreamweavera do pracy.
Wnastpnym zadaniu zajmiemy si
formatowaniem tekstu.
384
Zadanie
170
Uwagi
Domylnie tekst formatowany jest

czcionk Times New Roman
owielkoci 3. Te i inne waciwoci
mona zmienia w oknie Properties.
W oknie waciwoci znajduj si

przyciski do pogbiania i zmniejszania
stopnia wcicia (przycisk pooony
skrajnie na prawo w drugim rzdzie).
Moesz ich uywa do przesuwania
tekstu po stronie, w lewo albo
wprawo. Indentacja jest realizowana
przez przesunicie o pewn
odlego (po klikniciu przycisku
pogbiania indentacji). Jeli tekst
przesunie si za daleko, moesz
wrci, po jednej jednostce, klikajc
przycisk zmniejszania stopnia
indentacji.
Za pomoc listy rozwijanej Format,

moesz wstawia znaczniki nagwka,
od <h1> do <h6>.
Ostrzeenie
Na ekranie najwygodniej si czyta

tekst wywietlany czcionk
bezszeryfow (ang. sans-serif).
Czcionki Times New Roman lub
innych czcionek szeryfowych
moesz uywa do formatowania
krtkich fraz albo nagwkw
(wprzypadku ktrych tekst bdzie
powikszony lub pogrubiony),
alejeli chodzi o tekst akapitw,
pozosta lepiej przy czcionkach
Arial, Verdana lub innych
bezszeryfowych, ktre zapewniaj
maksymaln czytelno tekstu.
Cz 14.
Wstawianie i formatowanie tekstu

Tekst wystpuje na niemal kadej stronie internetowej. Suy wyraaniu myli,
wymianie informacji, sprzeday produktw lub edukowaniu. Dziki rodowisku
Dreamweaver wstawianie tekstu na strony staje si prostsze ni kiedykolwiek,
podobnie jak tworzenie tekstowych czy do innych stron, plikw lub serwisw.
Rwnie atwe jest formatowanie tekstu, aby by czytelny i pasowa kolorystycznie
do reszty strony.
1. Kliknij w obszarze otwartej strony, aby ustawi kursor w miejscu, gdzie
tekst ma si zaczyna.
2. Wpisz ten tekst. Wiersze bd zawijane, a wic sowa niemieszczce si
wjednym wierszu bd gadko przenoszone do nastpnego (rysunek 170.1).
Rysunek 170.1. Po wpisaniu tytuu strony czas przygotowa akapity tekstu
3. Po wprowadzeniu tekstu zaznacz fragment, ktremu chcesz nada

formatowanie.
4. Jeli okno Properties nie jest widoczne, wybierz z menu Windows polecenie
Properties, aby je wywietli. Korzystajc z list rozwijanych, okrel uywan
czcionk (lista oznaczona liter A) i jej wielko (Size, rysunek 170.2).
5. Kliknij przycisk Text Color, aby otworzy palet kolorw, na ktrej kolor
mona wskaza mysz, lub z klawiatury wpisa szesnastkowy kod koloru
(rysunek 170.3).
6. Stosuj czcionk wytuszczon lub kursyw, wedle gustu. Umoliwiaj
Ci to przyciski z literami odpowiednio B lub I.
385
Zadanie
170
Wskazwki
Tekst moesz zacz wpisywa

wdowolnym wierszu na stronie,
wkomrce tabeli, na warstwie lub
w ramce. Gdziekolwiek umiecisz
kursor, tam, kiedy zaczniesz pisa,
bdzie pojawia si tekst.
Wybierajc czcionk, zaznaczaj grup,

tak jak Arial, Helvetica, sans-serif.
W ten sposb zwikszysz
prawdopodobiestwo,
eprzynajmniej jedna z czcionek
wgrupie (a ju na pewno czcionka
typu okrelonego zbiorczym
identyfikatorem w rodzaju
sans-serif) bdzie w komputerze
uytkownika zainstalowana i zostanie
wywietlona w przegldarce.
Po otwarciu okna palety moesz

wybra kolor dowolnego piksela
wobszarze roboczym rodowiska
Dreamweaver, w dowolnym panelu
lub pasku narzdzi. Pki wskanik
myszy ma posta prbnika, pty
wszystko, co klikniesz, bdzie
wykorzystywane w charakterze
wzorca koloru. To dziaa dla kadej
palety w kadym oknie; po przejciu
w tryb prbnika moesz pobra
dowolny kolor z ekranu.
Rysunek 170.2. W oknie Properties mona ustawi kad waciwo formatowania tekstu
Rysunek 170.3. Wybr koloru z bezpiecznej palety kolorw WWW
7. Uywaj przyciskw wyrwnywania (do lewej, do prawej, centrowanie

lub justowanie), aby zmieni sposb rozmieszczania tekstu.
8. Wykonaj ponownie kroki od 1. do 7. dla kadego innego fragmentu
tekstu strony, ktry wymaga formatowania.
Odsyacz
Dziki wiedzy uzyskanej w czci 2.,

moesz kreowa style nagwkw
idefiniowa atrybuty czcionek.
386
Zadanie
171
Cz 14.
Tworzenie list
List utworzy mona w jednej z trzech odmian, jako: uporzdkowan (nazywan
rwnie numerowan), nieuporzdkowan (nazywan rwnie wypunktowan)
lub definicji (sowniczek).
Uwagi
Rnica pomidzy listami

uporzdkowanymi
anieuporzdkowanymi jest istotna.
Jeli na przykad informujesz, jak
gdzie dojecha, odpowiednia
bdzie lista numerowana, eby
byojasne, e masz na myli pewn
sekwencj dziaa. Jeli jednak
elementy listy nie ukadaj si
wjak hierarchi, zastosuj raczej
list wypunktowan.
W przypadku listy definicji co druga

linia jest terminem i co druga jest
definicj terminu. Definicje
automatycznie s wywietlane
zwciciem, co w atwo dostrzegalny
sposb wie je z terminami, ktrych
dotycz.
Dodanie nowej listy podczas edycji

listy jest rwnoznaczne z utworzeniem
nowego elementu wypunktowanego
lub numerowanego (w zalenoci
odtypu listy). Nacinij dwa razy
klawisz Enter, aby wyczy tryb
tworzenia listy.
1. Zaznacz tekst, ktry bdzie stanowi materia na now list dowolny

cig linii tekstu lub akapitw.
2. Aby utworzy list wypunktowan, kliknij przycisk Unordered List
(zkropkami i kreseczkami).
3. Aby utworzy list numerowan, kliknij przycisk Ordered List (zcyferkami
ikreseczkami). Rysunek 171.1 przedstawia list nieuporzdkowan
(numerowan) powsta z czterech linii tekstu.
Rysunek 171.1. Zastosowanie listy wypunktowanej implikuje brak znaczenia kolejnoci elementw
4. Jeli lista jest numerowana, usuwaj z niej elementy i obserwuj, jak

numeracja automatycznie si uaktualnia.
5. Dodanie elementu do listy wypunktowanej spowoduje utworzenie
nowego elementu wypunktowanego, a do listy numerowanej
o odpowiednim numerze kolejnym.
6. Aby utworzy list definicji, zaznacz tekst, a potem z menu Text przejd
do podmenu List i wybierz polecenie Definition List.
Jak mona to obejrze na rysunku 171.2, kolejne pozycje listy to,
naprzemian, terminy i definicje.
387
Zadanie
171
Wskazwka
Moesz szybko sformatowa list

pyta i odpowiedzi przy uyciu
formatu listy definicji: umie
pytania na miejscach terminw
iodpowiedzi na miejscach definicji.
Rysunek 171.2. Tworzenie listy terminw i definicji
Odsyacz
Dowiedz si, jak tworzy listy

wypunktowane i numerowane
wedytorze FrontPage. Wicej
informacji na ten temat znajdziesz
wczci 15.
388
Zadanie
172
Uwaga
Niestety, pord kilku sownikw

instalowanych ze rodowiskiem
Dreamweaver nie ma sownika
jzyka polskiego. Po otwarciu okna
dialogowego Preferences (za pomoc
polecenia Preferences z menu Edit)
izaznaczeniu po lewej elementu
General, mona z listy rozwijanej
Spelling Dictionary wybra sprawdzanie
pisowni jzyka duskiego,
holenderskiego, angielskiego
wtrzech odmianach (amerykaskiej,
brytyjskiej lub kanadyjskiej), fiskiego,
francuskiego, niemieckiego, woskiego,
norweskiego, portugalskiego
(w tym w odmianie brazylijskiej),
hiszpaskiego lub szwedzkiego.
Cz 14.
Sprawdzanie pisowni tekstu

Funkcja sprawdzania pisowni w rodowisku Dreamweaver dziaa bardzo
podobnie jak w typowym edytorze tekstu. Sowa nie znalezione w sowniku
programu wywietlane s jako bdnie zapisane. Sowo takie moesz zastpi
jednym z listy podpowiedzi lub bezporednio podda edycji fragment tekstu
zawierajcy nieprawidowe sowo.
1. Aby sprawdzi pisowni tylko czci tekstu na stronie, zaznacz t cz
i wybierz z menu Text polecenie Check Spelling. Jeli zamierzasz sprawdzi
ca stron, wybierz polecenie, nie zaznaczajc przedtem adnego tekstu.
2. W oknie dialogowym Check Spelling (rysunek 172.1) bd pojawia si
pokolei wszystkie przekrcone sowa.
Rysunek 172.1. Bdnie zapisane sowa wykryte na stronie lub w zaznaczonym

fragmencie wywietlane s w polu tekstowym Word not found in dictionary
3. Zaznacz element listy sugerowanych zamiennikw lub wpisz poprawn

wersj w polu tekstowym Change to.
4. Kliknij przycisk Change, aby wprowadzi pojedyncz nazw, lub Change
All, aby zamieni wszystkie wystpienia bdu.
Ostrzeenie
Korzystaj ostronie z moliwoci

dodawania wyrazw do prywatnego
sownika (przycisk Add to Personal).
Jeli nie masz absolutnej pewnoci,
e sowo zapisane jest poprawnie,
lepiej sprawd to dokadnie, zanim
dodasz je do sownika. Poniewa
jeli sowo jednak nie jest zapisane jak
naley, byoby dobrze, aby program
poinformowa Ci, gdy zdarzy Ci si
ponownie popeni ten sam bd.
389
5. Pomijaj sowa, o ktrych wiesz, e s zapisane poprawnie, klikajc

przyciski ignorowania pojedynczego wystpienia (Ignore) lub ignorowania
wszystkich wystpie (Ignore All).
Zadanie
172
6. W przypadku sprawdzania zaznaczonego fragmentu, pojawi si okno

zzapytaniem, czy sprawdzi reszt dokumentu (rysunek 172.2).
Wskazwki
Gdy sprawdzanie zatrzyma si

ponapotkaniu podejrzanego sowa,
masz trzy moliwoci. Moesz klikn
przyciski Change lub Change All,
abypoprawi jedno lub wszystkie
wystpienia bdu; moesz klikn
przyciski Ignore lub Ignore All, jeli
wiesz, e sowo jest w porzdku
inie zamierzasz si nim zajmowa;
moesz wreszcie doda sowo
doprywatnego sownika
(traktowanego przez program
narwnych prawach ze sownikiem
gwnym), kliknij w tym celu przycisk
Add to Personal.
Aby przerwa sprawdzanie przed

zakoczeniem, kliknij przycisk Close.
Rysunek 172.2. Po sprawdzeniu pisowni zaznaczonego fragmentu,

mona sprawdzi take reszt dokumentu
7. Po zakoczeniu sprawdzania caej strony okno dialogowe Check Spelling

zostaje zamknite.
Odsyacz
Edytor TextPad take zawiera

modu sprawdzania pisowni, a jego
tajniki moesz pozna podczas
lektury czci 12.
390
Zadanie
173
Uwaga
Aby mie kontrol nad tym, ktre

wystpienia wyszukiwanego cigu
znakw zostan zastpione, uywaj
przycisku Find Next. Po odnalezieniu
kadego kolejnego fragmentu klikaj
przycisk Replace (aby zamieni
natekst umieszczony w polu
tekstowym Replace With) lub
ponownie przycisk Find Next,
abypomin wyrnione w danej
chwili miejsce i wyszuka nastpne.
Cz 14.
Uywanie funkcji wyszukaj i zastp

Aktualizacja strony lub serwisu internetowego po nadejciu nowego roku
(zmienianie daty w zapisach copyright, o prawach autorskich), poprawienie
powtarzajcego si bdu, hurtowe podmienienie jakich danych w opisach
usug lub produktw, to wszystko problemy, do ktrych rozwizania wrcz
doskonale nadaje si funkcja wyszukaj i zastp. Dziki niej program szybko
przeprowadzi zamian, czynno mudn i czsto jeli wykonywa j rcznie
skutkujc wprowadzeniem nowych bdw.
1. Aby wyszuka cig znakw i zastpi go innym cigiem znakw, otwrz
stron, w ktrej kodzie chcesz przeprowadzi operacj zamieniania.
2. Wybierz z menu Edit polecenie Find and Replace. Otworzy si okno
dialogowe Find and Replace (rysunek 173.1).
Rysunek 173.1. Okno dialogowe Find and Replace zawiera wszystkie narzdzia do przeprowadzania
hurtowych zmian na stronie lub w serwisie
3. Z listy rozwijanej Find In wybierz zakres przygotowywanego

wyszukiwania: Current Document (w biecym dokumencie), Entire Current
Local Site (we wszystkich lokalnie zapisanych plikach biecego serwisu),
Selected Files in Site (w wybranych plikach serwisu) lub Folder (w folderze).
Ostrzeenie
Zwracaj uwag na to, co wpisujesz

w polach tekstowych Search For
iReplace With. Jeli kada spacja,
znak czy wielka litera (w przypadku
zaznaczenia opcji Match Case)
niebdzie wpisana prawidowo,
nieznajdziesz poszukiwanego cigu
lubzamienisz go na inny cig,
nizamierzasz.
4. Za pomoc listy rozwijanej Search For moesz okreli, czy chcesz

wyszukiwa cigu znakw w caym kodzie (Source), tylko w tekcie strony
(Text), zawartego lub niezawartego we wskazanym znaczniku (Text
(Advanced)), czy te znacznika speniajcego szczegowe kryteria
(Specific Tag).
5. Wpisz wyszukiwany cig znakw w polu tekstowym znajdujcym si
naprawo od listy rozwijanej Search For.
391
6. W polu tekstowym Replace With wpisz cig znakw, ktrym chcesz

zastpowa wyszukane wystpienia.
Zadanie
173
7. Zaznacz, jeli trzeba, znajdujce si poniej pola tekstowego opcje:

rozrnianie maych i wielkich liter (Match Case),
traktowanie podczas wyszukiwania wszystkich pojedynczych lub
powtrzonych znakw odstpu jako pojedynczego znaku spacji
(Ignore Whitespace Differencies) lub
korzystanie z technologii wyrae regularnych (Use Regular Expressions).
8. Kliknij przycisk Replace All, aby od razu zastpi kade wystpienie
wyszukiwanego cigu znakw, lub Replace, aby zastpi na razie tylko
pierwsze wykryte wystpienie.
Wskazwki
Okno dialogowe Find and Replace

moesz take otworzy, uywajc
klawiszy Ctrl+F.
Jeli przed otwarciem okna

wyszukiwania (czy to z klawiatury,
czy z menu) zaznaczysz fragment
tekstu, to zaznaczony tekst
automatycznie znajdzie si w polu
Search For. Dziki czemu mona
atwo wyszukiwa i zamienia na co
innego jakie zdanie, po uprzednim
zaznaczeniu go w tekcie,
lubfragment kodu (czy te same
znaczniki HTML), po wczeniejszym
zaznaczeniu odpowiedniego cigu
wwidoku kodu.
Opcje Match Case, Ignore Whitespace

Differencies (ta jest zaznaczona
domylnie) i Use Regular Expressions
pozwalaj dokadnie kontrolowa,
ktre fragmenty tekstu zostan
wyszukane (umoliwiaj zawenie
kryteriw wyszukiwania), a wic
take, ktre fragmenty tekstu
zostan zastpione cigiem znakw
wpisanym w polu tekstowym Replace
With. Od konkretnej sytuacji, w tym
od zawartoci serwisu, zaley,
zaznaczenie ktrych opcji bdzie
wskazane.
9. W oknie informujcym o zakoczeniu wyszukiwania (rysunek 173.2)

odczytasz informacj o liczbie wystpie wykrytych i zamienionych,
atake o zakresie wyszukiwania. Kliknij przycisk OK.
Rysunek 173.2. Podsumowanie operacji wyszukiwania i zastpowania
Odsyacz
Edytor TextPad take zawiera

porczne narzdzie wyszukiwania.
Przeczytasz o tym wicej w czci 12.
392
Zadanie
174
Uwaga
Po zaimportowaniu i uporzdkowaniu
dokumentu HTML wygenerowanego
w edytorze Word, wykorzystaj
moliwoci rodowiska Dreamweaver,
aby dostosowa zawarto i wygld
dokumentu.
Cz 14.
Importowanie kodu HTML

wygenerowanego w edytorze Word
Edytor Microsoft Word umoliwia atwe zapisywanie dokumentw
wformacie HTML. Niestety, w zapisanych w ten sposb dokumentach cz
kodu jest zbdna i niepotrzebnie rozdyma plik. W rodowisku Dreamweaver
mona jednak wygodnie pracowa nad stronami powstaymi z dokumentw
edytora Word dziki funkcji usuwania nadmiarowego kodu z tych dokumentw
i przeksztacania ich kodu w znacznie porzdniejszy.
1. Poniewa skonwertowana strona zostanie otwarta jako nowy dokument,
nie jest wane, jaki dokument bdzie aktywny, gdy z menu File przejdziesz
do podmenu Import i wybierzesz polecenie Word HTML.
Otworzy si okno dialogowe Clean Up Word HTML (rysunek 174.1).
Rysunek 174.1. Nazwa tego okna Posprztaj kod z Worda mwi sam za siebie
2. Panel Basic zawiera spis czynnoci, ktre zostan wykonane w ramach

porzdkowania. Moesz wczy lub wyczy nastpujce etapy:
Ostrzeenie
Wiele cech formatowania (jeli

nawet nie wszystkie) opracowanego
w edytorze Word zostanie usunita
podczas importowania dokumentu
HTML do rodowiska Dreamweaver.
Przygotuj si na ponowne definiowanie
utraconego formatowania.
usuwanie dodatkowych informacji wykorzystywanych tylko przez

edytor Word,
usuwanie zbdnych deklaracji z arkusza stylw,
usuwanie zbdnych znacznikw <font>,
poprawianie bdnego zagniedania znacznikw,
ustawienie koloru ta (moesz ustali podany kolor),
formatowanie kodu rdowego,
wywietlenie podsumowania po zakoczeniu konwersji.
393
3. Panel Advanced (rysunek 174.2) zawiera spis czynnoci zwizanych

zprzetwarzaniem kodu wygenerowanego w wersji edytora Word
ustawionej na licie rozwijanej Clean Up HTML from (na panelu Basic).
S to szczegowe opcje zwizane z usuwaniem niepotrzebnych
informacji, w tym kodu CSS. Usu zaznaczenie etapw, ktre chcesz
pomin.
Zadanie
174
Wskazwka
Nie ruszaj zaznaczenia podstawowych

etapw w panelu Basic. Jeli anulujesz
ktry z tych krokw, moesz
spowodowa problemy w dziaaniu
edytora Dreamweaver, ktry
wymaga bardzo porzdnego kodu.
Rysunek 174.2. Z listy rozwijanej moesz wybra wersj edytora Word, za pomoc ktrej wygenerowano dokument
4. Kliknij przycisk OK, aby przeprowadzi porzdkowanie i zaimportowa

dokument HTML wygenerowany w edytorze Word do rodowiska
Dreamweaver. Jeli opcja Show log on completion bya zaznaczona, pojawi
si okno z informacjami o wprowadzonych do kodu zmianach
(rysunek 174.3).
Rysunek 174.3. Informacja o tym, jakie zbdne elementy kodu

zostay podczas importowania usunite z dokumentu
wygenerowanego w edytorze Word
Odsyacz
Dowiedz si z czci 9., jak powinien

by zapisany porzdny kod CSS.
394
Zadanie
175
Uwagi
Dane tabelaryczne musz by zapisane

w formacie, ktry jest obsugiwany
przez funkcj importowania
dorodowiska Dreamweaver.
Najczciej uywane formaty to
tekst rozdzielany znakami tabulacji
lub przecinkami. Aby zapisa w tym
formacie, na przykad, arkusz
kalkulacyjny w programie Microsoft
Excel, wybierz w oknie Microsoft
Excel z menu Plik polecenie Zapisz
jako. Na licie rozwijanej Zapisz jako
typ wska jeden z typw tekstu
zformatowaniem lub typ CSV.
Wten sposb skopiujesz pojedynczy
arkusz (nie ma moliwoci zapisania
do jednego pliku tekstowego wielu
arkuszy skoroszytu) do nowego
pliku, nie niszczc oryginalnej kopii.
Nowy plik tekstowy moesz
zaimportowa do rodowiska
Dreamweaver.
Podczas importowania musisz
ustawi znak rozdzielajcy waciwy
dla formatu wybranego na licie
rozwijanej Zapisz jako typ.
Wzalenoci od ustawionego tam
formatu znakiem rozdzielajcym
bdzie spacja, znak tabulacji
(wprzypadku tekstu
zformatowaniem) lub przecinek
(wprzypadku pliku CSV).
Cz 14.
Importowanie tabel danych

z osobnych aplikacji
Zamy, e musisz utworzy stron na podstawie arkusza kalkulacyjnego
programu Microsoft Excel, tabeli znajdujcej si w dokumencie edytora
Microsoft Word albo nawet danych z bazy w formacie Microsoft Access lub
innego systemu zarzdzania bazami danych. W tym zadaniu zajmiemy si
wanie importowaniem danych rozmieszczonych w tabeli, czyli ktrych
jednostki uporzdkowano w komrki uoone w wierszach i kolumnach.
Chodzi o wstawienie ich w taki sposb, aby po wczytaniu do edytora
Dreamweaver byy czytelne i przydatne. Moesz atwo sformatowa dane
tabelaryczne jako wanie tabel, ktrej formatowanie utworzy polecenie
importowania danych tabelarycznych do rodowiska Dreamweaver.
1. Otwrz stron, na ktrej chcesz umieci tabel z importowanymi
danymi, a nastpnie przejd z menu File do podmenu Import i wybierz
polecenie Tabular Data.
Ukae si okno dialogowe Import Tabular Data (rysunek 175.1).
Rysunek 175.1. Wybr pliku z danymi oraz parametrw formatu rdowego i wywietlania
2. Kliknij przycisk Browse, aby zlokalizowa plik z danymi tabelarycznymi.

Umoliwi Ci to okno dialogowe Open (rysunek 175.2).
Ostrzeenie
Nagromadzone liczby s trudne

doodczytywania. Jeli masz z tym
problem, powiksz margines
wewntrzny komrek
(naprzynajmniej 2 lub 3 piksele),
aby cyfry nie stykay si z krawdziami
komrek.
Rysunek 175.2. Przegldanie folderw w celu odnalezienia pliku,

z ktrego dane maj trafi na stron internetow.
395
3. Zaznacz plik, ktry zamierzasz zaimportowa, i kliknij przycisk OK.

Powrcisz do okna dialogowego Import Tabular Data.
4. Z listy Delimiter wybierz znak, ktrym rozdzielone s dane w rdowym
pliku tekstowym. Domylnie ustawiony jest znak tabulacji. Oprcz
tego mona ustawi przecinek (Comma), rednik (Semicolon), dwukropek
(Colon) lub dowolny znak (Other, pojawi si pole, w ktrym mona
wpisa ten znak).
5. Pozostaw parametr szerokoci tabeli (Table Width) w standardowym
ustawieniu, czyli okrel, e zostanie szeroko zostanie dopasowana
dodanych (Fit to Data).
Zadanie
Wskazwki
Jeli nie podasz adnych wartoci

wpolach szerokoci marginesw
wkomrkach i odstpw midzy
nimi (pola Cell Padding i Cell Spacing),
wikszo przegldarek przyjmie
domylne ustawienia 1 lub 2 pikseli.
Natomiast aby ukry krawdzie
komrek, musisz zastpi domyln
warto pola Border rwn 1
wartoci 0.
Poniewa pliki tekstowe w systemie

Windows zapisywane s w standardzie
kodowania znakw CP-1250,
wprzykadowym dokumencie
(kodowanym wedug standardu
ISO 8859-2) niektre znaki nie s
poprawnie wywietlane. Aby tego
unikn, skonwertuj pliki tekstowe
osobnym programem przed ich
zaimportowaniem do dokumentu
lub zmie kodowanie dokumentu
(woknie Page Properties).
6. W polach Cell Padding i Cell Spacing wpisz wyraone w pikselach szerokoci

marginesw wewntrz komrek i, odpowiednio, odstpu midzy
komrkami.
7. Jeli pierwsza linia pliku tekstowego zawiera nagwki kolumn (nazwy
pl bazy danych), moesz spowodowa wytuszczenie zawartoci
pierwszego wiersza tabeli, wybierajc z pola Format Top Row opcj Bold.
8. Kliknij przycisk OK, aby zaimportowa dane tabelaryczne i utworzy
znich tabel na stronie internetowej (rysunek 175.3).
175
Odsyacz
Rysunek 175.3. Baza danych pracownikw w rodowisku Dreamweaver staje si tabel nazwisk i liczb
Moesz wklei tabel skopiowan

zedytora Word do dokumentu
otwartego w edytorze FrontPage.
Zczci 15. dowiesz si i o innych
podobiestwach programw Word
i FrontPage.
396
Zadanie
176
Cz 14.
Wstawianie i formatowanie obrazw

Wstawianie obrazw w edytorze Dreamweaver jest niemal nazbyt proste. Jake
atwo zmienia wymiary i pooenie obrazu i wcza ramk wok niego.
Uwaga
Mimo e moesz zmieni wymiary

obrazu, wpisujc dowolne liczby
wpola szerokoci (H) i wysokoci
(W), nie rb tego. Porzdne
przeskalowanie obrazu przekracza
moliwoci przegldarek,
co agodnie mwic nie wpywa
dodatnio na jako obrazu. Przeskaluj
obraz w edytorze grafiki, takim jak
Adobe Photoshop albo Macromedia
Fireworks, a potem zapisz i dopiero
wstaw na stron.
1. W widoku projektowym kliknij i ustaw kursor w miejscu, w ktrym ma

zosta umieszczony obraz.
2. Wybierz z menu Insert polecenie Image. Pokae si okno dialogowe Select
Image Source.
3. Zlokalizuj plik obrazu, ktry zamierzasz wstawi. W prawej czci okna
dialogowego zauwaysz podgld zaznaczonego obrazu (rysunek 176.1).
Rysunek 176.1. Przegldanie folderw w poszukiwaniu tego zawierajcego obraz, ktry chcesz uy
4. Kliknij przycisk OK, aby wstawi zaznaczony obraz na stron internetow.

Jeli wstawiasz plik spoza folderu serwisu, pojawi si zapytanie, czy chcesz
plik skopiowa do tego folderu. Potwierd, klikajc przycisk Yes.
Ostrzeenie
Jeli nie przekopiujesz obrazu

dofolderu serwisu, moe si on nie
wywietla w przegldarce po wysaniu
stron na serwer. Sam proces wysyania
rwnie niepotrzebnie si skomplikuje.
5. Kiedy obraz znajdzie si ju na swoim miejscu, kliknij go, aby zaznaczy

(rysunek 176.2). W oknie waciwoci pojawi si informacje o rnych
parametrach obrazu (upewnij si, e okno Properties nie jest zoone
bd zamknite).
6. Nadaj obrazowi nazw do wykorzystania w kodzie HTML. Kliknij
wtym celu w polu tekstowym pod napisem Image. Wpisz w tym polu
krtk nazw.
397
Zadanie
176
Wskazwki
Okno dialogowe Select Image Source

moesz take otworzy, klikajc
przycisk na pasku zada. To ten
zdrzewkiem na tle niebieskiego nieba.
Po okreleniu domylnego edytora

grafiki (patrz zadanie 180.), kliknicie
przycisku Edit w oknie waciwoci
bdzie powodowa uruchomienie
tej aplikacji z wczytanym obrazem,
gotowym do edycji.
Nadajc obrazowi nazw w rodzaju

osobkons w przypadku zdjcia
pracownika zatrudnionego
nastanowisku osobistego
konsultanta, uatwiasz sobie szybkie
rozpoznawanie znacznika tego
obrazu w kodzie strony.
Po przeskalowaniu obrazu
wzewntrznym edytorze w widoku
projektowym Dreamweaver mog
pojawi si dziwne zaburzenia
wywietlania, takie jak znieksztacenia
i przekamania kolorw na brzegach
obrazu. Jeli zaobserwujesz co
podobnego, kliknij przycisk Reset
Size w oknie waciwoci,
abyodwiey widok obrazu
wprawidowej wielkoci.
Rysunek 176.2. Parametry obrazu dostpne w oknie waciwoci
7. Skorzystaj z narzdzi wyrwnywania (trzech przyciskw i listy rozwijanej

Align), aby umiejscowi obraz w wierszu lub komrce tabeli, w ktrej
si znajduje.
8. Wpisz w polu Border wyraon w pikselach warto gruboci ramki,
ktra ma otacza obraz.
Odsyacz
Odkryj, jak wstawia obrazy

wkodzie HTML. Wicej na ten
temat w czci 3.
398
Zadanie
177
Cz 14.
Tworzenie tekstu w formacie Flash

Tekst w formacie Flash, wywietlony w przegldarce moe zmienia kolor
poklikniciu, tworzc efekt subtelnej interaktywnoci. Tekst w formacie Flash
moe take suy jako cze interaktywne. W rodowisku Dreamweaver tekst
wformacie Flash mona utworzy szybko i atwo.
Uwagi
Kolor, zarwno podstawowy, jak

itekstu pod wskanikiem, moesz
poda jako warto szesnastkow,
jeli taka jest Ci znana.
Lista rozwijana Target suy
dookrelenia ramki lub okna,
wktrym zostanie otwarty plik,
doktrego tekst jest czem.
Najlepszym wyborem w przypadku
czy prowadzcych poza serwis jest
ustawienie _blank, ktre skutkuje
otwarciem cza w nowym oknie,
podczas gdy okno z Twoim
serwisem jest nadal dostpne.
1. Kliknij w widoku projektowym to miejsce strony, gdzie powinien si

pojawi tekst w formacie Flash.
2. Z menu Insert przejd do podmenu Interactive Images i wybierz polecenie
Flash Text.
W ten sposb otworzysz okno dialogowe Insert Flash Text (rysunek 177.1).
Rysunek 177.1. Okno dialogowe Insert Flash Text zawiera wszystkie narzdzia potrzebne
do przygotowania tekstu w formacie Flash
3. Dobierz czcionk i wielko tekstu. Domylnie ustawiona jest pierwsza

w kolejnoci alfabetycznej czcionka z zainstalowanych w komputerze;
domylna wielko to 30.
4. Za pomoc typowych przyciskw zastosuj wobec tekstu wytuszczenie
(przycisk B), efekt kursywy (przycisk I) lub podkrelenia (przycisk U).
Uyj przyciskw wyrwnywania (do lewej, do prawej lub wyrodkowywanie).
Domylne ustawienie to wyrwnywanie do lewej.
5. Kliknij przycisk Color, aby wybra kolor tekstu z palety.
6. Kliknij przycisk Rollover Color, aby wybra kolor, jaki przyjmuje tekst,
gdy wskanik myszy znajduje si ponad nim.
7. Wpisz tekst, ktry ma zosta zapisany w formacie Flash w duym polu
tekstowym.
399
8. Wyznacz ciek (moesz skorzysta z przycisku Browse) do adresu URL

lub do pliku, do ktrego czem ma by tekst w formacie Flash.
Zadanie
177
9. Wybierz odpowiednie ustawienie ramki lub okna docelowego

napowizan czem stron lub plik.
10. Kliknij przycisk OK, aby utworzy tekst w formacie Flash. Teraz moesz
zobaczy, jak prezentuje si w przegldarce (rysunek 177.2).
Wskazwka
Opcja Show Font domylnie jest

zaznaczona, co umoliwia ogldanie
tekstu wpisywanego w polu Text
odrazu sformatowanego czcionk,
ktra zostanie wykorzystana w trybie
online.
Rysunek 177.2. Tekst w formacie Flash wygenerowany w rodowisku Dreamweaver i wstawiony poniej obrazu
Odsyacz
W edytorze FrontPage take moesz

wstawia przyciski z tekstem
wrnych kolorach i ciekawymi
efektami trjwymiarowymi.
Przeczytaj o tym w czci 15.
400
Zadanie
178
Cz 14.
Tworzenie przyciskw w formacie Flash

Przyciski w formacie Flash to naprawd efektowne przyciski graficzne.
Tydostarczasz tekst, a potem ju moesz wybra jeden z pocigajcych wizualnie
stylw. Oprcz stylu moesz dostosowa kolor, czcionk i zdefiniowa cze,
ktre przycisk bdzie otwiera.
Uwagi
Domylna wielko czcionki,

rwna12, odpowiada typowym
rozmiarom przycisku. Najlepiej
pozosta przy tym ustawieniu,
dopki i chyba e stwierdzisz,
etekst jest zbyt may i przy duej
rozdzielczoci ekranu staje si
nieczytelny.
1. Kliknij w widoku projektowym to miejsce strony, gdzie powinien si

pojawi przycisk w formacie Flash.
2. Z menu Insert przejd do podmenu Interactive Images i wybierz polecenie
Flash Button.
W ten sposb otworzysz okno dialogowe Insert Flash Button (rysunek 178.1).
Jeli chcesz sprawdzi, jak przycisk

prezentuje si na stronie, kliknij
przycisk Apply i przesu okno
dialogowe Insert Flash Button, eby
nie zasaniao strony w edytorze.
Aby zmodyfikowa wygld przycisku,
zmieniaj ustawienia i klikaj przycisk
Apply, a uzyskasz podany efekt.
Rysunek 178.1. Okno dialogowe Insert Flash Button tworzenie przycisku w formacie Flash
3. Przewijaj list stylw i zaznaczaj poszczeglne nazwy stylw, aby oglda

w polu Sample przykady ich zastosowania.
4. Kiedy zdecydujesz si na ktry ze stylw, pozostaw jego nazw
zaznaczon.
5. Kliknij w polu tekstowym Button Text i wpisz tam tekst napisu, jaki ma
zosta umieszczony na przycisku.
6. Wybierz z listy Font czcionk dla napisu, a take wpisz warto wielkoci
czcionki w polu Size.
401
7. Wyznacz ciek (moesz skorzysta z przycisku Browse) do adresu URL

lub pliku, ktry ma by otwierany po klikniciu przycisku w formacie
Flash.
Zadanie
178
8. Kliknij przycisk OK, aby utworzy przycisk w formacie Flash. Teraz

moesz zobaczy, jak prezentuje si w przegldarce (rysunek 178.2).
Wskazwki
Jeli chcesz, aby plik lub strona,

ktr wskazuje cze, otwieraa si
w osobnym oknie, wybierz z listy
rozwijanej Target ustawienie _blank.
Jeli tekst, jaki musiaby si znale

na przycisku, jest do tego celu zbyt
dugi, rozwa utworzenie cza
tekstowego zamiast przycisku.
Przyciski w formacie Flash (podobnie
jak i wszystkie inne dekoracyjne
przyciski) wygldaj najlepiej opisane
krtkim sformuowaniem lub
pojedynczym sowem.
Rysunek 178.2. Przykadowy przycisk Flash z napisem domyln czcionk o standardowym rozmiarze
Odsyacz
Moesz utworzy cze z dowolnego

obrazu. Wicej na ten temat
wczci 5.
402
Zadanie
179
Uwagi
Nazwa przycisku nie musi by niczym

wicej ni pojedynczym sowem
wrodzaju helionpl w przypadku
przycisku, ktry otwiera stron
Helion.pl. Nadaj nazw, aby atwo
dostrzega kod HTML definiujcy
przycisk.
Nadanie nazwy jest konieczne

wycznie wtedy, gdy potrzebujesz
odwoywa si do znacznika
zeskryptw lub arkuszy stylw.
Po klikniciu przycisku Play zmienia

si on w przycisk Stop, ktry moesz
pniej klikn, aby wyczy
interaktywne dziaanie przycisku
wedytorze.
Cz 14.
Testowanie i dostosowywanie przyciskw

w formacie Flash
Po utworzeniu przycisku w formacie Flash moesz skorzysta z opcji dostpnych
w oknie waciwoci, aby wyprbowa rne ustawienia wygldu i pooenia
przycisku na stronie. Moesz take nada przyciskowi nazw, aby mc atwo
rozpoznawa jego znaczniki w widoku kodu.
1. Kliknij przycisk w formacie Flash, aby go zaznaczy. Wok przycisku
pojawiaj si ramka z uchwytami.
2. Upewnij si, e okno Properties jest wywietlone i rozwinite (rysunek 179.1).
Aby ukrywa i odsania zawarto okna, klikaj ikon trjkcika
pooon obok jego nazwy. Przyjrzyj si zawartoci okna.
Rysunek 179.1. Parametry przycisku w formacie Flash widoczne w oknie waciwoci
3. Kliknij pole tekstowe pod napisem Flash Button w lewej czci okna
waciwoci. Wpisz nazw przycisku. Nazwa ta zostanie umieszczona
wkodzie zwizanym z wywietlaniem przycisku (rysunek 179.2).
4. Wpisz w polach wysokoci (H) i szerokoci (W) nowe wymiary przycisku,
jeli zachodzi taka potrzeba.
5. Okrel jako wywietlania przycisku. Domylnie widoczne w polu
Quality ustawienie High to najlepszy wybr.
403
Zadanie
179
Wskazwka
Aby obejrze stron z przyciskiem

w przegldarce, w takiej postaci,
wjakiej bd j oglda uytkownicy,
nacinij klawisz F12, aby otworzy
stron w gwnej przegldarce,
apotem przemie wskanik myszy
nad przycisk.
Rysunek 179.2. Kod wywietlajcy przycisk w formacie Flash ju po zdefiniowaniu nazwy przycisku
6. Kliknij przycisk Play i zobacz, jak przycisk zmienia si, gdy umieszczasz
nad nim wskanik myszy (rysunek 179.3).
Odsyacz
Rysunek 179.3. Wygld przycisku w formacie Flash zmienia si, gdy umieci ponad nim wskanik myszy
7. Za pomoc przyciskw wyrwnywania w poziomie dopasuj sposb

umiejscawiania przycisku wzgldem wiersza tekstu lub komrki tabeli,
w ktrej si znajduje.
Moesz atwo otwiera tworzone

strony w oknie przegldarki i w ten
sposb testowa jej dziaanie podczas
pracy w dowolnym z edytorw
omawianych w tej ksice. Na przykad
o odpowiednim poleceniu edytora
HomeSite moesz przeczyta
wczci 13.
404
Zadanie
180
Uwaga
Jeli chcesz do edycji grafiki uywa

programu Adobe Photoshop,
przejd do folderu, w ktrym jest
zainstalowany (typowa cieka
toC:\Program Files\Adobe\
Photoshop 7.0) i kliknij dwukrotnie
plik Photoshop.exe.
Cz 14.
Wyznaczanie zewntrznego
edytora obrazw
Najprawdopodobniej masz swj ulubiony program do tworzenia i edycji
grafiki. W oknie waciwoci rodowiska Dreamweaver, gdy zaznaczony jest
obraz, dostpny jest przycisk Edit, ktry otwiera dowolnie wybran aplikacj.
Moesz wic przydzieli do tego przycisku wybrany edytor graficzny, a po
klikniciu zostanie on otwarty z wczytanym obrazem gotowym do obrbki.
1. Wybierz z menu Edit polecenie Preferences, aby otworzy okno dialogowe
Preferences (rysunek 180.1).
Rysunek 180.1. Tu mona dostosowa wszystkie ustawienia rodowiska Dreamweaver
2. Zaznacz na licie Category element File Types/Editors. Prawa cz okna

zmieni si (rysunek 180.2).
3. Zaznacz na licie Extensions pierwszy internetowy format graficzny, jaki
zauwaysz: moe to by .gif, .jpg lub .png.
4. Zobacz na list Editors pooon na prawo od listy rozszerze nazw
plikw. Powizana z zaznaczonym rozszerzeniem aplikacja (jeli wogle
jaka jest powizana) bdzie tam wyszczeglniona.
5. Aby zmieni domylny edytor na inny widoczny na licie, zaznacz jego
nazw i kliknij przycisk Make Primary. Wybrany program zostaje na licie
oznaczony jako (Primary).
405
Zadanie
180
Wskazwki
Przy zaoeniu, e prawie na kadej

stronie umieszczasz obrazy
wformatach GIF i JPG, koniecznie
przydziel edytor do obu tych typw
plikw. Jeli nigdy nie korzystasz
zobrazw w formacie PNG, moesz
pomin przydzielanie mu edytora.
Moesz przydzieli wicej ni jeden

program do pojedynczego typu
pliku. Edytor oznaczony jako gwny
(Primary) bdzie otwierany
poklikniciu przycisku Edit w oknie
waciwoci. Pozostae edytory
bdzie mona otwiera z podmenu
Edit With menu kontekstowego
dostpnego po klikniciu obrazu
wwidoku projektowym prawym
przyciskiem myszy.
Rysunek 180.2. Wybr programw do obrbki plikw poszczeglnych typw
6. Jeli potrzebnego programu nie ma na licie, kliknij przycisk z plusem

nad list Editors, aby otworzy okno dialogowe Select External Editor
umoliwiajce wskazanie nowej aplikacji (rysunek 180.3).
Rysunek 180.3. Wyznaczanie aplikacji przeznaczonej do edycji plikw zaznaczonego typu
7. Znajd folder instalacyjny programu, ktrego zamierzasz uywa

doedycji grafiki, i kliknij w nim dwukrotnie plik programu. Powrcisz
do okna dialogowego Preferences.
8. Powtrz kroki od 3. do 7. dla pozostaych dwch z trzech typw plikw
(GIF, JPG i PNG), jeli i im zamierzasz przydzieli edytor.
Odsyacz
Dowiedz si wicej o edycji grafiki

zczci 3.
406
Zadanie
181
Cz 14.
Tworzenie map obrazw

Mapa obrazu to zbir obszarw aktywnych, czyli ksztatw geometrycznych
wyznaczonych na obrazie, ktre zostaj powizane z okrelonymi adresami
URL lub plikami. Obszar aktywny peni tym samym rol cza.
Uwaga
Oznaczenie okna docelowego cza

identyfikatorem _blank sprawia,
ecze zostaje otwarte w nowym
oknie przegldarki; identyfikator
_self powoduje zastpienie w oknie
przegldarki strony zawierajcej
cze (rwnoznaczne z brakiem
definicji okna docelowego);
identyfikator _parent ma sens
wprzypadku ukadw ramek,
umoliwia zastpienie w oknie
przegldarki ukadu ramek
nadrzdnego wobec ramki, w ktrej
znajduje si cze; natomiast
identyfikator _top suy
dozastpienia gwnego ukadu
ramek. Jeli nie korzystasz z techniki
ramek, przydadz Ci si tylko
identyfikatory _blank oraz _self,
awaciwie tylko _blank, dziki
ktremu utrudnisz uytkownikowi
definitywne opuszczenie serwisu.
1. Kliknij raz w obszarze obrazu, dla ktrego zamierzasz utworzy map.

Wok obrazu pojawi si ramka z uchwytami, a w oknie waciwoci
zostan wywietlone opcje obrazu (rysunek 181.1).
Rysunek 181.1. Obraz zaznaczony w edytorze Dreamweaver
2. W lewym dolnym roku okna waciwoci odnajdziesz przyciski ksztatw

(rysunek 181.2). Kliknij ten odpowiadajcy ksztatowi obszaru aktywnego,
jaki chcesz utworzy.
Ostrzeenie
Mimo e moesz utworzy na obrazie

tyle obszarw aktywnych, ile tylko
chcesz, nie upychaj na nim zbyt
wielu czy naraz. Pozostaw midzy
obszarami aktywnymi do miejsca,
eby nie zaskakiwa uytkownikw
nieoczekiwanym skutkiem kliknicia
w jakim punkcie obrazu.
Rysunek 181.2. Narzdzia mapy obrazu
3. Po wyznaczeniu obszaru mapy, zawarto okna waciwoci zmienia si

(rysunek 181.3). Kliknij pole tekstowe Link i wpisz adres URL lub
ciek do pliku, do ktrego ma prowadzi cze obszaru aktywnego.
4. Ustal ramk lub okno docelowe cza. Standardowo dostpne ustawienia
to _blank, _self, _parent lub _top.
407
Zadanie
181
Wskazwka
Aby pomc uytkownikom

zdecydowa, ktry obszar aktywny
maj klikn, wpisz co w polu
tekstowym Alt w oknie waciwoci,
aby po przesuniciu wskanika myszy
ponad obszar aktywny ukazywa si
dymek z opisem. Wywietlania opisu
w taki sposb nie obsuguj niestety
niektre wersje przegldarek.
Rysunek 181.3. Definiowanie obszaru aktywnego mapy obrazu
5. Wykonaj ponownie czynnoci opisane w punktach od 2. do 4. dla

kadego obszaru aktywnego, jaki musisz utworzy.
6. Kiedy mapa obrazu jest ju gotowa, nacinij klawisz F12, aby obejrze
stron w przegldarce. Sprawd, czy cza s prawidowo umieszczone
na obrazie (rysunek 181.4).
Odsyacz
Rysunek 181.4. Badanie obszaru aktywnego mapy obrazu
Przeczytaj w czci 15., jak tworzy

obszary aktywne w edytorze
FrontPage.
408
Zadanie
182
Uwaga
Nadanie obrazowi przeczanemu

nazwy uatwia dostrzeenie jego
znacznika podczas edycji lub
przegldania kodu HTML.
Cz 14.
Przygotowywanie obrazw przeczanych

Obraz przeczany to w istocie dwa obrazy przeznaczone do wywietlania w tym
samym obszarze strony. Jeden z nich zastpuje drugi w momencie, gdy nad
obrazem zostaje umieszczony wskanik myszy. Technika ta jest najbardziej
przydatna podczas tworzenia czy, poniewa zamiana obrazu zawsze przyciga
uwag. Obraz wywietlany, gdy kursor znajduje si nad czem, moe zawiera
dodatkow podpowied w rodzaju kliknij tutaj!.
1. W widoku projektowym kliknij to miejsce strony, gdzie powinien si
pojawi obraz przeczany.
2. Przejd z menu Insert do podmenu Interactive Images i wybierz polecenie
Rollover Image. Otworzysz okno dialogowe Insert Rollover Image
(rysunek182.1).
Rysunek 182.1. Okno dialogowe Insert Rollover Image zawiera wszystko, czego trzeba, by utworzy obraz przeczany
3. Nadaj obrazowi nazw i wpisz j w polu tekstowym Image Name. Nazwa

uatwi Ci rozpoznanie w widoku kodu znacznika obrazu przeczanego.
4. Wpisz w polu Original Image ciek do obrazu, ktry bdzie wywietlany
jako podstawowy. Moesz rwnie klikn przycisk Browse i wskaza
plik w folderze.
5. Wpisz w polu Rollover Image ciek do obrazu, ktry bdzie wywietlany,
gdy uytkownik przesunie wskanik myszy ponad obraz przeczany.
Ostrzeenia
Przed wysaniem na serwer WWW

strony zawierajcej obraz przeczany,
przetestuj j w przegldarce, aby
upewni si, e obrazy pojawiaj si
we waciwej kolejnoci, a cze
dziaa prawidowo.
Mnstwo interaktywnych
przyciskw to nie zawsze dobra
rzecz. Nie mcz swojej publicznoci
zbyt wielk liczb obrazw
przeczanych na jednej stronie.
6. Pozostaw zaznaczon opcj Preload Rollover Image. Dziki temu obraz

przeczany zostanie specjalnie wczytany przed pierwszym wywietleniem.
Umoliwia to zabezpieczenie si przed wystpieniem efektu wywietlania
niewczytanego obrazu, co nie sprawia najlepszego wraenia.
7. Wpisz dowolny tekst zastpczy, na przykad opis cza lub tekst
stanowicy komentarz do obrazu, ktry si pojawia, gdy nad obrazem
przeczanym umieszczony zostaje wskanik myszy.
8. Aby w polu When Clicked, Go to URL znalaz si adres URL cza, wpisz
go tam lub wyznacz po klikniciu przycisku Browse.
409
9. Kliknij przycisk OK, aby utworzy obraz przeczany. Wywietlony

wedytorze Dreamweaver sprawia wraenie zacienionego (rysunek 182.2).
Oznacza to wanie, e dany obszar zajmuj dwa obrazy.
Zadanie
182
Wskazwki
Rysunek 182.2. Obraz podstawowy wywietlany jest jako zacieniony, co oznacza, e do tego obszaru
przypisano take obraz przeczany
Najwaniejsze jest tu przygotowanie.

Nie odkadaj tego i nie dobieraj
obrazw w ostatniej chwili. Oba
obrazy musz mie przede wszystkim
dokadnie takie samy wymiary.
Zapisz oba w podfolderze obrazy
folderu serwisu, eby byy atwo
dostpne. Upewnij si, e wiesz,
ktrych dwch obrazw uy
i w jakiej kolejnoci. Po sprawdzeniu
wszystkiego moesz utworzy obraz
przeczany.
Ludzie korzystajcy z przegldarek

niewywietlajcych grafiki lub wolnych
wdzwanianych pocze z internetem
lubi tekst zastpczy obrazw,
poniewa dziki niemu mog uzyska
pewne informacje (wszyscy z tego
skorzystaj, jeli z jakich przyczyn
obraz w ogle nie zostanie
wczytany). Te informacje to mogyby
by pewne wskazwki, co si stanie,
gdyby klikn w miejscu, gdzie ma
lub mia si znale brakujcy obraz.
Przykadowe teksty zastpcze to
kliknij w tym miejscu, aby lub
aby dowiedzie si wicej o,
kliknij tutaj.
410
Zadanie
183
Uwagi
Jeli lubisz opracowywa elementy

od podstaw i nie lubisz
automatycznych narzdzi w rodzaju
opisywanego tutaj, tworzenie paska
nawigacyjnego rozpocznij
odprzygotowania tabeli o liczbie
komrek rwnej liczbie potrzebnych
przyciskw. Umie cze w postaci
obrazu w kadej z komrek. Albo
umie tam od razu obrazy
przeczane, aby uzyska efekt
interaktywnoci. Jeli tylko wszystkie
obrazy i komrki bd miay takie
same wymiary (dla wizualnego
ujednolicenia), pasek nawigacyjny
bdzie wyglda na dobrze
skonstruowany. Skopiuj tabel
iwklejaj j na wszystkie strony
serwisu, tworzc w serwisie spjny
system nawigacyjny.
Moesz wyznaczy obrazy
przeznaczone do wywietlania
wrnych stanach przycisku:
swobodnego (Up), pod wskanikiem
(Over), wcinitego (Down),
wcinitego pod wskanikiem
(OverWhile Down). Nie jest jednak
konieczne definiowanie obrazu dla
adnego stanu oprcz swobodnego.
Jeli chcesz, aby pasek nawigacyjny
dziaa jak zbir obrazw
przeczanych, wyznacz obrazy
dowywietlania w trybie Over.
Przyciski bd zmienia wygld,
gdywskanik myszy znajdzie si nad
nimi. Pozostae moliwoci nie s
tak przydatne, a zwikszaj ilo
czasu konieczn do przygotowania
wszystkiego.
Cz 14.
Projektowanie paskw nawigacyjnych

Pasek nawigacyjny moe by bardzo satysfakcjonujcym rozwizaniem.
Wzalenoci od koncepcji stron, moe peni funkcj podstawowego narzdzia
poruszania si po stronach serwisu. Stanowi on bowiem w istocie zbir czy
do poszczeglnych stron serwisu. Uytkownicy lubi paski nawigacyjne,
poniewa dostpne s one w takiej samej postaci na kadej stronie serwisu (pod
warunkiem, e zostay poprawnie zaprojektowane). Projektanci take lubi paski
nawigacyjne, poniewa w rodowisku Dreamweaver tworzy si je atwo
iprzyjemnie.
1. Kliknij w dokumencie, aby kursor znalaz si w miejscu, gdzie powinien
zosta umieszczony pasek nawigacyjny. Do tego celu nieodzowne jest
korzystanie z widoku kodu (a przynajmniej z widoku kodu w edytorze
podzielonym na widoki kodu i projektowy).
2. Przejd z menu Insert do podmenu Interactive Images i wybierz polecenie
Navigation Bar, aby otworzy okno dialogowe Insert Navigation Bar
(rysunek 183.1).
Rysunek 183.1. Wstawianie prowadzcych do rnych stron czy graficznych, z ktrych powstanie pasek nawigacyjny
3. Zastp domyln nazw unnamed1 znajdujc si w polu tekstowym

Element Name inn nazw, tak jak chcesz nada pierwszemu obrazowi
w pasku nawigacyjnym.
4. Kliknij przycisk z plusem ponad list Nav Bar Elements. Na licie wpisana
nazwa zastpi nazw domyln.
411
5. Kliknij przycisk Browse obok pola tekstowego Up Image, aby wskaza

obraz, ktry bdzie wywietlany, kiedy wskanik myszy nie bdzie si
akurat unosi ponad pierwszym elementem paska nawigacyjnego.
Zadanie
183
6. Kliknij pole tekstowe When Clicked, Go to URL i wpisz tam (lub skorzystaj
z uatwienia w postaci przycisku Browse) adres URL strony, ktra ma si
otwiera po klikniciu pierwszego elementu paska nawigacyjnego.
7. Okrel kierunek paska nawigacyjnego. Elementy mog by uoone
poziomo obok siebie (Horizontally, ustawienie domylne) lub pionowo,
jeden nad drugim (Vertically). Zostaw zaznaczon opcj tworzenia paska
nawigacyjnego jako tabeli (Use Table).
Wskazwki
Aby pasek nawigacyjny znalaz si

nawszystkich stronach serwisu,
musisz go skopiowa i powkleja.
Dopasuj cza dostpne
naposzczeglnych stronach,
korzystajc z okna waciwoci.
Sprawdzaj i poprawiaj pojedyncze
cza.
Kierunek uoenia elementw paska

nawigacyjnego (poziomy lub pionowy)
powinien by dobrany do wygldu
reszty strony i jej caociowego
ukadu.
8. Wykonaj ponownie kroki od 3. do 7. dla kadego elementu paska

nawigacyjnego.
9. Kliknij przycisk OK, aby utworzy pasek (rysunek 183.2).
Rysunek 183.2. Pasek nawigacyjny zgrany wizualnie z reszt strony; uoone w pionie elementy tworz
graficzne menu przy lewej krawdzi strony
Odsyacz
W edytorze FrontPage te moesz

tworzy paski nawigacyjne.
Z czci 15. dowiedz si, jak.
412
Zadanie
184
Uwagi
Tabele znajdujce si wewntrz

innych tabel nazywane s tabelami
zagniedonymi. Sposoby tworzenia
i modyfikowania tabel s dokadnie
takie same zarwno w przypadku
samodzielnych tabel, jak i tabel
umieszczonych wewntrz tabel lub
tabel zawierajcych tabele.
W zwizku z tym, e podawane tu
wymiary wyraane s w pikselach,
naley to rozumie w ten sposb,
emargines wewntrz komrki
owielkoci 3 powoduje dodanie
odstpu o szerokoci 3 pikseli przy
kadej krawdzi, wewntrz komrki
tabeli, czyli odsunicie zawartoci
komrki na 3 piksele od jej krawdzi.
Cz 14.
Tworzenie tabel
Tabele to jedno z najbardziej wydajnych rozwiza dostpnych projektantowi
stron internetowych. Umoliwiaj przygotowywanie ukadu stron z du
precyzj, umieszczanie tekstu i grafiki obok siebie w dokadnie wyznaczonych
obszarach, czy po prostu tworzenie paskw nawigacyjnych albo list oferowanych
produktw. Zastosowanie tabel jest nieograniczone. Edytor Dreamweaver
znacznie uatwia tworzenie tabel. (Jak dowiesz si z nastpnego zadania, atwo
jest rwnie modyfikowa i dostosowywa tabele utworzone ju wczeniej).
1. Korzystajc z widoku projektowego, ustaw kursor w miejscu, gdzie
powinna zosta umieszczona tabela. Moe to by na zwykej stronie,
wramce lub wewntrz innej tabeli.
2. Kliknij przycisk wstawiania tabeli znajdujcy si na czwartej od lewej
pozycji na podstawowym pasku narzdzi (czyli jest to przycisk opisany
w dymku jako Insert Table na pasku narzdzi Common). Otworzy si okno
dialogowe Insert Table (rysunek 184.1).
Rysunek 184.1. Definiowanie tabeli tworzonej w edytorze Dreamweaver
3. Wpisz w polu Rows liczb wierszy planowanej tabeli.

4. Wpisz w polu Columns liczb kolumn planowanej tabeli.
5. Wpisz w polu Cell Padding odpowiedni wedle Twojej oceny liczb pikseli
marginesu wewntrz komrek, a w polu Cell Spacing liczb pikseli
odstpu pomidzy komrkami.
6. Wpisz w polu Width szeroko tabeli w postaci liczby procentw
szerokoci strony lub w postaci dokadnej liczby pikseli. (Domylna
szeroko wynosi 75 procent. Lista rozwijana na prawo od pola Width
musi by w ustawieniu Percent, jeli podana warto ma by interpretowana
jako liczba procentw).
7. Jeli chcesz, aby krawdzie komrek byy widoczne, kliknij w polu
Border i wpisz podan grubo krawdzi w pikselach.
413
8. Kliknij przycisk OK, aby utworzy tabel. Pojawia si nowa pusta tabela
(rysunek 184.2).
Zadanie
184
Wskazwki
Regulacja parametru Cell Spacing

jest przydatna przy zagniedaniu
tabel. Ustaw niewielki odstp
pomidzy komrkami zagniedonej
tabeli (czyli tej mniejszej, znajdujcej
si wewntrz innej), a kolor ta
komrki zawierajcej j ustaw
naczarny. Czarny kolor bdzie
widoczny przez odstpy pomidzy
komrkami tabeli wewntrznej,
tworzc eleganckie czarne krawdzie
o gruboci rwnej szerokoci
odstpw. Naturalnie musisz
dodatkowo ustawi kolor ta komrek
zagniedonej tabeli, eby nie byy
przezroczyste i tym samym czarne.
Przycisk wstawiania tabeli to przycisk

czwarty od lewej, ktry wyglda jak
malutka kratka. Zamiast go uywa,
moesz wybra z menu Insert
polecenie Table lub nacisn klawisze
Ctrl+Alt+T.
Jeli utworzysz tabel, a potem

stwierdzisz, e potrzebne jest wicej
wierszy aden problem. Po prostu
ustaw kursor w komrce w prawym
dolnym rogu tabeli i nacinij klawisz
Tab, a powstanie zupenie nowy
wiersz.
Rysunek 184.2. Tabela jako ukad komrek, ktre mog zawiera dowolny tekst lub grafik
Odsyacz
Tworzenie tabel bezporednio

wjzyku HTML omawiamy w czci 6.
414
Zadanie
185
Uwagi
Moesz nada tabeli nazw, wpisujc

j w polu tekstowym Table ID.
Topomoe Ci zauway znacznik
tabeli w kodzie HTML.
Wymiary i ukad tabeli mona atwo

zmienia, przecigajc jej krawdzie
w widoku projektowym. Tabela
wedytorze, pola okna waciwoci
iliczby w kodzie uaktualniane s
nabieco. W dowolnym momencie
moesz zmieni metod
modyfikowania tabeli, ustawiajc jej
parametry w jednym z tych trzech
moduw rodowiska Dreamweaver.
Jeli zaznaczysz nie ca tabel tylko

pojedyncz komrk, to wartoci jej
wymiarw w polach W i H okna
waciwoci bd odnosiy si
doszerokoci i wysokoci komrki
izawierajcych jej kolumny i wiersza,
a nie do caej tabeli.
Cz 14.
Modyfikowanie istniejcych tabel

Moesz atwo zmienia wymiary tabel, zmienia kolor ta i dopasowywa
odstpy i marginesy komrek. Moesz rwnie zagnieda tabele jedn
wdrugiej dla precyzyjnego projektowania strukturalnego ukadu tekstu,
grafiki i estetycznego wykorzystania elementw graficznych takich jak
kolorowe ta i krawdzie.
1. Aby uzyska dostp do narzdzi modyfikowania wygldu i pooenia
tabeli, umie wskanik myszy nad dowoln krawdzi tabeli. Gdy tak
zrobisz i wskanik myszy przyjmie posta narzdzia przesuwania
(rysunek 185.1), kliknij.
Rysunek 185.1. Przejcie wskanika myszy w tryb narzdzia przesuwania oznacza, e edycja jest moliwa
2. W oknie waciwoci zmie liczb komrek tabeli, wpisujc nowe

wartoci w polach Rows lub Cols.
3. Zdefiniuj parametry w polach W i H, aby sterowa wymiarami caej
tabeli.
415
4. Korzystaj z palety szeciu przyciskw (rysunek 185.2) sucych

dohurtowego zmieniania rnych wymiarw tabeli. Na przykad para
przyciskw skrajnie z prawej usuwa wartoci liczbowe szerokoci
kolumn lub wysokoci wierszy, przeskalowujc tabel do wymiarw
zawartoci.
Zadanie
185
Wskazwki
Rysunek 185.2. Przyciski do zmieniania wymiarw wielu komrek naraz
Jeli po prostu klikniesz wewntrz

jednej z komrek tabeli, w oknie
waciwoci pojawi si standardowe
narzdzia formatowania tekstu.
Bd jednak dostpne te opcje
zmiany koloru ta zaznaczonej
komrki (Bg), jak rwnie moliwe
bdzie ustawienie wyrwnania
tekstu wewntrz niej.
Przeczanie opcji % i Pixels

wywietlanych na prawo od pl W
iH umoliwia wybr sposobu
interpretacji wartoci liczbowych.
W przypadku ustawienia %, parametry
ustalone w polach W i H rozumiane
s jako procent wymiaru wysokoci
lub szerokoci dostpnego
obszaru. W przypadku ustawienia
Pixels, liczby traktowane s jako
wartoci absolutne.
Sens opcji wyrwnywania domylnego

(Default) moe by niejasny. Wbrew
pozorom nie jest to rwnowane
ustawieniu Left. Oznacza, e tabela
nie bdzie otaczana tekstem.
5. Ustal wartoci marginesw i odstpw w polach CellPad i CellSpace.

6. Wybierz nowy kolor ta tabeli (BgColor) lub ustaw tapet ta tabeli
(BgImage).
7. Sformatuj krawdzie (wpisz ich szeroko w polu Border) i dobierz
kolor krawdzi (Brdr Color).
8. Wybierz z listy Align pooenie tabeli wzgldem dostpnego obszaru.
Masz do wyboru wyrwnanie do lewego lub prawego marginesu (Left,
Right), wyrodkowanie (Center) lub bez ustawienia (Default).
Odsyacz
Naucz si korzysta z narzdzi

dostosowywania tabel dostpnych
w oknie dialogowym Waciwoci
tabeli edytora FrontPage.
Omawiamy to w czci 15.
416
Zadanie
186
Uwagi
Opcje POST i GET oznaczaj sposb

wysyania danych z formularza
naserwer. Zalecana metoda to POST,
poniewa jest bezpieczniejsza. Jest
to szczeglnie istotne podczas
przesyania poufnych informacji.
W polu Enctype ustawa si sposb
zakodowania danych z formularza
przed wysaniem ich na serwer.
Cz 14.
Tworzenie formularzy
Formularze umoliwiaj uytkownikom interakcj ze stron internetow
poprzez elementy interfejsu, takie jak pola tekstowe, listy rozwijane, listy opcji
i pola wyboru. Za pomoc tych elementw moesz zbiera dane do bazy
danych online. Tworzenie formularza polega na zadeklarowaniu formularza
iumieszczeniu w nim potrzebnych elementw interfejsu. Do sterowania
rozmieszczeniem elementw moesz posuy si tablic, zadbaj tylko,
abytablica zawieraa si w obrbie formularza.
1. Aby wstawi na stron formularz, ustaw w widoku projektowym kursor
w tym miejscu strony, gdzie powinien znajdowa si formularz. Wybierz
z menu Insert polecenie Form, a w edytorze ukae si czerwona, przerywana
ramka oznaczajca formularz.
2. Jeli chcesz, wstaw wewntrz formularza tabel.
3. Zacznij umieszcza w formularzu elementy interfejsu. Moesz uywa
polece z podmenu Form Objects menu Insert albo przyciskw paska
narzdzi Forms.
4. Dodawaj kolejne elementy interfejsu. Ustawiaj parametry kadego,
korzystajc w tym celu z okna waciwoci. Rysunek 186.1 przedstawia
okno waciwoci wywietlajce opcje listy.
Rysunek 186.1. Przygotuj konieczne elementy interfejsu
5. Kiedy ukoczysz tworzenie formularza, kliknij czerwon ramk, aby

zaznaczy go jako cao. Okno waciwoci zawiera teraz oglne opcje
formularza (rysunek 186.2).
Ostrzeenie
Nie zapomnij wstawi przyciskw

wysyania i resetowania (Submit
iReset, dostpne na licie elementw
interfejsu). Zwaszcza brak przycisku
wysyania moe by kopotliwy,
poniewa uniemoliwia wysanie
danych z formularza na serwer.
Rysunek 186.2. Zdefiniuj tryb przesyania danych
417
6. W polu Action trzeba umieci adres URL lub ciek do skryptu

odbierajcego wysyane dane. Wpisz adres URL albo kliknij przycisk
folderu, aby przeglda foldery w celu zlokalizowania skryptu.
Zadanie
186
7. Wybierz metod wysyania danych: POST albo GET.

8. Ustal ramk lub okno docelowe, w ktrym zostanie wywietlona
odpowied: _blank, _self, _parent lub _top.
9. Wybierz metod kodowania danych: application/x-www-form-urlencoded
albo multipart/form-data.
Wskazwki
Wykorzystanie tabeli pomaga nada

formularzowi wizualn struktur.
Moesz porozmieszcza poszczeglne
elementy interfejsu w osobnych
komrkach tabeli, co pozwoli Ci
bardziej precyzyjnie ustali ich
pooenie. Ukryj tylko krawdzie
tabeli, aby z perspektywy uytkownika
wygldao to estetycznie.
Po klikniciu przycisku List Values

otwiera si okno dialogowe
zprzyciskami z plusem oraz
zminusem, ktre su
dododawania lub usuwania pozycji
zlisty na formularzu. Poniej
przyciskw widoczna jest zawarto
listy. Gdy lista bdzie ju gotowa,
kliknij przycisk OK, aby powrci
doedycji formularza. Pozycje listy
bd widoczne w polu Initially
Selected w oknie waciwoci.
Aby atwo rozpoznawa kod

formularza, nadaj mu nazw, wpisujc
j w polu Form Name.
Odsyacz
Przejrzyj cz 7., aby przypomnie

sobie, jak dziaaj formularze w jzyku
HTML.
418
Zadanie
187
Uwagi
Zamiast wybiera z menu File

polecenie New, moesz nacisn
klawisze Ctrl+N.
Ramki mog zawiera dowolne

elementy: tekst, grafik, tabele
iwarstwy. Wpisz w polu Src adres
URL, aby wywietli w ramce jaki
serwis, na przykad wyszukiwark
Netoskop albo stron Helion.pl.
Wyszukiwarki czsto indeksuj

poszczeglne ramki w dziwny sposb,
poniewa traktuj je jako pojedyncze
strony. Jeli chcesz uatwi
korzystanie z serwisu uytkownikom
uywajcym wyszukiwarek, takich
jak Google lub Netoskop, posu si
raczej tabelami do strukturalizacji
strony. W ten sposb opisy i sowa
kluczowe bd prawidowo wizane
z caoci strony.
Cz 14.
Opracowywanie ukadw ramek

Ramki z rozmaitych powodw bywaj nielubiane tak przez projektantw stron
internetowych, jak i przez internautw. Jednake ramki stanowi elastyczne
rodowisko strukturalizacji serwisu. Ramki, a waciwie ukady ramek gdy
chodzi o element grupujcy pojedyncze ramki to interesujce narzdzie
wywietlania kilku stron w jednym obszarze, ktry w przeciwnym przypadku
byby wizualnie jednolity.
1. Aby utworzy ukad ramek, wybierz z menu File polecenie New. W oknie
dialogowym New Document zaznacz element Frameset na licie Category
(rysunek 187.1).
Rysunek 187.1. Lista standardowych ukadw ramek uatwia zastosowanie typowego rozmieszczenia
2. Aby zobaczy, jak wyglda kady z wymienionych na licie ukadw

ramek, czyli na ramki o jakich proporcjach dzieli dostpny obszar, klikaj
nazwy na licie Framesets i ogldaj schematy pojawiajce si w polu Preview.
3. Po znalezieniu ukadu ramek, ktry jest odpowiedni dla planowanego
rozmieszczenia elementw strony, kliknij przycisk Create. Otworzy si
nowa strona z ramkami na waciwych miejscach (rysunek 187.2).
Ostrzeenie
Jeli strona wywietlana w ramce

zawiera cza, trzeba zwrci uwag
na odpowiednie ustawienie ramek
docelowych tych czy. Ustawiaj
parametr Target czy na nazwy
konkretnych ramek albo identyfikator
_blank (otwieranie w nowym oknie),
aby ukad ramek pozostawa dostpny
po klikniciu cza.
4. W oknie waciwoci dostosuj ustawienia krawdzi: wcz je lub wycz,

ustaw grubo i kolor (pola Border, Border Width i Border Color).
5. Moesz wstawia elementy do ramek, klikajc w nich i redagujc ich
zawarto.
6. Aby ustawia parametry poszczeglnych ramek (w sposb odpowiedni
dla ich zawartoci), klikaj w nich, trzymajc wcinity klawisz Alt,
copowoduje zmian zestawu opcji dostpnych w oknie waciwoci
(rysunek 187.3).
7. Jeli ramka ma zawiera stron z serwera w internecie, w polu Src wpisz
adres URL. W celu ustalenia rda ramki moesz take posuy si
przyciskiem przegldania (z ikon folderu).

8. Okrel, czy w ramce ma by wywietlany pasek przewijania i czy
uytkownicy bd mogli przeciga krawdzie ramki. Ustaw w ten
sposb parametry wszystkich ramek (rysunek 187.4).
419
Zadanie
187
Wskazwki
Rysunek 187.2. Ustawienia ukadu ramek wywietlone w oknie waciwoci
Rysunek 187.3. Dostosowanie ramki do strony, ktr zawiera
Rysunek 187.4. Ukad ramek zawierajcy stron lokaln (po lewej) oraz dwie ramki
o rdach ustawionych na adresy URL serwisw w internecie
Obszar okna New Document

zatytuowany Description znajdujcy
si poniej obszaru podgldu zawiera
dodatkowy opis zaznaczonego
ukadu ramek.
Wybierz z listy Scroll we

waciwociach pojedynczej ramki
pozycj Auto, aby paski przewijania
pojawiay si wycznie wtedy,
gdystrona nie mieci si w ramce.
Pozycja Yes oznacza, e paski
przewijania bd wywietlane
zawsze. Pozycja Default powoduje
nieustawianie atrybutu,
co w przypadku wikszoci
przegldarek jest rwnoznaczne
zustawieniem Auto.
420
Zadanie
188
Uwagi
Litery px po liczbie w polu

zustawieniem wymiaru lub
pooeniem oznaczaj, e warto
wyraona jest w pikselach.
Warstwa o waciwoci Z-Index

rwnej 1 wywietlana jest pod
warstwami o wyszych numerach.
Wpisanie wartoci w polach Clip

umoliwia ograniczenie wywietlanego
obszaru warstwy. Polega to
nazasoniciu okrelonej czci
obszaru od lewej (L), od gry (T),
od prawej (R) albo od dou (B).
Ostrzeenie
Zbyt dua warstwa moe zasoni

istotne informacje na stronie. Dlatego
warto rozway wybranie z listy
Overflow pozycji scroll (aby wywietli
na warstwie paski przewijania) albo
auto (aby wywietli paski przewijania
tylko wtedy, gdy bd potrzebne).
Cz 14.
Posugiwanie si technik warstw

Zupenie inaczej ni ramki i tabele warstwy s jak gdyby naklejane na stron;
nie s czci sztywnego ukadu. Jeli nie pokryjesz ta warstwy kolorem albo
obrazem, reszta strony bdzie normalnie widoczna poprzez warstw. Na warstw
moesz jednake wstawia dowolne elementy strony, takie jak tekst, grafik czy
materiay multimedialne. Bardzo stare przegldarki (w wersjach wczeniejszych
ni 4.0) nie obsuguj warstw, dlatego nie zawsze jest wskazane stosowanie tej
techniki. Umieszczaj informacje na warstwach tylko w przypadku, gdy masz
pewno, e uytkownicy korzystaj z aktualnych wersji przegldarek czy to
Internet Explorer, czy to Netscape Navigator, czy te innych.
1. Aby rozpocz proces tworzenia warstwy, kliknij w widoku projektowym
w okolicy miejsca, gdzie zamierzasz umieci lewy grny rg warstwy.
2. Wybierz z menu Insert polecenie Layer. Na stronie pojawia si warstwa
(rysunek 188.1).
Rysunek 188.1. Aby wstawi warstw, wystarczy wybra polecenie
3. Gdy warstwa jest zaznaczona (aby j zaznaczy, kliknij jej krawd), moesz
w oknie waciwoci obserwowa parametry warstwy (rysunek 188.2)
oraz zmienia je, aby dostosowa wygld i pooenie warstwy.
421
Zadanie
188
Rysunek 188.2. Zaznaczenie warstwy wywietla w oknie waciwoci narzdzia dostosowywania warstwy
4. Jeli nie odpowiadaj Ci wymiary lub pooenie warstwy, wprowad nowe

wartoci w pole L (od lewej krawdzi), pole T (od grnej krawdzi), pole
W (szeroko) lub pole H (wysoko).
5. Jeli warstwy ssiadujce ze sob na stronie nakadaj si, dopasuj
ustawienia parametru Z-Index (kolejno warstw na stosie).
6. Wybierz z listy Vis ustawienie widzialnoci: domylne (Default), jak
element zawierajcy (Inherit), widzialna (Visible) lub ukryta (Hidden).
Wskazwki
Nadaj warstwie nazw i wpisz

wpolu Layer ID. Uatwi Ci to
rozpoznawanie znacznika warstwy
w kodzie HTML.
Ustawienie widzialnoci warstwy

jako domylnej (Default) oznacza
wistocie nieustawianie tej
waciwoci i wykorzystanie
ustawienia przegldarki. Wikszo
przegldarek standardowo uywa
waciwoci elementu zawierajcego,
jak w przypadku ustawienia Inherit.
Jeli chcesz, aby warstwa zawsze
bya widoczna, wybierz ustawienie
Visible.
Aby mie pewno, e wielko

warstwy pozostanie niezmienna bez
wzgldu na objto jej zawartoci,
wybierz z listy Overflow pozycj
Scroll. Jeli wymiary zawartoci
ramki przekrocz wymiary samej
warstwy, za pomoc paskw
przewijania bdzie mona je odsoni.
Jeli na warstwie jest tekst, ramka

powinna mie to pokryte kolorem.
W ten sposb mona unikn
sytuacji, gdy zawarto ramki bdzie
sabo widoczna na tle zawartoci
lubszczegw obrazu ta strony.
7. Dobierz kolor (Bg Color) lub tapet (Bg Image) ta warstwy. Jeli pozostawisz
te pola puste, warstwa bdzie przezroczysta.
8. Sprawd ustawienie znacznika uywanego do zdefiniowania warstwy
(standardowo jest to DIV).
9. Zdecyduj, jak ma by traktowana cz zawartoci ramki niemieszczca
si w jej obrbie. Dostpne moliwoci (lista Overflow) to wywietlanie
nawet poza warstw (Visible), ukrycie (Hidden), wywietlanie paskw
przewijania zawsze (Scroll) lub tylko w razie potrzeby (Auto).
10. Po ustaleniu waciwoci warstwy wypenij j tekstem, grafik, tabelami
lub nawet nowymi warstwami (nazywanymi warstwami zagniedonymi).
Rysunek 188.3 przedstawia warstw zawierajc tabel z tekstem i grafik.
Dziki paskowi przewijania uytkownik moe obejrze ca zawarto
tabeli.
Odsyacz
Rysunek 188.3. Warstwy umoliwiaj swobodne projektowanie
Naucz si konstruowa warstwy

wjzyku HTML (zadania od 99.
do101.).
422
Zadanie
189
Uwagi
Jeli definiowany styl bdzie

przydatny tylko na pojedynczej
stronie, moesz umieci go
wkodzie strony. W tym celu spord
dwch opcji Define in zaznacz drug
(This Document Only).
Cz 14.
Tworzenie arkuszy stylw

Arkusz stylw umoliwia zebranie rnych aspektw formatowania w jednym
miejscu w sposb uatwiajcy zastosowanie formatowania do dowolnego
dokumentu. Ustawienia stylw caego serwisu lub pojedynczej strony utworzysz
i przejrzysz w panelu CSS Styles w oknie Design. Mog powstawa na bazie
istniejcego formatowania dokumentu lub zupenie od nowa.
1. W oknie Design kliknij nazw panelu CSS Styles. Jeli okno Design nie jest
otwarte, wybierz z menu Window polecenie CSS Styles, aby wywietli okno.
2. Kliknij przycisk tworzenia nowego stylu (New CSS Style, z grafik kartki
i symbolem plus) przy dolnym brzegu panelu CSS Styles (rysunek 189.1)
Przycisk doczania arkusza stylw

umoliwia skorzystanie z arkusza
stylw zapisanego w pliku .css,
poprzez podczenie go
dodokumentu HTML jako pliku
zalenego (opcja Link w oknie, ktre
ukazuje si po klikniciu przycisku)
lub wstawienie kodu z tego pliku
dodokumentu (opcja Import).
Rysunek 189.1. Panel CSS Styles w oknie Design
3. W oknie dialogowym New CSS Style skorzystaj z pola Name, aby nada
nowemu stylowi nazw.
4. Nie zmieniaj domylnego ustawienia typu stylu. Standardowa metoda
tworzenia stylu polega na zdefiniowaniu wasnego stylu, czyli waciwie
klasy (opcja Make Custom Style).
5. Okrel miejsce zapisania kodu. Zaznaczenie pierwszej z dwch opcji
oznaczonych etykiet Define in spowoduje zapisanie go w pliku, ktry
mona wybra z listy. Wybierz ustawienie (New Style Sheet File), aby
utworzy nowy plik.
6. Kliknij przycisk OK, aby otworzy okno dialogowe Save Style Sheet File As
(rysunek 189.2).
7. Kliknij przycisk Save, aby zapisa plik CSS.
8. Otworzy si teraz okno dialogowe CSS Style Definition (rysunek 189.3).
Ustal parametry formatowania, jakie chcesz zawrze w definicji stylw.
9. Kiedy ju ustalisz parametry formatowania, kliknij przycisk OK, aby
zamkn okno dialogowe CSS Style Definition.
423
Zadanie
189
Wskazwki
Rysunek 189.2. Zapisywanie kodu stylw do pliku w folderze serwisu
U nazw stylu, ktra bdzie

wyjania, kiedy i dlaczego
zastosowanie stylu bdzie
odpowiednie. Na przykad nazwa
.terminy-specjalne
nadaje si dla stylu sucego

doformatowania nazw wanych
wydarze w kalendarzu. Kropka
przed nazw stylu oznacza definicj
klasy stylu, co jest konieczne podczas
tworzenia stylu metod Make Custom
Style. Po kropce musi nastpowa
litera, a w nazwie nie mog
wystpowa odstpy ani znaki
specjalne.
Ustawianie waciwoci stylu

woknie CSS Style Definition polega
na zaznaczeniu na licie w lewej
czci okna nazwy jednej z kategorii,
a nastpnie okrelenia waciwoci
wywietlonych w prawej czci okna
(ktre zmieniaj si w zalenoci
odzaznaczonej kategorii).
Aby zmodyfikowa wczeniej

utworzony styl, zaznacz go w panelu
CSS Styles i kliknij przycisk edycji
przy dolnym brzegu panelu (to ten
przycisk z owkiem). Otworzy si
to samo okno dialogowe CSS Style
Definition, nie bdzie wic adnych
dodatkowych trudnoci.
Rysunek 189.3. Definiowanie waciwoci stylu z jednej lub wielu kategorii.
10. Aby zastosowa formatowanie stylu, zaznacz w edytorze fragment

zawartoci strony i kliknij nazw stylu w panelu CSS Styles w oknie Design.
Rysunek 189.4 przedstawia styl zastosowany wobec tekstu na stronie WWW.
Odsyacz
Rysunek 189.4. Kliknicie nazwy stylu w panelu CSS Styles umoliwia szybkie formatowanie
Wicej o arkuszach stylw moesz

dowiedzie si ze strony http://
webmaster.helion.pl/kurshtml/
css2/index.htm.
424
Zadanie
190
Uwaga
Jeli wikszo akcji w menu jest

zacieniowana, najprawdopodobniej
nic nie jest zaznaczone na stronie,
albo zaznaczony jest niewaciwy
element, taki jak tekst. Sprawd
wedytorze, zaznacz co trzeba
isprbuj ponownie.
Cz 14.
Definiowanie akcji
Nieomawianym dotd sposobem umoliwienia uytkownikom interakcji
zelementami strony internetowej jest generowanie skryptw JavaScript
wkodzie HTML. Z perspektywy obsugi rodowiska Dreamweaver polega to
nadefiniowaniu akcji. Typowe zastosowania to podejmowanie jakich dziaa
po umieszczeniu wskanika myszy ponad obrazem lub po klikniciu obrazu.
Charakter tych dziaa moe by bardziej zoony ni jest to moliwe
wprzypadku zwykych obrazw przeczanych lub przyciskw w formacie Flash.
1. Do zarzdzania akcjami suy panel Behaviors w oknie Design
(rysunek190.1). Jeli panel nie jest nigdzie widoczny, wybierz z menu
Windows polecenie Behaviors, aby go wywietli. Zasonity panel otworzysz,
klikajc jego nazw.
Rysunek 190.1. Panel Behaviors w oknie Design
2. Zaznacz na stronie obraz lub inny element, z ktrym chcesz powiza

akcj.
Ostrzeenia
Przed wysaniem na serwer strony

zakcjami, skorzystaj z moliwoci
obejrzenia strony w przegldarce
(nacinij klawisz F12), aby
przetestowa nowe akcje.
Wybieraj raczej zestawy zdarze

przegldarek starszych ni typowe.
Uytkownicy czasem korzystaj
zzupenie antycznego
oprogramowania. Tylko jeli masz
pewno, e serwis bd odwiedza
waciciele doskonaych komputerw
korzystajcy z najnowszych
przegldarek, zdecyduj si
naprzygotowanie serwisu w stylu
futurystyczno-technologicznym.
3. Kliknij przycisk z plusem w grnej czci panelu, aby wywietli list

akcji dostpnych dla zaznaczonego elementu (rysunek 190.2).
4. Otworzy si okno dialogowe umoliwiajce ustawienie parametrw,
naprzykad wskazanie pliku: obrazu do podmienienia, dwiku
doodtworzenia itp.
5. Kliknij przycisk OK, aby zatwierdzi ustawienia takie jak wybr pliku,
dwiku lub innego.
6. Po powrocie do panelu akcji kliknij przycisk z trjktem rozwijajcy
list zdarze, ktre mog wyzwala akcj (rysunek 190.3).
7. Aby uzupeni lub ograniczy list zdarze do tych obsugiwanych
przez przegldarki, jakich najprawdopodobniej uywaj uytkownicy,
przejd do podmenu Show Events For i wybierz kategori przegldarek.
425
Zadanie
190
Wskazwki
Nacinicie kombinacji klawiszy

Shift+F3 umoliwia szybkie
wywietlenie panelu akcji.
W panelu wywietlane s tylko akcje

przyporzdkowane elementowi,
ktry jest w danej chwili zaznaczony.
Natomiast zmian kolejnoci akcji
na licie umoliwiaj przyciski
ztrjktami skierowanymi w gr,
po uprzednim zaznaczeniu jednej
zpozycji.
Rysunek 190.2. Wybr akcji do powizania z elementem
Rysunek 190.3. Wybr sposobu interakcji uytkownika z elementem
8. Powtrz czynnoci opisane w punktach od 2. do 7. dla kadego elementu

strony, ktry chcesz uczyni bardziej interaktywnym wobec
uytkownikw.
Odsyacz
Aby poszerzy swoj wiedz o jzyku

JavaScript, zajrzyj do czci 10.
426
Zadanie
191
Uwagi
Ustawienie zestawu zdarze

dowyboru na zdarzenia przegldarek
w wersjach 4.0 i nowszych (4.0 and
Later Browsers) jest o tyle pomocne,
e lista nie bdzie tak duga, jak
wprzypadku najnowszej wersji
przegldarki Internet Explorer
i bez problemu odnajdziemy na niej
zdarzenie onLoad. Wywoanie akcji
ztego zdarzenia oznacza, e obrazy
zostan wczytane na zapas
popobraniu waciwej strony.
Jeli nie klikniesz przycisku z plusem
znajdujcego si w oknie Preload
Images, cieka wpisana w polu
Image Source File zostanie zastpiona
(i skasowana) podczas dodawania
nastpnego obrazu.
Cz 14.
Definiowanie akcji
wstpnego pobierania obrazw
Akcja wstpnego pobierania obrazw powoduje wczytanie obrazw
iumieszczenie w pamici podrcznej przegldarki na dysku w komputerze
uytkownika. Za pomoc tego mechanizmu wczytuje si obrazy, ktre nie s
umieszczone bezporednio na stronie, ale na przykad maj suy jako obrazy
przeczane i ktre warto wczyta, zanim uytkownik pomyli o aktywowaniu
ich, eby nie musia czeka pniej.
1. Aby powiza akcj wstpnego pobierania obrazw z gwnym
znacznikiem zawartoci strony, wybierz opcj <body> w polu wyboru
znacznikw znajdujcym si w lewym dolnym rogu okna dokumentu
(rysunek 191.1).
Rysunek 191.1. Wybr aktywnego znacznika w polu wyboru znacznikw
2. Otwrz panel akcji, wybierajc z menu Windows polecenie Behaviors.

3. Kliknij w tym panelu przycisk z plusem, a w podmenu Show Events For
wybierz opcj 4.0 and Later Browsers.
4. Kliknij ponownie przycisk z plusem i wybierz z menu akcj Preload
Images. Otworzysz okno dialogowe Preload Images (rysunek 191.2).
Rysunek 191.2. Okno dialogowe Preload Images
427
5. Kliknij przycisk Browse, aby przeglda foldery i wskaza plik

dowczytania, lub w polu Image Source File wpisz ciek do pliku.
Zadanie
191
6. Kliknij przycisk z plusem znajdujcy si w grnej czci okna

dialogowego, aby wstawi ciek z pola Image Source File na list Preload
Images. Dziki temu z pola Image Source Field zostanie usunity tekst
ibdzie mona wprowadzi ciek do nastpnego obrazu.
7. Powtarzaj czynnoci opisane w punktach 5. i 6. dla kadego obrazu,
ktry chcesz wstpnie wczytywa po otwarciu tej strony.
8. Aby usun obraz z listy Preload Images, zaznacz go na licie i kliknij
przycisk z minusem.
9. Po umieszczeniu na licie wszystkich obrazw, jakie chcesz wstpnie
wczytywa, kliknij przycisk OK, aby zamkn okno dialogowe.
Odsyacz
Zajrzyj do czci 10., aby nauczy

si pisa tego rodzaju skrypty.
428
Zadanie
192
Uwagi
Jeli chcesz, aby okno wyskakujce

pojawiao si po wczytaniu strony,
nad ktr pracujesz, zaznacz element
<body> i powi akcj
zezdarzeniem onLoad. Jeli chcesz,
aby okno wyskakujce pojawiao si
po klikniciu cza, zaznacz cze
ipowi akcj ze zdarzeniem
onClick.
Jeli nie ustawisz adnych parametrw
okna wyskakujcego, bdzie ono
miao takie same wymiary i elementy
jak okno, z ktrego zostao
wywoane. Zaznaczenie przynajmniej
jednej z opcji automatycznie wycza
wszystkie elementy okna, ktrych
opcje nie s zaznaczone.
Cz 14.
Definiowanie akcji
otwierania okna przegldarki
Akcja otwierania okna przegldarki suy do wywietlenia nowego okna
wyskakujcego i wczytania do niego wskazanej strony. Moesz okreli
wszelkiego rodzaju waciwoci takiego okna, w tym wymiary, nazw, blokad
zmiany wymiarw, obecno lub nieobecno menu, paskw narzdzi oraz
paskw przewijania.
1. Zaznacz element, z ktrym chcesz powiza okno wyskakujce.
3. Kliknij przycisk z plusem w panelu akcji i z podmenu Show Events For
4. Kliknij ponownie przycisk z plusem i wybierz z menu akcj Open
Browser Window. Ukae si okno dialogowe Open Browser Window
(rysunek 192.1).
Rysunek 192.1. Okno dialogowe Open Browser Window
5. Kliknij przycisk Browse i wska plik, ktry ma by wczytywany do nowego

okna.
6. Wpisz w polu Window Width szeroko, a w polu Window Height wysoko
nowego okna.
7. Zaznaczaj pola wyboru, aby uaktywnia dowolne z dostpnych opcji:
Navigation Toolbar w oknie zostanie wywietlony pasek nawigacyjny,
czyli zawierajcy przyciski takie jak wstecz, dalej lub odwie.
Location Toolbar w oknie zostanie wywietlony pasek adresu.
Status Bar w oknie zostanie wywietlony pasek stanu (linia przy
dolnym brzegu okna, w ktrej pojawiaj si komunikaty, takie jak
liczba pozostaych do wczytania elementw albo adresy czy).
Menu Bar w oknie zostanie wywietlone standardowy pasek menu
(z menu Plik, Edycja, Widok, Ulubione itd.).
429
Scrollbars as Needed jeli zawarto nie zmieci si w oknie, zostan

wywietlone paski przewijania.
Zadanie
192
Resize Handles uytkownicy bd mogli zmieni wymiary okna albo

przecigajc jego krawdzie, albo klikajc przycisk maksymalizacji
(w przypadku systemu Windows) lub zmiany wielkoci (w przypadku
komputerw Macintosh).
8. Wpisz nazw okna. Nazw okna mona wykorzystywa, ustalajc okno
docelowe cza lub w skryptach.
9. Kliknij przycisk OK, aby zamkn okno dialogowe Open Browser Window.
10. Wybierz zdarzenie, ktre ma wyzwala akcj. Rysunek 192.2 przedstawia
okno wyskakujce, otwarte po klikniciu cza.
Rysunek 192.2. Typowe okno wyskakujce (po prawej) otwarte po klikniciu cza (po lewej)
Odsyacz
Wrd dostpnych w rodowisku

Dreamweaver akcji jest rwnie
akcja sprawdzajca poprawno
danych wpisanych do formularza
(patrz zadanie 193.).
430
Zadanie
193
Uwagi
Jeli ustawisz jako format pola

Anything i nie wczysz opcji
Required, to zupenie nic si nie
stanie.
Ustawienie Anything przydaje si
wpoczeniu z opcj Required.
Umoliwia sprawdzenie,
czycokolwiek zostao wpisane
(Required), ale nie weryfikuje
formatu (Anything).
Cz 14.
Definiowanie akcji
sprawdzania danych w formularzu
Akcja sprawdzania danych w formularzu umoliwia okrelenie, czy uytkownik
poprawnie wprowadzi informacje w pola formularza. Jeli wpis w ktrym
zpl ma niewaciw posta (inny typ danych ni wskazuje specyfikacja pola),
skrypt zapobiega wysaniu niepoprawnych danych na serwer.
1. Powi akcj sprawdzania danych w formularzu ze znacznikiem <form>,
wybierajc go w polu znacznikw w lewym dolnym rogu okna
dokumentu (rysunek 193.1).
Rysunek 193.1. Wybieranie znacznika <form> w polu znacznikw

4. Kliknij ponownie przycisk z plusem i wybierz z menu akcj Validate
Form. Otworzysz okno dialogowe Validate Form (rysunek 193.2). Na licie
Named Fields wyszczeglnione s wszystkie pola formularza.
431
Zadanie
193
Rysunek 193.2. Okno dialogowe Validate Form z list wszystkich pl formularza
5. Zaznacz jedno z pl tekstowych wymienionych na licie Named Fields.

6. Zaznacz opcj Required, jeli wprowadzenie wartoci w polu ma by
wymagane.
7. Wybierz format danych dopuszczalny w tym polu:
Anything przydatne dla wymaganych informacji o dowolnym
formacie tekstowym, jak nazwiska albo adresy zamieszkania.
Email Address powoduje sprawdzanie, czy pole zawiera znak @
otoczony tekstem.
Number powoduje sprawdzanie, czy pole zawiera liczb.
Numer fromto powoduje sprawdzanie, czy pole zawiera liczb
zzakresu od liczby wpisanej w polu from do liczby wpisanej w polu to.
8. Powtarzaj czynnoci opisane w punktach od 5. do 7. dla kadego pola,
ktre ma by sprawdzane.
9. Kliknij przycisk OK, aby zamkn okno dialogowe Validate Form.
Odsyacz
Akcje dziaaj dziki zastosowaniu

skryptw JavaScript. Aby dowiedzie
si wicej o jzyku JavaScript, przejrzyj
cz 10.
432
Zadanie
194
Uwaga
Jeli chcesz, aby komunikat pojawia

si po wczytaniu strony, nad ktr
pracujesz, zaznacz znacznik <body>
i uyj zdarzenia onLoad. Jeli
chcesz, aby komunikat pojawia si
po umieszczeniu wskanika myszy
ponad czem, zaznacz tekst lub
obraz cza i uyj zdarzenia
onMouseOver.
Cz 14.
Definiowanie akcji wywietlania tekstu

na pasku stanu
Okno kadej przegldarki moe zawiera pasek stanu. Prawie zawsze element
ten rozciga si wzdu dolnego brzegu okna i wywietla komunikaty o tym,
jakie zadania w danej chwili wykonuje przegldarka. Rwnie jeli umiecisz
wskanik myszy nad czem, na pasku statusu odczytasz adres URL cza.
Zkolei po klikniciu cza, na pasku stanu pojawi si informacja o postpach
wczytywania, na przykad Trwa otwieranie strony http:// Akcja wywietlania
tekstu na pasku stanu powoduje pojawienie si tam dowolnie sformuowanego
komunikatu w chwili, gdy uytkownik wykona zdefiniowan czynno.
1. Zaznacz element, ktry ma wyzwala wywietlenie komunikatu
napasku stanu.
wybierz opcj 4.0 and Later Browsers (rysunek 194.1).
Rysunek 194.1. Podmenu Show Events For
4. Kliknij ponownie przycisk z plusem i wejd do podmenu Set Text. Wybierz

akcj Set Text of Status Bar. Pokae si okno dialogowe Set Text for Status
Bar (rysunek 194.2).
Ostrzeenie
Dugi komunikat nie zmieci si

wdostpnym obszarze. Niech bdzie
raczej krtki i treciwy.
433
Zadanie
194
Rysunek 194.2. Okno dialogowe Set Text of Status Bar
5. Wpisz w polu Message tekst komunikatu.

6. Kliknij przycisk OK, aby zamkn okno dialogowe Set Text of Status Bar.
7. Wybierz zdarzenie, ktre ma wyzwala akcj.
Odsyacz
Jednych z najskuteczniej metod

przyspieszajcych prac rodowiska
Dreamweaver dostarcza panel
Assets (patrz zadanie 195.).
434
Zadanie
195
Uwaga
Aby wywietli panel zasobw,

wystarczy nacisn klawisz F11.
Kolory s dodawane do zasobw
zakadym razem, gdy ustawisz je
dlaczegokolwiek tekstu, komrki
tabeli, krawdzi ale przeciganie
zpanelu zasobw, aby ustawi
kolor, dziaa tylko wobec tekstu.
Jeli chcesz ustawi kolor czego
innego na kolor przechowywany
wzasobach, po otwarciu palety
przesu wskanik prbnika nad panel
zasobw i w ten sposb pobierz
stamtd kolor.
Cz 14.
Korzystanie z panelu zasobw

Panel zasobw to dla projektanta prawdziwy magazyn peen obrazw, dwikw,
filmw, szablonw, zapisanych kolorw i adresw, ktre moesz wykorzysta
na stronie. Kady element jednego z wymienionych rodzajw, po umieszczeniu
na jednej ze stron serwisu, jest dostpny w panelu zasobw. Wstawienie elementu
z panelu zasobw jest rwnie proste, wystarczy w tym celu przecign wybrany
element do edytora.
1. Zanim zaczniesz korzysta z zasobw, musisz wywietli panel. Wybierz
z menu Windows polecenie Assets lub kliknij nazw panelu Assets w oknie
Files.
2. W przypadku strony zawierajcej ju jakie obrazy lub inne elementy
panel zasobw wywietli od razu list tych elementw. Aby je przejrze,
klikaj przyciski kategorii przy lewym brzegu panelu (rysunek 195.1).
Rysunek 195.1. Zasoby s posegregowane w 9 kategorii
3. Aby uy elementu z zasobw, kliknij przycisk odpowiedniej kategorii

iprzecignij element z panelu na stron (rysunek 195.2).
4. Aby doda element do widoku ulubionych, zaznacz go i kliknij
przycisk z plusem pooony w prawym dolnym rogu panelu zasobw.
Rysunek 195.3 przedstawia widok zasobw pewnego serwisu
poograniczeniu wywietlania do elementw ulubionych (przecznik
przy grnym brzegu okna w pozycji Favorities).
435
Zadanie
195
Wskazwki
Elementy z zasobw moesz rwnie

wstawia, zaznaczajc je na licie,
anastpnie klikajc przycisk Insert
(w lewym dolnym rogu panelu
zasobw).
Elementy w widoku ulubionych

mona organizowa w foldery,
tworzc logiczne grupy elementw,
takie jak obrazy o podobnej treci
lub kolory typowe dla jakich
elementw. Aby utworzy folder
wwidoku ulubionych, kliknij przycisk
z teczk przy dolnym brzegu panelu
i wpisz nazw folderu, ktry od razu
pojawia si na licie. Po utworzeniu
folderu moesz przeciga do niego
elementy wywietlane w widoku
ulubionych.
Przycisk dodawania do ulubionych,

po zaznaczeniu jednego z elementw
w widoku ulubionych, zmienia si
wprzycisk usuwania z ulubionych.
Rysunek 195.2. Ponowne wykorzystanie obrazu poprzez przecignicie go z panelu zasobw
Odsyacz
Rysunek 195.3. Najczciej uywane obrazy, kolory i inne elementy wygodnie oznacza jako ulubione
5. Aby usun element z ulubionych, zaznacz go w panelu, a potem kliknij

przycisk usuwania (z minusem).
W rodowisku FrontPage take

dostpne s narzdzia do zarzdzania
obrazami czsto powtarzajcymi si
na stronach serwisu. Informacje
ouywanych tam panelach obrazw
i clipartw znajdziesz w czci 15.
436
Zadanie
196
Cz 14.
Okrelanie danych zdalnego serwera

Kiedy nadchodzi ju czas wysyania na serwer swych plikw, trzeba najpierw si
do tego przygotowa. Po ustawieniu sposobu czenia z serwerem WWW ustala
si jeszcze login i parametry zabezpiecze.
1. Wybierz z menu Site polecenie Edit Sites. Otworzy si okno dialogowe
Edit Sites. Zaznacz na licie nazw serwisu i kliknij przycisk Edit.
2. Ukae si okno dialogowe Site Definition (rysunek 196.1). Jeli panel
Advanced nie jest aktywny, kliknij jego nazw.
Ostrzeenia
Jeli pracujesz w miejscu niepewnym

w tym sensie, e wsppracownicy
lub kto inny mogliby bez Twojej
wiedzy popsu pliki na serwerze,
niezapisuj hasa w ustawieniach. Jeli
pracujesz w domu lub w biurze,
wktrym ufasz wsppracownikom,
najprawdopodobniej moesz
bezpiecznie zapisa haso.
Automatyczne wysyanie jest
ryzykowne. Nie wysyaj niczego,
pki wszystko nie bdzie zapite
naostatni guzik. Chyba najlepiej jest
pozostawi opcj Automatic
Uploading niezaznaczon.
Rysunek 196.1. Definiowanie serwisu
3. W panelu Advanced zaznacz nazw kategorii Remote Info. W prawej czci

okna pojawi si opcje danych serwera (rysunek 196.2).
4. Wybierz z listy Access metod dostpu.
5. W przypadku korzystania z protokou FTP, wpisz w polu FTP Host
adres IP lub adres domenowy serwera, w rodzaju ftp.przyklad.pl.
6. Jeli po zalogowaniu na serwer trzeba przej do wyznaczonego folderu,
wpisz jego ciek w polu Host Directory.
437
Zadanie
196
Wskazwki
Uywanie protokou FTP to

najpopularniejsza metoda wysyania
plikw na serwer WWW. Pozostae
techniki wymagaj specyficznego
oprogramowania lub wykupienia
dodatkowych usug u dostawcy
miejsca na serwerze.
Znaki wpisywanego hasa pojawiaj

si wszystkie na ekranie jako
gwiazdki (*). Dziki temu potencjalny
haker strojcy Ci za plecami nie
moe atwo odczyta hasa. Zaznacz
opcj Save, jeli nie chcesz wpisywa
hasa za kadym razem, gdy czysz
si z serwerem.
Jeli nie wiesz, jak trzeba ustawi

opcje poczenia, porozum si
zobsug techniczn dostawcy usug.
Jednym z ich gwnych zaj jest
informowanie o sposobie czenia
si z serwerami i przesyania plikw.
Rysunek 196.2. Ustalanie danych serwera
7. Wpisz swj login (czyli identyfikator lub nazw uytkownika) oraz haso.
8. W zalenoci od ustawie serwera i sieci, zaznacz opcje uywania
pasywnego FTP (Passive FTP), zapory (Use Firewall) lub bezpiecznego
logowania szyfrowanego SSH (Use SSH Encrypted Secure Login).
9. Jeli chcesz, aby pliki byy wysyane automatycznie za kadym razem,
gdy je zapisujesz, zaznacz opcj Automatically Upload Files to Server on Save.
10. Jeli pracujesz w zespole i chcesz si zabezpieczy przed sytuacj, gdy
dwie osoby edytuj rwnoczenie ten sam plik, zaznacz opcj Enable File
Check In and Check Out.
11. Kliknij OK, aby zapisa ustawienia zdalnego serwera.
Odsyacze
System blokowania plikw

omawiamy w zadaniu 197.
Sprawd w czci 15., jak wysya si

pliki w rodowisku FrontPage.
438
Zadanie
197
Cz 14.
Wysyanie i pobieranie plikw

Po ustaleniu danych zdalnego serwera mona ju wysya na niego pliki. Moesz
je take przesya w przeciwnym kierunku, albo w celu utworzenia kopii
zapasowej, albo odtworzenia plikw zmienionych lokalnie. Wysyanie
ipobieranie umoliwiaj przyciski ze strzakami opisane w dymkach jako Put i Get.
Uwaga
Podczas przesyania pliku wywietlany

jest pasek postpu. May plik moe
zosta przesany tak szybko, e nawet
nie zauwaysz obserwowa paska
postpu. Z kolei podczas powolnego
przesyania duych plikw postp
moe by trudny do zaobserwowania.
1. Przed skorzystaniem z tych przyciskw, musisz uaktywni okno Files

ipanel Site. Aby wywietli ten panel, wybierz z menu Window
polecenieSite.
2. Aby wysa pliki na zdalny serwer (albo emulowa to, kopiujc na dysk
w komputerze lub w sieci lokalnej), wybierz najpierw z prawej listy
rozwijanej w panelu Site opcj Local View (jeli nie jest ju ustawiona).
Nastpnie zaznacz pliki i foldery, ktre zamierzasz wysa (rysunek 197.1).
Rysunek 197.1. Pliki do wysania s ju zaznaczone
Ostrzeenie
Nigdy nie zaznaczaj opcji Don't show

me this message again w oknie
dialogowym Dependent Files. Okno
to przypomina o koniecznoci
wysania plikw zalenych strony,
azaznaczenie opcji spowoduje,
eokno wicej si nie pojawi i kiedy
zapomnisz o plikach zalenych.
3. Kliknij przycisk ze strzak do gry opisany w dymku jako Put.

4. Po zakoczeniu wysyania z prawej listy rozwijanej wybierz opcj Remote
View.
5. Kliknij przycisk odwieania (z zawinit strzak, Refresh). Zobaczysz
zawarto folderu docelowego zawierajcego wysane pliki (rysunek 197.2).
439
Zadanie
197
Wskazwki
Innym sposobem wywietlania

panelu Site okna Files jest naciskanie
klawisza F8.
Po klikniciu przycisku moe ukaza

si zapytanie, czy wysa take pliki
zalene (include dependent files). Jeli
wysyasz stron i chcesz zaczy
dodokumentu HTML obrazy i inne
pliki zalene, kliknij Yes. Jednak
wprzypadku gdy dziaasz w zespole
inie wiesz, czy dysponujesz
najnowszymi wersjami wszystkich
plikw, kliknij No.
Zawsze rozczaj si z serwerem,

jeli zostawiasz swoje biurko lub gdy
robisz rwnoczenie co innego
imoesz niechccy potrci jaki
klawisz i co sobie z serwera,
naprzykad, skasowa. Rozczenie
si chroni przed przypadkowym
wysyaniem lub pobieraniem, a take
uniemoliwia niepowoanym osobom
uycie Twojego komputera w celu
pobrania lub wysania plikw,
ktrymi nie powinny si interesowa.
Rysunek 197.2. Przegldanie plikw w folderze docelowym
6. Aby pobra pliki z folderu zdalnego lub folderu docelowego na dysku

w komputerze lub sieci lokalnej, zaznacz pliki i foldery, ktre chcesz
pobra.
7. Kliknij przycisk pobierania (strzaka w d, Get).
8. Po zakoczeniu sesji pobierania lub wysyania kliknij przycisk rozczenia
(pierwszy na pasku narzdzi panelu, Disconnect from Remote Host).
Odsyacz
Dodatek F obejmuje zagadnienie

wysyania plikw na serwer WWW.
Przejrzyj go online pod adresem
http://webmaster.helion.pl/kurshtml/
upload/index.htm.
440
Zadanie
198
Uwaga
Pola przeznaczone do wprowadzania

wymaganych informacji pojawi si
natychmiast po tym, jak zaznaczysz
opcj Enable File Check In and
CheckOut.
Cz 14.
Zarzdzanie podziaem pracy

Kiedy nad jednym serwisem pracuj dwie lub wicej osb, zasadne staje si
stosowanie systemu blokowania plikw dostpnego w rodowisku Dreamweaver.
W sposb przypominajcy wypoyczanie ksiek z biblioteki system ledzi,
kto aktualnie edytuje plik i uniemoliwia to wszystkim innym, jakkolwiek
zawsze mona przeglda zawarto pliku. System blokowania plikw sprawia,
e mona zaprowadzi porzdek w procesie tworzenia serwisu przez kilku
projektantw.
1. Aby korzysta z systemu blokowania plikw, najpierw musisz go wczy.
Wybierz z menu Site polecenie Edit Sites.
2. Ukae si okno dialogowe Edit Sites (rysunek 198.1). Zaznacz serwis, ktry
chcesz modyfikowa.
Rysunek 198.1. Wybieranie serwisu, dla ktrego wczymy blokowanie plikw
3. Kliknij przycisk Edit. Moesz te zamiast tego klikn dwukrotnie

nazw serwisu.
4. W oknie dialogowym Site Definition kliknij nazw panelu Advanced, jeli
panel ten nie jest odsonity.
5. Zaznacz nazw kategorii Remote Info (rysunek 198.2).
Ostrzeenie
Jeli nie pobierzesz wraz ze stron

plikw zalenych, a nie dysponujesz
ich kopiami na dysku w komputerze,
moe si okaza, e nie ma do nich
dostpu i strona nie wywietla si
poprawnie.
6. Zaznacz opcje z grupy Check In/Out: przede wszystkim Enable File Check In
and Check Out, a take Check Out Files When Opening.
7. Wpisz swoje imi w polu tekstowym Check Out Name oraz swj adres
e-mail w polu tekstowym Email Address. Kliknij OK, aby zamkn okno
dialogowe.
441
Zadanie
198
Wskazwka
Pamitaj o pozostaych czonkach

swojej druyny i rozwanie si
posuguj systemem blokowania
plikw. Nie zapomnij odblokowa
plikw po edycji lub wysaniu
naserwer. Moesz bowiem
uniemoliwi wsppracownikom
dostp do plikw przez ca noc,
weekend czy po prostu kluczow
godzin w cigu dnia.
Rysunek 198.2. Edycja zaawansowanych ustawie w oknie definicji serwisu
8. Aby korzysta z systemu blokowania, zaznacz w panelu Site okna Files

pliki, ktre chcesz edytowa lub wysa na serwer.
9. Kliknij przycisk blokowania (zielona strzaka w d z parafk).
Wzalenoci od rodzaju pliku moe otworzy si okno z zapytaniem
orwnoczesne zablokowanie plikw zalenych.
10. Kiedy skoczysz edytowa plik, zaznacz go na licie w panelu Site
ikliknij przycisk odblokowania (niebieska strzaka w gr z parafk).
Itym razem moe pokaza si okno z zapytaniem o pliki zalene.
Odsyacz
Dreamweaver jest jedyn aplikacj

zomawianych w tej ksice, ktra
zawiera narzdzia do zarzdzania
podziaem pracy. Nie zmienia to
faktu, e edytor HomeSite opisany
w czci 13, jest rwnie bardzo
wydajnym narzdziem.

HTML W 10 Prostych Krokach

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML W 10 Prostych Krokach

Uploaded by

Copyright:

Available Formats

IDZ DO

Ta ksika to prawdziwy szwajcarski scyzoryk znajdziesz w niej wszystkie

Cz 1. Struktura dokumentu w jzyku HTML .......................................................................... 19

Cz 2. Praca z tekstem ........................................................................................................ 41

Zadanie 26. Modyfikacja stylw punktorw ............................................................................................................................................ 72

Cz 3. Praca z obrazami ....................................................................................................... 79

Cz 4. Audio i wideo ............................................................................................................ 93

Cz 5. Hipercza .............................................................................................................. 103

Cz 6. Tworzenie tabel ....................................................................................................... 113

Cz 7. Praca z formularzami ............................................................................................... 131

Cz 8. Praca z ramkami ..................................................................................................... 161

Cz 9. Kaskadowe arkusze stylw (CSS) .............................................................................. 179

Zadanie 81. Skrcony zapis waciwoci z grupy font ........................................................................................................................... 196

Cz 10. Proste skrypty w jzyku JavaScript ............................................................................ 239

Cz 11. Elementy opracowane przez firmy niezalene .............................................................. 257

Cz 12. TextPad ................................................................................................................. 271

Cz 13. Praca w edytorze HomeSite ...................................................................................... 313

Zadanie 140. Tworzenie i uywanie szablonw stron .......................................................................................................................... 322

Cz 14. Praca w rodowisku Dreamweaver ............................................................................. 371

Zadanie 173. Uywanie funkcji wyszukaj i zastp.................................................................................................................................. 390

Cz 15. Praca w rodowisku FrontPage .................................................................................. 443

Zadanie 206. Wstawianie i formatowanie tekstu ................................................................................................................................. 458

Skorowidz ............................................................................................................................................................................... 507

Cz 14. Praca w rodowisku Dreamweaver

Okrelanie przegldarek uywanych do podgldu stron

Firma Macromedia udostpnia

Aby przegldark mona byo

Naprawd nie sposb mie zbyt

Praca w rodowisku Dreamweaver

3. Po klikniciu przycisku ze znakiem plusa, pojawia si okno dialogowe

Ustawienie przegldarki jako gwnej

Przed rozpoczciem pracy nad

Rysunek 164.2. Okrelanie parametrw przegldarki dodawanej do listy

4. Kliknij przycisk OK, aby zatwierdzi ustawienia przegldarki i powrci

Kiedy serwis ju na pewno dobrze

Nazwa serwisu moe by dowolna,

Obsuga okien i paneli w obszarze

Rysunek 165.1. Pierwszy krok definiowania serwisu to ustalenie nazwy

2. Wpisz nazw nowego serwisu i kliknij przycisk Next.

Edycja plikw na zdalnym serwerze

3. Moesz ustali, e bdziesz uywa jakiego rodzaju technologi

Praca w rodowisku Dreamweaver

7. Kliknij przycisk Next. Na otwartej teraz stronie moesz wczy lub

8. Kliknij przycisk Next i sprawd jeszcze raz wszystkie parametry

System blokowania plikw (Check

Jeli podczas wczytywania serwisu

Rysunek 165.2. Sprawd ponownie poprawno ustawie

9. Kliknij przycisk Done. Nowy serwis jest ju zdefiniowany i mona teraz

Tworzenie serwisu w programie

Uywanie map serwisw

2. Po otwarciu serwisu wywietl, jeli trzeba, widok folderw lokalnych

Jeli na licie w oknie Edit Sites nie

3. Aby otworzy jeden z plikw, kliknij dwukrotnie jego ikon w widoku

Praca w rodowisku Dreamweaver

6. Zaznacz ikon pliku index.htm na mapie serwisu i przecignij ikon

7. Kontynuuj tworzenie czy lub zamknij map serwisu, ponownie klikajc

Aby w widoku folderw odsoni

Po utworzeniu cza pomidzy

W poprzednich wersjach programu

Rysunek 166.2. Rozszerzony panel Sites

W rodowisku FrontPage dostpny

Obraz szkicu (Tracing Image) peni

Ustalanie waciwoci strony