Adobe Dreamweaver

CS4/CS4 PL.
Oficjalny podrcznik
Autor: Adobe Creative Team
Tumaczenie: Joanna Zatorska
ISBN: 978-83-246-2273-3
Tytu oryginau: Adobe Dreamweaver CS4
Classroom in a Book
Format: 170230, stron: 288
Poznaj wszechstronne moliwoci Dreamweavera CS4/CS4 PL
i twrz nowoczesne oraz wygodne serwisy internetowe
Jak zbudowa sprawny serwis WWW i zarzdza nim?
Jak stworzy interaktywny i rozbudowany interfejs?
Jak korzysta z inteligentnych obiektw programu Photoshop?
Adobe Dreamweaver CS4/CS4 PL to znakomity program do tworzenia nowoczesnych
serwisw WWW, pozwalajcy na prac z rozbudowan zawartoci CSS i samodzielne
modyfikowanie kodu rdowego. Ani uaktualnianie witryny internetowej bezporednio
z poziomu przegldarki, ani dodawanie danych dynamicznych do strony nie wymagaj
przy tym korzystania z bazy danych czy skomplikowanego kodu. Najnowsza wersja
CS4 pozwala take wstawia na stron pliki z programu Photoshop oraz za pomoc
widoku na ywo sprawdza wygld wprowadzonych zmian prawie dwukrotnie szybciej,
ni dzieje si to przy renderowaniu w przegldarce. Bogactwo oraz intuicyjno narzdzi
Dreamweavera sprawiaj, e moe on by z powodzeniem i bez trudu wykorzystywany
do tworzenia stron WWW zarwno przez profesjonalistw, jak i amatorw.
Ksika Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik zawiera jedenacie
lekcji, przygotowanych przez autoryzowanych trenerw firmy Adobe. Obejmuj one
podstawy obsugi programu, a ponadto zawieraj wiele wskazwek i technik, ktre
pozwol Ci zwikszy wydajno pracy. Dziki temu podrcznikowi nauczysz si
korzysta z najnowszych i najlepszych rozwiza do tworzenia witryn internetowych,
takich jak panel Properties (Waciwoci), arkusze stylw CSS czy inteligentne obiekty
programw Photoshop i Flash. Dowiesz si take, jak tworzy makiety, formularze,
tabele i publikowa swoj gotow stron w Internecie.
Konfigurowanie serwisu w programie Dreamweaver
Wybieranie i edytowanie stylw CSS
Definiowanie niestandardowych klas
Praca z tekstem
Tworzenie tabel
Elementy graficzne
Nawigacja
Projektowanie stron WWW
Projektowanie makiet i formularzy
Praca z obiektami programu Flash
Publikowanie strony w Internecie
Caa wiedza ekspertw Adobe Dreamweaver w praktycznym podrczniku!

Spis treci
Wstp
1 Wstp doprogramu Dreamweaver CS4

7
12

Konfigurowanie serwisu wprogramie Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . 14

Obsuga ekranu powitalnego. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Wybr szablonu CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Zapisywanie strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Wybr okna dokumentu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Zmiana tytuu strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Zmiana nagwkw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Wstawianie tekstu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Wstawianie elementw graficznych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Wybieranie iedytowanie stylw CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Zmiana koloru ikroju czcionek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Praca wtrybie Code (Kod) oraz Codeand Design (Kod iProjekt). . . . . . . . . . . . . 30
Obsuga panelu Properties (Waciwoci). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Wywietlanie podgldu strony wwidoku aktywnym. . . . . . . . . . . . . . . . . . . . . . . . 37
Wywietlanie podgldu strony wprzegldarce. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2 Kaskadowe arkusze stylw (CSS)

42

Podgld ukoczonego projektu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Doczanie zewntrznego arkusza stylw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Tworzenie nowej reguy CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Uywanie stylw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Uywanie niestandardowych klas dla podziaw stron. . . . . . . . . . . . . . . . . . . . . . 55
Kontrola znacznikw wpanelu CSS Rules (Reguy CSS). . . . . . . . . . . . . . . . . . . . . . 61
Tworzenie arkusza stylw napotrzeby druku. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

3 Praca ztekstem

70

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Tworzenie nagwkw, list icytatw blokowych. . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Tworzenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Dostosowywanie wygldu tabeli zapomoc CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 84

SPIS TRECI

Dreamweaver Book.indb 4

2009-06-22 17:48:00

Sprawdzanie pisowni wdokumencie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Tworzenie wskazwek donarzdzi Spry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Wyszukiwanie izastpowanie tekstu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

4Elementy graficzne

96

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Wstawianie zdj. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Elementy graficzne wtle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Korzystanie zpanelu Properties (Waciwoci) dopracy zgrafik. . . . . . . . . . . 102
Kopiowanie iwklejanie elementw graficznych zprogramu Photoshop. . . . 105
Program Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Inteligentne obiekty programu Photoshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

5 Nawigacja

114

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

cza dostron nalecych dotego samego serwisu . . . . . . . . . . . . . . . . . . . . . . . 116
Tworzenie czy dostron zewntrznych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Tworzenie czy e-mail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
cza wobrbie strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Tworzenie paska menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Tworzenie panelu zzakadkami Spry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Sprawdzanie strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

6 Projektowanie interaktywnych stron WWW

138

Kilka informacji ozachowaniach programu Dreamweaver . . . . . . . . . . . . . . . . . 140

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Stosowanie efektw Spry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Doczanie danych XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Doczanie danych przy uyciu Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Tworzenie paneli harmonijkowych Spry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Dostosowywanie paneli harmonijkowych Spry. . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

7 Projektowanie makiet

160

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Projektowanie elementw strony przy uyciu znacznikw <div>. . . . . . . . . . . 163
Praca wtrybie Code (Kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 5

2009-06-22 17:48:00

Eksportowanie stylw CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

Miarki ilinie pomocnicze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Testowanie ukadu strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

8 Projektowanie formularzy

194

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Oglne informacje oformularzach. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Umieszczenie formularza nastronie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Wstawianie pl tekstowych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Przyciski opcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Tworzenie pl wyboru. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Tworzenie list. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Tworzenie przycisku wysyania danych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Projektowanie stylw dla formularzy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

9 Praca zobiektami programu Flash

226

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Umieszczanie animacji Flash nastronie WWW. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Wywietlanie filmw wideo przyuyciu technologii Flash. . . . . . . . . . . . . . . . . . 231

10 Optymalizacja pracy

236

Przegld ukoczonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

Tworzenie szablonw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Tworzenie regionw edytowalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Aktualizacja szablonu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Tworzenie stron potomnych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Biblioteki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Doczenia postronie serwera. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

11 Publikowanie strony winternecie

262

Konfigurowanie zdalnego serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Maskowanie folderw iplikw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Publikowanie strony winternecie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Skorowidz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

SPIS TRECI

Dreamweaver Book.indb 6

2009-06-22 17:48:00

Projektowanie
formularzy
Wtrakcie tej lekcji zapoznasz si znarzdziami doprojektowania formularzy przeznaczonych doumieszczenia nastronie WWW. Dowiesz
si midzy innymi, jak:

Umieci formularz nastronie WWW.

Tworzy pola tekstowe.
Posugiwa si kontrolkami formularzy Spry.
Tworzy przyciski opcji.
Tworzy pola wyboru.
Wstawia listy.
Dodawa przyciski doobsugi formularzy.
Tworzy zestawy pl idodawa opisy.
Zmienia wygld formularzy przy uyciu stylw CSS.

Ukoczenie wicze opisanych wtej lekcji powinno zaj okoo 90 minut.

Przed przystpieniem doich realizacji upewnij si, eskopiowae nadysk
twardy pliki znajdujce si wfolderze Lessons/lesson08 naserwerze
ftp://ftp.helion.pl/przyklady/drcs4o.zip.

194

Dreamweaver Book.indb 194

2009-06-22 17:48:39

Program Dreamweaver dysponuje znakomitymi

narzdziami doprojektowania formularzy, ktre
znacznie uatwiaj kontakt zuytkownikami
Twojego serwisu

195

Dreamweaver Book.indb 195

2009-06-22 17:48:39

Przegld ukoczonego projektu

Przed przystpieniem dorealizacji wicze zaplanowanych napierwsz cz tej lekcji
warto zapozna si zwygldem ukoczonego projektu wprzegldarce internetowej.
1 Uruchom program Adobe Dreamweaver CS4.
2 Jeli tokonieczne, nacinij klawisz F8, aby otworzy panel Files (Pliki), iwybierz
serwis DW CIB zlisty serwisw.
3 Wywietl zawarto foldera lesson08 wpanelu Files (Pliki).
Uwaga: Jeli

domyln przegldark wTwoim systemie operacyjnym

jest program Internet
Explorer, awgrnej
czci okna tej przegldarki wywietlony
zosta komunikat
ozablokowaniu
skryptu JavaScript
zewzgldu naustawiony poziom zabezpiecze, kliknij pasek
ztym komunikatem
iwydaj polecenie Allow Blocked
Content (Zezwalaj
nazablokowan
zawarto).

4 Zaznacz plik contact-finished.html inacinij klawisz F12 (Option+F12 wMac OS),

aby wywietli podgld pliku wdomylnej przegldarce.

Przykadowa strona zawiera formularz skadajcy si zkilku typowych elementw.

Sprbuj go wypeni izwr uwag nazachowanie poszczeglnych elementw.

5 Umie kursor wpolu Your Name iwpisz swoje imi inazwisko. Nacinij
klawiszTab.

196

Twoje imi inazwisko bd wywietlane wpolu tekstowym.

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 196

2009-06-22 17:48:39

6 Umie kursor wpolu Your email, anastpnie nacinij klawisz Tab bez podawania
adnych informacji.

Kontrolki Spry Form oferuj narzdzia umoliwiajce wstpn automatyczn

weryfikacj wprowadzanych danych naprzykad zignorowanie jednego
zwymaganych pl sygnalizuj komunikatem obdzie.

7 Wpolu Your email wpisz adres wpostaci jdoe@mycompany inacinij klawisz Tab,
celowo omijajc domen funkcjonaln .com.

Jak wida, kontrolka Spry Form zareagowaa nawykryty bd, wywietlajc

komunikat zprob opodanie poprawnego adresu poczty elektronicznej.

8 Dopisz kocwk domeny .com dowprowadzonego przed chwil adresu inacinij

klawisz Tab.

Poniewa otrzymany wten sposb adres internetowy jest kompletny, komunikat

obdzie zosta usunity.

9 Wpolu Username wpisz nazw uytkownika, lecz nadaj jej dugo nie wiksz ni
sze znakw. Nacinij klawisz Tab.

Zwr uwag nakomunikat obdzie, jaki zostanie wywietlony obok

edytowanegopola.

10 Dopisz kilka znakw wnazwie uytkownika iponownie nacinij klawisz Tab.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 197

197

2009-06-22 17:48:40

11 Wpolu Password wpisz haso skadajce si zomiu znakw, wrd ktrych

znajdowa si bd tylko litery, inacinij klawisz Tab. Wywietlony zostanie kolejny
komunikat obdzie.

12 Dopisz kilka znakw dohasa, pamitajc, aby znalazy si wnich przynajmniej
dwie cyfry. Nacinij klawisz Tab.
13 Wpolu Repeat Password wpisz inny zestaw znakw ni wpoprzednim polu
inacinij klawisz Tab.

Kontrolka Spry Validation Confirm wykryje rnice wzestawach znakw

wprowadzonych wobu polach iwywietli komunikat obdzie.

14 Wpisz poprawne haso wpolu Repeat Password inacinij klawisz Tab.

15 Wpolu Travel Plans napisz kilka ycze odnonie doplanowanej podry,
anastpnie nacinij klawisz Tab.
16 Okrel liczb podrujcych osb, posugujc si zestawem przyciskw.
17 Zaznacz opcje Services dotyczce usug, jakich oczekujesz odfirmy.
18 Zlisty Timeline wybierz opcj dotyczc terminu Twojej podry.
Uwaga: Dane

podane wformularzu nie snigdzie

zapisywane.

19 Kliknij przycisk Submit, aby wysa wypeniony formularz.

Zwr uwag nastron zpodzikowaniem, ktra zostanie wywietlona

chwilpniej.

20 Gdy skoczysz, zamknij okno przegldarki, aby kontynuowa prac wprogramie

Dreamweaver.
Zanim przystpisz doprojektowania formularza, zapoznaj si zkilkoma oglnymi
informacjami iwskazwkami dotyczcymi dziaania takich formularzy.

198

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 198

2009-06-22 17:48:40

Oglne informacje oformularzach

Formularze, zarwno te papierowe, jak ite, ktre umieszczane snastronach internetowych, su dozbierania informacji. Wcelu zwikszenia czytelnoci idla wygody
uytkownika wobydwu rodzajach formularzy kade pytanie wymaga wpisania odpowiedzi wspecjalnym oddzielnym polu. Ponadto formularze ste zazwyczaj wyranie
wyodrbnionym elementem wikszego projektu: wwersji papierowej znajduj si one
naoddzielnym arkuszu lub soddzielone ramk, awwersji internetowej ich granice
wyznacza zasig znacznika <form>. Formularze publikowane on-line pozwalaj rwnie zaoszczdzi koszty pracy iunikn ewentualnych bdw podczas wprowadzania
danych przez pracownikw.
Formularze internetowe zbudowane szzestawu oddzielnych elementw przystosowanych dozbierania rnego rodzaju informacji:

Pola tekstowe umoliwiaj wpisanie tekstu oograniczonej dugoci; pola tekstowe

suce dowprowadzania hase powoduj zamaskowanie znakw wpisywanych
przez uytkownika.

Obszary tekstowe ich dziaanie irola spodobne jak pl tekstowych, lecz sone
przystosowane dowprowadzania duszego tekstu, naprzykad kilku zda lub
caych akapitw.

Przyciski wyboru umoliwiaj wybr opcji zwzajemnie wykluczajcego si

zestawu; kliknicie dowolnego ztych przyciskw wramach jednego zestawu
powoduje automatyczne wyczenie tego, ktry by dotychczas wczony.

Pola wyboru pozwalaj naudzielenie odpowiedzi typu tak lub nie. Podobnie

jak przyciski wyboru, pola te mog by grupowane wzestawy, lecz wodrnieniu

odnich ich wybr nie wyklucza si wzajemnie.

Listy zawieraj szereg opcji wywietlanych wpostaci pionowej kolumny. Listy

(zwane te menu lub listami rozwijanymi) mog by skonfigurowane wsposb
umoliwiajcy wybranie jednej lub kilku rnych opcji.

Elementy ukryte przekazuj informacje niezbdne doprzetworzenia formularza,

lecz niewidoczne dla uytkownika. Ukryte elementy formularzy sbardzo czsto
stosowane waplikacjach internetowych.

Przyciski su zazwyczaj dowysyania wypenionego formularza, lecz mog

rwnie peni inne funkcje, takie jak naprzykad wyzerowanie wszystkich
wpisanych informacji.

Formularz papierowy mona powypenieniu wysa poczt lub odda zainteresowanej osobie; wprzypadku formularzy internetowych jest podobnie ztrnic, eich
przetwarzanie iprzesyanie odbywa si drog elektroniczn. Znacznik <form> zawiera
midzy innymi atrybut action; warto tego atrybutu decyduje otym, costanie si
zformularzem pojego wypenieniu. Najczciej atrybut ten powoduje wywietlenie
odpowiedniej strony lub zainicjowanie skryptu postronie serwera, ktry zajmie si
przetworzeniem wprowadzonych danych.

Uwaga:

Zagadnienia
dotyczce przetwarzania formularzy
wykraczaj poza
zakres materiau
przedstawionego
wtej ksice; wtrakcie tej lekcji dowiesz
si jedynie, wjaki
sposb przygotowa
dziaajcy formularz
umoliwiajcy dalsze
przetwarzanie wprowadzonych danych.
Jeli chciaby
dowiedzie si wicej odynamicznych
aplikacjach umoliwiajcych przechowywanie informacji
wprowadzonych
wformularzach,
zajrzyj dosystemu
pomocy programu
Dreamweaver;
potrzebne wskazwki znajdziesz pod
hasem Building
applications visually
(Tworzenie aplikacji
metod graficzn).

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 199

199

2009-06-22 17:48:40

Umieszczenie formularza nastronie

1 Wywietl zawarto foldera lesson08 wpanelu Files (Pliki) idwukrotnie kliknij plik
contact-start.htm, aby go otworzy.
2 Wydaj polecenie File/Save As (Plik/Zapisz jako). Jako nazw pliku wpisz contact.
html ikliknij przycisk Save (Zapisz).

Oryginalny plik contact-start.hmtl bdzie dostpny zpoziomu twardego dysku,

nawypadek gdyby potrzebowa przejrze jego zawarto.

Zewzgldu nato, eznacznik formularza <form> musi obejmowa wszystkie

elementy tego formularza, warto umieci go nastronie nasamym pocztku. Jeli
sprbujesz wstawi element formularza, aznacznik <form> nie bdzie obecny
nastronie, program Dreamweaver przypomni okoniecznoci jego wstawienia.

3 Kliknij wobszarze mainContent div, tu zaznakiem zapytania koczcym

nagwek. Wtym miejscu wstawimy znacznik <form>.
Uwaga: Jeli nie

widzisz kreskowanej ramki wok

znacznika <form>,
rozwi menu
Visual Aids (Pomoce
wizualne), ktrego
ikona znajduje si
napasku Document
(Dokument), iwcz
opcj Invisible
Elements (Elementy
niewidoczne).

Uwaga: Wartoci

wszystkich pozostaych ustawie

mona pozostawi
bez zmian. Atrybuty
Method (Metoda)
iEnctype (Typ encji)
mona zmieni
wdowolnym
momencie, wzalenoci odsposobu
przetwarzania
wprowadzonych
doformularza
danych naserwerze
oraz odtypu danych.
Jak wspomniaem
wczeniej, kod wykonywany postronie
serwera inicjowany
jest przez atrybut
action formularza.

200

4 Wybierz Forms (Formularze) zlisty Category (Kategoria) wpanelu Insert (Wstaw),

anastpnie kliknij ikon Form (Formularz) .

Program Dreamweaver umieci nastronie znacznik <form>, ktry napodgldzie

Design (Projekt) bdzie przedstawiony wpostaci czerwonej kreskowanej ramki.

Skonfigurujmy teraz atrybut action formularza.

5 Jeli tokonieczne, wydaj polecenie Window/Properties (Okno/Waciwoci), aby

wywietli panel Properties (Waciwoci). Kliknij ikon foldera znajdujc si tu
obok pola Action (Operacja). Odszukaj folder lesson08 woknie dialogowym Select
File (Wybierz plik), zaznacz plik form_processing.html znajdujcy si wtym folderze
ikliknij przycisk OK.

Pole Action (Operacja) odnosi si dostrony, ktra bdzie przechowywa dane

przesane zformularza celem dalszej analizy. Dane te mog by gromadzone wbazie
danych, mog tworzy dynamiczn zawarto, generowa odpowiedzi lub by
przetwarzane winny sposb. Formularz utworzony wtym wiczeniu poklikniciu
przycisku Submit zaaduje jedynie stron zpodzikowaniem zajego wypenienie.

6 Wydaj polecenie File/Save (Plik/Zapisz).

Utworzye ju obiekt formularza. Teraz mona rozpocz tworzenie pl formularza,
poczwszy odnajprostszych inajczciej spotykanych pl tekstowych.

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 200

2009-06-22 17:48:40

Wstawianie pl tekstowych
Pola tekstowe stanowi zazwyczaj najwaniejszy element wszelkich formularzy. Sone
oznaczone znacznikiem <input>, ktry wywietla si rwnie wlicie selektorw.
Trudno wrcz wyobrazi sobie jakikolwiek skuteczny formularz, ktry nie zawiera tych
prostych elementw umoliwiajcych wpisywanie krtkich informacji tekstowych.
Niektre formularze skadaj si wycznie ztakich wanie pl.
Wkolejnych wiczeniach dowiesz si, wjaki sposb tworzy zwyke pola tekstowe, pola
tekstowe Spry, pola umoliwiajce podanie hasa, pola umoliwiajce jego potwierdzenie oraz due obszary tekstowe. Zanim jednak zaczniesz, powiniene upewni si,
eprogram Dreamweaver pozwala nadodanie elementw formularza wsposb, ktry
zapewnia moliwie du zgodno zwszelkiego rodzaju uatwieniami dostpu.

Konfiguracja uatwie dostpu

Pola tekstowe charakteryzuj si szczeglnymi wymaganiami, jeli chodzi ouatwienia
dostpu. Rozmaite rozwizania techniczne, wspomagajce korzystanie zestron internetowych, takie jak choby czytniki ekranowe, wymagaj zastosowania okrelonego
kodu rdowego, ktry umoliwi im poprawne zinterpretowanie treci formularza
ijego poszczeglnych elementw. Program Dreamweaver oferuje opcje umoliwiajce
wygenerowanie takiego kodu wzrozumiaej dla wspomnianych programw postaci.
Jeli ju wczeniej skonfigurowae program Dreamweaver, sprawd teraz, czy uczynie
torwnie dla elementw formularzy.
1 Wydaj polecenie Edit/Preferences (Edycja/Preferencje) lub Dreamweaver/Preferences
(Edycja/Preferencje) wMac OS.
2 Powywietleniu okna dialogowego Preferences (Preferencje) kliknij nazw kategorii
Accessibility (Dostpno).
3 Zaznacz opcj Form objects (Obiekty formularza) wAccessibility (Dostpno)
ikliknij przycisk OK.
Wkolejnych wiczeniach przekonasz si, ezmiana wspomnianej przed chwil opcji
spowoduje wywietlenie dodatkowego okna dialogowego przed wstawieniem dowolnego elementu formularza. Woknie tym znajduje si szereg opcji umoliwiajcych
midzy innymi dodawanie specjalnych etykiet iinnych niestandardowych rozszerze
poszczeglnych pl formularza. Wnastpnym wiczeniu zapoznasz si zdziaaniem
tych opcji wpraktyce.

Posugiwanie si polami tekstowymi

Wpolach tekstowych mona wpisywa cigi znakw alfanumerycznych czyli zawierajcych litery icyfry opewnej granicznej dugoci. Maksymalna dugo takiego
cigu moe wynosi 255 znakw, lecz wwikszoci przypadkw liczba tajest wzupenoci wystarczajca: pola tekstowe najczciej su bowiem dowpisywania krtkich
informacji tekstowych, takich jak adresy czy imiona.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 201

201

2009-06-22 17:48:40

2 Umie kursor wewntrz czerwonej krawdzi formularza.

wkategorii Forms (Formularze)
3 Kliknij ikon Text field (Pole tekstowe)
napasku Insert (Wstaw). Jest todruga ikona, liczc odlewej.
4 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty
dostpnoci wstawianego znacznika) wpisz name inacinij klawisz Tab. Wpolu
Label (Etykieta) wpisz Name iponownie nacinij klawisz Tab. Identyfikator name
rozpoczyna si odmaej litery, poniewa jest toelement kodu. Natomiast napis
etykiety Name rozpoczyna si odwielkiej litery, poniewa bdzie on wywietlany
obok pola tekstowego formularza.
5 Wybierz opcj Attach label tag using for attribute (Docz znacznik etykiety,
uywajc atrybutu for) wsekcji Style (Styl). Upewnij si, ezaznaczona zostaa
opcja Position: Before form item (Umieszczenie: Przed pozycj formularza). Kliknij
przycisk OK.
Uwaga: Etykiety

dla pl tekstowych
szazwyczaj umieszczane przed tymi
polami. Wdalszej
czci lekcji przekonasz si, eetykiety
przyciskw ipl
wyboru sumieszczane zatymi
polami. Konwencja
tauatwia korzystanie idostp doformularzy.

Wczenie opcji Attach label tag using for attribute (Docz znacznik etykiety,
uywajc atrybutu for) spowoduje wygenerowanie nastpujcego kodu:
<label for="name">Name</label><input type="text" id="name" />

Dziki takiemu rozwizaniu znacznik <label> moe by cakowicie oddzielony

odelementu formularza wpostaci znacznika <input> iumieszczony woddzielnej
komrce tabeli.

202

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 202

2009-06-22 17:48:40

6 Wydaj polecenie File/Save (Plik/Zapisz).

Pierwszy element planowanego formularza jest ju naswoim miejscu. Wstawianie

kolejnych standardowych pl tekstowych przebiega bardzo podobnie, wnastpnym
wiczeniu zajmiemy si wic nieco innym rodzajem elementu formularza polem
tekstowym Spry.

Tworzenie pl tekstowych Spry

Wlekcji 6. zapoznae si zespecjaln platform Spry, uatwiajc implementacj
technologii Ajax wprojektach programu Dreamweaver. Wtrakcie zaproponowanych
wtej lekcji wicze uywalimy rnych narzdzi ifunkcji dziaajcych wramach platformy Spry, takich jak dane Spry czy panele harmonijkowe Spry. Nie mwilimy dotd
jednak ospecjalnych obiektach typu Spry Form, przeznaczonych dotworzenia formularzy. Kady obiekt tego typu stanowi poczenie zaawansowanych funkcji JavaScriptu
zatwymi wobsudze, gotowymi elementami formularza, oferujcymi automatyczn
weryfikacj treci wpisywanych przez uytkownika.
Weryfikacja tapolega przede wszystkim nasprawdzeniu poprawnoci typu danych
wpisanych dookrelonego pola formularza. Jeli, przykadowo, podczas wypeniania
formularza uytkownik wpisaby niepeny lub bdny adres e-mail, topozostae dane
wtym formularzu mogyby okaza si bezwartociowe. Weryfikacja pozwala te zadba
owypenienie wszystkich niezbdnych pl formularza przed jego wysaniem.
Obiekty typu Spry Form obsuguj kilka nastpujcych elementw formularzy: pola
tekstowe, obszary tekstowe, pola wyboru, pola umoliwiajce podanie hasa ijego
potwierdzenie, grupy przyciskw wyboru ilisty. Posugiwanie si tymi obiektami jest
bardzo podobne poumieszczeniu wybranego obiektu nastronie naley skonfigurowa parametry jego dziaania przy uyciu panelu Properties (Waciwoci) igotowe.
Wszystko tojest bardzo proste, oczym bdziesz mg przekona si wkolejnym wiczeniu, wktrym uyjemy obiektu Spry Validation Text Field (Pole tekstowe zatwierdzenia Spry). Obiekt ten umoliwia midzy innymi sprawdzenie poprawnoci adresu
poczty e-mail wpisanego przez uytkownika.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).
2 Umie kursor zasowem Name wpolu tekstowym wstawionym wpoprzednim
wiczeniu inacinij klawisze Shift+Enter (Shift+Return wMac OS), aby utworzy
jednowierszowy odstp.
3 Kliknij ikon Spry Validation Text field (Pole tekstowe zatwierdzenia Spry)
znajdujc si wkategorii Forms (Formularze) napasku Insert (Wstaw).

Uwaga: Dodanie

dowolnej kontrolki spowoduje

wstawienie cza
dopliku JavaScript
iarkusza CSS.
Napotrzeby wicze
opisanych wtej lekcji
oba te pliki zostay
umieszczone pord
plikw przykadowych. Jeeli bdziesz
tworzy wasne
formularze program
Dreamweaver
poinformuje odoczeniu tych plikw
dotwojego serwisu.
Nie zapomnij ouaktualnieniu zawartoci
folderw SpryAssets
iScripts poukoczeniu serwisu, wprzeciwnym przypadku
kontrolki mog nie
zosta wywietlone
lub bd dziaa
nieprawidowo.

4 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty

dostpnoci wstawianego znacznika) wpisz email inacinij klawisz Tab. Wpolu
Label (Etykieta) wpisz Email: iponownie nacinij klawisz Tab. Upewnij si,
ewsekcji Style (Styl) wybrana zostaa opcja Attach label tag using for attribute

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 203

203

2009-06-22 17:48:41

(Docz znacznik etykiety, uywajc atrybutu for). Wybierz opcj Position: Before
form item (Umieszczenie: Przed pozycj formularza) ikliknij przycisk OK.

5 Wydaj polecenie File/Save (Plik/Zapisz). Kliknij przycisk OK wkomunikacie
informujcym okoniecznoci doczenia zewntrznych plikw zkodem JavaScriptu.

Poumieszczeniu nastronie wymaganych elementw formularza wraz zdodatkowymi funkcjami realizowanymi przez mechanizmy Spry moemy przystpi
dokosmetycznych prac zwizanych znadaniem im odpowiedniego wygldu.

6 Jeeli zakadka Spry TextField (Pole tekstowe Spry) nie jest widoczna, przesu kursor
nad pole tekstowe Spry ipoczekaj najej wywietlenie nad polem tekstowym; kliknij
tzakadk, aby zaznaczy pole tekstowe Spry.

7 Jeli tokonieczne, wydaj polecenie Window/Properties (Okno/Waciwoci), aby
wywietli panel Properties (Waciwoci). Zlisty Type (Typ) wybierz opcj Email
Address (Adres e-mail).

204

Ustawienia iopcje zgromadzone wpanelu Properties (Waciwoci) pozwalaj

niemal dowolnie skonfigurowa sposb dziaania wybranego pola. Jak wida,
znajduje si nanim wiele innych opcji odpowiadajcych rnym wariantom
weryfikacji wprowadzonych przez uytkownika treci, poczwszy odInteger
(Liczba cakowita) pozwalajcej sprawdzi, czy wprowadzony cig znakw jest
liczb cakowit, a doCustom (Niestandardowo) umoliwiajcej skonfigurowanie
nietypowych sposobw weryfikacji. Opcja Email Address (Adres e-mail) umoliwia
sprawdzenie, czy wewpisanym cigu znakw znajduje si symbol @, poktrym
nastpuje pena nazwa domeny.

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 204

2009-06-22 17:48:41

Skonfigurujmy teraz zdarzenie, ktre bdzie inicjowao weryfikacj treci pola.

8 Zaznacz opcj Blur (onBlur) wsekcji Validate on (Zatwierdzono) iupewnij si,

ezaznaczona jest opcja Required (Wymagane).
Domylnie proces weryfikacji jest inicjowany podczas wysyania wypenionego formularza. Wwikszoci przypadkw mona jednak pokusi si owykorzystanie innych
zdarze, ktre zainicjuj wproces winnym momencie. Naprzykad wtym przypadku
sprawdzenie adresu wpisanego przez uytkownika nastpi wchwili, gdy nacinie on
klawisz Tab lub kliknie winnym polu tekstowym. Takie rozwizanie jest owiele wygodniejsze iumoliwia poprawienie wychwyconego bdu jeszcze przed przystpieniem
dowypeniania kolejnych pl. Wczenie opcji Required (Wymagane) sprawia, ejeli
pole zadresem e-mail zostanie cakowicie pominite przez uytkownika, topodczas
prby wysania formularza bd ten zostanie zasygnalizowany przy uyciu odpowiedniego komunikatu.
Wtym wiczeniu pozostawimy domylny komunikat. Jego zmiana jest jednak bardzo
prosta. Dokonujemy jej, korzystajc zlisty Preview states (Stany podgldu) napanelu
Properties (Waciwoci). Zaznacz dowolny stan podgldu iwpisz tekst komunikatu.
Aby tymczasowo, naczas pracy nad stron, wyczy wywietlanie komunikatw obdzie, wybierz Initial (Pocztkowy) zlisty Preview states (Stany podgldu).

Tworzenie grupy pl tekstowych

Dwa pierwsze pola testowe mona zgrupowa wjednym bloku owsplnym nagwku
(nazywanym legend). Wtym celu wykorzystamy znacznik <fieldset>.
1 Umie kursor zprawej strony pola Email inacinij klawisz Enter (Return wMac
OS), aby utworzy nowy wiersz.
2 Zaznacz etykiety Name iEmail wraz zpolami tekstowymi. Wtrybie Design (Projekt)
moe toby do trudne, dlatego te aby upewni si, ezaznaczone zostay
wszystkie elementy, wcz tryb Code and Design (Kod iProjekt).

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 205

205

2009-06-22 17:48:41

Powiniene zaznaczy cay blok kodu:

<label for=name>Name</label>
<input type=text name=name id=name /><br />
<span id=sprytextfield1>
<label for=email>Email</label>
<input type=text name=email id=email />
<span class=textfieldRequiredMsg>Avalue is required.
</span><span class=textfieldInvalidFormatMsg>Invalid format.
</span></span>

3 Kliknij ikon Fieldset (Grupa pl [fieldset])

napasku Insert (Wstaw).

wkategorii Forms (Formularze)

4 Gdy naekranie wywietlone zostanie okno dialogowe Fieldset (Grupa pl [fieldset]),

wpolu Legend (Opis) wpisz Your Contact Information ikliknij przycisk OK.

5 Wydaj polecenie File/Save (Plik/Zapisz).

Wtrybie Design (Projekt) grupa pl nie jest wyranie zaznaczona, moemy zobaczy
jedynie jej nagwek. Aby wywietli rzeczywisty podgld, wcz tryb aktywny lub
otwrz stron wprzegldarce. Dwa pola tekstowe bd obrysowane cienk ramk
zopisem wjej lewym grnym rogu.

6 Kliknij przycisk Live View (Widok aktywny) lub zamknij przegldark, aby powrci
dotrybu edycji programu Dreamweaver.

Tworzenie pl tekstowych username ipassword

Niektre pola tekstowe nie wymagaj specjalnego formatowania, jednak moe by
konieczne wpisanie okrelonej liczby znakw. Jest topowszechny wymg pl, wktrych wpisuje si nazw uytkownika. Wkolejnym wiczeniu umiecisz nastronie pole
tekstowe Spry zwymogiem minimalnej liczby znakw.
1 Umie kursor zagrup pl, jednak wewntrz czerwonej ramki wok formularza.
Jeeli tokonieczne, zaznacz grup pl inacinij klawisz prawej strzaki. Nacinij
klawisz Enter (Return wMac OS), aby utworzy nowy wiersz.
2 Kliknij ikon Spry Validation Text Field (Pole tekstowe zatwierdzenia Spry),
znajdujc si wkategorii Forms (Formularze) napasku Insert (Wstaw).
3 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty
dostpnoci wstawianego znacznika) wpisz username inacinij klawisz Tab.
206

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 206

2009-06-22 17:48:41

Wpolu Label (Etykieta) wpisz Username: iponownie nacinij klawisz Tab.

Upewnij si, ewsekcji Style (Styl) wybrana zostaa opcja Attach label tag using for
attribute (Docz znacznik etykiety, uywajc atrybutu for), za wsekcji Position
(Umieszczenie) opcja Before form item (Przed pozycj formularza). Kliknij
przycisk OK.

4 Jeeli tokonieczne, przesu kursor nad polem tekstowym username ipoczekaj
napojawienie si zakadki Spry TextField. Kliknij j, aby zaznaczy obiekt.
5 Zaznacz opcj Validate on Blur (Zatwierdzono onBlur) wpanelu Properties
(Waciwoci) iwpisz 6 wpolu Min characters (Min. liczba znakw). Upewnij si,
ezaznaczona jest opcja Required (Wymagane).

Jeeli wtrybie Design (Projekt) wywietlony zostanie komunikat bdu

naczerwonym tle, zaznacz opcj Initial (Pocztkowy) zlisty Preview states (Stany
podgldu) napanelu Properties (Waciwoci), aby go usun.

6 Wydaj polecenie File/Save (Plik/Zapisz).

Tworzenie pl hase
Pola tekstowe suce dowprowadzania hase spotyka si winternecie niemal nakadym kroku. Znaki wpisywane wzwykym polu tekstowym swywietlane bez adnych
modyfikacji, lecz wprzypadku pola hasa sytuacja wyglda zupenie inaczej: sone
maskowane jakim uniwersalnym symbolem, rnicym si wzalenoci odprzegldarki. Jest towymg bezpieczestwa.
1 Nacinij klawisze Shift+Enter (Shift+Return wMac OS), aby wstawi nowy wiersz
zapolem username.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 207

207

2009-06-22 17:48:42

2 Kliknij ikon Spry Validation Password (Haso zatwierdzania Spry)

si wkategorii Forms (Formularze) napasku Insert (Wstaw).

, znajdujc

3 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty

dostpnoci wstawianego znacznika) wpisz password inacinij klawisz Tab.
Wpolu Label (Etykieta) wpisz Password: iponownie nacinij klawisz Tab.
Upewnij si, ewsekcji Style (Styl) wybrana zostaa opcja Attach label tag using for
attribute (Docz znacznik etykiety, uywajc atrybutu for), za wsekcji Position
(Umieszczenie) opcja Before form item (Przed pozycj formularza). Kliknij
przycisk OK.

4 Kliknij zakadk SpryPassword (Haso Spry). Zaznacz opcje Required (Wymagane)
iValidate on Blur (Zatwierdzono onBlur) wpanelu Properties (Waciwoci). Wpisz
8 wpolu Min characters (Min. liczba znakw) oraz 2 wpolu Min numbers (Min.
liczba liczb).

Jeeli nie chcesz, aby woknie projektu wywietlany by domylny komunikat

obdzie, wybierz opcj Initial (Pocztkowy) zlisty Preview states (Stany podgldu).

5 Nacinij strzak wprawo, aby wyj zpola hasa, poczym nacinij klawisze
Shift+Enter (Shift+Return wMac OS), aby wstawi nowy wiersz.
,
6 Kliknij ikon Spry Validation Confirm (Potwierdzenie zatwierdzania Spry)
znajdujc si wkategorii Forms (Formularze) napasku Insert (Wstaw), aby wstawi
pole potwierdzenia hasa.
7 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty
dostpnoci wstawianego znacznika) wpisz confirmpw, za wpolu Label (Etykieta)
wpisz Repeat Password:. Upewnij si, ewsekcji Style (Styl) wybrana zostaa

208

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 208

2009-06-22 17:48:42

opcja Attach label tag using for attribute (Docz znacznik etykiety, uywajc
atrybutu for), za wsekcji Position (Umieszczenie) opcja Before form item (Przed
pozycj formularza). Kliknij przycisk OK.

8 Zaznacz opcje Required (Wymagane) iValidate on Blur (Zatwierdzono onBlur)
wpanelu Properties (Waciwoci). Wybierz opcj password in form form1
("password" wFormularz "form1") zlisty Validate against (Zatwierd wedug).

9 Umie kursor tu zapolem potwierdzenia hasa inacinij klawisz Enter (Return
wMac OS).

Naley jeszcze doda wyjanienie, ktre poinformuje uytkownika ozasadach

dotyczcych wpisywanego hasa. Umiecimy jeprzed dodanymi wczeniej trzema
polami.

Powr dopustego wiersza znajdujcego si nad polem username. Jeeli to konie

czne, utwrz nowy wiersz zaznacz pole username, nacinij strzak wlewo, aby
przenie kursor tu przed pole, inacinij klawisz Enter (Windows) lub Return
(MacOS).

10 Wpustym wierszu wpisz:

For online access toyour itinerary and travel plans, please

set up ausername and password. Your username must contain at
least 6 characters. Your password must contain at least 8 characters, at least two of them numbers.

Powyszy akapit oraz trzy pola tekstowe moemy poczy iutworzy zestaw pl.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 209

209

2009-06-22 17:48:42

11 Zaznacz akapit itrzy pola tekstowe.

Nie wahaj si uywa trybu Code (Kod) iCode and Design (Kod iProjekt),
abyprawidowo zaznaczy wszystkie elementy kodu.

12 Kliknij przycisk Fieldset (Grupa pl [fieldset]) wkategorii Forms (Formularze)

napasku Insert (Wstaw). Wpisz Online Tools wpolu Legend (Opis), poczym
kliknij przycisk OK.

13 Wydaj polecenie File/Save (Plik/Zapisz).
Dodane przez Ciebie pole tekstowe pozwala uytkownikowi nawprowadzenie hasa
zgodnego zpodanymi zasadami. Wpolu potwierdzenia hasa wymagane jest wpisanie
takiego samego hasa jak wpolu poprzednim. Pozwala tounikn literwek wewprowadzanym hale izapobiega wysaniu hasa innego ni zamierzone.

Tworzenie obszarw tekstowych

Obszary tekstowe umoliwiaj wpisywanie znacznie duszego tekstu ni zwyke pola
tekstowe. Tekst wpisywany wtych polach jest domylnie zawijany; mona go te
podzieli naakapity, przenoszc kursor donowego wiersza. Jeli uytkownik wprowadzi tak duo tekstu, eprzestanie on mieci si wwyznaczonym obszarze, automatycznie wywietlone suwaki umoliwi jego przejrzenie ikontynuowanie pisania.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).

Innym sposobem wstawienia obszarw tekstowych jest ich utworzenie przed

dodaniem elementw formularza. Metod tposuymy si, aby utworzy kilka
kolejnych elementw formularza.

2 Umie kursor poniej zestawu pl, wewntrz czerwonego obrysu formularza. Jeeli
tokonieczne, umie kursor wewntrz ostatniego zestawu pl, wybierz <fieldset>
zlisty selektorw inacinij klawisz strzaki wprawo, aby wyj poza jego obszar.
Kliknij przycisk Fieldset (Grupa pl [fieldset]) wkategorii Forms (Formularze)
napasku Insert (Wstaw). Wpisz Your Trip wpolu Legend (Opis) ikliknij
przyciskOK.

Moemy teraz doda obszar tekstowy wewntrz zestawu pl.

3 Kliknij ikon Text Area (Obszar tekstowy [Textarea])

(Formularze) napasku Insert (Wstaw).

210

wkategorii Forms

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 210

2009-06-22 17:48:43

4 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty

dostpnoci wstawianego znacznika) wpisz plans inacinij klawisz Tab. Wpolu
Label (Etykieta) wpisz Travel Plans. Upewnij si, ewsekcji Style (Styl) wybrana
zostaa opcja Attach label tag using for attribute (Docz znacznik etykiety,
uywajc atrybutu for). Wybierz opcj Position: Before form item (Umieszczenie:
Przed pozycj formularza) ikliknij przycisk OK.

5 Obszar tekstowy pojawi si tu zaetykiet. Umie kursor zaetykiet
inacinij klawisze Shift+Enter (Shift+Return wMac OS), aby utworzy odstp
jednowierszowy.

6 Zaznacz utworzony obszar tekstowy.

Wniektrych elementach formularza warto niekiedy umieci jak wstpn

domyln warto, ktra uatwi uytkownikowi wprowadzenie odpowiednich
danych. Mona tozrobi przy uyciu opcji Init val (Wart. pocztk.). Nie jest
tojednak konieczne izaley odetykiety oraz przejrzystoci formularza.

7 Wpisz Briefly describe where you would like togo and for
how long.

Uwaga:

Wpanelu Properties
(Waciwoci)
moemy zatwoci
zmieni szeroko
iwysoko (liczb
wierszy) obszaru
tekstowego. Istnieje
rwnie moliwo
skonfigurowania
obszaru tekstowego
tylko doodczytu.
Jego zawartoci
uytkownik nie
bdzie mg zmieni.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 211

211

2009-06-22 17:48:43

8 Wydaj polecenie File/Save (Plik/Zapisz).

Utworzony obszar tekstowy pozwala uytkownikowi wpisa duszy tekst (mimo
epoprosie okrtki opis, obszar tekstowy zatwoci zmieci kilka akapitw).

Przyciski opcji
Jeli zamierzasz umieci wformularzu pewien zestaw opcji, zktrych uytkownik
powinien wybra tylko jedn, najwygodniej bdzie zrobi toprzy uyciu przyciskw
opcji. Wodrnieniu odinnych elementw formularzy, poszczeglne przyciski wyboru
nie maj unikatowej nazwy; jest ona wsplna dla wszystkich przyciskw funkcjonujcych wobrbie danej grupy. Wcelu rozrnienia poszczeglnych przyciskw nadawana
jest im unikatowa warto.
Program Dreamweaver oferuje dwa sposoby tworzenia przyciskw opcji. Pierwszy
polega natworzeniu kadego przycisku oddzielnie, drugi za nautworzeniu caej
grupy jednoczenie przy uyciu kontrolki Spry Validation Radio Group (Grupa przyciskw opcji zatwierdzania Spry). Kady ztych sposobw maswoje wady izalety. Jeli
zdecydujesz si natworzenie kadego przycisku zosobna, bdziesz musia pniej
nada im wspln nazw, aby zapewni ich prawidowe dziaanie wramach grupy.
Jeli utworzysz ca grup, tojednakowa nazwa zostanie im nadana automatycznie, za
odpowiednie pliki JavaScript iCSS pozwol naspersonalizowanie wygldu ikomunikatw obdzie. Wwiczeniu, zktrym zapoznasz si ju zachwil, wybrane zostao
todrugie rozwizanie.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).
2 Kliknij tu zaobszarem tekstowym, jednak wewntrz zestawu pl oznaczonego
etykiet Your trip. Nacinij klawisz Enter (Return wMac OS), aby przej donowego
wiersza, iwpisz How many will be travelling in your group? Nacinij
ponownie klawisz Enter (Return wMac OS).
3 Kliknij ikon Spry Validation Radio Group (Grupa przyciskw opcji zatwierdzania
wkategorii Forms (Formularze) napasku Insert (Wstaw).
Spry)
4 Kliknij trzykrotnie przycisk Plus (+), aby utworzy wsumie pi przyciskw.

Kolejnym zadaniem bdzie dodanie doprzyciskw etykiet iwartoci.

5 Zaznacz pierwszy element nalicie przyciskw iwpolu Label (Etykieta) wpisz One.
Nacinij klawisz Tab iwpisz one wpolu Value (Warto). Nacinij klawisz Tab, aby
przenie kursor dodrugiego wiersza opcji. Wpisz Two inacinij klawisz Tab; wpisz
two wpolu Value (Warto). Wpodobny sposb wpisz kolejno Three, Four, More
wpolu Label (Etykieta) iodpowiednio three, four imore wpolu Value (Warto).
Zaznacz opcj Line breaks (<br> tags) (Znaczniki podziau wiersza [<br>]) wsekcji
Lay out using (Rozmie, uywajc) ikliknij przycisk OK.

212

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 212

2009-06-22 17:48:43


6 Jeeli grupa przyciskw nie jest zaznaczona woknie dokumentu, kliknij niebiesk
zakadk, aby zaznaczy kontrolk Spry. Zaznacz opcj Required (Wymagane)
wpanelu Properties (Waciwoci) ipozostaw pozostae opcje jak narysunku.

7 Wydaj polecenie File/Save (Plik/Zapisz).
Wwiczeniu tym utworzye grup przyciskw opcji, wktrej mona zaznaczy tylko
jeden przycisk. Dziki kontrolce Spry Validation Radio Group (Grupa przyciskw opcji
zatwierdzania Spry) grupa tastaa si elementem formularza, ktrego nie mona pomin przy jego wypenianiu. Jeeli uytkownik nie zaznaczy adnej opcji, powysaniu
formularza wywietlony zostanie komunikat obdzie.

Tworzenie pl wyboru
Pola wyboru umoliwiaj uytkownikowi zaznaczenie dowolnej kombinacji opcji.
Kade pole mawasn nazw iwarto, ktra jest wysyana wraz zpozosta zawartoci
formularza, jeli tylko pole tozostanie zaznaczone. Wodrnieniu odprzyciskw opcji,
pola wyboru mog by tworzone wycznie pojedynczo.
1 Umie kursor tu zagrup przyciskw opcji utworzon wpoprzednim wiczeniu
inacinij klawisz Enter (Return wMac OS). Wcz tryb Code and Design (Kod
iProjekt) iupewnij si, eumiecie kursor zaznacznikiem zamykajcym </p>
ipoza znacznikiem <span>, wktrym znajduje si tre komunikatu obdzie,
wywietlanego, kiedy przy wypenianiu formularza pominite zostan przyciski
opcji. Wr dotrybu Design (Projekt) iwpisz What services would you like
for us toarrange for you? Nacinij klawisz Enter (Return wMacOS).
Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 213

213

2009-06-22 17:48:43

Pokadym klikniciu ikony Checkbox (Pole wyboru)

Dreamweaver wstawi jedno
pole wyboru. Taka metoda wymaga dodawania nazwy grupy kademu polu osobno.
Tak jak wprzypadku przyciskw opcji, wprogramie Dreamweaver istnieje rwnie
inny sposb dodawania caej grupy pl wyboru ojednakowej nazwie. Kade pole
otrzyma wasn etykiet iwarto.

2 Kliknij ikon Checkbox Group (Grupa pl wyboru)

(Formularze) napasku Insert (Wstaw).

wkategorii Forms

3 Gdy naekranie wywietlone zostanie okno dialogowe Checkbox Group (Grupa pl

wyboru), kliknij przycisk Plus (+), znajdujcy si obok etykiety Checkboxes (Pola
wyboru), aby utworzy trzecie pole wyboru. Zmie napis pierwszej etykiety
naTours inacinij klawisz Tab. Wpisz tours wpolu Value (Warto). Kontynuuj
zmiany wpolu Label (Etykieta), wpisujc kolejno: Transportation iHotels, oraz
wpolu Value (Warto) wpisujc: transportation ihotels. Zaznacz opcj
Line breaks (<br> tags) (Znacznikw podziau wiersza [<br>]) wsekcji Lay out using
(Rozmie, uywajc) ikliknij przycisk OK.

Uwaga: Nazwy

rodzajowe proponowane przez program

Dreamweaver, takie
jak naprzykad
CheckboxGroup1,
mona zmieni,
wpisujc wasne
nazwy wpolu
Name (Nazwa)
wpanelu Properties
(Waciwoci).
Administratorowi
serwisu atwiej
rozpozna, czego
dotycz dane, jeeli
opisane snazw
CheckboxGroup
services_wanted.

Zwykle odbiorca
danych przesanych
zapomoc formularza opisanego
wasnymi nazwami
potrafi uzyska znich
wicej informacji
ni zformularza
opisanego nazwami
zaproponowanymi
przez program
Dreamweaver.

214

Nie musimy zmienia adnych opcji wpanelu Properties (Waciwoci), jeeli

uywamy grupy pl wyboru. Moesz zerkn nakod, aby doceni jej zalety.

4 Kliknij przycisk Split (Podziel), aby wczy tryb Code and Design (Kod iProjekt).
Kade pole wyboru posiada nazw name="CheckboxGroup1".

Jeeli tworzymy kade pole wyboru oddzielnie, musimy osobno nada mu nazw
iwarto. Proces ten moemy zautomatyzowa ioszczdzi sporo czasu, korzystajc
zgrupy pl wyboru Spry.

5 Wydaj polecenie File/Save (Plik/Zapisz).

Wtym wiczeniu utworzye grup pl wyboru. Wgrupie tej mona zaznaczy wicej
ni jedno pole. Jak wspomniaem wczeniej, domylne pooenie znacznika <label>
wprzypadku zarwno przyciskw opcji, jak ipl wyboru, znajduje si zaelementem
formularza.
Donaszego formularza musimy wstawi jeszcze jeden element. Wkolejnym wiczeniu
zajmiemy si list, ktra jest bardziej zwart form prezentacji dostpnych opcji.

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 214

2009-06-22 17:48:44

Tworzenie list
Rozwijane listy sbardzo wygodnym sposobem naumoliwienie uytkownikowi strony
wyboru jednej lub kilku spord wikszej liczby opcji. Zwyka lista dziaa podobnie jak
grupa przyciskw opcji, gdy poszczeglne opcje wykluczaj si wzajemnie. Nic jednak
nie stoi naprzeszkodzie, byutworzy list umoliwiajc zaznaczenie kilku opcji jednoczenie taka lista zachowuje si podobnie jak grupa pl wyboru. Wtym wiczeniu
utworzymy zwyk list ztrzema wykluczajcymi si wzajemnie opcjami.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).
Umie kursor tu zaetykiet ostatniego pola wyboru inacinij klawisz Enter
(Return wMac OS).
2 Wpisz When doyou plan totravel? inacinij klawisz Enter (Return
wMacOS).
3 Kliknij ikon List/Menu (Menu/lista)
Insert (Wstaw).

wkategorii Forms (Formularze) napasku

4 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty

dostpnoci wstawianego znacznika) wpisz timeline inacinij klawisz Tab.
Pozostaw pole Label (Etykieta) puste iwybierz opcj No label tag (Bez znacznika
etykiety) wsekcji Style (Styl), poczym kliknij przycisk OK.

Nie mapotrzeby tworzenia etykiety, poniewa jej rol peni tekst znajdujcy si
nadlist.

Teraz mona ju doda kolejne opcje, ktre znajd si nalicie. Suy dotego
oddzielne okno dialogowe programu Dreamweaver, wywietlane przy uyciu panelu
Properties (Waciwoci).

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 215

215

2009-06-22 17:48:44

5 Zaznacz wstawion przed chwil list. Jeli tokonieczne, wydaj polecenie Window/
Properties (Okno/Waciwoci) ikliknij przycisk List Values (Lista wartoci)
wpanelu Properties (Waciwoci).
6 Woknie dialogowym List Values (Lista wartoci) wkolumnie Item Label (Etykieta
pozycji) wpisz Immediately inacinij klawisz Tab. Wkolumnie Value (Warto)
wpisz immediately inacinij klawisz Tab.

Wskazwka:

Moesz uywa
podkrele wpisujc
tre wpolu Value
(Warto) naprzykad: within_two_
months lub this_
year. Pamitaj tylko,
aby nie uywa
spacji.

7 Powtrz czynnoci opisane wpunkcie 7., aby doda dwie dodatkowe opcje:

Item Label (Etykieta pozycji): Within

the next 2 months; Value (Warto):

withintwomonths

Item Label (Etykieta pozycji): Sometime

this year; Value (Warto):

thisyear

8 Gdy skoczysz, kliknij przycisk OK.

Wybierzmy teraz ten element listy, ktry maby naniej wywietlony powczytaniu
strony; zazwyczaj jest topierwsza spord opcji nalicie.

9 Zlisty Initially selected (Wstpnie) wpanelu Properties (Waciwoci) wybierz opcj

Immediately. Wybierz te opcj Type: Menu (Typ: Menu).

Wybr opcji Menu spowoduje utworzenie listy jednokrotnego wyboru. Jeeli

chcemy, aby uytkownik mg wybra kilka opcji zlisty, wwczas musimy zmieni
opcj Type (Typ) naList (Lista) izaznaczy pole Allow multiple (Dopuszczaj wiele).
Wprzypadku listy umoliwiajcej wybr kilku opcji jednoczenie uytkownik moe
naprzykad wybra trzy najbardziej atrakcyjne warianty podry. Poprzejrzeniu
opcji dla List (Lista) powrmy doMenu, aby zakoczy wiczenie.

10 Wydaj polecenie File/Save (Plik/Zapisz).

Lista typu Menu moe zawiera wiele opcji naprzykad nazwy 50 stanw
co pozwala zmieci bardzo du liczb opcji naniewielkiej przestrzeni strony.
Formularz jest niemal gotowy pozosta jeszcze jeden bardzo wany etap polegajcy
nadodaniu przycisku sucego dowysania zgromadzonych wnim informacji.

216

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 216

2009-06-22 17:48:44

Tworzenie przycisku wysyania danych

Pod pewnymi wzgldami przycisk wysyania danych stanowi najwaniejszy element
caego formularza. Jak sama nazwa wskazuje, przycisk ten powoduje przesanie wypenionego formularza dodalszego przetworzenia, jest zatem nieodzowny. Domylnie
przyciski tego typu wprogramie Dreamweaver su wanie doprzesyania danych
naserwer, lecz mona skonfigurowa jewsposb umoliwiajcy realizowanie innych
funkcji mog one naprzykad suy doresetowania wprowadzonych danych.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).
2 Zaznacz dowolny element ostatniego zestawu pl. Zaznacz selektor <fieldset>
wpanelu Properties (Waciwoci).

Teraz umiecimy przycisk poza zestawem pl.

3 Nacinij praw strzak, aby przej poza zaznaczony zestaw, poczym nacinij
klawisz Enter (Return wMac OS).
4 Kliknij ikon Button (Przycisk)
(Wstaw).

wkategorii Forms (Formularze) napasku Insert

5 Wpolu ID woknie dialogowym Input Tag Accessibility Attributes (Atrybuty

dostpnoci wstawianego znacznika) wpisz submit. Wsekcji Style (Styl) wybierz
No label tag (Bez znacznika etykiety) ikliknij przycisk OK.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 217

217

2009-06-22 17:48:44


6 Wpanelu Properties (Waciwoci) pozostaw domyln warto Action (Operacja)
(Submit form) (Wylij formularz) oraz Value (Warto) Submit (Wylij). Jeeli
chcesz zmieni etykiet nawstawianym przycisku, wpisz now nazw wpolu Value
(Warto).

7 Wydaj polecenie File/Save (Plik/Zapisz).
Wtym wiczeniu utworzye formularz, zapomoc ktrego moesz zebra dane dotyczce nazwisk, adresw poczty elektronicznej, nazw uytkownikw, hase ipreferencji
odnonie dopodry. Dodae odpowiednie skrypty walidacji Spry doniektrych pl
wcelu zapewnienia odpowiedniej formy adresu poczty elektronicznej iminimalnej
liczby znakw wnazwie uytkownika. Formularz zosta uporzdkowany zapomoc
zestaww obiektw. Dodany zosta rwnie przycisk sucy dowysyania wpisanych
przez uytkownika danych. Formularz ten pododaniu skryptu procesujcego dowiersza Action (Operacje) powinien dziaa poprawnie. Jednaj zanim przejdziemy dalej,
warto zainteresowa si stylistyk caoci ale otym ju wkolejnym wiczeniu.

Projektowanie stylw dla formularzy

Cho formularz utworzony podczas kilku poprzednich wicze jest ju wpeni funkcjonalny, tojednak jak dotychczas wogle nie troszczylimy si ojego wygld. Dobrze
zaprojektowany pod wzgldem stylistycznym formularz bdzie bardziej czytelny, przejrzysty, aprzez toatwiejszy dowypenienia. Wtrakcie kolejnego wiczenia nadamy jego
poszczeglnym elementom odpowiedni wygldu zapomoc stylw CSS.
218

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 218

2009-06-22 17:48:44

Zastosowanie stylw CSS

Cho formularze nastronach internetowych mog skada si zwielu rnych elementw, tojednak wikszo tych elementw mapewne cechy wsplne, naprzykad znacznik <label> cobardzo uatwia nadanie im spjnego wygldu przy uyciu stylw.
Kolejn zalet formularzy, szczeglnie tych, ktre zostay umieszczone wtabelach, jest
ich elegancka iprzejrzysta struktura. Prcz wygody posugiwania si formularzem, taka
struktura upraszcza dowolne zmiany jego wygldu.
1 Jeli tokonieczne, otwrz plik contact.html, ktry edytowalimy wpoprzednim
wiczeniu. Wtym celu dwukrotnie kliknij nazw tego pliku wpanelu Files (Pliki).
2 Wydaj polecenie Window/CSS Styles (Okno/Style CSS).

Utworzymy teraz nowy arkusz stylw, ktry bdzie obsugiwa jedynie formularz.
Nie bdziemy go docza doadnej innej strony oprcz strony, naktrej znajduje
si formularz. Takie oddzielenie regu CSS dla formularza odregu umieszczonych
warkuszu dla caej strony ogranicza ilo kodu wczytywan podczas adowania
kadej strony serwisu izwiksza jej niezawodno. Mniejsza ilo kodu przekada
si naszybsze adowanie strony, corobi lepsze wraenie nauytkowniku. Poza tym
zdobdziesz dowiadczenie wtworzeniu nowego arkusza stylw.

3 Kliknij ikon Attach Style Sheet (Docz arkusz stylw)

czci panelu CSS Styles (Style CSS).

znajdujc si wdolnej

4 Kiedy naekranie pojawi si okno dialogowe Attach External Style Sheet (Docz
zewntrzny arkusz stylw), wpisz forms.css wpolu File/URL (Plik/Adres). Wybierz
Link (cze) spord opcji Add as (Dodaj jako), aopcj screen (ekran) zlisty Media
(Multimedia) ikliknij przycisk OK.

5 Dreamweaver wywietli komunikat, earkusz opodanej nazwie nie istnieje. Mimo
tokliknij przycisk Yes (Tak), aby poczy si ztym plikiem.

6 Wzakadce All Rules (Wszystkie reguy) wpanelu CSS wybierz forms.css, anastpnie
kliknij przycisk Plus (+), aby utworzy now regu CSS.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 219

219

2009-06-22 17:48:45

7 Woknie dialogowym New CSS Rule (Nowa regua CSS) wybierz Tag (redefines an
HTML element) (Znacznik [pozwala przedefiniowa element HTML]) zlisty Selector
Type (Typ selektora). Wpisz legend wpolu Selector Name (Nazwa selektora) lub
wybierz legend zlisty rozwijalnej. Upewnij si, ewsekcji Rule Definition (Definicja
reguy) zaznaczona jest opcja forms.css. Kliknij przycisk OK.

8 Dreamweaver wywietli komunikat, earkusz opodanej nazwie nie istnieje,
izaproponuje jego utworzenie. Kliknij przycisk Yes (Tak).

9 Woknie dialogowym CSS Rule Definition for legend in forms.css (Definicja reguy
dla legend wforms.css) wybierz kategori Type (Typ). Wpisz 110 wpolu Font-size
(rozmiar czcionki) iwybierz % zlisty znajdujcej si obok pola tekstowego. Wybierz
bold (pogrubienie) zlisty Font-weight. Wpisz #345FA3 wpolu Color (kolor),
poczym kliknij przycisk OK.

220

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 220

2009-06-22 17:48:45


10 Kliknij przycisk Plus (+) wpanelu CSS Styles (Style CSS), aby utworzy now
reguCSS.
11 Woknie dialogowym New CSS Rule (Nowa regua CSS) wybierz Tag (refefines an
HTML element) (Znacznik [pozwala przedefiniowa element HTML]) zlisty Selector
Type (Typ selektora). Wpisz fieldset wpolu Selector Name (Nazwa selektora) lub
wybierz fieldset zlisty rozwijalnej. Upewnij si, ewsekcji Rule Definition (Definicja
reguy) zaznaczona jest opcja forms.css. Kliknij przycisk OK.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 221

221

2009-06-22 17:48:45

12 Woknie dialogowym CSS Rule Definition for legend in forms.css (Definicja reguy
dla fieldset wforms.css) wybierz kategori Box (Pole). Wpisz 10 wobszarze Padding
(odstp wewn.), warto tapojawi si wewszystkich czterech polach. Usu
zaznaczenie Same for all (Jednakowy dla wszystkich) wobszarze Margin (margines).
Pozostaw pozostae wartoci domylne.

13 Wybierz kategori Border (Krawd). Zlisty Style (styl) wybierz opcj solid
(jednolita), za zlisty Width (grubo) opcj thin (cienka). Wpisz #345FA3
wpolu Color (kolor), wartoci te zostan skopiowane dowszystkich pl, poniewa
zaznaczona jest opcja Same for all (Jednakowe dla wszystkich). Kliknij przycisk OK.

222

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 222

2009-06-22 17:48:46

14 Wydaj polecenie File/Save (Plik/Zapisz).

Formularz bdzie si prezentowa znacznie lepiej nastronie ni wtrybie Design

(Projekt).

15 Kliknij przycisk Live View (Widok aktywny) lub otwrz stron woknie domylnej
przegldarki.
16 Ponownie kliknij przycisk Live View (Widok aktywny) lub zamknij okno
przegldarki, aby powrci doprogramu Dreamweaver.

Folder SpryAssets ipliki powizane

Dostrony doczone jest teraz znaczna liczba skryptw Spry iarkuszy stylw. Poniewa byy ju one umieszczone wfolderze SpryAssets wcelu umoliwienia podgldu gotowej strony, program Dreamweaver nie przypomina okoniecznoci ich uzupenienia. Naley jednak pamita, ewszystkie pliki powizane swywietlone nad oknem dokumentu imusz by przesane naserwer, aby strona dziaaa poprawnie.

Wwiczeniu tym utworzye peen formularz, zawierajcy wiele elementw ikontrolek

walidacji Spry. Ponadto dodae doformularza utworzony przez siebie arkusz stylw,
conieco oywio jego wygld.

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrcznik

Dreamweaver Book.indb 223

223

2009-06-22 17:48:46

Pytania
1 Doczego suy znacznik <form>?
2 Wjaki sposb naley wczy ustawienia zwizane zuatwieniami dostpu
dlaformularzy wprogramie Dreamweaver?
3 Jaki bdzie rezultat zaznaczenia opcji Attach label tag using for attribute
(Docz znacznik etykiety, uywajc atrybutu for)?
4 Jakie zalety, ktrych nie posiadaj zwyke elementy formularzy, maj obiekty typu
SpryForm?
5 Naczym polega rnica pomidzy zwykym polem tekstowym aobszarem tekstowym?
6 Wjaki sposb mona doczy pojedynczy przycisk opcji dogrupy przyciskw?
7 Naczym polega najwaniejsza rnica pomidzy przyciskami opcji apolami wyboru?
8 Doczego suy znacznik <fieldset>?

Odpowiedzi
1 Znacznik <form> powinien obejmowa wszystkie elementy formularza (itabel,
ktra jezawiera). Wznaczniku tym zdefiniowany jest plik lub skrypt, ktry bdzie
odpowiedzialny zaprzetworzenie danych umieszczonych wwypenionym formularzu.
2 Wtym celu naley zaznaczy opcj Form objects (Obiekty formularza) wkategorii
Accessibility (Dostpno) woknie dialogowym Preferences (Preferencje).
3 Doelementu opasujcym identyfikatorze ID doczony zostanie znacznik <label>.
4 Obiekty typu Spry Form uatwiaj tworzenie elementw formularzy, takich jak
przyciski opcji ipola wyboru. Ponadto dysponuj wbudowanymi mechanizmami
weryfikacji treci wpisywanych wrnego rodzaju polach. Mechanizmy te uatwiaj
poprawne wypenienie formularza.
5 Zwyke pole tekstowe przeznaczone jest dowpisywania krtkich cigw znakw,
podczas gdy obszar tekstowy moe zawiera nawet kilka akapitw tekstu.
6 Naley nada mu tak sam nazw, jak nosz pozostae przyciski opcji wdocelowej
grupie.
7 Wramach okrelonej grupy mona wybra tylko jeden przycisk opcji wykluczaj
si one wzajemnie. Takich ogranicze nie maj pola wyboru, ktre mog by dowolnie
zaznaczane przez uytkownika.
8 Znacznik <fieldset> uywany jest doczenia tematycznych grup przyciskw przy
uyciu ramki. Towarzyszcy mu znacznik <legend> umoliwia dodanie krtkiego
opisu identyfikujcego wyrnion wten sposb grup.

224

LeKCJA 8 Projektowanie formularzy

Dreamweaver Book.indb 224

2009-06-22 17:48:46