Podsumowanie nowych funkcji

W programie Dreamweaver CC w wersji 2015 nacisk położono na możliwości tworzenia układów elastycznych, udoskonalenia funkcji edycji kodu, podgląd stron WWW na urządzeniach oraz wydzielanie gotowych do wyświetlania w Internecie obrazów w wielu rozdzielczościach z kompozycji programu Photoshop w trybie wsadowym. Integracja ze strukturą Bootstrap ułatwia tworzenie serwisów WWW o elastycznym układzie, przeznaczonych przede wszystkim na urządzenia mobilne. Paletę funkcji do tworzenia elastycznych układów uzupełniają wizualne zapytania o media. Jest to narzędzie umożliwiające wizualizację i modyfikowanie projektu przy różnych szerokościach ekranu (nazywanych punktami przerwań).

Nowa wersja zawiera także kilka udoskonaleń związanych z edycją w widoku aktywnym oraz panelem Projektant CSS. Poniższy artykuł zawiera omówienie tych nowych funkcji i udoskonaleń, a także odsyłacze do zasobów pozwalających zdobyć dodatkowe informacje.

Program Dreamweaver umożliwia testowanie gotowych do publikacji stron WWW na wielu urządzeniach jednocześnie. Pozwala to sprawdzić, w jaki sposób strona będzie przebudowywana przy różnych szerokościach ekranu, a także przetestować jej funkcje interaktywne. Wszystkie te zadania można wykonać bez potrzeby instalowania aplikacji mobilnej lub fizycznego łączenia urządzeń z komputerem. Wystarczy zeskanować na urządzeniu automatycznie wygenerowany kod QR, co pozwoli wyświetlić podgląd stron.

Funkcja inspekcji w widoku aktywnym uruchomiona na komputerze jest odzwierciedlana również na wszystkich połączonych urządzeniach, co ułatwia sprawdzenie poszczególnych elementów układu i wprowadzenie niezbędnych poprawek.

Szczegółowe informacje: Podgląd i inspekcja stron WWW na wielu urządzeniach.

Wizualne zapytania o media

Paski wizualnych zapytań o media stanowią graficzną reprezentację zapytań istniejących na stronie. Ułatwia to wizualizację strony WWW w różnych punktach przerwań oraz analizowanie sposobu reorganizacji układu poszczególnych elementów strony przy różnych wielkościach portu ekranowego. Wyświetlając stronę przy różnych wielkościach portu ekranowego, można wprowadzić zmiany projektu odpowiednie dla konkretnej wielkości, nie wpływając na wygląd strony na innych ekranach.

Funkcja Wizualne zapytania o media składa się trzech pasków, wyświetlanych w postaci trzech poziomych rzędów. Każdy z nich odpowiada jednej kategorii zapytań o media:

• Zielony: zapytania o media z warunkami max-width
• Niebieski: zapytania o media z warunkami min-width oraz max-width
•  Fioletowy: zapytania o media z warunkami min-width

Więcej informacji: Wizualne zapytania o media.

Obsługa lintingu

Nowa wersja programu Dreamweaver umożliwia debugowanie kodu w poszukiwaniu typowych błędów przez zastosowanie procesu lintingu. Linting to proces polegający na analizie kodu i oznaczaniu potencjalnych błędów lub miejsc „podejrzanych”. Program Dreamweaver może przeprowadzać linting plików HTML, CSS i JavaScript w czasie ich wczytywania, zapisywania lub edytowania. Wykryte błędy i ostrzeżenia są wyświetlane w panelu Wyjście.

Więcej informacji: Linting kodu.

Obsługa skrótów Emmet

Czy często zdarza Ci się wpisywać choć kilka wierszy kodu w programie Dreamweaver? Jeśli tak, skorzystaj ze skrótów Emmet, aby przyspieszyć kodowanie. Skróty te można łatwo zapamiętać i szybko się je wpisuje, a po naciśnięciu klawisza Tab w widoku Kod są rozwijane do postaci pełnego kodu.

Szczegółowe informacje: Wstawianie kodu za pomocą skrótów Emmet.

Podgląd w widoku Kod

Pracując w widoku Podziel można od razu obserwować wszelkie zmiany obrazów lub kolorów w widoku aktywnym lub widoku Projekt. Jeśli jednak wolisz pracować w samym widoku Kod, obrazy są widoczne tylko jako nazwy plików, często niewiele mówiące o zawartości. Kolory również są definiowane w mało intuicyjny sposób przez zbiór liczb (o ile nie używa się predefiniowanych angielskich nazw kolorów). W nowej wersji programu Dreamweaver można jednak szybko wyświetlić podgląd obrazów i kolorów bezpośrednio w widoku Kod. Ułatwia to wizualne powiązanie nazwy obrazu lub wartości koloru z faktyczną zawartością. Taka możliwość pozwala szybciej podejmować decyzje związane z projektem i znacznie skraca czas tworzenia serwisu.

Więcej informacji: Podgląd obrazów i kolorów w widoku Kod.

W widoku Kod jest również wyświetlany podgląd błędów. Numer wiersza zawierającego błędny kod jest podświetlany na czerwono. Zatrzymaj kursor myszy nad takim numerem, aby wyświetlić krótki opis błędu.

Uwaga: Wyświetlany jest tylko pierwszy błąd w danym wierszu. Jeśli wiersz zawiera tylko ostrzeżenie, wyświetlany jest opis tego ostrzeżenia. Jeśli wiersz zawiera ostrzeżenie i błąd, zostanie wyświetlony tylko opis błędu.

Nowe urywki kodu

Urywki to fragmenty kodu, które można wielokrotnie wykorzystywać w projektach. W tej wersji programu Dreamweaver udostępniono nowe i uaktualnione urywki kodu:

• Urywki Bootstrap
• Urywki CSS — animacje i przejścia
• Urywki CSS — efekty
• Urywki CSS
• Urywki HTML
• Urywki JavaScript (uaktualnione)
• Urywki PHP
• Urywki preprocesorów
• Urywki układów elastycznych

Informacje o korzystaniu z urywków kodu: Praca z urywkami kodu.

Ponadto funkcja synchronizacji z chmurą umożliwia zachowanie spójności urywków kodu we wszystkich zainstalowanych instancjach programu Dreamweaver. Informacje o synchronizacji urywków kodu z Creative Cloud i innymi zainstalowanymi instancjami programu Dreamweaver zawiera artykuł Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud.

Integracja ze strukturą Bootstrap

Bootstrap to najpopularniejsza, bezpłatna struktura programistyczna HTML, CSS i JavaScript, służąca do tworzenia serwisów WWW o elastycznym układzie, przeznaczonych głównie na urządzenia mobilne. Bootstrap udostępnia szablony CSS i HTML o elastycznym układzie, służące do tworzenia przycisków, tabel, elementów nawigacyjnych, karuzeli obrazów i innych składników używanych na stronach WWW. Dostępnych jest również kilka opcjonalnych wtyczek JavaScript. Dzięki temu wystarczy nawet podstawowa wiedza na temat programowania, aby tworzyć doskonałe serwisy WWW o elastycznym układzie.

Program Dreamweaver umożliwia tworzenie dokumentów na podstawie struktury Bootstrap, a także edytowanie istniejących stron WWW utworzonych w tej strukturze. Pracę nad serwisem Bootstrap można rozpocząć od wykorzystania jednego z szablonów początkowych Bootstrap, dostępnych w oknie dialogowym Nowy Dokument (Szablony początkowe > Szablony Bootstrap). 

• Bootstrap-Agency (agencja)
  
• Bootstrap-eCommerce (handel elektroniczny)
• Bootstrap-Portfolio (portfolio)
• Bootstrap-Product (produkt)
• Bootstrap-Real Estate (nieruchomości)
• Bootstrap-Resume (życiorys)
  

W oknie dialogowym Nowy dokument można również utworzyć własny dokument Bootstrap (Nowy dokument > Bootstrap). Pozwoli to zbudować serwis krok po kroku z użyciem składników Bootstrap dostępnych w panelu Wstaw, takich jak harmonijki i karuzele. Można również wykorzystać istniejące kompozycje z programu Photoshop, wydzielając obrazy, czcionki, style, tekst i inne zasoby za pomocą usługi Extract bezpośrednio do dokumentu Bootstrap.

Otwierać można zarówno gotowe pliki Bootstrap, jak i projekty w toku. Program Dreamweaver umożliwia nie tylko edytowanie kodu w takich plikach, ale także korzystanie z narzędzi graficznych do modyfikacji układu, takich jak edycja w widoku aktywnym, wizualne funkcje panelu Projektant CSS, wizualne zapytania o media oraz narzędzie Extract. 

Szczegółowe informacje: Praca z plikami Bootstrap.

Edycja tabel w widoku aktywnym

W widoku aktywnym można szybko i łatwo edytować tabele. Służą do tego następujące opcje, których można używać samodzielnie albo w dowolnej kombinacji:

Więcej informacji: Zmiana rozmiaru tabel oraz Formatowanie tabel i komórek.

Nowe menu w widoku aktywnym

Funkcje edycji w widoku aktywnym zostały rozszerzone; w widoku tym można teraz korzystać z następujących menu i opcji:

• Modyfikuj
• Format
• Polecenia
• Serwis
• opcji „Wklej specjalnie” w menu Edycja i menu kontekstowym

Obsługa elementów interfejsu użytkownika jQuery w widoku aktywnym

Panel Wstaw umożliwia teraz wstawianie widgetów jQuery bezpośrednio w widoku aktywnym. Przeciągnij wybrany element z panelu Wstaw do widoku aktywnego i przytrzymaj przycisk myszy, aby skorzystać z jednej z następujących opcji wstawiania:

• Aktywne linie pomocnicze: są to linie pomocnicze wyświetlane po zatrzymaniu kursora myszy nad elementami w widoku aktywnym podczas przeciągania elementu z panelu Wstaw. Aktywne linie pomocnicze umożliwiają wstawianie elementów na górze lub na dole albo po lewej lub po prawej stronie wskazanego elementu.

• Ikona DOM: pojawia się po chwilowym zatrzymaniu kursora podczas wyświetlania aktywnych linii pomocniczych. Kliknięcie tej ikony umożliwia wyświetlenie struktury DOM w wyskakującym okienku i precyzyjne wstawienie elementu w odpowiednim miejscu w strukturze dokumentu.

• Asystent pozycjonowania: ułatwia umieszczanie elementu przed lub za wskazanym elementem w widoku aktywnym albo zagnieżdżanie go w tym elemencie.

Więcej informacji: Wstawianie elementów bezpośrednio w widoku aktywnym.

Panel DOM

Okno Przegląd elementu zostało przekształcone w panel DOM (Okna > DOM). Panel DOM zawiera wszystkie funkcje udostępniane wcześniej w oknie Przegląd elementu, a także inne, dodatkowe opcje. Panel ten jest dostępny we wszystkich przestrzeniach roboczych i ma charakter trwały, co oznacza, że można otworzyć dwa dokumenty i dla obu z nich jednocześnie wyświetlić odpowiednie panele DOM.

Panel DOM umożliwia wykonywanie następujących czynności:

• Przeciąganie elementów z panelu Wstaw w celu wstawienia ich w precyzyjnie wybranym miejscu w strukturze dokumentu.
• Kopiowanie, wklejanie, powielanie lub usuwanie elementów struktury dokumentu.
• Wyświetlanie dowolnego elementu na stronie w kontekście struktury dokumentu. Aktywny (wskazany) element jest podświetlany w panelu DOM.

Szczegółowe informacje o posługiwaniu się panelem DOM i edytowaniu struktury HTML za pomocą tego panelu zawiera sekcja Panel DOM.

Wskazówki do kodu SVG w dokumentach HTML

W dokumentach HTML są teraz obsługiwane wskazówki do kodu dla wszystkich elementów i atrybutów SVG. Wskazówki te umożliwiają dodawanie elementów SVG w dokumentach HTML w taki sam sposób, jak w dokumencie SVG. Z funkcji wskazówek korzysta się w widoku Kod.

Zapowiedzi technologii

Począwszy od tej wersji, zespół twórców programu Dreamweaver będzie udostępniać wstępne wersje pewnych funkcji w celu zebrania opinii klientów. Pozwoli to na dalsze udoskonalanie takich technologii i wprowadzenie ich do głównego zbioru funkcji programu Dreamweaver. Funkcje eksperymentalne są dostępne w kategorii Zapowiedzi technologii w oknie dialogowym Preferencje.

W tej wersji wprowadzono zapowiedź funkcji Podświetlanie kodu. Służy ona do podświetlania wszystkich wystąpień zaznaczonego tekstu w widoku Kod.

Aby skorzystać z tej funkcji, wykonaj następujące czynności:

Między kolejnymi wystąpieniami podświetlonego tekstu można przechodzić za pomocą następujących klawiszy skrótów:

• Zaznacz następne wystąpienie: F3 (Win); Cmd+G (Mac)
• Zaznacz poprzednie wystąpienie: Shift+F3 (Win); Cmd+Shift+G (Mac)

Niestandardowy podgląd w widoku Kod z użyciem funkcji API ShowPreview

W tej wersji programu Dreamweaver można generować niestandardowe podglądy, wyświetlane w wyskakującym okienku po zatrzymaniu kursora myszy nad kodem w widoku Kod. Takie niestandardowe podglądy wdraża się z użyciem nowego interfejsu API showPreview oraz istniejących funkcji API mm:browsercontrol. Za pomocą tych funkcji API można na przykład wyświetlić podgląd wszystkich parametrów funkcji JavaScript po wskazaniu jej nazwy kursorem myszy.

Więcej informacji: Informacje o interfejsie API programu Dreamweaver: funkcje obsługi widoku Kod.

Zwijanie kodu

W poprzednich wersjach programu Dreamweaver trzeba było zaznaczyć bloki kodu w widoku Kod, aby je zwinąć. W tej wersji i w kolejnych wersjach kod zwija się, zatrzymując kursor myszy nad numerami wierszy i klikając pojawiający się trójkącik.

Funkcja zwijania kodu jest dostępna w plikach HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML i SVG, a jej działanie opiera się na blokach kodu.

Operacje kopiowania, wycinania i wklejania oraz przeciągania zawartości zapamiętują stan zwinięcia kodu. Jeśli na przykład skopiuje się zwinięty blok kodu, a następnie wybierze operację Wklej, to skopiowany tekst zostanie wklejony również w postaci zwiniętego bloku.

W plikach HTML, w przeciwieństwie do wcześniejszej funkcji zwijania kodu, zwinięta zawartość będzie teraz obejmować znacznik zamykający i będzie renderowana w inny sposób niż poprzednio. Zwiększono również liczbę znaków wyświetlanych w zwiniętym bloku kodu. Ułatwia to podgląd początkowych atrybutów (jeśli istnieją).

Szczegółowe informacje: Zwijanie kodu.

Udoskonalenia usługi Extract

• Extract dla urządzeń
• Obsługa jednostek procentowych (%)

Extract dla urządzeń

Urządzenia mają nie tylko różne rozmiary, ale też różne rozdzielczości. Planując serwis WWW o elastycznym układzie, trzeba uwzględnić wiele wersji obrazów w różnych rozdzielczościach, aby umożliwić prawidłowy rendering stron na różnych urządzeniach. Jednak ręczne przygotowanie tak wielu różnych wersji rozdzielczości dla wszystkich obrazów w projekcie może być żmudnym zadaniem.

Narzędzie Extract w programie Dreamweaver znacznie upraszcza ten proces. Wydzielając obrazy z kompozycji programu Photoshop w programie Dreamweaver 2015, można również wybrać opcję wydzielania danego obrazu w wielu wersjach o różnych rozdzielczościach. Obraz w pliku Photoshop jest podczas wydzielania automatycznie skalowany z różnymi, predefiniowanymi rozdzielczościami.

Tak przygotowane obrazy można następnie wyświetlać odpowiednio do wymagań konkretnego urządzenia, posługując się kodem JavaScript lub zapytaniami o media. Na przykład dla wyświetlaczy Retina HD można przygotować dwukrotnie większą wersję obrazu. 

Więcej informacji: Wydzielanie obrazów z plików PSD.

Obsługa jednostek procentowych (%)

W panelu Extract można teraz wyświetlać szerokość i wysokość obrazów nie tylko w pikselach, ale również jako wartości procentowe. Również wartości pomiarów można wyświetlać procentowo.

Po kliknięciu zasobu w panelu Extract zostanie wyświetlone okienko umożliwiające przełączenie jednostki na piksele lub procenty. Jednostka wybrana w tym okienku zostanie zapamiętana i będzie używana przy wyświetlaniu pomiarów odległości między zasobami.

Rozszerzone możliwości edycji w widoku aktywnym

Zagnieżdżone wstawianie w widoku aktywnym

W widoku aktywnym można teraz wstawiać jedne elementy wewnątrz drugich. Jeśli podczas przeciągania elementów z panelu Wstaw, z panelu Zasoby lub w obrębie widoku aktywnego zatrzyma się kursor myszy nad różnymi elementami na stronie, program wyświetli wizualne wskazówki ułatwiające zagnieżdżanie tych elementów. Zostaną one wyświetlone wraz z liniami pomocniczymi wstawiania przed lub za elementem.

• Linie pomocnicze wstawiania przed/za: wyświetlane po zatrzymaniu kursora nad górnym lub dolnym 30% elementu.
• Wizualne wskazówki zagnieżdżania: wyświetlane po zatrzymaniu nad obszarem 40% na środku elementu.

Edytowanie selektorów bezpośrednio w oknie Monitor elementu

Wystarczy kliknąć nazwę selektora w oknie Monitor elementu, aby go edytować. Wprowadzone zmiany zatwierdza się przez kliknięcie w dowolnym miejscu na stronie.

Zmiany w pasku narzędziowym Kodowanie

Z paska narzędziowego Kodowanie usunięto następujące opcje związane ze zwijaniem kodu:

• Zwiń pełne znaczniki
• Zwiń zaznaczenie

Uwaga: Opcje te zostały usunięte z menu kontekstowego (otwieranego przez kliknięcie prawym przyciskiem myszy) oraz z menu Edycja.   Kod można teraz zwijać, zatrzymując kursor myszy nad numerami wierszy i klikając pojawiający się trójkącik.   Ponadto w plikach HTML, CSS i JS nie są już dostępne następujące opcje:

• Podświetl nieprawidłowy kod
• Ostrzeżenia o błędach składniowych na pasku informacji

Aby odszukać błędy w kodzie, można skorzystać z funkcji lintingu. Wyniki lintingu są wyświetlane w panelu Wyjście.

Udoskonalenia panelu Projektant CSS

• Tryby Wszystkie i Bieżące
• Wskazówki dotyczące wartości właściwości
• Zapytania o media oznaczane kolorami
• Inne zmiany

Tryby Wszystkie i Bieżące

Panel Projektant CSS ma teraz dwa różne tryby wyświetlania i edytowania właściwości CSS:

• Wszystkie: w tym trybie wyświetlany jest cały kod CSS oraz wszystkie zapytania o media i selektory w bieżącym dokumencie. Zaznaczenie obiektów w widoku Projekt lub Aktywny nie wpływa na wyświetlanie w trybie Wszystkie.

Jest to tryb przydatny w sytuacji, gdy tworzy się kod CSS, zapytania o media lub selektory.

• Bieżące: w tym trybie są wyświetlane wyliczone style elementu zaznaczonego w widoku Projekt lub Aktywny. Jeśli w pliku CSS jest uaktywniony selektor, to tryb Bieżące wyświetli właściwości tego selektora.

Wskazówki dotyczące wartości właściwości

Program Dreamweaver wyświetla teraz wskazówki do kodu podczas ustawiania nowych właściwości w panelu Projektant CSS. Funkcja ta działa podobnie do wskazówek wyświetlanych w widoku Kod.

Zapytania o media oznaczane kolorami

Zapytania o media w panelu Projektant CSS są teraz oznaczane kolorami odpowiadającymi wizualnym zapytaniom o media.

• Zielony: zapytania o media z warunkami max-width
• Niebieski: zapytania o media z warunkami min-width oraz max-width
•  Fioletowy: zapytania o media z warunkami min-width

Inne zmiany

• Opcja Pokaż ustawione: przy pierwszym uruchomieniu programu Dreamweaver pole wyboru Pokaż ustawione w sekcji Właściwości jest teraz domyślnie zaznaczone. Zmiany tej opcji (włączenie lub wyłączenie) obowiązują we wszystkich kolejnych sesjach programu Dreamweaver.

• Panel jest przewijany w taki sposób, aby opcja Dodaj właściwość była wyświetlana na środku: po kliknięciu ikony + w sekcji Właściwości zawartość tej sekcji zostanie przewinięta, tak aby wiersz Dodaj właściwość znalazł się na środku panelu. Jeśli sekcja Właściwości jest zbyt mała, wiersz Dodaj właściwość jest wyświetlany na dole panelu.

• Wyróżnienie tła podczas dodawania nowej właściwości: gdy pole tekstowe Dodaj nową właściwość jest aktywne, cały wiersz jest wyróżniany szarym kolorem tła. 

• Zmiana położenia przycisków + oraz –: przyciski + i – w każdej z sekcji panelu Projektant CSS zostały przeniesione z prawej na lewą stronę, dzięki czemu są lepiej widoczne.

• Zmiana nazwy kategorii Własne: kategoria niestandardowych właściwości ma teraz nazwę „Więcej”.

Zmiany związane z obiegiem pracy serwera testowego

Wprowadzone w tej wersji udoskonalenia obiegu pracy serwera testowego mają na celu ułatwienie edycji dokumentów zawierających kod serwerowy. Dokumenty takie można płynnie i bezproblemowo edytować w widoku aktywnym.

Zmiany w konfiguracji serwera

Inaczej niż we wcześniejszych wersjach programu Dreamweaver, konkretny serwer można teraz zdefiniować jako serwer testowy albo serwer zdalny; jeden serwer nie może jednak pełnić obu tych zadań. Pola wyboru w interfejsie konfiguracji serwera zostały zastąpione przyciskami opcji, co wymusza wybranie tylko jednej specyfikacji dla każdego serwera.

Jeśli w programie Dreamweaver zostanie otwarta starsza wersja serwisu, w której jeden i ten sam serwer został zdefiniowany zarówno jako serwer testowy, jak i zdalny (lub jeśli zostaną zaimportowane takie ustawienia), program powieli wpis ustawień takiego serwera, a następnie oznaczy jedną z tych pozycji jako serwer zdalny (dodając przyrostek _zdalny), a drugą jako testowy (dodając przyrostek _testowy).

Automatyczne publikowanie plików dynamicznych

Program Dreamweaver automatycznie synchronizuje teraz dokumenty dynamiczne z serwerem testowym podczas ich otwierania, tworzenia lub zapisywania. Program nie wyświetla już okien dialogowych „Uaktualnij serwer testowy” ani „Publikuj pliki zależne” w ramach obiegów pracy z użyciem serwera testowego.

Więcej informacji: Automatyczne publikowanie plików dynamicznych.

Zmiany w obiegu pracy Business Catalyst

Rozszerzenie Business Catalyst jest wycofywane i nie będzie już dostępne w wersji Dreamweaver CC 2015 i nowszych. Dreamweaver CC 2014.1.1 to ostatnia wersja zgodna z rozszerzeniem Business Catalyst.

Aby skorzystać z usługi Business Catalyst w połączeniu z wersją Dreamweaver CC 2015 i nowszymi wersjami, użyj opcji połączenia SFTP w programie Dreamweaver. Więcej informacji: Dokumentacja usługi Business Catalyst.

Oficjalne zawiadomienie o tej zmianie można przeczytać w serwisie Business Catalyst. 

Inne zmiany

• Panel Wstaw został przebudowany. Wszystkie opcje z kategorii Wspólne, Układ i Media zgrupowano w logiczną kategorię HTML.

• Usunięto krótkie filmy instruktażowe i odsyłacz do nich z menu Pomoc. Ta opcja nie jest dostępna także w wersjach językowych innych niż angielska.

• Uproszczono opcje widoczne w rozwijanym menu paska Dokument na dole strony; dostępne są teraz tylko opcje Orientacja, Pełny rozmiar i Edytuj rozmiary.