Come creare pagine web - Lezione 10

Le pagine principali del sito sono più visitate perché sono collegate alle voci del menu e sono le pagine di ingresso dai motori di ricerca. Queste tipologie di pagine richiedono un particolare attenzione dal punto di vista del contenuto, della struttura e devono essere ottimizzate al 100%.

L’obiettivo è di creare una pagina web dedicata alla descrizione del corso che dovrebbe avere un'immagine posizionata a sinistra con un breve riassunto e titolo della pagina a destra. L'immagine pero si deve visualizzarsi solo quando si naviga sul PC e per altri dispositivi, l'immagine non si deve visualizzarsi.
Sotto l'immagine e breve riassunto dovrebbe posizionarsi il testo, seguito dal secondo titolo della pagina a sinistra e la votazione a destra per il desktop. Per i dispositivi mobili invece il secondo titolo e la votazione si devono posizionarsi al centro uno sotto l'altro. Il resto della pagina riporta i riferimenti delle lezioni sottoforma di un elenco. Pagina creata è Corso Joomla

I passaggi della creazione della pagina web

Nella creazione della pagina ci affidiamo alle funzioni del Template Matrix che usiamo, modificando nella configurazione del Template > Layout & Style il blocco position-2 che si visualizzerà nel lato sito prima dell'articolo, quindi subito dopo il menu principale. La configurazione del blocco viene impostata secondo i seguenti parametri

• Si imposta il colore di sfondo a #ccc
• In tab stili si imposta -40 per l'opzione Margin Bottom

Il blocco position-2 è solo un contenitore di altri blocchi nei quali vengono pubblicati 2 moduli, uno a sinistra con l'immagine e l'altro a destra con il testo introduttivo. Il prossimo passo è di eliminare tutti blocchi del blocco position-2 lasciando solo position-2-1 e position-2-2 e impostarli secondo i seguenti parametri, nella configurazione di ciascun blocco.

• Configurazione blocco position-2-1

  • Si imposta la larghezza a 5 per Larghezza PC
  • Si imposta Padding top a 50 in stili del tab PC
  • Per Tablet e Mobile si nasconde questo blocco impostando Nascondi su si nelle apposite Tab

  In questa configurazione il blocco si visualizzerà con larghezza 5 per il desktop e per altri dispositivi questo blocco non si visualizzerà.

• Configurazione blocco position-2-2

  • Si imposta la larghezza a 7 per Larghezza PC
  • Si imposta Padding top a 50 in stili del tab PC
  • Per Tablet e Mobile si imposta la largghezza a 12

  In questa configurazione il blocco si visualizzerà con larghezza 7 per il desktop e si visualizzerà a tutto schermo per altri dispositivi

Per ora lasciamo i blocchi e passiamo alla creazione del testo della pagina creando un nuovo articolo e attivando l'editor code mirror che ci consente di vedere il codice html.
Inseriamo il testo e con l'aiuto dei classi della libreria bootstrap impostiamo la visualizzazione del secondo titolo e la votazione secondo il dispositivo che visualizza la pagina(Per i dispositivi mobili invece il secondo titolo e la votazione si devono posizionarsi al centro uno sotto l'altro..). Successivamente inseriamo l'elenco delle lezioni attribuendo una classe di elenco per la visualizzazione moderna. Salviamo articolo e lo colleghiamo alla voce del menu.

Dopo aver creato articolo e la voce del menu, otteniamo una pagina web e ci resta collegare i moduli. Si creano due moduli di tipo Personalizzato dove su uno si inserisce l'immagine e nell'altro il titolo e un breve riassunto. Successivamente si seleziona la posizione per ciascun modulo (position-2-1 per il modulo con l'immagine e position-2-2 per il modulo con il titolo e riassunto) e nel tab Assegnazione selezioniamo la voce del menu appena creata.

Durata della lezione: 39:47 min.

Alla fine della lezione sarai in grado di:

1. Personalizzare l'aspetto della pagine con il Template Joomla
2. Inserire un elenco con lo stile
3. Convertire l'immagine nel formato webp
4. Ottimizzare la pagina per dispositivi mobili
5. Uso parziale di Bootstrap