Podręcznik użytkownika Anuluj

Narzędzie Extract w programie Dreamweaver

Szukaj

Ostatnia aktualizacja 30 gru 2021

Informacje o szybkim przekształcaniu kompozycji PSD w projekty HTML przeznaczone na komputery i urządzenia mobilne. Style CSS, obrazy, pomiary, czcionki, kolory, gradienty i inne zasoby z dokumentów Photoshop można wydzielać bezpośrednio w programie Dreamweaver.

Uwaga:

Od 1 lipca 2022 r. funkcje panelu Extract zostaną wycofane z programu Dreamweaver w wersji 21.2 i wcześniejszych. Aby wyodrębnić dane stylu oraz zasoby z elementów PSD do wykorzystania w programie Dreamweaver, należy skorzystać z programu Adobe Photoshop.

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).

Rozpoczynanie pracy z narzędziem Extract

Wydzielanie kodu CSS

Ustawianie preferencji narzędzia Extract

Kopiowanie tekstu

Wydzielanie obrazów

Wydzielanie czcionek, kolorów i gradientów

Wydzielanie pomiarów

Rozpoczynanie pracy z narzędziem Extract

Extract umożliwia wydzielanie zasobów z plików PSD bezpośrednio za pomocą panelu Extract w programie Dreamweaver. Poniższe artykuły zawierają dodatkowe informacje na temat panelu i przestrzeni roboczej Extract oraz na temat wczytywania plików PSD do panelu Extract:

Panel i przestrzeń robocza Extract

Przestrzeń robocza o nazwie Extract zapewnia efektywny obieg pracy między programem Dreamweaver i narzędziem Extract. Przestrzeń ta zawiera panel Extract po lewej oraz opracowywaną stronę WWW po prawej (w podziale na widok aktywny oraz Kod). Przestrzeń roboczą można dostosowywać, przeciągając, dokując, zwijając lub rozwijając poszczególne panele. Dostosowaną przestrzeń można zapisać do użycia w przyszłości.

Uwaga:

Jeśli przypadkowo zamkniesz panel Extract, możesz go otworzyć za pomocą klawiatury: Ctrl + K (Win) lub Cmd + K (Mac), albo wybierając polecenie Okno > Extract.

Po pierwszym uruchomieniu programu Dreamweaver panel Extract wyświetli interaktywny samouczek ułatwiający rozpoczęcie pracy. Na górze panelu znajduje się rozwijana lista, która umożliwia wybieranie różnych samouczków.

Po skorzystaniu z samouczka można kliknąć przycisk Pierwsze kroki, aby rozpocząć korzystanie z usługi Extract w programie Dreamweaver. W panelu Extract są wyświetlane miniaturki folderów i plików PSD na Twoim koncie Creative Cloud. Są to pliki przesłane przez Ciebie albo zsynchronizowane z Twojego komputera, a także pliki udostępnione Ci w folderze współpracy w chmurze Creative Cloud.

Panel Extract wyświetlający pliki PSD zapisane w chmurze Creative Cloud

Uwaga:

Aby ponownie uruchomić samouczek, kliknij rozwijane menu w prawym górnym rogu panelu i wybierz polecenie Uruchom samouczek.

Przesyłanie plików PSD do chmury Creative Cloud

Aby przesłać plik PSD do usługi Creative Cloud, wybierz polecenie Okno > Extract i kliknij opcję Prześlij plik PSD. Jeśli kompozycje PSD są opracowywane przez inną osobę albo przez zespół, to można je udostępnić w chmurze Creative Cloud. Udostępnione pliki można następnie pobrać i przesłać na własne konto (bezpośrednio, logując się do usługi Creative Cloud, albo za pośrednictwem panelu Extract w programie Dreamweaver).

Uwaga:

Jeśli używasz programu Dreamweaver w wersji 21.2 lub nowszej na urządzeniu z systemem macOS, włącz format PSD w oknie programu Finder i prześlij plik.

macOS

Wykonaj poniższe czynności, aby aktywować format PSD i przesłać plik:

Kliknij opcję Prześlij plik PSD na panelu Extract.
W oknie programu Finder kliknij pozycję Opcje i wybierz format *.psd z rozwijanego menu.
Wybierz plik PSD i kliknij przycisk Otwórz, aby go przesłać.

Otwieranie plików PSD na panelu Extract

Kliknij miniaturkę odpowiedniego pliku PSD w panelu Extract. Jeśli w chmurze Creative Cloud pojawi się uaktualniona wersja otwartego przez Ciebie pliku PSD, możesz ponownie wczytać ten plik w panelu Extract. Aby to zrobić, kliknij nazwę pliku PSD lub wybierz polecenie Wczytaj ponownie plik PSD z wyskakującego menu w prawym górnym rogu. Aby powrócić do widoku miniaturek i wybrać inny plik, kliknij ikonę Creative Cloud w lewym górnym rogu panelu.

Aby powiększyć wyświetlany projekt, możesz zmienić poziom powiększenia, korzystając z pola na górze panelu Extract albo naciskając klawisze Alt +/-. Za pomocą zakładki Warstwy lub rozwijanej listy Kompozycje warstw można wyświetlać lub ukrywać poszczególne elementy w pliku PSD.

Teraz można przystąpić do przekształcania kompozycji PSD w serwis WWW.

Ustawianie preferencji narzędzia Extract

W preferencjach narzędzia Extract można określić domyślny format pliku używany przy wydzielaniu obrazów, a także domyślną jednostkę czcionek wyświetlaną na panelu Extract.

Wybierz polecenie Edycja > Preferencje (Win) lub Dreamweaver > Preferencje (Mac).
Na liście Kategorie wybierz pozycję Extract.
(Opcjonalnie) Zmień domyślny format wydzielania obrazów.

Format wydzielonego obrazu
(Opcjonalnie) W sekcji Extract dla urządzeń zaznacz wymagane rozdzielczości. Są to ustawienia używane w sytuacji, gdy wybrano zapisanie obrazu w wielu wersjach z różną rozdzielczością.
- Aby zapisać te wersje z przyrostkami nazwy, kliknij odpowiedni wiersz w kolumnie Przyrostek i wpisz tekst.
- Aby zapisać wersje w wielu rozdzielczościach w osobnych folderach wyjściowych, kliknij odpowiedni wiersz w kolumnie Folder i podaj ścieżkę względną.
Extract dla urządzeń
(Opcjonalnie) Kliknij przycisk Wyczyść bufor, aby usunąć zbuforowane dane związane z korzystaniem z narzędzia Extract.
Kliknij przycisk Zastosuj, a następnie zamknij okno dialogowe Preferencje.
Aby zmiany pojawiły się na panelu Extract, ponownie wczytaj plik PSD (wyskakujące menu > Ponownie wczytaj plik PSD).

Opcja Ponownie wczytaj plik PSD w panelu Extract

Wydzielanie kodu CSS z plików PSD

Poszczególne elementy w kompozycji PSD udostępniają informacje o ich właściwościach CSS. Właściwości te (wszystkie albo tylko wybrane) można skopiować i wkleić bezpośrednio na panelu Projektant CSS, oknie Monitor elementu w widoku aktywnym albo w kodzie (w dokumencie źródłowym stylów CSS albo w dokumencie HTML).

Ponadto wskazówki do kodu są automatycznie zapełniane właściwościami CSS elementu, który został zaznaczony w kompozycji PSD. Jeśli wolisz samodzielnie pisać kod, możesz skorzystać z tych wskazówek, aby wydzielać właściwości CSS z kompozycji.

Przejdź do panelu Extract (Okno > Extract) i kliknij odpowiedni plik PSD. Miniaturka tego pliku PSD zostanie powiększona, umożliwiając dokładniejsze zapoznanie się z kompozycją.
Kliknij odpowiedni element lub zasób w pliku PSD. Zostanie wyświetlona wyskakująca lista, zawierająca właściwości CSS tego elementu i umożliwiająca ich zaznaczenie i skopiowanie. Wysokość i szerokość zaznaczonego elementu może być podawana w pikselach lub jako wartość procentowa.

Uwaga: Jeśli wybierzesz tutaj opcję procentową, to wyniki pomiarów również będą wyświetlane w jednostkach procentowych.

Opcja Kopiuj CSS na panelu Extract

Aby skopiować styl CSS, zaznacz odpowiednie właściwości i kliknij opcję Kopiuj CSS.
Wklej styl CSS w swoim dokumencie, posługując się jedną z następujących metod:
- Aby wkleić styl CSS na panelu Projektant CSS, kliknij odpowiedni selektor prawym przyciskiem myszy i wybierz polecenie Wklej style.
- Aby wkleić styl CSS w okienku Monitor elementu, kliknij odpowiedni selektor prawym przyciskiem myszy i wybierz polecenie Wklej style.
- Aby wkleić styl CSS w kodzie, umieść punkt wstawiania w odpowiednim miejscu, kliknij prawym przyciskiem myszy i wybierz polecenie Wklej.

Aby wydzielić właściwości CSS za pomocą wskazówek do kodu, wykonaj następujące czynności:

Otwórz źródłowy dokument CSS powiązany z dokumentem albo przejdź do widoku Kod dla dokumentu HTML.
Przejdź do panelu Extract, kliknij odpowiedni plik PSD, a następnie odpowiedni element w kompozycji.
Przejdź do swojego dokumentu i umieść punkt wstawiania w odpowiednim miejscu w kodzie.
Zacznij wpisywać nazwę właściwości CSS, aby wyświetlić wskazówki do kodu zawierające właściwości CSS elementu zaznaczonego w kompozycji PSD. Kliknij odpowiednią właściwość CSS, aby wstawić ją do kodu.

Wskazówki do kodu z właściwością CSS elementu z pliku PSD
Aby wydzielić wiele właściwości CSS, zaznacz odpowiednie właściwości w wyskakującym okienku panelu Extract. Następnie we wskazówkach do kodu kliknij opcję Wstaw zaznaczone.

Grupowe wstawianie właściwości CSS

Kopiowanie tekstu z plików PSD

Tekst lub zawartość kompozycji PSD można wstawiać na stronę WWW jednym kliknięciem. Aby skopiować tekst z kompozycji PSD w panelu Extract, zaznacz element tekstowy i kliknij opcję Kopiuj tekst. Tekst zostanie skopiowany do schowka i będzie go można wkleić w dowolnym miejscu.

Uwaga:

Po wydzieleniu tekstu można wyodrębnić jego właściwości, takie jak krój czcionki i kolory. Więcej informacji: Wydzielanie czcionek, kolorów i gradientów z pliku PSD.

Wydzielanie obrazów z plików PSD

Warstwy z kompozycji PSD w panelu Extract można po prostu przeciągać na precyzyjnie wybrane miejsce w widoku aktywnym strony WWW. Ułatwiają to pomoce wizualne dostępne w widoku aktywnym, takie jak aktywne linie pomocnicze i ikona DOM. Zatrzymanie na chwilę kursora przed upuszczeniem elementu powoduje wyświetlenie ikony DOM (</>). Wskazanie tej ikony umożliwia wyświetlenie struktury DOM (Document Object Model) i wstawienie elementu w odpowiednim miejscu w tej strukturze. Jeśli wolisz samodzielnie pisać kod, możesz wydzielać obrazy za pomocą kontekstowych wskazówek. Wskazówki do kodu umożliwiają wydzielanie kolorów i gradientów jako obrazów.

Uwaga:

Jeśli plik PSD zawiera wiele obszarów roboczych, każdy z nich zostanie wyświetlony jako folder w panelu Warstwy. Foldery takie można rozwijać lub zwijać, aby wyświetlać lub ukrywać ich zawartość. Aby powiększyć konkretny obszar roboczy, po prostu kliknij jego nazwę. Aby zmniejszyć obszar roboczy, kliknij w dowolnym miejscu poza tym obszarem i skorzystaj z opcji ZMIEŚĆ.

Przed wstawieniem wydzielonego obrazu program Dreamweaver wyświetli jego nazwę, którą będzie można edytować. Obraz jest domyślnie zapisywany w katalogu głównym serwisu. Jeśli chcesz zapisać go w innym miejscu, dodaj pełną ścieżkę katalogu do nazwy pliku.

Uwaga: Jeśli wydzielasz obrazy do dokumentu, który nie został przypisany do zdefiniowanego serwisu, to zostaną one zapisane w katalogu, w którym znajduje się ten dokument. Jeśli dokument nie został jeszcze zapisany, program poprosi o jego zapisanie.

Można także zapisać dokument na dysku lokalnym i wprowadzić go do strony WWW w późniejszym czasie. Jeśli projektujesz responsywną witrynę internetową, możesz również jednym kliknięciem zapisać wiele wersji obrazu w różnych rozdzielczościach przeznaczonych na różne urządzenia.

Przejdź do panelu Extract i kliknij plik PSD, z którego chcesz pobrać obrazy.
Kliknij odpowiedni obraz w tym pliku PSD.

Uwaga:

Za pomocą zakładki Warstwy i rozwijanej listy Kompozycje warstw na panelu Extract można wyświetlać lub ukrywać poszczególne obrazy w pliku PSD. Jeśli obraz zawiera wiele warstw, możesz zaznaczyć jedną z nich do wyodrębnienia.

Po prawej stronie przestrzeni roboczej w widoku Kod są wyświetlane wskazówki do kodu.
Aby zaimportować wiele obrazów, przytrzymaj klawisz Shift lub Command i kliknij wymagane obrazy. Wybrane obrazy zostaną wydzielone jako pojedynczy obraz.
Wykonaj jedną z następujących czynności:
- Po kliknięciu obrazu zostanie wyświetlone okno dialogowe; kliknij ikonę w tym oknie. Podaj ścieżkę, nazwę i format pliku oraz współczynnik skalowania (jeśli to potrzebne). Następnie wykonaj jedną z następujących czynności:
  
  Kliknij przycisk Zapisz, aby zapisać obraz w rozdzielczości 1x. Aby przeskalować obraz, zaznacz opcję Skala i podaj współczynnik skalowania.
  
  Kliknij opcję Zapisz wiele, aby zapisać wiele wersji obrazu przy różnych rozdzielczościach. Plik PSD nie musi zawierać tych wersji. Program Dreamweaver może zapisać obraz w wielu rozdzielczościach podczas wydzielania.
Niezbędne wersje rozdzielczości i odpowiedni folder wyjściowy można określić w oknie Preferencje.
Wydzielanie obrazu za pomocą ikony Wydziel zasób
- Przeciągnij obraz do dokumentu, do widoku aktywnego. W tym widoku program wyświetla aktywne linie pomocnicze ułatwiające pozycjonowanie obrazu.
Po upuszczeniu obrazu program Dreamweaver wyświetli jego nazwę. Możesz edytować zarówno tę nazwę, jak i rozszerzenie pliku. Naciśnij klawisz Enter, aby zapisać obraz. Obraz jest domyślnie zapisywany w katalogu głównym serwisu. Jeśli chcesz zapisać go w innym miejscu, podaj pełną ścieżkę katalogu wraz z nazwą pliku.
Opcje edycji nazwy i rozszerzenia przy przeciąganiu obrazu z panelu Extract
- Po kliknięciu obrazu program Dreamweaver wypełni kontekstowe wskazówki do kodu. Przejdź do dokumentu HTML w widoku Kod albo do dokumentu CSS i umieść kursor tam, gdzie ma się znaleźć punkt wstawiania. Gdy wpiszesz nazwę właściwości background-image albo znacznika IMG, we wskazówkach do kodu pojawi się nazwa wybranego obrazu. Zaznacz ten obraz, zmodyfikuj jego nazwę i rozszerzenie, jeśli to konieczne, a następnie naciśnij klawisz Enter.
Obraz jest domyślnie zapisywany w katalogu głównym serwisu. Jeśli chcesz zapisać go w innym miejscu, podaj własną ścieżkę katalogu wraz z nazwą pliku.
Wydzielanie obrazów za pomocą wskazówek do kodu

Wydzielanie pomiarów z plików PSD

Za pomocą panelu Extract można w prosty sposób wyświetlać i wyodrębniać pomiary odległości między dowolnymi elementami w kompozycji PSD.

Kliknij odpowiednie elementy w pliku PSD na panelu Extract, przytrzymując klawisz Shift albo Command.

Panel Extract wyświetli odległość w pionie i w poziomie między tymi dwoma elementami.

Pomiary w panelu Extract

Uwaga:

Aby wyświetlić wyniki pomiarów w jednostkach procentowych, kliknij dowolny element, a następnie wybierz opcję procentową.
Kliknij odpowiednią wartość, aby skopiować ją do schowka.
Skopiowaną wartość można wkleić w dowolnym miejscu, np. we właściwościach CSS na panelu Projektant CSS albo w kodzie.

Wydzielanie czcionek, kolorów i gradientów z pliku PSD

Panel Extract umożliwia wydzielanie właściwości CSS czcionek, kolorów lub gradientów użytych w kompozycji PSD.

Kliknij opcję Style na panelu Extract.
Aby wydzielić czcionki, wykonaj następujące czynności w sekcji Czcionki.
1. Rozwiń odpowiedni typ czcionki.
  
  Aby uzyskać więcej informacji o czcionce, kliknij ikonę Adobe Fonts ().
2. Kliknij format i rozmiar, które chcesz skopiować. W wyświetlonym okienku kliknij opcję Kopiuj CSS. Narzędzie Extract oznaczy elementy tekstu, które używają klikniętej czcionki, formatu i rozmiaru.
  
  Uwaga:
  
  Jednostkę czcionek można zmienić na „em” lub „rem” w preferencjach narzędzia Extract (Preferencje > Extract). Kliknij opcję Ponownie wczytaj plik PSD w wyskakującym menu w prawym górnym rogu panelu Extract, aby zobaczyć efekty zmian.
  
  Wydzielanie czcionek
3. Skopiowany styl CSS można wkleić w dowolnym miejscu, np. na panelu Projektant CSS albo w kodzie.
Aby wydzielić kolory, wykonaj następujące czynności w sekcji Kolory.
1. Kliknij odpowiednią próbkę koloru. Narzędzie Extract oznaczy elementy, które używają wybranego koloru.
  
  Uwaga: Można również użyć próbnika kolorów, aby pobrać dowolny inny kolor z kompozycji PSD.
2. Po kliknięciu próbki koloru zostanie wyświetlone okienko, w którym należy wybrać odpowiedni model kolorów (RGB, hex albo HSL), a następnie skopiować wartości koloru (klawisze Ctrl+C; Cmd+C).
  
  Wydzielanie kolorów
3. Skopiowane wartości koloru można wkleić w dowolnym miejscu, np. na panelu Projektant CSS albo w kodzie.
Aby wydzielić gradienty, kliknij próbkę gradientu w sekcji Gradienty. W wyświetlonym okienku kliknij opcję Kopiuj CSS. Skopiowany styl CSS można wkleić w dowolnym miejscu, np. na panelu Projektant CSS albo w kodzie.

Wraz z gradientami są wklejane prefiksy dostawców wybrane w preferencjach (Preferencje > Style CSS). Jeśli wydzielany jest gradient radialny, to odpowiadający mu kod CSS będzie wklejany bez prefiksu dostawcy, ponieważ gradienty tego typu nie są obsługiwane.

Wydzielanie gradientu