Eigenen HTML-, CSS- und JavaScript-Code hinzufügen

Mit dem HTML-Feld-Tool können Sie zu einer Seite in Google Sites HTML-, CSS- und JavaScript-Code hinzufügen. Mit dem Tool können Sie funktionalen CSS- und JavaScript-Code einsetzen, um das Erscheinungsbild Ihrer Google Site zu personalisieren. So können Sie beispielsweise Bilderkarussells, angepasste Menüs, Formulare und Widgets auf Basis von jQuery erstellen.

Dieses Tool für die Bearbeitung einer Seite unterscheidet sich von der HTML-Schaltfläche in der Symbolleiste. Über die HTML-Schaltfläche können Sie zwar kleinere Bearbeitungen von HTML- und Inline-CSS-Code vornehmen, aber keinen JavaScript-Code schreiben.

Eigenen HTML-, CSS- und JavaScript-Code hinzufügen

  1. Rufen Sie die Seite in Google Sites auf, in die Sie HTML-Code einbetten wollen.
  2. Öffnen Sie das Menü Einfügen und wählen Sie HTML-Feld aus.
  3. Ein Dialogfenster öffnet sich, in dem Sie HTML-, CSS- und/oder JavaScript-Code eingeben können.
  4. Wenn Sie fertig sind, klicken Sie auf Speichern.
  5. Eine Vorschau Ihres eingebetteten HTML-Codes sehen Sie durch einen Klick auf Speichern auf der Seite in Google Sites.

Tipps für das Schreiben von HTML-Code mit dem HTML-Feld

  • Damit Ihr Code frei von Fehlern bleibt, werden Fehler bereits bei der Eingabe rot unterstrichen.
  • Sie können Bilder aus dem Internet, auf die öffentlicher Zugriff besteht, in Ihren HTML-Code einbetten – beispielsweise ein Bild, das in Picasa gehostet wird. Beim Einbinden öffentlich zugänglicher Bilder sollten allerdings die Programmrichtlinien von Google und die einschlägigen Copyright-Gesetze beachtet werden.
  • In einem HTML-Feld eingegebener Code kann nicht mit Code außerhalb dieses HTML-Feldes interagieren oder sich auf diesen beziehen. Dies gilt auch für Code in anderen HTML-Feldern.
  • Sie können Script-Tags mit jQuery verknüpfen (z. B. https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js). Unterstützt werden alle Versionen ab 1.6.

Beispielcode für das HTML-Feld

Dieser Beispielcode erzeugt ein animiertes Karussell mit drei Folien, von denen zwei Text zeigen und eine ein Bild. Er enthält die Schaltflächen "Vor" und "Zurück", um das Karussell von einer Folie zur nächsten zu animieren.

Beispiel Folienkarussell

Code (HTML, CSS und JavaScript)


 
<style>
 .carousel {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color:black;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
 }
 .items {
  width: 1200px;
  position: absolute;
 }
 .items > div {
  width: 400px;
  height: 180px;
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
 .nav {
  position: absolute;
  bottom: 5px;
  right: 15px;
 }
 .button {
  cursor: pointer;
  font-weight: bold;
 }
</style>
<div class="carousel" style="display:none;">
 <div class="items">

  <div>
    Content for slide one.
  </div>

  <div>
    Content for slide two.
  </div>

  <div>
    <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
  </div>

 </div>
 <div class="nav">
  <span class="button left-button">prev</span>
  &nbsp;&nbsp;
  <span class="button right-button">next</span>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
 var current_slide = 0; // zero-based
 var slide_count = 3;
 var slide_size = 400;

 var Direction = {
  LEFT: -1,
  RIGHT: 1
 };

 /**
 * Zeigt die Folie an, die in der durch den Richtungsparameter (dx) angegebenen Richtung die nächste ist.
 */
 var nextSlide = function(dx) {
  current_slide = (current_slide + slide_count + dx) % slide_count;

  // Berechnung des neuen Werts für die CSS-Eigenschaft 'left' und entsprechende Animation
  var left_offset = '-' + (current_slide * slide_size) + 'px';
  $('.items').animate({'left': left_offset}, 300);
 };

 $('.right-button').click(nextSlide.bind(null, Direction.RIGHT));
 $('.left-button').click(nextSlide.bind(null, Direction.LEFT));


 $('.carousel').show();
</script>

Nicht unterstützte Funktionen

Folgende Funktionen werden durch das Tool "HTML-Feld" derzeit nicht unterstützt:

  • Iframes
  • JavaScript-Code ist nicht in der Lage Script-, Bild- oder Link-Tags zu erstellen.
  • Onload- und Onready-Funktionen von Dokumenten oder Fenstern Sie können am Ende des Codes beliebigen JavaScript-Code platzieren, der geladen werden soll, nachdem das Dokument geladen wurde.