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 tworzenie i edytowanie stron metodą graficzną, co pozwala użytkownikowi nie poświęcać uwagi kodowi leżącemu u podstaw serwisu. Niekiedy jednak trzeba edytować ten kod, aby uzyskać większą kontrolę nad serwisem lub usunąć potencjalne problemy. Niektóre elementy kodu można edytować w widoku Projekt.

Ta sekcja jest przeznaczona dla ludzi, którzy wolą pracować w trybie widoku Projekt, ale chcą także mieć szybki dostęp do kodu.

Zaznaczanie znaczników potomnych w widoku Projekt

Jeżeli w widoku Projekt zaznaczysz obiekt, który ma znaczniki potomne — na przykład tabelę HTML — możesz szybko zaznaczyć pierwszy znacznik potomny, wybierając polecenie Edycja > Wybierz podrzędny.

Uwaga:

To polecenie jest aktywne tylko w widoku Projekt.

Na przykład znacznik <table> normalnie zawiera znaczniki potomne <tr>. Jeżeli wybierzesz znacznik <table> w selektorze znaczników, możesz zaznaczyć pierwszy wiersz tabeli, wybierając polecenie Edycja > Wybierz podrzędny. Program Dreamweaver zaznaczy pierwszy znacznik <tr> w selektorze znaczników. Ponieważ znacznik <tr> ma też znaczniki podrzędne, konkretnie znaczniki <td>, wybranie ponowne Edycja > Wybierz powoduje zaznaczenie pierwszej komórki w tabeli.

Edycja kodu za pomocą Inspektora właściwości

Możesz użyć Inspektora właściwości do przeglądania i edycji atrybutów tekstu oraz obiektów na twojej stronie. Właściwości pokazane w Inspektorze właściwości generalnie odpowiadają atrybutom znaczników; zmienianie właściwości w Inspektorze zasadniczo ma ten sam efekt, co zmienianie odpowiedniego atrybutu w widoku Kod.

Uwaga:

Zarówno Inspektor znaczników jak i Inspektor właściwości pozwalają oglądać i edytować atrybuty znaczników. Inspektor znaczników pozwala na oglądanie i edycję każdego atrybutu związanego z danym znacznikiem. Inspektor właściwości pokazuje tylko najpopularniejsze atrybuty, ale udostępnia większy zakres kontrolek do zmieniania tych atrybutów i pozwala edytować niektóre obiekty (takie jak kolumny tabeli), które nie mają bezpośrednich odpowiedników w znacznikach.

  1. Kliknij tekst lub zaznacz obiekt na stronie.

    Inspektor właściwości tekstu lub obiektu pojawia się pod oknem Dokument. Jeżeli Inspektor właściwości nie jest widoczny, wybierz polecenie Okno > Właściwości.

  2. 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 zmodyfikowania oznakowania ColdFusion w widoku Projekt.

  1. W Inspektorze właściwości kliknij przycisk Atrybuty, aby edytować lub dodać nowe atrybuty znacznika.
  2. Jeżeli pomiędzy otwierającym a zamykającym znacznikiem znajduje się zawartość, kliknij przycisk Zawartość, aby ją edytować.

    Przycisk Zawartość pojawia się tylko wtedy, gdy zaznaczony znacznik nie jest pusty (tzn., jeżeli pomiędzy otwierającym a zamykającym znacznikiem znajduje się zawartość).

  3. Jeżeli znacznik zawiera warunkowe wyrażenie, zrób zmiany w polu Wyrażenie.

Szybki edytor znaczników

Szybkiego edytora znaczników można użyć do obejrzenia, wstawienia oraz edytowania znaczników HTML bez opuszczania widoku Projekt.

Jeśli w Szybkim edytorze znaczników wpisze się nieprawidłowy kod HTML, program Dreamweaver podejmie próbę poprawienia błędu, dodając na końcu niezbędne cudzysłowy lub ostre nawiasy.

Aby ustawić opcje Szybkiego edytora znaczników, otwórz go 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.

Uwaga:

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

  1. W trybie projektu, kliknij na stronie tam, gdzie chcesz wstawić kod.
  2. Wciśnij Control+T (Windows) lub Command+T (Macintosh).

    Szybki edytor znaczników otwiera się w trybie Wstaw HTML.

    Szybki edytor znaczników w trybie Wstaw HTML
    Szybki edytor znaczników w trybie Wstaw HTML

  3. Wpisz znacznik HTML i naciśnij Enter.

    Znacznik jest wstawiany do twojego kodu, wraz z pasującym znacznikiem zamykającym, jeżeli zachodzi taka potrzeba.

  4. Naciśnij Escape, aby wyjść bez robienia jakichkolwiek zmian.

Edycja znacznika HTML

  1. Wybierz obiekt w widoku Projekt.

    Możesz także zaznaczyć znacznik, który chcesz edytować za pomocą selektora znaczników na dole okna Dokument. Zobacz także Edycja kodu za pomocą selektora znaczników.

  2. Wciśnij Control+T (Windows) lub Command+T (Macintosh).

    Szybki edytor znaczników otwiera się w trybie Edytuj znacznik.

  3. Wprowadź nowe atrybuty, zmień istniejące atrybuty lub zmień nazwę znacznika.
  4. Wciśnij tabulator, aby przejść od jednego znacznika do następne, wciśnij Shift+tabulator, aby przejść z powrotem.

    Uwaga:

    Domyślnie, zmiany są nadawane do dokumentu, kiedy wciskasz tabulator lub Shift+tabulator.

  5. Aby zamknąć Szybki edytor znaczników oraz nadać wszystkie zmiany, wciśnij Enter.
  6. Aby wyjść bez dokonywania dalszych zmian, wciśnij Escape.

Otaczanie bieżącego zaznaczenia za pomocą znaczników HTML

  1. Wybierz niesformatowany tekst lub obiekt w trybie projektu.

    Uwaga:

    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.

  2. Wciśnij Control+T (Windows) lub Command+T (Macintosh), lub kliknij przycisk Szybkiego edytora znaczników w Inspektorze właściwości.

    Szybki edytor znaczników otwiera się w trybie Otocz znacznikiem.

  3. Wprowadź pojedynczy otwierający znacznik, taki jak strong i naciśnij Enter (Windows) lub Return (Macintosh).

    Znacznik zostanie wstawiony na początku bieżącego zaznaczenia i pasujący zamykający znacznik zostanie wstawiony na końcu.

  4. Aby wyjść bez dokonywania jakichkolwiek zmian, wciśnij Escape.

Używanie menu podpowiedzi w Szybkim edytorze znaczników

Szybki edytor znaczników zawiera menu podpowiedzi atrybutów, który wyświetla wszystkie prawidłowe atrybuty dla znacznika, który aktualnie wstawiasz lub edytujesz.

Możesz także wyłączyć menu podpowiedzi lub dopasować pauzę wyskakiwania menu w Szybkim edytorze znaczników.

Aby zobaczyć menu podpowiedzi, które zawiera listę prawidłowych atrybutów dla znacznika, zatrzymaj się na chwilę w czasie kiedy edytujesz nazwę atrybutu w Szybkim edytorze znaczników. Pojawi się menu podpowiedzi zawierające wszystkie prawidłowe atrybuty dla znacznika, który aktualnie edytujesz.

Podobnie, aby zobaczyć w menu podpowiedzi listę prawidłowych nazw znaczników, zatrzymaj się na chwilę w trakcie wprowadzania lub edytowania nazwy znacznika w Szybkim edytorze znaczników.

Uwaga:

Preferencje wskazówki do kodu w Szybkim edytorze znaczników są kontrolowane przez normalne preferencje wskazówki do kodu. Aby uzyskać więcej informacji, zobacz Ustawianie preferencji podpowiedzi do kodu.

  1. Wykonaj jedną z następujących czynności:
    • Zacznij wpisywać nazwę znacznika lub atrybutu. Zaznaczenie w menu Wskazówki do kodu przeskakuje 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źć.

  2. Wciśnij Enter, aby wstawić wybrany element lub dwukrotnie nań kliknij.
  3. Aby zamknąć menu podpowiedzi bez wstawiania elementu, naciśnij Enter albo kontynuuj pisanie.

Wyłączanie menu podpowiedzi albo zmienianie opóźnienia, z jakim się ono pojawia

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh) i zaznacz opcję Podpowiedzi do kodu.

    Pojawi się okno dialogowe Preferencje podpowiedzi do kodu.

  2. Aby wyłączyć menu podpowiedzi, wyłącz opcję Włącz podpowiedzi do 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

  1. Kliknij dokument.

    Znaczniki, które nadajesz w punkcie wstawiania, pojawiają się w selektorze znaczników.

  2. Kliknij z wciśniętym prawym przyciskiem myszy (Windows) lub klawiszem Control (Macintosh) znacznik w selektorze znaczników.
  3. Aby edytować znacznik, wybierz polecenie Edytuj znacznik z menu. Zrób wymagane zmiany w Szybkim edytorze znaczników. Więcej informacji na ten temat można znaleźć w części Edytowanie kodu za pomocą Szybkiego edytora znaczników.
  4. Aby edytować znacznik, wybierz polecenie Usuń znacznik z menu.

Wybierz obiekt odpowiadający znacznikowi

  1. Kliknij dokument.

    Znaczniki, które nadajesz w punkcie wstawiania, pojawiają się w selektorze znaczników.

  2. Zaznacz znacznik w selektorze znaczników.

    Obiekt reprezentujący znacznik zostanie wybrany na stronie.

    Uwaga:

    Użyj tej techniki do wybierania pojedynczych wierszy tabeli (znaczniki tr) lub komórek (znaczniki td).

Pisanie oraz edytowanie skryptów w widoku Projekt

Ze skryptami JavaScript oraz VBScript wykonywanymi po stronie klienta możesz pracować — zarówno w widoku Kod, jak i Projekt — w następujący sposób:

  • pisząc skrypt JavaScript lub VBScript dla strony bez opuszczania widoku Projekt;

  • tworząc łącze w dokumencie do zewnętrznego pliku skryptu bez opuszczania widoku Projekt;

  • edytując skrypt bez wychodzenia z widoku Projekt.

    Przed rozpoczęciem, wybierz polecenie Widok > Pomoce wizualne > Elementy niewidoczne, aby upewnić się, że markery skryptów pojawią się na stronie.

Pisanie skryptu uruchamianego po stronie klienta

  1. Umieść punkt wstawiania tam, gdzie chcesz wstawić skrypt.
  2. Wybierz polecenie Wstaw > HTML > Skrypt.

  3. W oknie wyboru pliku zaznacz odpowiedni skrypt.

    Uwaga:

    Nie trzeba dodawać otwierających i zamykających znaczników script.

Do dokumentu zostanie wstawiony znacznik script odpowiadający wybranemu plikowi.

Edycja skryptu

  1. Wybierz znacznik skryptu
  2. W Inspektorze właściwości, kliknij przycisk Edycja.

    Skrypt pojawia się w oknie dialogowym Właściwości skryptu.

    Jeżeli połączono z zewnętrznym plikiem skryptu, plik otworzy się w widoku Projekt, gdzie będzie można go zmieniać.

    Uwaga:

    Jeżeli pomiędzy znacznikami skryptu jest kod, otworzy się okno dialogowe Właściwości skryptu nawet jeżeli jest także łącze do zewnętrznego pliku skryptu.

  3. W polu Język wybierz albo JavaScript albo VBScript jako język skryptowy strony.
  4. W menu wyskakującym Typ, wybierz typ skryptu, który może być albo wykonywany po stronie serwera albo klienta.
  5. (Opcjonalnie) W polu tekstowym Źródło, określ zewnętrznie podłączony plik skryptu.

    Kliknij ikonę folderu lub przycisk Przeglądaj, aby odszukać plik, lub wpisz bezpośrednio jego ścieżkę.

  6. Przeprowadź edycję kodu skryptu i kliknij OK.

Edycja skryptu serwerowego ASP w widoku Projekt

Użyj Inspektora właściwości skryptu ASP do przeglądania i modyfikowania skryptu serwerowego ASP w widoku Projekt.

  1. W widoku Projekt, wybierz ikonę znacznika języka serwerowego.
  2. W Inspektorze właściwości, kliknij przycisk Edycja.
  3. Przeprowadź edycję kodu skryptu ASP i kliknij OK.

Edytowanie skryptu na stronie za pomocą Inspektora właściwości.

  1. W Inspektorze właściwości, wybierz język skryptowy z menu wyskakującego Języki, lub wpisz nazwę języka w oknie Język.

    Uwaga:

    Jeżeli używasz języka JavaScript, ale nie znasz numeru wersji, wybierz opcję JavaScript, a nie JavaScript1.1 lub JavaScript1.2.

  2. W menu wyskakującym Typ, wybierz typ skryptu, który może być albo wykonywany po stronie serwera albo klienta.
  3. (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ę.

  4. Kliknij opcję Edycja, aby zmodyfikować skrypt.

Używanie zachowań JavaScript

Możesz łatwo dołączyć skrypt zachowań JavaScript (po stronie klienta) używając zakładki Zachowania w Inspektorze znaczników. Więcej informacji można znaleźć w części Stosowanie wbudowanych zachowań JavaScript programu Dreamweaver.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online