Ultima modifica da un moderatore:
Nella scorsa lezione abbiamo visto la prima implementazione di un foglio CSS e dei comandi basilari per la nostra pagina.
In questa guida andremo a vedere come creare una sorta di "menu" con i DIV
CHE COSA SONO I DIV?
Il DIV è uno dei più importanti tag dell'HTML, grazie ad esso è possibile impostare una pagina web a nostro piacere, ma se dovessimo definire un div, come potremmo farlo?
In parole povere il DIV è un contenitore, potremmo suddividere la nostra pagine a zone, ovvero racchiudere il menu in un determinato DIV, l'header in un'altro e cosi via..
Detto cio, ecco cosa andremo a creare in questa guida:
IL CODICE HTML
Iniziamo da zero, apriamo la nostra pagina HTML, impostiamo tutti i tag principali (<html> <head> <title> <body>).
Fatto ciò, nell'head mettiamo il link al nostro file .css che per ora non esiste, ma che poi andremo a creare, quindi mettiamo:
Fatto ciò, per creare un menù come quello visto in precedenza dobbiamo andare a creare un DIV.
Il tag DIV si apre e si chiude come la maggior parte dei tag ( <div> </div> )
Quindi andiamo ad aprire e chiudere il nostro div.
Dopo di che dobbiamo andare a dare delle caratteristiche al nostro div, perchè ora come non significa niente, quindi creiamo il nostro file css e dentro ad esso andiamo a settare le seguenti caratteristiche:
Iniziamo dal codice all'interno dell'id, dopo spiegherò cos'è e cosa serve.
Allora, inziamo ad analizzare come nostro solito tutti i parametri:
width : Grazie ad esso possiamo definire la larghezza del nostro DIV.
margin-top : Definisce il margine (in pixel) dall'alto.
margin-bottom : Definisce il margine (in pixel) dal basso.
margin-left : Definisce il margine (in pixel) dal sinistra.
margin-right : Definisce il margine (in pixel) da destra.
text-align : Allinea al centro il nostro testo.
Ok, detto questo siamo in grado di capire che, il nostro div avrà una larghezza di 800px non dovrà essere distanziato ne dall'alto ne dal basso, da destra e sinistra abbiamo impostato un auto in modo che riesca a regolarsi da solo in base a quello che inseriamo.
Ora abbiamo compreso il contenuto di quello che, fino ad adesso, non abbiamo idea di cosa sia.
In CSS i parametri che vengono preceduti dal cancelletto ( # ) sono chiamati ID.
Ora la domanda sarà, cosa sono gli ID? Gli ID non sono nient'altro che dei "contenitori" di parametri, che noi possiamo andare a richiamare nel nostro file HTML.
A questo punto avremo un file HTML con un DIV aperto e chiuso senza niente dentro e un ID nel nostro file .css, come fare ad implementarlo? Semplicissimo:
Andiamo nel nostro DIV nel file HTML e scriviamo il seguente codice:
NB : il nome container è un nome indicativo, solo per far comprendere meglio che è un contenitore di tutto ciò che andremo a mettere dentro, il nome può essere cambiato a piacimento, modificando il nome dell'ID nel .css
Ora se andiamo a vedere la nostra pagine risulterà comunque vuota, poichè abbiamo solo impostato il contenitore generale che conterrà gli altri elementi.
IL FOGLIO DI STILE
Dopo avervi fatto capire come funzionano gli ID andrò a mostrare di seguito tutti gli altri ID necessari per realizzare la pagina postata ad inizio guida.
Impostando questo ID e ovviamente creando un'altro DIV all'interno del DIV generale nell'HTML, continueremo a non visualizzare nulla. Per fare in modo che venga visualizzata una parola o una frase andiamo a scrivere all'interno del DIV con la classe container:
Facendo cosi in modo da far apparire la parola TITOLO all'interno della nostra intestazione.
Per impostare il menu a sinistra nella pagina HTML creiamo nel file .css un ID menu e dentro ad esso scriviamo:
NB : Noi abbiamo impostato un container (ricordo che è quello che racchiude tutto, fino ad adesso la nostra intestazione e ora il menu) ad una larghezza di 800px. Dobbiamo rispettare quella larghezza, ovvero, il menu creato da me ha una larghezza di 200px, facendo cosi avremo ancora 600px disponibili in orizzontale per altri menu o contenuti. L'altezza invece va a piacimento, in quanto noi abbiamo definito solo la larghezza e non l'altezza.
Quindi ora andiamo ad aggiungerlo nel nostro file HTML
Ora andiamo ad aggiungere il contenuto (rivedi immagine ad inizio guida)
Ora abbiamo "disponibili" solo altri 200px per il prossimo contenuto.
Andiamo ad aggiungerlo nella nostra pagina HTML
Andiamo ad impostare anche l'ultimo "pezzo" del nostro container, che sarà il menu2:
Stessa procedura, andiamo ad impostarlo nel file HTML
e, alla fine, aggiungiamo anche un'altra intestazione, però non andreamo a creare un'altro ID, in quanto abbiamo già creato un intestazione, quindi andremo solo a richiamarla mettendo lo stesso nome nel file HTML
Ora, se andremo ad visualizzare la pagina avremo lo stesso risultato visto ad inizio guida.
Ovviamente tutto può essere modificato a piacemento, come il colore, dimensione e il flottaggio.
La terza "lezione" finisce qui, abbiamo visto come impostare i DIV e richiamarli tramite ID da un file .css esterno!
Se la guida vi è stata utile vi invito a lasciare un commento e un mi piace!
Guida creata da Mack141 su inforge.net per inforge.net, è vietata la distribuzione di questa guida su altri siti/forum senza il premesso dell'autore.
In questa guida andremo a vedere come creare una sorta di "menu" con i DIV
CHE COSA SONO I DIV?
Il DIV è uno dei più importanti tag dell'HTML, grazie ad esso è possibile impostare una pagina web a nostro piacere, ma se dovessimo definire un div, come potremmo farlo?
In parole povere il DIV è un contenitore, potremmo suddividere la nostra pagine a zone, ovvero racchiudere il menu in un determinato DIV, l'header in un'altro e cosi via..
Detto cio, ecco cosa andremo a creare in questa guida:
IL CODICE HTML
Iniziamo da zero, apriamo la nostra pagina HTML, impostiamo tutti i tag principali (<html> <head> <title> <body>).
Fatto ciò, nell'head mettiamo il link al nostro file .css che per ora non esiste, ma che poi andremo a creare, quindi mettiamo:
Codice:
<link rel="stylesheet" type="text/css" href="file.css">Fatto ciò, per creare un menù come quello visto in precedenza dobbiamo andare a creare un DIV.
Il tag DIV si apre e si chiude come la maggior parte dei tag ( <div> </div> )
Quindi andiamo ad aprire e chiudere il nostro div.
Dopo di che dobbiamo andare a dare delle caratteristiche al nostro div, perchè ora come non significa niente, quindi creiamo il nostro file css e dentro ad esso andiamo a settare le seguenti caratteristiche:
Codice:
#container {width:800px;
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
text-align:left;
}Iniziamo dal codice all'interno dell'id, dopo spiegherò cos'è e cosa serve.
Allora, inziamo ad analizzare come nostro solito tutti i parametri:
width : Grazie ad esso possiamo definire la larghezza del nostro DIV.
margin-top : Definisce il margine (in pixel) dall'alto.
margin-bottom : Definisce il margine (in pixel) dal basso.
margin-left : Definisce il margine (in pixel) dal sinistra.
margin-right : Definisce il margine (in pixel) da destra.
text-align : Allinea al centro il nostro testo.
Ok, detto questo siamo in grado di capire che, il nostro div avrà una larghezza di 800px non dovrà essere distanziato ne dall'alto ne dal basso, da destra e sinistra abbiamo impostato un auto in modo che riesca a regolarsi da solo in base a quello che inseriamo.
Ora abbiamo compreso il contenuto di quello che, fino ad adesso, non abbiamo idea di cosa sia.
In CSS i parametri che vengono preceduti dal cancelletto ( # ) sono chiamati ID.
Ora la domanda sarà, cosa sono gli ID? Gli ID non sono nient'altro che dei "contenitori" di parametri, che noi possiamo andare a richiamare nel nostro file HTML.
A questo punto avremo un file HTML con un DIV aperto e chiuso senza niente dentro e un ID nel nostro file .css, come fare ad implementarlo? Semplicissimo:
Andiamo nel nostro DIV nel file HTML e scriviamo il seguente codice:
Codice:
<div id="container"> <div>NB : il nome container è un nome indicativo, solo per far comprendere meglio che è un contenitore di tutto ciò che andremo a mettere dentro, il nome può essere cambiato a piacimento, modificando il nome dell'ID nel .css
Ora se andiamo a vedere la nostra pagine risulterà comunque vuota, poichè abbiamo solo impostato il contenitore generale che conterrà gli altri elementi.
IL FOGLIO DI STILE
Dopo avervi fatto capire come funzionano gli ID andrò a mostrare di seguito tutti gli altri ID necessari per realizzare la pagina postata ad inizio guida.
Codice:
#intestazione{width:800px;
background-color:#ff6666;
text-align:center;
}Impostando questo ID e ovviamente creando un'altro DIV all'interno del DIV generale nell'HTML, continueremo a non visualizzare nulla. Per fare in modo che venga visualizzata una parola o una frase andiamo a scrivere all'interno del DIV con la classe container:
Codice:
<div id="container">
<div id="intestazione">
TITOLO
</div>
</div>Facendo cosi in modo da far apparire la parola TITOLO all'interno della nostra intestazione.
Per impostare il menu a sinistra nella pagina HTML creiamo nel file .css un ID menu e dentro ad esso scriviamo:
Codice:
#menu{float:left;
width:200px;
height:400px;
background-color:#99ffff;
}NB : Noi abbiamo impostato un container (ricordo che è quello che racchiude tutto, fino ad adesso la nostra intestazione e ora il menu) ad una larghezza di 800px. Dobbiamo rispettare quella larghezza, ovvero, il menu creato da me ha una larghezza di 200px, facendo cosi avremo ancora 600px disponibili in orizzontale per altri menu o contenuti. L'altezza invece va a piacimento, in quanto noi abbiamo definito solo la larghezza e non l'altezza.
Quindi ora andiamo ad aggiungerlo nel nostro file HTML
Codice:
<div id="container">
<div id="intestazione">
TITOLO
</div>
<div id="menu">
COMMENTO DI PROVA
<ul>
<li>PRIMO COMMENTO</li>
<li>SECONDO COMMENTO</li>
<li>TERZO COMMENTO</li>
</ul>
</div>
</div>Io all'interno ho messo una piccola lista, voi potete fare come più vi piace
Ora andiamo ad aggiungere il contenuto (rivedi immagine ad inizio guida)
Codice:
#contenuto{float:right;
width:400px;
height:400px;
background-color:#ffff99;
}Ora abbiamo "disponibili" solo altri 200px per il prossimo contenuto.
Andiamo ad aggiungerlo nella nostra pagina HTML
Codice:
<div id="container">
<div id="intestazione">
TITOLO
</div>
<div id="menu">
COMMENTO DI PROVA
<ul>
<li>PRIMO COMMENTO</li>
<li>SECONDO COMMENTO</li>
<li>TERZO COMMENTO</li>
</ul>
</div>
<div id="contenuto">
SECONDO COMMENTO
</div>
</div>Andiamo ad impostare anche l'ultimo "pezzo" del nostro container, che sarà il menu2:
Codice:
#menu2{float:right;
width:200px;
height:400px;
background-color:#9999ff;
}Stessa procedura, andiamo ad impostarlo nel file HTML
Codice:
<div id="container">
<div id="intestazione">
TITOLO
</div>
<div id="menu">
COMMENTO DI PROVA
<ul>
<li>PRIMO COMMENTO</li>
<li>SECONDO COMMENTO</li>
<li>TERZO COMMENTO</li>
</ul>
</div>
<div id="contenuto">
SECONDO COMMENTO
</div>
<div id="menu2">
Secondo menu
</div>
</div>e, alla fine, aggiungiamo anche un'altra intestazione, però non andreamo a creare un'altro ID, in quanto abbiamo già creato un intestazione, quindi andremo solo a richiamarla mettendo lo stesso nome nel file HTML
Codice:
<div id="container">
<div id="intestazione">
TITOLO
</div>
<div id="menu">
COMMENTO DI PROVA
<ul>
<li>PRIMO COMMENTO</li>
<li>SECONDO COMMENTO</li>
<li>TERZO COMMENTO</li>
</ul>
</div>
<div id="contenuto">
SECONDO COMMENTO
</div>
<div id="menu2">
Secondo menu
</div>
<div id="intestazione">
Created by Mackintosh141
</div>
</div>Ora, se andremo ad visualizzare la pagina avremo lo stesso risultato visto ad inizio guida.
Ovviamente tutto può essere modificato a piacemento, come il colore, dimensione e il flottaggio.
La terza "lezione" finisce qui, abbiamo visto come impostare i DIV e richiamarli tramite ID da un file .css esterno!
Se la guida vi è stata utile vi invito a lasciare un commento e un mi piace!
Guida creata da Mack141 su inforge.net per inforge.net, è vietata la distribuzione di questa guida su altri siti/forum senza il premesso dell'autore.
hai pensato magari ad approfondire il javascript? :Q