- 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 korzystanie z panelu Projektant CSS do stosowania i modyfikowania gradientów w tle strony WWW.
Panel Projektant CSS umożliwia stosowanie gradientów na tłach serwisu WWW. Właściwość „gradient” jest dostępna w kategorii „background” (Tło).
Kliknij ikonę obok właściwości gradient, aby otworzyć panel Gradienty. Panel ten umożliwia wykonywanie następujących czynności:
- Wybieranie kolorów w różnych modelach (RGBa, szesnastkowy lub HSLa). Kombinacje kolorów można następnie zapisać w postaci próbek.
- Aby przywrócić nowy kolor do wartości oryginalnej, kliknij kolor oryginalny (K).
- Aby zmienić kolejność próbek, przeciągnij je na odpowiednie miejsca.
- Aby usunąć próbkę koloru, przeciągnij ją poza panel.
- Złożone gradienty można tworzyć przez ustawianie punktów zamknięcia kolorów. Kliknij w dowolnym miejscu między domyślnymi punktami zamknięcia koloru, aby utworzyć nowy kolor zamknięcia. Aby usunąć kolor zamknięcia, przeciągnij go poza panel.
- Określanie kąta gradientu liniowego.
- Aby wzór był powtarzany, zmodyfikuj właściwość background-repeat.
- Własne gradienty można zapisywać jako próbki.
Przypatrzmy się następującemu kodowi:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
- 57deg: wskazuje kąt gradientu liniowego w stopniach
- rgba(255, 255, 255, 1.00): określa pierwszy kolor zamknięcia
- 0%: określa punkt zamknięcia
W programie Dreamweaver obsługiwane są tylko procentowe wartości punktów zamknięcia (%). Jeśli zostanie użyta inna jednostka, np. px lub em, program Dreamweaver zinterpretuje wartość jako pustą (nil). Ponadto program Dreamweaver nie obsługuje kolorów CSS. Podanie takich kolorów w kodzie spowoduje, że zostaną odczytane jako wartość „nil”.
Renderowanie gradientów w przeglądarkach WWW
Program Dreamweaver można skonfigurować w taki sposób, aby renderował gradienty tła w odpowiedni sposób dla poszczególnych przeglądarek WWW. Program Dreamweaver dodaje do kodu stosowne prefiksy dostawcy, co umożliwia przeglądarkom prawidłowe wyświetlanie gradientów.
Obok formatu w3c możliwe jest generowanie następujących prefiksów dostawców:
- Webkit
- Firefox
- Opera
Program Dreamweaver domyślnie generuje następujące prefiksy dostawcy: Webkit oraz Widok aktywny programu Dreamweaver. W oknie dialogowym Preferencje można wybrać również pozostałe prefiksy dostawcy (Preferencje > Style CSS).
W przypadku właściwości cienia pola (box-shadow) zawsze generowane są prefiksy Webkit i w3c, niezależnie od tego, czy zostały wybrane w oknie Preferencje, czy też nie.
Wszelkie zmiany gradientu są również odzwierciedlane w składni specyficznej dla poszczególnych dostawców. Otwierając w programie Dreamweaver CC istniejący plik, który zawiera składnię specyficzną dla dostawcy, należy pamiętać o wybraniu odpowiednich prefiksów dostawcy w oknie Preferencje. Wynika to z faktu, że gdy użytkownik zastosuje lub zmieni gradienty, program Dreamweaver domyślnie uaktualni tylko kod dla prefiksu Webkit i Widok aktywny programu Dreamweaver. Pozostała część kodu specyficznego dla innych dostawców nie zostanie więc uaktualniona.
Zamiana obrazów i gradientów tła
Kolejność obrazów w tle i gradientów określoną w kodzie można zmienić jednym kliknięciem.
Kliknij strzałkę obok właściwości url lub gradient w panelu Projektant CSS.
Program Dreamweaver CC zawiera podstawową implementację funkcji zamiany tła. Jeśli jest używanych wiele wartości lub obrazów, funkcja zamiany może nie działać w oczekiwany sposób. Załóżmy, że jako tło zastosowano obraz, następnie drugi obraz, a następnie gradient. Zamiana gradientu spowoduje, że kolejność będzie następująca: gradient, drugi obraz, pierwszy obraz.