Inserimento di HTML, CSS e Javascript personalizzati

Con lo strumento Casella HTML puoi aggiungere codice HTML, CSS e Javascript in una pagina di Google Sites. Lo strumento ti permette di aggiungere CSS e Javascript funzionali per personalizzare il layout del tuo sito Google. Ad esempio, puoi creare gallerie di immagini, menu personalizzati, moduli di iscrizione e widget basati su jQuery.

Questo strumento è diverso dall'utilizzare il pulsante HTML nella barra degli strumenti quando si sta modificando una pagina, in quanto il pulsante HTML consente di apportare lievi modifiche al codice HTML e al CSS in linea, ma non ti permette di scrivere codice JavaScript personalizzato.

Inserimento di HTML, CSS e Javascript personalizzati

  1. Vai alla pagina di Google Sites in cui desideri incorporare l'HTML.
  2. Vai al menu Inserisci e seleziona Casella HTML.
  3. Nella finestra di dialogo visualizzata, aggiungi il codice HTML, CSS e/o Javascript.
  4. Al termine, fai clic su Salva.
  5. Per generare l'anteprima dell'HTML incorporato, fai clic su Salva nella pagina del sito Google.

Suggerimenti per la scrittura del codice HTML con lo strumento Casella HTML

  • Per consentirti di verificare che il codice che inserisci sia privo di errori, mostreremo gli errori sottolineati in rosso durante la digitazione.
  • Nel codice HTML puoi inserire link a qualsiasi immagine pubblica su Internet, ad esempio un'immagine che si trova su Picasa. Tieni presente le norme del programma di Google e le leggi sul copyright ogni volta che inserisci un link a un'immagine pubblica.
  • Il codice proveniente da una casella HTML non può interagire o fare riferimento a codice esterno alla casella HTML, comprese le altre caselle HTML.
  • Puoi collegare tag di script a jQuery (ad esempio, https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js). Sono supportate le versioni 1.6 e successive.

Codice di esempio per lo strumento casella HTML

Il codice di esempio è per una galleria animata con 3 diapositive, di cui 2 di testo e una composta da un'immagine. Comprende i pulsanti Avanti e Indietro per consentire il passaggio da una diapositiva all'altra.

galleria di diapositive d'esempio

Codice (HTML, CSS e 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>
    Contenuto per diapositiva uno.
  </div>

  <div>
    Contenuto per diapositiva due.
  </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
 };

 /**
 * Passa alla diapositiva successiva utilizzando il parametro di direzione (dx).
 */
 var nextSlide = function(dx) {
  current_slide = (current_slide + slide_count + dx) % slide_count;

  // Calcola il nuovo valore per la proprietà css "left" e rende animata la galleria.
  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>

Funzioni non supportate

Lo strumento Casella HTML attualmente non supporta le seguenti funzioni:

  • iframe
  • Il codice Javascript non può creare tag script, immagine o link
  • Funzioni onload e onready per documento/finestra. Puoi inserire qualsiasi codice JavaScript alla fine del codice che deve essere caricato dopo che è stato caricato il documento.