Id do

Spis treci
Przykadowy rozdzia
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

Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912010

Adobe Dreamweaver CS5/

CS5 PL. Oficjalny podrcznik
Autor: Adobe Creative Team
Tumaczenie: Joanna Zatorska
ISBN: 978-83-246-2916-9
Tytu oryginau: Adobe Dreamweaver CS5 Classroom in a Book
Format: B5, stron: 448

Sprawdzone materiay szkoleniowe prosto od ekspertw Adobe!

Naucz si tworzy statyczne i dynamiczne strony WWW
Zobacz, jak wstawia grafik, tekst i animacje
Twrz rozbudowane, interaktywne aplikacje internetowe
Umie stron na serwerze i sprawnie ni zarzdzaj
Pojawienie si Dreamweavera w 1997 roku byo dla sieci prawdziw rewolucj! Od tego momentu
tworzenie profesjonalnych stron internetowych stao si dostpne dla wszystkich, nawet dla tych
uytkownikw, ktrzynie maj pojcia o jzykach programowania i pisaniu kodu. Dreamweaver
umoliwia bowiem projektowanie stron WWW w trybie graficznym, zapewniajc jednak moliwo
penej kontroli nad kodem rdowym. Dziki temu szybko i bez problemu (a co najwaniejsze,
samodzielnie) moesz dzi zbudowa i skonfigurowa w peni funkcjonaln statyczn lub
dynamiczn witryn. Mao tego! Z tym programem moesz wzbogaca gotowe strony o grafik,
tekst i animacje, tworzy interaktywne aplikacje internetowe oraz umieszcza na serwerze witryny
WWW i sprawnie nimi zarzdza. A w najnowszej wersji znajdziesz take mocno ulepszone,
zaktualizowane pocztkowe ukady CSS, ktre jeszcze bardziej uatwi Ci projektowanie stron
i zapewni pen zgodno z sieciowymi standardami.
Dziki tej ksice opanowanie moliwoci Dreamweavera nie sprawi Ci najmniejszych trudnoci.
Ta zawierajca oryginalne materiay szkoleniowe Adobe ksika ze znanej i bestsellerowej serii
Oficjalny podrcznik obejmuje siedemnacie praktycznych lekcji obsugi programu, przejrzyste
instrukcje krok po kroku i pliki umoliwiajce sprawne wykonanie opisanych wicze.
Dziki niej bez problemu zaczniesz porusza si w przestrzeni roboczej programu, a take
konfigurowa i dostosowywa j do realizowanych zada. Byskawicznie opanujesz podstawy
jzyka HTML i CSS oraz najlepsze sposoby na tworzenie kodu za pomoc Dreamweavera. Dowiesz
si, jak projektowa makiety czy formularze i tworzy szablony witryn internetowych, a potem
zobaczysz, jak pracowa z tekstem, listami, tabelami oraz elementami graficznymi. Ju wkrtce
zaczniesz samodzielnie projektowa interaktywne i dynamiczne strony WWW, bez trudu
umieszcza na nich animacje we Flashu oraz publikowa gotowe serwisy w internecie. Ponadto
kada z zawartych w podrczniku lekcji koczy si podsumowaniem umoliwiajcym sprawdzenie
i gruntowne utrwalenie umiejtnoci zdobytych w trakcie lektury.
Przed Tob siedemnacie praktycznych lekcji tworzenia stron za pomoc Adobe Dreamweavera CS5.
Opanuj Dreamweavera CS5 poznaj najszybszy sposb
na stworzenie wasnej, profesjonalnej strony internetowej!

spIs trecI
Wstp
Oksice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Wymagania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Instalowanie programu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Kopiowanie materiaw znajdujcychsi naserwerze FTP . . . . . . . . . . . . . . . . . .12
Zalecana kolejno wykonywania wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Szybki start. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Konfigurowanie przestrzeni roboczej. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Polecenia w systemie Windows i Mac OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Pomoc dotyczca programu Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Sprawdzanie dostpnoci aktualizacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Dodatkowe materiay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Certyfikaty Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Przyspiesz swoj prac dziki Adobe CS Live . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

dOstOsOWanIe prZestrZenI rObOcZej

20

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

Rzut oka na przestrze robocz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Przeczanie trybu i podzia widoku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Praca z panelami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
roboczej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Wybr ukadu przestrzeni roboczej.
Dostosowywanie paskw narzdziowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Dostosowywanie ustawie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Tworzenie wasnych skrtw klawiszowych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Obsuga panelu Properties (Waciwoci) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34

SPIS TRECI

DW-CS5_book.indb 4

2010-12-09 12:33:59

pOdstaWy jZyKa htML

38

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Czym jest HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Pocztki HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Tworzenie wasnego kodu HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Stosowanie formatowania wierszowego. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Najczciej uywane znaczniki kodu HTML 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49
Dokd zmierza HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52

pOdstaWy css

54

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54

Czym s kaskadowe arkusze stylw CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Formatowanie za pomoc HTML a CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Domylne ustawienia HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62
Formatowanie obiektw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65
No i wreszcie grupowanie, klasy oraz ID! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

4 Wstp dO prOGraMU dreaMWeaver cs5

72

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72

Konfigurowanie serwisu w programie Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . .74
Obsuga ekranu powitalnego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76
Wybr szablonu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Zapisywanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Zmiana tytuu strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Zmiana nagwkw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Wstawianie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Wstawianie elementw graficznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Wybieranie i edytowanie stylw CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84
Zmiana koloru, kroju i wielkoci czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88
Obsuga panelu Properties (Waciwoci) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Wywietlanie podgldu strony w widoku aktywnym . . . . . . . . . . . . . . . . . . . . . . . .93
Wywietlanie podgldu strony w przegldarce . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94

AdobE dREAmwEAvER CS5/CS5 PL. ofICjALny PodRCznIk

DW-CS5_book.indb 5

2010-12-09 12:34:00

prOjeKtOWanIe MaKIet

98

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98

Podstawy projektowania stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Tworzenie miniatur i schematw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Zmiana gotowego szablonu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Wstawianie grafiki w tle nagwka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Tworzenie nowych elementw <div> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111
Zmiana szerokoci i koloru ta strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Zmiana istniejcej zawartoci i formatowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Wstawianie obrazw tymczasowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Wstawianie tekstu tymczasowego. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Edycja stopki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Testowanie zgodnoci przegldarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

KasKadOWe arKUsZestyLW (css)

122

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

Podgld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Obsuga panelu CSS Styles (Style CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Tworzenie nowej reguy CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Tworzenie interaktywnego menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Modyfikowanie zachowa czy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Tworzenie sztucznych kolumn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Przenoszenie regu dozewntrznycharkuszy stylw . . . . . . . . . . . . . . . . . . . . . . .141
Tworzenie arkusza stylw napotrzeby innych nonikw . . . . . . . . . . . . . . . . . . 142

7 tWOrZenIe sZabLOnW

150

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Tworzenie szablonw na podstawie gotowych ukadw strony
strony. . . . . . . . . . . . 153
Tworzenie regionw edytowalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Tworzenie stron potomnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Aktualizacja szablonu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Biblioteki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Doczenia po stronie serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

SPIS TRECI

DW-CS5_book.indb 6

2010-12-09 12:34:00

praca Z teKsteM, LIstaMI I tabeLaMI

176

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Importowanie materiau tekstowego z innych rde . . . . . . . . . . . . . . . . . . . . . 180
Tworzenie nagwkw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181
Tworzenie list. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Tworzenie wci tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Tworzenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Sprawdzanie pisowni w dokumencie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Wyszukiwanie i zastpowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

eLeMenty GraFIcZne

208

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Podstawy grafiki WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Wstawianie zdj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Dostosowanie pooenia obrazu za pomoc klas CSS . . . . . . . . . . . . . . . . . . . . . .217
Praca z panelem Insert (Wstaw) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Program Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Wstawianie plikw o niezgodnych formatach. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Inteligentne obiekty programu Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Kopiowanie i wklejanie grafiki zprogramu Fireworks i Photoshop . . . . . . . . . .227
Wstawianie obrazw metod przecignij i upu . . . . . . . . . . . . . . . . . . . . . . . . . 229
Korzystanie z panelu Properties (Waciwoci) do pracy z grafik . . . . . . . . . . 230

10

naWIGacja

234

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Podstawy czy hipertekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237
cza do stron nalecych dotego samego serwisu . . . . . . . . . . . . . . . . . . . . . . 240
Tworzenie czy w postaci elementu graficznego . . . . . . . . . . . . . . . . . . . . . . . . . 243
Tworzenie czy do stron zewntrznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Tworzenie czy e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
cza w obrbie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247
Tworzenie paska menu Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Umieszczanie menu Spry jakoelementu biblioteki. . . . . . . . . . . . . . . . . . . . . . . . 268
Sprawdzanie strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

AdobE dREAmwEAvER CS5/CS5 PL. ofICjALny PodRCznIk

DW-CS5_book.indb 7

2010-12-09 12:34:01

11

prOjeKtOWanIe InteraKtyWnych strOn WWW

276

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Kilka informacji o zachowaniach programu Dreamweaver . . . . . . . . . . . . . . . . 278
Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Stosowanie zachowa programu Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . .281
Tworzenie paneli harmonijkowych Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287

12

praca Z ObIeKtaMI prOGraMU FLash

294

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Zrozumie technologi Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Umieszczanie animacji Flash na stronie WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297
Wywietlanie filmw wideo przyuyciu technologii Flash . . . . . . . . . . . . . . . . . .301

13

prOjeKtOWanIe FOrMULarZy

306

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Oglne informacje o formularzach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Umieszczenie formularza na stronie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311
Wstawianie pl tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Tworzenie pl wyboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Przyciski opcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Tworzenie list. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327
Tworzenie przycisku wysyania danych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Okrelanie operacji formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331
Przesyanie danych za pomoc poczty elektronicznej . . . . . . . . . . . . . . . . . . . . . 333
Projektowanie stylw dla formularzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

14

praca Z danyMI On-LIne

342

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342

Tworzenie dynamicznej treci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Doczanie danych HTML oraz XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Wybr modelu serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Konfiguracja lokalnego serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Konfiguracja serwera testowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Tworzenie aplikacji wykorzystujcychbazy danych . . . . . . . . . . . . . . . . . . . . . . . .361

SPIS TRECI

DW-CS5_book.indb 8

2010-12-09 12:34:02

15 tWOrZenIe dynaMIcZnychstrOn WWW

370

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

Tworzenie stron WWW zapomocASP,ColdFusion oraz PHP . . . . . . . . . . . . . . 372
Tworzenie zestaww stron macierzystych i szczegowych . . . . . . . . . . . . . . . . .381
Tworzenie strony szczegowej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393

16

praca Z KOdeM

398

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

Przegld narzdzi trybu Code (Kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Zaznaczanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401
Zwijanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Rozwijanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Dodawanie nowego kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Korzystanie z narzdzia CodeNavigator (Nawigator kodu) . . . . . . . . . . . . . . . . 406
Dostp do trybu Live Code (Aktywny kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .407
Korzystanie z trybu inspekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Praca z plikami powizanymi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Wczanie trybu Split Code (Podziel kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411
Tworzenie komentarzy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411

17

pUbLIKOWanIe strOny W InternecIe

414

Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414

Konfigurowanie zdalnego serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Maskowanie folderw i plikw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Czynnoci kocowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Publikowanie strony w internecie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Synchronizacja serwisw lokalnych i zdalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . .431
Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434

AdobE dREAmwEAvER CS5/CS5 PL. ofICjALny PodRCznIk

DW-CS5_book.indb 9

2010-12-09 12:34:03

11

Projektowanie
interaktywnych
stron WWW
Tematyka lekcji
W trakcie tej lekcji zapoznasz si z narzdziami pozwalajcymi tworzy
interaktywne elementy stron WWW. Nauczysz si midzy innymi:

Wykorzysta zachowania programu Dreamweaver do utworzenia

obrazka z efektem rollover.

Tworzy panele harmonijkowe Spry.

Ukoczenie wicze opisanych w tej lekcji powinno zaj okoo 60 minut.
Przed przystpieniem do ich realizacji upewnij si, e skopiowae na dysk
twardy pliki dotyczce lekcji 11., w sposb opisany we Wstpie. Jeli
dopiero rozpoczynasz prac z ksik, zapoznaj si ze wskazwkami zawartymi w podrozdziale Wstpu zatytuowanym Szybki start.

276

DW-CS5_book.indb 276

2010-12-09 12:35:12

Program Dreamweaver pozwala utworzy

zaawansowane efekty interaktywne w postaci
zachowa oraz paneli harmonijkowych, dziki
platformie Adobe Spry.

277

DW-CS5_book.indb 277

2010-12-09 12:35:13

Kilka informacji
ozachowaniachprogramuDreamweaver
Zachowania w programie Dreamweaver to skrypty w jzyku JavaScript, ktre podejmuj okrelone dziaania na przykad powoduj otwarcie okna przegldarki po
wystpieniu okrelonego zdarzenia, takiego jak kliknicie lewym przyciskiem myszy.
Proces projektowania zachowa mona podzieli na trzy etapy:
1 Wskazanie elementu strony, ktry ma wywoywa okrelone zachowanie.
2 Wybranie okrelonego zachowania.
3 Konfigurowanie ustawie lub parametrw zachowania.
Zdarzenie wywoujce okrelone zachowanie najczciej opiera si na istnieniu pewnego cza, zarwno tekstowego, jak i graficznego. Do generowania zachowa wykorzystuje si zwykle puste cza, ktre nie powoduj wczytania innej strony internetowej;
takie cza mog zawiera adres w postaci krzyyka. Z pustych czy korzystalimy ju
w lekcji 10. Nawigacja. Zachowanie Swap Image (Zamie obraz), ktre zastosujemy
w biecej lekcji, nie wymaga obecnoci pustych czy, jednak nie naley zapomina
o ich utworzeniu w przypadku innych zachowa. Dreamweaver zwykle automatycznie
tworzy odpowiedni kod, jednake niekiedy konieczne jest samodzielne utworzenie
pustych czy, aby aktywowa niektre zachowania.
Uwaga:

Aby panel Behaviors

(Zachowania) by
aktywny, woknie
dokumentu musi
by otwarty
dowolnyplik.

278

Program Dreamweaver oferuje ponad 20 rnych zachowa, wszystkie mona skonfigurowa przy uyciu panelu Tag Inspector (Inspektor znacznikw). Aby go wywietli,
wydaj polecenie Window/Tag Inspector (Okno/Inspektor znacznikw). Jeli ta liczba
Ci nie satysfakcjonuje, moesz za darmo, lub za niewielk opat, pobra z internetu
setki dodatkowych zachowa. Duy wybr zachowa oferuje serwis Dreamweaver
Exchange, dostpny po klikniciu ikony Add Behavior (Dodaj zachowanie) ( )
wpanelu TagInspector (Inspektor znacznikw) i wybraniu opcji Get More Behaviors
(Pobierz wicej zachowa). Kiedy otworzy si serwis Adobe Marketplace & Exchange,
kliknij cze dotyczce programu Dreamweaver, aby wywietli pen list dostpnych
dodatkw izachowa.

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 278

2010-12-09 12:35:13

Serwis Adobe Marketplace & Exchange udostpnia ogromn ilo zasobw gotowych
do wykorzystania przez projektantw i deweloperw stron WWW. Mona tu znale
zarwno darmowe, jak i patne dodatki do programu Dreamweaver oraz innych aplikacji wchodzcych w skad pakietu Creative Suite.
Oto wybrane funkcje, jakie mona zrealizowa przy uyciu zachowa programu
Dreamweaver:

Otwarcie okna przegldarki.

Zmiana wywietlanego obrazu na inny i z powrotem, czyli tzw. efekt rollover.
Wytumienie obrazu lub czci strony.
Zwikszenie lub zmniejszenie elementu graficznego.
Wywietlenie komunikatu.
Zmiana tekstu lub innego elementu HTML w obrbie danego obszaru strony.
Wywietlanie i ukrywanie fragmentw strony.
Wywoanie niestandardowej funkcji w jzyku JavaScript.

Nie wszystkie zachowania s dostpne przez cay czas. Niektrych mona uy dopiero
wtedy, gdy na stronie bd obecne lub zaznaczone okrelone elementy, takie jak obrazy
czy cza. Na przykad zachowanie Swap Image (Zamie obraz) wymaga umieszczenia
na stronie przynajmniej jednego elementu graficznego w przeciwnym razie bdzie
ono niedostpne.
Kade zachowanie mona skonfigurowa przy uyciu odrbnego okna dialogowego,
oferujcego wszystkie niezbdne opcje i ustawienia. I tak na przykad okno dialogowe
zachowania Open Browser Window (Otwrz okno przegldarki) umoliwia wpisanie
adresu strony internetowej lub nazwy pliku, ktry ma zosta otwarty w nowym oknie,
oraz okrelenie wysokoci, szerokoci i innych atrybutw tego okna. Po zdefiniowaniu
parametrw wybranego zachowania zostaje ono dodane do listy zachowa w panelu
Behaviors (Zachowania) wraz z domylnym zdarzeniem, ktre je uaktywni. Wybrane
parametry mona zmieni w dowolnym momencie.
Zachowania programu Dreamweaver s bardzo elastyczne. Jedno zdarzenie moe
wyzwala wiele rnych zachowa, co pozwala na przykad zastpi jeden obrazek
innym, zmieniajc jednoczenie tekst podpisu pod tym obrazkiem a wszystko to po
jednym klikniciu przycisku myszy. Cho uytkownikowi strony moe si wydawa,
ezmiany te zaszy jednoczenie, to jednak w rzeczywistoci zachowania nastpuj
jedno po drugim. Po zdefiniowaniu zdarzenia, ktre ma wywoa kilka rnych zachowa, moesz ustawi kolejno ich realizacji.

Przegld ukoczonego projektu

W pierwszej czci lekcji bdziemy pracowa nad now stron oferujc wycieczki
organizowane przez GreenStart. Przed przystpieniem do realizacji wicze warto
zapozna si z wygldem ukoczonego projektu w przegldarce internetowej.
1 Uruchom program Adobe Dreamweaver CS5.
2 Jeli to konieczne, nacinij klawisz F8, aby otworzy panel Files (Pliki), i wybierz
serwis DW CIB z listy serwisw.
Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 279

279

2010-12-09 12:35:13

3 Wywietl zawarto foldera lesson11 w panelu Files (Pliki). Kliknij prawym

klawiszem myszy plik travel_finished.html, wybierz z listy opcj Preview In Browser
(Podgld w przegldarce) i zaznacz swoj domyln przegldark.

Przykadowa strona zawiera zachowania programu Dreamweaver.

4 Jeli domyln przegldark w Twoim systemie operacyjnym jest program Internet

Explorer, a w grnej czci okna tej przegldarki wywietlony zosta komunikat
ozablokowaniu skryptu JavaScript ze wzgldu na ustawiony poziom zabezpiecze,
kliknij pasek z tym komunikatem i wydaj polecenie Allow Blocked Content
(Zezwalaj na zablokowan zawarto).

5 Umie kursor nad nagwkiem Venice: City of Canals. Zwr uwag na zdjcie
umieszczone z prawej strony tekstu.

Dotychczasowe zdjcie zostaje zastpione widokiem Wenecji.

6 Przesu kursor nad nagwkiem Florence: City of Art. Ponownie sprawd zdjcie
umieszczone z prawej strony tekstu.

Po przesuniciu kursora poza nagwek na miejscu zdjcia pojawia si ponownie

reklama Eco-Tour. Nie na dugo jednak po umieszczeniu kursora nad
nagwkiem dotyczcym Florencji, wywietli si zdjcie tego miasta.

7 Sprawd zachowanie obrazkw po przesuniciu kursora nad kadym z nagwkw.

Na stronie s wywietlane na przemian reklama Eco-Tour oraz zdjcia z

poszczeglnych miast. Jest to tak zwane zachowanie Swap Image (Zamie obraz).

8 Gdy skoczysz, zamknij wszystkie okna przegldarki i wr do programu

Dreamweaver.
W kolejnym wiczeniu nauczysz si stosowa zachowania programu Dreamweaver.

280

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 280

2010-12-09 12:35:13

Stosowanie zachowa
programu Dreamweaver
Dodanie zachowania do obiektu w programie Dreamweaver jest niezwykle prost czynnoci, wymagajc jedynie kilku klikni w odpowiednich miejscach. Strona dotyczca
podry nie zostaa jeszcze utworzona.
1 Wywietl panel Assets (Zasoby) i kliknij ikon Templates (Szablony). Kliknij prawym
klawiszem myszy dokument mygreen_temp i wybierz z listy opcj New From
Template (Nowy z szablonu).

Na ekranie wywietlone zostanie okno nowego dokumentu utworzonego

napodstawie szablonu.

2 Zapisz nowy dokument pod nazw travel.html.

3 Kliknij dwukrotnie obraz zastpczy znajdujcy si na pasku bocznym. Przejd
dofolderu images, wybierz plik train.jpg i kliknij OK (Choose w Mac OS).

5 Wywietl panel Files (Pliki) i rozwi zawarto foldera lesson11/resources.

Kliknij dwukrotnie plik travel-caption.txt.
Dreamweaver otworzy tekst zawierajcy tre podpisu do zdjcia.

6 Nacinij Ctrl+A (Cmd+A w Mac OS), aby zaznaczy cay tekst, po czym nacinij
Ctrl+C (Cmd+C w Mac OS), aby go skopiowa. Zamknij plik travel-caption.txt.
7 Zaznacz tymczasowy podpis znajdujcy si na pasku bocznym. Nacinij Ctrl+V
(Cmd+V w Mac OS), aby wklei now tre podpisu.
8 Kliknij dwukrotnie travel-text.html w panelu Files (Pliki).

dopiero rozpoczynasz prac zksik,

przejd do Wstpu,
gdzie w podrozdziale Szybki start
omwiono sposb
postpowania
wtakiej sytuacji.
Potem moesz
zacz wykonywa
wiczenia opisane
wniniejszejlekcji.

Na pasku bocznym pojawio si zdjcie pocigu.

4 Wpisz nastpujce zdanie w polu Alt (Tekst) znajdujcym si w panelu Properties

(Waciwoci): Steam locomotives are not very green. Kliknij OK.

Uwaga: Jeli

Dokument travel-text.html zawiera tabel i tre przeznaczon dla strony

opodrach. Zwr uwag na brak formatowania zarwno tabeli, jak i tekstu.

9 W trybie Design (Projekt) nacinij Ctrl+A (Cmd+A w Mac OS), aby zaznaczy cay
tekst. Nastpnie nacinij Ctrl+C (Cmd+C w Mac OS), aby skopiowa zawarto
pliku, po czym zamknij plik travel-text.html.

Uwaga: Jeli

wstawiasz zdjcia w opisany

tu sposb, okno
dialogowe Image
Tag Accessibility
Attributes (Atrybuty
dostpnoci znacznika IMAGE) nie
zostanie wywietlone. Dlatego
musimy doda
tekst alternatywny za pomoc
panelu Properties
(Waciwoci),
wypeniajc
pole Alt (Tekst).

10 Umie kursor w tymczasowym nagwku dokumentu travel.html o nastpujcej

treci: Add main heading here. Zaznacz selektor znacznika <h1>. Przytrzymaj
klawisz Shift i kliknij na kocu frazy Add content here, aby zaznaczy cay tekst
zastpczy regionu MainContent. Nacinij Ctrl+V (Cmd+V w Mac OS), aby wklei
tekst ze schowka.

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 281

281

2010-12-09 12:35:14

Na stronie pojawi si zawarto pliku travel-text.html. Nowa tre przyjmuje

formatowanie tekstu i tabel zdefiniowane w arkuszu stylw, ktry utworzye
wlekcji 8., Praca z tekstem, listami i tabelami.

Umiecimy teraz na stronie reklam Eco-Tour. Bdzie to wyjciowy obraz dla

zachowania Swap Image (Zamie obraz).

11 Kliknij dwukrotnie obraz zastpczy. Przejd do domylnego foldera obrazw

serwisu i zaznacz obraz ecotour.jpg. Kliknij przycisk OK (Choose w Mac OS).

282

Obraz tymczasowy zosta zastpiony reklam Eco-Tour. Jednak zanim bdziesz

mg zastosowa zachowanie Swap Image (Zamie obraz), musisz jednoznacznie
zdefiniowa obraz, ktry chcesz zamieni. W tym celu nadasz mu atrybut ID.

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 282

2010-12-09 12:35:14

12 Jeli to konieczne, zaznacz na stronie obraz ecotour.jpg. W panelu Properties

(Waciwoci) zaznacz biec tre Travel znajdujc si w polu ID. Wpisz ecotour
i nacinij Enter (Return w Mac OS).

Wskazwka:

Nawet jeli zajmuje

to troch wicej
czasu, warto
nadawa wszystkim obrazkom
unikalneID.

13 Zapisz plik.
W kolejnym wiczeniu utworzysz zachowanie Swap Image (Zamie obraz) na bazie
obrazka ecotour.jpg.

Dodawanie zachowa
Wspomniano ju wczeniej, e moliwo zastosowania wielu z zachowa zaley
odzaznaczonego w danej chwili obiektu czy struktury. Zachowanie Swap Image
(Zamie obraz) mona nada dowolnemu fragmentowi tekstu.
1 Wydaj polecenie Window/Behaviors (Okno/Zachowania), aby wywietli panel
TagInspector (Inspektor znacznikw).
2 Umie kursor wewntrz frazy Venice: City of Canals i zaznacz selektor
znacznika<h3>.
3 Kliknij ikon Add Behavior (Dodaj zachowanie). Wybierz z listy zachowanie
SwapImage (Zamie obraz).

Uwaga:

Uytkownicy wczeniejszych wersji

programu mog szuka panelu Behaviors
(Zachowania).
Obecnie nosi on
nazw TagInspector
(Inspektor
znacznikw).

Na ekranie wywietlone zostanie okno dialogowe Swap Image (Zamie obraz).

Zawiera ono list obrazw znajdujcych si na stronie, ktrym mona przypisa
to zachowanie. Moesz zdefiniowa zastpowanie jednego lub kilku obrazw
jednoczenie.

4 Zaznacz opcj Image ecotour (Obraz ecotour) i kliknij przycisk

Browse(Przegldaj).
5 W oknie dialogowym Select Image Source (Wybierz rdo obrazu) wybierz
plik venice.jpg, znajdujcy si w folderze Images. Kliknij przycisk OK
(Choose w MacOS).
6 Jeli to konieczne, w oknie dialogowym Swap Image (Zamie obraz) zaznacz opcj
Preload Images (Wczytaj wstpnie obrazy), po czym kliknij OK.

Uwaga:

Opcja Preload Images

(Wczytaj wstpnie
obrazy) gwarantuje
wczytanie wszystkich
obrazw potrzebnych do prawidowego dziaania
zachowania, zanim
wczytana zostanie
sama strona. Dziki
temu, po klikniciu
przez uytkownika
obiektu wyzwalajcego zachowanie,
zamiana obrazw
bdzie przebiega
pynnie, bezopnie czy innych
zakce.

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 283

283

2010-12-09 12:35:14

W panelu Tag Inspector (Inspektor znacznikw) pojawia si etykieta zachowania

Swap Image (Zamie obraz), do ktrej przypisany jest atrybut onMouseOver.
Atrybuty zachowania mog by w miar potrzeby zmieniane za pomoc panelu
TagInspector (Inspektor znacznikw).

7 Kliknij atrybut onMouseOver, aby sprawdzi list dostpnych opcji.

Lista zawiera zdarzenia, ktre mog wyzwala zachowania. Wikszo nazw jest
natyle opisowa, e pozwala odgadn, na czym polega zdarzenie.

8 Wybierz opcj onMouseOver.

9 Zapisz plik i kliknij przycisk Live View (Widok aktywny), aby sprawdzi dziaanie
zachowania. Przesu kursorem nad fraz Venice: City of Canals.
Kiedy przesuniesz kursor nad tekstem, reklama Eco-Tour jest zastpowana zdjciem
zWenecji. Jest tylko jedno drobne niedocignicie. Ot po przesuniciu kursora poza
tekst, obraz pierwotny nie wraca na swoje miejsce. Dzieje si tak dlatego, e mu tego
nie nakazae. Aby zapewni powrt pierwszego obrazka, musisz doda do tego samego
obiektu jeszcze jedno zachowanie Swap Image Restore (Przywr zamieniony obraz).

Dodawanie zachowania Swap ImageRestore

(Przywr zamieniony obraz)
W niektrych przypadkach okrelona operacja wymaga zdefiniowania wicej ni
jednego zachowania. Aby przywrci wywietlanie reklamy Eco-Tour po odsuniciu
kursora od nagwka, musisz zdefiniowa funkcj, ktra tego dokona.
1 Powr do trybu Design (Projekt). Umie kursor wewntrz frazy Venice: City
of Canals i sprawd, co jest wywietlone w panelu Tag Inspector (Inspektor
znacznikw).

Panel wywietla zachowanie, ktre zostao do tej pory przypisane. Nie musisz
nawet zaznacza caego elementu wyzwalajcego; Dreamweaver zakada, e chcesz
dokona zmian w caym tym elemencie.

2 Kliknij ikon Add Behavior (Dodaj

zachowanie) i wybierz z listy opcj
Swap Image Restore (Przywr
zamieniony obraz). W oknie
dialogowym Swap Image Restore
(Przywr zamieniony obraz) kliknij
przycisk OK.
284

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 284

2010-12-09 12:35:15

W panelu Tag Inspector (Inspektor znacznikw) wywietlone zostao zachowanie

Swap Image Restore (Przywr zamieniony obraz) wraz z atrybutem onMouseOut.

3 Wcz tryb Code (Kod) i zobacz, jak wyglda kod opisujcy tekst
Venice: City of Canals.

Zdarzenia wyzwalajce zachowania onMouseOver i onMouseOut zostay

dodane jako atrybuty do znacznika <h3>. Pozostaa cz kodu JavaScript zostaa
umieszczona w sekcji <head> dokumentu.

4 Zapisz plik i kliknij przycisk Live View (Widok aktywny), aby sprawdzi dziaanie
zachowania. Sprawd dziaanie wyzwalacza tekstowego Venice: City of Canals.
Kiedy kursor znajdzie si nad wspomnian fraz, obraz Eco-Tour jest zastpowany
zdjciem Wenecji, a nastpnie, po przesuniciu kursora poza tekst, powraca na swoje
miejsce. Zachowanie dziaa poprawnie, przy czym sam tekst nie zmienia si w widoczny
sposb i nic nie wskazuje na to, e po umieszczeniu nad nim kursora stanie si co
magicznego. Poniewa wikszo uytkownikw internetu przywyka do interaktywnych waciwoci czy, moemy zastosowa cze tymczasowe, ktre zachci goci
naszego serwisu do odkrywania ukrytego efektu.

Usuwanie zachowa
Zanim nadasz fragmentowi tekstu waciwoci cza, musisz usun przypisane doniego zachowania Swap Image (Zamie obraz) i Swap Image Restore
(Przywrzamieniony obraz).
1 Jeli to konieczne, wywietl panel Tag Inspector (Inspektor znacznikw).
Umiekursor wewntrz tekstu Venice: City of Canals.

W panelu Tag Inspector (Inspektor znacznikw) wywietlone s dwa zachowania

dodane do tekstu. Nie ma znaczenia, ktre usuniesz jako pierwsze.

2 Zaznacz etykiet Swap Image (Zamie obraz). Kliknij ikon RemoveEvent

(Usuzdarzenie) ( ). Zaznacz teraz etykiet Swap Image Restore
(Przywrzamieniony obraz) i ponownie kliknij ikon Remove Event
(Usuzdarzenie).

Obydwa zachowania zostay usunite. To samo stao si ze zwizanym z nimi

kodemJavaScript.

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 285

285

2010-12-09 12:35:15

3 Zapisz plik i ponownie wywietl stron w trybie aktywnym, aby sprawdzi

zachowanie tekstu.
Tekst nie wyzwala ju zachowania Swap Image (Zamie obraz). Aby przypisa zachowanie do cza, naley najpierw zdefiniowa dla nagwka cze lub cze tymczasowe.

Dodawanie zachowa do czy

Nawet jeli cze nie prowadzi do innego dokumentu, moemy doda do niego
zachowanie.
1 Zaznacz fragment Venice: City of Canals. Wpisz # w polu Link (cze) znajdujcym
si w panelu Properties (Waciwoci), po czym nacinij Enter (Return w Mac OS),
aby utworzy cze zastpcze.
2 Umie kursor wewntrz cza, po czym kliknij ikon Add Behavior
(Dodajzachowanie) znajdujc si w panelu Tag Inspector (Inspektor znacznikw).
Wybierz z listy opcj Swap Image (Zamie obraz).

Jeli kursor pozostanie w dowolnym miejscu cza, zachowanie zostanie przypisane

do caej zawartoci znacznika.

3 W oknie dialogowym Swap Image (Zamie obraz) zaznacz opcj image ecotour
(Obraz ecotour). Kliknij przycisk Browse (Przegldaj) i wybierz plik venice.jpg,
znajdujcy si w folderze images. Kliknij przycisk OK (Choose w Mac OS).
4 W oknie dialogowym Swap Image (Zamie obraz) zaznacz obie opcje
PreloadImages (Wczytaj wstpnie obrazy) oraz Restore Images onMouseOut
(Przywracaj obrazy przy zdarzeniu onMouseOut), po czym kliknij OK.

W panelu Tag Inspector (Inspektor znacznikw) wywietlone zostay zdarzenia

SwapImage (Zamie obraz) oraz Swap Image Restore (Przywrzamienionyobraz).
Jako e zachowanie przywracajce obraz zostao zdefiniowane od razu,
Dreamweaver, w ramach zwikszania efektywnoci, sam zadba o przywrcenie
stanu pierwotnego.

5 Zaznacz tekst Florence: City of Art i nadaj mu waciwoci cza (wpisujc #).
Przypisz do niego zachowanie Swap Image (Zamie obraz) i wybierz z folderu
images obraz florence.jpg.
6 Powtrz punkt 5. w przypadku tekstu Sienna: City of Beauty.

Tym razem wybierz obraz sienna.jpg.

7 Powtrz punkt 5. dla tekstu Rome: City of Magic.

Wybierz obraz rome.jpg.
286

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 286

2010-12-09 12:35:15

Poniewa wygld czy nie pasuje do kolorystyki serwisu, utworzymy teraz wasn
regu CSS, aby poprawi formatowanie.

8 Umie kursor w dowolnym czu reagujcym na przesuwanie kursora.

Zaznacz regu .content h3 w arkuszu stylw mygreen_styles.css. Kliknij ikon
NewCSSRule (Nowa regua CSS) znajdujc si w panelu CSS Styles (Style CSS).
9 Wpisz .content h3 w polu Selector Name (Nazwa selektora).
Wpisz #090 polu Color znajdujcym si w kategorii Type (Typ).
Kliknij przycisk OK.
10 Zapisz plik i przetestuj zachowania w trybie aktywnym.

Zachowanie Swap Image (Zamie obraz) dziaa poprawnie w przypadku

wszystkichczy.

11 Zamknij dokument travel.html.

Dreamweaver umoliwia nie tylko stosowanie przycigajcych wzrok efektw, ale rwnie pozwala na tworzenie elementw strukturalnych, dziki ktrym moesz zaoszczdzi sporo miejsca na stronie i nada jej bardziej interaktywny styl.

Tworzenie paneli harmonijkowych Spry

Panele harmonijkowe Spry porzdkuj znaczn ilo informacji wywietlanej za
pomoc kilku zwartych paneli. Poszczeglne zakadki s zwykle umieszczone jedna nad
drug. Po klikniciu kadej z nich wywietlany jest odpowiedni panel. Jeeli jego zawarto wykracza poza rozmiar strony, wywietlany jest pasek przewijania.
Najpierw obejrzymy gotow stron.
1 W panelu Files (Pliki) zaznacz plik tips_finished.html znajdujcy si w folderze
lesson11 i wywietl jego podgld w domylnej przegldarce.

Informacje zawarte na stronie znalazy si w trzech panelach harmonijkowych Spry.

2 Otwrz i zamknij kolejne panele, klikajc ich paski tytuowe.

3 Zamknij okno przegldarki, aby powrci do programu Dreamweaver.

Wstawianie paneli harmonijkowych Spry

Kolejne wiczenie polegao bdzie na umieszczeniu na stronie paneli harmonijkowych.
1 Otwrz plik tips.html.
2 Umie kursor w nagwku At Home i zaznacz selektor znacznika <h2>. Nacinij
klawisz Delete.
3 Umie kursor w pierwszym wierszu listy Wash clothes in cold water i zaznacz
selektor znacznika <ul>. Nacinij Ctrl+X (Cmd+X w Mac OS), aby wyci ca list.
4 Umie kursor na kocu nagwka Green Tips i nacinij Enter (Return w Mac OS),
aby utworzy nowy akapit.

Uwaga: Jeli

dopiero rozpoczynasz prac z ksik,

przejd do Wstpu,
gdzie w podrozdziale
Szybki start omwiono sposb postpowania wtakiej
sytuacji. Potem
moesz rozpocz
wykonywanie
wicze opisanych
wniniejszej lekcji.

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 287

287

2010-12-09 12:35:15

5 Kliknij przycisk Spry Accordion (Harmonijka Spry) znajdujcy si w panelu Insert

(Wstaw) w kategorii Spry.

Program Dreamweaver umieci w projekcie domylny obiekt typu Spry Accordion

(Harmonijka Spry). Obiekt ten zawiera pocztkowo dwa panele, a grny z nich jest
domylnie otwarty. Podobnie jak pasek menu Spry, otoczony jest bkitn ramk
znapisem Spry Accordion: Accordion1 (Harmonijka Spry: Accordion1).

6 Zaznacz zastpczy napis Label 1 (Etykieta 1) i wpisz At home, aby zastpi tekst.
7 Zaznacz tymczasowy napis Content 1 (Zawarto 1), po czym nacinij klawisze
Ctrl+V (Cmd+V w Mac OS), aby wklei list punktowan.

Bdziesz mg zobaczy tylko fragment dodanej zawartoci, poniewa w trybie

Design (Projekt) przewijanie jest nieaktywne.

8 Aby wywietli lub edytowa zawarto panelu, naley klikn panel dwukrotnie,
lub klikn go prawym przyciskiem myszy. Nastpnie naley wyda polecenie
Element View/Full (Widok elementu/Peny).

9 Usu nagwek At Work. Zaznacz i wytnij kolejn list <ul>, ktra zawiera
wskazwki dotyczce postpowania w miejscu pracy.
10 Przesu kursor nad paskiem Label 2 (Etykieta 2) i jeli to konieczne, kliknij ikon
przedstawiajc oko ( ), aby otworzy drugi panel.

288

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 288

2010-12-09 12:35:16

11 Zaznacz zastpczy napis Label 2 (Etykieta 2) i wpisz At Work.

12 Zaznacz napis tymczasowy Content 2 i wklej ze schowka element <ul>.
Dwa panele s ju gotowe, jednak aby ukoczy tworzenie panelu harmonijkowego,
wkolejnym wiczeniu dodamy trzeci panel.

Wstawianie dodatkowych paneli

Za pomoc panelu Properties (Waciwoci) moemy dodawa lub usuwa
poszczeglnepanele.
1 Zaznacz na stronie niebiesk zakadk znajdujc si nad panelem Accordion1.
2 Kliknij ikon Add Panel w panelu Properties (Waciwoci).

Harmonijka Spry otrzymaa nowy panel.

3 W oknie dokumentu usu nagwek In the Community, po czym zaznacz i wytnij

list <ul> zawierajc wskazwki dotyczce postpowania w spoecznoci.
4 Zaznacz tekst zastpczy Label 3 (Etykieta 3) i wpisz In the Community. Nastpnie
wklej list wypunktowan do zawartoci nowego panelu.
5 Zapisz plik i kliknij OK we wszystkich oknach dialogowych, jakie si pojawi.
W wiczeniu tym utworzye panel harmonijkowy Spry, dodae do niego zawarto idodatkow zakadk. W tym przypadku informacje potrzebne do uzupenienia
treci paneli znajdoway si ju na stronie, ale moliwe jest te bezporednie wpisy
wanie zawartoci. Ponadto mona skopiowa materia z innych rde, naprzykad zdokumentw utworzonych midzy innymi w programie Microsoft Word,
TextEditczyNotepad.
Kolejne zadanie bdzie polegao na dodaniu stylw CSS do paneli
harmonijkowychSpry.

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 289

289

2010-12-09 12:35:16

Dostosowywanie paneli harmonijkowych Spry

Podobnie jak inne obiekty typu Spry, rwnie panele harmonijkowe s poczone
zarkuszami CSS. W kolejnym wiczeniu zmodyfikujesz wygld paneli i zmienisz kolorystyk zakadek.
1 Umie kursor w etykiecie zakadki At Home i sprawd, jakie znaczniki i w jakiej
kolejnoci wywietlone s w dolnej czci okna dokumentu.
Zakadki s sformatowane za pomoc klasy .AccordionPanelTab.
2 Odszukaj arkusz stylw SpryAccordion.css w panelu CSS Styles (Style CSS) i wywietl
jego zawarto. Kliknij dwukrotnie regu .AccordionPanelTab, aby j edytowa.
3 Wpisz 120% w polu Font-size w kategorii Type (Typ), za w polu Color wpisz #FFC.
4 Wybierz kategori Background (To). W polu Background-color zmie kolor
na#090.
Kliknij przycisk Browse (Przegldaj) znajdujcy si obok pola Background-image
iwybierz plik background.jpg.
Wybierz opcj repeat-x z listy Background-repeat.

5 Przejd do kategorii Box (Pole) i wpisz 15 px w polu Left w sekcji Padding.

6 W kategorii Border (Krawd) zmie kolor w polu Top w sekcji Color na #060.
Zmie rwnie kolor dolnej krawdzi, wpisujc #090 w polu Bottom sekcji Color.
Kliknij przycisk OK.

290

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 290

2010-12-09 12:35:16

7 Zapisz wszystkie pliki i wywietl dokument w widoku aktywnym. Sprawd

zachowanie panelu harmonijkowego.

Poziome zakadki wykazuj zachowanie hover po umieszczeniu nad nimi

kursora tekst przybiera szary kolor, ktry nie pasuje jednak do zielonego ta
zakadki.

8 Powr do trybu Design (Projekt) i przeanalizuj arkusz stylw panelu

harmonijkowego. Sprbuj odnale regu, ktra odpowiada za zachowanie hover.

Efekt hover jest zdefiniowany w dwch reguach. Jedna dotyczy sytuacji, kiedy
panel jest zamknity (.AccordionPanelTabHover), za druga definiuje ten efekt
dlaotwartego panelu (.AccordionPanelOpen .AccordionPanelTabHover).

9 Kliknij dwukrotnie etykiet .AccordionPanelTabHover.

Zmie warto pola Color w kategorii Type (Typ) na #FFC.
Wpisz #060 w polu Background-color znajdujcym si w kategorii Background(To).
Wybierz opcj none w polu Background-image.
Kliknij przycisk OK.
10 Powtrz krok 9. dla reguy .AccordionPanelOpen .AccordionPanelTabHover.

Zwr uwag na dwie reguy znajdujce si w dolnej czci arkusza stylw panelu
harmonijkowego. Zawieraj one wyraz focused, ktry okrela zachowanie odsyaczy
identyczne jak efekt hover, z wyjtkiem sposobu aktywacji. W tym przypadku jest
to nacinicie klawisza Tab lub klawiszy strzaek, dziki ktrym mona porusza si
na stronie bez korzystania z myszy. Reguy te mog zakci formatowanie efektu
hover, dlatego zmienimy niektre z ich ustawie.

11 Powtrz krok 9. dla regu .AccordionFocused .AccordionPanelTab oraz

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab.

Po otwarciu paneli, nie mieci si w nich caa zawarto list. Mona to zmieni,
dostosowujc za pomoc regu CSS rwnie wysoko paneli.

12 Umie kursor wewntrz listy punktowanej i zwr uwag na nazwy i kolejno

selektorw.

Zawarto panelu jest sformatowana za pomoc klasy .AccordionPanelContent.

13 Wybierz .AccordionPanelContent z listy panelu CSS Styles (Style CSS).

W sekcji Properties (Waciwoci) znajdujcej si poniej zmie warto w polu
height na 450 px.

Nowa wysoko jest wystarczajca, aby wywietli wikszo zawartoci panelu,

bezkoniecznoci jego przewijania.

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 291

291

2010-12-09 12:35:16

14 Zapisz wszystkie pliki i sprawd dziaanie panelu na stronie, po jej wywietleniu

wdomylnej przegldarce.

Udao Ci si utworzy schemat kolorystyczny panelu harmonijkowego, ktry jest

zgodny z kolorystyk caej strony. Zmienie wysoko poszczeglnych paneli, aby
wywietli ca zawarto panelu, bez koniecznoci jego przewijania. Komponenty Spry
umoliwiaj umieszczenie na stronie duej iloci tekstu w zwartej i ciekawej formie.

292

LeKCJA 11 Projektowanie interaktywnych stron WWW

DW-CS5_book.indb 292

2010-12-09 12:35:16

Pytania kontrolne
1 Jakie korzyci wynikaj ze stosowania zachowa programu Dreamweaver?
2 Opisz trzy czynnoci, jakie naley wykona, aby utworzy zachowanie programu
Dreamweaver.
3 Dlaczego kady obrazek powinien otrzyma atrybut ID, zanim przypiszemy do niego
zachowanie?
4 Co to s panele harmonijkowe Spry?
5 W jaki sposb mona doda now zakadk do panelu harmonijkowego Spry?

Odpowiedzi
1 Zachowania programu Dreamweaver umoliwiaj szybkie i atwe umieszczenie
nastronie interaktywnej funkcjonalnoci.
2 Aby zdefiniowa zachowanie programu Dreamweaver, naley utworzy lub zaznaczy
obiekt wyzwalajcy, wybra interesujce nas zachowanie i okreli jego parametry.
3 Atrybut ID uatwia wybr waciwego obrazka podczas definiowania okrelonego
zachowania.
4 Panele harmonijkowe Spry to zestawy co najmniej dwch paneli, ktre mona
elastycznie ukrywa i wywietla wraz z zawartoci.
5 Zaznacz panel w oknie dokumentu i kliknij ikon Add Panel w interfejsie Spry
wywietlonym w panelu Properties (Waciwoci).

Adobe Dreamweaver CS5/CS5 PL. Oficjalny podrcznik

DW-CS5_book.indb 293

293

2010-12-09 12:35:16