Frame -seconda parte-
| La navigazione nei frame |
Una volta costruite le nostre pagine suddivise in frame resta da risolvere il problema dei vari collegamenti che ci permettano la navigazione del sito. Infatti muoversi all'interno dei frame presenta una piccola differenza rispetto alle pagine cosiddette normali. Questa differenza risiede appunto nei link, che richiedono la presenza di un attributo che indichi al browser in quale frame aprire la nuova pagina. Procediamo con un esempio.
Ecco i file necessari:
corpo.html (il FRAMESET)
sx.html (il frame a sinistra)
dx.html (il frame a destra)
ed inoltre nuovo.html che rappresenta la nuova pagina da caricare.
Questo e' il FRAMESET corpo.html, che non presenta differenze rispetto a quelli finora presi in esame:
<HTML> <FRAMESET COLS=150,*> <FRAME NAME=sinistra SRC=sx.html> <FRAME NAME=destra SRC=ds.html> </FRAMESET> </HTML>
sx.html richiede invece la presenza del link che ci permettera' di caricare la nuova pagina. La differenza sta proprio nel link, o meglio nell'attributo TARGET:
<HTML> <BODY BGCOLOR=yellow> <A HREF=nuovo.html TARGET=destra> carica nuovo </A> </BODY> </HTML>
Ecco spiegata la presenza dell'attributo NAME nel FRAMESET, infatti useremo proprio NAME=destra per indicare al browser dove aprire la nuova pagina, che altrimenti verrebbe caricata al posto di quella su cui e' presente il link (in questo caso sx.html).
Questo e' dx.html
<HTML> <BODY BGCOLOR=gold> </BODY> </HTML>
Ed ecco nuovo.html:
<HTML> <BODY BGCOLOR=violet> nuova pagina </BODY> </HTML>
Cliccando su corpo.html otterremo questo risultato.
Adesso che sappiamo come aprire una nuova pagina, potremo aggiungere quanti link vogliamo che condurranno ad altrettante pagine. Fortunatamente HTML ci mette a disposizione un tag che permettera' di indicare al browser la destinazione, senza doverla specificare all'interno di ogni link. Si tratta del tag <BASE TARGET>, che andra' posto ovviamente nel frame portante i collegamenti.
Nel caso specifico si tratta del file sx.html:
<HTML> <BODY BGCOLOR=yellow> <BASE TARGET=destra> <A HREF=nuovo.html> carica nuovo </A> <A HREF=nuovo_2.html> carica nuovo_2 </A> <A HREF=nuovo_3.html> carica nuovo_3 </A> <A HREF=dx.html> torna alla prima pagina </A> </BODY> </HTML>
Ecco l'esempio pratico di <BASE TARGET>
| I valori di TARGET |
A questo punto facciamo un piccolo passo indietro ed elenchiamo i valori dell'attributo TARGET, nel caso in cui si desideri aprire una nuova pagina in una destinazione diversa da come descritto finora. L'attributo TARGET ed i suoi valori andranno acclusi all'interno del link, ed annulleranno anche (solo per quel link) la destinazione specificata dal tag <BASE TARGET> eventualmente presente.
<A HREF=nuova_pagina.html TARGET=_blank>
il browser aprira' la pagina in una nuova finestra prova
<A HREF=nuova_pagina.html TARGET=_top>
la nuova pagina viene aperta eliminando i frame prova
<A HREF=nuova_pagina.html TARGET=_self>
la pagina viene aperta al posto del frame su cui e' presente il link, come da default. Serve nel caso che sia stata specificata una diversa destinazione in <BASE TARGET> prova
<A HREF=nuova_pagina.html TARGET=_parent>
l'azione di _parent e' solo teoricamente differente da quella di _top, infatti carica la nuova pagina nel FRAMESET progenitore (nel caso di FRAMESET annidati) eliminando tutti i frame. prova
| Caricare piu' frame contemporaneamente |
In alcuni casi puo' essere utile, se non indispensabile, caricare due frame contemporaneamente.
Questo compito viene spesso affidato a Javascript, ma esiste un metodo ugualmente efficace offerto da HTML. Per raggiungere lo scopo dovremo creare almeno sei file, due FRAMESET e quattro normali file HTML che andranno a costituire i frame da visualizzare.
Ecco un elenco dei file:
index.html che e' il FRAMESET principale (N° 1)
superiore.html il suo primo frame
inferiore.html il secondo frame
Questi tre file rappresenteranno cio che viene visualizzato quando apriamo la pagina. Ecco il sorgente del FRAMESET:
<HTML> <FRAMESET ROWS=50%,*> <FRAME NAME=alto SRC=superiore.html> <FRAME NAME=basso SRC=inferiore.html> </FRAMESET> </HTML>
Segue il codice di superiore.html che portera' i link necessari
<HTML> <BODY BGCOLOR=yellow> Questo frame appartiene al PRIMO <FRAMESET> <BR> <BR> <A HREF=index_2.html TARGET=basso>Carica il SECONDO <FRAMESET> nel frame in basso</A> <BR> <BR> <A HREF=index.html TARGET=_top>Ritorna al frame originale </BODY> </HTML>
inferiore.html e' un normale frame, quindi e' superfluo mostrarne il codice.
Questo e' il sorgente del secondo FRAMESET, che verra' caricato cliccando sul link posto sul primo FRAMESET. Anche in questo caso i due frame sono normali file HTML, e' quindi superfluo mostrarne il sorgente.
Ecco l'elenco dei file necessari:
index_2.html che e' il FRAMESET in questione (N° 2)
sx.html
dx.html
Ecco dunque il sorgente del FRAMESET index_2.html
<HTML> <FRAMESET COLS=50%,*> <FRAME NAME=sinistra SRC=sx.html> <FRAME NAME=destra SRC=dx.html> </FRAMESET> </HTML>
E questo e' il risultato. (Per avviare l'apertura del file corretto dovremo cliccare su index.html, come viene fatto indirettamente in questo caso cliccando sul link)
La dinamica di questa configurazione si spiega in poche parole: cliccando su index.html avvieremo un normale FRAMESET che visualizza i suoi due frame. Il frame superiore contiene due link, il primo carichera' il FRAMESET index_2.html al posto del frame inferiore (quello di colore arancio), mentre il secondo link riportera' alla situazione iniziale ricaricando il suddetto frame.
Come si puo' intuire, le possibilita' di configurazione dei frame trovano un limite solo nella fantasia del webmaster, offrendo una vasta gamma di soluzioni. Inizialmente puo' sembrare una superflua complicazione, ma con un minimo di pratica si potranno apprezzare i vantaggi, sia sul piano estetico che funzionale. esempio
Alcuni browser non supportano pero' la tecnica dei frame. E' quindi consigliabile accludere il tag <NOFRAME> all'interno del FRAMESET, in modo che possano visualizzare un contenuto alternativo.
Ecco un esempio:
<HTML> <FRAMESET COLS=100,*> <FRAME NAME=sinistra SRC=sx.html> <FRAME NAME=destra SRC=ds.html> <NOFRAMES> Spiacente, questo sito utilizza i frame che purtroppo non sono supportati dal browser in uso. </NOFRAMES> </FRAMESET> </HTML>
Fin'ora, per brevita' e quindi per semplificare la loro realizzazione, sono stati illustrati esempi di codice incompleti se pur perfettamente funzionanti, ma non aderenti allo standard W3c. Ecco le esatte definizioni dei FRAMESET e dei FRAME.
Il FRAMESET:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Questo e' un Frameset</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME=sinistra SRC="framesx.html"> <FRAME NAME=pagina SRC="corpo.html"> <NOFRAMES> <H2>Spiacente, il tuo browser non e' abilitato alla visione dei frame.</H2> </NOFRAMES> </FRAMESET> </HTML>Mentre i FRAME sono normali documenti HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Questo e' un Frame</TITLE> </HEAD> <BODY BGCOLOR=violet> Questa puo' essere indifferentemente una delle due finestre del FRAMESET. </BODY> </HTML>
| L'<IFRAME> |
L'IFRAME potrebbe rappresentare una interessante alternativa ai frame, soprattutto per la facilita' d'impiego. Purtroppo, pur essendo approvato dalle direttive del W3C, al momento e' supportato solo da Internet Explorer (versione 3 e successive).
P.S. Anche Netscape 6 ora supporta l'IFRAME
Questo il codice per realizzare l'IFRAME sopra.
<IFRAME NAME=frame_interno WIDTH=500 HEIGHT=150 SRC=iframe.html> Qui va inserito l'eventuale contenuto alternativo per i browser che non supportano l'IFRAME. </IFRAME>
Il contenuto dell'IFRAME sopra e' un normale file HTML, in questo caso iframe.html
© 2002 Poletti Stefano