Podręcznik użytkownika Anuluj

Dodawanie dynamicznej zawartości do stron

  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

 

 

Uwaga:

Interfejs użytkownika w programie Dreamweaver i nowszych wersjach został uproszczony. Dlatego począwszy od wersji Dreamweaver niektóre opcje opisane w tym artykule mogą nie być dostępne. Więcej informacji zawiera ten artykuł.

Informacje o dodawaniu zawartości dynamicznej

Po zdefiniowaniu źródeł zawartości dynamicznej możesz ich używać, aby wprowadzać na stronach taką zawartość. Źródło zawartości może obejmować kolumnę w zestawie rekordów, wartość wysłaną przez formularz HTML, wartość zawartą w obiekcie serwerowym albo inne dane.

W programie Dreamweaver zawartość dynamiczną można umieszczać niemalże w dowolnym miejscu na stronie internetowej lub w kodzie HTML tej strony. Zawartość dynamiczną można umieścić w punkcie wstawiania, zastąpić ciąg tekstowy albo wstawić ją jako atrybut HTML. Zawartość dynamiczna może np. definiować atrybut src obrazu albo atrybut value w polu formularza.

Aby dodać zawartość dynamiczną do strony, zaznacza się źródło zawartości w panelu Wiązania. Program Dreamweaver wstawia w kodzie strony skrypt wykonywany na serwerze, który nakazuje serwerowi przeniesienie danych ze źródła zawartości do kodu HTML strony w chwili, gdy strona ta jest wywoływana przez przeglądarkę.

Często istnieje wiele metod wprowadzenia dynamiki dla danego elementu strony. Na przykład aby obraz stał się dynamiczny, można posłużyć się panelem Wiązania, Inspektorem właściwości albo poleceniem Obraz z menu Wstaw.

Domyślnie strona HTML może wyświetlać tylko jeden rekord naraz. Aby wyświetlić inne rekordy z zestawu, można dodać łącze pozwalające przechodzić pojedynczo z rekordu do rekordu. Można także utworzyć region powtarzalny, co pozwoli wyświetlać więcej niż jeden rekord na pojedynczej stronie.

Informacje o dynamicznym tekście

Dynamiczny tekst przyjmuje wszystkie atrybuty formatowania zastosowane do istniejącego tekstu lub obowiązujące w punkcie wstawiania. Np. jeżeli dla zaznaczonego tekstu obowiązuje styl CSS, to dynamiczna zawartość zastępująca ten tekst również będzie formatowana tym stylem. Formatowanie tekstowe zawartości dynamicznej można uzupełniać i modyfikować, używając dowolnych narzędzi formatujących programu Dreamweaver.

Do tekstu dynamicznego można również stosować format danych. Np. jeżeli dane zawierają daty, to można wskazać konkretny format dat, np. 04/17/00 dla odwiedzających z USA lub 17/04/00 dla użytkowników z Europy.

Tworzenie tekstu dynamicznego

Tekstem dynamicznym można zastąpić istniejący tekst albo umieścić go w punkcie wstawiania na stronie.

Dodawanie dynamicznego tekstu

  1. W widoku Projekt zaznacz tekst na stronie lub kliknij w miejscu, gdzie chcesz dodać dynamiczny tekst.
  2. Otwórz panel Wiązania (Okno > Wiązania) i wybierz źródło zawartości z listy. Jeżeli wybierzesz zestaw rekordów, to musisz również wskazać pożądaną kolumnę z zestawu.

    Źródło zawartości powinno zawierać zwykły tekst (tekst ASCII). Zwykły tekst to także HTML. Jeżeli na liście nie ma żadnych źródeł zawartości lub dostępne źródła nie odpowiadają twoim potrzebom, kliknij przycisk Plus (+), aby zdefiniować nowe źródło zawartości.

  3. (Opcjonalnie) Wybierz format danych dla tekstu.
  4. Kliknij przycisk Wstaw albo przeciągnij źródło zawartości na stronę.

    Pojawi się element zastępczy zawartości dynamicznej. (Jeżeli na stronie był zaznaczony tekst, to element zastępczy zastąpi to zaznaczenie). Element zastępczy dla zawartości zestawu rekordów używa następującej składni: {NazwaZestawuRekordów.NazwaKolumny}, gdzie ZestawRekordów to nazwa zestawu rekordów, a NazwaKolumny to nazwa kolumny wybranej z tego zestawu rekordów.

    Niekiedy długość elementów zastępczych dynamicznego tekstu zaburza układ strony w oknie dokumentu. Możesz rozwiązać ten problem, używając pustych klamer jako elementów zastępczych, zgodnie z opisem w następnym temacie.

Wyświetlanie elementów zastępczych tekstu dynamicznego

  1. Wybierz polecenie Edycja > Preferencje > Elementy niewidoczne (Windows) lub Dreamweaver > Preferencje > Elementy niewidoczne (Macintosh).
  2. Z wyskakującego menu Pokaż dynamiczny tekst jako wybierz polecenie { } i kliknij przycisk OK.

Wprowadzanie dynamiki do obrazów

Obrazy na stronach mogą zachowywać się dynamicznie. Załóżmy np. że tworzysz stronę wyświetlającą pozycje na sprzedaż na aukcji charytatywnej. Każda ze stron będzie zawierać tekst opisu oraz fotografię jednej pozycji. Ogólny układ strony pozostanie taki sam dla każdej pozycji, zmieniać się będzie jednak fotografia (i tekst opisu).

  1. Po otwarciu strony w widoku Projekt (Widok > Projekt), umieść punkt wstawiania w miejscu, w którym ma się pojawiać obraz.
  2. Wybierz polecenie Wstaw > Obraz.

    Pojawi się okno dialogowe Wybierz źródło obrazu.

  3. Kliknij opcję Źródła danych (Windows) lub przycisk Źródło danych (Macintosh).

    Pojawi się lista źródeł zawartości.

  4. Wybierz źródło zawartości z listy i kliknij przycisk OK.

    Źródłem zawartości może być zestaw rekordów, zawierający ścieżki do plików graficznych. W zależności od struktury plików w serwisie, mogą to być ścieżki bezwzględne, względne dla dokumentu lub względne dla folderu głównego.

    Uwaga:

    Program Dreamweaver nie obsługuje obecnie binarnych obrazów przechowywanych w bazach danych.

    Jeżeli na liście nie ma żadnych zestawów rekordów lub żaden z wymienionych zestawów nie spełnia Twoich potrzeb, zdefiniuj nowy zestaw rekordów.

Tworzenie dynamicznych atrybutów HTML

Wygląd strony można dynamicznie zmieniać, wiążąc atrybuty HTML z danymi. Można np. zmieniać obraz w tle tabeli, wiążąc atrybut background tej tabeli z polem w zestawie rekordów.

Atrybuty HTML można wiązać z danymi za pomocą panelu Wiązania albo Inspektora właściwości.

Wprowadzanie dynamiki atrybutów HTML za pomocą panelu Wiązania

  1. Otwórz panel Wiązania, wybierając polecenie Okno > Wiązania.
  2. Sprawdź, czy w panelu Wiązania wymienione jest źródło danych, z którego chcesz korzystać.

    Źródło danych powinno zawierać dane dostosowane do atrybutu HTML, z którym chcesz je związać. Jeżeli na liście nie ma żadnych źródeł zawartości lub dostępne źródła nie odpowiadają twoim potrzebom, kliknij przycisk Plus (+), aby zdefiniować nowe źródło danych.

  3. Przejdź do widoku Projekt i zaznacz obiekt HTML.

    Np. aby zaznaczyć tabelę HTML, kliknij wewnątrz tabeli, a potem kliknij znacznik <table> w przyborniku znaczników na dole po lewej stronie okna Dokument.

  4. Otwórz panel Wiązania i wybierz źródło zawartości z listy.
  5. W polu Wiąż z wybierz atrybut HTML z wyskakującego menu.
  6. Kliknij przycisk Zwiąż.

    Po następnym uruchomieniu strony na serwerze aplikacji do tego atrybutu HTML zostanie przypisana wartość ze źródła danych.

Tworzenie dynamicznych atrybutów HTML za pomocą Inspektora właściwości

  1. Przejdź do widoku Projekt. Zaznacz obiekt HTML i otwórz Inspektora właściwości (Okno > Właściwości).

    Np. aby zaznaczyć tabelę HTML, kliknij wewnątrz tabeli, a potem kliknij znacznik <table> w przyborniku znaczników na dole po lewej stronie okna Dokument.

  2. Sposób wiązania źródła zawartości dynamicznej z atrybutem HTML zależy od jego położenia.
    • Jeśli obok atrybutu przeznaczonego do powiązania znajduje się ikona folderu w Inspektorze właściwości, kliknij ikonę folderu, aby otworzyć okno dialogowe zaznaczenia pliku; następnie kliknij opcję Źródła danych, aby wyświetlić listę źródeł danych.

    • Jeżeli obok atrybutu, który chcesz związać, nie ma ikony folderu, kliknij zakładkę Lista (niższą z dwóch zakładek) po lewej stronie Inspektora.

      Inspektor właściwości przejdzie w widok listy.

    • Jeżeli atrybutu, który chcesz związać, nie ma w widoku listy, kliknij przycisk Plus (+). Potem wpisz nazwę atrybutu lub kliknij przycisk z małą strzałką i wybierz atrybut z wyskakującego menu.

  3. Aby wartość atrybutu stała się dynamiczna, kliknij ten atrybut. Potem kliknij ikonę błyskawicy lub ikonę folderu na końcu wiersza atrybutu.

    Jeżeli klikniesz ikonę błyskawicy, pojawi się lista źródeł danych.

    Jeżeli klikniesz ikonę folderu, pojawi się okno dialogowe wyboru pliku. Wybierz opcję Źródła danych, aby wyświetlić listę źródeł zawartości.

  4. Wybierz źródło zawartości z listy źródeł i kliknij przycisk OK.

    Źródło zawartości powinno zawierać dane dostosowane do atrybutu HTML, z którym chcesz je związać. Jeżeli na liście nie ma żadnych źródeł zawartości lub dostępne źródła nie odpowiadają twoim potrzebom, zdefiniuj nowe źródło zawartości.

    Po następnym uruchomieniu strony na serwerze aplikacji do tego atrybutu HTML zostanie przypisana wartość ze źródła danych.

Wprowadzanie dynamiki do obiektów ActiveX, Flash i innych

Parametry apletów Java i wtyczek mogą być dynamiczne, podobnie jak parametry obiektów ActiveX, Flash, Shockwave, Director i Generator.

Zanim zaczniesz pracę, sprawdź, czy pola w zestawie rekordów zawierają dane odpowiednie dla parametrów obiektu, z którymi chcesz je związać.

  1. Przejdź do widoku Projekt. Zaznacz obiekt na stronie i otwórz Inspektora właściwości (Okno > Właściwości).
  2. Kliknij przycisk Parametry.
  3. Jeżeli parametru nie ma na liście, kliknij przycisk Plus (+) i wpisz nazwę tego parametru w kolumnie Parametry.
  4. Kliknij kolumnę Wartość dla parametru. Kliknij ikonę błyskawicy, aby wskazać wartość dynamiczną.

    Pojawi się lista źródeł danych.

  5. Wybierz źródło danych z listy i kliknij przycisk OK.

    Źródło danych powinno zawierać dane dostosowane do parametru obiektu, z którym chcesz je związać. Jeżeli na liście nie ma żadnych źródeł danych lub dostępne źródła nie odpowiadają twoim potrzebom, zdefiniuj nowe źródło danych.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?