Podręcznik użytkownika Anuluj

Środowisko programistyczne w programie Dreamweaver

 

 

Informacje dotyczące korzystania ze środowiska programistycznego w programie Dreamweaver w celu przyspieszenia programowania.

Jeśli chcesz pracować z kodem w programie Dreamweaver, możesz wybrać przestrzeń roboczą Programista. W tej przestrzeni roboczej domyślnie wyświetlany jest widok Kod, a po lewej stronie ekranu zadokowane są tylko panele Pliki i Urywki.

Jeśli potrzebne są dodatkowe funkcje, kliknij opcję Okno, a następnie wybierz odpowiedni panel.

Uwaga:

Jeśli gotowe przestrzenie robocze nie spełniają wszystkich wymagań, można dostosować własny układ przestrzeni roboczej. Otwórz panele i zadokuj je w pożądanych miejscach, a następnie zapisz przestrzeń roboczą jako przestrzeń niestandardową. Więcej informacji: Tworzenie własnych przestrzeni roboczych.

Praca z kodem w programie Dreamweaver

Program Dreamweaver udostępnia wiele metod pracy z kodem. Dostępne są następujące opcje:

Do przechodzenia pomiędzy poszczególnymi widokami służą przyciski Kod, Podziel oraz Projekt/Aktywny, umieszczone w górnej części przestrzeni roboczej.

Można również skorzystać z panelu Inspektor kodu, aby wyświetlić kod HTML w ruchomym okienku. Inspektor kodu umożliwia wyświetlanie projektu serwisu WWW oraz jego kodu bez potrzeby dzielenia widoku na pół. Więcej informacji: Wyświetlanie kodu w osobnym okienku za pomocą Inspektora kodu.

Wyświetlanie kodu w oknie Dokument — widok Kod

Wybierz polecenie Widok > Kod.

Jednoczesne kodowanie i edycja strony w oknie Dokument — Widok Podziel

  1. Wybierz polecenie Widok > Kod i Projekt.

    Kod pojawia się w górnym panelu, a strona w dolnym.

  2. Aby wyświetlić stronę na górze, wybierz polecenie Widok Projekt na wierzchu z menu Opcje wyświetlania na pasku narzędziowym Dokument.
  3. Aby dopasować wielkość paneli w oknie Dokument, przesuń pasek dzielenia w wybrane położenie. Pasek dzielenia znajduje się pomiędzy dwoma panelami.

    Widok Kod jest aktualizowany automatycznie po wprowadzeniu zmian w widoku Projekt. Po wprowadzeniu zmian w widoku Kod należy ręcznie uaktualnić dokument w widoku Projekt, klikając w widoku Projekt lub naciskając klawisz F5.

Wyświetlanie kodu w osobnym okienku za pomocą Inspektora kodu

Inspektor kodu pozwala pracować w osobnym oknie kodowania w taki sam sposób jak się pracuje w oknie Kod.

  1. Wybierz polecenie Okno > Inspektor kodu. Pasek narzędziowy zawiera następujące opcje:

    Zarządzanie plikami

    Wysyła lub pobiera plik.

    Podgląd/Debugowanie w przeglądarce

    Umożliwia wyświetlenie podglądu lub debugowanie dokumentu w przeglądarce internetowej.

    Odśwież widok Projekt

    Uaktualnia dokument w widoku Projekt tak, aby odzwierciedlał zmiany wykonane w kodzie. Zmiany, których dokonano w kodzie, nie pojawiają się automatycznie w widoku Projekt, zanim nie podejmie się określonych działań, takich jak zapisanie pliku lub kliknięcie tego przycisku.

    Nawigacja w kodzie

    Pozwala przesuwać się szybko po kodzie. Zobacz Przechodzenie do funkcji JavaScript lub VBScript .

    Opcje widoku

    Pozwala ustalić jak będzie wyświetlany kod. Zobacz Ustawianie kolorowania kodu.

Przyspieszenie programowania w programie Dreamweaver

Widok Kod w programie Dreamweaver oferuje funkcje ułatwiające kodowanie. Projektanci mogą dzięki temu rozpocząć pracę nad tworzeniem stron w widoku Kod, a doświadczeni programiści mają do dyspozycji funkcje wizualne upraszczające pracę, redukujące liczbę błędów i poprawiające przejrzystość, takie jak automatyczne wcięcia, kolorowanie kodu i możliwość zmiany rozmiaru czcionek.

Oto kilka funkcji oferowanych przez program Dreamweaver.

Podpowiedzi i uzupełnianie kodu

Funkcja podpowiedzi (wskazówek) lub uzupełniania kodu umożliwia wybieranie znaczników, atrybutów i stylów CSS z wyskakującego menu podczas wpisywania kodu. Dzięki automatycznemu uzupełnianiu kodu można programować serwis szybciej i uniknąć części błędów.

Oto przykład uzupełniania kodu HTML. 

Po wpisaniu znaku „<” program Dreamweaver otworzy wyskakujące menu ze wszystkimi dostępnymi znacznikami HTML. W miarę wpisywania kolejnych liter nazwy znacznika program Dreamweaver automatycznie uaktualnia opcje HTML dostępne w menu i umożliwia wybranie właściwego znacznika. Po naciśnięciu klawisza Enter program Dreamweaver automatycznie wstawia znacznik. Następnie wyświetlane jest kolejne wyskakujące menu, które zawiera wszystkie właściwości dostępne dla tego znacznika.

Takie podpowiedzi są również dostępne do kodu CSS, JavaScript i PHP (w wersji 5.6 i 7.1). 

Więcej informacji: Podpowiedzi i uzupełnianie kodu.

Obsługa wersji PHP 5.6 i 7.1

Program Dreamweaver obsługuje wersje PHP 5.6 i 7.1. 

Pliki PHP serwisu można skompilować w wersji PHP 5.6 lub 7.1. Wersję tę wybiera się w oknie dialogowym Konfiguracja serwisu (dla poszczególnych serwisów) lub w preferencjach aplikacji (ten wybór będzie obowiązywać we wszystkich plikach PHP zapisywanych poza serwisami programu Dreamweaver). Program Dreamweaver ustawi następnie podpowiedzi do kodu i opcje lintingu odpowiednio do wybranej wersji PHP.

W przypadku nowych serwisów w programie Dreamweaver domyślna wersja kompilatora PHP jest ustawiana zgodnie z opcjami wybranymi w oknie Edycja > Preferencje > PHP.

Więcej informacji o obsłudze kodu PHP w programie Dreamweaver:

Ogólne informacje na temat wersji PHP 5.6 i 7.1 można znaleźć w następujących zasobach:

Podpowiedzi do kodu obiektów JavaScript

Program Dreamweaver obsługuje podpowiedzi do kodu obiektowego w języku JavaScript, udostępniając podpowiedzi dla podstawowych obiektów JavaScript, takich jak tablice, daty, liczby i łańcuchy. 

Ponadto program monitoruje funkcje JavaScript tworzone przez użytkownika i podaje podpowiedzi do kodu zawierające nazwy takich funkcji.

Więcej informacji: Podpowiedzi i uzupełnianie kodu.

Refaktoryzacja kodu JavaScript

Dreamweaver obsługuje refaktoryzację kodu. Refaktoryzacja kodu to proces polegający na przebudowie istniejącego kodu komputerowego bez zmiany jego zewnętrznego zachowania. Kod staje się bardziej czytelny i łatwiejszy do zrozumienia. Debugowanie kodu oszczędza czas ze względu na użycie małych funkcji i prawidłową podmianę. Dzięki refaktoryzacji JavaScript możesz zmieniać nazwy funkcji i zmiennych ze świadomością ich zasięgu.

Więcej informacji: Pisanie i edycja kodu

Kolorowanie kodu w plikach różnego typu

Dreamweaver obsługuje funkcje kolorowania kodu dla języków HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML oraz YAML.

Obsługa wielu kursorów do wykonywania powtarzalnych zadań

Pisząc wiele linii kodu jednocześnie, można szybko wykonywać takie zadania, jak tworzenie punktowanej listy, aktualizowanie serii łańcuchów tekstu oraz wprowadzanie wielu zmian edycyjnych naraz.

Ta funkcja znacznie zwiększa produktywność, ponieważ nie trzeba wielokrotnie wpisywać tego samego kodu. Funkcja wielu kursorów robi to automatycznie.

Edytując kod, można:

  • dodać wiele kursorów, umożliwiających wstawianie nowej zawartości w wielu miejscach,
  • zaznaczać tekst w wielu miejscach, aby stosować te same zmiany edycyjne w różnych częściach dokumentu.

Więcej informacji: Dodawanie wielu kursorów lub wielu zaznaczeń.

Szybkie edytowanie kodu w plikach powiązanych

Aby szybko wprowadzić zmiany w kodzie, umieść kursor w odpowiednich urywkach kodu i skorzystaj z menu kontekstowego lub naciśnij klawisze Ctrl-E (Windows) lub Cmd-E (Mac) w celu otwarcia opcji Szybka edycja.

Program Dreamweaver wyświetli w wierszu kontekstowe opcje i narzędzia edycji kodu.

Przykład zastosowania

Rozważmy następujący przykład:

Edytując plik HTML, zauważasz w widoku aktywnym nieprawidłowo wyświetlany fragment. Przechodzisz więc do widoku Kod i stwierdzasz, że do usunięcia tego problemu niezbędna jest edycja innego, powiązanego pliku (na przykład pliku CSS). 

Zamiast przechodzić do innej karty, kliknij odpowiedni kod prawym przyciskiem myszy i wybierz opcję Szybka edycja albo skorzystaj ze skrótu klawiszowego. Program Dreamweaver otworzy odpowiednią sekcję powiązanego kodu CSS bezpośrednio w pliku HTML.

Pozwala to edytować kod w pliku CSS bez potrzeby przechodzenia do niego lub zmiany karty. Wprowadzone zmiany są automatycznie odzwierciedlane w pliku CSS.

Więcej informacji: Szybka edycja.

Kontekstowa dokumentacja CSS

Funkcja Podręczna dokumentacja udostępnia dokumentację właściwości CSS bezpośrednio w widoku Kod.

Nie trzeba już opuszczać programu Dreamweaver i otwierać zewnętrznej strony WWW, aby uzyskać informacje o właściwościach CSS. Aby otworzyć podręczną dokumentację, naciśnij klawisze Ctrl+K (Windows) lub Cmd+K (Mac).

Więcej informacji: Pomoc do właściwości CSS w programie Dreamweaver — funkcja Podręczna dokumentacja.

Obsługa skrótów Emmet w standardowej konfiguracji programu

Emmet to wtyczka umożliwiająca szybkie pisanie i generowanie kodu HTML i CSS.

Program Dreamweaver zawiera już gotową wtyczkę Emmet, która umożliwia korzystanie z tych skrótów bez konieczności instalowania wtyczki.

Skróty Emmet można stosować w widoku Kod lub w Inspektorze kodu. Naciśnięcie klawisza Tab powoduje rozwinięcie skrótu do postaci kodu HTML lub CSS.

Skróty HTML są rozwijane na stronach HTML i PHP.

Skróty CSS są rozwijane na stronach CSS, LESS, Sass i SCSS lub wewnątrz znacznika STYLE na stronie HTML.

Więcej informacji: Używanie pakietu narzędzi Emmet w połączeniu z programem Dreamweaver.

Zwijanie kodu

Program Dreamweaver umożliwia zwijanie sekcji kodu, co pozwala skupić się na jego edytowanych fragmentach. 

Kod można zwijać według znaczników lub nawiasów albo na podstawie zaznaczenia. 

Więcej informacji: Zwijanie i rozwijanie kodu.

Walidacja kodu

Program Dreamweaver oferuje rozbudowane możliwości lintingu, czyli wykrywania i usuwania błędów w kodzie. 

Proces ten polega na analizie kodu i oznaczaniu potencjalnych błędów lub miejsc „podejrzanych”. W programie Dreamweaver funkcja lintingu może na przykład oznaczać błędy składni HTML, błędy parsowania w kodzie CSS lub ostrzeżenia w plikach JavaScript.

Więcej informacji na temat lintingu w programie Dreamweaver: Linting kodu.

Jeśli pracujesz nad kodem PHP, a dokument zawiera błędy, program Dreamweaver wyświetli błędny kod w widoku Projekt (jeśli jest otwarty) i wyróżni go w widoku Kod (w zależności od ustawień preferencji).

Jeżeli zaznaczysz kod w jednym z tych widoków, Inspektor właściwości poinformuje, dlaczego jest on nieprawidłowy i jak go poprawić.

Uwaga:

Opcja podświetlania nieprawidłowego kodu w widoku Kod jest domyślnie wyłączona. Aby ją włączyć, należy przejść do widoku Kod (Widok > Kod), a następnie wybrać polecenie Widok > Opcje widoku Kod > Podświetl nieprawidłowy kod.

Preferencje automatycznego poprawiania różnych rodzajów błędnego kodu można określić w momencie otwierania dokumentu.

Więcej informacji: Ustawianie preferencji kodowania.

Obsługa preprocesorów CSS

Program Dreamweaver obsługuje teraz popularne preprocesory CSS, takie jak SASS, Less i SCSS. Dostępne są wszystkie funkcje kolorowania kodu, podpowiedzi i kompilacji. 

Preprocesory CSS przyspieszają pracę nad złożonymi serwisami, które mają skomplikowane arkusze stylów.

Więcej informacji: Używanie preprocesorów CSS w programie Dreamweaver.

Zapisywanie i wielokrotne wykorzystywanie urywków kodu

Często używane bloki kodu można zapisać w panelu Urywki. Tak zapisane urywki można następnie wstawiać na wielu stronach.

Urywki zapisane w panelu Urywki nie są specyficzne dla danego serwisu, można je więc wykorzystać w różnych serwisach.

Dzięki funkcji synchronizacji ustawień urywki kodu można również wykorzystywać na różnych urządzeniach i w innych wersjach programu Dreamweaver.

Więcej informacji: Wielokrotne używanie urywków kodu.

Podgląd w przeglądarce w czasie rzeczywistym

Podgląd efektów zmian wprowadzanych w kodzie można w czasie rzeczywistym wyświetlać w przeglądarce bez konieczności ręcznego odświeżania. Program Dreamweaver jest teraz połączony z przeglądarką WWW, dlatego wprowadzane zmiany są od razu widoczne w oknie przeglądarki bez konieczności ponownego wczytywania strony.

Więcej informacji: Podgląd w przeglądarce w czasie rzeczywistym.

Dostosowywanie skrótów klawiszowych

W programie Dreamweaver można używać własnych ulubionych skrótów klawiszowych. Jeśli chętnie korzystasz z określonych skrótów klawiszowych — na przykład Shift+Enter w celu przejścia do nowego wiersza lub Control+G w celu przejścia do określonej pozycji w kodzie — możesz je dodać do programu Dreamweaver za pomocą Edytora skrótów klawiszowych.

Niezbędne instrukcje znajdują się w części Dostosowywanie skrótów klawiszowych.

Domyślne otwieranie plików w widoku Kod

Kiedy otwierasz plik, który normalnie nie zawiera kodu HTML (na przykład plik JavaScript), otwiera się on w widoku Kod (lub Inspektorze kodu) zamiast w widoku Projekt. Możesz określić, jakie typy plików otwierają się w widoku Kod.

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
  2. Wybierz opcję Typy plików / edytory z listy Kategorie po lewej stronie.
  3. W polu „Otwórz w widoku Kod” wpisz rozszerzenia plików, które chcesz automatycznie otwierać w widoku Kod.

    Poszczególne rozszerzenia rozdzielaj spacjami. Można dodać dowolną liczbę rozszerzeń.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?