Podręcznik użytkownika Anuluj

Edytowanie w widoku aktywnym

  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

 

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

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

Obsługiwane

Nieobsługiwane

Wszystkie elementy HTML, które mogą zawierać tekst i znaczniki semantyczne

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

 

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.

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

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.

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

Zaloguj się na swoje konto