Lezione 11 - Elementi di stile con CSS
45 minuti
Panoramica
Domanda del giorno: come possiamo modellare le immagini e l'aspetto delle nostre pagine?
Questa lezione prosegue con l'introduzione alle proprietà di stile CSS, questa volta concentrandosi maggiormente sugli elementi non testuali. Gli studenti iniziano questa lezione consultando un sito web sui "Dessert del mondo". Esaminano e modificano i nuovi stili CSS su questo sito web, aggiungendo i propri stili alla pagina. Dopo aver lavorato sulla pagina "Desserts", gli studenti applicano le loro conoscenze sulle nuove proprietà CSS ai loro siti web personali.
Traguardo di apprendimento
Questa lezione si basa su ciò che gli studenti hanno appreso in precedenza sulle proprietà CSS, questa volta esaminando le proprietà che possono essere utilizzate sugli elementi. Queste nuove proprietà influiscono sull'aspetto visivo della pagina web oltre al testo e offrono agli studenti un controllo più preciso sull'aspetto delle loro pagine. Man mano che gli studenti ampliano la loro conoscenza delle proprietà di stile, molti potrebbero avere domande su come possono fare ancora di più con i CSS. Gli studenti curiosi possono esplorare altre proprietà presso W3 Schools .
Opportunità di valutazione
- Usa le proprietà CSS per modificare le proprietà dell'aspetto (layout) degli elementi.
Vedi l'esercizio 8 in Code Studio.
- Crea un set di regole CSS per l'elemento "body" che influisca su tutti gli elementi della pagina.
Vedi l'esercizio 8 in 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-19 - Document programs in order to make them easier to follow, test, and debug.
Pianificazione
Obiettivi
Gli alunni saranno in grado di:
- creare un set di regole CSS per l'elemento corpo che influisca su tutti gli elementi della pagina.
- utilizzare le proprietà CSS per modificare le dimensioni, la posizione e i bordi degli elementi.
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
- Stile del corpo del testo (=body) - Pagina delle risorse
- Proprietà della disposizione della pagina (layout) - Pagina delle risorse
- Elementi di stile con CSS - Diapositive (Scarica)
Guida didattica
Preparazione (5 minuti)
Discussione: quali stili vorresti?
Mostra: fai andare gli studenti alla pagina web di esempio in Code Studio o visualizzala sulla lavagna.
Discussione: quali sono i due stili CSS di questa pagina che già conosci? Quali sono i due stili della pagina che non sai ancora come codificare?
Discussione: chiedi agli studenti di condividere stili diversi sulla pagina.
Obiettivo: questa discussione serve come una rassegna delle proprietà CSS che gli studenti hanno già imparato e mostra alcune delle nuove proprietà che impareranno in questa lezione. Alcune delle nuove proprietà mostrate sono:
- Aggiungere colori di sfondo alle cose
- Essere in grado di spostare oggetti sulla pagina (le immagini a sinistra del testo)
- Essere in grado di aggiungere bordi e arrotondare gli angoli delle immagini
Osservazioni
Oggi impareremo altre proprietà che possiamo usare per definire lo stile delle nostre pagine web, che ti permetteranno di aggiungere alcuni degli stili che abbiamo elencato in questa discussione.
Domanda del giorno: come possiamo modellare le immagini e l'aspetto (il layout) delle nostre pagine?
Attività (35 minuti)
Sviluppo Web: elementi di stile con CSS
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)
Domanda del giorno: come possiamo modellare le immagini e l'aspetto delle nostre pagine?
Diario: chiedi agli studenti di aggiungere le nuove proprietà apprese alla pagina delle proprietà CSS del diario o del poster della classe.
Discussione: come potresti voler usare questi nuovi stili nella tua pagina web personale?
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.
