15. Frame
Generalità
I frame sono uno strumento molto importante per rendere i documenti HTML più leggibili e semplici da consultare. In sostanza essi servono a
suddividere lo schermo in più aree e ciascuna di esse diventa una finestra indipendente ove visualizzare differenti documenti. Dato che questo comando è relativamente recente, non tutti i browser lo supportano
pienamente, anche se quelli di nuova generazione li visualizzano correttamente (es. Internet Explorer 4).
Un esempio è rappresentato da questo corso che, suddiviso in due frame, riporta l'indice nella finestra di sinistra ed il contenuto in
quella di destra. Come si può notare, un'operazione svolta in una finestra, come il clic su un argomento, ha effetto sulla finestra di destra dove appare il testo dell'argomento selezionato.
E' palese che con i frame, il browser carica contemoraneamente più di un documento, con le relative immagini ivi contenute, pertanto, se le
pagine sono troppo pesanti in termini di memoria richiesta (es. ricche di immagini o file multimediali) il sistema viene appesantito e potrebbe diminuire in termini di prestazioni e velocità. Comunque, per talune
applicazioni, il frame consente di viaggiare all'interno del sito o di documenti in maniera notevolmente veloce.
Per realizzare una pagina con frame, è necessario adottare una filosofia differente rispetto a quella precedentemente vista per i documenti
HTML su unica finestra.
Implementazione delle finestre
Innanzitutto deve essere creato un documento HTML, che sarà il primo ad essere caricato, che definisce le varie finestre così come
appariranno a video. Questo documento in genere è molto breve in quanto contiene solamente la definizione delle finestre che formeranno il frame da visualizzare e, di solito, non superano le due-tre.
Inoltre, a differenza dei normali documenti, i tag che definiscono i frame, sono inclusi prima della sezione <BODY>, alla stessa
stregua della sezione <HEAD>.
Di seguito, è riportato un esempio di come è strutturata una pagina tipo quella che state visualizzando adesso, e cioè, ad eccezione della
parte superiore, divisa verticalmente in due sezioni (frame)
|
<HTML>
<HEAD>
<TITLE>Titolo della Pagina</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
</FRAMESET>
<NOFRAMES>
<BODY>
Corpo del documento che sarà
visualizzato dai browser che non
supportanto i frame
</BODY>
</NOFRAMES>
</HTML>
|
|
Nel comando <FRAMESET> è stato specificato il parametro COLS="x,y,z...." che indica la
larghezza delle colonne delle finestre aperte. Ogni valore x,y,z... può essere:
- specificato in pixel;
- in percentuale (facendo seguire il valore dal segno %) preoccupandosi di raggiungere il
totale del 100%, altrimenti il browser scalerà in maniera percentuale le dimensioni fino al riempimento della finestra in cui i frame vengono visualizzati;
- relativo secondo un fattore fisso rappresentato dal carattere * a cui possono essere
applicati dei moltiplicatori 2*, 3* ecc. Ad esempio:
- <FRAMESET COLS="*,*"> dividerà lo spazio disponibile in parti uguali;
- <FRAMESET COLS="10%,*"> farà la prima finestra del 10% e l'altra con lo spazio rimanente;
- <FRAMESET COLS="10%,2*,*"> farà la prima finestra del 10% e lo spazio
rimanente sarà i 2/3 disponibile per la seconda ed 1/3 per la terza;
Conviene evitare, di norma, di esprime il valore in pixel, in quanto potrebbe uscire fuori dalla
finestra di visualizzazione, mentre quello in percentuale e relativo viene gestito automaticamente dal browser per essere sempre visibile.
Alla stessa stregua del parametro COLS="x,y,z..." funziona il parametro ROWS="x,y,z..."
che però si riferisce alle righe e pertanto suddividerà lo schermo in finestre orizzontali.
Non c'è limite al numero di finestre che possono essere aperte, eccezion fatta che aprendone
troppe possono diminuire troppo le dimensioni di ogni singola finestra da non essere sufficientemente idoee a visualizzare i dati contenuti.
Attributi
Gli attributi del comando <FRAMESET> sono:
- COLS="x,y,z...."
già visto in precedenza;
- COLS="x,y,z...."
già visto in precedenza;
- FRAMEBORDER="YES|NO"
indica se il frame deve avere o meno il bordo;
- BORDER="x"
indica lo spessore del bordo in pixel;
- BORDERCOLOR="#RRGGBB"
indica il colore del bordo;
- FRAMESPACING="x"
indica lo spazio che deve intercorrere tra i frames
I Frame possono essere annidati e quindi possono essere create suddivisioni non solo in
verticale od orizzontale, ma anche in entrambi i modi contemporaneamente.
Riferendosi al sopracitato esempio, inseriamo un <FRAMESET> che suddivida la prima colonna
in altre due colonne mediante un separatore orizzontale:
|
<HTML>
<HEAD>
<TITLE>Titolo della Pagina</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAMESET ROWS="30%,70%">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Corpo del documento che sarà
visualizzato dai browser che non
supportanto i frame
</BODY>
</NOFRAMES>
</HTML>
|
|
Gestione delle finestre
Abbiamo visto come vengono create le finestre, ma ora è necessario esaminare come esse
vengono riempite, ovvero come indicare quali documenti HTML aprirvi e come collegare più finestre.
Per indicare il documento da aprire per ciascuna finestra viene utilizzato il tag <FRAME> che
sarà inserito all'interno del comando <FRAMESET></FRAMESET> e ce ne dovranno essere tanti quante finestre sono state definite. Ogni comando <FRAME> sarà associato alla finestra
corrispondente in base all'ordine in cui è stata dichiarata, cioè se abbiamo definitro tre finestre, il primo <FRAME> corrisponderà alla prima, il secondo alla seconda ecc..
Il più semplice comando frame è il seguente:
<FRAME SRC="indice.html">
che apre il file indice.html nella finestra corrispondente. Prendiamo nuovamente l'esempio
precedente ed aggiungiamo questa riga per vedere l'effetto.
|
<HTML>
<HEAD>
<TITLE>Titolo della Pagina</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="indice.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Corpo del documento che sarà
visualizzato dai browser che non
supportanto i frame
</BODY>
</NOFRAMES>
</HTML>
|
|
Vedete che nella prima finestra è stato visualizzato il file indicato nell'attributo SRC.
Gli altri attributi sono:
- NAME="nome_finestra"
con questo attributo, molto importante, viene dato un nome alla finestra cui si riferisce
che sarà utilizzato per aprire specifici file all'interno di essa. Se ad esempio creiamo due finestre di cui una è l'indice e l'altra il testo associato ad ogni voce dell'indice,
chiamando quest'ultima finestra "testo", potremmo fare dei link dalla finestra contenente l'indice a quella che contiene il testo, specificando che il file deve essere
aperto nella finestra di nome "testo", anzichè in quella corrente, come avviene in questo corso. Comunque, vedremo in dettaglio questo meccanismo più avanti.
- MARGINWIDTH="x"
MARGINHEIGTH
="x"
indicano lo spazio in pixel da lasciare rispettivamente ai margini laterali o superiore/inferiore.
- SCROLLING="AUTO|YES|NO"
impone al browser di attivare o meno le barre di scorrimento nel frame in argomento.
Con il valore AUTO, sarà il browser che deciderà se attivarle o meno a seconda della grandezza del documento. Default "AUTO".
- NORESIZE="YES|NO"
indica se il frame può essere ridimensionato o meno. Default "YES".
Gestione dei collegamenti tra frames
Abbiamo visto come si creano i frames, adesso vediamo come si utilizzano.
In sostanza, dato che i frame sono delle finestre indipendenti l'una dall'altra, la gestione deve
essere fatta a livello di creazione del documento in quanto è ramite i link che vengono aperti i documenti nel frame prescelto.
Come detto in precedenza, è di fondamentale importanza che i frame abbiano il nome, in
quanto il comando di ancora <A></A> prevede l'attributo
TARGET="nome_frame"
che indica dove deve essere aperto il file indicato con l'attributo HREF=...
Normalmente, quando si attiva un link su una pagina senza frame, la pagina a cui punta viene
aperta nella stessa finestra in cui ci troviamo, eliminando dal video la pagina precedente. Invece, con un documento su due frame, possiamo avere in una finestra un documento che
punta ad una altro che però sarà aperto in un'altra finestra, quindi nell'altro frame.
Prendiamo come esempio la pagina del corso che state vedendo ora, c'è l'indice sulla destra e
cio è stato realizzato mettendo un comando del genere:
<FRAME SRC="toc.html" NAME="toc">
sulla destra c'è il documento che risponde al seguente comando:
<FRAME SRC="nome.html" NAME="testo">
per cui, il nome della finestra a sinistra è "toc", mentre quella a destra è "testo".
Quando faccio un clic su un link della finestra "toc" che deve aprirmi un documento sulla
finestra a destra che chiameremo "testo.html" devo creare il link nella seguente maniera:
<A HREF="testo.html TARGET="testo">Punta al file testo.html nella finestra a destra</A>
Quindi, cliccando su tale link, apro il file "testo.html" nella finestra indicata in TARGET "testo".
L'attributo TARGET, prevede come "nome_file" anche alcuni usi speciali specificando delle parole chiave:
- "_blank"
la pagina collegata sarà visualizzata in una nuova finestra a schermo intero in una
nuova sessione del browser.
- "_self"
la pagina sarà visualizzata nella finestra corrente, cioè quella in cui è presente il link.
Impostazione di default.
- "_parent"
la pagina sarà visualizzata nel frame "parent" in cui FRAMESET in cui è presente la
finestra in cui si trova l'ancora.
- "_top": la pagina sarà visualizzata a tutto schermo, eliminando quindi ogni composizione in frames.
  
|
