W najnowszych aktualizacjach programu Dreamweaver CC 2014 wprowadzono integrację z usługą Extract, która ułatwia budowanie serwisów WWW na komputery i urządzenia mobilne w oparciu o kompozycje PSD bezpośrednio w programie Dreamweaver. Nowe aktywne linie pomocnicze ułatwiają precyzyjne wstawianie i rozmieszczanie elementów HTML. Rozszerzone funkcje edycji w widoku aktywnym umożliwiają wprowadzanie zmian w czasie rzeczywistym.

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.

Adobe Dreamweaver CC 2014.1.1 (luty 2015 r.)

Nowy ekran Witamy

Czy używasz programu Dreamweaver po raz pierwszy? Czy znasz już program Dreamweaver, ale chcesz pogłębić swoją wiedzę? Czy chcesz się dowiedzieć, jakie zmiany wprowadzono w stosunku do wcześniejszych wersji? Wszystkie niezbędne zasoby edukacyjne — zarówno te przeznaczone dla początkujących, jak i dla zaawansowanych użytkowników i osób szukających informacji o nowej wersji programu Dreamweaver — można teraz otworzyć bezpośrednio z ekranu Witamy.

W najnowszej aktualizacji programu Dreamweaver CC 2014 wprowadzono szybki dostęp do filmów instruktażowych (w tym filmów prezentujących nowe funkcje), praktycznych samouczków, porad i technik oraz innych zasobów. Wszystkie te informacje są dostępne na ekranie powitalnym.

Ekran powitalny
Ekran powitalny

Uwaga:

Ten nowy ekran powitalny jest dostępny tylko dla użytkowników angielskiej wersji językowej. W przypadku innych wersji językowych wyświetlany jest ekran Witamy i omówienie nowych funkcji z wersji Dreamweaver CC 2014.1.

Udoskonalenia panelu Extract

Podczas przeciągania obrazów z panelu Extract w widoku aktywnym są teraz wyświetlane aktywne linie pomocnicze i ikona Przegląd elementu. Takie pomoce wizualne ułatwiają szybkie i precyzyjne umieszczanie obrazu w odpowiednim miejscu.

Panel Extract
Panel Extract

Rozszerzenia możliwości edycji w widoku aktywnym

Przeciąganie i upuszczanie elementów

Elementy w widoku aktywnym można teraz przenosić, przeciągając nazwę związanego z nimi znacznika. Po zatrzymaniu wskaźnika myszy nad nazwą znacznika pojawi się kursor w kształcie rączki, wskazujący, że można przeciągać element. Upuszczając element, można skorzystać z aktywnych linii pomocniczych, które wizualizują położenie przeciąganego elementu po jego upuszczeniu.

Ramka zaznaczenia

Tekst, obrazy i inne elementy w znaczniku można zaznaczać przez kliknięcie i przeciągnięcie ramki zaznaczenia w dowolnym miejscu wewnątrz znacznika. Ramki zaznaczenia ułatwiają zaznaczanie wielu elementów znajdujących się wewnątrz znacznika.

Uwaga:

Funkcja ramki zaznaczenia w widoku aktywnym obsługuje tylko te operacje, które są obsługiwane przez przeglądarkę.

Rozszerzenia funkcji Monitor elementu

Monitor elementu pokazuje teraz podpowiedź tekstową „Klasa/ID”, aby wyraźnie wskazać, że można określić klasę lub identyfikator.

Ponadto zmiany wprowadzone w oknie Monitor elementu są zapisywane po kliknięciu przycisku „+”. Można również nacisnąć klawisz Enter lub Return, aby zapisać zmiany, tak jak we wcześniejszych wersjach programu Dreamweaver.

Nowe motywy widoku Kod

W widoku Kod dodano dziesięć nowych motywów kolorów:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

Więcej informacji o motywach kolorów w widoku Kod: Ustawianie motywu kolorów dla widoku Kod.

Rozszerzenia panelu Projektant CSS

Ta aktualizacja obejmuje kilka zmian w interfejsie panelu Projektant CSS oraz zmianę domyślnego ustawienia pola wyboru Pokaż ustawione.

Po uruchomieniu programu pole wyboru Pokaż ustawione jest domyślnie włączone; zmiany wprowadzone dla tej opcji będą obowiązywać we wszystkich sesjach Dreamweaver. Na przykład jeśli opcja ta zostanie wyłączona, program Dreamweaver zapamięta zmienione ustawienie i w następnej sesji również wyświetli tę opcję jako wyłączoną.

Wprowadzono następujące zmiany w interfejsie użytkownika:

  • Podczas dodawania właściwości panel Projektant CSS jest przewijany: po kliknięciu przycisku „+” w sekcji Właściwości zawartość panelu jest przewijana w taki sposób, że wiersz Dodaj właściwość znajduje się niemal na środku. Jeśli sekcja Właściwości jest zbyt mała, panel jest przewijany w taki sposób, że wiersz Dodaj właściwość znajduje się na dole tej sekcji.
  • Wyróżnienie tła: gdy pole tekstowe Dodaj nową właściwość jest aktywne, cały wiersz jest wyróżniany szarym kolorem tła. 
  • Położenie przycisków „+” i „-”: przyciski „+” i „-” w każdej z sekcji panelu Projektant CSS (Źródło, Selektory, Zapytanie o media, Właściwości) zostały przeniesione na lewą stronę, dzięki czemu są lepiej widoczne.
  • Kategoria „Niestandardowe” zmieniła nazwę na „Więcej”.

Zdalne debugowanie widoku aktywnego

Dokumenty programu Dreamweaver otwarte w widoku aktywnym można teraz zdalnie debugować za pomocą narzędzi dla programistów dostępnych w przeglądarce Google Chrome (DevTools). Należy w tym celu wykorzystać port 5471 w programie Google Chrome. Aby go aktywować, wykonaj następujące czynności:

  1. Uruchom program Dreamweaver za pomocą następującego polecenia:

    • Windows: <ścieżka instalacji> -enableRemoteDebugging
    • Mac: otwórz ścieżkę instalacji <installation_path> --args -enableRemoteDebugging

    Uwaga: Pamiętaj o wpisaniu dwóch dywizów przed argumentem „args”.

  2. Zostanie wyświetlone okno dialogowe z informacją, że aktywowano port 5471 do debugowania. Kliknij przycisk OK w tym oknie.

    Program Dreamweaver zostanie uruchomiony.

    Kliknij przycisk OK w oknie dialogowym, aby uruchomić program Dreamweaver
    Kliknij przycisk OK w oknie dialogowym, aby uruchomić program Dreamweaver

  3. Otwórz dokumenty, które mają być debugowane w widoku aktywnym.

  4. Aby rozpocząć debugowanie, otwórz program Google Chrome i przejdź do adresu localhost:5471. Zostanie wyświetlona lista odsyłaczy do wszystkich dokumentów otwartych w programie Dreamweaver.

    Uwaga: Jako że nowy ekran Witamy oraz panel Extract używają technologii Chromium Embedded Framework (CEF), będą widoczne również pozycje związane z tymi funkcjami.

    Możesz teraz użyć narzędzi dla programistów w programie Google Chrome, aby debugować odpowiednie dokumenty.

  5. Aby zatrzymać debugowanie i wrócić do pracy w zwykłym trybie, zamknij i ponownie uruchom program Dreamweaver.

Pozostałe udoskonalenia

Zmiany w procedurze resetowania preferencji

Podczas resetowania preferencji za pomocą skrótów klawiszowych program Dreamweaver tworzy teraz kopię zapasową tych preferencji w folderze „Adobe Dreamweaver CC 2014.1 Backups”. Folder ten jest automatycznie tworzony w tym samym folderze, w którym znajduje się oryginalny folder preferencji programu Dreamweaver w systemach Windows i Mac.

Pełna nazwa i ścieżka folderu kopii zapasowej jest wyświetlana w oknie dialogowym resetowania preferencji.

Resetowanie preferencji i ustawień
Resetowanie preferencji i ustawień

Zmiana sposobu wyświetlania dynamicznych dokumentów

Dokumenty dynamiczne, takie jak PHP, CFM i ASP, nie są już domyślnie otwierane w widoku Kod. Otwiera się je teraz w tym samym widoku (Kod, Aktywny lub podzielony), w jakim znajdował się ostatni zamknięty lub uaktywniony dokument.

Adobe Dreamweaver CC 2014.1 (październik 2014 r.)

Narzędzie Extract w programie Dreamweaver

Integracja narzędzia Extract z programem Dreamweaver umożliwia programistom i twórcom stron WWW stosowanie informacji o układzie oraz wydzielanie zasobów przygotowanych do wyświetlania w Internecie. Wszystkie te czynności można wykonywać bezpośrednio w środowisku kodowania. Extract zapewnia kompleksowe, autonomiczne rozwiązanie do wydzielania informacji o stylach i zasobów z kompozycji PSD, redukując konieczność wielokrotnego przechodzenia do programu Photoshop i z powrotem.

Panel Extract w programie Dreamweaver umożliwia wyodrębnianie stylów CSS, obrazów, czcionek, kolorów, gradientów, pomiarów i innych danych, które można zastosować bezpośrednio w tworzonej stronie WWW. W uzupełnieniu do podstawowych funkcji usługi Extract, program Dreamweaver zapewnia także następujące niepowtarzalne rozwiązania:

  • Bezpośredni dostęp do plików PSD w chmurze Creative Cloud — zarówno własnych, jak i udostępnionych przez inne osoby w folderze współpracy.
  • Łatwe definiowanie czcionek, kolorów i gradientów w stylach CSS na podstawie kontekstowych podpowiedzi.
  • Możliwość tworzenia znaczników IMG przez przeciąganie obiektów z warstw PSD.
  • Możliwość wklejania stylów bezpośrednio w widoku aktywnym (np. w panelu Projektant CSS i w okienku Monitor elementu).

Domyślna przestrzeń robocza w programie Dreamweaver (nazwana Extract) zawiera panel Extract po lewej stronie, umożliwiając szybkie rozpoczęcie pracy. Przy pierwszym uruchomieniu programu Dreamweaver panel Extract wyświetla prosty samouczek, ułatwiający poznanie obiegu pracy. Można również kliknąć przycisk Pierwsze kroki, aby rozpocząć korzystanie z narzędzia Extract.

Panel Extract domyślna przestrzeń robocza
Panel Extract

Więcej informacji na temat obiegów pracy funkcji Extract w programie Dreamweaver zawiera artykuł Integracja programu Dreamweaver z usługą Extract.

Architektura 64-bitowa

Dostępna jest już 64-bitowa wersja programu Dreamweaver, obsługująca te same funkcje, które są dostępne w wersji 32-bitowej. Za pomocą aplikacji usługi Adobe Creative Cloud można teraz pobrać następujące kompilacje programu Dreamweaver:

System operacyjny Domyślna lokalizacja instalacji Folder preferencji aplikacji
Windows (32-bitowy) C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows (64-bitowy) C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac (64-bitowy) /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Często zadawane pytania

  • Czy 64-bitowa aplikacja będzie działać w 32-bitowym systemie Windows? – Nie
  • Czy można zainstalować na tym samym komputerze z systemem Windows zarówno wersję 32-bitową, jak i 64-bitową? – Nie
  • Jak mogę sprawdzić, czy na moim komputerze jest uruchomiona 32-bitowa, czy 64-bitowa wersja programu Dreamweaver?
    • Windows: Uruchom program Dreamweaver. Otwórz Menedżera zadań i odszukaj proces programu Dreamweaver. Jeśli uruchomiona jest 64-bitowa kompilacja programu Dreamweaver, to proces będzie się nazywać „Dreamweaver.exe”. Jeśli uruchomiona jest 32-bitowa kompilacja programu Dreamweaver, to proces będzie się nazywać „Dreamweaver.exe *32”.
    • Mac: Otwórz Monitor aktywności i przejdź do opcji Widok > Kolumny > Rodzaj. Wyszukaj program Dreamweaver w oknie Monitor aktywności i sprawdź wpis w kolumnie Rodzaj. Jeśli jest to 64-bitowa wersja programu Dreamweaver, w kolumnie Rodzaj będzie widoczny wpis „64 bitowy”.

Instalowanie 64-bitowej wersji programu Dreamweaver

  1. Upewnij się, że na komputerze jest uruchomiony 64-bitowy system operacyjny.

    Aby sprawdzić, czy komputer jest 64-bitowy, wykonaj czynności opisane w następujących artykułach:

  2. Pobierz program Dreamweaver w wersji 64-bitowej z chmury Creative Cloud i zainstaluj.

Rozszerzenia widoku aktywnego

Aktywne linie pomocnicze

Aktywne linie pomocnicze to pomoce wizualne dostępne w widoku aktywnym, które wskazują możliwe miejsca wstawienia elementu. Można ich używać w następujących sytuacjach:

  • przy przeciąganiu elementów z panelu Wstaw;
  • przy przeciąganiu elementów z panelu Zasoby;
  • Przeciąganie (przenoszenie) elementów w widoku aktywnym.

Uwaga:

Aktywne linie pomocnicze nie są obsługiwane w dokumentach z układem elastycznej siatki.

Aktywne linie pomocnicze są wyświetlane po zatrzymaniu kursora myszy nad elementami strony przed upuszczeniem przeciąganego elementu. Linie pomocnicze mogą być wyświetlane nad i pod elementem albo po jego lewej i prawej stronie.

  • Linie nad i pod elementem — wyświetlane, gdy kursor wskazuje dowolne elementy lub znaczniki z wyjątkiem znaczników w wierszu. Gdy kursor myszy wskazuje górną połowę elementu, linie są wyświetlane nad tym elementem. Natomiast gdy kursor wskazuje dolną połowę elementu, linie są wyświetlane pod tym elementem.
Aktywne linie pomocnicze nad i pod wskazanymi elementami
Aktywne linie pomocnicze nad i pod wskazanymi elementami

  • Linie po lewej i prawej stronie elementu — wyświetlane po wskazaniu znaczników w wierszu, np. <a> lub <span>, albo znaczników z ustawioną właściwością „float”.
Aktywne linie pomocnicze po lewej i prawej stronie wskazanych elementów
Aktywne linie pomocnicze po lewej i prawej stronie wskazanych elementów

Precyzyjne wstawianie elementu strukturalnego

Używając okna Przegląd elementu w połączeniu z aktywnymi liniami pomocniczymi, można wstawiać elementy HTML do struktury dokumentu z większą precyzją.

Zatrzymanie na chwilę kursora przed upuszczeniem elementu powoduje wyświetlenie ikony funkcji Przegląd elementu (</>). Wskazanie tej ikony umożliwia otwarcie okna Przegląd elementu i wstawienie elementu w tym oknie.

Ikona funkcji Przegląd elementu
Ikona Przegląd elementu, ułatwiająca precyzyjne wstawianie

W widoku aktywnym można teraz wycinać, kopiować, wklejać i usuwać elementy za pomocą menu kontekstowego, wyświetlanego po kliknięciu prawym przyciskiem myszy. Menu kontekstowe widoku aktywnego pozwala również powielać elementy oraz zaznaczać znacznik nadrzędny lub podrzędny.

Uwaga:

Te same zadania można wykonywać w widoku aktywnym za pomocą skrótów klawiszowych. Na przykład w systemie Windows są to skróty Ctrl+x, Ctrl+c, Ctrl+v, Ctrl +d oraz klawisz Delete.

Najpierw zaznacz element w widoku aktywnym, aby wyświetlić okienko Monitor elementu. Następnie kliknij prawym przyciskiem myszy w obszarze znacznika, aby wyświetlić opcje menu kontekstowego. Opcje te działają na poziomie znacznika.

Zmiany dotyczące funkcji Monitor elementu

W okienku Monitor elementu można teraz nie tylko stosować selektory do elementów, ale także tworzyć selektory w odpowiednim kodzie źródłowym CSS i przypisywać zapytania o media. Gdy wpisze się selektor, który nie istnieje w żadnym arkuszu stylów, i naciśnie klawisz Enter, okienko Monitor elementu wyświetli opcje umożliwiające wybieranie źródłowego dokumentu CSS i zapytania o media.

Opcje źródła CSS i zapytania o media w okienku Monitor elementu
Opcje źródła CSS i zapytania o media w okienku Monitor elementu

Jeśli nie chcesz wybierać źródła CSS ani zapytania o media, naciśnij klawisz Esc, aby zamknąć te opcje.

Można również kliknąć prawym przyciskiem myszy już zastosowany selektor, aby przejść do odpowiadającego mu kodu (opcja Przejdź do kodu) albo wkleić skopiowane style (opcja Wklej style).

Opcje Przejdź do kodu i Wklej style, dostępne w okienku Monitor elementu
Opcje Przejdź do kodu i Wklej style, dostępne w okienku Monitor elementu

Uwaga:

Opcja Przejdź do kodu zawiera dodatkowe opcje, jeśli ten sam selektor został dodany do wielu zapytań o media. Opcja Wklej style zawiera dodatkowe opcje, jeśli skopiowano pseudoselektory lub selektory złożone.

Przenoszenie elementów w widoku aktywnym

Program Dreamweaver umożliwia teraz przenoszenie elementów na poziomie znacznika w widoku aktywnym. Po zaznaczeniu elementu w widoku aktywnym można go przeciągnąć w dowolne miejsce.

  1. Kliknij element, który chcesz przenieść. Gdy pojawi się Monitor elementu (niebieskie pole), przeciągnij element. Po rozpoczęciu przeciągania kursor myszy zmienia się, wskazując, że element jest gotowy do przeniesienia.

  2. Elementy stanowiące punkty odniesienia (względem których ma być wstawiony przeciągany element) są wyróżniane niebieską krawędzią. Są również wyświetlane aktywne linie pomocnicze, wskazujące potencjalne miejsca względem punktów odniesienia, w których można upuścić przeciągany element.

Uwaga:

W widoku aktywnym można przenosić tylko elementy statyczne. Znaczniki zawartości dynamicznej, np. PHP, nie mogą być przenoszone.

Zatrzymanie na chwilę kursora przed upuszczeniem elementu powoduje wyświetlenie ikony funkcji Przegląd elementu (</>). Wskazanie tej ikony umożliwia otwarcie okna Przegląd elementu i wstawienie elementu w tym oknie.

Nawigacja za pomocą klawiatury w widoku aktywnym

Program Dreamweaver umożliwia teraz nawigowanie między elementami strony za pomocą klawiatury. Jest to rozwiązanie wygodne dla użytkowników lubiących korzystać z klawiatury, które przyspiesza proces projektowania stron WWW. Dostępne są następujące opcje:

  • Klawisze Strzałka w górę i Strzałka w dół umożliwiają przechodzenie między elementami strony. Nawigacja w widoku aktywnym za pomocą klawiatury ułatwia dostęp do elementów zagnieżdżonych i elementów otoczonych innymi elementami.
  • Klawisz Tab pozwala przechodzić między selektorami w oknie Monitor elementu.

Więcej informacji: Nawigacja za pomocą klawiatury w widoku aktywnym.

Szybki edytor znaczników w widoku aktywnym

Naciśnięcie klawiszy Ctrl+T (Windows) lub Cmd+T (Mac) w widoku aktywnym umożliwia otwarcie Szybkiego edytora znaczników dla zaznaczonego elementu. Szybki edytor znaczników udostępnia trzy stany: Edytuj znacznik, Otocz znacznikiem oraz Wstaw HTML. Naciskając klawisze Ctrl/Cmd + T, można przechodzić między tymi stanami.

Szybki edytor znaczników w widoku aktywnym
Szybki edytor znaczników w widoku aktywnym

Zmiany w przestrzeni roboczej programu Dreamweaver

Zmiany dotyczące paska narzędziowego Dokument

Pasek narzędziowy Dokument został zmodyfikowany i uproszczony.

  • Opcje widoku Projekt i widoku aktywnego zostały połączone w jedno rozwijane menu.
Opcje widoku Projekt i widoku aktywnego w programie Dreamweaver CC (październik 2014 r.)
Opcje widoku Projekt i Aktywny w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Przycisk widoku Projekt i widoku aktywnego na pasku narzędziowym Dokument we wcześniejszych wersjach
Przycisk widoku Projekt i widoku aktywnego na pasku narzędziowym Dokument we wcześniejszych wersjach

  • Pole Tytuł dokumentu zostało przeniesione do Inspektora właściwości.
Pasek narzędziowy Dokument w programie Dreamweaver CC (październik 2014 r.)
Pasek narzędziowy Dokument w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Pole Tytuł dokumentu przeniesione do Inspektora właściwości w programie Dreamweaver CC (październik 2014 r.)
Pole Tytuł dokumentu przeniesione do Inspektora właściwości w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Pole Tytuł na pasku narzędziowym Dokument we wcześniejszych wersjach
Pole Tytuł na pasku narzędziowym Dokument we wcześniejszych wersjach

  • Przyciski Przeprowadź inspekcję oraz Aktywny kod zostały zastąpione ikonami.
Ikony Aktywny kod i Przeprowadź inspekcję w programie Dreamweaver CC (październik 2014 r.)
Ikony Aktywny kod i Przeprowadź inspekcję w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Przyciski Przeprowadź inspekcję oraz Aktywny kod we wcześniejszych wersjach
Przyciski Przeprowadź inspekcję oraz Aktywny kod we wcześniejszych wersjach

  • Opcje Wstecz, Naprzód i Odśwież zostały zgrupowane wraz z paskiem Adres i umieszczone na środku paska narzędziowego Dokument.
Pasek Adres oraz opcje Wstecz, Naprzód i Odśwież w programie Dreamweaver CC (październik 2014 r.)
Pasek Adres oraz opcje Wstecz, Naprzód i Odśwież w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Pasek Adres oraz opcje Wstecz, Naprzód i Odśwież we wcześniejszych wersjach
Pasek Adres oraz opcje Wstecz, Naprzód i Odśwież we wcześniejszych wersjach

  • Ikony Podgląd/Debugowanie w przeglądarce, Opcje widoku aktywnego oraz Zarządzanie plikami zostały połączone w grupę i wyrównane do prawej strony paska Dokument.
Ikony Podgląd/Debugowanie w przeglądarce, Opcje widoku aktywnego oraz Zarządzanie plikami na pasku narzędziowym Dokument w programie Dreamweaver CC (październik 2014 r.)
Ikony Podgląd, Debugowanie w przeglądarce, Opcje widoku aktywnego oraz Zarządzanie plikami w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Ikony Podgląd, Debugowanie w przeglądarce, Opcje widoku aktywnego oraz Zarządzanie plikami we wcześniejszych wersjach
Ikony Podgląd, Debugowanie w przeglądarce, Opcje widoku aktywnego oraz Zarządzanie plikami we wcześniejszych wersjach

Zmiany w domyślnej przestrzeni roboczej

Gotowe przestrzenie robocze dostępne bezpośrednio po zainstalowaniu programu Dreamweaver zostały zmodyfikowane. Obecnie program oferuje następujące przestrzenie:

  • Kod
  • Projekt
  • Extract
Przestrzenie robocze
Przestrzenie robocze

Domyślną przestrzenią roboczą jest teraz Extract. W tej przestrzeni roboczej panel Extract znajduje się po lewej, natomiast strona WWW po prawej. Przy pierwszym uruchomieniu programu Dreamweaver panel Extract wyświetla prosty samouczek, ułatwiający poznanie obiegu pracy. Aby rozpocząć korzystanie z narzędzia Extract, kliknij przycisk Pierwsze kroki.

Przestrzeń robocza Extract
Przestrzeń robocza Extract

Domyślnym widokiem dokumentów HTML jest teraz widok Podzielony (okno jest podzielone w poziomie, tak aby widoczny był widok aktywny i widok Kod). Pliki dynamiczne, takie jak wymienione poniżej, są domyślnie otwierane w widoku Kod. Jeśli widok zostanie podzielony, to dokumenty takie będą wyświetlane w widoku Projekt i w widoku Kod.

  • PHP
  • szablon PHP (przykład.dwt.php)
  • ASP
  • szablon ASP (przykład.dwt.asp)
  • JSP
  • szablon JSP (przykład.dwt.jsp)
  • CFM
  • Szablon CFM (przykład.dwt.php)
Domyślny widok dla dokumentów HTML, dla których wyświetlono widok aktywny oraz Kod
Domyślny widok dla dokumentów HTML, dla których wyświetlono widok aktywny oraz Kod

Domyślny widok dla dokumentów dynamicznych, wyświetlanych w pełnym widoku Kod
Domyślny widok dla dokumentów dynamicznych, wyświetlanych w pełnym widoku Kod

Wskazówka: Aby przejść do widoku Projekt, kliknij rozwijaną listę obok przycisku Aktywny, a następnie wybierz opcję Projekt. Aby zmienić podział poziomy na pionowy, wybierz polecenie Widok > Podziel pionowo. Widok Aktywny/Projekt jest teraz wyświetlany po lewej stronie. Aby wyświetlić widok Aktywny/Projekt po prawej stronie, wyłącz opcję Widok > Widok aktywny po lewej lub Widok projekt po lewej.

Program Dreamweaver zapamiętuje teraz stan widoku aktywnego wybrany dla dokumentu HTML i stosuje go do wszystkich otwieranych później dokumentów HTML. Załóżmy, że najpierw został otwarty dokument HTML1. Jest on wyświetlany w widoku podzielonym (Kod i Aktywny). Załóżmy następnie, że widok tego dokumentu zostanie zmieniony na pełny widok aktywny. W takiej sytuacji następny otwarty dokument, np. HTML2, również zostanie wyświetlony w pełnym widoku aktywnym. 

Zmiany dotyczące dokumentów z układem elastycznej siatki

Obsługa edytowania w widoku aktywnym

W poprzedniej wersji programu Dreamweaver CC wprowadzono nowe możliwości edycji w widoku aktywnym. W obecnej wersji opcje edycji w widoku aktywnym rozszerzono także na dokumenty z układem elastycznej siatki. Edycja w widoku aktywnym przyspiesza projektowanie strony z elastyczną siatką, ponieważ wprowadzane zmiany są od razu widoczne bez potrzeby przechodzenia do innego widoku.

Poniższe funkcje ułatwiają edycję dokumentów z układem elastycznej siatki w widoku aktywnym:

Ponadto można teraz wyświetlać wizualizację struktury DOM dokumentu HTML z układem elastycznej siatki, korzystając z okna Przegląd elementu

Uwaga: Funkcja Przegląd elementu w dokumentach z układem elastycznej siatki nie obsługuje kopiowania, wklejania, powielania i przenoszenia elementów HTML.

Zmodyfikowano również opcje interfejsu służące do wyświetlania i edycji dokumentów z elastyczną siatką, aby uwzględnić nowe funkcje edycji w widoku aktywnym. Oprócz takich opcji zaznaczonego elementu, jak Ukryj elementy i Rozpocznij nowy wiersz, w dokumencie z elastyczną siatką jest również wyświetlane okienko Monitor elementu.

Opcje elastycznej siatki w poprzednich wersjach
Opcje elastycznej siatki w poprzednich wersjach

Opcje elastycznej siatki oraz okienko Monitor elementu w programie Dreamweaver CC (październik 2014 r.)
Opcje elastycznej siatki oraz okienko Monitor elementu w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)


Dokumenty z elastyczną siatką są teraz otwierane bezpośrednio w widoku aktywnym. Nie można już wyświetlać ani edytować takich dokumentów w widoku Projekt.

Pasek narzędziowy Dokument w programie Dreamweaver CC (październik 2014 r.)
Pasek narzędziowy Dokument w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Pasek narzędziowy Dokument dla dokumentu z układem elastycznej siatki we wcześniejszych wersjach
Pasek narzędziowy Dokument dla dokumentu z układem elastycznej siatki we wcześniejszych wersjach

Więcej informacji na temat dokumentów z elastyczną siatką zawiera artykuł Tworzenie reagujących projektów za pomocą układów elastycznej siatki.

Zmiany obiegu pracy wstawiania

Okno dialogowe „Wstaw” dla dokumentów z elastyczną siatką zawiera teraz „asystenta pozycjonowania”, który ułatwia wstawianie elementu przed lub za wybranym elementem (w widoku aktywnym) albo zagnieżdżanie go w tym elemencie. Więcej informacji: Wstawianie elementów układu elastycznej siatki.

Zmiana opcji zarządzania ukrytymi elementami

Opcja Zarządzaj ukrytymi elementami (ikona oka na pasku narzędziowym) została przeniesiona do menu kontekstowego dla dokumentów z elastyczną siatką.


Aby zarządzać ukrytymi elementami, kliknij prawym przyciskiem myszy na stronie z układem elastycznej siatki i wybierz polecenie Zarządzaj ukrytymi elementami (pozwoli to wyświetlić te elementy). Aby ukryć takie elementy, kliknij ikonę oka na pasku na górze. 

Opcja Zarządzaj ukrytymi elementami w menu kontekstowym w programie Dreamweaver CC (październik 2014 r.)
Opcja Zarządzaj ukrytymi elementami w menu kontekstowym w najnowszej aktualizacji — Dreamweaver CC (październik 2014 r.)

Ikona „oka” do zarządzania ukrytymi elementami we wcześniejszych wersjach
Ikona „oka” do zarządzania ukrytymi elementami we wcześniejszych wersjach

Dostępne domyślnie motywy kolorów dla widoku Kod

W widoku Kod są teraz dostępne następujące gotowe motywy kolorów:

  • Classic (motyw domyślny, taki jak w poprzednich wersjach programu Dreamweaver)
  • Raven
  • Slate
  • Blanche
  • Geneva
Motywy Classic, Raven, Slate, Oblivion, Blanche i Geneva
Motywy Classic, Raven, Slate, Oblivion, Blanche i Geneva

Motyw kolorów dla widoku Kod określa się za pomocą preferencji kolorowania kodu. Wybrany motyw można dostosować, wybierając inne kolory tła, pierwszego planu i znaków ukrytych.

Dla każdego z typów dokumentów dostępnych na liście można dostosować kolory różnych kategorii znaczników oraz elementów kodu, takich jak znaczniki formularzy oraz identyfikatory JavaScript. Na przykład po zastosowaniu motywu Raven do wszystkich typów dokumentów można zmienić kolor znaczników formularzy na niebieski tylko w dokumentach HTML.

Wszystkie niestandardowe ustawienia są zapisywane po kliknięciu przycisku Zastosuj. Dostosowany motyw będzie dostępny do użycia we wszystkich sesjach programu Dreamweaver.

Uwaga:

Dostosowane motywy kolorowania kodu można synchronizować między różnymi instancjami programu Dreamweaver, korzystając z opcji Synchronizacja ustawień w oknie Preferencje. Więcej informacji: Synchronizowanie ustawień programu Dreamweaver z platformą Creative Cloud.

Synchronizacja widoku Kod i widoku aktywnego

Synchronizacja między widokiem Kod a widokiem aktywnym powoduje, że zmiany kodu są natychmiast widoczne w widoku aktywnym. Nie trzeba już, tak jak w poprzednich wersjach, klikać przycisku Odśwież, aby wyświetlić zmiany w widoku aktywnym.

Efekty synchronizacji widoku Kod i widoku aktywnego można zaobserwować w następujących obiegach pracy (gdy działania są wykonywane w widoku Kod):

  • przy wykonywaniu operacji tekstowych, takich jak wycinanie, kopiowanie, wklejanie, cofanie i ponawianie;
  • przy przenoszeniu elementów w okienku Przegląd elementu (przy uaktywnionym widoku Kod);
  • przy wpisywaniu w widoku kod;
  • przy usuwaniu, powielaniu, kopiowaniu i wklejaniu w okienku Przegląd elementu (za pomocą poleceń menu otwieranego prawym przyciskiem myszy);
  • przy operacjach wykonywanych w Inspektorze właściwości, takich jak zmiana formatu tekstu (pogrubienie, kursywa), zmiana klasy, identyfikatora, formatu i właściwości strony, stosowanie czcionek;
  • przy dodawaniu i usuwaniu klas lub identyfikatorów z użyciem wskazówek do kodu w widoku Kod;
  • przy wstawianiu elementów, takich jak DIV i IMG, hiperłączy oraz elementów strukturalnych z panelu Wstaw do widoku Kod;
  • przy dodawaniu i edytowaniu stylów CSS w znaczniku <style>;
  • przy edytowaniu kodu w plikach CSS.

Uwaga:

Zmiany w kodzie JavaScript pojawią się w widoku aktywnym dopiero po pełnym odświeżeniu lub przeładowaniu strony.

Panel Zasoby w widoku aktywnym

W widoku aktywnym jest teraz dostępny panel Zasoby (Okno > Zasoby). Panel Zasoby ułatwia wykonywanie następujących zadań:

  • Przeciąganie lub wstawianie zasobów (obrazów, adresów URL, kolorów, multimediów) z okienka podglądu lub widoku listy na panelu Zasoby.

Uwaga: Przeciąganie zasobów z okienka podglądu jest możliwe tylko na komputerach Mac.

  • Kopiowanie wartości koloru i wklejanie ich do dowolnego pola tekstowego w programie Dreamweaver, np. w panelu Projektant CSS, w widoku Kod, w próbniku kolorów, a nawet w innych aplikacjach (takich jak Notatnik).

Uwaga:

 

  • Jako że kategorie Skrypty, Szablon i Biblioteka na panelu Zasoby bardziej przydają się w widoku Kod, w widoku aktywnym są ukryte.
  • W bieżącej wersji programu Dreamweaver CC kategorie Flash i Filmy połączono w jedną kategorię o nazwie „Multimedia”.
         

Panel Zasoby w widoku aktywnym
Panel Zasoby w widoku aktywnym

Panel Zasoby w widoku Projekt i Kod
Panel Zasoby w widoku Projekt i Kod


Szczegółowe instrukcje korzystania z panelu Zasoby zawiera artykuł Praca z zasobami.

Nowe szablony początkowe

Program Dreamweaver zawiera teraz nowe szablony startowe w układzie reagującym, które ułatwiają szybsze rozpoczęcie pracy nad serwisem. W oknie dialogowym Nowy dokument (Plik > Nowy > Szablony początkowe) można wybierać spośród następujących szablonów:

  • Strona opisowa
  • Wpis na blogu
  • Handel elektroniczny
  • E-mail
  • Portfolio
Nowe szablony początkowe w układzie reagującym
Nowe szablony początkowe w układzie reagującym

Po wybraniu szablonu w oknie dialogowym Nowy Dokument i kliknięciu przycisku Utwórz program Dreamweaver poprosi o zapisanie nowego dokumentu. Zapisując dokument, tworzy się kopię szablonu, którą można następnie dostosować do własnych potrzeb.

Resetowanie preferencji przy uruchamianiu

Podczas rozwiązywania problemów z programem Dreamweaver trzeba niekiedy usunąć folder preferencji, który zawiera niestandardowe ustawienia. We wcześniejszych wersjach należało ręcznie odszukać ten folder na komputerze i usunąć go. W tej wersji natomiast wprowadzono opcję umożliwiającą usunięcie preferencji jednym kliknięciem z poziomu okna dialogowego.

Zerowanie preferencji
Zerowanie preferencji

Okno dialogowe Wyzeruj preferencje można otworzyć podczas uruchamiania programu Dreamweaver, przytrzymując odpowiednią kombinację klawiszy:

  • (Win) klawisz Windows + Ctrl + Shift
  • (Mac) Cmd + Option + Shift

Uwaga:

Opcji zerowania preferencji należy używać z rozwagą. Wyzerowanie powoduje usunięcie wszystkich niestandardowych ustawień w przestrzeni roboczej, skrótów klawiszowych, rozszerzeń i preferencji aplikacji.

(Mac) Przytrzymaj klawisze Cmd + Option + Shift podczas uruchamiania programu Dreamweaver (po kliknięciu ikony Dreamweaver w doku).

(Windows) Wykonaj następujące czynności:

  1. Przejdź do folderu instalacji, odszukaj plik Dreamweaver.exe i kliknij go.

  2. Przytrzymaj klawisz Windows + Ctrl + Shift i dwukrotnie kliknij plik Dreamweaver.exe.

Klawisze te należy przytrzymać wciśnięte nawet wtedy, gdy pojawi się okno dialogowe Kontrola konta użytkownika. 

Pozostałe udoskonalenia

Zmiany związane z synchronizacją ustawień

Ustawienia z poprzedniej wersji programu Dreamweaver, które zostały zapisane w chmurze Creative Cloud, można teraz zaimportować w oknie dialogowym Preferencje. Wszystkie ustawienia lokalne zostaną zastąpione ustawieniami z chmury. Efekty zmiany zaczną obowiązywać po ponownym uruchomieniu programu Dreamweaver.

Importowanie ustawień z wcześniejszych wersji programu Dreamweaver
Importowanie ustawień z wcześniejszych wersji programu Dreamweaver

Ponadto począwszy od tej wersji obok ustawień synchronizowanych w wersjach wcześniejszych program synchronizuje z platformą Creative Cloud również następujące ustawienia:

Zmiany dotyczące panelu Projektant CSS

W tej wersji programu Dreamweaver wprowadzono wiele udoskonaleń panelu Projektant CSS. Panel Projektant CSS zawiera także funkcję pomocy, ułatwiającą rozpoczęcie pracy.

Zmiany ekranu powitalnego

Opcja Szablony serwisów na ekranie powitalnym została zastąpiona opcją Szablony początkowe. Szablony początkowe można znaleźć również w oknie dialogowym Nowy dokument (Plik > Nowy).

Uaktualnienia wersji jQuery

Program Dreamweaver zawiera teraz następujące uaktualnienia bibliotek jQuery:

  • jQuery 1.8.3 do jQuery 1.11.1
  • jQuery UI 1.9.2 do jQuery UI 1.10.4

Usunięto strony startowe jQuery.

Aktualizacja dotycząca usługi PhoneGap

W najnowszej aktualizacji wersji Dreamweaver CC 2014 (z października 2014 r.) i w nowszych wersjach bezpośrednia integracja programu Dreamweaver z usługą PhoneGap Build w celu tworzenia pakietów aplikacji nie jest już obsługiwana.

Można jednak skorzystać bezpośrednio z elektronicznej usługi PhoneGap Build i tworzyć pakiety aplikacji WWW w formacie rodzimym urządzenia mobilnego z użyciem najnowszych aktualizacji. Więcej informacji: Używanie usługi PhoneGap Build w najnowszej aktualizacji programu Dreamweaver CC 2014.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online