Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00052 003554 12433294 na godz. na dobę w sumie
Adobe Dreamweaver CS5/CS5 PL. Oficjalny podręcznik - książka
Adobe Dreamweaver CS5/CS5 PL. Oficjalny podręcznik - książka
Autor: Liczba stron: 448
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2916-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> dreamweaver
Porównaj ceny (książka, ebook, audiobook).

Sprawdzone materiały szkoleniowe prosto od ekspertów Adobe!

Pojawienie się Dreamweavera w 1997 roku było dla sieci prawdziwą rewolucją! Od tego momentu tworzenie profesjonalnych stron internetowych stało się dostępne dla wszystkich, nawet dla tych użytkowników, którzynie mają pojęcia o językach programowania i pisaniu kodu. Dreamweaver umożliwia bowiem projektowanie stron WWW w trybie graficznym, zapewniając jednak możliwość pełnej kontroli nad kodem źródłowym. Dzięki temu szybko i bez problemu (a co najważniejsze, samodzielnie) możesz dziś zbudować i skonfigurować w pełni funkcjonalną statyczną lub dynamiczną witrynę. Mało tego! Z tym programem możesz wzbogacać gotowe strony o grafikę, tekst i animacje, tworzyć interaktywne aplikacje internetowe oraz umieszczać na serwerze witryny WWW i sprawnie nimi zarządzać. A w najnowszej wersji znajdziesz także mocno ulepszone, zaktualizowane początkowe układy CSS, które jeszcze bardziej ułatwią Ci projektowanie stron i zapewnią pełną zgodność z sieciowymi standardami.

Dzięki tej książce opanowanie możliwości Dreamweavera nie sprawi Ci najmniejszych trudności. Ta zawierająca oryginalne materiały szkoleniowe Adobe książka ze znanej i bestsellerowej serii Oficjalny podręcznik obejmuje siedemnaście praktycznych lekcji obsługi programu, przejrzyste instrukcje krok po kroku i pliki umożliwiające sprawne wykonanie opisanych ćwiczeń.

Dzięki niej bez problemu zaczniesz poruszać się w przestrzeni roboczej programu, a także konfigurować i dostosowywać ją do realizowanych zadań. Błyskawicznie opanujesz podstawy języka HTML i CSS oraz najlepsze sposoby na tworzenie kodu za pomocą Dreamweavera. Dowiesz się, jak projektować makiety czy formularze i tworzyć szablony witryn internetowych, a potem zobaczysz, jak pracować z tekstem, listami, tabelami oraz elementami graficznymi. Już wkrótce zaczniesz samodzielnie projektować interaktywne i dynamiczne strony WWW, bez trudu umieszczać na nich animacje we Flashu oraz publikować gotowe serwisy w internecie. Ponadto każda z zawartych w podręczniku lekcji kończy się podsumowaniem umożliwiającym sprawdzenie i gruntowne utrwalenie umiejętności zdobytych w trakcie lektury.

Przed Tobą siedemnaście praktycznych lekcji tworzenia stron za pomocą Adobe Dreamweavera CS5:

Opanuj Dreamweavera CS5 - poznaj najszybszy sposób na stworzenie własnej, profesjonalnej strony internetowej!

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

Darmowy fragment publikacji:

Idź do • Spis treści • Przykładowy rozdział Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2010 Adobe Dreamweaver CS5/ CS5 PL. Oficjalny podręcznik Autor: Adobe Creative Team Tłumaczenie: Joanna Zatorska ISBN: 978-83-246-2916-9 Tytuł oryginału: Adobe Dreamweaver CS5 Classroom in a Book Format: B5, stron: 448 Sprawdzone materiały szkoleniowe prosto od ekspertów Adobe! • Naucz się tworzyć statyczne i dynamiczne strony WWW • Zobacz, jak wstawiać grafikę, tekst i animacje • Twórz rozbudowane, interaktywne aplikacje internetowe • Umieść stronę na serwerze i sprawnie nią zarządzaj Pojawienie się Dreamweavera w 1997 roku było dla sieci prawdziwą rewolucją! Od tego momentu tworzenie profesjonalnych stron internetowych stało się dostępne dla wszystkich, nawet dla tych użytkowników, którzynie mają pojęcia o językach programowania i pisaniu kodu. Dreamweaver umożliwia bowiem projektowanie stron WWW w trybie graficznym, zapewniając jednak możliwość pełnej kontroli nad kodem źródłowym. Dzięki temu szybko i bez problemu (a co najważniejsze, samodzielnie) możesz dziś zbudować i skonfigurować w pełni funkcjonalną statyczną lub dynamiczną witrynę. Mało tego! Z tym programem możesz wzbogacać gotowe strony o grafikę, tekst i animacje, tworzyć interaktywne aplikacje internetowe oraz umieszczać na serwerze witryny WWW i sprawnie nimi zarządzać. A w najnowszej wersji znajdziesz także mocno ulepszone, zaktualizowane początkowe układy CSS, które jeszcze bardziej ułatwią Ci projektowanie stron i zapewnią pełną zgodność z sieciowymi standardami. Dzięki tej książce opanowanie możliwości Dreamweavera nie sprawi Ci najmniejszych trudności. Ta zawierająca oryginalne materiały szkoleniowe Adobe książka ze znanej i bestsellerowej serii Oficjalny podręcznik obejmuje siedemnaście praktycznych lekcji obsługi programu, przejrzyste instrukcje krok po kroku i pliki umożliwiające sprawne wykonanie opisanych ćwiczeń. Dzięki niej bez problemu zaczniesz poruszać się w przestrzeni roboczej programu, a także konfigurować i dostosowywać ją do realizowanych zadań. Błyskawicznie opanujesz podstawy języka HTML i CSS oraz najlepsze sposoby na tworzenie kodu za pomocą Dreamweavera. Dowiesz się, jak projektować makiety czy formularze i tworzyć szablony witryn internetowych, a potem zobaczysz, jak pracować z tekstem, listami, tabelami oraz elementami graficznymi. Już wkrótce zaczniesz samodzielnie projektować interaktywne i dynamiczne strony WWW, bez trudu umieszczać na nich animacje we Flashu oraz publikować gotowe serwisy w internecie. Ponadto każda z zawartych w podręczniku lekcji kończy się podsumowaniem umożliwiającym sprawdzenie i gruntowne utrwalenie umiejętności zdobytych w trakcie lektury. Przed Tobą siedemnaście praktycznych lekcji tworzenia stron za pomocą Adobe Dreamweavera CS5. Opanuj Dreamweavera CS5 – poznaj najszybszy sposób na stworzenie własnej, profesjonalnej strony internetowej! spIs treŚcI Wstęp O książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Wymagania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Instalowanie programu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Kopiowanie materiałów znajdujących się na serwerze FTP . . . . . . . . . . . . . . . . . .12 Zalecana kolejność wykonywania ćwiczeń . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Szybki start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 Konfi gurowanie przestrzeni roboczej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Polecenia w systemie Windows i Mac OS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Pomoc dotycząca programu Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Sprawdzanie dostępności aktualizacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Dodatkowe materiały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 Certyfi katy Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Przyspiesz swoją pracę dzięki Adobe CS Live . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 1 dOstOsOWanIe prZestrZenI rObOcZej 20 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Tematyka lekcji Rzut oka na przestrzeń roboczą Rzut oka na przestrzeń roboczą . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 Przełączanie trybu i podział widoku Przełączanie trybu i podział widoku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 Praca z panelami Praca z panelami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Wybór układu przestrzeni roboczej Wybór układu przestrzeni roboczej. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Dostosowywanie pasków narzędziowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 Dostosowywanie ustawień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 Tworzenie własnych skrótów klawiszowych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 Obsługa panelu Properties (Właściwości) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 4  SPIS  TREŚCI DW-CS5_book.indb 4 2010-12-09 12:33:59 2 pOdstaWy jęZyKa htML 38 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 Czym jest HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Początki HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Tworzenie własnego kodu HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Stosowanie formatowania wierszowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Najczęściej używane znaczniki kodu HTML 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Dokąd zmierza HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52 3 pOdstaWy css 54 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Tematyka lekcji Czym są kaskadowe arkusze stylów CSS? Czym są kaskadowe arkusze stylów CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56 Formatowanie za pomocą HTML a CSS Formatowanie za pomocą HTML a CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Domyślne ustawienia HTML Domyślne ustawienia HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Formatowanie tekstu Formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62 Formatowanie obiektów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65 No i wreszcie grupowanie, klasy oraz ID! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68 4 Wstęp dO prOGraMU dreaMWeaver cs5 72 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 Tematyka lekcji Konfi gurowanie serwisu w programie Dreamweaver Konfi gurowanie serwisu w programie Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . .74 Obsługa ekranu powitalnego Obsługa ekranu powitalnego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Wybór szablonu CSS Wybór szablonu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 Zapisywanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 Zmiana tytułu strony. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 Zmiana nagłówków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 Wstawianie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79 Wstawianie elementów grafi cznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81 Wybieranie i edytowanie stylów CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84 Zmiana koloru, kroju i wielkości czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88 Obsługa panelu Properties (Właściwości) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 Wyświetlanie podglądu strony w widoku aktywnym . . . . . . . . . . . . . . . . . . . . . . . .93 Wyświetlanie podglądu strony w przeglądarce . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94 DW-CS5_book.indb 5 2010-12-09 12:34:00 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  5 5 prOjeKtOWanIe MaKIet 98 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98 Tematyka lekcji Podstawy projektowania stron internetowych Podstawy projektowania stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Tworzenie miniatur i schematów Tworzenie miniatur i schematów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Zmiana gotowego szablonu CSS Zmiana gotowego szablonu CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Wstawianie grafi ki w tle nagłówka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Tworzenie nowych elementów div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111 Zmiana szerokości i koloru tła strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Zmiana istniejącej zawartości i formatowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Wstawianie obrazów tymczasowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Wstawianie tekstu tymczasowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Edycja stopki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Testowanie zgodności przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 6 KasKadOWe arKUsZe styLóW (css) 122 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Tematyka lekcji Podgląd ukończonego projektu Podgląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Obsługa panelu CSS Styles (Style CSS) Obsługa panelu CSS Styles (Style CSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Tworzenie nowej reguły CSS Tworzenie nowej reguły CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Tworzenie interaktywnego menu Tworzenie interaktywnego menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Modyfi kowanie zachowań łączy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Tworzenie sztucznych kolumn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Przenoszenie reguł do zewnętrznych arkuszy stylów . . . . . . . . . . . . . . . . . . . . . . .141 Tworzenie arkusza stylów na potrzeby innych nośników . . . . . . . . . . . . . . . . . . 142 7 tWOrZenIe sZabLOnóW 150 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Tematyka lekcji Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Tworzenie szablonów na podstawie gotowych układów strony Tworzenie szablonów na podstawie gotowych układów strony. . . . . . . . . . . . 153 Tworzenie regionów edytowalnych Tworzenie regionów edytowalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Tworzenie stron potomnych Tworzenie stron potomnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Aktualizacja szablonu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Biblioteki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Dołączenia po stronie serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167 6  SPIS  TREŚCI DW-CS5_book.indb 6 2010-12-09 12:34:00 8 praca Z teKsteM, LIstaMI I tabeLaMI 176 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Tematyka lekcji Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Importowanie materiału tekstowego z innych źródeł Importowanie materiału tekstowego z innych źródeł . . . . . . . . . . . . . . . . . . . . . 180 Tworzenie nagłówków Tworzenie nagłówków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181 Tworzenie list Tworzenie list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Tworzenie wcięć tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Tworzenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Sprawdzanie pisowni w dokumencie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Wyszukiwanie i zastępowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 9 eLeMenty GraFIcZne 208 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Tematyka lekcji Podstawy grafi ki WWW Podstawy grafi ki WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Wstawianie zdjęć Wstawianie zdjęć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Dostosowanie położenia obrazu za pomocą klas CSS . . . . . . . . . . . . . . . . . . . . . .217 Praca z panelem Insert (Wstaw) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Program Adobe Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Wstawianie plików o niezgodnych formatach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Inteligentne obiekty programu Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Kopiowanie i wklejanie grafi ki z programu Fireworks i Photoshop . . . . . . . . . .227 Wstawianie obrazów metodą przeciągnij i upuść . . . . . . . . . . . . . . . . . . . . . . . . . 229 Korzystanie z panelu Properties (Właściwości) do pracy z grafi ką . . . . . . . . . . 230 10 naWIGacja 234 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Tematyka lekcji Podstawy łączy hipertekstowych Podstawy łączy hipertekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237 Łącza do stron należących do tego samego serwisu Łącza do stron należących do tego samego serwisu . . . . . . . . . . . . . . . . . . . . . . 240 Tworzenie łączy w postaci elementu grafi cznego Tworzenie łączy w postaci elementu grafi cznego . . . . . . . . . . . . . . . . . . . . . . . . . 243 Tworzenie łączy do stron zewnętrznych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Tworzenie łączy e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Łącza w obrębie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247 Tworzenie paska menu Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Umieszczanie menu Spry jako elementu biblioteki. . . . . . . . . . . . . . . . . . . . . . . . 268 Sprawdzanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 DW-CS5_book.indb 7 2010-12-09 12:34:01 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  7 11 prOjeKtOWanIe InteraKtyWnych strOn WWW 276 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Tematyka lekcji Kilka informacji o zachowaniach programu Dreamweaver Kilka informacji o zachowaniach programu Dreamweaver . . . . . . . . . . . . . . . . 278 Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Stosowanie zachowań programu Dreamweaver Stosowanie zachowań programu Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . .281 Tworzenie paneli harmonijkowych Spry Tworzenie paneli harmonijkowych Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287 12 praca Z ObIeKtaMI prOGraMU FLash 294 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 Tematyka lekcji Zrozumieć technologię Flash Zrozumieć technologię Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 Umieszczanie animacji Flash na stronie WWW Umieszczanie animacji Flash na stronie WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297 Wyświetlanie fi lmów wideo przy użyciu technologii Flash Wyświetlanie fi lmów wideo przy użyciu technologii Flash . . . . . . . . . . . . . . . . . .301 13 prOjeKtOWanIe FOrMULarZy 306 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 Tematyka lekcji Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Ogólne informacje o formularzach Ogólne informacje o formularzach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Umieszczenie formularza na stronie Umieszczenie formularza na stronie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311 Wstawianie pól tekstowych Wstawianie pól tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Tworzenie pól wyboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Przyciski opcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 Tworzenie list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327 Tworzenie przycisku wysyłania danych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 Określanie operacji formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331 Przesyłanie danych za pomocą poczty elektronicznej . . . . . . . . . . . . . . . . . . . . . 333 Projektowanie stylów dla formularzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337 14 praca Z danyMI On-LIne 342 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Tematyka lekcji Tworzenie dynamicznej treści Tworzenie dynamicznej treści . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Przegląd ukończonego projektu Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Dołączanie danych HTML oraz XML Dołączanie danych HTML oraz XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 Wybór modelu serwera Wybór modelu serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Konfi guracja lokalnego serwera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Konfi guracja serwera testowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Tworzenie aplikacji wykorzystujących bazy danych . . . . . . . . . . . . . . . . . . . . . . . .361 8  SPIS  TREŚCI DW-CS5_book.indb 8 2010-12-09 12:34:02 15 tWOrZenIe dynaMIcZnych strOn WWW 370 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370 Tematyka lekcji Tworzenie stron WWW za pomocą ASP, ColdFusion oraz PHP Tworzenie stron WWW za pomocą ASP, ColdFusion oraz PHP . . . . . . . . . . . . . . 372 Tworzenie zestawów stron macierzystych i szczegółowych Tworzenie zestawów stron macierzystych i szczegółowych . . . . . . . . . . . . . . . . .381 Tworzenie strony szczegółowej Tworzenie strony szczegółowej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393 16 praca Z KOdeM 398 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Tematyka lekcji Przegląd narzędzi trybu Code (Kod) Przegląd narzędzi trybu Code (Kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Zaznaczanie kodu Zaznaczanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401 Zwijanie kodu Zwijanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Rozwijanie kodu Rozwijanie kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Dodawanie nowego kodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 Korzystanie z narzędzia Code Navigator (Nawigator kodu) . . . . . . . . . . . . . . . . 406 Dostęp do trybu Live Code (Aktywny kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .407 Korzystanie z trybu inspekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Praca z plikami powiązanymi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Włączanie trybu Split Code (Podziel kod) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 Tworzenie komentarzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 17 pUbLIKOWanIe strOny W InternecIe 414 Tematyka lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Tematyka lekcji Konfi gurowanie zdalnego serwisu Konfi gurowanie zdalnego serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Maskowanie folderów i plików Maskowanie folderów i plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 Czynności końcowe Czynności końcowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Publikowanie strony w internecie Publikowanie strony w internecie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Synchronizacja serwisów lokalnych i zdalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . .431 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 DW-CS5_book.indb 9 2010-12-09 12:34:03 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  9 11 prOjeKtOWanIe InteraKtyWnych strOn WWW tematyka lekcji W trakcie tej lekcji zapoznasz się z narzędziami pozwalającymi tworzyć interaktywne elementy stron WWW. Nauczysz się między innymi: • Wykorzystać zachowania programu Dreamweaver do utworzenia obrazka z efektem rollover. • Tworzyć panele harmonijkowe Spry. Ukończenie ćwiczeń opisanych w tej lekcji powinno zająć około 60 minut. Przed przystąpieniem do ich realizacji upewnij się, że skopiowałeś na dysk twardy pliki dotyczące lekcji 11., w sposób opisany we „Wstępie”. Jeśli dopiero rozpoczynasz pracę z książką, zapoznaj się ze wskazówkami zawar- tymi w podrozdziale „Wstępu” zatytułowanym „Szybki start”. 276 DW-CS5_book.indb 276 2010-12-09 12:35:12 Program Dreamweaver pozwala utworzyć zaawansowane efekty interaktywne w postaci zachowań oraz paneli harmonijkowych, dzięki platformie Adobe Spry. DW-CS5_book.indb 277 277 2010-12-09 12:35:13 Kilka informacji o zachowaniach programu dreamweaver Zachowania w programie Dreamweaver to skrypty w języku JavaScript, które podej- mują określone działania — na przykład powodują otwarcie okna przeglądarki po wystąpieniu określonego zdarzenia, takiego jak kliknięcie lewym przyciskiem myszy. Proces projektowania zachowań można podzielić na trzy etapy: 1 Wskazanie elementu strony, który ma wywoływać określone zachowanie. 2 Wybranie określonego zachowania. 3 Konfigurowanie ustawień lub parametrów zachowania. Zdarzenie wywołujące określone zachowanie najczęściej opiera się na istnieniu pew- nego łącza, zarówno tekstowego, jak i graficznego. Do generowania zachowań wykorzy- stuje się zwykle „puste” łącza, które nie powodują wczytania innej strony internetowej; takie łącza mogą zawierać adres w postaci krzyżyka. Z „pustych” łączy korzystaliśmy już w lekcji 10. „Nawigacja”. Zachowanie Swap Image (Zamień obraz), które zastosujemy w bieżącej lekcji, nie wymaga obecności „pustych” łączy, jednak nie należy zapominać o ich utworzeniu w przypadku innych zachowań. Dreamweaver zwykle automatycznie tworzy odpowiedni kod, jednakże niekiedy konieczne jest samodzielne utworzenie „pustych” łączy, aby aktywować niektóre zachowania. Program Dreamweaver oferuje ponad 20 różnych zachowań, wszystkie można skonfi- gurować przy użyciu panelu Tag Inspector (Inspektor znaczników). Aby go wyświetlić, wydaj polecenie Window/Tag Inspector (Okno/Inspektor znaczników). Jeśli ta liczba Cię nie satysfakcjonuje, możesz za darmo, lub za niewielką opłatą, pobrać z internetu setki dodatkowych zachowań. Duży wybór zachowań oferuje serwis Dreamweaver Exchange, dostępny po kliknięciu ikony Add Behavior (Dodaj zachowanie) ( w panelu Tag Inspector (Inspektor znaczników) i wybraniu opcji Get More Behaviors (Pobierz więcej zachowań). Kiedy otworzy się serwis Adobe Marketplace Exchange, kliknij łącze dotyczące programu Dreamweaver, aby wyświetlić pełną listę dostępnych dodatków i zachowań. )  Uwaga: Aby panel Behaviors (Zachowania) był aktywny, w oknie dokumentu musi być otwarty dowolny plik. 278  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 278 2010-12-09 12:35:13 Serwis Adobe Marketplace Exchange udostępnia ogromną ilość zasobów gotowych do wykorzystania przez projektantów i deweloperów stron WWW. Można tu znaleźć zarówno darmowe, jak i płatne dodatki do programu Dreamweaver oraz innych aplika- cji wchodzących w skład pakietu Creative Suite. Oto wybrane funkcje, jakie można zrealizować przy użyciu zachowań programu Dreamweaver: • Otwarcie okna przeglądarki. • Zmiana wyświetlanego obrazu na inny i z powrotem, czyli tzw. „efekt rollover”. • Wytłumienie obrazu lub części strony. • Zwiększenie lub zmniejszenie elementu graficznego. • Wyświetlenie komunikatu. • Zmiana tekstu lub innego elementu HTML w obrębie danego obszaru strony. • Wyświetlanie i ukrywanie fragmentów strony. • Wywołanie niestandardowej funkcji w języku JavaScript. Nie wszystkie zachowania są dostępne przez cały czas. Niektórych można użyć dopiero wtedy, gdy na stronie będą obecne lub zaznaczone określone elementy, takie jak obrazy czy łącza. Na przykład zachowanie Swap Image (Zamień obraz) wymaga umieszczenia na stronie przynajmniej jednego elementu graficznego — w przeciwnym razie będzie ono niedostępne. Każde zachowanie można skonfigurować przy użyciu odrębnego okna dialogowego, oferującego wszystkie niezbędne opcje i ustawienia. I tak na przykład okno dialogowe zachowania Open Browser Window (Otwórz okno przeglądarki) umożliwia wpisanie adresu strony internetowej lub nazwy pliku, który ma zostać otwarty w nowym oknie, oraz określenie wysokości, szerokości i innych atrybutów tego okna. Po zdefiniowaniu parametrów wybranego zachowania zostaje ono dodane do listy zachowań w panelu Behaviors (Zachowania) wraz z domyślnym zdarzeniem, które je uaktywni. Wybrane parametry można zmienić w dowolnym momencie. Zachowania programu Dreamweaver są bardzo elastyczne. Jedno zdarzenie może wyzwalać wiele różnych zachowań, co pozwala na przykład zastąpić jeden obrazek innym, zmieniając jednocześnie tekst podpisu pod tym obrazkiem — a wszystko to po jednym kliknięciu przycisku myszy. Choć użytkownikowi strony może się wydawać, że zmiany te zaszły jednocześnie, to jednak w rzeczywistości zachowania następują jedno po drugim. Po zdefiniowaniu zdarzenia, które ma wywołać kilka różnych zacho- wań, możesz ustawić kolejność ich realizacji. przegląd ukończonego projektu W pierwszej części lekcji będziemy pracować nad nową stroną oferującą wycieczki organizowane przez GreenStart. Przed przystąpieniem do realizacji ćwiczeń warto zapoznać się z wyglądem ukończonego projektu w przeglądarce internetowej. 1 Uruchom program Adobe Dreamweaver CS5. 2 Jeśli to konieczne, naciśnij klawisz F8, aby otworzyć panel Files (Pliki), i wybierz serwis DW CIB z listy serwisów. DW-CS5_book.indb 279 2010-12-09 12:35:13 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  279 3 Wyświetl zawartość foldera lesson11 w panelu Files (Pliki). Kliknij prawym klawiszem myszy plik travel_finished.html, wybierz z listy opcję Preview In Browser (Podgląd w przeglądarce) i zaznacz swoją domyślną przeglądarkę. Przykładowa strona zawiera zachowania programu Dreamweaver. 4 Jeśli domyślną przeglądarką w Twoim systemie operacyjnym jest program Internet Explorer, a w górnej części okna tej przeglądarki wyświetlony został komunikat o zablokowaniu skryptu JavaScript ze względu na ustawiony poziom zabezpieczeń, kliknij pasek z tym komunikatem i wydaj polecenie Allow Blocked Content (Zezwalaj na zablokowaną zawartość). 5 Umieść kursor nad nagłówkiem Venice: City of Canals. Zwróć uwagę na zdjęcie umieszczone z prawej strony tekstu. Dotychczasowe zdjęcie zostaje zastąpione widokiem Wenecji. 6 Przesuń kursor nad nagłówkiem Florence: City of Art. Ponownie sprawdź zdjęcie umieszczone z prawej strony tekstu. Po przesunięciu kursora poza nagłówek na miejscu zdjęcia pojawiła się ponownie reklama Eco-Tour. Nie na długo jednak — po umieszczeniu kursora nad nagłówkiem dotyczącym Florencji, wyświetli się zdjęcie tego miasta. 7 Sprawdź zachowanie obrazków po przesunięciu kursora nad każdym z nagłówków. Na stronie są wyświetlane na przemian reklama Eco-Tour oraz zdjęcia z poszczególnych miast. Jest to tak zwane zachowanie Swap Image (Zamień obraz). 8 Gdy skończysz, zamknij wszystkie okna przeglądarki i wróć do programu Dreamweaver. W kolejnym ćwiczeniu nauczysz się stosować zachowania programu Dreamweaver. 280  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 280 2010-12-09 12:35:13 stosowanie zachowań programu dreamweaver Dodanie zachowania do obiektu w programie Dreamweaver jest niezwykle prostą czyn- nością, wymagającą jedynie kilku kliknięć w odpowiednich miejscach. Strona dotycząca podróży nie została jeszcze utworzona. 1 Wyświetl panel Assets (Zasoby) i kliknij ikonę Templates (Szablony). Kliknij prawym klawiszem myszy dokument mygreen_temp i wybierz z listy opcję New From Template (Nowy z szablonu). Na ekranie wyświetlone zostanie okno nowego dokumentu utworzonego na podstawie szablonu. 2 Zapisz nowy dokument pod nazwą travel.html. 3 Kliknij dwukrotnie obraz zastępczy znajdujący się na pasku bocznym. Przejdź do folderu images, wybierz plik train.jpg i kliknij OK (Choose w Mac OS). Na pasku bocznym pojawiło się zdjęcie pociągu. 4 Wpisz następujące zdanie w polu Alt (Tekst) znajdującym się w panelu Properties (Właściwości): Steam locomotives are not very green. Kliknij OK. 5 Wyświetl panel Files (Pliki) i rozwiń zawartość foldera lesson11/resources. Kliknij dwukrotnie plik travel-caption.txt. Dreamweaver otworzy tekst zawierający treść podpisu do zdjęcia. 6 Naciśnij Ctrl+A (Cmd+A w Mac OS), aby zaznaczyć cały tekst, po czym naciśnij Ctrl+C (Cmd+C w Mac OS), aby go skopiować. Zamknij plik travel-caption.txt. 7 Zaznacz tymczasowy podpis znajdujący się na pasku bocznym. Naciśnij Ctrl+V (Cmd+V w Mac OS), aby wkleić nową treść podpisu. 8 Kliknij dwukrotnie travel-text.html w panelu Files (Pliki). Dokument travel-text.html zawiera tabelę i treść przeznaczoną dla strony o podróżach. Zwróć uwagę na brak formatowania zarówno tabeli, jak i tekstu. 9 W trybie Design (Projekt) naciśnij Ctrl+A (Cmd+A w Mac OS), aby zaznaczyć cały tekst. Następnie naciśnij Ctrl+C (Cmd+C w Mac OS), aby skopiować zawartość pliku, po czym zamknij plik travel-text.html. 10 Umieść kursor w tymczasowym nagłówku dokumentu travel.html o następującej treści: Add main heading here. Zaznacz selektor znacznika h1 . Przytrzymaj klawisz Shift i kliknij na końcu frazy Add content here, aby zaznaczyć cały tekst zastępczy regionu MainContent. Naciśnij Ctrl+V (Cmd+V w Mac OS), aby wkleić tekst ze schowka.  Uwaga: Jeśli dopiero rozpoczy- nasz pracę z książką, przejdź do „Wstępu”, gdzie w podroz- dziale „Szybki start” omówiono sposób postępowania w takiej sytuacji. Potem możesz zacząć wykonywać ćwiczenia opisane w niniejszej lekcji.  Uwaga: Jeśli wstawiasz zdję- cia w opisany tu sposób, okno dialogowe Image Tag Accessibility Attributes (Atrybuty dostępności znacz- nika IMAGE) nie zostanie wyświe- tlone. Dlatego musimy dodać tekst alterna- tywny za pomocą panelu Properties (Właściwości), wypełniając pole Alt (Tekst). DW-CS5_book.indb 281 2010-12-09 12:35:14 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  281 Na stronie pojawi się zawartość pliku travel-text.html. Nowa treść przyjmuje formatowanie tekstu i tabel zdefiniowane w arkuszu stylów, który utworzyłeś w lekcji 8., „Praca z tekstem, listami i tabelami”. Umieścimy teraz na stronie reklamę Eco-Tour. Będzie to wyjściowy obraz dla zachowania Swap Image (Zamień obraz). 11 Kliknij dwukrotnie obraz zastępczy. Przejdź do domyślnego foldera obrazów serwisu i zaznacz obraz ecotour.jpg. Kliknij przycisk OK (Choose w Mac OS). Obraz tymczasowy został zastąpiony reklamą Eco-Tour. Jednak zanim będziesz mógł zastosować zachowanie Swap Image (Zamień obraz), musisz jednoznacznie zdefiniować obraz, który chcesz zamienić. W tym celu nadasz mu atrybut ID. 282  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 282 2010-12-09 12:35:14 12 Jeśli to konieczne, zaznacz na stronie obraz ecotour.jpg. W panelu Properties (Właściwości) zaznacz bieżącą treść Travel znajdującą się w polu ID. Wpisz ecotour i naciśnij Enter (Return w Mac OS). 13 Zapisz plik. W kolejnym ćwiczeniu utworzysz zachowanie Swap Image (Zamień obraz) na bazie obrazka ecotour.jpg. dodawanie zachowań Wspomniano już wcześniej, że możliwość zastosowania wielu z zachowań zależy od zaznaczonego w danej chwili obiektu czy struktury. Zachowanie Swap Image (Zamień obraz) można nadać dowolnemu fragmentowi tekstu. 1 Wydaj polecenie Window/Behaviors (Okno/Zachowania), aby wyświetlić panel Tag Inspector (Inspektor znaczników). 2 Umieść kursor wewnątrz frazy Venice: City of Canals i zaznacz selektor znacznika h3 . 3 Kliknij ikonę Add Behavior (Dodaj zachowanie). Wybierz z listy zachowanie Swap Image (Zamień obraz). Na ekranie wyświetlone zostanie okno dialogowe Swap Image (Zamień obraz). Zawiera ono listę obrazów znajdujących się na stronie, którym można przypisać to zachowanie. Możesz zdefiniować zastępowanie jednego lub kilku obrazów jednocześnie. 4 Zaznacz opcję Image “ecotour” (Obraz „ecotour”) i kliknij przycisk Browse (Przeglądaj). 5 W oknie dialogowym Select Image Source (Wybierz źródło obrazu) wybierz plik venice.jpg, znajdujący się w folderze Images. Kliknij przycisk OK (Choose w Mac OS). 6 Jeśli to konieczne, w oknie dialogowym Swap Image (Zamień obraz) zaznacz opcję Preload Images (Wczytaj wstępnie obrazy), po czym kliknij OK.  Wskazówka: Nawet jeśli zajmuje to trochę więcej czasu, warto nadawać wszyst- kim obrazkom unikalne ID.  Uwaga: Użytkownicy wcze- śniejszych wersji programu mogą szu- kać panelu Behaviors (Zachowania). Obecnie nosi on nazwę Tag Inspector (Inspektor znaczników).  Uwaga: Opcja Preload Images (Wczytaj wstępnie obrazy) gwarantuje wczytanie wszystkich obrazów potrzeb- nych do prawidło- wego działania zachowania, zanim wczytana zostanie sama strona. Dzięki temu, po kliknięciu przez użytkownika obiektu wyzwalają- cego zachowanie, zamiana obrazów będzie przebiegać płynnie, bez opóź- nień czy innych zakłóceń. DW-CS5_book.indb 283 2010-12-09 12:35:14 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  283 W panelu Tag Inspector (Inspektor znaczników) pojawiła się etykieta zachowania Swap Image (Zamień obraz), do której przypisany jest atrybut onMouseOver. Atrybuty zachowania mogą być w miarę potrzeby zmieniane za pomocą panelu Tag Inspector (Inspektor znaczników). 7 Kliknij atrybut onMouseOver, aby sprawdzić listę dostępnych opcji. Lista zawiera zdarzenia, które mogą wyzwalać zachowania. Większość nazw jest na tyle opisowa, że pozwala odgadnąć, na czym polega zdarzenie. 8 Wybierz opcję onMouseOver. 9 Zapisz plik i kliknij przycisk Live View (Widok aktywny), aby sprawdzić działanie zachowania. Przesuń kursorem nad frazą Venice: City of Canals. Kiedy przesuniesz kursor nad tekstem, reklama Eco-Tour jest zastępowana zdjęciem z Wenecji. Jest tylko jedno drobne niedociągnięcie. Otóż po przesunięciu kursora poza tekst, obraz pierwotny nie wraca na swoje miejsce. Dzieje się tak dlatego, że mu tego nie nakazałeś. Aby zapewnić powrót pierwszego obrazka, musisz dodać do tego samego obiektu jeszcze jedno zachowanie — Swap Image Restore (Przywróć zamieniony obraz). dodawanie zachowania swap Image restore (przywróć zamieniony obraz) W niektórych przypadkach określona operacja wymaga zdefiniowania więcej niż jednego zachowania. Aby przywrócić wyświetlanie reklamy Eco-Tour po odsunięciu kursora od nagłówka, musisz zdefiniować funkcję, która tego dokona. 1 Powróć do trybu Design (Projekt). Umieść kursor wewnątrz frazy Venice: City of Canals i sprawdź, co jest wyświetlone w panelu Tag Inspector (Inspektor znaczników). Panel wyświetla zachowanie, które zostało do tej pory przypisane. Nie musisz nawet zaznaczać całego elementu wyzwalającego; Dreamweaver zakłada, że chcesz dokonać zmian w całym tym elemencie. 2 Kliknij ikonę Add Behavior (Dodaj zachowanie) i wybierz z listy opcję Swap Image Restore (Przywróć zamieniony obraz). W oknie dialogowym Swap Image Restore (Przywróć zamieniony obraz) kliknij przycisk OK. 284  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 284 2010-12-09 12:35:15 W panelu Tag Inspector (Inspektor znaczników) wyświetlone zostało zachowanie Swap Image Restore (Przywróć zamieniony obraz) wraz z atrybutem onMouseOut. 3 Włącz tryb Code (Kod) i zobacz, jak wygląda kod opisujący tekst Venice: City of Canals. Zdarzenia wyzwalające zachowania — onMouseOver i onMouseOut — zostały dodane jako atrybuty do znacznika h3 . Pozostała część kodu JavaScript została umieszczona w sekcji head dokumentu. 4 Zapisz plik i kliknij przycisk Live View (Widok aktywny), aby sprawdzić działanie zachowania. Sprawdź działanie wyzwalacza tekstowego Venice: City of Canals. Kiedy kursor znajdzie się nad wspomnianą frazą, obraz Eco-Tour jest zastępowany zdjęciem Wenecji, a następnie, po przesunięciu kursora poza tekst, powraca na swoje miejsce. Zachowanie działa poprawnie, przy czym sam tekst nie zmienia się w widoczny sposób i nic nie wskazuje na to, że po umieszczeniu nad nim kursora stanie się coś magicznego. Ponieważ większość użytkowników internetu przywykła do interaktyw- nych właściwości łączy, możemy zastosować łącze tymczasowe, które zachęci gości naszego serwisu do odkrywania ukrytego efektu. Usuwanie zachowań Zanim nadasz fragmentowi tekstu właściwości łącza, musisz usunąć przypi- sane do niego zachowania Swap Image (Zamień obraz) i Swap Image Restore (Przywróć zamieniony obraz). 1 Jeśli to konieczne, wyświetl panel Tag Inspector (Inspektor znaczników). Umieść kursor wewnątrz tekstu Venice: City of Canals. W panelu Tag Inspector (Inspektor znaczników) wyświetlone są dwa zachowania dodane do tekstu. Nie ma znaczenia, które usuniesz jako pierwsze. 2 Zaznacz etykietę Swap Image (Zamień obraz). Kliknij ikonę Remove Event (Usuń zdarzenie) ( (Przywróć zamieniony obraz) i ponownie kliknij ikonę Remove Event (Usuń zdarzenie). ). Zaznacz teraz etykietę Swap Image Restore Obydwa zachowania zostały usunięte. To samo stało się ze związanym z nimi kodem JavaScript. DW-CS5_book.indb 285 2010-12-09 12:35:15 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  285 3 Zapisz plik i ponownie wyświetl stronę w trybie aktywnym, aby sprawdzić zachowanie tekstu. Tekst nie wyzwala już zachowania Swap Image (Zamień obraz). Aby przypisać zacho- wanie do łącza, należy najpierw zdefiniować dla nagłówka łącze lub łącze tymczasowe. dodawanie zachowań do łączy Nawet jeśli łącze nie prowadzi do innego dokumentu, możemy dodać do niego zachowanie. 1 Zaznacz fragment Venice: City of Canals. Wpisz # w polu Link (Łącze) znajdującym się w panelu Properties (Właściwości), po czym naciśnij Enter (Return w Mac OS), aby utworzyć łącze zastępcze. 2 Umieść kursor wewnątrz łącza, po czym kliknij ikonę Add Behavior (Dodaj zachowanie) znajdującą się w panelu Tag Inspector (Inspektor znaczników). Wybierz z listy opcję Swap Image (Zamień obraz). Jeśli kursor pozostanie w dowolnym miejscu łącza, zachowanie zostanie przypisane do całej zawartości znacznika. 3 W oknie dialogowym Swap Image (Zamień obraz) zaznacz opcję image “ecotour” (Obraz „ecotour”). Kliknij przycisk Browse (Przeglądaj) i wybierz plik venice.jpg, znajdujący się w folderze images. Kliknij przycisk OK (Choose w Mac OS). 4 W oknie dialogowym Swap Image (Zamień obraz) zaznacz obie opcje Preload Images (Wczytaj wstępnie obrazy) oraz Restore Images onMouseOut (Przywracaj obrazy przy zdarzeniu onMouseOut), po czym kliknij OK. W panelu Tag Inspector (Inspektor znaczników) wyświetlone zostały zdarzenia Swap Image (Zamień obraz) oraz Swap Image Restore (Przywróć zamieniony obraz). Jako że zachowanie przywracające obraz zostało zdefiniowane od razu, Dreamweaver, w ramach zwiększania efektywności, sam zadbał o przywrócenie stanu pierwotnego. 5 Zaznacz tekst Florence: City of Art i nadaj mu właściwości łącza (wpisując #). Przypisz do niego zachowanie Swap Image (Zamień obraz) i wybierz z folderu images obraz florence.jpg. 6 Powtórz punkt 5. w przypadku tekstu Sienna: City of Beauty. Tym razem wybierz obraz sienna.jpg. 7 Powtórz punkt 5. dla tekstu Rome: City of Magic. Wybierz obraz rome.jpg. 286  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 286 2010-12-09 12:35:15 Ponieważ wygląd łączy nie pasuje do kolorystyki serwisu, utworzymy teraz własną regułę CSS, aby poprawić formatowanie. 8 Umieść kursor w dowolnym łączu reagującym na przesuwanie kursora. Zaznacz regułę .content h3 w arkuszu stylów mygreen_styles.css. Kliknij ikonę New CSS Rule (Nowa reguła CSS) znajdującą się w panelu CSS Styles (Style CSS). 9 Wpisz .content h3 w polu Selector Name (Nazwa selektora). Wpisz #090 polu Color znajdującym się w kategorii Type (Typ). Kliknij przycisk OK. 10 Zapisz plik i przetestuj zachowania w trybie aktywnym. Zachowanie Swap Image (Zamień obraz) działa poprawnie w przypadku wszystkich łączy. 11 Zamknij dokument travel.html. Dreamweaver umożliwia nie tylko stosowanie przyciągających wzrok efektów, ale rów- nież pozwala na tworzenie elementów strukturalnych, dzięki którym możesz zaoszczę- dzić sporo miejsca na stronie i nadać jej bardziej interaktywny styl. tworzenie paneli harmonijkowych spry Panele harmonijkowe Spry porządkują znaczną ilość informacji wyświetlanej za pomocą kilku zwartych paneli. Poszczególne zakładki są zwykle umieszczone jedna nad drugą. Po kliknięciu każdej z nich wyświetlany jest odpowiedni panel. Jeżeli jego zawar- tość wykracza poza rozmiar strony, wyświetlany jest pasek przewijania. Najpierw obejrzymy gotową stronę. 1 W panelu Files (Pliki) zaznacz plik tips_finished.html znajdujący się w folderze lesson11 i wyświetl jego podgląd w domyślnej przeglądarce. Informacje zawarte na stronie znalazły się w trzech panelach harmonijkowych Spry. 2 Otwórz i zamknij kolejne panele, klikając ich paski tytułowe. 3 Zamknij okno przeglądarki, aby powrócić do programu Dreamweaver. Wstawianie paneli harmonijkowych spry Kolejne ćwiczenie polegało będzie na umieszczeniu na stronie paneli harmonijkowych. 1 Otwórz plik tips.html. 2 Umieść kursor w nagłówku At Home i zaznacz selektor znacznika h2 . Naciśnij klawisz Delete. 3 Umieść kursor w pierwszym wierszu listy Wash clothes in cold water i zaznacz selektor znacznika ul . Naciśnij Ctrl+X (Cmd+X w Mac OS), aby wyciąć całą listę. 4 Umieść kursor na końcu nagłówka Green Tips i naciśnij Enter (Return w Mac OS), aby utworzyć nowy akapit.  Uwaga: Jeśli dopiero rozpoczy- nasz pracę z książką, przejdź do „Wstępu”, gdzie w podrozdziale „Szybki start” omó- wiono sposób postę- powania w takiej sytuacji. Potem możesz rozpocząć wykonywanie ćwiczeń opisanych w niniejszej lekcji. DW-CS5_book.indb 287 2010-12-09 12:35:15 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  287 5 Kliknij przycisk Spry Accordion (Harmonijka Spry) znajdujący się w panelu Insert (Wstaw) w kategorii Spry. Program Dreamweaver umieści w projekcie domyślny obiekt typu Spry Accordion (Harmonijka Spry). Obiekt ten zawiera początkowo dwa panele, a górny z nich jest domyślnie otwarty. Podobnie jak pasek menu Spry, otoczony jest błękitną ramką z napisem Spry Accordion: Accordion1 (Harmonijka Spry: Accordion1). 6 Zaznacz zastępczy napis Label 1 (Etykieta 1) i wpisz At home, aby zastąpić tekst. 7 Zaznacz tymczasowy napis Content 1 (Zawartość 1), po czym naciśnij klawisze Ctrl+V (Cmd+V w Mac OS), aby wkleić listę punktowaną. Będziesz mógł zobaczyć tylko fragment dodanej zawartości, ponieważ w trybie Design (Projekt) przewijanie jest nieaktywne. 8 Aby wyświetlić lub edytować zawartość panelu, należy kliknąć panel dwukrotnie, lub kliknąć go prawym przyciskiem myszy. Następnie należy wydać polecenie Element View/Full (Widok elementu/Pełny). 9 Usuń nagłówek At Work. Zaznacz i wytnij kolejną listę ul , która zawiera wskazówki dotyczące postępowania w miejscu pracy. 10 Przesuń kursor nad paskiem Label 2 (Etykieta 2) i jeśli to konieczne, kliknij ikonę przedstawiającą oko ( ), aby otworzyć drugi panel. 288  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 288 2010-12-09 12:35:16 11 Zaznacz zastępczy napis Label 2 (Etykieta 2) i wpisz At Work. 12 Zaznacz napis tymczasowy Content 2 i wklej ze schowka element ul . Dwa panele są już gotowe, jednak aby ukończyć tworzenie panelu harmonijkowego, w kolejnym ćwiczeniu dodamy trzeci panel. Wstawianie dodatkowych paneli Za pomocą panelu Properties (Właściwości) możemy dodawać lub usuwać poszczególne panele. 1 Zaznacz na stronie niebieską zakładkę znajdującą się nad panelem Accordion1. 2 Kliknij ikonę Add Panel w panelu Properties (Właściwości). Harmonijka Spry otrzymała nowy panel. 3 W oknie dokumentu usuń nagłówek In the Community, po czym zaznacz i wytnij listę ul zawierającą wskazówki dotyczące postępowania w społeczności. 4 Zaznacz tekst zastępczy Label 3 (Etykieta 3) i wpisz In the Community. Następnie wklej listę wypunktowaną do zawartości nowego panelu. 5 Zapisz plik i kliknij OK we wszystkich oknach dialogowych, jakie się pojawią. W ćwiczeniu tym utworzyłeś panel harmonijkowy Spry, dodałeś do niego zawar- tość i dodatkową zakładkę. W tym przypadku informacje potrzebne do uzupełnienia treści paneli znajdowały się już na stronie, ale możliwe jest też bezpośrednie wpisy- wa nie zawartości. Ponadto można skopiować materiał z innych źródeł, na przy- kład z dokumentów utworzonych między innymi w programie Microsoft Word, TextEdit czy Notepad. Kolejne zadanie będzie polegało na dodaniu stylów CSS do paneli harmonijkowych Spry. DW-CS5_book.indb 289 2010-12-09 12:35:16 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  289 dostosowywanie paneli harmonijkowych spry Podobnie jak inne obiekty typu Spry, również panele harmonijkowe są połączone z arkuszami CSS. W kolejnym ćwiczeniu zmodyfikujesz wygląd paneli i zmienisz kolo- rystykę zakładek. 1 Umieść kursor w etykiecie zakładki At Home i sprawdź, jakie znaczniki i w jakiej kolejności wyświetlone są w dolnej części okna dokumentu. Zakładki są sformatowane za pomocą klasy .AccordionPanelTab. 2 Odszukaj arkusz stylów SpryAccordion.css w panelu CSS Styles (Style CSS) i wyświetl jego zawartość. Kliknij dwukrotnie regułę .AccordionPanelTab, aby ją edytować. 3 Wpisz 120 w polu Font-size w kategorii Type (Typ), zaś w polu Color wpisz #FFC. 4 Wybierz kategorię Background (Tło). W polu Background-color zmień kolor na #090. Kliknij przycisk Browse (Przeglądaj) znajdujący się obok pola Background-image i wybierz plik background.jpg. Wybierz opcję repeat-x z listy Background-repeat. 5 Przejdź do kategorii Box (Pole) i wpisz 15 px w polu Left w sekcji Padding. 6 W kategorii Border (Krawędź) zmień kolor w polu Top w sekcji Color na #060. Zmień również kolor dolnej krawędzi, wpisując #090 w polu Bottom sekcji Color. Kliknij przycisk OK. 290  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 290 2010-12-09 12:35:16 7 Zapisz wszystkie pliki i wyświetl dokument w widoku aktywnym. Sprawdź zachowanie panelu harmonijkowego. Poziome zakładki wykazują zachowanie hover — po umieszczeniu nad nimi kursora tekst przybiera szary kolor, który nie pasuje jednak do zielonego tła zakładki. 8 Powróć do trybu Design (Projekt) i przeanalizuj arkusz stylów panelu harmonijkowego. Spróbuj odnaleźć regułę, która odpowiada za zachowanie hover. Efekt hover jest zdefiniowany w dwóch regułach. Jedna dotyczy sytuacji, kiedy panel jest zamknięty (.AccordionPanelTabHover), zaś druga definiuje ten efekt dla otwartego panelu (.AccordionPanelOpen .AccordionPanelTabHover). 9 Kliknij dwukrotnie etykietę .AccordionPanelTabHover. Zmień wartość pola Color w kategorii Type (Typ) na #FFC. Wpisz #060 w polu Background-color znajdującym się w kategorii Background (Tło). Wybierz opcję none w polu Background-image. Kliknij przycisk OK. 10 Powtórz krok 9. dla reguły .AccordionPanelOpen .AccordionPanelTabHover. Zwróć uwagę na dwie reguły znajdujące się w dolnej części arkusza stylów panelu harmonijkowego. Zawierają one wyraz focused, który określa zachowanie odsyłaczy identyczne jak efekt hover, z wyjątkiem sposobu aktywacji. W tym przypadku jest to naciśnięcie klawisza Tab lub klawiszy strzałek, dzięki którym można poruszać się na stronie bez korzystania z myszy. Reguły te mogą zakłócić formatowanie efektu hover, dlatego zmienimy niektóre z ich ustawień. 11 Powtórz krok 9. dla reguł .AccordionFocused .AccordionPanelTab oraz .AccordionFocused .AccordionPanelOpen .AccordionPanelTab. Po otwarciu paneli, nie mieści się w nich cała zawartość list. Można to zmienić, dostosowując za pomocą reguł CSS również wysokość paneli. 12 Umieść kursor wewnątrz listy punktowanej i zwróć uwagę na nazwy i kolejność selektorów. Zawartość panelu jest sformatowana za pomocą klasy .AccordionPanelContent. 13 Wybierz .AccordionPanelContent z listy panelu CSS Styles (Style CSS). W sekcji Properties (Właściwości) znajdującej się poniżej zmień wartość w polu height na 450 px. Nowa wysokość jest wystarczająca, aby wyświetlić większość zawartości panelu, bez konieczności jego przewijania. DW-CS5_book.indb 291 2010-12-09 12:35:16 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  291 14 Zapisz wszystkie pliki i sprawdź działanie panelu na stronie, po jej wyświetleniu w domyślnej przeglądarce. Udało Ci się utworzyć schemat kolorystyczny panelu harmonijkowego, który jest zgodny z kolorystyką całej strony. Zmieniłeś wysokość poszczególnych paneli, aby wyświetlić całą zawartość panelu, bez konieczności jego przewijania. Komponenty Spry umożliwiają umieszczenie na stronie dużej ilości tekstu w zwartej i ciekawej formie. 292  LEkCjA  11  Projektowanie  interaktywnych  stron  www DW-CS5_book.indb 292 2010-12-09 12:35:16 pytania kontrolne 1 Jakie korzyści wynikają ze stosowania zachowań programu Dreamweaver? 2 Opisz trzy czynności, jakie należy wykonać, aby utworzyć zachowanie programu Dreamweaver. 3 Dlaczego każdy obrazek powinien otrzymać atrybut ID, zanim przypiszemy do niego zachowanie? 4 Co to są „panele harmonijkowe” Spry? 5 W jaki sposób można dodać nową zakładkę do panelu harmonijkowego Spry? Odpowiedzi 1 Zachowania programu Dreamweaver umożliwiają szybkie i łatwe umieszczenie na stronie interaktywnej funkcjonalności. 2 Aby zdefiniować zachowanie programu Dreamweaver, należy utworzyć lub zaznaczyć obiekt wyzwalający, wybrać interesujące nas zachowanie i określić jego parametry. 3 Atrybut ID ułatwia wybór właściwego obrazka podczas definiowania określonego zachowania. 4 Panele harmonijkowe Spry to zestawy co najmniej dwóch paneli, które można elastycznie ukrywać i wyświetlać wraz z zawartością. 5 Zaznacz panel w oknie dokumentu i kliknij ikonę Add Panel w interfejsie Spry wyświetlonym w panelu Properties (Właściwości). DW-CS5_book.indb 293 2010-12-09 12:35:16 AdobE  dREAmwEAvER  CS5/CS5  PL.  ofICjALny  PodRęCznIk  293
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Adobe Dreamweaver CS5/CS5 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ą: