Vedremo in questa lezione come aggiungere contenuti al sito e come suddividere i contenuti all’interno delle agine web.
Come già detto nella lezione precedente l’idea è quella di strutturare un sito che abbia la seguente disposizione logica:
Se non siete in modalità edit fate click sull’icona che mostra una matita in alto a destra:
Ora dal menù Layout selezionate la voce: “Due colonne (semplice)”
Otterreta la seguente disposizione:
Ora un click su “SALVA” per salvare le modifiche apportate.
Il primo blocco nella home page sarà costituito dalle news del sito e per far questo abbiamo necessità di introdurre le novità dalla pagina “News”:
Un click su “Nuovo post” per inserire la news.
Per questo esempio utilizzerò del testo fittizio, il classico Lorem ipsum, l’insieme di parole utilizzato da designer, grafici, tipografi, programmatori come testo riempitivo in bozzetti e prove grafiche. È un testo privo di senso, composto da parole in lingua latina (spesso storpiate). On-line trovate moltissimi generatori Lorem ipsum tra molti vi segnalo:
ma ne esistono anche versioni gratuite per desktop per ogni sistema operativo.
In una fase successiva andrete a variarne il contenuto con del testo vero, questa fase è importante per comprendere visivamente come il contenuto testuale si distribuisce nella vostra pagina.
Qando siete in modalità modifica pagina tutti i contenuti modificabili avranno una cornice:
Click su “SALVA” per salvare la news inserita, in questo modo la cornice intorno agli elementi modificabili scompare:
Nel caso si abbia la necessità di allegare un documento alla news un click su “Aggiungi file” (testo in rosso in basso)
Si aprirà un pannello (la grafica si riferisce al sistema MacOS X, ma per altri sistemi operativi è simile) da cui selezionare il file da allegare:
Nel mio caso un click su “Open” per effettuare i caricamento sul sito, qualcosa di analogo per altri sistemi operativi.
Al fondo della news apparirà il file allegato, un’icona identifica il tipo, in questo caso Microsoft Word, chi ha caricato il file (nome cognome), la data di inserimento.
Inseriamo altre news procedendo allo stesso modo.
Per inserire altre news, un click sulla voce di menù “News” oppure sul link “News” che compare sopra il blocco testo:
Ricordate che quando siete in modalità inserimento potete aggiungere al testo tutti gli stili che desiderate, così come fate con un normale Word Processor utilizzando la barra di formattazione testo:
Le news non sono fatte di solo testo si potrebbe avere l’esigenza di inserire delle immagini. Selezionate una delle news inserite, cerchiamo una immagine su web ed inseriamola nella news, per editare la news click sull’icona “matita” in alto:
Dal menù “Inserisci” selezionate “Immagine” e sceglietene una dal web o dal vostro desktop:
Il testo alternativo (opzionale) è il testo che compare quando posizionate il mouse sull’immagine, per questioni di accessibilità (non vedenti o ipovedenti) sarebbe opportuno sempre inserirlo.
L’immagine inserita è estremamente grande ed è necessario ridimensionarla, fate click sull’icona “S” o “L” (la barra proprietà immagini compare sempre se fate click sull’immagine in modalità “modifica”) per scegliere la dimensione preferita:
Per rendere più gradevole l’aspetto della news facciamo in modo tale che il testo scorri intorno all’immagine, fate click su “Testo a capo attivo“:
Il testo ora apparirà intorno all’immagine:
Se volete disporre a destra l’immagine un click sull’icona “Allineamento a destra” nella barra delle proprietà delle immagini.
Vediamo ora come inserire un blocco che contiene le ultime 4 news pubblicate.
Andiamo nella home page e attiviamo la modalità modifica e dal menù “Inserisci” aggiungiamo il modulo “Post recenti”
Dal pannello:
- selezionate il nome del file da cui prelevare le news,
- la lunghezza con cui presentare la news (breve, metà contenuto, completo),
- stabilite se inserire miniatura della prima immagine del post
- stabilite il numero di news che volete visualizzare
per esercizio provate a variare gli altri parametri
Il blocco news verrà inserito nella home page:
Per ritornare alla finestra di configurazione del modulo news fate click sull’icona ingranaggio. Le funzionalità associate alle altre icone consento l’allineamento del blocco e il posizionamento del testo intorno al blocco. La “X” cancella il blocco.
Con “Salva” salvate le modifiche e visualizzate il risultato.
Supponiamo di voler adesso inserire a destra del blocco news un avviso importante che reca una immagine e un file da scaricare.
In modalità “modifica pagina” posizionate prima il cursore nel blocco di destra:
Inserite il testo che vi interessa:
Al testo aggiungiamo un’immagine e facciamo in modo che il testo si disponga intorno all’immagine. Posizionate il cursore dove volete che venga inserita l’immagine e sempre dal menù inserisci selezionate “Immagine”
Dopo aver effettuato il ridimensionamento e l’allineamento a destra dell’immagine il risultato sarà:
Il risultato sarà:
Supponiamo ora di voler aggiungere al testo in evidenza appena inserito un documento allegato, ad esempio la circolare del corso di formazione.
Andate nella pagina “Documenti” del sito ed aggiungete un file:
Se ricordate avevamo stabilito che questa pagina doveva essere usata come collezione di file, selezionate “+ Aggiungi file” ed inserite un file:
Facendo click con il tasto destro del mouse sul link “Visualizza” copiate il link del documento:
A questo punto tornata in home page ed aggiungete questo link sulla parola “circolare” che scriverete al fondo del testo:
Per aggiungere il link della circolare alla parola “circolare” selezionate la parola e fate click su “Link” nel menù in alto:
nella finestra che si presenta selezionate “Indirizzo web” ed inserite il link che avete copiato:
“OK” per confermare.
Sotto il link comparirà un pannello da cui potrete modificare il link o rimuoverlo:
“Salvate” ed il sito apparirà così:
Ora aggiungiamo sotto il blocco “Annunci recenti” un blocco: “Video della settimana“.
Selezioniamo da YouTube il filmato di interese: DSA – Disturbi Specifici dell’Apprendimento, cfate clicl sul pulsante “Share” e copiate il link del filmato:
tornate sul vostro sito e dal menù “Inserisci -> Video -> YouTube” inserite il link appena copiato
Nella finestra che viene aperta inserite il link e nel campo “Includi titolo” il titolo che volete assegnare al box che verrà mostrato in home page.
Click su “SALVA” ed un succesivo “Salva” per rendere attivo l’inserimento del filmato:
Ora inseriamo a destra del filmato un calendario, potrebbe essere il calendario che riassume gli appuntamenti, i corsi ecc… nell’esempio inserisco un calendario vuoto che potrà poi essere riempito in un momento successivo.
Andate in “Inserisci -> Google Calendar”
e selezionate il calendario che avete preventivamente creato:
Dal pannello che segue modificate a vostro piacimento altezza, larghezza, tipo di visualizzazione, fuso orario e molto altro:
Per rendere la viasualizzazione più fruibile io ho impostato un’altezza di 330 px ed una larghezza di 425 px, visualizzazione agenda e il titolo: Appuntamenti
Per ottenere:
Nella prossi lezione vedremo come inserire i contenuti nelle restanti pagine del sito.