Dubbelklicka på miniatyrbilden för mallsidan i vyn Planera och redigera därefter materialet på mallsidan i vyn Design.
Med Muse kan du skapa mallsidor som går att använda på andra mallsidor. Hierarkiska mallsidor används ungefär på samma sätt som mallsidor kan användas på sidor i vyn Planera. I tidigare versioner av Muse kunde du skapa flera mallsidor, men det gick bara att använda en mallsida med en uppsättning sidelement på en webbsida i taget.
Förut kunde man när man ville skapa en webbplats med två olika avsnitt som liknar varandra – men har unika utseenden – skapa en dubblett av en mallsida, ändra den något, och använd den på önskade sidor. Till följd av det innehöll båda mallsidorna ofta en del gemensamma element, och man var tvungen att redigera innehållet i båda mallsidor varje gång webbplatsen skulle uppdateras för att alla element skulle vara synkroniserade.
Med Muse 4.0 eller senare kan du skapa en A-mallsida som innehåller de gemensamma element som ska visas på flera mallsidor (t.ex. bakgrunden och sidfoten som beskrevs i de föregående avsnitten), och sedan skapa ytterligare mallsidor som innehåller alla element från A-mallsidan, samt eventuella element som är unika för det första avsnittet Om du skapade en tredje mallsida skulle den kunna använda elementen från A-mallsidan samt eventuella element som är unika för det andra avsnittet.
Fördelen med att använda hierarkiska mallsidor är att de tillåter att man begränsar ett element till en enda förekomst. När du designar om en webbplats behöver du bara redigera varje enskilt element en gång. Alla förekomster av dessa element uppdateras då automatiskt på webbplatsen.
Du kan hantera och använda mallsidor i vyn Planera. Precis som du kan klicka och dra en miniatyrbild av en mallsida till en miniatyrbild av en sida kan du skapa flera mallsidor och sedan klicka och dra en mallsida till en annan mallsida. Alternativt kan du högerklicka på valfri miniatyrbild av en mallsida eller sida i vyn Planera och ställa in mallen via alternativet Mallar på snabbmenyn som visas.
Observera att när du håller pekaren över namnet på en sida eller en mallsida, så visas hierarkin för de använda mallarna för sidan eller mallsidan i ett verktygstips.
Nu har du skapat A-mallsidan med webbläsarfyllningen med den passade bakgrundsbilden och sidfotsinnehållet. I nästa avsnitt får du skapa en ny mallsida som ärver innehållet från A-mallsidan, och sedan lägga till sidhuvudet så att du kan använda den nya mallsidan på webbplatsens sidor. Gör följande.
Observera att när du har använt A-mallsidan på mallsidan Huvudsida, uppdateras miniatyrbilden av mallsidan Huvudsida så att den får samma utseende. Den blå etiketten nedanför miniatyrbilden av mallsidan Huvudsida visar [A-mallsida] eftersom du använde den på mallsidan Huvudsida i steg 3.
Det är en viktig skillnad att mallsidan Huvudsida faktiskt inte innehåller elementen från A-mallsidan. Du har inte bara skapat en dubblett av A-mallsidan. Istället ställde du in mallsidan Huvudsida så att den länkar till A-mallsidan, vilket innebär att eventuellt nytt innehåll som du lägger till på A-mallsidan automatiskt visas även på mallsidan Huvudsida.
Som vi nämnde ovan är fördelen med hierarkiska mallar att sidfoten, menyn och bakgrunden fortfarande bara finns på A-mallsidan. Det innebär att du senare, om en kund begär att få en annan passad bakgrund, kan uppdatera A-mallsidan så att mallsidan Huvudsida uppdateras automatiskt.
Senare i den här självstudiekursen kommer du att skapa två olika mallar för utseendena på de två olika avsnitten inom webbplatsen. Så länge kan du uppdatera sidorna i vyn Planera så att de alla använder den nya mallsidan Huvudsida istället för mallsidan A-mallsida.
Det här är det vanligaste sättet att använda mallar på sidor i vyn Planera, men du kan även försöka med använda dem med hjälp av snabbmenyn:
När du har gjort den här ändringen ska det stå [Huvudsida] i alla de blå textetiketterna nedanför miniatyrbilderna av sidorna. Om du håller pekaren över en av de blå etiketterna visas ett verktygstips med hierarkin för de använda mallsidorna.
I det här fallet är hierarkin endast en nivå djup. Med andra ord ärver mallsidan Huvudsida sidinnehåll från A-mallsidan. Tänk dock på att du kan skapa en hel kedja av mallsidor om du vill. Du skulle till exempel kunna skapa en mallsida med namnet Sidhuvud, som bara innehöll sidhuvudinnehåll, och sedan skapa en annan mallsida med namnet Sidfot, som ärver innehållet från mallsidan Sidhuvud, och sedan ännu en mallsida med namnet Huvudsida, som ärver allt på mallsidan Sidfot (där även sidhuvudet ingår). Beroende på webbplatsens design och din kunskap om att vissa element kan behöva ändras, kan du skapa arvsrelationer som är flera nivåer djupa. Att dela in designen på det här sättet är lite som att skapa symboler, eftersom man kan isolera specifika delar av designen och sedan enkelt hitta och redigera de delarna vid behov.
Gå vidare till nästa självstudiekurs, Skapa din första webbplats med Muse del 2, där du får lära dig hur du kan arbeta med widgetar (förhandsbyggda interaktiva webbplatsfunktioner som du kan dra och släppa på sidor). Med widgetar kan du snabbt lägga till avancerade funktioner i sidor utan att behöva skriva någon kod. Du får se hur man redigerar beteendet och utseendet för widgetar, för att anpassa hur de ska visas i webbplatsens design.
Nu när du har slutfört sidfoten genom att lägga till en menywidget på huvudmallsidan kommer du att lägga till navigering på den översta nivån. Följ de här stegen för att lägga till innehåll i sidhuvudområdet.
När du har dragit i handtagen ska rektangelns storlek vara cirka 1160 pixlar bred och 253 pixlar hög. Det horisontella X-värdet är -100, vilket innebär att det övre vänstra hörnet av rektangeln är placerad 100 pixlar från det övre vänstra hörnet av sidan. Y-värdet är 0 (vilket innebär att det övre vänstra hörnet av rektangeln matchar det övre vänstra hörnet på sidan vertikalt). Om du vill ange dessa värden exakt kan du granska fälten på omvandlingspanelen eller på kontrollpanelen medan rektangeln är markerad.
Även om sidhuvudet består av en enda rektangel skapar den horisontellt placerade bakgrundsbilden som fyller den intrycket av att det finns en grå rektangel över en svart rektangel.
Den orangefärgade bandgrafiken utgör bakgrunden av den översta menyn som du kommer att lägga till i nästa avsnitt.
Sidhuvudsinnehållet på huvudmallsidan är färdigt. Även om du bara skulle kunna använda huvudmallsidan för varje sida i webbplatsen har denna webbplatsdesign två sektioner. Huvudmallsidans design används slutligen för startsidan och besökssidor. En annan, något annorlunda mallsida, används för mat-, events- och om-sidorna.
Följ dessa steg för att kopiera huvudmallsidan:
En ny mallsida visas till höger om huvudmallsidan, med standardnamnet: Main copy. Eftersom du kopierade huvudmallsidan är den nya mallen redan baserad på A-mallsidan.
I nästa avsnitt får du lära dig hur du ställer in elementens arrangemang på en mallsida, så att objekt istället för att alltid visas under, kan visas över sidelement. Nu är det en bra idé att spara ditt arbete.
En av fördelarna med att skapa en kopierad mallsida är att du kan ställa in att en del av innehållet ska visas över annat sidinnehåll, nästan som om du valt Ordna > Placera överst. Detta "förgrundsbeteende" är önskvärt för mat- och eventsidorna.
Möjligheten att ange staplingsordningen för mallsideselement är en ny funktion i Muse 4.0. Tidigare var du tvungen att placera sidhuvuds- eller sidfotselement på varje sida, istället för på en mallsida, om du ville använda lager för gemensamma platselement över annat innehåll i sidlayouten.
I Muses designvygränssnitt kan du markera ett sidelement och välja Objekt > Placera överst, Lägg underst eller Skicka bakåt för att visa ett objekt över eller under ett annat objekt på sidan. (Du kan också högerklicka på ett element eller en grupp och välja Ordna > Placera överst, Lägg underst eller Skicka bakåt för att ange staplingsordningen).
När du utformade webbplatser med tidigare versioner av Muse var standardbeteendet att element på en mallsida alltid visas bakom alla element på en sida när sidan renderas. Detta bakgrundslagerbeteende var ibland problematiskt (beroende på webbplatsens design) eftersom den enda lösningen på problemet var att kopiera och klistra in element som du normalt skulle placera på en mallsida på alla webbplatsens sidor där du ville att de skulle visas överst.
I Muse kan du styra arrangemanget av element på mallsidor. Nu kan du istället för att alltid visa allt på en mallsida bakom sidelement markera element på mallsidor och ange att de ska visas som förgrundselement. Objekt på en mallsida som ställts in som förgrundselement visas över alla sidelement.
Detta nya alternativ är tillgängligt via Objekt > Flytta till > Mallförgrund. Dessutom kan du högerklicka på ett element i designvyn medan du redigerar en mallsida och välja Flytta till > Mallförgrund på snabbmenyn som visas.
I det här exempelprojektet kräver designen att innehållet på hem- och besökssidorna använder standardordningen för stapling (sidelement visas längst upp på sidhuvudet på huvudmallsidan) men mat-, events- och om-sidor gör det inte.
För mat- och besökssidor uppdaterar du förgrundens mallsida så att sidhuvudets innehåll visas i förgrunden, över sidinnehåller när sidan rullar. Gör följande:
Detta säkerställer att sidhuvudet visas på sidelementen på de sidor där förgrundsmallsidan används.
När du har gjort den här ändringen visar den blåa etikettexten orden [Förgrund], vilket anger att mat-, events- och om-sidorna nu använder förgrundsmallsidan. Om du svävar över den blåa [Förgrund]-etiketten, visas ett verktygstips att förgrundsmallsidan baseras på A-mallsidan.
När du utformar dina egna webbplatsprojekt kan du experimentera med den nya funktionen Flytta till förgrund för att ange att element på mallsidor ska visas överst. Senare i denna självstudiekursserie kommer du att slutföra designen för mat- och eventsidorna och se hur förgrundsinställningen säkerställer att sidhuvudet visar över annat innehåll på sidan.
I nästa avsnitt av denna självstudiekurs, Skapa din första webbplats med Muse – del 4, får du lära dig hur du arbetar med inbäddad HTML-kod för att visa kod kopierad från andra webbplatser. Du får också lära dig hur du lägger till kompositionswidgeten Ljuslådevisning för att bygga ut startsidan.
I detta avsnitt får du lära dig mer om att arbeta med mallsidor och hur du kan visa gemensamt platsinnehåll på flera mallsidor för att skapa ett konsekvent utseende medan du arbetar med olika avsnitt på webbplatsen. Du kommer även att lära dig strategier för hur element ska flyttas från mallsidor, eftersom det i viss webbplatsutformning kan vara praktiskt att skapa flera mallsidor och bara infoga specifik grafik på varje (till exempel en webbplats med fyra färgkodade områden). Du kommer även att lära dig flytta element, som vanligtvis finns på en mallsida, till en viss individuell sida för att skapa designeffekter såsom att placera objekt i lager ovanpå varandra.
Objekt som placeras på en mallsida kommer att visas i lager under innehållet som du monterar på en enskild sida. Till exempel kommer objekt som du monterar i sidhuvud eller sidfoten på startsidan att visas som lager ovanpå bakgrunder monterade i mallsidans huvud och sidfot. På grund av detta kan det förekomma situationer när du behöver flytta element från en mallsida och montera dem på individuella sidor så att de visas ovanför andra element på sidan.
Innehåll som läggs till på mallsidor måste redigeras senare genom att du öppnar mallsidan. Om du öppnar en sida som är associerad med en mallsida och försöker redigera sidhuvudet, sidfoten eller annat på mallsidan tycks innehållet vara låst. Du kan använda två olika strategier när du vill ändra det som finns på en mallsida:
Dubbelklicka på miniatyrbilden för mallsidan i vyn Planera och redigera därefter materialet på mallsidan i vyn Design.
Dubbelklicka i vyn Planera på miniatyrbilden för mallsidan för att öppna den i vyn Design. Markera de element som du vill redigera (men som måste ligga ovanför andra element när de monteras på en sida på webbplatsen) och välj Redigera > Klipp ut, eller använd kortkommandona Cmd-X eller Ctrl-X (Windows).
Gå tillbaka till vyn Planera och dubbelklicka på sidan som ska rymma innehållet (som tidigare fanns på mallsidan). Välj Redigera > Klistra in på plats. Detta garanterar att element som du klipper ut från mallsidan monteras på samma plats på en normal sida. Om du vill kan du öppna flera sidor och välja Redigera > Klistra in på plats för att fördela innehåll som fanns på mallsidan till många olika sidor på webbplatsen.
Du kan vid behov även duplicera en befintlig mallsida. Du kan konfigurera webbplatsen så att en mallsida används för de flesta sidorna medan en speciell sida använder en dubblett, en likartad version som mallsidan (med specifika element som kopierats från den duplicerade mallsidan till specialsidan för webbplatsen). Om du vill veta mer om att duplicera mallsidor kan du läsa nästa delavsnitt.
När objektet finns på de enskilda sidorna, och inte på mallsidan, kan du redigera objektet sida för sida och kontrollera att objektet visas överst.
I det här exempelprojektet visas på webbplatsen för tillfället logotypen för Kevin's Koffee Kart (röd cykel med banderoll) direkt ovanför navigeringslisten i sidhuvudet. Innehållet i sidhuvudet och sidfoten visas automatiskt på varje sida eftersom startsidan (och alla andra sidor som du skapar) som standard är länkad till A-mallssidan som rymmer detta innehåll. I många fall kan du välja att skapa webbplatser där samma mallsida används genomgående för att skapa en enhetlig webbplats.
Den här webbplatsen har emellertid en unikt animerad logotyp som bara visas på startsidan. Om du tittar på liveversionen av Kevin's Koffee Kart märker du att en röd cykellogotyp animeras en gång på startsidan när den öppnas första gången, som om cykeln kommer in från vänster. När du klickar på de andra sidorna ser du hur animeringen bara förekommer på startsidan. Alla andra logotyper på sidorna är statiska.
I följande delavsnitt får du lära dig att skapa en mallsidesdubblett och att tilldela sidor så att de använder en specifik mallsida i vyn Planera.
När du vill komma till vyn Planera klickar du på Planera-länken. Leta rätt på miniatyrbilden till A-mallen. Du hittar den längst ned i gränssnittet för vyn Planera.
Håll pekaren över miniatyren till A-mallen och notera att du när du för pekaren över den ser samma plusikon (+) som du ser när du lägger till nya sidor i platskartan. Klicka på plusikonen (+) till höger om miniatyrbilden till A-mallen. Du kan använda den här tekniken varje gång du vill skapa en helt ny mallsida. Observera att miniatyrbilden är tom, vilket innebär att den inte innehåller det material du lade till på A-mallsidan. Den nya mallsidan heter B-mall när den skapas, men du kan klicka i fältet ovanför miniatyrbilden och döpa om den.
I det här fallet skapar du en kopia av den befintliga A-mallen, istället för en helt ny mallsida.
Klicka på X-ikonen i det övre högra hörnet på B-mallsidan för att radera den. (Om du någonsin av misstag raderar en befintlig mallsida på det här sättet återställer du den genom att välja Redigera > Ångra Ta bort mallsida).
Högerklicka på miniatyrbilden till A-mallsidan och välj Duplicera sida från sammanhangsmenyn som visas. En ny miniatyrbild med den kopierade mallsidan visas. Det är kopian av A-mallen.
Klicka på fältet under kopieringsminiatyrbilden för A-mallen och ändra namn på den kopierade mallsidan: MasterFlash. Du kan använda den här sidan för att lägga till omfattande medieinnehåll som endast animeras på startsidan, medan alla andra sidor fortsätter att peka mot A-mallssidan, som visar en statisk version av logotypen i sidhuvudet.
Högerklicka på miniatyrbilden för startsidan. Välj Mallar > MasterFlash på menyn som öppnas. Med den här åtgärden associeras mallsidan MasterFlash till startsidan.
Du kan också dra MasterFlash-miniatyrbilden ovanpå miniatyrbilden för startsidan om du vill använda den.
När detta är gjort visas mallsidans namn, MasterFlash, inom parenteser under miniatyrbilden för startsidan i vyn Planera.
Om du klickar på Förhandsvisa kommer du inte att märka någon skillnad på startsidan. Eftersom MasterFlash är en kopia av A-mallsfilen öppnas startsidan som den gjorde tidigare och den statiska logotypen visas. I nästa underavsnitt måste du emellertid redigera MasterFlash-innehållet för att lägga till animeringen som bara ska förekomma på startsidan.
Att använda dubbletter av mallsidor (nästan identiska mallsidor, men med små skillnader) är ett utmärkt sätt att framhäva ett särskilt avsnitt för en webbplats samt att göra startsidan unik så som det här projektet visar.
I den här självstudien får du lära dig att använda mallsidor. Vi ska undersöka och dekonstruera tre webbplatslayouter och granska hur du kan uppnå intressanta effekter och skapa webbplatser med enhetligt utseende med hjälp av gemensamma element på en mallsida.
Men först – vad är en mallsida? En mallsida använder du för att lägga till gemensamma element, som exempelvis sidhuvuden, sidfötter, logotyper och navigering, på flera sidor på webbplatsen. Du kan använda en mallsida för webbplatsen eller ställa in flera mallsidor så att du snabbt och konsekvent kan använda unika stilar för olika avsnitt av webbplatsen.
Som standard skapas i Muse en tom startsida och en tom mallsida när du skapar en ny webbplats. Dessa sidor är startpunkten för alla webbplatser. Du kan planera din platskarta med hjälp av tomma sidor och sedan använda mallsidor på dem. Du kan också starta med mallsidan, tillämpa den på en sida (startsidan), och sedan skapa nya sidor baserade på denna design.
Ett bra sätt att lära sig nya strategier för webbplatsdesign är att förhandsgranska olika mallsideslayouter. I den här artikeln ska vi undersöka tre olika webbplatslayouter som skapats i Muse och se hur de ursprungligen är konstruerade.
Om du vill följa med och öppna resurserna för var och en av dessa resurser ska du hämta exempelfilerna och packa upp ZIP-filen, och sedan dubbelklicka på varje .muse-fil för att öppna den i Muse.
När du kontrollerar de olika exempelwebbplatserna ska du vara observant på några funktioner som används för att skapa en webbplatsdesign som är enkel att navigera i och som hjälper besökaren att orientera sig när han/hon undersöker innehållet på webbplatsen:
När du besöker de olika exempelwebbplatserna ska du försöka bläddra och göra storleksändringar i webbläsarfönstret för att se hur de enskilda exemplen fungerar i verkligheten. Öppna sedan varje .muse-fil i Muse för att se hur mallsidor används för att standardisera platslayouter och skapa en mer enhetlig online-upplevelse.
I det första exemplet är sidfotsgrafiken fäst längst ned i webbläsarfönstret. Dessutom visas sidfotsbakgrunden med 100 % bredd så att den sträcker sig horisontellt längs nederkanten på sidan. Det längre sidinnehåller rullar bakom sidfoten i förgrunden för att skapa en tonande effekt för himlen. När du klickar på ankarlänkarna till vänster flyttar sig sidan vertikalt till motsvarande avsnitt. Halvgenomskinliga grafikelement och en strategisk staplingsordning hjälper till att ge intrycket av att du flyger med en ballong.
När du tittar på .muse-filen för den här webbplatsen ska du observera följande:
På mallsidan ger en serie övertonade fyllda rektanglar bakgrunden för längre sidinnehåll.
Startsidan för Kevin's Koffee Kart innehåller en Flash-animering i sidhuvudet och statisk molngrafik. När du använder rullningslisten för att navigera på sidan ska du lägga märke till att bakgrundsbilden är låst och att den inte rullar, men att sidinnehållet förflyttas ovanför bilden. Ett bildspel spelas upp automatiskt och rullar igenom bilder under en inbäddad HTML Twitter-matning.
Menyraden i sidhuvudet har skapats med en horisontell menywidget för att låsa fasta webbplatsens navigeringsknappar som uppdateras automatiskt när du lägger till nya sidor. I det här exemplet är menywidgeten konfigurerad för att visa sidor både på den översta nivån och undernivån.
Testa menyn och se hur varje sida läses in när du klickar på knapparna. Sidhuvudet och sidfoten visas på alla sidor, men sidhöjden varierar beroende på innehållet. Den bruna sidfoten består av två rektanglar inställda med bredden 100 % så att de sträcker sig över webbläsarfönstrets bredd vilket ger sidan ett enhetigt utseende.
Följande designkonventioner har använts för att skapa webbplatsen Kevin's Koffee Kart:
När du tittar på det sista exemplet ska du lägga märke till att byggnaderna ligger fasta i det övre högra och i det nedre vänstra hörnet för att rama in innehållet. Byggnaden i det övre högra hörnet är placerad framför för att överlappa sidinnehållet, medan byggnaden nederst till vänster visas under sidan.
Sidinnehållet är centrerat, halvgenomskinligt och med rundade hörn som motvikt mot de arkitektoniska delarna. Sidinnehållet rullar vertikalt och höjden ändras när du klickar på sidorna. Länkar till sociala nätverk (Twitter, Facebook och YouTube) ligger till vänster på sidan för att underlätta korslänkning och för att ge webbplatsen en enhetlig asymmetrisk design.
Startsidan innehåller ett fotogalleri med navigeringsknapparna Nästa och Föregående som är konfigurerade att spela igenom bildrutorna långsamt även om besökaren inte väljer att klicka på knapparna. Sidan "How to Get Here" innehåller en interaktiv karta som skapats med inbäddad HTML-kod kopierad från Google Maps.
När du tittar på källfilen .muse för det här exemplet ska du observera följande:
I det här exemplet finns nästan alla gemensamma sidelement på mallsidan. Den här strategin gör det enklare att uppdatera webbplatsen och ändra enskilt innehåll på sidan.
Mallsidan innehåller en statisk bakgrundsgrafik för bilden i sidfoten. Den är fastsatt till den nedre vänstra sidan av webbläsaren. Mallsidan innehåller även det rundade hörnet, den halvgenomskinliga siddesignen med webbplatsnavigeringen.
Samtliga sidor på webbplatsen innehåller en statisk bild i det övre högra hörnet. Bilden visas framför sidinnehållet för att skapa en illusion av perspektiv som förstärks av byggnadens vinkel.
Muse är ett intuitivt designverktyg som underlättar för dig att skapa den webbdesign som du önskar. Kreativ placering av element på mallsidorna och det unika innehållet visat på varje sida gör att du kan skapa tilltalande layouter. Endast din fantasi sätter gränserna när du skapar innovativa webbplatser för dina kunder.
Mer tips för att arbeta med Muse finns i Hjälp för Adobe Muse eller Adobe Muse Events-sidan för inspelade webbinarier och i realtid.
Logga in på ditt konto