W programie Dreamweaver (widok Projekt lub Kod) ustaw punkt wstawiania na stronie w miejscu, w którym chcesz wstawić obraz.
Ostatnia aktualizacja
27 kwi 2021
Informacje o integrowaniu programu Photoshop z programem Dreamweaver. Posługiwanie się obiektami inteligentnymi w zintegrowanych obiegach pracy programów Photoshop i Dreamweaver.
Omówienie integracji z programem Photoshop
Spostrzeżenie
Obieg pracy integracji z programem Photoshop został wycofany w programie Dreamweaver 21.0 i nowszych wersjach.
Można wstawiać pliki obrazów z programu Photoshop (format PSD) na strony internetowe w programie Dreamweaver i pozwolić programowi Dreamweaver zoptymalizować je jako obrazy gotowe do wykorzystania w internecie (formaty GIF, JPEG i PNG). Podczas tego procesu program Dreamweaver wstawia obraz jako obiekt inteligentny i utrzymuje aktywne połączenie z oryginalnym plikiem PSD.
Można również wklejać całość lub część wielowarstwowego lub wieloprzeciętego obrazu z programu Photoshop na stronę internetową w programie Dreamweaver. Jednak podczas kopiowania i wklejania z programu Photoshop nie jest utrzymywane aktywne połączenie z oryginalnym plikiem. Aby zaktualizować obraz, wprowadź zmiany w programie Photoshop i skopiuj oraz wklej ponownie.
Spostrzeżenie
Jeśli często korzystasz z tej funkcji integracji, warto przechowywać pliki programu Photoshop w witrynie programu Dreamweaver w celu łatwiejszego dostępu. W takim przypadku pamiętaj o ukryciu ich, aby uniknąć ujawnienia oryginalnych zasobów oraz niepotrzebnego przekazywania między witryną lokalną a serwerem zdalnym.
Samouczek dotyczący integracji programów Photoshop i Dreamweaver można znaleźć na stronie Integracja programów Dreamweaver i Photoshop.
Informacje o obiektach inteligentnych i obiegu pracy w programach Photoshop-Dreamweaver
Istnieją dwa główne obiegi pracy z plikami Photoshop w programie Dreamweaver: obieg pracy kopiuj/wklej oraz obieg pracy Smart Objects.
Obieg pracy kopiuj/wklej
Obieg pracy kopiuj/wklej umożliwia wybór wycinków lub warstw w pliku programu Photoshop, a następnie użycie programu Dreamweaver do wstawienia ich jako obrazów gotowych do wykorzystania w internecie.Jeśli jednak chcesz zaktualizować zawartość później, musisz otworzyć oryginalny plik programu Photoshop, wprowadzić zmiany, skopiować plasterek lub warstwę do schowka ponownie, a następnie wkleić zaktualizowany plasterek lub warstwę do programu Dreamweaver. Ten obieg pracy jest zalecany tylko wtedy, gdy chcesz wstawić część pliku programu Photoshop (na przykład sekcję projektu kompozytowego) jako obraz na stronie internetowej.
Obieg pracy obiektów inteligentnych
Podczas pracy z kompletnymi plikami programu Photoshop firma Adobe zaleca obieg pracy obiektów inteligentnych. Obiekt inteligentny w programie Dreamweaver to zasób obrazu umieszczony na stronie internetowej, który ma aktywne połączenie z oryginalnym plikiem programu Photoshop (PSD). W widoku projektowym programu Dreamweaver obiekt inteligentny jest oznaczony ikoną w lewym górnym rogu obrazu.
Gdy obraz internetowy (czyli obraz na stronie programu Dreamweaver) jest niezsynchronizowany z oryginalnym plikiem programu Photoshop, program Dreamweaver wykrywa, że oryginalny plik został zaktualizowany i wyświetla jedną ze strzałek ikony obiektu inteligentnego na czerwono. Po wybraniu obrazu internetowego w widoku projektowym i kliknięciu przycisku Aktualizuj z oryginału w inspektorze właściwości obraz aktualizuje się automatycznie, odzwierciedlając wszelkie zmiany wprowadzone w oryginalnym pliku programu Photoshop.
Podczas korzystania z obiegu pracy obiektów inteligentnych nie trzeba otwierać programu Photoshop, aby zaktualizować obraz internetowy. Ponadto wszelkie aktualizacje wprowadzane do obiektu inteligentnego w programie Dreamweaver są niedestrukcyjne. Oznacza to, że można zmienić wersję internetową obrazu na stronie, zachowując jednocześnie nietknięty oryginalny obraz programu Photoshop.
Można również zaktualizować obiekt inteligentny bez wybierania obrazu internetowego w widoku projektowym. Panel zasobów umożliwia aktualizację wszystkich obiektów inteligentnych, w tym obrazów, które mogą nie być wybieralne w oknie dokumentu (na przykład obrazy tła CSS).
Ustawienia optymalizacji obrazu
W oknie dialogowym Optymalizacja obrazu można określić ustawienia optymalizacji obrazu zarówno dla obiegu pracy kopiuj/wklej, jak i obiegu pracy obiektów inteligentnych. Okno to umożliwia ustawienie formatu pliku i jakości obrazu. Program Dreamweaver wyświetla to okno, gdy po raz pierwszy kopiuje się plasterek lub warstwę albo wstawia plik programu Photoshop jako obiekt inteligentny. Pozwala to w łatwy sposób utworzyć obraz internetowy.
Jeśli kopiujesz lub wklejasz aktualizację do konkretnego plasterka lub warstwy, program Dreamweaver zapamiętuje oryginalne ustawienia i zgodnie z nimi odtwarza obraz internetowy. Podobnie dzieje się, gdy za pomocą Inspektora właściwości aktualizujesz obiekt inteligentny. Program Dreamweaver używa wówczas tych samych ustawień, które zostały użyte, gdy obraz wstawiany był za pierwszy razem. Ustawienia obrazu można w dowolnym czasie zmienić, zaznaczając obraz w widoku Projekt, a następnie klikając przycisk Edytowanie ustawień obrazu w Inspektorze właściwości.
Przechowywanie plików programu Photoshop
Jeśli wstawisz obraz internetowy, a w witrynie programu Dreamweaver nie zachowasz oryginalnego pliku programu Photoshop, to wówczas program Dreamweaver będzie traktować ścieżkę do oryginalnego pliku jako ścieżkę absolutną do lokalnego pliku. (Odnosi się to zarówno do obiegu pracy kopiuj/wklej, jak i obiegu pracy obiektów inteligentnych). Jeśli na przykład ścieżka do serwisu programu Dreamweaver to C:\Sites\mySite, a twój plik programu Photoshop zapisany jest w C:\Images\Photoshop, to wówczas program Dreamweaver nie rozpozna oryginalnego zasobu jako części serwisu o nazwie mySite. Może to powodować problemy z udostępnianiem danego pliku programu Photoshop innym członkom zespołu, ponieważ program Dreamweaver będzie traktował ten plik jako dostępny na konkretnym lokalnym dysku twardym.
Jeśli jednak zapiszesz dany plik programu Photoshop wewnątrz witryny, to program Dreamweaver ustanowi ścieżkę do pliku względem witryny. Każdy użytkownik mający prawo dostępu do serwisu będzie mógł utworzyć poprawną ścieżkę do tego pliku przy założeniu, że otrzymał również do pobrania oryginalny plik
Samouczek wideo dotyczący otwierania obrazów do edycji typu roundtrip w programie Photoshop można znaleźć na stronie Edycja typu roundtrip w programie Photoshop.
Tworzenie obiektu inteligentnego
Po wstawieniu obrazu z programu Photoshop (plik PSD) na stronę program Dreamweaver tworzy obiekt inteligentny. Obiekt inteligentny to obraz gotowy do wykorzystania w internecie, który utrzymuje aktywne połączenie z oryginalnym obrazem programu Photoshop. Za każdym razem, gdy zaktualizujesz oryginalny obraz w programie Photoshop, program Dreamweaver daje możliwość zaktualizowania obrazu w programie Dreamweaver jednym kliknięciem.
Wybierz polecenie Wstaw > Obraz.
Spostrzeżenie
Można także przeciągnąć plik PSD na stronę z panelu Files, jeśli pliki programu Photoshop są przechowywane w witrynie.Jeśli tak zrobisz, pomiń następny krok.
Znajdź wybrany obraz programu Photoshop (plik PSD) w oknie dialogowym Wybierz źródło obrazu, klikając przycisk Przeglądaj i wyszukując odpowiednią nazwę.
W oknie Optymalizacja obrazu dopasuj ustawienia optymalizacji i kliknij przycisk OK.
Zapisz plik obrazu gotowy do internetu w lokalizacji w folderze głównym witryny.
Program Dreamweaver tworzy obiekt inteligentny na podstawie wybranych ustawień optymalizacji i umieszcza wersję obrazu gotową do internetu na stronie.Obiekt inteligentny utrzymuje połączenie na żywo z oryginalnym obrazem i informuje, gdy oba nie są zsynchronizowane.
Spostrzeżenie
Jeśli w przyszłości wystąpi konieczność zmiany ustawień optymalizacji obrazu już umieszczonego w serwisie, będzie można zaznaczyć ten obraz, kliknąć przycisk Edytowanie ustawień obrazu w Inspektorze właściwości i wprowadzić niezbędne zmiany w oknie dialogowym Optymalizacja obrazu. Zmiany wprowadzone w oknie dialogowym Optymalizacja obrazu nie mają wpływu na oryginalne dane. Program Dreamweaver nigdy nie modyfikuje oryginalnego pliku z programu Photoshop i zawsze odtwarza obraz internetowy na podstawie oryginalnych danych.
Samouczek wideo dotyczący otwierania obrazów do edycji typu roundtrip w programie Photoshop można znaleźć na stronie Edycja typu roundtrip w programie Photoshop.
Uaktualnianie obiektu inteligentnego
Jeśli zmienisz plik Photoshop, z którym połączony jest obiekt inteligentny, program Dreamweaver powiadomi cię, że obraz gotowy do internetu nie jest zsynchronizowany z oryginałem.W programie Dreamweaver obiekty inteligentne są oznaczone ikoną w lewym górnym rogu obrazu.Gdy obraz gotowy do internetu w programie Dreamweaver jest zsynchronizowany z oryginalnym plikiem Photoshop, obie strzałki w ikonie są zielone.Gdy obraz gotowy do internetu nie jest zsynchronizowany z oryginalnym plikiem Photoshop, jedna ze strzałek ikony staje się czerwona.
Aby uaktualnić obiekt inteligentny, uwzględniając bieżącą zawartość oryginalnego pliku PSD, zaznacz obiekt inteligentny w oknie dokumentu, przejdź do Inspektora właściwości, a następnie kliknij przycisk Aktualizuj z oryginału.
Spostrzeżenie
Nie musisz mieć zainstalowanego programu Photoshop, aby wykonać aktualizację z programu Dreamweaver.
Uaktualnianie wielu obiektów inteligentnych
Można zaktualizować wiele obiektów inteligentnych jednocześnie za pomocą panelu Assets.Panel Assets umożliwia także wyświetlanie obiektów inteligentnych, które mogą nie być wybieralne w oknie dokumentu (na przykład obrazy w tle CSS).
W panelu Files kliknij kartę Assets, aby wyświetlić zasoby witryny.
Upewnij się, że jest zaznaczony widok Obrazy. Jeśli nie jest zaznaczony, kliknij przycisk Obrazy.
Zaznacz poszczególne zasoby obrazu w panelu Zasoby. Po wybraniu obiektu inteligentnego zobaczysz ikonę obiektu inteligentnego w lewym górnym rogu obrazu.Zwykłe obrazy nie mają takich ikon.
Aby zaktualizować każdy obiekt inteligentny, kliknij prawym przyciskiem myszy nazwę pliku i wybierz opcję Update from Original.Można także kliknąć z przyciśniętym klawiszem Control, aby wybrać wiele nazw plików i zaktualizować je wszystkie jednocześnie.
Spostrzeżenie
Nie musisz mieć zainstalowanego programu Photoshop, aby wykonać aktualizację z programu Dreamweaver.
Zmiana rozmiaru obiektu inteligentnego
Można zmienić rozmiar obiektu inteligentnego w oknie dokumentu tak samo jak każdego innego obrazu.
Wybierz obiekt inteligentny w oknie dokumentu i przeciągnij uchwyty zmiany rozmiaru, aby zmienić rozmiar obrazu.Można zachować proporcje szerokości i wysokości, przytrzymując klawisz Shift podczas przeciągania.
Przejdź do Inspektora właściwości i kliknij przycisk Aktualizuj z oryginału.
Po zaktualizowaniu obiektu inteligentnego obraz internetowy jest renderowany bez strat w nowym rozmiarze, na podstawie bieżącej zawartości oryginalnego pliku i oryginalnych ustawień optymalizacji.
Edycja oryginalnego pliku Photoshop obiektu inteligentnego
Po utworzeniu obiektu inteligentnego na stronie Dreamweaver można edytować oryginalny plik PSD w programie Photoshop.Po wprowadzeniu zmian w programie Photoshop można łatwo zaktualizować obraz internetowy w programie Dreamweaver.
Spostrzeżenie
Upewnij się, że program Photoshop jest ustawiony jako podstawowy zewnętrzny edytor obrazów.
Zaznacz obiekt inteligentny w oknie dokumentu.
Kliknij przycisk Edytuj w Inspektorze właściwości.
Wprowadź zmiany w programie Photoshop i zapisz nowy plik PSD.
Przejdź do programu Dreamweaver, zaznacz ponownie obiekt inteligentny i kliknij przycisk Aktualizuj z oryginału.
Spostrzeżenie
Jeśli w programie Photoshop został zmieniony rozmiar obrazu, należy wyzerować rozmiar obrazu internetowego w programie Dreamweaver. Program Dreamweaver uaktualnia obiekt inteligentny wyłącznie na podstawie zawartości oryginalnego pliku PSD, a nie na podstawie jego rozmiaru. Aby uzgodnić rozmiar obrazu internetowego z rozmiarem oryginalnego pliku programu Photoshop, kliknij obraz prawym przyciskiem myszy i wybierz opcję Przywróć rozmiar oryginału.
Stany obiektów inteligentnych
W poniższej tabeli wymieniono różne stany obiektów inteligentnych.
|
Stan obiektu inteligentnego |
Opis |
Zalecana operacja |
|
Obrazy zsynchronizowane |
Obraz internetowy został zsynchronizowany z bieżącą zawartością oryginalnego pliku PSD. Atrybuty wysokości i szerokości w kodzie HTML mają wartości zgodne z wymiarami obrazu internetowego. |
Brak |
|
Oryginał został zmodyfikowany |
Po utworzeniu obrazu internetowego w programie Dreamweaver oryginalny plik z programu Photoshop został zmodyfikowany. |
W celu zsynchronizowania obydwu obrazów należy przejść do Inspektora właściwości i użyć przycisku Aktualizuj z oryginału. |
|
Wymiary obrazu internetowego są różne od szerokości i wysokości zaznaczonego obiektu HTML |
Wartości atrybutów wysokości i szerokości w kodzie HTML są różne od odpowiednich wymiarów obrazu internetowego wygenerowanego przez program Dreamweaver. Jeśli wymiary obrazu internetowego są mniejsze od szerokości i wysokości w kodzie HTML, może wystąpić efekt pikselacji obrazu internetowego. |
W takim wypadku należy przejść do Inspektora właściwości i użyć przycisku Aktualizuj z oryginału w celu ponownego utworzenia obrazu internetowego z pliku PSD. Przy ponownym tworzeniu obrazu internetowego program Dreamweaver wykorzystuje bieżące wartości atrybutów z kodu HTML. |
|
Wymiary oryginału są za małe w stosunku do szerokości i wysokości zaznaczonego obiektu HTML |
Wartości atrybutów wysokości i szerokości w kodzie HTML są większe niż odpowiednie wymiary oryginalnego pliku utworzonego w programie Photoshop. Może wystąpić efekt pikselacji obrazu internetowego. |
Nie należy tworzyć obrazów internetowych o większych wymiarach niż wymiary oryginalnego obrazu PSD. |
|
Nie znaleziono oryginału |
Program Dreamweaver nie możne znaleźć oryginalnego pliku programu Photoshop, który określono w Inspektorze właściwości w polu tekstowym Oryginał. |
Wprowadź poprawną ścieżkę do pliku w Inspektorze właściwości (w polu Oryginał) albo przenieś plik programu Photoshop w miejsce aktualnie określone. |
Kopiowanie i wklejanie zaznaczenia z programu Photoshop
Można skopiować całość lub część obrazu z programu Photoshop i wkleić zaznaczenie na stronę programu Dreamweaver jako obraz gotowy do publikacji w internecie. Można skopiować pojedynczą warstwę lub zestaw warstw dla wybranego obszaru obrazu albo skopiować plasterek obrazu. Jednak w takim przypadku Dreamweaver nie tworzy obiektu inteligentnego.
Spostrzeżenie
Chociaż w przypadku obrazów wklejonych nie jest dostępna funkcja uaktualniania z oryginału, to oryginalny plik PSD można otwierać i edytować. W tym celu należy zaznaczyć wklejony obraz, przejść do Inspektora właściwości i kliknąć przycisk Edycja.
W programie Photoshop wykonaj jedną z następujących czynności:
- Skopiuj całą warstwę lub jej część, zaznaczając elementy do skopiowania za pomocą narzędzia Zaznaczanie prostokątne, a następnie wybierając polecenie Edycja > Kopiuj. Operacja kopiuje do schowka tylko aktywną warstwę zaznaczonego obszaru. Jeśli fragment posiadał efekty na bazie warstw, to operacja nie skopiowała ich.
- Skopiuj i scal kilka warstw, zaznaczając elementy do skopiowania za pomocą narzędzia Zaznaczanie prostokątne, a następnie wybierając polecenie Edycja > Kopiuj scalone. Operacja powoduje spłaszczenie i skopiowanie wszystkich aktywnych i niższych warstw zaznaczonego obszaru do schowka. Jeśli dowolne z warstw posiadały efekty na bazie warstw, to operacja je skopiowała.
- Skopiuj plasterek, zaznaczając go za pomocą narzędzia Zaznaczanie plasterków, a następnie wybierając polecenie Edycja > Kopiuj. Operacja powoduje spłaszczenie i skopiowanie do schowka warstw plasterka — zarówno warstwy aktywnej, jak i tych leżących poniżej.
Spostrzeżenie
Aby szybko zaznaczyć cały obraz do skopiowania, wybierz polecenie Zaznacz > Wszystko.
W programie Dreamweaver (widok Projekt lub Kod) umieść punkt wstawiania na stronie w miejscu, w którym ma zostać wstawiony obraz.
Wybierz polecenie Edycja > Wklej.
W oknie dialogowym Optymalizacja obrazu dopasuj ustawienia optymalizacji i kliknij przycisk OK.
Zapisz plik obrazu gotowego do publikacji w internecie w lokalizacji w folderze głównym witryny.
Program Dreamweaver definiuje obraz zgodnie z ustawieniami optymalizacji i umieszcza jego wersję dla Internetu na danej stronie. Informacje na temat obrazu, takie jak nazwa pliku i położenie oryginalnego pliku źródłowego PSD są zapisywane w Uwagach do projektu, bez wzglądu na to, czy opcja Uwag została włączona dla danego serwisu. Uwagi do projektu umożliwiają powrót do edycji oryginalnego pliku źródłowego Photoshop z Dreamweaver.
Edycja obrazów wklejonych
Po wklejeniu obrazów z programu Photoshop na strony programu Dreamweaver można edytować oryginalny plik PSD w programie Photoshop. W przypadku obiegu pracy kopiuj/wklej firma Adobe zaleca, aby zawsze wprowadzać zmiany do oryginalnego pliku PSD (a nie do obrazu gotowego do publikacji w internecie) i ponownie wklejać w celu zachowania jednego źródła.
Spostrzeżenie
Upewnij się, że program Photoshop jest ustawiony jako główny zewnętrzny edytor obrazów dla typu pliku, który chcesz edytować.
W programie Dreamweaver wybierz obraz gotowy do publikacji w internecie, który został pierwotnie utworzony w programie Photoshop, i wykonaj jedną z następujących czynności:
- Kliknij przycisk Edytuj w Inspektorze właściwości danego obrazu.
- Naciśnij Control (Windows) lub Command (Macintosh) podczas podwójnego kliknięcia pliku.
- Kliknij prawym przyciskiem myszy (Windows) lub kliknij z przytrzymaniem klawisza Control (Macintosh) obraz, wybierz z menu kontekstowego polecenie Edytuj oryginał za pomocą, a następnie wybierz Photoshop.
Spostrzeżenie
Zakłada to, że program Photoshop jest ustawiony jako główny zewnętrzny edytor obrazów dla plików PSD.Możesz również ustawić program Photoshop jako domyślny edytor dla typów plików JPEG, GIF i PNG.
Edytuj plik w programie Photoshop.
Wróć do programu Dreamweaver i wklej zaktualizowany obraz lub zaznaczenie na stronę.
Po wklejeniu obrazu zawsze istnieje możliwość jego ponownej optymalizacji. W tym celu należy przejść do Inspektora właściwości i kliknąć przycisk Edytowanie ustawień obrazu.
Ustawianie opcji w oknie dialogowym Optymalizacja obrazu
Po utworzeniu obiektu inteligentnego lub wklejeniu zaznaczenia z programu Photoshop program Dreamweaver wyświetla okno dialogowe Optymalizacja obrazu. (Program Dreamweaver wyświetla to okno również wtedy, gdy użytkownik zaznaczy obraz dowolnego typu, uaktywni Inspektora właściwości i kliknie przycisk Edytowanie ustawień obrazu). Okno to pozwala określać i sprawdzać ustawienia obrazów przygotowywanych do publikacji w Internecie, przy użyciu odpowiedniej kombinacji kolorów, stopnia kompresji i jakości.
Obraz przygotowany dla Internetu może być wyświetlany we wszystkich nowoczesnych przeglądarkach internetowych i zawsze zachowuje taki sam wygląd — bez względu na system i przeglądarkę. Mówiąc ogólnie, ustawienia te pozwalają zdecydować, który element jest ważniejszy: rozmiar pliku czy jego jakość.
Spostrzeżenie
Wybrane ustawienia dotyczą tylko zaimportowanej wersji pliku obrazu. Oryginalny plik PSD (Photoshop) lub PNG (Fireworks) pozostaje niezmieniony.
Ustawienie domyślne
Wybierz ustawienie domyślne najlepiej odpowiadające swoim wymaganiom. Rozmiar pliku obrazu zmienia się zgodnie z wybranym ustawieniem domyślnym. W tle zostanie wyświetlony natychmiastowy podgląd obrazu z zastosowanym ustawieniem.
Na przykład w przypadku obrazów, które muszą być wyświetlane bardzo wyraźnie, wybierz ustawienie PNG24: fotografie (wyraźne szczegóły). Wybierz GIF For Background Images (Patterns), jeśli wstawiasz wzorek, który będzie działał jako tło strony.
Po wybraniu ustawienia domyślnego zostaną wyświetlone te spośród jego opcji, które można skonfigurować. Jeśli chcesz dodatkowo dostosować ustawienia optymalizacji, zmień wartości dla tych opcji.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
