- 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
Wyśrodkowywanie bloków zawartości, symulowanie kolumn, tworzenie różnych obszarów koloru i osiąganie innych efektów i wiele innych opcji za pomocą znaczników DIV.
Układ strony można tworzyć, ręcznie wstawiając znaczniki DIV i stosując do nich pozycjonujące style CSS. Znacznik DIV to znacznik definiujący logiczne podziały zawartości na stronie WWW. Za pomocą znaczników DIV można wyśrodkowywać bloki zawartości, symulować efekty kolumn, tworzyć różne obszary kolorów itd.
Jeżeli nie wiesz, jak wykorzystać znaczniki DIV i style CSS do tworzenia stron WWW, możesz utworzyć układ CSS na podstawie jednego z gotowych układów, dołączonych do programu Dreamweaver. Jeżeli natomiast nie lubisz posługiwać się stylami CSS, ale umiesz korzystać z tabel, to możesz posłużyć się tabelami.
Wstawianie znaczników DIV
Za pomocą znaczników DIV można tworzyć bloki układu CSS i rozmieszczać je w dokumencie. Jest to przydatne, jeżeli do dokumentu jest już dołączony arkusz stylów CSS, który zawiera style pozycjonujące. Program Dreamweaver umożliwia szybkie wstawianie znacznika DIV i stosowanie do niego istniejących stylów.
-
Umieść punkt wstawiania w tym miejscu w oknie dokumentu, gdzie chcesz wstawić znacznik DIV.
-
Wykonaj jedną z następujących czynności:
Wybierz polecenie Wstaw > HTML > Div.
W kategorii HTML panelu Wstaw kliknij opcję Div.
-
Ustaw dowolne spośród poniższych opcji:
Wstaw
Pozwala wybrać położenie znacznika DIV oraz nazwę znacznika (jeśli nie jest to nowy znacznik).
Klasa
Wyświetla styl klasowy, przypisany obecnie do znacznika. Jeżeli dołączysz arkusz stylów, to na liście pojawią się klasy zdefiniowane w tym arkuszu. Za pomocą tego wyskakującego menu można wybrać styl znacznika.
ID
Umożliwia zmianę nazwy służącej do identyfikowania znacznika DIV. Jeżeli dołączysz arkusz stylów, to na liście pojawią się identyfikatory zdefiniowane w tym arkuszu. Identyfikatory bloków, które już istnieją w dokumencie, nie pojawiają się na liście.
Uwaga:Program Dreamweaver wyświetli ostrzeżenie, jeżeli wpisze się taki sam identyfikator dla innego znacznika w dokumencie.
Nowa reguła CSS
Otwiera okno dialogowe Nowa reguła CSS.
-
Kliknij przycisk OK.
Znacznik DIV ma w dokumencie postać pola z tekstem zastępczym. Gdy przesuniesz wskaźnik nad brzeg tego pola, program Dreamweaver je podświetli.
Jeżeli znacznik DIV jest pozycjonowany bezwzględnie, to staje się elementem AP. (Znaczniki DIV, które nie są pozycjonowane bezwzględnie, można edytować).
Edytowanie znaczników DIV
Po wstawieniu znacznika DIV można nim manipulować i dodawać do niego zawartość.
Znaczniki DIV o pozycjonowaniu bezwzględnym stają się elementami AP.
Jeżeli przypiszesz krawędzie do znaczników DIV lub zaznaczysz opcję Kontury układu CSS, to bloki DIV będą miały widoczne krawędzie. (Opcja Kontury układu CSS w menu Widok > Pomoce wizualne jest domyślnie zaznaczona). Gdy przesuniesz wskaźnik nad znacznik DIV, program Dreamweaver podświetli ten znacznik. Można zmienić kolor podświetlenia albo wyłączyć podświetlanie.
Po zaznaczeniu znacznika DIV można wyświetlić i edytować jego reguły za pomocą panelu Projektant CSS. Zawartość znacznika DIV, umieszczając po prostu punkt wstawiania wewnątrz znacznika i wstawiając zawartość w taki sam sposób, jak w każdym innym miejscu na stronie.
-
Wykonaj jedną z następujących czynności, aby zaznaczyć znacznik DIV:
- Kliknij krawędź znacznika DIV.
Uwaga:Położenie krawędzi wskazuje podświetlenie.
Kliknij wewnątrz znacznika DIV i dwa razy naciśnij klawisze Control+A (Windows) lub Command+A (Macintosh).
Kliknij wewnątrz znacznika DIV, a potem wybierz ten znacznik DIV z przybornika znaczników na dole okna dokumentu.
-
Jeżeli panel Projektant CSS nie jest widoczny, wybierz polecenie Okno > Projektant CSS, aby go otworzyć.
W panelu wyświetlone zostaną reguły zastosowane do zaznaczonego znacznika DIV.
-
Wprowadź potrzebne zmiany.
Zmiana koloru podświetlenia znaczników DIV
Gdy ustawisz wskaźnik nad brzegiem znacznika DIV w widoku Projekt, program Dreamweaver podświetli krawędzie tego znacznika. W oknie dialogowym Preferencje można włączać lub wyłączać podświetlanie oraz zmieniać kolor podświetlenia.
-
Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
-
Na liście po lewej stronie wybierz pozycję Podświetlenie.
-
Wprowadź zmiany, a następnie kliknij OK:
Aby zmienić kolor podświetlania znaczników DIV, kliknij pole koloru Najazd, a potem wybierz kolor podświetlenia za pomocą próbnika kolorów (albo wpisz wartość koloru podświetlenia w systemie szesnastkowym w pole tekstowe).
Aby włączyć lub wyłączyć podświetlanie znaczników DIV, zaznacz lub wyłącz pole wyboru Pokaż obok opcji Najazd.
Uwaga:Te opcje dotyczą wszystkich obiektów, np. tabel, które program Dreamweaver podświetla po najechaniu na nie wskaźnikiem myszy.
Bloki układu CSS
Podczas pracy w widoku Projekt można wyświetlać wizualizację bloków układu CSS. Blok układu CSS to element strony HTML, który można umieścić w dowolnym miejscu na stronie. Mówiąc dokładniej, blok układu to znacznik DIV bez atrybutu display:inline albo jakikolwiek inny element strony z atrybutem display:block, position:absolute albo position:relative w deklaracji CSS. Poniżej podano kilka przykładów elementów, które stanowią bloki układu CSS w programie Dreamweaver:
Znacznik DIV
Obraz z pozycjonowaniem bezwzględnym albo względnym
Znacznik a z przypisanym stylem display:block
Akapit z pozycjonowaniem bezwzględnym albo względnym
Do celów renderowania wizualnego do bloków CSS nie zalicza się elementów z atrybutem „inline” (czyli takich, które mieszczą się w wierszu tekstu) ani prostych elementów blokowych, takich jak akapity.
Program Dreamweaver udostępnia kilka pomocy wizualnych do wyświetlania bloków układu CSS. Można np. włączyć kontury, tła i model blokowy dla bloków układu CSS na czas projektowania. Można również wyświetlać podpowiedzi, które podają właściwości wybranego bloku układu CSS, gdy umieścisz wskaźnik myszy nad tym blokiem.
Poniższa lista pomocy wizualnych dla bloków układu CSS zawiera opisy poszczególnych elementów wizualizowanych przez program Dreamweaver:
Kontury układu CSS
Program wyświetla kontury wszystkich bloków układu CSS na stronie.
Tła układu CSS
Program wyświetla tymczasowo przypisane kolory tła dla poszczególnych bloków układu CSS i ukrywa inne kolory tła lub obrazy, które byłyby normalnie wyświetlane na stronie.
Po włączeniu pomocy wizualnych do wyświetlania tła bloków układu CSS program Dreamweaver automatycznie przydziela każdemu blokowi układu CSS inny kolor tła. (Dreamweaver wybiera te kolory na podstawie algorytmu — nie można samodzielnie przypisywać kolorów). Przypisane kolory wyraźnie się różnią, co ułatwia rozróżnianie poszczególnych bloków układu CSS.
Układ CSS — model blokowy
Wyświetla model blokowy (czyli odstępy od krawędzi i marginesy) zaznaczonego bloku układu CSS.
Wyświetlanie bloków układu CSS
W razie potrzeby można włączać lub wyłączać pomoce wizualne układu CSS. Aby wyświetlić wszystkie bloki w układzie CSS, wybierz polecenie Widok > Opcje widoku Projekt > Pomoce wizualne.
Następnie można włączyć lub wyłączyć wyświetlanie następujących opcji: Tła układu CSS, Model pól układu CSS oraz Kontury układu CSS.