Lær at oprette prototyper eller trådrammer på dine websites i Adobe Muse.

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.

Ud over at være meget intuitivt at bruge kan Adobe Muse hjælpe dig med hurtigt at oprette prototyper af webprojekter, som du kan se online. Muligheden for at oprette prøvewebsites betyder, at du kan dele linkene med potentielle kunder, så de kan gennemgå prototyperne online i de samme browsere, som skal vise den endelige version af websitet. Det hjælper kunderne med at se, hvordan det færdige website kommer til at se ud.

fig01.wireframe.b720
Trådrammer indeholder pladsholdere, der angiver placeringen af sideelementer.

Læs videre for at få at vide, hvordan du designer trådrammer, bygger en struktureret planvisning og opretter pladsholderelementer til dit website. Du kan erstatte pladsholderelementerne med rigtige sideelementer, når du er færdig med dit indhold.

Arbejd med trådrammer

Trådrammerne viser sidelayout for websitet og gør det muligt for dig at klikke gennem links for at se, hvordan websitet fungerer. Når du har afprøvet trådrammerne, kan du besøge det endelige live-website for at sammenligne trådrammerne med den færdige version. Bemærk, at pladsholderelementerne i trådrammerne er erstattet af grafik til den endelige version af websitet.

Hvis du vil se, hvordan trådrammerne er konstrueret, kan du downloade eksempelfilerne (ZIP-fil på 4,5 MB). Pak ZIP-filen ud, åbn mappen, og find filen KevinsKoffeeKartWire.muse. Dobbeltklik på den for at åbne trådrammerne i Adobe Muse. Brug visningen Plan til at se, hvordan siderne er organiseret i forskellige niveauer til oprettelse af kortet over websitet. Dobbeltklik på de individuelle sider for at åbne dem i visningen Design, og se, hvordan de er designet.

Adobe Muse har mange funktioner, du kan bruge til at oprette trådrammer:

  • Visningen Design indeholder et valgfrit kolonnegitter, du kan bruge til at justere layoutelementer.
  • De fleksible tegneværktøjer gør det nemt at oprette pladsholderformer til grafik.
  • Panelet Aktiver indeholder funktioner, du kan bruge til at opdatere pladsholderbilleder.
  • I Adobe Muse kan du optimere, oprette udsnit af og eksportere alle billedfilerne, når du udgiver eller eksporterer et website.
  • Med tekstoverskrifter og afsnitsformater kan du let oprette strukturerede sider og ændre tekstformatering.
  • Du kan bruge kommandoen Placer til at gemme din kundes logo direkte fra browseren og derefter placere det i Adobe Muse-filen.
fig02.wireframe.b720
Vælg Filer > Placer for hurtigt at føje brandingelementer til trådrammer.

Design af trådrammer til kundegodkendelse

Efter et indledende møde med din kunde kan du oprette en trådrammeskitse af websitet, der angiver placeringen og funktionaliteten af sideelementer uden websitets endelige grafik og tekstformatering. Formålet med trådrammen er at gengive råskitsen af hver side og oprette en simulering af webpræsentationen uden distraherende farver eller visuelt indhold. Rektangler bruges som pladsholdere for at markere placeringen af billeder, og håndskrevne eller generiske skrifttyper bruges til at vise de områder af siderne, der skal have tekstindhold.

Trådrammer giver følgende fordele:

  • De sætter kunderne i stand til at fokusere på strukturen af et website og dets sidelayout.
  • De giver en interaktiv live-oplevelse, som hjælper kunderne med at gennemgå og godkende websites.
  • De fungerer som kommunikationsværktøj, der tydeliggør websitets design og funktionalitet.

Ud over at være et webdesignværktøj er Adobe Muse også glimrende til prototypeprojekter. Du kan straks oprette en live-prøve-URL og sende den til dine kunder i en e-mail, hvilket forenkler godkendelsesprocessen. Men det er ikke den eneste fordel ved at oprette trådmodelskitser i Adobe Muse.

Trådmodellerne i Adobe Muse tager produktiviteten et skridt videre end andre designværktøjer, fordi rundtursfunktionerne til billedbehandling og de redigerbare afsnitsformater gør det nemt for webdesignere hurtigt at opdatere .muse-filen og konvertere de godkendte trådrammer til den endelige live-version. I stedet for at indhente kundens tilsagn, smide trådrammerne væk og starte forfra med opbygningen af projektet kan du straks gå i gang med at opdatere de godkendte trådrammer for at tilføje det faktiske webindhold og oprette den endelige version. Undervejs kan du udgive alle de ønskede prøvewebsites for at dokumentere udgaverne og dele links med dine kunder, mens websitet videredesignes.

Du kan opbygge websites med trådrammer via dette grundlæggende arbejdsforløb:

  • Du kan konstruere trådrammerne og udgive en gratis prøve.
  • Kunden gennemgår live-websitet ved at klikke gennem siderne.
  • Kunden anmoder om ændringer eller beder om forklaring på designet.
  • Efter eventuelle nødvendige revideringer godkender kunden trådrammerne med sin underskrift.
  • Du opdaterer trådrammewebsitet for at tilføje grafiske elementer og farver.
  • Du opdaterer afsnitsformater for at formatere det eksisterende tekstindhold.
  • Kunden gennemgår den opdaterede version af websitet og anmoder om flere ændringer.
  • Du foretager de ønskede ændringer.
  • Kunden godkender den færdige version.
  • Du opgraderer websitet, opretter domænet og lancerer det endelige website.

Undersøgelse af websitets struktur med visningen Plan i Adobe Muse

Hvis du vil se, hvordan siderne på websitet er placeret i et hierarki, der definerer det øverste niveau og underniveauerne af navigationslinks, skal du åbne .muse-filen med trådrammer i Adobe Muse for at analysere den. Når du åbner projektet, kan du se visningen Plan, som viser alle websitets sider.

fig03.wireframe.b720
Siderne med trådrammer kan ses i visningen Plan.

Bemærk, at der er to niveauer – det øverste niveau og et underniveau – der repræsenterer hierarkiet i kortet over websitet. Du kan til enhver tid under udviklingen eller vedligeholdelsen af et website klikke på og trække disse sider for at flytte dem rundt i websitets struktur.

Sådan opretter du nye sider:

  1. Klik på plustegnet (+) til højre for eller under eksisterende sider, og klik derefter på sidens navnefelt for at skrive dens navn. 

    Sørg for, at alle sidenavne er så sigende som muligt.

  2. Højreklik på en sideminiature, og brug de viste menupunkter til at dublere, slette eller omdøbe den.

    Du kan også lade markøren hvile på en side og klikke på X-ikonet, der vises i øverste højre hjørne, for at slette den.

  3. Hvis du følger med i eksemplet, kan du prøve at tilføje, flytte og slette sider for at ændre kortet over websitet. Vælg Rediger > Fortryd, hvis du vil gendanne den tidligere udgave af websitet med trådrammer.

    Grænsefladen i visningen Plan er intuitiv at bruge, og Adobe Muse registrerer alle sidenavnene og vedligeholder de links, der vises i menu-widgets. Alle de ændringer, du foretager, opdateres automatisk for at sikre, at links ikke brydes.

Brug af grafikformater til oprettelse af pladsholderelementer, der deler attributter

Ligesom Adobe Illustrator- og Adobe Photoshop-software hjælper Adobe Muse dig med at oprette grafikformater, når du skal skabe ensartet udseende og funktionalitet og anvende dem på et sæt af elementer. Det er praktisk til trådrammer (og design af sider), fordi du kan ændre et eksisterende grafikformat for hurtigt at opdatere alle de andre sideelementer, hvor formatet er anvendt. Du kan også kopiere eksisterende formater for at oprette variationer af dem.

Sådan bruger du grafikformater til at anvende attributter på former og oprette pladsholdere til billedfiler i et website med trådrammer:

  1. Brug rektangelværktøjet til at tegne tre rektangler på en side i visningen Design.

  2. Marker et rektangel, og rediger det for at indstille dets stregfarve, fyldfarve og opacitet og tilføje grafikeffekter såsom slagskygger.

  3. Klik på Opret nyt grafikformat, mens rektanglet er markeret, nederst i panelet Grafikformater. Formatet baseres på formateringen af det markerede rektangel. Dobbeltklik på det nye grafikformat for at give det et sigende navn.

  4. Marker en af de andre rektangulære former, og anvend samme grafikformat på den ved at klikke på formatets navn. Gentag dette trin for at anvende formatet på det tredje rektangel, så alle tre rektangler bruger det samme format.

  5. Marker et rektangel, og rediger det for at ændre formatet lidt. Bemærk plustegnet (+) ud for det redigerede formats navn i panelet Grafikformater.

  6. Højreklik på formatets navn i panelet Grafikformater, og vælg Omdefiner format. De to andre rektangler opdateres nu til at matche det nye format, og plustegnet (+) forsvinder.

  7. Brug grafikformater til hurtigt at formatere former for at skabe gennemførte trådrammer og hurtigt opdatere et sæt af webaktiver, når en kunde anmoder om ændringer.

Opbygning af strukturerede websider og formatering af tekst med afsnitsformater

Når du udbygger et website med trådrammer, kan du bruge tekstværktøjet til at oprette tekstrammer og tilføje pladsholdertekst (også kaldet lorem ipsum), som du senere erstatter. Du kan også, hvis din kunde har et eksisterende website, kopiere teksten direkte fra en browser og indsætte den i tekstrammerne. Når du har oprettet tekstelementer, kan du bruge panelet Tekst til at anvende formatering på teksten.

Du kan bruge afsnitsformater til at definere overskriftstekst og afsnitsmærker for at strukturere sidens tekstindhold:

  1. Brug tekstværktøjet i visningen Design til at trække en tekstramme over på siden. Skriv eller indsæt tekst i tekstrammen for at udfylde den.

  2. Brug panelet Tekst eller indstillingerne i kontrolpanelet øverst i arbejdsrummet i visningen Design til at angive formateringsindstillinger som f.eks. valg af skrifttype, skriftstørrelse, skriftfarve og andre egenskaber.

  3. Klik på Opret ny afsnitstype nederst i panelet Afsnitsformater for at oprette et nyt afsnitsformat. Dobbeltklik på navnet på det nye format for at omdøbe det til et sigende navn.

  4. Højreklik på formatet, og vælg Formatindstillinger. Brug menuen Afsnitsmærke til at indstille afsnitsformatet til en specifik HTML-kode såsom P, H1, H2 eller H3.

    fig04.wireframe.b720
    Højreklik på et formatnavn i panelet Afsnitsformater, og brug derefter dialogboksen Formatindstillinger til at definere formatet til en specifik overskrift eller et afsnitsmærke.

  5. Opret et par tekstrammer mere med tekst Bemærk, at hvis du klikker på afsnitsformatets navn, mens en tekstramme er markeret, anvender du formateringen i afsnitsformatet på den markerede tekstramme. Hvis du senere markerer en af tekstrammerne, hvor afsnitsformatet er anvendt, og ændrer det, vises plustegnet (+) ud for formatets navn i panelet Afsnitsformater. Det betyder, at formatet er ændret, og det er samme funktionsmåde som ved grafikformater.

  6. Du kan automatisk opdatere alle tekstrammerne med det samme format ved at højreklikke på formatets navn i panelet Afsnitsformater og vælge Omdefiner format.

    Som du kan se i dette hurtige eksempel, kan du oprette forskellige tekstcontainere og indstille dem til at bruge specifikke formater for at skabe et gennemført design. Når du derefter opdaterer trådrammerne for at designe den endelige version af websitet, er det nemt at opdatere formaterne ud fra kundens ønsker. Oprettelse af strukturerede websider med tekstcontainere er en af de bedste fremgangsmåder, fordi det er med til at optimere rangeringen i søgemaskiner.

Bemærk:

Når du designer sider med rene baggrundsfarver, kan du indstille en matchende baggrundsfyldfarve for tekstrammer. Dermed kan Adobe Muse udgive tekstindhold mere effektivt. Hvis baggrundsfyldet er ukendt, bliver kantudjævningen mindre glat på udgivet tekst, fordi Adobe Muse indstiller tekstrammens baggrundsfarve til at være gennemsigtig. Hvis sidebaggrunden derimod viser farveforløb eller billeder, skal du indstille fyldfarven af tekstrammer til Ingen.

Opdatering af pladsholderbilleder med endelig webgrafik

Når kunden har godkendt trådrammerne, kan du hurtigt opdatere websitet til at bruge de faktiske billedfiler.

  1. Marker en billedpladsholder på siden.

  2. Åbn panelet Aktiver for at finde det valgte sideelement.

  3. Højreklik på sideelementet. I den viste menu har du to valgmuligheder, som du kan bruge til at opdatere billedfilen, afhængig af hvordan du har sammensat websitet med trådrammer.

    Hvis du har oprettet en fil i Adobe Photoshop- eller Adobe Fireworks-softwaren og placeret den på siden, kan du vælge Rediger original for at redigere originalfilen i det produkt, der er brugt til at oprette den. Når du gemmer masterfilen og returnerer til Adobe Muse, bliver de placerede forekomster af filen automatisk opdateret på websitet.

    Hvis du derimod har oprettet pladsholdere til billedfiler i Adobe Muse med rektangelværktøjet, skal du vælge Sammenlænk alle forekomster igen og gennemse for at vælge en fil, der ligger på din computer, for at udskifte en pladsholderfil med det endelige grafikbillede.

    fig05.wireframe.b720
    Højreklik på aktivnavnet, og vælg Rediger original for at åbne masteren for en pladsholderfil i det billedbehandlingsprogram, du har brugt til at oprette den.

  4. Gentag disse trin for at erstatte alle pladsholderbillederne på siden med faktiske billedfiler.

    Bemærk:

    Når du højreklikker på et aktivnavn i panelet Aktiver, kan du også vælge Gå til aktiv. Denne indstilling får Adobe Muse til at åbne den side, der indeholder det valgte aktiv, så du hurtigt kan opdatere det.

Adgang til optimerede billedfiler, der er genereret af Adobe Muse

Ud over at udgive de Adobe Muse-websites, du opretter, til værtsserveren, kan du også eksportere hele websitet for at få mappen med udskårne og eksporterede billedfiler:

  1. Vælg Fil > Eksporter som HTML.

    Dialogboksen Eksporter til HTML vises.

  2. Vælg placeringen på din computer for at eksportere websitets filer, og klik derefter på OK.

Efter denne handling eksporterer Adobe Muse filerne og gemmer dem i den lokale mappe, du har angivet. Naviger til mappen, og åbn billedmappen for at få adgang til de optimerede billedfiler. Du kan genbruge disse billedfiler i nyhedsbreve, mobil-apps, sociale netværkssider og andre relaterede projekter.

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