Laboratorio di Informatica 3 Anno Accademico 2019-2020

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

1

(2)

Google Sites

Parte 3

Google Sites

Libri di testo consigliati:

Ryan Teeter and Karl Barksdale

Google Sites & Chrome for Dummies

Wiley Publishing Inc. (2009)

ISBN 978-0-470-39678-0

(3)

Gestione pagine

Menù gestione pagine

(4)

Gestione pagine

Cancellazione pagina:

Elimina pagina

1

Si selezioni la pagina da_{eliminare (e.g. «Altra pagina…»)}

2

Menù «gestione pagine», si scelga_{la voce «Elimina pagina»}

3

Confermare la scelta nella finestra_{di dialogo.}

Gestione pagine

Sposta (o copia) pagina:

1

Si selezioni la pagina da_{spostare (e.g. «Altra pagina…»)}

2

Menù «gestione pagine», si scelga_{la voce «Sposta pagina»}

3

Si scelga la pagina di destinazione_{nella finestra di dialogo.}

4

Si confermi la scelta con il_{pulsante «Sposta»} E’ la funzione che permette di spostare una pagina attraerso la struttura del sito.

La funzione «Copia pagina» è quasi uguale, l’unica differenza è che la pagina originale non viene eliminata, e nella destinazione selezionata, sarà posta una sua copia.

(5)

Modificare il layout del sito

Con lo strumento «Modifica layout sito», è possibile

personalizzare alcune scelte dell’impaginazione prese nel

template

.

• Aggiungere/togliere/modificare elementi al layout della pagina (intestazione, piè di pagina, barra laterale)

• Popolare gli elementi di layout con i gadget desiderati (caselle di testo, barre/pulsanti di navigazione, countdown…)

(6)

Modificare il layout del sito

Si selezioni una pagina di riferimento (generalmente la Home) e si selezioni l’elemento «Modifica layout sito» dal menù di gestione pagine.

Modificare il layout del sito

Si accede all’ «editor di layout» e delle sue sezioni.

Selezionando ciascuna sezione, è possibile personalizzarne l’aspetto e i contenuti. I controlli attivi (in grigio più scuro) indicano le sezioni attualmente visibili nel layout.

Intestazione

Navigazione orizzontale

Barra laterale

Piè di pagina personalizzato Contenuto (pagina)

Contenitore di elementi come finestre di testo e altri gadget (e.g. barra di navigazione nel sito, countdown…) può stare anche a destsra.

Fascia posta inferiormente. Contiene gadget, testo…

(7)

Modifica il layout del sito

Modifica barra laterale

Modifica proprietà (e.g., posizione, dimensioni)

Aggiunge gadget nella sezione Posizionandosi sulla barra laterale, si

evidenzino le funzioni di editing. Per aggiungere un gadget, premere l’apposito controllo.

Selezionare il gadget che si intende aggiungere (e.g. «Testo») nell’elenco

1

2

3 Modifica il layout del sito

Posizionandosi sulla barra laterale, si evidenzino le funzioni di editing. Per aggiungere un gadget, premere l’apposito controllo.

1

2

3

Il gadget selezionato appare in fondo alla barra. Selezionandolo con il puntatore è possibile modificarne le proprietà in un apposito editor.

4

(8)

Modifica il layout del sito

1

2

3

Il gadget selezionato appare in fondo alla barra. Selezionandolo con il puntatore è possibile modificarne le proprietà in un apposito editor.

4

Il gadget può essere spostato lungo la barra, «trascinandolo» per il bordo sx

5 Modifica il layout del sito

Modifica aspetto della barra laterale

Modifica proprietà (e.g., posizione, dimensioni) Posizionandosi sulla barra laterale, si

evidenzino le funzioni di editing. Per modificare l’aspetto della barra, il controllo di editing.

1

2

3

Il gadget appare nella barra laterale. Selezionandolo per la modifica…

4 Modifica il layout del sito

1

2

3

Barra laterale

Elenco di link a pagine interne e/o esterne che si sviluppa orizzontalmente sotto l’intestazione

Fascia posta superiormente. Contiene l’intestazione del sito ed eventuali loghi, immagini di sfondo…

Selezionando ciascuna sezione, è possibile personalizzarne l’aspetto e i contenuti. Aggiungiamo la barra di navigazione orizzontale…

Modificare il layout del sito

Attiviamo la barra di navigazione orizzontale La barra appare subito sotto l’intestazione del sito

(16)

• Pagine (del sito) con «Aggiungi pagina» • URL esterni con «Aggiungi URL»

Aggiungiamo i link rapidi alle pagine «File e risorse» e «HTML»

Al termine, la barra di navigazione orizzontale appare così

(18)

Modificare il layout del sito

L’aggiunta di URL esterni alla barra di navigazione orizzontale è del tutto analogo.

Al termine, la barra di navigazione orizzontale appare così

In questo caso, saranno richiesti il testo da visualizzare nel controllo e il link corrispondente.

Creazione di un sito web

Esercizio 3

Aggiornare il sito realizzato per l’esercizio n.2 inserendo:

• La descrizione di un evento (e.g. un contest fotografico) come articolo nell’area «News»

• Il countdown alla scadenza per la presentazione delle foto, visibiole nella parte superiore della barra di navigazione laterale;

• Una barra di navigazione orizzontale che fornisca un accesso rapido alle sole pagine di livello più alto Gli studenti sono inoltre invitati a sperimentare i diversi gadget fornite da Google Sites e ad arricchire il sito con nuove funzionalità.