Podgląd stron

Funkcja podglądu w czasie rzeczywistym umożliwia wyświetlanie stron w przeglądarce i 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.

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. 

Ustawianie preferencji podglądu w przeglądarce

Funkcje podglądu w czasie rzeczywistym i podglądu w przeglądarce można przełączać. Można także 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 przeglądarki 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.

Domyślny podgląd statyczny w przeglądarce: Ta opcja umożliwia użytkownikom wybór trybu podglądu plików w przeglądarce. Po zaznaczeniu tego pola wyboru użytkownicy będą mogli przeglądać pliki, wybierając z menu opcję „Otwórz w przeglądarce” lub używając skrótów. Jeśli ta opcja zostanie wyłączona, podgląd w przeglądarce będzie wyświetlany za pomocą funkcji Podgląd w czasie rzeczywistym. To pole wyboru jest domyślnie wyłączone, czyli używana jest funkcja podglądu w czasie rzeczywistym.

Podgląd stron w widoku aktywnym

Różnica między widokiem aktywnym a zwykłym widokiem projektowania 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:

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. Jednak kod źródłowy, który można wyświetlić w przeglądarce, ma charakter statyczny. Natomiast widok kodu aktywnego jest generowany dynamicznie i aktualizowany w wyniku interakcji ze stroną w widoku aktywnym.

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 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.