IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

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

Tworzenie stron WWW.

Biblia. Wydanie II
Autorzy: David A. Crowder, Andrew Bailey
Tumaczenie: Sawomir Dzieniszewski, Krzysztof Jurczyk
ISBN: 83-7361-857-0
Tytu oryginau: Creating Web Sites Bible, Second Edition
Format: B5, stron: 896
Przykady na ftp: 166 kB

Wszystko, co musisz wiedzie, aby stworzy wasn witryn WWW

Poznaj jzyk HTML
Wstaw na stron tekst i sformatuj go za pomoc arkuszy stylw
Dodaj do stron obiekty multimedialne, formularze i skrypty napisane
w jzyku JavaScript
Administruj witryn i aktualizuj jej tre
Zarejestruj swj serwis WWW w wyszukiwarkach internetowych
Tworzenie stron WWW to tylko pozornie proste zadanie. Profesjonalnie
przygotowana witryna WWW to nie tylko kilka zda napisanych w edytorze tekstu
i wyeksportowanych do formatu HTML. Projekt serwisu WWW powinien zawiera
odpowiednio przygotowane elementy graficzne, mechanizmy nawigacyjne, prawidowo
dobran tre, formularze, skrypty i wiele innych skadnikw. Po umieszczeniu witryny
w sieci naley j wypromowa i dba o aktualno informacji w niej zawartych.
Wida wic, e stworzenie i utrzymywanie witryny WWW, ktra przycignie
uwag uytkownikw sieci, wymaga opanowania wielu zagadnie.
Ksika Tworzenie stron WWW. Biblia. Wydanie II to kompletny przewodnik
po tych wanie zagadnieniach. Znajdziesz w niej wszystkie informacje niezbdne
do zaprojektowania, stworzenia, opublikowania i utrzymywania wasnej witryny WWW.
Przeczytasz o jzyku HTML i kaskadowych arkuszach stylw, narzdziach do tworzenia
stron WWW i umieszczaniu witryny w sieci. Nauczysz si formatowa tekst,
umieszcza na stronach formularze, skrypty i elementy multimedialne, poznasz
jzyk XML i programy do przygotowywania grafiki na potrzeby sieci. Dowiesz si take,
jak wypromowa swoj witryn i jak przygotowa j tak, aby wygldaa prawidowo
rwnie na wywietlaczach telefonw komrkowych.
Promowanie witryny i rejestracja w wyszukiwarkach
Projekt witryny WWW
Jzyk HTML i technologia CSS
Wybr dostawcy usug internetowych i publikacja witryny
Schemat nawigacji w witrynie
Obrbka grafiki pod ktem zastosowania jej na stronach WWW
Tworzenie skryptw w jzyku JavaScript
Flash i inne technologie multimedialne
E-biznes witryny komercyjne i aukcje internetowe
Administrowanie witryn
Nowe technologie XML i WML
Jeli chcesz pozna najnowsze technologie, narzdzia i standardy projektowania stron
WWW, koniecznie przeczytaj t ksik.

5RKUVTGEK

 


 
   

  

Klasyfikacja witryn internetowych ..................................................................................................... 29
Prywatne strony domowe ............................................................................................................. 30
Witryny informacyjne .................................................................................................................. 30
Witryny organizacji ...................................................................................................................... 32
Witryny o tematyce politycznej .................................................................................................... 32
Witryny komercyjne ..................................................................................................................... 34
Informacje w Internecie ...................................................................................................................... 35
Odnajdywanie dobrych informacji ............................................................................................... 36
Badanie preferencji goci witryny internetowej ........................................................................... 37
Przygotowanie planu .......................................................................................................................... 38
Ustalanie celw ............................................................................................................................ 38
Wybr technologii ........................................................................................................................ 39
Planowanie budetu ...................................................................................................................... 40
Podsumowanie .................................................................................................................................... 40

  

Wykorzystanie wyszukiwarek internetowych ..................................................................................... 42
Zasada dziaania robotw i pajkw ............................................................................................. 44
Rejestrowanie si w przegldarce ................................................................................................. 44
Jak uatwi wyszukiwanie kluczowych informacji na stronie? .................................................... 45
Przykad wykorzystania opisu zawartoci strony ......................................................................... 48
Ranking wynikw wyszukiwania ................................................................................................. 49
Portale .......................................................................................................................................... 49
Blokowanie przeszukiwania witryny ............................................................................................ 50
Korzystanie z katalogw internetowych ............................................................................................. 51
Ranking stron w katalogu ............................................................................................................. 52
Zgaszanie witryny do katalogu .................................................................................................... 52
Usugi katalogowe typu Free-For-All ........................................................................................... 53
Publikowanie ogosze prasowych ..................................................................................................... 54
Nawizywanie i podtrzymywanie kontaktu z klientem ................................................................ 54
Odnajdywanie adresw poczty elektronicznej ............................................................................. 55
Formatowanie e-maili HTML czy zwyky tekst? .................................................................... 56







 !"

Wykorzystywanie wzajemnych pocze ........................................................................................... 56
Wykorzystanie banerw reklamowych ............................................................................................... 56
Tworzenie banerw ...................................................................................................................... 57
Projektowanie efektywnych banerw ........................................................................................... 57
Reklamy multimedialne ............................................................................................................... 58
Wymiana banerw ........................................................................................................................ 59
Reklama tradycyjna ...................................................................................................................... 59
Podsumowanie .................................................................................................................................... 60

  


#$%& '

Struktura dokumentu HTML .............................................................................................................. 61
Podstawowe elementy strony WWW ................................................................................................. 62
Definiowanie elementw strony znacznikami otwierajcymi i zamykajcymi ............................ 62
Zagniedanie elementw ............................................................................................................ 63
Elementy blokowe ........................................................................................................................ 63
Elementy wewntrzwierszowe ..................................................................................................... 63
Atrybuty elementw ........................................................................................................................... 64
Atrybuty wsplne dla wszystkich elementw .............................................................................. 64
Wykorzystanie atrybutw specjalnych ......................................................................................... 65
Akceptowanie domylnych i wprowadzanie wasnych wartoci atrybutw ................................. 66
Wstawianie tekstu ............................................................................................................................... 66
Poziomy nagwka ....................................................................................................................... 66
Wstawianie znaku podziau wiersza ............................................................................................. 67
Podzia strony liniami poziomymi ................................................................................................ 68
Znaki niewidoczne ....................................................................................................................... 70
Narzdzia do tworzenia stron WWW ................................................................................................. 71
Edytory tekstu .............................................................................................................................. 72
Edytory HTML ............................................................................................................................. 73
Programy WYSIWYG ................................................................................................................. 74
Programy zaawansowanej edycji tekstu ....................................................................................... 76
Inne programy .............................................................................................................................. 77
Wybr programu narzdziowego ........................................................................................................ 77
Wersje demonstracyjne ................................................................................................................ 78
Programy typu shareware ............................................................................................................. 78
Programy typu freeware ............................................................................................................... 79
Programy dodatkowe .......................................................................................................................... 79
Programy sprawdzajce cza ....................................................................................................... 79
Programy sprawdzajce zgodno kodu ....................................................................................... 81
Programy sprawdzajce zgodno z typami przegldarek ............................................................ 81
Monitorowanie serwerw ............................................................................................................. 81
Wykorzystanie niektrych narzdzi .................................................................................................... 81
Notatnik ........................................................................................................................................ 82
HomeSite ...................................................................................................................................... 82
Netscape Composer ...................................................................................................................... 83
Dreamweaver ............................................................................................................................... 83
Podsumowanie .................................................................................................................................... 84

()

 *+


,Porwnanie projektu strony i projektu witryny .................................................................................. 85

Kolor ............................................................................................................................................ 86
Styl tekstu ..................................................................................................................................... 86
Nawigacja ..................................................................................................................................... 87
Kluczem do sukcesu jest zawarto witryny ................................................................................ 88
Funkcjonalno strony .................................................................................................................. 88
Struktura witryny ................................................................................................................................ 89
Podzia tematyczny ....................................................................................................................... 91
Naturalny podzia informacji ........................................................................................................ 91
Nadawanie adresw URL ................................................................................................................... 92
Dodawanie czy ................................................................................................................................. 93
Wprowadzanie waciwych adresw w czach ........................................................................... 95
Tworzenie wewntrznych czy za pomoc odnonikw ............................................................. 95
Wysyanie wiadomoci poczty elektronicznej za pomoc cza mailto ........................................ 96
Inne rodzaje czy ......................................................................................................................... 97
Wprowadzanie adresw URL za pomoc elementu BASE .......................................................... 97
Podsumowanie .................................................................................................................................... 98

 -./ 

Jak uzyska wasn nazw domeny? .................................................................................................. 99
Wybr nazwy domeny ................................................................................................................ 100
Wybr firmy rejestrujcej nazwy domen ................................................................................... 102
Puapki rejestracji ....................................................................................................................... 103
Wybr firmy udostpniajcej miejsce na serwerze WWW ............................................................... 104
Wybr najlepszego serwera WWW ............................................................................................ 105
Ilo potrzebnego miejsca na serwerze ....................................................................................... 107
Sposb przechowywania witryny WWW na serwerze ............................................................... 107
Wybr odpowiednich usug ........................................................................................................ 109
Sprawdzanie firm udostpniajcych miejsce na serwerach WWW ............................................ 111
Inne czynniki wpywajce na wybr firmy ....................................................................................... 112
Obsuga klienta ........................................................................................................................... 112
Korzystanie z pomocy technicznej ............................................................................................. 112
Unikanie nieuczciwych firm ............................................................................................................. 113
Na co zwrci szczegln uwag? ............................................................................................. 113
Kradzie nazw domen ................................................................................................................ 113
Puapka nielimitowanej liczby odwiedzin na stronie lub nieograniczonego miejsca na dysku .... 114
Puapka ofert promocyjnych ....................................................................................................... 114
Usugi dodatkowe ............................................................................................................................. 115
Dodatkowe konta poczty elektronicznej ..................................................................................... 115
Przekierowanie wiadomoci poczty elektronicznej .................................................................... 115
Konta pocztowe automatycznie wysyajce odpowiedzi ............................................................ 117
Statystyki odwiedzin .................................................................................................................. 118
Konfigurowanie parametrw witryny za pomoc panelu administracyjnego ............................. 119
Redystrybucja miejsca na serwerze WWW ................................................................................ 121
adowanie stron na serwer WWW ................................................................................................... 121
Transfer poprzez FTP ................................................................................................................. 122
Transfer za pomoc przegldarki WWW poprzez HTTP ........................................................... 126
Podsumowanie .................................................................................................................................. 127






 !"

 



 
 
! 
"
   #$

 '01  

Style znakw .................................................................................................................................... 131
Kursywa ..................................................................................................................................... 132
Tekst pogrubiony ........................................................................................................................ 132
Tekst preformatowany ................................................................................................................ 133
Indeks grny i dolny ................................................................................................................... 133
Elementy FONT i BASEFONT ........................................................................................................ 135
Wyznaczanie wielkoci czcionki ................................................................................................ 135
Wzgldna wielko czcionki ...................................................................................................... 136
Porwnanie wielkoci czcionki i wielkoci nagwka ................................................................ 136
Zmiana domylnego kroju czcionki ........................................................................................... 137
Kolor czcionki ............................................................................................................................ 138
Wyrwnywanie i wprowadzanie wci w tekcie ............................................................................. 138
Co robi z elementami przestarzaymi? ...................................................................................... 138
Wprowadzanie wci za pomoc elementu BLOCKQUOTE .................................................... 140
Wybr zestawu znakw .................................................................................................................... 141
Znaki specjalne ................................................................................................................................. 145
Podsumowanie .................................................................................................................................. 153

 2* 1!3/-Rodzaje plikw graficznych ............................................................................................................. 155

GIF ............................................................................................................................................. 155
JPEG .......................................................................................................................................... 156
PNG ............................................................................................................................................ 156
Korzystanie z darmowej grafiki dostpnej w Internecie ................................................................... 156
Fotografie oglnie dostpne ....................................................................................................... 156
Wykorzystywanie dzie grafikw ............................................................................................... 157
Wybr waciwych artystw ...................................................................................................... 157
Wykorzystanie kolekcji fotografii .............................................................................................. 158
Unikanie problemw prawnych ........................................................................................................ 159
Wykorzystanie materiau chronionego prawem autorskim ......................................................... 159
Poszanowanie znakw towarowych ........................................................................................... 160
Podsumowanie .................................................................................................................................. 161

 ,4#!3 


 '

Dodawanie obrazkw do strony ....................................................................................................... 163
Wykorzystanie atrybutw height i width .................................................................................... 164
Okrelanie dodatkowych odstpw ............................................................................................ 165
Okrelanie gruboci ramki .......................................................................................................... 166
Wprowadzanie zamiennikw obrazkw ........................................................................................... 168
Dodawanie opisu obrazka uatwiajcego nawigacj ................................................................... 168
Wykorzystanie obrazkw o niskiej rozdzielczoci do skracania czasu pobierania strony .......... 169
Wzajemne pooenie tekstu i obrazkw ............................................................................................ 170
Przesuwanie obrazkw do prawego lub lewego marginesu ........................................................ 172
Zawijanie tekstu wok obrazka ................................................................................................. 172
Jednoczesne rozmieszczanie kilku obrazkw ............................................................................. 174

()



Wykorzystanie obrazkw do tworzenia pocze ............................................................................. 174

Wykorzystanie ramek ................................................................................................................. 175
Umieszczanie pod obrazem wielu czy za pomoc map obrazkw ........................................... 176
Rozwizywanie problemw z obrazkami ......................................................................................... 177
Wykorzystanie miniaturek obrazkw ......................................................................................... 177
Osadzanie na stronie specjalnych krojw czcionek .................................................................... 178
Dodawanie grafiki jako ta ................................................................................................................ 180
Definiowanie wielkoci obrazkw wielokrotnie powielanych ................................................... 180
Wprowadzanie ta z bocznym motywem .................................................................................... 181
Obrazki ta bez widocznych spoin .............................................................................................. 182
Unikanie ta rozpraszajcego uwag .......................................................................................... 183
Wybr koloru i kontrastu ........................................................................................................... 183
Podsumowanie .................................................................................................................................. 185

  5!3 ,2

Wybr programu graficznego ........................................................................................................... 187
Photoshop ................................................................................................................................... 187
Fireworks .................................................................................................................................... 188
Painter ........................................................................................................................................ 188
Paint Shop Pro ............................................................................................................................ 189
Modyfikowanie obrazkw ................................................................................................................ 189
Kadrowanie ................................................................................................................................ 190
Zmiana wielkoci i rozdzielczoci .............................................................................................. 191
Obracanie i odwracanie .............................................................................................................. 194
Wyostrzanie i rozmazywanie ..................................................................................................... 196
Stosowanie filtrw efektw artystycznych ................................................................................. 197
Wykorzystanie programw do tworzenia grafiki trjwymiarowej .................................................... 199
Poser ........................................................................................................................................... 200
Bryce .......................................................................................................................................... 201
trueSpace .................................................................................................................................... 202
iSpace ......................................................................................................................................... 202
Trjwymiarowe modele i nie tylko ......................................................................................... 203
Podsumowanie .................................................................................................................................. 204

 6
!3"3 " 6Okrelanie atrybutw koloru ............................................................................................................ 205

Ustawianie koloru ta ................................................................................................................. 206
Wybr koloru tekstu ................................................................................................................... 207
Okrelanie koloru czy .............................................................................................................. 207
Nazwy i kody szesnastkowe kolorw ............................................................................................... 208
Kody kolorw ............................................................................................................................. 209
Nazwy kolorw .......................................................................................................................... 209
Paleta bezpiecznych kolorw ..................................................................................................... 210
Zasada trzech k: komplementarno, kontrast i koordynacja ........................................................ 213
Wybr kolorw komplementarnych ........................................................................................... 214
Dobr odpowiedniego kontrastu ................................................................................................ 215
Koordynacja schematu kolorw ................................................................................................. 215
Waciwoci kolorw ....................................................................................................................... 216
Podsumowanie .................................................................................................................................. 216






 !"

%
&
 '()'
  #

 
!"


 

Wstawianie tabel i definiowanie ich rozmiarw ............................................................................... 220
Obramowania tabel ........................................................................................................................... 224
Odstpy w tabelach ........................................................................................................................... 225
Wyrwnywanie tabel i zawartoci komrek ..................................................................................... 227
Wyrwnywanie w poziomie ....................................................................................................... 228
Wyrwnywanie w pionie ............................................................................................................ 234
Zablokowanie zawijania tekstu w komrkach ............................................................................ 234
czenie komrek ............................................................................................................................. 236
Obrazki i kolory w tabelach .............................................................................................................. 237
Dodawanie obrazkw ta do tabeli ............................................................................................. 238
Definiowanie koloru ta tabeli .................................................................................................... 239
Podsumowanie .................................................................................................................................. 244

 1 1#Projektowanie ukadu ramek ............................................................................................................ 246
Funkcje ramek ............................................................................................................................ 247
Projektowanie ukadu nawigacji ................................................................................................. 247
Ukad ramek typu dziaanie-wynik ............................................................................................. 248
Tworzenie dokumentw ukadu ramek ............................................................................................. 248
Wstawianie ramek pionowych i poziomych ............................................................................... 250
Definiowanie wymiarw ramki w pikselach, wartociach procentowych i wzgldnych ............ 253
Zablokowanie moliwoci zmiany wielkoci ramek .................................................................. 256
Definiowanie nazw i zawartoci ramek ...................................................................................... 256
Zagniedanie dokumentw ukadu ramek ................................................................................ 258
Zastosowanie elementu NOFRAMES ........................................................................................ 259
Wykorzystanie pocze w ramkach ................................................................................................ 260
Lokalizowanie pocze w okrelonych ramkach ...................................................................... 261
Wykorzystanie zarezerwowanych nazw ramek .......................................................................... 262
Definiowanie obramowania i marginesw ramek ............................................................................. 263
Okrelanie gruboci linii obramowania ...................................................................................... 263
Definiowanie kolorw obramowania ......................................................................................... 264
Wprowadzanie szerokoci marginesw ramki ........................................................................... 265
Konfigurowanie opcji paska przewijania .......................................................................................... 265
Alternatywy dla ramek ............................................................................................................... 265
Unikanie problemw z ramkami ....................................................................................................... 267
Sprawdzanie, czy zostaa zdefiniowana waciwa liczba ramek ................................................. 268
Dodawanie obcych elementw ................................................................................................... 268
Jakich rozdzielczoci monitora najczciej uywaj uytkownicy? ........................................... 268
Projektowanie waciwej liczby ramek ...................................................................................... 269
Zamieszczanie pocze do menu nawigacyjnego ..................................................................... 269
Podsumowanie .................................................................................................................................. 270

  #7(( 2

Testowanie przegldarki WWW ....................................................................................................... 272
Obsuga CSS w przegldarce WWW ............................................................................................... 272
Kaskadowa hierarchia ....................................................................................................................... 273
Zastosowanie atrybutu style ....................................................................................................... 273
Osadzanie stylw za pomoc znacznika <STYLE> ................................................................... 274
Doczanie zewntrznych arkuszy stylw .................................................................................. 275

()



Zmiana waciwoci elementw HTML ........................................................................................... 276

Przypisywanie klas ........................................................................................................................... 277
Wykorzystanie selektorw ID .......................................................................................................... 278
Definiowanie waciwoci elementw zagniedonych ................................................................... 278
Niektre ciekawe moliwoci CSS ............................................................................................. 279
Specyfikacja CSS ............................................................................................................................. 281
Waciwoci CSS1 ..................................................................................................................... 281
Waciwoci CSS2 ..................................................................................................................... 290
Programy suce do tworzenia arkuszy stylw ............................................................................... 314
Przydatne witryny powicone CSS ................................................................................................. 314
Podsumowanie .................................................................................................................................. 315

 
"3# 2
Dodawanie warstw ........................................................................................................................... 317
Wykorzystanie CSS do rozmieszczania elementw ................................................................... 317
Rne ukady .............................................................................................................................. 318
Bezwzgldny i wzgldny sposb rozmieszczania warstw .......................................................... 319
Elementy zagniedone .............................................................................................................. 321
Warstwy nachodzce na siebie ................................................................................................... 322
Ukadanie warstw w stos za pomoc atrybutu z-index ............................................................... 322
Zastosowanie przezroczystoci i kolorw ta warstwy ............................................................... 323
Wycinanie fragmentw warstw ........................................................................................................ 324
Widoczno warstw .................................................................................................................... 325
Wywietlanie elementw wikszych od rozmiarw warstwy ........................................................... 325
Warstwy widoczne ..................................................................................................................... 326
Warstwy ukryte .......................................................................................................................... 326
Paski przewijania ........................................................................................................................ 327
Podsumowanie .................................................................................................................................. 328

*+
)  "    


," -
'"  )  ..#

 -!5#51" 

Wstawianie formularzy ..................................................................................................................... 334
Element INPUT .......................................................................................................................... 334
Wprowadzanie nazw elementw kontrolnych ............................................................................ 335
Wprowadzanie krtkich informacji za pomoc pl tekstowych ....................................................... 336
Definiowanie rozmiaru pola tekstowego .................................................................................... 337
Definiowanie maksymalnej dugoci wprowadzanego tekstu .................................................... 338
Wprowadzanie wartoci pocztkowych w polu tekstowym ....................................................... 339
Definiowanie pl przeznaczonych tylko do odczytu .................................................................. 340
Wprowadzanie kompleksowych informacji za pomoc wielowierszowych pl tekstowych ............ 341
Definiowanie wielkoci wielowierszowych pl tekstowych ...................................................... 341
Zawijanie tekstu ......................................................................................................................... 342
Wprowadzanie domylnej zawartoci ........................................................................................ 343
Wykorzystanie pl wyboru i przyciskw wyboru ............................................................................ 343
Dodawanie pl wyboru .............................................................................................................. 345
Grupowanie przyciskw wyboru ................................................................................................ 345
Definiowanie domylnie zaznaczanego wyboru ......................................................................... 347
Wprowadzanie list wyboru za pomoc elementw SELECT oraz OPTION .................................... 347
Wprowadzanie wartoci ............................................................................................................. 349
Wywietlanie menu przewijanego .............................................................................................. 350






 !"

Moliwo wyboru wielu opcji w menu przewijanym ............................................................... 350
Wprowadzanie domylnie zaznaczanej opcji ............................................................................. 352
Wykorzystanie przyciskw INPUT .................................................................................................. 352
Wstawianie przycisku Submit .................................................................................................... 352
Wstawianie przycisku Reset ....................................................................................................... 353
Tworzenie wasnych przyciskw ................................................................................................ 354
Wstawianie obrazkw penicych funkcj przyciskw .............................................................. 354
Wykorzystanie elementu BUTTON ................................................................................................. 356
Wstawianie pl ukrytych .................................................................................................................. 357
Dodawanie etykiet ............................................................................................................................ 358
Definiowanie kolejnoci tabulacji .................................................................................................... 359
Definiowanie klawiszy skrtw ........................................................................................................ 360
Wysyanie formularza ....................................................................................................................... 361
Podsumowanie .................................................................................................................................. 363

 ' 

89(  'Przykad programu w JavaScript ...................................................................................................... 365
Skadnia JavaScript .......................................................................................................................... 366
Zmienne i stae ........................................................................................................................... 367
Zmiana wartoci zmiennych za pomoc operatorw .................................................................. 369
Wprowadzanie polece .............................................................................................................. 371
czenie polece w funkcje ....................................................................................................... 379
Dokonywanie wyboru za pomoc if oraz ifelse ...................................................................... 381
Wykorzystanie ptli .................................................................................................................... 382
Uruchamianie skryptw za pomoc zdarze .................................................................................... 385
Wywoywanie polece JavaScript przy adowaniu strony i przechodzeniu na inn stron ........ 387
Reagowanie na ruchy mysz ...................................................................................................... 388
Pojedyncze i podwjne kliknicie mysz ................................................................................... 390
Wciskanie i zwalnianie klawiszy ................................................................................................ 391
Obiekty w JavaScript ........................................................................................................................ 392
Waciwoci ............................................................................................................................... 393
Metody ....................................................................................................................................... 395
Sprawdzanie danych formularza ....................................................................................................... 395
Sprawdzanie kompatybilnoci przegldarki ..................................................................................... 399
Podsumowanie .................................................................................................................................. 404

 2:+)3 !36Schemat nawigacji ............................................................................................................................ 405

Unikanie puapek nawigacyjnych ............................................................................................... 406
Unikanie stron-sierot .................................................................................................................. 407
Dodawanie paskw nawigacyjnych .................................................................................................. 408
Projektowanie graficznych paskw nawigacyjnych ................................................................... 409
Dodawanie wskanikw ............................................................................................................. 411
Dodawanie podmienianych obrazkw za pomoc JavaScript .................................................... 412
Wybr kierunku wywietlania paska nawigacyjnego ................................................................. 414
Wywietlanie pocze za pomoc list i menu ................................................................................. 415
Wywietlanie pocze za pomoc zwykego tekstu .................................................................. 415
Tworzenie wypunktowanych i numerowanych list pocze ..................................................... 417
Tworzenie menu za pomoc elementu SELECT ........................................................................ 422
Podsumowanie .................................................................................................................................. 423

()



 ,4  "3Problemy zwizane ze wstawianiem animacji .................................................................................. 425

Obsuga zdarze myszy .................................................................................................................... 426
Podmienianie obrazkw ............................................................................................................. 426
Wywoywanie zmian w innych elementach ............................................................................... 428
Animowanie elementw ................................................................................................................... 430
Obliczanie pozycji bezwzgldnej ............................................................................................... 431
Animacja w starszych przegldarkach ........................................................................................ 433
Okrelanie rozmiaru okna przegldarki ...................................................................................... 436
Animacja koloru ......................................................................................................................... 440
Podsumowanie .................................................................................................................................. 443

 #0" Ukad programu Flash ...................................................................................................................... 445

Obraz .......................................................................................................................................... 446
Sceny .......................................................................................................................................... 447
Warstwy ..................................................................................................................................... 447
Listwa czasowa .......................................................................................................................... 448
Przybornik .................................................................................................................................. 448
Panele narzdzi ........................................................................................................................... 450
Tworzenie obiektw ......................................................................................................................... 450
Rysowanie linii za pomoc narzdzia Line ................................................................................ 452
Zmiana waciwoci rysowanych linii ........................................................................................ 452
Zaznaczanie i kasowanie obiektw ............................................................................................ 453
Narzdzia do rysowania dowolnych ksztatw ........................................................................... 453
Zapisywanie dotychczasowej pracy ........................................................................................... 454
Importowanie grafiki .................................................................................................................. 455
Korzystanie z biblioteki .............................................................................................................. 455
Modyfikowanie obiektw ................................................................................................................. 455
Rozciganie i znieksztacanie obiektw ..................................................................................... 456
Grupowanie obiektw ................................................................................................................ 457
Skalowanie ................................................................................................................................. 457
Obracanie i pochylanie ............................................................................................................... 458
Prostowanie i wygadzanie ......................................................................................................... 458
Wypenianie gradientami ............................................................................................................ 459
Wypenianie bitmapami ............................................................................................................. 460
Praca z tekstem ................................................................................................................................. 460
Dodawanie tekstu ....................................................................................................................... 461
Wybr czcionki .......................................................................................................................... 461
Definiowanie waciwoci czcionki ........................................................................................... 462
Tworzenie rnych efektw za pomoc tekstu ........................................................................... 463
Wykorzystanie listwy czasowej do tworzenia animacji .................................................................... 463
Wykorzystanie klatek ................................................................................................................. 464
Wprowadzanie klatek kluczowych ............................................................................................. 464
Dodawanie warstw ..................................................................................................................... 464
Dodawanie obiektw do warstwy ............................................................................................... 465
Zamiana obiektw na symbole ................................................................................................... 465
Tworzenie animacji .................................................................................................................... 466
Tworzenie automatycznej animacji ............................................................................................ 467
Tworzenie dodatkowych efektw na innych warstwach ............................................................ 468

 




 !"

Dodawanie dwiku ................................................................................................................... 469
Dodawanie plikw dwikowych MP3 ...................................................................................... 471
Synchronizacja dwiku i zdarze ............................................................................................. 471
Wykorzystanie zaawansowanych funkcji ......................................................................................... 471
Programowanie w ActionScript ................................................................................................. 472
Wprowadzanie akcji ................................................................................................................... 472
Eksportowanie i publikowanie filmw ............................................................................................. 473
Eksportowanie filmw ............................................................................................................... 473
Publikowanie filmw ................................................................................................................. 475
Wskazwki pomocne w optymalizowaniu filmw ..................................................................... 477
Podsumowanie .................................................................................................................................. 478

 64 !31" "2

Dodawanie dwiku ......................................................................................................................... 479
Wybr formatu pliku dwikowego ........................................................................................... 480
Osadzanie dwiku ..................................................................................................................... 480
Definiowanie gonoci .............................................................................................................. 481
Uycie elementu NOEMBED .................................................................................................... 482
rda muzyki cyfrowej ............................................................................................................. 482
Osadzanie filmw wideo .................................................................................................................. 485
Odtwarzanie filmu ...................................................................................................................... 487
rda cyfrowych filmw wideo ................................................................................................ 488
Wstawianie apletw Javy ................................................................................................................. 488
Definiowanie wartoci atrybutu PARAM .................................................................................. 488
Wywietlanie alternatywnej zawartoci zamiast apletu .............................................................. 489
Przykad wykorzystania apletu ................................................................................................... 489
Aplety rwnie s obiektami ...................................................................................................... 492
rda apletw ........................................................................................................................... 495
Podsumowanie .................................................................................................................................. 496

  "+ 2

wiat blogw .................................................................................................................................... 497
Korzystanie z witryny Blogger.com ................................................................................................. 499
Krtka historia Bloggera ............................................................................................................ 499
Tworzenie bloga w witrynie Blogger ......................................................................................... 500
Dodawanie nowych wpisw do bloga ........................................................................................ 505
Inne narzdzia do tworzenia blogw ................................................................................................ 508
Hometown na America Online ................................................................................................... 509
blogs.com i TypePad .................................................................................................................. 510
LiveJournal ................................................................................................................................. 511
Radio UserLand ......................................................................................................................... 512
Polskie blogi ............................................................................................................................... 513
Dodatki dla bloggerw ............................................................................................................... 514
Integrowanie blogw z witrynami WWW ........................................................................................ 515
Blogowanie jako styl pisania ...................................................................................................... 516
Integrowanie bloga z witryn za pomoc czy .......................................................................... 516
Pena integracja bloga z witryn ................................................................................................. 516
Podsumowanie .................................................................................................................................. 517

()

*/0!   1#$

 ; "1+-

Wybr rodzaju dziaalnoci .............................................................................................................. 521
Witryny oferujce pojedyncze lub wyspecjalizowane produkty ................................................. 522
Witryny sprzedajce rnorodne produkty ................................................................................. 522
Megasklepy internetowe ............................................................................................................. 523
Internetowe sklepy komputerowe ............................................................................................... 525
Witryny oferujce usugi ............................................................................................................ 525
Centra handlowe ......................................................................................................................... 526
Konfigurowanie koszyka zakupw ................................................................................................... 526
Kwestia bezpieczestwa ............................................................................................................. 527
Zakadanie sklepu w istniejcym centrum handlowym .............................................................. 528
Zakup komercyjnych programw ............................................................................................... 529
Korzystanie z programw z bezpatnym dostpem do kodu rdowego ................................... 531
Pobieranie opat ................................................................................................................................ 531
Karty kredytowe i debetowe ....................................................................................................... 532
Czeki .......................................................................................................................................... 533
E-pienidz .................................................................................................................................. 534
Zakadanie sklepu powizanego z witryn ................................................................................. 534
Cykl dokonywania zakupw w Internecie ........................................................................................ 536
Podsumowanie .................................................................................................................................. 537

  ( ) <""+ - 

Pierwsze kroki na Allegro ................................................................................................................ 540
Tworzenie konta na Allegro ....................................................................................................... 540
Cennik Allegro ........................................................................................................................... 543
Przygotowywanie sprzeday na Allegro ........................................................................................... 544
Wybr kategorii .......................................................................................................................... 544
Opis przedmiotu ......................................................................................................................... 546
Cena przedmiotu i czas trwania aukcji ....................................................................................... 547
Opcje pacenia i dostawy ............................................................................................................ 549
Opcje dodatkowe ........................................................................................................................ 550
Wysyanie przedmiotu ................................................................................................................ 551
Jak mie jak najwicej korzyci z Allegro? ...................................................................................... 552
Tworzenie reputacji wiarygodnego sprzedawcy ......................................................................... 552
Monitorowanie przebiegu aukcji ................................................................................................ 554
Po aukcji ..................................................................................................................................... 554
Jak zwikszy szans na udan sprzeda? .................................................................................. 554
Moliwoci szablonw Allegro .................................................................................................. 555
Narzdzia dla sprzedajcych ............................................................................................................. 555
motoAllegro ............................................................................................................................... 556
e-Bay ................................................................................................................................................ 556
PayPal ........................................................................................................................................ 558
Podsumowanie .................................................................................................................................. 558

 / -'
Karty kredytowe i karty debetowe .................................................................................................... 561
Procedury zwrotu towarw i pienidzy ...................................................................................... 563
Problem kosztw obsugi kart kredytowych ............................................................................... 565







 !"

Czeki ................................................................................................................................................. 566
E-pienidz ......................................................................................................................................... 567
Podsumowanie .................................................................................................................................. 568

 -
" -'
Reklamowanie si poprzez Google i inne wyszukiwarki internetowe .............................................. 569
Reklama poprzez Google ........................................................................................................... 569
Reklamowanie si w innych wyszukiwarkach ........................................................................... 575
Reklama z uyciem banerw ...................................................................................................... 576
Wsppraca z agencjami reklamowymi ............................................................................................ 577
Znajdowanie odpowiedniej agencji reklamowej ........................................................................ 577
Programy stowarzyszeniowe ...................................................................................................... 579
Inne formy reklamy .......................................................................................................................... 580
Reklama za pomoc e-maili ....................................................................................................... 580
Zbieranie adresw e-mail ........................................................................................................... 580
Rozsyanie biuletynw pocztowych ........................................................................................... 581
Podsumowanie .................................................................................................................................. 582

 '
3= -,
Uywanie nazw domen i znakw towarowych .................................................................................... 583
Dyskusja zwizana z nazwami domen ....................................................................................... 584
Ustawa ACPA ............................................................................................................................ 586
Odszukiwanie nazw domen w Internecie ................................................................................... 586
Dbanie o swoj domen ............................................................................................................. 586
Sprawdzanie znakw towarowych w Internecie ......................................................................... 587
Pozbdmy si nieuzasadnionych obaw ........................................................................................... 588
Informowanie o bezpieczestwie witryny .................................................................................. 588
Polityka prywatnoci ............................................................................................................... 590
Zasady reklamacji i zwrotw towarw ............................................................................................. 593
Moliwoci zarabiania w Internecie ................................................................................................. 594
Zamieszczanie reklam ................................................................................................................ 595
Optymalizacja witryny pod ktem wyszukiwarek ...................................................................... 596
Podsumowanie .................................................................................................................................. 598

*2) 
 ''"  
   
& 1$$

 2< # '6

Testowanie witryny .......................................................................................................................... 601
Oce witryn z punktu widzenia uytkownika ........................................................................... 602
Zlecanie testowania witryny osobom z zewntrz ....................................................................... 603
Analiza opinii osb testujcych lub odwiedzajcych witryn .................................................... 605
Zmiany sposobu wywietlania witryny ............................................................................................. 606
Konfiguracja przegldarki .......................................................................................................... 606
Spjno elementw witryny ............................................................................................................ 608
Dbaj o komfort goci Twojej witryny ........................................................................................ 608
Podstawowe zadania administratora witryny ............................................................................. 608
Wybr narzdzi do administrowania .......................................................................................... 609
Programy monitorujce prac serwerw .................................................................................... 609
Podsumowanie .................................................................................................................................. 609

()



 ,.1" '
Systematyczne uaktualnianie witryny ............................................................................................... 611
Zamieszczanie najnowszych informacji ..................................................................................... 612
Ustalanie harmonogramu zmian ................................................................................................. 612
Przygotowywanie aktualnych informacji ................................................................................... 613
Zachcanie uytkownikw do prezentowania opinii .................................................................. 613
Techniki budowania staych relacji z klientami ................................................................................ 615
Tworzenie biuletynw i czasopism elektronicznych .................................................................. 615
Opinie o produkcie ..................................................................................................................... 616
Tworzenie wirtualnych przewodnikw ...................................................................................... 616
Przyszo naley do standardu XML ............................................................................................... 617
Klasyfikowanie zawartoci a definiowanie ukadu wywietlanej strony .................................... 619
Dodawanie kolejnych znacznikw ............................................................................................. 620
Wykorzystanie definicji rodzaju dokumentu (DTD) .................................................................. 620
Korzystanie z rnych sownikw XML (XML vocabularies) ................................................... 622
Wykorzystanie XHTML-a 1.0 .......................................................................................................... 623
Kompatybilno HTML-a i XML-a ........................................................................................... 623
Porwnanie XHTML-a i HTML-a 4.0 ....................................................................................... 625
Rozwizywanie problemw zwizanych z kompatybilnoci przegldarki ............................... 625
Podsumowanie .................................................................................................................................. 626

 >%& '2

Projektowanie z wykorzystaniem XML-a ........................................................................................ 627
Zasady obowizujce w jzyku XML ........................................................................................ 628
Wsppraca rnych sownikw XML-a przestrzenie nazw .................................................. 629
Klasyfikowanie zawartoci a definiowanie ukadu wywietlanej strony .................................... 629
Definiowanie CSS ...................................................................................................................... 630
Tworzenie arkusza stylw XSL .................................................................................................. 631
Definiowanie struktury dokumentu XML .................................................................................. 636
Dodawanie kolejnych znacznikw ............................................................................................. 637
Dodatkowe informacje na temat definicji typu dokumentu (DTD) ............................................ 638
Wykorzystanie XHTML-a 1.0 .......................................................................................................... 639
Kompatybilno HTML-a i XML-a ........................................................................................... 640
Porwnanie XHTML-a i HTML-a 4.0 ....................................................................................... 641
Rozwizywanie problemw zwizanych z kompatybilnoci przegldarki ............................... 642
Podsumowanie .................................................................................................................................. 643

  6;"+!"
<
%&'Co to jest WML? .............................................................................................................................. 645
Pierwsze kroki w WML ............................................................................................................. 646
Znaczniki WML ......................................................................................................................... 648
Tasowanie kart ........................................................................................................................... 650
Interakcja z uytkownikiem .............................................................................................................. 652
Formularze w jzyku WML ....................................................................................................... 652
Definiowanie formatu wprowadzanych danych ......................................................................... 654
Definiowanie dopuszczalnych wartoci wprowadzanych danych .............................................. 654
Tworzenie menu w jzyku WML ............................................................................................... 655
Menu wielokrotnego wyboru ..................................................................................................... 656
Rnice pomidzy listami w HTML i WML .............................................................................. 657
Przeksztacanie kodu XHTML na WML .......................................................................................... 657
Podsumowanie .................................................................................................................................. 661






 !"

+
)  33.
4 <(5$%&6 ''4  (5>$%&6
  1+ ',4 7(5>%&6
 2
4 4(5
%&6 2'2
4 ?&89(,( ,
(  ,'

4Q\F\KC


  






9V[OTQ\F\KCNG

Wstawianie tabel i definiowanie ich rozmiarw

Obramowania tabel

Odstpy w tabelach

Wyrwnywanie tabel i zawartoci komrek

czenie komrek

Obrazki i kolory w tabelach

Tabele na stronach WWW wydaj si nieciekawe, lecz jeli wykorzystasz je odpowiednio, bd niezastpionym narzdziem przy projektowaniu stron WWW. Tabela zawierajca list sw lub liczb w kolejnych kolumnach, z pewnoci nie nada oryginalnego
charakteru Twojej stronie. Oczywicie zestawienie danych w tabelach samo w sobie jest
poyteczn, a czasami wrcz niezbdn technik prezentowania informacji. Nie jestemy zatem przeciwnikami tabel sucych wycznie do prezentowania danych, poniewa
przydaj si one do przedstawiania okrelonych informacji tabele takie pojawiaj si
rwnie w przykadach prezentowanych na stronach tej ksiki!
Jest to mniej atrakcyjne zastosowanie tabel i, niestety, podstawowe, jeli chodzi o tabele
umieszczane w wydawnictwach papierowych. Natomiast tabele na stronach WWW
maj znacznie szersze zastosowania i mona z ich pomoc uzyska zdumiewajce
efekty. Zacznijmy od podstawowych definicji: tabela to zestaw komrek zawierajcych
okrelone informacje. Tabele na stronach WWW s tak uyteczne dziki temu, co mona umieci w ich komrkach. W odrnieniu od do prostych i nieciekawych tabel
znanych z dokumentw drukowanych, w kadej komrce mona umieci prawie kady
element tworzcy stron WWW. Wyjtkiem s ramki, ktre nie zawieraj si w elemencie
 i jako takie nie mog by wprowadzone do komrek tabeli. Poza tym nie ma
ogranicze moesz realizowa wszystkie swoje pomysy.
Element
 omwilimy w rozdziale 3., natomiast na temat ramek piszemy
w rozdziale 12.








   


 

    
Pomysowi projektanci stron WWW ju od lat wykorzystuj tabele, planujc ukad poszczeglnych elementw na stronach. Za pomoc tabel, ktrych komrki s wypenione
rnymi elementami, na przykad obrazkami lub poczeniami, mona uzyska naprawd nieze efekty niektre z najciekawszych projektw, na widok ktrych wprost cinie si na usta pytanie: Jak oni to zrobili?, zostay wykonane wanie w ten sposb.
Strona WWW, przedstawiona na rysunku 11.1, jest wanie przykadem takiej tabeli.


Tabele wykorzystuje
si do projektowania
ukadu strony WWW
poprzez umieszczanie
w nich rnych
elementw,
niekoniecznie
tekstowych

Tabele dodajemy do stron WWW za pomoc znacznika 
. Zawiera on jeden lub
wicej elementw  (ang. table row wiersz tabeli). Elementy  zawieraj z kolei jeden
lub wicej elementw  (ang. table data dane tabeli), ktre nazywamy komrkami
tabeli. Kod rdowy typowej tabeli wyglda nastpujco:


  

 
 
  
 


 !
 
" #
 


$#
 
%#
 


 

Zdefiniowana przez nas tabela, przedstawiona na rysunku 11.2, posiada trzy wiersze,
a kady z nich dwie komrki.

 
 

 







Przykadowa tabela

Jeli szeroko i wysoko tabeli nie jest zdefiniowana w kodzie HTML, jej wymiary s
narzucane przez zawarto komrek. Tabela automatycznie zmienia swoje wymiary, dopasowujc je do elementw umieszczonych w komrkach nawet jeli w efekcie miaaby mie wiksze rozmiary ni te podane przez nas w kodzie HTML.
Aby wprowadzi wasny rozmiar tabeli, trzeba wykorzysta atrybuty
  (szeroko)
i  (wysoko). Na przykad, aby wstawi na stronie tabel przedstawion na rysunku
11.3, zajmujc ca dugo i wysoko okna przegldarki, naley wprowadzi kod:


#&''(
& &#''(



Tabela
moe zajmowa
ca szeroko
i wysoko
okna przegldarki






   


Atrybut #& jest znacznie czciej wykorzystywany ni & &#, poniewa strony WWW
maj w zasadzie nieograniczon dugo, a internauci s przyzwyczajeni do przewijania
stron, gdy chc zobaczy cig dalszy.

Wymiary tabeli wyraone w procentach okrelaj, jak cz okna przegldarki bez

wzgldu na rozdzielczo ekranu zajmie tabela. 100 procent szerokoci okna oznacza
ca szeroko okna, za 50 procent poow szerokoci okna przegldarki, itd. Wymiary tabel mona take definiowa w pikselach. Przykadowo, aby utworzy tabel
o szerokoci 400 pikseli i wysokoci 250 pikseli, wprowad lini kodu:


#&)''
& &#*+'

Jeli wymiary Twojej tabeli zostan okrelone w pikselach, czasem si zdarzy, e bdziesz musia przewija stron w poziomie. Na przykad, jeli wprowadzisz szeroko
tabeli 800 pikseli, a rozdzielczo ekranu ustawiona jest na 640480 pikseli, prawa
jej cz nie zostanie wywietlona w oknie przegldarki. Aby j zobaczy, naley przewin stron w poziomie. Dlatego lepszym rozwizaniem jest podawanie wymiarw tabel w formie procentowej i pozostawienie przegldarce kwestii ustalenia dokadnych
wymiarw.
Mona rwnie poczy obie techniki wprowadzania wymiarw tabel. Jeden z wymiarw zdefiniowa w pikselach, a drugi w formie procentowej. Na przykad, w kodzie wprowadzamy szeroko tabeli rwn 400 pikselom i wysoko okrelon jako trzy czwarte
okna przegldarki:


#&)''
& &#,+(

Moesz take definiowa wysoko i szeroko poszczeglnych komrek w tabeli, lecz

musisz mie wiadomo, e wpynie to na ukad pozostaej czci tabeli. Wprowadzenie okrelonej szerokoci jednej komrki spowoduje, e wszystkie inne w tej kolumnie
przyjm t sam szeroko. Podobnie, definiujc wysoko jednej komrki, okrelasz
wysoko wszystkich komrek w wierszu tabeli.
Jeli wprowadzisz w jednym wierszu lub w kolumnie dwa rne wymiary komrek,
zostanie narzucony wikszy. Na przykad, w tym samym wierszu okrelie wysoko
jednej komrki na 50 pikseli, a innej 80, wszystkie komrki w tym wierszu
bd miay wysoko 80 pikseli. Jeli dodasz jeszcze kolejn komrk o wysokoci
100 pikseli, to wszystkie komrki w wierszu przyjm wysoko 100 pikseli.

Atrybuty
  i  odnosz si do poszczeglnych komrek, jak i caej tabeli. Jednak musisz wiedzie, e kiedy wprowadzasz wymiar komrki w formie procentowej, to
odnosi si on do rozmiarw tabeli, a nie okna przegldarki. To znaczy, e umieszczajc
na stronie tabel o szerokoci 50 procent okna przegldarki i definiujc rwnoczenie
szeroko komrki jako 50 procent szerokoci tabeli, otrzymasz komrk, ktrej szeroko wynosi 25 procent szerokoci okna przegldarki.
Przykad kodu obrazuje, jak mona wprowadzi w tabeli szeroko pierwszej kolumny
rwn jednej trzeciej szerokoci caej tabeli i jednoczenie zada 100 pikseli jako wysoko drugiego wiersza.

 
 

 







  


#&--( 
 
  
 



& &#'' !
 
" #
 


$#
 
%#
 


 

Tabela o takich wymiarach zostaa przedstawiona na rysunku 11.4.



Rezultat
wprowadzenia
rnych wartoci
wielkoci wierszy
i kolumn w tabeli

Jeli w kodzie tabeli nie wprowadzisz adnej zawartoci do jej komrek, nie zostanie
ona te wywietlona w oknie przegldarki.

Podczas definiowania wymiarw poszczeglnych czci tabeli mog si zdarzy nieprzewidziane sytuacje. Okrelanie wymiaru w pikselach dla pojedynczych komrek jest
prawidowe, jeli jednoczenie nie definiujesz sprzecznie wymiaru caej tabeli. Na przykad, zapis kodu, ktry prezentujemy niej, przyniesie inne od oczekiwanych rezultaty
tabela nie zostanie wywietlona prawidowo w oknie przegldarki:


#&.''
  


#&*'' 
 

#&''  
 









   



& &#'' !
 
" #
 


$#
 
%#
 


 

W opisanej sytuacji przegldarka WWW rozwie jednak sama problem wywietlenia

tak zdefiniowanej tabeli. Pierwsza kolumna bdzie miaa 400 pikseli szerokoci, a druga
200. Poniewa zadana, czna szeroko dwch kolumn tabeli, zdefiniowanych w kodzie
HTML, jest mniejsza (300 pikseli) od zadeklarowanej szerokoci caej tabeli (600 pikseli),
przegldarka wybiera szeroko wiksz, czyli 600 pikseli. Jednoczenie zachowana
jest proporcja szerokoci komrek (w tym przypadku 2 do 1), co daje wanie szerokoci
400 i 200 pikseli.
Podczas definiowania rozmiarw tabeli warto wic zwraca uwag na wprowadzanie
waciwych wielkoci.
W zapisie procentowym mona take przez pomyk wprowadzi bdne wartoci, tzn.
ich suma nie da 100 procent. Przegldarki radz sobie i z tym problemem zachowujc proporcje wymiarw komrek. Kiedy czny wymiar komrek przekroczy 100 procent, wszystko ponad to jest proporcjonalnie odejmowane od kadej komrki.
Funkcj t mona wiadomie wykorzystywa. Wielu projektantw stron WWW postawionych przed problemem utworzenia tabeli zoonej z trzech kolumn o identycznej
szerokoci, rezygnujc z precyzji, wprowadza odpowiednio 33, 33 i 34 procent (cznie
100 procent). Jeli wprowadzisz we wszystkich komrkach rozmiar 33 procent, przegldarka podzieli brakujcy 1 procent midzy wszystkie kolumny, wic bd one idealnie rwne.


 

W zalenoci od przeznaczenia mona wprowadza rne rodzaje obramowania tabel.
Jeli tabela ma tylko pomc w zaprojektowaniu okrelonego ukadu elementw na stronie, wprowadzanie obramowania nie jest podane. Niemniej, jeli obramowanie tabeli
jest nam potrzebne, wprowadzenie go nie jest adnym problemem.
Grubo obramowania definiujemy za pomoc atrybutu . W przykadzie kodu
okrelilimy grubo linii obramowania tabeli jako 1 piksel:


  

Wikszo osb projektujcych strony WWW unika grubych krawdzi tabel i nadaje im
warto od 1 do 5 pikseli. Kade obramowanie grubsze ni 1 piksel jest wywietlane
w oknie przegldarki w charakterystyczny sposb prawa krawd i dolna krawd
tabeli wydaj si ciemniejsze od pozostaych. Uzyskujemy efekt rzucania cienia przez
tabel, jak gdyby promie wiata pada z jej lewego, grnego rogu. Rysunek 11.5 przedstawia rne rozmiary obramowania tabeli.

 
 

 







Ramki o gruboci
powyej 5 pikseli
nie wygldaj
zachcajco

Zwr uwag na to, e grubo obramowania tabeli nie wpywa na zmniejszenie wewntrznego obszaru komrek ani na grubo oddzielajcych je krawdzi. Od tej zasady
jest jednak wyjtek jeli definiujesz tabel bez obramowania, nadajc mu warto zero, to rwnie komrki tabeli nie bd posiaday wewntrznych krawdzi.
Dodatkowo mona modyfikowa obramowania tabel oraz ukad krawdzi pomidzy
komrkami. S to jednak funkcje o niewielkim znaczeniu, poniewa zwizane s zazwyczaj z jedn konkretn przegldark i nie maj statusu powszechnego standardu.
Nawet jeli zamierzasz umieci na stronie tabele pozbawione obramowania,
najlepiej pocztkowo definiowa je wraz z obramowaniem, a na kocu usun
ramki. Uatwia to projektowanie ukadu strony, gdy poszczeglnych elementw
1
nie umieszczamy w niewidzialnych komrkach tabeli .

  

Czasem regulujemy odlego pomidzy zawartoci komrki a jej krawdziami. Zaley to od zawartoci okrelonej komrki (tekst, obrazek). Rysunek 11.6 przedstawia tabel, ktrej komrki nie posiadaj odstpu midzy krawdziami a zawartoci. Pierwsza
komrka zawiera obrazek, ktry idealnie si tu mieci, natomiast druga tekst opisujcy
obrazek, ktry jest trudniejszy do odczytania, poniewa przylega cile do krawdzi
komrki.

Cz programw do tworzenia stron WWW oferuje moliwo podgldu ukadu tabeli, w ktrej grubo
ramki zdefiniujemy jako 0 pikseli. Tak jest np. w programie Netscape Composer przyp. tum.








   




Obrazki w tabeli
wygldaj lepiej,
jeli nie wprowadzimy
odstpu midzy nimi
a krawdziami
komrek

Na rysunku 11.7 przedstawiono t sam tabel. Tym razem jednak odstp midzy zawartoci a obramowaniem komrek wynosi 2 piksele. Jeli mwimy o pooeniu obrazka,
to pojawia si niepodana przerwa midzy jego krawdziami i obramowaniem komrki,
natomiast tekst pod obrazkiem jest bardziej czytelny ni w poprzednim przykadzie.

 
Tekst jest
bardziej czytelny,
jeli dodamy
odstp midzy nim
i obramowaniem
komrki

Wstawianie obrazkw do tabeli zostao szerzej omwione w podrozdziale

Obrazki i kolory w tabelach

 
 

 





Odstp midzy zawartoci tabeli i jej krawdziami mona zdefiniowa za pomoc atrybutu , ktry wprowadzamy w elemencie 
. Odstp ten dotyczy caej tabeli, nie mona go zadeklarowa tylko dla jej poszczeglnych komrek. Aby zdefiniowa
odstp 2 pikseli, omawiany w przytoczonym przykadzie, wprowad nastpujcy kod:


!//01 *

Mona rwnie wprowadzi odstpy pomidzy samymi komrkami w tabeli. Na rysunku 11.8 przedstawiamy rne warianty takich odstpw.

!
Mona nadawa
odstpom
pomidzy komrkami
rne wartoci

Odstpy midzy komrkami w tabeli wprowadza si za pomoc atrybutu ,

ktry definiujemy w elemencie 
. Przyjmujemy, e wprowadzamy odstp 5 pikseli
midzy wszystkimi komrkami w tabeli:


!//0!1 +

Wybr odpowiedniego odstpu midzy zawartoci tabeli a jej krawdziami oraz odstpu
midzy samymi komrkami w tabeli to nie to samo, cho moemy je indywidualnie
ustala. Wybr jest tutaj w znacznej mierze kwesti naszych preferencji estetycznych.
Tabela, w ktrej nie zostanie zdefiniowana adna z tych wartoci, i tak bdzie poprawna.

 
   
Wyrwnywanie tabel to dziaanie cakowicie odmienne od wyrwnywania wierszy i komrek. Polega na okrelaniu pozycji tabeli na stronie WWW. Definiujemy je w elemencie

 za pomoc atrybutu . Atrybut  moe przyjmowa nastpujce wartoci:
 (przysunicie do lewego marginesu),   (wyrodkowanie na stronie) oraz 
(przysunicie do prawego marginesu). Wyrodkowanie tabeli spowoduje umieszczenie
obu jej krawdzi w rwnej odlegoci od prawego i lewego marginesu. Na rysunku 11.9
zostaa przedstawiona tabela wyrwnana do prawego marginesu strony.






   



"
Tabela wyrwnana
do prawego
marginesu strony



 
Atrybut , przypisany elementom  i , suy z kolei do wyrwnywania zawartoci
objtych nim komrek, a nie samych komrek. Midzy wyrwnywaniem tabeli i wyrwnywaniem wierszy lub komrek nie ma adnego zwizku, chocia uywamy atrybutu
o takiej samej nazwie i przyjmuje on identyczne wartoci. W tym przypadku musimy
zdecydowa, ile komrek i ktre chcemy podda formatowaniu wszystkie bd
podlega tej samej regule wyrwnania.
Mamy tu do czynienia z jeszcze jednym przykadem dziedziczenia (w kodzie HTML)
waciwoci elementw nadrzdnych przez elementy, ktre s w nich zawarte. Ustawienia wprowadzone dla wiersza tabeli obejmuj domylnie wszystkie komrki, znajdujce si
w tym wierszu. Na przykad, jeli element  (wiersz tabeli) jest wyrwnany do rodka,
wszystkie elementy  (komrka tabeli) w tym wierszu bd automatycznie objte tym samym wyrwnaniem. Aby to zmieni, naley pomin dziedziczone wartoci atrybutw.
Relacje midzy elementami nadrzdnymi i podrzdnymi w kodzie HTML omwilimy
w rozdziale 3.

Jako przykad pokazujemy tabel zoon z dwch wierszy. Dla pierwszego nie zdefiniowano typu wyrwnania. Oznacza to, e zawarto wszystkich komrek w tym wierszu jest automatycznie wyrwnana, zgodnie z domyln wartoci, do lewego brzegu
komrki. W drugim wierszu zadeklarowalimy wyrwnanie do rodka, ale w pierwszej
komrce tego wiersza wprowadzilimy wyrwnanie do prawej krawdzi.


#&)''
  

23 11
34/1
23 11
34/1


/ 1!1# 

 
 

 




/ 1  &#23 11

0 5
34/1
3 11
/
 


 

Rysunek 11.10 przedstawia tak zdefiniowan tabel, wywietlon w oknie przegldarki.


#
Wyrwnanie
obowizujce
w caym wierszu
zostanie pominite,
jeli zdefiniujemy
wyrwnanie
konkretnej
komrki


 
Jeli umiecisz w tabelach znajdujce si na stronach WWW formularze ktre nie
najlepiej wygldaj w zwykym kodzie HTML zyskaj nie tylko na wygldzie, ale
bdzie je mona wypenia w prostszy sposb. Korzy dla goci Twojej witryny jest
wic podwjna. Na rysunku 11.11 przedstawiamy formularz napisany w zwykym HTML.
Utworzono go za pomoc kodu:
67
!#1! 81!&!1#90/
#0#
:
;3#1<
=:>
#30#?#
1 1


@A<
=:>
#300 
10

=:>
#30#
B/234/5
67

Formularze zostay omwione w rozdziale 15.

Na rysunku 11.12 przedstawilimy ten sam formularz, poczony jednak z tabel, dziki
czemu wyglda duo lepiej na stronie WWW.







   




Formularze tworzone
w standardowym
kodzie HTML
nie s zbyt adne



Dziki tabelom
formularze
na stronach WWW
mog wyglda
lepiej

Formularz przedstawiony na rysunku 11.12 uzyskalimy dziki wstawieniu tabeli zdefiniowanej tak, jak to zostao pokazane w tym przykadzie kodu HTML:
67
!#1! 81!&!1#90/
#0#

 


/ 1  &#:
;3#1<


/ 1/C#
=:>
#30#?#
1 1




 
 

 






/ 1  &#@A<


/ 1/C#
=:>
#300 
10




/ 1/C#
=:>
#30#
B/234/5



 
67

Ten efekt zawdziczamy wstawieniu elementu 
 wewntrz elementu  , a nie na

odwrt. W tabelach mona wstawia elementy tylko do poszczeglnych komrek, wic
cay formularz trzeba byoby wstawi do jednej komrki, co nie pozwolioby kontrolowa
ukadu poszczeglnych pl. Trzeba zatem wstawi tabel do formularza! W ten sposb
korzystamy jednoczenie ze struktury tabeli i funkcji formularza.
Opisywana przez nas tabela posiada dwie kolumny. Pierwsza zawiera tekst, ktry opisuje
pola formularza i zosta wyrwnany do prawej krawdzi komrki. W drugiej kolumnie
wstawiono pola formularza (do wypenienia), ktre wyrwnano do lewego brzegu komrki. Dziki temu uzyskalimy adniejszy ukad poszczeglnych elementw formularza.





 
Tabele s wrcz niezbdne, jeli na stronie wykorzystujemy to z motywem graficznym,
przylegajcym do bocznej krawdzi strony. W naszym przykadzie z lewej strony znajduje si wzr, utrudniajcy odczytanie umieszczonego na pierwszym planie tekstu.
Niewykorzystana pozostaje prawa cz strony. Ilustruje to rysunek 11.13 umieszczony w tradycyjny sposb na stronie tekst jest mao czytelny.


Element ta
nie powinien
zasania tekstu
umieszczonego
na stronie







   


Wicej informacji o obrazkach ta znajdziesz w rozdziale 8.

Na stronie WWW w prosty sposb mona wykorzysta obrazki ta i tak wkomponowa

tekst, by nie pokrywa si z artystycznym motywem ta. W kodzie HTML dokonuje si
tego na kilka sposobw, ale najatwiej i najszybciej osiga si zamierzony efekt, wykorzystujc tabel. W zasadzie potrzebna jest Ci tylko jedna komrka tabeli. Podajemy
przykad, w ktrym zdefiniowalimy typow stron WWW, tak aby obrazek znajdujcy
si z boku nie zakrywa tekstu umieszczonego na stronie:
@7
@ 
= %# 1
 5$!
#A

!13
 = 
@ 


! 1
 


#&D'(
/ 1  &#
  



 



 


@7

Rysunek 11.14 przedstawia tabel utworzon wedug zapisanego kodu, umieszczon

w prawej czci strony. Sztuczka polega na dobraniu odpowiedniej szerokoci tabeli
i sposobu jej wyrwnania. Tabel wyrwnano do prawego marginesu, co spowodowao,
e znalaza si po przeciwnej stronie wzoru ta. Nadanie tabeli szerokoci mniejszej ni
szeroko okna przegldarki umoliwia oddzielenie graficznego motywu ta od tekstu,
mona wic unikn nakadania si wzoru i tekstu.


Tabela
o odpowiedniej
szerokoci,
wyrwnana
do prawego
marginesu,
nie zakrywa
bocznego
wzoru ta

 
 

 





Ten kod moesz zastosowa na swoich stronach WWW, zastpujc wyraenie plikobrazka nazw pliku, w ktrym przechowywany jest obrazek, ktry suy za margines.
Nastpnie okrel rozmiary tabeli, tak by zajmowaa cz strony, ktra nie jest zarezerwowana dla wzoru ta. Na przykad moesz zwikszy rozmiary tabeli do 95 procent szerokoci strony wszystko zaley od rodzaju wstawionego ta, my zdecydowalimy si
na 80 procent. Ostatnim krokiem jest usunicie krawdzi tabeli, po to by nie bya widoczna dla osb odwiedzajcych witryn. Aby usun krawdzie tabeli, zastp wyraenie
 wyraeniem  .
Teraz naley zamieci pomidzy znacznikami !" i !#", w miejscu gdzie w prezentowanym przez nas kodzie znajduje si wyraenie Zawarto strony, tre Twojej
strony WWW. Dziki temu dziaaniu wszystkie elementy Twojej strony zostan umieszczone w jednej komrce tabeli, ktra rozszerzy si w pionie i dopasuje do umieszczonej
w niej zawartoci. Na rysunku 11.15 przedstawiamy projekt strony, o ktrej pisalimy
na pocztku tego podpunktu, z zawartoci umieszczon w jednej komrce tabeli.


Umieszczenie
zawartoci strony
w tabeli pomaga
we waciwym
rozmieszczeniu
elementw
w stosunku
do elementu
graficznego

Aby umieci zawarto strony w pewnej odlegoci od lewej krawdzi, mona take
skorzysta z innych metod. Na przykad zamieszczajc tekst w elemencie
$%&'.
Wad tego rozwizania jest to, e tekst zostanie przesunity rwnolegle w stosunku do
obu marginesw, podczas gdy wystarczy odsun go tylko od lewego marginesu.
W dodatku nie wiadomo, co zrobi z nietekstowymi elementami strony.
Innym rozwizaniem jest wprowadzenie szerszego marginesu w lewej czci strony za
pomoc CSS, z tym e nie wszystkie przegldarki WWW obsuguj kaskadowe arkusze
stylw.
CSS (kaskadowe arkusze stylw) omwilimy w rozdziale 13.







   





Wiersze i komrki tabeli wyrwnujemy w poziomie za pomoc atrybutu , mona
je take wyrwnywa w pionie za pomoc atrybutu (. Temu atrybutowi przypisujemy jedn z czterech wartoci:  (gra), ) (rodek),  ) (d) i .
Warto  zawsze sprawia problemy. Rne przegldarki odmiennie j interpretuj, wic nie mona mie pewnoci, w jaki sposb zostanie wywietlona zawarto
komrki. Zajmiemy si wic trzema podstawowymi wartociami.
Tym razem w naszym przykadzie zdefiniowalimy tabel, ktra zawiera cztery wiersze.
Pierwszy z nich nie ma zdefiniowanej wartoci atrybutu (, wic zgodnie z domyln wartoci nastpuje wyrwnanie do rodka komrki. Dla drugiego wiersza zdefiniowano wyrwnanie do grnej krawdzi komrki, a dla trzeciego do dolnej krawdzi.
W ostatnim wierszu wprowadzilimy wyrwnanie do rodka, tyle e dwie komrki
w tym wierszu posiadaj swoje wasne wartoci wyrwnania.


& &#)''
  

34/1
3 11
34/1
3 11
34/1
3 11
34/1
3 11


B/ 1#0
23 11

 3
23 11

 3
23 11

 3
23 11

 3


B/ 1##
23 11

A
23 11

A
23 11

A
23 11

A


B/ 1!1# 

B/ 1#023 11

 3
23 11
34/1
/
 
23 11
34/1
/
 

B/ 1##23 11

A


 

Tak zdefiniowana tabela zostaa przedstawiona na rysunku 11.16.



 


Tekst w komrce tabeli, napotykajc na krawd, zawija si i przechodzi do nastpnej
linii. Jeli to konieczne, wysoko komrki zostaje zwikszona, tak by cay tekst mg
si zmieci. Wikszo osb projektujcych strony WWW korzysta z tego domylnego
ustawienia. Jeli jednak zaley Ci na tym, aby pozostawi tekst w jednej linii komrki,
moesz doda do niej atrybut 
 (bez zawijania). Na przykad:

1 0

 
 

 







Wyrwnanie
zadeklarowane
dla caego wiersza
ma niszy priorytet
ni wyrwnanie
zdefiniowane
dla poszczeglnych
komrek

Jeli wprowadzimy w komrce atrybut 

, zostanie ona poszerzona tak, by cay
tekst zmieci si w jednej linii. Na rysunku 11.17 przedstawiamy tabel, w ktrej jedna
komrka posiada zdefiniowany atrybut 
.

 
Atrybut nowrap
umoliwia
wywietlenie
w jednej linii
caego tekstu
umieszczonego
w komrce







   


 
Podstawowy ukad tabeli jest symetryczny kady wiersz i kolumna zawieraj tak
sam ilo komrek, a kada komrka w wierszu i kolumnie posiada ten sam rozmiar.
Mona to jednak zmieni. Atrybuty  (rozpito w kolumnie) i 
 (rozpito w wierszu) elementu  (komrka tabeli) umoliwiaj czenie komrek zarwno w pionie, jak i poziomie. Funkcja ta jest niezwykle uyteczna w tabelach sucych
przede wszystkim do przedstawiania danych, zwaszcza gdy konieczne jest wprowadzenie paska tytuowego, ktry zajmuje wicej ni jedn kolumn lub jeden wiersz. Na
rysunku 11.18 przedstawiono przykad czenia komrek.

!
Mona czy
komrki wierszy
i kolumn

Kod takiej tabeli wyglda nastpujco:



  


01*

!/01*E#3

!/01*3


%!
%!
%!
%!



01*
2 

,
)

 
 

 





.
*-


.
+
*
F


 

Pomimo tego e poczylimy komrki, tabela nadal posiada pi kolumn i cztery wiersze.
Zwikszenie rozpitoci komrki na kilka wierszy lub kolumn komplikuje kod rdowy,
w porwnaniu do kodu symetrycznej tabeli.
Pierwszy wiersz wyglda nastpujco: pierwsza (pusta) komrka zajmuje dwa wiersze,
lecz tylko jedn kolumn. Kolejne dwie komrki zajmuj tylko jeden wiersz, lecz kada
z nich jest rozpita na dwie kolumny. Nadal w tabeli jest pi kolumn.
Drugi wiersz jest nieco bardziej skomplikowany. Wyranie skada si tylko z czterech
komrek. Pierwsza komrka wywietlana w tym wierszu jest waciwie pust komrk
zdefiniowan w poprzednim wierszu, rozpit na dwa wiersze jednoczenie. Jeli dodamy w drugim wierszu kolejne cztery elementy , otrzymamy w rezultacie pi kolumn.
Trzeci wiersz rozpoczyna si komrk rozpit jednoczenie na trzecim i czwartym wierszu,
lecz tylko na jednej kolumnie. Pozostae cztery elementy  uzupeniaj nastpne cztery
kolumny, w rezultacie mamy pi kolumn.
W ostatnim wierszu, podobnie jak w drugim wierszu od gry, pierwsza pusta komrka
jest utworzona poprzez rozpicie komrki z trzeciego wiersza na dwa wiersze jednoczenie.
Nastpne cztery komrki zostay zdefiniowane w elementach , dajc w rezultacie pi
kolumn.


    

Obrazki s dodawane do komrek tabeli tak samo jak do stron WWW za pomoc
elementu *+. Rnica polega na tym, e element *+ naley umieci midzy znacznikami
!" i !#". Przykad umieszczania obrazka w komrce tabeli przedstawiamy poniej:
=7G
 !
 

Przykad tabeli, zawierajcej obrazek, przedstawia rysunek 11.19. Sama tabela nie jest
widoczna na stronie, zostaa jedynie wykorzystana do rozmieszczenia elementw. (Atrybutowi  przypisano warto zero). Ukad obrazka na stronie jest zdefiniowany
poprzez ukad tabeli.
Wicej informacji zwizanych z dodawaniem obrazkw do stron WWW znajdziesz
w rozdziale 8.







   



"
Obrazki
mona dodawa
do tabel
na tej samej zasadzie
jak wszelkie
inne elementy


 


 
Tabele, a nawet poszczeglne wiersze czy komrki, mog posiada wasne obrazki ta.
Szczerze mwic, funkcja ta nie jest jednak uyteczna. Korzystanie z niej moe prowadzi
do gorszego ukadu graficznego tabeli, a w konsekwencji caej strony. Jeli przy planowaniu ukadu graficznego tabeli wykorzystujesz zaawansowane funkcje, wprowadzenie
obrazkw ta tabeli moe zniweczy cay Twj trud. Przykadowo, na rysunku 11.20
przedstawiamy tabel, ktrej adn ramk utworzono przez poczenie definicji koloru
ta z widocznymi i niewidocznymi obrazkami na pierwszym planie. Na rysunku 11.21
pokazujemy t sam tabel, w ktrej wstawilimy obrazek ta, przez co praca woona
w utworzenie ramki zostaa zniweczona. Cho efekt kocowy w przegldarce Internet
Explorer nie prezentuje si tak le jak w Netscape Navigator, i tak jest niezadowalajcy.

#
Tabela
zaprojektowana
bez ta

 
 

 







Ta sama tabela
znieksztacona
przez dodanie ta

Dodatkowe trudnoci wynikaj ze sposobu odczytywania kodu rdowego przez przegldarki. Netscape Navigator rozrnia obrazki ta na poziomie caej tabeli, wierszy
i poszczeglnych komrek, natomiast Internet Explorer nie wywietla obrazkw ta
wprowadzanych do wierszy tabeli.
Aby obrazek pojawi si jako to tabeli, naley do odpowiedniego jej elementu doda
atrybut ,- wraz z podaniem cieki dostpu do pliku obrazka. Na przykad, aby
doda do caej tabeli obrazek ta o nazwie lisc_tlo.gif (zlokalizowany w tym samym
folderze co nasz plik HTML), wprowad kod:


! 1/!H#/9 C

Aby wprowadzi obrazek ta do wiersza tabeli, zastosuj atrybut ,- do elementu  :


! 1/!H#/9 C

Do poszczeglnych komrek tabeli wprowadzamy obrazek ta, modyfikujc element :


! 1/!H#/9 C

 


 
Kolory ta, w przeciwiestwie do obrazkw ta, s w tabelach czciej uywane. W tabelach zawierajcych dane, na przykad liczbowe, wyrnianie wierszy poprzez okrelanie rnych ich kolorw, zwiksza przejrzysto i uatwia odczytywanie zapisanych
danych. Uywajc koloru moemy take wyrni nagwki tabeli, uwydatni doln
krawd lub dokona innych operacji, ktre poprawi wyrazisto samej tabeli. Na rysunku 11.22 przedstawiamy tabel, zawierajc dane, ktrej elementy wyrnilimy,
zmieniajc w wierszach kolory ta.







   




Rne kolory ta
pomagaj wyrni
poszczeglne
elementy tabeli

W projektowaniu stron WWW bardzo przydaje si stosowanie rnych kolorw ta tabeli. Moesz zdefiniowa kolor i rozmiar pojedynczej komrki tabeli, a uzyskasz rnokolorowe paski w poszczeglnych czciach tabeli. Ten zabieg jest czsto stosowany
w tabelach zamiast obramowania, z rwnie dobrym efektem.
Kolor ta komrki tabeli nie jest wywietlany w przegldarce, do momentu a znajdzie
si w niej dowolny element. Jak wic mona wprowadzi to, nie umieszczajc w komrce adnego elementu? Zwaszcza takiego, ktry wpywaby na zmian koloru ta?
Kreatywni projektanci stron WWW znaleli ju rozwizanie, i jest ono diabelnie proste.
Wystarczy utworzy specjalny obrazek, skadajcy si tylko z jednego, przezroczystego
piksela. Taki obrazek moesz wprowadzi do dowolnej komrki tabeli bez koniecznoci
podawania jej wymiarw. Jest to dua zaleta, zwaszcza e dokadny wymiar nadajemy
kademu obrazkowi przez podanie wartoci atrybutw  i
 , ktre definiuj
wymiar komrki tabeli.
Prezentujemy przykad zastosowania tej techniki. Moesz j przecie wykorzystywa
na swoich stronach WWW. Rysunek 11.23 przedstawia tabel zoon z kolorowych
paskw i pary obrazkw. Obrazkami s ukone linie, po obu stronach pierwszego wiersza
tabeli. Linie poziome i pionowe w tabeli to pewnego rodzaju kolorowe paski, o ktrych
wspominalimy wczeniej. W ich wywietleniu oczywicie pomg nam przezroczysty
obrazek IttyBittyClear.gif.
Oto kod rdowy wykorzystany do wygenerowania strony przedstawionej na rysunku 11.23:
@7
@ 
=  1
/ 3!&
0= 
@ 


 !/ I666666


#&''(
  '
!//0!1 '
!//01 '
/ 1/C#


01*
/ 1  &#
!/01*=7G
 !0C#)901 
#&)-
& &#D)
  '
 

 13
/3
 

 
 

 







Efekty graficzne
zastosowanej
techniki


 !/ I-"+DF,
B/ 1#0
/ 1!1# 
#&''(=7G
 !=##3
##3"/ 9 C
#&
& &#)
  '
/# 
 1 
/  
0
C113
5
''(

01*
/ 1/C#
!/01*
=7G
 !0 &#)901 
#&)-
& &#D)
  '
/# 

 13
0 3
 




/ 1!1# 
B/ 1/
& &#,D#5
!3
1 A
/
/ 



/ 1/C#
 !/ I-"+DF,
& &#''(
=7G
 !=##3
##3"/ 9 C
#&)
& &#
  '
/#


=7G
 !=##3
##3"/ 9 C
#&-F
& &#
  '
/#

#5
!3
0#A$
!J4K
# 13

=7G
 !=##3
##3"/ 9 C
#&-F
& &#
  '
/#


 !/ I-"+DF,
/ 1  &#
B/ 1/
=7G
 !=##3
##3"/ 9 C
#&)
& &#
  '
/#



 


@7

W kodzie rdowym zapisano, e szeroko grnego, kolorowego paska zostaa zdefiniowana jako 100 procent szerokoci okna przegldarki. Pamitamy, e podawanie wymiarw w procentach (wzgldem wymiarw okna przegldarki) gwarantuje automatyczne dostosowanie wymiaru do kadej rozdzielczoci ekranu. Jeli cakowita szeroko
tabeli przekroczy 100 procent szerokoci okna przegldarki (a tak jest w tym przypadku,







   


poniewa w wierszu znajduj si jeszcze inne komrki), wtedy przegldarka automatycznie zmniejszy proporcjonalnie wymiary kadej komrki w tym wierszu. Dziki takiemu rozwizaniu, niezalenie od rozdzielczoci ekranu i rozmiarw okna przegldarki, tabela bdzie zawsze wywietlana prawidowo.
Ten sam efekt mona uzyska poprzez nadanie komrce, zawierajcej kolorowy pasek,
absolutnej szerokoci, powiedzmy 99999 pikseli. Poniewa tabela jest ju dopasowana
do szerokoci okna przegldarki, wic nie spowoduje to zwikszenia szerokoci jej
komrek.

Moesz skorzysta z zaprezentowanego szablonu strony WWW, wprowadzajc, oczywicie w odpowiednim miejscu, zawarto Twojej strony. Do tabeli dodaje si kolejne
wiersze poprzez kopiowanie ostatniego elementu  z zaprezentowanego kodu rdowego i wklejanie go do wasnej strony, tyle razy, ile wierszy jest nam potrzebnych. Element ten oddzielilimy od pozostaej czci kodu dodatkowymi odstpami, aby uatwi
Ci jego kopiowanie. W ten wanie sposb utworzylimy przykadow stron, przedstawion na rysunku 11.24.


Do schematu strony,
przedstawionej
w poprzednim
przykadzie,
dodalimy
nowe elementy

Nie trzeba wcale umieszcza kolorowych paskw na skraju tabeli. Moesz je take wstawi w dowolnej komrce. Spjrzmy teraz na przykad e-zinu, czyli internetowego magazynu (patrz rysunek 11.25). Cienk, pionow lini bdziemy oddziela rne artykuy,
upodobniajc wygld strony WWW do ukadu szpaltowego czasopism drukowanych. Podobnie jak w poprzednim przykadzie, rwnie tutaj moesz wykorzysta przygotowany
przez nas kod rdowy, wprowadzajc we waciwych miejscach zwarto Twojej strony.
Projekt e-zinu zosta przedstawiony na rysunku 11.25. Pierwszy wiersz tabeli, w ktrym
umiecilimy logo czasopisma, skada si z pojedynczej komrki, ktra rozpita jest na
wszystkich kolumnach tabeli. Nastpny wiersz skada si z trzech komrek. rodkowa
komrka zawiera niewidoczny obrazek, umoliwiajcy wywietlenie czarnego koloru
ta. W komrkach z lewej i prawej strony umieszczono teksty artykuw. Ostatni, dolny
wiersz, podobnie jak wiersz pocztkowy, jest rozpity na wszystkich trzech kolumnach.
Zazwyczaj umieszcza si w nim poczenia do innych stron, witryn; oczywicie, moesz
to miejsce wykorzysta inaczej.

 
 

 







Podstawowy ukad
e-zinu, wykorzystano
kolorowy pasek
oddzielajcy
ssiadujce
artykuy

Opisany powyej schemat e-zinu utworzylimy za pomoc nastpujcego kodu:

@7
@ 
=  1
0 5#
 31
= 
@ 




#&''(

=G:!1# 
B/ 1#0

"%:-#5
!3
/ 


B/ 1#0

#&+'(#5
!3
0 3
 #3A9

 !/ 
/!
& &#''(=7G
 !=##3
##3"/ 9 C
#&
& &#
  '
/#51
A
 0!

#&+'(#5
!3
  
 #3A9


=G:!1# 
B/ 1/

"%:-#5
!3
0A$!1


 


@7

Wysoko komrki zawierajcej kolorowy pasek jest rwna wysokoci caej tabeli
(100%), dlatego linia ta bdzie odpowiednio duga niezalenie od dugoci artykuu.

Na rysunku 11.26 przedstawilimy, jak wyglda ukad naszej strony WWW po wstawieniu do tabeli przykadowych wartoci. Wprowadzilimy take odstp 3 pikseli pomidzy zawartoci i krawdziami komrek, zwikszajc tym samym odstp midzy
tekstem i krawdziami tabeli oraz rozmiar rodkowej linii.







   




Ukad strony WWW
zbliony
do ukadu strony
typowego czasopisma

Ten przykad niech bdzie punktem wyjcia do dalszej pracy, doskonalenia ukadu strony WWW przy pomocy tabel i jej poszczeglnych elementw. Przeled kod rdowy
i pomyl, a z pewnoci odkryjesz wiele zastosowa tabel i kolorowych paskw.


Jeli w arsenale projektanta stron WWW znajduje si tajna bro, s ni wanie tabele.
Mona je wykorzysta do rnych celw.
W tym rozdziale zwrcilimy uwag na nastpujce zagadnienia:

Za pomoc tabel mona wstawia na strony WWW rne elementy.

Tabele skadaj si z wierszy, reprezentowanych poprzez element 

(ang. table row wiersz tabeli). Wiersze z kolei s zoone z komrek,

definiowanych za pomoc elementu  (ang. table data dane tabeli).

Rozmiar tabeli mona definiowa za pomoc wartoci absolutnych, wyraonych

w pikselach lub poprzez warto procentow (wzgldem rozmiaru okna przegldarki).

Obramowanie wyrnia krawdzie tabel i komrek.

W tabeli mona zdefiniowa okrelone odstpy midzy poszczeglnymi

komrkami.

W tabeli mona wprowadzi odstpy midzy krawdziami komrek

a ich zawartoci.

Ukad tabeli okrela si poprzez zdefiniowanie wyrwnania samej tabeli

i jej komrek.

Komrki mog obejmowa wicej ni jeden wiersz lub kolumn.