Impostare i frameset

La prima cosa da fare è impostare la pagina principale, ovvero il frameset vero e proprio. Come si è accennato si tratta di un file HTML il cui unico compito è definire la soddisfazione della finestra e richiamare i file collegati. La spiegazione sarà chiara avendo sotto gli occhi un esempio:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http:://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso8859-1">
<title>Esempio di Frameset</title>
</head>
<frameset rows="50%,50%" cols="50%,50%">
<frame src="prima.htm">
<frame src="seconda.htm">
<frame src="terza.htm">
<frame src="quarta.htm">
</frameset>
</html>

Nel frammento di codice si possono notare alcune differenze di impostazione rispetto a un fie HTML normale. in primo luogo, il tipo di documento è diverso,ossia:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4,01 Transitional//EN"

http://www.w3.org/TR/html/frameset.dtd”&gt;

anzichè:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//WN">

La differenza più rilevante, però, e che dopo head non è presente body, che di fatto è sostituito dall’elemento frameset. Il tag <frameset> ha due attributi principali:
  • cols definisce le colonne dei frame. Verranno create tante colonne quanti sono valori inseriti. Ogni misura può essere definita in pixel o in percentuale e combinata con il carattere *, che significa “tutto lo spazio disponibile oltre le misure definite”;
  • rows definisce le righe dei frame. Verranno create tante righe quanti sono i valori inseriti. Ogni misura può essere definita in pixel o in perentuale e combinata con il carattere *, che significa “tutto lo spazio disponibile oltre le misure definite”.
In questo caso:


<frameset rows="50%,50%" cols="50%,50%">

significa “suddivi la finestra in due righe di altezza 50% e in due colonne di larghezza 50%”. All’interno dell’elemento frameset vengono inseriti tanti elementi fram quanti sono i riquadri creati. Il broweser interpreterà i frame in ordine , contando le aree riga per riga. L’attributo di base del tag <frame> è src. il cui valoreè un percorso relativo o assoluto, o un URL, che indica la pagina da caricare all’interno del frame. E’ poi possibile modificare l’aspetto e il comportamento dei vari frame mediante altri attributi. Ecco quelli che possono essere inseriti nel tag <frameset>, oltre a cols e rows:
  • border permette di inserire un valore in pixl per lo spessore del bordo del frame, che di default esiste ed è di tipo tridimensionale. Per non visualizzare alcun bordo bisogna impostare il valore zero;
  • bordercolor consente di colorare il bordo dei frame inserendo un qualasiasi codicedi colore valido.
Per ogni <frame>,oltre a src, si possono inserire i seguenti attributi:
  • name permette di assegnare un nome al frame, un’operazione molto utile per definire link incrociati tra frame diversi;
  • bordercolor consente di inserire un codice di colore per il bordo del singolo frame, se presente;
  • frameborder controlla se un frame mostra o meno un bordo, e pò assumere come valori yes oppure no. La visualizzazione dei bordi dei singoli frame è gestita in modo coerente da tutti i broweser;
  • marginheight e marginwidth permettono di impostare, rispettivamente, la distanza veritcale e quella orrizzontale tra i bordi dei frame e il suo contenuto. Di default Internet Explorer 4 inserisce un margine di 14 pixel in ambiente Windows e di 8 pixel in ambiente Macintosh;
  • noresize impedisce che i bordi dei frame possano essere trascina liberalmente dall’utente ridimensionando le varie aree (il che è invece possibile di default). Questo attributo non necessita di alcun valore;
  • scrolling, se impostato a no,impedisce la visualizzazione di una barra di scorrimento (attiva di default) nel caso in cui i contenuti superino la dimensione del frame. Si tratta di una soluzione molto efficace dal punto di vista del design, ma da utilizzare con attenzione per evitare che a taluni utenti (per esempio quelli che utilizzano font molto grandi perchè hanno problemi di vista) venga nascota una parte dei contenuti.

Il layout a frame dell’esempio precendete può quindi essere arricchito in questo modo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso8859-1">
<title>Esempio di Frameset</title>
</head>
<frameset rows="80%,*" cols="20%,*" border="1">
<frame src="prima.htm" name="prima scrolling="no" noresize>
<frame src="seconda.htm" name="seconda">
<frame src="terza.htm" name="terza" scrolling="no">
<//frameset>
</html>

Un ulteriore possibilità è la creazione di set annidati, ossia l’inserimento di un frameset all’interno di un altro frameset per comporre combinazioni più complesse o asimmetriche. Ecco un esempio:


<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Esempio di Frameset</title>
</head>
<frameset cols="20%,*" border="1">
<frame src="prima.htm" name="prima" scrolling="no" noresize>
<frameset rows="*,20%" border="1">
<frame src="seconda.htm" name="seconda">
<frame src="quarta.htm" name="quarta" scrolling="no">
</frameset>
</frameset>
</html>

In questo codice il primo frameset divide la finestra in due colonne, di cui la prima ospita il file prima.htm, mentre la seconda è ulteriormente divisa in due righe che contengono rispettivamente seconda.htm e quarta.htm.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...