Podręcznik użytkownika Anuluj

Używanie zachowań JavaScript (instrukcje ogólne)

  1. Podręcznik użytkownika programu Dreamweaver
  2. Wprowadzenie
    1. Podstawy projektowania serwisów WWW o elastycznym układzie
    2. Dreamweaver — co nowego
    3. Programowanie zawartości WWW za pomocą programu Dreamweaver — przegląd
    4. Dreamweaver / Popularne pytania
    5. Skróty klawiszowe
    6. Wymagania systemowe programu Dreamweaver
    7. Podsumowanie funkcji
  3. Program Dreamweaver a platforma Creative Cloud
    1. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    2. Biblioteki Creative Cloud w programie Dreamweaver
    3. Używanie plików programu Photoshop w programie Dreamweaver
    4. Praca z programami Adobe Animate oraz Dreamweaver
    5. Wydzielanie przygotowanych do wyświetlania w Internecie plików SVG z bibliotek
  4. Przestrzenie robocze i widoki w programie Dreamweaver
    1. Przestrzeń robocza programu Dreamweaver
    2. Optymalizacja przestrzeni roboczej programu Dreamweaver do programowania wizualnego
    3. Wyszukiwanie plików według nazwy lub zawartości | Mac OS
  5. Konfigurowanie serwisów
    1. Informacje o serwisach programu Dreamweaver
    2. Konfigurowanie lokalnej wersji serwisu
    3. Nawiązywanie połączenia z serwerem publikacji
    4. Konfigurowanie serwera testowego
    5. Importowanie i eksportowanie ustawień serwisu programu Dreamweaver
    6. Przenoszenie istniejących serwisów z serwera zdalnego do lokalnego katalogu głównego serwisu
    7. Funkcje ułatwień dostępu w programie Dreamweaver
    8. Ustawienia zaawansowane
    9. Ustawianie preferencji serwisu dotyczących transferu plików
    10. Określanie ustawień serwera proxy w programie Dreamweaver
    11. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    12. Korzystanie z systemu Git w programie Dreamweaver
  6. Zarządzanie plikami
    1. Tworzenie i otwieranie plików
    2. Zarządzanie plikami i folderami
    3. Odbieranie plików i wysyłanie ich na serwer
    4. Pobieranie plików do edycji i odkładanie ich na serwer
    5. Synchronizacja plików
    6. Porównywanie plików w poszukiwaniu różnic
    7. Maskowanie plików i folderów w serwisie programu Dreamweaver
    8. Włączanie funkcji Uwagi do projektu w serwisach programu Dreamweaver
    9. Zapobieganie potencjalnemu obejściu funkcji Gatekeeper
  7. Układ i projekt
    1. Korzystanie z wizualnych pomocy do układu
    2. Informacje o tworzeniu układu strony za pomocą stylów CSS
    3. Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap
    4. Tworzenie i używanie zapytań o media w programie Dreamweaver
    5. Prezentacja zawartości za pomocą tabel
    6. Kolory
    7. Tworzenie reagujących projektów za pomocą układów elastycznej siatki
    8. Narzędzie Extract w programie Dreamweaver
  8. CSS
    1. Podstawowe informacje o stylach CSS
    2. Tworzenie układu strony za pomocą panelu Projektant CSS
    3. Korzystanie z preprocesorów CSS w programie Dreamweaver
    4. Ustawianie preferencji stylów CSS w programie Dreamweaver
    5. Przenoszenie reguł CSS w programie Dreamweaver
    6. Konwertowanie stylu CSS wewnątrz znacznika na regułę CSS w programie Dreamweaver
    7. Posługiwanie się znacznikami DIV
    8. Stosowanie gradientów na tło
    9. Tworzenie i edytowanie efektów przejść CSS3 w programie Dreamweaver
    10. Formatowanie kodu
  9. Zawartość strony i zasoby
    1. Ustawianie właściwości strony
    2. Ustawianie właściwości CSS dla nagłówków i łączy
    3. Praca z tekstem
    4. Znajdowanie i zastępowanie tekstu, znaczników i atrybutów
    5. Panel DOM
    6. Edytowanie w widoku aktywnym
    7. Kodowanie znaków dokumentu w programie Dreamweaver
    8. Zaznaczanie i wyświetlanie elementów w oknie Dokument
    9. Ustawianie właściwości tekstu na panelu Inspektor właściwości
    10. Sprawdzanie pisowni na stronie internetowej
    11. Używanie linii poziomych w programie Dreamweaver
    12. Dodawanie i modyfikowanie kombinacji czcionek w programie Dreamweaver
    13. Praca z zasobami
    14. Wstawianie i aktualizowanie dat w programie Dreamweaver
    15. Tworzenie list ulubionych zasobów w programie Dreamweaver i zarządzanie nimi
    16. Wstawianie i edytowanie obrazów w programie Dreamweaver
    17. Dodawanie obiektów multimedialnych
    18. Dodawanie zawartości wideo w programie Dreamweaver
    19. Wstawianie wideo HTML5
    20. Wstawianie plików SWF
    21. Dodawanie efektów dźwiękowych
    22. Wstawianie obiektów audio HTML5 w programie Dreamweaver
    23. Praca z elementami bibliotek
    24. Stosowanie pisma arabskiego i hebrajskiego w programie Dreamweaver
  10. Łączenie i przeglądanie
    1. Informacje o łączeniu i przeglądaniu stron
    2. Tworzenie łączy
    3. Mapy obrazu
    4. Rozwiązywanie problemów dotyczących łączy
  11. Efekty i widgety jQuery
    1. Używanie widgetów jQuery interfejsu użytkownika i elementów mobilnych w programie Dreamweaver
    2. Używanie efektów jQuery w programie Dreamweaver
  12. Tworzenie kodu serwisów WWW
    1. Informacje o tworzeniu kodu w programie Dreamweaver
    2. Środowisko programistyczne w programie Dreamweaver
    3. Ustawianie preferencji kodowania
    4. Dostosowywanie ustawień kolorowania kodu
    5. Pisanie i edytowanie kodu
    6. Podpowiedzi i uzupełnianie kodu
    7. Zwijanie i rozwijanie kodu
    8. Ponowne wykorzystywanie fragmentów kodu za pomocą funkcji Urywki
    9. Linting: oczyszczanie kodu z błędów
    10. Optymalizacja kodu
    11. Edytowanie kodu w widoku Projekt
    12. Praca z zawartością znacznika HEAD strony
    13. Wstawianie dołączeń po stronie serwera w programie Dreamweaver
    14. Korzystanie z bibliotek znaczników w programie Dreamweaver
    15. Importowanie własnych znaczników do programu Dreamweaver
    16. Używanie zachowań JavaScript (instrukcje ogólne)
    17. Stosowanie wbudowanych zachowań JavaScript
    18. Omówienie języków XML i XSLT
    19. Wykonywanie transformacji XSL po stronie serwera w programie Dreamweaver
    20. Wykonywanie przekształceń XSL po stronie klienta w programie Dreamweaver
    21. Dodawanie encji znaków w kodzie XSLT w programie Dreamweaver
    22. Formatowanie kodu
  13. Obiegi pracy związane z wieloma produktami
    1. Instalowanie i używanie rozszerzeń programu Dreamweaver
    2. Aktualizacje w aplikacji w programie Dreamweaver
    3. Wstawianie dokumentów Microsoft Office w programie Dreamweaver (tylko Windows)
    4. Praca z programami Fireworks i Dreamweaver
    5. Edycja zawartości w stronach programu Dreamweaver za pomocą aplikacji Contribute
    6. Integracja programu Dreamweaver z aplikacją Business Catalyst
    7. Tworzenie spersonalizowanych kampanii rozsyłanych pocztą elektroniczną
  14. Szablony
    1. Informacje o szablonach programu Dreamweaver
    2. Rozpoznawanie szablonów oraz dokumentów opartych na szablonach
    3. Tworzenie szablonu programu Dreamweaver
    4. Tworzenie edytowalnych regionów w szablonach
    5. Tworzenie powtarzalnych regionów i tabel w programie Dreamweaver
    6. Używanie regionów opcjonalnych w szablonach
    7. Definiowanie edytowalnych atrybutów znacznika w programie Dreamweaver
    8. Tworzenie zagnieżdżonych szablonów w programie Dreamweaver
    9. Edytowanie, aktualizowanie i usuwanie szablonów
    10. Eksportowanie i importowanie zawartości XML w programie Dreamweaver
    11. Stosowanie szablonu lub usuwanie go z istniejącego dokumentu
    12. Edycja zawartości w szablonach programu Dreamweaver
    13. Reguły składni dla znaczników szablonu w programie Dreamweaver
    14. Ustawianie preferencji podświetlenia dla regionów szablonów
    15. Korzyści wynikające z używania szablonów w programie Dreamweaver
  15. Urządzenia mobilne i obsługa wielu ekranów
    1. Tworzenie zapytań o media
    2. Zmiana orientacji strony na urządzeniach mobilnych
    3. Tworzenie aplikacji internetowych przeznaczonych na urządzenia mobilne za pomocą programu Dreamweaver
  16. Dynamiczne serwisy, strony i formularze WWW
    1. Podstawowe informacje o aplikacjach internetowych
    2. Konfigurowanie komputera do programowania aplikacji
    3. Rozwiązywanie problemów z połączeniami z bazą danych
    4. Usuwanie skryptów połączenia w programie Dreamweaver
    5. Projektowanie stron dynamicznych
    6. Omówienie źródeł zawartości dynamicznej
    7. Definiowanie źródeł zawartości dynamicznej
    8. Dodawanie dynamicznej zawartości do stron
    9. Modyfikowanie dynamicznej zawartości w programie Dreamweaver
    10. Wyświetlanie rekordów z bazy danych
    11. Udostępnianie aktywnych danych w programie Dreamweaver oraz rozwiązywanie problemów z takimi danymi
    12. Dodawanie własnych zachowań serwerowych w programie Dreamweaver
    13. Tworzenie formularzy w programie Dreamweaver
    14. Zbieranie informacji od użytkowników za pomocą formularzy
    15. Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver
    16. Tworzenie formularzy WWW
    17. Rozszerzona obsługa elementów formularza w języku HTML5
    18. Tworzenie formularzy za pomocą programu Dreamweaver
  17. Tworzenie aplikacji metodą graficzną
    1. Tworzenie stron wzorca i szczegółów w programie Dreamweaver
    2. Tworzenie stron wyszukiwania i wyników
    3. Tworzenie strony wstawiania rekordów
    4. Tworzenie strony uaktualniania rekordów w programie Dreamweaver
    5. Tworzenie stron usuwania rekordów w programie Dreamweaver
    6. Używanie poleceń ASP do modyfikacji bazy danych w programie Dreamweaver
    7. Tworzenie strony rejestracji
    8. Tworzenie strony logowania
    9. Tworzenie strony, do której dostęp będą mieli tylko uwierzytelnieni użytkownicy
    10. Zabezpieczanie folderów w aplikacji ColdFusion za pomocą programu Dreamweaver
    11. Korzystanie ze składników ColdFusion w programie Dreamweaver
  18. Testowanie, podgląd i publikacja serwisów WWW
    1. Podgląd stron
    2. Podgląd stron WWW programu Dreamweaver na wielu urządzeniach
    3. Testowanie serwisu programu Dreamweaver

 

Zachowania programu Adobe Dreamweaver umieszczają kod JavaScript w dokumentach tak, by ich czytelnicy mogli zmieniać strony na różne sposoby lub rozpoczynać określone zadania.

Zachowania programu Adobe Dreamweaver umieszczają kod JavaScript w dokumentach tak, by ich czytelnicy mogli zmieniać strony na różne sposoby lub rozpoczynać określone zadania. Zachowanie jest połączeniem zdarzenia i operacji uruchamianej przez to zdarzenie. W panelu Zachowania można dodawać wybrane zachowanie do określonej strony poprzez określenie operacji i zdarzenia uruchamiającego tę operację.

Uwaga:

Kod zachowania jest kodem JavaScript po stronie klienta, co oznacza, że jest uruchamiany w przeglądarkach a nie na serwerach.

Zdarzenia to w rzeczywistości komunikaty generowane przez przeglądarki przekazujące odbiorcy informacje o wykonanym działaniu. Na przykład po umieszczeniu kursora nad łączem, przeglądarka generuje zdarzenie onMouseOver dla tego łącza; a przeglądarka sprawdza, czy w odpowiedzi powinna wywołać kod JavaScript (określony na wyświetlanej stronie). Różne zdarzenia są zdefiniowane dla poszczególnych elementów strony, na przykład w większości przeglądarek, onMouseOver i onClick są przypisywane do łączy, podczas gdy onLoad jest zdarzeniem przypisywanym do obrazów i części body dokumentu.

Operacja jest wcześniej napisanym kodem JavaScript przeznaczonym dla wykonania określonego zadania takiego jak otwarcie okna przeglądarki, wyświetlenie lub ukrycie elementu AP, odtworzenie dźwięku lub zatrzymanie filmu Adobe Shockwave. Operacje dołączone do programu Dreamweaver zapewniają maksymalny stopień zgodności pomiędzy przeglądarkami.

Zachowanie dołączone do elementu strony wywołuje operację (kod JavaScript) przypisaną do zdarzenia zawsze wtedy, gdy wystąpi zdarzenie dla tego elementu. (Zdarzenia używane do uruchamiania danej operacji różnią się w zależności od stosowanej przeglądarki). Na przykład przypisanie operacji Wyskakujący komunikat do łącza i przypisanie mu uruchamiania poprzez zdarzenie onMouseOver spowoduje, że komunikat będzie wyświetlany po umieszczeniu kursora nad tym łączem.

Pojedyncze zdarzenie może uruchamiać kilka różnych operacji i możliwe jest określenie ich kolejności.

Program Dreamweaver udostępnia około dwudziestu operacji. Dodatkowe operacje są dostępne w serwisie Exchange www.adobe.com/go/dreamweaver_exchange_pl oraz na stronach firm współpracujących. Jeśli użytkownik umie posługiwać się językiem JavaScript, może sam tworzyć własne operacje.

Uwaga:

Terminy zachowanie i operacja są terminami programu Dreamweaver, a nie terminami przyjętymi w języku HTML. Z punktu widzenia przeglądarki, operacja nie różni się od kodu JavaScript.

Omówienie panelu Zachowania

Panel Zachowania (Okno > Zachowania) jest używany do dołączania zachowań do elementów strony (a właściwie do znaczników) i zmiany parametrów ostatnio przyłączonych zachowań.

Zachowania dołączone do aktualnie zaznaczonego elementu strony są wyświetlane na liście zachowań (główny obszar panelu) i ułożone alfabetycznie według zdarzeń. Jeśli kilka operacji jest umieszczonych na liście dla tego samego zdarzenie, to operacje takie są wykonywane w kolejności zgodniej z rozmieszczeniem na liście. Jeśli na liście nie ma żadnych zachowań, to znaczy, że do zaznaczonego elementu nie przypisano żadnego z nich.

Panel Zachowania posiada następujące opcje:

Pokaż zdarzenia ustawione

Wyświetla tylko te zdarzenia, które zostały przypisane do bieżącego dokumentu. Zdarzenia są organizowane w kategoriach po stronie klienta i po stronie serwera. Zdarzenia każdej kategorii są umieszczane na zwijanych listach. Widok Pokaż zdarzenia ustawione jest widokiem domyślnym.

Pokaż wszystkie zdarzenia

Wyświetla alfabetycznie ułożoną listę wszystkich zdarzeń dla danej kategorii.

Dodaj zachowanie (+)

Wyświetla menu operacji dołączonych do aktualnie zaznaczonego elementu. Po zaznaczeniu operacji z listy, na ekranie pojawia się okno dialogowe, w którym można określić parametry tej operacji. Jeśli wszystkie operacji są nieaktywne, to zaznaczony element nie może wygenerować jakiegokolwiek zdarzenia.

Usuń zdarzenie (–)

Usuwa zaznaczone zdarzenie i operację z listy zachowań.

Przyciski Strzałka w górę i Strzałka w dół

Przenoszą zaznaczoną operację w górę lub dół na liście zachowań dla określonego zdarzenia. Kolejność operacji może być zmieniana tylko dla określonego zdarzenia, na przykład możesz zmienić kolejność operacji dla zdarzenia onLoad, ale wszystkie operacje onLoad pozostaną na liście zachowania. Przyciski strzałek są wyłączane dla operacji, które nie mogą być przenoszone w górę lub dół listy.

Zdarzenia

Wyświetla menu widoczne tylko po zaznaczeniu zdarzenia, z grupy zdarzeń uruchamianych daną operacją (menu to jest wyświetlane po kliknięciu przycisku strzałki obok nazwy zaznaczonego zdarzenia). Na ekranie pojawiają się różne zdarzenia w zależności od zaznaczonego obiektu. Jeśli na ekranie nie ma oczekiwanych zdarzeń, upewnij się, że zaznaczono odpowiedni element strony lub znacznik. (Aby zaznaczyć konkretny znacznik, użyj selektora znaczników, który znajduje się w lewym dolnym rogu okna Dokument).

Uwaga:

Nazwy zdarzeń w nawiasach są dostępne tylko dla łączy, co oznacza, że zaznaczenie jednej z nazw tych zdarzeń automatycznie dodaje łącze typu null do zaznaczonego elementu strony, a zachowanie dołącza do tego łącza, zamiast do samego elementu. Łącze typu null jest określane w kodzie HTML jako href="javascript:;".

Omówienie zdarzeń

Każda przeglądarka posiada zestaw zdarzeń, które mogą być przypisywane do operacji umieszczonych w menu Zachowanie, panelu Operacje (+). Działania wykonywane na stronie internetowej (np. kliknięcie obrazu) powodują generowanie zdarzeń, które mogą być użyte do przywołania funkcji JavaScript i wykonania operacji. Program Dreamweaver udostępnia wiele popularnych operacji, które można wyzwalać przez te zdarzenia.

Nazwy i opisy zdarzeń dostępnych w przeglądarkach można obejrzeć na stronie internetowej Dreamweaver Support Center pod adresem www.adobe.com/go/dreamweaver_support_pl.

W zależności od zaznaczonego obiektu, w menu Zdarzenia widoczne są różne pozycje. Aby określić zdarzenia obsługiwane przez daną przeglądarkę dla określonego elementu strony, umieść wybrany element strony w dokumencie, dołącz do niego określone zachowanie i sprawdź informacje wyświetlane w menu Zdarzenia, w panelu Zachowania. (Domyślnie, zdarzenia są przepisywane w listy zdarzeń HTML 4.01 i są obsługiwane przez większość nowoczesnych przeglądarek). Zdarzenia mogą być wyłączane (nieaktywne), jeśli odpowiadających im obiektów nie ma jeszcze na stronie lub jeśli zaznaczony obiekt nie może przyjąć zdarzeń. Jeśli nie widać oczekiwanych zdarzeń, upewnij się, że zaznaczony jest odpowiedni obiekt.

Jeśli dołączasz zachowanie do obrazu, to niektóre zdarzenia (np. onMouseOver) są wyświetlane w nawiasach. Zdarzenia takie są dostępne tylko dla łączy. Po zaznaczeniu jednego z nich program Dreamweaver otacza obraz znacznikiem <a> w celu zdefiniowania łącza typu null. Łącze typu null jest reprezentowane w polu Właściwości, w części Łącze przez javascript:;. Zmiana wartości łącza umożliwia przekształcenie go na realne łącze z inną stroną, ale warto pamiętać, że usunięcie łącza JavaScript bez zastąpienia go innym łączem powoduje usunięcie zachowania.

Aby wyświetlić znaczniki dostępne dla danego zdarzenia w wybranej przeglądarce, należy poszukać tego zdarzenia w jednym z plików w folderze Dreamweaver/Configuration/Behaviors/Events.

Stosowanie zachowania

Zachowania mogą być dołączane do całego dokumentu (do znacznika <body>) lub do łączy, obrazów, elementów formularza i kilku innych elementów HTML.

Zaznaczona przeglądarka docelowa określa zakres obsługiwanych zdarzeń dla wybranego elementu.

Dla każdego ze zdarzeń można wybrać więcej, niż jedną operację. Operacje są wykonywane w kolejności przyjętej na liście kolumny Operacje, w panelu Zachowania, ale mogą być wykonywane w innej kolejności.

  1. Zaznacz element strony; np. obraz lub łącze.

    Aby dołączyć zachowanie do całej strony, kliknij znacznik <body>, dostępny w lewym dolnym rogu okna Dokument.

  2. Wybierz polecenie Okno > Zachowania.
  3. Kliknij przycisk Plus (+) i zaznacz operację w menu Dodaj zachowanie.

    Operacje nieaktywne nie mogą być wybierane. Niektóre elementy mogą być nieaktywne w sytuacji braku odpowiedniego obiektu w danym dokumencie. Na przykład operacja Control Shockwave lub SWF może być niedostępna, o ile dokument nie zawiera plików Shockwave lub SWF.

    Po zaznaczeniu operacji z listy, na ekranie pojawia się okno dialogowe, w którym można określić parametry i instrukcje tej operacji.

  4. Wpisz parametry operacji i kliknij przycisk OK.

    Wszystkie operacje dostępne w programie Dreamweaver współpracują z nowoczesnymi przeglądarkami. Niektóre operacje nie działają w starszych wersjach przeglądarek, ale nie powodują błędów ich działania.

    Uwaga:

    Wybrane elementy wymagają unikalnych identyfikatorów. Na przykład jeśli chcesz zastosować zachowanie Zamień obraz do obrazu, to musi on posiadać identyfikator. Jeśli natomiast wybrane element nie posiada identyfikatora, to Dreamweaver automatycznie wybierze dla niego określenie.

  5. Domyśle zdarzenie uruchamiające operację jest wyświetlane w kolumnie Zdarzenia. Jeśli nie jest to wybrane zdarzenie uruchamiające, to możesz zaznaczyć inne zdarzenie w menu Zdarzenia. (Aby otworzyć menu Zdarzenia, zaznacz jedno zdarzenie lub operację w panelu Zachowania i kliknij czarną strzałkę skierowaną w dół, wyświetlaną pomiędzy nazwą zdarzenia a nazwą operacji).

Zmiana lub usuwanie zachowania

Po dołączeniu zachowania można zmienić zdarzenie uruchamiające operację, dodać lub usunąć operacje lub zmienić parametry operacji.

  1. Zaznacz obiekt z przypisanym zachowaniem.
  2. Wybierz polecenie Okno > Zachowania.
  3. Wprowadź określone zmiany:
    • Aby przeprowadzić edycję parametrów operacji, dwukrotnie kliknij jej nazwę lub zaznacz ją i wciśnij klawisz Enter (Windows) lub Return (Macintosh), zmień odpowiednio parametry w oknie dialogowym i kliknij przycisk OK.

    • Aby zmienić kolejność operacji dla danego zdarzenia, zaznacz operację i kliknij strzałkę w górę lub dół. Możesz też zaznaczyć operację, a potem wyciąć ją i wkleić w wybrane nowe miejsce między pozostałymi operacjami.

    • Aby usunąć zachowanie, zaznacz go i kliknij przycisk Minus (–) lub wciśnij klawisz Delete.

Uaktualnianie zachowania

  1. Zaznacz element, który posiada przypisane zachowanie.
  2. Wybierz polecenie Okno > Zachowania lub dwukrotnie kliknij wybrane zachowanie.
  3. Wprowadź zmiany i kliknij przycisk OK w oknie dialogowym zachowania.

    Uaktualnienie obejmie wszystkie przykłady danego zachowanie na określonej stronie. Jeśli inne strony w serwisie zawierają takie zachowanie, to musisz je uaktualniać na każdej stronie oddzielnie.

Pobieranie i instalacja zachowań innych firm

Wiele rozszerzeń dla programu Dreamweaver jest dostępnych na stronie internetowej Exchange (www.adobe.com/go/dreamweaver_exchange_pl).

  1. Wybierz polecenie Okno > Zachowania i zaznacz opcję Pobierz więcej zachowań w menu Dodaj zachowanie.

    Na komputerze uruchomi się podstawowa przeglądarka i serwis Exchange.

  2. Przejrzyj lub wyszukaj odpowiednie pakiety.
  3. Pobierz i zainstaluj wybrany pakiet rozszerzenia.

Dodatkowe informacje na ten temat zawiera sekcja Dodawanie rozszerzeń programu Dreamweaver i zarządzanie nimi.

Logo Adobe

Zaloguj się na swoje konto