Podsumowanie nowych funkcji

W programie Dreamweaver CC w nowej wersji 2014 wprowadzono kilka rozszerzeń widoku aktywnego i panelu Projektant CSS, które ułatwiają tworzenie i uaktualnianie zawartości stron WWW i zawartości na urządzenia mobilne. Nowa funkcja Przegląd elementu umożliwia szybkie wyświetlanie, przeglądanie i edycję kodu HTML.

W tym artykule przedstawiono wprowadzenie do nowych funkcji i opisano kilka innych rozszerzeń. Podano także odsyłacze do zasobów pozwalających zdobyć dodatkowe informacje.

Funkcja Przegląd elementu

Nowa funkcja Przegląd elementu umożliwia szybkie przeglądanie znaczników w dokumencie. Funkcja ta wyświetla interaktywne drzewo struktury HTML dla zawartości statycznej i dynamicznej. Strukturę zawartości dynamicznej można modyfikować bezpośrednio w drzewie HTML. 

Funkcja Przegląd elementu

Przegląd elementu (Widok > Przegląd elementu) wprowadzono w celu przyspieszenia procesu programowania. We wcześniejszych wersjach programu Dreamweaver trzeba było zaznaczyć elementy HTML w widoku aktywnym, przejść do widoku Kod i dopiero tam je edytować. Po zakończeniu edycji należało ponownie wrócić do widoku aktywnego, aby zobaczyć podgląd wprowadzonych zmian. Obecnie funkcja Przegląd elementu umożliwia wyświetlenie wszystkich elementów na stronie w pojedynczym, czytelnym ujęciu, umożliwiającym edytowanie statycznej zawartości.

Więcej informacji: Przegląd elementu.

Nowe możliwości edycji w widoku aktywnym

Bezpośrednio w widoku aktywnym można analizować i modyfikować właściwości elementów HTML. Zmiany są od razu widoczne, bez potrzeby odświeżania.

Szybki inspektor właściwości

W widoku aktywnym bezpośrednio nad elementami HTML na stronie wyświetlany jest szybki inspektor właściwości. W zależności od zaznaczonego elementu HTML szybki inspektor właściwości umożliwia edytowanie atrybutów lub tekstu bezpośrednio w widoku aktywnym.

Szybki inspektor właściwości do edytowania atrybutów obrazu

Inspektor właściwości w widoku aktywnym do formatowania tekstu
Szybki inspektor właściwości do formatowania tekstu

Więcej informacji: Szybki inspektor właściwości.

Monitor elementu

Nowa funkcja Monitor elementu umożliwia przypisywanie klas i identyfikatorów do elementów HTML bezpośrednio w widoku aktywnym. Monitor elementu podpowiada dostępne klasy i identyfikatory, ułatwiając szybkie przeglądanie i wybieranie odpowiednich opcji.

Monitor elementu do edytowania klas i identyfikatorów

Edycja tekstu w widoku aktywnym

Tekst można teraz edytować bezpośrednio w widoku aktywnym. Efekty wprowadzonych zmian są widoczne od razu, bez potrzeby przechodzenia do innego widoku.

Wystarczy dwukrotnie kliknąć element tekstowy w widoku aktywnym, aby włączyć tryb edycji. Więcej informacji: Edytowanie tekstu bezpośrednio w widoku aktywnym.

Edytowanie tekstu bezpośrednio w widoku aktywnym. Edycja tekstu w widoku aktywnym.
Edytowanie tekstu bezpośrednio w widoku aktywnym

Inspektor właściwości w widoku aktywnym

Inspektor właściwości jest teraz dostępny w widoku aktywnym. Pozwala to szybko edytować stronę bez potrzeby przechodzenia do widoku Projekt lub Kod.

Inspektor właściwości w widoku aktywnym
Inspektor właściwości w widoku aktywnym

Wstawianie w widoku aktywnym

W tej wersji programu można już wstawiać elementy HTML bezpośrednio w widoku aktywnym, posługując się panelem Wstaw. Elementy są wstawiane w czasie rzeczywistym — nie trzeba przechodzić do innego widoku. Można również natychmiast zobaczyć efekty wprowadzonych zmian. 

Przeciąganie z panelu Wstaw do widoku aktywnego
Przeciąganie z panelu Wstaw do widoku aktywnego

Rozszerzenia panelu Projektant CSS

Rozszerzone opcje interfejsu dla właściwości krawędzi

Wprowadzono podzielone na zakładki opcje, które pozwalają w prosty i intuicyjny sposób ustawiać właściwości wszystkich czterech krawędzi.

  • Podział na zakładki pomaga uniknąć nadmiaru informacji na jednym ekranie.
  • Ikony są łatwe w obsłudze i intuicyjne nawet dla początkujących.
  • Dwa zestawy ikon wskazują stan „nieustawione/usunięte” oraz „wyłączone”.
  • Dostępna jest pojedyncza zakładka Wszystkie boki, umożliwiająca ustawienie właściwości wszystkich krawędzi naraz.
  • Wiersz z wartościami wyliczonymi wskazuje podczas inspekcji zakładkę, na której najlepiej będzie pracować. 
Właściwości sterujące krawędziami (program Dreamweaver CC w wersjach wcześniejszych niż 2014)

Właściwości sterujące krawędziami — wersja 2014 programu Dreamweaver CC

Kopiowanie i wklejanie stylów

Style można teraz kopiować z jednego selektora i wklejać do innego. Kopiować można wszystkie style albo tylko określone kategorie, np. style układu, tekstu lub krawędzi.

Kliknij selektor prawym przyciskiem myszy i wybierz odpowiednią opcję:

Kopiowanie stylów za pomocą panelu Projektant CSS
Kopiowanie stylów za pomocą panelu Projektant CSS

  • Jeśli selektor nie zawiera żadnych stylów, opcje Kopiuj i Kopiuj wszystkie style będą niedostępne.
  • Opcja Wklej style będzie wyłączona w przypadku serwisów zdalnych, których nie można edytować. Natomiast opcje Kopiuj i Kopiuj wszystkie style pozostaną dostępne.
  • Możliwe jest wklejanie stylów, które już częściowo istnieją w selektorze (nakładanie). Wklejana jest suma zbiorów właściwości wszystkich selektorów.
  • Style można kopiować i wklejać także między plikami CSS o różnym sposobie dołączania (importowanie, łącze, styl w wierszu).

Pola szybkiej edycji

Program Dreamweaver został wyposażony w pola szybkiej edycji, które umożliwiają określanie właściwości (takich jak margin, padding, border i border-radius) metodą skrótową. Opcję tę wprowadzono dla wygody użytkowników, którzy wolą definiować kod, zamiast określać właściwości za pomocą myszy lub klawiatury. 

Pola szybkiej edycji

Określanie właściwości

Rozszerzenia w obiegu pracy dotyczącym niestandardowych właściwości

We wcześniejszych wersjach dodawanie właściwości niestandardowych („innych”) wymagało kliknięcia ikony + w okienku Właściwości na panelu Projektant CSS. Teraz natomiast można skorzystać z zestawu łatwo dostępnych pól tekstowych (nazwa właściwości i wartość), które znajdują się na końcu listy Właściwości. W polach tych można bezpośrednio wpisywać nazwę właściwości i jej wartość. Nie trzeba wcześniej klikać ikony +.

Aby dodać kolejne wiersze z niestandardowymi właściwościami, naciśnij klawisz Tab.

Nazwa tej grupy właściwości została zmieniona z „Inne” na „Własne”.

Pola tekstowe nadawania nazwy i wartości właściwości

Skróty klawiszowe

Selektory i właściwości CSS można teraz dodawać i usuwać za pomocą skrótów klawiszowych. W ten sam sposób można również przechodzić między grupami właściwości w panelu Właściwości.

Skrót

Obieg pracy

CTRL + Alt + [Shift =]

Dodanie selektora (jeśli punkt aktywny jest w sekcji selektorów)

CTRL + Alt+ S

Dodanie selektora (jeśli punkt aktywny jest w dowolnym miejscu w aplikacji)

CTRL + Alt + [Shift =]

Dodanie właściwości (jeśli punkt aktywny jest w sekcji właściwości)

CTRL + Alt+ P

Dodanie właściwości (jeśli punkt aktywny jest w dowolnym miejscu w aplikacji)

Zaznaczenie + Delete

Usunięcie selektora (jeśli jest zaznaczony selektor)

CTRL + Alt + (PgUp/PgDn)

Przechodzenie między sekcjami w subpanelu Właściwości

Zawężanie/poszerzanie zakresu selektora

W obecnej wersji programu Dreamweaver podczas dodawania selektora udostępniane są nie więcej niż trzy podpowiedzi reguł. Za pomocą klawisza strzałki w górę lub w dół można zawęzić lub rozszerzyć szczegółowość selektora.

Szerszy/węższy zakres selektora
Szerszy/węższy zakres selektora

Przewijanie do kategorii

We wcześniejszych wersjach kliknięcie kategorii Tło lub Inne na górze okienka Właściwości na panelu Projektant CSS powodowało „pokazanie” tych kategorii w okienku. Jednak odpowiednie kategorie nie były wyświetlane na górze okna.

W obecnej wersji kliknięcie kategorii Tło oraz Inne (nowa nazwa: Własne) powoduje wyświetlenie jej w górnej części okienka.

Przewijanie do kategorii

Obsługa połączeń SFTP z użyciem pliku tożsamości

W wersji programu Dreamweaver CC 2014 wprowadzono możliwość łączenia się z serwerami publikacji w protokole SFTP z użyciem par kluczy publicznych i prywatnych oraz kluczy tożsamości (z hasłem lub bez hasła). Rozszerza to zakres możliwości wyboru usługodawcy oferującego hosting stron WWW, można bowiem skorzystać z każdej oferty, która wymaga uwierzytelniania z użyciem pary kluczy publiczny-prywatny.

Uwaga:

Program Dreamweaver obsługuje tylko pliki klucza OpenSSH.

Więcej informacji: Połączenia SFTP.

Rozszerzenia związane z cofaniem i ponawianiem czynności

Do tej pory w celu cofnięcia albo ponowienia operacji wykonanej w panelu Projektant CSS trzeba było kliknąć odpowiedni plik CSS (w plikach powiązanych) i tam cofnąć lub ponowić działanie. 

Nowe rozszerzenia tej funkcji pozwalają natomiast cofać i ponawiać operacje bezpośrednio w widoku aktywnym dokumentu lub w panelu Projektant CSS. Zmiany są automatycznie wprowadzane do odpowiedniego pliku CSS. Program sygnalizuje zmianę pliku powiązanego, podświetlając zakładkę tego pliku przez krótką chwilę (około 8 sekund).

  • W przypadku cofnięcia lub ponowienia działania w panelu Projektant CSS widok aktywny zostanie automatycznie odświeżony.
  • W przypadku edycji dokumentu w postaci kodu źródłowego i cofnięcia zmian w widoku aktywnym tryb wyświetlania zostanie zmieniony na widok podzielony z uaktywnionym odpowiednim kodem źródłowym.

Wszystkie cofnięcia i ponowienia działań są rejestrowane na poziomie pliku HTML. Oznacza to, że wszelkie ręczne zmiany pliku CSS można cofnąć z dowolnego pliku powiązanego. Załóżmy na przykład, że pliki style1.css oraz style2.css są powiązane z plikiem index.html. Jeśli do pliku style1.css doda się styl elementu .h1, a następnie cofnie tę zmianę z pliku style2.css, to styl elementu .h1 zostanie usunięty z pliku style1.css.  

Uwaga:

Aby cofnąć lub ponowić zmiany w plikach JavaScript, należy przejść do odpowiedniego pliku JS i dopiero wtedy wykonać cofanie lub ponawianie. 

Zmiany w obiegu pracy związanym z usługami Business Catalyst i PhoneGap Build

Usługi Business Catalyst oraz PhoneGap Build są teraz dostępne w postaci dodatków do programu Dreamweaver. Najpierw trzeba więc zainstalować narzędzia Business Catalyst i PhoneGap Build w formie rozszerzeń. Potem będzie można korzystać z tych usług w taki sam sposób, jak dotychczas.

Aby zainstalować rozszerzenia Business Catalyst i PhoneGap Build, wybierz polecenie Zarządzaj > Przeglądaj dodatki. Wyszukaj rozszerzenia i zainstaluj je.

Zmiany w dostępie do rozszerzeń programu Dreamweaver

Rozszerzenia programu Dreamweaver można teraz przeglądać i instalować za pomocą usługi Adobe Creative Cloud. Ponadto rozszerzenia są teraz nazywane „dodatkami”.

Aby przeglądać dodatki w chmurze Adobe Creative Cloud, kliknij polecenie Okno > Przeglądaj dodatki w programie Dreamweaver. Zostanie wyświetlona strona dodatków w usłudze Adobe Creative Cloud. 

Okno > Rozszerzenia w wersji Dreamweaver CC 13.0
Okno > Rozszerzenia w wersji Dreamweaver CC 13.0

Okno > Przeglądaj dodatki w wersji Dreamweaver CC 2014
Okno > Przeglądaj dodatki, Dreamweaver CC w wersji 2014

Więcej informacji na temat instalowania dodatków zawiera artykuł Dodatki.

Zmiany związane z synchronizacją ustawień

Funkcja synchronizacji ustawień w programie Dreamweaver umożliwia ujednolicenie konfiguracji instancji programu zainstalowanych na komputerach oraz ustawień przechowywanych w chmurze Creative Cloud. Dreamweaver CC w wersji 2014 automatycznie wykrywa, czy we wcześniejszych wersjach została włączona synchronizacja ustawień, i umożliwia zaimportowanie tych ustawień z chmury Creative Cloud.

Przy pierwszym uruchomieniu programu Dreamweaver CC w wersji 2014 po jego zainstalowaniu zostanie wyświetlone następujące okno dialogowe:

Importowanie ustawień synchronizacji
Importowanie ustawień synchronizacji

  • Aby zaimportować ustawienia przechowywane w chmurze Creative Cloud, kliknij opcję Importuj ustawienia synchronizacji.

Uwaga: Ta opcja nie będzie już później dostępna.

  • Aby zsynchronizować ustawienia bieżącej instancji programu Dreamweaver z chmurą Creative Cloud, kliknij opcję Synchronizuj lokalne.
  • Aby ustawienia były synchronizowane automatycznie, wybierz opcję Zawsze synchronizuj automatycznie.
  • Aby wyświetlić zaawansowane opcje synchronizacji ustawień, kliknij przycisk Zaawansowane.

Wysyłanie zgłoszenia o błędzie lub prośby o nową funkcję bezpośrednio z programu Dreamweaver

Formularz „Lista życzeń” oraz formularz zgłaszania błędów są teraz dostępne bezpośrednio w programie Dreamweaver po wybraniu polecenia Pomoc > Zgłoś błąd / prośbę o nową funkcję.

Polecenie „Zgłoś błąd / prośbę o nową funkcję” w menu Pomoc
Polecenie „Zgłoś błąd / prośbę o nową funkcję” w menu Pomoc

Centrum pomocy

Nowe centrum pomocy — Help Center — przedstawia sposób korzystania z nowych funkcji i wykonywania typowych zadań w programie Dreamweaver.

Można teraz łatwo przejrzeć nowo wprowadzone funkcje i skuteczne metody pracy już przy pierwszym uruchomieniu programu Dreamweaver. Przegląd nowych funkcji można w dowolnej chwili przerwać. Można również wyłączyć podpowiedzi pomocy wyświetlane w aplikacji. W razie potrzeby będzie można później ponownie je włączyć.

Omówienie nowych funkcji

Program Dreamweaver prezentuje teraz krótki przegląd nowych funkcji wprowadzonych w ostatniej wersji.
Przegląd ten nie tylko opisuje nowe funkcje, ale też umożliwia skorzystanie z galerii wideo, gdzie można zobaczyć te funkcje w akcji.

Omówienie nowych funkcji lub opcja miniprezentacji są wyświetlane bezpośrednio po uruchomieniu programu Dreamweaver.
Można również pominąć prezentację i przejść do ekranu powitalnego, aby rozpocząć pracę.

Uwaga: Omówienie nowych funkcji jest wyświetlane po zainstalowaniu lub uaktualnieniu programu Dreamweaver albo po usunięciu preferencji i ponownym uruchomieniu programu.

Prezentacja nowych funkcji
Prezentacja nowych funkcji

Oto podsumowanie zawartości wyświetlanej podczas omówienia nowych funkcji:

  • Wiadomość powitalna. Użytkownik zostanie również poproszony o określenie, czy używał już wcześniej programu Dreamweaver CC, co pozwoli na odpowiednie dostosowanie prezentowanej zawartości.
  • Przegląd poszczególnych funkcji wraz z krótkim opisem (oraz opcja pominięcia tej prezentacji).
  • Galeria wideo zawierająca filmy dotyczące nowych funkcji.

Galeria wideo

Po zakończeniu omówienia jest wyświetlana galeria wideo zawierająca filmy dotyczące nowych funkcji.
Aby wyświetlić krótki opis zawartości filmu, zatrzymaj kursor myszy nad odpowiednią miniaturką.

Galeria wideo
Galeria wideo

Uwaga:

Omówienie nowych funkcji i galerię wideo można wyświetlić w dowolnym momencie korzystania z programu Dreamweaver.
W tym celu należy przejść do menu Pomoc lub ekranu powitalnego i wybrać odpowiednią opcję.

Komunikaty pomocy w aplikacji

Program Dreamweaver wyświetla teraz podczas pracy nad projektem porady pozwalające zwiększyć produktywność.
Są to wskazówki mające ułatwić wykonanie bieżącego zadania w bardziej wydajny sposób.

Porady są wyświetlane w odpowiedzi na konkretne zdarzenia. Na przykład kliknięcie selektorów znaczników w dowolnym widoku albo kliknięcie elementu prawym przyciskiem myszy w celu przeprowadzenia inspekcji spowoduje wyświetlenie podpowiedzi dotyczącej Przeglądu elementu.

Przegląd elementu to nowa funkcja, która ułatwia wyświetlanie i edytowanie kodu HTML w bardziej wydajny sposób niż inne stosowane dotychczas metody („wyzwalacze” powodujące wyświetlenie podpowiedzi).

Gdy użytkownik raz skorzysta z podanych sugestii, podpowiedzi dla tego samego zdarzenia nie będą już wyświetlane.
Będą natomiast pojawiały się komunikaty dla innych rozpoznanych zdarzeń.

Wyświetlanie tych komunikatów w aplikacji można wyłączyć w Preferencjach.
Więcej informacji: Wyłączanie lub resetowanie komunikatów pomocy w aplikacji i w produkcie.

Przykłady komunikatów w aplikacji:

Funkcja Przegląd elementu

Zdarzenia wyzwalające:

  • Kliknięcie selektorów znaczników (w dowolnym widoku)
  • Aktywny + Inspekcja lub kliknięcie prawym przyciskiem myszy + Inspekcja elementu

Wiadomość:

Komunikat funkcji Przegląd elementu

Inspektor właściwości klas i identyfikatorów w widoku aktywnym

Zdarzenia wyzwalające:

  • Edytowanie identyfikatora za pomocą Inspektora właściwości w widoku Projekt

Wiadomość:

Komunikat widoku aktywnego

Komunikaty produktowe

Program Dreamweaver jest płynnie zintegrowany z wieloma innymi aplikacjami w ramach usługi Creative Cloud. Komunikaty produktowe prezentują takie punkty integracji.
Stosując sugerowany obieg pracy, można lepiej wykorzystać usługę Adobe Creative Cloud i oferowane przez nią możliwości.

Komunikaty produktowe są wyświetlane w odpowiedzi na wykrycie konkretnych zdarzeń wyzwalających. Przykład: podczas próby użycia
efektów przejścia CSS wyświetlany będzie komunikat produktowy z sugestią skorzystania z obiegu pracy „Edge Animate”.

Komunikat produktowy zawiera krótki opis alternatywnego (lub lepszego) obiegu pracy, który można wykorzystać w danej sytuacji.
Udostępnia również miniaturkę wideo, którą można kliknąć, aby wyświetlić film prezentujący dany obieg pracy.
Przycisk Więcej informacji prowadzi do artykułu lub blogu z dokładnym opisem.


Komunikaty produktowe są wyświetlane tylko raz po rozpoznaniu zdarzenia wyzwalającego.

Uwaga:

Przykłady komunikatów produktowych:

Edge Animate

Wyzwalacz:

  • Kliknięcie przejścia CSS, a następnie ikony +

Wiadomość:

Komunikat programu Edge Animate

Parfait

Zdarzenie wyzwalające:

  • Wstaw obraz > Edytuj ustawienia obrazu

Wiadomość:

Edytowanie ustawień obrazu

Wyłączanie lub resetowanie komunikatów pomocy w aplikacji i w produkcie

Otwórz okno dialogowe Preferencje > Dostępność i wykonaj następujące czynności:

  • Aby wyłączyć komunikaty, usuń zaznaczenie z pola wyboru Pokaż pomoc w aplikacji.

Ponowne włączenie komunikatów nie spowoduje wyświetlenia już raz zaprezentowanych komunikatów.
Będą pokazywane tylko te komunikaty, które nie były wcześniej wyświetlane.

  • Aby ponownie wyświetlić poprzednio obejrzane komunikaty, kliknij opcję Resetuj.
wyłączanie podpowiedzi. Wyłączanie komunikatów w aplikacji.
Preferencje wyłączania lub resetowania pomocy w aplikacji

Zmiany w menu Pomoc

Menu Pomoc zostało zreorganizowane i zapewnia teraz szybki dostęp do omówienia nowych funkcji, galerii wideo, artykułów pomocy oraz zasobów szkoleniowych. Ponadto umożliwia wyświetlenie formularza zgłaszania błędu lub przesyłania prośby o nową funkcję.

Menu Pomoc (wersje wcześniejsze niż Dreamweaver CC 2014)
Menu Pomoc (wersje wcześniejsze niż Dreamweaver CC 2014)

Menu Pomoc w wersji Dreamweaver CC 2014
Menu Pomoc w programie Dreamweaver CC w wersji 2014

Logo Adobe

Zaloguj się na swoje konto