Link e munu di navigazione
I link permettono di creare una struttura ipertestuale, fornendo un modo per spostarsi all’interno di un documento e tra documenti diversi.
Sintassi per la creazione di un link ipertestuale<a href=“URL”>Nome del link</a>L’attributo title non è obbligatorio ma è utile se si vuole dare una breve descrizione sulla destinazione del
collegamento.
L’attributo target con il valore _blank non è obbligatorio, consente di aprire il link in una
nuova finestra
<a href=“https://www.spazioprever.it/” target="_blank" title="lezioni in rete">Lezioni in rete</a>Pro e contro dell'attributo target="_blank":
- Pro:
-
- il sito di partenza rimane aperto;
- siti diversi sono ben separati.
- Contro:
-
- poco accessibile;
- poco usabile:
- interrompe il flusso della navigazione;
- disabilita la funzione "indietro" (usata comunemente);
- non sempre gli utenti vogliono che venga aperta una nuova finestra.
Aprire i link nella stessa pagina; predefinito:
- Pro:
-
- è accessibile ed usabile (bisogna però indicare che il link è un link esterno);
- non impedisce di aprire la pagina di destinazione in una nuova finestra, se gliutenti lo richiedono esplicitamente.
- Contro:
-
- gli utenti escono dal sito di partenza.
Tipi di link
Esistono tre tipologie di link a seconda della funzione che essi svolgono:
- Link a un sito esterno
- Link a un pagina dello stesso sito
- Link a una parte specifica della pagina web per la creazione di indici o riferimenti (àncore)
<a href="https://www.spazioprever.it/">Lezioni in rete</a>
<a href="salabar/bar/bar.html">Il bar</a>
<a href="#bicchieri">bicchieri</a>
Come gestire i link
I link esterni portano gli utenti all'esterno del sito che stavano visitando. Per non perdersi, è importante informare gli utenti
:- Attraverso l’attributo "title". O applicando uno stile con CSS quando il mouse vi passa sopra:
- Attraverso l’uso di immagini standard
- I link esterni si possono aprire nella stessa finestra in cui l’utente stava navigando o in una nuova finesta
a.esterno:link, a.esterno:visited{
background-color:#FFFF00;
}
a.esterno{
cursor:url(../ima/jet.gif), pointer;
}Con la prima regola attribuiamo all'elemento a una classe .esterno e la applichiamo alle pseudo-classi :link e :visited quindi si
definisce lo stile di background; in questo modo già nel documento i siti esterni si differenziano dagli altri link.
Con la seconda regola si vuole cambiare la forma del puntatore del mouse. Questa regola non è supportata da I.E.
Creazione di un indice interno alla pagina
Attraverso le àncore è possibile creare collegamenti che puntano ai contenuti della pagina, è il caso degli indici.
Per creare indici interni alla pagina i passi da svolgere sono i seguenti:
- creazione dell’ancora a cui puntare;
- creazione del collegamento all’ancora appena creata;
- riferimento attraverso il cancelletto.
Es:
<a href="#nome_ancora">Collegamento all’àncora</a>
<h2 id="nome_ancora">Ancora</h2> È buona pratica creare nomi àncora significativi, questo aiuta a ricordare i nomi assegnati.
Il nome #ancora può essere preceduto anche dal nome della pagina:
<p>a href="css.html#discendenti">Selettori discendenti</a></p>
questa ancora punta a
<h3 id="discendenti">selettori discendenti</h3>Menu di navigazione
Seppur sia possibile fare menu di navigazione struttruandoli nell'elemento p, gli elementi più adatti sono le liste non ordinate ul e ordinate ol.
La struttura di un menu di navigazione globale, come quello di questo ipertesto, ha una struttura definta in questo modo:
<ul class="nav"> <li><a href="index.php">home</a</li> <li><ahref="struttura_html.php">html</a</li> <li><a href="css.php">CSS</a</li> <li><a href="proprieta_css.php">proprietà CSS</a</li> <li><span class="attuale">elenchi tabelle link</span></li> </ul>
Il menu è costruito intorno all'elemento ul cui è stata data una classe .nav utile alla stillizzazione del menu e
delle voci che lo compongono.
All'interno della lista ul troviamo i link alle varie pagine marcati nell'elemento li cui segue l'elemento ipertestuale
a con l'attributo href e l'url relativo della pagina cui punta.
Un elemento li ha un elemento span con una classe .attuale utilizzata per dare uno stile all'elemento che
definisce la pagina corrente.
I menu possono essere verticali o orizzontali, la marcatura del codice è sempre la stessa, ma cambia la visualizzazione degli elementi utilizzando la proprietà CSS display.
Nei menu di navigazione verticali è l'elemento a cui si applica la proprietà display.
Nella marcatura html dell'esempio per creare un menu verticale, le regole da applicare sono le seguenti:
ul.nav {
width:250px; /*di solito corrisponde alla width
dell'elemento contenitore*/
margin:0;
padding:0;
}
ul.nav li{
list-style:none; /*elimina i punti elenco della lista*/
}
ul.nav a{
display:block; /*trasforma l'elemento inline a in elemento
di blocco così da potergli dare gli stili
di width e height e l'area su cui fare click
si estende su tutta l'area del link */
text-decoration:none; /*elimina la sottolineatura dei link*/
background:#333; /*dà il colore di sfondo del link*/
color:#FFF; /*dà il colore di primo piano*/
margin:.1em 0; /*dà un margine superiore e inferiore di .1em
e un margine destro e sinistro di 0*/
padding:.2em .5em; /*spazio tra l'area del contenuto e il
bordo dell'elemento */
}
ul.nav a:hover, /* quando il mouse scorre sull'elemento*/
a:focus, /* quando il mouse si ferma sull'elemento*/
a:active{ /* quando il mouse fa click sull'elemento*-/
background:#FFF; /*colore dello sfondo*/
color:#333; /* colore di primo piano*/
border:.1em solid #000; /* bordo di .1em sui quattro
lati */
}
Menu orizzontali
Menu orizzontali
Per la costruzione di menu orizzontali si possono utilizzare due tecniche. La prima consiste nel rendere gli elementi li
come elementi inline attraverso la proprietà display;
La seconda è utilizzare la proprietà float per disporre tutto a destra o tutto a sinistra
gli elementi li ed a.
Nel primo caso si deve ricordare che i margini inferiori e superiori degli elementi inline non hanno effetto mentre i margini laterali si. La proprietà height non si applica agli elementi inline. L'altezza degli elementi inline è data dalla dal font-size, dal padding-top e padding-bottom, mentre l'altezza della linea è applicata da line-height.
Come detto per disporre tutti gli elementi li della lista su una linea orizzontale si utilizza la proprietà display:inline; L'elemento a essendo già un elemento inline, non ha bisogno di alcuna dichiarazione.
Il codice html resta invariato, Mentre tra le regole del css del menu si cambia la visualizzazione in questo modo: Nella marcatura html dell'esempio per creare un menu orizzontale, con elementi li inline le regole da applicare sono le seguenti evidenziate dallo sfondo giallo:
ul.nav {
margin:0;
padding:1em 0;
}
ul.nav li{
display:inline; /*visualizza gli elementi li da blocco
ad inline*/
list-style:none;
margin:0;
padding:0 1em;
border-left:1 px solid #999;/* crea una sorta di barra verticale
per separare le voci*/
}
ul.nav a{
text-decoration:none;
white-space:nowrap; /*impedisce che i link di più parole vadano
a capo*/
}
ul.nav a:hover, /* quando il mouse scorre sull'elemento
effetto rollover*/
a:focus, /* quando il mouse si ferma sull'elemento*/
a:active{ /* quando il mouse fa click sull'elemento*/
background:#FFF; /*colore dello sfondo*/
color:#333; /* colore di primo piano*/
border:.1em solid #000; /* bordo di .1em sui quattro lati */
}
La formattazione dei "pulsanti" può essere creata attraverso gli elementi a o li a seconda dei casi e delle necessità
Una terza tecnica, utile soprattuto per la costruzione di menu orizzontali responsive, consiste nel definire l'elemento li con propietà display:inline-block.
Questa propietà è un ibrido tra la visualizzazione inline e block. Gli elementi cui è applicata si dispongono inline, quindi si affiancano e possono essere definiti con le proprietà degli elementi di blocco. È necessario definire per la larghezza una width esplicita o auto, altrimenti l'elemento si dimensiona alla misura minima per il contenuto
ul.nav li{
display:inline-block;
width:70px;
margin:0;
padding:0;
}
Menu con blocchi flottanti
L'altra tecnica per ottenere menu orizzontali, è rendere flottanti a sinistra o a destra gli elementi li e a
utilizzando la proprietà float che consente di disporre gli elementi affiancati uno all'atro e distanziati dai margini.
Quando un elemento è reso flottante, diventa implicitamente un elemento di blocco al quale si possono applicare tutte le proprietà del box-model; gli elementi li quando a livello di blocco,
sono utili per la creazione di menu a due livelli.
Con gli elementi flottanti non è possibile centrare in orizzontale le voci del menu con la proprietà
text-align come avviene per gli elementi inline; e non è possibile stabilire l'altezza del loro elemento contenitore, si può però stabilire l'altezza dei singoli elementi.
Nella marcatura html dell'esempio per creare un menu orizzontale, con elementi li inline le regole da applicare sono le seguenti evidenziate dallo sfondo giallo; questo è il css per il menu di questa guida.
#menu{
background:#C00000;
background-image:-webkit-linear-gradient(bottom,#FF4D00,#C00000);
background-image:-moz-linear-gradient(bottom,#FF4D00,#C00000);
background-image:-ms-linear-gradient(bottom,#FF4D00,#C00000);
background-image:-o-linear-gradient(bottom,#FF4D00,#C00000);
background-image:linear-gradient(bottom,#FF4D00,#C00000);
}
ul.nav{
height:2.1em;
margin:0;
padding:0;
list-style:none;
font:bold 1em/2em "trebuchet ms", arial, sans-serif;
}
ul.nav li{
float:left;
margin:0;
background:#FF9933;
border-radius:.2em .8em 0 0;
border-right:3px solid #960;
box-shadow:inset .1em .1em .2em #800;
}
ul.nav:first-child{
margin-left:.1em;
}
ul.nav a{
float:left;
padding:0 .5em;
text-decoration:none;
color:#FFF;
letter-spacing:.1em;
text-shadow:-2px -2px 0 #600;
border-bottom:2px solid #800;
}
ul.nav li a:hover{
text-shadow:.1em .1em 0 #FFF;
color:#CBC;
}
ul.nav .attuale{
text-decoration:none;
color:#FFF;
font:1em/2.1em "trebuchet ms", arial, sans-serif;
text-shadow:.1em .1em 0 #333;
display:block;
padding:0 .5em;
border-bottom:none;
}
Nei menu è bene evidenziare in qualche modo la voce di menu della pagina che si sta visualizzando, formattandola in modo diverso dalle altre; cambiando il colore del testo o dello sfondo, togliendo o aggiungendo un bordo, o ancora variando la dimensione del bordo.
È preferibile non cambiare la dimensione del font, dei margini e del padding perché andrebbe ad influenzare fortemente il layout delle voci che la precedono e seguono
Per differenziare la voce della pagina visualizzata si crea una classe, la si formatta e la si applica all'elemento li o ad un elemento span contenuto nell'elemento li:
.attuale{
background:#000;
color:#FFF;
}
Il codice html sarà marcato come nell'esempio riportato dove la classe .attuale è assegnata ad un elemento span annidato nel li.
In alternativa la voce corrente potrebbe essere marcata nel codice html in questo modo:
<li class="attuale">pagina corrente</li>in alternativa:
<li><span class="attuale">pagina corrente</span></li>
Tutorial X/HTML e CSS - Guida elaborata da: Bianchi Roberto - Spazioprever
