Home -> Manuali e Tutorials -> Guida HTML -> Frame Html  (1 di 3)

Scarica Guida HTML      |    Stampa Tutorial HTML      |    Cerca nel sito      

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

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:

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:

Dimensione fissa :

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.

Percentuale :

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.

Proporzionale :

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:

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.

Torna su      |    Indice Guida      |    Pagina << 29 >>