3E e 3I SIA: Spiegazione del sito responsive (Html5, Css3 e Javascript) per studenti DSA e studenti con difficoltà cognitive

Questo post contiene una spiegazione più completa del sito responsive per studenti Dsa e difficoltà cognitive che necessitano di una spiegazione più semplice.

Immagina di esplorare un mondo virtuale, come in un videogioco di realtà aumentata. Ecco come possiamo spiegare la pagina web usando questa idea:

Cos'è la pagina del sito Web?

1. **Entrare nel mondo**: La pagina è come un grande ambiente virtuale. Quando apri la pagina, è come entrare in un gioco. Puoi vedere diverse "stanze" o sezioni, proprio come nei livelli di un videogioco.

2. **Menu come una mappa**: Il menu sulla pagina è simile a una mappa nel gioco. Ti dice dove puoi andare e cosa puoi esplorare, come "Home", "Novità", e "Chi siamo". Cliccando su questi link, ti sposti in diverse aree della "mappa".

3. **Responsive Design**: Se usi un telefono o un tablet, la pagina si adatta, proprio come un videogioco che cambia a seconda della console che stai usando. È come se il gioco si adattasse alla tua televisione o al tuo computer!

4. **Contenuto come livelli**: Ogni sezione della pagina, come "Benvenuti!" o "Articolo 1", è come un livello nel gioco. Ogni livello ha le sue informazioni e immagini, e puoi "giocare" esplorando queste informazioni.

5. **Immagini interattive**: Le immagini nella colonna di destra sono come oggetti speciali nel gioco che puoi toccare per scoprire di più. Cliccando su di esse, scopri altre pagine, proprio come sbloccare nuove aree in un gioco.

6. **Footer come un punto di salvataggio**: Alla fine della pagina, il footer è come un punto di salvataggio. Ti dà informazioni utili e ti dice che puoi sempre tornare all'inizio.

In breve

Questa pagina web è come un gioco di realtà aumentata: puoi navigare, esplorare, e scoprire nuove informazioni proprio come faresti in un videogioco. Ogni click ti porta in un nuovo posto, e l'intera esperienza si adatta a te!

Il foglio di stile:

Certo! Spieghiamo questo foglio di stile usando l'idea della realtà aumentata. Immagina che il foglio di stile sia come una mappa che guida un personaggio in un gioco, aiutandolo a muoversi e a interagire con il mondo intorno a lui.

Cos'è questo foglio di stile?

1. **Impostazioni di base**:

- Pensa al corpo della pagina web come al terreno di un gioco. Qui abbiamo un colore di sfondo grigio chiaro, come un cielo nuvoloso. È comodo per vedere gli altri elementi, proprio come un bel paesaggio in un gioco.

2. **Linee di separazione**:

- Le linee orizzontali (`hr`) sono come i confini tra le aree nel gioco. Servono per separare le sezioni, così sai dove inizia e finisce ogni parte, come nei livelli di un videogioco.

3. **Contenitore generale**:

- Immagina `#container` come il grande castello dove avviene tutto. Tiene tutto in ordine e ha un aspetto bianco, come le mura di un castello che circondano un giardino.

4. **Header e Footer**:

- Il `#header` è l'ingresso del castello, dove trovi il titolo e il menu, mentre il `#footer` è come l'uscita, dove puoi trovare informazioni finali e link utili. Entrambi hanno colori diversi per farli risaltare, proprio come i portoni di un castello.

5. **Menu come una mappa**:

- Il menu è come una mappa che ti dice dove puoi andare. Quando clicchi su un link, è come scegliere una nuova avventura nel gioco!

6. **Colonne come stanze**:

- Ci sono colonne (`#colonna-sx` e `#colonna-dx`), come stanze nel castello. La stanza a sinistra contiene le cose più importanti, mentre quella a destra ha informazioni aggiuntive. Puoi muoverti tra di esse proprio come faresti esplorando diverse stanze in un gioco.

7. **Media Queries**:

- Le "media queries" sono come diversi livelli di difficoltà nel gioco. A seconda delle dimensioni dello schermo (come un computer o un telefono), il layout della pagina cambia. È come se il gioco adattasse la sfida a seconda di come stai giocando.

8. **Effetti speciali**:

- Alcuni stili, come `#titolo a` o `.evidenzia`, rendono gli elementi speciali. Sono come oggetti magici che attirano la tua attenzione, con colori brillanti o bordi speciali.

In breve

Il foglio di stile utilizzato nel sito è come la guida per costruire un mondo in un videogioco. Aiuta a organizzare tutto in modo che sia facile da navigare e bello da vedere. Proprio come un gioco di realtà aumentata, dove tutto si adatta e cambia per offrirti la migliore esperienza, anche questo foglio di stile rende il sito web accogliente e interattivo!

Buona lettura.
prof. Paolo Latella

link per scaricare l'intera procedura

Mappa Mentale per la Pagina `index.html`

1. **Intestazione (`<head>`)**

- **Meta Dati**

- Codifica dei caratteri: UTF-8

- Tipo di contenuto: HTML

- Titolo della pagina: "Home - Sito responsive della 3E SIA"

- Responsività: Imposta viewport

- **Collegamenti**

- Stile CSS: `css/style.css`

- Script jQuery: `js/jquery-1.7.1.min.js`

- **Stili Inline**

- Colore giallo per il testo

2. **Script jQuery**

- **Funzione di Toggle per il Menu**

- Attiva/disattiva visibilità del menu su click

3. **Corpo della Pagina (`<body>`)**

- **Contenitore Principale (`#container`)**

- Include tutte le sezioni

- **Intestazione (`#header`)**

- **Titolo Principale**

- Colori e collegamenti

- **Icona Menu Smart**

- Tre barre per il menu mobile

- **Menu di Navigazione (`#menu`)**

- Elenco di collegamenti: Home, Novità, Chi siamo, Cosa facciamo, Contatti

- **Sezione Principale (`#main`)**

- **Colonna Sinistra (`#colonna-sx`)**

- Benvenuti e informazioni aziendali

- Immagine di copertura

- Servizi offerti (elenco)

- Articoli con contenuti di esempio

- **Colonna Destra (`#colonna-dx`)**

- Immagini con link

- Box informativo

- Link a siti preferiti

- **Footer (`#footer`)**

- Messaggio informativo sul responsive design

- Informazioni sulla classe e il docente

- Link per tornare in cima

4. **Osservazioni Generali**

- **Struttura Chiara**

- Sezioni etichettate

- **Uso di Commenti**

- Facilita comprensione

- **Accessibilità**

- Aggiungere attributi `alt` per immagini

Spiegazione Chiara delle Pagine

1. **Intestazione**

- Imposta le informazioni fondamentali della pagina web. Qui definisci come il browser deve interpretare il contenuto.

2. **Menu di Navigazione**

- Il menu aiuta a navigare il sito. Ogni voce del menu è un link a una sezione diversa della pagina o a un'altra pagina.

3. **Colonna Sinistra**

- Qui puoi trovare un'introduzione all'azienda e i servizi offerti. Le immagini rendono il contenuto più interessante.

4. **Colonna Destra**

- Mostra immagini cliccabili e link a siti utili. Ogni immagine ha una descrizione per spiegare il contenuto.

5. **Footer**

- Contiene informazioni finali, come avvisi sul ridimensionamento della finestra e dettagli sull'istituto.

Nota

- **Utilizzo di Colori e Immagini:** Colori e immagini aiutano a mantenere l'attenzione e facilitano la comprensione.

- **Commenti nel Codice:** I commenti nel codice servono come guida per capire cosa fa ogni parte.

- **Struttura Organizzata:** Una pagina ben organizzata è più facile da seguire, specialmente per chi ha bisogno di più supporto.

Questa mappa e spiegazione semplificata possono aiutarti a visualizzare e comprendere meglio la struttura e il contenuto della pagina `index.html` e del foglio di stile `style.css`.

Spiegazione semplificata del sito:

1. **Struttura del Sito**

- **Header (Intestazione)**: È la parte superiore della pagina. Qui troviamo il titolo del sito e un'icona per il menù che si può cliccare.

- **Menu di Navigazione**: Qui puoi trovare diverse sezioni del sito come "Home", "Novità", "Chi siamo", "Cosa facciamo", e "Contatti". Cliccando su questi link, si può accedere a diverse pagine del sito.

- **Corpo della Pagina**: Questa è la parte centrale dove si trova il contenuto principale. È divisa in due colonne:

- **Colonna Sinistra**: Contiene informazioni sulla nostra azienda, immagini e articoli.

- **Colonna Destra**: Mostra immagini con link e una lista di link utili.

- **Footer (Piè di pagina)**: È la parte inferiore della pagina con informazioni aggiuntive e link.

2. **Elementi Importanti**

- **Titolo**: Il titolo principale del sito è "Web3SIA", che è il nome della nostra azienda di fantasia.

- **Benvenuto**: Nella colonna sinistra, c'è un messaggio di benvenuto e informazioni sui servizi offerti dall'azienda, come la creazione di siti web.

- **Articoli**: Ci sono due articoli di esempio che mostrano come potrebbe apparire il contenuto scritto.

- **Immagini**: Nella colonna destra, ci sono immagini che si possono cliccare per visitare altre pagine.

- **Link Utili**: Una lista di link a siti esterni per ulteriori informazioni.

3. **Aspetto del Sito

- **Colori**: Il sito usa colori chiari e scuri per differenziare le varie sezioni. Il testo è chiaro e leggibile.

- **Font**: È utilizzato un font semplice e leggibile, come Arial, per facilitare la lettura.

- **Responsività**: Il sito è progettato per adattarsi a diversi dispositivi, come computer, tablet e smartphone. Puoi ridimensionare la finestra del browser e vedere come si adatta il contenuto.

4. **Funzioni Aggiuntive**

- **Menu Smart**: Quando si clicca sull'icona delle tre barre orizzontali, il menu si apre o si chiude, rendendo più facile navigare sui dispositivi mobili.

- **Link e Immagini**: Le immagini possono essere cliccate per visitare altre pagine. I link portano a siti esterni per ulteriori risorse.

5. **Accessibilità**

- È importante che tutti possano usare il sito. Stiamo lavorando per migliorare l'accessibilità, aggiungendo descrizioni per le immagini, che aiutano chi ha difficoltà visive.

Spiegazione della pagina Index.html

<!doctype html>

<head>

<title>Home - Sito responsive della 3E Sia </title> 

.auto-style1 {

color: #FFFF00; 

}

</style>

</head>

/* Questo script attiva e disattiva il menù quando si clicca sull'icona delle tre barre orizzontali, utile per dispositivi mobili */

$(document).ready(function(){

$(".smartmenu").click(function() {

$("#menu").toggleClass("mostra-smartmenu"); // Alterna la classe per mostrare/nascondere il menù

});

</script>

<body>

<div id="container"> 

<div id="header"> 

<h1 id="titolo"><a href="#">Web</a><span class="auto-style1"><a href="#">3</a></span><a href="#"><span style="color:#FFFF00">ESIA</span></a></h1> 

<div class="smartmenu"> 

</div>

<div id="menu"> 

<ul> 

<li><a href="#"><span style="color:#0000cd">Home</span></a></li> 

<li><a href="novità.html"><span style="color:#0000cd">Novità</span></a></li>

<li><a href="chi_siamo.html"><span style="color:#0000cd">Chi siamo</span></a></li>

<li><a href="cosa_facciamo.html"><span style="color:#0000cd">Cosa facciamo</span></a></li>

<li><a href="contatti.html"><span style="color:#0000cd">Contatti</span></a></li>

</ul>

</div>

<div id="main"> 

Home

</div>

<div id="colonna-sx"> 

<h2>Benvenuti!</h2> 

<img src="images/lodi-copertina_700.jpg" class="immagine"/> 

<div class="giustifica"> 

<p> La nostra azienda di fantasia Web3SIA si trova a Lodi (foto) e vanta un'esperienza decennale nella creazione di siti e portali Web a livello nazionale ed internazionale. Ci occupiamo di: 

<ul>

<li>Siti Web Responsive</li> 

<li>Posizionamento sui motori di ricerca</li>

<li>Web banner statici e dinamici</li>

<li>Grafica, animazioni e fotoritocco</li>

</ul>

</p>

</div>

<hr /> 

<h2>Articolo 1</h2> 

<p> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

[N.B.: Qui è presente un testo di esempio (Lorem Ipsum) che non ha significato reale.]

</p>

</div>

<hr />

<h2>Articolo 2</h2> 

[N.B.: Testo di esempio, ripetuto per illustrare la formattazione.]

</p>

</div>

<hr />

</div> 

<div id="colonna-dx"> 

<div class="row"> 

<h2>Immagini con link</h2> 

<div id="colonna50-sx"> 

<a href="#"><img src="images/image1.jpg" class="immagine"></a> 

<div class="linkpagina">Pagina x</div> 

</div>

<div id="colonna50-dx"> 

<div class="linkpagina">Pagina y</div>

</div>

<div id="box"> 

<p class="giustifica">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

</p>

</div>

<ul>

<li><a target="_new" href="http://paololatella.blogspot.com">Sito di Paolo Latella</a></li> 

</ul>

</div>

</div> 

</div> 

<div id="footer"> 

<p class="centra"> 

Prova a ridimensionare la finestra del browser per vedere come il contenuto si adatta alla nuova dimensione

<br/>A.S. 2020/2021 Classe III E SIA - Istituto Bassi di Lodi -

prof. Paolo Latella <br/><a href="#"><span style="color:#0000CD">Top</span></a> 

</p>

</div>

<div class="clear"></div> 

</div> 

</body>

</html>

Osservazioni generali:

- Struttura chiara: La pagina è ben organizzata con sezioni chiaramente etichettate (header, menu, main, footer).

- Uso dei commenti: L’uso dei commenti è utile per spiegare le funzioni e le sezioni, facilitando la comprensione del codice.

- Accessibilità: Si potrebbe migliorare l'accessibilità aggiungendo attributi `alt` per le immagini e utilizzando testi

Il DOM, o Document Object Model, è una rappresentazione strutturata di un documento HTML o XML. Permette agli sviluppatori di interagire e manipolare il contenuto, la struttura e lo stile di una pagina web in modo dinamico. Ecco alcune informazioni chiave sul DOM:

1. Struttura ad albero: Il DOM rappresenta il documento come un albero di nodi. Ogni elemento HTML (come `<div>`, `<p>`, `<img>`, ecc.) diventa un nodo nell'albero, e questi nodi possono avere genitori, figli e fratelli.

2. Interattività: Utilizzando linguaggi di programmazione come JavaScript, puoi accedere, modificare e aggiornare il contenuto e la struttura del documento. Ad esempio, puoi cambiare il testo di un elemento, aggiungere nuovi elementi o rimuoverli.

3. Eventi: Il DOM gestisce anche gli eventi, come click, mouseover e tastiera, permettendo di reagire alle interazioni degli utenti con la pagina.

4. Compatibilità: Il DOM è standardizzato, il che significa che può essere utilizzato in vari browser e piattaforme in modo coerente.

In sintesi, il DOM è fondamentale per creare pagine web dinamiche e interattive, permettendo agli sviluppatori di controllare il comportamento della pagina in tempo reale.

Spiegazione del foglio di stile Style.css

Esempio di impostazione di un sito web responsive

Classe 3 E SIA 2024/2025 Istituto Bassi di Lodi -

Prof. Paolo Latella

/* Corpo della pagina */

body {

font: 16px/28px; /* Imposta la dimensione del font e l'interlinea */

font-family: 'Arial'; /* Definisce il font Arial per il corpo */

background: #D2D2D2; /* Imposta il colore di sfondo grigio chiaro */

line-height: 25px; /* Imposta l'altezza della linea per il testo */

}

/* Stile della linea orizzontale */

hr {

border-bottom: 1.5px solid #008000; /* Bordo inferiore verde scuro */

border-top: none; /* Nessun bordo superiore */

margin: 20px 0 15px 0; /* Margini sopra e sotto */

}

/* Contenitore generale per la pagina */

#container {

width: 960px; /* Larghezza fissa del contenitore */

margin: 0 auto; /* Centrato orizzontalmente */

background: #FFFFFF; /* Sfondo bianco */

}

/* Testa della pagina */

#header {

width: 920px; /* Larghezza del header */

float: left; /* Posiziona a sinistra */

padding: 20px; /* Padding interno */

background: #0000CD; /* Colore di sfondo blu */

background-image: linear-gradient(#0000CD, #00FFFF); /* Sfondo con gradiente */

}

/* Menu di navigazione */

#menu {

width: 100%; /* Larghezza completa */

float: right; /* Posiziona a destra */

background: #F0F0F0; /* Sfondo grigio chiaro */

}

/* Area principale del contenuto */

#main {

width: 920px; /* Larghezza dell'area principale */

float: left; /* Posiziona a sinistra */

padding: 20px; /* Padding interno */

}

/* Footer della pagina */

#footer {

width: 920px; /* Larghezza del footer */

float: left; /* Posiziona a sinistra */

padding: 10px; /* Padding interno */

background: #F0F0F0; /* Sfondo grigio chiaro */

color: #222222; /* Colore del testo nel footer */

}

/* Stile per i link nel footer */

#footer a {

font: 14px; /* Dimensione del font */

text-decoration: none; /* Rimuove la sottolineatura */

}

/* Stile del titolo */

#titolo a {

font-weight: bold; /* Grassetto per il titolo */

font-size: 48px; /* Dimensione del font */

float: left; /* Posiziona a sinistra */

color: #FFFFFF; /* Colore del testo bianco */

margin-bottom: 20px; /* Margine inferiore */

text-decoration: none; /* Rimuove la sottolineatura */

}

/* Stile per la lista del menu */

#menu ul {

margin: 0; /* Rimuove i margini */

float: right; /* Posiziona a destra */

width: 100%; /* Larghezza completa */

list-style: none; /* Rimuove i punti elenco */

}

/* Stile per gli elementi della lista del menu */

#menu ul li {

float: right; /* Posiziona a destra */

margin: 0; /* Rimuove i margini */

position: relative; /* Posizionamento relativo */

}

/* Stile per i link del menu */

#menu a {

color: #222222; /* Colore del testo nel menu */

text-decoration: none; /* Rimuove la sottolineatura */

display: block; /* Rende il link un blocco */

font: 14px; /* Dimensione del font */

padding: 14px 20px; /* Padding interno */

}

/* Stile per il link attivo nel menu (hover) */

#menu a:hover {

background: #F0F0F0; /* Sfondo grigio chiaro al passaggio del mouse */

color: #000000; /* Colore del testo nero al passaggio del mouse */

}

/* Stile per la pagina */

#pagina {

width: 100%; /* Larghezza completa */

float: left; /* Posiziona a sinistra */

display: block; /* Rende la pagina un blocco */

font: 14px; /* Dimensione del font */

color: #0000CD; /* Colore blu */

font-weight: bold; /* Grassetto */

}

/* Stile per la sezione link */

#link {

padding: 10px; /* Padding interno */

margin-top: 20px; /* Margine superiore */

width: auto; /* Larghezza automatica */

height: auto; /* Altezza automatica */

}

/* Stile per il box */

#box {

margin-top: 10px; /* Margine superiore */

padding: 10px; /* Padding interno */

border: 1px dashed #0000CD; /* Bordo tratteggiato blu */

width: auto; /* Larghezza automatica */

height: auto; /* Altezza automatica */

}

/* Colonna sinistra */

#colonna50-sx {

float: left; /* Posiziona a sinistra */

width: 48%; /* Larghezza del 48% */

margin-right: 2%; /* Margine a destra */

height: auto; /* Altezza automatica */

margin-bottom: 10px; /* Margine inferiore */

}

/* Colonna destra */

#colonna50-dx {

float: left; /* Posiziona a sinistra */

width: 48%; /* Larghezza del 48% */

margin-left: 1%; /* Margine a sinistra */

height: auto; /* Altezza automatica */

margin-bottom: 10px; /* Margine inferiore */

}

/* Stile per le immagini */

.immagine {

width: 100%; /* Larghezza completa */

height: auto; /* Altezza automatica */

margin-bottom: 10px; /* Margine inferiore */

}

/* Centra il contenuto */

.centra {

text-align: center; /* Allinea il testo al centro */

}

/* Giustifica il testo */

.giustifica {

text-align: justify; /* Giustifica il testo */

}

/* Evidenzia il testo */

.evidenzia {

color: #000000; /* Colore del testo nero */

background: #FFFFA0; /* Sfondo giallo chiaro */

padding: 5px; /* Padding interno */

border-radius: 4px; /* Angoli arrotondati */

}

/* Stile per i link nella pagina */

.linkpagina {

width: 100%; /* Larghezza completa */

font: 10px; /* Dimensione del font */

margin-top: -20px; /* Margine superiore negativo */

background: #777777; /* Sfondo grigio scuro */

color: #FFFFFF; /* Colore del testo bianco */

text-align: center; /* Allinea il testo al centro */

}

/* Clearfix per il contenitore */

.clear {

clear: both; /* Rimuove il galleggiamento */

/* Ad esempio, per mettere a sinistra un oggetto, si usa clear:right in modo che a destra non ci siano elementi ("italianizzato"= pulisci:destra, oppure destra pulito )

Clear both, impedisce il posizionamento di oggetti sia a destra, sia a sinistra! (pulito:entrambi oppure entrambi i lati puliti ). */

}

/* Clearfix per la riga */

.row::after {

content: ""; /* Creazione di un contenuto vuoto */

clear: both; /* Rimuove il galleggiamento */

display: table; /* Rende il div un blocco */

}

/* Media queries per il responsive design */

/* Quando lo schermo ha una dimensione >= di 1200px */

@media (min-width: 1200px) {

#container {

width: 1170px; /* Larghezza del contenitore */

margin: 0 auto; /* Centrato orizzontalmente */

}

#header, #main, #footer {

width: 1130px; /* Larghezza di header, main e footer */

float: left; /* Posiziona a sinistra */

padding: 20px; /* Padding interno */

}

#menu {

width: 100%; /* Larghezza completa */

float: right; /* Posiziona a destra */

display: block; /* Rende il menu un blocco */

}

#colonna-cn {

width: 98%; /* Larghezza della colonna centrale */

float: left; /* Posiziona a sinistra */

}

#colonna-sx {

width: 65%; /* Larghezza della colonna sinistra */

float: left; /* Posiziona a sinistra */

}

#colonna-dx {

width: 30%; /* Larghezza della colonna destra */

float: right; /* Posiziona a destra */

}

/* Quando lo schermo ha una dimensione compresa tra 980 e 1199px */

@media (min-width: 980px) and (max-width: 1199px) {

#container {

width: 960px; /* Larghezza del contenitore */

margin: 0 auto; /* Centrato orizzontalmente */

}

#header, #main, #footer, #colonna-cn {

width: 920px; /* Larghezza di header, main, footer e colonna centrale */

float: left; /* Posiziona a sinistra */

padding: 20px; /* Padding interno */

}

#menu {

width: 100%; /* Larghezza completa */

float: right; /* Posiziona a destra */

display: block; /* Rende il menu un blocco */

}

#colonna-cn {

width: 98%; /* Larghezza della colonna centrale */

float: left; /* Posiziona a sinistra */

}

#colonna-sx {

width: 65%; /* Larghezza della colonna sinistra */

float: left; /* Posiziona a sinistra */

}

#colonna-dx {

width: 30%; /* Larghezza della colonna destra */

float: right; /* Posiziona a destra */

}

/* Quando lo schermo ha una dimensione compresa tra 768 e 979px */

@media (min-width: 768px) and (max-width: 979px) {

#container {

width: 748px; /* Larghezza del contenitore */

margin: 0 auto; /* Centrato orizzontalmente */

}

#header, #main, #footer, #colonna-cn {

width: 708px; /* Larghezza di header, main, footer e colonna centrale */

float: left; /* Posiziona a sinistra */

padding: 20px; /* Padding interno */

}

#menu {

width: 100%; /* Larghezza completa */

float: right; /* Posiziona a destra */

display: block; /* Rende il menu un blocco */

}

#colonna-cn {

width: 98%; /* Larghezza della colonna centrale */

float: left; /* Posiziona a sinistra */

}

#colonna-sx {

width: 65%; /* Larghezza della colonna sinistra */

float: left; /* Posiziona a sinistra */

}

#colonna-dx {

width: 30%; /* Larghezza della colonna destra */

float: right; /* Posiziona a destra */

}

/* Quando lo schermo è minore di 768px */

@media (max-width: 767px) {

body {

padding: 10px; /* Padding interno per il corpo */

background: #FFFFFF; /* Sfondo bianco */

}

#container {

width: 100%; /* Larghezza completa del contenitore */

margin: 0 auto; /* Centrato orizzontalmente */

}

#header, #main, #footer {

width: 100%; /* Larghezza completa */

padding: 10px 0; /* Padding verticale */

}

#menu {

width: 100%; /* Larghezza completa */

float: right; /* Posiziona a destra */

}

#colonna-cn {

width: 100%; /* Larghezza della colonna centrale */

float: left; /* Posiziona a sinistra */

padding: 10px 0; /* Padding verticale */

}

#colonna-sx {

width: 100%; /* Larghezza della colonna sinistra */

float: left; /* Posiziona a sinistra */

padding: 10px 0; /* Padding verticale */

}

#colonna-dx {

width: 100%; /* Larghezza della colonna destra */

float: right; /* Posiziona a destra */

padding: 10px 0; /* Padding verticale */

}

#titolo a {

font-size: 30px; /* Dimensione del font per il titolo */

margin-left: 10px; /* Margine sinistro */

}

#footer {

width: 100%; /* Larghezza completa del footer */

float: left; /* Posiziona a sinistra */

padding: 10px 0; /* Padding verticale */

}

#footer p {

margin-left: 10px; /* Margine sinistro per il paragrafo nel footer */

}

/* Nasconde il menu classico per schermi piccoli */

#menu {

display: none; /* Nasconde il menu */

}

#menu ul li {

float: none; /* Rimuove il galleggiamento */

}

.smartmenu {

display: block; /* Mostra il menu smart */

float: right; /* Posiziona a destra */

padding: 5px; /* Padding interno */

cursor: pointer; /* Cambia il cursore */

margin: -15px 20px 0 0; /* Margini negativi */

color: #FFFFFF; /* Colore del testo bianco */

background: #006FFFF; /* Sfondo blu */

}

.icon-smartmenu {

display: block; /* Mostra l'icona del menu smart */

width: 18px; /* Larghezza dell'icona */

height: 2px; /* Altezza dell'icona */

margin: 5px; /* Margini */

background-color: #FFFFFF; /* Sfondo bianco */

}

.mostra-smartmenu {

display: block !important; /* Mostra sempre il menu smart */

}

Note Generali

1. Struttura: Il CSS è organizzato in sezioni chiare, rendendo più facile per gli studenti comprendere come è strutturato il layout di una pagina.

2. Commenti: Ogni sezione e regola è preceduta da commenti che spiegano il suo scopo, utile per chi ha difficoltà a seguire il codice.

3. Responsive Design: L'uso delle media queries è fondamentale per il design responsive, garantendo che il sito si adatti a diverse dimensioni di schermo.

4. Stili Coerenti: Viene mantenuta una coerenza nel modo in cui vengono dichiarati i colori e le dimensioni, facilitando la lettura e la modifica del codice.

link per scaricare l'intera procedura

Cerca nel blog

Il BLOG di Paolo Latella

3E e 3I SIA: Spiegazione del sito responsive (Html5, Css3 e Javascript) per studenti DSA e studenti con difficoltà cognitive

Commenti

Posta un commento

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi in Excel e fogli di Google

Tracce degli esercizi di programmazione per il recupero per le classi terze