HTML/Frames
A cosa servono i frame?
[modifica | modifica sorgente]I frames che si possono rendere in italiano con il termine riquadri sono dei porzioni di pagina indipendenti l'una dell'altra. Ad esempio si può dividere la pagina in 3 frame: uno a sinistra, per il menù; una a destra, per i links; e infine la parte centrale per il contenuto della pagina. L'obiettivo dei frame è quello di evitare di dover riscrivere interamente ogni pagina in tutte le sue componenti ma ad esempio, suddividendo la pagina come suggerito prima, per lasciare intatti i frame menù e links, si potrà ricaricare solamente il contenuto del frame centrale, permettendo così di gestire una mole di codice nettamente minore. L'uso dei frame per quanto possa sembrare vantaggioso, è sconsigliabile per i seguenti motivi:
- Per mantenere una parte di pagina invariata si può usare un linguaggio lato server come PHP, e con veramente poco codice avrete lo stesso risultato dei frame.
- Inoltre le diverse pagine che compongono il frame sono analizzate singolarmente dai motori di ricerca e quindi c'è il rischio che come risultato un motore di ricerca dia ad esempio solo un menu che dovrebbe fare parte del frameset
- Per riuscire a disegnare dei frame graficamente accattivanti è necessario saper utilizzare i fogli di stile.
Creare una pagina
[modifica | modifica sorgente]Per poter creare una pagina con i frame utilizzeremo il tag <frameset> che inizializza la struttura di una pagina con i frame. All' interno del tag <frameset> useremo il tag <frame> i cui attributi principali sono id, per dare un nome al frame; e src, per indicare la pagina che verrà caricata all'interno del frame stesso.
Gli attributi del tag <frameset> ci permettono invece di dare delle dimensioni ai frame essi sono due:
- cols: specifica la dimensione delle colonne di ogni frame. Se viene omesso la struttura della pagina sarà a righe.
- rows: specifica la dimensione delle righe di ogni frame. Se viene omesso la struttura della pagina sarà a colonne.
Il codice dei seguenti esempio e in generale la struttura dei frame non necessita di trovarsi all'interno del tag <body>. Lo si deve inserire dopo il tag di chiusura </head>
Ecco un esempio con la struttura a colonne:
<frameset cols="20%,60%,20%"> <frame src="pagina.htm"> <frame src="pagina2.htm"> <frame src="pagina3.htm"> </frameset>
Ecco un esempio con la struttura a righe:
<frameset rows="20%,60%,20%"> <frame src="pagina.htm"> <frame src="pagina2.htm"> <frame src="pagina3.htm"> </frameset>
I valori di questi due attributi possono essere espressi in percentuale (rispetto alla pagina) o in pixel. C'è un elemento complementare * (asterisco) che si può usare ad esempio per riempire tutta la porzione di pagina non compresa dagli altri frame.
Ecco un esempio:
<frameset cols="30%,50%,*"> <frame src="pagina.htm"> <frame src="pagina2.htm"> <frame src="pagina3.htm"> </frameset>
Il terzo frame sarà equivalente al 20% della pagina, ossia la porzione restante di pagina non occupata dagli altri due frame.
Fuori dai frame
[modifica | modifica sorgente]Per poter scrivere al di fuori della struttura dei frame è necessario servirsi del tag <noframes> seguito da tutta la formattazione html necessaria ai vostri scopi </noframes>
Ecco un esempio di uso del tag <noframes>:
<frameset cols="30%,50%,*">
<frame src="pagina.htm">
<frame src="pagina2.htm">
<noframes>
Se non ti piacciono i frame usa questo menù:
<a href="pagina.htm">Pagina 1</a>
<a href="pagina2.htm">Pagina 2</a>
<a href="pagina3.htm">Pagina 3</a>
</noframes>
<frame src="pagina3.htm">
</frameset>
Attributi del frameset
[modifica | modifica sorgente]Ecco una tabella riassuntiva degli attributi del tag <frameset>
| Attributo | Significato |
|---|---|
framespacing
|
Specifica lo spazio tra un frame e un altro (solo IE) |
bordercolor
|
Specifica il colore dei bordi del frameset |
border
|
Specifica lo spazio tra un frame e un altro, espresso in pixel |
Attributi dei frame
[modifica | modifica sorgente]Ecco una tabella riassuntiva degli attributi del tag <frame>
| Attributo | Significato |
|---|---|
scrolling
|
Specifica se si desiderano i bordi, yes (opzione di default), o meno no |
noresize
|
Impedisce il ridimensionamento di un frame (no necessita di valori) |
marginheight
|
Specifica la distanza in verticale tra il bordo del frame e il suo contenuto |
marginwidth
|
Specifica la distanza in orizzontale tra il bordo del frame e il suo contenuto |
frameborder
|
Specifica se i bordi sono visibili o meno, rispettivamente i valori 1 e 0 |
Caricare una pagina
[modifica | modifica sorgente]Attraverso l'attributo target del tag <a> è possibile caricare i contenuti di un link in un frame specifico o in nuova finestra. Questa è la sintassi: <a href="url alla pagina da inserire nel frame" target="nome del frame">Testo del link</a>
Ecco un esempio:
<body> <a href="pagina.htm" target="centro">Il link verrà caricato all'interno del frame 'centro'</a> </body>
L'attributo target può avere, oltre al nome del frame dichiarato negli attributi name o id, i seguenti valori:
- _blank: carica il contenuto in una nuova finestra.
- _top: carica il contenuto sovrastando la struttura del frameset.
- _self: carica il contenuto nello stesso frame del link.
- _parent: carica il contenuto nel frameset genitore.
Ecco un esempio:
<body> <a href="pagina.htm" target="_blank">Il link verrà caricato in una nuova finestra</a> </body>
È possibile anche dare un valore di default all'attributo target mediante il tag <base>.
Ecco un esempio:
<head> <base target=”nomeframe”> </head>
Questo farà si che i link si aprano all'interno del frame che si è indicato, a meno che nell'attributo target di un link non sia specificato un altro valore.
Iframe
[modifica | modifica sorgente]Iframe sta per Inline frame e permette di inserire un frame anche in una pagina non strutturata in frame. È sufficiente servirsi del tag <iframe> i cui attributi sono width, che ne specifica la larghezza; height, che ne specifica l'altezza; e src che specifica il documento da caricare al suo interno (anche un url esterno se necessario). Per la sua comodità questo tag è stato subito incluso nelle specifiche dal W3C.
Ecco un esempio di iframe:
<body> <iframe width="50%" height="30%" src="http://it.wikipedia.org"> Se il vostro browser non supporta i frame verrà mostrato questo testo </iframe> </body>
Il tag <iframe> supporta inoltre tutti gli attributi del tag <frame>.
Con un adeguato script JavaScript, inoltre, è possibile creare un testo scorrevole in verticale.