Macromedia Dreamweaver 8 Z ASP, PHP I ColdFusion. Oficjalny Podręcznik

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. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Macromedia Dreamweaver
8 z ASP, PHP i ColdFusion.
Oficjalny podrcznik
Autor: Jeffrey Bardzell
Tumaczenie: Leszek Sagalara (wstp, rozdz. 1 8),
Marcin Rog (rozdz. 9 15)
ISBN: 83-246-0309-3
Tytu oryginau: Macromedia Dreamweaver 8 with
ASP, PHP and ColdFusion: Training from the Source
Format: B5, stron: 472
Stwrz dynamiczne witryny WWW za pomoc nowoczesnego narzdzia
Skonfiguruj rodowisko pracy i zainstaluj serwer WWW
Wykorzystaj moliwoci jzykw ASP, PHP i ColdFusion
Zastosuj jzyk SQL do przetwarzania danych
Macromedia Dreamweaver od dawna cieszy si uznaniem twrcw witryn WWW.
Gwne przyczyny popularnoci to przyjazne i atwe w obsudze rodowisko, moliwo
rcznej edycji kodu rdowego, a przede wszystkim liczne narzdzia usprawniajce
prac. Najnowsza wersja Dreamweavera, oznaczona symbolem 8, to jednak nie tylko
edytor stron WWW to take rozbudowane narzdzie programistyczne, pozwalajce na
tworzenie aplikacji internetowych w jzykach PHP, ASP i ColdFusion. Osoby stawiajce
pierwsze kroki w projektowaniu dynamicznych witryn WWW doceni bogat bibliotek
gotowych skryptw, zwanych behawiorami, a dowiadczeni projektanci swobod
twrcz, jak oferuje Dreamweaver.
Ksika Macromedia Dreamweaver 8 z ASP, PHP i ColdFusion. Oficjalny podrcznik
to podrcznik przedstawiajcy zasady tworzenia dynamicznych witryn WWW,
przygotowany przez instruktorw certyfikowanych w firmie Macromedia. Wykonujc
zaproponowane wiczenia, zbudujesz witryn WWW wykorzystujc wszystkie
najnowsze technologie internetowe ostatnie specyfikacje HTML i CSS, jzyki PHP,
ASP i ColdFusion oraz bazy danych. Dowiesz si, jak skonfigurowa rodowisko
robocze, stworzy wszystkie elementy witryny, opublikowa j na serwerze
i przeprowadzi aktualizacj.
Definiowanie stylw CSS dla statycznej witryny
Konfiguracja serwera WWW na lokalnym komputerze
Przekazywanie danych midzy stronami witryny
Obsuga formularzy na stronach WWW
Poczenie serwisu WWW z baz danych
Dynamiczne generowanie menu i list rozwijanych
Wyszukiwanie i filtrowanie danych
Obsuga logowania uytkownikw
Tworzenie mechanizmw zarzdzania treci witryny
Tchnij ycie w statyczne strony WWW, wykorzystujc Dreamweavera 8
Wstp .................................................................................................................................................................................................. 11
Lekcja 1. Przedstawiamy Newland Tours ........................................................................................................................... 21
Czego si nauczymy? ................................................................................................................................................. 23
Przewidywany czas .................................................................................................................................................... 23
Pliki lekcji ................................................................................................................................................................... 23
Definiowanie statycznej witryny .............................................................................................................................24
Tworzenie strony Kontakt z nami ......................................................................................................................29
Formatowanie strony Kontakt z nami ............................................................................................................... 33
Ocena witryny: kod ...................................................................................................................................................42
Ocena witryny: procesy biznesowe ......................................................................................................................... 45
Widoki na przyszo ................................................................................................................................................ 51
Czego si nauczylimy? ............................................................................................................................................. 54
Lekcja 2. Przygotowanie statycznych stron HTML i CSS ............................................................................................... 55

Pliki lekcji ................................................................................................................................................................... 56
Automatyzowanie zmian za pomoc funkcji Find and Replace ........................................................................ 57
Przedefiniowanie wygldu elementw HTML za pomoc CSS .......................................................................... 63
Tworzenie i stosowanie wasnych stylw CSS .......................................................................................................70
Tworzenie szablonu do wielokrotnego uytku .....................................................................................................77
Zwikszanie dostpnoci za pomoc niewidocznej nawigacji ............................................................................79
Czego si nauczylimy? ............................................................................................................................................. 83
Lekcja 3. Dynamiczne witryny WWW ................................................................................................................................... 85

Pliki lekcji ................................................................................................................................................................... 86
Podstawy dynamicznych witryn WWW .................................................................................................................87
Wybr technologii serwerowych .............................................................................................................................90
Zmiana witryny Newland Tours na witryn dynamiczn ................................................................................... 93
Praca na serwerze lokalnym .....................................................................................................................................94

Konfigurowanie rodowiska lokalnego dla IIS/ASP ............................................................................................94
Konfigurowanie rodowiska lokalnego dla ColdFusion ..................................................................................... 96
Konfigurowanie rodowiska lokalnego dla Apache/PHP ...................................................................................99
Praca na serwerze zdalnym ......................................................................................................................................113
Definiowanie witryny dynamicznej w programie Dreamweaver (wszyscy uytkownicy) ..............................114
Budujemy prost aplikacj dynamiczn ...............................................................................................................119
Czego si nauczylimy? ........................................................................................................................................... 129
Lekcja 4. Przesyanie danych midzy stronami ............................................................................................................ 131

Czego si nauczymy? ............................................................................................................................................... 132
Przewidywany czas ...................................................................................................................................................133
Pliki lekcji ..................................................................................................................................................................133
Poznajemy protok HTTP .....................................................................................................................................133
Pobieranie danych z adresu URL .......................................................................................................................... 135
Wysyanie danych za pomoc odnonikw ..........................................................................................................141
Umieszczanie i odczytywanie cookies .................................................................................................................. 145
Czego si nauczylimy? ............................................................................................................................................151
Lekcja 5. Wysyanie wiadomoci e-mail z formularza WWW ................................................................................. 153

Przewidywany czas .................................................................................................................................................. 154
Pliki lekcji ................................................................................................................................................................. 155
Wprowadzenie do usugi pocztowej SMTP ......................................................................................................... 155
Konfigurowanie systemu w celu wysyania wiadomoci e-mail przez SMTP ................................................. 155
Konfigurowanie serwera IIS w celu wysyania wiadomoci e-mail (uytkownicy ASP) ................................. 156
Konfigurowanie ColdFusion w celu wysyania wiadomoci e-mail ................................................................. 158
Pisanie kodu wysyajcego wiadomoci ................................................................................................................ 160
Obiekty, metody i waciwoci .............................................................................................................................. 160
Tworzenie formularzy WWW ............................................................................................................................... 167
Wysyanie wartoci formularza przez e-mail ....................................................................................................... 170
Walidacja formularza po stronie klienta ............................................................................................................. 173
Lekcja 6. Budujemy kalkulator cen wycieczek ............................................................................................................. 177

Pliki lekcji ................................................................................................................................................................. 178
Utworzenie strony ................................................................................................................................................... 179
MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Oficjalny podrcznik
Budujemy formularz ...............................................................................................................................................181

Zbieranie, przetwarzanie i wywietlanie danych ................................................................................................. 184
Walidacja po stronie serwera ..................................................................................................................................191
Tworzenie obszarw warunkowych ...................................................................................................................... 194
Tworzenie i zastosowanie wasnej klasy CSS ....................................................................................................... 197
Czego si nauczylimy? ...........................................................................................................................................200
Lekcja 7. Bazy danych w WWW ............................................................................................................................................ 201

Czego si nauczymy? ...............................................................................................................................................202
Pliki lekcji .................................................................................................................................................................202
Przyspieszony kurs obsugi baz danych ...............................................................................................................203
Wprowadzenie do obiektw zwizanych z bazami danych ..............................................................................203
Relacje .......................................................................................................................................................................206
Bazy danych w sieci WWW ....................................................................................................................................208
Bezpieczestwo baz danych a WWW ................................................................................................................... 210
Instalacja i uruchomienie MySQL .........................................................................................................................211
Instalacja i uruchomienie MySQL w OS X .......................................................................................................... 215
Instalacja bazy danych Newland na serwerze zdalnym ...................................................................................... 219
Przegld bazy danych Newland .............................................................................................................................220
Nawizywanie poczenia z baz danych .............................................................................................................224
Pobieranie zestawu rekordw i wywietlanie informacji z bazy danych .......................................................... 233
Lekcja 8. Kalkulator cen cig dalszy .......................................................................................................................... 239

Przewidywany czas ..................................................................................................................................................240
Pliki lekcji .................................................................................................................................................................240
Menu rozwijane wypeniane dynamicznie .......................................................................................................... 241
Filtrowanie zestaww rekordw ............................................................................................................................247
Skrypt korzystajcy z prawdziwych danych .........................................................................................................249
Dokumentowanie kodu za pomoc komentarzy ............................................................................................... 253
Lekcja 9. Filtrowanie i wywietlanie danych .................................................................................................................. 259

Pliki lekcji ................................................................................................................................................................. 261
Tworzenie strony pobierajcej dane od uytkownika ........................................................................................ 261
Dynamiczne generowanie adresw URL ............................................................................................................. 263
Przygotowanie strony z wynikami ........................................................................................................................272
SPIS TRECI
Wstawianie dynamicznej zawartoci strony ........................................................................................................274

Dynamiczne wywietlanie obrazw i formatowanie liczby ludnoci ..............................................................276
Pobieranie danych z tabel zewntrznych przy uyciu SQL ............................................................................... 281
Lekcja 10. Tworzenie strony zawierajcej opisy wyjazdw ................................................................................... 287

Pliki lekcji .................................................................................................................................................................289
Planowanie aplikacji ...............................................................................................................................................289
Tworzenie zestaww rekordw za pomoc operatora JOIN .............................................................................292
Tworzenie opisw wyjazdw .................................................................................................................................297
Wstawianie obrazw i atrybutw alt .....................................................................................................................302
Implementowanie stronicowania zestawu rekordw .........................................................................................304
Przesyanie danych do innych aplikacji ...............................................................................................................309
Lekcja 11. Budowanie interfejsw wyszukiwania ....................................................................................................... 317

Pliki lekcji ................................................................................................................................................................. 318
Przygotowywanie strony wyszukiwania i tworzenie odnonika Wyszukaj wszystkie ................................ 319
Wyszukiwanie wedug rejonu wiata tworzenie interfejsw .........................................................................322
Poprawianie zapytania SQL oraz uywanie komentarzy do kodu w celu testowania i usuwania bdw ..328
Kontrolowanie wywietlania paska nawigacji ..................................................................................................... 334
Wyszukiwanie wedug kraju filtrowanie wzgldem wartoci pola formularza .......................................... 337
Wybr zapytania SQL w zalenoci od przekazanych danych ......................................................................... 343
Lekcja 12. Uwierzytelnianie uytkownikw ................................................................................................................... 349

Pliki lekcji ................................................................................................................................................................. 351
Uwierzytelnianie uytkownikw jako aplikacja sieci Web ................................................................................ 351
Tworzenie strony rejestracji ................................................................................................................................... 354
Tworzenie strony logowania .................................................................................................................................. 360
Tworzenie Application.cfm (tylko ColdFusion) ................................................................................................. 365
Ograniczanie dostpu do stron.............................................................................................................................. 366
Czego si nauczylimy?............................................................................................................................................ 369

Oficjalny podrcznik
Lekcja 13. Zarzdzanie treci za pomoc formularzy ............................................................................................. 371

Pliki lekcji ................................................................................................................................................................. 373
Tworzenie czci administracyjnej ........................................................................................................................374
Dwa podejcia do formatowania zawartoci przechowywanej w bazie danych ..............................................377
Tworzenie formularza ............................................................................................................................................378
Zmienne sesji i ukryte pola wykorzystywane do ledzenia uytkownikw .....................................................382
Wstawianie rekordu ................................................................................................................................................ 383
Lekcja 14. Tworzenie stron aktualizujcych dane ...................................................................................................... 389

Pliki lekcji ................................................................................................................................................................. 391
Przygotowywanie stron ........................................................................................................................................... 391
Planowanie stron Master-Detail ............................................................................................................................392
Wprowadzenie aktualizacji na stronie szczegowej ..........................................................................................400
Lekcja 15. Kodowanie prostego systemu zarzdzania treci (CMS) ............................................................... 411
Pliki lekcji ................................................................................................................................................................. 413
Przygotowywanie systemu zarzdzania treci (CMS) ....................................................................................... 413
Tworzenie formularza i wpisywanie kodu zestawu rekordw .......................................................................... 417
Umoliwienie wstawiania rekordw .....................................................................................................................426
Tworzenie strony oglnej .......................................................................................................................................430
Tworzenie strony szczegowej do aktualizowania rekordw .......................................................................... 436
Dodawanie funkcji aktualizujcej .........................................................................................................................445
Usuwanie rekordw ................................................................................................................................................449
Co dalej? ...................................................................................................................................................................452
Skorowidz ...................................................................................................................................................................................... 453
SPIS TRECI
W porwnaniu do innych rodkw przekazu takich jak radio czy telewizja internet jest medium
stosunkowo modym. Jak wszystkie nowe formy przekazu, ulega on nieustannym zmianom.
Zmiany takie czsto oznaczaj, e zaoona witryna WWW wymaga przerbki. Wiele organizacji
zastpuje atrakcyjne w wygldzie witryny (ktre jednak nie maj wiele do zaoferowania, poza sam
statyczn obecnoci w internecie) witrynami interaktywnymi, ktre przekazuj informacje, zapewniaj rozrywk, sprzedaj produkty, organizuj spoecznoci itd.
Strona domowa Newland Tours wyglda do dobrze, lecz pewne jej czci, np. kolumna Dziennik podrnika
(po prawej) wymaga jeszcze dopracowania
Dzisiejsi projektanci i twrcy stron WWW wci staj przed nowymi problemami, rnicymi si
od tych, ktre mona byo spotka kilka lat temu.
Zamiast tworzy cakiem nowe witryny, projektanci i twrcy staj przed koniecznoci
utrzymywania istniejcych witryn w obliczu zmieniajcych si standardw, nowych

technologii i rozwoju zawartoci.
Nowoczesne witryny WWW powinny odpowiada potrzebom uytkownika, co czsto
oznacza, e strony WWW musz w locie reagowa na dziaania uytkownika.

Obecne witryny WWW su ju nie tylko do jednorazowych interakcji pomidzy pojedynczym
uytkownikiem a organizacj; wiele z nich peni rol przestrzeni dla wirtualnych spoecznoci,
np. newgrounds.com (amatorscy twrcy w technologii Flash), dailykos.com (spoeczno
zainteresowana polityk) czy whatifsports.com (spoeczno sportw wirtualnych).
Wspczeni projektanci i twrcy czsto musz budowa systemy zarzdzania treci i jej
obiegiem wewntrz witryny, ktre pozwalaj przenie zadania zwizane z zarzdzaniem

treci witryny z dziaw informatycznych do uytkownikw nietechnicznych przez stworzenie
formularzy WWW sucych do dodawania informacji na stron.
Takie wymagania wywouj szereg konkretnych pyta. W jaki sposb mona najszybciej zaktualizowa wygld witryny lub jej struktur? W jaki sposb tak zaprojektowa witryn, aby specjalista
od treci (nieposiadajcy umiejtnoci technicznych) mg j wsptworzy? Jak stworzy witryn,
ktra dostosowywaaby si do potrzeb i zainteresowa uytkownika? Jak ksztatowa spoeczno
z osb odwiedzajcych witryn? I w kocu, jak osign te cele jednoczenie?
Midzy innymi w odpowiedzi na te kwestie pojawia si caa seria nowinek technologicznych, stanowicych rozwizanie problemw w tworzeniu stron WWW, takich jak kaskadowe arkusze stylw (cascading style sheets, CSS), Macromedia ColdFusion, ASP, SQL, serwery baz danych, XHTML,
DHTML, XML, usugi WWW, ADO, CDO, JavaScript, Flash, PHP, Java, .NET, XSLT itp. Programy do tworzenia witryn WWW, takie jak Macromedia Dreamweaver 8, staray si dotrzyma
kroku tak, aby ich uytkownicy byli w stanie tworzy witryny z uyciem kadej z wymienionych
technologii. Jednak dawnym specjalistom w zakresie jzyka HTML taki nawa rozwiza technicznych sprawi tyle samo kopotw, co problemy, ktre miay by dziki nim rozwizane.
Opanowanie wielu spord tych technologii staje si czci niezbdnego arsenau umiejtnoci
dzisiejszych twrcw stron WWW. Celem tej ksiki jest zapewnienie dobrego przygotowania na
drodze do ich biegego opanowania. Gwnym zadaniem bdzie przeksztacenie statycznej witryny
WWW w witryn interaktywn, atw w zarzdzaniu i przede wszystkim zgodn ze standardami.
Oprcz tego, uytkownicy zarzdzajcy witryn, a nieposiadajcy umiejtnoci technicznych, bd
w stanie j aktualizowa bez adnej znajomoci jzyka HTML. S to ambitne, lecz osigalne cele.
Dziki narzdziom i rodowisku Dreamweaver bd one atwiejsze do zdobycia, ni sdzicie.
W tej lekcji poznamy punkty wyjciowy i kocowy ksiki. Otworzymy aktualnie istniejc stron,
utworzon bez wykorzystania programu Dreamweaver. Pierwszym zadaniem bdzie utworzenie
nowej strony. Wyobramy sobie, e przed przystpieniem do przebudowy witryny klient wymaga
od nas natychmiastowego utworzenia brakujcej strony. Gdy ju sobie z tym poradzimy, zajmiemy si
niedostatkami witryny. Mankamenty te moemy podzieli na dwie kategorie: niedocignicia
techniczne, takie jak problemy z dostpnoci i niewykorzystane moliwoci poprawienia wygldu
strony, oraz problemy biznesowe, wystpujce w sytuacji gdy witryna nie spenia postawionych
przed ni zada. Na koniec sprawdzimy, jak wyglda w internecie kocowa wersja witryny.
22

Oficjalny podrcznik
Czego si nauczymy?
W czasie tej lekcji:
zdefiniujemy statyczn witryn w programie Dreamweaver,
zaczniemy pracowa w rodowisku programu Dreamweaver, tworzc i zapeniajc now
stron treci,
skorzystamy z okna dialogowego Find and Replace (Znajd i zamie) aby w zautomatyzowany
sposb uzupeni witryn o opcje zwikszajce dostpno,

zbadamy istniejcy kod HTML,
poznamy potrzeby klienta,
poznamy ukoczony projekt w formie, jak przyjmie pod koniec ksiki,
nakrelimy strategi aktualizacji witryny.
Przewidywany czas
Ukoczenie tej lekcji zajmie okoo 60 minut.
Pliki lekcji
Pliki wyjciowe:
Lekcja01/Start/newland/about.htm
Lekcja01/Start/newland/contact_text.txt
Lekcja01/Start/newland/index.htm
Lekcja01/Start/newland/profiles.htm
Lekcja01/Start/newland/tours.htm
Pliki kocowe:
Lekcja01/Start/newland/contact.htm
LEKCJA 1.
Przedstawiamy Newland Tours
23
Definiowanie statycznej witryny

Witryna Newland Tours, na ktrej bdziemy pracowa, jest witryn statyczn. Dlatego te moemy
miao wczyta j do programu Dreamweaver i przystpi do pracy.
Praca z witrynami WWW czsto wymaga setek, a nawet tysicy plikw. Skadaj si na nie strony
WWW, grafiki, kaskadowe arkusze stylw, zasoby multimedialne itp. Pliki te powizane s ze sob
za pomoc HTML. Niestety, maa literwka podczas wpisywania moe wywoa nieprzyjemny
(lub nieczytelny dla uytkownika) komunikat o bdzie, a nawet zablokowa dostp do czci naszej witryny. Dreamweaver dostarcza wiele wyrafinowanych narzdzi do zarzdzania witryn, pomagajcych utrzyma integralno naszej witryny, zarwno na etapie tworzenia, jak i po jej uruchomieniu. Aby skorzysta z tych opcji, naley najpierw zdefiniowa witryn. Jest to proces, w ktrym
wymagane jest (jako minimum) wskazanie gwnego folderu witryny na naszym dysku twardym.
Definiowanie witryny niesie ze sob korzyci, z ktrych wiele za chwil zobaczymy. Zapobiega
powstawaniu bdnych odnonikw, automatycznie aktualizujc pliki nalece do witryny w razie
ich przeniesienia lub zmiany nazwy. Site Manager (Menader witryny) umoliwia wykonywanie dziaa na caej witrynie, takich jak np. Find and Replace, co znacznie zwiksza wydajno. Inn zasadnicz korzyci, jak daje Site Manager, jest to, e posiada on wbudowan zdolno przesyania plikw
(take za pomoc FTP), co oznacza, e moemy publikowa nasze pliki, kiedy chcemy, za pomoc
jednego nacinicia klawisza. Moemy nawet synchronizowa ze sob pliki lokalne (pooone na
naszym dysku twardym) i zdalne (umieszczone w internecie lub na udostpnionym publicznie
serwerze), aby mie pewno, e najnowsze wersje plikw znajduj si na waciwym miejscu.
W tym zadaniu w oknie dialogowym Site Definition (Definicja witryny) zdefiniujemy zwyk, statyczn
witryn. Wymaga to jedynie podania jej nazwy i wskazania pooenia na dysku twardym. Po kilku
lekcjach, gdy poczynimy ju odpowiednie przygotowania, wrcimy do tego okna dialogowego i zdefiniujemy witryn dynamiczn. Definiowanie witryny dynamicznej wymaga nieco wicej zabiegw
(te dodatkowe czynnoci nie dadz nam adnych korzyci na tak wczesnym etapie). Na szczcie,
zawsze moemy zmieni definicj witryny, wic nic nie stracimy, jeli zdefiniujemy na razie witryn
statyczn i przystpimy od razu do pracy.
1. Utwrz na dysku twardym katalog o nazwie dwa08.
W tym folderze przechowywana bdzie lokalna kopia witryny.

2. Do nowo utworzonego katalogu skopiuj folder newland (wraz z zawartoci), znajdujcy si
w folderze Lekcja01/Start.
W praktyce czsto moemy spotka si z zadaniem poprawienia ju istniejcej witryny.
W przypadku wprowadzania znaczcych zmian najlepiej bdzie skopiowa istniejc witryn
i pracowa na jej kopii. Nie naley nigdy dokonywa edycji udostpnionej (tj. widocznej dla
ogu) wersji strony.
3. Uruchom program Dreamweaver 8.
24

Oficjalny podrcznik
Po wczytaniu plikw do programu Dreamweaver naley je edytowa wycznie w tym programie.

Pliki HTML mona otworzy w kadym edytorze tekstowym, a kady system operacyjny
wyposaony jest w program do zarzdzania plikami (np. Macintosh Finder czy Eksplorator
Windows), ktry umoliwia przenoszenie plikw i ich usuwanie. Powinnimy jednak unika
korzystania z tych narzdzi, gdy kada zmiana moe zmyli program Dreamweaver
i spowodowa powstawanie bdnych odnonikw. Skoro wic pliki s ju na waciwym
miejscu, przechodzimy do programu Dreamweaver i starajmy si unikn pokusy
dokonywania na nich operacji w jakikolwiek inny sposb.
4. Z gwnego okna programu wybierz polecenie Create New Dreamweaver Site (Utwrz now
witryn w programie Dreamweaver).
Moesz te wybra z menu polecenie Site (Witryna) > Manage Sites (Zarzdzaj witrynami)
i klikn przycisk New (Nowa).
Cho pliki s ju na naszym dysku twardym, Dreamweaver jeszcze ich nie widzi. Dopiero
zdefiniowanie witryny umoliwi programowi odnalezienie tych plikw i zarzdzanie nimi.
Witryn definiujemy w oknie dialogowym Site Definition. Jeli zobaczymy okno dialogowe
wygldajce inaczej ni przedstawione na rysunku, prawdopodobnie oznacza to, e znajdujemy
si w trybie zaawansowanym. Kliknijmy zakadk Basic (Tryb prosty), aby przywrci tryb
widoku prostego przedstawionego na rysunku.
LEKCJA 1.
25
5. Wpisz Newland Tours w pierwsze pole na ekranie, a nastpnie kliknij Next (Dalej).
Tryb widoku prostego okna dialogowego Site Definition dziaa na zasadzie kreatora.
Jeli wolisz dawny styl okna dialogowego Site Definition, moesz uzyska do niego dostp przez
kliknicie zakadki Advanced (Tryb zaawansowany).
6. W oknie Editing Files, Part 2 (Edycja plikw, cz 2) wybierz opcj No, I do not want to use a server
technology. (Nie, nie chc korzysta z technologii serwerowych), a nastpnie kliknij przycisk Next.
Nieco dalej w ksice bdziemy korzysta z technologii serwerowych, ale wybierajc teraz
odpowied No, pominiemy kilka skomplikowanych krokw.
7. W nastpnym ekranie wybierz pierwsz opcj, Edit local copies on my machine, then upload to server
when ready (recommended) (Edytuj lokalne kopie plikw na moim komputerze, a po ich przygotowaniu
przelij je na serwer <zalecane>).
Dziki takiej decyzji zawsze bdziemy posiada dwa zestawy plikw witryny jeden lokalny
(zwykle na naszym dysku twardym, cho moemy te umieci je w folderze sieciowym)
i jeden zdalny (zazwyczaj na serwerze). Jest to bezpieczniejsze, poniewa zawsze bdziemy
mie co najmniej jedn kopi naszych plikw, i co waniejsze oznacza to, e pliki,
nad ktrymi bdziemy pracowa, przechowywane bd na dysku twardym, gdzie nie bd
widoczne dla innych.
26

Oficjalny podrcznik
Wikszo profesjonalnych witryn dziaa w na trzech poziomach. Lokalna witryna zawiera

wszystkie pliki tworzone przez uytkownika programu Dreamweaver na dysku twardym.
Serwer testowy zawiera kopi witryny suc wycznie do testowania i rozwijania.
Zawarto serwera testowego nie jest widoczna dla ogu, ale jest to rzeczywiste rodowisko
serwera WWW, ktre jest zwykle identyczne lub prawie identyczne ze rodowiskiem serwera
eksploatacyjnego. Serwer eksploatacyjny jest publiczn wersj witryny. Powinny by na nim
publikowane jedynie pliki przetestowane, zredagowane, dopracowane i zatwierdzone.
8. Kliknij ikon folderu obok pola Where on your computer do you want to store your files? (Gdzie
w komputerze chcesz przechowywa swoje pliki?) i wska folder newland znajdujcy si w folderze
dwda08. Kliknij Otwrz, aby wybra folder, a nastpnie Zapisz, aby powrci do okna
dialogowego Site Definition.
W tym kroku definiujemy witryn lokaln tu bd miay miejsce wszystkie nasze dziaania.
Gdy dokonamy edycji pliku, zmiany bd widoczne tylko tutaj. Oznacza to, e jeeli podczas
pracy chwilowo naruszymy funkcjonalno witryny, nie wyrzdzimy adnych szkd.
9. W kolejnym ekranie wybierz z menu rozwijanego pozycj None (Brak).
Normalnie jako witryn zdaln wskazuje si tu serwer testowy lub serwer eksploatacyjny.
Serwer testowy jest niezbdny, gdy pracujemy na zawartoci ulegajcej zmianom, opartej
na bazie danych.
LEKCJA 1.
27
Dalej w tej ksice zdefiniujemy witryn zdaln, ktrej uyjemy w charakterze serwera testowego.
Serwer ten bdzie w stanie obsuy w peni dynamiczne witryny, z ktrymi jak si wkrtce
przekonamy nie poradzi sobie zdefiniowany przez nas serwer lokalny. Na razie jednak
zdalny serwer stanowiby niepotrzebn komplikacj.
Witryna, ktr budujemy w tej ksice, nie posiada serwera eksploatacyjnego, gdy Newland Tours
jest firm fikcyjn.
10. Kliknij przycisk Next. Przejrzyj podsumowanie i kliknij Done (Gotowe).
Na zakoczenie pojawi si okno dialogowe wskazujce, e Dreamweaver tworzy bufor

podrczny witryny. Program analizuje wszystkie pliki w witrynie, sprawdzajc wszystkie
czce je odnoniki, po czym przechowuje je w pamici. Jeli zdecydujemy si zmieni
nazw strony lub przenie jaki zasb do innego folderu, Dreamweaver automatycznie
tak zaktualizuje wszystkie pliki, aby odnoniki wskazyway na zmodyfikowany plik.
Po utworzeniu bufora podrcznego okno dialogowe zniknie samoczynnie.
W palecie Files (domylnie znajduje si ona w prawej dolnej czci ekranu) powinna teraz
pojawi si lista plikw.
28

Oficjalny podrcznik
Tworzenie strony Kontakt z nami

Jak to czsto bywa w przypadku projektw WWW, zanim przystpimy do przegldu witryny Newland Tours, musimy zaj si bardziej palc potrzeb: znikna strona contact.htm i trzeba j odtworzy.
wiczenie to ma suy jako szybki kurs podstaw tworzenia i edycji stron WWW. Jeli potrafisz ju
tworzy statyczne strony w programie Dreamweaver, moesz je pomin ostateczny rezultat
znajduje si na pycie CD w folderze Complete tego rozdziau, podobnie jak foldery Start dla nastpnych rozdziaw. Jeli zrezygnujesz z tego wiczenia, rozpocznij czytanie nieco dalej, od podrozdziau Ocena witryny: kod.
Jedynym celem tego wiczenia jest prezentacja podstaw pracy w rodowisku programu Dreamweaver. Nie jest ono obszernym przewodnikiem tworzenia statycznych witryn WWW przy uyciu tego
programu. Do tego celu su ksiki Macromedia Dreamweaver 8: Training From the Source (Macromedia Press) lub Macromedia Dreamweaver 8: Visual Quickstart Guide (Macromedia Press/Peachpit).
1. W palecie Files (Pliki) kliknij dwukrotnie pozycj contact_text.txt, aby otworzy ten plik
w programie Dreamweaver. Jeli paleta Files jest niewidoczna, wybierz z menu Window (Okno)
> Files, aby wywietli plik.
Jak mona si domyli po jego zawartoci, plik ten zawiera tekst, ktry ma si znale
na stronie Kontakt z nami.
Jest to zwyky plik tekstowy, a nie dokument HTML. Nie zawiera on adnych znacznikw
HTML i cho w programie Dreamweaver plik ten wyglda na sformatowany, to gdybymy
otworzyli go w przegldarce internetowej, cae formatowanie zostaoby utracone, a plik
wywietliby si w postaci pojedynczego, duego bloku (pod warunkiem, e wczeniej
zmienilibymy jego rozszerzenie na .htm lub .html). Dzieje si tak dlatego, e przegldarki
ignoruj puste znaki znaki akapitu, spacje (poza pierwszym znakiem spacji sucym
do oddzielania wyrazw) oraz znaki tabulatora. Aby podzieli tekst na poszczeglne linie
czy akapity na stronie wywietlanej w przegldarce, naley uy znacznikw HTML,
LEKCJA 1.
29
takich jak znacznik akapitu (<p>). W nastpnych kilku krokach utworzymy kopi istniejcej
w witrynie strony (about.htm), zastpimy jej zawarto zawartoci tego pliku, formatujc go
za pomoc znacznikw HTML, po czym zapiszemy stron jako contact.htm.
Prosz zwrci uwag, e na pasku narzdziowym View (Widok) wybrany jest przycisk Code
(Kod), a dwa nastpne przyciski, Split (Podzia) i Design (Projekt), s nieaktywne. Poniewa
dokument ten nie posiada adnych znacznikw HTML, Dreamweaver nie moe go otworzy
w widoku projektu. W ksice tej czsto bdziemy si przecza pomidzy widokiem kodu
a widokiem projektu.
2. Kliknij gdziekolwiek tekst i wybierz z menu Edit (Edycja) > Select All (Zaznacz wszystko),
nastpnie wybierz Edit > Copy (Kopiuj), aby skopiowa tekst do schowka.
Tekst jest ju gotowy do umieszczenia w dokumencie docelowym tylko nie mamy jeszcze
dokumentu docelowego.
3. W palecie Files kliknij dwukrotnie plik about.htm, aby go otworzy. Jeli to konieczne,
kliknij przycisk Design, aby zobaczy wygenerowan stron zamiast jej kodu.
Strona ta posuy nam jako szablon do tworzenia nowych stron.
4. Wybierz File (Plik) > Save As (Zapisz jako) i nazwij plik contact.htm.
Mamy zamiar zmodyfikowa istniejc wersj strony about.htm. Aby upewni si, e nie
nadpiszemy oryginalnej wersji pliku, tworzymy jego kopi za pomoc opcji Save As
i nadajemy mu now nazw.
Kada ze stron posiada na pasku nawigacyjnym przycisk o nazwie Kontakt z nami. Kliknicie
tego przycisku powoduje wczytanie strony contact.htm, ktra do tej pory nie istniaa.
30

Oficjalny podrcznik
5. Za pomoc myszy zaznacz wszystko od sw O firmie a do koca strony, cznie z opisem
rysunku. Nacinij klawisz Delete.
Jest to tre ktr do tej pory zawiera plik about.htm. Zastpimy j zawartoci schowka.
Po naciniciu klawisza Delete zauwaymy, e usunity zosta rwnie wstawiony do tekstu
rysunek.
6. Przy migajcym kursorze w gwnym (teraz pustym) obszarze zawartoci strony przecz si
na jednoczesny widok kodu i projektu (zwanym dalej widokiem dzielonym), klikajc

przycisk Split (Podzia).
Pracujc w obu trybach rwnolegle, moemy projektowa stron wizualnie i sprawdza
jednoczenie, czy Dreamweaver wprowadza taki kod, jakiego oczekujemy.
Zwrmy uwag, e w widoku kodu kursor pooony jest wewntrz znacznika <h1>.
Znaczniki te nakazuj przegldarce wywietlanie objtej nimi zawartoci w formie nagwka
stopnia pierwszego. Poniej okna dokumentu, w palecie Properties (Waciwoci) widzimy,
e menu rozwijane Format pokazuje warto Heading 1 (Nagwek 1). Innymi sowy, paleta
Properties odzwierciedla to, co widzimy w widoku kodu: punkt wstawiania sformatowany
jest jako nagwek stopnia pierwszego. Jeli wkleimy teraz zawarto schowka, zostanie
ona sformatowana jako nagwek stopnia pierwszego.
Rozsdniejszym wyborem domylnego formatu bdzie zwyky format akapitu,
oznaczany znacznikiem <p>.
LEKCJA 1.
31
7. Z menu rozwijanego Format w palecie Properties wybierz Paragraph (Akapit).
Zauwa, e w widoku kodu znaczniki <h1></h1> zastpione zostay znacznikami <p></p>.

Jeli teraz wkleimy zawarto schowka, zostanie ona sformatowana jako zwyke akapity.
8. Jeli w widoku kodu midzy znacznikami <p></p> pojawi si znacznik <br />, zaznacz go i usu.
Znacznik ten jest pozostaoci po pliku about.htm. Moe on, lecz nie musi si pojawi,
w zalenoci od sposobu zaznaczenia i usunicia oryginalnej zawartoci strony.
9. Z kursorem umieszczonym pomidzy znacznikami <p> i </p> w czci okna zawierajcej kod
wybierz Edit > Paste (Wklej).

Tekst z pliku contact_text.txt zosta wklejony i sformatowany w takiej formie, jak posiada
oryginalny plik. Jeli porwnamy tekst i kod w widoku projektu i w widoku kodu, zobaczymy,
e w widoku kodu Dreamweaver automatycznie podzieli wiersze dla przedstawienia
podziau midzy akapitami.
32

Oficjalny podrcznik
Umiecilimy ju tre na nowej stronie i moemy teraz przystpi do jej sformatowania.
Formatowanie strony Kontakt z nami

W tym zadaniu zajmiemy si formatowaniem tekstu, dzielc go na akapity oraz wykorzystujc niektre z opcji zmiany ukadu tekstu. Zaczniemy od oddzielenia od siebie poszczeglnych akapitw.
1. W czci ekranu zawierajcej widok projektu umie punkt wstawiania pomidzy wierszami
Kontakt z agentem a Aby uzyska wicej informacji, a nastpnie nacinij klawisz Enter (Windows)
lub Return (Mac OS).
Dreamweaver podzieli tekst na dwa akapity, obejmujc kady z nich par znacznikw
<p></p> (zobacz pierwszy rysunek na nastpnej stronie).
2. Powtrz krok 1., tworzc nowe akapity od nastpujcych sw: Adres, Newland Tours, ul.
Podrna 1, 00-001 Warszawa, E-mail, info@newlandtours.pl, 022 oraz Na zdjciu.

Po wykonaniu powyszego powinnimy w gwnym obszarze okna otrzyma dziesi
oddzielnych akapitw. Moe nie s jeszcze idealne, ale przynajmniej s oddzielone
(zobacz drugi rysunek na nastpnej stronie).
LEKCJA 1.
33
34

Oficjalny podrcznik
3. W widoku projektu umie punkt wstawiania gdziekolwiek w obrbie pierwszego akapitu
(Kontakt z agentem Newland Tours). Z menu Format w palecie Properties wybierz Heading 1
(Nagwek 1).
Zauwa, e nagwek strony wreszcie wyglda odpowiednio. W widoku kodu zobaczymy,
e w tym akapicie znacznik <p> zastpiony zosta znacznikiem <h1>.
Zauwa te, e nagwek strony pojawia si bardzo blisko paska nawigacyjnego. Moemy
umieci go nieco niej za pomoc znacznika podziau wiersza <br />.
4. W widoku kodu, pomidzy otwierajcym znacznikiem <h1> a sowem Kontakt, wpisz <br />,
aby utworzy podzia wiersza.

eby zobaczy efekt tego dziaania, kliknij cz okna zawierajc widok projektu.
5. W widoku projektu umie kursor tu przed sowami Aby uzyska wicej informacji, po czym
kliknij przycisk Insert Image (Wstaw rysunek) z kategorii Common (Popularne) na pasku Insert (Wstaw).
Rysunki wstawiane s przez wbudowanie ich w otaczajcy je tekst i znaczniki HTML,
wic naley uwanie wybra punkt wstawiania.
Zauwa, e przy przycisku Insert Image znajduje si maa strzaka, sygnalizujca obecno
rozwijanego menu. Kliknicie strzaki ujawnia wiele innych zasobw zawizanych z rysunkami,
ktre moemy wstawi za pomoc tego menu, takich jak: miejsce na rysunek (Image Placeholder),
LEKCJA 1.
35
interaktywne rysunki Fireworks HTML, efekt rollover (zmiana rysunku po najechaniu

kursorem), pola aktywne rysunku (hotspot) i inne. Nie bdziemy korzysta z tych opcji
w ksice, ale warto wiedzie o ich istnieniu. Kilka innych przyciskw na pasku Insert
rwnie grupuje podobne polecenia.
6. W oknie dialogowym Select Image Source (Wybierz rdo rysunku) wska plik fountain_versailles.jpg
z folderu images. Kliknij OK.

Oprcz moliwoci wyboru rysunku, dziki czemu Dreamweaver moe wpisa jego
poprawn ciek dostpu do pliku contact.htm, to okno dialogowe zawiera te kilka innych
opcji. S to m.in.: podgld, informacja o wielkoci pliku i wymiarach rysunku oraz opcje
odnoszce si do rodzaju odnonika: czy ma on by okrelany wzgldem dokumentu,
czy witryny (domylnie jest okrelany wzgldem dokumentu, o taki nam chodzio).
Na grze okna dialogowego znajduje si opcja Select File Name From (Wybierz nazw pliku z).
Do wyboru mamy tu File System (System plikw), gdzie wskazujemy plik na swoim komputerze
oraz Data Sources (rda danych), gdzie adres URL pobierany jest z bazy danych. W tej ksice
bdziemy czsto korzysta z obu metod. Jeli chodzi o ten krok, upewniamy si, e wybrana
zostaa opcja File System.
36

Oficjalny podrcznik
Po klikniciu przycisku OK pojawi si okno dialogowe z prob o podanie dodatkowych

informacji sucych poprawie dostpnoci.
7. W polu Alternate text (Tekst alternatywny) wpisz: Fotografia fontanny w Wersalu wykonana
przez klienta Newland Tours podczas wycieczki "Atrakcje Francji". Pole Long
description (Dugi opis) pozostaw puste. Kliknij OK.

Aby wszystkie obiekty naszej witryny, wcznie z rysunkami, byy dostpne dla osb
o ograniczonej sprawnoci, np. o sabszym wzroku, naley wprowadzi opis kadego
rysunku (omwimy to w nastpnym rozdziale). Nowoci w programie Dreamweaver 8
jest przypominajce o tym okno dialogowe, pojawiajce si za kadym razem, gdy wstawiamy
rysunek.
8. Przy zaznaczonym rysunku na stronie, w palecie Properties zmie ustawienie Align (Wyrwnanie)
na Left (Do lewej).

Ustawienie domylne zwykle powoduje wstawienie rysunku po lewej stronie jednego wiersza
tekstu, podczas gdy pozostaa cz tekstu umieszczona zostaje poniej rysunku. Skutkiem
tego jest znaczna ilo niewykorzystanego obszaru strony. Opcja Left (lub odwrotnie, Right
Do prawej) powoduje, e tekst oblewa rysunek.
LEKCJA 1.
37
Aby zrzuty ekranu byy atwiejsze do zrozumienia, mog czasami przecza si pomidzy widokiem kodu, projektu i widokiem dzielonym. Jednak Twoim domylnym widokiem podczas wykonywania wicze w tej ksice powinien pozosta widok dzielony.
9. Umie punkt wstawiania przed sowem Adres i kliknij przycisk Insert Table (Wstaw tabel)
na pasku Insert.
W tym kroku przygotowujemy si do wstawienia tabeli, ktra bdzie przechowywaa
informacje o sposobach kontaktu uytkownikw z Newland Tours. Tabele mona stosowa
(jak mona si domyli) do przedstawienia danych tabelarycznych, ale mona je te
wykorzysta jako narzdzie ukadu strony. (Warstwy CSS s nowsz i zazwyczaj nadrzdn
technik ukadu strony: ukady oparte na warstwach s bardziej elastyczne, szybsze do pobrania
i dostpniejsze. Jednak wymagaj one biegoci w posugiwaniu si CSS, ktrej niektrzy
z czytelnikw mog nie posiada, a poniewa nie jest to ksika o CSS, lecz o tworzeniu
witryn bazodanowych, bdziemy tu tworzy ukad strony, korzystajc ze starszej, lepiej
znanej techniki tabel HTML).
W nastpnym kroku utworzymy prost, dwukolumnow tabel, zawierajc nazw ulicy,
adres poczty elektronicznej oraz numer telefonu.
10. W oknie dialogowym Insert Table okrel nastpujce opcje: Rows (Wiersze): 2, Columns (Kolumny): 2,
Table width (Szeroko tabeli): 400 pikseli Border thickness (Grubo obramowania): 1 piksel, Cell
padding (Marginesy komrek): 3 i Cell spacing (Odstp miedzy komrkami): 0. W sekcji Accessibility
(Dostpno) w pole Summary (Podsumowanie) wpisz: Informacje kontaktowe Newland Tours.
Kliknij OK.
Takie ustawienia spowoduj utworzenie czterokomrkowej tabeli o szerokoci 400 pikseli.
Opcja Cell padding okrela odstp midzy obramowaniem komrki a jej zawartoci. Cell
spacing wyznacza odlego midzy komrkami. Gdy wypenimy pole Summary, Dreamweaver
doda do znacznika <table> atrybut summary, wykorzystywany przez lektory ekranowe
do szybkiego przekazania informacji o zawartoci tabeli uytkownikom o sabszym wzroku.
38

Oficjalny podrcznik
11. Kliknij trzykrotnie sowo Adres, aby zaznaczy akapit. Przecignij zaznaczony akapit
(skadajcy si tylko z tego jednego sowa) do lewej grnej komrki tabeli. Podobnie, zaznacz
potrjnym klikniciem, a nastpnie przecignij za pomoc myszy sowa E-mail i telefon
do prawej grnej komrki. Zaznacz i przenie trzy nastpne akapity zawierajce adres
pocztowy do lewej dolnej komrki, a e-mail i numer telefonu do prawej dolnej komrki.
Dreamweaver przeniesie do odpowiednich komrek zaznaczone bloki tekstu wraz
z obejmujcymi je znacznikami <p>.
Zwr uwag, e informacje adresowe, numer telefonu i adres e-mail maj due odstpy
midzy wierszami.
12. Umie punkt wstawiania tu przed sowami ul. Podrna 1 i nacinij klawisz Backspace
(Windows) lub Delete (Mac OS), aby usun znak koca akapitu oddzielajcy wiersze ul.
Podrna 1 i Newland Tours (tak, aby utworzyy one jeden wiersz). Kursor umie w miejscu,
w ktrym poprzednio nastpowa podzia wierszy i trzymajc wcinity klawisz Shift, nacinij
jednoczenie Enter (Windows) lub Return (Mac OS).
Po naciniciu klawisza Enter lub Return Dreamweaver tworzy nowy akapit (<p>), natomiast
klawisze Shift+Enter lub Shift+Return powoduj wstawienie znacznika koca wiersza (<br />).
LEKCJA 1.
39
13. Powtarzaj krok 12. usuwajc dodatkowy odstp oddzielajcy wiersz z nazw ulicy od wiersza
z nazw miasta (oraz kodu pocztowego) w lewej komrce oraz odstp midzy wierszem
z adresem e-mail a numerem telefonu w prawej komrce.
40

Oficjalny podrcznik
Tabela jest ju gotowa. Musimy jeszcze tylko usun zbyteczne odstpy poniej tabeli
(jeli to konieczne) oraz sformatowa podpis rysunku kursyw.
14. Umie punkt wstawiania przed sowami Na zdjciu i naciskaj klawisz Backspace (Windows)
lub Delete (Mac OS) tyle razy, a podpis pojawi si tu pod rysunkiem.
Ta dodatkowa przestrze jest pozostaoci po usuniciu akapitw z adresem i wstawieniu
ich do tabeli. Jeli spojrzymy w kod strony przez ukoczeniem tego kroku, zobaczymy szereg
blokw <p> </p>. W ten sposb Dreamweaver tworzy puste akapity. HTML zabrania
uycia znacznikw otwierajcego i zamykajcego <p></p> bez adnej zawartoci. Dlatego
Dreamweaver wstawia pomidzy nie znak odstpu. Poniewa HTML ignoruje puste odstpy
w kodzie, Dreamweaver uywa znaku , oznaczajcego tzw. tward spacj traktowan
jak kady inny znak.
15. Kliknij trzykrotnie gdziekolwiek w wierszu podpisu, a po jego zaznaczeniu zastosuj tu
kursyw za pomoc palety Properties.
Kursywa pozwala odrni podpis od reszty tekstu.

16. Zapisz plik contact.htm.
Zakoczylimy projektowanie nowej strony. W realnej sytuacji opublikowalibymy stron na serwerze WWW. Zamiast tego skupmy si teraz na bardziej ambitnych zadaniach zwizanych z przerabianiem witryny.
LEKCJA 1.
41
Ocena witryny: kod

W tym zadaniu nie bdziemy dokonywa adnych zmian w plikach. Bdziemy raczej dostosowywa rodowisko programu Dreamweaver, aby uczyni je bardziej przyjaznym w pracy, ktr bdziemy wykonywa, a nastpnie zbadamy kod strony gwnej w wersji pierwotnej w celu poznania
niedocigni wystpujcych w teje wersji.
Ogldajc stron w przegldarce, moemy ich w ogle nie dostrzec. W wikszoci przegldarek
strona powinna wyglda poprawnie. By moe zastanawiasz si, w jaki sposb kod moe mie jakie niedocignicia, skoro wyglda dobrze w przegldarce? Odpowied jest taka, e kod w pierwotnej wersji projektu jest przestarzay i niezgodny ze wspczesnymi standardami. W tym rozdziale dowiemy si jakie znaczenie ma zgodno kodu ze standardami.
Czsto rozpoczynajc prace polegajce na przeprojektowaniu witryny WWW, mamy do czynienia
z przestarzaym, niezgodnym kodem, powinnimy wic nauczy si go rozpoznawa. Pniej poznamy metody jego poprawiania.
1. Kliknij dwukrotnie plik index.htm, aby go otworzy.
W zalenoci od tego, czy wykonywae wiczenie z formatowaniem strony contact.htm,

moesz ujrze dokument w widoku projektu (jeli nie wykonywae wiczenia) lub w widoku
dzielonym (jeli wykonywae to wiczenie).
Dawniej, w pnych latach 90., gdy rynek edytorw HTML by zapeniony edytorami
tworzcymi dobry kod, lecz niezbyt wspomagajcymi projektowanie (albo odwrotnie),
wprowadzenie programu Dreamweaver, przewyszajcego inne w obu tych aspektach, byo
czym rewolucyjnym. W kilka lat pniej Dreamweaver wci pozostaje edytorem jedynym
w swojej klasie, zarwno w tworzeniu kodu, jak i w projektowaniu. Wielu twrcw WWW,
wiedzc o tym, e Dreamweaver tworzy w tle czysty HTML, projektowao witryny w widoku
projektu, nie przejmujc si zbytnio kodem.
Praca wycznie w widoku projektu jest jednak luksusem przeszoci. Jeli mylisz powanie
o tworzeniu stron WWW i musisz korzysta z treci internetowych opartych o bazy danych,
musisz nauczy si pracowa rwnie z kodem strony.
2. Jeli to konieczne, kliknij przycisk Split.
Widok dzielony to jedna z najlepszych opcji. Dziki niemu mamy dostp do kodu, wic
moemy go w razie potrzeby edytowa rcznie, zostawiajc jednoczenie otwarty tradycyjny
widok projektu, w ktrym niektre operacje, np. edycj treci, mona przeprowadzi
znacznie atwiej, ni pracujc w widoku kodu.
Widok dzielony jest nieodzowny w pracy w witrynami dynamicznymi. Cho Dreamweaver
pozwala na wykonywanie wielu zada przy uyciu kreatorw serwera oraz wbudowanych
wizualnych generatorw SQL, to wci bdziemy zmuszeni edytowa kod bezporednio.
Stwierdzimy take, e niektre operacje o wiele szybciej mona wykona w widoku kodu ni
w widoku projektu, a przy okazji nauczymy si kodu. Zakadam, e skoro czytasz t ksik,
to znasz ju HTML, moge jednak zapomnie o niektrych szczegach. Moesz np. nie pamita
wszystkich atrybutw danego znacznika. Widok dzielony pomoe Ci opanowa HTML.
42

Oficjalny podrcznik
Niech od tej chwili (oraz we wszystkich przyszych projektach) widok dzielony stanie si
Twoim widokiem domylnym. Unikaj korzystania wycznie z widoku kodu lub widoku
projektu, chyba e masz ku temu okrelony powd. A jeli tak, to pamitaj, aby po zakoczeniu
przeczy si z powrotem do widoku dzielonego.
Wszystkie problemy wymienione w nastpnych krokach tego zadania mona zauway
tylko posugujc si widokiem kodu nie s widoczne w widoku projektu.
LEKCJA 1.
43
Inn korzyci pracy w widoku dzielonym jest moliwo atwego odnalezienia fragmentu kodu
w widoku kodu przez klikniecie odpowiedniego obiektu w widoku projektu. Dla przykadu, aby
zobaczy kod dla danego rysunku, naley go klikn. Powizany z nim kod HTML zostanie wyrodkowany w oknie i podwietlony w widoku kodu. Jest to szczeglnie przydatne w przypadku
stron skadajcych si z setek linii kodu.
3. Jeli to konieczne, wcz numeracj wierszy w widoku kodu, wybierajc z menu View (Widok)
> Code View Options (Opcje widoku kodu) > Line Numbers (Numeracja wierszy).
Moesz rwnie wcza i wycza numeracj, klikajc przycisk Line Numbers na pasku Coding
(Kodowanie) umieszczonym pionowo po lewej stronie widoku kodu.
Takie ustawienie powoduje wywietlenie numeracji wierszy obok kodu w czci ekranu
zawierajcej widok kodu. Numeracja wierszy uatwia wskazywanie innym czci kodu (w tej
ksice bd do czsto korzysta z numeracji wierszy). Uatwia to rwnie diagnozowanie
bdw, gdy w razie ich wystpienia ASP, ColdFusion i PHP wysyaj komunikaty o bdzie,
wskazujce numer wiersza kodu, ktry spowodowa problem.
4. Sprawd zgodno witryny z przyjtymi zwyczajami dotyczcymi dostpnoci.
Przez wiele lat twrcy WWW nie zwracali uwagi na potrzeby osb, ktrym niepenosprawno
utrudnia korzystanie z witryn WWW. Przykadowo uytkownicy niewidomi lub sabo
widzcy, ktrzy nie s w stanie odczyta treci witryny, nie maj dostpu do jej zawartoci.
Jak wiadomo, wiksz cz zawartoci witryn stanowi tekst, stworzono wic specjalne
przegldarki z funkcj lektora ekranowego, sucego do odczytywania na gos treci strony
WWW. Jednak z lektorami ekranowymi jest ten kopot, e nie potrafi one artykuowa
treci wizualnych, takich jak grafika. Jeli grafiki te przekazuj jakie wane informacje
dotyczce witryny a w wikszoci przypadkw tak jest wwczas uytkownicy korzystajcy
z lektorw ekranowych nie bd mieli dostpu do tych informacji.
Prostym sposobem umoliwiajcym lektorom ekranowym przeczytanie wszystkich informacji
na stronie jest dodanie podpisu tekstowego opisujcego zawarto rysunku. Jeli dodamy
opis do kadego rysunku zarwno do treci graficznych (takich jak diagram), jak i zwykych
elementw dekoracyjnych czy nawet sucych do tworzenia odstpw uytkownicy nigdy
nie bd musieli si zastanawia, czy nie pominli jakiej istotnej informacji.
Moemy to zrealizowa w kodzie przez dodanie do kadego rysunku atrybutu doczajcego
alternatywny opis tekstowy. Atrybutem tym jest alt. Aby go uy, naley do kadego
znacznika <img> w dokumencie doda atrybut alt="Opis rysunku". Lektor ekranowy odczyta
na gos opis alt, dziki czemu uytkownik bdzie wiedzia, co znajduje si na rysunku
przedstawionym na nastpej stronie.
Gdy przewiniemy biecy dokument do wierszy 11. i 12., zobaczymy dwa rysunki w pierwszym
wierszu tabeli. Jest to obrazek z logiem Newland Tours oraz pojedyncza grafika zawierajca
trzy zdjcia (pla, dungl i meczet). Jak widzimy, nie ma tu atrybutw alt, co oznacza,
e rysunki te s niedostpne dla uytkownikw przegldajcych stron za pomoc lektorw
ekranowych.
44

Oficjalny podrcznik
Dodanie atrybutu alt do rysunku to nie tylko kwestia dostpnoci. Dla przykadu, aby uczyni
stron bardziej przystpn, moemy w jej grnej czci umieci skrty klawiaturowe umoliwiajce
uytkownikom przejcie do treci strony z pominiciem paskw nawigacyjnych. Kolejn cech kodu,
ktra pogarsza dostpno strony, jest naduywanie tabel HTML. Cho tabele same w sobie nie
blokuj dostpu, to ich naduywanie dzieli zawarto strony i lektory ekranowe mog mie trudnoci z prezentacj jej treci w logicznej kolejnoci.
Nadrzdnym celem dostpnoci jest zapewnienie wszystkim uytkownikom jednakowego
dostpu do caoci witryny. Szczegowe omwienie zagadnienia dostpnoci wykracza poza
zakres tej ksiki, ale na ten temat mona dowiedzie si wicej na stronie bdcej tumaczeniem
jednego z dokumentw inicjatywy majcej na celu tworzenie szeroko dostpnych stron
(WAI): http://www.netresolve.pl/WAI/.
5. W czci projektu w widoku dzielonym kliknij gdziekolwiek tekst Mapa witryny i spjrz na
odpowiadajce mu znaczniki. Podobnie kliknij gdziekolwiek napis Modzie na tropach Majw

i przyjrzyj si znacznikom.
atwo tu zauway sposb sformatowania tekstu. Na stronach tych do caego tekstu zastosowano
domylny styl przegldarki. W wikszoci przegldarek tekst wywietlany jest w kolorze czarnym,
czcionk Times New Roman. Wyjtkiem s odnoniki, ktre domylnie wywietlane s w kolorze
niebieskim (nieodwiedzone) i fioletowym (odwiedzone). Polegajc na ustawieniach domylnych,
Newland Tours nie jest w stanie promowa swojej marki za pomoc przypisanej do niej stylistyki.
Jako twrca stron internetowych wiesz, e za pomoc arkuszy stylw CSS moesz szybko i atwo
zapewni odpowiedni wygld caej witryny, co dodatkowo uczyni j atwiejsz w utrzymaniu.
W nastpnym rozdziale utworzymy arkusz stylw CSS i zastosujemy go do tej witryny.
Ocena witryny: procesy biznesowe

Wikszo prac polegajcych na przebudowie witryny ma miejsce wwczas, gdy aktualna wersja
serwisu przestaje spenia wymagania biznesowe jej waciciela. Oto kilka powszechnych przykadw
niezgodnoci witryny z wymaganiami biznesowymi:
Zagmatwana nawigacja. Uytkownicy witryny nie mog odnale tego, czego szukaj.
LEKCJA 1.
45
Aktualizowanie witryny stao si zbyt trudne. Wiele maych firm nie posiada rozbudowanych
dziaw informatycznych, ktre zajmowayby si aktualizacj ich witryn. Waciciele

niewielkich firm mog stan przed koniecznoci aktualizacji zawartoci witryny,
lecz nie posiadaj do tego odpowiedniej wiedzy i narzdzi. Firma przestaje dba o witryn
lub zmuszona jest do wydawania nieproporcjonalnie duych sum na opacenie personelu
informatycznego.
Przestarzay wygld. Projekt graficzny, podobnie jak moda, przechodzi swoje cykle i to,
co byo szczytem nowoczesnoci kilka lat temu, dzi utracio ju powiew wieoci.
Przestarzay wygld przekazuje zy komunikat do odbiorcw docelowych.
Firma pragnie przenie do internetu pewne usugi, obecnie wiadczone w inny sposb.
Wiele firm pragnie, aby ich witryny dostarczay uytkownikom wyczerpujce informacje,
gdy powoduje to zmniejszenie liczby zapyta telefonicznych. Dla przykadu wiele
przedsibiorstw umieszcza na swoich witrynach bazy wiedzy w celu zmniejszenia liczby
pocze telefonicznych do dziau obsugi technicznej, podczas gdy inne publikuj cenniki
i organizuj sprzeda przez internet, aby ograniczy ilo telefonw w tych sprawach i (lub)
zapewni caodobow obsug bez opacania caonocnej pracy personelu.
Firma rozszerza dziaalno lub zmienia sw ofert. Jeli mamy do czynienia z cakowicie
nowym rodzajem produktw lub usug, witryna WWW powinna to odzwierciedla. W takich
sytuacjach dodanie do istniejcej strony jednego czy dwch akapitw nie zaatwi sprawy.
Witryna potrzebuje wielu nowych stron, wymaga nowej mapy witryny, systemu
nawigacyjnego itd.
Nie jest to oczywicie wyczerpujca lista, ale ilustruje niektre ze zwizkw czcych procesy biznesowe z witrynami WWW. Zwykle klient chce aktualizacji witryny z wielu tego rodzaju powodw. Mona wrcz stwierdzi, e to wanie te informacje kieruj caym procesem przebudowy witryny. Powinny one umoliwi Tobie i Twojemu klientowi okrelenie zakresu aktualizacji oraz
wszystkich szczegowych dziaa, jakie naley przeprowadzi.
Powi troch czasu na zebranie informacji od klienta. Niektrzy klienci maj problemy z okreleniem swoich potrzeb. Jeeli nie skonisz ich do podania informacji, przygotowana przez Ciebie witryna moe nie spenia ich oczekiwa. Nie spodziewaj si, e bd na tyle samokrytyczni, aby
przyzna, e nie czego nie przewidzieli. To na Tobie spoczywa zadanie uzyskania z gry wszystkich potrzebnych danych.
W tym zadaniu przyjrzymy si witrynie w jej obecnej formie. Odegram rol klienta i wska kilka
mankamentw witryny. W ten sposb zadanie to bdzie przedstawia spotkanie z klientem oraz
pomoe nam zidentyfikowa obszary, w ktrych witryna nie wspgra z potrzebami i procesami
biznesowymi. Gdy problemy te zostan rozpoznane, rozwizania okrelone zmiany i ulepszenia, ktrych musimy dokona w witrynie zaczn si by atwiejsze do okrelenia. Proces aktualizacji witryny musi kierowa si przede wszystkim potrzebami klienta, a nie innymi kwestiami,
jak np. Twoj wasn opini na temat podanego ksztatu witryny, czy co jest nagminnym
przypadkiem najnowsz dostpn technologi.
46

Oficjalny podrcznik
1. Przy wywietlonej stronie index.htm nacinij klawisz F12, aby otworzy stron w przegldarce.
Skrt klawiszowy F12 automatycznie otwiera aktywny plik w przegldarce. Czsto bdziemy
zmuszeni do korzystania z tego skrtu klawiszowego, gdy jak wiadomo, strona wywietlana
przez przegldark czsto rni si od tego, co widzimy w programie Dreamweaver, zwaszcza
jeli pracujemy na zawartoci ulegajcej zmianom. Skrt F12 jest jednym z najczciej
uywanych skrtw klawiszowych w programie Dreamweaver.
2. Przejrzyj stron gwn.
Pod wzgldem graficznym projekt witryny nie jest zy. Klient nie zamierza dokonywa
gruntownej zmiany wygldu. Ten konkretny projekt jest te wykorzystywany w kilku
drukowanych reklamach, wic klient chciaby, aby taka graficzna forma witryny bya
kojarzona z mark. Jak ju widzielimy, typografia witryny wymaga poprawek.
Wykorzystamy w tym celu CSS.
Na tej stronie, poza spraw projektu, wystpuje wany problem praktyczny. Kolumna
zatytuowana Dziennik podrnika wymaga aktualizacji mniej wicej raz w tygodniu. Czasem
aktualizuje j waciciel, innym razem robi to agenci biura podry. Nie kady z nich wie,
jak pracowa z kodem lub jak przesya na witryn pliki. Obecnie kolumna ta pisana jest
w procesorze tekstu i przekazywana agentowi, ktry po dokonaniu korekt umieszcza j
w witrynie. Niestety, z powodu tego wskiego garda witryna nie moe by aktualizowana
natychmiast szczeglnie wtedy, gdy agent jest zajty lub nie ma go w biurze. Klient chciaby,
aby cotygodniowa publikacja kolumny Dziennik podrnika bya na tyle atwa, by kady mg
w tym uczestniczy bez naraania bezpieczestwa witryny.
3. Kliknij odnonik O firmie na pasku nawigacyjnym po lewej stronie ekranu.
Poza omawian wczeniej kwesti czcionek, strona ta nie wymaga zmian. Jej zawarto
niemal nigdy si nie zmienia, a klient jest zadowolony z jej obecnej postaci. Pomijajc
uycie CSS, jest to jedyna strona, ktrej w ogle nie bdziemy zmienia.
LEKCJA 1.
47
4. Kliknij odnonik Znajd wyjazd na pasku nawigacyjnym u gry ekranu. Przewijaj stron
w gr i w d lub skorzystaj z wewntrznych odnonikw nawigacyjnych na grze strony,

aby wyszuka wycieczk.
Strona ta jest stwarza wiele rnych problemw.
48

Oficjalny podrcznik
Zacznijmy od kopotu, jaki klient ma z t stron. Ponownie mamy do czynienia ze stron

trudn w zarzdzaniu, gdy Newland Tours nie posiada dziau informatycznego. Z punktu
widzenia klienta jest to powane utrudnienie, poniewa zawarto tej strony jest dla
uytkownikw gwnym rdem informacji o wycieczkach. Problem w tym, e wycieczki si
zmieniaj niektre s dodawane, inne usuwane. Co gorsza, ceny zmieniaj si tak czsto,
e klient zdecydowa si nie podawa ich na stronie, zdajc sobie spraw z trudnoci
w aktualizowaniu cen i z konsekwencji wynikajcych z ich nieaktualnoci. W dodatku
Newland Tours oferuje kilka wycieczek wicej, ni wymieniono na stronie, ale nikt nie mia
moliwoci ich dopisania. Klient ponosi straty spowodowane trudnociami w utrzymaniu
witryny WWW.
Z punktu widzenia uytkownika, strona ta nie jest zbyt uyteczna. Jest ona niezmiernie duga
i trudno odnale interesujc nas wycieczk. Nie ma innego sposobu filtrowania wycieczek
poza wyszukiwaniem ich pod wzgldem wymienionych rejonw wiata. Dla przykadu Newland
Tours ma w swojej ofercie kilka wycieczek wymagajcych duego wysiku fizycznego;
uytkownicy nie maj moliwoci wyszukania tylko tych wycieczek. No i oczywicie fakt,
e na stronie nie podano cen, powoduje, i uytkownicy nie maj innego sposobu poznania
ceny wycieczki poza wykonaniem telefonu do firmy.
Jako twrcy stron WWW, powinnimy spostrzec, e dua ilo informacji na tej stronie
powoduje powtarzanie si pewnej staej struktury: kada wycieczka posiada tytu, rysunek,
opis itd. Taka przewidywalna struktura powinna nasun nam myl o przechowywaniu
tych informacji w bazie danych i pobieraniu ich na bieco. Baza danych uatwi utrzymanie
aktualnoci strony i stworzy moliwo filtrowania informacji w oparciu o rne kryteria,
co zwikszy uyteczno tej strony.
5. Kliknij przycisk Opisy krajw na pasku nawigacyjnym u gry ekranu.
LEKCJA 1.
49
Niemal kady problem wystpujcy na poprzedniej stronie wystpuje rwnie tutaj. Strona
jest trudna w utrzymaniu i personel Newland Tours ma trudnoci w dodawaniu kolejnych
krajw, do ktrych firma oferuje wycieczki. Uytkownicy mog bdnie zakada, e
Newland Tours nie oferuje adnej wycieczki, powiedzmy, do Woch, poniewa na licie nie
ma tego kraju. Ale skoro Newland Tours organizuje wycieczki do Woch, wwczas witryna
wprowadza uytkownikw w bd.
Problem maj take uytkownicy. Niektrzy chcieliby dowiedzie si czego o krajach
obsugiwanych przez Newland Tours i zobaczy tylko te, ktrymi s zainteresowani.
I znw, prosty mechanizm filtrujcy znacznie poprawiby sytuacj.
Kolejn spraw zwizan z wygod uytkowania jest to, e aby przej z opisu parku
narodowego Etosha w Namibii do profilu tego kraju, uytkownik musi przewin stron
do paska nawigacyjnego, klikn odnonik Opisy krajw, a nastpnie przewin stron w d
do opisu Namibii. Byoby wygodniej, gdyby istnia odnonik automatycznie kierujcy
uytkownika z informacji o parku narodowym Etosha do opisu Namibii. Ale to wymaga
zastosowania dodatkowego kodowania przy uyciu statycznego kodu HTML.
6. Wr do paska nawigacyjnego i kliknij odnonik Kontakt z nami.
Jest to plik, ktry utworzylimy we wczeniejszej lekcji, aby zastpi brakujc stron.
Jest to prosta tabela, ktra rzadko ulega zmianie i jest do atwa w uyciu. Jednak klient nie yczy
sobie, aby na stronie pojawiay si adresy e-mail: po tygodniu od opublikowania strony z tym adresem
spamerzy rozpoczli zasypywanie konta ofertami rodkw odchudzajcych, redukcji dugw i innymi mao przyjemnymi wiadomociami.
50

Oficjalny podrcznik
Waciciel chciaby zapewni klientom kontakt z Newland Tours bez koniecznoci posiadania programu pocztowego oraz w taki sposb, aby nie pozwoli spamerom na zamiecanie konta pocztowego.
Rozwizaniem bdzie tu oczywicie uycie formularza WWW. Formularz bdzie tu doskonay,
poniewa nie wymaga wiele od uytkownika oraz pozwala ukry adres e-mail, co uniemoliwi robotom spamerskim (automatycznym programom przeszukujcym sie WWW w poszukiwaniu
adresw e-mail dla spamerw) odnalezienie adresw poczty elektronicznej agentw Newland Tours. Skrypty obsugujce formularze umoliwiaj ponadto przesyanie wiadomoci pod rne adresy, w zalenoci od ich treci. Przykadowo, jeli formularz poprosi uytkownika o wybr regionu, moemy utworzy skrypt, ktry wyle wiadomo e-mail z formularza wycznie do agenta
specjalizujcego si w tym regionie. W tej ksice nie bdziemy tworzy takiego udogodnienia, ale
z czasem z pewnoci poznasz metody, jakimi mona to wykona.
Widoki na przyszo
Cho w tej lekcji zaprezentowalimy jedynie statyczn witryn WWW, zrobilimy wicej, ni mylisz. Przeszlimy przez etap, ktry jest zbyt czsto skracany, co przynosi fatalne skutki. Dokonalimy
oceny witryny, cznie z kodem, procesami biznesowymi i (porednio) uytecznoci. Wiemy, co
dalej robi. Dla uatwienia niej moesz zobaczy podsumowanie celw aktualizacji projektu witryny:
poprawienie dostpnoci i uytecznoci witryny,
uycie stylw CSS w celu oglnej poprawy wygldu witryny,
przechowywanie w bazie danych zawartoci strukturalnych i (lub) czsto aktualizowanych,
dostarczenie mechanizmw wyszukiwania i (lub) filtrowania, pozwalajcych uytkownikom
na atwiejsze odnalezienie wycieczki i opisu kraju,

utworzenie formularzy WWW umoliwiajcych uytkownikom kontakt z pracownikami
Newland Tours, bez potrzeby korzystania z poczty elektronicznej,

utworzenie szeregu formularzy WWW pozwalajcych pracownikom Newland Tours dodawa,
aktualizowa i usuwa zawarto przechowywan w bazie danych (pamitajmy, e zawarto

przechowywana w bazie danych jest rwnie materiaem rdowym pojawiajcym si
w witrynie WWW).
Jeli niektre z tych celw brzmi nieco abstrakcyjnie, prosz przyjrze si ostatecznej wersji witryny,
jaka pojawi si pod koniec ksiki.
1. Wpisz w przegldarce adres http://www.allectomedia.com/newland_dynamic/.
Strona gwna powinna tu wyglda prawie tak samo jak wersja, ktr wanie otworzylimy
w programie Dreamweaver1. Jednak wystpuj tu znaczne rnice niewidoczne na pierwszy
rzut oka. Dla przykadu, kolumna Travelers Journal (Dziennik podrnika) jest teraz pobierana
z bazy danych i formatowana w locie. Poza tym, w tej wersji strony formatowanie tekstu jest
bardziej estetyczne.
1
Oczywicie z t rnic, e jest to angielskojzyczna wersja witryny przyp. tum.

LEKCJA 1.
51
2. Kliknij odnonik Find Tours (Znajd wyjazd) na pasku nawigacyjnym po lewej stronie.
Zamiast wywietlenia strony Find Tours, jak oczekiwalimy, pojawi si ekran logowania.
Poprzednia witryna nie posiadaa takiej opcji. Zostaa ona dodana, gdy klient chcia, aby
uytkownicy logowali si przed dostpem do witryny. W ten sposb klient ma moliwo
poznania uytkownikw oraz skontaktowania si z nimi w celu przekazania ofert i promocji.
Moemy si zalogowa, wykorzystujc nastpujce dane:
Email address: osiris@allectomedia.com
Password: osiris
Jest to fikcyjne konto utworzone w celu zapewnienia czytelnikom dostpu do witryny bez potrzeby
rejestracji. Taki adres nie istnieje, wic prosimy o niewysyanie tam wiadomoci (zobacz pierwszy
rysunek na nastpnej stronie).
Po autoryzacji zostaniemy przekierowani do strony, ktr wybralimy wczeniej.

3. Zapoznaj si z witryn wedug uznania.
Od tego miejsca pozwol Ci na samodzielne poznawanie witryny. Zobaczysz, e oferuje ona

kilka metod filtrowania zawartoci, zawiera odnoniki do treci pokrewnych (np. moliwo
przejcia od wycieczki do opisu kraju), a nawet kalkulator cen.
52

Oficjalny podrcznik
atwo zauway, e dzia Admin jest niedostpny z konta osiris@allectomedia.com.

Jak zobaczymy pniej, dzia ten zawiera system zarzdzania treci, czyli formularze
WWW umoliwiajce pracownikom Newland Tours aktualizowanie zawartoci witryny.
LEKCJA 1.
53
Na zaczonym zrzucie ekranu widzimy jeden z takich formularzy. Korzystajc z niego, pracownicy
Newland Tours mog utworzy nowy wpis kolumny Travelers Journal przez wypenienie formularza
zgodnie z widniejcymi na stronie instrukcjami. Gdy czonek personelu kliknie przycisk Submit (Wylij),
do bazy danych zostanie dodany nowy wpis, a pracownik zostanie przekierowany na stron gwn witryny, gdzie stwierdzi, e kolumna zostaa zaktualizowana na dostpnej publicznie witrynie WWW
w uamku sekundy, jaki upyn od nacinicia przycisku Submit do wczytania strony gwnej.
Czego si nauczylimy?
W czasie tej lekcji:
zdefiniowalimy witryn statyczn w programie Dreamweaver (strony 24 29),
utworzylimy prost, statyczn stron (strony 29 33),
sformatowalimy stron (strony 33 41),
ocenilimy istniejcy kod i zidentyfikowalimy kilka zwizanych z nim problemw
(strony 42 45),
porwnalimy potrzeby biznesowe klienta z aktualn witryn i zidentyfikowalimy kilka
niedocigni (strony 45 51),

zaplanowalimy kilka poprawek, ktre lepiej speni oczekiwania klienta (strony 51 54),
przyjrzelimy si niektrym z tych zmian, aby uzyska lepsze pojcie na temat dziaa,
jakie podejmiemy w dalszej czci ksiki (strony 51 54).
54

Oficjalny podrcznik

Macromedia Dreamweaver 8 Z ASP, PHP I ColdFusion. Oficjalny Podręcznik

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Macromedia Dreamweaver 8 Z ASP, PHP I ColdFusion. Oficjalny Podręcznik

Uploaded by

Copyright:

Available Formats

IDZ DO

Lekcja 2. Przygotowanie statycznych stron HTML i CSS ............................................................................................... 55

Lekcja 3. Dynamiczne witryny WWW ................................................................................................................................... 85

Praca na serwerze lokalnym .....................................................................................................................................94

Lekcja 4. Przesyanie danych midzy stronami ............................................................................................................ 131

Lekcja 5. Wysyanie wiadomoci e-mail z formularza WWW ................................................................................. 153

Lekcja 6. Budujemy kalkulator cen wycieczek ............................................................................................................. 177

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Budujemy formularz ...............................................................................................................................................181

Lekcja 7. Bazy danych w WWW ............................................................................................................................................ 201

Lekcja 8. Kalkulator cen cig dalszy .......................................................................................................................... 239

Lekcja 9. Filtrowanie i wywietlanie danych .................................................................................................................. 259

Wstawianie dynamicznej zawartoci strony ........................................................................................................274

Lekcja 10. Tworzenie strony zawierajcej opisy wyjazdw ................................................................................... 287

Lekcja 11. Budowanie interfejsw wyszukiwania ....................................................................................................... 317

Lekcja 12. Uwierzytelnianie uytkownikw ................................................................................................................... 349

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Lekcja 13. Zarzdzanie treci za pomoc formularzy ............................................................................................. 371

Lekcja 14. Tworzenie stron aktualizujcych dane ...................................................................................................... 389

Skorowidz ...................................................................................................................................................................................... 453

utrzymywania istniejcych witryn w obliczu zmieniajcych si standardw, nowych

oznacza, e strony WWW musz w locie reagowa na dziaania uytkownika.

obiegiem wewntrz witryny, ktre pozwalaj przenie zadania zwizane z zarzdzaniem

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

sposb uzupeni witryn o opcje zwikszajce dostpno,

Definiowanie statycznej witryny

W tym folderze przechowywana bdzie lokalna kopia witryny.

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Po wczytaniu plikw do programu Dreamweaver naley je edytowa wycznie w tym programie.

witryn w programie Dreamweaver).

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Wikszo profesjonalnych witryn dziaa w na trzech poziomach. Lokalna witryna zawiera

9. W kolejnym ekranie wybierz z menu rozwijanego pozycj None (Brak).

10. Kliknij przycisk Next. Przejrzyj podsumowanie i kliknij Done (Gotowe).

Na zakoczenie pojawi si okno dialogowe wskazujce, e Dreamweaver tworzy bufor

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Tworzenie strony Kontakt z nami

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

5. Za pomoc myszy zaznacz wszystko od sw O firmie a do koca strony, cznie z opisem

rysunku. Nacinij klawisz Delete.

na jednoczesny widok kodu i projektu (zwanym dalej widokiem dzielonym), klikajc

7. Z menu rozwijanego Format w palecie Properties wybierz Paragraph (Akapit).

Zauwa, e w widoku kodu znaczniki <h1></h1> zastpione zostay znacznikami <p></p>.

wybierz Edit > Paste (Wklej).

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Umiecilimy ju tre na nowej stronie i moemy teraz przystpi do jej sformatowania.

Formatowanie strony Kontakt z nami

Podrna 1, 00-001 Warszawa, E-mail, info@newlandtours.pl, 022 oraz Na zdjciu.

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

3. W widoku projektu umie punkt wstawiania gdziekolwiek w obrbie pierwszego akapitu

aby utworzy podzia wiersza.

interaktywne rysunki Fireworks HTML, efekt rollover (zmiana rysunku po najechaniu

z folderu images. Kliknij OK.

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

Po klikniciu przycisku OK pojawi si okno dialogowe z prob o podanie dodatkowych

description (Dugi opis) pozostaw puste. Kliknij OK.

na Left (Do lewej).

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

MACROMEDIA DREAMWEAVER 8 Z ASP, PHP I COLDFUSION

15. Kliknij trzykrotnie gdziekolwiek w wierszu podpisu, a po jego zaznaczeniu zastosuj tu

kursyw za pomoc palety Properties.

Kursywa pozwala odrni podpis od reszty tekstu.

Ocena witryny: kod