Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Verwenden von eingebettetem HTML, um ein Blog auf Ihrer Muse-Site anzuzeigen

Eingebettetes HTML bezieht sich auf den Quellcode, der von einer Website einer Drittpartei wie z. B. Google, YouTube, Flickr oder Picasa, generiert wurde. Sie können bei diesen Websites ein Konto einrichten, sich anmelden und dann den Einbettungscode von der jeweiligen Site kopieren und Ihrer Site hinzufügen.

Wenn Sie eingebettetes HTML in eine Seite einfügen, ist das so, als ob Sie ein Fenster in eine Seite auf Ihrer Site setzen, in dem der Inhalt einer Site von einer Drittpartei angezeigt wird.

Eingebettetes HTML ist eine hervorragende Methode, komplexe Informationen (wie z. B. Karten, Wettervorhersagen, Aktienquoten) sowie Rich Media (wie z. B. digitale Videos, Diashows und Audiodateien) schnell und einfach hinzuzufügen. Diese Strategie hat den zusätzlichen Vorteil, dass Sie eine Site einer Drittpartei als Hosting-Dienst und Upload-Schnittstelle verwenden können. Wenn Sie beispielsweise ein kostenloses Konto bei YouTube anlegen, können Sie Ihren eigenen YouTube-Kanal erstellen und den Videoinhalt für Ihre Site hochladen. YouTube umfasst eine Webseite, die den Upload-Prozess vereinfacht und die Videodateien auf der YouTube-Site hostet. Wenn Sie Ihre Site aktualisieren möchten, fügen Sie einfach weitere Videos zu Ihrem YouTube-Kanal hinzu, kopieren den Einbettungscode und fügen ihn dann in eine Seite ein, um neue Videos zu Ihrer Muse-Site hinzuzufügen.

In diesem Abschnitt werden Sie den Quellcode von Tumblr kopieren. Tumblr ist ein kostenloser Onlinedienst, für den Sie ein Konto erstellen und sich anmelden müssen. Anschließend können Sie Blogeinträge posten, die öffentlich verfügbar sind. Blogs sind einfach zu verwenden und besonders hilfreich, wenn Sie es einer anderen Person, die technisch nicht so versiert ist, einfach machen möchten, ihre eigene Site zu aktualisieren. Die meisten Blog-Sites verfügen über eine Online-Benutzeroberfläche, sodass Sie sich über jeden Browser bei Ihrem Konto anmelden und neue Beiträge posten können, ohne hierzu HTML-Kenntnisse oder zusätzliche Software zu benötigen.

Hinweis: Besucher Ihrer Website benötigen kein Tumblr-Konto, um den von Ihnen auf der Seite eingebetteten Blog anzuzeigen. Da Sie die Website entwickeln, benötigen Sie ein Konto, um einen benutzerdefinierten Blog zu erstellen und den eingebetteten Code, den Sie Ihrer Website hinzufügen, zu generieren.

  1. Für dieses Tutorial ist es nicht notwendig, ein Tumblr-Konto anzulegen. Kopieren Sie einfach den folgenden Code, der von der Tumblr-Website generiert wurde, nachdem ein kostenloser Blog erstellt wurde:

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

  1. Doppelklicken Sie in der Planungsansicht auf die Miniatur der Seite „events“, um die Seite zu öffnen und sie in der Entwurfsansicht zu bearbeiten.
  2. Klicken Sie in die Mitte der leeren Seite und verwenden Sie eine der folgenden Methoden, um den HTML-Code einzubetten:
  • Wählen Sie „Bearbeiten“ > „Einfügen“ oder verwenden Sie den Tastaturbefehl (Bfhl+V für Mac bzw. Strg+V für Windows), um den Code direkt auf der Seite einzufügen.
  • Wählen Sie „Objekt“ > „HTML einfügen“. Klicken Sie in das Feld des jetzt angezeigten Fensters „HTML bearbeiten“ und fügen Sie den Inhalt ein. Klicken Sie auf „OK“, um das Fenster „HTML bearbeiten“ zu schließen.

Hinweis: In den meisten Fällen erkennt Muse HTML-Code und bettet das HTML automatisch ein, das Sie direkt auf der Seite einfügen. Falls Sie den Code auf der Seite sehen (anstatt den Inhalt von der Website der Drittpartei), wählen Sie stattdessen „Objekt“ > „HTML einfügen“.

Nach dem Einbetten des HTML-Codes sehen Sie einen blauen Begrenzungsrahmen mit Griffen, die die Blog-Beiträge umgeben, die für das Tumblr-Konto von Katie's Cafe eingegeben wurden.

  1. Verwenden Sie das Auswahlwerkzeug, um die Griffe zu ziehen und den Blog-Inhalt so zu skalieren, dass er ca. 80 % der Seitenbreite abdeckt. Zentrieren Sie den Blog-Inhalt so auf der Seite, dass die gekachelte Hintergrundgrafik auf der linken und rechten Seite durchscheint. Blaue Messrechtecke zeigen den Abstand von anderen Objekten an. Wenn kurz eine rote Ausrichtungshilfslinie angezeigt wird, ist das ausgewählte Objekt vertikal zentriert.
Skalieren und Positionieren der Seite
Skalieren und positionieren Sie das Tumblr-Blog auf der Seite „events“.

Sie haben jetzt alles getan, was erforderlich ist, um HTML in Muse-Seiten einzubetten. Falls Sie den HTML-Code bearbeiten möchten, können Sie mit der rechten Maustaste auf ein eingebettetes HTML-Element klicken und aus dem Kontextmenü die Option „HTML bearbeiten“ wählen. Hierdurch wird das Fenster „HTML bearbeiten“ angezeigt, damit Sie auf den Code zugreifen können, den Sie zuvor eingefügt haben.

Schauen Sie sich jetzt die Änderungen an, die Sie auf der Seite „events“ vorgenommen haben:

  1. Wählen Sie „Datei“ > „Seitenvorschau in Browser“, um die Seite „events“ in einem neuen Browserfenster anzuzeigen.

Wenn Sie durch die Blog-Einträge blättern, wird die Kopfzeile über dem anderen Seiteninhalt angezeigt. Der Grund hierfür ist, dass die Seite „events“ die Musterseite „Foreground“ verwendet und der Kopfzeileninhalt dieser Musterseite so definiert ist, dass er im Vordergrund angezeigt wird.

Die Seite „events“ ist jetzt fertig. Im nächsten Abschnitt lernen Sie, wie eingebetteter HTML-Inhalt in ein Widget eingefügt wird, um zu steuern, wie der Inhalt der Drittpartei basierend auf Benutzerinteraktion angezeigt wird.

Einbetten eines Videos auf Ihrer Muse-Website

Der Ziel-Container ist momentan mit einer grauen Flächenfarbe gefüllt. Sie können alle möglichen Inhalte im Ziel-Container platzieren, einschließlich verschiedene Bilddateien, gefüllte Rechtecke, Text oder eingebettetes HTML, das Sie von einer anderen Website kopiert haben.

In diesem Beispiel werden Sie eingebettetes HTML einfügen, das von YouTube generiert wurde.

Stellen Sie sich vor, dass Sie eine Seite auf YouTube.com besucht haben, um sich ein Video anzuschauen, das Sie mit Ihrem Konto hochgeladen haben. Wenn Sie auf die Schaltfläche „Teilen“ und dann auf „Einbetten“ klicken, können Sie auf den Einbettungscode für das Video zugreifen und ihn kopieren.

Einbetten eines Videos
Wählen Sie die gewünschte Videogröße aus und kopieren Sie dann den Einbettungscode, der von YouTube generiert wurde.

Der Einbettungscode für das Video von Katie's Cafe wurde für dieses Tutorial bereits in die Site kopiert, sodass Sie nicht zu YouTube gehen müssen. Kopieren Sie den unten stehenden Einbettungscode, um ihn in Ihrer Zwischenablage zu speichern:

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

Der obige Code verwendet iFrame-Tags, um den Link zur Videodatei zu umgeben, die auf YouTube gepostet ist. Ein iFrame ist ein HTML-Container, der es Ihnen ermöglicht, Inhalt in einem „Fenster“ anzuzeigen, wenn Sie ihn der Webseite hinzufügen.

Kehren Sie zu Muse zurück, nachdem Sie den obigen Code kopiert haben.

  1. Verwenden Sie das Auswahlwerkzeug, um auf den grauen Rahmen der Seite zu klicken; der Auswahlindikator oben links zeigt jetzt das Wort „Seite“ an. Das bedeutet, dass die ganze Seite ausgewählt ist.
  2. Klicken Sie auf den größeren Ziel-Container mit der grauen Flächenfarbe. Der Auswahlindikator oben links zeigt das Wort „Komposition“ an. Klicken Sie erneut auf den grauen Ziel-Container; der Auswahlindikator zeigt jetzt das Wort „Container“ an. Klicken Sie erneut (es wird jetzt „Ziel“ angezeigt) und dann noch einmal, bis der Auswahlindikator das Wort „Bildrahmen“ anzeigt. Drücken Sie die Rücktaste (Windows) bzw. die Löschtaste (Mac), um den Bildrahmen vom Ziel-Container zu entfernen.

Im nächsten Schritt fügen Sie den HTML-Code ein, den Sie oben in den Ziel-Container kopiert haben, während der innere Ziel-Container noch ausgewählt ist.

Hinweis: Genau wie das Einfügen des Hero-Bilds in den Auslöser-Container etwas schwierig war, kann auch das Einfügen von Code in einen Ziel-Container etwas schwierig sein, weil der Code IN den Ziel-Container des Widgets eingefügt werden muss. Sie können (je nach dem Element, das Sie gerade ausgewählt haben) den Videocode außerhalb des Widgets einfügen, sodass er direkt auf der Seite eingebettet ist. Wenn Sie den Leuchtkasten testen, indem Sie auf „Vorschau“ klicken und dann sehen, dass das Video angezeigt wird, obwohl Sie noch nicht auf das Hero-Bild geklickt haben, bedeutet das, dass der Videocode nicht erfolgreich in den Container eingefügt wurde; das ist der Grund, warum das Video sofort angezeigt wird. Das Video sollte nur angezeigt werden, wenn Sie auf das Hero-Bild klicken.

Führen Sie folgende Schritte aus, um den Videocode in den Ziel-Container einzufügen (während der Auswahlindikator das Wort „Container“ anzeigt).

  1. Wählen Sie „Objekt“ > „HTML einfügen“. Wählen Sie im Fenster, das jetzt angezeigt wird, den standardmäßigen Platzhaltertext aus und drücken Sie die Löschtaste (Mac) bzw. die Rücktaste (Windows), um den Text zu entfernen. Wählen Sie „Bearbeiten“ > „Einfügen“, um den YouTube-Code einzufügen, den Sie oben im HTML-Code-Feld kopiert haben. Klicken Sie auf „OK“, um das HTML-Code-Fenster zu schließen.

Hinweis: In vielen Fällen erkennt Muse, automatisch, wenn Sie HTML-Code einfügen, und versteht, dass es HTML statt reiner Text ist. Sie können daher auch mit der rechten Maustaste (bzw. bei gedrückter Ctrl-Taste) klicken, während der innere Ziel-Container ausgewählt ist, und aus dem angezeigten Kontextmenü die Option „Einfügen“ wählen, anstatt auf „Objekt“ > „HTML einfügen“ zu klicken. (Oder wählen Sie „Bearbeiten“ > „Einfügen“ oder verwenden Sie den Tastaturbefehl, um den Quellcode in den Ziel-Container einzufügen). Muse bietet viele Möglichkeiten, um den Videocode in den Ziel-Container einzufügen.

Nachdem Sie den Code in den Ziel-Container eingefügt haben, sehen Sie das erste Bild des angezeigten Videos (eine Tasse Kaffee). Das erste Bild des Videos gibt an, dass Sie den HTML-Einbettungscode erfolgreich eingefügt haben. Das Video wird nicht abgespielt, während Sie die Seite in der Entwurfsansicht bearbeiten. Es wird erst abgespielt, wenn Sie im Steuerungsbedienfeld auf die Schaltfläche „Vorschau“ klicken oder die Seite in einem Browser in der Vorschau anzeigen.

  1. Verwenden Sie das Auswahlwerkzeug, um den Ziel-Container bei Bedarf zu skalieren, damit der eingebettete HTML-Videoinhalt hineinpasst. Die Breite sollte etwa 670 Pixel und die Höhe um 415 Pixel betragen. Während das Video ausgewählt ist, zeigt der Auswahlindikator das Wort „HTML-Element“ an.
  2. Drücken Sie, während der Ziel-Container ausgewählt ist, ein Mal die Esc-Taste, um den äußeren Container auszuwählen. Sie können auch auf eine andere Stelle auf der Seite klicken, um die Auswahl des Leuchtkasten-Anzeige-Widgets aufzuheben, und dann zwei Mal klicken: ein Mal, um die Komposition auswählen, und noch einmal, um den größeren Container auszuwählen. Verwenden Sie das Auswahlwerkzeug, um die Griffe des Containers zu ziehen, sodass der Ziel-Container darin zentriert ist. Skalieren Sie den Container auf eine Breite von 710 Pixel und eine Höhe von 460 Pixel.
  3. Verwenden Sie das Menü „Fläche“, um die Flächenfarbe des Containers auf eine braune Farbe (#63301B) und die Deckkraft der Flächenfarbe auf 100 zu setzen.
Menü „Fläche“
Legen Sie die Flächenfarbe und die Deckkraft des Containers im Menü „Fläche“ fest.

  1. Wählen Sie den Textrahmen am unteren Rand des Containers aus und drücken Sie die Löschtaste (Mac) bzw. die Rücktaste (Windows), um ihn zu löschen. In den Textrahmen kann eine Beschriftung für den Ziel-Inhalt eingefügt werden, aber in diesem Projekt wird der Textrahmen nicht verwendet.
  2. Wählen Sie das Schließfeld (mit einem X) oben rechts im Container aus. Klicken Sie in das Schließfeld, um die Beschriftung auszuwählen und sie zu löschen. Verwenden Sie das Menü „Fläche“, um die Flächenfarbe auf „Ohne“ zu setzen. Klicken Sie auf das Ordnersymbol neben dem Bildbereich des Menüs „Fläche“ und navigieren Sie zu der Datei mit dem Namen „icon-close.png“. Verwenden Sie das Auswahlwerkzeug, um das Schließfeld so zu skalieren, dass das gesamte Schließsymbolbild angezeigt wird.
  3. Verwenden Sie das Auswahlwerkzeug, um sowohl den Ziel-Container als auch die Auslöser-Container an die Stelle zu verschieben, an der sie auf der Seite erscheinen sollen.
  4. Klicken Sie, während die Komposition ausgewählt ist, auf die blaue Pfeilschaltfläche, um das Optionenbedienfeld aufzurufen. Verwenden Sie für dieses Beispiel die folgenden Einstellungen:
    • Position: Leuchtkasten
    • Übergang: Verblassen
    • Automatisch abspielen: Deaktiviert
    • Unsortiert: Deaktiviert
    • Zunächst alles ausblenden: Deaktiviert
    • Wischen aktivieren: Aktiviert
    • Auslöser oben: Deaktiviert
    • Schließen-Schaltfläche: Aktiviert
    • Leuchtkasten-Teile bei Bearbeitung anzeigen: Aktiviert
    • Alles im Entwurfsmodus anzeigen: Aktiviert
Kompositionsoptionen
Aktualisieren Sie die Einstellungen im Menü „Optionen“, um zu steuern, wie sich das Widget verhält.

Klicken Sie auf eine beliebige Stelle außerhalb des Menüs „Optionen“, um das Menü zu schließen. Das Widget ist jetzt konfiguriert und kann nun getestet werden.

Weiter oben in diesem Tutorial haben Sie gelernt, wie HTML-Code in Seiten eingebettet wird, um ein Tumblr-Blog auf der Seite „events“ hinzuzufügen. Außerdem haben Sie gelernt, wie eingebettetes HTML in ein Leuchtkasten-Komposition-Widget eingefügt wird, um ein YouTube-Video in einem Leuchtkasten-Fenster anzuzeigen, wenn der Besucher auf einen Button klickt. In diesem Abschnitt werden Sie einen weiteren eingebetteten HTML-Typ kennen lernen, der von der Google Maps-Site bereitgestellt wird. Führen Sie folgende Schritte aus:

  1. Wenn die Seite „visit“ noch nicht in der Entwurfsansicht geöffnet ist, klicken Sie auf „Planung“ und doppelklicken Sie dann auf die Miniatur der Seite „visit“, um die Seite zu bearbeiten.

Dieser Quellcode wurde von der Site „maps.google.com“ kopiert. Sie können eine benutzerdefinierte Karte für eine Adresse (oder in diesem Fall mehrere Adressen) erstellen. Dieser Dienst ist kostenlos: Sie geben einfach die Adresse (bzw. mehrere Adressen) an und klicken dann auf den Button „Karte erstellen“.

Klicken auf „Karte erstellen“
Klicken Sie auf „Karte erstellen“, um eine Karte basierend auf den Adressen zu erstellen, die Sie eingeben.

Nachdem Sie eine Karte erstellt haben, können Sie über die Google Maps-Schnittstelle einen Titel und eine Beschreibung eingeben. Anschließend können Sie auf den Links-Button klicken, um auf den Code zuzugreifen. Wählen Sie den HTML-Code aus, der im Feld „HTML-Code zum Einbetten in eine Website“ bereitgestellt wird. Anschließend können Sie wieder zu Muse zurückkehren und das HTML in eine Seite einbetten.

Hinzufügen von HTML-Code zu Ihrer Seite
Verwenden Sie die Google Maps-Schnittstelle, um den HTML-Code für die Karte zu generieren.

Für dieses Tutorial ist es nicht notwendig, dass Sie selbst eine neue Karte erstellen. Wenn Sie es aber gerne ausprobieren möchten, geben Sie einfach eine beliebige Adresse ein, erstellen Sie eine Karte und kopieren Sie dann den Code. Wenn Sie aber nur die Funktionsweise testen möchten, können Sie mit einem bereits generierten HTML-Code arbeiten.

  1. Kopieren Sie den folgenden Quellcode:

<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. Fügen Sie den Code oben auf der Seite „visit“ ein. Verwenden Sie das Auswahlwerkzeug, um das eingebettete HTML in der vertikalen Mitte der Seite nahe am oberen Rand zu positionieren, sodass ein Viertel der Karte mit dem Kopfzeilenbereich überlappt. Lassen Sie etwas Platz zwischen der Karte und der Blumengrafik unter der Karte, damit Sie eine Textbeschreibung hinzufügen können.
  2. Verwenden Sie das Textwerkzeug, um einen Textrahmen unter der eingebetteten Karte zu ziehen. Kopieren Sie den folgenden Text und fügen Sie ihn in den Textrahmen ein:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

  1. Wenden Sie im Textbedienfeld die folgenden Einstellungen zur Formatierung des Textes an:
    • Schrift: Droid Serif (oder eine andere Serifenschrift)
    • Schriftgrad: 14
    • Schriftfarbe: #222222
    • Schriftausrichtung: Links
    • Zeilenabstand: 120 %

Nachdem Sie die Beschreibung zur Karte hinzugefügt haben, ist die Seite „visit“ fertig.

  1. Wählen Sie „Datei“ > „Seitenvorschau in Browser“, um zu sehen, wie die Seite „visit“ in einem Browser aussieht.
Webseite mit Karte
Die fertige Seite „visit“ enthält eine voll funktionsfähige Google-Karte.

Die Google-Karte mit dem eingebetteten HTML ist interaktiv. Sie können auf die Pfeile klicken, um die Karte innerhalb des Fensters zu schwenken, und Sie können auch auf „+“ und „–“ klicken, um die Karte zu vergrößern bzw. zu verkleinern.

Das Site-Design ist jetzt für alle Seiten abgeschlossen. In den restlichen Abschnitten dieses Tutorials werden Sie sehen, wie der Site der letzte Schliff verliehen und wie die Site kostenlos als Test-Site hochgeladen wird.

 Einbetten von HTML auf Ihren Adobe Muse-Seiten

Sie können HTML-Code in die Seiten Ihrer Site einbetten, um komplexe Site-Funktionen hinzuzufügen, die dynamisch von einem Drittanbieter-Webserver angezeigt werden. Diese Code-Ausschnitte können aus einer beliebigen Anzahl von Webservice-Anbietern wie Google, Yahoo!, YouTube und vielen anderen kopiert und dann mühelos in Muse-Seiten eingefügt werden. In diesem Abschnitt schauen Sie sich zwei verschiedene Beispiele von eingebettetem HTML-Code an, um herauszufinden, wie Sie mühelos Inhalt für soziale Medien hinzufügen und eine interaktive Google-Karte in einer mit Muse erstellten Website einfügen können.

Zuerst schließen Sie den Homepage-Inhalt ab. Wenn Sie die vorherigen Abschnitte des Tutorials bearbeitet haben, ist die Homepage u. U. bereits in der Entwurfsansicht geöffnet. Wenn dies nicht der Fall ist, doppelklicken Sie auf die Miniatur der Homepage in der Planungsansicht, um sie zur Bearbeitung in der Entwurfsansicht zu öffnen. Sie fügen den eingebetteten HTML-Code über der Diashow ein, die Sie zuvor der Homepage hinzugefügt haben.

Hinzufügen eines eingebetteten HTML-Twitter-Feeds, um die aktuellen Beiträge anzuzeigen

Sie können ein kostenloses Konto mit vielen verschiedenen Webdiensten einrichten, einschließlich Twitter, sodass Sie Nachrichten veröffentlichen können, die auf ihrer Website angezeigt werden. Neben der Anzeige von Informationen auf Twitter.com, können Sie Ihr Konto auch dazu nutzen, um sich anzumelden und den Einbettungscode zu kopieren, um die gleichen Nachrichten auf einer von Ihnen erstellten Website anzuzeigen.

In diesem Beispiel wurde ein fiktives Konto für Kevin's Koffee Kart eingerichtet. Dazu müssen Sie sich als neuer Benutzer bei Twitter anmelden und das Registrierungsformular ausfüllen. Danach können Sie die Benutzeroberfläche der Site verwenden, um Nachrichten zu veröffentlichen und den Einbettungscode zu kopieren, sodass Sie die Nachricht auch an einer anderen Stelle im Web anzeigen können. Dies ist der gleiche Vorgang, den Sie verwenden, um Blog-Beiträge, Videoinhalte, RSS-Feeds, Wettervorhersagen, Aktieninformationen Spielstände und viele andere Arten von dynamischen Daten freizugeben. Wenn Sie eine Site für einen Kunden erstellen, fragen Sie ihn, ob er bereits diese Dienste verwendet, um Informationen an seine Kunden weiterzugeben. In vielen Fällen können Sie seine Kontoinformationen verwenden, um sich anzumelden und den Einbettungscode für die gewünschten Daten, die Sie anzeigen möchten, abzurufen.

Damit Sie sich nicht bei Twitter anmelden müssen, um ein eigenes Konto zu erstellen, finden Sie nachfolgend den Einbettungscode für das Konto von Kevin's Koffee Kart, der aus Twitter kopiert wurde:

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

<div id="twitFeed">Optionaler Platzhaltertext</div>

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

 

  1. Kopieren Sie den obigen Code.

  2. Kehren Sie zu Muse zurück. In vielen Fällen können Sie auf die gewünschte Position auf der Seite klicken, um dort mit einem Rechtsklick das Kontextmenü aufzurufen. Wählen Sie dann die Option „Einfügen“ aus. Alternativ können Sie die Tastaturbefehle zum Einfügen (Befehl+V (Mac) bzw. Strg+V (Windows)) verwenden. Muse erkennt, dass der Text, den Sie einfügen, Quellcode, anstatt normaler Textinhalt ist.

    Hinweis:

    Wenn der Code nicht als HTML erkannt wird, können Sie „Objekt“ > „HTML einfügen“ wählen, um das Fenster „HTML-Code“ zu öffnen. Fügen Sie anschließend einfach den Quellcode ein, den Sie in das Fenster kopiert haben, und klicken Sie auf „OK“, um das Fenster zu schließen und den Code einzubetten.

  3. Nach dem Einbetten des Quellcodes (der im Prinzip ein Fenster in der Site-Seite erstellt, um den verknüpften Inhalt von Drittanbieter-Websites anzuzeigen), wird er möglicherweise nicht genau wie gewünscht auf der Seite angezeigt. Die Standardanzeige des eingebetteten Twitter-HTML-Inhalts wird angezeigt.

    Einbetten von Quellcode
    Die Twitter-Feed-Daten werden wie erwartet angezeigt, aber der Text ist nicht formatiert.

  4. Vergrößern Sie den Textbereich des Twitter-Feeds, indem Sie auf die Griffe um den eingebetteten HTML-Code klicken und ihn erweitern, sodass er den größten Teil der Seitenbreite ausfüllt, bei ungefähr einem Drittel der Höhe.

    Erweitern des Felds mit dem eingebettetem Code
    Vergrößern Sie durch Ziehen die Breite und Höhe des Fensters mit den Twitter-Feed-Daten.

    Somit kann der Text viel größer dargestellt werden, auch wenn er derzeit noch die Standardgröße hat.

    Dann aktualisieren Sie den Code im Fenster „HTML-Code“, um CSS-Styles hinzuzufügen, die festlegen, wie der dynamische Text angezeigt werden soll. Dieser Vorgang wirkt sich nicht darauf aus, wie die Meldungen auf Twitter.com angezeigt werden, aber die Formatierung des Textes auf Ihrer Site wird geändert.

  5. Kopieren Sie den folgenden CSS-Formatcode:

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

    Hinweis:

    Nehmen Sie sich die Zeit, sich mit dem oben stehenden Code vertraut zu machen, und beachten Sie, dass die Stile von einem öffnenden Tag, mit dem der Code angegeben wird (), und einem schließenden Tag eingeschlossen sind, mit dem der Browser über das Ende der CSS-Regeln () informiert wird. Wenn Sie Ihren eigenen eingebetteten HTML-Code erstellen, verwenden Sie diese Tags als Klammern um die Stile, die Sie anpassen möchten. In diesem Fall hostet die Twitter-Websites die veröffentlichten Nachrichten und verwendet eine CSS-ID-Auswahl mit dem Namen #twitFeed, um zu steuern, wie der Text auf der Site angezeigt wird. Somit verwendet der oben stehende Code im Prinzip den Stilnamen (von der Twitter-Site) und fügt dann einige Regeln hinzu, die bestimmen, wie der Text auf der Site angezeigt wird und die die von Twitter.com angewendeten Stile überschreiben. Weitere Informationen zu CSS-Regeln für die Formatierung von Textinhalten finden Sie auf der W3C-Schools-Website.

  6. Klicken Sie mit der rechten Maustaste in das Fenster mit dem eingebetteten HTML-Code und wählen Sie im Kontextmenü die Option „HTML“. Dadurch wird das HTML-Code-Fenster geöffnet, sodass Sie den Quellcode sehen können, den Sie zuvor eingefügt haben. Sie können dieses Fenster jederzeit während der Bearbeitung einer Site öffnen und den HTML-Quellinhalt aktualisieren. Klicken Sie über den HTML-Code, den Sie zuvor eingebettet haben, am oberen Rand des Fensters. Fügen Sie den Stil-Code ein, den Sie in Schritt 5 kopiert haben.

    Eingebetteter HTML-Code
    Fügen Sie den Stil-Code in das HTML-Code-Fenster über dem Twitter-Quellcode ein, den Sie zuvor eingefügt haben.

  7. Klicken Sie auf „OK“, um das HTML-Fenster zu schließen. Nachdem Sie diese Änderungen am Stil des Twitter-Texts vorgenommen haben, wird der von der Twitter-Site verknüpfte Beitrag weiß und wesentlich größer über der Diashow der Homepage angezeigt.

    Anzeigen von Twitter-Text auf der Webseite
    Der vollständige Twitter-Feed nach dem Aktualisieren der Größe des HTML-Objekts und nach dem Formatieren der Textformate.

Die Homepage ist fast fertig. Es gibt nur ein letztes Element, das auf der Seite hinzugefügt werden muss.

  1. Wählen Sie „Datei“ > „Platzieren“. Navigieren Sie im Dialogfeld „Importieren“ im Ordner „Kevins_Koffee_Kart“ zur Datei „DailyDrip.png“ und wählen Sie sie aus. Klicken Sie auf „Auswählen“.

  2. Nachdem Sie das Bild auf der Homepage platziert haben, verwenden Sie das Auswahlwerkzeug, um das Bild auf der linken Seite am oberen Rand der Diashow zu positionieren, sodass es die Diashow teilweise überlappt.

  3. Klicken Sie auf „Vorschau“, um die Diashow zu animieren und um sich anzusehen, wie sie unter dem Bild „DailyDrip“ und dem Bild mit dem braunen Tropfen angezeigt wird.

    Das endgültige Design der Homepage
    Das endgültige Design der Homepage.

Wenn Sie mit der Überprüfung der Homepage fertig sind, klicken Sie auf den Link „Planung“, um zur Planungsansicht zurückzukehren.

Als Nächstes fügen Sie eine andere Art von eingebettetem HTML-Code der Seite KART MAP hinzu.

  1. Doppelklicken Sie auf das Miniaturbild „KART MAP“, um die Seite in der Entwurfsansicht zu öffnen und zu bearbeiten.

  2. Verwenden Sie das Textwerkzeug, um einen Textrahmen auf die Seite „KART MAP“ neben der Oberkante des Seiteninhalts und direkt unter der Kopfzeile zu ziehen.

  3. Geben Sie den folgenden Text ein: „Looking for the Koffee Kart? Check here for real-time location updates throughout the day.“

  4. Öffnen Sie bei ausgewähltem Text das Absatzformatebedienfeld. Klicken Sie auf das Format „Georgia Body Medium“, um das Absatzformat auf den Kopfzeilentext der Seite KART MAP anzuwenden.

Verwenden von eingebettetem HTML, um eine Google-Karte auf Ihrer Muse-Webseite einzufügen

Videotutorial

Videotutorial
lynda.com - James Fritz

In diesem Abschnitt fügen Sie der Seite KART MAP Inhalt hinzu, indem Sie eingebetteten HTML-Code hinzufügen, mit dem eine von Google Maps generierte Karte geladen wird. Dies ist nur ein weiteres kleines Beispiel für die Möglichkeiten beim Einbetten von HTML-Code in Ihre Site. Sie können den Inhalt aus vielen anderen Drittanbieter-Websites wie YouTube, Flickr oder Picasa integrieren sowie Formulare, Blogs und andere komplexe Site-Funktionen hinzufügen, die Sie durch Zugriff auf Ihr Konto und durch Veröffentlichen von Inhalten auf den entsprechenden Sites steuern können.

  1. Öffnen Sie ein neues Browserfenster und rufen Sie Google Maps auf.

  2. Geben Sie eine Adresse oder einen Suchbegriff, wie z. B. Adobe SF, ein, um einen realen Standort zu suchen, mit dem die Karte erstellt wird.

  3. Klicken Sie auf die Verbindungsschaltfläche, die im oberen rechten Bereich der Oberfläche angezeigt wird, und dann auf die Option, um die eingebettete Karte anzupassen und in der Vorschau anzuzeigen.

  4. Legen Sie im daraufhin angezeigten Fenster „Anpassen“ die Größe der benutzerdefinierten Karte auf eine Breite von 850 und eine Höhe von 470 fest. Platzieren Sie die Karte innerhalb des Fensters neu, um sicherzustellen, dass der Adresstext vollständig sichtbar ist.

  5. Kopieren Sie den resultierenden HTML-Code aus dem Google-Fenster. Wenn Sie keinen eigenen Google Map-Code generieren möchten, kopieren Sie den unten stehenden Quellcode:

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

    Kopieren Sie den HTML-Quellcode aus dem Google Maps-Fenster
    Kopieren Sie den HTML-Quellcode aus dem Google Maps-Fenster.

  6. Kehren Sie zu Muse zurück. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Einfügen“, um den Code zu platzieren. Sie können auch „Objekt“ > „HTML einfügen“ auswählen, um das Fenster „HTML-Code“ zu öffnen, oder verwenden Sie den Standard-Tastaturbefehl, um den Code einzufügen (Mac: Befehlstaste+V; Win: Strg+V).

  7. Verwenden Sie das Auswahlwerkzeug, um die Karte links auf der Seite zu platzieren.

  8. Klicken Sie auf „Vorschau“, um zu sehen, wie Google Maps dem Besucher der Live-Site angezeigt wird. Klicken Sie auf die Navigationsschaltflächen für die Karte. Sie werden feststellen, dass die Karte vollständig interaktiv ist und dass Sie sie einzoomen oder im eingebetteten Fenster darin navigieren können.

Einfügen von iframes auf Ihrer Site, um andere Seiten mit eingebettetem HTML anzuzeigen

Durch Einbetten von HTML-Code können Sie nicht nur Code einfügen, den Sie aus einer Drittanbieter-Website kopiert haben, sondern auf die gleiche Weise auch eine gesamte Webseite in einem iframe (Inlineframe) einbetten. Sie können beispielsweise einen Code-Ausschnitt wie den folgenden eingeben:

<iframe title="Titel für den Inhalt" src="http://eigeneurlhier.com" width="900" height="500" style="border: 0;"></iframe>

Ersetzen Sie im oben stehenden Code den Text für title="" und url="" mit dem Titel bzw. der URL der gewünschten externen Webseite. Sie können auch die Breite und Höhe des Inlineframe-Fensters wie gewünscht ändern, um sie an das Design Ihrer Site anzupassen.

Optional können Sie auch ein Attribut hinzufügen, das sicherstellt, dass der iframe keine Bildlaufleiste enthält, indem Sie das Folgende dem öffnenden iframe-Tag hinzufügen:

scrolling="no"

Durch Auswählen von „Objekt“ > „HTML einfügen“ können Sie ein neues HTML-Code-Fenster öffnen und an einer beliebigen Stelle auf Ihrer Site einen iframe einbetten und dann jede URL (Site-Adresse, z. B. www.google.com) festlegen, um eine Live-Site im Internet anzuzeigen.

Sie können einen iframe auch dazu verwenden, um Animationen einzubetten, z. B. die in Adobe Edge erstellten HTML5-Animationen. Suchen Sie den Namen der HTML-Datei, die mit Adobe Edge erstellt wurde, und verwenden Sie diesen Dateinamen in dem URL-Attribut des iframes:

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

</iframe>

Als Nächstes müssen Sie die Adobe Edge-HTML-Datei (und die abhängigen Dateien) auf den gleichen Host-Server zusammen mit Ihren Muse-Site-Dateien hochladen. Wenn Sie Ihre Site auf FTP exportieren, können Sie die HTML-Datei in den Ordner kopieren, der während des Exportvorgangs von Muse generiert wird. Wenn Sie direkt auf die Adobe Business Catalyst®-Hosting-Server veröffentlichen, indem Sie auf den Link „Veröffentlichen“ in Muse klicken, können Sie die Dateien mit Adobe Dreamweaver® oder einem FTP-Client hochladen. Weitere Informationen zum Hochladen von Dateien auf die Business Catalyst-Hosting-Server per FTP finden Sie unter Veröffentlichen von Websites.

Formatieren von Elementen in einem Kontaktformular

Mit einigen CSS-Standardregeln können Sie die Elemente des Kontaktformulars formatieren, das Sie in der Admin-Konsole von Business Catalyst erstellt haben. Sie können die Anzeige des Formulars sowie der Formularelemente anpassen, um sie Ihrem Seitendesign anzupassen.

Nachdem Sie den Quellcode des Formulars aus der Admin-Konsole in die Seite in Muse eingefügt haben, wird das Formular mit den Standardstilen angezeigt.

Einfügen eines beliebigen HTML-Codes
Nach dem Einfügen des beliebigen HTML-Codes wird das Formular auf der Seite angezeigt.

So wie bei jedem anderen Element können Sie über die Seitengriffe die Abmessungen des Formulars ändern und es auf der Seite an die gewünschte Position verschieben.

Klicken Sie mit der rechten Maustaste (bzw. bei gedrückter Ctrl-Taste) und wählen Sie aus der daraufhin angezeigten Liste die Option „HTML“ aus.

Auswählen von „HTML“ über das Kontextmenü
Verwenden Sie das Kontextmenü, um aus der Liste der Optionen „HTML“ auszuwählen.

Das HTML-Code-Fenster wird angezeigt. Darin wird der Code aufgeführt, den Sie aus der Admin-Konsole in die Seite eingefügt haben. Platzieren Sie den Cursor vor der ersten Codezeile und drücken Sie mehrmals die Eingabetaste (Windows) bzw. den Zeilenschalter (Mac), um den Formularcode nach unten zu verschieben und um Platz zum Hinzufügen von Stilen zu machen.

Drücken Sie die Eingabetaste bzw. den Zeilenschalter, um über dem vorhandenen Code mehrere Zeilen einzufügen
Drücken Sie die Eingabetaste bzw. den Zeilenschalter, um über dem vorhandenen Code mehrere Zeilen einzufügen.

In diesen Bereich über dem Formularcode können Sie die CSS-Regeln einfügen oder eingeben, die das Erscheinungsbild der Formularelemente bestimmen.

Kopieren Sie den unten stehenden Code, um zu überprüfen, wie dies funktioniert:

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

Fügen Sie den Code in den oberen Teil des HTML-Fensters über dem Formular ein.

Fügen Sie die CSS-Stile oben im HTML-Fenster ein
Fügen Sie die CSS-Stile oben im HTML-Fenster ein.

Klicken Sie auf „OK“, um das HTML-Fenster zu schließen. Beachten Sie, dass das Erscheinungsbild des Formulars mit der neuen Formatierung aktualisiert wurde. Klicken Sie auf „Vorschau“ oder wählen Sie „Datei“ > „Seitenvorschau in Browser“, um sich anzuschauen, wie es in der veröffentlichten Site angezeigt wird.

Auf genau die gleiche Weise können Sie viele der verschiedenen Formularelemente steuern, die eingeschlossen werden, wenn Sie den Code des Kontaktformulars hinzufügen, den Sie aus Business Catalyst kopiert haben.

Nehmen Sie sich die Zeit, sich den Code anzuschauen, den Sie oben in das Fenster eingefügt haben. Beachten Sie die beiden style-Tags zu Beginn und am Ende der CSS-Regeln, die sie umgeben. Diese sind wichtig: Ohne die öffnenden und schließenden style-Tags funktionieren die CSS-Regeln nicht. Im Folgenden sehen Sie die beiden style-Tags ohne weitere Attribute:

<style type="text/css">

</style>

Diese öffnenden und schließenden style-Tags weisen den Browser an, dass der eingeschlossene Code CSS-Formatierungsregeln enthält. Stellen Sie stets sicher, dass sich diese Tags am oberen Fensterrand befinden, bevor Sie die CSS-Regeln dazwischen einfügen.

Wenn Sie Änderungen an den Formularelementen vornehmen möchten, um das Erscheinungsbild zu aktualisieren, müssen Sie die Klasse aufrufen (d. h. den verschiedenen Elementen im Formular zugewiesenen Namen), die Eigenschaft festlegen, die Sie aktualisieren möchten, und dann die Attribute angeben.

Betrachten Sie die folgende Codezeile:

input.textarea {

background-color: #fff;

}

Das Wort „input.textarea“ ist der einem Textfeldtyp zugewiesene Name (die „Klasse“). Die nächste Zeile ruft die Eigenschaft auf, die Sie ändern möchten. In diesem Fall bezieht sich „background-color“ auf die Hintergrundfarbe des Textfelds. Der Wert nach dem Doppelpunkt „#fff“ ist ein Kürzel innerhalb von CSS-Code für #ffffff (wobei es sich um den hexadezimalen Farbwert handelt, der die Farbe Weiß darstellt).

Einfach gesagt bedeutet die oben stehende Regel Folgendes: Legen Sie die Hintergrundfarbe für Textfelder dieses Typs auf Weiß fest.

Um das Formular zu aktualisieren, können Sie auch der Hintergrundfarbe des Textfelds einen allgemeinen Webfarbwert zuweisen: Rot. Der folgende Code legt die Hintergrundfarbe für diesen Textfeldtyp auf Rot fest:

input.textarea {

background-color: red;

}

CSS-Regeln werden in ihrer eigenen Sprache geschrieben. So wie beim Erlernen jeder neuen Sprache bedarf es einiger Übung, bevor Sie fließend darin sind. Weitere Informationen zur Syntax (d. h. zur Grammatik zum Schreiben dieser Regeln) finden Sie in ausgezeichneten Tutorials und in den kostenlos online bereitgestellten CSS-Referenzhandbüchern von W3Schools.

Wenn Sie bereit sind, Ihre eigenen Kontaktformulare zu bearbeiten, können Sie mithilfe der unten stehenden Liste, die Klassennamen und die zugehörigen Eigenschaften identifizieren, die Sie für jedes Formularelement anpassen können.

Hinweis:

Denken Sie immer daran, Ihre Liste mit CSS-Regeln zwischen den öffnenden und schließenden style-Tags einzuschließen, da der Browser (und die Entwurfsansicht) anderenfalls die Regeln nicht rendern kann.

<style type="text/css">

</style>

Entfernen der Standardelemente vom oberen Rand des Kontaktformulars

Wenn Sie das Formular in die Seite einfügen, beginnt es standardmäßig mit den folgenden beiden Elementen.

Wenn Sie eines oder beide Elemente entfernen möchten, öffnen Sie das HTML-Fenster und schauen Sie sich den Quellcode an, den Sie (ggf. direkt unter dem von Ihnen hinzugefügten CSS styles-Tag) eingefügt haben.

Um die Zeile „*Required“ zu entfernen, gehen Sie zu dieser Codezeile und löschen Sie sie:

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

Um die Beschriftung und das Menü „Title“ zu entfernen, gehen Sie zu diesen Codezeilen und löschen Sie sie:

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

Hinweis:

Achten Sie beim Bearbeiten von HTML-Code darauf, dass Sie nicht versehentlich andere Tags entfernen, die nicht Teil der oben aufgeführten Codezeilen sind. Bereits durch Entfernen eines einzigen Zeichens wie > kann es zu einer Fehlanzeige des Formulars kommen. Wenn dies der Fall ist, können Sie zur Admin-Konsole zurückkehren und den Code kopieren, um ihn wieder in die Seite einzufügen und den von Ihnen bearbeiteten Code ersetzen.

Liste mit Klassen und Eigenschaften zum Hinzufügen von CSS-Regeln und zum Formatieren von Kontaktformularen

Wenn Sie Farbwerte zuweisen, haben Sie eine wesentlich größere Auswahl an Farben, wenn Sie ein Online-Werkzeug wie kuler oder ein Bildbearbeitungsprogramm (Photoshop oder Fireworks) verwenden, um hexadezimale Farbwerte zu erstellen. Hexadezimale Farbwerte beginnen immer mit dem Symbol #, gefolgt von einer Kombination aus 3 oder 6 alphanumerischen Zeichen (0-9 und A-F).

Eventuell ist es einfacher, Farben mithilfe der Pipette in Muse aus dem vorhandenen Design auszuwählen. Sie können die hexadezimalen Farbwerte auch aus dem Feld im Farbwähler kopieren und in den Code einfügen. Die folgenden 16 Webfarben können Sie jedoch mit Namen angeben. Ihr Einsatz ist sehr nützlich, wenn Sie eine Regel testen möchten:

Aqua (Aquamarin), Black (Schwarz), Blue (Blau), Fuchsia (Pink), Gray (Grau), Green (Grün), Lime (Limette), Maroon (Braun), Navy (Marineblau), Olive (Olivgrün), Purple (Lila), Red (Rot), Silver (Silber), Teal (Blaugrün), White (Weiß) und Yellow (Gelb).

Wenn Sie die Farben mit Namen angeben, geben Sie nicht das #-Symbol vor dem Farbnamen ein.

Die folgende Liste ist nicht vollständig; es gibt viele verschiedene Kombinationen (und viele andere Eigenschaften, die Sie verwenden können), um Elemente zu beeinflussen. Nutzen Sie anfangs diese Vorschläge. Doppelklicken Sie, um einen Code-Ausschnitt auszuwählen, und kopieren Sie ihn in die Zwischenablage.

Weitere Tipps für das Arbeiten mit Muse finden Sie auf der Muse Hilfe und Tutorials-Seite bzw. auf der Muse Events-Seite (Live- und aufgezeichnete Webinare).

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie