Dowiedz się, w jaki sposób dodawać i konfigurować menu dla swojej witryny Adobe Muse. Dowiedz się, jak tworzyć menu mobilne, stany najazdów i edytować etykiety menu.

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.

Nawigacja to jeden z najważniejszych aspektów do rozważenia podczas tworzenia strony internetowej. Podczas projektowania strony internetowej wybór typu i rozmieszczenie nawigacji strony ma kluczowe znaczenie. Menu lub nawigacja strony może ułatwić jej obsługę lub znacznie obniżyć jakość użytkowania.

Program Adobe Muse umożliwia szybkie tworzenie systemu nawigacyjnego za pomocą widżetów Menu. Co prawda możesz ręcznie utworzyć łącza wiążące ze sobą strony, jednak widżety Menu zapewniają prosty i elastyczny sposób na dodanie
nawigacji do Twojej witryny. Podobnie jak w przypadku innych widżetów, wystarczy przeciągnąć widżet Menu na stronę, aby dodać menu. Po wykonaniu tej czynności zobaczysz, że etykiety menu, nazwane tak samo jak strona, zostaną automatycznie uzupełnione. Po zmianie nazwy witryny w widoku Planowanie etykiety menu zostaną automatycznie zaktualizowane. 

Możesz dodawać menu pionowe i poziome. Dodatkowo program Adobe Muse umożliwia tworzenie menu typu „kanapka” i stanów najazdu dla elementów menu. Czytaj dalej, aby dowiedzieć się, jak wykonywać te czynności w programie Adobe Muse.

 

Dodawanie widżetu Menu

  1. Otwórz stronę wzorcową w widoku Projektowanie, a następnie przejdź do Biblioteki widżetów. Jeśli nie jest otwarta, wybierz polecenie Okno > Biblioteka widżetów.

  2. W panelu biblioteki kliknij kategorię Menu, aby ją rozwinąć. W zależności od projektu witryny oraz tego, gdzie chcesz umieścić menu, wybierz jedną z następujących opcji:

    • Poziome, aby dodać poziome menu.
    • Pionowe, aby dodać pionowe menu.
    Wybieranie pionowego lub poziomego widżetu Menu w programie Adobe Muse
    Wybieranie pionowego lub poziomego widżetu Menu
  3. Za pomocą narzędzia Zaznaczanie przeciągnij widżet i umieść go w żądanym miejscu w układzie. Możesz na przykład umieścić poziomy widżet menu w sekcji nagłówka.

    Umieść widżet Menu na tle brązowej wstążki w nagłówku.
    Umieść widżet Menu na tle brązowej wstążki w nagłówku.

    Zwróć uwagę, że w menu automatycznie wyświetlane są nazwy utworzonych stron w kolejności, w której są one ustawione na mapie witryny. Etykiety menu są automatycznie przypisywane do stron i są dynamiczne. Oznacza to, że jeśli później zdecydujesz się zmienić nazwę lub przenieść strony, menu zostaną automatycznie zaktualizowane. Łącza nadal będą działać tak jak powinny.

  4. Kliknij próbnik kolorów w panelu sterowania i ustaw kolor menu. Następnie za pomocą pola Rozmiar tekstu ustaw rozmiar tekstu w menu.

    Wybieranie rozmiaru i koloru tekstu
    Ustaw kolor czcionki oraz jej rozmiar, aby skonfigurować wygląd przycisków w widżecie Menu poziome.

Konfigurowanie i dostosowywanie widżetów Menu

Po dodaniu widżetu Menu do układu możesz dostosować go tak, aby odpowiadał Twoim potrzebom. Menu można konfigurować za pomocą panelu Opcje.  Panel Opcje to okno umożliwiające aktualizowanie ustawień konkretnego widżetu. Użyj tego panelu, aby kontrolować sposób zachowania widżetów oraz wyświetlania ich zawartości.

  1. Wybierz widżet Menu i kliknij niebieską strzałkę w prawym górnym rogu widżetu. W systemie zostanie wyświetlony panel Opcje.

    Konfigurowanie widżetu Menu za pomocą panelu Opcje
    Konfigurowanie widżetu Menu za pomocą panelu Opcje
  2. Skonfiguruj widżet Menu przy użyciu panelu Opcje. Można skonfigurować następujące opcje:

    • Typ menu: określa, które strony mają zostać uwzględnione w nawigacji witryny. Wybierz opcję Strony główne, aby uwzględnić tylko strony pierwszego poziomu lub strony nadrzędne. Wybierz opcję Wszystkie strony, aby uwzględnić w nawigacji również podstrony. Strony podrzędne są wyświetlane w formie menu podrzędnych. Wybierz opcję Ręcznie, aby ręcznie wybrać strony, które maja zostać uwzględnione w widżecie Menu.
    • Kierunek: określ, czy menu ma zostać dodane w poziomie, czy w pionie. 
    • Edytuj razem: zaznacz to pole wyboru, jeśli chcesz aktualizować wszystkie elementy menu razem. Domyślnie to pole wyboru jest zaznaczone. Jeśli nie zaznaczysz tego pola, wybierane konfiguracje zostaną zastosowane tylko do zaznaczonego elementu menu.
    • Rozmiar elementu: określ, czy elementy menu powinny zostać równomiernie rozmieszczone według szerokości lub według rozmiaru.
    • Pokaż lewą ikonę: domyślnie to pole wyboru nie jest zaznaczone. Zaznacz tę opcję, jeśli chcesz dodać ikonę w lewym rogu każdego elementu menu.
    • Pokaż etykietę: domyślnie to pole wyboru jest zaznaczone. W przypadku usunięcia zaznaczenia tego pola wyboru, etykiety menu nie będą wyświetlane.
    • Pokaż prawą ikonę: wybierz opcję Wyłącz, jeśli chcesz wyłączyć ikony po prawej stronie. Wybierz opcję Włącz, jeśli chcesz skonfigurować ikony w prawym rogu elementów menu. Ikony po prawej stronie są przydatne, jeśli chcesz dodać strzałki wskazujące, że dla danego menu istnieją podmenu. Możesz też wybrać opcję Tylko podmenu, aby skonfigurować prawą ikonę tylko dla tych elementów menu, które mają podmenu.
    • Pozycjonowanie części: określa punkt początkowy dla wewnętrznych części każdej zakładki.
    Konfiguracja widżetów Menu przy użyciu panelu Opcje
    Konfiguracja widżetów Menu przy użyciu panelu Opcje

Edycja i tworzenie stylu etykiet menu

Poniższa procedura wyjaśnia sposób aktualizowania etykiet tekstowych, które wyświetlają nazwę strony w każdej pozycji menu. Rozważ wybór widżetu Menu poziome, wykorzystującego podstawowy układ z prostymi łączami tekstowymi. Na potrzeby tego przykładu założymy, że dla wszystkich stanów używane jest takie samo formatowanie czcionki.

  1. Dwukrotnie kliknij i zaznacz etykietę menu, którą chcesz edytować.

  2. Aby edytować tekst wewnątrz elementu menu, otwórz panel Tekst (Okno > Tekst). Za pomocą panelu Tekst sformatuj tekst wybranej etykiety, wybierając żądane opcje:

    • Czcionka:: wybierz żądaną Czcionkę, którą chcesz zastosować do etykiety menu.
    • Styl czcionki: w razie potrzeby wybierz dla etykiety menu opcję Kursywa lub Pogrubienie.
    • Rozmiar:: wybierz rozmiar czcionki dla etykiety menu.
    • Kolor: w polu rozwijanym Kolor wprowadź kod szesnastkowy koloru, który chcesz zastosować. Możesz też wybrać kolor za pomocą kroplomierza.
    Edycja etykiet menu w widżetach Menu
    Edycja etykiet menu w widżetach Menu
  3. Użyj panelu Tekst, aby skonfigurować wartości marginesu dla etykiety menu. Jeśli masz już styl hiperłączy, który chcesz zastosować do etykiety menu, wybierz styl z pola rozwijanego obok ikony abc.

    Aby zastosować styl akapitu, wybierz styl z pola rozwijanego Styl akapitowy w panelu Tekst.

  4. Aby zastosować opcje Wypełnienie i Obrys do etykiet menu, dwukrotnie kliknij i wybierz etykietę menu. Z paska narzędziowego w górnej części strony wybierz kolor wypełnienia i kolor obrysu. 

    Możesz również edytować Grubość obrysu i włączyć promień narożnika dla etykiet menu z paska narzędziowego.

    Stosowanie wypełnienia i obrysu w etykietach menu
    Stosowanie wypełnienia i obrysu w etykietach menu

Tworzenie stanów najazdu dla pozycji menu

  1. Za pomocą narzędzia Zaznaczanie zaznacz etykietę menu, dla której chcesz utworzyć stan najazdu. Otwórz panel Stany. Zwróć uwagę że domyślne stany przycisku są już skonfigurowane. Kliknij miniaturę Najazd w panelu Stany, aby edytować ten stan.

  2. Podczas gdy etykieta menu jest zaznaczony, za pomocą próbnika kolorów w sekcji Wypełnienie ustaw brak wypełnienia (przezroczystość), klikając białą próbkę przekreśloną na czerwono.

  3. Kliknij narzędzie Tekst, a następnie za pomocą próbnika kolorów wybierz dla stanu Najazd kolor „złamana biel”.

  4. W panelu Stany wybierz stan Wciśnięty klawisz myszy. Z aktywnym narzędziem Tekst ustaw ciemniejszy kolor tekstu dla stanu Wciśnięty klawisz myszy, wybierając odpowiednią próbkę w próbniku kolorów na panelu sterowania.

  5. W panelu Stany wybierz stan Aktywny. Kliknij łącze Wypełnienie w panelu sterowania, aby otworzyć menu Wypełnienie.

  6. W menu Wypełnienie kliknij próbnik kolorów i ustaw kolor wypełnienia na Brak. Kliknij ikonę folderu w sekcji Obraz. W oknie dialogowym Importuj, które zostanie wyświetlone, przejdź do folderu Kevins_Koffee_Kart i zaznacz plik top-nav-over.png. Kliknij Wybierz, aby wybrać plik. Okno importu zostanie automatycznie zamknięte.

  7. W menu Wypełnienie upewnij się, że w sekcji Dopasowanie jest wybrana opcja Rozmiar oryginalny. Następnie w sekcji Pozycja kliknij środkowy kwadracik. To spowoduje wyśrodkowanie obrazu wypełnienia tła w oryginalnym rozmiarze bez koloru wypełnienia. Kliknij w dowolnym miejscu poza menu Wypełnienie, aby je zamknąć.

    Definiowanie stanów przycisków
    Definiowanie aktywnego stanu pozycji menu.

    Z uwagi na fakt, że domyślna opcja Edytuj razem jest zaznaczona w widżecie Menu poziome, wszystkie zmiany wprowadzone w etykiecie menu zostały automatycznie zastosowane wobec pozostałych przycisków w menu nawigacji.

  8. Wybierz polecenie Plik > Zapisz, aby zapisać postępy pracy. Kliknij symbol X na karcie strony A-wzorcowej, aby zamknąć widok Projektowanie i wrócić do widoku Planowanie. Zwróć uwagę, że wszystkie miniatury stron zostały zaktualizowane i wyświetlają zawartość dodaną do strony wzorcowej.

    Uwaga:

    Linie pomocnicze obszarów nagłówka i stopki można edytować wyłącznie na stronach wzorcowych witryny. Gdy zechcesz zmienić rozmiar nagłówka lub stopki strony, kliknij dwukrotnie miniaturę strony wzorcowej, aby otworzyć ją w widoku Projektowanie, a następnie przesuń linie zgodnie z wymaganiami.

Tworzenie menu mobilnego

Program Adobe Muse umożliwia tworzenie menu typu „kanapka” oraz menu mobilnego. Jeśli utworzysz menu tego typu, po najechaniu na menu główne zostanie wyświetlone rozwijane podmenu. Aby utworzyć tego typu menu, zobacz artykuł Tworzenie podmenu z wykorzystaniem widżetów kompozycji.

Wykluczanie stron z menu

Za każdym razem po utworzeniu nowej strony najwyższego poziomu dla swojej witryny w widoku Planowanie program Adobe Muse automatycznie dodaje tę stronę do menu. Czasami jednak możesz chcieć przetestować stronę, zanim zostanie ona udostępniona odwiedzającym, lub ukryć konkretną stronę. W takich przypadkach program Adobe Muse pozwala na wykluczenie określonych stron z nawigacji, aby upewnić się, że strony te nie znajdą się na liście elementów menu w widżecie Menu.

Wykonaj następujące czynności, aby wykluczyć strony z widżetu Menu:

  1. Zakładając, że mapa witryny została już utworzona, przejdź do menu widoku Planowanie w programie Adobe Muse. Na potrzeby tej procedury przyjmijmy, że mapa witryny obejmuje elementy takie jak Strona główna, Portfolio, Moja historia, Kontakt i Produkty.

    Wyświetlanie mapy witryny w widoku Planowanie
    Wyświetlanie mapy witryny w widoku Planowanie

    Jeśli przejdziesz do strony wzorcowej i przeciągniesz widżet Menu, zobaczysz, że wszystkie strony są uwzględnione jako część menu.

  2. Aby wykluczyć określoną stronę, w widoku Planowanie kliknij prawym przyciskiem myszy stronę, którą chcesz wykluczyć. Kliknij kolejno Opcje menu > Wyklucz strony z menu.

    Jeśli na przykład chcesz wykluczyć stronę Produkty, kliknij ją prawym przyciskiem myszy. Następnie wybierz kolejno Opcje menu > Wyklucz strony z menu.

    Wykluczanie określonych stron z widżetów Menu
    Wykluczanie określonych stron z widżetów Menu

    Kiedy wrócisz teraz do strony wzorcowej, aby wyświetlić menu, zobaczysz, że strona Produkty została usunięta z widżetu Menu.

    Uwaga:

    Aby usunąć całe menu, przejdź do strony, na której został dodany widżet Menu. Zaznacz widżet i naciśnij klawisz Delete.

    W sytuacjach, gdy chcesz, aby element menu był wyświetlany bez łącza, kliknij prawym przyciskiem myszy tę stronę w widoku Planowanie. Wybierz opcje menu > Uwzględnij stronę bez hiperłącza.

    Ta opcja jest przydatna w wielu przypadkach podczas tworzenia witryny internetowej. Możesz jej użyć, jeśli na przykład chcesz, aby odwiedzający stronę najazdu Produkty klikali wyłącznie kategorie produktów, a nie główną etykietę Produkty.

Praca z widżetami menu

Praca z widżetami menu
W tym filmie Brian Wood pokazuje, jak wstawić widżet menu na stronę.
Adobe Press - Peachpit

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