Skapa sidhuvuden och -fötter i Adobe Muse

Definiera sidhuvuds- och sidfotsområden för webbplatsen i Adobe Muse och lägg till menyer, logotyper, upphovsrättsmeddelanden med mera.

Obs!

Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns i de vanliga frågorna om när Adobe Muse inte längre kommer att vara tillgängligt.

Du kan enkelt skapa sidhuvuden och -fötter för en webbplats i Adobe Muse. Genom att använda samma utseende på sidhuvuden och sidfötter kan webbplatsen få en enhetligare framtoning. Det kan du göra genom att ändra elementen sidhuvud och sidfot på din mallsida i Adobe Muse. När du uppdaterar mallsidan genomförs ändringarna på alla webbplatsens sidor.

När du skapar en webbplats med HTML och CSS kan de olika sidorna ofta variera i höjd, beroende på vilket innehåll som visas på just den sidan. Muse innehåller funktioner som gör att sidor på en webbplats kan visas med olika längd, beroende på innehållet på just den sidan. Du kan ställa in områden så att sidhuvudet alltid är kvar längst upp och sidfoten alltid visas direkt nedanför sidans innehåll, oavsett vilken höjd sidan har.

Lägga till sidhuvud och sidfot på en sida

Se till att stödlinjerna för sidhuvud och sidfot visas innan du börjar ändra sidhuvudet och sidfoten för sidan. Om de inte visas väljer du Visa > Visa sidhuvud och -fot.

Alternativt kan du använda menyn Visningsalternativ i Kontrollpanelen för att aktivera stödlinjerna för Sidhuvud och -fot.

Kontrollera att stödlinjerna för Sidhuvud och -fot är aktiverade.
Kontrollera att stödlinjerna för Sidhuvud och -fot är aktiverade.

Du kan även högerklicka till vänster på arbetsytan precis utanför webbläsarfönsterområdet om du föredrar det. Aktivera alternativet Visa sidhuvud och -fot på snabbmenyn som visas.

Arbeta med stödlinjer och linjaler

Linjalen måste vara aktiverad för att det ska gå att omplacera stödlinjerna för sidhuvud och sidfot. Linjalen gör att du kan ställa in stödlinjerna på en exakt placering i bildpunkter. Som standard visas även de vanliga stödlinjerna (som visar hur många spalter du angav när du skapade den nya webbplatsen).

Fem blå horisontella stödlinjer sträcker sig över hela sidans bredd. Med början ovanifrån används de här fem stödlinjerna för att definiera sidans överkant, sidhuvudets nederkant, sidfotens överkant, webbsidans nederkant och webbläsarfönstrets nederkant. När du drar stödlinjerna till de önskade värdena för de här områdena visas ett verktygstips som beskriver varje stödlinje och dess läge. Det kan vara praktiskt att öka sidans förstoringsgrad så att du kan zooma in och placera stödlinjerna mer exakt.

De tre stödlinjerna i mitten definierar det innehåll som ska visas i sidhuvuds- och sidfotsområdena. I den återstående ytan i mitten lägger du till sidans unika innehåll. Den här ytan expanderar så att den blir tillräckligt hög för de element som du placerat på sidan.

Du kan även markera rektanglarna och elementen på sidan. Det är praktiskt att använda begränsningsrutorna för de markerade elementen som stöd för justering av stödlinjerna när du anger sidhuvuds- och sidfotsområdena.

Obs!

Nederkanten av webbläsarfönstret anger den lägsta delen av visningsytan när en besökare öppnar webbplatsen i en webbläsare. Beroende på din design kan du ange en bakgrundsfärg eller bakgrundsbild för själva webbläsaren och placera stödlinjen för sidans nederkant ovanför stödlinjen för webbläsaren, så att den bakgrundsfärgen eller -bilden visas nedanför sidans innehåll.

Definiera sidhuvuds- och sidfotselement

Gör följande för att ange sidhuvuds- och sidfotselement:

  1. Dra de båda stödlinjerna Längst ned på sidan och Längst ned i webbläsaren till samma plats längst ned på sidan, direkt nedanför sidfotsrektangeln, på det sätt som visas i bilden nedan.
Definiera sidhuvuds- och sidfotselement i Adobe Muse
Definiera sidhuvuds- och sidfotselement i Adobe Muse

  1. Markera den rektangel i sidfoten som innehåller den passade bakgrundsbilden. Dra stödlinjen Sidfot tills den är justerad efter sidfotsrektangelns överkant.
  2. Låt stödlinjen Längst upp på sidan ligga kvar längst upp (läget Y: 0 px). Dra ned stödlinjen Sidfot till önskad nivå.

Sidhuvudets innehåll visas i området mellan sidans överkant och stödlinjen Sidhuvud.

Dra stödlinjen för sidhuvudet och ange sidhuvudsområdet
Dra stödlinjen för sidhuvudet och ange sidhuvudsområdet

När som helst i designprocessen kan du återgå till A-mallsidan om du behöver justera om stödlinjerna så de passar för innehållet i sidhuvudet och sidfoten.

Klicka på länken Planera eller klicka på fliken katiesCafe för att återgå till vyn Planera.

Observera att alla miniatyrbilder av sidor på webbplatsen nu innehåller de designelement som du lade till på den länkade A-mallsidan.

Du anger sidhuvud och sidfot för alla sidor som är länkade till A-mallsidan
A-malldesignen visas på miniatyrbilderna för alla de länkade sidorna i vyn Planera.

När du skapar en webbplats uppdateras de länkade sidorna automatiskt så snart du gör en ändring på mallsidan. Mallsidorna gör att det blir enklare att uppdatera och underhålla webbplatser, eftersom du kan ändra hela webbplatsens utseende genom att uppdatera en enda mallsida.

Montera en bild för att fylla sidhuvudets innehåll

Eftersom webbplatslogotypen ska visas på varje sida på webbplatsen är det perfekt att placera den i sidhuvudet på mallsidan.

  1. Välj Arkiv > Montera. Du kan också använda kortkommandot Ctrl+D (Windows) eller Kommando+D (OS X) till att placera ut en bild.

  2. I dialogrutan Importera navigerar du till och väljer filen Logo.png i mappen Kevins_Koffee_Kart. Klicka på Välj.

  3. Använd markeringsverktyget för att dra logotypen uppåt mot överkanten av sidhuvud som du angav tidigare.

Därefter ska du placera en annan bild som ska tjäna som bakgrundsbild för menyradswidgeten som du lägger till i nästa avsnitt.

  1. Välj Arkiv > Montera, eller använd kortkommandot för ditt operativsystem: Ctrl+D (Windows) eller Kommando+D (OS X).

  2. Gå till mappen Kevins_Koffee_Kart och välj filen top-nav.png.

  3. Klicka en gång på den övre delen av sidan, i det område du tidigare angav som sidhuvud. Se till att du placerar bilden ovanför sidhuvudsmarkören så att den visas på samma plats, ovanför huvudinnehållet, på varje sida.

  4. Använd markeringsverktyget och dra den bruna bandgrafiken som du just placerade så att de röda cykelhjulen i logotypen precis rör ovansidan av det bruna bandet. Det ser nu ut som att cykeln kör på det bruna bandet.

  5. Markera Arkiv > Placera. Bläddra för att markera filen thedrip.png. Klicka en gång nära den nedre högra sidan av den bruna bandgrafiken för att placera bilden med dess ursprungliga storlek.

  6. Använd markeringsverktyget till att flytta droppbilden så att den passar in med det bruna bandet så att det verkar som om kaffe droppar från den högra sidan.

    Sidhuvudinnehållet som det visas när du har lagt till logotypen och bakgrunden för webbplatsnavigeringen.
    Sidhuvudinnehållet så som det visas sedan du lagt till logotypen och bakgrunden för webbplatsnavigeringen.

    Du kan kontrollera på livewebbplatsen om du vill se rätt placering av logotypen och den övre navigeringen.

    I nästa avsnitt får du lära dig att lägga till widgetar, och du får dessutom en kort genomgång av hur du arbetar med widgetbehållare.

Använda Sidfot som alltid visas

Med alternativet Sidfot som alltid visas kan du fästa ett sidfotselement på en webbsida. Sidfot som alltid visas är särskilt utformad för besökare med större datorbildskärmar. Om du aktiverar Sidfot som alltid visas så är sidfoten kvar på den plats du vill, även om webbläsarfönstret är betydligt större än webbsidans design.

Alternativet Sidfot som alltid visas finns i dialogrutan Ny webbplats (Arkiv > Ny webbplats) när du skapar en webbsida i Muse. Du kan även hitta alternativet Sidfot som alltid visas genom Sidegenskaper (Sida > Sidegenskaper) och dialogrutan Webbplatsegenskaper (Arkiv > Webbplatsegenskaper)

Alternativet Sidfot som alltid visas är aktiverat som standard. Allmänt sett är det bäst att använda funktionen Sidfot som alltid visas när du designar webbplatser. Men om du upptäcker att längden på sidan som visas är mycket längre än önskat (eftersom webbplatsen har mindre sidinnehåll och sidorna är ganska korta) så kan du alltid avaktivera det genom att avmarkera kryssrutan i dialogrutan Sidegenskaper.

Om du vill avaktivera det för hela webbplatsen kan du göra det genom att välja alternativet i dialogrutan Webbplatsegenskaper.

Adobes logotyp

Logga in på ditt konto