Wyświetlanie stron internetowych w programie Dreamweaver, przeglądarkach i na urządzeniach mobilnych.

Funkcja podglądu w przeglądarce w czasie rzeczywistym umożliwia wyświetlenie stron w przeglądarce i na urządzeniach mobilnych oraz obserwowanie w czasie rzeczywistym efektów zmian wprowadzanych w kodzie.

Widok aktywny prezentuje koncepcyjny wygląd strony w Internecie i umożliwia edytowanie poszczególnych elementów w widoku Kod.

Widok Projekt również prezentuje ogólną koncepcję wyglądu tworzonej strony w Internecie, jednak nie renderuje strony w dokładnie taki sposób, jak to robią przeglądarki.

Funkcja Otwórz w przeglądarce pozwala sprawdzić, jak strony będą wyglądać w przeglądarkach. Jest to przydatne w przypadku stron, które korzystają z danych dynamicznych pobieranych z bazy danych, ponieważ proces ten nie zachodzi w czasie rzeczywistym.

Poniżej podano więcej informacji na temat różnych opcji podglądu dostępnych w programie Dreamweaver.

Podgląd w przeglądarce w czasie rzeczywistym

Wyświetlanie stron w czasie rzeczywistym podczas programowania i projektowania ich w programie Dreamweaver. Ta funkcja umożliwia jednoczesne programowanie i wyświetlanie podglądu stron WWW w wielu przeglądarkach.

Podgląd zmian w czasie rzeczywistym w przeglądarce
Podgląd zmian w czasie rzeczywistym w przeglądarce

Uwaga:

Można także wyświetlić podgląd kodu w urządzeniach mobilnych w czasie rzeczywistym podczas jego wpisywania. Więcej informacji: Podgląd stron WWW programu Dreamweaver na wielu urządzeniach.

  1. Kliknij ikonę Podgląd w czasie rzeczywistym na pasku stanu programu Dreamweaver.

    Podgląd w czasie rzeczywistym
    Podgląd w czasie rzeczywistym

    Dostępne są opcje wyświetlenia podglądu stron WWW w czasie rzeczywistym w przeglądarce albo na urządzeniu.

    Jeśli chcesz wyświetlić strony na urządzeniu, zobacz Podgląd i inspekcja stron WWW programu Dreamweaver na wielu urządzeniach.

  2. Aby wyświetlić podgląd stron WWW w przeglądarce, kliknij jedną z dostępnych opcji przeglądarek.

    Uwaga:

    Przeglądarki uwzględnione na tej liście można edytować. Informacje o dodawaniu lub usuwaniu przeglądarki z tej listy podano w sekcji Ustawianie preferencji przeglądarek.

    Jeśli jest używany serwer testowy, należy pamiętać o włączeniu skonfigurowaniu dla niego opcji Automatycznie publikuj pliki na serwerze testowym.

    Podgląd w czasie rzeczywistym wykorzystuje pliki przesyłane na serwer testowy. Włączenie automatycznej publikacji na serwerze testowym gwarantuje, że zmiany będą widoczne w czasie rzeczywistym.

    Włączanie automatycznej publikacji na serwerze testowym
    Włączanie automatycznej publikacji na serwerze testowym

  3. Gdy pojawi się monit, zapisz stronę WWW i jej dokumenty powiązane.

    Zostanie wyświetlone okno przeglądarki ze stroną WWW.

  4. Kontynuuj pracę nad kodem strony. Wprowadzane zmiany będą natychmiast widoczne.

Ustawianie preferencji podglądu w przeglądarce

Możesz ustawić preferencje, których będzie używać przeglądarka podczas wyświetlania podglądu serwisu, a także zdefiniować przeglądarkę podstawową i dodatkową.

Te preferencje będą następnie używane zarówno podczas wyświetlania podglądu serwisu na żywo w czasie rzeczywistym, jak i otwierania strony w przeglądarce.

  1. Wybierz polecenie Plik > Podgląd w czasie rzeczywistym > Edytuj listę przeglądarek.

  2. Aby dodać przeglądarkę do listy, kliknij przycisk Plus (+), wypełnij dane w oknie dialogowym Dodaj przeglądarkę i następnie kliknij przycisk OK.
  3. Aby usunąć przeglądarkę z listy, zaznacz przeglądarkę, a następnie kliknij przycisk Minus (-).
  4. Aby zmienić ustawienia dla wybranej przeglądarki, kliknij przycisk Edytuj, wprowadź zmiany w oknie dialogowym Edytuj przeglądarkę, a następnie kliknij przycisk OK.
  5. Wybierz opcję Przeglądarka główna albo Przeglądarka dodatkowa, aby określić, czy zaznaczona przeglądarka jest główna, czy dodatkowa.

    Naciśnięcie F12 (Windows) lub Option+F12 (Macintosh) otwiera główną przeglądarkę; Control+F12 (Windows) lub Command+F12 (Macintosh) otwiera dodatkową przeglądarkę.

  6. Zaznacz opcję Podglądaj używając pliku tymczasowego, aby utworzyć kopię do podglądu i debugowania na serwerze. (Wyłącz tę opcję, jeżeli chcesz bezpośrednio uaktualniać dokument).

Podgląd stron w widoku aktywnym

Różnica między widokiem aktywnym a tradycyjnym widokiem Projekt w programie Dreamweaver polega na tym, że ten pierwszy zapewnia bardziej realistyczną symulację wyglądu i działania strony w przeglądarce, pozwalając jednocześnie na edycję zawartości. 

Widok aktywny można włączyć, pracując w widoku Projekt. Przejście do widoku aktywnego polega jednak na czymś innym niż włączenie jednego ze zwykłych widoków programu Dreamweaver (Kod, Podziel lub Projekt). Przechodząc z widoku Projekt do widoku aktywnego, uaktywnia się po prostu inny tryb tego pierwszego, to znaczy przechodzi się z trybu edycji do trybu podglądu.

Jeśli w chwili włączenia widoku aktywnego widok Projekt jest zablokowany, to kod pozostaje edytowalny, a zatem można go zmienić, a następnie odświeżyć widok aktywny i sprawdzić efekt wprowadzonych zmian. Podczas pracy w widoku aktywnym można przeglądać aktywny kod projektu. Innymi słowy, można włączyć widok kodu aktywnego, który zapewnia podgląd kodu wykonywanego przez przeglądarkę podczas generowania zawartości strony. Podobnie jak widok aktywny, widok kodu aktywnego nie pozwala edytować strony.

Dodatkową zaletą widoku aktywnego jest możliwość zablokowania kodu JavaScript. Można na przykład przejść do widoku aktywnego i zatrzymać kursor nad tymi wierszami tabeli jQuery, które zmieniają kolor w odpowiedzi na działania użytkownika. Zablokowanie kodu JavaScript powoduje, że strona oglądana w widoku aktywnym zostaje zablokowana w bieżącym stanie. Po zablokowaniu strony można dokonać edycji kodu CSS lub JavaScript, a następnie odblokować stronę i sprawdzić efekt wprowadzonych zmian. Funkcja blokowania kodu JavaScript w widoku aktywnym przydaje się wtedy, kiedy trzeba wypróbować różne właściwości wyskakujących menu lub innych elementów interaktywnych; niektóre z tych właściwości są niedostępne w zwykłym widoku Projekt.

Aby wyświetlić podgląd stron w widoku aktywnym:

  1. Upewnij się, że pracujesz w widoku Projekt (Widok > Projekt) lub w widoku Kod i Projekt (Widok > Kod i Projekt).

  2. Kliknij przycisk Widok aktywny.

  3. (Opcjonalnie) Wprowadź zmiany w widoku Kod, w panelu Style CSS, w zewnętrznym arkuszu stylów CSS lub w innym pliku powiązanym.

    Chociaż widok aktywny nie pozwala na edycję, to klikając różne elementy w tym widoku zyskuje się dostęp do opcji edycyjnych w innych obszarach interfejsu (np. w panelu Style CSS lub w widoku Kod).

    Uwaga:

    Gdy widok aktywny jest włączony, można wykonywać różne operacje na plikach powiązanych (np. na arkuszach stylów CSS). Plik powiązany należy otworzyć za pomocą paska narzędziowego Pliki powiązane, który znajduje się u góry okna dokumentu.

  4. Po wprowadzeniu zmian w widoku Kod lub w pliku powiązanym widok aktywny można odświeżyć, klikając przycisk Odśwież na pasku narzędziowym dokumentu lub naciskając klawisz F5.

  5. Aby powrócić do trybu edycji w widoku Projekt, kliknij ponownie przycisk widoku aktywnego.

Podgląd kodu aktywnego

Kod wyświetlany w widoku Aktywny kod przypomina kod źródłowy strony, który można obejrzeć za pomocą przeglądarki. O ile kod źródłowy, który można wyświetlić w przeglądarce, ma charakter statyczny, to widok kodu aktywnego pozwala uchwycić dynamikę strony, to znaczy pozwala sprawdzać, jak zmienia się kod w trakcie interakcji ze stroną w widoku aktywnym.

  1. Upewnij się, że pracujesz w widoku aktywnym.

  2. Kliknij przycisk Aktywny kod.

    Program Dreamweaver wyświetli kod aktywny, który byłby wykonywany przez przeglądarkę. Kod ten będzie wyróżniony na żółto i nie będzie można go edytować.

    Gdy użytkownik pracuje z interaktywnymi elementami strony, widok Aktywny kod podświetla dynamiczne zmiany w kodzie.

  3. Aby wyłączyć podświetlanie zmian w widoku Aktywny kod, wybierz polecenie Widok > Opcje widoku aktywnego > Podświetl zmiany w aktywnym kodzie.

  4. Aby powrócić do trybu edycji w widoku Kod, kliknij ponownie przycisk Aktywny kod.

Aby zmienić preferencje aktywnego kodu, wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh). Następnie wybierz kategorię Kolorowanie kodu.

Blokowanie kodu JavaScript

Wykonaj jedną z następujących czynności:

  • Naciśnij klawisz F6.

  • Wybierz opcję Zablokuj JavaScript z wyskakującego menu przycisku Widok aktywny.

Pasek informacyjny u góry okna dokumentu będzie zawierał informację, że kod JavaScript został zablokowany. Aby zamknąć pasek informacyjny, kliknij łącze zamykające.

Opcje widoku aktywnego

Oprócz opcji Zablokuj JavaScript, program zapewnia także inne opcje widoku aktywnego, które są dostępne w wyskakującym menu przycisku Widok aktywny lub za pośrednictwem polecenia Widok > Opcje widoku aktywnego.

Zablokuj JavaScript Pozwala zablokować elementy zależne od kodu JavaScript w ich bieżącym stanie.

Wyłącz JavaScript Pozwala wyłączyć kod JavaScript i wygenerować stronę ponownie przy założeniu, że w przeglądarce wyłączono kod JavaScript.

Wyłącz wtyczki Pozwala wyłączyć wtyczki i wygenerować stronę ponownie przy założeniu, że w przeglądarce wyłączono wtyczki.

Podświetl zmiany w aktywnym kodzie Włącza lub wyłączna podświetlanie zmian w widoku Aktywny kod.

Edytuj stronę widoku aktywnego w nowej zakładce Umożliwia otwieranie nowych zakładek dla dokumentów serwisu przeglądanych za pomocą paska narzędziowego Nawigacja w przeglądarce albo funkcji Śledź łącza. Najpierw należy przejść do takiego dokumentu, a następnie wybrać polecenie „Edytuj stronę widoku aktywnego w nowej zakładce”, aby utworzyć nową zakładkę dla dokumentu.

Śledź łącze Powoduje, że następne łącze kliknięte w widoku aktywnym stanie się aktywne. Łącza można uaktywniać również przez kliknięcie ich w widoku aktywnym z przytrzymanym klawiszem Control.

Stale śledź łącza Powoduje trwałe uaktywnienie łączy w widoku aktywnym — dopóki nie zostaną ponownie wyłączone albo dopóki nie zamknie się strony.

Automatycznie synchronizuj pliki zdalne Powoduje automatyczną synchronizację pliku lokalnego i zdalnego po kliknięciu ikony Odśwież na pasku narzędziowym Nawigacja w przeglądarce. Program Dreamweaver umieszcza plik na serwerze przed odświeżeniem widoku, tak że oba pliki są zsynchronizowane.

Użyj serwera testującego źródło dokumentu Opcja używana przede wszystkim dla stron dynamicznych (takich jak strony ColdFusion), dla których jest domyślnie włączona. Jeśli opcja ta jest zaznaczona, to jako źródło strony wyświetlanej w widoku aktywnym program Dreamweaver wykorzystuje plik z serwera testowego serwisu.

Używaj plików lokalnych jako łączy w dokumencie Ustawienie domyślne dla serwisów innych niż dynamiczne. Jeśli w przypadków serwisów dynamicznych, które korzystają z serwera testowego, opcja ta jest zaznaczona, to zamiast plików z serwera testowego program Dreamweaver używa lokalnych wersji plików, które zostały przyłączone do dokumentu (np. plików CSS i JavaScript). W takim wypadku można wprowadzić lokalne zmiany w plikach powiązanych i sprawdzić, jak będą wyglądać przed umieszczeniem na serwerze testowym. Jeśli opcja ta nie jest zaznaczona, program Dreamweaver używa tych wersji plików powiązanych, które znajdują się na serwerze testowym.

Ustawienia żądania HTTP Pozwala wyświetlić okno dialogowe ustawień zaawansowanych, w którym można określić ustawienia wyświetlania danych aktywnych. Aby uzyskać więcej informacji, kliknij przycisk Pomoc w oknie dialogowym.

Otwórz w przeglądarce

Stronę można podejrzeć w przeglądarce w dowolnej chwili; nie wymaga to wysyłania jej najpierw na serwer. Podczas przeglądania strony powinny działać wszystkie funkcje zależne od przeglądarki, takie jak zachowania JavaScript, łącza względne (zależne od dokumentu) i bezwzględne, formanty ActiveX® i wtyczki — pod warunkiem, że odpowiednie wtyczki i formanty ActiveX zostały zainstalowane w przeglądarce.

Przed otwarciem podglądu dokumentu w przeglądarce zapisz ten dokument; w przeciwnym razie przeglądarka nie pokaże najnowszych zmian.

  1. Kliknij prawym przyciskiem myszy nazwę pliku na pasku narzędziowym Dokument i wybierz polecenie Otwórz w przeglądarce.

    Uwaga:

    Jeśli na liście nie ma żadnej przeglądarki, wybierz polecenie Edycja > Preferencje lub Dreamweaver > Preferencje (Macintosh), a następnie kliknij kategorię Podgląd w przeglądarce po lewej stronie, aby wybrać przeglądarkę. Więcej informacji: Ustawianie preferencji podglądu w przeglądarce.

  2. Klikaj łącza i przetestuj zawartość strony.

    Uwaga:

    Zawartość połączona ścieżkami określonymi względem katalogu głównego serwisu nie będzie widoczna podczas podglądu dokumentów w przeglądarce lokalnej, jeżeli nie określi się serwera testowego lub nie zaznaczy opcji Przeglądaj, używając pliku tymczasowego w oknie Edycja > Preferencje > Podgląd w przeglądarce. Wynika to z faktu, że przeglądarki nie rozpoznają katalogów głównych zdefiniowanych dla serwisu. Działanie to wykonuje za nie serwer.

    Uwaga:

    Aby zobaczyć podgląd zawartości połączonej za pomocą ścieżek określonych względem katalogu głównego, umieść plik na zdalnym serwerze, a następnie wybierz polecenie Plik > Podgląd w przeglądarce.

  3. Zamknij stronę w przeglądarce, gdy skończysz testy.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online