Merk:

Adobe Muse legger ikke lenger til nye funksjoner, og kundestøtte opphører 26. mars 2020. Hvis du vil ha detaljert informasjon og hjelp, kan du se siden for tjenesteopphør for Adobe Muse.

Jobbe med hierarkiske malsider

I Muse kan du opprette malsider som brukes på andre malsider. Hierarkiske malsider fungerer på lignende måte som malsider som kan brukes på en side i Planlegg-visningen. I tidligere versjoner av Muse kunne du opprette flere malsider, men du kunne bare bruke én malside med et sett med sideelementer på en webside av gangen.

Tidligere kunne du, hvis du ønsket å lage et område med to ulike deler som lignet på hverandre, men hadde et unikt utseende, kopiere en malside, endre den litt og bruke den på bestemte sider. Resultatet var at de to malsidene ofte inneholdt noen av de samme elementene – så hver gang du oppdaterte området, var det nødvendig å redigere innholdet på begge malsidene for å holde elementene synkronisert.

Med Muse 4.0 og nyere kan du nå opprette en A-malside som inneholder de delte elementene som vises på flere malsider (for eksempel legge til bakgrunnen og bunnteksten som ble beskrevet i tidligere deler), og deretter opprette flere malsider som arver alle elementene fra A-malsiden og i tillegg inneholder alle elementer som er unike for den første delen. Hvis du opprettet en tredje malside, kunne den bruke elementene på A-malsiden pluss alle elementer unike for den andre delen.

Fordelen med å bruke hierarkiske malsider er at du kan begrense forekomstene av et element til én forekomst. Når du endrer designen på et område, trenger du bare å redigere hvert element én gang, og alle forekomstene av elementet oppdateres automatisk på området.

Malsider administreres og tas i bruk i Planlegg-visning. Akkurat som du kan klikke og dra en malsideminiatyr til en sideminiatyr for å bruke malsiden på en side, kan du opprette flere malsider og deretter klikke og dra en malside til en annen malside. Hvis du foretrekker det, kan du i stedet høyreklikke en mal eller en sideminiatyr i Planlegg-visning og bruke alternativet Maler fra hurtigmenyen som vises, til å angi malen.

Vær oppmerksom på at når du holder markøren over et sidenavn eller malsidenavn, viser et verktøytips hierarkiet av de brukte malene for den siden eller malsiden.

For øyeblikket har du opprettet A-malsiden med webleserfyllet med side ved side-bakgrunnen og bunntekstinnholdet. I den neste delen skal du opprette en ny malside som arver innholdet til A-malsiden, og deretter legge til toppteksten, slik at du kan bruke den på sidene på området. Følg disse trinnene:

  1. Mens områdekartet vises i Planlegg-visning, holder du markøren over miniatyren for A-malsiden for å vise plusstegnknappene på begge sider. Klikk plusstegnet til høyre for A-malsiden for å opprette en helt ny malside. Som standard får den nye malsiden navnet B-mal.
  2. Dobbeltklikk B-mal-tekstfeltet under miniatyren for å redigere det. Skriv inn et mer beskrivende navn for den nye malsiden du nettopp opprettet: Hoved.
  3. Høyreklikk miniatyren for Hoved-malside, og velg Maler > A-mal fra kontekstmenyen som vises.
I denne opplæringen vil du bli kjent med arbeidsområdet i Adobe Muse og se hvordan du bygger et fullt funksjonelt webområde uten å skrive kode i det hele tatt. Du vil også forstå hvordan du skal bygge et områdekart, arbeide deg gjennom malsider, og hvordan du skal forstå webleserfyllalternativene i Muse.
Velg A-malen fra menyen for å bruke den på Hoved-malsiden.

Legg merke til at når du har brukt A-malsidenHoved-malsiden, oppdateres miniatyren for Hoved-malsiden til å vise det samme utseendet. Den blå etiketten under miniatyren for Hoved-malsiden viser [A-mal], siden du brukte den på Hoved-malsiden i trinn 3.

Det er en viktig forskjell at Hoved-malsiden ikke faktisk inneholder A-malelementene – du lagde ikke bare en kopi av A-malen. I stedet koblet du Hoved-malsiden til A-malen, noe som betyr at alt nytt innhold som du legger til i A-malen, automatisk også vil vises på Hoved-malsiden.

Som tidligere nevnt er det fine med hierarkiske maler at bunnteksten, menyen og bakgrunnen fremdeles bare finnes på A-malsiden. Hvis en kunde senere ber om at du bruker et annet side ved side-bakgrunnsbilde, kan du dermed oppdatere A-malsiden, så blir Hoved-malsiden oppdatert automatisk.

Senere i denne opplæringen kommer du til å opprette to forskjellige maler for ulike utseender på de to ulike delene av området. For øyeblikket kan du imidlertid oppdatere alle sidene i Planlegg-visning til å bruke den nye Hoved-malsiden i stedet for bruke A-malsiden.

  1. Klikk og dra Hoved-malsiden til miniatyren for food-siden i øvre venstre hjørne. Legg merke til at når du drar og slipper miniatyren for Hoved-malsiden på miniatyren for food-siden, oppdateres den blå teksten under miniatyren for food-siden fra [A-mal] til [Hoved].

Dette er den vanligste metoden for å bruke malsider på sider i Planlegg-visning, men du kan også prøve å bruke dem ved hjelp av hurtigmenyen:

  1. Høyreklikk miniatyren for arrangementssiden, og velg Maler > Hoved i kontekstmenyen som vises.
I denne opplæringen vil du bli kjent med arbeidsområdet i Adobe Muse og se hvordan du bygger et fullt funksjonelt webområde uten å skrive kode i det hele tatt. Du vil også forstå hvordan du skal bygge et områdekart, arbeide deg gjennom malsider, og hvordan du skal forstå webleserfyllalternativene i Muse.
Bruk hurtigmenyen til å angi Hoved som malside for events-siden.

  1. Bruk favorittmetoden din (beskrevet i trinn 4 og 5) til å angi Hoved som malside for de gjenværende tre sidene: home, about og visit.

Når du har gjort disse endringene, skal alle de blå tekstetikettene under sideminiatyrene nå vise [Hoved]. Hvis du holder markøren over en av de blå etikettene, viser et verktøytips hierarkiet over de brukte malsidene.

I denne opplæringen vil du bli kjent med arbeidsområdet i Adobe Muse og se hvordan du bygger et fullt funksjonelt webområde uten å skrive kode i det hele tatt. Du vil også forstå hvordan du skal bygge et områdekart, arbeide deg gjennom malsider, og hvordan du skal forstå webleserfyllalternativene i Muse.
Det vises et nyttig verktøytips som beskriver hierarkiet når du ruller over etiketten.

I dette eksempelet er hierarkiet bare ett nivå dypt. Med andre ord arver Hoved-malsiden sideinnholdet til A-malsiden. Men vær oppmerksom på at du kan opprette en kjede av malsider hvis det er ønskelig. Du kan for eksempel opprette en malside med navnet Topptekst, som bare har topptekstinnholdet, og deretter opprette en malside med navnet Bunntekst, som arver sideinnholdet fra Topptekst-malsiden, og deretter en annen side med navnet Hoved, som arver alt på Bunntekst-malsiden (det inkluderer også toppteksten). Avhengig av områdets design og din kjennskap til at noen elementer antagelig vil bli endret, kan du definere arvingen flere nivåer dyp. Inndeling av designen på denne måten er litt som å opprette symboler, siden du kan isolere bestemte deler av en design og deretter enkelt finne og redigere disse delene senere ved behov.

Fortsett med den neste opplæringen, Bruke Muse til å bygge ditt første webområde | Del 2, der du vil lære å jobbe med kontrollprogrammer (innebygde, interaktive områdefunksjoner som du kan dra inn på sidene). Med kontrollprogrammer kan du raskt legge til avansert funksjonalitet på sider uten å skrive noen kode. Du vil lære å redigere virkemåten og utseendet til kontrollprogrammer og tilpasse hvordan de vises i webdesignen.

Legge til topptekstinnhold på hovedmalsiden

Nå når du har gjort ferdig bunnteksten ved å legge til et kontrollprogram for meny på hovedmalsiden, skal du legge til den overordnede navigeringen. Følg disse trinnene for å legge til innhold i topptekstområdet.

  1. Dobbeltklikk miniatyren for hovedmalsiden i Planlegg-visning for å åpne siden og begynne å redigere den i Design-visning (hvis den ikke allerede er åpen).
  2. Bruk rektangelverktøyet til å tegne et rektangel som begynner i hjørnet øverst til venstre i det synlige webleserområdet, og som strekker seg over hele bredden til hjørnet øverst til høyre. Bruk markeringsverktøyet til å dra håndtakene øverst og på venstre og høyre side av rektanglet til du ser den røde kantlinjen. Dette angir at rektanglet er satt til 100 % bredde, på samme måte som da du opprettet bunnteksten.
fig_30_building
Tegn et rektangel som strekker seg over hele toppdelen av webleservinduet.

 

Når du har dradd håndtakene, bør størrelsen på rektanglet være omtrent 1160 bildepunkter bredt og 253 bildepunkter høyt. Den horisontale X-verdien er -100, noe som betyr at hjørnet øverst til venstre i rektanglet er plassert 100 bildepunkter mot hjørnet øverst til venstre på siden. Y-verdien er 0 (noe som betyr at hjørnet øverst til venstre i rektanglet samsvarer med hjørnet øverst til venstre på siden vertikalt). Hvis du vil angi disse verdiene nøyaktig, kan du se gjennom feltene i Transformasjon-panelet eller i kontrollpanelet mens rektanglet er merket.

  1. Sett strøkbredden til 0, og bruk Fyll-menyen til å sette fyllfargen til Ingen. Klikk mappen til høyre for Bilde-delen, og finn filen tile-header.png. Sett Tilpassing-menyen til: Side ved side.
fig_31_building
Bruk Tilpassing-menyen til å vise bakgrunnsbildet side ved side horisontalt.

 

Selv om toppteksten består av ett rektangel, skaper bakgrunnsbildet som vises side ved side vannrett og som fyller rektanglet, et inntrykk av et det finnes et grått rektangel over et svart rektangel.

  1. Velg Fil > Plasser , eller bruk tastatursnarveien Kommando + D (Mac) eller Ctrl + D (Windows), til å åpne dialogboksen Importer.
  2. Bla for å velge filen bg-ribbon.png i eksempelfilmappen. Klikk Åpne for å velge den, og lukk dialogboksen Importer.
  3. Klikk én gang midt i topptekstrektanglet nær toppen av siden. Dermed plasseres én forekomst av filen bg-ribbon.png med de opprinnelige dimensjonene.
  4. Bruk markeringsverktøyet til å justere den oransje båndgrafikken slik at den er midtstilt vertikalt nær toppen av toppteksten, og at den strekker seg over hele sidebredden (se figur.
fig_32_building
Oransje båndgrafikk plassert slik at den er midtstilt i toppteksten.

 

Den oransje båndgrafikken utgjør bakgrunnen for den overordnede menyen du skal legge til i neste del.

Duplisere en malside

Topptekstinnholdet på hovedmalsiden er komplett. Du kan bruke hovedmalsiden for hver side på området, mens denne områdedesignen har to deler. Designen på hovedmalsiden blir til syvende og sist brukt på hjemmesider og besøkssider. En sekundær og litt annen type malside brukes for mat-, hendelses- og Om-sidene.

Følg disse trinnene for å duplisere hovedmalsiden:

  1. Høyreklikk miniatyren for hovedmalsiden i Planlegg-visning.
  2. Velg Dupliser side på kontekstmenyen som vises (se figur.
fig_38_building
Bruk menyen til å duplisere den eksisterende hovedmalsiden.

 

Det vises en ny malside til høyre for hovedmalsiden med standardnavnet Hovedkopi. Du dupliserer hovedmalsiden, og derfor er den nye malen også allerede basert på A-malsiden.

  1. Dobbeltklikk navnefeltet under malsiden du nylig opprettet, og gi det navnet Forgrunn.

I den neste delen skal du lære hvordan du angir ordningen av elementer på en malside, slik at i stedet for at elementer alltid vises under sideelementer, kan de vises over sideelementer. Nå er det et godt tidspunkt å lagre arbeidet.

  1. Velg Fil > Lagre område.

Én av fordelene med å opprette en duplisert malside, er at du kan angi at noe av innholdet skal vises over annet sideinnhold, nesten på samme måte som å velge Ordne > Plasser foran. Denne "forgrunnsvirkemåten" passer godt for mat- og hendelsessider.

Muligheten til å angi stablerekkefølgen for elementer på malsiden er en ny funksjon i Muse 4.0. Tidligere måtte du plassere elementer i toppteksten eller bunnteksten på hver side, i stedet for på en malside, hvis du ville plassere vanlige områdeelementer over annet innhold i sidelayouten.

Angi at elementer i malsider skal vises foran andre elementer

I Muse kan du bruke grensesnittet i Design-visning til å merke et sideelement og velge Objekt > Plasser foran, Send fremover, Plasser lengst bak eller Send bakover slik at ett element vises over eller under et annet element på siden. (Du kan også høyreklikke et element eller en gruppe og velge Ordne > Plasser foran, Send fremover, Plasser lengst bak eller Send bakover for å angi stablerekkefølgen).

Når du designer områder med tidligere versjoner av Muse, er standardvirkemåten at elementer på malsider vises bak alle elementer på en side når siden gjengis. Dette bakgrunnslaget skapte noen ganger problemer (avhengig av områdedesignen), fordi den eneste løsningen innebar å kopiere og lime inn elementer du vanligvis ville plassert på en malside, på alle områdesidene der du ville at de skulle vises øverst.

Muse inneholder en ny funksjon for å kontrollere ordningen av elementer på malsider. I stedet for alltid å vise alt på en malside bak sideelementer, kan du nå merke elementer på malsider og angi at de skal vises som et element i forgrunnen. Elementer på malsider som er angitt som forgrunnselementer, vises over alle sideelementer.

Dette nye alternativet er tilgjengelig ved å velge Objekt > Flytt til > Forgrunn for mal. I tillegg kan du høyreklikke et hvilket som helst element i Design-visning mens du redigerer en malside og velger Flytt til > Forgrunn for mal på kontekstmenyen som vises.

I dette eksempelprosjektet krever designen at innholdet på hjemmesidene og besøkssidene bruker standard stablerekkefølge (sideelementer vises over toppteksten på hovedmalsiden), men mat-, hendelses- og Om-sidene vises ikke over toppteksten.

For mat- og besøkssidene oppdaterer du Forgrunn-malsiden slik at topptekstinnholdet vises i forgrunnen over sideinnholdet når det blas på sidene. Følg disse trinnene:

  1. I Planlegg-visning dobbeltklikker du miniatyren for Forgrunn-malsiden for å åpne siden og redigere den i Designvisning (hvis den ikke allerede er åpen).
  2. Bruk markeringsverktøyet til å klikke og dra for merke hele topptekstinnholdet, inkludert rektanglet med bakgrunnen som vises side ved side, den plasserte, oransje båndgrafikken, kontrollprogrammet for meny og den animerte GIF-logoen i midten.
  3. Når hele topptekstinnholdet er merket, høyreklikker du og velger Flytt til > Forgrunn for mal (se figur. Vær oppmerksom på at i motsetning til den vanlige blå kantlinjen for merkede objekter, har elementer som er angitt til å vises i forgrunnen, en rød kantlinje når de er merket.
fig_39_building
Flytt topptekstinnholdet til forgrunnen ved hjelp av kontekstmenyen.

Dette sikrer at toppteksten vises over sideelementene på sidene der Forgrunn-malsiden brukes.

  1. Mens hele toppteksten fremdeles er merket, fester du den til toppen av siden, slik at toppteksten ikke blas selv om siden blas. Du skal lære mer om hvordan du fester objekter i Del 7, men for øyeblikket klikker du festeposisjonen øverst i midten i kontrollpanelet for å feste toppteksten (se figur.
fig_40_building
Fest den merkede toppteksten ved å velge posisjonen Midtstilt øverst.

  1. Klikk og dra malsiden Forgrunn til matsiden for å ta den i bruk. Gjenta dette trinnet to ganger til for å bruke Forgrunn-malsiden på hendelsessiden og Om-siden.

Når du har gjort denne endringen, viser den blå etiketteksten ordene [Forgrunn], noe som angir at mat-, hendelses- og Om-sidene nå bruker malsiden Forgrunn. Hvis du holder markøren over den blå [Forgrunn] etiketten, angir et verktøytips at Forgrunn-malsiden er basert på A-malsiden.

Når du designer dine egne områdeprosjekter, kan du eksperimentere med den nye funksjonen Flytt til forgrunn for å angi at elementer på malsider skal vises øverst. Senere i denne opplæringen skal du gjøre ferdig designen for mat- og hendelsessidene, og du skal lære hvordan forgrunnsinnstillingen sikrer at toppteksten vises over annet innhold på siden.

I den neste delen av denne opplæringen – Bygge ditt første webområde med Muse, del 4 – finner du ut hvordan du jobber med innebygd HTML for å vise kode som er kopiert fra andre webområder. Du skal også lære hvordan du legger til et kontrollprogram for lysbokskomposisjon for å utvide hjemmesiden.

Bruke flere malsider og legge inn animasjon

I denne delen vil du lære mer om å jobbe med malsider og hvordan du kan vise felles områdeinnhold på flere malsider for å skape konsistens, samtidig som du oppretter forskjellige deler av et område. Du vil også lære strategier for å flytte elementer fra malsider. I noen områdedesigner kan det nemlig være nyttig å lage flere malsider og bare plassere bestemt grafikk på hver av dem (for eksempel et område med fire fargekodede områder). Du vil også lære om å flytte elementer som vanligvis befinner seg på en malside, til en bestemt individuell side for å skape designeffekter, for eksempel legge elementer oppå hverandre i flere lag.

Redigere malsideinnhold

Objekter plassert på en malside vises lagvis, under alt innhold du plasserer på en individuell side. For eksempel vil alle objekter du plasserer i toppteksten eller bunnteksten på Hjem-siden, bli vist lagvis, oppå bakgrunnene som er plassert i toppteksten og bunnteksten på malsiden. Derfor kan du komme ut for situasjoner hvor du har behov for å flytte elementer fra en malside og plassere dem på individuelle sider for at de skal vises oppå andre elementer på siden.

For å redigere innhold som er lagt til på malsider, må du åpne malsidene. Hvis du åpner en side som er knyttet til en malside, og prøver å redigere toppteksten, bunnteksten eller annet malsideinnhold, vil du se at det fremstår som låst. Du kan bruke to ulike strategier når du har behov for å endre innhold på en malside:

  1. Dobbeltklikk miniatyren av malsiden i Planlegg-visningen, og rediger deretter innholdet på malsiden i Design-visningen.

  2. Dobbeltklikk miniatyren av malsiden i Planlegg-visningen for å åpne den i Design-visningen. Velg elementene du vil redigere (men som må være oppå andre elementer, noe du oppnår ved å plassere dem på en side på området), og velg Rediger > Klipp ut, eller bruk tastatursnarveiene, Kommando + X (Mac) eller Ctrl + X (Windows).

  3. Gå tilbake til Planlegg-visningen, og dobbeltklikk siden som skal inneholde innholdet (det tidligere malsideinnholdet). Velg Rediger > Lim inn på samme plassering. Dette sikrer at elementet/elementene som du klippet ut fra malsiden, plasseres på nøyaktig samme sted på en vanlig side. Hvis du ønsker det, kan du åpne flere sider og velge Rediger > Lim inn på samme plassering for å fordele innhold som var på malsiden, på mange ulike sider på området ditt.

Du kan også duplisere en eksisterende malside ved behov. Du kan konfigurere området ditt slik at de fleste sidene bruker én malside, mens en spesiell side bruker en duplisert, lignende versjon av malsiden (med bestemte elementer kopiert fra duplikatmalsiden til den spesielle siden på området). Hvis du vil lære mer om å duplisere malsider, kan du se neste underavsnitt.

Når objektet befinner seg på individuelle sider, ikke på malsiden, kan du redigere objektet side for side etter behov og sikre at objektet vises øverst.

I dette eksempelprosjektet viser området for øyeblikket logoen til Kevin's Koffee Kart (rød sykkel med banner) rett over sidenavigeringen i toppteksten. Topptekst- og bunntekstinnholdet vises automatisk på alle sidene, fordi Hjem-siden (og alle andre sider du oppretter) som standard er koblet til A-malsiden, hvor dette innholdet befinner seg. I mange tilfeller kan du velge å bygge webområder som alle bruker den samme malsiden, for å skape konsistens på tvers av området.

Dette området har imidlertid en unik, animert logo som bare vises på Hjem-siden. Hvis du ser på det aktive eksempelet på området Kevin's Koffee Kart, vil du legge merke til at den røde sykkellogoen på Hjem-siden animeres én gang når siden lastes inn, som om sykkelen kommer trillende inn på siden fra venstre side. Når du klikker rundt omkring for å besøke andre sider, vil du se at animasjonen bare skjer på Hjem-siden – alle andre logoer på sidene på området er statiske.

I det følgende underavsnittet vil du lære hvordan du lager et duplikat av en malside, og hvordan du tilordner sider til å bruke en bestemt malside, i Planlegg-visningen.

Duplisere og slette malsider

  1. Klikk Planlegg-koblingen for å åpne Planlegg-visningen. Finn miniatyren av A-malsiden, nederst i grensesnittet for Planlegg-visningen.

  2. Hold markøren over miniatyren av A-malsiden, og legg merke til at når du ruller over den, vises de samme plusstegnikonene (+) som vises når du legger til nye sider i områdekartet. Klikk plusstegnet (+) til høyre for miniatyren av A-malsiden. Du kan bruke denne teknikken hver gang du vil lage en helt ny malside fra bunnen av. Legg merke til at miniatyren er tom. Det betyr at den ikke inneholder innholdet som du la til på A-malsiden. Den nye malsiden får navnet B-mal som standard, men du kan klikke feltet under miniatyren for å gi den nytt navn etter behov.

    I dette tilfellet vil du opprette et duplikat av den eksisterende A-malsiden i stedet for å lage en helt ny, tom malside.

  3. Klikk X-ikonet i øvre høyre hjørne av B-malsiden for å slette den. (Hvis du utilsiktet sletter en eksisterende malside når du bruker denne strategien, velger du Rediger > Angre Slett malside for å gjenopprette den).

  4. Høyreklikk miniatyren av A-malsiden, og velg Dupliser side fra hurtigmenyen som vises. Det vises en ny miniatyr, som viser et duplikat av malsiden med navnet A-mal kopi (se figur.

    fig_59_getting
    Dupliser A-malsiden i Planlegg-visning.

  5. Klikk feltet under miniatyren av A-malkopien, og endre navnet på duplikatet av malsiden til MasterFlash. Du skal bruke denne siden til å legge til det rike medieinnholdet som animeres bare på Hjem-siden, mens alle de andre sidene fortsatt vil være koblet til A-malsiden, som viser en statisk versjon av logoen i toppteksten.

  6. Høyreklikk miniatyren av Hjem-siden. Velg Maler > MasterFlash fra menyen som vises. Denne handlingen knytter malsiden MasterFlash til Hjem-siden.

    Merk:

    Alternativt kan du dra miniatyren av MasterFlash-siden oppå miniatyren av Hjem-siden for å ta den i bruk.

Når malsiden MasterFlash er tatt i bruk, vises navnet i hakeparentes under miniatyren av Hjem-siden i Planlegg-visningen.

Hvis du klikker Forhåndsvisning, vil du ikke se noen forskjell på Hjem-siden. Siden MasterFlash er et duplikat av A-malsiden, ser Hjem-siden lik ut som tidligere, og den statiske logoen vises. I det neste underavsnittet skal du imidlertid redigere MasterFlash-innholdet for å legge til animasjonen som bare skal skje på Hjem-siden.

Bruk av dupliserte, nesten like (men litt forskjellige), malsider er en fin metode for å skille ut en bestemt del av et webområde samt å gjøre Hjem-siden unik, slik det er beskrevet for dette prosjektet.

I denne opplæringen lærer du hvordan du bruker malsidene. Vi undersøker og dekonstruerer tre områdelayouter og finner ut hvordan du kan oppnå interessante effekter og områdekonsekvens ved hjelp av vanlige elementer på en malside.

Men først, hva er en malside? På en malside kan du bruke vanlige elementer, for eksempel topptekster, bunntekster, logoer og navigering på flere sider på området. Du kan bruke én malside for området, eller du kan konfigurere flere malsider slik at du raskt og konsekvent kan ta i bruk unike stiler på ulike deler av området.

Muse oppretter som standard en tom Hjem-side og malside for deg når du oppretter et nytt område. Disse sidene er utgangspunktet for alle webområder. Du kan planlegge områdekartet ved hjelp av tomme sider, og senere kan du bruke malsider på dem, eller du kan opprette webområdet ved å starte med malsiden, bruke den på én side (Hjem-siden), og deretter opprette nye sider basert på den designen.

Dekonstruere områdelayouter

Gjennomgang av ulike layouter på malsiden er en god metode for å lære nye strategier for områdedesign. I denne artikkelen beskrives tre forskjellige områdelayouter som ble opprettet i Muse, og du kan utforske hvordan de ble opprettet.

Hvis du vil åpne innholdselementene for hvert av disse eksempelområdene, laster du ned eksempelfilene, pakker ut ZIP-filen og dobbeltklikker hver .muse-fil for å åpne den i Muse.

Etter hvert som du sjekker hvert av disse eksempelområdene, bør du være oppmerksom på at noen av funksjonene som brukes til å opprette områdedesignene, er enkle å navigere med, og disse kan brukes av besøkende til å orientere seg på området og finne frem til områdeinnhold:

  • Konfigurer områdeegenskaper for å definere dimensjonene på alle sider
  • Bruk hjelpelinjer til å definere topptekst- og bunntekstområdene på malsiden
  • Fest objekter i webleservinduet slik at de blir plassert utenfor sidelayouten
  • Angi at fyllet i bakgrunnsbildene skal følge med når man ruller, eller at faste posisjoner skal lage interessante effekter
  • Utvid rektangler for å vise dem med 100 % bredde slik at de dekker hele bredden til webleseren
  • Legg til interaktivt sideinnhold i kontrollprogrammer for trekkspill og lysbildevisning
  • Tilpass og formater kontrollprogrammer for meny for å legge til rette for navigering på området
  • Opprett ankerkoblinger for å hoppe vertikalt eller horisontalt til bestemte deler av siden
  • Lim inn kode fra tredjepartsområder (innebygd HTML) for å legge til funksjoner på sider

Når du går til hvert eksempelområde, kan du prøve å rulle nedover og endre størrelse på webleservinduet for å se hvordan det aktive eksempelet fungerer. Deretter åpner du hver .muse-fil i Muse for å se hvordan malsider brukes til å standardisere områdelayoutene og skape en mer enhetlig Internett-opplevelse.

Eksempel 1: Happy Valley Adventures

fig01.master.b720

I det første eksempelet blir bunntekstgrafikken festet nederst i webleservinduet. I tillegg er bunntekstbakgrunnen satt til 100 % bredde for å dekke den horisontale bunnen av siden. Det lengre sideinnholdet ruller bak bunntekstforgrunnen for å skape en gradert skyeffekt. Når du klikker ankerkoblingene til venstre, flyttes siden vertikalt til den tilsvarende delen. Halvgjennomsiktige grafikkelementer og en strategisk stablerekkefølge bidrar til å formidle følelsen av å fly i en ballong.

Når du ser gjennom .muse-filen for dette området, må du være oppmerksom på følgende:

På malsiden utgjør en rekke graderingsfylte rektangler bakgrunnen for lenger sideinnhold.

  • Hjem-siden inneholder en bunntekstgrafikk med horisontale bakgrunnsbilder side ved side. Disse er satt til å vises med 100 % bredde, og de er festet nederst i webleservinduet. En sekundær bunntekstgrafikk ("fjelltoppen") er midtstilt og festet til bunnen av webleseren, og den er plassert over den andre bunntekstgrafikken, som vises side ved side, ved hjelp av kommandoen Ordne > Plasser foran. Denne strategien er egnet for alle skjermstørrelser.
  • Navigeringskoblingene til venstre hopper til ankerkoder som legges til på den lange vertikaljusterte siden. Etter hvert som besøkende klikker koblingene, ruller siden ned automatisk for å vise det tilhørende innholdet. Designen ser balansert og enhetlig ut etter hvert som områdedelene vises.
  • Kontaktdelen av Hjem-siden inneholder innebygd HTML for å vise kontaktskjemaelementer slik at kommunikasjon med besøkende og planlegging av kommende arrangementer blir enklere.

Eksempel 2: Kevin's Koffee Kart

fig02.master.b720
Dette flerlagsområdet bruker et kontrollprogram for meny og innebygde HTML-funksjoner.

Hjem-siden til området Kevin's Koffee Kart inneholder Flash-animasjon i toppteksten og festet skygrafikk. Når du bruker rullefeltene til å navigere på siden, må du være oppmerksom på at bakgrunnsbildet er låst og ikke kan rulles, men sideinnholdet ruller over det. En lysbildefremvisning spilles automatisk av, og den viser bilder under en innebygd HTML-basert Twitter-feed.

Menylinjen i toppteksten ble opprettet ved hjelp av et kontrollprogram for horisontal meny. Dermed ble det opprettet konsekvente områdenavigeringsknapper som oppdateres automatisk når du legger til nye sider. I dette eksempelet blir kontrollprogrammet for menyen konfigurert til å vise både overordnede og underordnede sider.

Samhandle med menyen og se hvordan hver side lastes når du klikker knappene. Toppteksten og bunnteksten er standard på alle sider, men sidehøyden varierer basert på innholdet. Den brune bunnteksten består av to rektangler som er satt til 100 % bredde slik at den dekker hele bredden til webleservinduet. Dette gjør at hver side samsvarer med de andre sidene.

Følgende designkonvensjoner ble brukt til å opprette området for Kevin's Koffee Kart:

  • Dette området bruker to lignende malsider: malsiden uten Flash brukes på de fleste områdesidene, og en sekundær malside med Flash brukes bare på Hjem-siden. Begge malsidene har bunntekster som er 100 % brede med kantlinjer med gjennomsiktig design. Bruk samme kontrollprogram for meny av hensyn til konsekvens. Når den første malen er opprettet, kopieres og limes elementene deretter inn i den sekundære malen for å sikre at alle elementene er plassert riktig.
  • Sidene er ordnet i Planlegg-visningen for å opprette overordnede og underordnede deler av området, noe som gjenspeiles i rullegardinelementene i kontrollprogrammet for meny.
  • Bakgrunnsbildekartet som ble brukt som webleserfyll, er satt til å vises i opprinnelig størrelse i stedet for side ved side. Det midtstilles og settes til ikke å rulle under sideinnholdet.
  • Sidebakgrunnsfyllet er heldekkende hvitt med en anelse gjennomsiktighet, slik at bakgrunnskartbildet kan skimtes.
  • Hjem-siden inneholder to halvgjennomsiktige skybilder som er festet til webleseren. Rull vertikalt på siden for å vise at de festede elementene forblir i samme posisjon hvis du endrer størrelsen på webleservinduet.
  • Hjem-siden bruker innebygd HTML til å vise aktive Twitter-feeder.
  • Koffee-siden inneholder et kontrollprogram for trekkspill som utvider og skjuler panelene når de klikkes. Dermed vises det mer innhold i et komprimert område på siden.
  • Origins-siden inneholder et kontrollprogram for lysbildefremvisning med miniatyrer slik at det vises et interaktivt bildegalleri. Preparation-siden bruker ankerkodenavigering til å hoppe til hver del av siden, og kartsiden inneholder innebygd HTML for å vise et interaktivt Google Latitude-kart, basert på den nåværende plasseringen til mobiltelefonen for den kontoen.

Eksempel 3: More than Square

fig03.master.b720
Festet grafikk med tydelig overlapping rammer inn det bevegelige sideinnholdet.

Når du viser det endelige eksempelet, må du være oppmerksom på at bygningsgrafikken er festet i hjørnet øverst til høyre og i hjørnet nederst til venstre for å ramme inn sideinnholdet. Elementet i hjørnet øverst til høyre vises øverst slik at det overlapper sideinnholdet, mens elementet i hjørnet nederst til venstre vises under siden.

Sideinnholdet er midtstilt, halvgjennomsiktig og atskilt fra arkitekturelementene ved hjelp av avrundede hjørner. Sideinnholdet ruller vertikalt, og høyden varierer etter hvert som du klikker deg fra side til side. Koblinger til sosiale nettverk (Twitter, Facebook og YouTube) vises til venstre på siden for å oppmuntre brukerne av disse nettverkene å legge ut koblinger til siden, og i tillegg formidles en konsekvent og asymmetrisk design på tvers av området.

Home-siden (Hjem-siden) inneholder et bildegalleri med navigeringsknappene Next (Neste) og Previous (Forrige). Disse knappene er også konfigurert til å spille av lysbildefremvisningen sakte hvis den besøkende ikke ønsker å klikke knappene. Siden How to Get Here (Slik kommer du hit) inneholder et interaktivt kart som ble opprettet med innebygd HTML-kode kopiert fra Google Maps.

Når du ser gjennom .muse-kildefilen for dette eksempelet, må du vurdere følgende:

I dette eksempelet finnes nesten alle de vanlige sideelementene på malsiden. Denne strategien gjør det enklere å oppdatere området og gjøre endringer i innholdet på hver side.

Malsiden inneholder en bakgrunnsgrafikk for bunntekstbildet som ikke kan rulles. Den er i stedet festet nederst på venstre side av webleseren. Malsiden inneholder også den halvgjennomsiktige sidedesignen med avrundede hjørner sammen med områdenavigeringen.

Alle sidene på området har en grafikk festet i hjørnet øverst til høyre, og den vises foran sideinnholdet for å skape perspektivet som vinklene i bygningsbildene formidler.

Muse er et intuitivt designverktøy som du kan bruke til å publisere designene på Internett. Kreativ plassering av elementer på malsidene samt det unike innholdet som vises på hver side, gjør at du kan lage innbydende layouter. Fantasien er den eneste begrensningen når du oppretter oppfinnsomme stiler for kundene dine.

Hvis du vil ha flere tips til hvordan du jobber med Muse, kan du gå til side for hjelp og opplæringer for Muse eller siden for Muse-arrangementer for direkteoverførte og innspilte webinarer.

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet