Webseiten erstellen mit CHEETAH

Die wichtigsten Gestaltungselemente im Überblick (19)

HTML-Snippets verwenden
 

Unter "Snippets" (deutsch: Schnipsel) versteht man kleine funktionelle HTML-Code-Schnipsel, die inline in eine Codeseite eingefügt werden und die eine gewisse Funktionalität aufweisen. Unter Builderall „Cheetah“ wird hierfür das bereits bekannte iFrame / HTML – Element verwendet. Hier können Sie nämlich nativen HTML-Code eingeben, der dann in der Webseite entsprechend ausgeführt wird. Als einführendes Beispiel soll an dieser Stelle ein kurzes Code-Snippet vorgestellt werden, welches Google Maps veranlasst, eine Wegbeschreibung zu einem bestimmten Ort zu generieren, wobei der Ausgangspunkt der Flughafen Dresden-Klotzsche ist. Die Wegbeschreibung wird nach Betätigung der Schaltfläche „Blende Karte auf“ in einem neuen Browser-Tab angezeigt:
 

< form action= "http://maps.google.com/maps" method="get"  target="_blank">

  < label for="saddr">Wohin willst Du?

  < input type="text" name="saddr" />

  < input type="hidden" name="daddr" value="Flughafen

               Dresden (DRS), Flughafenstraße,

               Klotzsche Dresden" />

  < input type="submit" value="Blende Karte auf" />

< /form>

Diesen Code müssen Sie in das Feld „EinbettungsCode“ in der Kategorie „Allgemeine Einstellungen“ des iFrame / HTML – Elements eintragen und zusätzlich dazu noch das Markierungsfeld „Inline HTML“ ankreuzen. Das iFrame / HTML – Element ändert daraufhin seinen Inhalt

und in der Vorschau können Sie sich anschließend von dessen Funktionalität überzeugen.

Hinweis: An dieser Stelle kann jetzt natürlich kein Kurs über HTML-Programmierung gegeben werden. Wenn Sie also selbst derartige „Snippets“ entwickeln möchten, dann bleibt Ihnen nichts anderes übrig, als sich mit dieser Markup-Sprache zu beschäftigen. Dafür gibt es in großer Zahl Lehrbücher sowie darauf spezialisierte Webseiten und Online-Kurse im Netz. Besonders empfohlen seien in diesem Zusammenhang die folgenden zwei Referenzseiten:
 

Ein HTML-Snippet besteht i. d. R. aus drei Teilen: Einem HTML-Code, einem Style, welcher u. a. das optische Erscheinungsbild festlegt und eventuell JavaScript für die Sicherstellung der Funktionalität.
 

Angenommen, Sie möchten ein Foto auf ihrer Webseite modal vergrößert aufblenden, sobald man mit der Maus darauf klickt. Dann sieht der reine HTML-Code dafür folgendermaßen aus:
 

< img id="myImg" src="{Link zum Foto}"  alt="{Bildtitel}"  style="width:100%;max-width:300px">

< div id="myModal" class="modal">< span class="close">× < img class="modal-content" id="img01"> < div id="caption">< /div>
 

Dieser Code ist für die Anzeige des Bildes verantwortlich. Jetzt folgen die Inline-Stylesheets, um die einzelnen benannten Elemente explizit zu konfigurieren.
 

Als Erstes fügen wir einen Hover-Effekt dem Bild „myImg“ hinzu:
 

< style>

#myImg { border-radius: 5px;  cursor: pointer;  transition: 0.3s; }

#myImg:hover {opacity: 0.7;}
 

In der Vorschau ist dieser Effekt („Ausgrauen“ des Bildes bei Mausberührung) bereits zu sehen. Nun folgt die „Formatierung“ des modalen Contents:
 

.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }

#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; }

.modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; }

@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)} }

.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }

.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

@media only screen and (max-width: 700px){

 .modal-content { width: 100%; }}

< /style>
 

Hier folgt jetzt der Block mit dem für die Funktion notwendigen JavaScript-Programm das sicherstellt, dass ein Mausklick auf das Bild auch den gewünschten Effekt erzielt:
 

< script>

var modal = document.getElementById("myModal");

var img = document.getElementById("myImg");

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; }

var span = document.getElementsByClassName("close")[0]; span.onclick = function() {

 modal.style.display = "none"; }

< /script>
 

Hinweis: Sie müssen die Größe des iFrame / HTML – Containers so anpassen, dass beim Aufblenden des vergrößerten Bildes keine Rollbalken erscheinen (hier 1000 x 1000 Pixel).

TB Amazon