Obs!

Inga nya funktioner läggs till i Adobe Muse och supporten för Adobe Muse kommer att upphöra den 26 mars 2020. Mer information finns på sidan med information om när Adobe Muse inte längre kommer att vara tillgängligt.

Använda inbäddad HTML-kod till att visa en blogg på din Muse-webbplats

Inbäddad HTML hänvisar till källkoden som genererats av en tredjepartswebbplats, t.ex. Google, YouTube, Flickr eller Picasa. Du kan skapa ett konto på en av dessa webbplatser, logga in och sedan kopiera inbäddningskoden från den webbplatsen och lägga till den på din webbplats.

När du klistrar in inbäddad HTML-kod på en sida är det som att placera ett fönster inuti en sida på webbplatsen som visar innehållet från en tredjepartswebbplats.

Att bädda in HTML -kod är ett bra sätt att snabbt och lätt lägga till komplex information (till exempel kartor, väderutsikter eller aktienoteringar) men även multimedia (som digitala videor, bildspel och ljudfiler). Den här strategin har dessutom fördelen av att låta dig använda en tredjepartswebbplats som en värdtjänst och överföringsgränssnitt. Om du t.ex. skapar ett kostnadsfritt konto på YouTube kan du skapa din egen YouTube-kanal och överföra videoinnehåll för din webbplats. YouTube har en webbsida som förenklar överföringsprocessen och fungerar som värd för videofilerna på deras webbplats. När du vill uppdatera din webbplats lägger du bara till fler videofilmer i din YouTube-kanal, kopierar inbäddningskoden och klistrar in den på en sida för att lägga till nya videofilmer på din Muse-webbplats.

I det här avsnittet kommer du att kopiera källkoden från Tumblr. Detta är en kostnadsfri onlinetjänst som kräver att du skapar ett konto och loggar in, och sedan skapar bloggposter som är publikt tillgängliga. Bloggar är enkla att använda och särskilt användbara när du vill göra det lätt för andra som inte är tekniskt bevandrade att uppdatera sina egna webbplatser. De flesta bloggwebbplatser har ett onlinegränssnitt så att du kan använda vilken webbläsare som helst för att logga in på ditt konto och göra nya inlägg, utan att kunna något om HTML eller annan programvara.

Obs! Besökare som visar din webbplats behöver inte ha ett Tumblr-konto för att visa den blogg som du har bäddat in på sidan. Kontot behövs bara av dig när du utformar webbplatsen, i syfte att skapa en anpassad blogg och generera den inbäddningskod du lägger till på webbplatsen.

  1. Du behöver inte skapa ett Tumblr-konto för den här självstudiekursen för att komma vidare. Kopiera bara följande kod som genererades av Tumblr-webbplatsen efter att skapat en kostnadsfri blogg:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  1. I vyn Planera dubbelklickar du på eventsidans miniatyrbild för att öppna sidan och redigera den i vyn Design.
  2. Klicka mitt på den tomma sidan och använd någon av följande metoder för att bädda in HTML-koden:
  • Välj Redigera > Klistra in eller använd kortkommandot (Kommando+V i OS X respektive Ctrl+V i Windows) till att klistra in koden direkt på sidan.
  • Välj Objekt > Infoga HTML. Klicka i fältet i fönstret Redigera HTML som visas och klistra in innehållet. Klicka på OK för att stänga fönstret Redigera HTML.

Obs! I de flesta fall känner Muse igen HTML-kod och bäddar automatiskt in HTML-koden du klistrar in direkt på sidan. Om du däremot ser koden på sidan istället för innehållet från tredjepartswebbplatsen kan du försöka välja Objekt > Infoga HTML istället.

När du har bäddat in HTML-koden visas en blå markeringsruta med handtag runt bloggposterna som angavs för Katies Cafe Tumblr-konto.

  1. Använd markeringsverktyget och dra i handtagen för att ändra storlek på blogginnehållet, så att det täcker runt 80 % av sidbredden. Centrera blogginnehållet på sidan så att den staplade bakgrundsgrafiken visas till vänster och höger. Blåa mätrektanglar visar avståndet från andra objekt. En röd inpassningsguide visas en kort stund för att ange när det markerade objektet är vertikalt centrerat.
Ändra storlek på och flytta sidan
Ändra storlek på och flytta Tumblr-bloggen på eventsidan.

Det är allt som krävs för att bädda in HTML-kod i Muse-sidor. Om du någonsin vill redigera HTML-koden kan du högerklicka på ett inbäddat HTML-element och välja Redigera HTML i snabbmenyn som visas. Detta öppnar fönstret Redigera HTML så att du kan komma åt den kod du klistrade in tidigare.

Nu är det dags att granska de ändringar du gjort av eventsidan:

  1. Välj Arkiv > Förhandsvisa sidan i webbläsare om du vill se hur eventsidan kommer att se ut i ett nytt webbläsarfönster.

När du bläddrar nedåt i listan med bloggposter kommer du att se hur sidhuvudet visar över de övriga sidelementen. Detta beteende beror på att eventsidan använder förgrundsmallsidan och att sidhuvudinnehållet på den mallsidan är inställt på att visas i förgrunden.

Eventsidan är nu färdig. I nästa avsnitt får du lära dig hur du klistrar in inbäddat HTML-innehåll i en widget, hur du styr hur tredjepartsinnehållet baserat på användarens interaktion.

Bädda in en videofilm på din Muse-webbplats

För närvarande är målbehållaren fylld med en grå fyllningsfärg. Du kan däremot montera alla typer av innehåll i målbehållaren, inklusive olika bildfiler, fyllda rektanglar, text eller inbäddad HTML-kod som du kopierat från en annan webbplats.

I det här exemplet kommer du att klistra in inbäddad HTML-kod som genererats av YouTube.

Föreställ dig att du besökt en sida på YouTube.com för att visa en videofilm du har överfört med ditt konto. Om du klickar på knappen Dela och sedan klickar på Bädda in kan du komma åt och kopiera inbäddningskoden för videon.

Bädda in en videofilm
När du valt önskad videostorlek, kopierar du inbäddningskoden som genererats av YouTube.

För denna videos syfte har inbäddningskoden för videon Katie's Cafe redan kopierats till deras webbplats, så du behöver inte besöka YouTube. Kopiera inbäddningskoden nedan till Urklipp:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

Koden ovan använder iFrame-taggar som omger länken till videofilen som lagts upp på YouTube. En iFrame-ram är en HTML-behållare som gör det möjligt för dig att visa innehåll i ett "fönster" när du lägger till det på webbsidan.

När du har kopierat koden ovan återgår du till Muse.

  1. Använd markeringsverktyget och klicka på den gråa ramen på sidan så att markeringsindikatorn längst upp till vänster visar ordet Sida. Det betyder att hela sidan har markerats.
  2. Klicka på den större målbehållaren med den gråa fyllningsfärgen. Markeringsindikatorn längst upp till vänster visar ordet: Disposition. Klicka på den gråa målbehållaren igen så att markeringsindikatorn visar ordet: Behållare. Klicka på den igen (Mål visas) och sedan ytterligare en gång, tills markeringsindikatorn visar ordet: Bildram. Tryck på Backsteg (Windows) eller Delete (Mac) för att ta bort bildramen från målbehållaren.

När den inre målbehållaren är markerad innefattar nästa del att klistra in den HTML-kod i målbehållaren du kopierade ovan.

Obs! Precis som du upplevde när du klistrade in hjältebilden i målbehållare, kan det vara lite pyssligt att klistra in kod i en målbehållare eftersom målet är att klistra in koden INUTI widgetens målbehållare. Det är möjligt (beroende på det element som du just markerade) att klistra in videokoden utanför widgeten så att den bäddas in direkt på sidan. Så var försiktig när du fortsätter. Om du testar ljuslådan genom att klicka på Förhandsvisa och ser att videon visas fast du inte klickar på hjältebilden än, betyder det att videon inte klistrats in i behållaren, eftersom den visas genast. Videon ska bara visas när du klickar på hjältebilden.

Följ de här stegen för att klistra in videokoden i målbehållaren (medan markeringsindikatorn visar ordet: Behållare).

  1. Välj Objekt > Infoga HTML. I fönstret som visas markerar du standardtexten för platshållare och trycker på Delete (Mac) eller Backsteg (Windows) för att ta bort den. Välj Redigera > Klistra in för att klistra in den YouTube-kod du kopierade ovan i fältet HTML-kod. Klicka på OK för att stänga fönstret för HTML-koden.

Obs! I många fall känner Muse automatiskt av när du klistrar in HTML-kod och förstår att det är HTML och inte vanlig text. Så om du föredrar kan du istället för att välja Objekt > Infoga HTML för att öppna HTML-fönstret också högerklicka (eller kontrollklicka) medan den inre målbehållaren är markerad och välja Klistra in i snabbmenyn som visas. (Eller välj Redigera > Klistra in eller använd kortkommandot för att klistra in källkoden i målbehållaren.) I Muse finns flera metoder som du kan använda för att uppnå samma mål att klistra in videokoden i målbehållaren.

När du har klistrat in koden i målbehållaren visas den första bildrutan i videon (en kopp kaffe). Den första bildrutan i videon anger att du klistrat in HTML-inbäddningskoden på rätt sätt. Videon spelas inte upp medan du redigerar sidan i vyn Design. Den spelas bara upp när du klickar på knappen Förhandsvisa på kontrollpanelen eller förhandsvisar sidan i en webbläsare.

  1. Använd markeringsverktyget och ändra storlek på målbehållaren, om det behöver utökar du måtten till att passa storleken på det inbäddade HTML-videoinnehållet. Bredden ska vara ca 670 pixlar och höjden ska vara ca 415 pixlar. Medan videon är markerad visar markeringsindikatorn ordet HTML-objekt.
  2. Medan målbehållaren är markerad trycker du på Esc för att välja den yttre behållaren. Eller om du föredrar, klicka på en annan plats för att avmarkera ljuslådevisningswidgeten och klicka sedan på den två gånger för att markera dispositionen och sedan igen för att markera den större behållaren. Använd markeringsverktyget och dra behållarens handtag så att målbehållaren centreras i den. Ändra behållarens storlek till bredden 710 pixlar och höjden 460 pixlar.
  3. Använd menyn Fyllning och ställ in fyllningsfärgen för behållaren till en brun färg (#63301B) och ställ in opaciteten för fyllningsfärgen till 100.
Menyn Fyllning
Ange fyllningsfärg och opacitet för behållaren på menyn Fyllning.

  1. Markera textramen längst ned i behållaren och tryck på Delete (Mac) eller Backsteg (Windows) för att ta bort den. Textramen kan befolkad med en bildtext för målinnehållet, men i detta projekt används den inte.
  2. Markera rutan Stäng (med ett X) i det övre högra hörnet av behållaren. Klicka i rutan Stäng för att markera dess etikett och ta bort den. Använd fyllningsmenyn till att ställa in fyllningsfärgen till ingen. Klicka på mappikonen bredvid Bild i menyn Fyllning och bläddra efter filen icon-close.png. Använd markeringsverktyget och ändra storlek på rutan Stäng så att hela stängningsikonbilden visas.
  3. Använd markeringsverktyget och flytta på både målbehållaren och utlösarbehållarna i den riktning där du vill visa dem på sidan.
  4. När dispositionen är markerad klickar du på den blåa pilknappen för att öppna alternativpanelen. I det här exemplet använder du följande inställningar:
    • Placering: Ljuslåda
    • Övergång: Toning
    • Spela upp automatiskt: Avaktiverat
    • Blanda: Avaktiverat
    • Dölj alla ursprungligen: Avaktiverat
    • Aktivera svepning: Aktiverat
    • Utlösare överst: Avaktiverat
    • Stängningsknapp: Avaktiverat
    • Visa ljuslådedelar vid redigering: Aktiverat
    • Visa alla i designläget: Aktiverat
Kompositionsalternativ
Uppdatera inställningarna i alternativmenyn för att styra hur widgeten beter sig.

Klicka på en plats utanför alternativmenyn för att stänga den. Nu är widgeten konfigurerad och redo att testas.

Tidigare i den här självstudiekursen lärde du dig att bädda in HTML-kod på sidor för att lägga till en Tumblr-blogg på eventsidan. Du såg också hur du klistrar in inbäddad HTML-kod i kompositionswidgeten Ljuslådevisning och visar en YouTube-video i ett ljuslådefönster när besökaren klickar på en knapp. I det här avsnittet kommer du att utforska en annan typ av inbäddad HTML som du får från Google Maps-webbplatsen. Gör så här:

  1. Om besökssidan inte redan är öppen i vyn Design klickar du på Planera och dubbelklickar sedan på miniatyrbilden för besökssidan för att redigera den.

Den här källkoden kopierades från webbplatsen maps.google.com. Du kan skapa en anpassad karta för en adress (eller, i det här fallet, flera platser). Det här är en kostnadsfri tjänst - du anger helt enkelt adressen (eller adresserna) och klickar på knappen Skapa karta.

Klicka på Skapa karta
Klicka på Skapa karta för att generera en karta baserad på de adresser du anger.

När du har skapat en karta kan du med Google Maps-gränssnittet ange titel och beskrivning. Sedan kan du klicka på länkknappen för att visa koden. Markera HTML-koden i fältet Klistra in HTML för att bädda in på webbplats. Nu kan du återgå till Muse och bädda in HTML-koden på en sida.

Lägga till HTML-kod på sidan
Du kan använda Google Maps-gränssnittet till att generera HTML-koden för kartan.

I den här självstudiekursen behöver du själv inte skapa en ny karta. Du kan experimentera själv genom att ange en annan adress, skapa en karta och kopiera koden. Om du dock föredrar att bara testa hur det fungerar kan du arbeta med förgenererade HTML-koder.

  1. Kopiera följande källkod:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

  1. Klistra in koden överst på besökssidan. Använd markeringsverktyget för att placera den inbäddade HTML-koden i sidans vertikala mittpunkt, nära toppen, så att ungefär en fjärdedel av kartan överlappar sidhuvudsområdet. Se till att det finns lite plats mellan kartan och blombilden under den, så att du kan lägga till en textbeskrivning.
  2. Använd textverktyget för att dra en textram till området under den inbäddade kartan. Kopiera följande text och klistra in den i textramen:

Även om alla våra bagerier förkroppsligar grannskapets unika karaktär, är de alla sammanbundna av Katies oklanderliga känsla för detaljer, engagemang för service, och, framför allt, kärlek till god mat.

  1. I panelen Text använder du följande inställningar för att formatera texten:
    • Teckensnitt: Droid Serif (eller annat serif-teckensnitt)
    • Teckenstorlek: 14
    • Teckenfärg: #222222
    • Justering: Vänster
    • Radavstånd: 120 %

När du har lagt till beskrivningen för kartan är besökssidan klar.

  1. Välj Arkiv > Förhandsvisa sidan i webbläsare för att se hur den ser ut i en webbläsare.
Webbsida med karta
Den färdiga besökssidan innehåller en fullt fungerande Google-karta.

Observera att den inbäddade HTML Google-kartan är interaktiv. Du kan klicka på pilarna för att panorera i kartan inom dess fönster och du kan även klicka på knapparna + och - för att zooma in och ut.

Webbplatsdesignen är nu färdig för alla sidor. I de återstående avsnitten av den här självstudiekursen lär du dig hur du lägger till de sista detaljerna och publicerar webbplatsen under en kostnadsfri testperiod.

 Bädda in HTML på dina Adobe Muse-sidor

Du kan bädda in HTML-kod på webbplatssidor och lägga till komplexa webbplatsfunktioner som visas dynamiskt från en tredjepartswebbserver. Dessa kodsträngar kan kopieras från alla olika webbleverantörer, till exempel Google, Yahoo, YouTube och många andra, och sedan enkelt klistras in på Muse-sidorna. I detta avsnitt får du titta närmare på två olika exempel med inbäddad HTML-kod och lära dig hur du snabbt kan lägga till innehåll för sociala medier samt en interaktiv Google-karta på en webbplats som skapats i Muse.

Du börjar med att slutföra startsidan. Om du följer med i beskrivningen kan startsidan redan vara öppen i vyn Design. Om inte dubbelklickar du på miniatyrbilden för startsidan i vyn Planera för att öppna den för redigering i vyn Design. Du lägger till den inbäddade HTML-koden ovanför bildspelet som du tidigare har lagt till på startsidan.

Lägga till ett inbäddat Twitter-flöde med hjälp av HTML-kod för att visa de senaste inläggen

Du kan för många olika webbtjänster öppna ett kostnadsfritt konto, inklusive Twitter, som gör att du kan visa meddelanden som visas på webbplatsen. Förutom att visa informationen på Twitter.com kan du även använda ditt konto för att logga in och kopiera den inbäddade koden för att visa samma meddelanden på en webbplats som du skapar själv.

I det här exemplet har ett påhittat konto för Kevin's Koffee Kart upprättats. Detta inbegriper att logga in på Twitter som en ny användare och att fylla i registreringsformuläret. Därefter kan du använda platsens gränssnitt för att skicka meddelanden och kopiera inbäddad kod som gör att du kan visa dem var som helst på webben. Detta är samma process som du använder för att dela bloggar, videoinnehåll, RSS-flöden, aktieinformation, väderprognoser, sportresultat och många andra typer av dynamiska data. Om du skapar en plats för en kund ska du fråga om de redan använder dessa tjänster för att dela information med sina kunder. I många fall kan du använda kundens kontoinformation för att logga in och hämta den inbäddade koden för de data som du vill visa.

Om du inte vill behöva logga in på Twitter själv och skapa ett eget konto, anges inbäddningskoden för Kevin's Koffee Karts Twitter-konto här:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

  1. Kopiera koden som visas ovan.

  2. Gå tillbaka till Muse. Ofta kan du bara klicka på den önskade platsen på sidan, högerklicka och välja Klistra in i sammanhangsmenyn som visas. Du kan också använda kortkommandot för att klistra in på tangentbordet (Kommando+V för OS X och Ctrl+V för Windows). Muse identifierar texten du klipper in som källkod, och inte vanlig text.

    Obs!

    Om det skulle hända att texten inte känns igen som HTML-kod kan du välja Objekt > Infoga HTML och öppna HTML-kodfönstret. Därefter klistrar du bara in källkoden du kopierade i fönstret och klickar på OK. Fönstret stängs och koden bäddas in.

  3. När du bäddar in källkoden innebär det i stort sett att ett fönster skapas på sidan på din webbplats där länkat material från en tredjepartswebbplats visas. Det kan hända att det inte visas som du hade tänkt. Standardvisningen av inbäddat HTML-material från Twitter visas nedan.

    Bädda in källkod
    Flödesinformationen från Twitter visas som väntat, men texten är inte anpassad och formaterad.

  4. Öka storleken på området med flödesinformation från Twitter genom att klicka på handtagen som omger den inbäddade HTML-koden. Utöka bredden på området så att det fyller det mesta av sidan och omkring en tredjedel av höjden.

    Expandera rutan med inbäddningskod
    Sträck bredden och höjden på fönstret med Twitter-flödesdata så att det blir mycket större.

    Det betyder att texten kan visas på ett mycket större område, även om texten för närvarande fortfarande är i standardstorlek.

    Därefter uppdaterar du koden i HTML-kodfönstret och lägger till CSS-format som definierar hur den dynamiska texten visas. Den här åtgärden påverkar inte hur de publicerade meddelandena visas på Twitter.com, men det ändrar formateringen av texten på din webbplats.

  5. Kopiera följande CSS-formatkod:

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </format>

    Obs!

    Ta tid att bekanta dig med koden här ovan och observera att formaten omslutes av en öppningstagg som anger vad koden är () och sedan en avslutningstagg som gör att webbläsaren vet att CSS-formatsreglerna är klara (). När du formaterar egen inbäddad HTML-kod ska du använda dessa taggar som markeringar runt formaten som du vill påverka. I det här fallet är Twitter-webbplatsen värd för de skickade meddelandena och med CSS id-väljaren #twitFeed kontrollerar du hur texten visas på webbplatsen. Så i koden ovan är det viktigt att använda formatnamnet (som hämtas från Twitter-webbplatsen) och sedan lägga till regler som definierar hur texten ska visas på webbplatsen så att formaten som hämtas från Twitter.com åsidosätts. Om du vill ha mer information om CSS-regler för formatering av textinnehåll går du till webbplatsen W3C Schools.

  6. Högerklicka i fönstret med den inbäddade HTML-koden och välj HTML på snabbmenyn som öppnas. Nu öppnas fönstret HTML-kod och du ser nu källkoden som du klistrade in tidigare. Du kan när som helst när du redigerar en webbplats öppna det här fönstret och uppdatera innehållet för HTML-källan. Klicka ovanför HTML-koden, som du bäddade in tidigare, högst upp i fönstret. Klistra in den nya formatkoden som du kopierade i steg 5.

    Inbäddad HTML-kod
    Klistra in formatkoden i fönstret för HTML-koden ovanför Twitter-källkoden som du klistrade in tidigare.

  7. Klicka på OK för att stänga HTML-fönstret. När du har gjort den här ändringen av formatet för Twitter-texten visas inlägget som är länkat från Twitter med vit text i ett mycket större format ovanför startsidans bildspel.

    Webbsida med Twitter-text
    Den fullständiga Twitter-flödet när du har uppdaterat storleken på HTML-objektet och formaterat textformatet.

Startsidan är nu nästan klar. Det återstår bara ett sista element att lägga till på sidan.

  1. Välj Arkiv > Montera. I dialogrutan Importera bläddrar du efter och väljer filen DailyDrip.png i mappen Kevins_Koffee_Kart. Klicka på Välj.

  2. När du har placerat bilden på startsidan använder du markeringsverktyget och placerar bilden på vänster sida, nära bildspelets övre kant, så att den delvis överlappar bildspelets övre del.

  3. Klicka på Förhandsvisa för att titta på det animerade bildspelet och för att se hur det visas under Daily Drip och de bruna droppbilderna.

    Den slutgiltiga utformningen av startsidan
    Den slutgiltiga utformningen av startsidan.

Klicka på länken Planera för att återgå till vyn Planera när du har förhandsvisat startsidan.

Därefter ska du lägga till en annan typ av inbäddad HTML-kod till KART MAP-sidan.

  1. Dubbelklicka på miniatyrbilden KART MAP, öppna sidan i vyn Design och börja redigera den.

  2. Använd textverktyget och dra en textram på sidan KART MAP, nära överdelen av sidans innehåll, direkt under rubriken.

  3. Skriv in följande text: Looking for the Koffee Kart? Check here for real-time location updates throughout the day.

  4. Öppna panelen Styckeformat när texten är markerad. Klicka på formatet med namnet Georgia Body Medium för att använda styckeformatet på rubriktexten på sidan KART MAP.

Använda inbäddad HTML-kod till att infoga en Google-karta på din Muse-webbsida

Videosjälvstudiekurs

Videosjälvstudiekurs
lynda.com - James Fritz

I detta avsnitt kommer du att lägga till innehåll på KART MAP-sidan med inbäddad HTML-kod som läser in en karta som genereras av Google Maps. Detta är bara ytterligare ett exempel på möjligheterna när du använder inbäddad HTML-kod på webbplatsen. Du kan infoga innehåll från många andra tredjepartswebbplatser, till exempel YouTube, Flickr eller Picasa, samt formulär, bloggar och andra komplexa webbplatsfunktioner, som du kan kontrollera genom ditt konto och lägga ut som innehåll på dina webbplatser.

  1. Öppna ett nytt webbläsarfönster och gå till Google Maps.

  2. Skriv in en adress eller en sökterm, till exempel Adobe SF, och leta rätt på en verklig plats som du kan använda till att skapa kartan.

  3. Klicka på länkknappen som visas i det övre högra hörnet av gränssnittet och sedan på alternativet för att anpassa och förhandsvisa den inbäddade kartan.

  4. I fönstret Anpassa som visas ställer du in standardkartstorleken på bredd 850 och höjd 470. Flytta kartan inom fönstret så att adresstexten är fullt synlig.

  5. Kopiera den resulterade HTML-koden från Google-fönstret. Om du inte vill skapa en egen Google Map-kod kan du kopiera källkoden här nedan:

    <!-- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <!-- Om du vill avaktivera platsdelning "måste" du gå till https://www.google.com/latitude/apps/badge och avaktivera Google Public Location-emblemet. Det räcker inte med att ta bort kodavsnittet! -->

    Kopiera HTML-källkoden från Google Maps-fönstret
    Kopiera HTML-källkoden från Google Maps-fönstret.

  6. Gå tillbaka till Muse. Högerklicka på sidan och välj Klistra in för att montera koden. Du kan också välja Objekt > Infoga HTML för att öppna fönstret HTML-kod eller använda kortkommandot för att klistra in koden (Kommando+V för OS X respektive Ctrl+V för Windows).

  7. Använd markeringsverktyget för att placera kartan till vänster på sidan.

  8. Klicka på Förhandsvisa för att se hur Google Maps kommer att visas för besökare på den publicerade webbplatsen. Klicka på navigeringsknapparna för kartan och observera att de är helt interaktiva och att du kan zooma in eller flytta runt på kartan i det inbäddade fönstret.

Lägga till iFrame-ramar på webbplatsen för att visa andra webbplatssidor med inbäddad HTML-kod

Förutom att använda inbäddad HTML för att infoga kod som du har klistrat in från en tredjepartswebbplats, kan du även använda samma metod för att bädda in en hel webbsida i en iFrame-ram. Du kan till exempel skriva kodavsnitt som det här:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

I koden ovan ersätter du texten i title="" och url="" med den önskade externa webbsidans rubrik och webbadress. Du kan även ändra bredd- och höjdvärden för iFrame-fönstret så att de anpassas till din webbplats design.

Genom att lägga följande i den inledande iFrame-taggen kan du även lägga till ett attribut som säkerställer att ingen rullningslist visas i iFrame-fönstret:

scrolling="no"

Om du väljer Objekt > Infoga HTML kan du öppna ett nytt fönster för HTML-koden och bädda in ett iFrame-fönster var som helst på webbplatsen och sedan ange en webbadress (till exempel www.google.com) för att visa en webbplats direkt från internet i det.

Du kan också använda ett iFrame-fönster för att bädda in animeringar, till exempel HTML5-animeringar skapade i Adobe Edge. Sök efter namnet på HTML-filen som skapades i Adobe Edge och använd filnamnet i URL-attributet för din iFrame-ram:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Därefter ska du överföra HTML-filen från Adobe Edge (och beroende filer) till samma värdserver tillsammans med dina Muse-filer för webbplatsen. Om du exporterar platsen med FTP kan du kopiera HTML-filen till mappen som skapas i Muse under exportprocessen. Om du publicerar direkt till värdservrarna för Adobe Business Catalyst® genom att klicka på publiceringslänken i Muse, kan du använda Adobe Dreamweaver® eller någon annan FTP-klient för att överföra filerna. Lär dig mer om hur du överför filer via FTP till värdservrarna för Business Catalyst genom att gå till Publicera webbplatser.

Formatera elementen i ett kontaktformulär

Genom att använda vissa standardiserade CSS-regler kan du formatera element i det kontaktformulär som du skapade i gränssnittet i administrationskonsolen i Business Catalyst. Du kan ändra det sätt på vilket formuläret och formulärelementen visas så att det stämmer med sidans design.

När du har klistrat in formulärets källkod från administrationskonsolen på Muse-sidan visas formuläret med standardformatmallarna.

Klistra in HTML-kod
När du har klistrat in en HTML-kod visas formuläret på sidan.

Precis som med andra element kan du använda sidohandtagen för att ändra storleken på formuläret och för att flytta det på sidan till önskad position.

Högerklicka (eller kontroll-klicka) på formuläret och välj HTML i listan som visas.

Använda snabbmenyn till att välja HTML-koden
Använd snabbmenyn för att välja HTML i alternativlistan.

Fönstret med HTML-koden öppnas. Här visas koden som du klistrade in från admin-konsolen på sidan. Placera markören högst upp, före den första kodraden och tryck på Enter några gånger för att flytta formulärkoden nedåt och gör några blanksteg för att lägga till formatmallar.

Tryck på Enter för att lägga till några rader över den befintliga koden
Tryck på Enter för att lägga till några rader över den befintliga koden.

Det är i det här området ovanför formulärkoden som du kan klistra in eller ange CSS-reglerna som ska användas för att påverka utseendet på formulärelementen.

Om du vill veta hur det fungerar ska du kopiera koden nedan:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</format>

Klistra in koden överst i HTML-fönstret, ovanför formuläret.

Klistra in CSS-format i överkanten av HTML-fönstret
Klistra in CSS-format i överkanten av HTML-fönstret.

Klicka på OK för att stänga HTML-fönstret. Observera att formulärets utseende har uppdaterats med den nya formateringen. Klicka på Förhandsvisa eller välj Arkiv > Förhandsvisa sida i webbläsaren för att se hur den kommer att visas på den publicerade webbplatsen.

Du kan använda samma strategi för att kontrollera många av de olika formulärelementen som omfattas när du lägger till koden för kontaktformuläret som du kopierade från Business Catalyst.

Ta dig tid att gå igenom koden som du har klistrat in högst upp i fönstret. Observera de båda style-taggarna högst upp och längst ned i CSS-reglerna som omger dem. Detta är viktigt; utan en inledande och en avslutande style-tagg kommer CSS-reglerna inte att fungera. Det här är de båda style-taggarna visade var och en för sig:

<style type="text/css">

</format>

De inledande och avslutande style-taggarna anger för webbläsaren att koden däremellan innehåller CSS-formateringsregler. Se till att dessa taggar alltid finns på plats högst upp i fönstret, innan du klistrar in CSS-reglerna däremellan.

När du vill göra ändringar i dina formulärelement för att uppdatera deras utseende, gäller det att anropa "klassen" (som är namnet som tilldelats de olika elementen i formuläret), ange egenskapen som ska uppdateras och ställ sedan in dess attribut.

Titta på kodraden här nedan:

input.textarea {

background-color: #fff;

}

Ordet input.textarea är namnet som tilldelats till en typ av textfält (dess "klass"). Därefter på nästa rad anropas egenskapen som du vill ändra. I det här fallet avser background-color bakgrundsfärgen för textfältet. Efter kolon anges #fff som är ett kortare sätt i CSS-koden att skriva #ffffff (som är det hexadecimala värdet för den vita färgen).

På vanlig svenska säger regeln här ovan: Ställ in bakgrundsfärgen för den här typen av textfält till vit.

Om du vill uppdatera formuläret kan du även tilldela bakgrundsfärgen i textfältet till ett vanligt webbfärgsvärde: rött. Koden nedan anger att bakgrundsfärgen för textfältet ska vara röd:

input.textarea {

background-color: red;

}

CSS-regler är skrivna i ett eget språk. Precis som när du lär dig ett nytt språk krävs det lite övning för att förstå hur det fungerar. Om du vill få mer information om syntaxen (grammatiken som används för att skriva dessa regler), ska du gå igenom de utmärkta självstudiekurserna och läsa CSS-referenshandböckerna som finns gratis på internet via W3Schools.

När du ska börja redigera egna kontaktformulär, kan du använda listan nedan för att identifiera klassnamnet och tillhörande egenskaper som du kan ändra för varje formulärelement.

Obs!

Kom ihåg att alltid omge din lista med CSS-regler med en inledande och en avslutande formattagg eftersom webbläsaren (och vyn Design) annars inte kan återge reglerna:

<style type="text/css">

</format>

Ta bort standardelementen från den övre delen i kontaktformuläret

Standard är att när du klistrar in formuläret på sidan kommer det att börja med följande två element.

Om du vill ta bort något eller båda av dessa element, öppnar du HTML-fönstret och tittar på källkoden som du klistrade in (direkt under CSS-formattaggen som du kan ha lagt till).

Om du vill ta bort *Required-raden ska du leda reda på den här kodraden och ta bort den:

<span class="req">*</span> Required

Om du vill ta bort etiketten Title ska du leta reda på den här kodraden och ta bort den:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Obs!

Var försiktig när du redigerar HTML-koden så att du inte oavsiktligt tar bort andra taggar än de som anges ovan. När du tar bort ett enskilt extratecken, som exempelvis >, kan det få formuläret att falla samman. Om detta inträffar kan du gå tillbaka till admin-konsolen och kopiera koden och klistra in den på nytt på sidan, och ersätta den kod som du redigerade.

Listan med klasser och egenskaper för att lägga till CSS-regler och formatera kontaktformulär

När du tilldelar färgvärden kommer du att få en mycket större variation av färger om du använder ett online-verktyg, till exempel Kuler eller ett bildredigeringsprogram (Photoshop eller Fireworks), för att skapa hexadecimala färgvärden. Hexadecimala färgvärden börjar alltid med symbolen # följt av en kombination av 3 eller 6 alfanumeriska tecken (0-9 och A-F).

Det kan vara enklare att använda pipetten i Muse för att välja färger från den befintliga designen. Du kan kopiera hexadecimala färgvärden från fältet i färgväljaren och klistra in dem i koden. Följande 16 webbfärger kan emellertid anges med namn. De kan vara mycket praktiska att använda när du vill testa en regel:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White och Yellow

När du anger färgerna med namn ska du inte använda symbolen # före färgen.

Följande lista är inte uttömmande eftersom det finns många olika kombinationer (och många andra egenskaper som du kan använda) som påverkar elementen. Använd dessa förslag till att börja med. Dubbelklicka för att markera ett kodavsnitt och kopiera det sedan till Urklipp.

Fler tips om hur du arbetar med Muse finns i hjälpen för Adobe Muse och på Muse Events-sidan med inspelade webbseminarier och realtidswebbseminarier.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy