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.

Brug indlejret HTML for at vise en blog på dit Muse-website

Indlejret HTML refererer til kildekode genereret af et tredjeparts website, såsom Google, YouTube, Flickr eller Picasa. Du kan oprette en konto på disse websites, logge ind og derefter kopiere indlejringskode fra deres website og føje den til dit eget website.

Når du indsætter indlejret HTML på en side, er det som at anbringe et vindue på en side på dit website, som viser indholdet af et tredjeparts website.

Indlejret HTML er en meget effektiv måde til at tilføje kompleks information (såsom kort, vejrudsigter, aktiekurser) samt rich media (såsom digitale videoer, lysbilledshow og lydfiler). Denne strategi har den fordel, at du kan bruge et tredjeparts websted som værtstjeneste og overførselsgrænseflade. Hvis du for eksempel opretter en gratis konto på YouTube, kan du oprette din egen YouTube-kanal og overføre videoindhold til dit website. YouTube indeholder en webside, der forenkler overførslen og agerer som vært for videofiler. Når du vil opdatere din hjemmeside, skal du blot føje flere videoer til din YouTube-kanal, kopiere indlejringskoden og derefter indsætte den på en side for at føje nye videoer til dit Muse-website.

I dette afsnit kopierer du kildekoden fra Tumblr. Det er en gratis onlinetjeneste, der kræver, at du opretter en konto, logger ind og derefter sender blogindlæg, som er offentligt tilgængelige. Blogs er nemme at bruge og er især nyttige, når du vil gøre det nemt for nogen, som ikke har tekniske forudsætninger for at opdatere deres eget website. De fleste blog-websites indeholder en online grænseflade, så du kan bruge en vilkårlig browser til at logge ind på din konto og skrive nye opslag uden HTML-viden eller yderligere software.

Bemærk: Besøgende, der ser dit website skal ikke have en Tumblr-kontor for at se den blog, du integrerer på websiden. Det er kun nødvendigt, at du har en konto, da du designer websitet – f.eks. for at lave en brugerdefineret blog og generere den integreringskode, du vil føje til websitet.

  1. Det et ikke nødvendigt at oprette en Tumblr-konto for at følge med denne øvelse. Du skal blot kopiere følgende kode, som er blevet genereret af Tumblr-websitet efter oprettelse af en gratis blog:

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

  1. Dobbeltklik i visningen Plan på miniaturebilledet for siden Arrangementer for at åbne siden og redigere den i visningen Design.
  2. Klik midt på den tomme side, og brug en af følgende metoder til at indlejre HTML-koden:
  • Vælg Rediger > indsæt, eller brug tastaturgenvejen (Kommando-V på Mac eller Ctrl-V i Windows) for at indsætte koden direkte på siden.
  • Vælg objekt > Indsæt HTML. Klik i feltet i det viste vindue Rediger HTML, og indsæt indholdet. Klik på OK for at lukke vinduet Rediger HTML.

Bemærk: I de fleste tilfælde vil Muse genkende HTML-koden og automatisk indsætte HTML-koden direkte på siden, når du vælger Indsæt. Hvis du skulle se koden på siden i stedet for indholdet fra tredjeparts websitet, så prøv at vælge Objekt > Indsæt HTML i stedet.

Efter indlejring af HTML-koden, ser du en blå afgrænsningsramme med håndtag omkring de blogindlæg, der blev slået op på Tumblr-kontoen Katies Cafe.

  1. Brug markeringsværktøjet til at trække i håndtagene for at ændre størrelse på blogindholdet, så det strækker sig over cirka 80 % af sidens bredde. Centrer blogindholdet på siden for at tillade visning af den fliseinddelte baggrundsgrafik i venstre og højre side. Blå målerektangler viser afstanden fra andre objekter. En rød hjælpelinje til justering vises kortvarigt for at angive, når det valgte objekt er lodret centreret.
Ændring af størrelse på og placering af side
Tilpas Tumblr-bloggens størrelse og placering på siden Arrangementer.

Det er alt, der kræves for at indlejre HTML på Muse-sider. Hvis du senere vil redigere HTML-koden, kan du højreklikke på et indlejret HTML-element og vælge Rediger HTML i den viste genvejsmenu. Vinduet Rediger HTML åbnes, så du har adgang til den tidligere indsatte kildekode.

Nu er det tid til at gennemgå de ændringer, du har foretaget til siden Arrangementer:

  1. Vælg Filer > Forhåndsvisning af side i browser for at vise siden Arrangementer i et nyt browservindue.

Bemærk, at når du ruller ned i listen over blogindlæg, vises sidehovedet over det andet sideindhold. Denne funktionsmåde skyldes, at siden Arrangementer bruger forgrunds-mastersiden, og at sidehovedindholdet af denne masterside er indstillet til at blive vist i forgrunden.

Siden Arrangementer er nu færdig. I næste afsnit lærer du at indsætte indlejret HTML-indhold i en widget for at styre visning af tredjepartsindhold baseret på brugerinteraktion.

Integrer en video på dit Muse-website

I øjeblikket er målbeholderen udfyldt med grå fyldfarve. Du kan dog placere alle former for indhold i målbeholder, inklusive forskellige billedfiler, fyldte rektangler, tekst eller indlejret HTML, som du har kopieret fra et andet website.

I dette eksempel indsætter du indlejret HTML, som er blevet genereret af YouTube.

Forestil dig, at du har besøgt en side på YouTube.com for at se en video, som du har overført til din konto. Hvis du klikker på knappen Del og derefter klikker på Indlejring, kan du få adgang til og kopiere indlejringskoden for videoen.

Integrering af en video
Når du har valgt den ønskede videostørrelse, skal du kopiere indlejringskoden genereret af YouTube.

I forbindelse med denne video er indlejringskoden for Katies Cafe-videoen allerede blevet kopieret til webstedet, så du ikke behøver at besøge YouTube. Kopiere indlejringskoden nedenfor til at gemme den i udklipsholderen:

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

Ovenstående kode anvender iFrame-tags omkring linket til videofilen, som er slået op på YouTube. En iFrame er en HTML-beholder, der gør det muligt at vise indhold inde i et "vindue", når du føjer den til websiden.

Vend tilbage til Muse, når du har kopieret ovenstående kode.

  1. Brug markeringsværktøjet til at klikke på sidens grå kant, så markeringsindikatoren i øverste venstre hjørne viser ordet Side. Det betyder, at hele siden er valgt.
  2. Klik på den større målbeholder med den grå fyldfarve. Markeringsindikatoren i øverste venstre hjørne viser ordet: Komposition. Klik på den grå målbeholder igen, så markeringsindikatoren viser ordet: Beholder. Klik på den igen (den siger Mål), og klik derefter en gang mere, indtil markeringsindikatoren viser ordet: Billedramme. Tryk på Backspace (Windows) eller Delete (Mac) for at fjerne billedrammen fra målbeholderen.

Mens den indre målbeholder stadig er markeret, går næste del ud på at indsætte HTML-koden, som du kopierede over, ind i målbeholderen.

Bemærk: Akkurat som du har oplevet, at det kan være svært at indsætte heltebilledet i udløserbeholderen, kan det være svært at indsætte i en målbeholder, fordi koden skal indsættes INDE I widgetens målbeholder. Det er muligt (afhængigt af det aktuelt valgte element) at indsætte videokoden uden for widgeten, så den indlejres direkte på siden. Gå derfor forsigtigt frem: Hvis du tester lightboxen ved at klikke på Forhåndsvis og ser, at videoen vises, selvom du endnu ikke har klikket på heltebilledet, så betyder det, at videokoden ikke kom ind i beholderen, hvorfor den vises med det samme. Videoen bør kun vises, når du klikker på heltebilledet.

Følg disse trin for at indsætte videokoden i målbeholderen (mens markeringsindikatoren viser ordet: Beholder).

  1. Vælg objekt > Indsæt HTML. I det viste vindue skal du vælge standard-pladsholderteksten og trykke på Delete (Mac), eller Backspace (Windows) for at fjerne den. Vælg Rediger > Indsæt for at indsætte YouTube-koden, som du kopierede ovenfor, i HTML-kodefeltet. Klik på OK for at lukke HTML-kodevinduet.

Bemærk: I mange tilfælde opdager Muse automatisk, når du indsætter HTML-kode, og forstår, at det er HTML snarere end almindelig tekst. Så hvis du foretrækker at åbne HTML-vinduet i stedet for at vælge Objekt > Indsæt HTML, kan du også højreklikke (eller Ctrl-klikke), mens den indre målbeholder er valgt, og vælge Indsæt i den viste genvejsmenu. (Du kan også vælge Rediger > Indsæt eller bruge tastaturgenvejen for at indsætte kildekoden i målbeholderen). Muse giver mange metoder til at nå det samme mål for at indsætte videokoden i målbeholderen.

Når du har indsat koden i målbeholderen, vises det første billede i videoen (en kop kaffe). Det første billede i videoen viser, at det er lykkedes for dig at indsætte HTML-indlejringskoden. Videoen afspilles ikke, mens du redigerer siden i visningen Design. Den afspilles først, når du har klikket på knappen Forhåndsvis i kontrolpanelet, eller du forhåndsviser siden i en browser.

  1. Brug markeringsværktøjet til at ændre størrelsen på målbeholderen, hvis det er nødvendigt, for at udvide dimensionerne, så de passer til størrelsen af det indlejrede integrerede HTML-videoindhold. Bredden skal være cirka 670 pixel, og højden skal være cirka 415 pixel. Mens videoen er valgt, viser markeringsindikatoren ordet HTML-element.
  2. Mens målbeholderen er valgt, skal du trykke Esc én gang for at vælge den ydre beholder. Du kan også klikke væk for at fravælge Lightbox-visningswidgeten og derefter klikke på den to gange: én gang for at vælge kompositionen og derefter igen for at vælge den større beholder. Brug markeringsværktøjet til at trække i beholderens håndtag, så målbeholderen er centreret inde i den. Juster beholderens dimensioner til en bredde på 710 pixel og en højde på 460 pixel.
  3. Brug menuen Fyld til at indstille beholderens fyldfarve til en brun farve (#63301B), og indstil fyldfarvens opacitet til 100.
Menuen Fyld
Indstil beholderens fyldfarve og opacitet i menuen Fyld.

  1. Marker tekstrammen ved beholderens bund, og tryk på Delete (Mac), eller Backspace (Windows) for at fjerne den. Tekstrammen kan udfyldes med en billedtekst om målindholdet, men i dette projekt anvendes den ikke.
  2. Vælg feltet Luk (med et X) i beholderens øverste højre hjørne. Klik inde i feltet Luk for at vælge dets mærke og slette det. Angiv fyldfarven til ingen i menuen Fyld. Klik på mappeikonet ved siden af afsnittet Billede i menuen Fyld, og gennemse for at vælge filen icon-close.png. Brug markeringsværktøjet til at ændre størrelsen på feltet Luk, så hele ikonbilledet for lukning vises.
  3. Brug markeringsværktøjet til at flytte både målbeholderen og udløserbeholderne for at flytte dem til placeringen, hvor du vil have dem vist på siden.
  4. Klik på den blå pil, mens Komposition er valgt, for at åbne indstillingspanelet. I dette eksempel skal du bruge følgende indstillinger:
    • Position: Lightbox
    • Overgang: Udtoning
    • Automatisk afspilning: Deaktiveret
    • Bland: Deaktiveret
    • Skjul alt først: Deaktiveret
    • Aktiver svip: Aktiveret
    • Udløsere øverst: Deaktiveret
    • Knappen Luk: Aktiveret
    • Vis Lightbox-dele under redigering: Aktiveret
    • Vis alt i designtilstand: Aktiveret
Indstillinger for komposition
Opdater indstillingerne i menuen Indstillinger for at styre widgetens funktionsmåde.

Klik et vilkårligt sted uden for menuen Indstillinger for at lukke den. På dette tidspunkt er widgeten nu konfigureret og er klar til at blive testet.

Tidligere i dette selvstudium lærte du at indlejre HTML i sider for at føje en Tumblr-blog til siden Arrangementer. Du så også, hvordan man indsætter indlejret HTML inde i en Lightbox-kompositionswidget for at vise en YouTube-video i et lightbox-vindue, når den besøgende klikker på en knap. I dette afsnit skal vi se på endnu en type indlejret HTML, som leveres fra websitet Google Maps. Følg denne fremgangsmåde:

  1. Hvis siden Besøg ikke allerede er åben i visningen Design, skal du klikke på Plan og derefter dobbeltklikke på miniaturebilledet for siden Besøg for at redigere den.

Denne kildekode er kopieret fra websitet maps.google.com. Du kan oprette et brugerdefineret kort for en adresse (eller i dette tilfælde flere forskellige lokaliteter). Det er en gratis tjeneste, hvor du blot skal angive adressen (eller adresserne) og klikke på knappen Opret kort.

Klik på Opret kort
Klik på Opret kort for at generere et kort baseret på de adresser, du indtaster.

Når du har oprettet et kort, giver Google Maps-grænsefladen dig mulighed for at indtaste en titel og beskrivelse. Derefter kan du klikke på knappen Link for at få adgang til koden. Vælg HTML-koden i feltet mærket: Indsæt HTML til indlejring i website, så er du klar til at vende tilbage til Muse og indlejre HTML-koden på en side.

Føj HTML-kode til din side
Brug Google Maps-grænsefladen til at generere HTML-koden for kortet.

I forbindelse med dette selvstudium er det ikke nødvendigt, at du selv opretter et nyt kort. Hvis du har lyst til at undersøge det, kan du eksperimentere ved at indtaste en adresse, oprette et kort og kopiere koden. Hvis du blot er interesseret i at teste, hvordan det fungerer, kan du arbejde med færdiggenereret HTML-kode.

  1. Kopiér 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. Indsæt koden øverst på siden Besøg. Brug markeringsværktøjet til at placere den indlejrede HTML-kode i lodret plan, nær toppen, så cirka den øverste fjerdedel af kortet overlapper sidehovedområdet. Sørg for at efterlade plads mellem kortet og blomstergrafikken under det, så du kan tilføje en tekstbeskrivelse.
  2. Brug tekstværktøjet til at trække en tekstramme under det indlejrede kort. Kopier følgende tekst, og indsæt den i tekstrammen:

Selvom hvert af vores bagerier udtrykker sit kvarters særlige karakter, er grundlaget i dem alle Katies usvigelige øje for detalje, service og frem for alt nydelse af god mad.

  1. Brug tekstpanelet til at anvende følgende indstillinger for at formatere teksten:
    • Skrifttype: Droid Serif (eller en vilkårlig serif-skrifttype)
    • Skriftstørrelse: 14
    • Skrifttypefarve: #222222
    • Skrifttypejustering: Venstre
    • Skydning: 120%

Efter at have tilføjet beskrivelsen af kortet, er siden Besøg nu færdig.

  1. Vælg Filer > Forhåndsvisning af side i browser for at se, hvordan siden Besøg vises i en browser.
Webside med kort
Den færdige besøgsside indeholder et fuldt funktionel Google-kort.

Bemærk, at den indlejrede HTML med Google-kortet er interaktiv. Du kan klikke på pilene for at panorere rundt på kortet inden for dets vindue, og du kan også klikke på knapperne + og - for at zoome ind og ud.

Nu er websitedesignet færdigt for alle siderne. I de resterende afsnit i dette selvstudium ser vi på, hvordan du lægger sidste hånd på websitet og udgiver websitet som en gratis prøveversion.

 Integrer HTML på dine Adobe Muse-sider

Du kan integrere HTML-kode på sider på websitet for at tilføje komplekse websitefunktioner, der vises dynamisk, fra en webserver fra tredjepart. Kodestykkerne kan kopieres fra et vilkårligt antal webtjenesteudbydere, f.eks. Google, Yahoo!, YouTube og andre, og derefter nemt indsættes på sider i Muse. Dette afsnit indeholder to forskellige eksempler på integreret HTML og viser, hvordan du hurtigt kan tilføje indhold fra sociale medier og et interaktivt Google-kort på et website, der er oprettet i Muse.

Du starter med at færdiggøre indholdet på siden Hjem. Hvis du har fulgt selvstudiet, er siden Hjem muligvis allerede åben i designvisning. Ellers skal du dobbeltklikke på miniaturebilledet med siden Hjem i visningen Plan for at åbne den, så den kan redigeres i visningen Design. Du skal tilføje integreret HTML oven på det diasshow, du tidligere har tilføjet på siden Hjem.

Tilføj et integreret HTML Twitter-feed, der viser de seneste indlæg

Du kan oprette en gratis konto med mange forskellige webtjenester, herunder Twitter, som du kan bruge til at slå indhold op på de tilhørende websites. Ud over at vise oplysningerne på Twitter.com kan du også bruge din konto til at logge på og kopiere den integrerede kode for at vise de samme meddelelser på et website, du opretter.

I dette eksempel er der oprettet en fiktiv konto for Kevin's Koffee Kart. Det indebærer at logge på Twitter som en ny bruger og udfylde tilmeldingsformularen. Du kan derefter bruge websitets grænseflade til at slå meddelelser op og kopiere den integrerede kode for at vise dem andre steder på internettet. Du skal benytte den samme fremgangsmåde for at dele blogindlæg, videoindhold, RSS-feeds, aktieoplysninger, vejrudsigter, spilscorer og mange andre typer dynamisk data. Hvis du opretter et nyt website for en kunde, er det en god ide at spørge, om kunden allerede bruger disse tjenester til at dele oplysninger med deres egne kunder. I mange tilfælde kan du bruge kundens kontooplysninger til at logge på og derefter indhente den integrerede kode for de data, der skal vises.

Den integrerede kode, der er kopieret fra Twitter til kontoen for Kevin's Koffee Kart, er medtaget her, så du slipper for at logge på Twitter og oprette din egen konto:

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

<div id="twitFeed">Valgfri pladsholdertekst</div>

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

 

  1. Kopier koden ovenfor.

  2. Gå tilbage til Muse. I mange tilfælde kan du blot klikke på den ønskede placering på siden, højreklikke og vælge Sæt ind i den kontekstmenu, der vises. Du kan også bruge tastaturgenvejen for Sæt ind (Kommando+V for Mac eller Ctrl+V for Windows). Teksten genkendes som kildekode i stedet for normalt tekstindhold i Muse.

    Bemærk:

    Hvis koden en sjælden gang ikke genkendes som HTML, kan du vælge Objekt > Indsæt HTML for at åbne HTML-kodevinduet. Du kan derefter indsætte den kode, du har kopieret, i vinduet og klikke på OK for at lukke vinduet og integrere koden.

  3. Når kildekoden er integreret (så der oprettes et vindue på websitesiden til visning af sammenkædet indhold fra et tredjepartswebsite), vises det muligvis ikke præcist, som du ønsker det, på siden. Standardvisningen af Twitter-integreret HTML-indhold vises.

    Integrering af kildekode
    Twitter-feeddataene vises som forventet, men teksten er ikke formateret.

  4. Gør tekstområdet i Twitter-feedet større ved at klikke på håndtagene omkring det integrerede HTML-indhold og udvide dem, så de fylder det meste af sidens bredde og ca. en tredjedel af højden.

    Udvid felt med integreret kode
    Stræk højden og bredden på vinduet med Twitter-feeddata til en meget større størrelse.

    Det gør det muligt at vise teksten i et meget større område, selvom teksten lige nu stadig er i standardstørrelse.

    I det følgende opdaterer du koden i vinduet HTML-kode ved at tilføje CSS-formater, som angiver, hvordan den dynamiske tekst skal vises. Denne handling påvirker ikke de meddelelser, der er slået op på Twitter.com, men den ændrer formateringen af teksten på dit website.

  5. Kopiér følgende CSS-formatkode:

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

    Bemærk:

    Brug et øjeblik på at blive fortrolig med ovenstående kode, og bemærk, at formaterne er omgivet af et åbningstag, som angiver koden (), og et lukketag, som fortæller browsere, at CSS-formatreglerne er fuldført (). Du skal bruge disse tags som parenteser rundt om de formater, du vil anvende, når du formaterer din egen integrerede HTML-kode. I dette tilfælde hoster Twitter-websitet opslagene og anvender en CSS ID-vælger med navnet #twitFeed til at styre, hvordan teksten vises på websitet. Koden ovenfor bruger altså grundlæggende dette formatnavn (som hentes fra Twitter-websitet) og tilføjer derefter regler, som angiver, hvordan teksten skal vises på websitet, og tilsidesætter de formater, der anvendes på Twitter.com. Få mere at vide om CSS-regler for formatering af tekstindhold på W3C Schools-websitet.

  6. Højreklik på vinduet med den integrerede HTML-kode, og vælg HTML i den kontekstmenu, der vises. HTML-kodevinduet vises, så du kan se den kildekode, du tidligere har indsat. Du kan altid åbne dette vindue og opdatere HTML-kildeindholdet, når du redigerer et website. Klik over den HTML-kode, du tidligere har integreret, allerøverst i vinduet. Indsæt den nye formatkode, som du kopierede i trin 5.

    Integreret HTML-kode
    Sæt formatkoden ind i HTML-kodevinduet over den Twitter-kildekode, du indsatte tidligere.

  7. Klik på OK for at lukke HTML-vinduet. Når du har foretaget denne ændring i Twitter-tekstens format, vises det sammenkædede indlæg fra Twitter-websitet nu med hvid tekst og i en meget større størrelse over diasshowet på startsiden.

    Webside vis Twitter-tekst
    Det færdige Twitter-feed efter opdatering af størrelsen på HTML-objektet og formatering af tekstformaterne.

Startsiden er næsten færdig. Der mangler blot at blive tilføjet et enkelt element.

  1. Vælg Filer > Placer. Naviger til og marker filen DailyDrip.png i mappen Kevins_Koffee_Kart i dialogboksen Importer. Klik på Vælg.

  2. Når du har placeret billedet på startsiden, skal du bruge markeringsværktøjet til at anbringe det til venstre nær toppen af diasshowet, så det delvist overlapper det øverste af diasshowet.

  3. Klik på Forhåndsvisning for at se det animerede diasshow, og hvordan det vises under Daily Drip og billederne med den brune dråbe.

    Det færdige design af siden Hjem
    Det færdige design af siden Hjem.

Klik på linket Plan for at komme tilbage til visningen Plan, når du er færdig med at gennemse siden Hjem.

Du skal derefter tilføje en anden type integreret HTML på siden KART MAP.

  1. Dobbeltklik på miniaturebilledet med KART MAP for at åbne siden i visningen Design og redigere den.

  2. Brug tekstværktøjet til at trække en tekstramme på siden KART MAP tæt på toppen af sideindholdet direkte under sidehovedet.

  3. Skriv følgende linje: Leder du efter Koffee Kart? Se opdaterede steder i realtid dagen igennem her.

  4. Marker teksten, og åbn panelet Afsnitsformater. Klik på formatet med navnet Georgia-brødtekst mellemstor for at anvende afsnitsformatet på teksten i sidehovedet på siden KART MAP.

Brug integreret HTML til at indsætte et Google-kort på en webside

Video-selvstudier

Video-selvstudier
lynda.com - James Fritz

I dette afsnit skal du tilføje indhold på siden KART MAP ved at tilføje integreret HTML, som indlæser et kort, der er oprettet i Google Maps. Dette er blot et andet lille eksempel på mulighederne, når du bruger integreret HTML på dit website. Du kan anvende indhold fra mange andre eksterne websites, f.eks. YouTube, Flickr eller Picasa, samt tilføje formularer, blogs og andre komplekse websitefunktioner, som du kan styre ved at gå til din konto og slå indhold op på de pågældende websites.

  1. Åbn et nyt browservindue, og besøg Google Maps.

  2. Skriv en adresse eller et søgeord, f.eks. Adobe SF, for at finde stedet, der skal bruges til oprettelse af kortet.

  3. Klik på knappen Sammenkædning øverst til højre i grænsefladen, og vælg Tilpas og vis indlejret kort.

  4. Angiv den brugerdefinerede kortstørrelse til en bredde på 850 og en højde på 470 i vinduet Tilpas. Flyt kortet i vinduet for at sikre, at adresseteksten er helt synlig.

  5. Kopier HTML'en fra Google-vinduet. Hvis du foretrækker ikke at oprette din egen Google Map-kode, kan du blot kopiere følgende kildekode:

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

    <!-- Hvis du vil deaktivere deling af steder, *skal* du gå til https://www.google.com/latitude/apps/badge og deaktivere Google Public Location-badget. Det er ikke nok at fjerne kodestykket! -->

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

  6. Gå tilbage til Muse. Højreklik på siden, og vælg Sæt ind for at placere koden. Du kan også vælge Objekt > Indsæt HTML for at åbne HTML-kodevinduet eller bruge standardtastaturgenvejen til at indsætte koden (Kommando+V for Mac og Ctrl+V for Windows).

  7. Anbring kortet til venstre på siden med markeringsværktøjet.

  8. Klik på Vis for at se, hvordan Google Maps vises for besøgende på livewebsitet. Klik på navigationsknapperne for kortet, og bemærk, at det er fuldt interaktivt, og at du kan zoome ind eller flytte rundt på kortet i det indlejrede vindue.

Tilføjelse af iframes på dit website for at vise andre websitesider med integreret HTML

Ud over at bruge integreret HTML til at indsætte kode, du har kopieret fra et tredjepartswebsite, kan du også bruge den samme metode til at integrere en hel webside i en iframe. Du kan f.eks. skrive følgende kodestykke:

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

I ovenstående kode skal du erstatte teksten i title="" og url="" med den ønskede titel og URL for den eksterne webside. Du kan også tilpasse bredden og højden på iframe-vinduet til de relevante værdier, der passer til websitets design.

Du kan også tilføje en attribut, som sikrer, at der ikke vises et rullepanel i iframen, ved at tilføje følgende i iframens åbnings-tag:

scrolling="no"

Når du vælger Objekt > Indsæt HTML, kan du åbne et nyt HTML-kodevindue og indlejre en iframe et vilkårligt sted på websitet og derefter angive en vilkårlig URL (websiteadresse, f.eks. www.google.com) til integreret visning af et website, der er live på internettet.

Du kan også bruge en iframe til at indlejre animation, f.eks. HTML5-animationer, der er oprettet i Adobe Edge. Find navnet på den HTML-fil, der er oprettet i Adobe Edge, og brug filnavnet i URL-attributten for din iframe:

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

</iframe>

Du skal derefter overføre Adobe Edge HTML-filen (og afhængige filer) til den samme værtsserver sammen med Muse-websitefilerne. Hvis du eksporterer dit website til FTP, kan du kopiere HTML-filen til den mappe, der oprettes i Muse under eksporten. Hvis du udgiver direkte på Adobe Business Catalyst®-hostingserverne ved at klikke på linket Udgiv i Muse, kan du bruge Adobe Dreamweaver®-software eller en FTP-klient til at overføre filerne. Få mere at vide om upload af filer via FTP til Business Catalyst-hostingserver på Udgivelse af websites.

Formatér elementerne i en kontaktformular

Ved at bruge almindelige CSS-regler kan du formatere elementerne i den kontaktformular, du har oprettet i Business Catalyst-administrationskonsollens grænseflade. Du kan tilpasse den måde formularen og formularelementer vises i rækkefølge for at matche sidens design.

Når du har indsat formularens kildekode fra administrationskonsollen på siden i Muse, vises formularen med dens standardformater.

Indsæt den tilfældige HTML-kode
Efter indsættelse af den tilfældige HTML-kode vises formularen på siden.

Som med ethvert andet element kan du bruge sidehåndtagene til at ændre størrelsen af formularens dimensioner og flytte den omkring på siden til den ønskede placering.

Højreklik (eller Ctrl-klik) på formularen, og vælg HTML på den viste liste.

Brug genvejsmenuen til at vælge HTML
Brug genvejsmenuen til at vælge HTML på listen med valgmuligheder.

HTML-kodevinduet vises. Det viser den kode, du har indsat fra administrationskonsollen på siden. Anbring markøren øverst før den første linje med kode, og tryk på Enter (Windows) eller Retur (Mac) et par gange for at flytte formularkoden nedad og gøre plads til at tilføje formaterne.

Tryk på Enter eller Retur for at tilføje nogle linjer med plads over den eksisterende kode
Tryk på Enter eller Retur for at tilføje nogle linjer med plads over den eksisterende kode.

Dette område over formularkoden er det sted, hvor du kan indsætte eller skrive de CSS-regler, som påvirker udseendet af formularelementerne.

Du kan se, hvordan det virker, ved at kopiere nedenstående kode:

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

Indsæt koden øverst i HTML-vinduet over formularen.

Indsæt CSS-formaterne øverst i HTML-vinduet
Indsæt CSS-formaterne øverst i HTML-vinduet.

Klik på OK for at lukke HTML-vinduet. Bemærk, at formularens udseende er opdateret med den nye formatering. Klik på Vis, eller vælg Fil > Forhåndsvisning af side i browser for at se, hvordan den vises på det udgivne website.

Du kan bruge den samme strategi til at styre mange af de forskellige formularelementer, der medtages, når du tilføjer den kontaktformularkode, du har kopieret fra Business Catalyst.

Brug et øjeblik på at gennemgå den kode, du har indsat øverst i vinduet. Bemærk de to formaterings-tags øverst og nederst i de CSS-regler, der omgiver dem. Det er vigtigt. Uden indledende og afsluttende formaterings-tags virker CSS-reglerne ikke. Her er de to formaterings-tags vist for sig:

<style type="text/css">

</format>

Disse indledende og afsluttende formaterings-tags fortæller browseren, at koden indeni indeholder CSS-formateringsregler. Disse tags skal altid være øverst i vinduet, før du indsætter CSS-reglerne indeni.

Når du vil foretage ændringer af formularelementerne for at opdatere deres udseende, skal du kalde “klassen” (som er det navn, der er tildelt de forskellige elementer i formularen), angive den egenskab, du vil opdatere, og derefter indstille dens attributter.

Se på denne kodelinje:

input.textarea {

background-color: #fff;

}

Ordet input.textarea er det navn, der er tildelt én type af tekstfelt (“klassen”). Derefter kalder den næste linje den egenskab, du vil ændre. I dette tilfælde henviser background-color til tekstfeltets baggrundsfarve. Og efter kolonet er #fff stenografisk CSS-kode for #ffffff (som er den hexadecimale farveværdi, der angiver farven hvid).

Kort fortalt siger ovenstående regel: Indstil baggrundsfarven for denne type af tekstfelt til hvid.

Hvis du vil opdatere formularen, kan du også tildele tekstfeltets baggrundsfarve en almindelig webfarveværdi: red (rød). Følgende kode indstiller baggrundsfarven for denne type af tekstfelt til rød:

input.textarea {

background-color: red;

}

CSS-regler skrives på deres eget sprog. Ligesom med et nyt sprog kræver det øvelse at kunne det flydende. Hvis du vil vide mere om syntaksen (den grammatik, der bruges til at skrive disse regler), skal du læse de fremragende selvstudier og CSS-referencevejledninger, som W3Schools leverer gratis online.

Når du er klar til at gå i gang med at redigere dine egne kontaktformularer, kan du bruge nedenstående liste til at identificere klassenavnet og de tilhørende egenskaber, som du kan justere for hvert formularelement.

Bemærk:

Husk altid at omslutte din liste over CSS-regler med indledende og afsluttende formaterings-tags, da browseren (og visningen Design) ellers ikke kan gengive reglerne:

<style type="text/css">

</format>

Fjernelse af standardelementerne fra toppen af kontaktformularen

Når du indsætter formularen på siden, begynder den som standard med følgende to elementer.

Hvis du vil fjerne det ene af eller begge disse elementer, skal du åbne HTML-vinduet og se på den kildekode, du har indsat (direkte under de CSS-formaterings-tags, du eventuelt har tilføjet).

Hvis du vil fjerne linjen *Required, skal du finde denne linje med kode og slette den:

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

Hvis du vil fjerne Title-navnet og -menuen, skal du finde disse linjer med kode og slette 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>

Bemærk:

Vær forsigtig, når du redigerer HTML-kode, så du ikke kommer til at fjerne andre tags end de linjer, der er vist ovenfor. Selv fjernelse af et enkelt ekstra tegn som f.eks. > kan ødelægge formularen. Hvis det skulle ske, kan du gå tilbage til administrationskonsollen for igen at kopiere den til siden, idet du erstatter den kode, du har redigeret.

Liste over klasser og egenskaber under tilføjelse af CSS-regler og formatering af kontaktformularer

Når du tildeler farveværdier, får du mange flere farver, hvis du bruger et onlineværktøj som f.eks. Kuler eller et billedbehandlingsprogram (Photoshop eller Fireworks) til at oprette hexadecimale farveværdier. Hexadecimale farveværdier begynder altid med symbolet # efterfulgt af en kombination af tre eller seks alfanumeriske tegn (0-9 og A-F).

Du finder det måske nemmere at bruge pipetteværktøjet i Muse til at vælge farver i dit eksisterende design. Du kan kopiere de hexadecimale farveværdier fra feltet i farvevælgeren og indsætte dem i koden. Følgende 16 webfarver kan dog angives ved navn. De kan være meget praktiske at anvende, når du skal teste en regel:

Aqua (akvamarin), Black (sort), Blue (blå), Fuchsia (lyslilla), Gray (grå), Green (grøn), Lime (limegrøn), Maroon (rødbrun), Navy (marineblå), Olive (olivengrøn), Purple (mørklilla), Red (rød), Silver (sølv), Teal (blågrøn), White (hvid) og Yellow (gul)

Når du angiver farvernes navne, må du ikke medtage symbolet # foran farven.

Følgende liste er ikke udtømmende. Der er mange forskellige kombinationer (og mange andre egenskaber, du kan bruge), der kan påvirke elementerne. Brug disse forslag til at komme i gang. Dobbeltklik for at vælge et kodestykke, og kopier det derefter til udklipsholderen.

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