Środowisko programistyczne w programie Dreamweaver

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.

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

• Widok Kod: Uporządkowany, minimalistyczny układ, który umożliwia pracę wyłącznie nad kodem, bez niepotrzebnych paneli i okien. Więcej informacji: Wyświetlanie kodu w oknie Dokument.
• Widok podzielony: W tym widoku wyświetlany jest zarówno kod, jak i widok aktywny lub widok projektu. Pozwala to obserwować efekty zmian wprowadzanych w kodzie. Więcej informacji: Jednoczesna edycja kodu i strony w oknie Dokument — widok podzielony.

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

Jednoczesne kodowanie i edycja strony w oknie Dokument — Widok Podziel

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.

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:

• Ustawianie preferencji PHP
• Podpowiedzi do kodu PHP

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

• Migracja z wersji PHP 5.6.x do PHP 7.0.x: http://php.net/manual/en/migration70.php
• Migracja z wersji PHP 7.0.x do PHP 7.1: http://php.net/manual/en/migration71.php
• Więcej informacji o wersji PHP 7.1: http://php.net/releases/7_1_0.php

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

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.