Caso di studio W3.CSS
Costruire un sito Web reattivo da zero
In questo capitolo creeremo da zero un sito web responsive W3.CSS.
Innanzitutto, inizia con una semplice pagina HTML, con una vista iniziale e un collegamento a W3.CSS.
Esempio
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Metti gli elementi nei contenitori
Per aggiungere margini e spazi interni comuni, inserisci gli elementi HTML all'interno dei contenitori (<div class="w3-container">)
Separa l'intestazione dal resto del contenuto, utilizzando due elementi <div> separati:
Esempio
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Classi di colore
Le classi di colore definiscono il colore degli elementi.
Questo esempio aggiunge un colore al primo elemento <div>:
Esempio
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Classi di taglia
Classi di dimensione definisce la dimensione del testo per gli elementi.
Questo esempio aggiunge una dimensione a entrambi gli elementi di intestazione:
Esempio
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Usa elementi semantici
Se ti piace seguire i consigli semantici di HTML5. per favore fallo!
Non importa per W3.CSS se usi <div> o <header>.
Esempio
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Layout reattivo multicolonna
Con W3.CSS è facile creare un layout reattivo multicolonna.
Le colonne si riorganizzeranno automaticamente se visualizzate su schermi di dimensioni diverse.
Alcune regole della griglia:
- Inizia con una classe di riga <div class="w3-row-padding">
- Usa classi predefinite come "w3-third" per creare rapidamente colonne della griglia
- Posiziona il contenuto del testo all'interno delle colonne della griglia
Questo esempio mostra come creare tre colonne di uguale larghezza:
Esempio
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Questo esempio mostra come creare quattro colonne di uguale larghezza:
Esempio
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Colonne Con Diverse Larghezze
Questo esempio crea un layout a tre colonne in cui la colonna al centro è più larga della prima e dell'ultima colonna:
Esempio
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Barre di navigazione
Una barra di navigazione è un'intestazione di navigazione posizionata nella parte superiore della pagina.
Esempio
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Navigazione della pagina
Con la navigazione laterale, hai diverse opzioni:
- Visualizza sempre il riquadro di navigazione a sinistra del contenuto della pagina.
- Utilizza una navigazione laterale reattiva pieghevole e "completamente automatica".
- Apri il riquadro di navigazione sulla parte sinistra del contenuto della pagina.
- Apri il riquadro di navigazione su tutto il contenuto della pagina.
- Fai scorrere il contenuto della pagina verso destra quando apri il riquadro di navigazione.
- Visualizza il riquadro di navigazione sul lato destro anziché sul lato sinistro
Questo esempio apre il riquadro di navigazione sulla parte sinistra del contenuto della pagina:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript utilizzato per aprire e nascondere il menu:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}