Podczas tworzenia stron WWW często napotykamy problemy. Tekst nie wyświetla się prawidłowo w przeglądarce, tabela nie wygląda tak, jak powinna, obrazek pojawia się w miejscu, w którym nie powinien -- to tylko niektóre z kłopotów, z jakimi boryka się chyba każdy początkujący twórca stron WWW. Tworzenie stron w środowiskach wizualnych to tylko półśrodek, ponieważ prędzej czy później trzeba będzie poprawić kod ręcznie. Do tego niezbędna jest znajomość języka HTML. "HTML w 10 prostych krokach" to podręcznik przydatny każdemu początkującemu i średnio zaawansowanemu webmasterowi. Opisuje rozwiązania ponad 250 typowych problemów występujących przy tworzeniu stron WWW. Każdy temat przedstawiony jest w postaci ilustrowanego przykładu. Dzięki temu każdy może szybko i bez problemów poznać język HTML -- podstawę każdego serwisu WWW. Wykonując wszystkie zadania po kolei, można poznać podstawy projektowania stron WWW, począwszy od stosowania pierwszych znaczników (elementów składowych języka HTML), skończywszy na umieszczaniu gotowych witryn na serwerze. * Struktura dokumentu HTML * Znaczniki META * Wprowadzanie i formatowanie tekstu * Umieszczanie obrazów w dokumentach HTML * Osadzanie plików multimedialnych i apletów Javy * Tworzenie tabel * Projektowanie formularzy * Formatowanie z wykorzystaniem arkuszy stylów CSS * Proste skrypty JavaScript * Korzystanie z narzędzi tekstowych i graficznych Ta książka to prawdziwy "szwajcarski scyzoryk" -- znajdziesz w niej wszystkie wiadomości, które mogą okazać się niezbędne przy tworzeniu stron WWW.

1. IDZ DO
PRZYK£ADOWY ROZDZIA£
SPIS TRE CI HTML w 10 prostych
krokach
KATALOG KSI¥¯EK Autor: Robert G. Fuller
T³umaczenie: Micha³ Dadan (rozdz. 1 – 12),
KATALOG ONLINE £ukasz Zieliñski (rozdz. 13 – 15)
ISBN: 83-7361-505-9
ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: HTML in 10 Simple Steps or Less
Format: B5, stron: 528
Przyk³ady na ftp: 385 kB
TWÓJ KOSZYK
DODAJ DO KOSZYKA Podczas tworzenia stron WWW czêsto napotykamy problemy. Tekst nie wy wietla siê
prawid³owo w przegl¹darce, tabela nie wygl¹da tak, jak powinna, obrazek pojawia siê
w miejscu, w którym nie powinien — to tylko niektóre z k³opotów, z jakimi boryka siê
CENNIK I INFORMACJE chyba ka¿dy pocz¹tkuj¹cy twórca stron WWW. Tworzenie stron w rodowiskach
wizualnych to tylko pó³ rodek, poniewa¿ prêdzej czy pó niej trzeba bêdzie poprawiæ
ZAMÓW INFORMACJE kod rêcznie. Do tego niezbêdna jest znajomo æ jêzyka HTML.
O NOWO CIACH „HTML w 10 prostych krokach” to podrêcznik przydatny ka¿demu pocz¹tkuj¹cemu
i rednio zaawansowanemu webmasterowi. Opisuje rozwi¹zania ponad 250 typowych
ZAMÓW CENNIK problemów wystêpuj¹cych przy tworzeniu stron WWW. Ka¿dy temat przedstawiony jest
w postaci ilustrowanego przyk³adu. Dziêki temu ka¿dy mo¿e szybko i bez problemów
poznaæ jêzyk HTML — podstawê ka¿dego serwisu WWW. Wykonuj¹c wszystkie zadania
CZYTELNIA po kolei, mo¿na poznaæ podstawy projektowania stron WWW, pocz¹wszy od
stosowania pierwszych znaczników (elementów sk³adowych jêzyka HTML),
FRAGMENTY KSI¥¯EK ONLINE skoñczywszy na umieszczaniu gotowych witryn na serwerze.
• Struktura dokumentu HTML
• Znaczniki META
• Wprowadzanie i formatowanie tekstu
• Umieszczanie obrazów w dokumentach HTML
• Osadzanie plików multimedialnych i apletów Javy
• Tworzenie tabel
• Projektowanie formularzy
• Formatowanie z wykorzystaniem arkuszy stylów CSS
• Proste skrypty JavaScript
• Korzystanie z narzêdzi tekstowych i graficznych
Wydawnictwo Helion Ta ksi¹¿ka to prawdziwy „szwajcarski scyzoryk” — znajdziesz w niej wszystkie
ul. Chopina 6 wiadomo ci, które mog¹ okazaæ siê niezbêdne przy tworzeniu stron WWW.
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

2. Spis treœci
O Autorach ................................................................................................................................................................................................... 13
Wprowadzenie ............................................................................................................................................................................................. 15
Czêœæ 1. Struktura dokumentu w jêzyku HTML .......................................................................... 19
Zadanie 1. Wprowadzanie znaczników .................................................................................................................................................... 20
Zadanie 2. Tworzenie struktury dokumentu ........................................................................................................................................... 22
Zadanie 3. Znacznik Meta — tworzenie s³ów kluczowych ...................................................................................................................... 24
Zadanie 4. Znacznik Meta — tworzenie opisu strony ............................................................................................................................. 26
Zadanie 5. Znacznik Meta — informacje o autorze dokumentu .............................................................................................................. 28
Zadanie 6. Znacznik Meta — data wygaœniêcia strony ............................................................................................................................. 30
Zadanie 7. Znacznik Meta — odœwie¿anie zawartoœci strony ................................................................................................................. 32
Zadanie 8. Znacznik Meta — informacje dla robotów internetowych .................................................................................................... 34
Zadanie 9. Kontrolowanie t³a dokumentu ............................................................................................................................................... 36
Zadanie 10. Praca z kodem Ÿród³owym w przegl¹darce internetowej .................................................................................................... 38
Czêœæ 2. Praca z tekstem ........................................................................................................ 41
Zadanie 11. Praca z nag³ówkami ............................................................................................................................................................... 42
Zadanie 12. Praca z akapitami................................................................................................................................................................... 44
Zadanie 13. Stosowanie czcionek ............................................................................................................................................................ 46
Zadanie 14. Ustawianie wielkoœci czcionki .............................................................................................................................................. 48
Zadanie 15. Ustawianie koloru czcionki ................................................................................................................................................... 50
Zadanie 16. Stosowanie stylów fizycznych ............................................................................................................................................... 52
Zadanie 17. Stosowanie stylów logicznych .............................................................................................................................................. 54
Zadanie 18. Wstawianie znaków specjalnych .......................................................................................................................................... 56
Zadanie 19. Stosowanie elementu „tekst preformatowany” ................................................................................................................... 58
Zadanie 20. Stosowanie elementu „cytat” ............................................................................................................................................... 60
Zadanie 21. Ustawianie marginesów dokumentu .................................................................................................................................... 62
Zadanie 22. Tworzenie listy numerowanej .............................................................................................................................................. 64
Zadanie 23. Modyfikacja stylu listy numerowanej .................................................................................................................................... 66
Zadanie 24. Zmiana wartoœci pocz¹tkowej listy numerowanej ............................................................................................................... 68
Zadanie 25. Tworzenie listy wypunktowanej........................................................................................................................................... 70

3. 6 Spis treœci
Zadanie 26. Modyfikacja stylów punktorów ............................................................................................................................................ 72
Zadanie 27. Zagnie¿d¿anie list .................................................................................................................................................................. 74
Zadanie 28. Tworzenie list definicji .......................................................................................................................................................... 76
Czêœæ 3. Praca z obrazami ....................................................................................................... 79
Zadanie 29. Wstawianie obrazów ............................................................................................................................................................ 80
Zadanie 30. Kontrolowanie odstêpów i wyrównywania ......................................................................................................................... 82
Zadanie 31. Skalowanie obrazów w programie Photoshop Elements ..................................................................................................... 84
Zadanie 32. Optymalizacja obrazów GIF w programie Photoshop Elements ......................................................................................... 86
Zadanie 33. Optymalizacja obrazów JPEG w programie Photoshop Elements ....................................................................................... 88
Zadanie 34. Optymalizacja obrazów PNG w programie Photoshop Elements ....................................................................................... 90
Czêœæ 4. Audio i wideo ............................................................................................................ 93
Zadanie 35. Osadzanie plików audio ........................................................................................................................................................ 94
Zadanie 36. DŸwiêki odtwarzane w tle .................................................................................................................................................... 96
Zadanie 37. Osadzanie sekwencji wideo .................................................................................................................................................. 98
Zadanie 38. Osadzanie apletów Javy ..................................................................................................................................................... 100
Czêœæ 5. Hiper³¹cza .............................................................................................................. 103
Zadanie 39. Tworzenie hiper³¹czy ........................................................................................................................................................ 104
Zadanie 40. Okreœlanie œcie¿ek ............................................................................................................................................................. 106
Zadanie 41. Tworzenie odnoœników mailto .......................................................................................................................................... 108
Zadanie 42. Tworzenie odnoœników 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. „Du¿e” komórki ................................................................................................................................................................. 118
Zadanie 46. Wyrównywanie elementów tabeli .................................................................................................................................... 120
Zadanie 47. Okreœlanie wymiarów elementów tabeli .......................................................................................................................... 122
Zadanie 48. T³o tabeli ............................................................................................................................................................................ 124
Zadanie 49. Zagnie¿d¿anie tabel............................................................................................................................................................ 126
Zadanie 50. Dalsze porz¹dkowanie danych w tabelach ........................................................................................................................ 128

4. Spis treœci 7
Czêœæ 7. Praca z formularzami ............................................................................................... 131
Zadanie 51. Dodawanie elementów formularzy ................................................................................................................................... 132
Zadanie 52. Formatowanie pól tekstowych .......................................................................................................................................... 134
Zadanie 53. Formatowanie pól przeznaczonych do wprowadzania hase³ ............................................................................................ 136
Zadanie 54. Formatowanie obszarów tekstowych ............................................................................................................................... 138
Zadanie 55. Formatowanie pól wyboru ................................................................................................................................................ 140
Zadanie 56. Formatowanie przycisków opcji ........................................................................................................................................ 142
Zadanie 57. Formatowanie list rozwijanych .......................................................................................................................................... 144
Zadanie 58. Formatowanie list wyboru ................................................................................................................................................. 146
Zadanie 59. Formatowanie pól typu file ................................................................................................................................................ 148
Zadanie 60. Formatowanie przycisków typu Submit i Reset ................................................................................................................ 150
Zadanie 61. Stosowanie obrazków w roli przycisków typu Submit ..................................................................................................... 152
Zadanie 62. Stosowanie ukrytych pól formularzy ................................................................................................................................. 154
Zadanie 63. Okreœlanie kolejnoœci, w jakiej nale¿y poruszaæ siê po polach formularza ....................................................................... 156
Zadanie 64. Stosowanie zestawów pól ................................................................................................................................................. 158
Czêœæ 8. Praca z ramkami ..................................................................................................... 161
Zadanie 65. Tworzenie dokumentu g³ównego ..................................................................................................................................... 162
Zadanie 66. Okreœlanie rozmiarów ramek ........................................................................................................................................... 164
Zadanie 67. Granice ramek ................................................................................................................................................................... 166
Zadanie 68. Marginesy i paski przewijania ramek.................................................................................................................................. 168
Zadanie 69. Zagnie¿d¿anie ramek ......................................................................................................................................................... 170
Zadanie 70. Wybór ramki docelowej .................................................................................................................................................... 172
Zadanie 71. Informacje noframes .......................................................................................................................................................... 174
Zadanie 72. P³ywaj¹ce ramki ................................................................................................................................................................. 176
Czêœæ 9. Kaskadowe arkusze stylów (CSS) .............................................................................. 179
Zadanie 73. Spisywanie regu³ stylu ........................................................................................................................................................ 180
Zadanie 74. Tworzenie osadzonego arkusza stylów ............................................................................................................................. 182
Zadanie 75. Tworzenie zewnêtrznego arkusza stylów ......................................................................................................................... 184
Zadanie 76. Tworzenie klas stylów ....................................................................................................................................................... 186
Zadanie 77. W³aœciwoœæ font-family ...................................................................................................................................................... 188
Zadanie 78. Okreœlanie wielkoœci czcionki za pomoc¹ s³ów kluczowych ............................................................................................ 190
Zadanie 79. Okreœlanie wielkoœci czcionki poprzez podanie jej fizycznych wymiarów ....................................................................... 192
Zadanie 80. Praca ze stylami czcionek .................................................................................................................................................. 194

5. 8 Spis treœci
Zadanie 81. Skrócony zapis w³aœciwoœci z grupy font ........................................................................................................................... 196
Zadanie 82. Kolor czcionki i kolor t³a ................................................................................................................................................... 198
Zadanie 83. Kontrolowanie odstêpów miêdzy znakami i miêdzy s³owami .......................................................................................... 200
Zadanie 84. Kontrolowanie odstêpów miêdzy wierszami i wyrównywania w pionie .......................................................................... 202
Zadanie 85. W³aœciwoœæ text-decoration ............................................................................................................................................. 204
Zadanie 86. W³aœciwoœæ text-transform ............................................................................................................................................... 206
Zadanie 87. Kontrolowanie wyrównywania tekstu i wciêæ .................................................................................................................. 208
Zadanie 88. Praca z obrazami wyœwietlanymi w tle .............................................................................................................................. 210
Zadanie 89. W³aœciwoœci z grupy padding ............................................................................................................................................. 212
Zadanie 90. W³aœciwoœci z grupy border-style ..................................................................................................................................... 214
Zadanie 91. W³aœciwoœci z grupy border-width ................................................................................................................................... 216
Zadanie 92. W³aœciwoœci z grupy border-color .................................................................................................................................... 218
Zadanie 93. Skrócony zapis w³aœciwoœci z grupy border ...................................................................................................................... 220
Zadanie 94. W³aœciwoœci z grupy margin .............................................................................................................................................. 222
Zadanie 95. Okreœlanie wymiarów poszczególnych elementów .......................................................................................................... 224
Zadanie 96. W³aœciwoœæ float ................................................................................................................................................................ 226
Zadanie 97. Kontrolowanie stylów wypunktowania ............................................................................................................................. 228
Zadanie 98. Kontrolowanie stylów numerowania ................................................................................................................................ 230
Zadanie 99. Tworzenie warstw o wspó³rzêdnych bezwzglêdnych ....................................................................................................... 232
Zadanie 100. Tworzenie warstw o wspó³rzêdnych wzglêdnych .......................................................................................................... 234
Zadanie 101. Deklarowanie obszarów obcinania warstw .................................................................................................................... 236
Czêœæ 10. Proste skrypty w jêzyku JavaScript ............................................................................ 239
Zadanie 102. Przygotowywanie dokumentów ...................................................................................................................................... 240
Zadanie 103. Wstawianie informacji o dacie i godzinie ........................................................................................................................ 242
Zadanie 104. Zmiana zawartoœci strony w zale¿noœci od pory dnia ..................................................................................................... 244
Zadanie 105. Umieszczanie informacji na pasku stanu przegl¹darki ..................................................................................................... 246
Zadanie 106. Ukrywanie adresów e-mail przed spamerami ................................................................................................................. 248
Zadanie 107. Wczytywanie obrazów z wyprzedzeniem ...................................................................................................................... 250
Zadanie 108. Efekt zmieniaj¹cych siê obrazów ..................................................................................................................................... 252
Zadanie 109. Tworzenie okien wyskakuj¹cych ..................................................................................................................................... 254

6. Spis treœci 9
Czêœæ 11. Elementy opracowane przez firmy niezale¿ne .............................................................. 257
Zadanie 110. Dodawanie bezp³atnego paska wyszukiwania Google .................................................................................................... 258
Zadanie 111. Dodawanie bezp³atnego paska z wiadomoœciami ........................................................................................................... 260
Zadanie 112. Dodawanie mo¿liwoœci g³osowania ................................................................................................................................. 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 dokumentów ............................................................................................................................ 274
Zadanie 118. Poruszanie siê po tekœcie ................................................................................................................................................. 276
Zadanie 119. Zaznaczanie kodu ............................................................................................................................................................ 278
Zadanie 120. Korzystanie ze Schowka .................................................................................................................................................. 280
Zadanie 121. Zarz¹dzanie plikami ......................................................................................................................................................... 282
Zadanie 122. Narzêdzia ZnajdŸ i Zast¹p ............................................................................................................................................... 284
Zadanie 123. Wyszukiwanie ³añcuchów w kilku plikach jednoczeœnie ................................................................................................. 286
Zadanie 124. Odnajdywanie nawiasów do pary .................................................................................................................................... 288
Zadanie 125. Sprawdzanie pisowni ....................................................................................................................................................... 290
Zadanie 126. Praca z Selektorem dokumentów ................................................................................................................................... 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. Wspó³praca TextPada z przegl¹darkami internetowymi ................................................................................................ 302
Zadanie 132. Konfiguracja narzêdzia HTML Validator ......................................................................................................................... 304
Zadanie 133. Tworzenie makr wywo³ywanych z klawiatury ................................................................................................................ 306
Zadanie 134. Tworzenie makr wstawiaj¹cych znaczniki-pojemniki ..................................................................................................... 308
Zadanie 135. Kolorowanie sk³adni ........................................................................................................................................................ 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 folderów projektu .................................................................................................................................. 318
Zadanie 139. Rozpoczêcie pracy nad nowym dokumentem ................................................................................................................ 320

7. 10 Spis treœci
Zadanie 140. Tworzenie i u¿ywanie szablonów stron .......................................................................................................................... 322
Zadanie 141. Wstawianie i konwersja plików....................................................................................................................................... 324
Zadanie 142. Odnajdywanie i wstawianie znaczników i atrybutów ..................................................................................................... 326
Zadanie 143. Porz¹dkowanie kodu za pomoc¹ funkcji CodeSweeper ................................................................................................. 328
Zadanie 144. Edycja kaskadowych arkuszy stylów w oknie edytora stylów ........................................................................................ 330
Zadanie 145. Podgl¹d stron w zewnêtrznych przegl¹darkach .............................................................................................................. 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 ci¹gów znaków w dokumencie HTML .................................................................................................... 342
Zadanie 151. Zamienianie ci¹gów znaków w dokumencie HTML ....................................................................................................... 344
Zadanie 152. Wstawianie obrazów ....................................................................................................................................................... 346
Zadanie 153. Korzystanie z edytora map obrazów .............................................................................................................................. 348
Zadanie 154. Automatyczne wstawianie znaczników ........................................................................................................................... 350
Zadanie 155. Wstawianie tabel ............................................................................................................................................................. 352
Zadanie 156. Konstruowanie uk³adów ramek ...................................................................................................................................... 354
Zadanie 157. Tworzenie formularzy ..................................................................................................................................................... 356
Zadanie 158. Okreœlanie 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 plików i folderów ...................................................................................................................................... 368
Czêœæ 14. Praca w œrodowisku Dreamweaver ............................................................................. 371
Zadanie 164. Okreœlanie przegl¹darek u¿ywanych do podgl¹du stron ................................................................................................ 372
Zadanie 165. Definiowanie serwisów ................................................................................................................................................... 374
Zadanie 166. U¿ywanie map serwisów ................................................................................................................................................. 376
Zadanie 167. Ustalanie w³aœciwoœci strony ........................................................................................................................................... 378
Zadanie 168. Ustawianie opcji wyœwietlania kodu ................................................................................................................................ 380
Zadanie 169. Korzystanie z urywków kodu.......................................................................................................................................... 382
Zadanie 170. Wstawianie i formatowanie tekstu ................................................................................................................................. 384
Zadanie 171. Tworzenie list .................................................................................................................................................................. 386
Zadanie 172. Sprawdzanie pisowni tekstu ............................................................................................................................................ 388

8. Spis treœci 11
Zadanie 173. U¿ywanie funkcji wyszukaj i zast¹p.................................................................................................................................. 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 obrazów ............................................................................................................................. 396
Zadanie 177. Tworzenie tekstu w formacie Flash ................................................................................................................................ 398
Zadanie 178. Tworzenie przycisków w formacie Flash ........................................................................................................................ 400
Zadanie 179. Testowanie i dostosowywanie przycisków w formacie Flash ........................................................................................ 402
Zadanie 180. Wyznaczanie zewnêtrznego edytora obrazów ............................................................................................................... 404
Zadanie 181. Tworzenie map obrazów ................................................................................................................................................ 406
Zadanie 182. Przygotowywanie obrazów prze³¹czanych ..................................................................................................................... 408
Zadanie 183. Projektowanie pasków nawigacyjnych ............................................................................................................................ 410
Zadanie 184. Tworzenie tabel ............................................................................................................................................................... 412
Zadanie 185. Modyfikowanie istniej¹cych tabel .................................................................................................................................... 414
Zadanie 186. Tworzenie formularzy ..................................................................................................................................................... 416
Zadanie 187. Opracowywanie uk³adów ramek .................................................................................................................................... 418
Zadanie 188. Pos³ugiwanie siê technik¹ warstw ................................................................................................................................... 420
Zadanie 189. Tworzenie arkuszy stylów ............................................................................................................................................... 422
Zadanie 190. Definiowanie akcji ........................................................................................................................................................... 424
Zadanie 191. Definiowanie akcji wstêpnego pobierania obrazów ....................................................................................................... 426
Zadanie 192. Definiowanie akcji otwierania okna przegl¹darki ............................................................................................................ 428
Zadanie 193. Definiowanie akcji sprawdzania danych w formularzu ................................................................................................... 430
Zadanie 194. Definiowanie akcji wyœwietlania tekstu na pasku stanu .................................................................................................. 432
Zadanie 195. Korzystanie z panelu zasobów ........................................................................................................................................ 434
Zadanie 196. Okreœlanie danych zdalnego serwera.............................................................................................................................. 436
Zadanie 197. Wysy³anie i pobieranie plików ........................................................................................................................................ 438
Zadanie 198. Zarz¹dzanie podzia³em pracy .......................................................................................................................................... 440
Czêœæ 15. Praca w œrodowisku FrontPage .................................................................................. 443
Zadanie 199. Zak³adanie serwisu WWW ............................................................................................................................................. 444
Zadanie 200. Tworzenie nowych stron w strukturze nawigacyjnej ..................................................................................................... 446
Zadanie 201. Nadawanie nazw i zapisywanie stron .............................................................................................................................. 448
Zadanie 202. Przegl¹danie i zmienianie w³aœciwoœci stron ................................................................................................................... 450
Zadanie 203. Stosowanie motywów ..................................................................................................................................................... 452
Zadanie 204. Tworzenie nowych motywów ........................................................................................................................................ 454
Zadanie 205. Tworzenie i u¿ywanie szablonów.................................................................................................................................... 456

9. 12 Spis treœci
Zadanie 206. Wstawianie i formatowanie tekstu ................................................................................................................................. 458
Zadanie 207. Sprawdzanie i poprawianie tekstu strony ....................................................................................................................... 460
Zadanie 208. Wstawianie obrazów clipart i z pliku .............................................................................................................................. 462
Zadanie 209. Definiowanie zastêpczego tekstu .................................................................................................................................... 464
Zadanie 210. Rysowanie i formatowanie kszta³tów i linii ..................................................................................................................... 466
Zadanie 211. Wstawianie na strony filmów w formacie Flash .............................................................................................................. 468
Zadanie 212. Tworzenie obiektów WordArt ...................................................................................................................................... 470
Zadanie 213. Dodawanie pasków nawigacyjnych ................................................................................................................................. 472
Zadanie 214. Wstawianie i wyrównywanie transparentów stron ........................................................................................................ 474
Zadanie 215. Tworzenie przycisków interaktywnych .......................................................................................................................... 476
Zadanie 216. Zmienianie t³a i kolorów stron ........................................................................................................................................ 478
Zadanie 217. Tworzenie list punktowanych i numerowanych ............................................................................................................. 480
Zadanie 218. Wyœwietlanie obramowania tekstu ................................................................................................................................. 482
Zadanie 219. Cieniowanie bloków tekstu i pustych wierszy ................................................................................................................ 484
Zadanie 220. Wstawianie tabel ............................................................................................................................................................. 486
Zadanie 221. Tworzenie i usuwanie wierszy, kolumn i komórek ........................................................................................................ 488
Zadanie 222. Rozdzielanie i scalanie komórek tabel ............................................................................................................................. 490
Zadanie 223. Zmienianie wymiarów i formatowania komórek ............................................................................................................ 492
Zadanie 224. Wype³nianie tabel grafik¹ i tekstem ................................................................................................................................ 494
Zadanie 225. Tworzenie ramek ............................................................................................................................................................ 496
Zadanie 226. Stosowanie techniki warstw ............................................................................................................................................ 498
Zadanie 227. Definiowanie zak³adek w tekœcie stron ........................................................................................................................... 500
Zadanie 228. Wpisywanie s³ów kluczowych i opisów stron ................................................................................................................ 502
Zadanie 229. Publikowanie utworzonych serwisów ............................................................................................................................ 504
Skorowidz ............................................................................................................................................................................... 507

10. Czêœæ 14. Praca w œrodowisku Dreamweaver
Zadanie 164. Okreœlanie przegl¹darek u¿ywanych do podgl¹du stron
Zadanie 165. Definiowanie serwisów
Zadanie 166. U¿ywanie map serwisów
Zadanie 167. Ustalanie w³aœciwoœci strony
Zadanie 168. Ustawianie opcji wyœwietlania kodu
Zadanie 169. Korzystanie z urywków kodu
Zadanie 170. Wstawianie i formatowanie tekstu
Zadanie 171. Tworzenie list
Zadanie 172. Sprawdzanie pisowni tekstu
Zadanie 173. U¿ywanie funkcji wyszukaj i zast¹p
Zadanie 174. Importowanie kodu HTML wygenerowanego w edytorze Word
Zadanie 175. Importowanie tabel danych z osobnych aplikacji
Zadanie 176. Wstawianie i formatowanie obrazów
Zadanie 177. Tworzenie tekstu w formacie Flash
Zadanie 178. Tworzenie przycisków w formacie Flash
Zadanie 179. Testowanie i dostosowywanie przycisków w formacie Flash
Zadanie 180. Wyznaczanie zewnêtrznego edytora obrazów
Zadanie 181. Tworzenie map obrazów
Zadanie 182. Przygotowywanie obrazów prze³¹czanych
Zadanie 183. Projektowanie pasków nawigacyjnych
Zadanie 184. Tworzenie tabel
Zadanie 185. Modyfikowanie istniej¹cych tabel
Zadanie 186. Tworzenie formularzy
Zadanie 187. Opracowywanie uk³adów ramek
Zadanie 188. Pos³ugiwanie siê technik¹ warstw
Zadanie 189. Tworzenie arkuszy stylów
Zadanie 190. Definiowanie akcji
Zadanie 191. Definiowanie akcji wstêpnego pobierania obrazów
Zadanie 192. Definiowanie akcji otwierania okna przegl¹darki
Zadanie 193. Definiowanie akcji sprawdzania danych w formularzu
Zadanie 194. Definiowanie akcji wyœwietlania tekstu na pasku stanu
Zadanie 195. Korzystanie z panelu zasobów
Zadanie 196. Okreœlanie danych zdalnego serwera
Zadanie 197. Wysy³anie i pobieranie plików
Zadanie 198. Zarz¹dzanie podzia³em pracy

11. 372 Czêœæ 14.
Zadanie 164 Okreœlanie przegl¹darek
u¿ywanych do podgl¹du stron
Uwagi
§ Firma Macromedia udostêpnia Dobry projektant stron internetowych, zanim udostêpni strony na serwerze,
darmowe wersje próbne swoich testuje je w wiêcej ni¿ jednej przegl¹darce, a nawet w ró¿nych wersjach
programów, w tym tak¿e poszczególnych przegl¹darek. Dziêki temu mo¿e siê zorientowaæ, czy wygl¹d
œrodowiska Dreamweaver MX, lub dzia³anie którejœ ze stron nie ulegaj¹ zaburzeniu po wyœwietleniu
w internecie pod adresem http://
www.macromedia.com/downloads. za pomoc¹ niektórych przegl¹darek, czy te¿ nawet tylko jednej z wersji którejœ
z przegl¹darek. W tym zadaniu ustawimy przegl¹darki, które bêd¹ u¿ywane
§ Aby przegl¹darkê mo¿na by³o
do pogl¹du edytowanych stron.
umieœciæ na liœcie, trzeba najpierw
mieæ j¹ zainstalowan¹ w komputerze.
Najnowsz¹ wersjê przegl¹darki 1. Po uruchomieniu œrodowiska Dreamweaver MX wybierz z menu File
Microsoft Internet Explorer znajdziesz pozycjê Preview in Browser, a z otwartego w ten sposób podmenu polecenie
w serwisie firmy Microsoft pod
Edit Browser List.
adresem http://www.microsoft.com/
windows/ie_intl/pl/; przegl¹darkê
Netscape Navigator na stronach 2. Uka¿e siê okno dialogowe Preferences (rysunek 164.1). Zaznacz po lewej
firmy Netscape (http://channels. stronie element Preview in Browser. W prawej czêœci okna mo¿esz teraz
netscape.com/ns/browsers), uzupe³niæ listê u¿ywanych przegl¹darek, klikaj¹c przycisk ze znakiem
natomiast polsk¹ wersjê zgodnej plusa.
z Netscape Navigator przegl¹darki
Mozilla pobraæ mo¿na ze stron
projektu znajduj¹cych siê pod
adresem http://www.mozillapl.org.
Œwietn¹ kolekcjê starszych wersji
ró¿nych przegl¹darek zebrano
w serwisie http://browsers.evolt.org.
§ Naprawdê nie sposób mieæ zbyt
wiele przegl¹darek do wyboru.
Im wiêcej rodzajów masz dostêpnych,
im wiêcej wersji ka¿dego typu
przegl¹darki, tym dok³adniej mo¿esz
przetestowaæ tworzone strony
i usun¹æ wszelkie niezgodnoœci
przed wys³aniem stron na serwer.
Ostrze¿enie
§ Wybieraj¹c do zainstalowania
przegl¹darki i poszczególne ich
wersje, bierz pod uwagê docelow¹
grupê odbiorców tworzonych stron.
Jeœli bêd¹ to w wiêkszoœci osoby
zafascynowane technologi¹, nie musisz
siê za bardzo przejmowaæ starszymi
wersjami. Jeœli serwis ma byæ
przeznaczony dla szerszej publicznoœci,
spoœród której wiele osób korzysta Rysunek 164.1. Widok listy przegl¹darek u¿ywanych do podgl¹du umo¿liwia dodawanie przegl¹darek do listy
prawdopodobnie ze starszego
sprzêtu i oprogramowania, upewnij
siê, ¿e strony bêd¹ u nich dzia³aæ.
Przetestuj serwis w ró¿nych
wersjach przegl¹darek Internet
Explorer i Netscape Navigator
wczeœniejszych ni¿ 6.0.

12. Praca w œrodowisku Dreamweaver 373
3. Po klikniêciu przycisku ze znakiem plusa, pojawia siê okno dialogowe
Add Browser (rysunek 164.2). Wpisz w nim nazwê, pod jak¹ przegl¹darka
bêdzie widoczna na liœcie, wyznacz œcie¿kê do pliku programu i zdecyduj,
Zadanie 164
czy przegl¹darka ma byæ mo¿e ustawiona jako g³ówna (Primary Browser)
albo dodatkowa (Secondary Browser).
Wskazówka
§ Ustawienie przegl¹darki jako g³ównej
oznacza, ¿e mo¿na j¹ szybko
uruchomiæ klawiszem F12.
Przegl¹darce dodatkowej odpowiada
kombinacja klawiszy Ctrl+F12.
Pozosta³e przegl¹darki trzeba
Rysunek 164.2. Okreœlanie parametrów przegl¹darki dodawanej do listy
uruchamiaæ z menu.
4. Kliknij przycisk OK, aby zatwierdziæ ustawienia przegl¹darki i powróciæ § Przed rozpoczêciem pracy nad
do okna dialogowego Preferences. serwisem w jêzyku polskim, warto
ustawiæ domyœlne kodowanie znaków
5. Powtarzaj kroki od 2. do 4. dla ka¿dej przegl¹darki, któr¹ chcesz umieœciæ w nowo tworzonych dokumentach
na liœcie. na standard ISO 8859-2. W tym
celu wybierz z menu Edit polecenie
6. Kliknij przycisk OK, aby zamkn¹æ okno dialogowe Preferences. Preferences i w lewej czêœci okna,
które siê otworzy, zaznacz element
New Document. Nastêpnie z listy
rozwijanej Default Encoding wybierz
pozycjê Central European
(ISO-8859-2).
Odsy³acz
§ Kiedy serwis ju¿ na pewno dobrze
dzia³a i wygl¹da we wszystkich
przegl¹darkach, wyœlij jego pliki
na serwer WWW (wiêcej informacji
na ten temat znajdziesz w zadaniu 197.).

13. 374 Czêœæ 14.
Zadanie 165 Definiowanie serwisów
Pracê nad projektem w œrodowisku Dreamweaver MX rozpoczyna siê
od zdefiniowania serwisu. Trzeba wpisaæ nazwê, okreœliæ lokalne i docelowe
po³o¿enie plików, a tak¿e inne szczegó³owe ustawienia. Struktura folderów
lokalnych zostanie odtworzona na serwerze, nie bêdzie wiêc problemów
Uwagi z ³¹czami miêdzy plikami serwisu.
§ Nazwa serwisu mo¿e byæ dowolna,
1. Wybierz z menu Site polecenie New Site, aby otworzyæ okno dialogowe
na przyk³ad mo¿esz wykorzystaæ
adres domenowy, ale dobrymi Site Definition (rysunek 165.1). Bêdziemy zajmowaæ siê na razie tylko
nazwami bêd¹ te¿ Serwis panelem Basic, upewnij siê wiêc, ¿e to w³aœnie ten z dwóch jest otwarty.
Roberta albo Serwis
korporacji ABC.
§ Obs³uga okien i paneli w obszarze
roboczym Dreamweaver MX jest
charakterystyczna dla programów
Macromedia z oznaczeniem MX,
na przyk³ad Flash MX. Zawartoœæ
panelu mo¿na na przemian wyœwietlaæ
i ukrywaæ, klikaj¹c ikonê trójk¹ta
obok nazwy panelu (omawiany
w tym zadaniu panel Site znajduje siê
w oknie Files). Jeœli niechc¹cy usunie
siê z obszaru roboczego okno lub
panel, mo¿na je ponownie wyœwietliæ
(lub ods³oniæ zawartoœæ zwiniêtego
panelu), znajduj¹c nazwê panelu
w menu Windows.
Rysunek 165.1. Pierwszy krok definiowania serwisu to ustalenie nazwy
2. Wpisz nazwê nowego serwisu i kliknij przycisk Next.
3. Mo¿esz ustaliæ, ¿e bêdziesz u¿ywaæ jakiegoœ rodzaju technologiê
aktywnego generowania stron na serwerze (tak¹ jak ColdFusion,
Ostrze¿enie ASP.NET, JSP czy PHP). Zaznacz opcjê Yes, aby wybraæ konkretn¹
technologiê, lub opcjê No, aby zrezygnowaæ z tych rozwi¹zañ.
§ Edycja plików na zdalnym serwerze
ma dwie wady. Po pierwsze, strony
4. Kliknij przycisk Next. Trzecia strona kreatora zawiera zapytanie o tryb
s¹ publicznie dostêpne w czasie,
gdy nad nimi pracujesz. Po drugie, edycji stron: lokalnie (do wyboru dysk albo sieæ) czy na zdalnym serwerze.
trzeba specjalnie kopiowaæ pliki
na dysk lokalny w celu utworzenia 5. Zaznacz opcjê Edit Local Copies on My Machine. Musisz teraz wyznaczyæ
kopii zapasowej. œcie¿kê do folderu, w którym chcesz przechowywaæ pliki nowego serwisu.
6. Kliknij przycisk Next i na nastêpnej stronie wybierz metodê ³¹czenia siê
z serwerem zdalnym. W zale¿noœci od ustawionej metody w panelu
dostêpne bêd¹ inne opcje szczegó³owe.

14. Praca w œrodowisku Dreamweaver 375
7. Kliknij przycisk Next. Na otwartej teraz stronie mo¿esz w³¹czyæ lub
wy³¹czyæ system blokowania plików (Check In-Check Out) dla nowego serwisu. Zadanie 165
8. Kliknij przycisk Next i sprawdŸ jeszcze raz wszystkie parametry
(rysunek 165.2).
Wskazówki
§ System blokowania plików (Check
In-Check Out) s³u¿y zapobieganiu
sytuacji, kiedy dwie ró¿ne osoby
równoczeœnie zmieniaj¹ ten sam
plik. Jeœli pracujesz nad serwisem
razem z kimœ innym, zaznacz opcjê
Yes, enable check in and check out.
Jeœli nad serwisem pracujesz tylko
Ty, zaznacz opcjê No.
§ Jeœli podczas wczytywania serwisu
w jego g³ównym folderze zostanie
wykryty plik index.html lub
index.htm, automatycznie zostanie
on oznaczony jako strona g³ówna
serwisu. Jeœli jednak tworzysz
stronê g³ówn¹ ju¿ po otwarciu
Rysunek 165.2. SprawdŸ ponownie poprawnoœæ ustawieñ projektu, musisz oznaczyæ jej plik
rêcznie.
9. Kliknij przycisk Done. Nowy serwis jest ju¿ zdefiniowany i mo¿na teraz
dodawaæ do niego strony.
10. Przede wszystkim potrzebujesz pliku o nazwie index.html. Zapisz wiêc
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ê g³ówn¹ serwisu. Jeœli teraz z listy
rozwijanej w tym samym panelu (z tej po prawej stronie) wybierzesz
pozycjê Map View, zobaczysz zacz¹tek mapy nowego serwisu (rysunek 165.3).
Rysunek 165.3. Na razie mapa serwisu
zawiera tylko jeden element
Odsy³acz
§ Tworzenie serwisu w programie
FrontPage mo¿e polegaæ na wybraniu
szablonu i przygotowywaniu na jego
podstawie kolejnych stron. Przeczytaj
czêœæ 15., aby zdobyæ wiêcej
informacji na ten temat.

15. 376 Czêœæ 14.
Zadanie 166 U¿ywanie map serwisów
Widok mapy serwisu umo¿liwia tworzenie i nadzór nad uk³adem ³¹czy
pomiêdzy stronami, a tak¿e otwieranie poszczególnych plików do edycji. Jest
to jak gdyby spojrzenie na ca³y serwis z lotu ptaka, którym mo¿na obj¹æ siatkê
stron i zorientowaæ siê w strukturze serwisu. Istnieje jednak¿e pewna przeszkoda:
najpierw trzeba utworzyæ serwis, zapisaæ kilka plików, a dopiero póŸniej mo¿na
podziwiaæ ich schemat na mapie serwisu. Przed podjêciem poni¿szych kroków
trzeba wiêc nie tylko zdefiniowaæ serwis, ale te¿ zapisaæ przynajmniej dwa pliki.
W tym przyk³adzie wykorzystamy pliki strony g³ównej index.html oraz podstrony
kontakt.html.
1. Aby wczytaæ uprzednio utworzony serwis i wyœwietliæ jego mapê, wybierz
z menu Site polecenie Site Map. Jeœli dostêpny jest wiêcej ni¿ jeden
serwis, zaznacz na liœcie wszystkich serwisów (rysunek 166.1 przedstawia
zawieraj¹ce j¹ okno) nazwê serwisu, którym zamierzasz siê zajmowaæ,
a potem kliknij przycisk Done.
Rysunek 166.1. W oknie dialogowym Edit Sites zaznacz
nazwê serwisu, nad którym bêdziesz pracowaæ
2. Po otwarciu serwisu wyœwietl, jeœli trzeba, widok folderów lokalnych
(panel Site w oknie Files, opcja Local View na prawej liœcie rozwijanej).
Klikaj¹c ikony plusa lub minusa mo¿esz ods³aniaæ b¹dŸ ukrywaæ
zawartoœæ folderów w sposób analogiczny jak w oknach Eksploratora
systemu Windows. W tym widoku mo¿esz obserwowaæ rozmieszczenie
plików serwisu w folderach.
3. Aby otworzyæ jeden z plików, kliknij dwukrotnie jego ikonê w widoku
eksploratora. Plik zostaje otwarty w nowym oknie edytora i mo¿na go
teraz poddaæ edycji.
Ostrze¿enie
4. Aby szybko utworzyæ ³¹cze miêdzy dwoma stronami serwisu, rozszerz
§ Jeœli na liœcie w oknie Edit Sites nie panel Site, klikaj¹c ostatni na pasku narzêdzi panelu przycisk Expand/
ma serwisu, który powinien tam siê Collapse. W zale¿noœci od uk³adu obszaru roboczego panel albo przekszta³ci
znajdowaæ, to znaczy, ¿e w ogóle
siê w okno zmaksymalizowane na ca³e okno Dreamweaver MX, albo
nie zosta³ zdefiniowany, czy to
z powodu roztargnienia, czy te¿ jedynie zawieraj¹ce go okno siê poszerzy (rysunek 166.2).
przerwania procesu definiowania.
5. Za pomoc¹ pierwszego i trzeciego od lewej przycisku na pasku narzêdzi
Wybierz z menu Site polecenie
New Site i utwórz serwis, uwa¿nie panelu mo¿esz prze³¹czaæ widok w lewej czêœci okna pomiêdzy widokami
podaj¹c wszystkie wymagane folderów serwisu (rysunek 166.3) i mapy serwisu. Przytrzymanie przycisku
informacje. trzeciego powoduje otwarcie menu, które umo¿liwia w³¹czenie lub
wy³¹czenie widoku folderów lokalnych w prawej czêœci okna.

16. Praca w œrodowisku Dreamweaver 377
6. Zaznacz ikonê pliku index.htm na mapie serwisu i przeci¹gnij ikonê
celownika na nazwê pliku w widoku folderów lokalnych po prawej
stronie. Po ustanowieniu ³¹cza wybrany plik pojawi siê w widoku mapy
Zadanie 166
serwisu, a samo ³¹cze zostanie wyœwietlone w postaci kreski (rysunek 166.4).
7. Kontynuuj tworzenie ³¹czy lub zamknij mapê serwisu, ponownie klikaj¹c
przycisk rozk³adania-sk³adania panelu.
Wskazówki
§ Aby w widoku folderów ods³oniæ
lub ukryæ zawartoœæ folderu, mo¿esz
tak¿e klikn¹æ dwukrotnie jego nazwê.
§ Po utworzeniu ³¹cza pomiêdzy
dwiema stronami w opisany tu
sposób, na stronie pocz¹tkowej
umieszczane jest ³¹cze tekstowe
(w tym przypadku bêdzie to tekst
kontakt, umo¿liwiaj¹cy przejœcie
do strony kontakt.html). PóŸniej
mo¿esz zmieniæ je na ³¹cze graficzne
albo pozostawiæ tekst, a tylko,
na przyk³ad, zmieniæ po³o¿enie
Rysunek 166.2. Rozszerzony panel Sites i formatowanie tekstu.
§ W poprzednich wersjach programu
Dreamweaver mapa serwisu by³a
wyœwietlana w osobnym oknie
i wyœwietlenie go ponad pozosta³ymi
oknami w celu korzystania z widoku
mapy wymaga³o klikniêcia na pasku
zadañ przycisku odpowiadaj¹cego
temu oknu. Przycisk sk³adania-
-rozk³adania spe³nia z grubsza podobn¹
funkcjê, umo¿liwiaj¹c wyœwietlenie
mapy, jeœli jest potrzebna. Ten sam
panel, zablokowany po prawej
stronie obszaru roboczego, mo¿e
s³u¿yæ do otwierania plików
Rysunek 166.3. Ten sam panel po prze³¹czeniu lewej czêœci okna na widok folderów serwisu do edycji.
Odsy³acz
§ W œrodowisku FrontPage dostêpny
jest widok nawigacyjny umo¿liwiaj¹cy
podobne operacje jak widok mapy
serwisu w œrodowisku Dreamweaver.
Z czêœci 15. dowiesz siê, jak obs³uga
serwisu realizowana jest w œrodowisku
FrontPage.
Rysunek 166.4. £¹cze pomiêdzy dwiema stronami wyœwietlone w widoku mapy serwisu

17. 378 Czêœæ 14.
Zadanie 167 Ustalanie w³aœciwoœci strony
Ustawienia poszczególnych stron serwisu powinny byæ takie same. Poniewa¿
w³aœciwoœci okreœlane w omawianym tu oknie s¹ wa¿ne tylko w odniesieniu
do edytowanej w danej chwili strony, trzeba ustawiaæ je za ka¿dym razem tak
samo, jeœli nawet nie wszystkie, to przynajmniej w jakiejœ podstawowej czêœci,
Uwaga aby serwis by³ spójny jako ca³oœæ.
§ Obraz szkicu (Tracing Image) pe³ni
1. Otwórz stronê, której w³aœciwoœci zamierzasz dostosowaæ. Wybierz
rolê wzorca. Nie jest w³¹czany
do gotowego serwisu, ale pokazuje z menu Modify polecenie Page Properties.
siê w edytorze, jak gdyby pod
stron¹. Dziêki tej funkcji mo¿na 2. Wpisz tytu³ strony w pierwszym polu okna dialogowego Page Properties
do przygotowanego wczeœniej (rysunek 167.1).
projektu graficznego strony
dopasowywaæ wszystkie obrazy,
tabele i ich komórki, ramki i warstwy,
a tak¿e wyznaczaæ obszary na tekst.
Za pomoc¹ suwaka reguluj¹cego
stopieñ przeŸroczystoœci szkicu
(Image Transparency) mo¿esz go
trochê rozmyæ, jeœli nie jest od razu
przygotowany w ten sposób.
Niewygodnie jest wyœwietlaæ obraz
szkicu w ca³kowitej widzialnoœci,
poniewa¿ trudno by³oby dostrzec
wyraŸnie elementy wstawiane na tle
szkicu.
Rysunek 167.1. Dostosuj prawie wszystkie w³asnoœci aktywnej strony w oknie dialogowym Page Properties
3. Jeœli strona ma zawieraæ tekst w jêzyku polskim, upewnij siê,
¿e kodowanie znaków wyszczególnione w polu Document Encoding
jest ustawione na Central European (ISO-8859-2).

18. Praca w œrodowisku Dreamweaver 379
4. Wybierz obraz t³a strony, jeœli chcesz. A jeœli wolisz wybraæ raczej
jednolity kolor t³a, skorzystaj w tym celu z palety (rysunek 167.2). Zadanie 167
Wskazówki
§ Mo¿esz tak¿e klikn¹æ t³o strony
prawym przyciskiem myszy i wybraæ
polecenie Page Properties
z wyœwietlonego tym sposobem
menu.
§ Ustalany tu tytu³ strony bêdzie
pojawiaæ siê na pasku tytu³owym
okna przegl¹darki, ilekroæ u¿ytkownik
otworzy stronê. Staraj siê uk³adaæ
raczej krótkie i rzeczowe tytu³y.
Spróbuj zw³aszcza nie przekraczaæ
Rysunek 167.2. T³o strony mo¿na ozdobiæ tapet¹ lub pokryæ jednolitym kolorem oko³o 50 znaków d³ugoœci tytu³u,
poniewa¿ tytu³ d³u¿szy mo¿e nie
zmieœciæ siê na pasku tytu³owym
5. Korzystaj¹c z identycznych przycisków palety dla ka¿dej z tych opcji,
okna przegl¹darki.
ustaw kolory tekstu (Text), ³¹czy (Links), ³¹czy odwiedzonych (Visited
Links) i ³¹czy aktywnych (Active Links).
§ Jeœli chcesz zobaczyæ skutek
wprowadzanych zmian od razu, bez
6. Wpisz wielkoœci marginesów: lewego (Left Margin), górnego (Top Margin),
koniecznoœci zamykania okna, kliknij
lewego i prawego równoczeœnie (Width Margin) lub górnego i dolnego przycisk Apply zamiast OK.
równoczeœnie (Height Margin).
7. Jeœli chcesz korzystaæ z obrazu szkicu, wyznacz œcie¿kê do niego w polu
Tracing Image.
8. Kliknij przycisk OK, aby zatwierdziæ ustawienia i zobaczyæ
zmodyfikowan¹ stronê.
Odsy³acz
§ W programie FrontPage okno
w³aœciwoœci strony zawiera wiêkszoœæ
omawianych tu opcji. Wypróbuj je
po zapoznaniu siê z czêœci¹ 15.

19. 380 Czêœæ 14.
Zadanie 168 Ustawianie opcji wyœwietlania kodu
Zaufaj nam: nie ma innej drogi ni¿ praca nad kodem. Fakt, ¿e Dreamweaver
to edytor graficzny, wcale jeszcze nie oznacza, ¿e nigdy ju¿ nie bêdzie trzeba
ogl¹daæ zapisu jêzyka HTML. Co wiêcej, œrodowisko Dreamweaver stworzono
w sposób zachêcaj¹cy do cyzelowania kodu strony, który jest tu bardzo ³atwo
dostêpny. Pó³ lub ca³y obszar edycyjny mo¿na przeznaczyæ na podgl¹d kodu
Uwaga Ÿród³owego strony.
§ Mo¿esz obserwowaæ stronê
równoczeœnie w trybach graficznym 1. Uruchom œrodowisko Dreamweaver i skoncentruj siê nad obszarem
i tekstowym. Kliknij przycisk edycyjnym.
znajduj¹cy siê na prawo
od przycisku widoku kodu, a obszar 2. Na pasku narzêdzi edycyjnych kliknij przycisk widoku kodu (Code View,
edycyjny zostanie rozdzielony rysunek 168.1).
poziomo na obszary widoku
obu typów.
Rysunek 168.1. Przycisk widoku kodu
3. Wybierz z menu View element Code View Options. Pojawi siê podmenu
z opcjami wyœwietlania kodu, a przy ka¿dej z ustawionych w danej
chwili opcji bêdzie widoczna parafka (rysunek 168.2).
Rysunek 168.2. Podmenu opcji wyœwietlania kodu

20. Praca w œrodowisku Dreamweaver 381
4. Mo¿esz w³¹czyæ nastêpuj¹ce opcje:
• Word Wrap (zawijanie wierszy) umo¿liwia czytanie i edycjê kodu bez
Zadanie 168
koniecznoœci przewijania w poziomie.
• Line Numbers (numery wierszy) — powoduje wyœwietlenie numerów
wierszy kodu przy lewej krawêdzi okna edytora.
• Highlight Invalid HTML — wyró¿niaj nieprawid³owy kod HTML. Jeœli
ta opcja jest zaznaczona, fragmentu kodu niezgodne z zasadami
Wskazówki
sk³adni jêzyka HTML bêd¹ oznaczane ¿ó³tym t³em. Po klikniêciu § Oprócz przycisków paska narzêdzi
wadliwego znacznika, informacja o mo¿liwoœci jego poprawienia prze³¹czanie pomiêdzy widokami
zostanie wyœwietlona w oknie Property (rysunek 168.3). kodu a projektowym umo¿liwiaj¹
polecenie Switch View z menu View,
a tak¿e kombinacje klawiszy Ctrl+`
(odwrotny apostrof, na lewo
od klawisza 1 — to w przypadku
systemu Windows) lub Command+`
(w przypadku komputera Macintosh).
§ Okno Code Inspector to po prostu
Rysunek 168.3. Sugestia poprawienia znacznika — u¿yj okna Code Inspector
dodatkowe okno edycyjne
otwierane z podmenu Other menu
• Syntax Coloring (kolorowanie sk³adni) — u¿ywaj, jeœli chcesz kolorem Window. Wiele niestety samo
odró¿niaæ poszczególne elementy kodu. z siebie nie pomo¿e, znacznik trzeba
poprawiæ samodzielnie.
• Auto Indent (indentacja automatyczna) — naciœniêcie klawisza Enter
podczas edycji kodu przeniesie kursor do nowej linii, ale pod
pierwszy znak w linii poprzedniej.
5. Aby wy³¹czyæ aktywn¹ opcjê, po prostu kliknij jej nazwê, a parafka
zniknie.
Odsy³acz
§ W œrodowisku Dreamweaver
standardowo dostêpne s¹ urywki
kodu HTML przydatne do typowych
zastosowañ. Mo¿esz tak¿e tworzyæ
swoje w³asne. Koncepcji urywków
kodu poœwiêcone jest nastêpne
zadanie.

21. 382 Czêœæ 14.
Zadanie 169 Korzystanie z urywków kodu
W œrodowisku Dreamweaver urywek kodu (ang. code snippet) to po prostu zapisany
fragment kodu HTML, CSS, JavaScript czy jakiegokolwiek innego jêzyka.
Wygodny w obs³udze panel s³u¿y tworzeniu, przechowywaniu i kopiowaniu
urywków. W pakiecie Dreamweaver od razu instalowana jest pewna liczba
Uwagi urywków, które mo¿na wykorzystaæ w charakterze inspiracji.
§ Jeœli w kodzie kopiowanym z urywka
1. Aby wstawiæ urywek kodu do dokumentu, ustaw kursor w odpowiednim
ma zostaæ umieszczony fragment
kodu dokumentu, zaznacz odpowiedni miejscu w kodzie dokumentu.
fragment przed wstawieniem urywka.
2. Wybierz z menu Windows polecenie Snippets, aby otworzyæ panel urywków
§ Nazwy urywków nie mog¹ zawieraæ
(rysunek 169.1). Otwórz któryœ z folderów i kliknij dwukrotnie nazwê
znaków, które nie s¹ dozwolone urywka, który chcesz wstawiæ.
w nazwach plików: zwyk³ych (/)
lub odwrotnych () ukoœników, Rysunek 169.1. Panel urywków
znaków cudzys³owu i ró¿nych
znaków specjalnych.
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

22. Praca w œrodowisku Dreamweaver 383
4. Wpisz kolejno nazwê i opis urywka w dwóch pocz¹tkowych polach.
5. Wybierz typ urywka:
Zadanie 169
• Wrap Selection (owiñ zaznaczenie). Umo¿liwi Ci rozdzielenie kodu
urywka pomiêdzy dwa pola. Czêœæ umieszczona w polu Insert Before
zostanie wstawiona przed kodem zaznaczonym w dokumencie,
a czêœæ umieszczona w polu Insert After — po zaznaczonym fragmencie.
• Insert Block (wstaw blok). Po prostu, zawartoœæ pola Insert Code zostanie
Wskazówka
wstawiona do dokumentu. § Mo¿esz tak¿e wstawiæ urywek,
klikaj¹c jego nazwê prawym
6. Wybierz typ podgl¹du: przyciskiem (w systemie Windows)
lub trzymaj¹c klawisz Control
• Design (projektowy). Po zaznaczeniu urywka, w górnej przegródce (na komputerach Macintosh)
panelu Snippets pojawi siê jego podgl¹d graficzny. i wybieraj¹c z menu kontekstowego
polecenie Insert.
• Code (kodu). W charakterze podgl¹du wyœwietlany bêdzie kod
Ÿród³owy urywka.
7. Kliknij przycisk OK, aby zamkn¹æ okno dialogowe Snippet.
8. Aby zmodyfikowaæ lub usun¹æ urywek, zaznacz go w panelu — przycisk
z o³ówkiem (edycja urywka) lub z koszem na œmieci (usuniêcie urywka).
9. Aby organizowaæ urywki w folderach, korzystaj z przycisku z folderem,
a powstanie nowy folder, do którego mo¿na bêdzie przeci¹gn¹æ wybrane
urywki z folderów, które istnia³y ju¿ wczeœniej.
Odsy³acz
§ Dobrze, a teraz nauczmy siê
wreszcie, jak na serio zaprz¹c
Dreamweavera do pracy.
W nastêpnym zadaniu zajmiemy siê
formatowaniem tekstu.

23. 384 Czêœæ 14.
Zadanie 170 Wstawianie i formatowanie tekstu
Tekst wystêpuje na niemal ka¿dej stronie internetowej. S³u¿y wyra¿aniu myœli,
wymianie informacji, sprzeda¿y produktów lub edukowaniu. Dziêki œrodowisku
Dreamweaver wstawianie tekstu na strony staje siê prostsze ni¿ kiedykolwiek,
podobnie jak tworzenie tekstowych ³¹czy do innych stron, plików lub serwisów.
Uwagi Równie ³atwe jest formatowanie tekstu, aby by³ czytelny i pasowa³ kolorystycznie
do reszty strony.
§ Domyœlnie tekst formatowany jest
czcionk¹ Times New Roman
o wielkoœci 3. Te i inne w³aœciwoœci 1. Kliknij w obszarze otwartej strony, aby ustawiæ kursor w miejscu, gdzie
mo¿na zmieniaæ w oknie Properties. tekst ma siê zaczynaæ.
§ W oknie w³aœciwoœci znajduj¹ siê
2. Wpisz ten tekst. Wiersze bêd¹ zawijane, a wiêc s³owa niemieszcz¹ce siê
przyciski do pog³êbiania i zmniejszania w jednym wierszu bêd¹ g³adko przenoszone do nastêpnego (rysunek 170.1).
stopnia wciêcia (przycisk po³o¿ony
skrajnie na prawo w drugim rzêdzie).
Mo¿esz ich u¿ywaæ do przesuwania
tekstu po stronie, w lewo albo
w prawo. Indentacja jest realizowana
przez przesuniêcie o pewn¹
odleg³oœæ (po klikniêciu przycisku
pog³êbiania indentacji). Jeœli tekst
przesunie siê za daleko, mo¿esz
wróciæ, po jednej jednostce, klikaj¹c
przycisk zmniejszania stopnia
indentacji.
§ Za pomoc¹ listy rozwijanej Format,
mo¿esz wstawiaæ znaczniki nag³ówka,
od <h1> do <h6>.
Rysunek 170.1. Po wpisaniu tytu³u strony czas przygotowaæ akapity tekstu
Ostrze¿enie
§ Na ekranie najwygodniej siê czyta 3. Po wprowadzeniu tekstu zaznacz fragment, któremu chcesz nadaæ
tekst wyœwietlany czcionk¹ formatowanie.
bezszeryfow¹ (ang. sans-serif).
Czcionki Times New Roman lub 4. Jeœli okno Properties nie jest widoczne, wybierz z menu Windows polecenie
innych czcionek szeryfowych
Properties, aby je wyœwietliæ. Korzystaj¹c z list rozwijanych, okreœl u¿ywan¹
mo¿esz u¿ywaæ do formatowania
krótkich fraz albo nag³ówków czcionkê (lista oznaczona liter¹ A) i jej wielkoœæ (Size, rysunek 170.2).
(w przypadku których tekst bêdzie
powiêkszony lub pogrubiony), 5. Kliknij przycisk Text Color, aby otworzyæ paletê kolorów, na której kolor
ale jeœli chodzi o tekst akapitów, mo¿na wskazaæ mysz¹, lub z klawiatury wpisaæ szesnastkowy kod koloru
pozostañ lepiej przy czcionkach (rysunek 170.3).
Arial, Verdana lub innych
bezszeryfowych, które zapewniaj¹ 6. Stosuj czcionkê wyt³uszczon¹ lub kursywê, wedle gustu. Umo¿liwiaj¹
maksymaln¹ czytelnoœæ tekstu. Ci to przyciski z literami — odpowiednio — B lub I.