Lezione 17 - Classi CSS
45 minuti
Panoramica
Domanda del giorno: come possiamo creare stili diversi per lo stesso tipo di elemento?
Questa lezione amplia il concetto di CSS che gli studenti hanno già imparato, introducendo delle classi che consentono agli sviluppatori web di trattare i gruppi di elementi cui desiderano assegnare uno stile diverso rispetto ad altri elementi dello stesso tipo. Gli studenti esaminano e modificano prima le classi su varie pagine, quindi creano le proprie classi e le usano per controllare meglio l'aspetto delle loro pagine. Quindi riflettono su come potrebbero utilizzare questa abilità per migliorare i siti web delle loro squadre.
Traguardo di apprendimento
Fino a questo punto, l'unica cosa relativa all'applicazione di uno stile che gli studenti fossero in grado di fare era modellare per elemento, il che significa che ogni elemento di un tipo particolare aveva lo stesso stile. Le classi consentono agli sviluppatori web di raggruppare una serie di elementi a cui desiderano applicare uno stile. Ciò significa che gli studenti possono individuare un determinato elemento da modellare o raggruppare elementi da uno o più tipi di elementi. Una volta che gli elementi sono in una classe, la classe può essere utilizzata come selettore in una regola di stile.
Nota: i singoli elementi possono essere selezionati anche tramite "id", ma questo tipo di selezione è possibile con una classe applicata solo a quel singolo elemento. Poiché la selezione dell'ID non aggiunge alcuna funzionalità aggiuntiva, non viene insegnata in questo corso.
Opportunità di valutazione
-
Disponi in gruppo gli elementi utilizzando le classi per creare stili più specifici sul loro sito web.
Vedi l'esercizio 5 su Code Studio.
Mappatura delle competenze
AP - Algorithms & Programming
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-17 - Systematically test and refine programs using a range of test cases.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
Pianificazione
Obiettivi
Gli alunni saranno in grado di:
- raggruppare gli elementi utilizzando le classi per creare stili più specifici sul loro sito web.
Preparazione
- Controlla il forum "Aula insegnanti" per insegnanti verificati per trovare strategie o risorse aggiuntive condivise dagli altri colleghi insegnanti
- Se stai facendo una lezione virtuale, valuta la possibilità di controllare le nostre Modifiche alla lezione virtuale
Collegamenti
Attenzione! Fai una copia di tutti i documenti che intendi condividere con gli alunni.
Per gli insegnanti
- Classi CSS - Diapositive (Scarica)
- Classi - Risorse
Glossario
- Classe CSS - un identificatore che consente a più elementi di un documento HTML di avere lo stesso stile
Guida didattica
Preparazione (5 minuti)
Discussione: quali stili vorresti?
Mostra: fai andare gli studenti alla pagina web di esempio in Code Studio o visualizzala alla lavagna.
Discussione: quali sono i due stili CSS di questa pagina che già conosci? Qual è una cosa che fa questa pagina che non abbiamo ancora imparato a fare?
Discussione: chiedi agli studenti di condividere le risposte che hanno dato alle domande.
Obiettivo: questa discussione serve come una rassegna delle proprietà CSS che gli studenti hanno già appreso e li induce a pensare a come questa pagina vada oltre tale conoscenza. Gli studenti potrebbero non rendersene conto, ma questa pagina presenta lo stile degli stessi tipi di elementi in modi diversi nelle diverse parti della pagina. Potresti chiedere agli studenti di riflettere più approfonditamente sul motivo per cui questo è difficile, chiedendo loro quale sarebbe nel foglio di stile di questa pagina la proprietà cromatica dell'elemento del paragrafo.
Osservazioni
Finora siamo riusciti a modificare lo stile di tutti gli elementi della nostra pagina, ma c'è stato un problema. Abbiamo dovuto modellare ogni elemento dello stesso tipo nello stesso modo. Ad esempio, se volevamo che un paragrafo avesse testo verde, tutti dovevano avere testo verde. Se volevamo che un'immagine fluttuasse verso destra, tutte dovevano fluttuare verso destra. Oggi impareremo un modo per aggirare questo problema.
Domanda del giorno: come possiamo creare stili diversi per lo stesso tipo di elemento?
Attività (35 minuti)
Classi
Transizione: fai andare gli studenti su Code Studio.
Guida agli esercizi di programmazione: ulteriori indicazioni per gli esercizi di programmazione sono fornite nella Guida CSD agli esercizi di programmazione. Questo documento include strategie e buone pratiche per agevolare lo svolgimento degli esercizi di programmazione con gli studenti.
Valutazione formativa: questo esercizio può essere utilizzato come valutazione formativa. Nell'esercizio viene fornita una tabella con i criteri di valutazione e agli studenti può essere fornito un riscontro scritto. Clicca qui per saperne di più su come fornire riscontri agli studenti.
Conclusione (5 minuti)
Diario
Domanda del giorno: come possiamo creare stili diversi per lo stesso tipo di elemento?
Discussione: pensa al sito web della tua squadra. Quali sono le due nuove idee che hai per il tuo sito, ora che disponi del concetto di "classe"?
Questo compito è disponibile previa Licenza Creative Commons (CC BY-NC-SA 4.0).
Se sei interessato ad utilizzare i materiali di Code.org per scopi commerciali, contattaci.
