Bemærk:

Adobe Muse tilføjer ikke længere nye funktioner og slutter med at tilbyde support 26. marts 2020. Find flere oplysninger og hjælp på Adobe Muses side om ophør af tjeneste.

Arbejd med hierarkiske mastersider

Med Muse er det nu muligt at oprette mastersider, som anvendes på andre mastersider. Funktionen af hierarkiske mastersider kan sammenlignes med, hvordan mastersider kan anvendes på en side i visningen Plan. I tidligere versioner af Muse kunne du oprette flere mastersider, men du kunne kun anvende én masterside med ét sæt sideelementer ad gangen på en webside.

Hvis du førhen ville oprette et website med to forskellige afsnit, som lignede hinanden, men som hver især havde et særligt udseende, kunne du dublere en masterside, ændre den en smule og anvende den på bestemte sider. Resultatet var, at begge mastersider ofte indeholdt nogle af de samme elementer – så når du opdaterede websitet, var det nødvendigt at redigere indholdet af begge mastersider for at holde alle elementer synkroniserede.

Med Muse 4.0 og nyere versioner kan du nu oprette en A-Master-side, som indeholder de delte elementer, der vises på flere mastersider (f.eks. tilføjelse af baggrund og sidefod som beskrevet i de foregående afsnit), og derefter oprette flere mastersider, som arver alle elementer på A-Master-siden, og som indeholder eventuelle elementer, der er unikke for det første afsnit. Hvis du har oprettet en tredje masterside, kan den bruge elementerne på A-Master-siden plus eventuelle elementer, som kun findes i det andet afsnit.

Fordelen ved at bruge hierarkiske mastersider er, at de gør det muligt for dig at begrænse forekomsten af et element til kun ét eksemplar. Når du ændrer designet af et website, behøver du kun at redigere hvert element én gang, hvorefter alle forekomster af det automatisk opdateres på websitet.

Du administrerer og anvender mastersider i visningen Plan. På samme måde som du kan klikke på og trække et miniaturebillede af en masterside til et miniaturebillede af en side for at anvende mastersiden på den pågældende side, kan du oprette flere mastersider og derefter klikke på og trække en masterside over på en anden masterside. Du kan også vælge at højreklikke på et miniaturebillede af en masterside eller en side i visningen Plan og bruge indstillingen Mastere i kontekstmenuen, som åbnes, til at indstille masteren.

Bemærk, at der, når du bevæger markøren hen over navnet på en side eller masterside, vises et værktøjstip med hierarkiet af de anvendte mastere for siden eller mastersiden.

På dette tidspunkt har du oprettet A-Master-siden med den fliseinddelte baggrund som browserfyld og indholdet af sidefoden. I det næste afsnit skal du oprette en ny masterside, som arver indholdet af A-Master-siden, og derefter tilføje sidehovedet, så du kan anvende det på siderne på websitet. Følg denne fremgangsmåde:

  1. Mens kortet over websitet er åbent i visningen Plan, skal du bevæge markøren hen over miniaturebilledet af A-Master-siden, så du kan se knapperne med plustegn i hver side. Klik på plustegnet til højre for A-Master-siden for at oprette en helt ny masterside. Den nye masterside har som standard navnet B-Master.
  2. Dobbeltklik på B-Master-tekstfeltet under miniaturebilledet for at redigere det. Indtast et mere beskrivende navn til den nye masterside, du netop har oprettet: Primær.
  3. Højreklik på miniaturebilledet af den primære masterside, og vælg Mastere > A-Master i kontekstmenuen, der vises.
I dette selvstudium lærer du Adobe Muse-arbejdsrummet at kende og ser, hvordan du opbygger et website med alle funktioner uden at skrive kode. Du vil også forstå, hvordan du opretter et kort over websitet, arbejder dig igennem mastersider og forstår indstillingerne for browserfyld i Muse.
Vælg A-Master i menuen for at anvende den på den primære masterside.

Bemærk, at når A-Master-siden anvendes på den primære masterside, opdateres miniaturebilledet af den primære masterside med samme udseende. På det blå mærke under miniaturebilledet af den primære masterside står der [A-Master], fordi du anvendte A-Masteren på den primære masterside i trin 3.

Det er vigtigt at gøre sig klart, at den primære masterside ikke reelt indeholder A-Master-elementerne – du har ikke bare dubleret A-Masteren. I stedet for har du indstillet den primære masterside til at linke til A-Masteren, og det betyder, at nyt indhold, som du føjer til A-Masteren, også automatisk vises på den primære masterside.

Som tidligere nævnt er det praktiske ved hierarkiske mastere, at sidefoden, menuen og baggrunden fortsat kun findes på A-Master-siden. Så hvis en kunde på et senere tidspunkt beder om, at du bruger en anden fliseinddeling til baggrunden, kan du opdatere A-Master-siden, hvorefter den primære masterside automatisk opdateres.

Senere i dette selvstudium skal du oprette to forskellige mastere til forskellige udseender i de to forskellige websitesektioner. Men her og nu kan du opdatere siderne i visningen Plan, så de alle bruger den nye primære masterside frem for A-Master-siden.

  1. Klik på og træk den primære masterside til miniaturebilledet af siden mad i det øverste venstre hjørne. Bemærk, at når du trækker miniaturebilledet af den primære masterside og slipper det på miniaturebilledet af siden mad, opdateres den blå tekst under miniaturebilledet af siden mad fra [A-Master] til [Primær].

Dette er den mest almindelige måde at anvende mastersider på sider i visningen Plan på, men du kan også prøve at anvende dem vha. kontekstmenuen:

  1. Højreklik på miniaturebilledet af siden arrangementer, og vælg Mastere > Primær i kontekstmenuen, der vises.
I dette selvstudium lærer du Adobe Muse-arbejdsrummet at kende og ser, hvordan du opbygger et website med alle funktioner uden at skrive kode. Du vil også forstå, hvordan du opretter et kort over websitet, arbejder dig igennem mastersider og forstår indstillingerne for browserfyld i Muse.
Brug kontekstmenuen til at indstille Primær som mastersiden for siden arrangementer.

  1. Brug den metode, du foretrækker (beskrevet i trin 4 og 5), til at indstille Primær som mastersiden for de tre sidste sider: hjem, om og besøg.

Når du har udført denne ændring, skulle der stå [Primær] på alle blå tekstmærker under miniaturebilledet af hver side. Hvis du bevæger markøren hen over et af de blå mærker, vises et værktøjstip med hierarkiet på de anvendte mastersider.

I dette selvstudium lærer du Adobe Muse-arbejdsrummet at kende og ser, hvordan du opbygger et website med alle funktioner uden at skrive kode. Du vil også forstå, hvordan du opretter et kort over websitet, arbejder dig igennem mastersider og forstår indstillingerne for browserfyld i Muse.
Et nyttigt værktøjstip, der beskriver hierarkiet, vises, når du ruller hen over mærket.

I dette eksempel er hierarkiet kun ét niveau dybt. Den primære masterside arver med andre ord indholdet af A-Master-siden. Men vær opmærksom på, at du kan oprette en kæde af mastersider, hvis du vil. Du kan f.eks. oprette en masterside med navnet Sidehoved med kun indholdet af sidehovedet og derefter oprette endnu en masterside med navnet Sidefod, som arver indholdet af Sidehoved-mastersiden, samt endnu en masterside med navnet Primær, som arver alt på Sidefod-mastersiden (også sidehovedet). Afhængigt af websitets design og din viden om, at nogle elementer sandsynligvis vil blive ændret, kan du konstruere arveniveauerne i flere lag under hinanden. En sådan inddeling af designet er lidt ligesom at oprette symboler, fordi du kan isolere bestemte dele af et design og derefter let finde og redigere den pågældende del senere.

Fortsæt til det næste selvstudium, Opbygning af dit første website med Muse Del 2, hvor du lærer, hvordan du arbejder med widgets (forhåndsopbyggede interaktive websitefunktioner, som du kan trække over på sider). Med widgets kan du hurtigt tilføje avanceret funktionalitet på sider uden at skulle skrive kode. Du får at se, hvordan du kan redigere funktionsmåden og udseendet af widgets, og hvordan du tilpasser den måde, de vises på i websitedesignet.

Føj sidehovedindhold til den primære masterside

Nu, hvor du har færdiggjort sidefoden ved at tilføje en menu-widget til den primære masterside, skal du tilføje navigationen for øverste niveau. Følg disse trin for at tilføje indhold til sidehovedområdet.

  1. Dobbeltklik i visningen Plan på miniaturebilledet for den primære masterside for at åbne siden, og begynd at redigere den i visningen Design (hvis den ikke allerede er åben).
  2. Brug rektangelværktøjet til at tegne et rektangel, som begynder i det øverste venstre hjørne af det synlige browserområde, og som spænder over hele bredden til det øverste højre hjørne. Brug markeringsværktøjet til at trække i håndtagene på øverste, venstre og højre side af rektanglet, indtil den røde ramme vises kortvarigt som indikation af, at rektanglet er indstillet til 100 % bredde, på samme måde som du oprettede sidefoden.
fig_30_building
Tegn et rektangel, der spænder over hele øverste del af browservinduet.

 

Når du har trykket i håndtagene, bør størrelsen af rektanglet være ca. 1160 pixels bredt og 253 pixels højt. Den vandrette X-værdi er -100, hvilket betyder, at rektanglets øverste venstre hjørne ligger 100 pixels til venstre for sidens øverste venstre hjørne. Y-værdien er 0 (hvilket betyder, at rektanglets øverste venstre hjørne har samme lodrette placering som sidens øverste venstre hjørne). Hvis du vil indstille disse værdier præcist, kan du gennemse felterne i panelet Transformation eller i kontrolpanelet, mens rektanglet er valgt.

  1. Indstil stregbredden til 0, og brug menuen Fyld til at indstille fyldfarven til Ingen. Klik på mappen til højre for afsnittet Billede, og gennemse for at vælge billedet med navnet tile-header.png. Indstil menuen Tilpasning til Arranger vandret.
fig_31_building
Brug menuen Tilpasning til at fliseinddele baggrundsbilledet vandret.

 

Selvom sidehovedet består af et enkelt rektangel, skaber det vandret fliseinddelte baggrundsbillede indtryk af, at der er et gråt rektangel over et sort rektangel.

  1. Vælg Filer > Placer, eller brug tastaturgenvejen: Kommando-D (Mac) eller Crtl-D (Windows) for at åbne dialogboksen Importer
  2. Find filen bg-ribbon.png, som findes i mappen med eksempelfiler. Klik på Åbn for at åbne filen og lukke dialogboksen Importer.
  3. Klik én gang i midten af sidehovedrektanglet, nær toppen af siden. Det placerer en enkelt forekomst af filen bg-ribbon.png fil i dens oprindelige dimensioner.
  4. Brug markeringsværktøjet til at tilpasse det orange bånd, så det er centreret lodret nær toppen af sidehovedet og spænder over sidens bredde.
fig_32_building
De orange bånd placeres, så det er centreret i sidehovedet.

 

Det orange bånd udgør baggrund for menuen i øverste niveau, som du tilføjer i næste afsnit.

Dubler en masterside

Indholdet af den primære mastersides sidehoved er fuldført. Selvom du kunne bruge den primære masterside til hver eneste side på websitet, har dette websitedesign to sektioner. Den primære mastersides design vil i sidste ende vil blive anvendt på startsiden og besøgssiderne. En anden og lidt anderledes masterside vil blive anvendt på siderne Mad, Arrangementer og Om.

Følg disse trin for at dublere den primære masterside:

  1. Højreklik i visningen Plan på miniaturebilledet for den primære masterside.
  2. Vælg Dubler side i den kontekstmenu, der åbnes.
fig_38_building
Brug menuen til at kopiere den eksisterende primære masterside.

 

En ny masterside vises til højre for den primære masterside med standardnavnet: Primær kopi. Fordi du dublerer den primære masterside, er den nye master også allerede baseret på A-Master-siden.

  1. Dobbeltklik på navnefeltet under mastersiden, som du lige har oprettet, og omdøb det til: Forgrund.

I næste afsnit lærer du, hvordan du indstiller organiseringen af elementer på en masterside, så elementerne kan vises over sideelementerne i stedet for altid at blive vist under dem. På dette tidspunkt er det en god ide at gemme dit arbejde.

  1. Vælg Filer > Gem website.

En af fordelene ved at oprette en dubleret masterside er, at du kan indstille noget af indholdet til at blive vist over det øvrige sideindhold, næsten som om du havde valgt Arranger > Placer forrest. Denne "forgrunds"-funktionsmåde ønskes for siderne Mad og Arrangementer.

Muligheden for at indstille stablingsrækkefølgen for mastersideelementer er en ny funktion i Muse 4.0. Tidligere skulle du anbringe sidehoved eller sidefod på hver side snarere end en på en masterside, hvis du ville placere fælles website-elementer over andet indhold i sidelayoutet.

Indstil elementer i mastersider til visning i forgrunden

I Muse kan du med visningen Design vælge et sideelement og vælge Objekt > Placer forrest, Flyt fremad, Placer Bagest eller Flyt bagud for at få ét element til at blive vist over eller under et andet element på siden. (Du kan også højreklikke på et element eller en gruppe og vælge Arranger > Placer forrest, Flyt fremad, Flyt bagud eller Placer bagest for at indstille stablingsrækkefølgen).

Ved design af websites med tidligere versioner af Muse er standardfunktionsmåden, at elementer på en masterside altid vises bag alle elementerne på en side, når siden gengives. Denne baggrundslagdeling var nogle gange problematisk (afhængigt af websitets design), fordi den eneste metode krævede kopiering og indsættelse af elementer, som man normalt ville placere på en masterside, på alle de websitesider, hvor man ønskede dem vist ovenpå.

Muse indeholder den nye mulighed for at styre organiseringen af elementer på mastersider. I stedet for altid at vise alt på en masterside bag sideelementerne kan man nu vælge elementer på mastersider og indstille dem til at blive vist som et forgrundselement. Elementer på en masterside, som er indstillet som forgrundselementer vises over alle sidens elementer.

Denne nye mulighed er tilgængelig ved at vælge Objekt > Flyt til> Masterforgrund. Du kan desuden højreklikke på ethvert element i visningen Design, mens du redigerer en masterside, og vælge Flyt til > Masterforgrund i den genvejsmenu, der vises.

I dette eksempelprojekt kræver designet, at indholdet på startsiden og besøgssiden bruger standard-stablingsrækkefølgen (sideelementer vises oven på sidehoved på den primære masterside), mens dette ikke er tilfældet for siderne Mad, Arrangementer og Om.

For siderne Mad og Besøg skal du opdatere forgrunds-mastersiden, så sidehovedindholdet vises i forgrunden over sidens indhold, når der rulles gennem siderne. Følg denne fremgangsmåde:

  1. Dobbeltklik i visningen Plan på miniaturebilledet for forgrunds-masterside for at åbne siden, og begynd at redigere den i visningen Design (hvis den ikke allerede er åben).
  2. Brug markeringsværktøjet til at klikke og trække for at vælge hele sidehovedindholdet, inklusive rektanglet med fliseinddelt baggrund, placeret orange bånd, menu-widgeten og det animerede GIF-logo i midten.
  3. Når alt sidehovedindholdet er markeret, skal du højreklikke og vælge Flyt til > Masterforgrund. Bemærk, at i modsætning til den sædvanlige blå kant omkring valgte objekter har elementer, som er indstillet til at blive vist i forgrunden, en rød kant, når de er valgt.
fig_39_building
Flyt sidehovedindholdet til forgrunden ved hjælp af genvejsmenuen.

Det sikrer, at sidehovedet vises oven på sideelementerne på de sider, hvor forgrunds-mastersiden anvendes.

  1. Mens hele sidehovedet stadig er markeret, fastgør du det til toppen af siden, så sidehovedet ikke ruller med, selvom der rulles på siden. Du vil lære mere om fastgørelse af objekter i Del 7. Lige nu skal du blot klikke på den øverste fastgørelsesposition i kontrolpanelet for at fastgøre sidehovedet.
fig_40_building
Fastgør det valgte sidehoved ved at vælge den øverste centerposition.

  1. Klik og træk forgrunds-mastersiden over på siden Mad for at anvende den. Gentag dette trin to gange mere for at anvende forgrunds-mastersiden på siderne Arrangementer og Om.

Efter denne ændring viser den blå mærketekst ordet [Forgrund], som angiver, at siderne Mad, Arrangementer og Om nu bruger forgrunds-mastersiden. Hvis du holder markøren over det blå mærke [Forgrund] label, angiver et værktøjstip, at forgrunds-mastersiden er baseret på A-Master-siden.

Når du designer dine egne websiteprojekter, kan du eksperimentere med den nye funktion Flyt til forgrund til at indstille elementer på mastersider til at blive vist øverst. Senere i denne selvstudieserie vil du færdiggøre designet af siderne Mad og Arrangementer og se, hvordan forgrundsindstillingen sikrer, at sidehovedet vises over andet indhold på siden.

I det næste afsnit af dette selvstudium, Opbygning af dit første website med Muse Del 4, lærer du at arbejde med indlejret HTML for at vise kode, som er kopieret fra andre websites. Du lærer også, hvordan du tilføjer en Lightbox-kompositionswidget til at udbygge startsiden.

Brug flere mastersider og anvend animation

I dette afsnit lærer du at arbejde med mastersider, og hvordan du kan vise almindeligt websiteindhold på flere mastersider for at skabe konsistens, samtidig med at du opretter forskellige afsnit af et website. Du lærer også strategier om at flytte elementer fra mastersiden, fordi nogle websitedesign med fordel kan anvende flere mastersider og kun placere særlige grafikobjekter på hver (f.eks. et website med fire farvekodede områder). Du lærer at flytte elementer, som normalt er på en masterside, til en individuel side for at skabe designeffekter, f.eks. placering af elementer i lag oven på hinanden.

Rediger mastersideindhold

Objekter på en masterside vises i et lag under indhold, du placerer på en individuel side. Objekter, du placerer i sidehovedet eller sidefoden på startsiden, vises f.eks. i lag oven på de baggrunde, der er placeret i mastersidens sidehoved og sidefod. Du kan derfor komme ud for situationer, hvor du har brug for at flytte elementer fra en masterside og placere dem på individuelle sider, så de vises over andre elementer på siden.

Indhold, der tilføjes på mastersider, skal redigeres efterfølgende ved at åbne mastersiden. Hvis du åbner en side, der er knyttet til en masterside, og forsøger at redigere sidehovedet, sidefoden eller andet indhold på mastersiden, vises siden som låst. Du kan benytte to forskellige strategier, når du vil ændre indhold på en masterside:

  1. Dobbeltklik på miniaturebilledet af mastersiden i visningen Plan, og rediger derefter indholdet på mastersiden i visningen Design.

  2. Dobbeltklik på miniaturebilledet af mastersiden i visningen Plan for at åbne den i visningen Design. Marker de elementer, du vil redigere (og som skal være placeret over andre elementer på websitet), og vælg Rediger > Klip, eller brug tastaturgenvejene Kommando+X (Mac) eller Ctrl+X (Windows).

  3. Gå tilbage til visningen Plan, og dobbeltklik på siden, som skal indeholde det tidligere mastersideindhold. Vælg Rediger > Indsæt samme sted. Det sikrer, at det eller de elementer, du klipper fra mastersiden, anbringes på den samme placering på en almindelig side. Du kan åbne flere sider og vælge Rediger > Indsæt samme sted for at distribuere indhold, der tidligere var på mastersiden, til mange forskellige sider på websitet.

Du kan også duplikere en eksisterende masterside efter behov. Du kan konfigurere dit website, så de fleste sider bruger den samme masterside, mens en specialside bruger en kopi af mastersiden (med kopiering af særlige elementer fra den duplikerede masterside til specialsiden). Se det næste underafsnit for at få mere at vide om, hvordan du duplikerer mastersider.

Når objektet er placeret på dine individuelle sider og ikke på mastersiden, kan du redigere objektet side for side efter behov og sikre, at objektet vises øverst.

I dette projekteksempel vises Kevin's Koffee Kart-logoet på det aktuelle website (rød cykel med banner) direkte over websitenavigeringen i sidehovedet. Indholdet af sidehovedet og sidefoden vises automatisk på hver side, fordi startsiden (og alle andre sider, du opretter) som standard er kædet sammen med A-Master-siden, hvor indholdet er placeret. Du vil i mange tilfælde muligvis vælge at oprette websites, som alle bruger den samme masterside, for at sikre konsistens på tværs af websitet.

Dette website har imidlertid et særligt animeret logo, som kun vises på startsiden. Hvis du gennemgår live-eksemplet med Kevin's Koffee Kart-websitet, vil du bemærke, at logoet med den røde cykel på startsiden animeres, så snart den første side indlæses, som om cyklen kommer kørende ind på siden fra venstre. Efterhånden som du klikker dig ind på andre sider, ser du, at animationen kun findes på startsiden. Alle andre logoer på websitets sider er statiske.

I det følgende underafsnit lærer du at oprette en kopieret masterside og tildele sider til at bruge en bestemt masterside i visningen Plan.

Dupliker og slet mastersider

  1. Klik på linket Plan for at åbne visningen Plan. Find miniaturebilledet af A-Master-siden nederst i visningsgrænsefladen Plan.

  2. Peg på A-Master-miniaturebilledet med markøren, og bemærk, at du får vist de samme plustegn (+), som når du tilføjer nye sider i websiteoversigten, når du bevæger dig hen over det. Klik på plustegnet (+) til højre for A-master-miniaturebilledet. Du kan bruge denne teknik, hver gang du vil oprette en helt ny masterside fra bunden. Bemærk, at miniaturebilledet er tomt, hvilket vi sige, at det ikke indeholder det indhold, du har tilføjet på A-Master-siden. Den nye masterside får navnet B-Master som standard, men du kan altid klikke på feltet under miniaturebilledet for at omdøbe den.

    Her er det bedre at oprette en kopi af den eksisterende A-Master-side i stedet for at oprette en helt ny tom masterside.

  3. Klik på X'et øverst til højre på B-Master-siden for at slette den. Hvis du ved en fejl kommer til at slette en eksisterende masterside, skal du vælge Rediger > Fortryd Slet masterside for at gendanne den.

  4. Højreklik på miniaturebilledet af A-Master-siden, og vælg Dubler side i den kontekstmenu, der vises. Der vises et nyt miniaturebillede med den dublerede masterside med navnet A-Master-kopi.

    fig_59_getting
    Kopier A-Master-siden i visningen Plan.

  5. Klik på feltet under miniaturebilledet med A-Master-kopien, og omdøb den duplikerede masterside til MasterFlash. Du skal kun bruge siden til at tilføje animeret multimedieindhold på startsiden, mens de øvrige sider stadig peger på A-Master-siden med en statisk version af logoet i sidehovedet.

  6. Højreklik på miniaturebilledet af startsiden. Vælg Mastere > MasterFlash i den menu, der vises. Denne handling knytter MasterFlash-mastersiden til startsiden.

    Bemærk:

    Du kan også trække MasterFlash-miniaturebilledet over miniaturebilledet af startsiden for at anvende den.

Når MasterFlash-mastersiden anvendes, vises dens navn i parentes under miniaturebilledet af startsiden i visningen Plan.

Hvis du klikker på Vis, ser du ikke nogen forskel på startsiden. MasterFlash er en kopi af A-Master-filen, så startsiden vises som før, og det statiske logo vises. I næste underafsnit skal du dog redigere MasterFlash-indholdet for at tilføje animationer, som kun skal vises på startsiden.

Brug af duplikerede mastersider, som ligner hinanden, men dog er forskellige, er en effektiv måde til at fremhæve et bestemt afsnit af et website og gøre startsiden entydig for projektet.

I dette selvstudium kan du lære at bruge mastersider. Vi skal undersøge og dekonstruere tre websitelayout for at se, hvordan du kan skabe interessante effekter og et gennemført website ved hjælp af fælles elementer på en masterside.

Men hvad er så en masterside? Med en masterside kan du anvende fælles elementer såsom sidehoveder, sidefødder, logoer og navigation på flere sider af dit website. Du kan bruge én masterside til dit website eller konfigurere flere mastersider, så du hurtigt og konsekvent kan anvende entydige formater i forskellige sektioner af dit website.

Som standard opretter Muse en tom startside og en tom masterside, når du opretter et nyt website. Disse sider er udgangspunktet for ethvert website. Du kan planlægge kortet over dit website ved hjælp af tomme sider og derefter anvende mastere på dem, eller du kan oprette dit website ved at starte med masteren, anvende den på en enkelt side (siden Hjem) og derefter oprette nye sider ud fra dette design.

Dekonstruktion af websitelayout

Det er praktisk at få kendskab til nye designstrategier for websites ved at gennemgå forskellige mastersidelayout. I denne artikel skal vi undersøge tre forskellige websitelayout, der er oprettet i Muse, og se, hvordan de oprindeligt er konstrueret.

Du kan følge med ved at åbne aktiverne for hvert af disse eksempelwebsites, hente eksempelfilerne, udpakke ZIP-filen og dobbeltklikke på hver .muse-fil for at åbne den i Muse.

Mens du undersøger disse eksempelwebsites, skal du bemærke nogle af de funktioner, der er brugt til at oprette webdesign, som er nemme at navigere i og som hjælper besøgende med at orientere sig, når de går på opdagelse i websitets indhold:

  • Konfigurer egenskaber for website for at definere dimensionerne af alle sider
  • Brug hjælpelinjer til at definere områderne for sidehoved og sidefod på mastersiden
  • Fastgør objekter til browservinduet for at placere dem uden for sidelayoutet
  • Angiv fyld for baggrundsbilledet til rulning eller faste positioner for at skabe interessante effekter
  • Stræk rektangler til visning i 100 % bredde for at udfylde hele browserens bredde
  • Tilføj harmonika-widgets og diasshow-widgets til visning af interaktivt sideindhold
  • Tilpas og formater menu-widgets til navigation på websitet
  • Opret ankerlinks, der springer lodret eller vandret til bestemte sideafsnit
  • Indsæt kode fra tredjeparters websites (integreret HTML) for at tilføje funktioner på sider

Når du besøger de enkelte eksempelwebsites, skal du prøve at rulle i og tilpasse størrelsen på browservinduet for at se, hvordan live-eksemplet virker. Åbn derefter hver .muse-fil i Muse for at se, hvordan mastersider bruges til at standardisere layout af websites og skabe en mere ensartet onlineoplevelse.

Eksempel nr. 1: Happy Valley Adventure

fig01.master.b720

I det første eksempel er sidefodgrafikken fastgjort til bunden af browservinduet. Desuden er sidefodens baggrund indstillet til 100 % bredde for at strække sig over hele sidens bredde i bunden. Det længste sideindhold ruller bag sidefodens forgrund for at skabe en skiftende himmeleffekt. Når du klikker på ankerlinkene i venstre side, flyttes siden lodret til det tilsvarende afsnit. De halvgennemsigtige grafikelementer og den strategiske stakrækkefølge er med til at give indtryk af en flyvende luftballon.

Når du gennemgår .muse-filen til dette website, skal du lægge mærke til følgende:

På mastersiden udgør en række rektangler med farveforløbsudfyldning baggrunden for længere sideindhold.

  • Siden Hjem indeholder en sidefodgrafik med et vandret fliseinddelt baggrundsbillede, der er indstillet til 100 % bredde og er fastgjort til bunden af browservinduet. En anden sidefodgrafik (bjergtoppen) er centreret og også fastgjort til bunden af browseren, og den er arrangeret til at blive vist oven på den anden fliseinddelte sidefodgrafik via Arranger > Læg forrest. Denne strategi giver plads til alle skærmstørrelser.
  • Navigationslinkene i venstre side springer til ankermærker, der er tilføjet på den lange lodrette side. Når besøgende klikker på linkene, rulles siden, så det tilhørende indhold vises Designet virker velafbalanceret og ensartet, når nye afsnit af websitet vises.
  • Kontaktafsnittet på startsiden indeholder integreret HTML, der viser kontaktformularens elementer for at lette kommunikationen med de besøgende og planlægge kommende eventyr.

Eksempel nr. 2: Kevin's Koffee Kart

fig02.master.b720
Dette website i flere niveauer bruger en menu-widget og integrerede HTML-funktioner.

Siden Hjem på websitet Kevin's Koffee Kart indeholder Flash-animation i sidehovedet og fastgjort skygrafik. Når du bruger rullebjælkerne til at navigere på siden, skal du bemærke, at baggrundsbilledet har fast position og ikke rulles, mens sidens indhold ruller oven på det. Der afspilles automatisk et diasshow, som cyklisk skifter billeder under et integreret HTML Twitter-feed.

Menulinjen i sidehovedet er oprettet med en vandret menu-widget for at give websitet gennemgående navigationsknapper, der opdateres automatisk, når du tilføjer nye sider. I dette eksempel er denne menu-widget konfigureret til at vise sider på både øverste niveau og underniveauer.

Brug menuen for at se, hvordan den enkelte side indlæses, når du klikker på knapperne. Sidehovedet og sidefoden er standard på alle siderne, mens sidernes højde varierer efter indhold. Den brune sidefod består af to rektangler, der er indstillet til 100 % bredde for at spænde over hele browservinduets bredde, så alle sider virker ensartede.

Følgende designkonventioner er brugt til at oprette websitet Kevin's Koffee Kart:

  • Dette website har to næsten ens mastersider: Mastersiden uden Flash-mediet er anvendt på de fleste websider, mens den anden masterside med Flash-filmen kun er anvendt på siden Hjem. Begge mastersider har sidefødder med 100 % bredde og gennemsigtige designrammer og bruger samme menu-widget for at skabe ensartethed. Efter oprettelsen af den første master er elementerne kopieret og indsat samme sted i den anden master for at sikre, at alle elementerne er anbragt perfekt.
  • Siderne er organiseret i visingen Plan for at oprette afsnit på websitets øverste niveau og underniveauer, hvilket er afspejlet i menu-widget-rulleelementerne.
  • Kortet på baggrundsbilledet, der er brugt som browserfyld, er indstillet til visning i originalstørrelse i stedet for som fliser. Det er centreret og indstillet til ikke at rulle under sidens indhold.
  • Sidens baggrundsfyld er helt hvidt med let gennemsigtighed, så man kan se kortet på baggrundsbilledet.
  • Siden Hjem indeholder to halvgennemsigtige skybilleder, der er fastgjort til browseren. Rul siden lodret for at se, at de fastgjorte elementer ikke flyttes og forbliver i position, hvis du ændrer størrelsen af browservinduet.
  • Siden Hjem bruger integreret HTML til at vise live Twitter-feedindhold.
  • Siden Koffee indeholder en harmonika-widget, der udvider og skjuler panelerne ved klik for at vise mere indhold i et kompakt område af siden.
  • Siden Origins indeholder en miniaturediasshow-widget, der viser et interaktivt fotogalleri. Siden Preparation bruger ankermærkenavigation til at springe til hvert afsnit af siden, og siden Kart Map indeholder integreret HTML, der viser et live Google-breddegradskort baseret på det aktuelle sted for den mobiltelefon, der bruges af den pågældende konto.

Eksempel nr. 3: More than Square

fig03.master.b720
Kraftigt overlappende fastgjort grafik indrammer det rullende sideindhold.

Når du ser på det færdige eksempel, skal du bemærke, at bygningsgrafikken er fastgjort i øverste højre og nederste venstre hjørne for at indramme sidens indhold. Bygningen i øverste højre hjørne er arrangeret øverst for at overlappe sidens indhold, mens bygningen nederst til venstre vises under siden.

Sideindholdet er centreret, halvgennemsigtigt og forskudt i forhold til arkitekturelementerne med afrundede hjørner. Sideindholdet rulles lodret, og højden skifter, når du klikker gennem siderne. Sociale netværkslinks (Twitter, Facebook og YouTube) er gennemgående i venstre side for at promovere krydslinks og give et gennemført asymmetrisk design på websitet.

Siden Hjem indeholder et fotogalleri med navigationsknapperne Next og Previous, der også er konfigureret til at afspille dias langsomt, hvis den besøgende undlader at klikke på knapperne. Siden How to Get Here indeholder et interaktivt kort, der er oprettet med integreret HTML-kode, som er kopieret fra Google Maps.

Når du gennemgår .muse-kildefilen til dette eksempel, skal du lægge mærke til følgende:

I dette eksempel er næsten alle de fælles sideelementer på mastersiden. Denne strategi gør det lettere at opdatere websitet og foretage ændringer af det individuelle sideindhold.

Mastersiden indeholder en baggrundsgrafik, der ikke kan rulles, til sidefodens billede, som er fastgjort i nederste venstre side af browseren. Mastersiden indeholder også det halvgennemsigtige sidedesign med afrundede hjørner og navigation på websitet.

Alle siderne på websitet har fastgjort grafik i øverste højre hjørne, som er arrangeret til visning oven på sidens indhold for at skabe illusionen om perspektiv, der fortsætter gennem vinklerne på bygningsbillederne.

Muse er et intuitivt designværktøj, som du kan bruge til at udgive dine design til internettet. Kreativ placering af elementer på mastersiderne og det unikke indhold, der vises på hver side, sætter dig i stand til at skabe spændende layout. Du er kun begrænset af din fantasi, når du skal skabe innovative websites til dine kunder.

Du kan få flere tip til arbejdet med Muse ved at besøge siden med hjælp og selvstudier til Muse eller siden med Muse-arrangementer for at se live og optagne webinarer.

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online