Podręcznik użytkownika Anuluj

Stosowanie wbudowanych zachowań JavaScript

Szukaj
Dreamweaver

Dreamweaver

Otwórz aplikację
  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
  19. Rozwiązywanie problemów
    1. Rozwiązane problemy
    2. Znane problemy

 

 

W tym temacie omówiono stosowanie wbudowanych zachowań JavaScript w programie Adobe Dreamweaver.

Stosowanie wbudowanych zachowań

Zachowania dołączone do programu Dreamweaver zaprojektowano do współpracy z nowoczesnymi przeglądarkami. Zachowania te mogą nieznacznie gorzej współpracować ze starszymi przeglądarkami.

Uwaga:

Operacje programu Dreamweaver starannie zaprojektowano tak, aby mogły współpracować z jak największą liczbą przeglądarek. Odręczne usunięcie kodu z operacji programu Dreamweaver lub zastąpienie go własnym kodem może spowodować utratę zgodności pomiędzy przeglądarkami.

Operacje programu Dreamweaver zaprojektowano z myślą o zapewnieniu maksymalnej zgodności pomiędzy przeglądarkami, ale niektóre z przeglądarek nie obsługują języka JavaScript i dlatego wielu użytkowników Internetu posiada wyłączone zachowania JavaScript w swoich przeglądarkach. Najlepsze efekty pomiędzy platformami zapewniają alternatywne interfejsy zawarte w znacznikach <noscript> (bez skryptu), umożliwiające korzystanie ze stron także tym użytkownikom, którzy nie używają języka JavaScript.

Stosowanie zachowania Call JavaScript

Zachowanie Call JavaScript wykonuje zwykłą funkcję lub wiersz kodu JavaScript podczas wystąpienia zdarzenia. (Możesz samodzielnie napisać skrypt lub skorzystać z kodu dostępnego w wielu nieodpłatnych bibliotekach JavaScript, dostępnych w Internecie).

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Wywołaj JavaScript.
  2. Wpisz dokładny kod JavaScript lub nazwę funkcji.

    Na przykład aby utworzyć przycisk Wstecz, można wpisać kod if (history.length > 0){history.back()}. Jeśli kod został wyrażony w funkcji, wpisz tylko nazwę tej funkcji (np. hGoBack()).

  3. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Zmień właściwość

Zachowanie Zmień właściwość (Change Property) może być używane do zmiany wartości właściwości obiektu (np. kolor tła div lub operacji form).

Uwaga:

Zachowanie tego typu powinno być używane tylko przez użytkowników znających zasady HTML i JavaScript.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Zmień właściwość.
  2. W menu Rodzaj elementu, zaznacz określony typ tak, by wyświetlić wszystkie zdefiniowane elementy danego rodzaju.
  3. Zaznacz wybrany element w menu ID elementu.
  4. Zaznacz właściwość w menu Właściwości lub wpisz nazwę wybranej właściwości w wyświetlonym polu.
  5. W polu Nowa wartość wpisz wartość dla nowej właściwości.
  6. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Sprawdź wtyczkę

Zachowanie Sprawdź wtyczkę może być używane do przenoszenie odwiedzających na inne strony, zależnie od tego, czy mają zainstalowaną daną wtyczkę. Na przykład na określoną stronę mogą być przenoszeni tylko ci użytkownicy, którzy posiadają zainstalowaną wtyczkę Shockwave.

Uwaga:

Nie ma możliwości sprawdzania określonych wtyczek w Internet Explorer przy pomocy JavaScript. Zaznaczenie opcji Flash lub Director doda odpowiedni kod VBScript do strony tak, by możliwe było znalezienie takich wtyczek w Internet Explorer, w Windows. Wyszukiwanie wtyczek jest niewykonalne w programie Internet Explorer w systemie Mac OS.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Sprawdź wtyczkę.
  2. Zaznacz określoną wtyczkę w menu Wtyczki lub naciśnij klawisz Enter i wpisz w podanym polu dokładną nazwę wtyczki.

    Dokładna nazwa wtyczki musi być identyczna z nazwę wpisaną czcionką pogrubioną na stronie Informacje o wtyczkach, w Netscape Navigator. (W systemie Windows wybierz polecenie Pomoc programu Navigator > Informacje o wtyczkach; w systemie Macintosh wybierz w menu Apple opcję Informacje o wtyczkach).

  3. W polu Jeśli znaleziono, przejdź do URL-a, określ URL dla odwiedzających posiadających taką wtyczkę.

    Jeśli wpisujesz zdalny adres URL, musisz wpisać http:// przed adresem strony WWW. Jeśli pole pozostanie puste, odwiedzający pozostaną na tej samej stronie.

  4. W polu W innym przypadku, przejdź do adresu URL, określ alternatywny URL dla odwiedzających nie posiadających takiej wtyczki. Jeśli pole pozostanie puste, odwiedzający pozostaną na tej samej stronie.
  5. Określ czynności w razie braku możliwości wyszukiwania wtyczki. Domyślnie, jeśli wyszukiwanie wtyczki nie jest możliwe, odwiedzający jest przenoszony do URL-a umieszczonego w polu W innym przypadku. Aby przenieść odwiedzającego do pierwszego (Jeśli znaleziono) URL-a, zaznacz opcję Zawsze przechodź do pierwszego adresu URL, jeśli wykrycie nie jest m możliwe. Zaznaczona opcja jest równoznaczna z założeniem posiadania danej wtyczki chyba, że przeglądarka jasno informuje o braku tej wtyczki. Ogólnie przyjmując, opcja powinna być zaznaczana jeśli zawartość wtyczki jest częścią strony, a w pozostałych przypadkach powinna być nieaktywna.
    Uwaga:

    Opcja ta ma zastosowanie tylko do Internet Explorer, ponieważ Netscape Navigator zawsze wykrywa wtyczki.

  6. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Przeciągnij element AP

Zachowanie Przeciągnij element AP umożliwia przeciągnięcie elementu bezwzględnie umieszczonego (AP). Zachowanie takie może być używane do tworzenia puzzli, kontrolek suwaka i innych ruchomych elementów interfejsu.

Określenia mogą dotyczyć kierunku przeciągania elementu AP (z poziomie, pionie lub innym kierunku), celu, do jakiego można przeciągać element AP, przyciągania elementu AP do celu, jeśli znajduje się w odległości nie większej niż określona wartość podana w pikselach, czynności po umieszczeniu elementu w celu itd.

Zachowanie Przeciągnij element AP musi zostać nazwane przed przeciąganiem elementu AP i dlatego należy je przyłączyć do obiektu body (ze zdarzeniem onLoad).

  1. Wybierz polecenie Wstaw > Obiekty układu > AP Div albo kliknij przycisk rysowania elementów AP Div w panelu Wstaw i narysuj element AP Div w widoku Projekt okna dokumentu.
  2. Kliknij <body> w miejscu wybierania znaczników, dostępne w lewym dolnym rogu okna Dokument.
  3. Przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Przeciągnij element AP.

    Jeśli opcja Przeciągnij element AP nie jest dostępna, to prawdopodobnie zaznaczono wcześniej element AP.

  4. W menu Element AP zaznacz wybrany element AP.
  5. W menu Ruch, zaznacz opcję Ograniczony lub Nieograniczony.

    Ruch nieograniczony jest odpowiedni dla puzzli i innych gier polegających na przeciąganiu i upuszczaniu. W przypadku kontrolek suwaków i ruchomych elementów takich jak szuflady plików, zasłony i mini-żaluzje, wybierz ruch ograniczony.

  6. Po wybraniu ruchu ograniczonego, wpisz wartości (wyrażone w pikselach) w polach Do góry, W dół, Na prawo i Na lewo.

    Odległości są liczone od początkowej pozycji elementu AP. Aby ograniczyć ruch do obszaru prostokątnego, wpisz wartości dodatnie we wszystkich czterech polach. Aby ograniczyć ruchy do pionowych, wpisz wartości dodatnie w polach W górę i W dół i 0 w polach Na lewo i Na prawo. Aby ograniczyć ruchy do poziomych, wpisz wartości dodatnie w polach Na lewo i Na prawo i 0 w polach W górę i W dół.

  7. Wpisz wartości (wyrażone w pikselach) dla miejsca docelowego upuszczania w polach Lewa, Górna.

    Miejsce docelowe upuszczenia jest miejscem, do którego ma być przeciągnięty element AP. Element AP ma osiągnąć miejsce docelowe upuszczenia w momencie, gdy jego lewa i górna współrzędna osiągnie wartości wpisane w polach Lewa i górna. Odległości są liczone od lewego górnego rogu okna przeglądarki. Kliknij opcję Pobierz bieżące położenie i automatycznie wypełnij pola bieżącego położenia elementu AP.

  8. Wpisz wartość (wyrażoną w pikselach) w polu Przyciągaj, jeżeli w odległości, aby określić maksymalną odległość z jakiej element AP będzie przyciągany automatycznie do miejsca docelowego.

    Większe wartości ułatwiają odnalezienie miejsce docelowych.

  9. W przypadku prostych puzzli lub przenoszenia elementów ekranu można zatrzymać się na tym etapie. Aby zdefiniować uchwyt przeciągania dla elementu AP, zaobserwuj ruch elementy AP podczas przeciągania i uruchom operację w momencie upuszczenia elementu AP, a potem kliknij zakładkę Zaawansowane.
  10. Aby określić wymóg kliknięcia określonego obszaru elementy AP przed jego przeciąganiem, zaznacz opcję Obszar w elemencie, w menu Uchwyt przeciągania, wpisz lewą i górną współrzędną oraz szerokość i wysokość uchwytu przeciągania.

    Opcja jest przeznaczona dla obrazu, który w elemencie AP zawiera element sugerujący przeciąganie (np. pasek tytułu lub uchwyt szuflady). Nie wybieraj tej opcji, jeśli element AP ma być przeciągany kliknięciem w dowolnym miejscu.

  11. Zaznacz dowolną z opcji Podczas przeciągania:

    • Zaznacz opcję Przenieś element na wierzch, jeśli element AP powinien być przeniesiony podczas przeciągania na wierzch stosu. Po zaznaczeniu tej opcji, użyj menu do zaznaczenia opcji pozostawienia elementu AP na wierzchu lub przywrócenia jego oryginalnego położenia na stosie.

    • Wpisz kod JavaScript lub nazwę funkcji (np. monitorAPelement()) w polu Call JavaScript, aby wywoływać ten kod lub funkcję podczas przeciągania elementu AP. Na przykład można napisać funkcję, która będzie kontrolowała współrzędne elementu AP i wyświetlała w polu tekstowym podpowiedzi takie jak „ciepło, jesteś już blisko” lub „jesteś daleko od miejsce docelowego”.

  12. Wpisz kod JavaScript lub nazwę funkcji (np. evaluateAPelementPos()) w drugim polu Call JavaScript, aby wywoływać ten kod lub funkcję podczas upuszczania elementu AP. Zaznacz opcję Tylko jeżeli wyst. przyciąganie, jeśli JavaScript powinno być zastosowane tylko po umieszczeniu elementu AP w miejscu docelowym.
  13. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Zbieranie informacji o przeciąganym elemencie AP

Po dołączeniu zachowania Przeciągnij element AP do obiektu program Dreamweaver umieszcza funkcję MM_dragLayer() w sekcji head danego dokumentu. (Funkcja ta zachowuje stare konwencje nazw dla elementów AP [tzn. „Layer”], tak, by warstwy utworzone w poprzednich wersjach programu Dreamweaver pozostały edytowalne). Oprócz zarejestrowania elementy AP jako dopuszczalnie przeciąganego, funkcja ta definiuje trzy właściwości dla każdego przeciąganego elementu AP—MM_LEFTRIGHT, MM_UPDOWN oraz MM_SNAPPED—które mogą być używane we własnych funkcjach JavaScript do określania względnego położenia elementu AP w poziomie, pionie i tego, czy element osiągnął miejsce docelowe.

Uwaga:

Informacje umieszczone w tej części są przeznaczone dla doświadczonych użytkowników JavaScript.

Na przykład wymienione tu funkcje wyświetlają wartość właściwości MM_UPDOWN (bieżące położenie elementu AP w pionie) w polu formularza zwanym curPosField. (Pola formularza są używane do wyświetlania ciągle uaktualnianych informacji, ponieważ stanowią zmiany dynamiczne; ich zawartość może być zmieniana zaraz po zakończeniu wczytywania strony).

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Zamiast wyświetlania wartości MM_UPDOWN lub MM_LEFTRIGHT w polu formularza można użyć tych wartości na kilka różnych sposobów. Na przykład można napisać funkcję wyświetlającą komunikat w polu formularza uzależniony od tego jak blisko jest dana wartość od pola upuszczania lub przywołać inną funkcję do wyświetlenia lub ukrycia elementu AP w zależności od danej wartości.

Opcja jest szczególnie przydatna w przypadku odczytywania własności MM_SNAPPED dla strony z kilkoma elementami AP, które muszą być umieszczone w miejscach docelowych przed przejściem na następną stronę lub do następnego zadania. Na przykład można napisać funkcję zliczającą elementy AP posiadające wartość MM_SNAPPED prawda i informującą o upuszczeniu elementu AP. Po uzyskaniu określonej wartości upuszczeń, można wysłać użytkownika na następną stronę lub wyświetlić komunikat z gratulacjami.

Stosowanie zachowania Przejdź do adresu URL

Zachowanie Go To URL otwiera nową stronę w bieżącym oknie lub określonej ramce. Zachowanie jest przeznaczone do zmiany zawartości dwóch lub więcej ramek jednym kliknięciem.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Przejdź do adresu URL.
  2. Zaznacz miejsce przeznaczenia dla URL, na liście Otwórz w.

    Lista Otwórz w automatycznie podaje listę nazw wszystkich ramek bieżącego układu oraz okna głównego. Jeśli nie ma ramek, okno główne jest jedyną opcją.

    Uwaga:

    Zachowanie takie może powodować nieoczekiwane rezultaty jeśli jakakolwiek z ramek jest nazwana jako górna, pusta, samodzielna lub nadrzędna. Przeglądarki czasami mylą te nazwy z zarezerwowanymi nazwami miejsc docelowych.

  3. Kliknij opcję Przeglądaj i zaznacz dokument wybrany do otwarcia lub wpisz ścieżkę i nazwę pliku dokumentu w polu URL.
  4. Powtórz czynności opisane w punkcie 2 i 3, aby otworzyć dodatkowe dokumenty w innych ramkach.
  5. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania menu przeskoku (Jump)

Podczas tworzenia menu przeskoku przy pomocy polecenia Wstaw > Formularz > Menu przeskoku, program Dreamweaver tworzy obiekt i przypisuje do niego zachowanie Menu przeskoku (lub Menu przeskoku – Przejdź). Nie ma potrzeby odręcznego przypisywania do obiektu zachowania Menu przeskoku.

Istniejące menu przeskoku może być edytowane na dwa sposoby:

  • Można edytować i przekładać elementy menu, zmieniać pliki, do których się przeskakuje oraz zmieniać okno, którym będą otwierane pliki, korzystając z dwukrotnego kliknięcia istniejącego zachowania Menu przeskoku w panelu Zachowania.

  • Elementy mogą być edytowane w menu tak, jak inne elementy, poprzez zaznaczenie menu i użycie przycisku Wartości listy, w Inspektorze właściwości.

  1. Utwórz obiekt menu przeskoku, jeśli w dokument nie posiada jeszcze takiego elementu.
  2. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Menu przeskoku.
  3. Wprowadź wybrane zmiany w oknie Menu przeskoku i kliknij przycisk OK.

Stosowanie zachowania Menu przeskoku Przejdź

Zachowanie Menu przeskoku Przejdź jest ściśle związane z zachowaniem Menu przeskoku; Menu przeskoku Przejdź umożliwia przypisanie przycisku Przejdź do menu przeskoku. (Przed zastosowaniem tego zachowania, menu przeskoku musi już istnieć w dokumencie). Kliknięcie przycisku Przejdź otwiera łącze zaznaczone w menu przeskoku. Menu przeskoku nie potrzebuje zwykle przycisku Przejdź; zaznaczenie elementy z menu przeskoku powoduje zwykle wczytanie adresu URL bez wykonywania dalszych czynności. Jeśli jednak odwiedzający zaznaczy ten sam element, który jest już zaznaczony w menu przeskoku, to przejście nie nastąpi. Najczęściej nie ma to znaczenia, ale jeśli menu przeskoku jest wyświetlane w ramce, a elementy menu przeskoku są połączone ze stronami w innych ramkach, to przycisk Przejdź może być użyteczny do ponownego zaznaczania elementu zaznaczonego juz w menu przeskoku.

Uwaga:

Jeśli przycisk Przejdź i menu przeskoku są używane równocześnie, to przycisk Przejdź staje się jedynym mechanizmem przenoszącym do adresu URL przypisanego do zaznaczenia w menu. Zaznaczenie elementu menu w menu przeskoku nie powoduje już w takiej sytuacji automatycznego przejścia do innej strony lub ramki.

  1. Zaznacz obiekt, który będzie używany jako przycisk Przejdź (najczęściej jest to obraz przycisku), otwórz menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Menu przeskoku.
  2. W menu „Wybierz menu przeskoku” zaznacz menu włączane przez przycisk Przejdź i kliknij przycisk OK.

Stosowanie zachowania Otwórz okno przeglądarki

Zachowanie Otwórz okno przeglądarki jest przeznaczone do otwierania strony w nowym oknie. Na tym etapie możesz określić właściwości nowego okna (np. rozmiar), atrybuty (czy jego wielkość może być zmieniana, pasek menu itp.) oraz nazwę. Na przykład zachowanie to może służyć na przykład do otwierania dużego obrazu w oddzielnym oknie po kliknięciu miniaturki obrazu oraz dostosowania nowego okna do wielkości tego obrazu.

Po określeniu atrybutów, okno otwiera się w podanym rozmiarze, z atrybutami okna, z którego je otworzono. Określenie dowolnego atrybutu dla okno powoduje automatyczne wyłączenie wszystkich pozostałych atrybutów, które nie zostały włączone. Na przykład jeśli atrybuty okna nie zostały określone, to może się otworzyć jako okno o wymiarach 1024 x 768 pikseli, z paskiem nawigacji (przyciski Wstecz, Do przodu, Główny i Pobierz ponownie), paskiem Położenie (wyświetlającym URL), paskiem stanu (komunikat stanu w dolnej części) i paskiem menu (Plik, Edycja, Widok i inne menu). Jeśli określisz szerokość na 640, a wysokość na 480 bez podania innych atrybutów, to na ekranie pojawi się okno o wymiarach 640 x 480 pikseli, bez pasków narzędziowych.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Otwórz okno przeglądarki.
  2. Kliknij opcję przeglądaj i zaznacz wybrany plik lub wpisz wybrany URL.
  3. Określ opcje opisujące szerokość i wysokość okna (w pikselach) oraz opcje pasków narzędziowych, pasków przewijania, uchwytów zmiany wielkości i tym podobnych elementów. Nazwij okno (nazwa nie może zawierać spacji i znaków specjalnych), jeśli chcesz, aby okno stało się miejscem docelowym dla łączy lub zostało objęte kontrolą JavaScript.
  4. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Wyskakujący komunikat

Zachowanie Wyskakujący komunikat wyświetla ostrzeżenie JavaScript z określonym komunikatem. Ostrzeżenia JavaScript posiadają tylko jeden przycisk (OK), i dlatego zachowanie tego typu powinno być używane raczej do przekazywania informacji, zamiast opcji wymagających dokonania wyboru.

W tekście możesz osadzić dowolne ważne wywołanie funkcji JavaScript, ogólną zmienną lub inne wyrażenie. Aby osadzić wyrażenie JavaScript, umieść go w nawiasach ({}). Aby wyświetlić nawias, poprzedź go ukośnikiem odwrotnym (\{).

Przykład:

The URL for this page is {window.location}, and today is {new Date()}.
Uwaga:

Przeglądarka steruje wyglądem ostrzeżenia. Jeśli chcesz zwiększyć stopień kontroli wyglądu możesz zastosować zachowanie Otwórz okno przeglądarki.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Wyskakujący komunikat.
  2. Wpisz komunikat w polu Komunikat.
  3. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Wczytaj wstępnie obrazy

Zachowanie Wczytaj wstępnie obrazy skraca czas wyświetlania poprzez buforowanie obrazów jeszcze nie wyświetlanych przy pierwszym wyświetlaniu obrazu (np. obrazy wymieniana wraz z zachowaniami lub skryptami).

Uwaga:

Zachowanie Zamień obraz automatycznie pobiera wstępnie wszystkie podświetlone obrazu po zaznaczeniu opcji Wczytaj wstępnie obrazy, w oknie dialogowym Zamień obraz, co pomaga uniknąć odręcznego dodawania Wczytaj wstępnie obrazy przy stosowaniu Zamień obraz.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Wczytaj wstępnie obrazy.
  2. Kliknij opcję Przeglądaj i zaznacz wybrany plik obrazu lub wpisz ścieżkę i nazwę pliku obrazu w polu Plik źródłowy.
  3. Kliknij przycisk Plus (+), umieszczony w górnej części okna dialogowego, aby dodać obraz do listy Wczytaj wstępnie obrazy.
  4. Powtórz operacje opisane w punktach 2 i 3 dla wszystkich pozostałych obrazów, które mają być wstępnie wczytane na stronie bieżącej.
  5. Aby usunąć obraz z listy Wczytaj wstępnie, zaznacz go i kliknij przycisk Minus (–).
  6. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Ustaw tekst ramki

Zachowanie Ustaw tekst ramki pozwala na dynamiczne określenie tekstu ramki, zastąpienie zawartości i formatowania ramki wybraną inną zawartością. Wybrana zawartość może zawierać dowolny ważny kod HTML. Zachowanie to może być używane do dynamicznego wyświetlania informacji.

Zachowanie „Ustaw tekst ramki” zastępuje wprawdzie formatowanie ramki, ale można skorzystać z opcji Zachowaj kolor tła, która umożliwia zachowanie atrybutów tła strony i koloru tekstu.

W tekście możesz osadzić dowolne ważne wywołanie funkcji JavaScript, ogólną zmienną lub inne wyrażenie. Aby osadzić wyrażenie JavaScript, umieść go w nawiasach ({}). Aby wyświetlić nawias, poprzedź go ukośnikiem odwrotnym (\{).

Przykład:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Ustaw tekst > Ustaw tekst ramki.
  2. W oknie Ustaw tekst ramki, zaznacz ramkę docelową w menu Ramka.
  3. Kliknij przycisk Pobierz bieżący HTML, aby skopiować bieżącą zawartość działu body ramki docelowej.
  4. Wpisz komunikat w polu Nowy HTML.
  5. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Ustaw tekst kontenera

Zachowanie Ustaw tekst kontenera zastępuje zawartość i formatowanie istniejącego na stronie kontenera (to jest dowolnego elementu zawierającego tekst lub inne elementy) określoną zawartością. Wybrana zawartość może zawierać dowolny ważny kod źródłowy HTML.

W tekście możesz osadzić dowolne ważne wywołanie funkcji JavaScript, ogólną zmienną lub inne wyrażenie. Aby osadzić wyrażenie JavaScript, umieść go w nawiasach ({}). Aby wyświetlić nawias, poprzedź go ukośnikiem odwrotnym (\{).

Przykład:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Ustaw tekst > Ustaw tekst kontenera.
  2. W oknie Ustaw tekst kontenera, skorzystaj z menu Kontener do zaznacz elementu docelowego.
  3. Wpisz nowy tekst lub HTML w polu Nowy HTML.
  4. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Ustaw tekst paska stanu

Zachowanie Ustaw tekst paska stanu wyświetla komunikat w pasku stanu, w lewym dolnym rogu okna przeglądarki. Na przykład zachowanie to może być użyte do opisania w pasku stanu miejsce docelowego łącza, zamiast umieszczania tam samego adresu URL. Użytkownicy często ignorują lub pomijają komunikaty wyświetlane w pasku stanu (i nie wszystkie przeglądarki całkowicie obsługują określanie tekstu w paskach stanu); jeśli wybrany komunikat jest istotny, możesz go wyświetlić w postaci dodatkowego komunikatu lub w postaci tekstu elementu AP.

Uwaga:

Jeśli zachowanie Ustaw tekst paska stanu jest używane w programie Dreamweaver, to tekst paska stanu w przeglądarce może się nie zmieniać, ponieważ niektóre przeglądarki wymagają specjalnych zmian w trakcie dopasowywania tekstu paska stanu. Na przykład program Firefox wymaga zmiany opcji Zaawansowane, umożliwiającej zmianę tekstu paska stanu przez JavaScript. Dodatkowe informacje można znaleźć w dokumentacji przeglądarki.

W tekście możesz osadzić dowolne ważne wywołanie funkcji JavaScript, ogólną zmienną lub inne wyrażenie. Aby osadzić wyrażenie JavaScript, umieść go w nawiasach ({}). Aby wyświetlić nawias, poprzedź go ukośnikiem odwrotnym (\{).

Przykład:

The URL for this page is {window.location}, and today is {new Date()}.
  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Ustaw tekst > Ustaw tekst paska stanu.
  2. W oknie dialogowym Ustaw tekst paska stanu, wpisz wybrany komunikat w polu Komunikat.

    Staraj się, by wiadomość była zwięzła. Przeglądarka skróci wiadomość jeśli komunikat nie zmieści się w pasku stanu.

  3. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Ustaw tekst pola tekstowego

Zachowanie Ustaw tekst pola tekstowego zastępuje zawartość pola tekstowego formularza wybraną, inną zawartością.

W tekście możesz osadzić dowolne ważne wywołanie funkcji JavaScript, ogólną zmienną lub inne wyrażenie. Aby osadzić wyrażenie JavaScript, umieść go w nawiasach ({}). Aby wyświetlić nawias, poprzedź go ukośnikiem odwrotnym (\{).

Przykład:

The URL for this page is {window.location}, and today is {new Date()}.

Tworzenie nazwanego pola tekstowego

  1. Wybierz polecenie Wstaw > Formularz > Pole tekstowe.

    Jeśli program Dreamweaver poprosi o dodanie znacznika formularza, kliknij przycisk Tak.

  2. W polu Inspektor właściwości‚ wpisz nazwę dla pola tekstowego. Upewnij się, że nazwa nie powtarza się na stronie (nie używaj jednej nazwy dla kilku elementów na tej samej stronie, nawet jeśli są w różnych formularzach).

Stosowanie zachowania Ustaw tekst pola tekstowego

  1. Zaznacz pole tekstowe, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Ustaw tekst > Ustaw tekst pola.
  2. Zaznacz docelowe pole tekstowe w menu Pole tekstowe i wpisz nowy tekst.
  3. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Pokaż-Ukryj elementy

Zachowanie Pokaż-Ukryj elementy pokazuje, ukrywa lub przywraca domyślną widoczność jednego lub kilku elementów strony. Zachowanie to jest używane do wyświetlania informacji w trakcie wykonywania czynności na stronie. Na przykład jeśli przesuniesz kursor nad obrazem rośliny, możesz pokazać element strony ze szczegółami dotyczącymi terminów uprawy rośliny i obszarów jej występowania, zapotrzebowania na światło słoneczne, osiągalne rozmiar itp. Zachowanie to jedynie pokazuje i ukrywa element odnoszący się do danego szczegółu i nie usuwa elementu ze strony podczas jego ukrywania.

  1. Zaznacz obiekt, przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Pokaż-Ukryj elementy.

    Jeśli opcja Pokaż-Ukryj elementy nie jest dostępna, to prawdopodobnie zaznaczono wcześniej element AP. Elementy AP nie akceptują zdarzeń w obu przeglądarkach 4.0 i dlatego należy zaznaczyć inny obiekt (np. znacznik <body> lub znacznik łącza <a>).

  2. Na liście Elementy, zaznacz element wybrany do pokazania lub ukrycia i kliknij opcję Pokaż, Ukryj lub Przywróć (przywraca widoczność domyślną).
  3. Powtórz czynności opisane w punkcie 2 dla wszystkich pozostałych elementów, których widoczność chcesz zmienić. (Widoczność kilku elementów może być zmieniona w jednym zachowaniu).
  4. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

W programie Dreamweaver CS5 zachowanie to nie jest już używane.

Stosowanie zachowania Zamień obraz

Zachowanie Zamień obraz zamienia jeden obraz na inny poprzez zmianę atrybutu src znacznika <img>. Zachowanie może być używane do tworzenia przycisków rollover i innych efektów obrazów (zamiana więcej niż jednego obrazu jednocześnie). Wstawienie obrazu rollover (najazd) automatycznie dodaje zachowanie Zamień obraz na stronie.

Uwaga:

Zachowanie to wpływa tylko na atrybut src i dlatego zamieniane obrazy powinny mieć takie same rozmiary (wysokość i szerokość). W innym przypadku, obraz zastępujący zostanie zmniejszony lub zwiększony tak, by dopasował się do wymiarów oryginału.

Istnieje także zachowanie Przywróć zamieniony obraz, które przywraca ostatni zestaw zastąpionych obrazów ich poprzednim plikom źródłowym. To zachowanie jest automatycznie dodawane po dołączeniu do obiektu zachowania Zamień obraz; jeśli opcja Przywróć pozostanie zaznaczona podczas przyłączania zachowania Zamień obraz, zachowanie Przywróć zamieniony obraz nie będzie już musiało być odręcznie dodawane.

  1. Aby wstawić obraz, wybierz polecenie Wstaw > Obraz lub kliknij przycisk Obraz w panelu Wstaw.
  2. W polu Inspektor właściwości‚ wpisz nazwę dla obrazu, w polu tekstowym najdalej wysuniętym na lewo.

    Obrazy nie muszą być nazywane, nazwy są im dodawane automatycznie przy dołączaniu zachowania do obiektu. Warto jednak pamiętać, że łatwiej jest rozróżnić obrazy w oknie dialogowym Zamień obraz, jeśli posiadają już nazwy.

  3. Powtórz czynności opisane w punktach 1 i 2 dla dodania innych obrazów.
  4. Zaznacz obiekt (najczęściej obraz, który ma być zastąpiony), przejdź do menu Dodaj zachowanie w panelu Zachowania i wybierz opcję Zamień obraz.
  5. Na liście Obrazy, zaznacz obraz, którego źródło chcesz zmienić.
  6. Kliknij opcję Przeglądaj i zaznacz wybrany plik obrazu lub wpisz ścieżkę i nazwę pliku obrazu w polu Ustaw źródło na.
  7. Powtórz czynności opisane w punkcie 5 i 6 dla wszystkich pozostałych obrazów, które chcesz zmienić. Zastosuj operację Zamień obraz dla wszystkich obrazów, które mają być zmienione w jednej operacji, bo w innym przypadku operacja Przywróć zamieniony obraz nie przywróci ich.
  8. Zaznacz opcję Wczytaj wstępnie obrazy, aby zastosować bufor do nowych obrazów, podczas wczytywania strony.

    Operacja taka spowoduje uniknięcie opóźnień podczas wyświetlania obrazów.

  9. Kliknij przycisk OK i sprawdź, czy domyślne zdarzenie jest poprawne.

Stosowanie zachowania Przeprowadź walidację formularza

Zachowanie Przeprowadź walidację formularza sprawdza zawartość określonych pól tekstowych dla zapewnienia poprawności wpisywanych danych. Zachowanie może być dołączane do poszczególnych pól tekstowych ze zdarzeniem onBlur dla walidowania pól podczas ich wypełniania w formularzu lub dołączane do samego formularza ze zdarzeniem onSubmit w celu walidowania kilku pól tekstowych jednocześnie po kliknięciu przycisku Wyślij. Dołączenie tego zachowania do formularza chroni przed wysyłaniem formularzy z nieważnymi danymi.

  1. Aby wstawić formularz, wybierz polecenie Wstaw > Formularz lub kliknij przycisk Formularz w panelu Wstaw.
  2. Aby wstawić pole tekstowe, wybierz polecenie Wstaw > Formularz > Pole tekstowe lub kliknij przycisk Pole tekstowe w panelu Wstaw.

    Powtórz czynności przed wstawieniem dodatkowych pól.

  3. Wybierz metodę walidacji:

    • Aby walidować poszczególne pola po wypełnieniu formularza, zaznacz pole tekstowe i wybierz polecenie Okno > Zachowania.

    • Aby walidować kilka pól przy wysyłaniu formularza, kliknij znacznik <form>, dostępny miejscu wybierania znaczników, w lewym dolnym rogu okna Dokument i wybierz polecenie Okno > Zachowania.

  4. W menu Dodaj zachowanie zaznacz opcję Przeprowadź walidację formularza.
  5. Wykonaj jedną z następujących czynności:

    • Jeśli walidujesz poszczególne pola, wybierz z listy Pola takie samo pole, jakie zaznaczono w oknie Dokument.

    • Jeśli walidujesz kilka pól, zaznacz pole tekstowe na liście Pola.

  6. Zaznacz opcję Wymagane, jeśli pole musi zawierać dane.
  7. Zaznacz jedną z następujących opcji Akceptuj:

    Cokolwiek

    Sprawdza, czy wymagane pole zawiera dane jakiegokolwiek rodzaju. 

    Adres e-mail

    Sprawdza, czy pole posiada symbol @.

    Liczba

    Sprawdza, czy pole zawiera tylko liczby.

    Liczba od

    Sprawdza, czy pole zawiera liczbę z określonego przedziału.

  8. Jeśli walidacja obejmuje kilka pól, powtórz czynności opisane w punktach 6 i 7 dla wszystkich pól, które mają być walidowane.
  9. Kliknij przycisk OK.

    Jeśli walidujesz kilka pól podczas wysyłania formularza, zdarzenie onSubmit automatycznie zostanie wyświetlone w menu Zdarzenia.

  10. Jeśli walidujesz poszczególne pola, sprawdź, czy domyślnym zdarzeniem jest onBlur lub onChange. Jeśli nie, zaznacz jedno z nich.

    Oba zdarzenie uruchamiają zachowanie Przeprowadź walidację formularza po odsunięciu kursora od pola. Różnica polega na tym, że onBlur występuje bez względu na wpisanie danych w polu, a onChange występuje tylko po zmianie zawartości pola. Zdarzenie onBlur jest preferowane dla pól wymaganych.

Więcej zasobów tego rodzaju

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?

Podręczne łącza

Wyświetl swoje plany Zarządzaj planami
Wyświetl podręczne łącza
Ukryj podręczne łącza

Informacje prawne    |    Zasady prywatności online