Google sites trucchi - la grafica

di Maria Silvana Radice







Google sites - la grafica

Google sites graphics

In questa pagina:






Testo giustificato:

Google sites non ha lo strumento per il testo giustificato, ma e` possibile ottenerlo usando questa stringa....

<p align="justify">

....che va messa direttamente nel codice html e prima di tutto il testo della pagina.

Sottoelenco puntato o numerato:

La barra degli strumenti ci offre la possibilita` di creare elenchi puntati o numerati....

Esempio:
  • testo
  • testo
  • testo
  1. testo
  2. testo
  3. testo
Per avere dei sottoelenchi, bisogna andare a capo sotto la voce di elenco da cui deve partire il sottoelenco e poi effettuare uno spostamento utilizzando il comando apposito....



Ecco il risultato:

  • testo
    • testo
    • testo
Naturalmente, sempre effettuando gli spostamenti, potete ottenere anche sottoelenchi di sottoelenchi.

Linee orizzontali, come metterle e toglierle:

Se andate in editor e, poi, in "inserisci", trovate la voce "Linea orizzontale" e metterla e` molto semplice, ma toglierla, dopo, non e` altrettanto semplice, perchè, una volta messa, non la si può più cancellare come si fa con le altre parti del testo.
Per togliere le linee orizzontali, bisogna aprire l'HTML, individuare il tag <hr> e cancellarlo. Ogni tag <hr> rappresenta una linea orizzontale nel vostro contenuto. Fortunatamente, questi tag non sono mescolati, in senso orizzontale, al codice, ma separano, verticalmente, le varie parti. Si trovano, quindi, allineati a sx e da soli sulla riga. Per trovarli, la cosa più comoda, dopo aver aperto l'HTML della pagina, è usare la funzione "trova" del browser.

Font, come utilizzarne un tipo non presente nell'editor:

Google sites fornisce moltissimi font da impostare come default per le varie sezioni del sito (menu -> gestisci sito -> temi colori e caratteri), ma se volessimo modificare il font solo per una parte di testo? Possibile, ma la scelta e` limitata a 6 tipi soltanto, utilizzando lo strumento fornito nell'editor di testo..
Se volete usare un font diverso da quelli proposti da Google sites, potete farlo usando questa stringa:

<span style="font-family:Comic Sans MS">Testo</font></span>

Il codice va incollato nell'html della pagina, entrando in modalita` editor e cliccando su "html" nella barra di strumentazione.
"Comic Sans MS" e` il font che ho scelto io per l'esempio e che potete sostituire con il nome del font di vostra scelta. Al posto di "Testo", dovete mettere il contenuto della pagina. In poche parole, dovete incollare la prima parte del codice all'inizio della pagina, o all'inizio della porzione di testo a cui volete cambiare il carattere e la parte finale (
</font></span>) al termine. Considerate che la visualizzazione di un font dipende dalla sua presenza nel sistema operativo del visitatore e/o dal browser utilizzato. Se usate un carattere che il visitatore non possiede, il testo verra` visualizzato col carattere standard. Inutile, quindi, usare font ricercati, meglio limitarsi a quelli di consigliati, per esempio, da Google stesso:

https://www.google.com/fonts

Tabella, come togliere il bordo e/o centrarla nella pagina:

Le tabelle sono davvero utili per allineare immagini, o altro, ma, qualche volta, può essere sgradevole vedere il bordo intorno. Come toglierlo? Per toglierlo, dovete aprire l'editor della pagina e cliccare su HTML negli strumenti di testo. Ora, con l'aiuto, se necessario, della funzione "trova" del browser, dovete cercare il codice della tabella in questione (table), che sarà simile a questo + il contenuto della tabella:

 <table style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;" border="1" bordercolor="#888" cellspacing="0">
<tbody>
<tr>
<td style="width: 60px;">&nbsp;</td>
</tr>
</tbody>
</table>

Cambiate i valori "border-width" e "border" da 1 a 0. Aggiornate e salvate. La tabella sarà invisibile...

Per centrare, invece, una tabella nella pagina, basta aggiungere all'inizio del codice <div align="center"> e chiuderlo, alla fine, con </div>. Oppure inserire questo comando nel tag "style" della tabella :

<table style= "margin: 0px auto;................

Tabella con bordo e/o celle colorate:

Dopo aver creato una tabella tramite lo strumento presente nell'editor di Google sites, potete personalizzarla intervenendo sul suo codice.

Esempio:
   

Il codice di base della tabella e` questo:

<table style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;" border="1" bordercolor="#888" cellspacing="0">
<tbody>
<tr>
<td style="width: 60px;">&nbsp;</td>
<td style="width: 60px;">&nbsp;</td>
</tr>
</tbody>
</table>

Potete cambiare il colore di fondo di tutta la tabella, aggiungendo il tag segnato in rosso in questa parte del codice e impostando il colore che preferite:

<table style="background-color:red;border-collapse:collapse;border-color:rgb(136,136,136);border-width:1px" border="1" bordercolor="#888" cellspacing="0">

Oppure, potete cambiare il colore di fondo di ogni singola cella, in questo modo:

<td style="width: 60px;" bgcolor="red">&nbsp;</td>

Oppure ancora, potete cambiare il colore del bordo della tabella, modificando il codice rgb, o, piu` semplicemente, sostituendolo con il nome in inglese del colore, o il suo codice web. Potete anche aumentare la larghezza del bordo (width).:

<table style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;" border="1" bordercolor="#888" cellspacing="0">

Per gli stili del bordo, vedi anche: Tabelle, come crearle e personalizzarle

Immagine, come incorniciarla:

Al codice dell'immagine, gia` caricata, aggiungete la parte segnata in rosso e cancellate il comando border="0" ....

<div style="display: block; text-align: center; margin-right: auto; margin-left: auto;">
<a href="URLcollegamento" imageanchor="1">
<img style="border:10px ridge #9e6d45" src="URLimmagine" border="0"></a></div>

I parametri relativi alla larghezza della cornice, allo stile e al colore possono essere modificati secondo le vostre esigenze.
Per approfondimenti: Come incorniciare testo e immagini (border)

Immagine animata (gif), come caricarla:

Ragazzi, ho scoperto che avevamo la soluzione sotto il naso e non ce ne eravamo mai accorti! Altro che carica di qui e di là....possiamo fare tutto, comodamente, nel nostro sito e nel modo più semplice. Me ne sono accorta mentre facevo un po' di pulizia negli allegati; li guardavo, uno a uno, per decidere cosa buttare e visualizzando un file .gif, mi sono accorta che....si muoveva e mi sono detta: ma se si muove così, perchè non dovrebbe muoversi nella pagina? Ho copiato l'indirizzo del file, l'ho incollato  eeeeeee.....la gif era nella mia pagina, con la sua animazione. Quindi, avete capito come bisogna fare? Caricate la gif animata in altro->gestisci sito->allegati->carica, poi copiate l'indirizzo, cliccando col dx su visualizza, o scarica (è uguale, in questo caso). Accedete alla pagina in cui volete inserire la gif, aprite l'editor e andate in inserisci->immagine->immagine da URL. Incollate l'indirizzo....ATTENZIONE....questa volta non bisogna togliere la parte finale dell'indirizzo (quella dopo l'estensione), ma bisogna lasciare tutto, altrimenti la gif non si muoverà (provato). Date l'ok ed ecco la vostra gif animata, senza bisogno di Picasa web, o altro. E vai....

In alternativa, potete creare una pagina di archivio (schedario) in cui ospitare tutte le vostre animazioni. (vedi: Consigli pratici per cominciare bene)





Guarda anche: Come creare un'animazione

Immagine con sfondo trasparente, come caricarla:

Potete caricare senza problemi un'immagine con fondo trasparente, sia in formato gif che in formato png. Questo vale anche per l'immagine di logo. Il formato png offre un risultato grafico migliore.

Immagine - Anteprima dimensioni originali, come aprirla:

Niente di più facile!
  • Caricate l'immagine nella dimensione "grande" di cui volete offrire l'anteprima.
  • Riducetela alle dimensioni adatte alla pagina.
  • Salvate la pagina.
  • Cliccate sull'immagine con il tasto dx del mouse e scegliete "Copia indirizzo immagine". Otterrete un indirizzo di questo tipo....           https://sites.google.com/site/nomesito/_/rsrc/1405934011412/pagina/nomeimmagine.jpg?height=200&width=300                                 ....che riporta i valori di riduzione dell'immagine. Copiatelo..   
  • Tornate in modalita` editor.
  • Cliccate sull'immagine per far apparire la barra delle impostazioni.
  • Cliccate su "modifica". Apparira` la finestra con il collegamento dell'immagine.
  • Al posto del collegamento esistente (voce: Link a questo URL), mettete il nuovo indirizzo, cancellando la parte finale con la riduzione delle dimensioni.
  • Mettete la spunta su "Apri questo link in una nuova finestra" e date l'OK.

Salvate la pagina e....ecco fatto! Cliccando sull'immagine, si aprira` l'anteprima in dimensioni originali.

AGGIORNAMENTO: Dato che ora e` necessario ottimizzare il sito e i suoi contenuti per il mobile, la cosa giusta da fare e` creare e caricare due immagini, una piu` piccola, da caricare nel sito e una piu` grande per l'anteprima. Leggi anche: Google sites - come ottimizzare il sito e i contenuti per il mobile

Immagini - Come sostituire un'immagine con un'altra senza cancellarla:

Visto che posizionare bene le immagini può essere impegnativo e doverle sostituire può esserlo anche di più, col rischio di non riuscire a metterle come erano prima, voglio insegnarvi a sostituirle senza cancellarle.

Prima strada:
E' molto semplice:
  1. Copiate l'immagine che volete caricare
  2. Aprite l'editor della pagina
  3. Evidenziate la vecchia immagine
  4. Incollate la nuova immagine
Oppure:
  1. Caricate la nuova immagine da altro->gestisci sito->allegati
  2. copiatene l'indirizzo, cliccando col dx su "Scarica" o "Visulaizza".
  3. Accedete alla pagina e aprite l'editor.
  4. Cliccate sull'immagine che volete sostituire e poi su "rimuovi", per togliere il collegamento....


  5. Evidenziate l'immagine che volete sostituire.
  6. Andate in inserisci->immagine->immagine da URL e
  7. Incollate l'indirizzo della nuova immagine.
  8. Date l'ok

Seconda strada:
Andate in Gestisci sito->Allegati e cercate l'immagine che volete sostituire. Se l'impresa e` ardua, potete aiutarvi con la casella di ricerca, inserendo il nome dell'immagine. Dai risultati della ricerca dovreste ottenere la data di archiviazione e questo rendera` piu` semplice l'individuazione dell'immagine negli allegati.
Quando avrete trovato l'immagine, metteteci la spunta e poi cliccate su "Sostituisci, nella barra in alto. Cercate l'immagine da mettere al suo posto e date l'OK. Fatto..

Terza strada:
Dopo aver caricato la nuova immagine negli allegati (altro->gestisci sito->allegati->carica). Aprite l'editor della pagina e cliccate su <HTML>, in alto a dx nella barra degli strumenti di testo.
Si aprirà una finestra, che contiene tutto il codice html della pagina. ATTENZIONE, se il layout della pagina è diviso in colonne, dovrete, prima, cliccare in un punto vuoto della sezione su cui volete lavorare. Nel codice html, dovete cercare la porzione riferita all'immagine da sostituire. Niente paura! Basta aprire l'opzione "Trova" del browser:

-In Firefox = Modifica (in alto a sx)->Trova
-In Chrome = cliccate sull'icona della personalizzazione (in alto a dx) e poi su "Trova".

Si aprirà una casella di ricerca, in cui dovrete scrivere il nome dell'immagine da sostituire, oppure una parola chiave che vi possa portare dove è situata. La parte di codice che appartiene all'immagine, avrà questo aspetto....

<div style="display:block;text-align:left"></div>
<div style="display: block; text-align: left;"><a href="URLcollegamento" imageanchor="1"><img src="URLimmagine" border="0"></a></div>

....con variazioni legate al posizionamento nella pagina. Non dovete confondere l'URL del collegamento (se c'è), che è preceduto da "a href=", con quello dell'immagine, che è, sempre, preceduto da img src=. A questo punto, se non l'avete già fatto, copiate l'indirizzo della nuova immagine da inserire (altro->allegati->clic dx su Scarica->Copia) e incollatelo al posto dell'indirizzo della vecchia immagine, come indicato in rosso. Dovete, anche, mettere il valore 0, al posto di 1, nel tag "imageanchor" (se presente). Cliccate su "Aggiorna" e, se il risultato vi soddisfa, salvate la pagina.

Immagini - Come evitare l'anteprima delle immagini al clik del mouse:

Avrete notatoche se cliccate col sx su una immagine del vostro sito, essa si apre in anteprima. Se non volete che questo accada, cliccate sull'immagine, in modalita` editor e scegliete "rimuovi".Questo rimuoverà il collegamento associato all'immagine.

Immagini - Come affiancare il testo alle immagini:

Per poter affiancare il testo ad una immagine (o gadget) e` necessario  cliccare sull'apposita opzione:

Immagini - Come affiancare due o piu` immagini:

Anche per affiancare due o piu` immagini, bisogna procedere come descritto nel paragrafo precedente, naturalmente valutando che lo spazio sia sufficiente. Affinche` le immagini siano perfettamente allineate, dovete impostare l'opzione di affiancamento per ciascuna di esse.

Per situazioni particolari, consultate la guida: Come affiancare perfettamente due o piu` immagini (o gadgets)

Immagini - Come affiancare e centrare due o piu` immagini:

Centrare una sola immagine, nella pagina, e` sempice, basta utilizzare lo strumento messo a disposizione e che si vede cliccando sull'immagine stessa caricata, ma se vogliamo centrare due, o piu`, immagini affiancate? In questo caso, bisogna rassegnarsi a mettere mano al codice html. Vi spiego come....

Primo metodo:
  • Caricate le immagini come di consueto e affiancatele.
  • Cliccate su "html" nella barra degli strumenti per far apparire il codice della pagina.
  • Cercate la parte del codice riferita alle immagini che state caricando.
  • Vedrete che il sistema le avra` caricate inserendole ciascuna all'interno di un div, in questo modo:

<div style="display: inline; float: left; margin: 5px 10px 0px 0px;">
<a href="URLcollegamento" imageanchor="1"><img src="URLimmagine" border="0">
</a>
</div>
<div style="display: inline; float: left; margin: 5px 10px 0px 0px;">
<a href="URLcollegamento" imageanchor="1"><img src="URLimmagine" border="0">
</a>
</div>

  • Eliminare tutta la parte segnata in rosso.
  • Fatto questo, cliccate su "aggiorna" per salvare le modifiche e tornare in modalita` editor visuale.
  • Evidenziate tutte le immagini insieme e utilizzate lo strumento di default per portarle al centro.

Secondo metodo:

C'e` anche un altro modo per togliere la formattazione alle immagini e affiancarle centrandole, forse piu` veloce.
Dopo averle caricate, una sopra all'altra, le dovete evidenziare tutte insieme per poi utilizzare lo strumento di rimozione....


Ho detto di caricarle una sopra all'altra, perche`, anche caricandole gia` affiancate, la deformattazione le riporterebbe alla condizione di allineamento verticale.
Per portarle all'allineamento orizzontale, dovete andare nel codice html e sostituire il tag <br>, che troverete tra un'immagine e l'altra, con il tag &nbsp; (scritto cosi`, con il punto e virgola finale).

In pratica, si passera` da questa situazione....

<a href="URLcollegamento"><URLimmagine" border="0"></a><br>
<a href="URLcollegamento"><URLimmagine" border="0"></a><br>
<a href="URLcollegamento"><URLimmagine" border="0"></a><br>

....a questa...

<a href="URLcollegamento"><URLimmagine" border="0"></a>&nbsp;
<a href="URLcollegamento"><URLimmagine" border="0"></a>&nbsp;
<a href="URLcollegamento"><URLimmagine" border="0"></a>&nbsp;

Fatto cio`, potete portarle in centro come descritto prima.

Naturalmente, potete anche preparare il secondo codice completo e poi caricarlo.

Scegliete voi quale metodo preferite..

Link, come metterlo sotto ad un'immagine:

Molto semplice, caricate l'immagine come al solito, poi cliccateci e scegliete "modifica". Nella finestra che apparirà, alla voce "indirizzo web", mettete, al posto del link che rimanda all'immagine stessa, il link a cui volete indirizzare il visitatore. Fatto.
Se volete usare il codice da mettere in HTML, per ottenere lo stesso risultato, il codice è questo:

 <a href=”Link di collegamento“><img src=”Indirizzo dell'immagine“/>

Link, come personalizzarne l'aspetto:

Potete cambiare l'aspetto di un singolo link, usando questa stringa....

<a href="URLcollegamento" style="text-decoration: none">testo</a>

....da inserire direttamente nell'html della pagina. Praticamente, spogliate il link di qualunque decorazione, compresa la sottolineatura. Dopodiche`, potete personalizzarlo come volete, usando i normali strumenti di editor della pagina, ma dovete operare su una o due lettere per volta (non so perche`, ma sulla parola intera non prende).
Esempio:  Questo e`un link

Oppure, potete inserire il colore e/o gli altri attributi direttamente nel codice del link:

<a href="URLcollegamento"
style="text-decoration: none">
<font color="white" size="6">testo</a></font
>


Tag ALT, come metterlo ad una immagine:

Prima di tutto: cosa è il tag Alt e a cosa serve? Il tag ALT non è altro che la descrizione dell'immagine. Questa descrizione non verrà visualizzata nella pagina, ma servirà al motore di ricerca per migliorare l'indicizzazione. In Google sites non è necessario modificare manualmente il codice html per inserire questo tag. Quando caricate un'immagine, viene visualizzata la possibilità di inserire un testo alternativo. La descrizione dovrà essere chiara e concisa.



Importante: Se non si inserisce subito il testo, e` buona regola mettere uno spazio (con la barra spaziatrice) nella casella, anche lasciandola vuota. In questo modo il sistema creera` un tag alt vuoto nel codice relativo all'immagine, che si potra` poi riempire in un secondo tempo.

Sfondo colorato, o con immagine, per una sola pagina:

In Google sites e` possibile impostare il colore di sfondo della zona contenuti semplicemente andando in menu` -> gestisci sito -> temi colori e caratteri -> area contenuti, ma se volessimo mettere un colore particolare ad una sola pagina, o colori diversi a diverse pagine?

E' molto semplice. Aprite l'editor di una pagina vuota e cliccate su "html", nella barra degli strumenti, per aprire la visualizzazione in codice della pagina. Proprio all'inizio della schermata di editor (se trovate il tag <br> predefinito, cancellatelo), dovete inserire questa stringa:


<div style="background-color:red;padding:3px">


Il tag di chiusura (</div>) si posizionera` in automatico.
Al posto di "red" (rosso), dovete mettere il nome, in inglese, del colore che volete dare alla pagina, oppure il suo codice (Editor colori). Cliccate su "Aggiorna" e tornate alla visualizzazione della pagina.
Posizionate il cursore all'interno della striscia colorata. Scorrendo verso il basso, la pagina si colorerà fino a dove desiderate.

Naturalmente, potete colorare anche una sola porzione di pagina. Il fondo colorato puo` essere interrotto chiudendo il div, dove desiderato, tramite il suo tag di chiusura </div>.
E` anche possibile inserire dei margini:

margin-left: 30px;          a sinistra
margin-right: 30px;        a destra
margin-top: 30px;          in alto
margin-bottom: 30px;    in basso

oppure:

margin: 30px;    per avere il margine tutto intorno.

Esempio:  <div style="background-color:red;padding:3px;margin: 30px;">

Se preferite mettere uno sfondo con dimensioni personalizzate, o se volete mettere un'immagine come sfondo, passate a Galleria di effetti vari per le pagine web.

Sfondo semitrasparente su cui poter scrivere:

Per spiegarci meglio, vogliamo ottenere questo risultato....


Per prima cosa, dovete creare l'immagine semitrasparente da usare come sfondo. Potete usare un'immagine in tinta unita, come nel mio esempio, oppure 'immagine che preferite. Per ottenere questo effetto di semitrasparenza, usero` "Photofiltre", programma che non mi stanchero` mai di consigliare a tutti.
Per capire come fare, seguite questo video:




Ora che avete la vostra immagine pronta, vediamo in che maniera e` possibile impostarla come sfondo pagina per un sito di Google sites.
E` necessario che il tema scelto per il sito sia un tema che supporta la trasparenza per la zona contenuti.

Andate in menu`->gestione sito->temi colori e caratteri e sistemate le impostazioni in questo modo....

Per l'intera pagina:



Alla voce "Immagine wrapper" caricate l'immagine di sfondo dell'intero sito.


Per l'area contenuti:



Alla voce "Colore", indicate "Nessuna".
Alla voce "Immagine" caricate l'immagine semitrasparente che avete preparato. Le "Opzioni" dipendono dalle caratteristiche dell'immagine e dalle dimensioni dello spazio che deve occupare.

Ecco fatto!!

Lo sfondo puo` essere applicato anche ad una sola pagina seguendo il metodo illustrato nel paragrafo precedente.

Pagina - Come incorniciare un'intera pagina:

Per questo vi rimendo alla guida: Come mettere una cornice ad una intera pagina

Sfondo - Come mettere uno sfondo colorato ad un area di testo nella sidebar:

Allo stesso modo, e` possibile impostare un colore di fondo personalizzato per una singola area di testo nella sidebar. Per fare questo, dopo aver creato l'area di testo, dovete accedere alle sue impostazioni e cliccare su "html"  (a volte appare solo la H) nella barra degli strumenti....

All'inizio del codice, incollate questa stringa:

<div style="background-color:red">

Al posto di "red" mettete il colore che preferite con il suo nome inglese, oppure con il codice web (Editor colori).

Banner - Come creare un banner per il sito:

Le spiegazioni dettagliate le trovate alla pagina "COME FARE A....,con una piccola differenza. Trattandosi di Google sites, non è necessario affidarsi ad un servizio esterno per pubblicare l'immagine, basta caricarla negli allegati (altro->gestisci sito->allegati), copiare l'indirizzo e incollarlo nel codice del banner. Oppure, se il codice non vi serve e volete avere il banner nel sito, caricate l'immagine da inserisci->immagine->indirizzo web (URL), incollate l'indirizzo copiato dall'immagine in allegati e date l'ok. Quando l'immagine apparirà nella pagina, ci cliccate sopra, scegliete "modifica" e, al posto dell'indirizzo impostato, mettete l'URL della pagina che dovrà apparire cliccando sul banner. Il banner così fatto, può essere copiato e incollato ovunque, restando attivo. (Attenzione a scegliere, sempre, "copia" e non "copia immagine", altrimenti copierete solo l'immagine statica, senza indirizzamento).
Se volete creare un banner animato, leggete questa guida.

Favicon - Come creare la favicon del sito:

La "favicon" è quella piccola icona che appare vicino al nome di un sito quando ci colleghiamo ad esso. La favicon standard è una semplice finestrella bianca con contorni blu, che, certo, non identifica in alcun modo il vostro sito.

Per cambiare e personalizzare quella del sito Google
, dovete fare così:

Prima di tutto, è necessario creare l'immagine che volete usare come vostra icona. Potete usare l'immagine che preferite, purche` sia perfettamente quadrata, altrimenti si distorcera` nella conversione. Fatto questo, dovete  convertire l'immagine in formato .ico.
Ci sono molti programmi online per farlo, ve ne indico un paio:

http://tools.dynamicdrive.com/favicon/  
FavIconBlog Favicon Generator Script - Welcome!
                    
Oppure, se volete costruirla da zero e direttamente online, potete andare qui:
                  
http://www.favicon.cc/

Una volta scaricata la vostra favicon, il procedimento per sostituirla a quella standard, è semplicissimo. Entrate nel vostro sito e seguite questo percorso:

Menu`->gestisci sito->allegati->carica->sfoglia->cercate l'immagine, caricatela e......basta. La vostra favicon personalissima apparirà, come per incanto, accanto al nome del sito.

(In alcuni casi, potrebbero essere necessari un paio di giorni)