Informacje o projektowaniu, edytowaniu i wyświetlaniu podglądu stron WWW w widoku aktywnym, zmianie kolejności lub wstawianiu elementów, stosowaniu selektorów, edytowaniu atrybutów obrazu, wstawianiu, edytowaniu i formatowaniu tekstu bez potrzeby przechodzenia do widoku Kod.

Widok aktywny wykorzystuje mechanizm renderowania oparty na implementacji Chromium. Dzięki temu zawartość w programie Dreamweaver wygląda tak samo, jak w popularnych przeglądarkach WWW. Podczas projektowania strony można przejść do widoku aktywnego, aby szybko obejrzeć jej podgląd. Można również edytować elementy HTML bezpośrednio w widoku aktywnym, co pozwala uniknąć straty czasu przy przechodzeniu między różnymi widokami (np. Kod i Projekt).

Widok aktywny jest natychmiast odświeżany, odzwierciedlając zmiany wprowadzone na stronie.

Podczas edycji strony w widoku aktywnym można korzystać z następujących opcji:

  • Panel DOM (Okno > DOM): pokazuje strukturę HTML dokumentu oraz umożliwia kopiowanie i wklejanie, powielanie, usuwanie i reorganizowanie elementów w ramach tego widoku. Więcej informacji: Panel DOM.
  • Monitor elementu: wyświetlany nad elementem HTML zaznaczonym w widoku aktywnym. Pole Monitor elementu umożliwia przypisywanie klas i identyfikatorów do elementów HTML. Więcej informacji: Przypisywanie klas i identyfikatorów do elementów HTML.
  • Szybki inspektor właściwości: wyświetlany po kliknięciu ikony menu (≡) w polu Monitor elementu lub po zaznaczeniu tekstu. Za pomocą szybkiego inspektora właściwości można edytować atrybuty obrazu lub formatować tekst w widoku aktywnym. Więcej informacji: Szybki inspektor właściwości.
  • Inspektor właściwości widoku aktywnego: jest wyświetlany pod oknem dokumentu i umożliwia edytowanie różnych właściwości HTML i CSS w widoku aktywnym. Więcej informacji: Inspektor właściwości w widoku aktywnym.
  • Panel Wstaw (Okno > Wstaw): elementy z panelu można przeciągać bezpośrednio do widoku aktywnego. Więcej informacji: Wstawianie elementów bezpośrednio w widoku aktywnym.

Uwaga:

Jeśli strona zmienia się dynamicznie (z powodu skryptów) albo ma włączone meta-odświeżanie, zmiany wprowadzone w widoku aktywnym mogą zostać utracone.

Wskazówki:

  • Jeśli podczas edycji strony w widoku aktywnym zawartość zniknie, wyłącz i ponownie włącz widok aktywny.
  • Jeśli wprowadzane zmiany nie są widoczne na stronie, kliknij przycisk odświeżania w widoku aktywnym.

W widoku aktywnym nie można edytować zawartości, która jest dynamicznie renderowana przez bazy danych lub kod JavaScript, a także regionów nieedytowalnych w szablonach. Kliknięcie takiego elementu w widoku aktywnym spowoduje, że zostanie otoczony szarą ramką. Wskazuje ona, że edytowanie elementu nie jest możliwe.

Elementu o szarej krawędzi nie można edytować w widoku aktywnym.
Elementu o szarej krawędzi nie można edytować w widoku aktywnym.

Uwaga:

W menu głównym w widoku aktywnym będą dostępne tylko te opcje, które dotyczą zaznaczonego elementu. Opcje, które nie mają zastosowania, będą nieaktywne (szare).

Monitor elementu

Pole Monitor elementu umożliwia przypisywanie klas i identyfikatorów do elementów HTML bezpośrednio w widoku aktywnym. Monitor elementu podpowiada dostępne klasy i identyfikatory, ułatwiając szybkie przeglądanie i wybieranie odpowiednich opcji. 

Za pomocą okienka Monitor elementu można również formatować tabele. Kliknij odsyłacz, aby uzyskać dodatkowe informacje.

Przypisywanie klas i identyfikatorów do elementów HTML

Kliknij odpowiedni element w widoku aktywnym. Zostanie wyświetlone pole Monitor elementu, zawierające klasę i identyfikator obecnie przypisane do elementu.

W widoku aktywnym można również kliknąć element HTML w panelu DOM, aby wyświetlić pole Monitor elementu.

Pole Monitor elementu
Pole Monitor elementu

  • Aby usunąć przypisanie klasy lub identyfikatora z elementu HTML, kliknij ikonę X obok odpowiedniej klasy lub identyfikatora.
  • Aby zmienić klasę lub identyfikator przypisane do elementu HTML, kliknij wewnątrz pola. Zostanie wówczas wyświetlona lista dostępnych klas i identyfikatorów. Kliknij odpowiednią opcję.
  • Aby dodać klasę lub identyfikator do elementu, kliknij ikonę + i wpisz odpowiednią nazwę. Aby zapisać zmiany, kliknij przycisk „+” lub naciśnij klawisz Enter.

Następnie można zdefiniować selektor zawierający tę klasę lub identyfikator, korzystając z panelu Projektant CSS. Więcej informacji: Tworzenie układu strony za pomocą panelu Projektant CSS.

Uwaga:

W przypadku elementów z przejściem pole Monitor elementu nie przesuwa się wraz z elementem po aktywacji efektu przejścia. Jednak zmiany wprowadzane w polu Monitor elementu są stosowane, mimo że Monitor nie znajduje się w tym samym miejscu, co element z efektem przejścia. 

Szybki inspektor właściwości

Szybki inspektor właściwości dla obrazów

Szybki inspektor właściwości jest wyświetlany bezpośrednio nad elementami zaznaczonymi w widoku aktywnym. Za pomocą tego Inspektora właściwości można edytować atrybuty lub formatować tekst w widoku aktywnym.

Szybki inspektor właściwości wyświetlany bezpośrednio nad elementami w widoku aktywnym.
Szybki inspektor właściwości wyświetlany bezpośrednio nad elementami w widoku aktywnym.

Aby wyświetlić lub ukryć pole szybkiego inspektora właściwości, naciśnij klawisze Ctrl+Alt+H (Windows) lub CMD+Ctrl+H (Mac).

Uwaga:

Podczas korzystania z szybkiego inspektora właściwości w widoku aktywnym nie jest wyświetlana ikona nawigatora kodu.

W dokumentach Bootstrap panel Szybki inspektor właściwości zawiera ponadto opcje umożliwiające dostosowywanie obrazów.

Szybki inspektor właściwości obrazów w dokumentach Bootstrap
Szybki inspektor właściwości obrazów w dokumentach Bootstrap

  • Przycinanie do kształtu: umożliwia dostosowywanie obrazów przez przycięcie ich do kształtu koła, zaokrąglenie rogów lub przekształcenie w miniaturki.
  • Przekształcanie obrazu w reagujący: umożliwia nadanie obrazowi charakteru reagującego, tak aby dostosowywał się do różnych wymiarów ekranu.

Szybki inspektor właściwości dla tekstu

Szybki inspektor właściwości tekstu w widoku aktywnym umożliwia formatowanie tekstu, dodawanie wcięć i wstawianie hiperłączy w tekście. Szybki inspektor właściwości tekstu jest wyświetlany po kliknięciu ikony menu (≡) elementów tekstowych: h1–h6, pre, p.

Szybki inspektor właściwości dla tekstu
Szybki inspektor właściwości dla tekstu

  • Opcja formatu pozwala szybko zmienić znacznik elementu w jeden z następujących znaczników: h1–h6, p, pre. 
  • Opcja odsyłacza umożliwia przekształcenie elementu tekstowego w hiperłącze. 
  • Ikony Pogrubienie i Kursywa umożliwiają wstawienie znaczników <strong> oraz <em> w elemencie tekstowym.
  • Ikony wcięć ułatwiają dodawanie i usuwanie wcięć tekstu. Powoduje to odpowiednio dodanie lub usunięcie znacznika <blockquote> w kodzie.

W dokumentach Bootstrap panel Szybki inspektor właściwości tekstu umożliwia również wyrównywanie i przekształcanie elementów tekstowych.

  • Wyrównywanie: elementy tekstowe Bootstrap można wyrównywać do prawej lub do lewej, środkować lub justować, stosując do nich odpowiednie klasy.
  • Przekształcanie: wielkość liter elementu można zmienić na małe litery, wielkie litery albo pierwszą wielką literę (jak w zdaniu), stosując odpowiednie klasy.

Inspektor właściwości w widoku aktywnym

Inspektor właściwości w widoku aktywnym to tradycyjny panel Inspektor właściwości, znajdujący się pod oknem dokumentu.

Inspektor właściwości w widoku aktywnym umożliwia przeglądanie i edytowanie najczęściej używanych właściwości dla aktualnie zaznaczonego elementu strony, takiego jak tekst lub wstawiony obiekt. Zawartość Inspektora właściwości widoku aktywnego zależy od zaznaczonego elementu.

Uwaga:

Inspektor właściwości widoku aktywnego nie jest dostępny na stronach z elastyczną siatką.

Aby uzyskać pomoc dotyczącą konkretnego Inspektora właściwości, kliknij przycisk Pomoc w prawym górnym rogu tego Inspektora lub wybierz polecenie Pomoc z menu Opcje w Inspektorze właściwości. 

Poniżej podano listę elementów, które można edytować za pomocą Inspektora właściwości widoku aktywnego:

  • HTML
  • CSS
  • Obraz
  • Tabela
  • Obiekty multimedialne — tylko obiekty dźwiękowe HTML5 Audio oraz obiekty wideo HTML5 Video
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

Uwaga:

Właściwości interfejsu użytkownika jQuery i właściwości związane z szablonami nie są dostępne do edycji w Inspektorze właściwości widoku aktywnego.

Edytowanie atrybutów HTML

W widoku aktywnym można szybko dodawać, edytować i usuwać atrybuty HTML obrazu, wykonując te działania bezpośrednio w szybkim inspektorze właściwości.

Szybki inspektor właściwości dla obrazów pojawia się po kliknięciu ikony menu . W zależności od dostępnego miejsca, Inspektor właściwości może być wyświetlany po prawej lub lewej stronie obrazu, nad obrazem albo pod obrazem. Ponadto okienko Inspektora właściwości można przenosić w dowolne miejsce. 

Szybki inspektor właściwości do edytowania atrybutów
Szybki inspektor właściwości do edytowania atrybutów

Aby edytować atrybuty, kliknij ikonę menu (≡) w Szybkim inspektorze właściwości. Można zmienić źródło obrazu i inne atrybuty, takie jak title oraz alt. Efekty zmian są natychmiast widoczne. W taki sam sposób można również modyfikować szerokość (atrybut width) oraz wysokość (atrybut height) obrazu w widoku aktywnym.

Wprowadzone zmiany są zapisywane po wykonaniu jednej z następujących czynności:

  • kliknięciu w dowolnym miejscu poza Inspektorem właściwości,
  • naciśnięciu klawisza Enter,
  • naciśnięciu klawisza Tab w celu edycji innego atrybutu w Inspektorze właściwości,
  • zapisaniu pliku.

Gdy obrazy są ładowane dynamicznie, można użyć szybkiego inspektora właściwości w celu przejrzenia atrybutów ustawionych dla danego obrazu. 

Edytowanie tekstu bezpośrednio w widoku aktywnym

Elementy tekstowe można teraz edytować bezpośrednio w widoku aktywnym. Wystarczy dwukrotnie kliknąć element tekstowy, aby go edytować. Można również kliknąć element tekstowy, aby wyświetlić pole Monitor elementu, a następnie nacisnąć klawisz Enter.

Uwaga:

Naciśnięcie klawisza Enter po wejściu w tryb edycji przynosi różne efekty w zależności od tego, gdzie znajdował się uprzednio punkt wstawiania. Wprowadzane zmiany są podobne do efektów naciśnięcia klawisza Enter podczas edycji tekstu w widoku Projekt.

Pomarańczowe obramowanie wokół elementu tekstowego wskazuje, że został włączony tryb edycji. 

Pomarańczowe obramowanie wokół elementu wskazuje na tryb edycji
Pomarańczowe obramowanie wokół elementu wskazuje na tryb edycji

Punkt wstawiania jest umieszczany w tym miejscu, w którym nastąpiło dwukrotne kliknięcie. Aby zaznaczyć cały tekst w elemencie tekstowym, kliknij trzykrotnie ten element.

Podczas edycji tekstu w widoku aktywnym można korzystać z funkcji wycinania, kopiowania i wklejania oraz cofania i ponawiania. Tekst jest wklejany bez formatowania.

W poniższej tabeli przedstawiono listę obsługiwanych i nieobsługiwanych opcji podczas edycji tekstu w widoku aktywnym:

Obsługiwane Nieobsługiwane
Wszystkie elementy HTML, które mogą zawierać tekst

Edytowanie nieprawidłowych lub zerwanych znaczników. Jeśli kod HTML zawiera nieprawidłowe lub zerwane znaczniki, to edycja takich znaczników zależy od sposobu, w jaki interpretują je przeglądarki:

  • Jeśli przeglądarki korygują kod HTML w taki sposób, że zamykają zerwany znacznik, to edytowanie takich znaczników w widoku aktywnym może być możliwe.
  • Natomiast jeśli przeglądarki podczas interpretacji strony dodają nowy znacznik, wówczas nie będzie możliwe edytowanie zerwanych lub nieprawidłowych znaczników.

 

Pliki HTML pochodzące z szablonów w widoku aktywnym
Edytowanie stron jQuery
Znaczniki strukturalne zawierające elementy kodowane w wierszu. Są one prezentowane razem, do edycji w pojedynczym polu.
Edytowanie znaczników, które mają zarówno zawartość statyczną, jak i dynamiczną. Można edytować selektory takich znaczników, ale bezpośrednia edycja tekstu w widoku aktywnym nie jest możliwa. Dwukrotne kliknięcie takiego elementu w widoku aktywnym spowoduje, że zostanie otoczony szarą ramką. Wskazuje ona, że edytowanie tekstu nie jest obsługiwane.
Statyczny tekst na dynamicznych stronach
 
Strony z układem elastycznej siatki w widoku aktywnym bez siatek
 
Tekst zawierający encje  

Formatowanie tekstu

Format tekstu i hiperłączy można teraz edytować bezpośrednio w widoku aktywnym. Aby wyświetlić opcje formatowania tekstu, zaznacz słowo lub frazę. Bezpośrednio nad zaznaczonym tekstem zostanie wyświetlony szybki inspektor właściwości, zawierający opcje formatowania.

Szybki inspektor właściwości do formatowania tekstu
Szybki inspektor właściwości do formatowania tekstu

Wstawianie elementów bezpośrednio w widoku aktywnym

Elementy z panelu Wstaw można przeciągać bezpośrednio na odpowiednie miejsce w dokumencie w widoku aktywnym. Pomoce wizualne w widoku aktywnym (takie jak aktywne linie pomocnicze i ikony panelu DOM) ułatwiają rozmieszczanie przeciąganych elementów względem wskazanego elementu.

Linie pomocnicze (zielone) są wyświetlane po zatrzymaniu kursora myszy nad elementami strony przed upuszczeniem przeciąganego elementu. Wskazują one miejsca, w których można wstawić element. Linie pomocnicze mogą być wyświetlane nad i pod elementem albo po jego lewej i prawej stronie.

  • Linie nad i pod elementem — wyświetlane, gdy kursor wskazuje dowolne elementy lub znaczniki z wyjątkiem znaczników w wierszu. Gdy kursor myszy wskazuje górną połowę elementu, linie są wyświetlane nad tym elementem. Natomiast gdy kursor wskazuje dolną połowę elementu, linie są wyświetlane pod tym elementem.
Aktywne linie pomocnicze na dole i na górze
Aktywne linie pomocnicze nad i pod wskazanymi elementami

  • Linie po lewej i prawej stronie elementu — wyświetlane po wskazaniu znaczników w wierszu, np. <a> lub <span>, albo znaczników z ustawioną właściwością „float”.
Aktywne linie pomocnicze po lewej i prawej stronie wskazanych elementów
Aktywne linie pomocnicze po lewej i prawej stronie wskazanych elementów

Zatrzymanie na chwilę kursora przed upuszczeniem elementu powoduje wyświetlenie ikony panelu DOM (</>). Wskazanie tej ikony umożliwia otwarcie panelu DOM i wstawienie elementu w odpowiednim miejscu w strukturze DOM dokumentu.

Aby wstawiać elementy bezpośrednio w widoku aktywnym, wykonaj następujące czynności:

  1. Przejdź do widoku aktywnego.

  2. Wybierz odpowiedni element w panelu Wstaw i przeciągnij go do dokumentu. Można również po prostu kliknąć wybrany element w panelu Wstaw.

    Wskazówka: Jeśli nie można przeciągnąć elementu z panelu Wstaw na stronę, zresetuj komputer i spróbuj ponownie.

  3. Upuść element nad lub pod innym elementem albo po jego lewej lub prawej stronie, posługując się aktywnymi liniami pomocniczymi. Aby precyzyjnie umieścić element w strukturze dokumentu, kliknij ikonę </> i skorzystaj z panelu DOM.

    Element zostanie wstawiony na stronie i wyróżniony.

Ramka zaznaczenia

Ramka zaznaczenia umożliwia łatwe zaznaczanie bloku tekstu przez kliknięcie i przeciągnięcie wewnątrz znacznika w widoku aktywnym. W wersjach programu Dreamweaver wcześniejszych niż 2014.1 kliknięcie i przeciągnięcie bloku tekstu powodowało, że przenoszony był cały element. 

Uwaga:

Funkcje ramki zaznaczenia w widoku aktywnym są ograniczone tylko do operacji obsługiwanych przez przeglądarki. 

Zaznaczanie, a następnie przeciąganie i upuszczanie elementów

Aby przenieść element widoku aktywnym, kliknij nazwę znacznika, a następnie przeciągnij zawartość na pożądane miejsce. Po kliknięciu nazwy znacznika pojawi się ikona rączki, wskazująca, że można zacząć przeciągać znacznik. Gdy rozpoczniesz przeciąganie znacznika, pojawią się linie pomocnicze ułatwiające precyzyjne umieszczenie go we właściwym miejscu.   

Klikając nazwę znacznika w widoku aktywnym, można zaznaczyć całą zawartość tego znacznika w widoku Kod.

Kliknij nazwę znacznika w widoku aktywnym, aby zaznaczyć całą zawartość tego znacznika w widoku Kod
Kliknij nazwę znacznika w widoku aktywnym, aby zaznaczyć całą zawartość tego znacznika w widoku Kod

Inspekcja kodu w widoku aktywnym

Tryb inspekcji w połączeniu z widokiem aktywnym umożliwia szybkie identyfikowanie elementów HTML i związanych z nimi stylów CSS. Przy włączonym trybie inspekcji można umieścić kursor myszy nad blokowym elementami na stronie, aby wyświetlić ich atrybuty modelu blokowego CSS.

Oprócz wyświetlania graficznej reprezentacji modelu blokowego w trybie inspekcji można również wykorzystać możliwości panelu Projektant CSS, umieszczając kursor myszy nad elementami w widoku aktywnym.

Gdy panel Projektant CSS jest otwarty w trybie Bieżący, umieszczenie kursora myszy nad elementem na stronie spowoduje automatyczne uaktualnienie reguł i właściwości w panelu. Pozwala to sprawdzić reguły i właściwości danego elementu.

Uaktualniane są również wszystkie inne panele i widoki związane z elementem, nad którym znajduje się kursor myszy (np. widok Kod, selektor znaczników, Inspektor właściwości itp.).

  1. W oknie z otwartym dokumentem wybierz polecenie Widok > Inspekcja.

    Uwaga:

    Jeśli widok aktywny nie był włączony, to tryb inspekcji automatycznie go uaktywni.

  2. Umieść kursor myszy nad elementami na stronie, aby wyświetlić model blokowy CSS. Tryb Inspekcja podświetla różnymi kolorami krawędzie, marginesy, odstęp wewnętrzny i zawartość.

  3. (Opcjonalnie) Naciśnij klawisz strzałki w lewo na klawiaturze komputera, aby podświetlić element macierzysty podświetlonego w danym momencie elementu. Naciśnij klawisz strzałki w prawo, aby powrócić do podświetlania elementu potomnego.

  4. (Opcjonalnie) Kliknij element, aby zablokować wybór podświetlenia.

    Uwaga:

    Kliknięcie elementu i zablokowanie wyboru podświetlenia powoduje wyłączenie trybu inspekcji.

Nawigacja za pomocą klawiatury w widoku aktywnym

Aby przyspieszyć proces edycyjny, można przechodzić między elementami strony lub selektorami w oknie Monitor elementu za pomocą klawiatury. 

Przechodzenie między elementami strony

Klawisze strzałki w górę i w dół ułatwiają przechodzenie między elementami strony w widoku aktywnym. Kolejność przechodzenia jest oparta na strukturze DOM dokumentu.

Nawigacja w widoku aktywnym za pomocą klawiatury ułatwia dostęp do elementów zagnieżdżonych i elementów otoczonych innymi elementami.

Po przejściu do elementu za pomocą klawisza strzałki w górę lub w dół wyświetlane jest pole Monitor elementu. Umożliwia ono przechodzenie do selektorów danego elementu. Można również nacisnąć klawisz Enter, aby edytować tekst bezpośrednio w widoku aktywnym.

Najpierw uaktywniony jest obraz
W tym przykładzie najpierw uaktywniony jest obraz. Po naciśnięciu klawisza strzałki w dół zostanie zaznaczony akapit pod obrazem (co widać na następnej ilustracji).

Zaznaczony jest pogrubiony tekst
Zaznaczony jest pogrubiony tekst.

Tutaj zaznaczony jest akapit
Tutaj zaznaczony jest akapit. Po ponownym naciśnięciu klawisza strzałki w dół zostanie zaznaczony następny element w strukturze DOM, czyli pogrubiony tekst (co widać na następnej ilustracji).


Przechodzenie między selektorami

Naciśnij klawisz Tab, aby przechodzić między selektorami w oknie Monitor elementu. Uaktywniony selektor jest otaczany pomarańczowym obramowaniem:

Uaktywniony selektor jest wyróżniany
Uaktywniony selektor jest wyróżniany pomarańczowym obramowaniem.

Naciśnięcie klawisza Tab w ostatnim zastosowanym selektorze spowoduje otwarcie pola tekstowego umożliwiającego dodanie kolejnego selektora.  

Uwaga:

Za pomocą klawiszy Ctrl+[ lub Cmd+[ można zaznaczyć element nadrzędny; klawisze Ctrl+] lub Cmd+] umożliwiają zaznaczenie elementu potomnego.

Wyłączanie możliwości edytowania w widoku aktywnym

Jeśli wolisz nie używać pola Monitor elementu i szybkiego inspektora właściwości w widoku aktywnym, możesz wyłączyć te funkcje.

Skróty klawiszowe:

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H

  1. Przejdź do widoku aktywnego i wybierz polecenie Widok > Opcje widoku aktywnego.

  2. Wybierz polecenie Ukryj wyśw. wid. aktywnego.

Nieobsługiwane scenariusze

  • W widoku aktywnym nie można edytować szablonów programu Dreamweaver.
  • Znaczniki, które mają zarówno zawartość statyczną, jak i dynamiczną. Można edytować selektory takich znaczników, ale edycja tekstu w widoku aktywnym nie jest możliwa. Dwukrotne kliknięcie takiego elementu w widoku aktywnym spowoduje, że zostanie otoczony szarą ramką. Wskazuje ona, że edytowanie tekstu nie jest obsługiwane.
  • Znaczniki, do których zastosowano pseudo-selektory. Próba edycji takich elementów w widoku aktywnym może mieć nieoczekiwane skutki.

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