Podpowiedzi i uzupełnianie kodu

Inteligentne funkcje uzupełnianie kodu oraz podpowiedzi do kodu w programie Dreamweaver umożliwiają szybkie wstawianie i edytowanie kodu, redukując liczbę literówek i innych typowych błędów.

Za pomocą tej funkcji można ponadto wyświetlić:

• dostępne atrybuty znacznika,
• dostępne parametry funkcji,
• dostępne metody dla danego obiektu.

Program Dreamweaver obsługuje podpowiedzi do kodu tworzonego w następujących językach i przy użyciu następujących technologii:

• HTML
• CSS
• JavaScript 
• PHP

Poniżej podano więcej informacji o sposobach działania funkcji podpowiedzi i uzupełniania kodu w tych językach.

Włączanie podpowiedzi do kodu

Aby włączyć podpowiedzi do kodu, wybierz polecenie Edycja > Preferencje > Wskazówki do kodu, a następnie wybierz opcję Włącz wskazówki do kodu.  Aby wyłączyć podpowiedzi, usuń zaznaczenie z opcji Włącz wskazówki do kodu.

Aby włączyć automatyczne wstawianie nawiasów klamrowych i cudzysłowów, zaznacz odpowiednio opcję Automatycznie wstawiaj klamry lub Automatycznie wstawiaj cudzysłowy.

Aby włączyć opisy w podpowiedziach do kodu, zaznacz opcję Włącz podpowiedzi opisowe. Spowoduje to wyświetlanie opisów w podpowiedziach do kodu.

Podpowiedzi do kodu HTML

W przypadku kodu HTML dostępne są następujące rodzaje podpowiedzi:

• podpowiedzi do znaczników,
• podpowiedzi do nazw atrybutów,
• podpowiedzi do wartości atrybutów.

Podpowiedzi do znaczników

Naciśnij klawisz < klawisza na klawiaturze zacznij wpisywać kod. Podczas wpisywania program Dreamweaver będzie wyświetlać prawidłowe znaczniki HTML. Gdy w menu pojawi się wpisywany przez Ciebie tekst, przewiń do niego i naciśnij klawisz Enter lub Return, aby zakończyć wstawianie.

Przykład: Po wpisaniu znaku < jest wyświetlane wyskakujące menu z listą nazw znaczników. Zamiast wpisywać pozostałą część nazwy znacznika, można ją wybrać z menu i w ten sposób wstawić do dokumentu.

Podpowiedzi do znaczników HTML obejmują także krótki opis znacznika (jeśli ma to zastosowanie).

Podpowiedzi do nazw atrybutów

Podczas wpisywania kodu program Dreamweaver wyświetla odpowiednie atrybuty znaczników. Wpisz nazwę znacznika, a następnie naciśnij klawisz spacji, aby wyświetlić nazwy prawidłowych atrybutów, których można użyć.

Podpowiedzi do wartości atrybutów

Tekst podpowiedzi do wartości atrybutu może mieć charakter statyczny lub dynamiczny (co oznacza, że podpowiedzi wskazują wartości oparte na zawartości plików powiązanych).

Większość podpowiedzi do wartości atrybutów to podpowiedzi statyczne. Przykładem może być wartość atrybutu „target”, który sam w sobie jest statyczny, zatem podpowiedzi do jego wartości także będą statyczne. 

Program Dreamweaver podaje dynamiczne podpowiedzi do kodu w przypadku takich wartości atrybutów, które tego wymagają. Są to na przykład atrybuty id, target, src, href oraz class.

Oto kilka przykładów dynamicznych podpowiedzi do kodu. 

Dynamiczne podpowiedzi do kodu dla atrybutu src

W tym przykładzie po wpisaniu atrybutu src zostanie wyświetlona lista poprawnych wartości tego atrybutu. Jeśli wybierzesz obraz, program Dreamweaver wyświetli istniejące, prawidłowe obrazy zlokalizowane w folderze Images, pozwalając przewinąć listę i wybrać odpowiedni z nich.

Jeśli masz zasoby w bibliotekach CC, to po wpisaniu atrybutu src zostaną wyświetlone również podpowiedzi oparte na tych zasobach. Zasoby z bibliotek CC są oznaczane ikoną chmury.

Jeśli wybierze się zasób z biblioteki CC, zostanie wyświetlone wyskakujące menu, które umożliwia zmianę próbkowania rozmiaru obrazu oraz jego formatu.

Dynamiczne podpowiedzi do kodu dla atrybutu href

Po wpisaniu atrybutu href program Dreamweaver wyświetli listę plików w folderze, umożliwiając ich przeglądanie i wybranie właściwego pliku, do którego ma prowadzić odsyłacz.

Dynamiczne podpowiedzi do kodu dla atrybutów id oraz style

Jeśli w plikach CSS zostały zdefiniowane identyfikator („id”), to po wpisaniu atrybutu id w plikach HTML program Dreamweaver wyświetli listę wszystkich dostępnych identyfikatorów.

Jeśli w plikach CSS zostały zdefiniowane style, to po wpisaniu atrybutu style w plikach HTML program Dreamweaver również wyświetli listę wszystkich dostępnych stylów.

Podpowiedzi do kodu CSS

Dostępne są podpowiedzi do następujących typów kodu CSS:

• reguł (@),
• właściwości,
• pseudoselektorów i pseudoelementów,
• składni skróconej.

Oprócz podpowiedzi do kodu udostępniane są także wskazówki do właściwości CSS.

Podpowiedzi do reguł „@” w kodzie CSS

Program Dreamweaver wyświetla podpowiedzi do wszystkich reguł „@” wraz z opisem danej reguły.

Podpowiedzi do właściwości CSS

Podczas wpisywania właściwości CSS, po wpisaniu dwukropka zostaną wyświetlone podpowiedzi ułatwiające wybranie poprawnej wartości.

W poniższym przykładzie kodu po wpisaniu tekstu font-family: zostaną wyświetlone poprawne zbiory czcionek.

Można wybrać jeden z tych zbiorów lub otworzyć za pomocą podpowiedzi okno dialogowe Zarządzaj czcionkami i ustawić preferowane czcionki.

Kolejnym przykładem przydatnych podpowiedzi do kodu jest praca z kolorami w stylach CSS. Po wpisaniu dowolnej właściwości związanej z kolorem (na przykład border-color lub background-color) i zakończeniu jej dwukropkiem wyświetlane są podpowiedzi z listą kolorów. Można wybrać jeden z kolorów z tej listy albo z poziomu podpowiedzi otworzyć okno Próbnik kolorów i ustawić preferowany kolor.

Jeśli masz próbki kolorów zapisane w bibliotekach CC, podpowiedzi do kodu wyświetlą również te próbki.

Podpowiedzi do pseudoselektorów i pseudoelementów

Pseudoselektor można dodać do selektora CSS, aby zdefiniować określony stan elementu. Na przykład zastosowanie pseudoselektora :hover powoduje, że zdefiniowany styl będzie wyświetlany wówczas, gdy użytkownik wskaże myszą element określony przez selektor.

Po wpisaniu znaku „:” program Dreamweaver wyświetli listę poprawnych pseudoselektorów (pod warunkiem, że kursor znajduje się w odpowiednim kontekście).

Po wpisaniu znaku „::” program Dreamweaver wyświetli listę poprawnych pseudoelementów, umożliwiających nadanie stylu określonym częściom elementu (pod warunkiem, że kursor znajduje się w odpowiednim kontekście).

Podpowiedzi do skróconej składni CSS

Skrócona składnia właściwości CSS umożliwia jednoczesne określanie wartości wielu właściwości. Przykładami składni skróconej CSS mogą być właściwości background oraz font.

W poniższym przykładzie widać, że po wpisaniu właściwości CSS o składni skróconej (np. właściwości background) i wstawieniu za nią spacji program Dreamweaver wyświetli następujące informacje:

• odpowiednie wartości właściwości, uporządkowane według istotności,
• wartości obowiązkowe, które muszą zostać podane (na przykład w przypadku użycia właściwości font konieczne jest podanie wartości font-size oraz font-family),
• rozszerzenie tej właściwości dla konkretnej przeglądarki.

Podczas wypełniania właściwości CSS o składni skróconej podpowiedzi podają także wpisane już wartości właściwości.

Wskazówki do kodu CSS

W przypadku niektórych właściwości CSS (takich jak box-shadow lub text-shadow) program Dreamweaver wyświetla wskazówki dotyczące wartości, które powinny wystąpić za właściwością oraz oznacza gwiazdką wartości wymagane. 

Można również sprawdzić, w jaki sposób przeglądarka interpretuje dany kod CSS.

Podpowiedzi do kodu JavaScript

W plikach JavaScript program Dreamweaver podaje podpowiedzi do zmiennych i parametrów funkcji. 

W poniższym przykładzie urywek kodu wskazuje typ.

Podczas pracy z plikami JavaScript program Dreamweaver automatycznie odświeża listę dostępnych podpowiedzi do kodu. Załóżmy na przykład, że pracujesz nad podstawowym plikiem HTML i przechodzisz do pliku JavaScript, by dokonać w nim pewnej zmiany. Po powrocie do podstawowego pliku HTML Zmiana wprowadzona w pliku JavaScript zostanie uwzględniona na liście podpowiedzi do kodu.  

Aktywna inspekcja obiektów

Ponadto program Dreamweaver automatycznie odświeża podpowiedzi do kodu dotyczące typów JavaScript.

Jeśli na przykład zdefiniowano pewną zmienną jako typ liczbowy, program Dreamweaver zapamiętuje tę informację. Gdy później tworzysz w kodzie odwołanie do tej zmiennej, program podpowie jej typ.

Jeśli typ zmiennej zostanie zmieniony (np. na łańcuch), podpowiedzi do kodu generowane przez program Dreamweaver będą automatycznie wskazywać, że ta zmienna jest łańcuchem.

Dynamiczne dołączanie dokumentacji

Jeśli dodano komentarze dokumentujące daną funkcję, to generując podpowiedzi do tej funkcji, program Dreamweaver wyświetli również jej dokumentację. 

Podpowiedzi do kodu PHP

Program Dreamweaver obsługuje podpowiedzi do kodu PHP w wersji 5.6 i 7.1. Są to podpowiedzi podawane w kontekście serwisu i obejmują wszystkie podstawowe funkcje, klasy i zmienne PHP.

Więcej informacji o PHP w wersji 5.6 i 7.1 zawiera dokumentacja PHP Manual.

Szczegółowe informacje: Podpowiedzi do kodu właściwe dla serwisu.

Przydatną funkcją podpowiedzi do kodu PHP jest automatyczne uzupełnianie zmiennych.

Po wpisaniu znaku dolara ($) zostanie wyświetlona lista wszystkich zmiennych znajdujących się w bieżącym skrypcie. Wybierz odpowiednią zmienną i naciśnij klawisz Enter/Return. Lista zawiera także zmienne z plików powiązanych, co pozwala uniknąć sytuacji, w której taka sama zmienna zostaje zdefiniowana w innym celu.

Jeśli jako domyślną wersję ustawiono PHP 7.1, program Dreamweaver będzie wyświetlać podpowiedzi do kodu PHP w wersji 7.1.

Edytowanie opcji opóźnień podpowiedzi do kodu PHP

Aby usprawnić wpisywanie kodu w plikach .php, program Dreamweaver w wersji 2017.5 i nowszych umożliwia definiowanie opóźnienia podpowiedzi PHP. Podczas wpisywania kodu PHP program Dreamweaver wyświetla podpowiedzi po upływie 400 ms. Jeśli chcesz zmienić to opóźnienie podpowiedzi do kodu PHP, wykonaj następującą procedurę:

Podpowiedzi do kodu właściwe dla serwisu

Program Dreamweaver umożliwia programistom korzystającym z platform takich jak Joomla, Drupal i Wordpress wyświetlanie podpowiedzi do kodu PHP podczas pracy w widoku Kod. Zanim będzie można wyświetlić te wskazówki do kodu, należy skorzystać z okna dialogowego Wskazówki do kodu właściwe dla serwisu, aby utworzyć plik konfiguracyjny. Plik ten zawiera informacje konfiguracyjne, których program Dreamweaver używa do wyszukiwania wskazówek do kodu odpowiednich dla danego serwisu.

Samouczek wideo dotyczący posługiwania się podpowiedziami do kodu właściwymi dla serwisu można obejrzeć na stronie www.adobe.com/go/learn_dw_comm13_pl.

Tworzenie pliku konfiguracyjnego

Plik konfiguracyjny niezbędny do wyświetlania wskazówek do kodu w programie Dreamweaver, tworzy się za pomocą okna dialogowego Wskazówki do kodu właściwe dla serwisu.

Program Dreamweaver domyślnie przechowuje ten plik konfiguracyjny w katalogu Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Zapisywanie struktury serwisu

Dostosowaną strukturę serwisu, utworzoną w oknie dialogowym Wskazówki do kodu właściwe dla serwisu, można zapisywać.

Zmiana nazwy struktur serwisu

Zmieniając nazwę struktury serwisu należy pamiętać, że nie można używać nazw żadnej z trzech struktur domyślnych ani słowa „custom”.

Dodawanie plików lub folderów do struktury serwisu

Dodawać można dowolne pliki lub foldery związane ze strukturą. Po dodaniu plików lub folderów można określić rozszerzenia plików, które mają być skanowane. 

Skanowanie serwisu w poszukiwaniu plików o określonych rozszerzeniach

Okno dialogowe Znajdź rozszerzenia umożliwia wyświetlanie i modyfikowanie rozszerzeń plików uwzględnionych w strukturze serwisu.