Umieść punkt wstawiania w kodzie.
Ostatnia aktualizacja
27 kwi 2021
Informacje o sposobach pracy w widoku Kod oraz optymalnym korzystaniu z funkcji programu Dreamweaver obsługujących programowanie.
Istnieje wiele sposobów pracy z kodem w programie Dreamweaver.
Można otworzyć nowy plik kodu za pomocą okna dialogowego Nowy dokument i rozpocząć wprowadzanie kodu.
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. Uzyskaj pomoc dotyczącą kodu CSS, gdy jest potrzebna, korzystając z przydatnej funkcji Szybka dokumentacja w programie Dreamweaver.
Można również wstawiać kod za pomocą panel Insert lub używać skrótów kodowania, takich jak skróty Emmet.
Jeśli często kopiujesz i wklejasz ten sam fragment kodu, wypróbuj te oszczędzające czas funkcje:
- Panel fragmentów jest nieoceniony przy szybkim tworzeniu i wstawianiu wstępnie sformatowanych fragmentów kodu do kodu.
- Wiele kursorów pozwala tworzyć i edytować wiele wierszy kodu jednocześnie.
Dreamweaver zapewnia także solidny zestaw narzędzi edycyjnych, które zapewniają płynny proces nawigacji i wprowadzania zmian w kodzie.
- Używaj funkcji znajdź i zamień w programie Dreamweaver, aby wyszukiwać znaczniki, atrybuty lub tekst w kodzie.
- Nawigator kodu umożliwia przechodzenie do powiązanego kodu — zarówno w bieżącym pliku, jak i poza nim. Co jeszcze lepsze, używaj funkcji Szybka edycja, aby edytować kod w powiązanych plikach bez otwierania pliku w nowej karcie.
- Kliknij kod prawym przyciskiem myszy, aby wyświetlić proste, odpowiednie menu kontekstowe, które pozwala bezpośrednio edytować kod.
- Używaj Zawijaj znacznik, aby zawijać tekst w znacznikach.
Przeczytaj dalej, aby uzyskać więcej informacji na temat wszystkich tych funkcji kodu.
Wstawianie kodu za pomocą panelu Wstaw
Wybierz odpowiednią kategorię w panelu Wstaw.
Kliknij przycisk w panel Insert lub wybierz element
z menu podręcznego w panel Insert.
Po kliknięciu ikony kod pojawia się na stronie natychmiast lub pojawia się okno dialogowe z żądaniem dodatkowych informacji w celu ukończenia 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 rozwijają się na stronach CSS, LESS, SASS, SCSS lub w znaczniku stylu 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. Aby uzyskać szczegółowe informacje i materiały referencyjne, zobacz dokumentację Emmet.
Spostrzeżenie
Dreamweaver obecnie obsługuje skróty Emmet 1.2.2.
Przykład 1: Wstawianie kodu HTML za pomocą Emmet
Aby szybko dodać kod HTML dla listy nieuporządkowanej z trzema elementami, otwórz plik HTML i wpisz następujący skrót Emmet w widoku kodu 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. Alternatywnie wybierz cały skrót, a następnie naciśnij klawisz Enter.
Skrót rozwija się do 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ą Emmet
Aby wstawić kod CSS do tworzenia promienia obramowania z prefiksami dostawców, otwórz plik CSS i wpisz następujący skrót Emmet w klasie:
-bdrs
Po naciśnięciu klawisza Tab skrót zostanie rozwinięty do 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 ustawić kursor w punkcie wstawiania i kliknąć ikonę Wstaw z paska narzędzi, aby otworzyć podmenu Zastosuj komentarz.
Można także zaznaczyć tekst i przekształcić go w komentarz. Wybrany tekst zostaje zawinięty w blok 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 wpisać tekst komentarza.
Można również użyć skrótów klawiaturowych Ctrl+/ (w systemie Windows) lub Cmd+/ (na Mac), aby dodać komentarze.
Jeśli użyjesz skrótu klawiszowego, nie zaznaczając tekstu, to do bieżącego wiersza zostanie zastosowany komentarz. Jeśli wybierzesz tekst i użyjesz skrótu klawiaturowego, komentarz zostanie zastosowany do wybranego tekstu.
Usuwanie komentarzy z kodu
Aby usunąć komentarz z kodu, zaznacz ten kod i kliknij ikonę Usuń komentarz na pasku narzędziowym. Można również użyć skrótów klawiaturowych Ctrl-/ (w systemie Windows) lub Cmd-/ (na Mac), aby usunąć komentarze.
Przełączanie komentarzy do kodu
Aby przełączać między pokazywaniem i ukrywaniem komentarzy w widoku kodu, po prostu naciśnij Ctrl+/ w systemie Windows lub Cmd+/ na Mac dla wybranego komentarza lub linii.
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.
Spostrzeżenie
Operacje kopiowania i wklejania oraz znajdowania i zastępowania nie działają z wieloma kursorami lub wielokrotnym zaznaczeniem.
Dodawanie wielu kursorów lub wielu zaznaczeń
Można dodawać wiele kursorów na różne sposoby w zależności od wymagań.
Jeśli chcesz dodać ten sam tekst w wielu miejscach bez zastępowania istniejącego tekstu, dodaj wiele kursorów.
Jeśli chcesz zastąpić istniejący tekst, użyj wielu zaznaczeń. Można wybierać ciągłe linie tekstu lub nieciągłe linie tekstu, lub oba rodzaje, i dodawać do nich kursory.
Aby dodać wiele kursorów lub wielokrotne zaznaczenia w tej samej kolumnie w ciągłych liniach:
Przytrzymaj klawisz Alt, kliknij i przeciągnij w pionie. Gdy przeciągasz pionowo, kursory są dodawane do każdej linii, przez którą przeciągasz.
Aby zaznaczyć przylegające do siebie wiersze tekstu, przytrzymaj klawisz Alt i przeciągnij po przekątnej. Gdy przeciągasz ukośnie, Dreamweaver zaznacza prostokątny blok tekstu w ramach tego zaznaczenia.
Spostrzeżenie
Aby szybko dodać kursory lub uwzględnić wiele linii w zaznaczeniu, użyj skrótu klawiaturowego Shift-Alt-Góra lub Dół.
Po dodaniu kursorów (lub zaznaczeniu tekstu) w wielu miejscach idź dalej i zacznij pisać.
Jeśli masz wiele kursorów, nowy tekst jest dodawany.
Jeśli zaznaczyłeś zawartość w wielu liniach tekstu, zaznaczony tekst zostaje zastąpiony nowym tekstem, który wprowadzasz.
Aby dodać wiele kursorów w różnych kolumnach w liniach:
Aby dodać kursory do nieciągłych linii tekstu, po prostu naciśnij klawisz Ctrl i kliknij różne linie, w których chcesz umieścić kursor.
Aby wybrać nieciągłe linie tekstu, wybierz jakiś tekst, następnie naciśnij klawisz Ctrl (Windows) lub klawisz Cmd (Mac) i kontynuuj dokonywanie dalszych zaznaczeń.
Aby dodać kursory na początku/końcu każdej linii:
Wybierz wiele linii tekstu i naciśnij klawisze strzałek Lewo lub Prawo.
Aby dodać kursory w poprzedzających lub następujących liniach dla zaznaczenia:
Naciśnij klawisze Shift+Alt+Góra/Dół, a następnie naciśnij klawisz strzałki w prawo.
Aby wybrać ciągłe i nieciągłe linie tekstu:
Można łączyć te techniki, aby wybrać zarówno ciągłe, jak i oddzielne linie tekstu w ramach pojedynczego zaznaczenia.
Najpierw wybierz nieciągłe linie tekstu, następnie naciśnij Ctrl-Alt (w systemie Windows) lub Cmd-Alt (na Mac) i przeciągnij, aby dodać zestaw linii do istniejących wielokrotnych zaznaczeń.
Podręczna dokumentacja — pomoc do właściwości CSS w programie Dreamweaver
Podczas pracy z plikami CSS, LESS lub SCSS w programie Dreamweaver można szybko uzyskać więcej informacji o właściwościach lub wartościach CSS.
Umieść kursor w obrębie właściwości lub wartości i naciśnij Ctrl + K — Dreamweaver otworzy dokumentację z projektu Web Platform Docs.
Można jednocześnie otworzyć kilka edytorów wbudowanych i przeglądarek dokumentów.
Aby zamknąć pojedynczy edytor wbudowany lub przeglądarkę dokumentu, kliknij „X" w lewym górnym rogu lub naciśnij klawisz Escape, gdy funkcja Quick Docs ma fokus.
Aby zamknąć wszystkie edytory wbudowane i dokumenty, umieść kursor z powrotem w głównym edytorze kodu i naciśnij klawisz Escape.
Analizuj kod
Dreamweaver obsługuje linting (analizowanie kodu pod kątem potencjalnych błędów) dla 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 wiersza jest wyświetlany na czerwono, aby wskazać, że zawiera błędy, a po najechaniu kursorem wyświetla się krótki 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 Design lub Live można użyć tej funkcji do opakowywania obiektów znacznikiem.
Wybierz tekst w widoku Code lub obiekt w widoku Design i naciśnij Ctrl+T na klawiaturze.
Pojawi się okno podręczne umożliwiające wybór z wielu znaczników HTML.
Wybierz znacznik z menu.
Jeśli pracujesz w widoku Kod, znacznikiem zostanie otoczony zaznaczony tekst. Jeśli pracujesz w widoku Design lub Live, wybrany obiekt zostanie opakowany znacznikiem.
Edytowanie kodu za pomocą menu kontekstowego Coding
Menu kontekstowe programu Dreamweaver umożliwia szybkie edytowanie kodu.
Aby otworzyć menu kontekstowe, kliknij prawym przyciskiem myszy (Windows) lub kliknij przytrzymując klawisz Command (Mac). Dostępne są 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 podano w sekcji Szybka edycja.
Wytnij, Kopiuj, Wklej
Kliknij te opcje, aby szybko wyciąć, skopiować i wkleić tekst bez konieczności otwierania menu Edycja.
Znajdź i zastąp, Znajdź następny, Znajdź poprzedni
Kliknij te opcje, aby szybko znaleźć i zamienić tekst bez konieczności otwierania 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 znajduje się w części Praca z urywkami kodu.
Otwórz powiązany plik
Kliknij prawym przyciskiem myszy łącze/tag skryptu i kliknij polecenie otwórz powiązany plik, aby otworzyć plik.
Dołącz arkusz stylów
Dołącz istniejący arkusz stylów CSS do strony.
Zaznaczenie
Podmenu Zaznaczenie zawiera różne opcje edytowania kodu, których można użyć do wybranego fragmentu kodu, takie jak przełączanie komentarzy wierszowych i blokowych, rozwijanie i zwijanie zaznaczenia, konwertowanie wbudowanego CSS na 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. Aby uzyskać więcej informacji, zobacz Przechodzenie do kodu powiązanego.
Narzędzia podpowiedzi do kodu
Podmenu Narzędzia podpowiedzi dotyczących kodu zapewnia łatwy dostęp do próbnika kolorów, przeglądarki adresów URL i listy czcionek.
Wcinanie bloków kodu
Podczas pisania i edytowania kodu w widoku Kod lub w inspektorze kodu można zmienić poziom wcięcia wybranego bloku lub wiersza kodu, przesuwając go w prawo lub w lewo o jeden tabulator.
Wcinanie zaznaczonego bloku kodu
- Naciśnij klawisz Tab lub
- Naciśnij kombinację Ctrl+] lub
- Wybierz polecenie Edycja > Wcięcie kodu.
Usuń wcięcie zaznaczonego bloku kodu
- Naciśnij Shift+Tab lub
- Naciśnij 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.
Można uzyskać dostęp do nawigatora kodu z widoków Projekt, Kod i Podział, a także z inspektora kodu.
Przegląd wideo od zespołu inżynierów programu Dreamweaver dotyczący pracy z nawigatorem kodu można znaleźć w www.adobe.com/go/dw10codenav.
Samouczek wideo dotyczący pracy z widokiem na żywo, powiązanymi plikami i nawigatorem kodu można znaleźć w www.adobe.com/go/lrvid4044_dw.
Otwieranie okna Nawigator kodu
Alt+kliknij (Windows) lub Command+Option+kliknij (Macintosh) w dowolnym miejscu strony. Nawigator kodu wyświetla łącza do kodu wpływającego na obszar, który kliknięto.
Kliknij poza oknem Nawigator kodu, aby je zamknąć.
Spostrzeżenie
Można również otworzyć nawigator kodu, klikając wskaźnik nawigatora kodu 
. Ten
wskaźnik pojawia się w pobliżu punktu wstawiania na stronie, gdy mysz
ije bezczynny przez 2 sekundy.
Przejdź do kodu za pomocą nawigatora kodu
Otwórz nawigator kodu z obszaru strony, który Cię interesuje.
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.
Spostrzeżenie
Po zatrzymaniu kursora nad łączem do reguły CSS Nawigator kodu wyświetla podpowiedzi dotyczące właściwości reguły. Te dymki z poradami są przydatne, gdy chcesz rozróżnić wiele reguł o tej samej nazwie.
Wyłączanie wskaźnika Nawigatora kodu
Otwórz okno Nawigator kodu.
Zaznacz opcję Wyłącz wskaźnik w prawym dolnym narożniku okna.
Kliknij poza oknem Nawigator kodu, aby je zamknąć.
Aby ponownie włączyć wskaźnik nawigatora kodu, naciśnij Alt+kliknij (Windows) lub Command+Option+kliknij (Macintosh), aby otworzyć nawigator kodu i odznacz opcję Wyłącz wskaźnik.
Przejdź do funkcji JavaScript lub VBScript
W widoku kodu i inspektorze kodu można wyświetlić listę wszystkich funkcji JavaScript lub VBScript w kodzie i przejść do dowolnej z nich.
Wyświetl dokument w widoku kodu (Widok >
Kod) lub inspektorze kodu (Okno > Inspektor kodu).
Wykonaj jedną z następujących czynności:
W widoku Kod kliknij gdziekolwiek z wciśniętym prawym przyciskiem myszy (Windows) lub klawiszem Control (Macintosh), a następnie wybierz podmenu Funkcje z menu kontekstowego.
Spostrzeżenie
Podmenu Funkcje nie pojawia się widoku Projekt.
Wszystkie funkcje JavaScript oraz VBScript jakie znajdują się w twoim kodzie pojawia się w podmenu.
Spostrzeżenie
Aby zobaczyć funkcje wyświetlone w porządku alfabetycznym, kliknij w widoku Kod z wciśniętym prawym przyciskiem myszy i klawiszem Control (Windows) lub klawiszami Option i Control (Macintosh), a następnie wybierz Funkcje z podmenu.
- W inspektorze kodu kliknij przycisk Nawigacja po kodzie ({ }) na pasku narzędzi.
Wybierz nazwę funkcji, aby przejść do 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.
Przed użyciem ekstraktora JavaScript należy pamiętać o następujących ograniczeniach:
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 pozwala wydzielić kodu JavaScript z regionów edytowalnych pliku .dwt (szablonu programu Dreamweaver), z regionów nieedytowalnych w różnych instancjach szablonu, a także z elementów 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ę.
Przegląd wideo od zespołu inżynierów programu Dreamweaver dotyczący obsługi JavaScript w programie Dreamweaver można znaleźć w www.adobe.com/go/dw10javascript.
Aby użyć modułu do wydzielania kodu JavaScript:
Otwórz stronę zawierającą JavaScript.
Kliknij Narzędzia > Eksternalizuj JavaScript.
W oknie dialogowym Eksternalizacja JavaScript w razie potrzeby edytuj domyślne wybory.
Wybierz opcję Tylko eksternalizuj JavaScript, jeśli chcesz, aby Dreamweaver przeniósł kod JavaScript do pliku zewnętrznego i odwołał się do tego pliku w bieżącym dokumencie. Ta opcja zostawia programy obsługi zdarzeń, takie jak onclick i onload w dokumencie, oraz pozostawia zachowania widoczne w panel Zachowania.
Wybierz opcję Eksternalizuj JavaScript i dołącz w sposób dyskretny, jeśli chcesz, aby Dreamweaver 1) przeniósł JavaScript do pliku zewnętrznego i odwołał się do niego w bieżącym dokumencie oraz 2) usunął programy obsługi zdarzeń z HTML i wstawił je w czasie wykonywania za pomocą JavaScript. Po wybraniu tej opcji nie można już edytować zachowań w panel Zachowania.
W kolumnie Edytuj odznacz edycje, których nie chcesz wykorzystać, lub wybierz edycje, których Dreamweaver nie wybrał domyślnie.
Domyślnie Dreamweaver wyświetla, ale nie wybiera następujących edycji:
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 związane z kodem obsługi EOLAS, o którym wiadomo, że używa document.write().
Bloki skryptów w treści dokumentu, chyba że bloki zawierają tylko konstruktory widżetów Spry lub zestawów danych Spry.
Dreamweaver automatycznie przypisuje identyfikatory do elementów, które nie mają jeszcze identyfikatorów. Jeśli nie podobają ci się te identyfikatory, możesz je zmienić edytując pola tekstowe ID.
Kliknij przycisk OK.
Okno dialogowe podsumowania zawiera podsumowanie ekstrakcji. 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
Zamiast zaśmiecać środowisko kodowania wieloma panelami i ikonami, tryb szybkiej edycji w Dreamweaver umieszcza kod i narzędzia specyficzne dla kontekstu w linii, umożliwiając szybkie dotarcie do potrzebnej sekcji kodu.
Można przejść do trybu szybkiej edycji poprzez:
- Kliknięcie prawym przyciskiem myszy fragmentu kodu i wybór opcji Szybka edycja z wyświetlonego menu kontekstowego
- Naciśnięcie Ctrl + E (w systemie Windows) lub Cmd+E (na 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. Można edytować te reguły bezpośrednio w linii, bez opuszczania kontekstu pliku HTML.
Gdy pasuje wiele reguł, można nawigować między nimi za pomocą listy po prawej stronie (lub użyć Alt-Góra/Dół).
Aby utworzyć regułę CSS bezpośrednio z edytora w linii, kliknij Nowa reguła lub naciśnij Ctrl-Alt-N (w systemie Windows) lub Cmd-Opt-N (na Mac).
Korzystanie z trybu Szybka edycja w plikach JavaScript
Pracując w pliku JavaScript umieść kursor w nazwie funkcji. Szybka edycja pokazuje treść funkcji (nawet jeśli znajduje się w innych plikach, do których odwołuje się instrukcja require()).
Używanie trybu szybkiej edycji z plikami CSS, SCSS lub LESS
Gdy wywołasz szybką edycję z kursorem w obrębie wartości koloru, możesz uzyskać dostęp do próbnika kolorów i szybko zmodyfikować kolory używane w kodzie CSS.
W pliku CSS, LESS lub SCSS umieść kursor na funkcji czasu przejścia cubic-bezier() lub steps(), a szybka edycja wyświetli graficzny edytor krzywej przejścia.
Wstępnie zdefiniowane funkcje czasu ease, ease-in, ease-out, ease-in-out, step-start i step-end są również prawidłowymi punktami wyjścia.
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żna zmieniać nazwy funkcji i ustawiać zakres zmiennej, aby można było ją wywoływać z poziomu bloku kodu, w którym jest zdefiniowana.
Spostrzeżenie
Refaktoryzacja kodu jest teraz dostępna wyłącznie 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 pojawia się opcja Refactor.Opcja Refactor 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 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. Aby przeprowadzić refaktoryzację, nie trzeba zaznaczać zmiennej przez kliknięcie i przeciągnięcie.
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 Refactor > Rename. Można również użyć skrótu klawiaturowego Ctrl + Alt + R w systemie Windows lub Command + option + R w systemie macOS, aby zmienić nazwę.
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 ponownie unikalną nazwę zmiennej lub funkcji, aby zastąpić bieżącą 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 również użyć Ctrl + Alt + V w systemie Windows i Cmd + Alt + V w systemie 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. Wartość domyślną nowego parametru można zainicjować wewnątrz treści funkcji lub przekazać przez wywołania funkcji.
Wykonaj następujące kroki, aby przeprowadzić refaktoryzację za pomocą Extract to Function:
Wybierz dowolne wyrażenie lub zestaw wyrażeń w JavaScript.
Kliknij prawym przyciskiem myszy i wybierz Refactor > Extract to Function. Można również użyć Ctrl + Alt + M w systemie Windows lub Cmd + Alt + M w systemie Mac OS.
Wybierz zakres docelowy, z którego ma zostać wyodrębniona funkcja, z menu podręcznego wyświetlanego na ekranie.
Dane wyjściowe różnią się w zależności od wybranego zakresu docelowego. Na przykład zakresem docelowym może być konstruktor, wybrana klasa lub funkcja globalna.
Charakterystyki opcji Extract to function to:
- Identyfikuje parametry do przekazania na podstawie identyfikatorów dostępnych w zaznaczeniu lub w wyodrębnionym zakresie.
- Identyfikuje parametry zwracane z funkcji na podstawie identyfikatorów, których wartości zostały zmienione w zaznaczeniu.
- Tworzy również funkcję o unikalnej nazwie.
Następujące zrzuty ekranu przedstawiają wyniki w oparciu o odpowiedni wybrany zakres docelowy.
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.
Wybierz lub umieść kursor w kodzie, kliknij prawym przyciskiem myszy i wybierz Refactor > Wrap in Try Catch. Jeśli umieścisz kursor w danej pozycji, znajdzie otaczające instrukcje, w przeciwnym razie sprawdza, czy kod składa się z instrukcji, czy nie. Jeśli są instrukcje, kod zostaje opakowany w blok Try Catch.
Umieść w bloku warunkowym
Użyj Wrap in Condition, aby opakować wyrażenie w kodzie tak, żeby kompilowało się tylko dla konkretnego warunku.
Wybierz wyrażenie w kodzie, kliknij prawym przyciskiem myszy i wybierz Refactor > Wrap in Condition.
Konwertuj na funkcję strzałkową
Funkcja strzałkowa to wyrażenie, które nie ma własnych wyrażeń funkcyjnych, takich jak this, arguments, super czy new.target. Te wyrażenia funkcyjne są przeznaczone dla wyrażeń niebędących metodami i nie można ich używać jako konstruktora.
Umieść kursor w funkcji, kliknij prawym przyciskiem myszy i wybierz Refactor > Convert to Arrow Function.
Spostrzeżenie
- Jeśli wybrana instrukcja ma jeden parametr, struktura parametru wygląda następująco: param => {statements}.
- Jeśli wybrana instrukcja ma zero lub więcej niż jeden parametr, np. param (param1, param2), struktura parametru wygląda następująco: param (param1, param2) => {statements}.
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żesz utworzyć settera dla właściwości, która ma rzeczywistą wartość.
Umieść kursor na użytkowniku wyrażenia obiektu, kliknij prawym przyciskiem myszy i wybierz Refactor > Create Getters/Setters.
Wskazówki dotyczące rozwiązywania problemów
Poniższa tabela zawiera wskazówki dotyczące rozwiązywania problemów w przypadku odpowiednich komunikatów o błędach wyświetlanych na ekranie z powodu nieprawidłowego wyboru kodu:
|
Nazwa funkcji |
Komunikat o błędzie |
Wskazówka dotycząca rozwiązywania problemów |
|---|---|---|
|
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żna użyć funkcji znajdowania i zamieniania programu Dreamweaver do wyszukiwania dowolnego rodzaju tekstu, kodu lub odstępów w witrynie 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 kodu
Po wstawieniu odpowiedniego kodu dla obrazów i kolorów można wyświetlić ich podgląd bezpośrednio w widoku kodu.
Podgląd obrazu
Zatrzymaj kursor myszy nad adresem URL obrazu, aby wyświetlić jego podgląd w widoku Kod. Można wyświetlić podgląd obrazów, do których odwołuje się dowolny z następujących elementów:
- url();
- data-uri()
- Wartość atrybutu src znacznika img
Dreamweaver wyświetla również podglądy obrazów udostępnianych zdalnie.
Jeśli Dreamweaver nie może wyświetlić podglądu ścieżek zdalnych, wyświetla komunikat „Nie można wczytać obrazu".
Można wyświetlić podgląd następujących typów obrazów:
- 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 kolorów szesnastkowych: #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);
- Wstępnie zdefiniowane nazwy kolorów, takie jak Olive, Teal, red.
Podgląd kolorów jest dostępny we wszystkich typach dokumentów dla powyższych formatów kolorów.
Kliknij prawym przyciskiem myszy wartość i wybierz Szybka edycja, aby otworzyć Próbnik kolorów i wybrać inny kolor.
Spostrzeżenie
Aby wyłączyć podglądy dla obrazów i kolorów, usuń zaznaczenie opcji Widok > Opcje widoku kodu > Podgląd zasobów.
Drukowanie kodu
Można wydrukować kod, aby edytować go w trybie offline, zarchiwizować lub rozpowszechnić.
Otwórz stronę w widoku Kod
Wybierz polecenie Plik > Drukuj kod.
Określ opcje drukowania, a następnie kliknij OK (Windows)
lub Drukuj (Macintosh).
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
