Podręcznik użytkownika Anuluj

Pisanie i edytowanie kodu

Szukaj

Ostatnia aktualizacja 21 maj 2021

Informacje o sposobach pracy w widoku Kod oraz optymalnym korzystaniu z funkcji programu Dreamweaver obsługujących programowanie.

Program Dreamweaver udostępnia wiele metod pracy nad kodem.

Możesz utworzyć nowy plik z kodem poprzez okno dialogowe Nowy dokument i zacząć pisać w nim kod.

Tworzenie nowego pliku kodu w programie Dreamweaver

Podczas wpisywania będą wyświetlane podpowiedzi do kodu, które ułatwiają wybór właściwych elementów i pozwalają uniknąć literówek. Przydatną funkcją programu Dreamweaver jest Podręczna dokumentacja, która umożliwia wyświetlanie pomocy do właściwości CSS bezpośrednio podczas ich programowania.

Kod można również wstawiać za pomocą panelu Wstaw oraz skrótów programistycznych, takich jak skróty Emmet.

Jeśli często kopiujesz i wklejasz ten sam fragment kodu, spróbuj skorzystać z następujących pomocnych funkcji:

Panel Urywki daje niezwykle wygodną możliwość szybkiego tworzenia i wstawiania sformatowanych fragmentów kodu.
Wiele kursorów to funkcja umożliwiająca tworzenie i edytowanie wielu wierszy kodu jednocześnie.

Program Dreamweaver udostępnia także rozbudowany zestaw narzędzi edycyjnych, które ogromnie ułatwiają nawigację w kodzie i modyfikowanie go.

Funkcje znajdowania i zastępowania w programie Dreamweaver umożliwiają wyszukiwanie znaczników, atrybutów lub tekstu w kodzie.
Nawigator kodu umożliwia przechodzenie do powiązanego kodu — zarówno w bieżącym pliku, jak i poza nim. Można też skorzystać z jeszcze wygodniejszej funkcji Szybka edycja, która umożliwia edytowanie kodu w plikach powiązanych bez potrzeby otwierania ich w nowej karcie.
Kliknij kod prawym przyciskiem myszy, aby wyświetlić przejrzyste menu kontekstowe, zawierające przydatne w danym miejscu opcje i umożliwiające bezpośrednią edycję kodu.
Narzędzie Otocz znacznikiem umożliwia wstawianie znaczników otaczających tekst.

Poniżej podano więcej informacji na temat tych funkcji edycji kodu.

Wstawianie kodu za pomocą panelu Wstaw

Umieść punkt wstawiania w kodzie.
Wybierz odpowiednią kategorię w panelu Wstaw.
Kliknij przycisk w panelu Wstaw lub wybierz obiekt z wyskakującego menu panelu Wstaw.

Po kliknięciu ikony kod może zostać od razu wstawiony na stronę lub może zostać wyświetlone okno dialogowe, w którym trzeba podać dodatkowe informacje niezbędne w celu wstawienia kodu.

Rodzaj oraz liczba przycisków dostępnych w panelu Wstaw zależy od typu bieżącego dokumentu. Zależy także od tego, czy jesteś w trybie projektowania czy kodu.

Korzystanie z zestawu narzędzi Emmet w programie Dreamweaver

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

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.

Oto kilka przykładów, które ilustrują, w jaki sposób można używać skrótów Emmet w widoku Kod. Szczegółowe informacje zawiera dokumentacja narzędzia Emmet.

Uwaga:

Program Dreamweaver obsługuje obecnie skróty Emmet 1.2.2.

Przykład 1: Wstawianie kodu HTML za pomocą skrótów Emmet

Aby szybko wstawić kod HTML listy nieuporządkowanej zawierającej trzy elementy, otwórz plik HTML w widoku Kod i wpisz następujące skróty Emmet wewnątrz znaczników <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Upewnij się, że kursor znajduje się bezpośrednio za skrótem Emmet. Naciśnij klawisz Tab, aby rozwinąć skrót. Możesz również zaznaczyć cały skrót i nacisnąć klawisz Enter.

Skrót zostanie rozwinięty do postaci następującego kodu:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Przykład 2: Wstawianie kodu CSS za pomocą skrótów Emmet

Aby wstawić kod CSS generujący zaokrągloną krawędź z odpowiednim prefiksem przeglądarki, otwórz plik CSS i wpisz następujący skrót Emmet wewnątrz klasy:

-bdrs

Po naciśnięciu klawisza Tab skrót zostanie rozwinięty do postaci następującego kodu:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Praca z komentarzami do kodu

Komentarz to tekstowy opis, który wstawiasz do kodu HTML w celu wyjaśnienia o co chodzi w kodzie lub przekazania innej informacji. Tekst komentarza pojawia się tylko w widoku Kod i nie jest wyświetlany w przeglądarce.

Dodawanie komentarzy do kodu

Aby dodać komentarz, najpierw wpisz jego treść. Następnie można umieścić kursor w punkcie wstawiania i kliknąć ikonę Wstaw na pasku narzędziowym, aby otworzyć podmenu Zastosuj komentarz.

Można także zaznaczyć tekst i przekształcić go w komentarz. Zaznaczony tekst zostanie otoczony blokiem komentarza.

Komentarze można dodawać z użyciem różnych opcji składni. Wybierz odpowiednią składnię, a program Dreamweaver wstawi niezbędne znaczniki. Wystarczy tylko wpisać treść komentarza.

Komentarze można również dodawać za pomocą skrótów klawiszowych Ctrl+/ (Windows) lub Cmd+/ (Mac).

Jeśli użyjesz skrótu klawiszowego, nie zaznaczając tekstu, to do bieżącego wiersza zostanie zastosowany komentarz. Natomiast jeśli zaznaczysz tekst i użyjesz skrótu, to w komentarz zostanie przekształcone zaznaczenie.

Usuwanie komentarzy z kodu

Aby usunąć komentarz z kodu, zaznacz ten kod i kliknij ikonę Usuń komentarz na pasku narzędziowym. Komentarze można również usuwać za pomocą skrótów klawiszowych Ctrl-/ (Windows) lub Cmd-/ (Mac).

Przełączanie komentarzy do kodu

Aby przełączyć wyświetlanie i ukrywanie komentarzy w widoku Kod, naciśnij klawisze Ctrl+/ (Windows) lub Cmd+/ (Mac) dla zaznaczonego komentarza lub wiersza.

Używanie wielu kursorów w celu dodawania lub modyfikowania tekstu w wielu miejscach

Funkcja wielu kursorów w programie Dreamweaver umożliwia wstawienie kursorów w wielu miejscach lub zaznaczenie wielu sekcji kodu i edytowanie ich jednocześnie.

Uwaga:

Podczas pracy z wieloma kursorami i wieloma zaznaczeniami nie są dostępne operacje kopiowania, wklejania, znajdowania i zastępowania.

Dodawanie wielu kursorów lub wielu zaznaczeń

Dodatkowe kursory można wstawiać różnymi metodami, stosownie do potrzeb.

Jeśli chcesz dodać ten sam tekst w wielu miejscach, nie zastępując tekstu istniejącego, użyj funkcji wielu kursorów.

Jeśli chcesz zastąpić istniejący tekst, użyj wielu zaznaczeń. Zaznaczyć można wiersze tekstu przylegające do siebie oraz nieprzylegające do siebie, dodając do nich kursory.

Aby dodać wiele kursorów lub wiele zaznaczeń w tej samej kolumnie w przylegających do siebie wierszach tekstu:

Przytrzymaj klawisz Alt, kliknij i przeciągnij w pionie. Podczas przeciągania w pionie do każdego wiersza objętego przeciąganiem są dodawane kursory.

Tekst dodawany przy kursorach w wielu wierszach

Aby zaznaczyć przylegające do siebie wiersze tekstu, przytrzymaj klawisz Alt i przeciągnij po przekątnej. Program Dreamweaver zaznaczy prostokątny blok tekstu wyznaczany przez tę przekątną.

Zaznaczanie i aktualizowanie wielu wierszy tekstu naraz

Uwaga:

Aby szybko dodać kursory lub uwzględnić wiele wierszy w zaznaczeniu, użyj klawiszy Shift+Alt + strzałka w dół lub strzałka w górę.

Po dodaniu kursorów (lub zaznaczeniu tekstu) w wielu miejscach można rozpocząć pisanie.

Jeśli używasz wielu kursorów, to dodawany jest nowy tekst.

Jeśli zaznaczono tekst w wielu wierszach, to zaznaczenie zostanie zastąpione wpisywanym tekstem.

Aby dodać wiele kursorów w wielu wierszach w różnych kolumnach:

Aby dodać kursory w nieprzylegających do siebie wierszach tekstu, przytrzymaj klawisz Ctrl i kliknij wiersze, w których chcesz umieścić kursor.

Dodawanie kursorów do wielu nieprzylegających do siebie wierszy tekstu

Aby zaznaczyć nieprzylegające do siebie wiersze tekstu, zaznacz część tekstu, a następnie przytrzymaj klawisz Ctrl (Windows) lub Cmd (Mac) i zaznaczaj kolejne obszary.

Aby dodać kursory na początku lub końcu każdego wiersza:

Zaznacz wiele wierszy tekstu i naciśnij klawisz strzałki w lewo lub w prawo.

Aby dodać kursory w wierszach przed lub za zaznaczeniem:

Przytrzymaj klawisze Shift+Alt+ strzałka w górę / w dół, a następnie naciśnij klawisz strzałki w prawo.

Aby zaznaczyć przylegające i nieprzylegające do siebie wiersze tekstu:

Łącząc powyższe techniki, można zaznaczyć jednocześnie zarówno wiersze, które do siebie przylegają, jak i wiersze nieleżące obok siebie.

Najpierw zaznacz nieprzylegające do siebie wiersze tekstu, a następnie naciśnij klawisze Ctrl-Alt (Windows) lub Cmd-Alt (Mac) i przeciągnij, aby dodać szereg wierszy do istniejących zaznaczeń wielowierszowych.

Zaznaczanie zarówno przylegających, jak i nieprzylegających do siebie wierszy tekstu

Podręczna dokumentacja — pomoc do właściwości CSS w programie Dreamweaver

Podczas pracy nad plikami CSS, LESS lub SCSS w programie Dreamweaver można szybko uzyskać dostęp do informacji o właściwościach CSS i ich wartościach.

Umieść kursor we właściwości lub wartości i naciśnij klawisze Ctrl + K. Program Dreamweaver otworzy dokumentację pobieraną z projektu Web Platform Docs.

Można otworzyć wiele edytorów w wierszu i przeglądarek dokumentacji jednocześnie.

Dokumentacja CSS w programie Dreamweaver

Aby zamknąć jeden edytor w wierszu lub jedną przeglądarkę dokumentacji, kliknij ikonę X w lewym górnym rogu lub naciśnij klawisz Escape w aktywnym oknie Podręcznej dokumentacji.

Aby zamknąć wszystkie edytory w wierszu i przeglądarki dokumentacji, umieść kursor z powrotem w głównym edytorze kodu i naciśnij klawisz Escape.

Analiza kodu

Program Dreamweaver obsługuje linting (analizę kodu pod kątem potencjalnych błędów) w odniesieniu do plików HTML, CSS i JavaScript.

Błędy i ostrzeżenia wykryte w wyniku lintingu są wyświetlane w panelu Wyjście. Więcej informacji: Linting kodu.

Ponadto program Dreamweaver wyświetla skrócony podgląd błędu w kolumnie z numerem wiersza, w którym wystąpił błąd. Numer takiego wiersza jest wyświetlany w kolorze czerwonym, co wskazuje, że zawiera on błędy. Po zatrzymaniu kursora myszy nad czerwonym numerem jest wyświetlany skrócony opis błędu.

Uwaga: Wyświetlany jest tylko pierwszy błąd w danym wierszu. Jeśli wiersz zawiera tylko ostrzeżenie, wyświetlany jest opis tego ostrzeżenia. Jeśli wiersz zawiera ostrzeżenie i błąd, zostanie wyświetlony tylko opis błędu.

Otaczanie tekstu kodem za pomocą funkcji Otocz znacznikiem

Funkcja Otocz znacznikiem umożliwia otoczenie wybranych wierszy tekstu w widoku Kod odpowiednim znacznikiem. W widoku Projekt lub w widoku aktywnym ta sama funkcja umożliwia otaczanie znacznikiem obiektów.

Zaznacz tekst w widoku Kod lub obiekt w widoku Projekt i naciśnij klawisze Ctrl+T.

Zostanie wyświetlone wyskakujące okienko z możliwością wyboru jednego z kilku znaczników HTML.
Wybierz znacznik z menu.

Jeśli pracujesz w widoku Kod, znacznikiem zostanie otoczony zaznaczony tekst. Jeśli pracujesz w widoku Projekt lub widoku aktywnym, znacznikiem zostanie otoczony zaznaczony obiekt.

Edycja kodu za pomocą kontekstowego menu Kodowanie

Menu kontekstowe programu Dreamweaver umożliwia szybkie wprowadzanie modyfikacji w kodzie.

Aby otworzyć menu kontekstowe, kliknij prawym przyciskiem myszy (Windows) lub kliknij przytrzymując klawisz Command (Mac). W menu są dostępne następujące opcje:

Szybka edycja

Kliknij tę opcję, aby włączyć tryb Szybka edycja. W tym trybie program Dreamweaver udostępnia kontekstowe narzędzia i możliwości edycji kodu w wierszu, co pozwala szybko zmienić potrzebny fragment kodu. Więcej informacji: Szybka edycja.

Wytnij, Kopiuj, Wklej

Kliknij jedną z tych opcji, aby szybko wyciąć, wkleić lub skopiować tekst bez potrzeby korzystania z menu Edycja.

Znajdź i zastąp, Znajdź następny, Znajdź poprzedni

Kliknij jedną z tych opcji, aby szybko wyszukać i zastąpić tekst bez potrzeby korzystania z menu Znajdź.

Utwórz nowy urywek

Za pomocą tej opcji można tworzyć urywki kodu i zapisywać je do wykorzystania w przyszłości. Zaznacz kod i kliknij ikonę Utwórz nowy urywek, aby przekształcić zaznaczenie w urywek kodu. Więcej informacji: Praca z urywkami kodu.

Otwórz powiązany plik

Kliknij łącze lub znacznik script prawym przyciskiem myszy, a następnie wybierz polecenie Otwórz powiązany plik, aby go otworzyć.

Dołącz arkusz stylów

Umożliwia dołączenie do strony istniejącego arkusza stylów.

Zaznaczenie

Podmenu Zaznaczenie zawiera różne opcje edycji, których można używać w odniesieniu do zaznaczonego fragmentu kodu, takie jak przełączanie komentarzy w wierszu i blokowych, rozwijanie i zwijanie zaznaczenia, przekształcanie wewnętrznego stylu CSS w reguły, przenoszenie reguł CSS oraz drukowanie kodu.

Nawigator kodu

Korzystając z tej opcji, można przechodzić do powiązanych źródeł kodu, takich jak wewnętrzne i zewnętrzne reguły CSS, dołączenia po stronie serwera, zewnętrzne pliki JavaScript, nadrzędne pliki szablonów, pliki bibliotek i pliki źródłowe iframe. Więcej informacji: Przechodzenie do kodu powiązanego.

Narzędzia podpowiedzi do kodu

Podmenu Narzędzia podpowiedzi do kodu umożliwia wygodne otwarcie próbnika kolorów, przeglądarki adresów URL oraz listy czcionek.

Wcinanie bloków kodu

Podczas pisania i edycji kodu w widoku Kod lub Inspektorze kodu można zmieniać poziom wcięcia zaznaczonego bloku lub wiersza kodu, przesuwając go w lewo lub w prawo o jeden tabulator.

Wcinanie zaznaczonego bloku kodu

Naciśnij klawisz Tab lub
Naciśnij klawisze Ctrl+] lub
Wybierz polecenie Edycja > Wcięcie kodu.

Zmniejszenie wcięcia zaznaczonego bloku kodu

Naciśnij klawisze Shift+Tab lub
Naciśnij klawisze Ctrl+[ lub
Wybierz polecenie Edycja > Wysunięcie kodu.

Przechodzenie do kodu powiązanego

W oknie Nawigator kodu jest wyświetlana lista źródeł kodu, powiązanych z bieżącym zaznaczeniem na stronie. Korzystając z niej można przechodzić do powiązanych źródeł kodu, takich jak wewnętrzne i zewnętrzne reguły CSS, dołączenia po stronie serwera, zewnętrzne pliki JavaScript, nadrzędne pliki szablonów, pliki bibliotek i pliki źródłowe iframe. Po kliknięciu łącza w Nawigatorze kodu program Dreamweaver otwiera plik z odpowiednim fragmentem kodu. Plik pojawia się w obszarze plików powiązanych (o ile obszar ten jest aktywny). Jeśli obszar plików powiązanych nie jest aktywny, program Dreamweaver otwiera zaznaczony plik w oknie dokumentu, jako oddzielny dokument.

Jeśli w oknie Nawigator kodu klikniesz regułę CSS, program Dreamweaver przejdzie bezpośrednio do tej reguły. Jeśli reguła jest wewnętrzną regułą pliku, program Dreamweaver wyświetli ją w widoku Podziel. Jeśli reguła jest zewnętrznym plikiem CSS, program Dreamweaver otworzy plik i wyświetli regułę w obszarze plików powiązanych nad głównym dokumentem.

Nawigator kodu jest dostępny w widokach Projekt, Kod i widoku podzielonym, a także w oknie Inspektora kodu.

Przygotowany przez zespół inżynierów programu Dreamweaver film wideo dotyczący posługiwania się Nawigatorem kodu jest dostępny pod adresem www.adobe.com/go/dw10codenav.

Samouczek wideo dotyczący widoku aktywnego, plików powiązanych i Nawigatora kodu jest dostępny pod adresem www.adobe.com/go/lrvid4044_dw.

Otwieranie okna Nawigator kodu

Przytrzymując klawisz Alt (Windows) lub klawisze Command+Option (Macintosh), kliknij w dowolnym miejscu strony. W oknie Nawigator kodu zostaną wyświetlone łącza do kodu powiązanego z klikniętym obszarem strony.

Kliknij poza oknem Nawigator kodu, aby je zamknąć.

Uwaga:

Okno Nawigator kodu można również otworzyć przez kliknięcie ikony Nawigatora kodu . Ikona ta pojawia się na stronie w pobliżu punktu wstawiania, kiedy wskaźnik myszy pozostaje nieruchomy przez 2 sekundy.

Przechodzenie do kodu za pomocą Nawigatora kodu

Otwórz Nawigatora kodu z wybranego obszaru strony.
Kliknij fragment kodu, do którego chcesz przejść.

Nawigator kodu grupuje powiązane źródła kodu według plików i wyświetla je w kolejności alfabetycznej. Załóżmy dla przykładu, że z bieżącym zaznaczeniem na stronie są powiązane reguły CSS z trzech plików zewnętrznych. W takim wypadku Nawigator kodu wyświetla listę tych trzech plików, a także powiązane z zaznaczeniem reguły CSS. W stosunku do związanej z danym zaznaczeniem reguły CSS Nawigator kodu działa tak jak panel Style CSS w trybie bieżącym.

Uwaga:

Po zatrzymaniu kursora nad łączem do reguły CSS Nawigator kodu wyświetla podpowiedzi dotyczące właściwości reguły. Podpowiedzi te są przydatne, jeśli występuje wiele reguł o tej samej nazwie i trzeba je odróżnić.

Wyłączanie wskaźnika Nawigatora kodu

Otwórz okno Nawigator kodu.
Zaznacz opcję Wyłącz wskaźnik w prawym dolnym rogu okna.
Kliknij poza oknem Nawigator kodu, aby je zamknąć.

Jeśli chcesz ponownie włączyć wskaźnik Nawigatora kodu, kliknij przytrzymując klawisz Alt (Windows) lub klawisze Command+Option (Macintosh), aby otworzyć okno Nawigator kodu, a następnie usuń zaznaczenie z opcji Wyłącz wskaźnik.

Przechodzenie do funkcji JavaScript lub VBScript

W widoku Kod i w Inspektorze kodu można wyświetlić listę wszystkich funkcji JavaScript lub VBScript zawartych w kodzie oraz przeskoczyć do dowolnej z nich.

Obejrzyj dokument w widoku Kod (Widok > Kod) lub Inspektorze kodu (Okno > Inspektor kodu).
Wykonaj jedną z następujących czynności:
- W widoku Kod kliknij gdziekolwiek prawym przyciskiem myszy (Windows) lub przytrzymując klawisz Control (Macintosh), a następnie wybierz podmenu Funkcje z menu kontekstowego.
Uwaga:

Podmenu Funkcje nie jest wyświetlane w widoku Projekt.

W podmenu tym są wyświetlane wszystkie funkcje JavaScript oraz VBScript zawarte w kodzie.

Uwaga:

Aby wyświetlić funkcje w porządku alfabetycznym, kliknij prawym przyciskiem myszy w widoku Kod, przytrzymując klawisz Control (Windows) lub klawisze Option i Control (Macintosh), a następnie wybierz podmenu Funkcje.
- Kliknij przycisk Nawigacja w kodzie ({ }) na pasku narzędziowym w Inspektorze właściwości.
Wybierz nazwę funkcji, aby przeskoczyć do tej funkcji w kodzie.

Wydzielanie kodu JavaScript

Moduł do wydzielania kodu JavaScript (JavaScript Extractor, JSE) usuwa z dokumentu programu Dreamweaver cały lub prawie cały kod JavaScript, eksportuje go do pliku zewnętrznego i dołącza ten plik do dokumentu. Moduł JSE pozwala usuwać z kodu również procedury obsługi zdarzeń, np. onclick i onmouseover, a następnie dołączać do dokumentu kod JavaScript tych procedur.

Należy zauważyć, że moduł JavaScript Extractor ma następujące ograniczenia:

Moduł JSE nie pozwala wydzielić znaczników skryptów, które znajdują się w treści dokumentu (oprócz widgetów Spry). Użycie tych skryptów jako plików zewnętrznych może prowadzić bowiem do nieoczekiwanych rezultatów. Zgodnie z zasadą domyślną program Dreamweaver umieszcza listę tych skryptów w oknie dialogowym Zapisz JavaScript na zewnątrz, ale nie zaznacza ich w celu wyodrębnienia. (W razie potrzeby można je zaznaczyć samodzielnie).
Moduł JSE nie umożliwia wydzielania kodu JavaScript z regionów edytowalnych pliku .dwt (szablonu programu Dreamweaver), z regionów nieedytowalnych w różnych instancjach szablonu, a także z pozycji biblioteki programu Dreamweaver.
Po wydzieleniu kodu JavaScript za pomocą opcji Zapisz kod JavaScript na zewnątrz i dołącz go dyskretnie nie będzie można edytować zachowań programu Dreamweaver za pomocą panelu Zachowania. Jeśli bowiem zachowania są dołączone dyskretnie, program Dreamweaver nie może zapewnić ich kontroli za pomocą panelu Zachowania.
Po zamknięciu strony nie będzie można cofnąć wprowadzonych zmian. Wszelkie zmiany można cofać jednak w ramach tej samej sesji edycyjnej. Wybierz polecenie Edycja > Cofnij Zapisz JavaScript na zewnątrz.
Niektóre złożone strony mogą działać niezgodnie z oczekiwaniami. Wydzielając kod JavaScript ze stron zawierających procedurę document.write() i zmienne globalne, należy zachować szczególną uwagę.

Przygotowany przez zespół inżynierów programu Dreamweaver film wideo dotyczący obsługi języka JavaScript w tym programie jest dostępny pod adresem www.adobe.com/go/dw10javascript.

Aby użyć modułu JavaScript Extractor:

Otwórz stronę zawierającą kod JavaScript.
Wybierz polecenie Narzędzia > Zapisz JavaScript na zewnątrz.
W razie potrzeby zmień domyślne ustawienia w oknie dialogowym Zapisz JavaScript na zewnątrz.
- Aby program Dreamweaver przenosił każdy skrypt JavaScript do pliku zewnętrznego i umieszczał w bieżącym dokumencie odwołanie do tego pliku, zaznacz opcję Zapisz kod JavaScript tylko na zewnątrz. Zaznaczenie opcji powoduje, że procedury obsługi zdarzeń, np. onclick i onload pozostają w dokumencie, a zachowania pozostają widoczne w panelu Zachowania.
- Jeśli chcesz, aby program Dreamweaver 1) przenosił każdy skrypt JavaScript do pliku zewnętrznego i umieszczał w bieżącym dokumencie odwołanie do tego pliku, oraz 2) usuwał procedury obsługi zdarzeń z kodu HTML i wstawiał je w czasie wykonywania za pomocą kodu JavaScript, zaznacz opcję Zapisz kod JavaScript na zewnątrz i dołącz go dyskretnie. Po zaznaczeniu tej opcji nie będzie można edytować zachowań w panelu Zachowania.
- Przejdź do kolumny Edycja i usuń zaznaczenia z wszelkich zmian, których nie chcesz wprowadzać, albo zaznacz zmiany spoza domyślnego zestawu programu Dreamweaver.
  Przy ustawieniach domyślnych program Dreamweaver wyświetla modyfikacje następujących elementów, ale nie zaznacza tych modyfikacji:
  
  Bloki skryptów w nagłówku dokumentu, które zawierają wywołania document.write() lub document.writeln().
  
  Bloki skryptów w nagłówku dokumentu, które zawierają sygnatury funkcji zależnych od kodu EOLAS i odwołują się z tego powodu do metody document.write().
  
  Bloki skryptów w treści dokumentu, o ile bloki te nie zawierają widgetu Spry lub konstruktorów zestawu danych Spry.
- Program Dreamweaver automatycznie przydzieli identyfikatory tym elementom, które nie mają jeszcze identyfikatorów. Jeśli identyfikatory nie są odpowiednie, można je zmienić, edytując ich pola tekstowe.
Kliknij przycisk OK.

W oknie dialogowym podsumowania pojawi się zestawienie elementów do wydzielenia. Obejrzyj to zestawienie i kliknij przycisk OK.
Zapisz stronę.

Program Dreamweaver utworzy plik SpryDOMUtils.js oraz dodatkowy plik z wydzielonym kodem JavaScript. Program Dreamweaver zapisze plik SpryDOMUtils.js w folderze SpryAssets serwisu, a drugi plik umieści na tym samym poziomie, na którym znajduje się strona źródłowa wydzielonego kodu JavaScript. Należy pamiętać, aby razem z oryginalną stroną przesłać na serwer obydwa wymienione pliki.

Szybka edycja

Aby uniknąć zapełniania środowiska pracy dużą liczbą paneli i ikon, można skorzystać z trybu Szybka edycja w programie Dreamweaver. Tryb ten udostępnia narzędzia i możliwości związane z edycją kodu bezpośrednio w wierszu, ułatwiając szybkie dotarcie do właściwego miejsca.

Tryb Szybka edycja można otworzyć jedną z następujących metod:

Kliknij urywek kodu prawym przyciskiem myszy i z kontekstowego menu wybierz polecenie Szybka edycja.
Naciśnij klawisze Ctrl + E (Windows) lub Cmd+E (Mac).

Korzystanie z trybu Szybka edycja w plikach HTML

Pracując w pliku HTML, umieść kursor wewnątrz atrybutu class lub id (w jego nazwie lub wartości) albo w nazwie znacznika. Tryb Szybka edycja wyświetli wszystkie zgodne reguły CSS, SCSS i LESS w projekcie. Reguły te można edytować bezpośrednio w wierszu, bez opuszczania kontekstu pliku HTML.

Jeśli program znalazł wiele zgodnych reguł, można przechodzić między nimi za pomocą listy po prawej stronie (naciskając klawisze Alt + strzałka w górę lub w dół).

Aby utworzyć regułę CSS bezpośrednio w edytorze w wierszu, kliknij ikonę Nowa reguła albo naciśnij klawisze Ctrl-Alt-N (Windows) lub Cmd-Opt-N (Mac).

Korzystanie z trybu Szybka edycja w plikach JavaScript

Pracując w pliku JavaScript umieść kursor w nazwie funkcji. Tryb Szybka edycja wyświetli treść tej funkcji, nawet jeśli znajduje się ona w innych plikach, do których prowadzi odniesienie w instrukcji require().

Korzystanie z trybu Szybka edycja w plikach CSS, SCSS lub LESS

Jeśli w chwili wywołania trybu Szybka edycja kursor znajduje się w wartości koloru, to będzie można otworzyć próbnik kolorów i szybko zmodyfikować kolory użyte w kodzie CSS.

Pracując nad plikiem CSS, LESS lub SCSS, umieść kursor w synchronizującej czas efektu przejścia funkcji cubic-bezier() lub steps(), aby wyświetlić graficzny edytor krzywej przejścia w trybie Szybka edycja.

Można to również zrobić w przypadku predefiniowanych funkcji synchronizacji: ease, ease-in, ease-out, ease-in-out, step-start oraz step-end.

Modyfikowanie krzywej Beziera w trybie Szybka edycja

Refaktoryzacja kodu

Refaktoryzacja kodu to proces polegający na przebudowie istniejącego kodu komputerowego bez zmiany jego zewnętrznego zachowania, dzięki czemu kod staje się bardziej czytelny, łatwiejszy w obsłudze, a także łatwiejszy do zrozumienia i debugowania. Stosuje się ją, gdy w kodzie znajduje się zduplikowany kod, długie metody lub duże klasy. Debugowanie kodu oszczędza czas ze względu na użycie małych funkcji i prawidłową podmianę.

Dzięki refaktoryzacji JavaScript możesz zmienić nazwy funkcji i ustawić zakres zmiennej tak, by móc wywoływać ją z poziomu bloku kodu, w którym jest zdefiniowana.

Uwaga:

Refaktoryzacja kodu jest teraz dostępna tylko w plikach .js.

Refaktoryzacja JavaScript

Refaktoryzację kodu można wykonywać w dokumentach HTML, PHP i JavaScript. Po kliknięciu prawym przyciskiem myszy obszaru kodu w programie Dreamweaver w menu rozwijanym pojawi się opcja Refaktoruj. Funkcja Refaktoruj składa się z następujących opcji:

Zmień nazwę
Wyodrębnij do zmiennej
Wyodrębnij do funkcji
Umieść w bloku try catch
Umieść w bloku warunkowym
Konwertuj na funkcję strzałkową
Utwórz operatory Getters/Setters

Aby zrozumieć funkcjonalność każdej z opcji refaktoryzacji, zapoznaj się z następującymi sekcjami:

Zmień nazwę

Opcja Zmień nazwę służy do zmiany wszystkich wystąpień nazwy funkcji lub zmiennej w kodzie JavaScript. Zaznaczenie zmiennej poprzez kliknięcie i przeciągnięcie nie jest konieczne do jej refaktorowania.

Wykonaj następujące kroki, aby zmienić nazwę w JavaScript:

Zaznacz lub umieść kursor tekstowy w kodzie wymagającym zmiany.
Kliknij prawym przyciskiem myszy zaznaczony tekst, a następnie wybierz Refaktoruj > Zmień nazwę. Nazwę można również zmieniać za pomocą skrótów klawiszowych: Ctrl + Alt + R (Windows) lub Command + Option + R (macOS).
Na ekranie wyświetli się widok multikursora, umożliwiający zmianę wszystkich wystąpień zmiennej. Ulepszenia multikursora wybierają następne wystąpienie bieżącego zaznaczenia. Wpisz nową unikalną nazwę zmiennej lub funkcji, aby zastąpić bieżącą nazwę.

Przed: Zmień nazwę

Po: Zmień nazwę

Wyodrębnij do zmiennej

Możesz użyć funkcji Wyodrębnij do zmiennej, aby zastąpić wyrażenia ze zmienną, lokalną zmienną lub stałą w JavaScript, zaznaczając wyrażenie i klikając je prawym przyciskiem myszy. Następnie wybierz Refaktoruj > Wyodrębnij do zmiennej. Można także użyć skrótów Ctrl + Alt + V (Windows) i Cmd + Alt + V (macOS).

Wyodrębnij do funkcji

Możesz użyć opcji Wyodrębnij do funkcji, aby zastąpić wyrażenie w wywołaniach funkcji w parametrze. Domyślną wartość nowego parametru można zainicjować w treści funkcji lub podać w wywoływaniu funkcji.

Wykonaj następujące kroki, aby refaktorować kod z użyciem opcji Wyodrębnij do funkcji:

Zaznacz dowolne wyrażenie lub zestaw wyrażeń w JavaScript.

Zaznaczenie wyrażenia
Kliknij prawym przyciskiem myszy i wybierz Refaktoruj > Wyodrębnij do funkcji. Możesz także użyć skrótów Ctrl + Alt + M w systemie Windows lub Cmd + Alt + M w systemie Mac OS.
Wybierz zakres docelowy do wyodrębnienia funkcji z wyskakującego menu, które zostanie wyświetlone na ekranie.

Rodzaje zakresów
Dane wyjściowe różnią się w zależności od wybranego zakresu docelowego. Zasięg docelowy może być na przykład konstruktorem, zaznaczoną klasą lub funkcją globalną.

Charakterystyką opcji Wyodrębnij do funkcji jest to, że:
- Określa ona parametry do przekazania na podstawie identyfikatorów dostępnych w zaznaczeniu lub w wyodrębnionym zakresie;
- Identyfikuje ona parametry zwrotne, aby powrócić z funkcji na podstawie identyfikatorów, których wartości zostały zmienione w zaznaczeniu;
- Tworzy ona również funkcję o unikalnej nazwie.
Poniższe zrzuty ekranu przedstawiają dane wyjściowe oparte na wybranym zakresie docelowym.
Konstruktor

Klasa

Globalny

Umieść w bloku try catch

Możesz użyć opcji Umieść w bloku try catch na wyjątku w bloku kodu, pojawiającym się jako błąd po kompilacji programu. Ta funkcja otacza blok kodu blokiem try catch. Ten blok kodu jest oznaczony jako wyjątek podczas wykonywania programu.

Zaznacz lub umieść kursor przy kodzie, kliknij prawym przyciskiem myszy i wybierz Refaktoruj > Umieść w bloku try catch. Jeśli umieścisz kursor w jakiejś pozycji, znajduje on otaczające go instrukcje, w przeciwnym razie sprawdza on, czy kod składa się z instrukcji. Jeśli występują instrukcje, otoczy on kod blokiem try catch.

Umieść w bloku warunkowym

Możesz użyć opcji Umieść w bloku warunkowym na wyrażeniu w kodzie do skompilowania tylko dla określonego warunku.

Zaznacz wyrażenie w kodzie, kliknij prawym przyciskiem myszy i wybierz Refaktoruj > Umieść w bloku warunkowym.

Konwertuj na funkcję strzałkową

Funkcja strzałkowa jest wyrażeniem, które nie ma własnych wyrażeń funkcji, takich jak this, arguments, super albo new.target. Te wyrażenia funkcji dotyczą wyrażeń innych niż metody i nie mogą być używane jako konstruktory.

Umieść kursor w funkcji, kliknij prawym przyciskiem myszy i wybierz Refaktoruj > Konwertuj na funkcję strzałkową.

Uwaga:

Jeśli zaznaczona instrukcja ma jeden parametr, struktura parametrów pojawia się jako param => {instrukcje}.
Jeśli zaznaczona instrukcja ma zero lub więcej niż jeden parametr, np. param (param1, param2), to struktura parametrów pojawia się jako param (param1, param2) => {instrukcje}.

Utwórz operatory Getters/Setters

W JavaScript, setter może być użyty do wykonania funkcji, w której określona właściwość wymaga zmiany. Settery są najczęściej używane wraz z getterami w celu utworzenia swego rodzaju pseudowłaściwości. Nie można utworzyć settera dla właściwości, która ma faktyczną wartość.

Umieść kursor na składniku wyrażenia obiektowego, kliknij prawym przyciskiem myszy i wybierz Refaktoruj > Utwórz oepratory Getters/Setters.

Wskazówki dotyczące rozwiązywania problemów

Poniższa tabela zawiera wskazówki dotyczące rozwiązywania problemów związanych z komunikatami o błędach wyświetlanymi na ekranie z powodu nieprawidłowego zaznaczenia kodu:

Nazwa funkcji	Komunikat o błędzie	Wskazówka
Zmień nazwę	Brak wyrażenia w danej pozycji	Umieść kursor na lub przed nazwą zmiennej lub funkcji.
Wyodrębnij do zmiennej	Zaznaczony obszar nie stanowi wyrażenia	Zaznacz wyrażenie w kodzie przed refaktorowaniem kodu.
Wyodrębnij do funkcji	Zaznaczony blok powinien stanowić zestaw instrukcji lub wyrażenie	Upewnij się, że zaznaczasz blok z zestawem instrukcji lub wyrażeniem.
Umieść w bloku try catch	Zaznacz poprawny kod, aby umieścić go w bloku try-catch	Upewnij się, że przed zastosowaniem opcji refaktorowania try-catch zaznaczony został jakiś kod.
Umieść w bloku warunkowym	Zaznacz poprawny kod, aby umieścić go w bloku warunkowym	Upewnij się, że zaznaczasz wyrażenie przed zastosowaniem opcji refaktorowania Umieść w bloku warunkowym.
Konwertuj na funkcję strzałkową	Umieść kursor wewnątrz wyrażenia funkcji	Upewnij się, że umieszczasz kursor wewnątrz wyrażenia funkcji przed zastosowaniem tej opcji refaktoryzacji.
Utwórz operatory Getters/Setters	Umieść kursor na składniku wyrażenia obiektowego	Upewnij się, że umieszczasz kursor na składniku wyrażenia obiektowego, przed zastosowaniem opcji tworzenia operatorów Getters/Setters.

Znajdowanie i zastępowanie tekstu

Możesz użyć funkcji znajdowania i zastępowania w programie Dreamweaver, aby wyszukać dowolny tekst, kod lub odstęp na stronie lub folderze.

Można przeszukiwać cały kod znacznikowy wraz z tekstem albo ograniczyć wyszukiwanie wyłącznie do tekstu renderowanego w widoku Projekt lub wyłącznie do kodu.

Dostępne są również rozbudowane algorytmy dopasowania wzorców (wyrażenia regularne), które umożliwiają wykonywanie niezwykle precyzyjnych operacji znajdowania i zastępowania.

Po wyszukaniu tekstu można go zastąpić innym podanym tekstem, kodem lub odstępem.

Więcej informacji: Znajdowanie i zastępowanie tekstu.

Podgląd obrazów i kolorów w widoku Kod

Po wstawieniu kodu obrazów i kolorów można wyświetlić ich podgląd bezpośrednio w widoku Kod.

Podgląd obrazów

Zatrzymaj kursor myszy nad adresem URL obrazu, aby wyświetlić jego podgląd w widoku Kod. Podgląd można wyświetlać dla obrazów, do których prowadzą odwołania w następujących formatach:

url()
data-uri()
Wartość atrybutu Src znacznika IMG

Dreamweaver wyświetla również podglądy obrazów udostępnianych zdalnie.

Jeśli program nie może wygenerować podglądu dla ścieżki zdalnej, wyświetlany jest komunikat „Nie można wczytać obrazu”.

Podgląd można wyświetlić dla następujących typów plików graficznych:

JPEG
JPG
PNG
GIF
SVG

Podgląd kolorów

Zatrzymaj kursor myszy nad wartościami kolorów, aby wyświetlić ich podgląd w widoku Kod. Obsługiwane formaty to:

3- i 6-cyfrowe wartości szesnastkowe: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Predefiniowane nazwy kolorów: np. olive (oliwkowy), teal (morski), red (czerwony).

Podgląd kolorów w opisanych powyżej formatach jest dostępny we wszystkich typach dokumentów.

Kliknij prawym przyciskiem myszy i wybierz polecenie Szybka edycja, aby otworzyć próbnik kolorów i wybrać inny kolor.

Uwaga:

Aby wyłączyć podgląd obrazów i kolorów, usuń zaznaczenie opcji Widok > Opcje widoku Kod > Podgląd zasobów.

Drukowanie kodu

Kod można drukować w celu modyfikacji poza komputerem, archiwizacji lub dystrybucji.

Otwórz stronę w widoku Kod
Wybierz polecenie Plik > Drukuj kod.
Wybierz opcje drukowania, a następnie kliknij przycisk OK (Windows) lub Drukuj (Macintosh).

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?