Kliknij tekst lub zaznacz obiekt na stronie.
Ostatnia aktualizacja
27 kwi 2021
W tym temacie omówiono używanie Inspektora właściwości do edycji kodu w widoku Projekt w programie Adobe Dreamweaver.
Program Dreamweaver umożliwia wizualne tworzenie i edytowanie stron internetowych bez martwienia się o podstawowy kod źródłowy, ale są sytuacje, gdy może być konieczna edycja kodu w celu uzyskania większej kontroli lub rozwiązywania problemów ze stroną internetową.Program Dreamweaver umożliwia edytowanie kodu podczas pracy w widoku Projekt.
Ta sekcja jest przeznaczona dla osób, które wolą pracować w widoku Projekt, ale chcą także szybki dostęp do kodu.
Zaznaczanie znaczników potomnych w widoku Projekt
W przypadku wybrania obiektu w widoku Projekt, który zawiera tagi podrzędne — na przykład tabelę HTML — można szybko wybrać pierwszy tag podrzędny tego obiektu, wybierając Edycja > Wybierz tag podrzędny.
Spostrzeżenie
To polecenie jest aktywne tylko w widoku Projekt.
Na przykład tag <table> zwykle ma tagi podrzędne <tr>. W przypadku wybrania tagu <table> w selektorze tagów można wybrać pierwszy wiersz w tabeli, wybierając Edycja > Wybierz element podrzędny. Program Dreamweaver wybiera pierwszy tag <tr> w selektorze tagów. Ponieważ tag <tr> sam ma tagi podrzędne, mianowicie tagi <td>, ponowne wybranie opcji Edycja > Wybierz element podrzędny wybiera pierwszą komórkę w tabeli.
Edycja kodu za pomocą Inspektora właściwości
Można użyć Inspektora właściwości do sprawdzenia i edytowania atrybutów tekstu lub obiektów na stronie. Właściwości wyświetlane w Inspektorze właściwości zazwyczaj odpowiadają atrybutom tagów; zmiana właściwości w Inspektorze właściwości zazwyczaj ma taki sam efekt jak zmiana odpowiedniego atrybutu w widoku kodu.
Spostrzeżenie
Inspektor Tagów i Inspektor właściwości umożliwiają wyświetlanie i edytowanie atrybutów tagu. Inspektor Tagów umożliwia wyświetlanie i edytowanie wszystkich atrybutów powiązanych z danym tagiem. Inspektor właściwości pokazuje tylko najczęściej używane atrybuty, ale zapewnia bogatszy zestaw kontrolek do zmiany wartości tych atrybutów i umożliwia edytowanie określonych obiektów (takich jak kolumny tabeli), które nie odpowiadają określonym tagom.
Inspektor właściwości dla tekstu lub obiektu pojawia się poniżej okna Dokument.Jeśli Inspektor właściwości nie jest widoczny, wybierz Okno > Właściwości.
Zrób zmiany w atrybutach w Inspektorze właściwości.
Edycja kodu CFML za pomocą Inspektora właściwości
Użyj Inspektora właściwości do sprawdzenia i modyfikacji znaczników ColdFusion w widoku Projekt.
W Inspektorze właściwości kliknij przycisk Atrybuty,
aby edytować atrybuty tagu lub dodać nowe.
Jeśli tag zawiera zawartość między tagiem otwierającym a zamykającym,
kliknij przycisk Zawartość, aby edytować zawartość.
Przycisk Zawartość pojawia się tylko wtedy, gdy wybrany tag nie jest tagiem pustym (to znaczy, jeśli ma tag otwierający i zamykający).
Jeśli tag zawiera wyrażenie warunkowe, wprowadź w nim zmiany
w polu Wyrażenie.
Szybki edytor znaczników
Szybkiego Edytora Tagów używa się do szybkiego sprawdzenia, wstawienia i edytowania tagów HTML bez opuszczania widoku Projekt.
Jeśli wpiszesz nieprawidłowy kod HTML w Szybkim Edytorze Tagów, Dreamweaver spróbuje go poprawić poprzez wstawienie zamykających cudzysłowów i zamykających nawiasów kątowych w miejscach, gdzie są potrzebne.
Aby ustawić opcje Szybkiego Edytora Tagów, otwórz Szybki Edytor Tagów, naciskając Control-T (Windows) lub Command-T (Macintosh).
Szybki edytor znaczników ma trzy tryby:
- Tryb Wstaw HTML jest używany do wstawiania nowego kodu HTML.
- Tryb Edytuj znacznik jest używany do edytowania istniejącego znacznika.
Tryb Wstaw HTML jest używany do wstawiania nowego kodu HTML.
Tryb Edytuj znacznik jest używany do edytowania istniejącego znacznika.
Tryb Otocz znacznikiem jest używany do otaczania nowym znacznikiem bieżącego zaznaczenia.
Spostrzeżenie
Tryb w jakim zostanie otwarty Szybki edytor znaczników zależy od bieżącego zaznaczenia w trybie projektu.
We wszystkich trzech trybach podstawowa procedura używania Szybkiego edytora znaczników jest taka sama: otwórz edytor, wprowadź lub zmień znaczniki lub atrybuty, a następnie zamknij edytor.
Możesz przełączać pomiędzy trybami naciskając Control+T (Windows) lub Command+T (Macintosh) kiedy Szybki edytor znaczników jest aktywny.
Edytowanie kodu za pomocą Szybkiego edytora znaczników
Za pomocą Szybkiego edytora znaczników (Edycja > Szybki edytor znaczników) można szybko wstawiać i edytować znaczniki HTML, nie opuszczając widoku Projekt.
Wstawianie znacznika HTML
W widoku Projekt kliknij na
stronie, aby umieścić punkt wstawiania w miejscu, w którym chcesz wstawić kod.
Wciśnij Control+T (Windows) lub Command+T (Macintosh).
Szybki edytor znaczników otwiera się w trybie Wstaw HTML.
Wpisz znacznik HTML i naciśnij Enter.
Tag zostanie wstawiony do kodu wraz z pasującym tagiem zamykającym, jeśli ma zastosowanie.
Naciśnij Escape, aby wyjść bez robienia jakichkolwiek zmian.
Edycja znacznika HTML
Wybierz obiekt w widoku Projekt.
Możesz również wybrać tag, który chcesz edytować, z selektora tagów na dole okna dokumentu. Więcej informacji podano w Edytowanie kodu za pomocą selektora tagów.
Wciśnij Control+T (Windows) lub Command+T (Macintosh).
Szybki edytor znaczników otwiera się w trybie Edytuj znacznik.
Wprowadź nowe atrybuty, edytuj istniejące atrybuty lub edytuj
nazwę tagu.
Naciśnij Tab, aby przejść do następnego atrybutu;
naciśnij Shift+Tab, aby cofnąć się.
Spostrzeżenie
Domyślnie zmiany są stosowane do dokumentu po naciśnięciu Tab lub Shift+Tab.
Aby zamknąć Szybki edytor tagów i zastosować wszystkie zmiany,
naciśnij Enter.
Aby wyjść bez dokonywania dalszych zmian, wciśnij Escape.
Zawiń bieżące zaznaczenie w tagi HTML
Wybierz niesformatowany tekst
lub obiekt w widoku Projekt.
Spostrzeżenie
Jeżeli zaznaczysz tekst lub obiekt, który zawiera otwierający lub zamykający znacznik HTML, Szybki edytor znaczników otwiera się w trybie Edytuj znacznik zamiast w trybie Otocz znacznikiem.
Naciśnij Control+T (Windows) lub Command+T (Macintosh) lub
kliknij przycisk Szybki edytor tagów w inspektorze właściwości.
Szybki edytor znaczników otwiera się w trybie Otocz znacznikiem.
Wprowadź pojedynczy tag otwierający, taki jak strong,
i naciśnij Enter (Windows) lub Return (Macintosh).
Tag jest wstawiany na początku bieżącego zaznaczenia, a pasujący tag zamykający jest wstawiany na końcu.
Aby wyjść bez dokonywania jakichkolwiek zmian, wciśnij Escape.
Korzystanie z menu podpowiedzi w Szybkim edytorze tagów
Szybki edytor znaczników zawiera menu podpowiedzi atrybutów, które wyświetla wszystkie prawidłowe atrybuty edytowanego lub wstawianego znacznika.
Można również wyłączyć menu podpowiedzi lub dostosować opóźnienie przed wyświetleniem menu w Szybkim edytorze tagów.
Aby wyświetlić menu podpowiedzi z prawidłowymi atrybutami znacznika, zatrzymaj się na chwilę podczas edytowania nazwy atrybutu w Edytorze szybkich znaczników.Pojawi się menu podpowiedzi z listą wszystkich prawidłowych atrybutów tagu, który edytujesz.
Podobnie, aby wyświetlić menu podpowiedzi z prawidłowymi nazwami tagów, zatrzymaj się na chwilę podczas wprowadzania lub edytowania nazwy tagu w Szybkim edytorze tagów.
Spostrzeżenie
Preferencje podpowiedzi dotyczących kodu w Szybkim edytorze tagów są kontrolowane przez normalne preferencje podpowiedzi dotyczących kodu. Więcej informacji podano w Ustawianie preferencji podpowiedzi dotyczących kodu.
Wykonaj jedną z następujących czynności:
Zacznij wpisywać nazwę znacznika lub atrybutu. Zaznaczenie w menu Podpowiedzi dotyczące kodu przechodzi do pierwszego elementu, który zaczyna się od wpisanych liter.
Używaj klawiszy strzałek kursora w dół i górę, aby wybrać element.
Użyj strzałek kursora, aby je odnaleźć.
Naciśnij Enter, aby wstawić zaznaczony element, lub kliknij dwukrotnie
element, aby go wstawić.
Aby zamknąć menu podpowiedzi bez wstawiania elementu, naciśnij
Escape lub kontynuuj wpisywanie.
Wyłączanie menu podpowiedzi lub zmiana opóźnienia przed jego wyświetleniem
Wybierz Edycja > Preferencje
(Windows) lub Dreamweaver > Preferencje (Macintosh)
i wybierz Podpowiedzi dotyczące kodu.
Pojawi się okno dialogowe Preferencje podpowiedzi do kodu.
Aby wyłączyć menu podpowiedzi, odznacz opcję Włącz podpowiedzi dotyczące kodu.
Edycja kodu za pomocą selektora znaczników
Selektor znaczników umożliwia wybieranie, edycję oraz usuwanie znaczników bez opuszczania widoku Projekt. Okienko selektora znaczników znajduje się na pasku statusu u dołu okna Dokument i zawiera szereg znaczników.
Edycja lub usuwanie znacznika
Kliknij dokument.
Znaczniki stosowane w miejscu wstawiania są wyświetlane w selektorze znaczników.
Kliknij prawym przyciskiem myszy (Windows) lub kliknij z wciśniętym klawiszem Control (Macintosh) znacznik
w selektorze znaczników.
Aby edytować znacznik, wybierz polecenie Edytuj znacznik z menu. Wprowadź
zmiany w Szybkim edytorze znaczników. Więcej informacji podano w Edytowanie
kodu za pomocą Szybkiego edytora znaczników.
Aby edytować znacznik, wybierz polecenie Usuń znacznik z menu.
Wybierz obiekt odpowiadający znacznikowi
Kliknij dokument.
Znaczniki stosowane w miejscu wstawiania są wyświetlane w selektorze znaczników.
Zaznacz znacznik w selektorze znaczników.
Obiekt reprezentujący znacznik zostanie wybrany na stronie.
Spostrzeżenie
Użyj tej techniki do wybierania pojedynczych wierszy tabeli (znaczniki tr) lub komórek (znaczniki td).
Pisz i edytuj skrypty w widoku Design
Można pracować ze skryptami JavaScript i VBScript po stronie klienta zarówno w widokach Kod, jak i Projekt w następujący sposób:
Napisz skrypt JavaScript lub VBScript dla swojej strony bez opuszczania widoku Projekt.
Utwórz łącze w dokumencie do zewnętrznego pliku skryptu bez opuszczania widoku Projekt.
Edytuj skrypt bez opuszczania widoku Projekt.
Przed rozpoczęciem wybierz opcję Widok > Pomocnicze narzędzia > Niewidoczne elementy, aby upewnić się, że znaczniki skryptów są wyświetlane na stronie.
Pisanie skryptu uruchamianego po stronie klienta
Umieść
punkt wstawiania w miejscu, gdzie ma być skrypt.
Wybierz polecenie Wstaw > HTML > Skrypt.
W oknie wyboru pliku zaznacz odpowiedni skrypt.
Spostrzeżenie
Nie trzeba dodawać otwierających i zamykających znaczników script.
Do dokumentu zostanie wstawiony znacznik script odpowiadający wybranemu plikowi.
Edycja skryptu
Wybierz znacznik skryptu
W Inspektorze właściwości, kliknij przycisk Edycja.
Skrypt pojawia się w oknie dialogowym Właściwości skryptu.
Jeśli połączyłeś z zewnętrznym plikiem skryptu, plik zostanie otwarty w widoku Kod, w którym można wprowadzić zmiany.
Spostrzeżenie
Jeśli między znacznikami skryptu znajduje się kod, okno dialogowe Właściwości skryptu zostanie otwarte, nawet jeśli istnieje również łącze do zewnętrznego pliku skryptu.
W oknie Język określ JavaScript lub VBScript
jako język skryptu.
W menu podręcznym Typ określ typ skryptu —
po stronie klienta lub po stronie serwera.
(Opcjonalnie) W oknie Źródło określ zewnętrznie połączony
plik skryptu.
Kliknij ikonę folderu lub przycisk Przeglądaj, aby odszukać plik, lub wpisz bezpośrednio jego ścieżkę.
Przeprowadź edycję kodu skryptu i kliknij OK.
Edycja skryptów ASP po stronie serwera w widoku Projekt
Użyj inspektora właściwości skryptu ASP do sprawdzania i modyfikowania skryptów ASP po stronie serwera w widoku Projekt.
W widoku Projekt wybierz ikonę wizualną znacznika
języka serwera.
W inspektorze właściwości skryptu ASP kliknij przycisk
Edytuj.
Przeprowadź edycję kodu skryptu ASP i kliknij OK.
Edytuj skrypty na stronie za pomocą inspektora właściwości
W inspektorze właściwości wybierz język skryptów z menu podręcznego Język lub wpisz nazwę języka w polu Język.
Spostrzeżenie
Jeśli używasz JavaScript i nie masz pewności co do wersji, wybierz JavaScript zamiast JavaScript1.1 lub JavaScript1.2.
W menu podręcznym Typ określ typ skryptu:
kliencki lub serwerowy.
(Opcjonalnie) W polu tekstowym Źródło, określ zewnętrznie podłączony plik skryptu. Kliknij ikonę folderu, aby odszukać plik, lub wpisz bezpośrednio jego ścieżkę.
Kliknij opcję Edycja, aby zmodyfikować skrypt.
Używanie zachowań JavaScript
Można łatwo dołączyć zachowania JavaScript (po stronie klienta) do elementów strony przy użyciu karty Zachowania w inspektorze znaczników. Aby uzyskać więcej informacji, zobacz Applying built‑in JavaScript behaviors Dreamweaver.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
