Dowiedz się, w jaki sposób można porządkować i przekształcać różne obiekty oraz zarządzać nimi w programie Adobe Muse. Przeczytaj też, jak zoptymalizować obrazy dla programu Adobe Muse.

Uwaga:

Do programu Adobe Muse nie są już dodawane nowe funkcje, a jego obsługa zostanie wycofana 26 marca 2020 r. Aby uzyskać szczegółowe informacje i pomoc, zobacz stronę na temat wycofania usługi Adobe Muse.

Obiekty w programie Adobe Muse zawierają elementy projektowe utworzone w programie i zaimportowane z zewnętrznych źródeł. W programie Adobe Muse możesz dodawać do witryny obrazy, tekst, ramki obrazów i inne elementy oraz manipulować nimi za pomocą szerokiej gamy narzędzi.

Jednym z najczęstszych obiegów pracy jest tworzenie i importowanie przycisku z programu Adobe Photoshop. Docelowo program Adobe Muse rozpoznaje warstwy i zestawy warstw utworzone w programie Photoshop. W programie Adobe Muse możesz ustawić te warstwy jako stany przycisku na swojej witrynie.

Możesz dodawać przekształcenia do obiektów umieszczonych w obszarze roboczym witryny wedle potrzeb projektowych danej witryny. Możesz również wyizolować dany obiekt, aby dodać do niego odpowiednie wypełnienie, ustawić odstępy między łamami i w ten sposób kontrolować rozstawienie elementów zagnieżdżonych.

Korzystanie z obrazów w projektach programu Adobe Muse

Umieszczanie ramek obrazów w projektach programu Adobe Muse

Możesz umieszczać ramki obrazów bezpośrednio w projektach programu Adobe Muse, klikając narzędzie Ramka obrazu. W panelu Narzędzia kliknij narzędzie Ramka obrazu, a następnie umieść ramkę w żądanej lokalizacji w projekcie.

  1. W panelu Narzędzia kliknij narzędzie Ramka prostokątna lub Ramka eliptyczna.

    Narzędzie Ramka obrazu w programie Adobe Muse
    Przeciągnij i upuść ramki obrazów (prostokątne i eliptyczne) w programie Adobe Muse.

  2. Kliknij narzędzie Ramka obrazu, a następnie kliknij i przeciągnij ramkę obrazu do swojego projektu.

    Możesz kontynuować klikanie i umieścić kilka ramek obrazów w swoim projekcie. Możesz również zmieniać rozmiar i przesuwać ramki obrazów zgodnie z potrzebami projektowymi.

    Możesz wypełnić ramkę kolorem lub umieścić obraz w ramce. Aby umieścić obraz, przeciągnij i upuść go w ramce. Rozmiar obrazu zostanie zmieniony tak, aby pasował do ramki.

    Ramki obrazów w kształcie prostokąta i elipsy
    Ramki obrazów w kształcie prostokąta i elipsy

Umieszczanie pojedynczego elementu na stronie

Przestrzeń robocza programu Muse działa podobnie jak w przypadku programów Illustrator i InDesign. Można więc najpierw wczytać umieszczany obraz, a następnie kliknąć miejsce na stronie, w którym ma być wyświetlany. Aby dodać plik obrazu, umieszczając go bezpośrednio na stronie, wykonaj następujące czynności:

  1. Wybierz polecenie Plik > Umieść lub użyj skrótu klawiaturowego Command-D (w systemie Mac) albo Control-D (w systemie Windows), aby otworzyć okno dialogowe Importuj.
  2. Przejdź do folderu przykładowych plików i zaznacz plik made-with-muse.png. Kliknij Otwórz, aby go wybrać i zamknąć okno dialogowe Importuj.

Kliknij raz w okolicach dołu strony, aby umieścić obraz. W tym przypadku zależy nam na pełnej wielkości obrazu, dlatego należy kliknąć raz. Jeśli jednak chcesz zmienić wielkość umieszczanego obrazu, kliknij i przeciągnij, aby zeskalować obraz do żądanego rozmiaru. 

Za pomocą narzędzia Zaznaczanie przeciągnij obraz w kierunku pionowego środka ustawionego sąsiadująco prostokąta stopki. Zwróć uwagę, że czerwone linie pomocnicze i turkusowe pola pomiaru pojawiają się na chwilę, aby ułatwić wyrównanie prostokąta względem środka.

Po dokonaniu zmian sekcja stopki będzie prawie gotowa.

Umieszczanie obrazu w programie Adobe Muse
Stopka składa się z pojedynczego prostokąta wypełnionego ułożonym sąsiadująco obrazem tła, na którym umieszczony jest obraz wyrównany do środka.

Sposób optymalizacji obrazów podczas publikowania lub eksportu witryny w programie Muse

Program Adobe Muse konwertuje umieszczane w nim obrazy gotowe do druku na format zgodny ze standardami internetowymi. Wiąże się to jednak z zastosowaniem kompresji, a co za tym idzie utratą jakości obrazu. Umieszczane w programie Muse obrazy, które nie są przystosowane do standardów internetowych są automatycznie kompresowane. Jeśli opublikujesz lub wyeksportujesz witrynę, a efekty będą niezadowalające, spróbuj utworzyć lub zoptymalizować obrazy ręcznie w programie Photoshop lub Adobe Fireworks®. Usuń oryginalne obrazy i umieść na stronach wersje zoptymalizowane, a następnie ponownie opublikuj lub wyeksportuj witrynę.

Należy pamiętać, że wszelkie inne zmiany wprowadzone na obrazach, takie jak kadrowanie, zmiana wielkości lub dodanie fazy lub cienia, spowodują jego ponowne wygenerowanie przez program Muse, a następnie skompresowanie. Jeśli chcesz zachować kontrolę nad procesem optymalizacji, dodaj efekty do obrazu za pomocą programu Photoshop lub Fireworks. Następnie zoptymalizuj obraz w odpowiednim edytorze i umieść go w programie Muse, aby samodzielnie wybrać poziom kompresji. W programie Muse możesz bezpośrednio osadzać pliki PSD programu Photoshop zamiast eksportować pliki PNG, JPG lub GIF. Pamiętaj jednak, że w takiej sytuacji program Muse automatycznie wygeneruje nowy plik obrazu, korzystając z własnych algorytmów kompresji.

Optymalizowanie obrazów pod kątem wyświetlania w Internecie

Błędy eksportu oraz spowolnione działanie tej funkcji mogą się zdarzyć, gdy połączony plik został umieszczony na stronie w wysokiej rozdzielczości, a następnie zeskalowany znacznie w dół. Taki obieg pracy nie jest zalecany. Problemy są bardziej widoczne w przypadku wielokrotnego umieszczania obrazów w pełnym rozmiarze (powyżej 2000 pikseli), a następnie skalowania ich w celu dopasowania do projektu.

Jeśli umieścisz plik o dużej objętości, program Muse automatycznie ogranicza jego wielkość i skaluje jego szerokość do 2048 pikseli. Jeśli umieścisz kursor na nazwie pliku w panelu Zasoby, zostanie wyświetlony dymek podpowiedzi z informacją o oryginalnej wielkości umieszczonego pliku wobec wielkości po próbkowaniu (zeskalowanej zgodnie z limitem).

W przypadku obrazów przeznaczonych do wyświetlania w Internecie przed ich osadzeniem zaleca się zmienić ich wielkość i zoptymalizować je w specjalnym edytorze. Umieszczanie plików o dużej objętości powoduje zbędne zwiększanie objętości pliku .muse. Plik .muse musi przetworzyć dodatkowe dane pikselowe, które są niepotrzebne do wyświetlenia obrazu w Internecie. W następstwie czas przetwarzania wydłuża się podczas eksportowania lub publikowania witryn. W niektórych przypadkach plik .muse o bardzo dużej objętości może przekroczyć limit czasu przy próbie zmiany wielkości i optymalizacji wszystkich plików w procesie eksportu lub publikowania. Mogą wystąpić błędy upływu limitu czasu.

Aby rozwiązać ten problem, możesz kliknąć nazwy zasobów prawym przyciskiem myszy i wybrać polecenie Zoptymalizuj rozmiar zasobu, aby usunąć dane, które są zbędne do wyświetlenia zeskalowanego obrazu.

Jeśli zeskalujesz zoptymalizowany obraz tak, aby w projekcie sprawiał wrażenie większego, może zostać wyświetlony błąd dotyczący próbkowania w górę. Aby rozwiązać ten problem, wybierz polecenie Importuj większy rozmiar, aby pobrać dodatkowe dane niezbędne do prawidłowego wyświetlenia zeskalowanego obrazu.

Rysowanie kształtów elementów zastępczych

Kształt elementu zastępczego może być elipsą, prostokątem lub wielokątem, który można wypełnić obrazem, tekstem lub kolorem.

  1. W panelu Narzędzia wybierz narzędzie Prostokąt lub narzędzie Elipsa.

    Rysowanie kształtów elementów zastępczych w programie Adobe Muse
    Wybierz z paska narzędzi prostokąt lub elipsę

  2. Przeciągnij i upuść kształt prostokąta lub elipsy w projekcie Adobe Muse.

    • Aby utworzyć kwadraty, przytrzymaj klawisz Shift i kliknij narzędzie Prostokąt.
    • Aby utworzyć okręgi, przytrzymaj klawisz Shift i kliknij narzędzie Elipsa.

    Możesz wypełniać kształty grafiką, tekstem lub kolorem.

  3. Aby ustawić właściwości dopasowania obiektu, wybierz prostokąt lub elipsę i kliknij opcję Obiekt > Dopasowanie.

    Można wybrać następujące opcje dopasowania:

    • Dopasuj zawartość proporcjonalnie: zmienia rozmiar zawartości, dopasowując ją do ramki, przy jednoczesnym zachowaniu proporcji zawartości. Wymiary ramki nie ulegną zmianie. Jeżeli zawartość i ramka mają różne proporcje, pojawi się puste miejsce.
    • Dopasuj ramkę proporcjonalnie: zmienia rozmiar zawartości, aby wypełniła całą ramkę, przy jednoczesnym zachowaniu proporcji zawartości. Wymiary ramki nie ulegną zmianie. Jeżeli zawartość ma inne proporcje niż ramka, to część tej zawartości zostanie przycięta przez obwiednię ramki.
    Dopasuj zawartość proporcjonalnie do obiektów w Adobe Muse
    Dopasuj zawartość proporcjonalnie wewnątrz obiektów

    Dopasuj ramkę proporcjonalnie wewnątrz obiektów (Adobe Muse)
    Dopasuj ramkę proporcjonalnie wewnątrz obiektów

Umieszczanie pliku programu Photoshop jako przycisku najazdu

  1. Wybierz polecenie Plik > Umieść przycisk programu Photoshop. W wyświetlonym oknie dialogowym importu z programu Photoshop zlokalizuj plik PSD. Kliknij Wybierz (Mac OS) lub Otwórz (Windows), aby wybrać plik.

  2. Zostanie wyświetlone okno importu z programu Photoshop. Poświęć chwilę na zaznajomienie się ze sposobem stosowania ustawień. Za pomocą dostępnych menu możesz określić, która warstwa w pliku programu Photoshop będzie wyświetlana jako stan Normalny przycisku (wygląd przycisku po pierwszym wczytaniu strony), stan Najazd (wygląd po umieszczeniu kursora na przycisku) i stan Wciśnięty klawisz myszy (wygląd przycisku po jego kliknięciu). W trzech menu stanów są wyświetlane nazwy warstw programu Photoshop, a miniatury prezentują wygląd każdej wybranej warstwy.

  3. Na potrzeby tego przykładu warstwy programu Photoshop zostały wcześniej uporządkowane pod kątem wyświetlania stanów przycisków. Nie musisz zmieniać żadnych ustawień. Kliknij OK, aby zaakceptować domyślne ustawienia stanów.

    Za pośrednictwem okna dialogowego importu z programu Photoshop powiąż istniejące warstwy z żądanymi stanami przycisków.
    Za pośrednictwem okna dialogowego importu z programu Photoshop powiąż istniejące warstwy z żądanymi stanami przycisków.

  4. Kliknij raz w prawym górnym obszarze nagłówka strony A-wzorcowej, aby umieścić plik programu Photoshop w oryginalnym rozmiarze.

  5. Kliknij łącze Podgląd, aby skorzystać z emulatora opartego na silniku WebKit. Sprawdź wygląd strony A-wzorcowej. Po wczytaniu strony wyświetlany jest stan Normalny przycisku. Po umieszczeniu kursora na przycisku jego wygląd nieznacznie się zmienia (brązowy kolor ulega rozjaśnieniu), a po kliknięciu przycisku biały tekst zmienia kolor na jasnobrązowy i pozostaje taki aż do zwolnienia przycisku myszy.

  6. Kliknij opcję Projektowanie, aby powrócić do strony A-wzorcowej w widoku Projektowanie.

Przycisk Udostępnij wyświetla stany zgodnie z oczekiwaniami. W następnej sekcji dowiesz się, jak wyrównać przycisk Share z obrazem kropli po prawej stronie paska nawigacyjnego witryny.

W następnej części dowiesz się, jak zdefiniować obszary nagłówka i stopki strony wzorcowej.

Przypinanie obiektów do okna przeglądarki

Po umieszczeniu obrazu na stronie lub dodaniu elementu graficznego w inny sposób, możesz zmienić jego położenie za pomocą narzędzia Zaznaczanie oraz klawiszy strzałek. Przesuwając obiekt, zmieniasz jego położenie względem innych elementów (obrazów, tekstu i multimediów) istniejących na stronie. Możesz przesuwać także pozostałe elementy, jednak cała strona zachowuje się jak broszura lub plakat. Elementy na stronie znajdują się pojedynczej płaszczyźnie. Jeśli strona jest długa (dużo na niej zawartości pionowej), a osoba odwiedzająca ją przewija, elementy znajdujące się u góry strony przestają być widoczne.

Podczas korzystania z różnych witryn pewnie udało ci się zauważyć, że na niektórych z nich elementy są „przypięte” do stron, co oznacza, że są zawsze wyświetlane w jednym miejscu. Sprawiają wrażenie, jakby były zawieszone nad resztą zawartości strony.

Za pomocą narzędzia Pinezka możesz w gruncie rzeczy usunąć obraz z układu strony. Zamiast ustawiać go względem innych obiektów, przypisujesz go do określonej lokalizacji w odniesieniu do przeglądarki. Przypięte obrazy pozostają zawsze w tym samym miejscu (np. w prawym górnym rogu lub u dołu) niezależnie od pozostałych, przewijalnych elementów strony. Jeśli osoba odwiedzająca stronę zmieni wielkość okna przeglądarki, położenie przypiętych obrazów względem okna nie ulegnie zmianie.

Przypinanie przypomina „wyłamanie” obrazu z układu strony i „przymocowanie” go do okna przeglądarki – można by to porównać z przypięciem karteczki do tablicy korkowej. Jeśli osoba odwiedzająca zmieni wielkość okna przeglądarki przypięty element przesunie się, aby utrzymać swoje ustalone położenie względem okna. Jeśli zawartość strony zostanie przewinięta w poziomie lub pionie, przypięty element pozostanie na miejscu.

Wykonaj poniższe kroki, aby użyć narzędzia Pinezka:

  1. Po otwarciu strony A-wzorcowej w widoku Projektowanie zaznacz ikonę Facebooka za pomocą narzędzia Zaznaczanie.
  2. Kliknij prawą górną pozycję interfejsu narzędzia Pinezka w panelu sterowania. W ten sposób element zostanie „przypięty” do bieżącej lokalizacji swojego prawego górnego narożnika.
  1. Powtórz kroki 1 i 2, aby przypiąć przyciski ikon Google+ i Twitter w prawej górnej pozycji, aby zapobiec ich przesuwaniu się w oknie przeglądarki podczas przewijania reszty zawartości.
  2. Kliknij Planowanie, aby zobaczyć miniatury stron. Zwróć uwagę, że wszystkie strony zawierają teraz trzy ikony mediów społecznościowych. Dzieje się tak dlatego, gdyż ikony zostały dodane do strony wzorcowej.
  3. W widoku Planowanie kliknij dwukrotnie stronę „food”, aby otworzyć ją w widoku Projektowanie. Jeśli jest już otwarta, kliknij kartę „food”, aby aktywować stronę. Wybierz polecenie Plik > Podgląd strony w przeglądarce, aby wyświetlić stronę w domyślnej przeglądarce.
  4. Kliknij pozycję menu „Dessert”, aby przewinąć długą stronę do sekcji „Dessert”. Zwróć uwagę, że podczas przewijania zawartości strony trzy ikony mediów społecznościowych pozostają na miejscu wzdłuż prawej krawędzi strony, ponieważ zostały w tym miejscu przypięte.
Przypinanie obiektów do okna przeglądarki w witrynach w programie Adobe Muse
Przypinanie obiektów do okna przeglądarki

Przejdź Części VI samouczka: „Budowanie pierwszej witryny internetowej w programie Muse”, w której dowiesz się, jak grupować zestawy obiektów, tak aby zachowywały się jak pojedynczy element. Zajmiemy się także wykończeniem strony visit poprzez dodanie do niej mapy Google, na której będą wyświetlane lokalizacje placówek Katie's Cafe. Po zakończeniu pracy nad stroną zobaczysz, jak łatwo przesłać całą witrynę do serwera hostingowego (obsługiwanego przez Business Catalyst) i opublikować ją w Internecie. Dzięki temu możesz udostępnić postępy pracy klientom i współpracownikom.

W Części IV samouczka: „Budowanie pierwszej witryny internetowej w programie Muse” zostało omówione dodawanie znaczników zakotwiczenia i łączenie ich z pozycjami widżetu ręcznego menu poziomego. Potrafisz przypinać elementy do strony, aby zapobiec ich przewijaniu. Wiesz też, jak dodawać łącza do plików do pobrania dla osób odwiedzających witrynę.

Przyjrzymy się również grupowaniu obiektów i zajmiemy pracą z grupami, aby nauczyć się wklejać zestawy zawartości na strony. Wrócimy też do pracy z osadzonym kodem HTML – tym razem dodamy interaktywną mapę Google do strony visit. Na koniec sfinalizujemy witrynę poprzez dodanie ikony ulubionych i opublikowanie wersji testowej witryny na serwerach hostingowych.

Grupowanie obiektów i wklejanie grup jako pojedynczego obiektu

Podobnie jak w programie InDesign i innych programach do projektowania, możesz łączyć obiekty w grupy, aby były traktowane jako jednostka. W tej sekcji utworzymy projekt składający się z kilku elementów (umieszczonych obrazów i ramek tekstowych). Następnie zajmiemy się ich grupowaniem w celu ułatwienia pozycjonowania lub kopiowania ich w formie jednego elementu. Wykonaj następujące czynności:

  1. W widoku Planowanie kliknij dwukrotnie miniaturę strony „home”, aby otworzyć ją w widoku Projektowanie.
  2. Wybierz polecenie Plik > Umieść. Przejdź do folderu przykładowych plików i odszukaj plik „panel-open-bottom.png”. Kliknij Otwórz, aby zamknąć okno dialogowe Importuj, a następnie kliknij jeden raz u dołu strony „home” (między widżetem kompozycji lightbox a stopką), aby umieścić obraz w pełnym rozmiarze.

Plik PNG miał ustawione niższe krycie, dlatego przez półprzezroczystą grafikę kwiatka prześwituje obraz tła ustawiony sąsiadująco.

  1. Wybierz ponownie polecenie Plik > Umieść. Tym razem wybierz plik o nazwie „spoon-map.png”. Kliknij Otwórz, a następnie kliknij jeden raz u góry płatka, aby umieścić obraz.
  2. Podczas gdy obraz łyżki jest zaznaczony, naciśnij i przytrzymaj klawisz Option (w systemie Mac) lub Alt (w systemie Windows), aby powielić obraz, a następnie przeciągnij kopię na płatek po prawej. Potwórz tę operację jeszcze raz i przeciągnij powieloną kopię obrazu łyżki na płatek z lewej. Za pomocą narzędzia zaznaczania rozmieść trzy łyżki w sposób przedstawiony na następującej ilustracji.
Rozmieść trzy obrazy łyżki na trzech górnych płatkach grafiki.
Rozmieść trzy obrazy łyżki na trzech górnych płatkach grafiki.

  1. Za pomocą narzędzia Tekst narysuj ramkę tekstową na środkowym płatku i wpisz poniższe dane:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. W panelu Tekst zastosuj poniższe ustawienia, aby sformatować tekst:
    • Czcionka: Droid Serif (lub dowolna czcionka typu serif)
    • Rozmiar czcionki: 14
    • Kolor czcionki: #222222 (w Części V nazwaliśmy go „katieblack”)
    • Wyrównanie czcionki: Wyśrodkuj
    • Interlinia: 120%
  1. Następnie zaznacz dwa ostatnie wiersze tekstu (zaczynające się od dni tygodnia) i ustaw dla nich kolor czerwony (A6342A).
  2. Za pomocą narzędzia Zaznaczanie zaznacz ramkę tekstową. Naciśnij i przytrzymaj klawisz Option (w systemie Mac) lub Alt (w systemie Windows), aby powielić ramkę tekstową, a następnie przeciągnij kopię na płatek po prawej i umieść ją nad łyżką. Potwórz tę operację jeszcze raz i przeciągnij powieloną ramkę tekstową na płatek z lewej. Za pomocą narzędzia Zaznaczanie ustaw wszystkie trzy ramki tekstowe równo nad trzema łyżkami, wzorując się na następującej ilustracji.
Grupowanie obiektów w programie Adobe Muse
Zmień położenie trzech adresów i umieść je nad łyżkami na trzech górnych płatkach grafiki.

  1. Przejdź do narzędzia Tekst. Zaznacz tekst w lewej ramce i zmień go w następujący sposób:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. Za pomocą narzędzia Tekst zaznacz tekst w prawej ramce i zmień go w następujący sposób:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Projekt jest gotowy, zatem zajmiemy się zaznaczaniem i grupowaniem elementów.

  1. Za pomocą narzędzia Zaznaczanie kliknij i przeciągnij po całym obszarze kwiatka, aby zaznaczyć kwiatek, trzy obrazki łyżki oraz trzy ramki tekstowe. Kliknij zaznaczenie prawym przyciskiem myszy i wybierz w menu kontekstowym polecenie Grupowanie. Jeśli wolisz, możesz także wybrać polecenie Obiekt > Grupowanie.

Zwróć uwagę, że po zgrupowaniu obiektów Wskaźnik zaznaczenia w lewym górnym rogu panelu sterowania wyświetla słowo Grupa.

  1. Skopiuj zaznaczoną grupę. Kliknij Planowanie, aby powrócić do tego widoku, a następnie kliknij dwukrotnie stronę visit, aby otworzyć ją w widoku Projektowanie. Wybierz polecenie Edycja > Wklej w miejsce, aby umieścić całą grupę elementów w tym samym miejscu.

Na podstawie tego prostego przykładu można stwierdzić, że grupy są pomocne, jeśli chcemy, aby utworzona przez nas grafika zachowywała się jak pojedynczy element. Można ją wówczas przenieść w ramach strony lub skopiować i wkleić na innej stronie.

Poza grupowaniem po sfinalizowaniu grafiki przydatne są także funkcje blokowania. Kliknij grupę lub zestaw zaznaczonych elementów prawym przyciskiem myszy i w menu kontekstowym wybierz polecenie Zablokuj. (Możesz także wybrać polecenie Obiekt > Zablokuj). Funkcja blokowania pozwala uniknąć przypadkowego przesunięcia lub usunięcia gotowych elementów na stronie, ponieważ uniemożliwia ich zaznaczenie. Jeśli wymagane będzie edytowanie zablokowanych elementów, wybierz polecenie Obiekt > Odblokuj wszystko na stronie.

Po wklejeniu grafiki kwiatka u dołu strony visit jej zawartość jest częściowo gotowa. W następnej sekcji będziemy kontynuować edytowanie strony visit i dodamy do niej interaktywny interfejs mapy, aby ułatwić klientom odnalezienie najbliższej kawiarni.

Osadzanie zawartości multimedialnej w celu dodania animacji

  1. W widoku Planowanie kliknij dwukrotnie miniaturę strony MasterFlash, aby otworzyć ją w widoku Projektowanie. Zwróć uwagę, że w wyniku powielenia strony A-wzorcowej wciąż wyświetlane jest logo statyczne. Pozycję logo można wykorzystać do umieszczenia prostokąta animacji, jednak po osadzeniu zawartości multimedialnej należy pamiętać o usunięcie osadzonego, statycznego obrazu logo.

  2. Wybierz polecenie Plik > Umieść. W oknie dialogowym Importuj przejdź do folderu Kevins_Koffee_Kart i zaznacz plik o nazwie logo.swf.

  3. Umieść plik SWF w lewym górnym rogu, w tym samym miejscu, co istniejący obraz logo.

  4. Po wyrównaniu nowego okna pliku SWF ze starym statystycznym logo usuń to logo, zaznaczając je i naciskając klawisz Delete.

  5. Aby sprawdzić wygląd witryny po zastosowaniu zmian na stronie domowej oraz przetestować wyświetlanie logo na poszczególnych stronach, wybierz polecenie Plik > Podgląd witryny w przeglądarce. Bez publikowania strony możesz pracować na komputerze, a następnie uzyskać podgląd witryny w przeglądarce i klikać poszczególne strony z poziomu modułu nawigacji. Należy zwrócić uwagę, że animacja (plik SWF) na stronie domowej jest wyświetlana raz, po czym zatrzymuje się. Jeśli klikniesz pozostałe strony, zauważysz, że jest wyświetlane tylko logo statyczne.

    Uwaga:

    Jeśli wybierzesz polecenie Plik > Podgląd strony w przeglądarce, nowe okno przeglądarki ze stroną domową zostanie wczytane szybciej, ale wyświetlona strona będzie jedyną aktywną. Z opcji tej korzystamy w celu uzyskania podglądu pojedynczej strony, a nie witryny.

Korzystanie z panelu Odstępy

Panel Odstępy umożliwia wykorzystanie wypełnienia i odstępów między łamami w CSS. Wypełnienie czyści obszar wokół zawartości (wewnątrz granic) danego elementu. Kolor tła danego elementu ma wpływ na jego wypełnienie.

Możesz niezależnie zmieniać ustawienia wypełnienia górnej, prawej, dolnej i lewej części elementu. Możesz również zrównać wszystkie ustawienia wypełnienia poprzez wybranie ujednoliconej edycji.

  1. W programie Adobe Muse wybierz Okno > Odstępy, aby wyświetlić panel Odstępy.
Otwieranie panelu Odstępy w programie Adobe Muse
Otwieranie panelu Odstępy w programie Adobe Muse

  1. Określ wartości ustawień wypełnienia lewej, prawej, górnej i dolnej części elementu. Jeśli chcesz wprowadzić inne wartości, usuń zaznaczenie przycisku .
Konfiguracja ustawień wypełnienia i odstępów między łamami w panelu Odstępy.
Konfiguracja ustawień wypełnienia i odstępów między łamami w panelu Odstępy.

  1. Możesz również określić ustawienia poziomych i pionowych odstępów między łamami.

Skalowanie i obracanie obiektów za pomocą panelu Przekształć

W programie Adobe Muse możesz stosować wobec obiektów przekształcenia dwuwymiarowe. Możesz ustawiać, skalować i obracać obiekty względem osi poziomej i pionowej.

Przełącznik Szerokości 100% w panelu Przekształć umożliwia ustawienie pełnej szerokości obiektów. Możesz również ustawić skalowalne obiekty tak, aby zostały rozciągnięte do szerokości okna przeglądarki i dopasowane do ekranu monitora.

Aby zastosować przekształcenia wobec wybranego obiektu, wykonaj poniższe czynności:

  1. W programie Adobe Muse wybierz Okno > Przekształć.
Otwórz panel Przekształć w programie Adobe Muse.
Otwórz panel Przekształć w programie Adobe Muse.

  1. Zaznaczywszy obiekt, zastosuj jedno z poniższych przekształceń:
    • Pozycja: wprowadź wartości X i Y, aby umieścić obiekt w żądanej lokalizacji na stronie witryny.
    • Skala: wprowadź wartości Wysokość i Szerokość dla danego obiektu. Możesz również przeskalować obiekt do ujednoliconej wysokości i szerokości klikając przycisk .
    • Obrót (): wprowadź kąt obrotu obiektu.
    • Szerokość 100% (): możesz ustawić pełną szerokość dla obiektu, aby skalował się i dopasowywał do szerokości okna przeglądarki.

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