I frame non sono altro che dei "riquadri" in cui vengono visualizzati determinate porzioni della pagina ( ad esempio un semplice menù laterale ). Vi è quindi la possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti. Per quel che riguarda i webmaster, i frame hanno la caratteristica di utilizzare una struttura che consente di non ripetere le parti comuni nelle varie pagine di un sito, dal momento che i contenuti dei vari "riquadri" sono rappresentati da diverse pagine web. Quindi i principali vantaggi derivanti dal loro uso sono:
|
Tuttavia gli svantaggi derivanti da un uso scorretto di un layout a frame sono superiori ai vantaggi che possono derivare dal loro utilizzo. I motori di ricerca infatti navigano di link in link attraverso il web per catturare contenuti da indicizzare. È frequente allora che una struttura a frame sia inserita all’interno di un motore di ricerca in modo errato: a volte viene catturato solo un menu, altre volte compare soltanto la parte interna con il contenuto del frame e dunque viene perso ogni menu di navigazione. Per evitare problematiche di questo genere, è meglio evitare di utilizzare una struttura a frame; o nel caso in cui la si desideri utilizzare è bene prevedere sin da subito dei metodi che ricostruiscano il frameset, nel caso in cui sia catturata soltanto una pagina interna. Inoltre è sempre preferibile caricare una pagina sola che più di una contemporaneamente !!!
| <FRAMESET ROWS= "," COLS= "," BORDER= " "> <FRAME SRC= " " NAME= " " SCROLLING= " "> <FRAME SRC= " " NAME= " " SCROLLING= " "> </FRAMESET> |
Il FRAMESET serve quindi a dividere la pagina in più parti orizzontali ( usando solo ROWS ) o in più parti verticali ( usando solo COLS ); ad ogni parte corrisponde un FRAME.
Quindi un FRAMESET contenente solo un ROWS = "20%,25%,*" mi dividerebbe la pagina in tre righe ( anteprima ), mentre se usassi solo COLS = "20%,25%,*" otterrei una pagina divisa in tre colonne ( anteprima ).
Il FRAMESET va posto nell'HEAD, lasciando vuoto il BODY.
Ecco un esempio:
| <HTML> <HEAD> <FRAMESET rows= "30%, 70%" cols = "70%, 30%" > <FRAME src= "prima.html" > <FRAME src= "seconda.html" > <FRAME src= "terza.html" > <FRAME src= "quarta.html" > </FRAMESET> </HEAD> </HTML> |
Come si può vedere con tale codice viene creata una pagina divisa in quattro parti di dimensioni pari ai valori di ROWS e COLS. Nell’indicare la grandezza di ciascuna riga ( o colonna ) possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco; normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura:
Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri: |
| <FRAMESET rows= "150,*" cols= "100,200,*"> |
L’altezza della prima riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina. |
Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale: |
| <FRAMESET rows= "30%, 70%" cols= "20%, 50%, 30%"> |
Come si può vedere la prima riga occupa il 30% dell’altezza, la seconda il rimanente 70%. Le tre colonne si dividono poi la larghezza: la prima colonna occupa il 20%, la seconda il 50%, la terza il 30% dello spazio. |
In questo caso la ripartizione è proporzionale: |
| <FRAMESET rows= "1*,3*" cols= "3*,2*,1*" > |
Per quel che riguarda le righe, l’altezza viene suddivisa in 4 parti ( 1+3 ); la prima riga ne occupa una parte, mentre la seconda riga ne occupa tre. Per quel che riguarda le colonne,invece, l’altezza viene suddivisa in 6 parti ( 3+2+1 ); la prima colonna ne occupa tre, la seconda riga ne occupa due e la terza una. |
Si può pensare anche di suddividere un frame in due usando quindi un altro frameset:
| <FRAMESET ROWS="20%,*,15%" > <FRAME SRC= "prova1.html" NAME="logo" height="100%" width="100%" > <FRAMESET COLS="25%,70%" > <FRAME SRC="prova2.html" NAME= "menù" > <FRAME SRC="prova5.html" NAME= "contenuto" > </FRAMESET> <FRAME SRC="prova3.html" NAME= "footer" > </FRAMESET> |
e il risultato è questo. Notare come in tutti questi esempi ogni frame sia diviso da un bordo di un certo spessore che è trascinabile; questo è indubbiamente un effetto indesiderato di una pagina scritta con i frames e che può essere eliminato con opportuni attributi.
Ecco un altro esempio illustrativo.
| ROWS = " " | Fissa il numero delle righe in cui deve essere divisa la pagina. |
| COLS = " " | Fissa il numero delle colonne in cui deve essere divisa la pagina. |
| BORDERCOLOR = " colore " | Permette di specificare il colore dei bordi del FRAMESET. Vedi questo esempio. |
| FRAMEBORDER = " valore " | Ammette come valori YES ( valore di default ) e NO a seconda se si vogliono, o no, visualizzare i bordi del FRAMESET. Vedi questo esempio. |
| FRAMESPACING = " n " | Funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Ha lo stesso effetto dell'attributo BORDER = " n " , solo che quest'ultimo non ha limiti di visualizzazione. Vedi questo esempio. |
| SRC = " percorso " | Stabilisce il percorso della pagina html che deve essere visualizzata in quella porzione di pagina. |
| SCROLLING = " valore " | Ammette come valori YES ( valore di default ) e NO a seconda se si vuole, o no, consentire lo scrolling della singola pagina del FRAMESET. Può ammettere come valore anche AUTO : in questo caso la barra di scorrimento compare in automatico, ma solo se necessario. Vedi questo esempio. |
| FRAMEBORDER = " n " | Consente di far apparire o meno i bordi del frame ( i valori ammessi sono "0" e "1", ovvero "no" e "yes" ). Se il FRAMEBORDER è impostato a "0" i bordi non sono visibili. Vedi questo esempio ( codice ). |
| MARGINHEIGHT = " n " MARGINWIDTH = " n " |
Permettono di impostare la distanza verticale ( MARGINHEIGHT ) e orizzontale ( MARGINWIDTH ) tra i bordi del frame e il suo contenuto. Vedi questo esempio. |
| NORESIZE | E' un attributo che non mi consente di trascinare il bordo di un FRAME. Vedi questo esempio. |
In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. Grazie all’attributo TARGET possiamo specificare qual'è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno:
| <A HREF=" paginaDaLinkare.html " TARGET="nomeDelFrame"> |
come si può vedere nell’esempio. Questo è il suo codice:
| <FRAMESET rows= "20%,*" > <FRAME name= "intestazione" src= "intestazione.html" noresize > <FRAMESET cols= "20%,*" > <FRAME name= "menu" src= "menu.html" noresize > <FRAME name= "contenuto" src= "prima.html" noresize > </ FRAMESET> </ FRAMESET> |
Altri valori del TARGET sono VOID, _SELF ( valore di default ) usato se si vuole aprire la nuova pagina sul frame stesso, _PARENT ( esempio ) usato se la si vuole aprire sul frame precedente, _TOP ( esempio ) se la si vuole caricare nella parte più alta della struttura annullando il contenuto del frameset e sostituendolo con il contenuto del link stesso.