Webseiten erstellen mit CHEETAH
Die wichtigsten Gestaltungselemente im Überblick (15)
Hinweis: Überprüfen Sie auf jeden Fall auch die mobile Ansicht. Sollte es von der eingebetteten Website keine mobile Ansicht geben, ist es oftmals die bessere Idee, auf dem Smartphone ganz auf das iFrame-Fenster zu verzichten.
Einbetten von Google Maps
Manchmal möchte man - meistens auf der Kontaktseite - ein Stück "Stadtplan" mit einbinden, aus dem ein potenzieller Besucher z. B. den genauen Ort der Firma oder einer Sehenswürdigkeit entnehmen kann. Während man mit Screenshots aus diversen Stadtplänen leicht mit dem Urheberrecht in Konflikt gerät, ist das Einbetten von Karten aus Plattformen wie Google Maps völlig unproblematisch, wenn man den Einbettungscode direkt der Plattform entnimmt. Und wie das genau geht, soll nun im Einzelnen anhand eines Beispiels schrittweise erläutert werden.
Angenommen, die Nachlassverwalter des Pharaos "Cheops" möchten auf ihrer Webseite ein zoombares Satellitenbild bzw. Karte mit dem (leider leeren) Grabmal ihres Mandanten integrieren. Welche einzelnen Arbeitsschritte sind dafür notwendig?
Wechseln Sie dazu im Browser auf die Plattform „Google Maps“ und lassen Sie sich dort den Ort "Cheops-Pyramide, Al Haram, Nazlet El-Semman, Al Giza Desert, Ägypten" anzeigen. Anschließend wählen Sie mittels der Zoom-Funktion den gewünschten Kartenausschnitt. Ist das geschehen, muss nur noch das linke Randmenü von Google Maps geöffnet und dort der Eintrag "Teilen" angeklickt werden, worauf sich ein neues Fenster öffnet, wo Sie den Tab „Karten einbetten“ finden:
Unter dem Tab "Karten einbetten" finden Sie den von Google Maps automatisch generierten Einbettungscode, den Sie nun mit einem Klick auf den Link "HTML KOPIEREN" in die Zwischenablage kopieren. Der Rest ist schnell getan. Sie wechseln wieder zurück in den „Cheetah Sitebuilder“ und ziehen sich dort aus dem rechten Randmenü ein iFrame /HTML Element auf ihre Webseite. Danach öffnen Sie dessen Einstellungsfenster. Nun müssen Sie nur noch den Inhalt der Zwischenablage unter "Allgemeine Einstellungen" in das Feld Einbettungscode" kopieren und bestätigen. Und das ist schon alles. Jetzt können Sie, wenn Sie möchten, den Container noch etwas skalieren, platzieren und formatieren - und dann dessen Funktionalität und Aussehen im Vorschau-Modus überprüfen:
Einbetten von Youtube-Videos
Wie Sie bereits wissen, stellt „Cheetah“ für das Einbetten von Youtube-Videos in eine Webseite ein eigenes Element in der Elementeauswahl „Videos“ zur Verfügung. Sie können aber auch das Inline-HTML-Element dafür verwenden, denn es gibt einige wenige Fälle, bei denen das native Video-Element nicht in der Lage ist, ein bestimmtes Youtube-Video abzuspielen – das iFrame-Element dagegen sehr wohl.
Die Vorgehensweise ist wiederum sehr einfach und folgerichtig. Sie suchen sich auf der Youtube-Seite das gewünschte Video aus und kopieren dessen Einbettungscode in die Zwischenablage (er ist unter „Teilen“ – „Einbetten“ zu finden):
Beachten Sie aber, dass Sie im Fenster, in dem der Einbettungscode bei Youtube angezeigt wird, noch weitere diverse Einstellungen vorgenommen werden können. Erst wenn Sie damit fertig sind, drücken Sie die Schaltfläche "Kopieren". Der Einbettungscode befindet sich jetzt in der Zwischenablage und kann somit zum iFrame / Inline HTML - Element übertragen werden.
Hinweis: Um die Größe des Video-Bereichs zu ändern, reicht es nicht, die Größe des iFrames zu ändern. Sie müssen dazu die im Einbettungscode enthaltenen Größen „width“ und „height“ explizit anpassen und dabei das Seitenverhältnis wahren. Übrigens ein guter Anwendungsfall für den Dreisatz.