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.

1. Visa webbplatskartan i vyn Planera och håll pekaren över miniatyrbilden av A-mallsidan, så att plustecken visas på bägge sidor om den. Klicka på plustecknet till höger om A-mallsidan för att skapa en helt ny mallsida. Den nya mallsidan heter som standard B-mallsida.
2. Dubbelklicka på textfältet B-mallsida nedanför miniatyrbilden för att redigera det. Skriv ett mer beskrivande namn på den nya mallsidan som du just skapat: Huvudsida.
3. Högerklicka på miniatyrbilden för mallsidan Huvudsida och välj Mallar > A-mallsida på den snabbmeny som visas.

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.

4. Klicka och dra mallsidan Huvudsida till miniatyrbilden av sidan mat i det övre vänstra hörnet. Observera att när du drar och släpper miniatyrbilden av mallsidan Huvudsida till miniatyrbilden av sidan mat, så ändras den blå texten nedanför miniatyrbilden av sidan mat från [A-mallsida] till [Huvudsida].

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:

5. Högerklicka på miniatyrbilden för evenemangssidan och välj Mallar > Huvudsida på den snabbmeny som visas.

6. Använd din favoritmetod bland de som beskrivs i steg 4 och 5 för att ange Huvudsida som mallsida för de tre återstående sidorna hem, om och besök oss.

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.

Lägga till sidhuvudinnehållet på huvudmallsidan

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.

1. I vyn Planera dubbelklickar du på huvudmallsidans miniatyr för att öppna sidan och börja redigera den i designvyn (om den inte redan är öppen).
2. Använd rektangelverktyget för att rita en rektangel som börjar längst upp till vänster i det synliga webbläsarområdet och sträcker sig över hela bredden till det övre högra hörnet. Använd markeringsverktyget och dra handtagen längst upp på den vänstra sidan och den högra sidan av rektangeln tills den röda ramen visas, vilket anger att rektangeln har bredden 100 %, på samma sätt som du skapade sidfoten.

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.

3. Ställ in streckbredden på 0 och använd menyn Fyllning till att ställa in fyllningsfärgen på Ingen. Klicka på mappen till höger om bildsektionen och bläddra till bilden med namnet tile-header.png. Ange menyn Passning till Sida vid sida.

Ä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.

4. Välj Arkiv > Montera eller använd kortkommandot: Kommando+D (Mac) eller Ctrl+D (Windows) för att öppna dialogrutan Importera.
5. Bläddra fram och välj filen bg-ribbon.png som finns i mappen med exempelfilerna. Klicka på Öppna för att välja bilden och stänga dialogrutan Importera.
6. Klicka en gång mitt i sidhuvudsrektangeln nära sidans topp. Det monterar en förekomst av filen bg-ribbon.png med de ursprungliga måtten.
7. Använd markeringsverktyget till att passa in den orangefärgade bandbilden så att den är centrerad vertikalt nästan längst upp i sidhuvudet och så att den sträcker sig över hela sidan.

Den orangefärgade bandgrafiken utgör bakgrunden av den översta menyn som du kommer att lägga till i nästa avsnitt.

Kopiera en mallsida

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:

1. i vyn Planera högerklickar du på huvudmallsidans miniatyrbild.
2. På den snabbmeny som visas väljer du Duplicera sida.

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.

3. Dubbelklicka på namnfältet under mallsidan du just skapade och ändra namn på den till "Foreground".

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.

4. Välj Arkiv > Spara webbplatsen.

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.

Ange att element på mallsidor ska visas överst

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:

1. I vyn Planera dubbelklickar du på miniatyren för förgrundens huvudmall för att öppna sidan och börja redigera den i designvyn (om den inte redan är öppen).
2. Använd markeringsverktyget för att klicka och dra för att markera hela sidhuvudsinnehållet, inklusive rektangeln med den staplade bakgrunden, den monterade orangefärgade bandgrafiken, menywidgeten och den animerade GIF-logotypen i mitten.
3. Se till att hela sidrubriken är markerad, högerklicka och välj Flytta till > Mallförgrund. Till skillnad mot den vanliga blåa ramen för markerade objekt kan du nu se hur objekt som ställts in på att visas i förgrunden har en röd ram när de markeras.

Detta säkerställer att sidhuvudet visas på sidelementen på de sidor där förgrundsmallsidan används.

4. Medan hela sidhuvudet är markerat kan du fästa det längst upp på sidan så att sidhuvudet inte följer med när sidan rullas ned. Du får lära dig mer om hur du fäster objekt i del 7, men nu fäster du sidrubriken genom att klicka på den övre mittre fästpositionen i kontrollpanelen.

5. Klicka på och dra förgrundsmallsidan till matsidan för att använda den. Upprepa det här steget ytterligare två gånger, för att använda förgrundsmallsidan på eventsidan och om-sidan.

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.

Använd flera mallsidor och infoga animering

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.

Redigera innehåll på mallsida

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:

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.

Kopiera och ta bort mallsidor

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.

Titta närmare på webbplatslayouter

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:

• Konfigurera platsegenskaper för att definiera måtten för alla sidor
• Använd stödlinjer för att definiera sidhuvuds- och sidfotsområdena på mallsidan
• Fäst objekt till webbläsarfönstret för att placera dem utanför sidlayouten
• Ställ in bakgrundsbildsfyllningar för bläddring eller fasta positioner för att skapa intressanta effekter
• Sträck ut rektanglar så att de visas med 100 % bredd och omfattar hela webbläsarens bredd
• Lägg till dragspels- och bildspelswidgetar för att visa interaktiva sidobjekt
• Anpassa och formatera menywidgetar för platsnavigering
• Skapa ankarpunktslänkar för att hoppa vertikalt eller horisontellt till specifika sidavsnitt
• Klistra in kod från tredjepartswebbplatser (inbäddad HTML-kod) för att lägga till funktioner på sidor

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.

Exempel 1: Happy Valley Adventure

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 innehåller en sidfotsbild med horisontellt lagda bakgrundsbilder inställda för en bredd på 100 % och fastlagda mot webbläsarfönstrets nederkant. En andra sidfotbild (bergstoppen) är centrerad och även den är fäst mot webbläsarens nederkant. Den är inställd med alternativet Ordna > Placera överst vilket medför att den visas ovanför den andra sidfotsbilden. Den här strategin lämpar sig för alla bildskärmsstorlekar.
• Navigeringslänkarna till vänster hoppar till ankartaggarna som lagts till på den långa vertikalt orienterade sidan. När besökare klickar på länkarna rullar sidan för att visa motsvarande innehåll. Designen ger ett balanserat och enhetligt intryck när de nya avsnitten visas.
• Kontaktavsnittet på startsidan innehåller inbäddad HTML-kod för att visa element för kontaktformulär, som underlättar kommunikationen med besökare och planeringen för kommande äventyr.
  

Exempel 2: Kevin's Koffee Kart

Kevin's Koffee Kart

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:

• Webbplatsen innehåller två liknande mallsidor: mallsidan utan Flash-mediefiler används på de flesta av webbplatsens sidor och en andra mallsida med Flash-filmen som bara används på startsidan. Båda mallsidorna har en sidfot som är 100 % bredd med genomskinliga kanter och samma menywidget används för konsekvensens skull. När du skapat den första mallsidan, kopierar du elementen och klistrar sedan in dem på den andra mallsidan för att säkerställa att alla element ställs in korrekt.
• Sidorna är ordnade i planvyn för att skapa avsnitt för den översta nivån och undernivån på webbplatsen. Detta visas med objekten i listrutan i menywidgeten.
• Kartan i bakgrundsbilden, som används som webbläsarutfyllnad, är inställd att visas i originalstorlek och inte sida vid sida. Den är centrerad och inställd så att den inte rullar under sidinnehållet.
• Sidbakgrundsfyllningen är vit med en viss genomskinlighet för att få bakgrundskartan att synas igenom.
• Startsidan innehåller två halvgenomskinliga molnbilder fästa till webbläsaren. Rulla sidan vertikalt för att visa att de fastlagda elementen inte flyttats och att de dessutom förblir i samma position när du ändrar storlek på webbläsarfönstret.
• På startsidan används inbäddad HTML-kod för att visa innehållet i Twitter-matningen.
• Sidan "The Koffee" innehåller en dragspelswidget som expanderar och komprimera panelerna när du klickar på dem för att visa mer innehåll i ett komprimerat område på sidan.
• Sidan "Origins" innehåller en bildspelswidget för att visa ett interaktivt fotogalleri. På sidan "Preparation" används ankartaggsnavigering för att hoppa till varje avsnitt på sidan och "Kart Map" innehåller inbäddad HTML-kod för att visa en karta direkt från Google Latitude utifrån den aktuella platsen för mobiltelefonen som används för det aktuella kontot.
  

Exempel 3: More than Square

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.