Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00270 006563 13231401 na godz. na dobę w sumie
Adobe Dreamweaver CS4/CS4 PL. Oficjalny podręcznik - książka
Adobe Dreamweaver CS4/CS4 PL. Oficjalny podręcznik - książka
Autor: Liczba stron: 288
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-2273-X Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> dreamweaver
Porównaj ceny (książka, ebook (-87%), audiobook).

Poznaj wszechstronne możliwości Dreamweavera CS4/CS4 PL i twórz nowoczesne oraz wygodne serwisy internetowe

Adobe Dreamweaver CS4/CS4 PL to znakomity program do tworzenia nowoczesnych serwisów WWW, pozwalający na pracę z rozbudowaną zawartością CSS i samodzielne modyfikowanie kodu źródłowego. Ani uaktualnianie witryny internetowej bezpośrednio z poziomu przeglądarki, ani dodawanie danych dynamicznych do strony nie wymagają przy tym korzystania z bazy danych czy skomplikowanego kodu. Najnowsza wersja CS4 pozwala także wstawiać na stronę pliki z programu Photoshop oraz za pomocą widoku na żywo sprawdzać wygląd wprowadzonych zmian prawie dwukrotnie szybciej, niż dzieje się to przy renderowaniu w przeglądarce. Bogactwo oraz intuicyjność narzędzi Dreamweavera sprawiają, że może on być z powodzeniem i bez trudu wykorzystywany do tworzenia stron WWW zarówno przez profesjonalistów, jak i amatorów.

Książka 'Adobe Dreamweaver CS4/CS4 PL. Oficjalny podręcznik' zawiera jedenaście lekcji, przygotowanych przez autoryzowanych trenerów firmy Adobe. Obejmują one podstawy obsługi programu, a ponadto zawierają wiele wskazówek i technik, które pozwolą Ci zwiększyć wydajność pracy. Dzięki temu podręcznikowi nauczysz się korzystać z najnowszych i najlepszych rozwiązań do tworzenia witryn internetowych, takich jak panel Properties (Właściwości), arkusze stylów CSS czy inteligentne obiekty programów Photoshop i Flash. Dowiesz się także, jak tworzyć makiety, formularze, tabele i publikować swoją gotową stronę w Internecie.

Cała wiedza ekspertów Adobe Dreamweaver w praktycznym podręczniku!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrêcznik Autor: Adobe Creative Team T³umaczenie: Joanna Zatorska ISBN: 978-83-246-2273-3 Tytu³ orygina³u: Adobe Dreamweaver CS4 Classroom in a Book Format: 170230, stron: 288 Poznaj wszechstronne mo¿liwoœci Dreamweavera CS4/CS4 PL i twórz nowoczesne oraz wygodne serwisy internetowe • Jak zbudowaæ sprawny serwis WWW i zarz¹dzaæ nim? • Jak stworzyæ interaktywny i rozbudowany interfejs? • Jak korzystaæ z inteligentnych obiektów programu Photoshop? Adobe Dreamweaver CS4/CS4 PL to znakomity program do tworzenia nowoczesnych serwisów WWW, pozwalaj¹cy na pracê z rozbudowan¹ zawartoœci¹ CSS i samodzielne modyfikowanie kodu Ÿród³owego. Ani uaktualnianie witryny internetowej bezpoœrednio z poziomu przegl¹darki, ani dodawanie danych dynamicznych do strony nie wymagaj¹ przy tym korzystania z bazy danych czy skomplikowanego kodu. Najnowsza wersja CS4 pozwala tak¿e wstawiaæ na stronê pliki z programu Photoshop oraz za pomoc¹ widoku na ¿ywo sprawdzaæ wygl¹d wprowadzonych zmian prawie dwukrotnie szybciej, ni¿ dzieje siê to przy renderowaniu w przegl¹darce. Bogactwo oraz intuicyjnoœæ narzêdzi Dreamweavera sprawiaj¹, ¿e mo¿e on byæ z powodzeniem i bez trudu wykorzystywany do tworzenia stron WWW zarówno przez profesjonalistów, jak i amatorów. Ksi¹¿ka „Adobe Dreamweaver CS4/CS4 PL. Oficjalny podrêcznik” zawiera jedenaœcie lekcji, przygotowanych przez autoryzowanych trenerów firmy Adobe. Obejmuj¹ one podstawy obs³ugi programu, a ponadto zawieraj¹ wiele wskazówek i technik, które pozwol¹ Ci zwiêkszyæ wydajnoœæ pracy. Dziêki temu podrêcznikowi nauczysz siê korzystaæ z najnowszych i najlepszych rozwi¹zañ do tworzenia witryn internetowych, takich jak panel Properties (W³aœciwoœci), arkusze stylów CSS czy inteligentne obiekty programów Photoshop i Flash. Dowiesz siê tak¿e, jak tworzyæ makiety, formularze, tabele i publikowaæ swoj¹ gotow¹ stronê w Internecie. • Konfigurowanie serwisu w programie Dreamweaver • Wybieranie i edytowanie stylów 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 Ca³a wiedza ekspertów Adobe Dreamweaver w praktycznym podrêczniku! SPiS TreśCi WSTęP 7 1 WSTęP dO PrOgrAmu dreAmWeAver CS4 12 Konfigurowanie serwisu w programie Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . .14 Obsługa ekranu powitalnego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Wybór szablonu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 Zapisywanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 Wybór okna dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Zmiana tytułu strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Zmiana nagłówków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Wstawianie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Wstawianie elementów graficznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Wybieranie i edytowanie stylów CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 Zmiana koloru i kroju czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 Praca w trybie Code (Kod) oraz Code and Design (Kod i Projekt) . . . . . . . . . . . . .30 Obsługa panelu Properties (Właściwości) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Wyświetlanie podglądu strony w widoku aktywnym . . . . . . . . . . . . . . . . . . . . . . . .37 Wyświetlanie podglądu strony w przeglądarce . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 2 KASKAdOWe ArKuSZe STyLóW (CSS) 42 Podgląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Dołączanie zewnętrznego arkusza stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45 Tworzenie nowej reguły CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Używanie stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Używanie niestandardowych klas dla podziałów stron . . . . . . . . . . . . . . . . . . . . . .55 Kontrola znaczników w panelu CSS Rules (Reguły CSS) . . . . . . . . . . . . . . . . . . . . . .61 Tworzenie arkusza stylów na potrzeby druku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 3 PrACA Z TeKSTem 70 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 Tworzenie nagłówków, list i cytatów blokowych . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 Tworzenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81 Dostosowywanie wyglądu tabeli za pomocą CSS . . . . . . . . . . . . . . . . . . . . . . . . . . .84 4 SPIS TREŚCI Dreamweaver Book.indb 4 2009-06-22 17:48:00 Sprawdzanie pisowni w dokumencie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89 Tworzenie wskazówek do narzędzi Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Wyszukiwanie i zastępowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 4 eLemeNTy grAFiCZNe 96 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98 Wstawianie zdjęć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98 Elementy graficzne w tle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101 Korzystanie z panelu Properties (Właściwości) do pracy z grafiką . . . . . . . . . . 102 Kopiowanie i wklejanie elementów graficznych z programu Photoshop . . . 105 Program Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Inteligentne obiekty programu Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 5 NAWigACjA 114 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Łącza do stron należących do tego samego serwisu . . . . . . . . . . . . . . . . . . . . . . 116 Tworzenie łączy do stron zewnętrznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Tworzenie łączy e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Łącza w obrębie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 Tworzenie paska menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Tworzenie panelu z zakładkami Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Sprawdzanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 6 PrOjeKTOWANie iNTerAKTyWNyCh STrON WWW 138 Kilka informacji o zachowaniach programu Dreamweaver . . . . . . . . . . . . . . . . 140 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141 Stosowanie efektów Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Dołączanie danych XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Dołączanie danych przy użyciu Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Tworzenie paneli harmonijkowych Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Dostosowywanie paneli harmonijkowych Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 7 PrOjeKTOWANie mAKieT 160 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Projektowanie elementów strony przy użyciu znaczników div . . . . . . . . . . 163 Praca w trybie Code (Kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Dreamweaver Book.indb 5 2009-06-22 17:48:00 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 5 Eksportowanie stylów CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Miarki i linie pomocnicze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187 Testowanie układu strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 8 PrOjeKTOWANie FOrmuLArZy 194 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Ogólne informacje o formularzach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Umieszczenie formularza na stronie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Wstawianie pól tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201 Przyciski opcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Tworzenie pól wyboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Tworzenie list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Tworzenie przycisku wysyłania danych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 Projektowanie stylów dla formularzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 9 PrACA Z ObieKTAmi PrOgrAmu FLASh 226 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Umieszczanie animacji Flash na stronie WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Wyświetlanie filmów wideo przy użyciu technologii Flash . . . . . . . . . . . . . . . . . .231 10 OPTymALiZACjA PrACy 236 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Tworzenie szablonów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Tworzenie regionów edytowalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Aktualizacja szablonu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Tworzenie stron potomnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Biblioteki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Dołączenia po stronie serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 11 PubLiKOWANie STrONy W iNTerNeCie 262 Konfigurowanie zdalnego serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Maskowanie folderów i plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Publikowanie strony w internecie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 6 SPIS TREŚCI Dreamweaver Book.indb 6 2009-06-22 17:48:00 8 PrOjeKTOWANie FOrmuLArZy W trakcie tej lekcji zapoznasz się z narzędziami do projektowania for- mularzy przeznaczonych do umieszczenia na stronie WWW. Dowiesz się między innymi, jak: • Umieścić formularz na stronie WWW. • Tworzyć pola tekstowe. • Posługiwać się kontrolkami formularzy Spry. • Tworzyć przyciski opcji. • Tworzyć pola wyboru. • Wstawiać listy. • Dodawać przyciski do obsługi formularzy. • Tworzyć zestawy pól i dodawać opisy. • Zmieniać wygląd formularzy przy użyciu stylów CSS. Ukończenie ćwiczeń opisanych w tej lekcji powinno zająć około 90 minut. Przed przystąpieniem do ich realizacji upewnij się, że skopiowałeś na dysk twardy pliki znajdujące się w folderze Lessons/lesson08 na serwerze ftp://ftp.helion.pl/przyklady/drcs4o.zip. 194 Dreamweaver Book.indb 194 2009-06-22 17:48:39 Program Dreamweaver dysponuje znakomitymi narzędziami do projektowania formularzy, które znacznie ułatwiają kontakt z użytkownikami Twojego serwisu Dreamweaver Book.indb 195 195 2009-06-22 17:48:39 Przegląd ukończonego projektu Przed przystąpieniem do realizacji ćwiczeń zaplanowanych na pierwszą część tej lekcji warto zapoznać się z wyglądem ukończonego projektu w przeglądarce internetowej. 1 Uruchom program Adobe Dreamweaver CS4. 2 Jeśli to konieczne, naciśnij klawisz F8, aby otworzyć panel Files (Pliki), i wybierz serwis DW CIB z listy serwisów. 3 Wyświetl zawartość foldera lesson08 w panelu Files (Pliki). 4 Zaznacz plik contact-finished.html i naciśnij klawisz F12 (Option+F12 w Mac OS), aby wyświetlić podgląd pliku w domyślnej przeglądarce.  Uwaga: Jeśli domyślną przeglą- darką w Twoim sys- temie operacyjnym jest program Internet Explorer, a w górnej części okna tej prze- glądarki wyświetlony został komunikat o zablokowaniu skryptu JavaScript ze względu na usta- wiony poziom zabez- pieczeń, kliknij pasek z tym komunikatem i wydaj polece- nie Allow Blocked Content (Zezwalaj na zablokowaną zawartość). Przykładowa strona zawiera formularz składający się z kilku typowych elementów. Spróbuj go wypełnić i zwróć uwagę na zachowanie poszczególnych elementów. 5 Umieść kursor w polu Your Name i wpisz swoje imię i nazwisko. Naciśnij klawisz Tab. Twoje imię i nazwisko będą wyświetlane w polu tekstowym. 196 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 196 2009-06-22 17:48:39 6 Umieść kursor w polu Your email, a następnie naciśnij klawisz Tab bez podawania żadnych informacji. Kontrolki Spry Form oferują narzędzia umożliwiające wstępną automatyczną weryfikację wprowadzanych danych — na przykład zignorowanie jednego z wymaganych pól sygnalizują komunikatem o błędzie. 7 W polu Your email wpisz adres w postaci jdoe@mycompany i naciśnij klawisz Tab, celowo omijając domenę funkcjonalną .com. Jak widać, kontrolka Spry Form zareagowała na wykryty błąd, wyświetlając komunikat z prośbą o podanie poprawnego adresu poczty elektronicznej. 8 Dopisz końcówkę domeny .com do wprowadzonego przed chwilą adresu i naciśnij klawisz Tab. Ponieważ otrzymany w ten sposób adres internetowy jest kompletny, komunikat o błędzie został usunięty. 9 W polu Username wpisz nazwę użytkownika, lecz nadaj jej długość nie większą niż sześć znaków. Naciśnij klawisz Tab. Zwróć uwagę na komunikat o błędzie, jaki zostanie wyświetlony obok edytowanego pola. 10 Dopisz kilka znaków w nazwie użytkownika i ponownie naciśnij klawisz Tab. Dreamweaver Book.indb 197 2009-06-22 17:48:40 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 197 11 W polu Password wpisz hasło składające się z ośmiu znaków, wśród których znajdować się będą tylko litery, i naciśnij klawisz Tab. Wyświetlony zostanie kolejny komunikat o błędzie. 12 Dopisz kilka znaków do hasła, pamiętając, aby znalazły się w nich przynajmniej dwie cyfry. Naciśnij klawisz Tab. 13 W polu Repeat Password wpisz inny zestaw znaków niż w poprzednim polu i naciśnij klawisz Tab. Kontrolka Spry Validation Confirm wykryje różnice w zestawach znaków wprowadzonych w obu polach i wyświetli komunikat o błędzie. 14 Wpisz poprawne hasło w polu Repeat Password i naciśnij klawisz Tab. 15 W polu Travel Plans napisz kilka życzeń odnośnie do planowanej podróży, a następnie naciśnij klawisz Tab. 16 Określ liczbę podróżujących osób, posługując się zestawem przycisków. 17 Zaznacz opcje Services dotyczące usług, jakich oczekujesz od firmy. 18 Z listy Timeline wybierz opcję dotyczącą terminu Twojej podróży. 19 Kliknij przycisk Submit, aby wysłać wypełniony formularz. Zwróć uwagę na stronę z podziękowaniem, która zostanie wyświetlona chwilę później. 20 Gdy skończysz, zamknij okno przeglądarki, aby kontynuować pracę w programie Dreamweaver. Zanim przystąpisz do projektowania formularza, zapoznaj się z kilkoma ogólnymi informacjami i wskazówkami dotyczącymi działania takich formularzy.  Uwaga: Dane podane w formu- larzu nie są nigdzie zapisywane. 198 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 198 2009-06-22 17:48:40 Ogólne informacje o formularzach Formularze, zarówno te papierowe, jak i te, które umieszczane są na stronach inter- netowych, służą do zbierania informacji. W celu zwiększenia czytelności i dla wygody użytkownika w obydwu rodzajach formularzy każde pytanie wymaga wpisania odpo- wiedzi w specjalnym oddzielnym polu. Ponadto formularze są też zazwyczaj wyraźnie wyodrębnionym elementem większego projektu: w wersji papierowej znajdują się one na oddzielnym arkuszu lub są oddzielone ramką, a w wersji internetowej ich granice wyznacza zasięg znacznika form . Formularze publikowane on-line pozwalają rów- nież zaoszczędzić koszty pracy i uniknąć ewentualnych błędów podczas wprowadzania danych przez pracowników. Formularze internetowe zbudowane są z zestawu oddzielnych elementów przystosowa- nych do zbierania różnego rodzaju informacji: • Pola tekstowe — umożliwiają wpisanie tekstu o ograniczonej długości; pola tekstowe służące do wprowadzania haseł powodują zamaskowanie znaków wpisywanych przez użytkownika. • Obszary tekstowe — ich działanie i rola są podobne jak pól tekstowych, lecz są one przystosowane do wprowadzania dłuższego tekstu, na przykład kilku zdań lub całych akapitów. • Przyciski wyboru — umożliwiają wybór opcji z wzajemnie wykluczającego się zestawu; kliknięcie dowolnego z tych przycisków w ramach jednego zestawu powoduje automatyczne wyłączenie tego, który był dotychczas włączony. • Pola wyboru — pozwalają na udzielenie odpowiedzi typu „tak lub nie”. Podobnie jak przyciski wyboru, pola te mogą być grupowane w zestawy, lecz w odróżnieniu od nich ich wybór nie wyklucza się wzajemnie. • Listy — zawierają szereg opcji wyświetlanych w postaci pionowej kolumny. Listy (zwane też menu lub listami rozwijanymi) mogą być skonfigurowane w sposób umożliwiający wybranie jednej lub kilku różnych opcji. • Elementy ukryte — przekazują informacje niezbędne do przetworzenia formularza, lecz niewidoczne dla użytkownika. Ukryte elementy formularzy są bardzo często stosowane w aplikacjach internetowych. • Przyciski — służą zazwyczaj do wysyłania wypełnionego formularza, lecz mogą również pełnić inne funkcje, takie jak na przykład wyzerowanie wszystkich wpisanych informacji. Formularz papierowy można po wypełnieniu wysłać pocztą lub oddać zainteresowa- nej osobie; w przypadku formularzy internetowych jest podobnie z tą różnicą, że ich przetwarzanie i przesyłanie odbywa się drogą elektroniczną. Znacznik form zawiera między innymi atrybut action; wartość tego atrybutu decyduje o tym, co stanie się z formularzem po jego wypełnieniu. Najczęściej atrybut ten powoduje wyświetlenie odpowiedniej strony lub zainicjowanie skryptu po stronie serwera, który zajmie się przetworzeniem wprowadzonych danych.  Uwaga: Zagadnienia dotyczące przetwa- rzania formularzy wykraczają poza zakres materiału przedstawionego w tej książce; w trak- cie tej lekcji dowiesz się jedynie, w jaki sposób przygotować działający formularz umożliwiający dalsze przetwarzanie wpro- wadzonych danych. Jeśli chciałbyś dowiedzieć się wię- cej o dynamicznych aplikacjach umożli- wiających przecho- wywanie informacji wprowadzonych w formularzach, zajrzyj do systemu pomocy programu Dreamweaver; potrzebne wska- zówki znajdziesz pod hasłem „Building applications visually” („Tworzenie aplikacji metodą graficzną”). Dreamweaver Book.indb 199 2009-06-22 17:48:40 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 199 umieszczenie formularza na stronie 1 Wyświetl zawartość foldera lesson08 w panelu Files (Pliki) i dwukrotnie kliknij plik contact-start.htm, aby go otworzyć. 2 Wydaj polecenie File/Save As (Plik/Zapisz jako). Jako nazwę pliku wpisz contact. html i kliknij przycisk Save (Zapisz). Oryginalny plik contact-start.hmtl będzie dostępny z poziomu twardego dysku, na wypadek gdybyś potrzebował przejrzeć jego zawartość. Ze względu na to, że znacznik formularza form musi obejmować wszystkie elementy tego formularza, warto umieścić go na stronie na samym początku. Jeśli spróbujesz wstawić element formularza, a znacznik form nie będzie obecny na stronie, program Dreamweaver przypomni o konieczności jego wstawienia. 3 Kliknij w obszarze mainContent div, tuż za znakiem zapytania kończącym nagłówek. W tym miejscu wstawimy znacznik form . 4 Wybierz Forms (Formularze) z listy Category (Kategoria) w panelu Insert (Wstaw), a następnie kliknij ikonę Form (Formularz) Program Dreamweaver umieści na stronie znacznik form , który na podglądzie Design (Projekt) będzie przedstawiony w postaci czerwonej kreskowanej ramki. . 5 Jeśli to konieczne, wydaj polecenie Window/Properties (Okno/Właściwości), aby Skonfigurujmy teraz atrybut action formularza. wyświetlić panel Properties (Właściwości). Kliknij ikonę foldera znajdującą się tuż obok pola Action (Operacja). Odszukaj folder lesson08 w oknie dialogowym Select File (Wybierz plik), zaznacz plik form_processing.html znajdujący się w tym folderze i kliknij przycisk OK. Pole Action (Operacja) odnosi się do strony, która będzie przechowywać dane przesłane z formularza celem dalszej analizy. Dane te mogą być gromadzone w bazie danych, mogą tworzyć dynamiczną zawartość, generować odpowiedzi lub być przetwarzane w inny sposób. Formularz utworzony w tym ćwiczeniu po kliknięciu przycisku Submit załaduje jedynie stronę z podziękowaniem za jego wypełnienie. 6 Wydaj polecenie File/Save (Plik/Zapisz). Utworzyłeś już obiekt formularza. Teraz można rozpocząć tworzenie pól formularza, począwszy od najprostszych i najczęściej spotykanych pól tekstowych.  Uwaga: Jeśli nie widzisz kreskowa- nej ramki wokół znacznika form , rozwiń menu Visual Aids (Pomoce wizualne), którego ikona znajduje się na pasku Document (Dokument), i włącz opcję Invisible Elements (Elementy niewidoczne).  Uwaga: Wartości wszystkich pozo- stałych ustawień można pozostawić bez zmian. Atrybuty Method (Metoda) i Enctype (Typ encji) można zmienić w dowolnym momencie, w zależ- ności od sposobu przetwarzania wprowadzonych do formularza danych na serwerze oraz od typu danych. Jak wspomniałem wcześniej, kod wyko- nywany po stronie serwera inicjowany jest przez atrybut action formularza. 200 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 200 2009-06-22 17:48:40 Wstawianie pól tekstowych Pola tekstowe stanowią zazwyczaj najważniejszy element wszelkich formularzy. Są one oznaczone znacznikiem input , który wyświetla się również w liście selektorów. Trudno wręcz wyobrazić sobie jakikolwiek skuteczny formularz, który nie zawiera tych prostych elementów umożliwiających wpisywanie krótkich informacji tekstowych. Niektóre formularze składają się wyłącznie z takich właśnie pól. W kolejnych ćwiczeniach dowiesz się, w jaki sposób tworzyć zwykłe pola tekstowe, pola tekstowe Spry, pola umożliwiające podanie hasła, pola umożliwiające jego potwier- dzenie oraz duże obszary tekstowe. Zanim jednak zaczniesz, powinieneś upewnić się, że program Dreamweaver pozwala na dodanie elementów formularza w sposób, który zapewnia możliwie dużą zgodność z wszelkiego rodzaju ułatwieniami dostępu. Konfiguracja ułatwień dostępu Pola tekstowe charakteryzują się szczególnymi wymaganiami, jeśli chodzi o ułatwienia dostępu. Rozmaite rozwiązania techniczne, wspomagające korzystanie ze stron inter- netowych, takie jak choćby czytniki ekranowe, wymagają zastosowania określonego kodu źródłowego, który umożliwi im poprawne zinterpretowanie treści formularza i jego poszczególnych elementów. Program Dreamweaver oferuje opcje umożliwiające wygenerowanie takiego kodu w zrozumiałej dla wspomnianych programów postaci. Jeśli już wcześniej skonfigurowałeś program Dreamweaver, sprawdź teraz, czy uczyniłeś to również dla elementów formularzy. 1 Wydaj polecenie Edit/Preferences (Edycja/Preferencje) lub Dreamweaver/Preferences (Edycja/Preferencje) w Mac OS. 2 Po wyświetleniu okna dialogowego Preferences (Preferencje) kliknij nazwę kategorii Accessibility (Dostępność). 3 Zaznacz opcję Form objects (Obiekty formularza) w Accessibility (Dostępność) i kliknij przycisk OK. W kolejnych ćwiczeniach przekonasz się, że zmiana wspomnianej przed chwilą opcji spowoduje wyświetlenie dodatkowego okna dialogowego przed wstawieniem dowol- nego elementu formularza. W oknie tym znajduje się szereg opcji umożliwiających między innymi dodawanie specjalnych etykiet i innych niestandardowych rozszerzeń poszczególnych pól formularza. W następnym ćwiczeniu zapoznasz się z działaniem tych opcji w praktyce. Posługiwanie się polami tekstowymi W polach tekstowych można wpisywać ciągi znaków alfanumerycznych — czyli zawie- rających litery i cyfry — o pewnej granicznej długości. Maksymalna długość takiego ciągu może wynosić 255 znaków, lecz w większości przypadków liczba ta jest w zupeł- ności wystarczająca: pola tekstowe najczęściej służą bowiem do wpisywania krótkich informacji tekstowych, takich jak adresy czy imiona. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). Dreamweaver Book.indb 201 2009-06-22 17:48:40 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 201 2 Umieść kursor wewnątrz czerwonej krawędzi formularza. 3 Kliknij ikonę Text field (Pole tekstowe) na pasku Insert (Wstaw). Jest to druga ikona, licząc od lewej. w kategorii Forms (Formularze) 4 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz name i naciśnij klawisz Tab. W polu Label (Etykieta) wpisz Name i ponownie naciśnij klawisz Tab. Identyfikator name rozpoczyna się od małej litery, ponieważ jest to element kodu. Natomiast napis etykiety Name rozpoczyna się od wielkiej litery, ponieważ będzie on wyświetlany obok pola tekstowego formularza. 5 Wybierz opcję Attach label tag using ‘for’ attribute (Dołącz znacznik etykiety, używając atrybutu ‘for’) w sekcji Style (Styl). Upewnij się, że zaznaczona została opcja Position: Before form item (Umieszczenie: Przed pozycją formularza). Kliknij przycisk OK.  Uwaga: Etykiety dla pól tekstowych są zazwyczaj umiesz- czane przed tymi polami. W dalszej części lekcji przeko- nasz się, że etykiety przycisków i pól wyboru są umiesz- czane za tymi polami. Konwencja ta ułatwia korzysta- nie i dostęp do for- mularzy. Włączenie opcji Attach label tag using ‘for’ attribute (Dołącz znacznik etykiety, używając atrybutu ‘for’) spowoduje wygenerowanie następującego kodu: label for= name Name /label input type= text id= name / Dzięki takiemu rozwiązaniu znacznik label może być całkowicie oddzielony od elementu formularza w postaci znacznika input i umieszczony w oddzielnej komórce 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ż na swoim miejscu. Wstawianie kolejnych standardowych pól tekstowych przebiega bardzo podobnie, w następnym ćwiczeniu zajmiemy się więc nieco innym rodzajem elementu formularza — polem tekstowym Spry. Tworzenie pól tekstowych Spry W lekcji 6. zapoznałeś się ze specjalną platformą Spry, ułatwiającą implementację technologii Ajax w projektach programu Dreamweaver. W trakcie zaproponowanych w tej lekcji ćwiczeń używaliśmy różnych narzędzi i funkcji działających w ramach plat- formy Spry, takich jak dane Spry czy panele harmonijkowe Spry. Nie mówiliśmy dotąd jednak o specjalnych obiektach typu Spry Form, przeznaczonych do tworzenia formu- larzy. Każdy obiekt tego typu stanowi połączenie zaawansowanych funkcji JavaScriptu z łatwymi w obsłudze, gotowymi elementami formularza, oferującymi automatyczną weryfikację treści wpisywanych przez użytkownika. Weryfikacja ta polega przede wszystkim na sprawdzeniu poprawności typu danych wpisanych do określonego pola formularza. Jeśli, przykładowo, podczas wypełniania formularza użytkownik wpisałby niepełny lub błędny adres e-mail, to pozostałe dane w tym formularzu mogłyby okazać się bezwartościowe. Weryfikacja pozwala też zadbać o wypełnienie wszystkich niezbędnych pól formularza przed jego wysłaniem. Obiekty typu Spry Form obsługują kilka następujących elementów formularzy: pola tekstowe, obszary tekstowe, pola wyboru, pola umożliwiające podanie hasła i jego potwierdzenie, grupy przycisków wyboru i listy. Posługiwanie się tymi obiektami jest bardzo podobne — po umieszczeniu wybranego obiektu na stronie należy skonfiguro- wać parametry jego działania przy użyciu panelu Properties (Właściwości) — i gotowe. Wszystko to jest bardzo proste, o czym będziesz mógł przekonać się w kolejnym ćwi- czeniu, w którym użyjemy obiektu Spry Validation Text Field (Pole tekstowe zatwier- dzenia Spry). Obiekt ten umożliwia między innymi sprawdzenie poprawności adresu poczty e-mail wpisanego przez użytkownika. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). 2 Umieść kursor za słowem Name w polu tekstowym wstawionym w poprzednim ćwiczeniu i naciśnij klawisze Shift+Enter (Shift+Return w Mac OS), aby utworzyć jednowierszowy odstęp. 3 Kliknij ikonę Spry Validation Text field (Pole tekstowe zatwierdzenia Spry) znajdującą się w kategorii Forms (Formularze) na pasku Insert (Wstaw). , 4 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz email i naciśnij klawisz Tab. W polu Label (Etykieta) wpisz Email: i ponownie naciśnij klawisz Tab. Upewnij się, że w sekcji Style (Styl) wybrana została opcja Attach label tag using ‘for’ attribute  Uwaga: Dodanie dowolnej kon- trolki spowoduje wstawienie łącza do pliku JavaScript i arkusza CSS. Na potrzeby ćwiczeń opisanych w tej lekcji oba te pliki zostały umieszczone pośród plików przykłado- wych. Jeżeli będziesz tworzył własne formularze program Dreamweaver poinformuje o dołą- czeniu tych plików do twojego serwisu. Nie zapomnij o uak- tualnieniu zawartości folderów SpryAssets i Scripts po ukończe- niu serwisu, w prze- ciwnym przypadku kontrolki mogą nie zostać wyświetlone lub będą działać nieprawidłowo. Dreamweaver Book.indb 203 2009-06-22 17:48:41 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 203 (Dołącz znacznik etykiety, używając atrybutu ‘for’). Wybierz opcję Position: Before form item (Umieszczenie: Przed pozycją formularza) i kliknij przycisk OK. 5 Wydaj polecenie File/Save (Plik/Zapisz). Kliknij przycisk OK w komunikacie informującym o konieczności dołączenia zewnętrznych plików z kodem JavaScriptu. Po umieszczeniu na stronie wymaganych elementów formularza — wraz z dodat- kowymi funkcjami realizowanymi przez mechanizmy Spry — możemy przystąpić do kosmetycznych prac związanych z nadaniem im odpowiedniego wyglądu. 6 Jeżeli zakładka Spry TextField (Pole tekstowe Spry) nie jest widoczna, przesuń kursor nad pole tekstowe Spry i poczekaj na jej wyświetlenie nad polem tekstowym; kliknij tę zakładkę, aby zaznaczyć pole tekstowe Spry. 7 Jeśli to konieczne, wydaj polecenie Window/Properties (Okno/Właściwości), aby wyświetlić panel Properties (Właściwości). Z listy Type (Typ) wybierz opcję Email Address (Adres e-mail). Ustawienia i opcje zgromadzone w panelu Properties (Właściwości) pozwalają niemal dowolnie skonfigurować sposób działania wybranego pola. Jak widać, znajduje się na nim wiele innych opcji odpowiadających różnym wariantom weryfikacji wprowadzonych przez użytkownika treści, począwszy od Integer (Liczba całkowita) pozwalającej sprawdzić, czy wprowadzony ciąg znaków jest liczbą całkowitą, aż do Custom (Niestandardowo) umożliwiającej skonfigurowanie nietypowych sposobów weryfikacji. Opcja Email Address (Adres e-mail) umożliwia sprawdzenie, czy we wpisanym ciągu znaków znajduje się symbol @, po którym następuje pełna nazwa domeny. 204 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 204 2009-06-22 17:48:41 Skonfigurujmy teraz zdarzenie, które będzie inicjowało weryfikację treści pola. 8 Zaznacz opcję Blur (onBlur) w sekcji Validate on (Zatwierdzono) i upewnij się, że zaznaczona jest opcja Required (Wymagane). Domyślnie proces weryfikacji jest inicjowany podczas wysyłania wypełnionego for- mularza. W większości przypadków można jednak pokusić się o wykorzystanie innych zdarzeń, które zainicjują ów proces w innym momencie. Na przykład w tym przypadku sprawdzenie adresu wpisanego przez użytkownika nastąpi w chwili, gdy naciśnie on klawisz Tab lub kliknie w innym polu tekstowym. Takie rozwiązanie jest o wiele wygod- niejsze i umożliwia poprawienie wychwyconego błędu jeszcze przed przystąpieniem do wypełniania kolejnych pól. Włączenie opcji Required (Wymagane) sprawia, że jeśli pole z adresem e-mail zostanie całkowicie pominięte przez użytkownika, to podczas próby wysłania formularza błąd ten zostanie zasygnalizowany przy użyciu odpowied- niego komunikatu. W tym ćwiczeniu pozostawimy domyślny komunikat. Jego zmiana jest jednak bardzo prosta. Dokonujemy jej, korzystając z listy Preview states (Stany podglądu) na panelu Properties (Właściwości). Zaznacz dowolny stan podglądu i wpisz tekst komunikatu. Aby tymczasowo, na czas pracy nad stroną, wyłączyć wyświetlanie komunikatów o błę- dzie, wybierz Initial (Początkowy) z listy Preview states (Stany podglądu). Tworzenie grupy pól tekstowych Dwa pierwsze pola testowe można zgrupować w jednym bloku o wspólnym nagłówku (nazywanym legendą). W tym celu wykorzystamy znacznik fieldset . 1 Umieść kursor z prawej strony pola Email i naciśnij klawisz Enter (Return w Mac OS), aby utworzyć nowy wiersz. 2 Zaznacz etykiety Name i Email wraz z polami tekstowymi. W trybie Design (Projekt) może to być dość trudne, dlatego też aby upewnić się, że zaznaczone zostały wszystkie elementy, włącz tryb Code and Design (Kod i Projekt). Dreamweaver Book.indb 205 2009-06-22 17:48:41 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 205 Powinieneś zaznaczyć cały 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” A value is required. /span span class=”textfieldInvalidFormatMsg” Invalid format. /span /span 3 Kliknij ikonę Fieldset (Grupa pól [fieldset]) na pasku Insert (Wstaw). w kategorii Forms (Formularze) 4 Gdy na ekranie wyświetlone zostanie okno dialogowe Fieldset (Grupa pól [fieldset]), w polu Legend (Opis) wpisz Your Contact Information i kliknij przycisk OK. 5 Wydaj polecenie File/Save (Plik/Zapisz). W trybie Design (Projekt) grupa pól nie jest wyraźnie zaznaczona, możemy zobaczyć jedynie jej nagłówek. Aby wyświetlić rzeczywisty podgląd, włącz tryb aktywny lub otwórz stronę w przeglądarce. Dwa pola tekstowe będą obrysowane cienką ramką z opisem w jej lewym górnym rogu. 6 Kliknij przycisk Live View (Widok aktywny) lub zamknij przeglądarkę, aby powrócić do trybu edycji programu Dreamweaver. Tworzenie pól tekstowych username i password Niektóre pola tekstowe nie wymagają specjalnego formatowania, jednak może być konieczne wpisanie określonej liczby znaków. Jest to powszechny wymóg pól, w któ- rych wpisuje się nazwę użytkownika. W kolejnym ćwiczeniu umieścisz na stronie pole tekstowe Spry z wymogiem minimalnej liczby znaków. 1 Umieść kursor za grupą pól, jednak wewnątrz czerwonej ramki wokół formularza. Jeżeli to konieczne, zaznacz grupę pól i naciśnij klawisz prawej strzałki. Naciśnij klawisz Enter (Return w Mac OS), aby utworzyć nowy wiersz. 2 Kliknij ikonę Spry Validation Text Field (Pole tekstowe zatwierdzenia Spry), znajdującą się w kategorii Forms (Formularze) na pasku Insert (Wstaw). 3 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz username i naciśnij klawisz Tab. 206 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 206 2009-06-22 17:48:41 W polu Label (Etykieta) wpisz Username: i ponownie naciśnij klawisz Tab. Upewnij się, że w sekcji Style (Styl) wybrana została opcja Attach label tag using ‘for’ attribute (Dołącz znacznik etykiety, używając atrybutu ‘for’), zaś w sekcji Position (Umieszczenie) — opcja Before form item (Przed pozycją formularza). Kliknij przycisk OK. 4 Jeżeli to konieczne, przesuń kursor nad polem tekstowym username i poczekaj na pojawienie się zakładki Spry TextField. Kliknij ją, aby zaznaczyć obiekt. 5 Zaznacz opcję Validate on Blur (Zatwierdzono onBlur) w panelu Properties (Właściwości) i wpisz 6 w polu Min characters (Min. liczba znaków). Upewnij się, że zaznaczona jest opcja Required (Wymagane). Jeżeli w trybie Design (Projekt) wyświetlony zostanie komunikat błędu na czerwonym tle, zaznacz opcję Initial (Początkowy) z listy Preview states (Stany podglądu) na panelu Properties (Właściwości), aby go usunąć. 6 Wydaj polecenie File/Save (Plik/Zapisz). Tworzenie pól haseł Pola tekstowe służące do wprowadzania haseł spotyka się w internecie niemal na każ- dym kroku. Znaki wpisywane w zwykłym polu tekstowym są wyświetlane bez żadnych modyfikacji, lecz w przypadku pola hasła sytuacja wygląda zupełnie inaczej: są one maskowane jakimś uniwersalnym symbolem, różniącym się w zależności od przeglą- darki. Jest to wymóg bezpieczeństwa. 1 Naciśnij klawisze Shift+Enter (Shift+Return w Mac OS), aby wstawić nowy wiersz za polem username. Dreamweaver Book.indb 207 2009-06-22 17:48:42 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 207 2 Kliknij ikonę Spry Validation Password (Hasło zatwierdzania Spry) się w kategorii Forms (Formularze) na pasku Insert (Wstaw). , znajdującą 3 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz password i naciśnij klawisz Tab. W polu Label (Etykieta) wpisz Password: i ponownie naciśnij klawisz Tab. Upewnij się, że w sekcji Style (Styl) wybrana została opcja Attach label tag using ‘for’ attribute (Dołącz znacznik etykiety, używając atrybutu ‘for’), zaś w sekcji Position (Umieszczenie) — opcja Before form item (Przed pozycją formularza). Kliknij przycisk OK. 4 Kliknij zakładkę SpryPassword (Hasło Spry). Zaznacz opcje Required (Wymagane) i Validate on Blur (Zatwierdzono onBlur) w panelu Properties (Właściwości). Wpisz 8 w polu Min characters (Min. liczba znaków) oraz 2 w polu Min numbers (Min. liczba liczb). Jeżeli nie chcesz, aby w oknie projektu wyświetlany był domyślny komunikat o błędzie, wybierz opcję Initial (Początkowy) z listy Preview states (Stany podglądu). 5 Naciśnij strzałkę w prawo, aby wyjść z pola hasła, po czym naciśnij klawisze Shift+Enter (Shift+Return w Mac OS), aby wstawić nowy wiersz. 6 Kliknij ikonę Spry Validation Confirm (Potwierdzenie zatwierdzania Spry) , znajdującą się w kategorii Forms (Formularze) na pasku Insert (Wstaw), aby wstawić pole potwierdzenia hasła. 7 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz confirmpw, zaś w polu Label (Etykieta) wpisz Repeat Password:. Upewnij się, że w sekcji Style (Styl) wybrana została 208 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 208 2009-06-22 17:48:42 opcja Attach label tag using ‘for’ attribute (Dołącz znacznik etykiety, używając atrybutu ‘for’), zaś w sekcji Position (Umieszczenie) — opcja Before form item (Przed pozycją formularza). Kliknij przycisk OK. 8 Zaznacz opcje Required (Wymagane) i Validate on Blur (Zatwierdzono onBlur) w panelu Properties (Właściwości). Wybierz opcję „password” in form „form1” ( password w Formularz form1 ) z listy Validate against (Zatwierdź według). 9 Umieść kursor tuż za polem potwierdzenia hasła i naciśnij klawisz Enter (Return w Mac OS). Należy jeszcze dodać wyjaśnienie, które poinformuje użytkownika o zasadach dotyczących wpisywanego hasła. Umieścimy je przed dodanymi wcześniej trzema polami. Powróć do pustego wiersza znajdującego się nad polem username. Jeżeli to ko nie- czne, utwórz nowy wiersz — zaznacz pole username, naciśnij strzałkę w lewo, aby przenieść kursor tuż przed pole, i naciśnij klawisz Enter (Windows) lub Return (Mac OS). 10 W pustym wierszu wpisz: For online access to your itinerary and travel plans, please set up a username and password. Your username must contain at least 6 characters. Your password must contain at least 8 char- acters, at least two of them numbers. Powyższy akapit oraz trzy pola tekstowe możemy połączyć i utworzyć zestaw pól. Dreamweaver Book.indb 209 2009-06-22 17:48:42 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 209 11 Zaznacz akapit i trzy pola tekstowe. Nie wahaj się używać trybu Code (Kod) i Code and Design (Kod i Projekt), aby prawidłowo zaznaczyć wszystkie elementy kodu. 12 Kliknij przycisk Fieldset (Grupa pól [fieldset]) w kategorii Forms (Formularze) na pasku Insert (Wstaw). Wpisz Online Tools w polu Legend (Opis), po czym kliknij przycisk OK. 13 Wydaj polecenie File/Save (Plik/Zapisz). Dodane przez Ciebie pole tekstowe pozwala użytkownikowi na wprowadzenie hasła zgodnego z podanymi zasadami. W polu potwierdzenia hasła wymagane jest wpisanie takiego samego hasła jak w polu poprzednim. Pozwala to uniknąć literówek we wpro- wadzanym haśle i zapobiega wysłaniu hasła innego niż zamierzone. Tworzenie obszarów tekstowych Obszary tekstowe umożliwiają wpisywanie znacznie dłuższego tekstu niż zwykłe pola tekstowe. Tekst wpisywany w tych polach jest domyślnie „zawijany”; można go też podzielić na akapity, przenosząc kursor do nowego wiersza. Jeśli użytkownik wprowa- dzi tak dużo tekstu, że przestanie on mieścić się w wyznaczonym obszarze, automatycz- nie wyświetlone suwaki umożliwią jego przejrzenie i kontynuowanie pisania. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). Innym sposobem wstawienia obszarów tekstowych jest ich utworzenie przed dodaniem elementów formularza. Metodą tą posłużymy się, aby utworzyć kilka kolejnych elementów formularza. 2 Umieść kursor poniżej zestawu pól, wewnątrz czerwonego obrysu formularza. Jeżeli to konieczne, umieść kursor wewnątrz ostatniego zestawu pól, wybierz fieldset z listy selektorów i naciśnij klawisz strzałki w prawo, aby wyjść poza jego obszar. Kliknij przycisk Fieldset (Grupa pól [fieldset]) w kategorii Forms (Formularze) na pasku Insert (Wstaw). Wpisz Your Trip w polu Legend (Opis) i kliknij przycisk OK. Możemy teraz dodać obszar tekstowy wewnątrz zestawu pól. 3 Kliknij ikonę Text Area (Obszar tekstowy [Textarea]) (Formularze) na pasku Insert (Wstaw). w kategorii Forms 210 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 210 2009-06-22 17:48:43 4 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz plans i naciśnij klawisz Tab. W polu Label (Etykieta) wpisz Travel Plans. Upewnij się, że w sekcji Style (Styl) wybrana została opcja Attach label tag using ‘for’ attribute (Dołącz znacznik etykiety, używając atrybutu ‘for’). Wybierz opcję Position: Before form item (Umieszczenie: Przed pozycją formularza) i kliknij przycisk OK. 5 Obszar tekstowy pojawi się tuż za etykietą. Umieść kursor za etykietą i naciśnij klawisze Shift+Enter (Shift+Return w Mac OS), aby utworzyć odstęp jednowierszowy. 6 Zaznacz utworzony obszar tekstowy. W niektórych elementach formularza warto niekiedy umieścić jakąś wstępną domyślną wartość, która ułatwi użytkownikowi wprowadzenie odpowiednich danych. Można to zrobić przy użyciu opcji Init val (Wart. początk.). Nie jest to jednak konieczne i zależy od etykiety oraz przejrzystości formularza. 7 Wpisz Briefly describe where you would like to go and for how long.  Uwaga: W panelu Properties (Właściwości) możemy z łatwością zmienić szerokość i wysokość (liczbę wierszy) obszaru tekstowego. Istnieje również możliwość skonfigurowania obszaru tekstowego tylko do odczytu. Jego zawartości użytkownik nie będzie mógł zmienić. Dreamweaver Book.indb 211 2009-06-22 17:48:43 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 211 8 Wydaj polecenie File/Save (Plik/Zapisz). Utworzony obszar tekstowy pozwala użytkownikowi wpisać dłuższy tekst (mimo że poprosiłeś o krótki opis, obszar tekstowy z łatwością zmieści kilka akapitów). Przyciski opcji Jeśli zamierzasz umieścić w formularzu pewien zestaw opcji, z których użytkownik powinien wybrać tylko jedną, najwygodniej będzie zrobić to przy użyciu przycisków opcji. W odróżnieniu od innych elementów formularzy, poszczególne przyciski wyboru nie mają unikatowej nazwy; jest ona wspólna dla wszystkich przycisków funkcjonują- cych w obrębie danej grupy. W celu rozróżnienia poszczególnych przycisków nadawana jest im unikatowa wartość. Program Dreamweaver oferuje dwa sposoby tworzenia przycisków opcji. Pierwszy polega na tworzeniu każdego przycisku oddzielnie, drugi zaś — na utworzeniu całej grupy jednocześnie przy użyciu kontrolki Spry Validation Radio Group (Grupa przy- cisków opcji zatwierdzania Spry). Każdy z tych sposobów ma swoje wady i zalety. Jeśli zdecydujesz się na tworzenie każdego przycisku z osobna, będziesz musiał później nadać im wspólną nazwę, aby zapewnić ich prawidłowe działanie w ramach grupy. Jeśli utworzysz całą grupę, to jednakowa nazwa zostanie im nadana automatycznie, zaś odpowiednie pliki JavaScript i CSS pozwolą na spersonalizowanie wyglądu i komuni- katów o błędzie. W ćwiczeniu, z którym zapoznasz się już za chwilę, wybrane zostało to drugie rozwiązanie. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). 2 Kliknij tuż za obszarem tekstowym, jednak wewnątrz zestawu pól oznaczonego etykietą Your trip. Naciśnij klawisz Enter (Return w Mac OS), aby przejść do nowego wiersza, i wpisz How many will be travelling in your group? Naciśnij ponownie klawisz Enter (Return w Mac OS). 3 Kliknij ikonę Spry Validation Radio Group (Grupa przycisków opcji zatwierdzania Spry) w kategorii Forms (Formularze) na pasku Insert (Wstaw). 4 Kliknij trzykrotnie przycisk Plus (+), aby utworzyć w sumie pięć przycisków. Kolejnym zadaniem będzie dodanie do przycisków etykiet i wartości. 5 Zaznacz pierwszy element na liście przycisków i w polu Label (Etykieta) wpisz One. Naciśnij klawisz Tab i wpisz one w polu Value (Wartość). Naciśnij klawisz Tab, aby przenieść kursor do drugiego wiersza opcji. Wpisz Two i naciśnij klawisz Tab; wpisz two w polu Value (Wartość). W podobny sposób wpisz kolejno Three, Four, More w polu Label (Etykieta) i odpowiednio three, four i more w polu Value (Wartość). Zaznacz opcję Line breaks ( br tags) (Znaczniki podziału wiersza [ br ]) w sekcji Lay out using (Rozmieść, używając) i kliknij przycisk OK. 212 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 212 2009-06-22 17:48:43 6 Jeżeli grupa przycisków nie jest zaznaczona w oknie dokumentu, kliknij niebieską zakładkę, aby zaznaczyć kontrolkę Spry. Zaznacz opcję Required (Wymagane) w panelu Properties (Właściwości) i pozostaw pozostałe opcje jak na rysunku. 7 Wydaj polecenie File/Save (Plik/Zapisz). W ćwiczeniu tym utworzyłeś grupę przycisków opcji, w której można zaznaczyć tylko jeden przycisk. Dzięki kontrolce Spry Validation Radio Group (Grupa przycisków opcji zatwierdzania Spry) grupa ta stała się elementem formularza, którego nie można pomi- nąć przy jego wypełnianiu. Jeżeli użytkownik nie zaznaczy żadnej opcji, po wysłaniu formularza wyświetlony zostanie komunikat o błędzie. Tworzenie pól wyboru Pola wyboru umożliwiają użytkownikowi zaznaczenie dowolnej kombinacji opcji. Każde pole ma własną nazwę i wartość, która jest wysyłana wraz z pozostałą zawartością formularza, jeśli tylko pole to zostanie zaznaczone. W odróżnieniu od przycisków opcji, pola wyboru mogą być tworzone wyłącznie pojedynczo. 1 Umieść kursor tuż za grupą przycisków opcji utworzoną w poprzednim ćwiczeniu i naciśnij klawisz Enter (Return w Mac OS). Włącz tryb Code and Design (Kod i Projekt) i upewnij się, że umieściłeś kursor za znacznikiem zamykającym /p i poza znacznikiem span , w którym znajduje się treść komunikatu o błędzie, wyświetlanego, kiedy przy wypełnianiu formularza pominięte zostaną przyciski opcji. Wróć do trybu Design (Projekt) i wpisz What services would you like for us to arrange for you? Naciśnij klawisz Enter (Return w Mac OS). Dreamweaver Book.indb 213 2009-06-22 17:48:43 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 213 Po każdym kliknięciu ikony Checkbox (Pole wyboru) Dreamweaver wstawi jedno pole wyboru. Taka metoda wymaga dodawania nazwy grupy każdemu polu osobno. Tak jak w przypadku przycisków opcji, w programie Dreamweaver istnieje również inny sposób dodawania całej grupy pól wyboru o jednakowej nazwie. Każde pole otrzyma własną etykietę i wartość. 2 Kliknij ikonę Checkbox Group (Grupa pól wyboru) (Formularze) na pasku Insert (Wstaw). w kategorii Forms 3 Gdy na ekranie wyświetlone zostanie okno dialogowe Checkbox Group (Grupa pól wyboru), kliknij przycisk Plus (+), znajdujący się obok etykiety Checkboxes (Pola wyboru), aby utworzyć trzecie pole wyboru. Zmień napis pierwszej etykiety na Tours i naciśnij klawisz Tab. Wpisz tours w polu Value (Wartość). Kontynuuj zmiany w polu Label (Etykieta), wpisując kolejno: Transportation i Hotels, oraz w polu Value (Wartość) — wpisując: transportation i hotels. Zaznacz opcję Line breaks ( br tags) (Znaczników podziału wiersza [ br ]) w sekcji Lay out using (Rozmieść, używając) i kliknij przycisk OK. Nie musimy zmieniać żadnych opcji w panelu Properties (Właściwości), jeżeli używamy grupy pól wyboru. Możesz zerknąć na kod, aby docenić jej zalety. 4 Kliknij przycisk Split (Podziel), aby włączyć tryb Code and Design (Kod i Projekt). Każde pole wyboru posiada nazwę name= CheckboxGroup1 . Jeżeli tworzymy każde pole wyboru oddzielnie, musimy osobno nadać mu nazwę i wartość. Proces ten możemy zautomatyzować i oszczędzić sporo czasu, korzystając z grupy pól wyboru Spry. 5 Wydaj polecenie File/Save (Plik/Zapisz). W tym ćwiczeniu utworzyłeś grupę pól wyboru. W grupie tej można zaznaczyć więcej niż jedno pole. Jak wspomniałem wcześniej, domyślne położenie znacznika label w przypadku zarówno przycisków opcji, jak i pól wyboru, znajduje się za elementem formularza. Do naszego formularza musimy wstawić jeszcze jeden element. W kolejnym ćwiczeniu zajmiemy się listą, która jest bardziej zwartą formą prezentacji dostępnych opcji.  Uwaga: Nazwy rodzajowe propono- wane przez program Dreamweaver, takie jak na przykład CheckboxGroup1, można zmienić, wpisując własne nazwy w polu Name (Nazwa) w panelu Properties (Właściwości). Administratorowi serwisu łatwiej rozpoznać, czego dotyczą dane, jeżeli opisane są nazwą CheckboxGroup services_wanted. Zwykle odbiorca danych przesłanych za pomocą formu- larza opisanego własnymi nazwami potrafi uzyskać z nich więcej informacji niż z formularza opisanego nazwami zaproponowanymi przez program Dreamweaver. 214 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 214 2009-06-22 17:48:44 Tworzenie list Rozwijane listy są bardzo wygodnym sposobem na umożliwienie użytkownikowi strony wyboru jednej lub kilku spośród większej liczby opcji. Zwykła lista działa podobnie jak grupa przycisków opcji, gdyż poszczególne opcje wykluczają się wzajemnie. Nic jednak nie stoi na przeszkodzie, by utworzyć listę umożliwiającą zaznaczenie kilku opcji jed- nocześnie — taka lista zachowuje się podobnie jak grupa pól wyboru. W tym ćwiczeniu utworzymy zwykłą listę z trzema wykluczającymi się wzajemnie opcjami. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). Umieść kursor tuż za etykietą ostatniego pola wyboru i naciśnij klawisz Enter (Return w Mac OS). 2 Wpisz When do you plan to travel? i naciśnij klawisz Enter (Return w Mac OS). 3 Kliknij ikonę List/Menu (Menu/lista) Insert (Wstaw). w kategorii Forms (Formularze) na pasku 4 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz timeline i naciśnij klawisz Tab. Pozostaw pole Label (Etykieta) puste i wybierz opcję No label tag (Bez znacznika etykiety) w sekcji Style (Styl), po czym kliknij przycisk OK. Nie ma potrzeby tworzenia etykiety, ponieważ jej rolę pełni tekst znajdujący się nad listą. Teraz można już dodać kolejne opcje, które znajdą się na liście. Służy do tego oddzielne okno dialogowe programu Dreamweaver, wyświetlane przy użyciu panelu Properties (Właściwości). Dreamweaver Book.indb 215 2009-06-22 17:48:44 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 215 5 Zaznacz wstawioną przed chwilą listę. Jeśli to konieczne, wydaj polecenie Window/ Properties (Okno/Właściwości) i kliknij przycisk List Values (Lista wartości) w panelu Properties (Właściwości). 6 W oknie dialogowym List Values (Lista wartości) w kolumnie Item Label (Etykieta pozycji) wpisz Immediately i naciśnij klawisz Tab. W kolumnie Value (Wartość) wpisz immediately i naciśnij klawisz Tab.  Wskazówka: Możesz używać podkreśleń wpisując treść w polu Value (Wartość) — na przy- kład: within_two_ months lub this_ year. Pamiętaj tylko, aby nie używać spacji. 7 Powtórz czynności opisane w punkcie 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 skończysz, kliknij przycisk OK. Wybierzmy teraz ten element listy, który ma być na niej wyświetlony po wczytaniu strony; zazwyczaj jest to pierwsza spośród opcji na liście. 9 Z listy Initially selected (Wstępnie) w panelu Properties (Właściwości) wybierz opcję Immediately. Wybierz też opcję Type: Menu (Typ: Menu). Wybór opcji Menu spowoduje utworzenie listy jednokrotnego wyboru. Jeżeli chcemy, aby użytkownik mógł wybrać kilka opcji z listy, wówczas musimy zmienić opcję Type (Typ) na List (Lista) i zaznaczyć pole Allow multiple (Dopuszczaj wiele). W przypadku listy umożliwiającej wybór kilku opcji jednocześnie użytkownik może na przykład wybrać trzy najbardziej atrakcyjne warianty podróży. Po przejrzeniu opcji dla List (Lista) powróćmy do Menu, aby zakończyć ćwiczenie. 10 Wydaj polecenie File/Save (Plik/Zapisz). Lista typu Menu może zawierać wiele opcji — na przykład nazwy 50 stanów — co po zwa la zmieścić bardzo dużą liczbę opcji na niewielkiej przestrzeni strony. Formularz jest niemal gotowy — pozostał jeszcze jeden bardzo ważny etap polegający na dodaniu przycisku służącego do wysłania zgromadzonych w nim informacji. 216 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 216 2009-06-22 17:48:44 Tworzenie przycisku wysyłania danych Pod pewnymi względami przycisk wysyłania danych stanowi najważniejszy element całego formularza. Jak sama nazwa wskazuje, przycisk ten powoduje przesłanie wypeł- nionego formularza do dalszego przetworzenia, jest zatem nieodzowny. Domyślnie przyciski tego typu w programie Dreamweaver służą właśnie do przesyłania danych na serwer, lecz można skonfigurować je w sposób umożliwiający realizowanie innych funkcji — mogą one na przykład służyć do resetowania wprowadzonych danych. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). 2 Zaznacz dowolny element ostatniego zestawu pól. Zaznacz selektor fieldset w panelu Properties (Właściwości). Teraz umieścimy przycisk poza zestawem pól. 3 Naciśnij prawą strzałkę, aby przejść poza zaznaczony zestaw, po czym naciśnij klawisz Enter (Return w Mac OS). 4 Kliknij ikonę Button (Przycisk) (Wstaw). w kategorii Forms (Formularze) na pasku Insert 5 W polu ID w oknie dialogowym Input Tag Accessibility Attributes (Atrybuty dostępności wstawianego znacznika) wpisz submit. W sekcji Style (Styl) wybierz No label tag (Bez znacznika etykiety) i kliknij przycisk OK. Dreamweaver Book.indb 217 2009-06-22 17:48:44 AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 217 6 W panelu Properties (Właściwości) pozostaw domyślną wartość Action (Operacja) (Submit form) (Wyślij formularz) oraz Value (Wartość) Submit (Wyślij). Jeżeli chcesz zmienić etykietę na wstawianym przycisku, wpisz nową nazwę w polu Value (Wartość). 7 Wydaj polecenie File/Save (Plik/Zapisz). W tym ćwiczeniu utworzyłeś formularz, za pomocą którego możesz zebrać dane doty- czące nazwisk, adresów poczty elektronicznej, nazw użytkowników, haseł i preferencji odnośnie do podróży. Dodałeś odpowiednie skrypty walidacji Spry do niektórych pól w celu zapewnienia odpowiedniej formy adresu poczty elektronicznej i minimalnej liczby znaków w nazwie użytkownika. Formularz został uporządkowany za pomocą zestawów obiektów. Dodany został również przycisk służący do wysyłania wpisanych przez użytkownika danych. Formularz ten po dodaniu skryptu procesującego do wier- sza Action (Operacje) powinien działać poprawnie. Jednaj zanim przejdziemy dalej, warto zainteresować się stylistyką całości — ale o tym już w kolejnym ćwiczeniu. Projektowanie stylów dla formularzy Choć formularz utworzony podczas kilku poprzednich ćwiczeń jest już w pełni funk- cjonalny, to jednak jak dotychczas w ogóle nie troszczyliśmy się o jego wygląd. Dobrze zaprojektowany pod względem stylistycznym formularz będzie bardziej czytelny, przej- rzysty, a przez to łatwiejszy do wypełnienia. W trakcie kolejnego ćwiczenia nadamy jego poszczególnym elementom odpowiedni wyglądu za pomocą stylów CSS. 218 LEkCjA 8 Projektowanie formularzy Dreamweaver Book.indb 218 2009-06-22 17:48:44 Zastosowanie stylów CSS Choć formularze na stronach internetowych mogą składać się z wielu różnych elemen- tów, to jednak większość tych elementów ma pewne cechy wspólne, na przykład znacz- nik label — co bardzo ułatwia nadanie im spójnego wyglądu przy użyciu stylów. Kolejną zaletą formularzy, szczególnie tych, które zostały umieszczone w tabelach, jest ich elegancka i przejrzysta struktura. Prócz wygody posługiwania się formularzem, taka struktura upraszcza dowolne zmiany jego wyglądu. 1 Jeśli to konieczne, otwórz plik contact.html, który edytowaliśmy w poprzednim ćwiczeniu. W tym celu dwukrotnie kliknij nazwę tego pliku w panelu Files (Pliki). 2 Wydaj polecenie Window/CSS Styles (Okno/Style CSS). Utworzymy teraz nowy arkusz stylów, który będzie obsługiwał jedynie formularz. Nie będziemy go dołączać do żadnej innej strony oprócz strony, na której znajduje się formularz. Takie oddzielenie reguł CSS dla formularza od reguł umieszczonych w arkuszu dla całej strony ogranicza ilość kodu wczytywaną podczas ładowania każdej strony serwisu i zwiększa jej niezawodność. Mniejsza ilość kodu przekłada się na szybsze ładowanie strony, co robi lepsze wrażenie na użytkowniku. Poza tym zdobędziesz doświadczenie w tworzeniu nowego arkusza stylów. 3 Kliknij ikonę Attach Style Sheet (Dołącz arkusz stylów) części panelu CSS Styles (Style CSS). znajdującą się w dolnej 4 Kiedy na ekranie pojawi się okno dialogowe Attach External Style Sheet (Dołącz zewnętrzny arkusz stylów), wpisz forms.css w polu File/URL (Plik/Adres). Wybierz Link (Łącze) spośród opcji Add as (Dodaj jako), a opcję screen (ekran) z listy Media (Multimedia) i kliknij przycisk OK. 5 Dreamweaver wyświetli komunikat, że arkusz o podanej nazwie nie istnieje. Mimo to kliknij przycisk Yes (Tak), aby połączyć się z tym plikiem. 6 W zakładce All Rules (Wszystkie reguły) w panelu CSS wybierz forms.css, a następnie kliknij przycisk Plus (+), aby utworzyć nową regułę CSS. AdobE dREAmwEAvER CS4/CS4 PL. ofICjALny PodRęCznIk 219 Dreamweaver Book.indb 219 2009-06-22 17:48:45
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Adobe Dreamweaver CS4/CS4 PL. Oficjalny podręcznik
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: