Podręcznik użytkownika Anuluj

Podpowiedzi i uzupełnianie kodu

 

 

Podpowiedzi i uzupełnianie kodu to funkcje programu Dreamweaver, które pozwalają znacznie przyspieszyć kodowanie.

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.

Obsługiwane języki i technologie

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

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.

Preferencje podpowiedzi do kodu
Preferencje podpowiedzi 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.

Podstawowe podpowiedzi do kodu HTML
Podstawowe podpowiedzi do kodu HTML

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 kodu — nazwy atrybutów
Podpowiedzi do kodu — nazwy atrybutów

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. 

Przykład statycznych podpowiedzi do wartości atrybutów
Przykład statycznych podpowiedzi do wartości atrybutów

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.

Dynamiczne podpowiedzi do kodu dla atrybutu src
Dynamiczne podpowiedzi do kodu dla atrybutu src

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.

Dodawanie w kodzie zasobu z biblioteki CC
Dodawanie w kodzie zasobu z biblioteki CC

Uwaga:

W podpowiedziach do kodu wyświetlanych jest maksymalnie 50 zasobów z bibliotek CC. Podpowiedzi są wyświetlane w porządku alfabetycznym.

Uwaga:

Wstawianie zdalnych zasobów bibliotek CC w programie Dreamweaver nie jest obsługiwane.

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 atrybutu href
Dynamiczne podpowiedzi do kodu dla atrybutu href

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.

Dynamiczne podpowiedzi do kodu dla atrybutu id
Dynamiczne podpowiedzi do kodu dla atrybutu id

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.

Dynamiczne podpowiedzi do kodu dla atrybutu style
Dynamiczne podpowiedzi do kodu dla atrybutu style

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 kodu dla reguł @
Podpowiedzi do kodu dla reguł @

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.

Podpowiedzi do kodu i pomoc dotycząca właściwości CSS
Podpowiedzi do kodu i pomoc dotycząca właściwości CSS

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.

Podpowiedzi do kodu CSS związane z kolorem
Podpowiedzi do kodu CSS związane z kolorem

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

Próbki kolorów z bibliotek CC są oznaczone ikoną chmury
Próbki kolorów z bibliotek CC są oznaczone ikoną chmury

Uwaga:

W podpowiedziach do kodu wyświetlanych jest maksymalnie 50 zasobów z bibliotek CC. Podpowiedzi są wyświetlane w porządku alfabetycznym.

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

Podpowiedzi do kodu pseudoselektorów
Podpowiedzi do kodu pseudoselektorów

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 kodu pseudoelementów
Podpowiedzi do kodu pseudoelementów

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.
Podpowiedzi do kodu dla właściwości CSS background
Podpowiedzi do kodu dla właściwości CSS background

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.

Wskazówki wyświetlane dla właściwości CSS
Wskazówki wyświetlane dla właściwości 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.

Podpowiedzi do kodu JavaScript
Podpowiedzi do kodu JavaScript

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.  

Uwaga:

Takie automatyczne uaktualnianie podpowiedzi działa tylko wtedy, gdy pliki JavaScript są edytowane w programie Dreamweaver.

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.

Podpowiedź do kodu wskazująca typ zmiennej
Podpowiedź do kodu wskazująca typ zmiennej

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.

Podpowiedzi do kodu PHP 7
Podpowiedzi do kodu PHP 7

Przykład podpowiedzi do kodu obiektu PHP
Przykład podpowiedzi do kodu obiektu PHP

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

  1. Zamknij program Dreamweaver.

  2. Otwórz plik brackets.json z następującej lokalizacji w edytorze tekstu:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<wersja językowa>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<wersja językowa>/Configuration/Brackets/
  3. Kliknij przycisk Zapisz strukturę. Znajduje się on w górnym prawym rogu okna dialogowego.

    Zmodyfikuj plik JSON, dodając przecinek za ostatnią parą nazwa/wartość.

    Dodaj następujący wiersz z preferowanym opóźnieniem w milisekundach: "delayInPHPHint": <czas w milisekundach>. Na przykład: "delayInPHPHint": 200.

  4. Zapisz plik i ponownie uruchom program Dreamweaver.

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.

Uwaga:

Tworzone wskazówki do kodu są przeznaczone dla serwisu wybranego w panelu Pliki programu Dreamweaver. Podpowiedzi do kodu będą wyświetlane tylko dla stron, które znajdują się w aktualnie wybranym serwisie.

  1. Wybierz polecenie Serwis > Opcje serwisu > Wskazówki do kodu właściwe dla serwisu.

    Funkcja Wskazówki do kodu właściwe dla serwisu domyślnie skanuje serwis, aby wykryć używany system zarządzania zawartością (Content Management System — CMS). W konfiguracji domyślnej program Dreamweaver obsługuje trzy platformy tego typu: Drupal, Joomla i Wordpress.

    Cztery przyciski po prawej stronie wyskakującego menu Struktura umożliwiają importowanie, zapisywanie, zmianę nazwy i usuwanie struktur.

    Uwaga:

    Domyślnych, istniejących struktur nie można usuwać. Nie można również zmieniać ich nazw.

  2. W polu tekstowym Podkatalog katalogu głównego podaj folder, w którym przechowujesz pliki struktury. Możesz kliknąć ikonę folderu obok pola tekstowego, aby odszukać położenie plików struktury.

    Program Dreamweaver wyświetli strukturę drzewa folderów zawierających pliki struktury. Jeśli wyświetlone są wszystkie foldery i pliki, które chcesz skanować, kliknij przycisk OK, aby rozpocząć skanowanie. Jeśli chcesz dostosować skanowanie, przejdź do kolejnych kroków.

  3. Kliknij przycisk plus (+) nad oknem Pliki, aby wybrać plik lub folder, który ma zostać dodany do skanowania. W oknie dialogowym Dodaj pliki/foldery można określić rozszerzenia plików, które mają być objęte skanowaniem.

    Uwaga:

    Określenie konkretnych rozszerzeń przyspiesza proces skanowania.

  4. Aby usunąć pliki z listy skanowania, zaznacz je i kliknij przycisk minus (-) nad oknem Pliki.

    Uwaga:

    Jeśli wybrano platformę Drupal lub Joomla, okno dialogowe Wskazówki do kodu właściwe dla serwisu wyświetli dodatkową ścieżkę do pliku w folderze konfiguracyjnym programu Dreamweaver.

    Nie usuwaj jej. Jest to element wymagany przy pracy z tymi platformami.

  5. Aby dostosować sposób przetwarzania konkretnego pliku lub folderu przez funkcję Wskazówki do kodu właściwe dla serwisu, wybierz ten plik lub folder i wykonaj jedną z następujących czynności:

    • Zaznacz opcję Skanuj ten folder, aby wybrany folder był skanowany.
    • Zaznacz opcję Rekursywnie, aby dodać wszystkie pliki i podfoldery wybranego katalogu.
    • Kliknij przycisk Rozszerzenia, aby otworzyć okno dialogowe Znajdź rozszerzenia. W tym oknie można wybrać rozszerzenia plików, które mają być uwzględniane podczas skanowania w poszukiwaniu konkretnego pliku lub folderu.

Zapisywanie struktury serwisu

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

  1. Zamknij program Dreamweaver.

  2. Tekst kroku
  3. Utwórz pożądaną strukturę, dodając i usuwając pliki i foldery stosownie do potrzeb.

  4. Podaj nazwę struktury serwisu i kliknij przycisk Zapisz.

Uwaga:

Jeśli podana nazwa jest już używana, program Dreamweaver poprosi o wpisanie innej lub potwierdzenie nadpisania istniejącej struktury o takiej samej nazwie. Struktur domyślnych nie można nadpisać.

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

  1. Wyświetl strukturę, której nazwę chcesz zmienić.

  2. Kliknij ikonę Zmień nazwę struktury. Znajduje się ona w prawym górnym rogu okna dialogowego.

  3. Podaj nową nazwę struktury i kliknij przycisk Zmień nazwę.

Uwaga:

Jeśli wybrana nazwa jest już używana, program Dreamweaver poprosi o wpisanie innej lub potwierdzenie nadpisania istniejącej struktury o takiej samej nazwie. Struktur domyślnych nie można nadpisać.

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. 

  1. Kliknij przycisk plus (+) nad oknem Pliki, aby otworzyć okno dialogowe Dodaj plik/folder.

  2. W polu Dodaj plik/folder wprowadź ścieżkę pliku do folderu, który chcesz dodać. Możesz również kliknąć ikonę folderu obok pola tekstowego, aby przeglądać pliki lub foldery.

  3. Kliknij przycisk plus (+) nad oknem Rozszerzenia, aby określić rozszerzenia plików, które mają być skanowane.

    Uwaga:

    Określenie konkretnych rozszerzeń przyspiesza proces skanowania.

  4. Kliknij przycisk Dodaj.

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.

  1. W oknie dialogowym Wskazówki do kodu właściwe dla serwisu kliknij przycisk Rozszerzenia.

    Okno dialogowe Znajdź rozszerzenia wyświetla bieżącą listę rozszerzeń włączonych do skanowania.

  2. Aby dodać do tej listy kolejne rozszerzenie, kliknij przycisk plus (+) nad oknem Rozszerzenia.

  3. Aby usunąć rozszerzenie z listy, kliknij przycisk minus (-).

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?