Edytowanie w widoku aktywnym

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.

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.

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.

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

Szybki inspektor właściwości

Szybki inspektor właściwości 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.

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

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

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

• 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 aktualnie zaznaczonego elementu strony, takiego jak tekst lub wstawiony obiekt. Zawartość Inspektora właściwości widoku aktywnego zależy od zaznaczonego elementu.

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:

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

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 ustawionych atrybutów 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ć. Jeśli pracujesz w trybie Monitor elementu, naciśnij klawisz Enter, aby edytować tekst.

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

Punkt wstawiania zostanie umieszczony w miejscu kliknięcia. 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.

 Funkcja automatycznej synchronizacji umożliwia automatyczne uzgadnianie zmian wprowadzonych w widoku aktywnym z widokiem Kod. 

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

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.

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.

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

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:

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. 

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.

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

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.

Przechodzenie między selektorami

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

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

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

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.
• Siatki CSS są obsługiwane w widoku aktywnym tylko w wersji Dreamweaver 2019 i nowszych.