Skapa hyperlänkar för Adobe Muse-webbplatser

I den här artikeln får du lära dig hur du arbetar med hyperlänkar i Adobe Muse. Med hyperlänkar kan du länka till externa webbplatsen, nedladdningsfiler, e-postadresser och annat. Nedladdningsbara filer kan ha formaten PDF, DOC, PPT, TXT eller vara omfattande mediefiler eller andra typer av filer som du vill dela med webbplatsens besökare, men som för närvarande inte kan infogas i Adobe Muse-gränssnittet. Du kan länka till filer som är överförda till ditt Adobe Muse-värdkonto och till filer som finns på tredjepartswebbplatser.

Video | Så här skapar du en hyperlänk

Lägga till ankarlänkar på en sida

I den här delen får du lära dig hur du kopplar menydelar till ankarområdenas två element och hur du kopplar ankarlänkarna till den manuella menyn. Gör så här:

1. Klicka var som helst på sidan för att markera den (markeringsindikatorn visar då ordet Sida). Sedan klickar du på widgetmenyobjektet (widgetbehållaren) två gånger. Första gången markeras hela den manuella menywidgeten och andra gången väljs menyobjektet. Markeringsindikatorn visar nu ordet Menyobjekt.
2. Klicka på menyn Hyperlänkar för att se en fullständig lista över sidor och ankarpunktstaggar för webbplatsen. Leta upp rätt sida under Skrivbord och lägg märke till att ankartaggarna du skapade är listade direkt under den. Välj en lämplig ankarpunktstagg och att länka den till menyobjektet.

3. Upprepa steg 2 för att lägga till fler ankarlänkar.
4. Välj Arkiv > Webbplatsegenskaper. Gå till fliken Layout och kontrollera att kryssrutan Ange aktivt läge för ankarlänkar är markerad. Det här alternativet är aktiverat som standard för alla nya webbplatser, men om du redigerar en äldre webbplats kan du behöva markera kryssrutan.
5. Välj Arkiv > Förhandsvisa sidan i webbläsare.

Observera att det motsvarande aktiva läget i navigeringsmenyn visas när du klickar på länkarna för att se de olika sidområdena. Den här webbplatsfunktionen gör att det blir enklare för besökare att förstå vilket avsnitt de visar. Gå ut ur webbläsaren och återgå till Adobe Muse.

Försök också med att rulla uppåt och nedåt på sidan så ser du att koden på sidan identifierar positionen för varje ankartagg och uppdaterar den manuella menyns aktiva läge när sidan rullas genom respektive sidområde. Den här tekniken fungerar för sidor som rullas både lodrätt och vågrätt.

Obs! En sida måste vara tillräckligt lång eller bred så att det finns plats för ankartaggarna att hoppa till varje område. Om sidområdena är för nära varandra så att hela innehållet får plats i ett webbläsarfönster utan att rulla, ser det inte ut som att ankartaggarna hoppar till nästa område.

6. Gå ut ur webbläsaren och återgå till Adobe Muse.

I nästa avsnitt lär du dig hur du lägger till nedladdningslänkar, så att besökarna kan hämta filformat som PDF, DOC, MP3, MOV, PSD och högupplösta JPEG-filer.

Tips: Om du arbetar på ett webbplatsprojekt tillsammans med andra designer, kan du till och md länka till .Muse-källfiler, så att teamet kan hämta dem direkt från din webbplats.

Arbeta med områden med ankartaggar och aktiva lägen

Att skapa ankarområden på en webbsida är ett enkelt sätt att visuellt skilja olika delar av en webbsida åt. Alla delar går att komma åt enkelt genom ankarlänkar som är gjorda för att förenkla navigeringen på sidan.

I en avslutad design bör webbsidan ha ankarlänkar som gör att besökare kan gå i vertikal riktning till det område som visar motsvarande meny. Att lägga till ankarlänkar är ungefär som att fästa en markör på sidan. När besökare klickar på en länk till ankaret gör länken att sidan rullar fram till det specifika avsnitt där markören är placerad.

1. Klicka på ankarknappen i det övre verktygsfältet för att läsa in ankarverktyget.

2. Klicka en gång längst upp på sidan i sidhuvudsområdet. Om du vill kan du flytta bort sidhuvudsrektangeln tillfälligt. Om du flyttar rubrikinnehållet måste du flytta det tillbaka på plats efteråt.
3. I dialogrutan Ändra namn på en ankarpunkt som visas anger du ankarpunktens namn.

4. Upprepa steg 1 till 3 för att ange ankarområden och lägga till fler ankarlänkar.

När du i nästa steg lägger till en manuell menywidget kommer du att länka knapparna till ankartaggarna och skapar så en navigeringsfunktion som gör att besökarna kan hoppa nedåt på sidan för att läsa varje meny.

Lägga till länkar till hämtningsbara filer

1. När du redigerar en sida i vyn Design använder du textverktyget för att skapa en ny textram i närheten av det övre högra hörnet för textramen Frukostmeny. Skriv in följande ord: Hämta meny.
2. Låt textramen vara markerad och använd textpanelen för att använda följande inställningar:
   • Webbteckensnitt: Kaushan Script (eller annat skriptteckensnitt som du föredrar)
   • Teckensnittsstorlek: 14
   • Färg: #EEE5C4 (i del 3 ändrade du namn på den här provfärgen till cream-menu)
   • Radavstånd: 57 %
   • Justering: Centrerad
3. Använd menyn Fyllning för att ställa in fyllning till ingen. Klicka på mappikonen till höger om Bild och bläddra efter filen download-bg.png i mappen med exempelfiler för att ange bakgrundsbilden. Se till att menyn Passning är inställd på Ursprungsstorlek och att placeringen är centrerad.

4. Klicka utanför menyn Fyllning för att stänga den. Du kan vid behov använda markeringsverktyget för att ändra storlek på textramen och ändra dess placering så att den centreras i det övre högre hörnet i textramen för frukostmenyn.

5. När textramen är vald använder du menyn Hyperlänkar i kontrollpanelen och väljer alternativet Länka till fil. I dialogrutan Importera som öppnas bläddrar du till filen och klickar på Öppna för att välja den

Obs! När du bläddrar fram och väljer en fil med funktionen Länka till fil, blir filen en av de webbplatsresurser som överförs när webbplatsen publiceras, eller inkluderas i webbplatsfilerna när webbplatsen exporteras. När du vill länka till filer från webbplatsen rekommenderar vi att kopiera dem till webbplatsens lokala mapp, tillsammans med andra bildfiler som du använder på webbplatsen.

Länken till PDF-filen har nu lagts till. Om du öppnar panelen Resurser ser du att filen nu är listad som en av webbplatsens resurser.

6. Markera textramen med markeringsverktyget. Kopiera textramen Hämta meny och klistra in den så att den placeras över lunchmenyns övre högra hörn. Upprepa det här steget två gånger. Då skapas kopior som placeras över de högra hörnen för menyerna Middag och Dessert.

I ett verkligt projekt skulle du kunna länka till fyra separata menyfiler, så att besökare kan hämta fyra olika PDF-filer att läsa och skriva ut om de så önskar. I den här självstudiekursen länkar hämtningsknappen dock till samma PDF-fil i varje sidområde.

7. Välj Arkiv > Förhandsvisa sidan i webbläsare. Klicka på ett av menyobjekten i den horisontella menyn för att gå till den menyn på sidan. Observera att när du rullar ned för att visa menyerna Middag och Dessert visas sidhuvudet ovanför övrigt sidinnehåll. Det här beteendet beror på att matsidan använder förgrundsmallsidan, och sidhuvudsinnehållet för den sidan har flyttats till förgrunden.
8. Klicka på länken Hämta meny så hämtas PDF-filen till din dator.

Beroende på vilken webbläsare du använder och dess inställningar kommer du att se olika beteenden. Vissa webbläsare kommer att visa PDF:en i webbläsarfönstret, medan andra helt enkelt hämtar PDF-filen till datorn, där du kan öppna den med Acrobat Pro eller Acrobat Reader.

Skapa länkar till e-postadresser

Om du har en del vana vid Adobe Muse märker du kanske att menyn Hyperlänkar har delats upp i avsnitt, så att det blir enklare att hitta sidnamnen och de objekt du kan länka till. I det här avsnittet tittar vi närmare på hur menyn Länkar är uppbyggd och hur du filtrerar objekten i menylistan. Du får också lära dig att lägga till e-postlänkar.

1. Klicka på nedåtpilen på menyn Hyperlänkar för att se den fullständiga listan.

2. Menyn Länkar är uppdelad i olika avsnitt. Alternativet Senast använda länkar visar länkar till externa webbplatser som har lagts till på webbplatsen. Om du vill länka till externa webbplatser kan du skriva in en webbadress direkt i fältet Lägg till eller filtrera länkar.
3. Alternativet Skrivbord innehåller sidorna på den aktuella webbplatsen. Observera att ankarpunktstaggarna som du har lagt till på matsidan listas under matsidan i alfabetisk ordning. Detta innebär att du kan skapa ankarpunkter med samma namn på flera sidor i en webbplats, och ändå identifiera dem enkelt när du organiserar länkarna. På den här exempelwebbplatsen finns det bara en skrivbordslayout, men om webbplatsen innehåller alternativa layouter för Telefon eller Surfplatta, visas dessa i listan med motsvarande uppsättning sidor.
4. Alternativet Filer i den nedre delen inkluderar funktionen Länka till fil och eventuella hämtningsbara filer som läggs till på den aktuella webbplatsen. Eftersom du just har lagt till en länk till filen KatiesCafeMenu.pdf visas filnamnet i det här avsnittet, vilket gör det enkelt att länka på nytt till en gemensam resurs från flera sidor på webbplatsen.
5. Om du vill lägga till en e-postlänk (som när den klickas öppnar besökarens e-postprogram och skapar ett nytt meddelande med e-postadressen i fältet Till) anger du e-postadressen med prefixet mailto: i fältet Lägg till eller filtrera länkar, så här:
   
   mailto:email@address.com
   
   
6. På större webbplatser kan listan över objekt i menyn Hyperlänkar ibland bli ganska lång och svår att navigera i. Om du letar efter en specifik sida, ankarlänk, fil eller extern URL-adress att länka till skriver du länkens första tecken i fältet Lägg till eller filtrera länkar. Motsvarande objekt visas då. På så sätt kan du snabbt filtrera listan och hitta de objekt du vill länka till.

Lägga till länkar till externa webbplatser

Nu när alla knappar för sociala medier är på plats lägger du till de externa länkarna till webbplatserna för de sociala nätverken.

1. Markera Facebook-ikonen och skriv sedan in (eller kopiera och klistra in) länken till Facebook-sidan för Katie's Cafe i fältet Lägg till eller filtrera länkar, så här: http://www.facebook.com/KatiesCafeSF
2. Välj ikonen för Google+ och skriv sedan in (eller kopiera och klistra in) följande länk till sidan för Katie's Cafe på Google+: https://plus.google.com/u/1/117800212967830061444/posts
3. Markera Twitter-ikonen och skriv sedan in (eller kopiera och klistra in) följande länk till Twitter-sidan för Katie's Cafe: http://twitter.com/katiescafesf
4. Klicka på Facebook-ikonen igen så att den markeras. Klicka på det blå understreckade ordet Hyperlänkar till vänster om länkmenyn. I dialogrutan som visas markerar du kryssrutan Öppna länken i ett nytt fönster eller på en ny flik.
5. Upprepa steg 4 för att ställa in länkarna för Google+ och Twitter så att de också öppnas i ett nytt webbläsarfönster.

Det här är en vanlig konvention i webbdesign – länkar som leder till andra sidor på samma webbplats öppnas i samma webbläsarfönster (vilket sker som standard i Adobe Muse) och länkar till sidor i andra, externa, webbplatser öppnas i ett nytt fönster eller i en ny flik.

Identifiera filens webbadress när länken ska läggas till

Om du vill förbereda en länk innan du lägger till den på en sida på Adobe Muse-webbplatsen ska du använda en webbläsare för att gå till den överförda filen. Gör så här.

1. Starta en valfri webbläsare.
2. Bläddra efter webbplatsen eller en tredjepartsplats som innehåller den inlästa beroende filen. Du kan använda en sökmotor, till exempel Google, eller skriva webbplatsens namn direkt i adressfältet i webbläsaren.

3. När du har öppnat startsidan för den önskade webbplatsen klickar du dig fram med navigeringarna eller anger den fullständiga webbadressen i webbläsarens adressfält, för att hitta den specifika beroende filen. När du är klar med detta moment kommer webbläsaren att visa, spela upp eller hämta filen.
4. När du är säker på att du angett rätt webbadress för den överförda filen markerar du allt innehåll i webbläsarens adressfält och väljer Redigera > Kopiera. Du kan också använda kortkommandona Kommando+C (Mac) eller Ctrl+C (Windows).

Nu har webbadressen till den beroende filen kopierats till Urklipp. Se till att du inte kopierar andra objekt förrän du har klistrat in den beroende filens webbadress i fältet Hyperlänk. Se beskrivningen i nästa avsnitt.

Skapa länkar till en extern fil

När du har överfört en beroende fil, öppnat den i en webbläsare och kopierat filens webbadress återstår momentet med att skapa länken på en sida på Adobe Muse-webbplatsen. Gör så här:

1. Starta Adobe Muse. Dubbelklicka på sidminiatyrbilden för att öppna sidan i designvyn.
2. Markera en viss text, en monterad bild eller en rektangelfigur som du vill använda som den "knapp" som besökaren ska klicka på för att hämta eller komma åt den beroende filen.
3. Med texten eller sidelementet markerat klickar du på listrutan i hyperlänkfältet och klistrar in webbadressen (absolut sökväg) till den beroende filen som du kopierade tidigare.

Om du vill ställa in att länken ska öppnas i ett nytt webbläsarfönster klickar du på etiketten Hyperlänk omedelbart till vänster om hyperlänksfönstret. I den dialogruta som öppnas markerar du kryssrutan bredvid alternativet Öppna länken i ett nytt fönster eller på en ny flik. Se bilden nedan.

Spara sidan och publicera ändringarna på webbplatsen.

Gå till sidan i en webbläsare. Klicka på den länkade texten eller knappen för att kontrollera att länken fungerar så som det är tänkt.

Mer tips om hur du arbetar med Adobe Muse finns i hjälpen för Adobe Muse och på Adobe Muse Events-sidan där det både finns inspelade webbseminarier och realtidswebbseminarier.