Programy Fireworks i Dreamweaver zapewniają sprawny obieg pracy, obejmujący edycję, optymalizację i umieszczanie plików grafiki internetowej na stronach HTML.

Ta funkcja nie jest obsługiwana w wersjach Adobe Dreamweaver CC.

Wstawianie obrazu Fireworks

Programy Dreamweaver i Fireworks stosują i rozpoznają wiele wspólnych procedur edycyjnych, do których należą łącza, mapy obrazów, plasterki tabel i wiele innych. Obie te aplikacje zapewniają usprawniony obieg pracy, obejmujący edycję, optymalizację i umieszczanie grafiki internetowej na stronach HTML.

W trakcie pracy można umieścić eksportowaną grafikę Fireworks bezpośrednio w dokumencie programu Dreamweaver za pomocą polecenia Wstaw obraz lub utworzyć nową grafikę programu Fireworks z elementu zastępczego obrazu w programie Dreamweaver.

  1. W dokumencie programu Dreamweaver należy umieścić kursor w miejscu wstawienia obrazu i wykonać jedną z następujących czynności:
    • Wybierz polecenie Wstaw > Obraz.

    • W kategorii Wspólne panelu Wstaw kliknij przycisk Obraz lub przeciągnij go na dokument.

  2. Znajdź wyeksportowany plik Fireworks i kliknij przycisk OK (Windows) lub Otwórz (Macintosh).

    Uwaga:

    Jeśli plik Fireworks nie znajduje się w bieżącym serwisie programu Dreamweaver, na ekranie pojawi się komunikat z pytaniem o skopiowanie danego pliku do folderu głównego. Kliknij przycisk Tak.

Edycja obrazu lub tabeli Fireworks w programie Dreamweaver

W celu otwarcia i edycji obrazu lub plasterka obrazu będącego częścią tabeli programu Fireworks program Dreamweaver uruchomi program Fireworks. Fireworks natomiast otworzy plik PNG, z którego wyeksportowano dany obraz lub tabelę.

Uwaga:

Oznacza to, że Fireworks jest głównym zewnętrznym edytorem obrazów dla plików PNG. Fireworks jest często wybierany jako domyślny edytor dla plików JPEG i GIF, chociaż jest możliwość ustawienia jako domyślnego programu Photoshop.

Jeśli obraz jest częścią tabeli Fireworks, to można otworzyć całą tabelę Fireworks do edycji, jeśli tylko istnieje komentarz <!--fw table--> w kodzie HTML. Jeśli źródłowy plik PNG wyeksportowano z programu Fireworks do serwisu Dreamweaver za pomocą ustawienia Styl HTML i obrazy, w kodzie HTML automatycznie wstawiany jest komentarz do tabeli programu Fireworks.

  1. W programie Dreamweaver otwórz okno inspektora Właściwości (Okno > Właściwości).
  2. Zaznacz kliknięciem obraz lub plasterek obrazu.

    Jeśli zaznaczysz obraz wyeksportowany z programu Fireworks, Inspektor właściwości zidentyfikuje zaznaczenie jako obraz lub tabelę Fireworks i wyświetli nazwę źródłowego pliku PNG.

  3. Aby uruchomić program Fireworks do edycji, wykonaj jedną z następujących czynności:
    • W oknie inspektora Właściwości, kliknij polecenie Edycja.

    • Wciśnij klawisz Control (Windows) lub Command (Macintosh) i dwukrotnie kliknij zaznaczony obraz.

    • Kliknij prawym przyciskiem myszy (Windows) lub kliknij z wciśniętym klawiszem Control (Mac OS) zaznaczony obraz i z menu kontekstowego wybierz polecenie Edytuj w programie Fireworks.

    Uwaga:

    Jeśli program Fireworks nie odnajdzie pliku źródłowego, wyświetlony zostanie monit o wskazanie źródłowego pliku PNG. Jeśli użytkownik korzysta ze źródłowego pliku Fireworks, zmiany są zapisywane w pliku źródłowym i eksportowanym, ponieważ w innym przypadku uaktualniany byłby tylko plik eksportowany.  

  4. W programie Fireworks przeprowadź edycję źródłowego pliku PNG i kliknij przycisk Gotowe.

    Program Fireworks zapisze zmiany w pliku PNG, wyeksportuje uaktualniony obraz (lub kod HTML i obrazy) i powróci do programu Dreamweaver. Na ekranie programu Dreamweaver pojawi się uaktualniony obraz lub tabela.

    Film przedstawiający integrację programów Dreamweaver i Fireworks można obejrzeć na stronie internetowej www.adobe.com/go/vid0188_pl.

Optymalizacja obrazu programu Fireworks z programem Dreamweaver

Program Dreamweaver umożliwia wprowadzanie szybkich zmian w obrazach i animacjach programu Fireworks. W programie Dreamweaver można zmieniać ustawienia optymalizacji i animacji oraz rozmiar i obszar eksportowanego obrazu.

  1. Zaznacz żądany obraz w programie Dreamweaver i wykonaj jedną z następujących czynności:
    • Wybierz opcję Polecenie > Optymalizuj obraz

    • Kliknij przycisk Edytuj ustawienia obrazu w Inspektorze właściwości.

  2. Wykonaj określone czynności edycyjne w oknie Podgląd obrazu:
    • Aby zmienić ustawienia optymalizacji, kliknij zakładkę Opcje.

    • Aby zmienić rozmiar obszaru eksportowanego obrazu, kliknij zakładkę Plik.

  3. Po zakończeniu kliknij przycisk OK.

Modyfikowanie obrazów zastępczych programu Dreamweaver za pomocą programu Fireworks

Można najpierw utworzyć obraz zastępczy w dokumencie programu Dreamweaver, a potem uruchomić program Fireworks, aby zaprojektować grafikę lub tabelę Fireworks, które go zastąpią.

Aby można było utworzyć nowy obraz z elementu zastępczego, w systemie muszą być zainstalowane oba programy (Dreamweaver i Fireworks).

  1. Upewnij się, że program Fireworks jest głównym zewnętrznym edytorem obrazów dla plików PNG.
  2. W oknie dokumentu zaznacz element zastępczy obrazu kliknięciem.
  3. Uruchom program Fireworks w trybie Edytuj z Dreamweaver, wykonując jedną z następujących czynności:
    • W oknie inspektora Właściwości, kliknij polecenie Utwórz.

    • Wciśnij klawisz Control (Windows) lub Command (Macintosh) i dwukrotnie kliknij zaznaczony element zastępczy obrazu.

    • Kliknij prawym przyciskiem myszy (Windows) lub kliknij z wciśniętym klawiszem Control (Mac OS) zaznaczony obraz i zaznacz opcję Utwórz obraz w Fireworks.

  4. Użyj opcji programu Fireworks do zaprojektowania obrazu.

    Fireworks rozpoznaje następujące ustawienia zastępczego obrazu, które mogą być określane podczas pracy w programie Dreamweaver: rozmiar obrazu (rozmiar obszaru roboczego w Fireworks), identyfikator obrazu (używany przez program Fireworks jako domyślna nazwa dokumentu dla tworzonego pliku źródłowego i eksportowego) oraz wyrównanie tekstu. Program Fireworks rozpoznaje także łącza i niektóre zachowania (np. zamiana obrazu, wyskakujące menu i ustawianie tekstu) przypisane do obrazu zastępczego podczas pracy w programie Dreamweaver.

    Uwaga:

    Fireworks nie wyświetla łączy dodanych do zastępczego obrazu, ale są one tam obecne. Jeśli narysujesz punkt aktywny i dodasz łącze w programie Fireworks, program nie usunie łącza dodanego do zastępczego obrazu w programie Dreamweaver, natomiast wycięcie plasterków w nowym obrazie w programie Fireworks spowoduje, że aplikacja usunie łącze w dokumencie programu Dreamweaver po zastąpieniu elementu zastępczego.

    Program Fireworks nie rozpoznaje następujących ustawień elementu zastępczego obrazu: wyrównanie obrazu, kolor, Vspace i Hspace oraz mapy. Ustawienia te są wyłączone w inspektorze Właściwości elementu zastępczego obrazu.

  5. Po zakończeniu kliknij przycisk Gotowe, aby wyświetlić monit umożliwiający zapisanie pliku.
  6. W polu tekstowym „Zapisz w” zaznacz folder zdefiniowany jako lokalny folder serwisu programu Dreamweaver.

    Jeśli podczas umieszczania elementu zastępczego w dokumencie programu Dreamweaver nadano mu nazwę, program Fireworks wypełni odpowiednio pole Nazwa pliku. Nadana nazwa może być potem zmieniona.

  7. Kliknij opcję Zapisz, aby zapisać plik PNG.

    Na ekranie pojawi się okno Eksport. Użyj tego okna do eksportu obrazu jako pliku GIF lub JPEG lub w przypadku obrazów z plasterkami, w postaci pliku HTML i obrazów.

  8. W polu „Zapisz w” zaznacz folder lokalnego serwisu programu Dreamweaver.

    W polu Nazwa jest automatycznie wyświetlana nazwa przyjęta dla pliku PNG. Nadana nazwa może być potem zmieniona.

  9. Z listy Zapisz jako typ wybierz typ pliku lub plików wybranych do eksportowania; na przykład „Tylko obrazy” lub „HTML i obrazy”.
  10. Kliknij przycisk Zapisz, aby zapisać eksportowany plik.

    Plik zostanie zapisany, a następnie zostanie ponownie uaktywniony program Dreamweaver. W dokumencie programu Dreamweaver eksportowany plik lub tabela programu Fireworks zastępują element zastępczy obrazu.

Omówienie menu wyskakujących w programie Adobe Fireworks

Fireworks umożliwia szybkie i łatwe tworzenie menu wyskakujących na bazie CSS.

Menu wyskakujące tworzone przy pomocy programu Fireworks są dostosowane do rozbudowywania, pobierania oraz posiadają inne zalety:

  • Elementy menu mogą być objęte skorowidzem przy pomocy napędów wyszukiwania.

  • Elementy menu mogą być odczytywane przez czytniki ekranu, zwiększając dostępność stron.

  • Kod generowany przez Fireworks jest zgodny ze standardami i może być walidowany.

    Menu wyskakujące programu Fireworks można edytować za pomocą programu Dreamweaver lub programu Fireworks, ale nie obu tych programów jednocześnie. Zmiany wprowadzone w programie Dreamweaver nie są widoczne w programie Fireworks.

Edycja menu wyskakujących programu Fireworks w programie Dreamweaver

Wyskakujące menu można utworzyć w programie Fireworks 8 (lub nowszej wersji), a następnie dokonać jego edycji za pomocą programu Dreamweaver lub Fireworks (korzystając z edycji roundtrip), ale nie za pomocą obu tych programów. Edycja menu w programie Dreamweaver, a potem w programie Fireworks spowoduje utratę wcześniejszych zmian z wyjątkiem zawartości tekstowej.

Jeśli użytkownik woli edytować menu za pomocą programu Dreamweaver, może użyć aplikacji Fireworks do utworzenia menu wyskakujących, a potem używać już tylko programu Dreamweaver do edycji i dostosowywania tego menu.

Jeśli użytkownik woli edytować menu w programie Fireworks, można użyć funkcji edycji roundtrip w programie Dreamweaver. Nie należy jednak edytować menu bezpośrednio w programie Dreamweaver.

  1. W programie Dreamweaver zaznacz tabelę Fireworks z menu wyskakującym i kliknij opcję Edycja w Inspektorze właściwości.

    Źródłowy plik PNG otwiera się w programie Fireworks.

  2. W Fireworks, przeprowadź edycję przy pomocy Edytora menu wyskakującego i kliknij opcję Gotowe, w pasku narzędziowym Fireworks.

    Fireworks wysyła zmodyfikowane menu z powrotem do programu Dreamweaver.

    Jeśli menu wyskakujące zostało utworzone w programie Fireworks MX 2004 lub jego starszych wersjach, można je edytować w programie Dreamweaver za pomocą okna dialogowego Pokaż menu wyskakujące, dostępnego w panelu Zachowania.

Edycja menu wyskakujących utworzonych w programie Fireworks MX 2004 lub starszych

  1. W programie Dreamweaver zaznacz punkt aktywny lub obraz wyzwalający menu wyskakujące.
  2. W panelu Zachowania (Shift+F3), dwukrotnie kliknij opcje Pokaż menu wyskakujące, dostępną na liście Operacje.
  3. Wprowadź zmiany w oknie dialogowym Menu wyskakujące i kliknij przycisk OK.

Określanie preferencji uruchamiania i edycji dla plików źródłowych Fireworks

Zastosowanie programu Fireworks do edycji obrazów powoduje, że obrazy na stronie internetowej są normalnie eksportowane przez Fireworks z pliku źródłowego PNG. Po otwarciu pliku obrazu do edycji w programie Dreamweaver program Fireworks automatycznie otwiera plik źródłowy PNG, informując o potrzebie odnalezienia pliku PNG, jeśli sama aplikacja nie może go znaleźć. Jeśli wolisz, możesz określić preferencje w programie Fireworks w taki sposób, by program Dreamweaver otwierał wstawiany obraz. Inną możliwością jest umożliwienie wyboru pomiędzy zastosowaniem wstawionego pliku obrazu albo pliku źródłowego Fireworks przy otwieraniu obrazu w programie Dreamweaver.

Uwaga:

Program Dreamweaver rozpoznaje preferencje uruchamiania i edytowania programu Fireworks tylko w określonych przypadkach. Wiadomo jest, że należy otwierać i optymalizować obraz, który nie jest częścią tabeli Fireworks i zawiera poprawną ścieżkę Uwag do projektu do pliku źródłowego PNG.

  1. W programie Fireworks, wybierz polecenie Edycja > Preferencje (Windows) lub Fireworks > Preferencje (Macintosh) i kliknij zakładkę Uruchom i edytuj tabelę (Windows) lub wybierz polecenie Uruchom i edytuj (Macintosh).
  2. Określanie opcji preferencji do zastosowania przy edycji lub optymalizacji obrazów Fireworks umieszczanych w aplikacji zewnętrznej:

    Zawsze używaj źródłowego PNG

    Automatycznie otwiera plik Fireworks PNG, zdefiniowany w Uwagach do projektu jako źródło wstawionego obrazu. Uaktualnienia obejmują źródłowy plik PNG i odpowiednie obrazu wstawione.

    Nigdy nie używaj źródłowego PNG

    Automatycznie otwiera wstawiony obraz Fireworks, bez wzglądu na to, czy istnieje źródłowy plik PNG. Uaktualnienia odnoszą się tylko do obrazu wstawionego.

    Pytaj przy uruchamianiu

    Wyświetla komunikat przed otwieraniem pliku źródłowego PNG. W tym oknie można określić też ogólne preferencje uruchamiania i edycji.

Wstawianie kodu Fireworks HTML w dokumencie Dreamweaver

W programie Fireworks można użyć polecenia Eksportuj, aby wyeksportować i zapisać zoptymalizowane obrazy i pliki HTML w folderze serwisu programu Dreamweaver. Plik taki można później wstawić do programu Dreamweaver. Program Dreamweaver umożliwia wstawienie do dokumentu kodu HTML wygenerowanego w programie Fireworks wraz z odpowiednimi obrazkami, plasterkami i skryptami JavaScript.

  1. W dokumencie programu Dreamweaver należy umieścić punkt wstawiania tam, gdzie ma być umieszczony kod HTML programu Fireworks.
  2. Wykonaj jedną z następujących czynności:
    • Wybierz polecenie Wstaw > Obiekty obrazów > Fireworks HTML.

    • W kategorii Wspólne panelu Wstaw kliknij przycisk Obrazy i wybierz z wyskakującego menu opcję Wstaw HTML z programu Fireworks.

  3. Kliknij opcję Przeglądaj i zaznacz plik HTML z programu Fireworks.
  4. Jeśli plik ni będzie później potrzebny, zaznacz opcję Usuń plik po wstawieniu. Zaznaczenie tej opcji nie wpływa na plik źródłowy PNG związany z danych plikiem HTML.

    Uwaga:

    Jeśli plik HTML znajduje się na dysku sieciowym, to zostanie trwale usunięty, a nie przeniesiony do Kosza lub folderu Trash.

  5. Kliknij przycisk OK, aby wstawić kod HTML wraz z dołączonymi obrazami, plasterkami i skryptami JavaScript do dokumentu programu Dreamweaver.

Wklejanie kodu HTML z programu Fireworks do programu Dreamweaver

Szybkim sposobem na umieszczenie obrazów i tabel wygenerowanych przez program Fireworks do programu Dreamweaver jest skopiowanie i wklejenie kodu HTML programu Fireworks bezpośrednio do dokumentu programu Dreamweaver.

Kopiowanie i wklejanie kodu HTML z programu Fireworks do aplikacji Dreamweaver

  1. W programie Fireworks, wybierz polecenie Edycja > Kopiuj kod HTML.
  2. Wykonaj kolejno polecenia kreatora dotyczące ustawień eksportu kodu HTML i obrazów. Gdy pojawi się odpowiedni komunikat, podaj nazwę folderu serwisu programu Dreamweaver jako miejsca docelowego eksportowanych obrazów.

    Kreator eksportuje obrazy w określone miejsce i kopiuje kod HTML do Schowka.

  3. W dokumencie programu Dreamweaver należy umieścić punkt wstawiania tam, gdzie ma być wklejony kod HTML i wybrać polecenie Edycja > Wklej kod HTML z programu Fireworks.

    Wszystkie kody HTML i JavaScript związane z eksportowanymi plikami Fireworks są kopiowane do dokumentu programu Dreamweaver, a wszystkie łącza do obrazów są uaktualniane.

Eksportowanie i wklejanie kodu HTML z programu Fireworks do aplikacji Dreamweaver

  1. W programie Fireworks, wybierz polecenie Plik > Eksportuj.
  2. Podaj nazwę folderu serwisu Dreamweaver jako miejsca docelowego eksportowanych obrazów.
  3. W menu Eksportuj, zaznacz opcję HTML i obrazy.
  4. Wybierz opcję Kopiuj do Schowka z menu HTML, a następnie kliknij opcję Eksportuj.
  5. W dokumencie programu Dreamweaver należy umieścić punkt wstawiania tam, gdzie ma być wklejony wyeksportowany kod HTML i wybrać polecenie Edycja > Wklej HTML z Fireworks.

    Wszystkie kody HTML i JavaScript związane z eksportowanymi plikami Fireworks są kopiowane do dokumentu programu Dreamweaver, a wszystkie łącza do obrazów są uaktualniane.

Uaktualnianie kodu HTML z programu Fireworks umieszczonego w aplikacji Dreamweaver

W programie Fireworks polecenie Plik > Uaktualnij HTML umożliwia zastosowanie techniki uaktualniania plików Fireworks umieszczanych w programie Dreamweaver, alternatywnej dla techniki uruchamiania i edycji. Opcja Uaktualnij HTML umożliwia edycję źródłowego obrazu PNG w programie Fireworks i automatyczne uaktualnianie eksportowanego kodu HTML i plików obrazów umieszczanych w dokumencie programu Dreamweaver. Polecenie umożliwia uaktualnienie plików programu Dreamweaver, nawet jeśli program nie jest uruchomiony.

  1. W Fireworks, otwórz źródłowy plik PNG i wprowadź określone zmiany.
  2. Wybierz polecenie Plik > Zapisz.
  3. W programie Fireworks wybierz polecenie Plik > Uaktualnij HTML.
  4. Przejdź do pliku programu Dreamweaver, który zawiera kod HTML do uaktualnienia, i kliknij opcję Otwórz.
  5. Wyszukaj folder docelowy wybrany do umieszczenia uaktualnionych plików obrazów i kliknij opcję Zaznacz (Windows) lub Wybierz (Macintosh).

    Fireworks uaktualnia kod HTML i JavaScript w dokumencie Dreamweaver. Program Fireworks wyeksportuje także uaktualnione obrazy związane z kodem HTML i umieści te obrazu w określonym folderze docelowym.

    Jeśli program Fireworks nie może odnaleźć odpowiedniego kodu HTML do uaktualnienia, udostępni opcję umieszczenia nowego kodu HTML w dokumencie programu Dreamweaver. Program Fireworks umieszcza sekcję JavaScript nowego kodu na początku dokumentu, a tabelę HTML lub łącz do obrazu na końcu.

Tworzenie internetowego albumu fotograficznego

W programie Dreamweaver CS5 funkcja „Utwórz internetowy album fotografii” nie jest już używana.

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