basi | primo sito | font, liste | collegamenti | tabelle | frame | fogli CSS | grafica | secondo sito* | suggerimenti | indice

precedente successivo


Frame


Cosa sono i frame.

Con le tabelle si suddivide una pagina in zone che possono contenere immagini, testi ed altro.
Questi contenuti sono fissi, cioé non possono essere modificati.

I contenuti di una pagina divisa con i frame, invece, possono essere visualizzati come se fossero in pagine diverse.
Una applicazione comune è la suddivisione di una pagina in due zone: una verticale, larga un 20% della pagina e posizionata a sinistra; tipicamente essa contiene un'elenco. Cliccando su una voce di quest'elenco, si visualizza, nella seconda zona, un contenuto correlato alla scelta effettuata.
In questo modo, cambiando scelta nella prima finestra l'elenco rimane, cambia il contenuto della seconda finestra.

Bisogna tener presente che caricando una pagina a frame, si caricano anche le pagine richiamate; pertanto essa richiede più tempo per essere caricata e,quindi, visualizzata.


CONSIGLIO: seguite con attenzione il contenuto di questa pagina, arrivati in fondo rincominciate dall'inizio; questo perché il meccanismo dei frame non è immediato, per capirlo bene è meglio conoscere già elementi, tag ed altro. Non vi scoraggiate.



Sintassi

La pagina da suddividere può contenere solo informazioni sulla divisione, per cui può essere priva del blocco BODY.


Gli elementi da usare per la divisone in frames sono (come usarli sarà visto dopo):

FRAMESET (Attributi: COLS e ROWS). Definisce il blocco con le indicazioni delle suddivisioni in righe od in colonne. La suddivisione sia in righe che in colonne è descritta in 'nidificazione dei frames'. Le dimensioni vanno specificate nelle unità di misura supportate; esprimendole in % la visualizzazione è indipendente dalla risoluzione dello schermo.

FRAME Definisce il contenuto di ciascun frame. Esso ha diversi attributi (descritti più avanti), quello fondamentale è: SRC che specifica il documento da visualizzare nel frame.


Per creare una pagina (di nome FRAME A COLONNE) con una divisione in due colonne, una larga il 30% dello schermo e l'altra larga lo spazio rimanente, che contengano rispettivamente i documenti "sinistra.htm" e "destra.htm" si deve scrivere (come codice dell pagina FRAME A COLONNE):

<HTML>

<HEAD>
<TITLE>FRAME A COLONNE</TITLE>
</HEAD>

<FRAMESET COLS=30%,*%>
    <FRAME SRC="sinistra.htm">
    <FRAME SRC="destra.htm">
</FRAMESET>

</HTML>

La definizione dei frame va inserita, in ordine di successione, iniziando dalla colonna a sinistra fino alla colonna di destra

Questo è il minimo codice necessario per la definizione di una pagina a frame; i due files "sinistra.htm" e "destra.htm" devono essere disponibili nella stessa directory della pagina, altrimenti bisogna inserire un loro indirizzo più completo.

Questo codice minimo è stato ampliato per realizzare la pagina di esempio "esfra.htm"

Nell'esempio:
- Il file "sinistra.htm" contiene il codice per tornare al punto di chiamata in questa pagina ed il codice per visualizzare, nel frame di destra, delle pagine collegate alle varie voci elencate a sinistra.
- Il file "destra.htm" contiene il codice per tornare al punto di chiamata in questa pagina e mostra codice del file "esfra.htm" riportato di seguito:

<HTML>
  <HEAD>
     - - - -
  <TITLE>esfra</TITLE>
  </HEAD>

Non è presente il tag "body"

     <FRAMESET cols=30%,*%>
          <FRAME SRC="sinistra.htm" frameborder="10"
                             marginwidth=20 marginheight=20 TARGET="DES">
          <FRAME SRC="destra.htm" NAME="DES" frameborder="10">
     </FRAMESET>

</HTML>

Gli attributi, ancora non visti, sono descritti subito sotto.



Frame ha diversi attributi:

FRAMEBORDER, FRAMESPACING e BORDER Definiscono l'ampiezza del bordo. Alcuni browser riconoscono un termine, altri un'altro; per una buona compatibilità conviene usarli tutti e tre.

MARGINHEIGHT Definisce l'ampiezza del margine superiore fra il contenuto ed il bordo del frame.

MARGINWIDTH Definisce l'ampiezza del margine sinistro fra il contenuto ed il bordo del frame.

NAME definisce il nome del frame, Serve da riferimento quando si vuole indirizzare qualcosa nel frame. Nell'esempio, le selezioni attivate nel frame di sinistra caricano i documenti correlati nel frame di destra. Per un esempio vedere i codici nei files "esfra.htm" e sinistra.htm".

NORESIZE Impedisce che l'utente possa spostare i bordi del frame.

SCROLLING Usando SCOLLING=NO non vengono visualizzati i cursori di scorrimento.

SRC definisce il nome del file che deve essere caricato in quel frame. Ovviamente se il file non si trova nella stessa directory, è necessario inserire tutto il percorso.



elemento NOFRAME nell'ipotesi che il browser usato non supporti i frames, è stato previsto l'elemento NOFRAME (da usare insieme ad un blocco BODY); esso indica ai browsers che il blocco BODY, compreso fra NOFRAME e /NOFRAME, è da interpretare solo quando i frames non sono supportati.
....
<NOFRAME>
<BODY>
....
</BODY>
</NOFRAME>


elemento TARGET indica il nome del frame, definito con l'attibuto per frames NAME, in cui devono essere visualizzati i documenti collegati. Gli esempi di uso sono nel file "sinistra.htm".
TARGET va utilizzato unitamente all'elemento "A" nel blocco "BODY" od unitamente all'elemento "BASE" nel blocco "HEAD".

Inserito come attributo di A, nella descrizione di un collegamento, indirizza solo quel collegamento al frame "***".
<A HREF="collegamenti.htm" target="DES">collegamenti</A>

Inserito nel blocco HEAD di una pagina
<BASE TARGET="***"> indirizza tutti i collegamenti di quella pagina al frame "***".


Target ha quatto destinazioni speciali:

_self Destinazione di defoult; viene usata per modificare un'altra impostazione, generalmente eseguita con <BASE>.
_blank Viene usata per visualizzare il documento in una nuova finestra del browser, generalmente piccola, che si apre sulla precedente.
"blank" può essere utilizzato anche in pagine senza frame; per esempio il codice

<A HREF="AN02479_.gif" target="_blank">esempio blank</a>

può essere inserito in ogni pagina e presenta la testa di cavallo (ANO2479.gif) in una nuova pagina. Il pulsante "indietro" o "back" non funziona, per tornare indietro occorre chiudere la pagina con la "X" in alto a destra. Il codice dell'esempio genera:

esempio blank

_parent Serve per visualizzare in un frame gerarchicamente precedente; tipicamente per ritornare al frame origine dopo aver aperto una nuova finestra con "_blank".
_top Serve per visualizzare un documento a pagina intera. Molto usato per tornare a visualizzare in una pagina intera da una pagina a frame.

<A HREF="frame.htm#RIT1" target=_top>Ritorno a frame</A>
Questa riga viene usata nei files"sinistra,htm" e "destra.htm" per tornare a visualizzare a pagina intera.





Nidificazione dei frame - suddivisione in righe e colonne

Volendo dividere una pagina sia con righe sia con colonne, una definizione di FRAME può essere sostituita da un'altra suddivisione con l'elemento FRAMESET. In questo modo si può ottenere una divisione in righe e colonne. Per esempio, si può eseguire una prima divisione per righe: una alta il 25% per una intestazione, l'altra riga (alta il 75%) può essere divisa in due colonne (una larga il 20% per un indice e l'altra, larga l'80%, per la visualizzazione dei documenti).
Questa suddivisione in righe e colonne si ottiene nidificando un frame a colonne in un frame a righe con un codice del tipo:

<HTML>

<HEAD>
.....
</HEAD>

<FRAMESET ROWS="25%,*%> Prima suddivisione in due righe.

<FRAME SRC="TITOLO.HTM"> Indicazione del file da visualizzare nella prima riga.

  <FRAMESET COLS="20%,*%> Al posto della seconda riga viene definita una suddivisione per colonne.

    <FRAME SRC="SINISTRA.HTM" TARGET="DES"> Colonna di sinistra destinata all'indice.

    <FRAME SRC="DESTRA.HTM" NAME="DES"> Colonna di destra destinata alla visualizzazione.

  </FRAMESET> Chiusura del secondo frameset ( a colonne).

</FRAMESET> Chiusura del primo frameset (a righe).

</HTML>




precedente successivo