You are on page 1of 25

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

Kurs tworzenia stron


internetowych
Autor: Todd Stauffer
Tumaczenie: Tomasz Jarzbowicz
ISBN: 83-7197-814-6
Tytu oryginau: Absolute Beginner's Guide
to Creating Web Pages
Format: B5, stron: 500

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

Kurs tworzenia stron internetowych to idealna pozycja dla osb, ktre stawiaj
pierwsze kroki w wiecie Internetu. Dowiesz si z niej, jak rozpocz tworzenie swojej
wasnej strony WWW i co zrobi, by bya ona atrakcyjna graficznie, przyjazna dla
uytkownika i zgodna z sieciowymi standardami.
Autor nie poprzestaje na omwieniu podstaw potrzebnych do stworzenia strony, takich
jak jzyk HTML i style CSS. Unikajc skomplikowanego argonu, w przystpny sposb
przedstawia take bardziej zaawansowane zagadnienia: tworzenie skryptw w jzyku
JavaScript, dynamicznych stron WWW, formularzy oraz wzbogacanie stron
o mechanizmy e-commerce.

Spis treci
O Autorze ........................................................................................ 13
Wstp ............................................................................................. 15

Cz I

Wprowadzenie do wiata stron WWW .............................21

Rozdzia 1. Podstawowe zasady dziaania sieci WWW......................................... 23


Krtka historia Internetu ...................................................................................................23
Jak dziaa sie WWW?......................................................................................................25
Co to jest HTTP? ........................................................................................................26
Co to jest HTML? .......................................................................................................26
Hipertekst i hipercza ................................................................................................27
Uniform Resource Locator .........................................................................................28
Rne protokoy wykorzystywane w URL-ach..........................................................29
HTML kontra XHTML .....................................................................................................30
Kto wprowadza standardy HTML-a? .........................................................................30
Dlaczego wprowadzono nowy standard?....................................................................31
Ktry standard powiniene zastosowa? ....................................................................32
Tworzenie stron WWW nie jest programowaniem...........................................................32
Podstawowe informacje o znacznikach ......................................................................33
Projektowanie ukadu graficznego stron WWW za pomoc arkuszy stylw .............34
Dodawanie skryptw do stron WWW ........................................................................35
Podsumowanie ..................................................................................................................36

Rozdzia 2. Krtki kurs tworzenia stron WWW .................................................... 37


Podstawowe zasady projektowania stron WWW..............................................................37
Teoria projektowania stron WWW.............................................................................38
Organizowanie stron WWW.......................................................................................39
Obrazki i elementy multimedialne..............................................................................41
Elementy interaktywne i skrypty ................................................................................43
Jak powinna wyglda dobrze zaprojektowana strona?..................................................44
Planowanie witryny...........................................................................................................44
Odbiorcy twojej witryny .............................................................................................45
Organizowanie witryny...............................................................................................46
Projektowanie spjnego ukadu witryny.....................................................................48
Kierunki rozwoju HTML-a ...............................................................................................49
Uatwienia dostpu......................................................................................................50
Ustawienia midzynarodowe ......................................................................................50
Zgodno z rnymi przegldarkami..........................................................................51
Podsumowanie ..................................................................................................................51

Kurs tworzenia stron internetowych

Rozdzia 3. Narzdzia do tworzenia stron WWW.................................................. 53


Podstawowe programy narzdziowe.................................................................................53
Edytory tekstu .............................................................................................................55
Edytory jzyka HTML................................................................................................56
Inne przydatne programy narzdziowe .............................................................................57
Edytory grafiki ............................................................................................................57
Programy do tworzenia animacji ................................................................................58
Programy do tworzenia obiektw multimedialnych ...................................................59
Programy do edycji skryptw .....................................................................................59
Wybr serwera WWW ......................................................................................................60
Co to jest serwer WWW? ...........................................................................................60
Wsppraca z dostawc usug internetowych .............................................................60
Jakie oprogramowanie jest uruchomione na twoim serwerze WWW? ......................62
Uzyskiwanie dostpu do miejsca na serwerze WWW................................................63
Organizacja plikw na serwerze WWW ...........................................................................64
Rne warianty organizacji plikw ............................................................................64
Tworzenie hierarchii katalogw .................................................................................66
Zapisywanie nazw plikw...........................................................................................66
Uaktualnianie witryny.................................................................................................67
Podsumowanie ..................................................................................................................68

Rozdzia 4. Tworzenie pierwszej strony................................................................ 69


Tworzenie szablonu strony WWW ...................................................................................69
Dodawanie elementw dokumentu HTML ................................................................69
DTD ............................................................................................................................71
Element komentarza..........................................................................................................72
Polskie litery......................................................................................................................73
Przykad gotowego szablonu strony WWW.........................................................................73
Nagwek dokumentu .......................................................................................................74
Tytu strony.................................................................................................................74
Element <base>...........................................................................................................75
Element <meta> ..........................................................................................................75
Gwna cz dokumentu..................................................................................................77
Wprowadzanie tekstu akapitu .....................................................................................78
Element <br /> ............................................................................................................79
Zapisywanie, testowanie i sprawdzanie zgodnoci kodu stron WWW.............................81
Zapisywanie strony .....................................................................................................81
Testowanie strony .......................................................................................................81
Sprawdzanie zgodnoci kodu rdowego strony.......................................................82
Podsumowanie ..................................................................................................................83

Cz II

Projektowanie stron WWW .............................................85

Rozdzia 5. Formatowanie tekstu ....................................................................... 87


Organizowanie strony .......................................................................................................87
Dodawanie nagwkw...............................................................................................87
Linie poziome .............................................................................................................88
Formatowanie tekstu .........................................................................................................89
Elementy stylw fizycznych .......................................................................................90
Elementy stylw logicznych .......................................................................................91
Elementy stylu blokw tekstu ...........................................................................................94
Element <pre>.............................................................................................................94
Tworzenie tabel za pomoc elementu <pre> ..............................................................95
Element <blockquote> ................................................................................................96
Element <address>......................................................................................................98
Zaznaczanie zmian za pomoc elementw <ins> oraz <del>.....................................99

Wykorzystanie list na stronie ..........................................................................................100


Listy numerowane i wypunktowane .........................................................................101
Listy definicji ............................................................................................................103
Podsumowanie ................................................................................................................104

Rozdzia 6. Dodawanie grafiki .......................................................................... 105


Obrazki na stronach WWW ............................................................................................105
Jakie obrazki moesz wstawia na stronach WWW? ...............................................106
Jakie obrazki powiniene uywa? ...........................................................................107
Tworzenie i konwersja formatu obrazkw .........................................................................109
Paint Shop Pro...........................................................................................................109
Element <img />..............................................................................................................112
Alternatywny tekst ....................................................................................................114
Wyrwnywanie tekstu i obrazkw............................................................................114
Obrazki wyrwnane do prawego i lewego marginesu..............................................115
Definiowanie wymiarw obrazka na stronie ............................................................116
Podsumowanie ................................................................................................................117

Rozdzia 7. Tworzenie aczy hipertekstowych.................................................... 119


Zasada funkcjonowania hiperczy .................................................................................119
Uniform Resource Locator .......................................................................................119
Bezwzgldne i wzgldne adresy URL ......................................................................120
Element <base>...............................................................................................................122
Tworzenie hiperczy ......................................................................................................123
Wewntrzne hipercza do wybranych miejsc na stronie .........................................124
Umieszczanie obrazkw w hiperczach ..................................................................126
Tworzenie specjalnych hiperczy ..................................................................................127
Tworzenie hipercza do poczty elektronicznej........................................................127
Tworzenie hipercza do serwera FTP......................................................................128
Serwery Gopher ........................................................................................................129
Hipercza do grup dyskusyjnych.............................................................................130
Hipercza do serwerw Telnet ................................................................................131
Otwieranie stron WWW w nowym oknie przegldarki oraz automatyczne
adowanie stron WWW ..................................................................................................131
Otwieranie stron WWW w nowym oknie przegldarki.............................................131
Automatyczne adowanie stron WWW ....................................................................132
Podsumowanie ................................................................................................................133

Rozdzia 8. Podstawy tworzenia tabel ............................................................... 135


Tworzenie tabeli..............................................................................................................135
Element <table> ........................................................................................................136
Tytu oraz opis tabeli ................................................................................................138
Wiersze tabeli............................................................................................................139
Elementy komrki tabeli...........................................................................................141
czenie komrek tabeli ...........................................................................................142
Kolory ta komrek i wierszy tabeli..........................................................................143
Dodatkowe atrybuty tabeli ..............................................................................................144
Atrybut width ............................................................................................................145
Atrybuty align oraz border........................................................................................147
Atrybuty cellpadding oraz cellspacing......................................................................148
Podsumowanie ................................................................................................................149

Rozdzia 9. Zaawansowane projektowanie ukadu tabel na stronie.................... 151


Zasady projektowania ukadu tabel.................................................................................151
Wykorzystanie obrazkw w tabelach .......................................................................153
Zagniedanie tabel ..................................................................................................154

Kurs tworzenia stron internetowych


Grupowanie kolumn i wierszy ........................................................................................158
Grupowanie wierszy tabeli .......................................................................................159
Grupowanie kolumn..................................................................................................161
Wywietlanie wybranych krawdzi obramowania tabeli................................................166
Przykady wykorzystania tabel do projektowania ukadu stron WWW .........................168
Strona WWW o ukadzie wierszowym.....................................................................168
Strona WWW o ukadzie kolumnowym ...................................................................170
Podsumowanie ................................................................................................................174

Rozdzia 10. Arkusze stylw, czcionki oraz znaki specjalne................................. 175


Arkusze stylw................................................................................................................175
Co to s arkusze stylw?...........................................................................................176
Dlaczego warto uywa arkuszy stylw? .................................................................176
Kaskadowe arkusze stylw i XHTML......................................................................177
Elementy zastpowane przez arkusze stylw ...........................................................178
Tworzenie arkuszy stylw...............................................................................................179
Atrybut style..............................................................................................................180
Element <style>........................................................................................................180
Tworzenie specjalnych klas ......................................................................................182
Element <span> ........................................................................................................183
Element <div>...........................................................................................................184
czenie kontra osadzanie ........................................................................................186
Waciwoci i style..........................................................................................................187
Style tekstu................................................................................................................187
Waciwoci czcionek...............................................................................................188
Waciwoci ta .........................................................................................................190
Waciwoci elementw blokowych.........................................................................191
Style hiperczy i obiektw.......................................................................................194
Pierwsza litera i pierwszy wiersz..............................................................................194
Specjalne style tabel..................................................................................................195
Znaki specjalne................................................................................................................196
Podsumowanie ................................................................................................................198

Rozdzia 11. Zaawansowane waciwoci obrazkw oraz mapy obrazkowe .......... 199
Poprawianie wygldu obrazkw .....................................................................................199
Optymalizacja obrazkw ..........................................................................................200
Kompresja obrazkw i kodowanie progresywne......................................................201
Przezroczysto ta obrazka ......................................................................................202
Tworzenie animowanych obrazkw................................................................................204
Jasc Animation Shop.................................................................................................205
Wykorzystanie map obrazkw ........................................................................................206
Tworzenie map obrazkw dziaajcych po stronie klienta............................................206
Dodawanie atrybutu usemap do elementu <img /> ..................................................207
Elementy <map> oraz <area />.................................................................................207
Wykorzystanie map dziaajcych po stronie serwera ...............................................209
Podsumowanie ................................................................................................................210

Cz III Tworzenie witryny internetowej.....................................211


Rozdzia 12. Tworzenie witryn internetowych z wykorzystaniem ramek................ 213
Zalety i wady wykorzystania ramek................................................................................213
Co to s ramki? .........................................................................................................214
Jakie s wady ramek?................................................................................................215
Kiedy powiniene uywa ramek?............................................................................215

Tworzenie ramek.............................................................................................................216
Tworzenie dokumentu ukadu ramek........................................................................217
Elementy <frame /> oraz <noframes> ......................................................................218
Przypisywanie nazw do ramek oraz definiowanie ramek docelowych ....................219
Atrybuty elementu <frame /> ...................................................................................222
Zagniedanie elementw <frameset> .....................................................................222
Zaawansowane funkcje ramek ........................................................................................223
Specjalne wartoci atrybutu target oraz usuwanie ramek .........................................224
Wywietlanie witryny bez ramek..............................................................................225
Element <iframe> .....................................................................................................227
Podsumowanie ................................................................................................................228

Rozdzia 13. Dodawanie obiektw multimedialnych i apletw Javy ....................... 229


Wprowadzenie do technologii multimedialnych.............................................................229
Dlaczego warto docza obiekty multimedialne? ...................................................230
Formaty plikw multimedialnych.............................................................................231
czenie obiektw kontra osadzanie ........................................................................232
Dodawanie obiektw multimedialnych do stron WWW ................................................234
Dodawanie obiektw za pomoc hiperczy.............................................................234
Osadzanie obiektw multimedialnych......................................................................237
Osadzanie obiektw QuickTime...............................................................................238
Osadzanie obiektw Windows Media ......................................................................240
Osadzanie filmw RealMedia...................................................................................242
Animacje Flash .........................................................................................................243
Osadzanie apletw Javy ..................................................................................................244
Aplety Javy ...............................................................................................................244
Dodawanie apletw za pomoc elementu <object>..................................................245
Podsumowanie ................................................................................................................245

Rozdzia 14. Projektowanie ukadu caej witryny za pomoc arkuszy stylw ........ 247
Arkusze stylw obowizujce w caej witrynie ..............................................................247
Przykadowa witryna ................................................................................................248
Planowanie stylw ....................................................................................................250
Korzyci z wykorzystania arkuszy stylw................................................................252
Uatwienia dostpu konfigurowane za pomoc arkuszy stylw .....................................254
Kwestie midzynarodowe ...............................................................................................256
lang oraz <q> ............................................................................................................256
Kierunki wywietlania tekstu....................................................................................257
Podsumowanie ................................................................................................................257

Cz IV Dodawanie elementw interaktywnych do stron WWW ..259


Rozdzia 15. Projektowanie formularzy ............................................................... 261
Podstawy dziaania formularzy .......................................................................................261
Element <form> ........................................................................................................262
Inne atrybuty elementu <form> ................................................................................263
Tworzenie formularza .....................................................................................................264
Wielowierszowe pola tekstowe.................................................................................264
Element <input> .......................................................................................................266
Tworzenie menu........................................................................................................272
Przykadowy formularz.............................................................................................274
Projektowanie ukadu graficznego formularzy ...............................................................276
Zasady projektowania ukadu formularzy ................................................................277
Akapity, podziay wiersza oraz linie poziome..........................................................277
Linie poziome ...........................................................................................................278
Wykorzystanie akapitw...........................................................................................279

Kurs tworzenia stron internetowych


Wykorzystanie innych elementw do formatowania formularza ...................................281
Wykorzystanie list do formatowania formularzy .....................................................282
Wykorzystanie tabel w formularzach .......................................................................283
Tworzenie struktury formularzy ...............................................................................283
Uatwienia dostpu: etykiety i klawisze skrtu ........................................................285
Podsumowanie ................................................................................................................286

Rozdzia 16. Skrypty CGI ................................................................................... 287


Co to jest CGI?................................................................................................................287
Jzyki pisania skryptw CGI ....................................................................................288
Przykadowy skrypt CGI...........................................................................................289
Wywoywanie skryptw CGI ...................................................................................290
Zasada dziaania skryptw ..............................................................................................291
Odbieranie danych z formularza...............................................................................291
Przesyanie danych formularza za pomoc poczty elektronicznej ...........................293
Generowanie odpowiedzi..........................................................................................295
Wykorzystywanie gotowych skryptw ...........................................................................295
Umieszczanie gotowych skryptw na serwerze WWW .............................................296
Tworzenie wasnych skryptw .................................................................................299
Podsumowanie ................................................................................................................300

Rozdzia 17. Wprowadzenie do JavaScriptu ......................................................... 301


Co to jest JavaScript? ......................................................................................................301
Zwizek pomidzy jzykiem JavaScript i Java ........................................................302
JavaScript kontra VBScript.......................................................................................304
Zasada dziaania skryptw umieszczanych w dokumentach HTML........................304
Dodawanie skryptw do dokumentw HTML................................................................305
Element <script> i ukrywanie skryptu......................................................................305
XHTML Strict kontra XHTML Transitional............................................................307
Deklaracja jzyka skryptowego w elemencie <meta>
oraz wykorzystanie elementu <noscript>...............................................................308
Przykad Witaj wiecie!.........................................................................................309
Tworzenie funkcji JavaScriptu........................................................................................310
Deklarowanie funkcji................................................................................................311
Wywoania funkcji i zwracana warto wyjciowa funkcji......................................312
Przykad wywoania funkcji .....................................................................................314
Wykorzystanie zmiennych ..............................................................................................315
Nazwy zmiennych.....................................................................................................316
Operacje przeprowadzane na zmiennych..................................................................316
Zwikszenie i zmniejszanie wartoci zmiennych .....................................................317
Tablice.......................................................................................................................318
Kontrolowanie przebiegu wykonywania skryptu............................................................319
Operatory porwnywania..........................................................................................320
Instrukcja warunkowa ifelse .................................................................................321
Instrukcje warunkowe ptli.......................................................................................322
Przerwanie i wznowienie wykonywania ptli...........................................................323
Wykorzystanie ptli w operacjach na tablicach........................................................324
Obiekty w JavaScripcie...................................................................................................325
Tworzenie nowych obiektw....................................................................................326
Metody ......................................................................................................................327
Wbudowane obiekty JavaScirptu..............................................................................328
Podsumowanie ................................................................................................................332

Rozdzia 18. JavaScript i dane wprowadzane przez uytkownika .......................... 333


Zdarzenia JavaScriptu .....................................................................................................333
Rodzaje procedur obsugi zdarze ............................................................................335
Sowo kluczowe this .................................................................................................336
Wprowadzenie do obiektowego modelu dokumentu ......................................................337
Zasig obiektw i wykorzystanie wskanikw obiektw.........................................339
Wykorzystanie nadrzdnych obiektw modelu DOM..............................................340
JavaScript i formularze HTML .......................................................................................345
Obiekt formularza .....................................................................................................345
Sprawdzanie poprawnoci danych wprowadzonych w formularzu
za pomoc JavaScriptu ...........................................................................................346
Przetwarzanie danych formularza za pomoc JavaScriptu .......................................350
Wykorzystanie JavaScriptu do adowania nowych stron WWW i obsugi ramek..........353
Automatyczne adowanie wybranej strony WWW...................................................354
Menu nawigacyjne utworzone za pomoc JavaScriptu ..............................................355
JavaScript i ramki .....................................................................................................356
Podsumowanie ................................................................................................................360

Rozdzia 19. Dynamiczny HTML.......................................................................... 363


Co to jest Dynamiczny HTML? ......................................................................................363
Obiektowy model dokumentu w aspekcie DHTML-a..............................................364
Zgodno przegldarek .............................................................................................364
Rozmieszczanie elementw za pomoc arkuszy stylw...........................................365
Podmienianie elementw: zmiana elementw bez klikania mysz ................................365
Podmienianie obrazkw............................................................................................366
Zdalne podmienianie obrazkw................................................................................367
Wczeniejsze adowanie podmienianych obrazkw .................................................370
Arkusze stylw i warstwy ...............................................................................................371
Podstawowe waciwoci arkuszy stylw definiujce rozmieszczanie
elementw na stronie WWW .................................................................................371
Nachodzenie na siebie elementw i waciwo z-index .........................................374
Zagniedanie elementw rozmieszczanych za pomoc arkuszy stylw.................378
Rozmieszczanie wzgldne ........................................................................................379
Rozmieszczanie dynamiczne i warstwy..........................................................................380
Tworzenie warstw za pomoc arkuszy stylw..........................................................381
Rozmieszczanie dynamiczne ....................................................................................383
Ukrywanie warstw ....................................................................................................385
Definiowanie warstw dla przegldarki Netscape 4.x................................................389
Warstwa wewntrzwierszowa Netscapea................................................................391
Wykorzystanie warstw Netscapea w skryptach.......................................................391
Przykad DHTML-a niezalenego od wersji przegldarki uytkownika ........................394
Wykorzystanie interfejsw programistycznych API ................................................399
Dynamiczna zmiana waciwoci arkuszy stylw i klas.................................................399
Zmiana waciwoci stylu za pomoc JavaScriptu ...................................................400
Klasy dynamiczne i identyfikatory ...........................................................................402
Podsumowanie ................................................................................................................403

Cz V

Narzdzia wspomagajce
projektowanie witryn internetowych..............................405

Rozdzia 20. Edytory graficzne ........................................................................... 407


Netscape Composer.........................................................................................................407
Skd go pobra?........................................................................................................408
Zalety programu Composer ......................................................................................408

10

Kurs tworzenia stron internetowych


Saboci programu Composer ...................................................................................409
Przykad wykorzystania podstawowych opcji ..........................................................409
Adobe GoLive .................................................................................................................411
Skd go pobra?........................................................................................................412
Zalety programu GoLive...........................................................................................412
Wady programu GoLive ...........................................................................................413
Przykad wykorzystania podstawowych opcji ..........................................................414
Macromedia Dreamweaver .............................................................................................415
Skd go pobra?........................................................................................................416
Zalety programu Dreamweaver ................................................................................416
Wady programu Dreamweaver .................................................................................419
Przykad wykorzystania podstawowych opcji ..........................................................419
Microsoft FrontPage 2002...............................................................................................421
Skd go pobra?........................................................................................................421
Zalety FrontPagea....................................................................................................421
Wady FrontPagea ....................................................................................................423
Przykad wykorzystania podstawowych opcji ..........................................................423
Podsumowanie ................................................................................................................424

Rozdzia 21. Forum dyskusyjne, chaty i inne elementy


rozszerzajce funkcje stron WWW .................................................. 427
Tworzenie i administrowanie forum dyskusyjnym.........................................................427
Rodzaje forw dyskusyjnych....................................................................................428
Wybr forum umieszczanego na wasnym serwerze................................................429
Instalowanie forum dyskusyjnego na wasnym serwerze WWW.............................431
Forum dyskusyjne uruchamiane na zewntrznym serwerze WWW ........................432
Dodawanie do witryny chata...........................................................................................434
Liczniki odwiedzin i statystyki witryny ..........................................................................437
Sprawdzanie statystyk serwera WWW.....................................................................437
Dodawanie licznikw odwiedzin..............................................................................438
Server-side includes ........................................................................................................439
Podsumowanie ................................................................................................................441

Rozdzia 22. Publikowanie stron WWW w Internecie........................................... 443


Wybr waciwego serwera WWW ................................................................................443
Wykorzystanie darmowych serwerw WWW................................................................445
America Online Hometown ......................................................................................446
Yahoo! GeoCities......................................................................................................446
Lycos Tripod.............................................................................................................447
Usugi e-commerce .........................................................................................................448
Yahoo! Store .............................................................................................................448
Catalog.com ..............................................................................................................448
Oracle Small Business ..............................................................................................449
Miva Merchant..........................................................................................................450
Podsumowanie ................................................................................................................450

Dodatki .......................................................................................453
Dodatek A Leksykon polece XHTML i CSS ..................................................... 455
Elementy dokumentu XHTML-a ....................................................................................455
Deklaracja DTD ........................................................................................................455
Element <html> ........................................................................................................456
Element <head> ........................................................................................................456
Element <body>........................................................................................................457
Element komentarza..................................................................................................457

Arkusze stylw i skrypty.................................................................................................458


Element <script>.......................................................................................................458
Element <noscript>...................................................................................................458
Element <style> ........................................................................................................458
Atrybuty pomocnicze arkuszy stylw i atrybuty ustawie midzynarodowych ......459
class...........................................................................................................................459
id ...............................................................................................................................459
style ...........................................................................................................................459
dir ..............................................................................................................................460
lang............................................................................................................................460
Formatowanie tekstu i elementw blokowych................................................................460
Formatowanie bloku tekstu.......................................................................................460
Formatowanie stylu tekstu ........................................................................................461
Tworzenie list............................................................................................................463
Obrazki, hipercza, aplety Javy i plug-iny.....................................................................464
Dodawanie obrazkw................................................................................................465
Dodawanie hiperczy...............................................................................................465
Mapy obrazkw ........................................................................................................466
Dodawanie obiektw multimedialnych ....................................................................468
Aplety Javy ...............................................................................................................468
Tworzenie tabel ...............................................................................................................468
Tworzenie dokumentu ukadu ramek..............................................................................471
Tworzenie formularzy .....................................................................................................474
Element <form> ........................................................................................................474
Element <textarea> ...................................................................................................474
Element <input /> .....................................................................................................475
Element <select>.......................................................................................................476
Arkusze stylw................................................................................................................477

Skorowidz...................................................................................... 481

Rozdzia 2.

Krtki kurs tworzenia


stron WWW
W rozdziale 1., Podstawowe zasady dziaania sieci WWW, wspomniaem o kilku
zagadnieniach, ktre zostan szerzej omwione w tym rozdziale. S to arkusze stylw
i ich rola na stronach WWW. W wiecie projektowania stron WWW toczy si odwieczna
walka midzy dwiema rnymi strategiami przedstawiania stron WWW projektowania
zorientowanego na ukad graficzny stron WWW lub projektowania od strony organizacyjnej. W XHTML-u zagadnienie to zostao w znacznym stopniu uporzdkowane,
poprzez oddzielenie w dokumencie HTML projektu organizacyjnego od wizualnego,
dziki czemu nieco atwiej jest zaprojektowa efektownie wygldajce strony, ktre
jednoczenie mog wsppracowa z rnorodnymi aplikacjami i urzdzeniami. Ten
rozdzia przedstawia zalety wykorzystania tej strategii projektowania stron WWW oraz
skutki, jakie to ze sob niesie.

Podstawowe zasady
projektowania stron WWW
Projektowanie stron WWW odbywa si na rnych paszczyznach, poczynajc od
planowania pojedynczych stron WWW, a po projektowanie caej witryny, skadajcej
si z rnych, poczonych ze sob stron WWW. Rozpocznijmy od projektowania
pojedynczej strony czyli zastanwmy si, jak powinna ona wyglda oraz jakich
naley unika bdw, zwizanych ze stawianiem pierwszych krokw w wiecie projektowania stron WWW. W tym punkcie omwimy podstawowe reguy projektowania
stron WWW:
 Teori lec u podstaw XHTML-a i arkuszy stylw.
 Organizowanie strony zgodnie z logik HTML-a i XHTML-a.

38

Cz I Wprowadzenie do wiata stron WWW


 Oddzielanie zawartoci strony od jej projektu graficznego.
 Wykorzystanie obrazkw, obiektw multimedialnych i interaktywnych.

Pod koniec tego punktu omwimy kilka przykadw stron WWW i rozpatrzymy zalety
ich projektu.

Teoria projektowania stron WWW


HTML zosta stworzony w celu rozpowszechniania naukowych i akademickich informacji w Internecie, ktry pocztkowo mia form projektu rzdowego i akademickiego.
HTML nastpnie stopniowo stawa si jzykiem tworzenia wielu rnych projektw
przeprowadzanych w sieci WWW wykorzystywany jest midzy innymi w celach
edukacyjnych, rozrywkowych, a take czysto komercyjnych. HTML nie zosta tak
naprawd zaprojektowany, by sprosta tym wszystkim zadaniom, zwaszcza przy tworzeniu atrakcyjnie graficznych stron. Dlatego te, twrcy przegldarek WWW, na przykad Netscape Navigatora i Internet Explorera, dodawali wasne, niestandardowe znaczniki HTML-a, sprytnie dostosowujc specyfikacj HTML-a do tworzenia atrakcyjnych
graficznie stron.
Cho nie stanowio to problemu dla projektantw stron WWW i twrcw przegldarek,
nie zawsze byo to zgodne z intencjami organizacji W3C, ktra opracowuje i zarzdza
standardami dla sieci WWW. By moe, jeszcze waniejsza okazaa si kwestia zgodnoci z XML-em, nastpn generacj jzykw znacznikw, ktra w midzyczasie skupia
zainteresowanie caego przemysu komputerowego.
W cigu ostatnich kilku lat, HTML zosta przebudowany jako XHTML i powrci do
swoich korzeni organizowania i rozpowszechniania informacji, zamiast ich upikszania.
Kwestia adnego wygldu stron WWW zostaa oddana technologii nazywanej arkuszami
stylw, o czym wspomniaem w rozdziale 1. Innymi sowy, XHTML znw oddziela
sfer organizacyjn strony od jej wygldu, zgodnie z oryginalnymi zaoeniami HTML-a.
Co to oznacza dla autorw stron WWW?
Oznacza to, e zanim rozwaysz form swojego projektu strony WWW, musisz najpierw
zaplanowa jego funkcj. Cho zaprojektowanie ukadu graficznego strony przed zaplanowaniem jej zawartoci moe wydawa si lepszym rozwizaniem, nie jest to waciwe
podejcie. XHTML skupia si gwnie na organizowaniu i przekazywaniu informacji,
wic jest to lepsza strategia nauki tworzenia stron WWW.
Nie oznacza to jednak, e strony nie mog posiada atrakcyjnego wygldu. Za pomoc
XHTML-a mona jak najbardziej tworzy rozbudowane graficznie strony, ktre bd jednak take prawidowo przedstawiane w przegldarkach, ktre nie pracuj w trybie graficznym na przykad w telefonach komrkowych czy nawet przegldarkach przedstawiajcych strony WWW tylko w formie dwikowej. Za pomoc dobrze zorganizowanej
i zgodnej z XHTML-em strony moesz osign ten cel, jednoczenie zachowujc atrakcyjny graficznie projekt strony, ktry bdzie wywietlany w przegldarkach graficznych.

Organizowanie stron WWW


Poszczeglnym stronom danej witryny warto nada spjny charakter zanim utworzysz
pojedyncze strony, ktre bdziesz chcia poczy pniej w jedn witryn, musisz zaprojektowa najpierw ca organizacj tej witryny. Kwesti t omwimy w kolejnych
punktach tego rozdziau.
Przy projektowaniu kadej strony WWW naley uwzgldni kilka fundamentalnych
zasad. Strony WWW mog si bardzo rni od siebie, w zalenoci od wybranego
sposobu organizacji przedstawianego materiau. Mona utworzy na przykad bardzo
prost stron, skadajc si tylko z akapitw tekstu i nagwkw. W Internecie bardzo
popularne s take bardziej skomplikowane strony, publikowane w formie zblionej
do elektronicznego biuletynu. Oczywicie, niektre strony mog nie posiada adnej
dostrzegalnej formy organizacji, lecz naley oczywicie unika tego jak ognia.
Poniej przedstawiam kilka uytecznych wskazwek:
 Zachowaj prostot strony cho dostpnych jest wiele zaawansowanych

technologii obrazki, dwiki, video i animacje powiniene wykorzystywa


je tylko wtedy, kiedy speniaj zaoone cele funkcjonalne strony.
 Utwrz projekt zorientowany na zawarto strony twoja strona

powinna gwnie przyciga uwag uytkownikw swoj zawartoci


i przekazywa j najszybciej, jak tylko to moliwe. Oznacza to uywanie
nagwkw, tekstu wyrnionego i hiperczy, ktre uatwiaj czytelnikowi
szybkie zapoznanie si z prezentowanymi informacjami.
 Podziel zawarto strony uywajc nagwkw, list wypunktowanych

i innych elementw wyrniajcych, moesz podzieli dugi tekst na kilka


czci, uatwiajc czytelnikowi jego odczytanie. Dodawanie obrazkw
i linii dzielcych tekst take uatwia odczytanie zawartoci strony.
 Zachowaj odpowiedni rozmiar strony kolejn kwesti jest podjcie decyzji,

kiedy naley zakoczy jedn stron i przej do projektowania nastpnej.


Strony, ktre trzeba przewija w nieskoczono, szybko trac zainteresowanie
uytkownika, a poza tym moe ju zniechci go sam fakt dugiego czasu
adowania strony. Zbyt krtkie strony mog take by zniechcajce,
poniewa aby zapozna si z prezentowanymi informacjami, uytkownicy
bd musieli cigle klika na hiperczach do nastpnych stron witryny.
Podsumowujc, warto pamita, e osoby odwiedzajce twoj witryn oczekuj uytecznych stron, dostarczajcych wanych informacji lub zapewniajcych dobr rozrywk.
Jednoczenie internauci nie lubi przegldania dugich stron, wic warto podzieli ich
zawarto za pomoc poziomych linii, nagwkw, tekstu wyrnionego i innych podobnych elementw (zobacz rysunek 2.1). Pamitaj te, e nie wszyscy twoi uytkownicy
uywaj przegldarek graficznych. Jeli zachowasz konwencjonaln organizacj, zgodn
z rekomendacj XHTML-a, bdziesz mg tworzy atrakcyjnie graficznie strony, ktre
jednoczenie bd mogy zosta odczytane w przegldarkach tekstowych lub przegldarkach przeznaczonych dla osb niewidomych.

Cz I Wprowadzenie do wiata stron WWW

40
Rysunek 2.1.
Z lewej strony
przedstawiona
jest jednolita strona
tekstu, a z prawej
ta sama strona
podzielona
za pomoc
nagwkw i list
wypunktowanych

Zanim rozpoczniesz tworzenie stron swojej witryny, powiniene wybra najlepsz


form prezentowania wybranego materiau. Moesz na przykad zorganizowa strony
w formie zblionej do tradycyjnego ukadu drukowanych publikacji, takich jak czasopisma lub gazety. Na przykad, w tej ksice staramy si przycign uwag czytelnikw
poprzez logiczne zorganizowanie stron, za pomoc wyrnianych punktw w ramach
danego tematu i podziau prezentowanego materiau za pomoc obrazkw. Podobnie
moesz rwnie zorganizowa swoj witryn, wykorzystujc dodatkowo zalety hiperczy i elementw multimedialnych.
Gazety wykorzystuj do przekazywania informacji rne poziomy nagwkw i pionowe
kolumny tekstu, a take obrazki, ktre s umieszczane obok tekstu. Podobnie rwnie
moesz zorganizowa swoje strony WWW (zobacz rysunek 2.2). Wiele witryn internetowych wykorzystuje taki schemat ukadu, midzy innymi wikszo internetowych
wyda gazet i magazynw, na przykad Gazeta Wyborcza (http://www.gazeta.pl), Rzeczpospolita (http://www.rzeczpospolita.pl) lub Polityka (www.polityka.onet.pl). Na gwnej
stronie witryny informacyjnej znajduj si najczciej skrty wiadomoci oraz poczenia prowadzce do penych artykuw.
Rysunek 2.2.
Strona WWW
zorganizowana
w formie biuletynu
jest podzielona
na wiersze i kolumny

Moesz nawet zorganizowa swoj witryn w formie zblionej do ukadu katalogu


wysykowego. Jeli na amach witryny zajmujesz si sprzeda rnych towarw,
moesz wybra projekt stron zawierajcy obrazki, opisy, ceny, itp. Podobnie tutaj,
warto by projektowana witryna bya spjna, atrakcyjna i atwa do przegldania.

Obrazki i elementy multimedialne


Oprcz zwykego tekstu, na stronie WWW moesz take umieszcza obrazki i elementy
multimedialne. Elementy te, o ile s uywane z umiarem, pozwalaj znacznie wzbogaci i urozmaici zawarto projektowanych stron.
Na swoich stronach moesz wykorzysta dwa podstawowe rodzaje obrazkw obrazki
tworzone samodzielnie, lub istniejce ju fotografie. Obrazki tworzone samodzielnie,
w zalenoci od ich funkcji na stronie, mog mie rn form logo, banerw, wykresw lub rysunkw. Fotografie mona wykona za pomoc cyfrowych aparatw fotograficznych, przechwyci z tamy wideo, kamer cyfrowych lub zeskanowa. Obrazki s
wietnym sposobem na przycignicie uwagi uytkownikw, lecz take mog szybko
przekazywa rne kluczowe informacje.
Zauwa, e w gazetach i magazynach prezentowane informacje uzupeniane s czsto
rnymi elementami graficznymi dlaczego opisywa co, co mogoby zosta efektywnie przekazane za pomoc tabeli lub wykresu? Jeli posiadasz informacje, ktre mona
przedstawi w formie wykresu, moesz go najpierw utworzy w programie takim jak
Excel, a nastpnie eksportowa jako grafik moliw do publikacji na stronie WWW.
Eksportowanie obrazka polega po prostu na zapisywaniu go w innym formacie pliku.
Cho wikszo przegldarek WWW nie posiada funkcji wywietlania oryginalnych
wykresw Excela, mog one wywietla obrazki zapisywane w formacie GIF i JPEG.
Moesz wic eksportowa wykres do formatu obrazka JPEG lub GIF za pomoc
specjalnej funkcji danej aplikacji (najczciej jest to polecenie menu Plik/Eksport
lub File/Export w aplikacji z angielskojzycznym interfejsem uytkownika).

Obrazek dodany do strony WWW zwiksza jej przejrzysto i uatrakcyjnia jej projekt
graficzny. Dodatkowo, za pomoc obrazka mona szybciej przekaza rne informacje.
Rysunek 2.3 przedstawia przykad strony WWW, ktra wykorzystuje grafik do prezentowania informacji.
Obrazki s wietnym narzdziem witryn o charakterze katalogowym, witryn reklamowych, a take stron zawierajcych komunikaty prasowe. Naley si jednak wystrzega
umieszczania na stronach obrazkw, ktre nie przekazuj waciwie informacji lub
umieszczania zbyt duej iloci obrazkw na pojedynczej stronie WWW. Pamitaj
take, by unika obrazkw, ktre nie s zwizane z treci danej strony, poniewa
tylko wyduaj niepotrzebnie jej czas pobierania z serwera.
Elementy multimedialne stwarzaj jeszcze wiksze moliwoci prezentowania informacji, lecz ich wykorzystywanie niesie ze sob potencjalne problemy. Dodawanie klipw
wideo, elementw dwikowych lub animacji, pozwala znacznie uatrakcyjni witryn
internetow, lecz cen za to jest dugi czas pobierania stron WWW przez przegldark.

Cz I Wprowadzenie do wiata stron WWW

42
Rysunek 2.3.
Wykorzystanie
obrazka moe
uatrakcyjni ukad
graficzny strony,
a take zwikszy
jej czytelno
i funkcjoalno

Z wykorzystaniem obiektw multimedialnych zwizany jest jeszcze jeden problem.


Przegldarki WWW wymagaj dodatkowego oprogramowania do wywietlenia niektrych formatw multimedialnych. Jeli nie jest ono zainstalowane na komputerze
uytkownika, uytkownik bdzie zmuszony do pobrania tego programu z Internetu.
Temat ten zosta szerzej omwiony w rozdziale 13., Dodawanie obiektw multimedialnych i apletw Javy.

Poniewa czas pobierania stron z Internetu jest jednym z najwaniejszych czynnikw decydujcych o atrakcyjnoci witryny, obiekty multimedialne powinny by uywane tylko
wtedy, jeli jest to absolutne niezbdne do przekazania danej informacji. Najlepszym rozwizaniem jest zamieszczanie obiektw multimedialnych na stronach WWW w formie
dodatkowej opcji. Dziki temu, uytkownicy posiadajcy cze z Internetem o duej przepustowoci wci mog skorzysta z tych elementw, a uytkownicy o wolnym poczeniu nie s zmuszeni do dugiego wyczekiwania na ich zaadowanie na stronie WWW.
Przepustowo cza jest to ilo danych, ktra moe zosta przesana przez okrelone poczenie w jednostce czasu. cza o duej przepustowoci s dostpne
w wielu firmach, a take w domach, za porednictwem DSL, telewizji kablowej i innych
technologii. Jednak jest to wci rynek w fazie rozwoju, a wikszo uytkownikw
uywa tradycyjnych modemw podczonych do linii telefonicznej lub inne, wolniejsze
poczenia.

Dodawanie obiektw multimedialnych do stron WWW zostao szerzej omwione


w rozdziale 13. Obiekty multimedialne s bardzo kuszcym elementem dla autorw
stron WWW, lecz naley pamita, e mog by one istotn przeszkod w przegldaniu stron WWW przy wolniejszych poczeniach z Internetem.

Elementy interaktywne i skrypty


Strony WWW mona wykorzysta take do interakcji z uytkownikami. Odpowiednio
zaprojektowane witryny umoliwiaj odbieranie rnych informacji od uytkownikw,
a nie tylko zwyke publikowanie informacji sucych do pasywnego odbioru. Strony
WWW mona wykorzysta do uzyskiwania opinii uytkownikw, przyjmowania zamwie, a nawet do wzajemnej komunikacji midzy rnymi uytkownikami. W tym
celu mona wykorzysta midzy innymi rne elementy formularzy XHTML-a, na
przykad pola tekstowe, menu i pola wyboru. Elementy formularza s zblione do niektrych aplikacji zainstalowanych ju na twoim komputerze (na przykad okien dialogowych,
ktre su do zmiany konfiguracji programw), lecz mog by take wykorzystane
do pobierania informacji wprowadzanych przez osoby odwiedzajce twoje strony (zobacz rysunek 2.4).
Rysunek 2.4.
Elementy formularza
s uywane w celu
nawizywania
komunikacji
z uytkownikami

Elementy interaktywne (takie jak menu, przyciski lub inne elementy umoliwiajce
wybr opcji) mona take wykorzysta do uatwienia uytkownikom nawigacji wrd
stron swojej witryny. Wymaga to woenia wikszej pracy w tworzenie witryny, lecz
uatwia korzystanie z jej zasobw. Aby oywi statyczne strony, moesz nawet wykorzysta specjalne polecenia, ktre pozwol zaprogramowa okrelone czynnoci,
wywoywane po wskazaniu mysz rnych fragmentw strony.
Zakres wykorzystania elementw interaktywnych zwizany jest wci z podstawowym
zagadnieniem zwizanym z projektowaniem stron. Czy przyciski, menu i aktywne
elementy przekazuj dodatkow informacj? Czy uatwiaj nawigacj na danej stronie
lub wrd zasobw witryny? Jeli nie, prostsza strona moe okaza si lepszym rozwizaniem.

Cz I Wprowadzenie do wiata stron WWW

44

Jak powinna wyglda dobrze zaprojektowana strona?


Jak wic wyglda dobra strona? Niektre spord moich ulubionych stron posiadaj
bardzo skromny ukad graficzny i skupiaj si na zawartoci, zamiast na obrazkach
i obiektach multimedialnych. Rozwizanie to pozwala je przeglda za pomoc dowolnej przegldarki w dowolnym systemie komputerowym.
Przykadem takiej witryny s strony organizacji W3C, na amach ktrych prowadzone
s debaty zwizane z HTML-em i podobnymi specyfikacjami. Chocia witryna wprost
roi si od rnych informacji, jest podzielona logicznie za pomoc nagwkw, akapitw i hiperczy (zobacz rysunek 2.5).
Rysunek 2.5.
Witryna organizacji
W3C jest przykadem
wietnie
zorganizowanych
stron, wypenionych
du iloci
informacji.
(Na rysunku zostaa
przedstawiona
strona o adresie
http://www.w3.org/
MarkUp/)

Wikszo witryn internetowych nie jest projektowanych pod ktem przekazywania


tak duej iloci informacji, wic prawdopodobnie czciej bdziesz napotyka witryny
bardziej urozmaicone graficznie. Witryna internetowa dziennika Gazeta Wyborcza
jest dobrym przykadem atwego interfejsu nawigacyjnego i czytelnej prezentacji
materiaw, streszcze informacji i nagwkw prasowych. Wystarczy rzut okiem na
witryn, by zorientowa si, jaki materia zosta opublikowany i w jaki sposb zosta
zorganizowany. Gwna strona witryny Gazety Wyborczej, znajdujca si pod adresem
http://www.gazeta.pl, zostaa przedstawiona na rysunku 2.6.

Planowanie witryny
Przedstawilimy ju elementy, ktre definiuj dobr stron WWW. Czciej bdziesz jednak tworzy ca witryn, a nie tylko pojedyncz stron. Zanim jednak zabierzesz si za
tworzenie witryny, warto powici troch czasu na jej zaplanowanie. Sposb projektowania witryny wpywa na wiele rzeczy, na przykad na sposb projektowania pojedynczych stron WWW, ich zapisywanie na serwerze WWW, a nawet na kwesti doboru odpowiedniego projektu graficznego stron, zwaszcza przy korzystaniu z arkuszy stylw.

Rysunek 2.6.
Zauwa, e witryna
informacyjna Gazety
Wyborczej posiada
obrazki, lecz s one
uywane z umiarem
jako uzupenienie
prezentowanych
informacji

W tym punkcie rozwaymy kilka zagadnie, ktre naley wzi pod uwag w trakcie
planowania witryny:
 Kwesti odbiorcw twojej witryny i w jaki sposb wpywa ona na projekt

witryny.
 Rne opcje projektowania i tworzenia witryny.
 Elementy gwarantujce dobr witryn.

Odbiorcy twojej witryny


Prawdopodobnie najwaniejszym czynnikiem decydujcym o projekcie witryny s jej
odbiorcy, nie tylko z punktu widzenia tematw poruszanych na jej amach, lecz take
wyboru odpowiedniej technologii do prezentowania informacji. Powiniene take rozway, na ile dobrowolnie uytkownicy odwiedzaj twoj witryn i ile bd w stanie
znie, zanim j opuszcz.
Wikszo internetowych przedsiwzi takich jak magazyny internetowe, usugi
katalogowe i aplikacje internetowe musz by niezwykle starannie zaprojektowane
nie tylko od strony wizualnej, lecz take z punktu widzenia organizacji caej witryny.
Jest to spowodowane faktem, e odbiorcy tego typu witryn mog w kadej chwili j opuci i przej na jeden spord wielu innych konkurencyjnych serwisw. Jednym ze sposobw zachcenia uytkownikw do korzystania z twojej witryny (poza podpisaniem
kontraktu lub zaoferowaniem niezwykle konkurencyjnych cen) jest zaprojektowanie jej
spjnego i prostego ukadu. Powiniene take dooy wszelkich stara, aby jak najbardziej uatwi uytkownikom przegldanie stron twojej witryny i unika wszelkich rzeczy, ktre kazayby im czeka, wprawiaby ich w zakopotanie lub denerwoway.

Cz I Wprowadzenie do wiata stron WWW

46

Brzmi niewykonalnie? Aby twoja witryna bya przyjazna dla uytkownika, wykorzystaj
ponisze wskazwki:
 Zorganizuj swoj witryn Postaraj si uatwi swoim odbiorcom

odnajdywanie zamieszczonych informacji. Na przykad, jeli chciaby,


by twoi uytkownicy mogli skontaktowa si z tob za pomoc Internetu,
tradycyjnej poczty lub telefonu, utwrz cze do strony, ktra jasno przedstawia
te informacje, na przykad o nazwie Kontakt, Adres lub Telefon.
Jeli zamiecisz je w czci zatytuowanej Inne informacje lub O nas,
bdzie je nieco trudniej odnale. Kwestia organizacji witryny ma wpyw
take na inne rzeczy, na przykad na technik aktualizacji witryny.
 Skup si na nawigacji Projektowanie systemu nawigacji wrd zasobw

witryny idzie w parze z planowaniem jej organizacji. Mwic prociej,


konieczne jest utworzenie jasnego, logicznego systemu hiperpocze
do innych stron witryn najlepiej umieszczanego zawsze w tym samym
miejscu na stronach danej witryny. Nawigacja powinna by atwa
do opanowania i intuicyjna.
 Nie wytyczaj barier technologicznych Nie wymagaj od swoich

uytkownikw posiadania specjalnej technologii multimedialnej do nawigacji


wrd zasobw twojej witryny i odnajdywania podstawowych informacji.
Na przykad, jeli przegldanie wanych informacji zamieszczonych na twojej
witrynie odbywa si tylko za pomoc animacji Macromedia Flash, tracisz tym
samym spor grup swoich potencjalnych odbiorcw, zwaszcza jeli twoja
witryna nie jest nastawiona na przedstawianie zagadnie zwizanych
z nowoczesnymi technologiami.
 Pamitaj o swoich celach Jeli projektujesz swoj witryn dla okrelonej

grupy odbiorcw, powiniene rozway stopie ich wiedzy informatycznej


i wykorzystywane przez nich technologie. Im bardziej oglna jest tematyka
twojej witryny, tym prociej i bardziej przejrzycie powinna by zaprojektowana.
Jeli tworzysz witryn powicon tematyce gier komputerowych, jej odbiorcy
prawdopodobnie pozytywnie oceni du ilo umieszczanych wszdzie
animacji, dwikw i hiperpocze. Jeli z kolei projektujesz witryn
zwizan ze strategicznymi grami planszowymi, by moe warto byoby
rozway prostszy ukad witryny dla tej grupy odbiorw, ktra moe nie
posiada najnowszych technologii.
Jednym z najlepszych przykadw dobrze zorganizowanej, uytecznej i uniwersalnej
witryny jest serwis Yahoo! Jest to witryna o bardzo maych wymaganiach technologicznych, a jednoczenie posiadajca dobr organizacj oraz elementy przycigajce
uwag uytkownikw (zobacz rysunek 2.7).

Organizowanie witryny
Rozwaylimy ju zagadnienia zwizane z grup odbiorcw witryny. Nadszed czas
na podjcie decyzji o sposobie jej organizacji. Organizacja witryny zaley ju wycznie
od ciebie, lecz moemy omwi kilka oglnych zasad, ktre warto wzi pod uwag.

Rysunek 2.7.
Strony Yahoo!
posiadaj dobrze
zorganizowan,
bogat zawarto,
ktra jest wietnie
wywietlana
we wszystkich
rodzajach
przegldarek

Organizacja prostej witryny najprawdopodobniej nie bdzie zbyt skomplikowana. Jeli


posiadasz zamy pi rnych stron, moesz przechowywa je wszystkie w gwnym
katalogu swojego serwera WWW, a na kadej z nich moesz umieci hipercza do pozostaych stron. Na przykad, moe to by witryna agencji nieruchomoci, ktra zawiera
pi stron: stron gwn, stron z list domw na sprzeda, stron z informacjami o rejonie, w ktrym s sprzedawane nieruchomoci, stron o oprocentowaniu kredytw hipotecznych w wybranych bankach oraz stron informacyjn o samej agencji nieruchomoci.
Witryna tego typu jest atwa w organizacji, poniewa mona utworzy w grnej czci
kadej strony cza do wszystkich pozostaych stron witryny (zobacz rysunek 2.8).
Rysunek 2.8.
Prost witryn
moesz
zorganizowa,
tworzc cza
do wszystkich innych
stron witryny

Cz I Wprowadzenie do wiata stron WWW

48

Co mona jednak zrobi, jeli ta sama strona posiada hipercza do oddzielnych stron,
opisujcych kady z domw w ofercie agencji nieruchomoci? W danym momencie
moe by dostpnych zamy 10 15 domw na sprzeda, wic trudno byoby umieszcza u gry strony hipercza do kadej ze stron opisujcych te domy. Zamiast tego,
mona utworzy oddzieln stron, zawierajc hipercza do stron opisujcych oferty
domw na sprzeda.
Teraz organizacja naszej witryny, przedstawiona na rysunku 2.9, staa si nieco bardziej
skomplikowana.
Rysunek 2.9.
W miar
rozbudowy witryny,
jej organizacja staje
si coraz bardziej
skomplikowana

W tym momencie musisz rozpocz podejmowanie decyzji. Kada ze stron zawierajcych opis domw na sprzeda mogaby zawiera hipercza do pozostaych stron z opisami domw, lecz rozwizanie to utrudni w duszej perspektywie aktualizacj witryny.
Kada z tych stron mogaby take zawiera bezporednie hipercza do stron z informacjami o kontakcie z agencj nieruchomoci i informacjami o kredytach hipotecznych,
lecz nie jest to zbyt jasne rozwizanie z punktu widzenia uytkownikw.
Inny sposb mgby polega na zastosowaniu strategii witryny Yahoo!, polegajcej na
wywietleniu cieki hiperczy wiodcych do biecej strony bezporednio na danej
stronie (zobacz rysunek 2.10). Zauwa, e strona przedstawiona na tym rysunku zawiera
zarwno ciek hiperczy do biecej strony, jak i tradycyjn list hiperczy umieszczon u gry strony. Jeli ten ukad nawigacyjny bdzie konsekwentnie stosowany na
wszystkich stronach witryny, nawigacja wrd jej stron bdzie atwa i przyjemna.
W miar rozrastania si witryny i przybywania kolejnych stron bdziesz mg doskonali
dalej t strategi. Warto j rozway, zwaszcza biorc pod uwag, e jest z powodzeniem
stosowana na tak duych witrynach, jak Yahoo! czy About.com.

Projektowanie spjnego ukadu witryny


Wspominaem ju wiele razy o kwestii zachowania konsekwentnej organizacji witryny,
lecz jest to bardzo wane zagadnienie dziki konsekwentnemu ukadowi graficznemu
stron, uytkownik uzyskuje wraenie poruszania si w ramach spjnej logicznie witryny,
a konsekwentny interfejs witryny uatwia nawigacj wrd jej zasobw. Jeli nie bdziesz
trzyma si tej zasady, moesz atwo straci swoich uytkownikw.

Rysunek 2.10.
U gry strony
znajduje
si tradycyjne
menu nawigacyjne,
a pod nim cieka
hiperczy
do biecej strony

Pomijajc ju kwesti organizacji witryny, zachowanie konsekwencji w jej projektowaniu przynosi jeszcze dwojakie korzyci. Po pierwsze, dziki temu mona atwo zaprojektowa spjny, przejrzysty interfejs nawigacyjny. Dla wikszoci witryn oznacza
to tworzenie na kadej stronie podstawowych, tekstowych hiperczy nawigacyjnych,
nawet jeli na stronach tych nawigacja odbywa si take za pomoc obrazkw lub elementw multimedialnych.
Po drugie, konsekwentny ukad graficzny mona bardzo atwo zaprojektowa za pomoc arkuszy stylw. Arkusze stylw, omwione w rozdziale 10., Arkusze stylw,
czcionki oraz znaki specjalne i w rozdziale 14., Projektowanie ukadu caej witryny
za pomoc arkuszy stylw, umoliwiaj zdefiniowanie kroju czcionki, koloru i wielu
innych atrybutw odpowiedzialnych za styl wywietlanego na stronie tekstu, akapitw
i innych elementw. Arkusze stylw s bardzo przydatne w projektowaniu spjnego
ukadu graficznego witryny, poniewa mona wykorzysta jeden arkusz stylw dla
zaprojektowania caej witryny. Dziki temu, mona od razu atwo zaprojektowa schemat
graficzny witryny oraz jednoczenie zachowa zgodno ze standardem XHTML.
Dodatkowo zapewnia to zgodno projektowanych stron z rnorodnymi aplikacjami
i urzdzeniami. Tworzc strony na podstawie informacji przedstawionych w kolejnych
rozdziaach, pamitaj, e moesz zawsze nada im unikaln szat graficzn za pomoc
arkuszy stylw, omawianych w rozdziale 10.

Kierunki rozwoju HTML-a


Wspomniaem ju wczeniej, e XHTML zosta utworzony midzy innymi po to, aby
strony WWW mogy by odczytywane przez rnorodne aplikacje i urzdzenia. Jest
to jeden z waniejszych kierunkw rozwoju XHTML-a. W poczeniu z szersz obsug
arkuszy stylw w przegldarkach WWW, nowy standard uatwia komunikacj z wieloma
rnymi rodzajami urzdze, a take pozwala zachowa atrakcyjny ukad graficzny
stron. S to midzy innymi takie aplikacje i urzdzenia, jak przegldarki z uatwieniami

Cz I Wprowadzenie do wiata stron WWW

50

dostpu dla osb niepenosprawnych, komputery kieszonkowe, a nawet przegldarki


odczytujce zawarto strony i akceptujce wydawane gosowo polecenia.
Oprcz przestrzegania regu zdefiniowanych w tym standardzie, projektowanie stron
dostpnych dla szerokiego krgu odbiorcw wie si take z zastosowaniem rnych
innych narzdzi. W pewnym sensie tworzenie szeroko dostpnych i uytecznych witryn
internetowych wymaga zastosowania szczeglnego podejcia. Aby projektowane strony
byy rwnie prawidowo wywietlane w przegldarkach innych ni Internet Explorer
i Netscape Navigator, naley w nich wykorzysta pewne dodatkowe atrybuty.

Uatwienia dostpu
Najnowszy standard XHTML-a uatwia w rny sposb odczytywanie stron WWW
przez uytkownikw niepenosprawnych. Na przykad, element obrazka moe zawiera
take alternatywny tekst, ktry moe by wywietlany zamiast obrazka. (Temat ten zosta
omwiony w rozdziale 6., Dodawanie grafiki). Tekst ten moe zosta wykorzystany
przez przegldarki nie pracujce w trybie graficznym do przedstawienia opisu obrazka
(take w formie dwikowej). W okrelonych przypadkach moesz nawet utworzy
specjalne hipercza do duszego, wycznie tekstowego opisu obrazka, ktry moe
zosta wykorzystany przez osoby niewidome do zapoznania si z treci przekazywan
przez dany obrazek.
Take inne elementy XHTML oferuj opcje uatwienia dostpu. Na przykad, elementy
wykorzystywane do tworzenia formularzy na stronie WWW elementy menu, przyciskw wyboru i pl tekstowych teraz posiadaj dodatkowe funkcje uatwie dostpu.
Dziki temu, niepenosprawni uytkownicy wyposaeni w specjalne przegldarki mog
take korzysta z zasobw twojej witryny.
Najwaniejszym czynnikiem, decydujcym o uzyskaniu szerokiego krgu odbiorcw,
jest zaprojektowanie moliwie jak najbardziej prostych i logicznych stron WWW. Efekt
ten mona uzyska, stosujc nagwki, akapity, listy wypunktowane i inne elementy
pozwalajce wyrni zawarto strony na tle jej ukadu graficznego. Jeli przykadowo
umiecimy na stronie nawet zwyke elementy tabeli XHTML-a, pomagajce zaprojektowa ukad graficzny strony WWW, przegldarki nie pracujce w trybie graficznym
bd miay problemy z jej odczytaniem. Mniej skomplikowana strona WWW, posiadajca nagwki i akapity, bdzie moga by przegldana przez rne urzdzenia korzystajce z sieci WWW.

Ustawienia midzynarodowe
XHTML posiada kilka elementw i atrybutw, ktre uatwiaj projektowanie elastycznych stron dla midzynarodowej grupy odbiorcw. Na przykad, wiele elementw moe
korzysta z atrybutu , ktry umoliwia wybr jzyka uywanego do przedstawiania
okrelonego elementu. Atrybut ten moe zosta wykorzystany przez przegldarki do
zinterpretowania w okrelony sposb elementu strony lub wywietlenia go w odmienny
sposb. Atrybut ten, wraz z elementem  (ktry moe zosta wykorzystany do wywietlania cytowanego tekstu w rnych formatach, w zalenoci od zdefiniowanego
jzyka), zostan omwione w rozdziale 5., Formatowanie tekstu.

Innym aspektem midzynarodowych ustawie jest wykorzystanie aplikacji automatycznie tumaczcych twoje strony na inne jzyki. Generalnie, programy te osigaj
najlepsze rezultaty przy przetwarzaniu stosunkowo prostych zda. Aby uatwi innym
tumaczenie i odczytywanie swoich stron, powiniene si postara, by napisa je jak
najbardziej przejrzystym jzykiem. Staraj si uywa prostych zda i regu gramatycznych i unika zwrotw potocznych, metafor i sloganw. (Na przykad zdanie Nastaa
cisza jak makiem zasia. nie zostaoby tak dobrze przetumaczone, jak Stao si bardzo
cicho). Moesz nawet utworzy specjalne, uproszczone wersje stron witryny, zaprojektowane pod ktem dokonywania automatycznego tumaczenia. Przykadem witryn
oferujcych funkcje tumacze s:
 Google.com szczegy odnajdziesz na stronie

http://www.google.com/help/faq_translation.html,
 AltaVista.com oferuje usug BabelFish, dostpn na stronie

http://babelfish.altavista.com,
 FreeTranslations.com inny przykad witryny, ktra przetumaczy

prawie kad stron. Dostpna jest pod adresem


http://www.freetranslation.com/default.htm?tab=web.

Zgodno z rnymi przegldarkami


Zgodno projektowanych stron z rnymi rodzajami przegldarek dla autorw stron
WWW zawsze bya wielkim wyzwaniem, a take powodem czstych frustracji. Rne
przegldarki czasami odmiennie interpretuj polecenia lub mog oferowa wasne
elementy w miejsce elementw oferowanych przez standard XHTML-a. Cho obecnie
problem ten straci na znaczeniu, poniewa przegldarki bardziej stosuj si do oficjalnych
standardw, czasami bdziesz musia uy na stronie dwa rne elementy dajce ten
sam efekt, by bya ona poprawnie wywietlona przez rne przegldarki. Powiniene
take wyrobi u siebie zwyczaj testowania swoich stron w rnych przegldarkach, by
sprawdzi rnice w wywietlaniu zaprojektowanych stron. Wykorzystanie arkuszy
stylw i innych elementw moe wyeliminowa niektre problemy, lecz zawsze warto
o tym pamita. Temat ten bdzie stale poruszany w kolejnych rozdziaach.

Podsumowanie
W tym rozdziale zostay przedstawione podstawowe zasady projektowania stron i witryn
internetowych. Im prostsza bdzie zaprojektowana strona i jej ukad nawigacyjny, tym
bardziej bdzie ona dostpna dla szerokiego krgu odbiorcw. Temat ten obejmuje
waciwe zorganizowanie pojedynczych stron i caych witryn internetowych. Musisz
take rozway, w jaki sposb zaprojektowane strony bd wywietlane u wszystkich
twoich potencjalnych uytkownikw, take w przegldarkach nie pracujcych w trybie
graficznym lub przegldarkach interpretujcych strony jako tekst czytany, tekst zapisany
w alfabecie Braillea lub tumaczony na inne jzyki. Omwilimy tutaj take kilka
przykadw dobrze zorganizowanych witryn oraz kilka pomysw wartych naladowania.
W nastpnym rozdziale zostan przedstawione narzdzia do tworzenia dokumentw
na potrzeby sieci WWW i sposoby publikowania dokumentw w sieci WWW.

You might also like