Adobe Dreamweaver — Corso completo

Conoscere la finestra di Dreamweaver

Dreamweaver è il programma Adobe per creare e modificare pagine web in HTML, CSS e JavaScript. Prima di scrivere codice conviene imparare a muoversi nella sua finestra. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa le schermate reali di Adobe Dreamweaver 2021 in italiano: la versione installata sul computer dell'autore. Le voci possono cambiare leggermente nelle versioni successive.

La barra dei menu

In alto trovi la barra dei menu con nove voci: File, Modifica, Visualizza, Inserisci, Strumenti, Trova, Sito, Finestra, Aiuto. A destra c'è il menu dello spazio di lavoro, che nell'esempio mostra Standard.

Gli elementi principali

la barra laterale sinistra con le icone dei comandi rapidi (nuovo documento, apri, ecc.);
l'area del documento al centro, dove si lavora sulla pagina;
i pannelli a destra: File, CC Libraries, Inserisci, CSS Designer e, sotto, DOM, Risorse, Snippet;
i pannelli in basso: Ricerca, Output, Git.

La schermata iniziale di Dreamweaver 2021 con lo spazio di lavoro Standard

Il menu Finestra

Ogni pannello si mostra o si nasconde dal menu Finestra. Un segno di spunta indica i pannelli aperti. Nell'esempio sono attivi DOM, File e Inserisci. Alcuni comandi hanno una scorciatoia: Nascondi pannelli F4, File F8, Inserisci Ctrl+F2, Proprietà Ctrl+F3, CSS Designer Maiusc+F11, Snippet Maiusc+F9, DOM Ctrl+F7.

Nello stesso menu si trovano Barre degli strumenti, Disponi e Layout area di lavoro, per organizzare la finestra a proprio gusto.

Attenzione: con Nascondi pannelli (F4) i pannelli spariscono tutti insieme. Se pensi di averli persi, premi di nuovo F4 invece di reinstallare il programma.

Regola di Marco Consiglio: tieni aperti solo i pannelli che ti servono. Una finestra ordinata ti fa lavorare meglio e più in fretta.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So nominare le nove voci della barra dei menu

So riconoscere lo spazio di lavoro Standard

So trovare i pannelli a destra

So aprire un pannello dal menu Finestra

So usare F4 per nascondere i pannelli

So usare F8 per il pannello File

So aprire CSS Designer con Maiusc+F11

So riconoscere i pannelli Ricerca, Output e Git

Tipologie applicative

Le parti della finestra di Dreamweaver.

Barra dei menu

Nove menu da File ad Aiuto.

Spazio di lavoro

Un'organizzazione dei pannelli, per esempio Standard.

Pannello File

Mostra le cartelle e i file.

Pannello DOM

Mostra la struttura della pagina.

CSS Designer

Pannello per gli stili.

Ricerca, Output, Git

Pannelli in basso.

Glossario interattivo

Tocca un termine per vederne la definizione.

Spazio di lavoro

Disposizione dei pannelli.

Pannello

Finestra con strumenti.

Barra dei menu

Fila di menu in alto.

Scorciatoia

Combinazione di tasti.

DOM

Struttura ad albero della pagina.

CSS

Linguaggio degli stili.

Documento

La pagina su cui si lavora.

Barra laterale

Colonna di icone a sinistra.

Esercitazioni pratiche

Esercizio 1 — Leggi i menu

Apri Dreamweaver e annota i nomi dei nove menu in alto.

Esercizio 2 — Apri un pannello

Dal menu Finestra mostra il pannello Snippet e poi nascondilo con lo stesso menu.

Esercizio 3 — Prova F4

Premi F4 per nascondere i pannelli e poi di nuovo F4 per riaverli.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cos'è Dreamweaver?

2. Quale versione è mostrata in questa dispensa?

3. Quante voci ha la barra dei menu dell'esempio?

4. Quale di queste è una voce della barra dei menu?

5. Dove si trova il menu dello spazio di lavoro?

6. Quale spazio di lavoro è mostrato nell'esempio?

7. Dove si trova la barra laterale con le icone?

8. Dove si trovano i pannelli File e CSS Designer?

9. Quali pannelli stanno in basso?

10. Quale menu mostra o nasconde i pannelli?

11. Che cosa indica il segno di spunta nel menu Finestra?

12. Quale scorciatoia nasconde tutti i pannelli?

13. Quale scorciatoia apre il pannello File?

14. Quale scorciatoia apre il pannello Inserisci?

15. Quale scorciatoia apre il pannello DOM?

16. Quale scorciatoia apre il pannello Proprietà?

17. Quale scorciatoia apre CSS Designer?

18. Quale scorciatoia apre il pannello Snippet?

19. Che cosa mostra il pannello DOM?

20. A che cosa serve CSS Designer?

21. Che cosa mostra il pannello File?

22. Quale comando del menu Finestra riguarda la disposizione dello spazio di lavoro?

23. Che cosa fa Nascondi pannelli?

24. Che cosa fai se pensi di aver perso i pannelli?

25. Che cos'è uno spazio di lavoro?

26. Quale pannello trovi anche tra Risorse e Snippet?

27. Che cosa c'è nella parte centrale della finestra?

28. Perché conviene tenere aperti pochi pannelli?

29. Le voci dei menu possono cambiare nelle versioni successive?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Partire da una pagina già pronta

All'avvio Dreamweaver mostra la schermata iniziale, da cui crei o apri un documento. Dai Modelli per iniziare puoi partire da una pagina già impostata, invece che da zero. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

La schermata iniziale

Il titolo è «Ti diamo il benvenuto in Dreamweaver». A sinistra c'è un menu con tre voci: Inizio, Avvio rapido e Modelli per iniziare, più due pulsanti: Crea nuova… e Apri…. Al centro il pulsante blu Crea nuova… accompagna il messaggio «Creiamo un sito Web».

I modelli per iniziare

Scegliendo Modelli per iniziare compare l'elenco dei modelli, divisi per famiglia:

Base: Griglia semplice, Multicolonna, Pagina singola;
Bootstrap: Agenzia, Curriculum, e-commerce, Immobiliare, Portfolio, Prodotto;
E-mail: Base, Fluido, Ibrido.

L'elenco Modelli per iniziare con le famiglie Base, Bootstrap ed E-mail

Aprendo un modello Bootstrap, per esempio quello Portfolio, Dreamweaver crea un documento senza titolo già pieno di contenuti e collegato a Bootstrap. Il documento resta non salvato finché non scegli tu Salva.

Attenzione: un documento nuovo si chiama Senzatitolo-1 e non è ancora sul disco. Se chiudi il programma senza salvare, il lavoro va perso.

Regola di Marco Consiglio: parti da un modello e poi personalizzalo. Capirai la struttura di una pagina professionale molto più in fretta.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So descrivere la schermata iniziale

So usare Crea nuova e Apri

So aprire Modelli per iniziare

So riconoscere le famiglie Base, Bootstrap ed E-mail

So scegliere un modello Bootstrap

So riconoscere un documento non salvato

So salvare il documento solo quando serve

So spiegare perché partire da un modello

Tipologie applicative

Le famiglie di modelli.

Base

Griglia semplice, Multicolonna, Pagina singola.

Bootstrap

Agenzia, Curriculum, e-commerce, Immobiliare, Portfolio, Prodotto.

E-mail

Base, Fluido, Ibrido.

Inizio

Pagina di benvenuto.

Avvio rapido

Voce del menu iniziale.

Crea nuova

Pulsante per un nuovo documento.

Glossario interattivo

Tocca un termine per vederne la definizione.

Modello

Pagina già impostata da cui partire.

Bootstrap

Raccolta di stili per pagine adattabili.

Schermata iniziale

Pagina di benvenuto.

Documento senza titolo

Documento non ancora salvato.

Griglia

Divisione della pagina in colonne.

Portfolio

Pagina che mostra i propri lavori.

E-mail HTML

Messaggio di posta in formato web.

Salvare

Scrivere il documento sul disco.

Esercitazioni pratiche

Esercizio 1 — Esplora i modelli

Apri Modelli per iniziare e annota le tre famiglie e due modelli per ciascuna.

Esercizio 2 — Scegli

Scrivi quale modello useresti per un curriculum e perché.

Esercizio 3 — Non salvare

Apri un modello e chiudilo senza salvare, controllando il messaggio del programma.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Quale schermata appare all'avvio di Dreamweaver?

2. Quale messaggio compare in alto nella schermata iniziale?

3. Quali voci ha il menu a sinistra?

4. Quali pulsanti stanno sotto il menu a sinistra?

5. Quale frase accompagna il pulsante blu centrale?

6. Che cos'è un modello?

7. Quale voce apre l'elenco dei modelli?

8. Quali sono le famiglie di modelli dell'esempio?

9. Quale modello appartiene alla famiglia Base?

10. Quale modello appartiene alla famiglia Bootstrap?

11. Quale modello appartiene alla famiglia E-mail?

12. Quale modello Bootstrap è adatto a mostrare i propri lavori?

13. Quale modello Bootstrap è adatto a un negozio online?

14. Che cos'è Bootstrap?

15. Come si chiama il documento nuovo creato dal modello?

16. Che cosa significa che il documento è non salvato?

17. Che cosa succede se chiudi senza salvare?

18. Quando conviene salvare il documento?

19. Il modello Portfolio apre un documento già...

20. Perché conviene partire da un modello?

21. Che cosa fa il pulsante Apri…?

22. Che cosa fa il pulsante Crea nuova…?

23. Che cosa è una griglia in una pagina web?

24. Per quale uso serve il modello Curriculum?

25. Quale famiglia serve per messaggi di posta in HTML?

26. Che differenza c'è tra Base e Bootstrap?

27. Che cosa si può fare dopo aver aperto un modello?

28. Il modello apre il documento in quale vista nell'esempio?

29. Quale versione di Dreamweaver è mostrata?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Un sito è una cartella ordinata

In Dreamweaver un sito è la raccolta di tutti i file di un progetto web: pagine, immagini, stili. Definire un sito aiuta il programma a gestire i collegamenti e la pubblicazione. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il menu Sito

Il menu Sito contiene: Nuovo sito…, Gestisci siti…, Scarica (Ctrl+Maiusc+B), Ritira, Carica (Ctrl+Maiusc+U), Deposita, Annulla ritiro, Mostra Ritirato da…, Individua nel sito, Rapporti…, Opzioni sito e Avanzate. Alcune voci sono grigie finché non esiste un sito collegato a un server.

Creare un nuovo sito

Con Sito › Nuovo sito… si apre la finestra Configurazione sito. Un sito comprende di solito due parti: una cartella locale sul tuo computer, dove tieni i file su cui lavori, e una cartella remota sul server, dove li invii per pubblicarli sul Web.

la categoria Sito chiede il Nome del sito e la Cartella sito locale;
la categoria Server definisce il server remoto;
Preprocessori CSS e Impostazioni avanzate offrono opzioni in più;
una casella permette di associare un repository Git al sito.

La finestra Configurazione sito, chiusa con Annulla

Attenzione: nell'esempio la finestra è stata chiusa con Annulla: nessun sito è stato creato. Chiudere con Salva avrebbe creato una cartella sul computer.

Il pannello File

Il pannello File, a destra, mostra le cartelle locali (Questo PC, Rete, Elementi del desktop) e il menu per scegliere il sito, con il collegamento Gestisci siti.

Regola di Marco Consiglio: lavora sempre dentro un sito definito, con una cartella locale ordinata. I collegamenti tra le pagine resteranno corretti.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So spiegare che cos'è un sito Dreamweaver

So aprire il menu Sito

So aprire Nuovo sito…

So distinguere cartella locale e remota

So leggere Nome del sito e Cartella sito locale

So chiudere la finestra con Annulla

So usare il pannello File

So aprire Gestisci siti

Tipologie applicative

Le voci del menu Sito.

Nuovo sito…

Crea un sito.

Gestisci siti…

Elenca e modifica i siti.

Scarica

Porta i file dal server al computer.

Carica

Invia i file dal computer al server.

Rapporti…

Analizza il sito.

Opzioni sito

Impostazioni del sito.

Glossario interattivo

Tocca un termine per vederne la definizione.

Sito

Raccolta dei file di un progetto web.

Cartella locale

Cartella sul tuo computer.

Cartella remota

Cartella sul server.

Server

Computer che pubblica il sito.

Scarica

Copiare dal server al computer.

Carica

Copiare dal computer al server.

Git

Sistema di controllo delle versioni.

Repository

Archivio di un progetto Git.

Esercitazioni pratiche

Esercizio 1 — Leggi il menu Sito

Apri il menu Sito e annota quali voci sono grigie.

Esercizio 2 — Locale e remoto

Disegna lo schema computer, server e Web con le frecce Carica e Scarica.

Esercizio 3 — Annulla

Apri Nuovo sito e chiudi con Annulla senza creare nulla.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cos'è un sito in Dreamweaver?

2. Quale menu contiene i comandi per i siti?

3. Quale scorciatoia ha Scarica?

4. Quale scorciatoia ha Carica?

5. Quale voce crea un sito?

6. Quale voce elenca i siti esistenti?

7. Perché alcune voci del menu Sito sono grigie?

8. Quale finestra si apre con Nuovo sito…?

9. Quali due parti compongono di solito un sito?

10. Dove si trova la cartella locale?

11. Dove si trova la cartella remota?

12. A che cosa serve la cartella remota?

13. Che cosa chiede la categoria Sito?

14. Quale categoria definisce il server remoto?

15. Che cosa permette la casella Git?

16. Quale pulsante chiude la finestra senza creare il sito?

17. Che cosa fa Scarica?

18. Che cosa fa Carica?

19. Nell'esempio è stato creato un sito?

20. Che cosa avrebbe creato Salva?

21. Quale pannello mostra le cartelle e i file?

22. Quali voci mostra il pannello File nell'esempio?

23. Quale collegamento nel pannello File apre l'elenco dei siti?

24. Perché si lavora dentro un sito definito?

25. Che cos'è Git?

26. Che cos'è un server?

27. Quale voce analizza il sito con rapporti?

28. Quale categoria offre opzioni extra?

29. La finestra Configurazione sito dice che un sito Dreamweaver è...

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Creare, aprire e salvare i documenti

Il menu File contiene i comandi per lavorare sui documenti: nuovo, apri, salva, chiudi, stampa. Conoscerli ti evita errori e perdite di lavoro. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

I comandi principali

Comando	Scorciatoia
Nuovo…	Ctrl+N
Apri…	Ctrl+O
Chiudi	Ctrl+W
Chiudi tutto	Ctrl+Maiusc+W
Salva	Ctrl+S
Salva con nome…	Ctrl+Maiusc+S
Stampa codice…	Ctrl+P
Esci	Ctrl+Q

Il menu File con Nuovo, Apri, Salva, Salva con nome, Stampa codice ed Esci

Altri comandi utili

Apri recente: riapre i documenti usati da poco;
Salva tutto e Salva tutti i file correlati: salvano più file insieme;
Salva come modello…: trasforma la pagina in un modello riutilizzabile;
Versione precedente: torna all'ultima versione salvata;
Associa foglio di stile…, Importa, Esporta;
Anteprima in tempo reale, Convalida, Confronta con server remoto;
Design Notes… e Proprietà di pagina….

Le voci grigie, come Versione precedente o Confronta con server remoto, non sono disponibili in quel momento.

Attenzione: prima di Esci controlla le schede aperte. Un documento con il nome seguito da un indicatore di modifica non è ancora salvato.

Regola di Marco Consiglio: salva spesso con Ctrl+S e dai ai file nomi semplici, in minuscolo e senza spazi.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So aprire il menu File

So usare Ctrl+N e Ctrl+O

So salvare con Ctrl+S

So usare Salva con nome

So chiudere un documento con Ctrl+W

So chiudere tutto

So usare Salva come modello

So riconoscere le voci grigie

Tipologie applicative

I comandi del menu File.

Nuovo…

Crea un documento.

Apri…

Apre un documento.

Salva

Salva le modifiche.

Salva con nome…

Salva una copia con un nuovo nome.

Salva come modello…

Crea un modello.

Stampa codice…

Stampa il codice.

Glossario interattivo

Tocca un termine per vederne la definizione.

Documento

File su cui si lavora.

Salvare

Scrivere sul disco.

Modello

Pagina riutilizzabile.

Convalida

Controllo del codice.

Importa

Portare dati dentro.

Esporta

Portare dati fuori.

Foglio di stile

File CSS.

Design Notes

Note di progetto sul file.

Esercitazioni pratiche

Esercizio 1 — Scorciatoie

Scrivi su un foglio le scorciatoie di Nuovo, Apri, Salva e Chiudi, senza guardare.

Esercizio 2 — Voci grigie

Apri il menu File e annota quali voci sono grigie e perché.

Esercizio 3 — Nomi dei file

Scrivi cinque nomi di file validi: minuscolo, senza spazi.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Quale menu contiene Nuovo, Apri e Salva?

2. Quale scorciatoia crea un nuovo documento?

3. Quale scorciatoia apre un documento?

4. Quale scorciatoia salva?

5. Quale scorciatoia ha Salva con nome?

6. Quale scorciatoia chiude il documento?

7. Quale scorciatoia chiude tutti i documenti?

8. Quale scorciatoia stampa il codice?

9. Quale scorciatoia esce da Dreamweaver?

10. Che cosa fa Apri recente?

11. Che cosa fa Salva tutto?

12. Che cosa fa Salva come modello?

13. Che cosa fa Versione precedente?

14. Che cosa fa Associa foglio di stile?

15. Che cosa indica una voce grigia?

16. Quale voce controlla la correttezza del codice?

17. Quale voce apre l'anteprima della pagina?

18. Che cos'è Design Notes?

19. Quale voce modifica le proprietà della pagina?

20. Salva e Salva con nome sono uguali?

21. Che cosa fa Chiudi tutto?

22. Che cosa si controlla prima di Esci?

23. Come conviene chiamare i file?

24. Ogni quanto conviene salvare?

25. Quale voce confronta con il server remoto?

26. Quale voce porta dati dentro il programma?

27. Quale voce porta dati fuori dal programma?

28. Dove sono i comandi di salvataggio?

29. Che cosa succede con un documento non salvato e Esci?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Leggere il codice di una pagina

Ogni pagina web è scritta in HTML, un linguaggio fatto di tag. Dreamweaver mostra il codice con i numeri di riga e i colori, per leggerlo meglio. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa il codice reale del modello Bootstrap Portfolio aperto in Dreamweaver 2021.

La struttura base

Il codice del modello comincia con <!DOCTYPE html>, poi <html lang="en">. Ci sono due blocchi principali:

<head>: informazioni sulla pagina, non visibili (<meta> per codifica e viewport, <title>, <link> agli stili);
<body>: il contenuto visibile, con <nav>, le sezioni e il <footer>.

Il codice del modello Bootstrap Portfolio nella vista Codice, con i numeri di riga

Tag, attributi e classi

Un tag si apre e si chiude: <a>…</a>. Dentro il tag di apertura si scrivono gli attributi, per esempio class="navbar-brand" o href="#". Nell'esempio la barra di navigazione usa <nav class="navbar navbar-expand-lg navbar-dark bg-dark">: le classi di Bootstrap decidono l'aspetto.

Strumenti utili del codice

le frecce a sinistra dei numeri di riga comprimono e riaprono i blocchi;
la barra del selettore di tag in basso mostra il percorso, per esempio body › nav › div › a;
in basso a destra appaiono il linguaggio HTML, la modalità INS e la posizione del cursore;
le schede in alto mostrano i file correlati: bootstrap-5.3.8.css, popper-2.11.8.min.js, bootstrap-5.3.8.js.

Attenzione: un tag aperto e non chiuso può rompere la pagina. Controlla sempre che ogni apertura abbia la sua chiusura.

Regola di Marco Consiglio: leggi il codice dall'alto verso il basso. Prima il head, poi il body: capirai come è costruita ogni pagina.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So riconoscere DOCTYPE e html

So distinguere head e body

So leggere un tag e i suoi attributi

So riconoscere una classe

So comprimere un blocco di codice

So leggere il selettore di tag

So riconoscere i file correlati

So spiegare perché si chiudono i tag

Tipologie applicative

Le parti di una pagina HTML.

head

Informazioni non visibili.

body

Contenuto visibile.

title

Titolo della pagina.

link

Collega un foglio di stile.

nav

Barra di navigazione.

Glossario interattivo

Tocca un termine per vederne la definizione.

HTML

Linguaggio delle pagine web.

Tag

Elemento tra parentesi angolari.

Attributo

Dato dentro il tag.

Classe

Nome che applica uno stile.

Doctype

Dichiarazione del tipo di documento.

Viewport

Area visibile sullo schermo.

Codifica

Insieme di caratteri, per esempio utf-8.

Selettore di tag

Barra con il percorso dei tag.

Esercitazioni pratiche

Esercizio 1 — Cerca head e body

Nel codice del modello trova la riga in cui comincia head e quella in cui comincia body.

Esercizio 2 — Leggi un tag

Scegli un tag a e scrivi il suo nome, il suo attributo e il suo testo.

Esercizio 3 — Comprimi

Comprimi e riapri un blocco con le frecce vicino ai numeri di riga.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. In quale linguaggio sono scritte le pagine web?

2. Con che cosa comincia il codice del modello?

3. Che cosa contiene il blocco head?

4. Che cosa contiene il blocco body?

5. Che cosa definisce il tag title?

6. Che cosa fa il tag link nel head?

7. Che cosa descrive il tag meta con charset?

8. Quale codifica compare nell'esempio?

9. A che cosa serve il meta viewport?

10. Che cos'è un tag?

11. Come si chiude un tag a?

12. Che cos'è un attributo?

13. Quale di questi è un attributo?

14. Quale attributo contiene il collegamento di un link?

15. Che cosa fa una classe?

16. Che cosa contiene la classe navbar-dark bg-dark nell'esempio?

17. Quale tag crea la barra di navigazione?

18. Quale tag chiude la pagina con le informazioni finali?

19. A che cosa servono i numeri di riga?

20. A che cosa servono le frecce accanto ai numeri di riga?

21. Che cosa mostra la barra del selettore di tag?

22. Quale percorso compare nell'esempio?

23. Che cosa significa INS in basso a destra?

24. Quale linguaggio appare nella barra di stato dell'esempio?

25. Quali file correlati compaiono tra le schede?

26. Che cosa succede se un tag non viene chiuso?

27. In quale ordine conviene leggere il codice?

28. Che cosa significa lang uguale a en nel tag html?

29. Il codice del modello è colorato per...

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Tre modi di guardare la stessa pagina

Dreamweaver permette di lavorare sulla pagina in tre viste: Codice, Dividi e Dal vivo. Scegliere la vista giusta rende il lavoro più semplice. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

I pulsanti delle viste

Sopra il documento, al centro, ci sono tre pulsanti: Codice, Dividi e Dal vivo, quest'ultimo con una freccia per aprire altre opzioni. La vista attiva è evidenziata in azzurro.

Codice: mostra solo il codice, con i numeri di riga;
Dividi: mostra insieme il codice e la pagina, così vedi subito l'effetto di ogni modifica;
Dal vivo: mostra la pagina come apparirà nel browser, con i comandi attivi.

La vista Dividi: il codice e la pagina insieme, con la barra delle larghezze

La vista Dal vivo con la pagina del modello

Il menu Visualizza

Il menu Visualizza contiene: Codice (con il segno di spunta della vista attiva), Dividi, Modalità visualizzazione, Cambia viste, Codice dal vivo, Esamina (Alt+Maiusc+F11), Opzioni vista Codice, Aggiorna vista Dal vivo (F5), File correlati e Opzioni file correlati.

Quale vista scegliere

Vista	Quando usarla
Codice	Per scrivere o correggere il codice
Dividi	Per imparare, vedendo codice ed effetto insieme
Dal vivo	Per controllare l'aspetto e il comportamento della pagina

Attenzione: se la vista Dal vivo non mostra le tue ultime modifiche, usa Aggiorna vista Dal vivo (F5).

Regola di Marco Consiglio: all'inizio lavora in Dividi. Vedere il codice e il risultato insieme è il modo più rapido per imparare.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So nominare le tre viste

So passare da una vista all'altra

So usare Dividi per vedere codice ed effetto

So usare Dal vivo per controllare la pagina

So aprire il menu Visualizza

So aggiornare la vista con F5

So usare Esamina

So scegliere la vista adatta al lavoro

Tipologie applicative

Le viste di Dreamweaver.

Codice

Solo il codice.

Dividi

Codice e pagina insieme.

Dal vivo

La pagina come nel browser.

Cambia viste

Passa da una vista all'altra.

Esamina

Strumento per ispezionare la pagina.

Aggiorna vista Dal vivo

Ricarica la pagina con F5.

Glossario interattivo

Tocca un termine per vederne la definizione.

Vista

Modo di mostrare il documento.

Vista Codice

Solo il codice.

Vista Dividi

Codice e pagina.

Vista Dal vivo

Pagina come nel browser.

Browser

Programma per navigare sul Web.

Esaminare

Ispezionare gli elementi.

Aggiornare

Ricaricare i contenuti.

Anteprima

Visione prima della pubblicazione.

Esercitazioni pratiche

Esercizio 1 — Cambia vista

Apri un modello e passa da Codice a Dividi a Dal vivo, annotando che cosa cambia.

Esercizio 2 — Il menu Visualizza

Apri il menu Visualizza e trova Aggiorna vista Dal vivo e la sua scorciatoia.

Esercizio 3 — Scegli

Scrivi in quale vista faresti: scrivere un tag, imparare un layout, controllare un menu.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Quante viste principali ha Dreamweaver nell'esempio?

2. Quali sono le tre viste?

3. Dove si trovano i pulsanti delle viste?

4. Come è evidenziata la vista attiva?

5. Che cosa mostra la vista Codice?

6. Che cosa mostra la vista Dividi?

7. Che cosa mostra la vista Dal vivo?

8. Quale vista è utile per imparare?

9. Quale vista serve per scrivere o correggere il codice?

10. Quale vista serve per controllare l'aspetto della pagina?

11. Che cosa ha il pulsante Dal vivo in più?

12. Quale menu contiene i comandi sulle viste?

13. Che cosa indica il segno di spunta accanto a Codice nel menu Visualizza?

14. Quale scorciatoia aggiorna la vista Dal vivo?

15. Quale scorciatoia ha Esamina?

16. Che cosa fa Aggiorna vista Dal vivo?

17. Che cosa fai se la vista Dal vivo non mostra le modifiche?

18. Quale voce del menu Visualizza riguarda i file collegati alla pagina?

19. A che cosa servono le schede dei file correlati?

20. Quale barra compare nella vista Dividi dell'esempio?

21. Che cosa indicano valori come 576, 768, 992 e 1200?

22. Che cosa significa Codice dal vivo nel menu Visualizza?

23. Il documento dell'esempio è un modello di tipo...

24. Perché in Dividi si impara più in fretta?

25. Qual è il browser?

26. La vista Dal vivo mostra i comandi attivi della pagina?

27. Che cosa mostra la vista Codice con i numeri?

28. Si può cambiare vista senza chiudere il documento?

29. Quale vista conviene all'inizio?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Costruire la pagina con i comandi Inserisci

Per aggiungere paragrafi, immagini, tabelle e liste non devi scrivere tutto a mano: Dreamweaver offre il menu Inserisci e il pannello Inserisci. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il menu Inserisci

Il menu contiene gli elementi più comuni: Div, Image (Ctrl+Alt+I), Paragrafo, Titolo, Table (Ctrl+Alt+T), Figure, Elenco non ordinato, Elenco ordinato, Voce elenco, Hyperlink.

Più in basso compaiono gli elementi di struttura: Header, Navigation, Main, Aside, Article, Section, Footer, poi i sottomenu HTML, Modulo, Componenti di Bootstrap, jQuery Mobile, jQuery UI, Personalizza Preferiti, Modelli, Dati e Snippet recenti.

Il menu Inserisci con gli elementi di base e di struttura

Il pannello Inserisci

Lo stesso elenco è disponibile nel pannello Inserisci, a destra, con un menu a tendina che nell'esempio mostra HTML. Ogni voce ha la sua icona: basta scegliere l'elemento.

Elementi semantici

Header, Navigation, Main, Aside, Article, Section e Footer sono elementi semantici: descrivono il ruolo di ogni parte della pagina (intestazione, menu, contenuto principale, colonna laterale, articolo, sezione, piè di pagina). Aiutano le persone, i motori di ricerca e gli strumenti per la lettura vocale.

Attenzione: Inserisci aggiunge davvero codice al documento aperto. Prima di provare un comando, controlla dove si trova il cursore e, se serve, annulla con Ctrl+Z.

Regola di Marco Consiglio: scegli l'elemento in base al suo significato, non solo all'aspetto. Una pagina ben strutturata resta chiara negli anni.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So aprire il menu Inserisci

So inserire un paragrafo e un titolo

So inserire un'immagine

So inserire una tabella

So creare un elenco

So inserire un Hyperlink

So riconoscere gli elementi semantici

So annullare con Ctrl+Z

Tipologie applicative

Gli elementi principali di Inserisci.

Div

Contenitore generico.

Image

Immagine.

Table

Tabella.

Elenco non ordinato

Elenco puntato.

Hyperlink

Collegamento.

Header e Footer

Intestazione e piè di pagina.

Glossario interattivo

Tocca un termine per vederne la definizione.

Elemento

Parte della pagina HTML.

Div

Contenitore.

Hyperlink

Collegamento a un'altra pagina.

Figura

Immagine con didascalia.

Elemento semantico

Elemento che descrive il proprio ruolo.

Header

Intestazione.

Footer

Piè di pagina.

Aside

Contenuto laterale.

Esercitazioni pratiche

Esercizio 1 — Leggi il menu

Apri il menu Inserisci e copia i nomi degli elementi di struttura.

Esercizio 2 — Semantica

Collega a ogni elemento semantico il suo ruolo: Header, Main, Aside, Footer.

Esercizio 3 — Pannello

Apri il pannello Inserisci e confronta le voci con quelle del menu.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. A che cosa serve il menu Inserisci?

2. Quale scorciatoia inserisce un'immagine?

3. Quale scorciatoia inserisce una tabella?

4. Quale elemento è un contenitore generico?

5. Quale elemento crea un collegamento?

6. Quale elemento crea un testo normale?

7. Quale elemento crea una tabella?

8. Quale elemento è un elenco puntato?

9. Quale elemento è un elenco numerato?

10. Quale elemento è una voce di un elenco?

11. Che cosa significa Header?

12. Che cosa significa Footer?

13. Che cosa è Navigation?

14. Che cosa è Main?

15. Che cosa è Aside?

16. Che cosa sono gli elementi semantici?

17. A chi aiutano gli elementi semantici?

18. Quali sottomenu compaiono in Inserisci?

19. Dove si trova il pannello Inserisci?

20. Che cosa mostra il menu a tendina del pannello Inserisci nell'esempio?

21. Inserisci modifica davvero il documento?

22. Come si annulla un inserimento sbagliato?

23. Che cosa controlli prima di inserire?

24. Che cosa è una Figure?

25. Quale elemento si usa per un articolo di blog?

26. Quale elemento divide il contenuto in sezioni?

27. Il pannello Inserisci e il menu Inserisci offrono...

28. Che cosa significa scegliere in base al significato?

29. Quale elemento è meglio per il menu di una pagina?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Raccogliere i dati dei visitatori

Un modulo (in inglese form) permette al visitatore di scrivere, scegliere e inviare informazioni: un contatto, una prenotazione, una ricerca. Dreamweaver ha un sottomenu dedicato in Inserisci › Modulo. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il sottomenu Modulo

Le voci sono ordinate per famiglie:

contenitore: Modulo;
campi di testo: Testo, E-mail, Password, Url, Tel, Ricerca, Numero, Intervallo, Colore, Area di testo;
data e ora: Mese, Settimana, Data, Ora, Data e ora, Date e ora locali;
pulsanti: Pulsante, Pulsante Invia, Pulsante Ripristina, File, Pulsante immagine, Nascosto;
scelte: Seleziona, Pulsante di scelta, Gruppo pulsanti di scelta, Casella di controllo, Gruppo caselle di controllo.

Il sottomenu Inserisci › Modulo con tutti i tipi di campo

Quale campo usare

Dato	Campo
Nome o frase breve	Testo
Indirizzo di posta	E-mail
Messaggio lungo	Area di testo
Una scelta tra poche	Pulsante di scelta
Più scelte	Casella di controllo
Una data	Data
Un allegato	File

Inviare il modulo

Il Pulsante Invia manda i dati; Pulsante Ripristina svuota i campi. Per far arrivare i dati a qualcuno serve un programma sul server che li riceva: un modulo da solo non invia nulla.

Attenzione: usa il campo Password solo per nascondere i caratteri mentre si scrivono. La sicurezza dei dati dipende dal server e dal collegamento protetto.

Regola di Marco Consiglio: chiedi solo i dati che ti servono davvero. Un modulo breve viene compilato più volentieri.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So aprire Inserisci › Modulo

So inserire il contenitore Modulo

So scegliere il campo giusto

So distinguere Testo e Area di testo

So usare i campi data e ora

So usare pulsanti di scelta e caselle

So usare Invia e Ripristina

So spiegare che serve un server per ricevere i dati

Tipologie applicative

I campi di un modulo.

Testo

Frase breve.

E-mail

Indirizzo di posta.

Area di testo

Messaggio lungo.

Pulsante di scelta

Una sola scelta.

Casella di controllo

Più scelte.

Pulsante Invia

Invia i dati.

Glossario interattivo

Tocca un termine per vederne la definizione.

Modulo

Insieme di campi da compilare.

Campo

Spazio per un dato.

Pulsante di scelta

Scelta singola.

Casella di controllo

Scelta multipla.

Invia

Spedisce i dati.

Ripristina

Svuota i campi.

Campo nascosto

Dato non visibile.

Server

Computer che riceve i dati.

Esercitazioni pratiche

Esercizio 1 — Disegna un modulo

Su carta disegna un modulo di contatto con nome, e-mail, messaggio e pulsante.

Esercizio 2 — Scegli i campi

Per ogni dato (nome, data, allegato, preferenze) scrivi il campo adatto.

Esercizio 3 — Leggi il sottomenu

Apri Inserisci › Modulo e conta le famiglie di voci.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cos'è un modulo?

2. Come si dice modulo in inglese?

3. Dove si trova il sottomenu Modulo?

4. Quale voce è il contenitore dei campi?

5. Quale campo è adatto a una frase breve?

6. Quale campo è adatto a un messaggio lungo?

7. Quale campo è adatto a un indirizzo di posta?

8. Quale campo è adatto a un numero di telefono?

9. Quale campo è adatto a un indirizzo web?

10. Quale campo è adatto a una data?

11. Quale campo permette di scegliere un colore?

12. Quale campo permette di scorrere un valore?

13. Quale campo permette di allegare un file?

14. Quale pulsante invia i dati?

15. Quale pulsante svuota i campi?

16. Che cosa è un campo nascosto?

17. Quale campo permette una sola scelta?

18. Quale campo permette più scelte?

19. Che cosa fa il campo Seleziona?

20. Che cosa nasconde il campo Password?

21. Il campo Password rende sicuri i dati?

22. Un modulo da solo invia i dati a qualcuno?

23. Perché un modulo breve è meglio?

24. Quale famiglia comprende Mese, Settimana e Ora?

25. Quale voce mostra la scelta di data e ora insieme?

26. Che cosa fa il Pulsante immagine?

27. Quale campo si usa per una ricerca nel sito?

28. Qual è la famiglia di Testo, E-mail, Url e Tel?

29. Quanti dati conviene chiedere?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Dare stile alla pagina

Se l'HTML descrive la struttura, il CSS decide l'aspetto: colori, caratteri, spazi, bordi. Dreamweaver offre il pannello CSS Designer per modificare gli stili senza scrivere tutto a mano. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il pannello CSS Designer

Si apre dal menu Finestra (Maiusc+F11) ed è diviso in sezioni:

Tutto / Corrente: in Corrente il pannello mostra solo le regole che riguardano l'elemento selezionato;
Origini: i file CSS collegati. Nell'esempio compare bootstrap-5.3.8.css, in sola lettura;
@Oggetto multimediale: le media query. Nell'esempio è GLOBALE;
Selettori: le regole, per esempio .navbar-brand:hover;
Proprietà: i valori delle regole, come color e text-decoration, con la casella Mostra set per vedere solo quelli impostati.

Il pannello CSS Designer con Origini, Selettori e Proprietà

Come funziona una regola CSS

Una regola ha un selettore (che cosa colpisce) e una o più proprietà (che cosa cambia). Per esempio, il selettore .navbar-brand indica gli elementi con quella classe, e la proprietà color ne cambia il colore del testo. Le regole si scrivono tra parentesi graffe.

Le Preferenze degli stili CSS

In Preferenze › Stili CSS si decide come Dreamweaver scrive le regole: l'uso della stenografia (per esempio per Raggio bordo, Bordo e spessore bordo, Transizione), l'apertura dei file CSS modificati e i prefissi per Webkit, Firefox e Opera.

Preferenze, categoria Stili CSS (finestra chiusa senza modificare)

Attenzione: il file bootstrap-5.3.8.css è in sola lettura. Per cambiare l'aspetto crea un tuo file CSS e non modificare quello di Bootstrap.

Regola di Marco Consiglio: separa la struttura dall'aspetto. L'HTML dice che cosa c'è, il CSS dice come appare.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So spiegare la differenza tra HTML e CSS

So aprire CSS Designer

So leggere Origini, Selettori e Proprietà

So usare Tutto e Corrente

So leggere un selettore

So usare Mostra set

So leggere le Preferenze Stili CSS

So riconoscere un file in sola lettura

Tipologie applicative

Le sezioni di CSS Designer.

Origini

I file CSS collegati.

@Oggetto multimediale

Le media query.

Selettori

Le regole.

Proprietà

I valori da cambiare.

Tutto

Tutte le regole.

Corrente

Regole dell'elemento scelto.

Glossario interattivo

Tocca un termine per vederne la definizione.

CSS

Linguaggio degli stili.

Selettore

Indica quali elementi colpire.

Proprietà

Caratteristica da cambiare.

Regola

Selettore più proprietà.

Media query

Regola per certe larghezze.

Stenografia

Forma abbreviata di una proprietà.

Prefisso

Parte iniziale per un browser.

Sola lettura

Non modificabile.

Esercitazioni pratiche

Esercizio 1 — Apri CSS Designer

Apri il pannello con Maiusc+F11 e annota le quattro sezioni.

Esercizio 2 — Leggi un selettore

Scegli un selettore dell'elenco e scrivi che cosa colpisce.

Esercizio 3 — Tutto e Corrente

Passa da Tutto a Corrente e confronta quante regole vedi.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cosa decide il CSS?

2. Che cosa descrive l'HTML?

3. Che cos'è CSS Designer?

4. Quale scorciatoia apre CSS Designer?

5. Da quale menu si apre il pannello?

6. Che cosa mostra la vista Corrente?

7. Che cosa mostra la vista Tutto?

8. Che cosa elenca la sezione Origini?

9. Quale file compare in Origini nell'esempio?

10. Che cosa significa sola lettura?

11. Che cosa mostra @Oggetto multimediale?

12. Che cosa è una media query?

13. Che valore ha @Oggetto multimediale nell'esempio?

14. Che cosa elenca la sezione Selettori?

15. Che cosa indica un selettore?

16. Che cos'è una proprietà?

17. Quale proprietà cambia il colore del testo?

18. Che cosa gestisce text-decoration?

19. Che cosa fa la casella Mostra set?

20. Che cos'è una regola CSS?

21. Tra quali segni si scrivono le proprietà di una regola?

22. Dove si decide la stenografia degli stili?

23. Che cos'è la stenografia in CSS?

24. Quali prefissi compaiono nelle Preferenze?

25. Che cosa significa Apri file CSS se modificati?

26. Come è stata chiusa la finestra Preferenze nell'esempio?

27. Perché non conviene modificare bootstrap.css?

28. Che cosa conviene creare per i propri stili?

29. Quale selettore compare nell'esempio?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Pagine che si adattano a ogni schermo

Oggi le pagine si guardano su telefoni, tablet e computer. Un layout responsive si adatta da solo alla larghezza dello schermo. Dreamweaver include i componenti di Bootstrap, una raccolta di elementi già pronti e adattabili. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano con il modello Bootstrap Portfolio (Bootstrap 5.3.8).

Inserisci › Componenti di Bootstrap

Il sottomenu raggruppa i componenti per famiglie:

struttura: Container, Container-fluid, Grid Row with column;
contenuti: Carousel, Cards, Responsive Image, Responsive Video Embed, Badges, Spinners, Modal, Toast;
pulsanti: Buttons, Button Groups, Single Button Dropdowns, Split Button Dropdowns, Button Dropups;
navigazione: Navbar, Navigation, Tab, Accordion, Scrollspy, Offcanvas, Pagination, Breadcrumbs;
moduli: Form, Floating Label, Input Group e altri.

Il sottomenu Inserisci › Componenti di Bootstrap

La griglia e i punti di interruzione

Bootstrap divide la pagina in righe e colonne. A seconda della larghezza dello schermo, le colonne si dispongono in modo diverso. Nella vista Dividi, Dreamweaver mostra una barra delle larghezze con i punti di interruzione: 576, 768, 992, 1200 e 1400 px. Trascinando la pagina, vedi come cambia a ogni soglia.

La barra delle larghezze nella vista Dividi

Un esempio: la barra di navigazione

Nel modello, il componente Navbar si apre per intero su schermi larghi e si comprime in un pulsante (navbar-toggler) su schermi stretti. Le classi come navbar-expand-lg decidono a quale larghezza avviene il cambio.

Attenzione: l'anteprima su un solo schermo non basta. Controlla la pagina in più larghezze, dal telefono al computer.

Regola di Marco Consiglio: progetta prima per lo schermo piccolo e poi allargalo. È il modo più sicuro per avere una pagina che funziona ovunque.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So spiegare che cos'è un layout responsive

So aprire Componenti di Bootstrap

So distinguere Container e Container-fluid

So riconoscere righe e colonne

So leggere i punti di interruzione

So riconoscere una Navbar

So usare Cards e Carousel

So controllare la pagina in più larghezze

Tipologie applicative

I componenti di Bootstrap più usati.

Container

Contenitore a larghezza fissa.

Container-fluid

Contenitore a tutta larghezza.

Grid Row with column

Riga con colonne.

Cards

Schede di contenuto.

Carousel

Galleria scorrevole.

Navbar

Barra di navigazione.

Glossario interattivo

Tocca un termine per vederne la definizione.

Responsive

Che si adatta allo schermo.

Bootstrap

Raccolta di componenti per il web.

Griglia

Righe e colonne.

Punto di interruzione

Larghezza in cui cambia il layout.

Container

Contenitore principale.

Navbar

Barra di navigazione.

Modal

Finestra sovrapposta.

Pixel

Punto dello schermo.

Esercitazioni pratiche

Esercizio 1 — Leggi il sottomenu

Apri Inserisci › Componenti di Bootstrap e annota un componente per ogni famiglia.

Esercizio 2 — I punti di interruzione

Scrivi i cinque valori in pixel e a quali dispositivi li associ.

Esercizio 3 — La Navbar

Nel modello trova la Navbar e scrivi la classe che decide quando si comprime.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cosa significa responsive?

2. Che cos'è Bootstrap?

3. Quale versione di Bootstrap usa il modello dell'esempio?

4. Dove si trovano i Componenti di Bootstrap?

5. Che cosa è un Container?

6. Che differenza c'è con Container-fluid?

7. Che cosa compone la griglia?

8. Quale componente è una galleria scorrevole?

9. Quale componente mostra schede di contenuto?

10. Quale componente è una finestra sovrapposta?

11. Quale componente è una barra di navigazione?

12. Quale componente organizza il contenuto a schede?

13. Quale componente apre e chiude le sezioni?

14. Quale componente mostra il percorso della pagina?

15. Quale componente divide un elenco in pagine?

16. Che cosa sono gli Spinners?

17. Che cosa è un Toast?

18. Quali famiglie comprende il sottomenu?

19. Che cos'è un punto di interruzione?

20. Quali valori compaiono nella barra delle larghezze?

21. In quale vista compare la barra delle larghezze nell'esempio?

22. Che cosa fa la Navbar su schermi stretti?

23. Come si chiama il pulsante che comprime la Navbar?

24. Quale classe decide a quale larghezza si espande la Navbar?

25. Che cosa significa px?

26. Perché controllare più larghezze?

27. Da quale schermo conviene progettare?

28. Quale componente rende un'immagine adattabile?

29. Che cosa fa Responsive Video Embed?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Muoversi nella struttura della pagina

Il DOM è la struttura ad albero della pagina: ogni elemento è un ramo dentro un altro. Il pannello DOM di Dreamweaver lo mostra in modo visivo e permette di selezionare un elemento con un clic. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il pannello DOM

In basso a destra si trovano tre schede: DOM, Risorse, Snippet. Il pannello DOM mostra l'albero della pagina del modello:

html contiene head e body;
dentro body c'è nav (con classi come .navbar), poi div .container-fluid;
dentro il container: a .navbar-brand, button .navbar-toggler, div #navbarSupportedContent;
più sotto le section, i separatori hr, il footer .text-center e lo script.

Il pannello DOM con html, head, body, nav, section, hr e footer

Le frecce aprono e chiudono i rami. Il simbolo + a sinistra permette di aggiungere un elemento nel punto scelto. Una classe si legge con il punto (.navbar-brand), un id con il cancelletto (#navbarSupportedContent).

Il pannello File

Il pannello File mostra le cartelle del computer e quelle del sito. Il filtro in alto sceglie dove guardare (nell'esempio Desktop), e il collegamento Gestisci siti apre l'elenco dei siti. Dal menu Finestra si apre con F8.

Dal DOM al codice

Selezionare un elemento nel DOM lo evidenzia anche nel codice e nella barra del selettore di tag. Così trovi in un attimo la riga da modificare.

Attenzione: spostare o cancellare un ramo del DOM porta via tutto il suo contenuto. Se hai dubbi, usa Ctrl+Z.

Regola di Marco Consiglio: pensa alla pagina come a un albero. Capire chi sta dentro chi ti fa risolvere metà dei problemi di layout.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So spiegare che cos'è il DOM

So riconoscere le schede DOM, Risorse e Snippet

So aprire e chiudere i rami

So leggere classi e id

So selezionare un elemento nel DOM

So usare il pannello File

So aprire Gestisci siti

So collegare DOM, codice e selettore di tag

Tipologie applicative

Gli elementi del DOM dell'esempio.

html

Radice della pagina.

head

Informazioni nascoste.

body

Contenuto visibile.

nav

Barra di navigazione.

section

Sezione della pagina.

footer

Piè di pagina.

Glossario interattivo

Tocca un termine per vederne la definizione.

DOM

Struttura ad albero della pagina.

Ramo

Elemento con altri elementi dentro.

Classe

Nome che comincia con un punto nel DOM.

Nome unico, con il cancelletto.

Radice

Elemento principale.

Selettore di tag

Percorso dei tag.

Pannello

Finestra con strumenti.

Albero

Struttura a rami.

Esercitazioni pratiche

Esercizio 1 — Apri i rami

Nel pannello DOM apri head e body e annota che cosa contengono.

Esercizio 2 — Classe o id?

Per .navbar-brand e #navbarSupportedContent scrivi se sono classi o id.

Esercizio 3 — Dal DOM al codice

Seleziona il footer nel DOM e trova la sua riga nel codice.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cos'è il DOM?

2. Che cosa mostra il pannello DOM?

3. Quali schede stanno insieme al DOM in basso a destra?

4. Quale elemento è la radice della pagina?

5. Quali elementi contiene html?

6. Dove si trova il contenuto visibile?

7. Quale elemento è la barra di navigazione dell'esempio?

8. Quale classe ha il div dentro nav nell'esempio?

9. Quale elemento ha la classe navbar-brand?

10. Quale elemento ha la classe navbar-toggler?

11. Come si legge una classe nel DOM?

12. Come si legge un id nel DOM?

13. Che cos'è navbarSupportedContent?

14. Che cosa fanno le frecce del DOM?

15. Che cosa permette il simbolo + nel DOM?

16. Che cosa è un ramo?

17. Che cosa è hr?

18. Quale elemento chiude la pagina nell'esempio?

19. Che cosa succede se selezioni un elemento nel DOM?

20. Che cosa mostra la barra del selettore di tag?

21. Che cosa mostra il pannello File?

22. Quale scorciatoia apre il pannello File?

23. Quale cartella era scelta nel filtro del pannello File?

24. Quali voci compaiono sotto Desktop?

25. Quale collegamento nel pannello File apre l'elenco dei siti?

26. Che cosa succede se cancelli un ramo del DOM?

27. Che cosa fai se cancelli per errore?

28. Perché il DOM aiuta con i problemi di layout?

29. Che cos'è un albero in informatica?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Riutilizzare il lavoro già fatto

Scrivere ogni volta lo stesso codice fa perdere tempo. Dreamweaver offre gli Snippet (pezzi di codice pronti), le Librerie e i Modelli per riutilizzare ciò che hai già creato. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il pannello Snippet

Il pannello Snippet (Maiusc+F9) ha due colonne, Nome e Tasto attivazione, e raggruppa i frammenti in cartelle:

Bootstrap_Snippets;
CSS_Animation ed CSS_Effects;
CSS_Snippets;
HTML_Snippets, con voci come Adding a Mailto Link, Add a Favicon, Add Lorem Ipsum, Create a Navigation Bar, Create Site Map, General Meta Tags, Redirect a web page.

Alcuni snippet hanno un tasto di attivazione: una parola breve (per esempio mailto, favicon, loremipsum) che inserisce il frammento quando la scrivi nel codice.

Il pannello Snippet con le cartelle e il tasto di attivazione

Il menu Strumenti

Nel menu Strumenti trovi i sottomenu Libreria, Modelli e Comandi. Una libreria contiene elementi che si ripetono in più pagine (per esempio il piè di pagina): modificandola una volta, cambiano tutte le pagine. Un modello è una pagina madre da cui nascono altre pagine.

CC Libraries

Il pannello CC Libraries (Creative Cloud Libraries) conserva colori, caratteri e immagini condivisi con le altre applicazioni Adobe, quando sei collegato al tuo account.

Attenzione: controlla sempre lo snippet prima di usarlo: potrebbe contenere indirizzi o testi d'esempio da sostituire con i tuoi.

Regola di Marco Consiglio: se scrivi due volte la stessa cosa, trasformala in uno snippet. Il tempo risparmiato si moltiplica.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So aprire il pannello Snippet

So riconoscere le cartelle di snippet

So usare un tasto di attivazione

So spiegare che cos'è una libreria

So spiegare che cos'è un modello

So aprire il menu Strumenti

So riconoscere CC Libraries

So adattare uno snippet ai miei dati

Tipologie applicative

Gli strumenti per riutilizzare il lavoro.

Snippet

Frammento di codice pronto.

Libreria

Elementi ripetuti in più pagine.

Modello

Pagina madre.

Comandi

Sottomenu di Strumenti.

CC Libraries

Risorse Adobe condivise.

Tasto di attivazione

Parola che inserisce lo snippet.

Glossario interattivo

Tocca un termine per vederne la definizione.

Snippet

Frammento di codice riutilizzabile.

Libreria

Raccolta di elementi ripetuti.

Modello

Pagina da cui nascono altre pagine.

Tasto di attivazione

Parola breve per inserire uno snippet.

Favicon

Piccola icona del sito.

Lorem ipsum

Testo finto di prova.

Mailto

Collegamento che apre la posta.

Creative Cloud

Servizio di Adobe.

Esercitazioni pratiche

Esercizio 1 — Esplora gli snippet

Apri il pannello Snippet e annota le cartelle e tre voci di HTML_Snippets.

Esercizio 2 — Libreria o modello?

Per piè di pagina e pagina madre del sito, scrivi che cosa useresti.

Esercizio 3 — Un tuo snippet

Scrivi su carta quale pezzo di codice ripeti più spesso e che nome gli daresti.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Che cos'è uno snippet?

2. Quale scorciatoia apre il pannello Snippet?

3. Quali colonne ha il pannello Snippet?

4. Quale cartella contiene snippet di Bootstrap?

5. Quale cartella contiene snippet per effetti grafici?

6. Quale cartella contiene snippet HTML?

7. Che cosa fa lo snippet Add a Favicon?

8. Che cosa fa lo snippet Adding a Mailto Link?

9. Che cosa fa Add Lorem Ipsum?

10. Che cosa fa Create a Navigation Bar?

11. Che cosa fa Redirect a web page?

12. Che cos'è il tasto di attivazione?

13. Quale parola attiva lo snippet Mailto nell'esempio?

14. Che cos'è una libreria in Dreamweaver?

15. Che cosa succede modificando un elemento di libreria?

16. Che cos'è un modello in Dreamweaver?

17. Quale menu contiene Libreria, Modelli e Comandi?

18. Che cos'è CC Libraries?

19. Che cosa può contenere CC Libraries?

20. A che cosa serve CC Libraries?

21. Perché controllare lo snippet prima di usarlo?

22. Quale snippet è utile per una mappa del sito?

23. Quale snippet inserisce meta tag generali?

24. Quale cartella contiene snippet per animazioni?

25. Che cosa risparmia l'uso degli snippet?

26. Quando conviene creare uno snippet?

27. Che differenza c'è tra libreria e modello?

28. Quale pannello conserva snippet già pronti?

29. Dove si legge Tasto attivazione?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Lavorare in fretta sul testo e sul codice

I menu Modifica e Trova contengono i comandi che userai di più: annulla, copia, incolla, cerca e sostituisci. Conoscere le scorciatoie ti fa risparmiare molto tempo. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il menu Modifica

Comando	Scorciatoia
Annulla	Ctrl+Z
Ripeti	Ctrl+Y
Taglia	Ctrl+X
Copia	Ctrl+C
Incolla	Ctrl+V
Incolla speciale…	Ctrl+Maiusc+V
Seleziona tutto	Ctrl+A
Vai alla riga	Ctrl+G
Mostra suggerimenti per il codice	Ctrl+Spazio
Quick Tag Editor…	Ctrl+T
Preferenze…	Ctrl+U

Il menu contiene anche sottomenu per Riduci codice, Collegamento, Tabella, Immagine, Codice, Testo, Formato paragrafo ed Elenco, più Scelte rapide da tastiera…. Le voci grigie dipendono da ciò che hai selezionato: per esempio Taglia e Copia si attivano solo con una selezione.

Il menu Trova

Il menu Trova offre otto comandi:

Trova nel documento corrente… (Ctrl+F);
Trova e sostituisci nei file… (Ctrl+Maiusc+F), per cercare in tutto il sito;
Sostituisci nel documento corrente… (Ctrl+H);
Trova successivo (F3) e Trova precedente (Maiusc+F3);
Trova tutto e seleziona (Ctrl+Maiusc+F3);
Aggiungi corrispondenza successiva a selezione (Ctrl+R) e la variante che ignora la corrispondenza (Ctrl+Alt+R).

Il menu Trova con Trova, Sostituisci e Trova e sostituisci nei file

Attenzione: la sostituzione in tutti i file può cambiare molte pagine insieme. Prima controlla ogni risultato e, se puoi, lavora su una copia del sito.

Regola di Marco Consiglio: impara cinque scorciatoie alla settimana. Dopo un mese lavorerai il doppio più in fretta.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So usare Annulla e Ripeti

So usare Taglia, Copia e Incolla

So usare Seleziona tutto e Vai alla riga

So usare il Quick Tag Editor

So cercare con Ctrl+F

So sostituire con Ctrl+H

So cercare in tutti i file

So controllare i risultati prima di sostituire

Tipologie applicative

I comandi di ricerca.

Trova nel documento

Ctrl+F.

Sostituisci nel documento

Ctrl+H.

Trova e sostituisci nei file

Ctrl+Maiusc+F.

Trova successivo

F3.

Trova precedente

Maiusc+F3.

Trova tutto e seleziona

Ctrl+Maiusc+F3.

Glossario interattivo

Tocca un termine per vederne la definizione.

Annulla

Torna indietro di un'azione.

Ripeti

Rifà l'azione annullata.

Incolla speciale

Incolla con opzioni.

Quick Tag Editor

Editor rapido dei tag.

Sostituire

Cambiare un testo con un altro.

Corrispondenza

Risultato di una ricerca.

Scorciatoia

Combinazione di tasti.

Selezione

Parte evidenziata.

Esercitazioni pratiche

Esercizio 1 — Memorizza

Scrivi su un foglio le scorciatoie di annulla, copia, incolla e trova.

Esercizio 2 — Cerca

Cerca la parola navbar nel documento e conta quante volte compare.

Esercizio 3 — Vai alla riga

Usa Ctrl+G per saltare alla riga 14 del codice del modello.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Quale scorciatoia annulla l'ultima azione?

2. Quale scorciatoia ripete l'azione annullata?

3. Quale scorciatoia taglia?

4. Quale scorciatoia copia?

5. Quale scorciatoia incolla?

6. Quale scorciatoia ha Incolla speciale?

7. Quale scorciatoia seleziona tutto?

8. Quale scorciatoia porta a una riga precisa?

9. Quale scorciatoia mostra i suggerimenti per il codice?

10. Quale scorciatoia apre il Quick Tag Editor?

11. Quale scorciatoia apre le Preferenze?

12. Perché Taglia e Copia sono a volte grigi?

13. Quale voce di Modifica apre l'elenco delle scorciatoie?

14. Quale menu contiene i comandi di ricerca?

15. Quale scorciatoia cerca nel documento corrente?

16. Quale scorciatoia sostituisce nel documento corrente?

17. Quale comando cerca in tutti i file del sito?

18. Quale scorciatoia ha Trova e sostituisci nei file?

19. Quale tasto va alla corrispondenza successiva?

20. Quale scorciatoia va alla corrispondenza precedente?

21. Che cosa fa Trova tutto e seleziona?

22. Che cosa fa Aggiungi corrispondenza successiva a selezione?

23. Quale scorciatoia aggiunge la corrispondenza successiva?

24. Che cos'è una corrispondenza?

25. Che cosa fa Sostituisci?

26. Perché cautela con la sostituzione in tutti i file?

27. Che cosa conviene fare prima di sostituire in tutto il sito?

28. Che cosa fa Annulla più volte?

29. Dove si trovano le Preferenze?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Controllare e migliorare il proprio lavoro

Prima di pubblicare una pagina conviene controllarla. Dreamweaver offre strumenti per ottimizzare il codice, controllare l'ortografia e convalidare l'HTML. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Il menu Strumenti

Compila (F9), disponibile solo per alcuni tipi di file;
Navigazione codice… (Ctrl+Alt+N), per spostarsi tra funzioni e regole;
Librerie di tag…, per gestire i tag conosciuti;
Esternalizza JavaScript…, che sposta il JavaScript in un file separato;
Ottimizza HTML… e Ottimizza HTML di Word…, che puliscono il codice;
Controllo ortografia (Maiusc+F7);
Gestisci caratteri…, per le famiglie di caratteri;
i sottomenu Libreria, Modelli, Comandi, HTML e CSS.

Convalida

Dal menu File › Convalida si controlla che il codice rispetti le regole del linguaggio. La convalida segnala tag non chiusi, attributi sbagliati e altri errori, che vengono elencati nel pannello Output in basso.

L'indicatore di stato

In basso a destra, accanto alla scritta HTML, un simbolo verde indica che non ci sono errori evidenti. Se compaiono segnalazioni, vanno lette e corrette.

Attenzione: un'ottimizzazione cambia il codice. Controlla la pagina prima e dopo, e tieni una copia del file originale.

Regola di Marco Consiglio: controlla sempre prima di pubblicare: ortografia, codice e anteprima. Pochi minuti evitano figuracce.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So aprire il menu Strumenti

So usare il controllo ortografia

So usare Ottimizza HTML

So spiegare Esternalizza JavaScript

So usare Convalida

So leggere il pannello Output

So leggere l'indicatore di stato

So tenere una copia prima di ottimizzare

Tipologie applicative

Gli strumenti di controllo.

Controllo ortografia

Maiusc+F7.

Ottimizza HTML

Pulisce il codice.

Esternalizza JavaScript

Sposta il JS in un file.

Convalida

Controlla le regole del codice.

Navigazione codice

Ctrl+Alt+N.

Output

Mostra i messaggi.

Glossario interattivo

Tocca un termine per vederne la definizione.

Convalida

Controllo del rispetto delle regole.

Ottimizzare

Pulire e ridurre.

JavaScript

Linguaggio dei comportamenti.

Ortografia

Scrittura corretta.

Output

Pannello dei messaggi.

Errore

Parte del codice non corretta.

Segnalazione

Avviso nel codice.

Copia di sicurezza

Duplicato del file originale.

Esercitazioni pratiche

Esercizio 1 — Leggi il menu

Apri il menu Strumenti e scrivi a che cosa serve ognuna delle prime sette voci.

Esercizio 2 — Checklist

Scrivi la tua checklist di controllo prima di pubblicare una pagina.

Esercizio 3 — Output

Individua il pannello Output e annota che cosa mostra quando è vuoto.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. Quale menu contiene gli strumenti di controllo del codice?

2. Quale scorciatoia ha il Controllo ortografia?

3. Quale scorciatoia ha Compila?

4. Perché Compila può essere grigio?

5. Quale scorciatoia ha Navigazione codice?

6. Che cosa fa Ottimizza HTML?

7. Che cosa fa Ottimizza HTML di Word?

8. Che cosa fa Esternalizza JavaScript?

9. Che cosa fa Gestisci caratteri?

10. Quali sottomenu compaiono in Strumenti?

11. Da quale menu si usa Convalida?

12. A che cosa serve la convalida?

13. Che cosa può segnalare la convalida?

14. Dove compaiono i messaggi della convalida?

15. Quali pannelli stanno in basso?

16. Che cosa indica il simbolo verde accanto a HTML?

17. Che cosa fai se compaiono segnalazioni?

18. Un'ottimizzazione cambia il codice?

19. Che cosa conviene tenere prima di ottimizzare?

20. Che cosa controlla il controllo ortografia?

21. Quale dizionario è impostato nell'esempio delle Preferenze?

22. Che cosa significa HTML nella barra di stato?

23. Che cosa si controlla prima di pubblicare?

24. Quale comando serve per spostarsi tra le parti del codice?

25. Che cosa fanno le Librerie di tag?

26. In quale pannello si trovano i messaggi d'errore?

27. Perché controllare prima di pubblicare?

28. Convalida e anteprima sono la stessa cosa?

29. Qual è la regola di Marco Consiglio per i controlli?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.

Personalizzare Dreamweaver

Le Preferenze permettono di adattare Dreamweaver al tuo modo di lavorare. Si aprono dal menu Modifica › Preferenze… oppure con Ctrl+U. Questa dispensa, aggiornata al 2026 e a cura di Marco Consiglio, usa Dreamweaver 2021 in italiano.

Le categorie

A sinistra c'è l'elenco: Generali, Accessibilità, Aggiornamenti in app, Anteprima in tempo reale, Caratteri, Comparazione file, Copia/Incolla, Dimensioni finestra, Elementi invisibili, Esporta/importa impostazioni, Evidenziazione, Formato codice, Git, Guida alle nuove funzioni, Interfaccia, Linting, Nuovo documento, PHP, Riscrittura codice, Sito, Stili CSS, Suggerimenti per codice. In basso i pulsanti Aiuto, Chiudi e Applica.

La categoria Generali

Due gruppi di opzioni:

Opzioni documento: Mostra schermata iniziale, Riapri documenti all'avvio, Segnala apertura file di sola lettura, Attiva file correlati, e due menu a tendina (Individua file correlati dinamicamente: Manualmente; Aggiorna collegamento durante lo spostamento dei file: Richiedi);
Opzioni di modifica: Passa a paragrafo normale dopo l'intestazione, Usa strong ed em invece di b e i, Avvisa dell'inserimento di aree modificabili, il Numero massimo di passaggi di Cronologia (50) e il Dizionario ortografico (italiano).

Anteprima in tempo reale

Questa categoria sceglie in quali browser si controlla la pagina. L'elenco mostra Google Chrome, Internet Explorer, Microsoft Edge (F12) e Mozilla Firefox. Il browser con la scorciatoia F12 è il Browser principale. C'è anche il Browser sostitutivo e un'opzione per usare un file temporaneo.

Le scorciatoie da tastiera

Dal menu Modifica › Scelte rapide da tastiera… si consultano e si personalizzano le scorciatoie. Le più usate: Ctrl+N, Ctrl+O, Ctrl+S, Ctrl+Z, Ctrl+F, Ctrl+H, F4, F5, F8, F12.

Attenzione: nell'esempio le finestre sono state chiuse con Chiudi, senza premere Applica: nessuna impostazione è stata cambiata.

Regola di Marco Consiglio: cambia una preferenza alla volta e provala. Se non ti piace, torni indietro senza confusione.

Checklist operativa

Completa ogni voce dopo aver svolto davvero il passaggio in Ads Manager. Al completamento si sblocca il quiz.

So aprire le Preferenze con Ctrl+U

So leggere l'elenco delle categorie

So leggere la categoria Generali

So scegliere il browser per l'anteprima

So usare F12 per l'anteprima

So aprire le Scelte rapide da tastiera

So distinguere Chiudi e Applica

So cambiare una preferenza alla volta

Tipologie applicative

Le categorie delle Preferenze.

Generali

Opzioni di documento e di modifica.

Anteprima in tempo reale

Browser per l'anteprima.

Stili CSS

Come si scrivono gli stili.

Sito

Opzioni dei siti.

Interfaccia

Aspetto del programma.

Suggerimenti per codice

Aiuti durante la scrittura.

Glossario interattivo

Tocca un termine per vederne la definizione.

Preferenze

Impostazioni del programma.

Browser principale

Browser per F12.

Cronologia

Elenco delle azioni annullabili.

Dizionario

Elenco di parole per l'ortografia.

Applica

Conferma le modifiche.

Chiudi

Esce senza applicare.

Scelte rapide

Scorciatoie da tastiera.

File correlati

File collegati alla pagina.

Esercitazioni pratiche

Esercizio 1 — Apri e guarda

Apri le Preferenze con Ctrl+U e annota le prime cinque categorie. Poi chiudi con Chiudi.

Esercizio 2 — Il browser principale

Nella categoria Anteprima in tempo reale individua il browser con F12.

Esercizio 3 — Le tue scorciatoie

Scrivi le dieci scorciatoie che userai di più.

Quiz & Attestato

Completa tutte le voci della Checklist operativa per sbloccare il quiz.

Quiz da 30 domande · soglia di superamento 70%.

1. A che cosa servono le Preferenze?

2. Quale scorciatoia apre le Preferenze?

3. Da quale menu si aprono le Preferenze?

4. Dove si trova l'elenco delle categorie?

5. Quale categoria compare per prima?

6. Quali pulsanti stanno in basso nelle Preferenze?

7. Che cosa fa Chiudi?

8. Che cosa fa Applica?

9. Con quale pulsante sono state chiuse le Preferenze nell'esempio?

10. Quale categoria contiene le opzioni per l'anteprima nel browser?

11. Quali browser compaiono nell'elenco dell'anteprima?

12. Quale browser ha la scorciatoia F12 nell'esempio?

13. Che cosa significa Browser principale?

14. Che cos'è Browser sostitutivo?

15. Che cosa fa Mostra schermata iniziale?

16. Che cosa fa Riapri documenti all'avvio?

17. Che cosa fa Segnala apertura file di sola lettura?

18. Che cosa fa Attiva file correlati?

19. Quale valore aveva Individua file correlati dinamicamente?

20. Quale valore aveva Aggiorna collegamento durante lo spostamento dei file?

21. Quanti passaggi massimi di Cronologia c'erano nell'esempio?

22. Quale dizionario ortografico era impostato?

23. Che cosa fa Usa strong ed em invece di b e i?

24. Dove si trovano le Scelte rapide da tastiera?

25. Quale scorciatoia apre l'anteprima nel browser principale?

26. Quale categoria riguarda gli stili CSS?

27. Che cosa succede se non premi Applica?

28. Perché cambiare una preferenza alla volta?

29. Quale categoria riguarda il linguaggio PHP?

30. Qual è il messaggio centrale di questa area?

Genera il tuo attestato

Dopo aver superato il quiz (soglia 70%), inserisci il tuo nome per generare l'attestato.