- Podręcznik użytkownika programu Dreamweaver
- Wprowadzenie
- Program Dreamweaver a platforma Creative Cloud
- Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
- Biblioteki Creative Cloud w programie Dreamweaver
- Używanie plików programu Photoshop w programie Dreamweaver
- Praca z programami Adobe Animate oraz Dreamweaver
- Wydzielanie przygotowanych do wyświetlania w Internecie plików SVG z bibliotek
- Przestrzenie robocze i widoki w programie Dreamweaver
- Konfigurowanie serwisów
- Informacje o serwisach programu Dreamweaver
- Konfigurowanie lokalnej wersji serwisu
- Nawiązywanie połączenia z serwerem publikacji
- Konfigurowanie serwera testowego
- Importowanie i eksportowanie ustawień serwisu programu Dreamweaver
- Przenoszenie istniejących serwisów z serwera zdalnego do lokalnego katalogu głównego serwisu
- Funkcje ułatwień dostępu w programie Dreamweaver
- Ustawienia zaawansowane
- Ustawianie preferencji serwisu dotyczących transferu plików
- Określanie ustawień serwera proxy w programie Dreamweaver
- Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
- Korzystanie z systemu Git w programie Dreamweaver
- Zarządzanie plikami
- Tworzenie i otwieranie plików
- Zarządzanie plikami i folderami
- Odbieranie plików i wysyłanie ich na serwer
- Pobieranie plików do edycji i odkładanie ich na serwer
- Synchronizacja plików
- Porównywanie plików w poszukiwaniu różnic
- Maskowanie plików i folderów w serwisie programu Dreamweaver
- Włączanie funkcji Uwagi do projektu w serwisach programu Dreamweaver
- Zapobieganie potencjalnemu obejściu funkcji Gatekeeper
- Układ i projekt
- Korzystanie z wizualnych pomocy do układu
- Informacje o tworzeniu układu strony za pomocą stylów CSS
- Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap
- Tworzenie i używanie zapytań o media w programie Dreamweaver
- Prezentacja zawartości za pomocą tabel
- Kolory
- Tworzenie reagujących projektów za pomocą układów elastycznej siatki
- Narzędzie Extract w programie Dreamweaver
- CSS
- Podstawowe informacje o stylach CSS
- Tworzenie układu strony za pomocą panelu Projektant CSS
- Korzystanie z preprocesorów CSS w programie Dreamweaver
- Ustawianie preferencji stylów CSS w programie Dreamweaver
- Przenoszenie reguł CSS w programie Dreamweaver
- Konwertowanie stylu CSS wewnątrz znacznika na regułę CSS w programie Dreamweaver
- Posługiwanie się znacznikami DIV
- Stosowanie gradientów na tło
- Tworzenie i edytowanie efektów przejść CSS3 w programie Dreamweaver
- Formatowanie kodu
- Zawartość strony i zasoby
- Ustawianie właściwości strony
- Ustawianie właściwości CSS dla nagłówków i łączy
- Praca z tekstem
- Znajdowanie i zastępowanie tekstu, znaczników i atrybutów
- Panel DOM
- Edytowanie w widoku aktywnym
- Kodowanie znaków dokumentu w programie Dreamweaver
- Zaznaczanie i wyświetlanie elementów w oknie Dokument
- Ustawianie właściwości tekstu na panelu Inspektor właściwości
- Sprawdzanie pisowni na stronie internetowej
- Używanie linii poziomych w programie Dreamweaver
- Dodawanie i modyfikowanie kombinacji czcionek w programie Dreamweaver
- Praca z zasobami
- Wstawianie i aktualizowanie dat w programie Dreamweaver
- Tworzenie list ulubionych zasobów w programie Dreamweaver i zarządzanie nimi
- Wstawianie i edytowanie obrazów w programie Dreamweaver
- Dodawanie obiektów multimedialnych
- Dodawanie zawartości wideo w programie Dreamweaver
- Wstawianie wideo HTML5
- Wstawianie plików SWF
- Dodawanie efektów dźwiękowych
- Wstawianie obiektów audio HTML5 w programie Dreamweaver
- Praca z elementami bibliotek
- Stosowanie pisma arabskiego i hebrajskiego w programie Dreamweaver
- Łączenie i przeglądanie
- Efekty i widgety jQuery
- Tworzenie kodu serwisów WWW
- Informacje o tworzeniu kodu w programie Dreamweaver
- Środowisko programistyczne w programie Dreamweaver
- Ustawianie preferencji kodowania
- Dostosowywanie ustawień kolorowania kodu
- Pisanie i edytowanie kodu
- Podpowiedzi i uzupełnianie kodu
- Zwijanie i rozwijanie kodu
- Ponowne wykorzystywanie fragmentów kodu za pomocą funkcji Urywki
- Linting: oczyszczanie kodu z błędów
- Optymalizacja kodu
- Edytowanie kodu w widoku Projekt
- Praca z zawartością znacznika HEAD strony
- Wstawianie dołączeń po stronie serwera w programie Dreamweaver
- Korzystanie z bibliotek znaczników w programie Dreamweaver
- Importowanie własnych znaczników do programu Dreamweaver
- Używanie zachowań JavaScript (instrukcje ogólne)
- Stosowanie wbudowanych zachowań JavaScript
- Omówienie języków XML i XSLT
- Wykonywanie transformacji XSL po stronie serwera w programie Dreamweaver
- Wykonywanie przekształceń XSL po stronie klienta w programie Dreamweaver
- Dodawanie encji znaków w kodzie XSLT w programie Dreamweaver
- Formatowanie kodu
- Obiegi pracy związane z wieloma produktami
- Instalowanie i używanie rozszerzeń programu Dreamweaver
- Aktualizacje w aplikacji w programie Dreamweaver
- Wstawianie dokumentów Microsoft Office w programie Dreamweaver (tylko Windows)
- Praca z programami Fireworks i Dreamweaver
- Edycja zawartości w stronach programu Dreamweaver za pomocą aplikacji Contribute
- Integracja programu Dreamweaver z aplikacją Business Catalyst
- Tworzenie spersonalizowanych kampanii rozsyłanych pocztą elektroniczną
- Szablony
- Informacje o szablonach programu Dreamweaver
- Rozpoznawanie szablonów oraz dokumentów opartych na szablonach
- Tworzenie szablonu programu Dreamweaver
- Tworzenie edytowalnych regionów w szablonach
- Tworzenie powtarzalnych regionów i tabel w programie Dreamweaver
- Używanie regionów opcjonalnych w szablonach
- Definiowanie edytowalnych atrybutów znacznika w programie Dreamweaver
- Tworzenie zagnieżdżonych szablonów w programie Dreamweaver
- Edytowanie, aktualizowanie i usuwanie szablonów
- Eksportowanie i importowanie zawartości XML w programie Dreamweaver
- Stosowanie szablonu lub usuwanie go z istniejącego dokumentu
- Edycja zawartości w szablonach programu Dreamweaver
- Reguły składni dla znaczników szablonu w programie Dreamweaver
- Ustawianie preferencji podświetlenia dla regionów szablonów
- Korzyści wynikające z używania szablonów w programie Dreamweaver
- Urządzenia mobilne i obsługa wielu ekranów
- Dynamiczne serwisy, strony i formularze WWW
- Podstawowe informacje o aplikacjach internetowych
- Konfigurowanie komputera do programowania aplikacji
- Rozwiązywanie problemów z połączeniami z bazą danych
- Usuwanie skryptów połączenia w programie Dreamweaver
- Projektowanie stron dynamicznych
- Omówienie źródeł zawartości dynamicznej
- Definiowanie źródeł zawartości dynamicznej
- Dodawanie dynamicznej zawartości do stron
- Modyfikowanie dynamicznej zawartości w programie Dreamweaver
- Wyświetlanie rekordów z bazy danych
- Udostępnianie aktywnych danych w programie Dreamweaver oraz rozwiązywanie problemów z takimi danymi
- Dodawanie własnych zachowań serwerowych w programie Dreamweaver
- Tworzenie formularzy w programie Dreamweaver
- Zbieranie informacji od użytkowników za pomocą formularzy
- Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver
- Tworzenie formularzy WWW
- Rozszerzona obsługa elementów formularza w języku HTML5
- Tworzenie formularzy za pomocą programu Dreamweaver
- Tworzenie aplikacji metodą graficzną
- Tworzenie stron wzorca i szczegółów w programie Dreamweaver
- Tworzenie stron wyszukiwania i wyników
- Tworzenie strony wstawiania rekordów
- Tworzenie strony uaktualniania rekordów w programie Dreamweaver
- Tworzenie stron usuwania rekordów w programie Dreamweaver
- Używanie poleceń ASP do modyfikacji bazy danych w programie Dreamweaver
- Tworzenie strony rejestracji
- Tworzenie strony logowania
- Tworzenie strony, do której dostęp będą mieli tylko uwierzytelnieni użytkownicy
- Zabezpieczanie folderów w aplikacji ColdFusion za pomocą programu Dreamweaver
- Korzystanie ze składników ColdFusion w programie Dreamweaver
- Testowanie, podgląd i publikacja serwisów WWW
- Rozwiązywanie problemów
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.
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.
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.
-
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.
-
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.
-
W Inspektorze właściwości kliknij przycisk Atrybuty, aby edytować lub dodać nowe atrybuty znacznika.
-
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ść).
-
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.
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 trybie projektu, kliknij na stronie tam, gdzie 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.
Znacznik jest wstawiany do twojego kodu, wraz z pasującym znacznikiem zamykającym, jeżeli zachodzi taka potrzeba.
-
Naciśnij Escape, aby wyjść bez robienia jakichkolwiek zmian.
Edycja znacznika HTML
-
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.
-
Wciśnij Control+T (Windows) lub Command+T (Macintosh).
Szybki edytor znaczników otwiera się w trybie Edytuj znacznik.
-
Wprowadź nowe atrybuty, zmień istniejące atrybuty lub zmień nazwę znacznika.
-
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.
-
Aby zamknąć Szybki edytor znaczników oraz nadać wszystkie zmiany, wciśnij Enter.
-
Aby wyjść bez dokonywania dalszych zmian, wciśnij Escape.
Otaczanie bieżącego zaznaczenia za pomocą znaczników HTML
-
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.
-
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.
-
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.
-
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.
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.
-
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źć.
-
Wciśnij Enter, aby wstawić wybrany element lub dwukrotnie nań kliknij.
-
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
-
Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh) i zaznacz opcję Podpowiedzi do kodu.
Pojawi się okno dialogowe Preferencje podpowiedzi do kodu.
-
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
-
Kliknij dokument.
Znaczniki, które nadajesz w punkcie wstawiania, pojawiają się w selektorze znaczników.
-
Kliknij z wciśniętym prawym przyciskiem myszy (Windows) lub klawiszem Control (Macintosh) znacznik w selektorze znaczników.
-
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.
-
Aby edytować znacznik, wybierz polecenie Usuń znacznik z menu.
Wybierz obiekt odpowiadający znacznikowi
-
Kliknij dokument.
Znaczniki, które nadajesz w punkcie wstawiania, pojawiają się w selektorze znaczników.
-
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
-
Umieść punkt wstawiania tam, gdzie chcesz wstawić skrypt.
-
Wybierz polecenie Wstaw > HTML > Skrypt.
-
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
-
Wybierz znacznik skryptu
-
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.
-
W polu Język wybierz albo JavaScript albo VBScript jako język skryptowy strony.
-
W menu wyskakującym Typ, wybierz typ skryptu, który może być albo wykonywany po stronie serwera albo klienta.
-
(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ę.
-
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.
-
W widoku Projekt, wybierz ikonę znacznika języka serwerowego.
-
W Inspektorze właściwości, kliknij przycisk Edycja.
-
Przeprowadź edycję kodu skryptu ASP i kliknij OK.
Edytowanie skryptu na stronie za pomocą Inspektora właściwości.
-
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.
-
W menu wyskakującym Typ, wybierz typ skryptu, który może być albo wykonywany po stronie serwera albo klienta.
-
(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ż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.