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.

W tym artykule dowiesz się, jak pracować z hiperłączami w programie Adobe Muse. Używając hiperłączy, możesz stworzyć odnośniki do zewnętrznych witryn, plików do pobrania, adresów e-mail i innych elementów. Pliki te mogą być typu PDF, DOC, PPT, TXT, zawartości multimedialne lub inne, które chcesz udostępnić odwiedzającym, a których umieszczanie nie jest aktualnie obsługiwane w interfejsie Muse. Łącza te mogą prowadzić do plików przesyłanych aktualnie do konta w hostingu Adobe Muse oraz plików przechowywanych na stronach zewnętrznych.

Film | Jak stworzyć hiperłącze

Film | Jak stworzyć hiperłącze
Adobe Press

Dodawanie łączy do zakotwiczeń na stronie

W tej sekcji dowiesz się, jak połączyć pozycje menu z dwoma elementami regionów do zakotwiczeń, aby dodać łącze do zakotwiczeń do ręcznego menu. Wykonaj poniższe kroki

  1. Kliknij w dowolnym miejscu na stronie, aby ją zaznaczyć (Wskaźnik zaznaczenia wyświetli słowo Strona). Następnie kliknij dwukrotnie element menu widżetu (kontener widżetu). Po pierwszym kliknięciu zostanie zaznaczony cały widżet, a po drugim pozycja menu „ We wskaźniku zaznaczenia pojawią się słowa Pozycja menu.
  2. Kliknij menu Hiperłącza, aby wyświetlić pełną listę stron i znaczników zakotwiczenia danej witryny. W sekcji Komputer odszukaj właściwą stronę i zwróć uwagę, że utworzone znaczniki zakotwiczenia są wymienione bezpośrednio pod nią. Wybierz właściwy znacznik zakotwiczenia, aby połączyć go z pozycją menu.
Tworzenie łączy do zakotwiczeń
Za pomocą menu Hiperłącza połącz zakotwiczenie „Breakfast” z przyciskiem „Breakfast”.

  1. Powtórz krok 2, aby dodać więcej łączy do zakotwiczeń.
  2. Wybierz polecenie Plik > Właściwości witryny. Na karcie Zawartość upewnij się, że pole wyboru obok opcji Włącz stan aktywny dla łączy do zakotwiczeń jest zaznaczone. Opcja ta jest domyślnie włączona dla wszystkich nowych witryn. Jeśli edytujesz starszą witrynę, może być konieczne zaznaczenie tej opcji.
  3. Wybierz polecenie Plik > Podgląd strony w przeglądarce.

Klikając poszczególne łącza do sekcji strony, zwróć uwagę, że w menu nawigacyjnym wyświetlany jest odpowiedni stan aktywny. Dzięki tej funkcji witryny osoby odwiedzające mogą się zorientować, którą sekcję aktualnie przeglądają. Zamknij przeglądarkę i wróć do Adobe Muse.

Spróbuj także przewijać stronę w górę i w dół. Zauważysz, że kod strony rozpoznaje lokalizację poszczególnych znaczników zakotwiczenia i aktualizuje stan aktywny pozycji menu podczas przechodzenia pomiędzy regionami strony. Ta technika działa w przypadku stron, które przewijają się zarówno w pionie, jak i poziomie.

Uwaga: strona musi być odpowiednio długa lub szeroka, aby znaczniki zakotwiczenia miały miejsce na przeskakiwanie pomiędzy regionami. Jeśli regiony strony są zbyt blisko siebie i zawartość mieści się w oknie przeglądarki bez przewijania, znaczniki zakotwiczenia nie przeskakują do kolejnych regionów.

  1. Zamknij przeglądarkę i wróć do Adobe Muse.

W następnej sekcji zajmiemy się dodawaniem łączy pobierania, aby umożliwić osobom odwiedzającym pobieranie plików w takich formatach, jak PDF, DOC, MP3, MOV i PSD oraz plików JPEG wysokiej rozdzielczości.

Wskazówka: jeśli współpracujesz przy projektowaniu witryny z innymi osobami, możesz utworzyć łącza do plików źródłowych .muse, aby umożliwić członkom zespołu pobieranie ich bezpośrednio z twojej witryny.

Praca z regionami znaczników zakotwiczeń i stanami aktywnymi

Tworzenie regionów do zakotwiczeń na stronie internetowej to łatwy sposób segregacji wizualnej różnych jej sekcji. Łatwy dostęp do każdej takiej sekcji można uzyskać za pomocą łączy do zakotwiczeń, które zostały zaprojektowane tak, aby ułatwić nawigowanie na stronie.

W końcowej wersji projektu strona internetowa powinna zawierać łącza do zakotwiczeń, które umożliwiają osobom odwiedzającym przechodzenie w pionie do obszaru strony, który zawiera odpowiednie menu. Znacznik zakotwiczenia można porównać do zakładki w książce. Po kliknięciu przez osobę odwiedzającą łącza do danego zakotwiczenia strona zostanie przewinięta do określonego miejsca, w którym umieszczona jest „zakładka”.

  1. Kliknij przycisk Zakotwiczenie na górnym pasku nawigacyjnym, aby wczytać narzędzie Zakotwiczenie.
Kliknij przycisk Zakotwiczenie
Wczytaj moduł umieszczania, klikając przycisk Zakotwiczenie w górnej części przestrzeni roboczej.

  1. Kliknij raz na samej górze strony, tuż nad elementami nawigacyjnymi obszaru nagłówka. Jeśli chcesz, możesz odsunąć na chwilę prostokąt nagłówka. Jeśli się na to zdecydujesz, pamiętaj o przesunięciu nagłówka z powrotem na miejsce.
  2. W oknie dialogowym Zmień nazwę zakotwiczenia wpisz nazwę zakotwiczenia.
Wprowadź nazwę zakotwiczenia
Nazwij zakotwiczenie menu śniadaniowego znajdujące się na górze strony.

  1. Aby zdefiniować regiony do zakotwiczeń i dodać więcej łączy do zakotwiczeń, należy powtórzyć kroki od 1 do 3.

Uwaga:

Odstęp (w pikselach) pomiędzy pierwszym zakotwiczeniem (na górze strony) i pierwszym wystąpieniem łączonej zawartości (ręcznym widżetem Menu, który dodamy w następnej sekcji) wyznacza granice „obszaru aktywnego”, który wywołuje zmianę stanu aktywnego w każdym z regionów. Jeśli np. pierwsze zakotwiczenie zostanie umieszczone na samej górze strony, a widżet menu 120 pikseli pod nim, stan aktywny pozycji menu dla kolejnych regionów zaktualizuje się także 120 pikseli przed wyświetleniem menu w miarę przewijania strony przez osobę odwiedzającą.

Po dodaniu ręcznego widżetu Menu w kolejnym kroku zajmiemy się łączeniem przycisków ze znacznikami zakotwiczenia, aby utworzyć system nawigacji, który umożliwi osobom odwiedzającym przeskakiwanie w dół strony w celu przeczytania każdego menu.

Dodawanie łączy do plików do pobrania

  1. Podczas edytowania strony w widoku Projektowanie, za pomocą narzędzia Tekst utwórz nową ramkę tekstową w prawym górnym rogu ramki menu „Breakfast”. Wpisz do niej słowa „Download Menu”.
  2. Podczas gdy ramka tekstowa jest zaznaczona, w panelu Tekst wybierz poniższe ustawienia:
    • Czcionka internetowa: Kaushan Script (lub dowolna skryptowa)
    • Rozmiar czcionki: 14
    • Kolor: EEE5C4 (w Części III nazwaliśmy go „cream-menu”)
    • Interlinia: 57%
    • Wyrównanie: Wyśrodkowane
  3. Za pomocą menu Wypełnienie ustaw brak wypełnienia. Kliknij ikonę folderu obok pozycji Obraz i przejdź do folderu przykładowych plików, a następnie wybierz plik o nazwie „download-bg.png”, który posłuży za obraz tła. Upewnij się, że w menu Dopasowanie jest wybrana opcja Rozmiar oryginalny, a Pozycja to Pośrodku.
  1. Kliknij poza menu Wypełnienie, aby je zamknąć. Jeśli chcesz, możesz za pomocą narzędzia Zaznaczanie zmienić wielkość ramki tekstowej i przesunąć ją do prawego górnego narożnika ramki menu „Breakfast”.
  1. Podczas gdy zaznaczona jest ramka tekstowa, użyj menu Hiperłącza w Panelu sterowania, aby wybrać opcję Połącz z plikiem. W wyświetlonym oknie dialogowym przeglądaj i wybierz plik, a następnie kliknij Otwórz, aby go wybrać

Uwaga! Po wybraniu pliku za pomocą polecenia Połącz z plikiem staje się on zasobem witryny i jest przesyłany podczas publikowania lub dołączany do zestawu plików witryny podczas jej eksportowania. Zalecaną praktyką jest kopiowanie plików, do których będą prowadzić łącza w witrynie oraz obrazów do lokalnego folderu witryny.

Łącze do pliku PDF zostało dodane. Jeśli spojrzysz na panel Zasoby, zauważysz, że na liście zasobów znajduje się teraz plik.

  1. Za pomocą narzędzia Zaznaczanie zaznacz ramkę tekstową. Skopiuj ramkę tekstową „Download Menu” i wklej ją w prawym górnym rogu menu „Lunch”. Powtórz ten krok jeszcze dwa razy, aby umieścić kopie ramki w dwóch pozostałych menu („Dinner” i „Dessert”).

W rzeczywistym projekcie można utworzyć łącza do czterech plików menu, aby zapewnić osobom odwiedzającym cztery pliki PDF do pobrania, które można otworzyć lub wydrukować. Jednak na potrzeby tego samouczka łącza przyciski Download we wszystkich czterech regionach strony prowadzą do tego samego pliku.

  1. Wybierz polecenie Plik > Podgląd strony w przeglądarce. Kliknij jedną z pozycji w menu poziomym, aby przejść do tego menu na stronie. Zauważ, że w miarę przewijania w dół w celu wyświetlenia menu „Dinner” i „Dessert” nagłówek pozostaje widoczny na tle reszty zawartości strony. Dzieje się tak, ponieważ strona „food” korzysta ze strony wzorcowej „Foreground”, a zawartość jej nagłówka została przeniesiona na pierwszy plan.
  2. Kliknij łącze „Download Menu” i przetestuj pobieranie pliku PDF na komputer.

W zależności od używanej przeglądarki i jej ustawień zachowanie po kliknięciu przycisku może być różne. Niektóre przeglądarki wyświetlają plik PDF w swoim oknie, a inne pobierają go na pulpit. Aby otworzyć pobrany plik, należy użyć programu Acrobat Pro lub Acrobat Reader.

Tworzenie łączy do adresów e-mail

Jeśli korzystasz z programu Adobe Muse od dłuższego czasu, nie umknęły twojej uwadze zmiany wprowadzone w menu Hiperłącza. Zostało ono podzielone na sekcje, aby ułatwić odszukiwanie nazw stron i elementów do połączenia. W tej sekcji przyjrzymy się bliżej strukturze menu Hiperłącza. Dowiesz się też, jak filtrować pozycje listy menu. Zobaczysz także, jak dodawać łącza do adresów e-mail.

  1. Kliknij strzałkę w dół w menu Hiperłącza, aby wyświetlić pełną listę.
Tworzenie łączy do adresów e-mail
Widok rozszerzony listy menu Hiperłącza.

  1. Menu Hiperłącza jest podzielone na sekcje. W sekcji Ostatnio używane łącza są wyświetlane łącza do witryn zewnętrznych, które zostały dodane do witryny. W polu Hiperłącza można wpisać dowolny adres URL i utworzyć łącze do witryny zewnętrznej.
  2. W sekcji Komputer znajdują się strony w bieżącej witrynie. Zwróć uwagę, że pod stroną „food” znajdują się dodane do niej znaczniki zakotwiczenia w kolejności alfabetycznej. Oznacza to, że możesz tworzyć znaczniki o takich samych nazwach na wielu stronach witryny i łatwo je zidentyfikujesz podczas konfigurowania łączy. W tej przykładowej witrynie jest dostępny wyłącznie układ Komputer, jednak gdyby zawierała ona także układy alternatywne dla telefonów lub tabletów, w menu znalazłyby się odpowiednie sekcje wraz ze stronami.
  3. W sekcji Pliki na końcu znajduje się funkcja Połącz z plikiem oraz pliki do pobrania dodane do bieżącej witryny. Z racji tego, że przed chwilą dodaliśmy łącze do pliku KatiesCafeMenu.pdf, jego nazwa znajduje się na liście w tej sekcji. Dzięki temu łatwiej jest połączyć wspólny zasób z wieloma stronami witryny.
  4. Aby dodać łącze e-mail (którego kliknięcie spowoduje uruchomienie klienta poczty e-mail w komputerze osoby odwiedzającej i otwarcie okna nowej wiadomości z wpisanym już adresem), wprowadź adres, poprzedzając go w menu Hiperłącza prefiksem mailto: w następujący sposób:

    mailto:email@adres.com

  5. W niektórych przypadkach lista pozycji menu Hiperłącza może się stać długa, przez co utrudnia nawigowanie po większych witrynach. Jeśli szukasz określonej strony, zakotwiczenia, pliku lub zewnętrznego adresu URL, do którego chcesz utworzyć łącze, wpisz kilka pierwszych liter jego nazwy w polu menu Hiperłącza, aby wyświetlić pasujące pozycje. W ten sposób możesz szybko przefiltrować pozycje listy i odnaleźć potrzebne elementy.

Dodawanie łączy do zewnętrznych witryn internetowych

Po dodaniu przycisków serwisów społecznościowych możesz dodać łącza zewnętrzne do ich witryn.

  1. Zaznacz ikonę Facebooka, a następnie wpisz (lub skopiuj/wklej) w polu Hiperłącze adres strony Katie's Cafe na Facebooku: http://www.facebook.com/KatiesCafeSF
  2. Zaznacz ikonę Google+, a następnie wpisz (lub skopiuj/wklej) poniższe łącze do strony Katie's Cafe w serwisie Google+: https://plus.google.com/u/1/117800212967830061444/posts
  3. Zaznacz ikonę Twittera, a następnie wpisz (lub skopiuj/wklej) poniższe łącze do strony Katie's Cafe w serwisie Twitter: http://twitter.com/katiescafesf
  4. Kliknij ponownie ikonę Facebooka, aby ją zaznaczyć. Kliknij niebieską, podkreśloną opcję Hiperłącza umieszczoną w lewej części panelu sterowania. W oknie dialogowym, które zostanie wyświetlone zaznacz pole wyboru obok opcji Otwórz łącze w nowym oknie lub na nowej karcie.
  5. Powtórz krok 4, aby łącza Google+ i Twitter także były otwierane w nowym oknie przeglądarki.

To rozwiązanie jest często stosowane podczas projektowania witryn. Łącza prowadzące do innych stron tej samej witryny są otwierane w tym samym oknie przeglądarki (to domyślne ustawienie programu Adobe Muse), natomiast łącza do innych, zewnętrznych stron są otwierane w nowym oknie lub w nowej karcie.

Określanie adresu URL pliku podczas przygotowywania łącza do dodania

Aby przygotować łącze przed dodaniem go do strony witryny Adobe Muse należy otworzyć przesłany plik, stanowiący część uruchomionej witryny, bezpośrednio w przeglądarce. Wykonaj następujące czynności.

  1. Uruchom wybraną przeglądarkę.
  2. Przejdź do swojej witryny lub witryny zewnętrznej zawierającej przesłany plik zależny. Możesz skorzystać z wyszukiwarki, np. Google, lub możesz wpisać nazwę domeny witryny bezpośrednio w pasku adresu przeglądarki.
Pasek adresu przeglądarki
Możesz wpisać nazwę domeny witryny bezpośrednio w pasku adresu przeglądarki.

  1. Po wejściu na stronę domową żądanej witryny przejdź przez nawigację strony lub wpisz pełny adres URL w pasku adresu, aby przejść do określonego pliku zależnego. Po wykonaniu tej czynności przeglądarka wyświetli, odtworzy, lub pobierze żądany plik.
  2. Po sprawdzeniu, czy wpisano poprawny adres URL do pliku wybierz całą zawartość paska adresu przeglądarki i wybierz Edycja > Kopiuj. Możesz zamiast tego skorzystać ze skrótu klawiaturowego Command+X (w systemie Mac OS) lub Control+C (w systemie Windows).
Skopiuj adres z paska adresu przeglądarki
Skopiuj adres URL z paska adresu przeglądarki

W tym momencie adres URL do zależnego pliku został skopiowany do schowka. Nie kopiuj żadnych innych elementów, dopóki nie wkleisz adresu URL zależnego pliku w pole hiperłącza w sposób opisany w kolejnej części.

Tworzenie łączy do plików zewnętrznych

Po udanym przesłaniu zależnego pliku, przejdź do niego w przeglądarce i skopiuj adres URL pliku. Ostatnia pozostała czynność polega na utworzeniu łącza na stronie witryny Adobe Muse. Wykonaj poniższe kroki

  1. Uruchom program Adobe Muse. Kliknij dwukrotnie miniaturkę strony, aby otworzyć stronę w widoku Projektowanie.
  2. Wybierz fragment tekstu, umieszczony obraz lub kształt prostokąta, który chcesz, aby był „przyciskiem”, który odwiedzający będą klikać, aby pobrać zależny plik.
  3. Podczas gdy zaznaczony jest tekst lub element strony, kliknij środek rozwijanego pola Hiperłącze i wklej uprzednio skopiowany adres URL (ścieżkę bezwzględną) do zależnego pliku.

Jeśli chcesz ustawić łącze tak, aby otwierało się w nowym oknie przeglądarki, kliknij etykietę Hiperłącze tuż po lewej stronie okna Hiperłącze. W wyświetlonym oknie dialogowym zaznacz pole wyboru obok opcji Otwórz łącze w nowym oknie lub na nowej karcie w sposób przedstawiony poniżej.

Hiperłącze – opcje
Wybierz „Otwórz łącze w nowym oknie lub na nowej karcie”

Zapisz stronę i opublikuj zmiany w witrynie.

Przejdź do strony w przeglądarce. Kliknij powiązany tekst lub przycisk, aby sprawdzić, czy łącze działa w oczekiwany sposób.

Uwaga:

Możesz spróbować odwiedzić swoją witrynę w kilku różnych przeglądarkach, np. Chrome, Safari i Firefox, aby zobaczyć, czy różne przeglądarki zachowują się w akceptowalny sposób po kliknięciu łącza w uruchomionej witrynie w celu przejścia do zależnego pliku.

Więcej wskazówek dotyczących pracy z programem Adobe Muse można znaleźć na stronie Pomoc i samouczki programu Adobe Muse lub na stronie Adobe Muse Events, na której są dostępne prezentacje internetowe w wersji zarejestrowanej oraz „na żywo”.

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