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.

Bruke innebygd HTML til å vise en blogg på et Muse-område

Innebygd HTML refererer til kildekoden som ble generert av tredjepartswebområder, for eksempel Google, YouTube, Flickr eller Picasa. Du kan konfigurere en konto med disse webområdene, logge på og deretter kopiere den innebygde koden fra deres område og legge den til på ditt område.

Når du limer inn innebygd HTML på en side, skjer det samme som når du plasserer et vindu på en side på området ditt, og det vinduet viser innholdet fra et tredjepartsområde.

Innebygd HTML er en god metode for å legge til kompleks informasjon (for eksempel kart, værvarsler, aksjekurser) og rikt medieinnhold (for eksempel digitale videoer, lysbildefremvisninger og lydfiler) på en rask og enkel måte. Denne strategien har den fordelen at du kan bruke et tredjepartsområde som vertstjeneste til å laste opp et grensesnitt. Hvis du for eksempel oppretter en gratiskonto hos YouTube, kan du opprette din egen YouTube-kanal og laste opp videoinnholdet for området ditt. YouTube inkluderer en webside som forenkler opplastingen og drifter videofilene på området. Når du vil oppdatere området, legger du til flere videoer i YouTube-kanalen, kopierer den innebygde koden og limer den deretter inn på en side for å legge til nye videoer på Muse-området.

I denne delen skal du kopiere kildekoden fra Tumblr. Dette er en gratis Internett-tjeneste som krever at du oppretter en konto og logger på, og deretter må du publisere innlegg som er tilgjengelige for alle. Blogger er enkle å bruke og er spesielt nyttige når du vil gjøre det enkelt for noen som ikke er tekniske eksperter, å oppdatere området sitt. De fleste bloggområder har et webbasert grensesnitt, slik at du kan bruke en hvilken som helst webleser til å logge på kontoen og publisere nye innlegg uten at du har kunnskap om HTML eller annen programvare.

Merk: Besøkende som viser webområdet ditt, trenger ikke ha en Tumblr-konto for å vise bloggen du bygger inn på siden. Det er bare du som designer området som trenger en konto, slik at du kan opprette en egendefinert blogg og generere innebyggingskoden du legger til webområdet ditt.

  1. Det er ikke nødvendig å opprette en Tumblr-konto for å følge denne opplæringen. Du trenger bare kopiere følgende kode, som ble generert av webområdet Tumblr etter at du opprettet en gratis 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 Planlegg-visning dobbeltklikker du miniatyren for hendelsessiden for å åpne siden og redigere den i Design-visning.
  2. Klikk midt på den tomme siden og bruk én av følgende metoder til å bygge inn HTML-koden:
  • Velg Rediger > Lim inn eller bruk snarveiene på skrivebordet (Kommando + V for Mac eller Ctrl + V for Windows) til å lime inn koden på siden.
  • Velg Objekt > Sett inn HTML. Klikk i feltet i Rediger HTML-vinduet som vises, og lim deretter inn innholdet. Klikk OK for å lukke Rediger HTML-vinduet.

Merk: I de fleste tilfeller vil Muse gjenkjenne HTML-kode og vil bygge inn HTML-koden du limer inn, automatisk på siden. Hvis du imidlertid vil vise koden på siden i stedet for innholdet fra tredjepartswebområdet, velger du i stedet Objekt > Sett inn HTML.

Når du har bygget inn HTML-koden, vises det en blå grenseboks med håndtak rundt blogginnleggene som ble publisert for Tumblr-kontoen for Katie's Cafe.

  1. Bruk markeringsverktøyet til å dra håndtakene for å endre størrelsen på blogginnholdet, slik at det strekker seg over omtrent 80 % av sidebredden. Midtstill blogginnholdet på siden, slik at bakgrunnsgrafikken side ved side vises tydelig på venstre og høyre side. Blå målrektangler viser avstanden fra objekt til objekt. Det vises en rød justeringshjelpelinje et kort øyeblikk for å angi når det merkede objektet er midtstilt vertikalt.
Endre størrelsen til og plasseringen av siden
Endre størrelse på og posisjoner Tumblr-bloggen på hendelsessiden.

Det er alt som kreves for å bygge inn HTML på Muse-sider. Hvis du har tenkt å redigere HTML-koden, kan du høyreklikke et innebygd HTML-element og velge Rediger HTML på kontekstmenyen som vises. Dette åpner Rediger HTML-vinduet, slik at du har tilgang til koden du limte inn tidligere.

Nå er det på tide å se gjennom endringene du har gjort på hendelsessiden:

  1. Velg Fil > Forhåndsvis side i webleser for å vise hendelsessidevisningen i et nytt webleservindu.

Når du blar nedover listen over bloggoppføringer, må du være oppmerksom på at toppteksten vises over annet innhold på siden. Denne virkemåten forekommer fordi hendelsessiden bruker Forgrunn-malsiden, og topptekstinnholdet på den malsiden er satt til å vises i forgrunnen.

Hendelsessiden er nå komplett. I den neste delen skal du lære hvordan du limer inn innebygd HTML-innhold i et kontrollprogram for å kontrollere hvordan tredjepartsinnholdet vises basert på brukersamhandling.

Bygge inn en video på et Muse-webområde

Målbeholderen er for øyeblikket fylt med en grå fyllfarge. Du kan imidlertid plassere alle typer innhold i målbeholderen, inkludert forskjellige bildefiler, fylte rektangler, tekst eller innebygd HTML du har kopiert fra et annet webområde.

For dette eksemplet limer du inn innebygd HTML som ble generert av YouTube.

Tenk deg at du besøkte en side på YouTube.com for å vise en video du lastet opp ved hjelp av kontoen din. Hvis du klikker på Del-knappen og deretter Bygg inn, kan du kopiere den innebygde koden for videoen.

Bygge inn en video
Når du har valgt den ønskede videostørrelsen, kopierer du den innebygde koden som ble generert av YouTube.

For denne videoen har den innebygde koden for Katie's Cafe-videoen allerede blitt kopiert til området, og dermed trenger du ikke gå til YouTube. Kopier den innebygde koden nedenfor for å lagre den på utklippstavlen:

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

Koden ovenfor bruker iFrame-koder til å omslutte koblingen til videofilen som er publisert på YouTube. En iFrame er en HTML-beholder som gjør at du kan vise innhold i et "vindu" når du legger det til på websiden.

Når du har kopiert koden ovenfor, returnerer du til Muse.

  1. Bruk markeringsverktøyet til å klikke den grå kantlinjen for siden, slik at markeringsindikatoren i hjørnet øverst til venstre viser ordet Side. Dette betyr at hele siden er merket.
  2. Klikk den største målbeholderen med den grå fyllfargen. Markeringsindikatoren øverst i venstre hjørne viser ordet Komposisjon. Klikk den grå målbeholderen på nytt slik at markeringsindikatoren viser ordet Beholder. Klikk feltet på nytt (det heter Mål) og deretter en gang til helt til markeringsindikatoren viser ordet Bilderamme. Trykk Tilbake-tasten (Windows) eller Delete-tasten (Mac) for å fjerne bilderammen fra målbeholderen.

Mens den innerste målbeholderen fortsatt er merket, omfatter den neste delen at du limer inn HTML-koden du kopierte ovenfor, til målbeholderen.

Merk: På samme måte som du erfarte da du limte inn hovedbildet i utløserbeholderen, kan det være utfordrende å lime inn kode i en målbeholder fordi målet er å lime inn koden INNE I målbeholderen i kontrollprogrammet. Det er mulig (avhengig av elementet du har merket) å lime inn videokoden utenfor kontrollprogrammet, slik at det bygges inn direkte på siden. Fortsett derfor med varsomhet. Hvis du tester lysboksen ved å klikke Forhåndsvis og ser at videoen vises selv om du ikke har klikket hovedbildet ennå, betyr det at videokoden ikke ble limt inn i beholderen på riktig måte, noe som er årsaken til at den vises umiddelbart. Videoen bør bare spilles av når du klikker hovedbildet.

Følg disse trinnene for å lime inn videokoden i målbeholderen (mens markeringsindikatoren viser ordet Beholder).

  1. Velg Objekt > Sett inn HTML. I vinduet som vises, velger du standard plassholdertekst og trykker Delete-knappen (Mac) eller Tilbake-knappen (Windows) for å fjerne den. Velg Rediger > Lim inn for å lime inn YouTube-koden du kopierte ovenfor, til feltet HTML-kode. Klikk OK for å lukke HTML-kode-vinduet.

Merk: I mange tilfeller vil Muse automatisk registrere når du limer inn HTML-kode, og Muse vil forstå at det er HTML i stedet for vanlig tekst. Hvis du foretrekker det, kan du i stedet for å velge Objekt > Sett inn HTML for å åpne HTML-vinduet høyreklikke (eller Ctrl-klikke) mens den innerste målbeholderen er merket, og deretter velger du Lim inn på kontekstmenyen som vises. (Eller velg Rediger > Lim inn eller bruk snarveiene på skrivebordet til å lime inn kildekoden i målbeholderen). Muse har mange metoder for å oppnå det samme målet med å lime inn videokoden i målbeholderen.

Når du har limt inn koden i målbeholderen, vises den første rammen i videoen (en kaffekopp). Den første rammen i videoen angir at den innebygde HTML-koden ble limt inn. Videoen spilles ikke av mens du redigerer siden i Design-visningen. Den spilles bare av når du klikker Forhåndsvisning-knappen i kontrollpanelet eller forhåndsviser siden i en webleser.

  1. Bruk markeringsverktøyet til å endre størrelse på målbeholderen, hvis det er nødvendig, for å utvide dimensjonene slik at de passer til størrelsen på det innebygde HTML-videoinnholdet. Bredden må være omtrent 670 bildepunkter, og høyden må være omtrent 415 bildepunkter. Mens videoen er merket, viser markeringsindikatoren ordet HTML-element.
  2. Mens målbeholderen er merket, trykker du Esc-tasten én gang for å merke den ytre beholderen. Hvis du foretrekker det, kan du klikke utenfor for å fjerne merket for kontrollprogrammet for lysboksvisning, og deretter klikker du det to ganger: én gang for å velge komposisjonen, og deretter for å velge den største beholderen. Bruk markeringsverktøyet til å dra håndtakene til beholderen slik at målbeholderen vises midt i beholderen. Endre størrelsen på dimensjonene til beholderen til en bredde på 710 bildepunkter og en høyde på 460 bildepunkter.
  3. Bruk Fyll-menyen til å sette fyllfargen for beholderen til en brun farge (#63301B), og til å sette tettheten for fyllfargen til 100.
Fyllmeny
Angi fyllfargen og tettheten for beholderen på Fyll-menyen.

  1. Merk tekstrammen nederst i beholderen og trykk Delete-knappen (Mac) eller Tilbake-knappen (Windows) for å fjerne den. Tekstrammen kan fylles med en bildetekst for målinnholdet, men i dette prosjektet brukes den ikke.
  2. Klikk X-tegnet i hjørnet øverst til høyre i beholderen for å lukke den. Klikk i Lukk-boksen for å merke boksens etikett og slette den. Bruk Fyll-menyen til å sette fyllfargen til Ingen. Klikk mappeikonet ved siden av Bilde-delen på Fyll-menyen, og bla for å velge filen icon-close.png. Bruk markeringsverktøyet til å endre størrelse på Lukk-boksen slik at hele Lukk-ikonet vises.
  3. Bruk markeringsverktøyet til å omplassere både målbeholderen og utløserbeholderne, slik at de blir flyttet til plasseringen der du vil de skal vises på siden.
  4. Når komposisjonen er valgt, klikker du den blå pilknappen for å åpne Alternativer-panelet. I dette eksemplet bruker du følgende innstillinger:
    • Posisjon: Lysboks
    • Overgang: Uttoning
    • Spill av automatisk: Deaktivert
    • Bland: Deaktivert
    • Skjul alle først: Deaktivert
    • Aktiver sveip: Aktivert
    • Utløsere øverst: Deaktivert
    • Lukk-knapp: Aktivert
    • Vis lysboksdeler mens du redigerer: Aktivert
    • Vis alle i Designmodus: Aktivert
Alternativer for komposisjon
Oppdater innstillingene på Alternativer-menyen for å kontrollere hvordan kontrollprogrammet fungerer.

Klikk hvor som helst utenfor Alternativer-menyen for å lukke den. Nå er kontrollprogrammet konfigurert og klart til å testes.

Tidligere i denne opplæringen lærte du hvordan du bygger inn HTML på sider for å legge til en Tumblr-blogg på hendelsessiden. Du lærte også hvordan du limer inn innebygd HTML i et kontrollprogram for lysbokskomposisjon, for å vise en YouTube-video i et lysboksvindu når den besøkende klikker en knapp. I denne delen skal du lære mer om ytterligere en type innebygd HTML, som formidles av Google Maps-området. Følg disse trinnene:

  1. Hvis besøkssiden ikke allerede er åpen i Designvisning, klikker du Planlegg, og deretter dobbeltklikker du besøkssideminiatyren for å redigere siden.

Denne kildekoden ble kopiert fra området maps.google.com. Du kan opprette et tilpasset kart til én adresse (eller i dette tilfellet, flere steder). Det er en gratistjeneste. Du oppgir adressen (eller adressene) og klikker på Opprett kart-knappen.

Klikk Opprett kart
Klikk Opprett kart for å generere et kart basert på adressene du angir.

Når du har opprettet et kart, kan du angi en tittel og beskrivelse i grensesnittet for Google Maps. Deretter kan du klikke Kobling-knappen for å få tilgang til koden. Velg HTML-koden i feltet Lim inn HTML for å bygge det inn på et webområde, og dermed kan du returnere til Muse og bygge inn HTML på en side.

Legge til en HTML-kode på siden din
Bruk grensesnittet for Google Maps til å generere HTML-koden for kartet.

For denne opplæringen er det ikke nødvendig å opprette et nytt kart. Hvis du foretrekker å teste det, eksperimenterer du ved å oppgi en adresse, opprette et kart og kopiere koden. Hvis du imidlertid foretrekker å teste hvordan dette fungerer, kan du jobbe med forhåndsgenerert HTML-kode.

  1. Kopier følgende kildekode:

<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. Lim inn koden øverst på besøkssiden. Bruk markeringsverktøyet til å plassere innebygd HTML midtstilt vertikalt på siden nær toppen, slik at omtrent en fjerdedel av kartet overlapper topptekstområdet. Sørg for at du har et mellomrom mellom kartet og blomstergrafikken under kartet, slik at du kan legge til en tekstbeskrivelse.
  2. Bruk tekstverktøyet til å dra en tekstramme under det innebygde kartet. Kopier følgende tekst og lim den inn i tekstrammen:

Alle bakeriene våre bruker den unike inspirasjonen som nærmiljøet gir, og alle er sterkt knyttet sammen av Katies ulastelige fokus på detaljer, serviceytelse og fremfor alt muligheten til å nyte god mat.

  1. Bruk Tekst-panelet til å ta i bruk følgende innstillinger for å formatere teksten:
    • Skrift: Droid Serif (eller en annen serif-skrift)
    • Skriftstørrelse: 14
    • Skriftfarge: #222222
    • Skriftjustering: Venstre
    • Linjeavstand: 120%

Når du har lagt til beskrivelsen på kartet, er besøkssiden komplett.

  1. Velg Fil > Forhåndsvis side i webleser for å se hvordan besøkssiden ser ut i en webleser.
Webområde med kart
Den ferdigstilte besøkssiden inkluderer et Google-kart med komplett funksjonalitet.

Legg merke til at det innebygde HTML Google-kartet er interaktivt. Du kan klikke pilene for å panorere rundt omkring på kartet i kartvinduet, og du kan også klikke pluss- og minusknappene (+ og -) for å zoome inn og ut.

Områdedesignen er nå ferdig for alle sider. I de gjenstående delene av denne opplæringen skal du lære hvordan du finpusser og publiserer området som en gratis prøveversjon.

 Bygge inn HTML på Adobe Muse-sider

Du kan bygge inn HTML-kode på sider på området ditt for å legge til mer avanserte funksjoner, som fremstår som dynamiske fra en tredjeparts webserver. Disse kodebitene kan kopieres fra et vilkårlig antall leverandører av webtjenester, som Google, Yahoo!, YouTube og mange andre, og deretter enkelt limes inn på Muse-sider. I denne delen vil du se på to ulike eksempler på innebygd HTML og se hvordan du raskt kan legge til innhold fra sosiale medier og et interaktivt Google-kart på et webområde bygd i Muse.

Du vil begynne med å fullføre innholdet på Hjem-siden. Hvis du har fulgt opplæringen, er Hjem-siden kanskje allerede åpen i Design-visningen. Hvis ikke dobbeltklikker du miniatyren av Hjem-siden i Planlegg-visning for å åpne den for redigering i Design-visning. Du skal legge til innebygd HTML på toppen av lysbildefremvisningen som du tidligere la til på Hjem-siden.

Legge til en innebygd HTML-basert Twitter-feed for å vise de nyeste innleggene

Du kan registrere en gratis konto for mange ulike webtjenester, inkludert Twitter, noe som gir deg mulighet til å legge inn meldinger som vises på webområdet deres. I tillegg til å vise informasjonen på twitter.com kan du imidlertid bruke kontoen din til å logge på og kopiere den innebygde koden for å vise de samme meldingene på et webområde som du oppretter.

I dette eksempelet ble det registrert en oppdiktet konto for Kevin's Koffee Kart. Dette omfatter å logge på Twitter som en ny bruker og fylle ut registreringsskjemaet. Deretter kan du bruke områdets grensesnitt til å legge inn meldinger og kopiere den innebygde koden som gjør deg i stand til å vise dem et annet sted på Internett. Dette er den samme prosessen som du vil bruke til å dele blogginnlegg, videoinnhold, RSS-feeder, aksjeinformasjon, værmeldinger, sportsresultater og mange andre typer dynamiske data. Hvis du bygger et område for en kunde, bør du spørre dem om de allerede bruker disse tjenestene, for å hjelpe dem å dele informasjon med kundene sine. I mange tilfeller kan du bruke kontoinformasjonen deres til å logge på og deretter få tak i den innebygde koden for informasjonen du vil vise.

For at du skal slippe å logge på Twitter for å opprette din egen konto, er den innebygde koden som er kopiert fra Twitter for Kevin's Koffee Kart-kontoen, vist nedenfor:

<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. Kopier koden som er vist ovenfor.

  2. Gå tilbake til Muse. I mange tilfeller kan du ganske enkelt klikke på ønsket sted på siden, høyreklikke og velge Lim inn fra hurtigmenyen som vises. Alternativt kan du bruke tastatursnarveien for å lime inn (Kommando + V for Mac eller Ctrl + V for Windows). Muse vil finne ut at teksten du limer inn, er kildekode, ikke vanlig tekstinnhold.

    Merk:

    Når koden i sjeldne tilfeller ikke gjenkjennes som HTML, kan du velge Objekt > Sett inn HTML for å åpne HTML-kodevinduet. Deretter limer du bare inn kildekoden som du kopierte, i vinduet og klikker OK for å lukke vinduet og bygge inn koden.

  3. Når du har bygd inn koden (noe som egentlig oppretter et vindu på områdesiden for visning av det koblede innholdet fra et tredjeparts webområde), vises den kanskje ikke nøyaktig slik du ønsker det, på siden. Standardvisningen av HTML-innholdet innebygd i Twitter, vises.

    Bygge inn kildekode
    Twitter-feed-dataene vises som forventet, men det er ikke angitt noen stil eller formatering for teksten.

  4. Øk størrelsen på Twitter-feed-tekstområdet ved å klikke håndtakene som omgir den innebygde HTML-koden, og utvid dem for å fylle mesteparten av sidebredden og ca. en tredjedel av sidehøyden.

    Utvide innebygd kodeboks
    Strekk bredden og høyden på Twitter-feed-datavinduet til en mye større størrelse.

    Dette gjør at teksten kan vises i et mye større område, selv om teksten for øyeblikket fremdeles har standardstørrelsen.

    Det neste du skal gjøre, er å oppdatere koden i HTML-kodevinduet for å legge til noen CSS-stiler som vil definere hvordan den dynamiske teksten vises. Denne handlingen påvirker ikke hvordan meldingene som legges inn, vises på twitter.com, men den vil endre formateringen av teksten på området ditt.

  5. Kopier følgende CSS-stilkode:

    <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 }

    </style>

    Merk:

    Bruk litt tid på å gjøre deg kjent med koden ovenfor, og legg merke til at stilene er omgitt av en åpningskode som angir hva koden er (), og en sluttkode som forteller webleserne at det er slutt på CSS-stilreglene (). Når du endrer stil for din egen innebygde HTML-kode, bruker du disse kodene til å sette klammer rundt stilene du vil endre. I dette tilfellet er Twitter-webområdet vert for meldingene som legges inn, og bruker en CSS ID-velger med navnet #twitFeed til å kontrollere hvordan teksten vises på det området. Koden bruker dette stilnavnet (hentet fra Twitter-området) og legger deretter til noen regler som definerer hvordan teksten skal vises på området ditt, ved å overstyre stilene som brukes av twitter.com. Hvis du vil lære mer om CSS-regler for formatering av tekstinnhold, kan du besøke webområdet W3C Schools.

  6. Høyreklikk vinduet for innebygd HTML-kode, og velg HTML fra hurtigmenyen som vises. Dette åpner HTML-kodevinduet, slik at du kan se kildekoden du limte inn tidligere. Du kan når som helst når du redigerer et område, åpne dette vinduet og oppdatere HTML-kildeinnholdet. Klikk ovenfor HTML-koden du bygde inn tidligere, helt øverst i vinduet. Lim inn den nye stilkoden som du kopierte i trinn 5.

    Innebygd HTML-kode
    Lim inn stilkoden i HTML-kodevinduet, ovenfor Twitter-kildekoden som du limte inn tidligere.

  7. Klikk OK for å lukke HTML-vinduet. Når du har gjort denne endringen av stilen i Twitter-teksten, vises innlegget med koblingen fra Twitter-området nå med hvit skrift og er mye større, plassert først i lysbildefremvisningen på Hjem-siden.

    Webområde viser Twitter-tekst
    Den fullstendige Twitter-feeden etter oppdatering av størrelsen på HTML-objektet og formatering av tekststilene.

Hjem-siden er nesten ferdig. Det er bare ett element igjen å legge til på siden.

  1. Velg Fil > Plasser. I dialogboksen Importer blar du for å velge filen DailyDrip.png i mappen Kevins_Koffee_Kart. Klikk Velg.

  2. Når du har plassert bildet på Hjem-siden, bruker du markeringsverktøyet til å posisjonere bildet på venstre side, nær toppen av lysbildefremvisningen, slik at det delvis overlapper toppen av lysbildefremvisningen.

  3. Klikk Forhåndsvisning for å se lysbildefremvisningen animeres, og se hvordan den vises nedenfor Daily Drip-bildet og brune dryppbilder.

    Den ferdige designen til Hjem-siden
    Den ferdige designen til Hjem-siden.

Når du er ferdig med å se over Hjem-siden, klikker du Planlegg-koblingen for å gå tilbake til Planlegg-visning.

Nå skal du legge til en annen type innebygd HTML på KART MAP-siden.

  1. Dobbeltklikk miniatyren av KART MAP for å åpne siden i Design-visning og begynne å redigere den.

  2. Bruk tekstverktøyet til å dra en tekstramme på KART MAP-siden, nær toppen av sideinnholdet, rett under toppteksten.

  3. Skriv inn denne teksten: Er du på utkikk etter kaffevognen? Her finner du oppdatert posisjonsinformasjon hele dagen.

  4. Mens teksten er valgt, åpner du Avsnittstiler-panelet. Klikk stilen med navnet Georgia Body Medium for å bruke avsnittstilen på toppteksten på KART MAP-siden.

Bruke innebygd HTML til å sette inn et Google-kart på et Muse-webområde

Videoveiledning

Videoveiledning
lynda.com - James Fritz

I denne delen skal du legge til innhold på KART MAP-siden ved å legge til innebygd HTML som laster inn et kart generert av Google Maps. Dette er enda et lite eksempel på mulighetene du har når du bruker innebygd HTML på området ditt. Du kan inkorporere innhold fra mange andre tredjepartsområder, for eksempel YouTube, Flickr eller Picasa, samt legge til skjemaer, blogger og andre avanserte områdefunksjoner, som du kan kontrollere ved å logge på kontoen din og legge inn innhold på de tilsvarende områdene.

  1. Åpne et nytt vindu i webleseren, og gå til Google Maps.

  2. Skriv inn en adresse eller en søketerm, for eksempel Adobe SF, for å finne et reelt sted å bruke til å opprette kartet.

  3. Klikk på koblingsknappen som vises i øvre høyre del av grensesnittet, og deretter alternativet Tilpass og forhåndsvis kart som er lagt inn.

  4. I Tilpass-vinduet som vises, angir du tilpasset kartstørrelse til bredde 850 og høyde 470. Omplasser kartet i vinduet for å sikre at adresseteksten er fullt synlig.

  5. Kopier den resulterende HTML-koden fra Google-vinduet. Hvis du foretrekker å generere din egen Google Map-kode, kan du i stedet ganske enkelt kopiere kildekoden nedenfor:

    <!-- 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>

    <!-- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge. Removing this code snippet is not enough! -->

    Kopier HTML-kildekoden fra Google Maps-vinduet
    Kopier HTML-kildekoden fra Google Maps-vinduet.

  6. Gå tilbake til Muse. Høyreklikk på siden, og velg Lim inn for å plassere koden. Du kan også velge Objekt > Sett inn HTML for å åpne HTML-kodevinduet eller bruke den standard tastatursnarveien (Kommando + V for Mac eller Ctrl + V for Windows) til å lime inn koden.

  7. Bruk markeringsverktøyet til å plassere kartet til venstre på siden.

  8. Klikk Forhåndsvisning for å se hvordan Google Maps vil se ut for besøkende på det aktive området. Klikk navigeringsknappene for kartet, og legg merke til at det er fullt interaktivt. Du kan zoome inn og bevege deg rundt på kartet i vinduet med den innebygde koden.

Legge til iframe-rammer på området ditt for å vise andre områdesider med innebygd HTML

I tillegg til å bruke innebygd HTML til å sette inn kode du har limt inn fra et tredjeparts webområde, kan du også bygge inn en fullstendig webside i en iframe med den samme metoden. Du kan for eksempel skrive en kodesnutt som dette:

<iframe title="En tittel for dette innholdet" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

I koden ovenfor bytter du ut teksten i title="" og url="" med ønsket tittel på den eksterne websiden og URL-adressen til siden. Du kan tilpasse bredden og høyden til iframe-vinduet til ønskede verdier, slik at de passer til designen til området ditt.

Du kan eventuelt også legge til et attributt som sikrer at iframe-vinduet ikke viser et rullefelt, ved å legge til dette i åpnings-iframe-koden:

scrolling="no"

Ved å velge Objekt > Sett inn HTML kan du åpne et nytt HTML-kodevindu og bygge inn et iframe-vindu hvor som helst på området ditt og deretter angi en hvilken som helst URL (områdeadresse, for eksempel www.google.com) for å vise et område som er aktivert på Internett.

Du kan også bruke et iframe-vindu til å bygge inn animasjon, for eksempel HTML5-animasjonene opprettet i Adobe Edge. Finn navnet til HTML-filen opprettet av Adobe Edge, og bruk det filnavnet i URL-attributtet til iframe-vinduet.

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

</iframe>

Deretter må du laste opp Adobe Edge-HTML-filen (og avhengige filer) til den samme vertsserveren, sammen med Muse-områdefilene dine. Hvis du eksporterer området ditt til FTP, kan du kopiere HTML-filen til mappen generert av Muse i eksportprosessen. Hvis du publiserer direkte til Adobe Business Catalyst®-vertsserverne ved å klikke Publiser-koblingen i Muse, kan du bruke Adobe Dreamweaver®-programvare eller en hvilken som helst FTP-klient til å laste opp filene. Hvis du vil kan lære mer om opplasting av filer via FTP til Business Catalyst-vertsserverne, kan du se Publisere webområder.

Formatere elementene til et kontaktskjema

Ved hjelp av noen standard CSS-regler kan du formatere elementene i kontaktskjemaet du opprettet i administrasjonskonsollen i Business Catalyst. Du kan justere måten skjemaet og skjemaelementene vises på, slik at det passer til sidedesignen din.

Når du har limt inn kildekoden for skjemaet fra administrasjonskonsollen på siden i Muse, vises skjemaet med standardstilene.

Lime inn den vilkårlige HTML-koden
Når du har limt inn HTML-koden, vises skjemaet på siden.

Som med alle andre elementer kan du bruke sidehåndtakene til å endre størrelse på skjemaet og flytte det rundt på siden.

Høyreklikk (eller trykk Kontroll og klikk) skjemaet, og velg HTML fra listen som vises.

Bruke kontekstmenyen til å velge HTML
Bruk hurtigmenyen og velg HTML fra listen.

HTML-kodevinduet vises. Her ser du koden som du nettopp limte inn på siden fra administrasjonskonsollen. Plasser markøren øverst, foran den første linjen med kode, og trykk Enter (Windows) eller Retur (Mac) noen ganger slik at koden flyttes nedover og du får plass til å legge inn stilene.

Trykk Enter eller Retur for å legge inn noen tomme linjer over den eksisterende koden
Trykk Enter eller Retur for å legge inn noen tomme linjer over den eksisterende koden.

I dette området over skjemakoden kan du lime eller skrive inn CSS-reglene som bestemmer hvordan skjemaelementene skal se ut.

Hvis du vil se hvordan dette fungerer, kan du kopiere koden under:

<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; }

</style>

Lim inn koden øverst i HTML-vinduet, over skjemaet.

Lim inn CSS-stilene øverst i HTML-vinduet
Lim inn CSS-stilene øverst i HTML-vinduet.

Klikk OK for å lukke HTML-vinduet. Legg merke til at skjemaets utseende er oppdatert med den nye formateringen. Klikk Forhåndsvisning eller velg Fil > Forhåndsvis side i webleseren for å se hvordan det blir seende ut på den publiserte siden.

Du kan bruke den samme strategien til å kontrollere mange av de ulike skjemaelementene som følger med når du legger inn kontaktskjemakoden som du kopierte fra Business Catalyst.

Bruk litt tid til å se gjennom koden som du limte inn øverst i vinduet. Merk deg de to Style-kodene som innleder og avslutter CSS-reglene. De er viktige, for uten disse kodene vil ikke CSS-reglene fungere. Her er de to kodene isolert:

<style type="text/css">

</style>

Den innledende og den avsluttende Style-koden forteller webleseren at koden mellom dem inneholder CSS-formateringsregler. Sørg alltid for at disse kodene befinner seg øverst i vinduet, før du limer inn CSS-reglene mellom dem.

Hvis du vil gjøre endringer i skjemaelementene for å oppdatere utseendet, må du angi "klassen" (som er navnet de ulike elementene har i skjemaet), spesifisere hvilken egenskap du vil oppdatere, og deretter angi attributtene.

Se på denne koden:

input.textarea {

background-color: #fff;

}

Termen input.textarea er navnet som er tildelt til én type tekstfelt ("klassen"). I neste linje angir du deretter egenskapen du vil endre. I dette tilfellet viser background-color til tekstfeltets bakgrunnsfarge. Og så etter kolonet kommer #fff, en forkortet versjon i CSS-kode for #ffffff (som er den heksadesimale verdien for fargen hvit).

På godt norsk sier regelen over: Bakgrunnsfargen for denne typen tekstfelt skal være hvit.

Du kan også oppdatere skjemaet ved å angi bakgrunnsfargen for tekstfeltet til en vanlig webfargeverdi: rød. Koden under angir bakgrunnsfargen for denne typen tekstfelt til rød:

input.textarea {

background-color: red;

}

CSS-regler skrives på et eget språk. På samme måte som med andre nye språk kreves det litt øvelse for å bli flytende i det. Hvis du vil lære mer om syntaksen (grammatikken som brukes til å skrive CSS), kan du lese de utmerkede opplæringene og CSS-referanseveiledningene som W3Schools tilbyr kostnadsfritt på Internett.

Når du er klar til å begynne å redigere dine egne kontaktskjemaer, kan du bruke listen under for å identifisere klassenavnet og de tilknyttede egenskapene som du kan justere for hvert skjemaelement.

Merk:

Husk alltid å sette den innledende og avsluttende Style-koden rundt CSS-reglene dine, ellers vil ikke webleseren (og Design-visningen) forstå reglene.

<style type="text/css">

</style>

Fjerne standardelementene fra toppen av kontaktskjemaet

Når du limer skjemaet inn på siden, begynner det som standard med de følgende to elementene.

Hvis du vil fjerne ett av eller begge disse elementene, åpner du HTML-vinduet og ser på kildekoden som du har limt inn (rett under CSS-stilkoden du kanskje har lagt inn).

Hvis du vil fjerne *Kreves-linjen, finner du denne kodelinjen og sletter den:

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

Hvis du vil fjerne Tittel-etiketten og -menyen, finner du disse kodelinjene og sletter dem:

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

Merk:

Vær forsiktig når du redigerer HTML-kode så du ikke utilsiktet fjerner noen andre koder enn de ovennevnte linjene. Sletting av selv ett tegn for mye (som en ">") kan føre til at skjemaet blir ubrukelig. Hvis det skjer, kan du gå tilbake til administrasjonskonsollen, kopiere koden og lime den inn på siden igjen, i stedet for koden du har redigert.

Liste over klasser og egenskaper for å legge inn CSS-regler og formatere kontaktskjemaer

Når du angir fargeverdier, vil du kunne få en mye større variasjon av farger ved å bruke et nettbasert verktøy, for eksempel Kuler, eller et bilderedigeringsprogram (Photoshop eller Fireworks) til å lage heksadesimale fargeverdier. Heksadesimale fargeverdier begynner alltid med symbolet #, etterfulgt av en kombinasjon av 3 eller 6 alfanumeriske tegn (0–9 og A–F).

Det kan være enklere å bruke Pipette-verktøyet i Muse til å velge farger fra den eksisterende designen din. Du kan kopiere de heksadesimale fargeverdiene fra feltet i fargevelgeren og lime dem inn i koden. De følgende 16 webfargene kan imidlertid også angis ved navn. Det kan være nyttig når du vil teste en regel:

Aqua (akvamarin), Black (svart), Blue (blå), Fuchsia (fuksia), Gray (grå), Green (grønn), Lime (sitrusgrønn), Maroon (rødbrun), Navy (marineblå), Olive (olivengrønn), Purple (lilla), Red (rød), Silver (sølv), Teal (blågrønn), White (hvit) og Yellow (gul)

Når du angir fargene ved navn, må du ikke ta med #-symbolet før navnet.

Den følgende listen er ikke komplett. Det er mange ulike kombinasjoner (og mange andre egenskaper) du kan bruke på elementene. Bruk disse forslagene for å komme i gang. Dobbeltklikk for å velge en kodesnutt, og kopier den deretter til utklippstavlen.

Hvis du vil ha flere tips om hvordan du jobber med Muse, kan du gå til siden 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