Tworzenie prototypów witryn internetowych i interfejsów przy pomocy stron utworzonych w programie Fireworks

Pojedynczy plik PNG programu Fireworks może zawierać wiele stron, dzięki czemu nadaje się doskonale do tworzenia witryn internetowych i interfejsów aplikacji. Każda strona zawiera własne ustawienia rozmiaru i koloru obszaru roboczego, rozdzielczości obrazu i linii pomocniczych. Opcje te można ustawiać dla pojedynczych stron lub globalnie dla wszystkich stron w dokumencie. W odróżnieniu od warstwy WWW każda strona zawiera także własny zestaw warstw. W przypadku typowych elementów można jednak użyć strony wzorcowej lub współużytkować warstwy na wielu stronach (zobacz Udostępnianie warstw).

Uwaga:

Jeśli nie zostanie utworzona żadna strona, wszystkie elementy dokumentu będą znajdowały się na pojedynczej stronie.

Strony można zobaczyć w panelu Strony, gdzie obiekty znajdujące się na poszczególnych stronach wyświetlane są w postaci miniatur obok nazw stron. Aktywna strona jest wyróżniona w panelu i widnieje w wysuwanym menu stron nad aktywnym dokumentem.

Aby uzyskać informacje o eksporcie stron, zobacz Eksport z przestrzeni roboczej

Wideo

Tworzenie dokładnych prototypów za pomocą programu Fireworks lub Photoshop (00:01:17)

Krótkie omówienie sposobów wykorzystania programów Fireworks i Photoshop do tworzenia dokładnych prototypów.

Autor: Jim Babbage

Dodawanie i usuwanie stron oraz poruszanie się po nich

Za pomocą panelu Strony możesz dodać nowe, usunąć niechciane i powielić istniejące strony. Podczas dodawania, usuwania i przenoszenia stron Program Fireworks automatycznie aktualizuje liczby znajdujące się na lewo od tytułów stron. Automatyczne numerowanie ułatwia szybkie dotarcie do określonych stron w dużych, wielostronicowych projektach.

Dodawanie strony

Na końcu listy stron wstawiana jest pusta strona, która staje się stroną aktywną.

  1. Wykonaj jedną z poniższych czynności:

    • W panelu Strony kliknij przycisk Nowa/Powielona strona .

    • Kliknij panel prawym przyciskiem myszy i wybierz polecenie Nowa strona z wysuwanego menu.

    • Wybierz polecenie Edytuj > Wstaw > Strona.

  1. Wykonaj jedną z poniższych czynności:

    • Zaznacz stronę w panelu Strony.

    • Użyj klawiszy Page Up i Page Down na klawiaturze.

    • Wybierz stronę z wyskakującego menu stron u góry okna dokumentu lub z dolnego prawego narożnika panelu Strony.

    Uwaga:

    Gwiazdka znajdująca się obok nazwy strony na stronach wyskakującego menu wskazuje na stronę wzorcową.

Powielenie strony

Powielenie powoduje dodanie nowej strony, która zawiera te same obiekty i hierarchię warstw, co aktualnie wybrana strona. Zduplikowane obiekty zachowują tryb krycia oraz mieszania oryginalnych obiektów. Możesz dokonywać zmian na duplikatach obiektów bez wpływania na oryginały.

  1. Wykonaj jedną z poniższych czynności:

    • Przeciągnij stronę do przycisku Nowa/Duplikat strony.

    • Kliknij stronę prawym przyciskiem myszy i wybierz polecenie Powiel stronę z wysuwanego menu.

Przesuwanie jednej lub wielu stron

Panel strony umożliwia przesuwanie stron, co pozwala umieścić powiązane projekty bliżej siebie i przyspieszyć proces tworzenia układu.

  1. (Opcjonalne) W przypadku przesuwania wielu stron należy wykonać jedną z następujących czynności:

    • Kliknij trzymając naciśnięty klawisz Shift, aby zaznaczyć grupę sąsiadujących stron.

    • Kliknij trzymając naciśnięty klawisz Ctrl (Windows) lub Command (Mac OS), aby zaznaczyć grupę stron, które ze sobą nie sąsiadują.

  2. Przeciągnij zaznaczone strony w górę lub w dół panelu. Ciemniejsze krawędzie zostaną wyświetlone pod lub nad pozostałymi stronami, wskazując miejsce, gdzie można przenieść zaznaczone strony poprzez zwolnienie przycisku myszy.

Usuwanie strony

Strona znajdująca się nad usuniętą stroną staje się aktywna.

  1. Wykonaj jedną z poniższych czynności:

    • W panelu Strony przeciągnij stronę na ikonę kosza na śmieci .

    • Kliknij stronę prawym przyciskiem myszy i wybierz polecenie Usuń stronę z wysuwanego menu.

Edycja obszaru roboczego strony

Każda strona posiada własny obszar roboczy o niezależnie ustalonym rozmiarze, kolorze i rozdzielczości obrazu.

  1. Wybierz stronę z panelu Strony lub z wyskakującego menu na górze okna dokumentu.

  2. Wybierz polecenie Modyfikuj > Obszar roboczy > Rozmiar obrazu, Modyfikuj > Obszar roboczy > Kolor obszaru roboczego lub Modyfikuj > Obszar roboczy > Rozmiar obszaru roboczego.

  3. Wprowadź zmiany. Jeśli obszar roboczy dla strony jest zaznaczony, zmiany te mogą być także dokonane poprzez użycie panelu Właściwości.

  4. Aby zastosować zmiany tylko do wybranej strony, należy zaznaczyć opcję Tylko bieżąca strona. Aby zastosować zmiany do wszystkich stron, należy odznaczyć tę opcję.

Używanie strony wzorcowej

Użycie strony wzorcowej umożliwia stosowanie zestawu elementów na wszystkich stronach. Zwykła strona, która zostanie przekształcona w stronę wzorcową, przenoszona jest na pierwsze miejsce listy w panelu Strony. W trakcie tworzenia strony wzorcowej, Warstwa strona wzorcowa jest dodawana na dole hierarchii warstw każdej strony.

Tworzenie strony wzorcowej

  1. Kliknij prawym przyciskiem myszy istniejącą stronę w panelu Strony, a następnie z menu wysuwanego wybierz polecenie Ustaw jako stronę wzorcową.

Warstwy współużytkowane na wielu stronach staną się zwykłymi (nieudostępnianymi) warstwami. Pozostaną jednak warstwy udostępniane dla ramek. Aby wyświetlić ramki strony wzorcowej na połączonej stronie, zobacz Wyświetlanie obiektów w stanie.

Po utworzeniu strony wzorcowej wszystkie nowo utworzone strony automatycznie dziedziczą jej ustawienia. Istniejące strony nie dziedziczą tych ustawień, chyba że zostaną połączone ze stroną wzorcową. Późniejsze zmiany wprowadzone w stronie wzorcowej spowodują automatyczną aktualizację wszystkich połączonych stron.

Poniżej przedstawiono ograniczenia dotyczące dziedziczenia obiektów i zachowań ze stron wzorcowych do innych stron:

  • Strony dziedziczą tylko bieżący stan wszystkich obiektów na stronie wzorcowej. Aby odziedziczyć wszystkie stany wszystkich obiektów, na każdej stronie należy dodać równą lub większą liczbę stanów do obiektu o najwyższej liczbie stanów. Wszystkie obiekty na takiej stronie dziedziczą wszystkie stany ze strony wzorcowej.

  • Zmiany rozmiaru obszaru roboczego lub rozmiaru obrazu na stronie wpływają na wszystkie strony, włącznie ze stronami, które nie są połączone ze stroną wzorcową. Aby ograniczyć zmiany tylko do bieżącej strony, należy wybrać opcję Tylko bieżąca strona.

  • Zmiany koloru obszaru roboczego na stronie wzorcowej są dziedziczone tylko przez połączone strony.

  1. Wykonaj jedną z poniższych czynności:

    • Kliknij prawym przyciskiem myszy stronę w panelu Strony, a następnie z menu wysuwanego wybierz polecenie Łącze do strony wzorcowej.

    • Kliknij kolumnę po lewej stronie od miniaturki strony w panelu Strony. Ikona połączenia wskazuje, że dana strona jest połączona ze stroną wzorcową.

      Uwaga:  Gdy zmienisz ustawienie na stronie zawierającej łącze do strony wzorcowej, zachowane zostanie nowe ustawienie, ale łącze do strony wzorcowej zostanie zerwane.

Pokazywanie i ukrywanie warstwy strony wzorcowej

Zmiana widoczności zostanie odzwierciedlona na wszystkich stronach.

  1. W panelu Warstwy kliknij ikonę oka, która znajduje się na lewo od warstwy strony wzorcowej.

Usuwanie warstw strony wzorcowej

  1. Kliknij prawym przyciskiem myszy panel Warstwy i wybierz polecenie Usuń warstwę strony wzorcowej z menu wysuwanego.

Aby dodać warstwę strony wzorcowej z powrotem do strony, kliknij prawym przyciskiem myszy panel Warstwy i wybierz polecenie Dodaj warstwę strony wzorcowej z menu wysuwanego.

Zmiana strony wzorcowej z powrotem w zwykłą stronę

  1. Kliknij panel prawym przyciskiem myszy i z wysuwanego menu wybierz polecenie Wyzeruj stronę wzorcową.

Eksportowanie wybranych stron

Można eksportować wiele stron w pojedynczym kroku. Eksportowane są tylko zaznaczone strony. Podczas eksportowania stron do eksportowania plików używa się ustawień optymalizacji dla pojedynczych stron.

  1. Wybierz strony, które chcesz eksportować w panelu Strony.

  2. Kliknij prawym przyciskiem myszy i wybierz polecenie Eksportowanie zaznaczonych stron(y).

  3. Wybierz jedną z opcji w menu Eksportuj w oknie dialogowym Eksportuj:

    Warstwy na pliki

    Eksportuje warstwy w zaznaczonych stronach jako pojedyncze pliki.

    Stany na pliki

    Eksportuje stany w zaznaczonych stronach jako pojedyncze pliki.

    Strony na pliki

    Eksportuje zaznaczone strony jako pojedyncze pliki.

Dostosowywanie nazw plików podczas eksportowania plików

  1. Wybierz strony, które chcesz eksportować w panelu Strony.

  2. Kliknij prawym przyciskiem myszy i wybierz polecenie Eksportowanie zaznaczonych stron(y).

  3. Kliknij Opcje w oknie dialogowym Eksportuj. Przycisk Opcje jest włączony w zależności od opcji zaznaczonej w menu Eksportuj.

  4. Wybierz Dodaj przedrostek lub Dodaj przyrostek w oknie dialogowym Opcje eksportowania i wybierz opcję z menu. Pliki można nazwać przy użyciu dowolnej z następujących opcji:

    nazwa.dokumentu

    Nazwa pliku źródłowego dodawana jest jako przedrostek lub przyrostek. Na przykład, jeśli przy użyciu opcji Dodaj przyrostek eksportujesz stronę o nazwie Index z pliku źródłowego sites.png, utworzony zostanie plik o nazwie Sites_Index.gif.

    Liczbowy (1, 2, 3...lub 01, 02, 03...)

    Pliki generowane są w kolejności liczbowej z liczbami, które dodawane są jako przedrostki lub przyrostki. Wszystkie eksportowane pliki stron numerowane są w kolejności występowania w panelu stron. W przypadku eksportowania wielu stron należy użyć sekwencji dwucyfrowej.

  5. Użyj opcji w menu Typ pliku, aby zoptymalizować ustawienia dla eksportowanego pliku.

Eksportowanie plasterków w zaznaczonych stronach

Plasterki w pliku źródłowym są ignorowane podczas eksportowania danego pliku. Do eksportowania plasterków użyj następujących ustawień w oknie dialogowym Eksportuj.

  1. Wybierz HTML i obrazy lub Tylko obrazy w menu Eksportuj.

  2. W menu HTML wybierz opcję Eksportuj plik HTML.

  3. W menu Plasterki wybierz opcję Eksportuj plasterki.

  4. Wybierz jedną z następujących opcji:

    Tylko zaznaczone plasterki

    Eksportowane są obszary oznaczone jako plasterki.

    Dołącz obszary bez plasterków

    Eksportowane są także obszary, które nie są oznaczone jako plasterki.

Podgląd wielu stron

Przeglądaj wszystkie strony za wyjątkiem strony wzorcowej podczas importowania lub otwierania plików. Strona wybrana podczas dokonywania podglądu zostaje wyostrzona przy otwieraniu danego pliku.

Podczas wstawiania strony zawierającej obiekty ze strony wzorcowej ta ostatnia jest przekształcana do zwykłej warstwy i importowana.

Włączanie podglądu wielu stron

Przeglądaj wszystkie strony w danym pliku podczas jego importowania lub otwierania. Opcja podglądu wielu stron jest domyślnie włączana w oknie dialogowym Preferencje.

Aby włączyć podgląd wielu stron dla plików utworzonych we wcześniejszych wersjach, otwórz je w bieżącej wersji i zapisz je.

  1. W oknie dialogowym Preferencje wybierz polecenie Ogólne.

  2. Aby włączyć podgląd wielu stron, wybierz polecenie Zapisz wg miniatur stron. Jeśli opcja ta jest wyłączona, nazwy stron są przechowywane, ale dla plików tych nie są tworzone miniatury.

Podgląd stron przed ich otwarciem lub importowaniem

  • W systemie Windows podgląd wyświetlany jest w oknie dialogowym Importuj lub Otwórz podczas importowania lub otwierania pliku.

  • W komputerach Macintosh kliknij Podgląd w oknie dialogowym Otwórz lub Importuj. Można również dwukrotnie kliknąć dany plik w oknie dialogowym Importuj, aby przejść do trybu Podgląd.

    Aby dodać importowane strony za stroną aktualnie zaznaczoną w dokumencie, podczas importowania plików zaznacz opcję Wstaw za bieżącą stroną.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?