Comporre una pagina in frame

Ringraziamento particolare a HTML.IT per queste pagine

I frame (“riquadri”) comparvero per la prima volta con Netscape Navigator 2: si tratta della possibilità di suddividere una medesima finestra del browser in vari riquadri indipendenti.

Questa soluzione all’epoca si rivelò un successo, dal momento che permetteva notevoli vantaggi:

Fino a qualche tempo fa la velocità di navigazione era ben poca cosa, e si navigava con modem analogici molto lenti (anche da 14.4 kbs): i frame hanno l’indubbio vantaggio di non costringere a ricaricare tutta quanta la pagina, accelerando così la navigazione dell’utente all’interno di un sito web. D’altro canto il fatto che solo una parte del contenuto sia ricaricata fa risparmiare banda anche dal punto di vista del server che deve erogare le pagine
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 il contenuto della pagina (per sua natura) è organizzato “a zone”
Il fatto di poter mantenere fisso su un lato del monitor il menu di navigazione e far scorrere sull’altro lato il contenuto piace a molti utenti, soprattutto quando la risoluzione del monitor è bassa (800 x 600 o 640x480, magari su un monitor da 15’’)

Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l’invenzione della Netscape, anche Microsoft si trovò a “copiare” la possibilità di strutturare le pagine in questo modo; in seguito (con l’HTML 4) i frames divennero una specifica ufficiale del W3C.

Struttura di un frameset

Per utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:

<!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>HTML.it</title>
</head>

<frameset rows="50%,50%" cols="50%, 50%">
<frame src="prima.html">
<frame src="seconda.html">
<frame src="terza.html">
<frame src="quarta.html">

<noframes>
  <p>Qui può essere indicato il link a
   <a href="senzaFrame.html"> una versione del sito</a>
   che non utilizzi un layout a frame
  </p>
</noframes>

</frameset>
</html>

L’esempio completo si trova qui.

Come vi sarete accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose. In primo luogo cambia il doctype, cioè il tipo di documento di riferimento.

All’inizio del documento al posto di questa riga:

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

compare ora infatti questa dicitura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

stiamo indicando semplicemente al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.

Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> (“set di riquadri”), che ci permette di indicare come devono essere indicati i frames all’interno della pagina

Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:

rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne . Ad esempio:
<frameset cols="33%, 33%,*">
cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe
<frameset rows="33%, 33%,*">

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 (“wild card”); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):

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 1a 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="20%,80%" cols="25%,25%,50%">

come si può vedere la prima riga occupa il 20% dell’altezza, la seconda il rimanente 80%.

Le 3 colonne si dividono la larghezza: la prima colonna occupa il 25%, la seconda nuovamente il 25%, la terza il 50% dello spazio

proporzionale

In questo caso la ripartizione è proporzionale:

<frameset rows="1*,3*" cols="3*,2*,1*">

per ciò che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3
per ciò che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame. Possiamo farlo con la sintassi:

<frame src="prima.html">

come si può vedere l’origine di ciascun frame è un documento HTML standard (come quelli che abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la sua <head> e il suo <body>.

Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi (che vedremo tra breve).

Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:

Con Internet Explorer:
selezionare HTML
Con Mozilla:
selezionare this frame > view frame source

È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:

<frame id=”primoRiquadro” name=”primoRiquadro” src="prima.html">

la sintassi corretta per dare un nome a un frame dovrebbe essere:

id=”primoRiquadro”

tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell’uso utilizzare anche name=”primoRiquadro”.

Frameset annidati

È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Così:

<!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>HTML.it</title>
</head>
<frameset rows="15%,70%,15%">
  <frame src="11.html">

   <frameset cols="25%,50%,25%">
    <frame src="21.html">
    <frame src="22.html">
    <frame src="23.html">
   </frameset>

  <frame src="12.html">

<noframes>
<p>Qui può essere indicato il link a <a href="senzaFrame.html"> una versione del sito</a> che non
utilizzi un layout a frame</p> </noframes>
</frameset>
</html>

Attributi dei frames per la visualizzazione

Attributi del frameset

Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la visualizzazione. Alcuni attributi tuttavia sono entrati nell’uso e sono correttamente supportati dai browser attuali:

<frameset frameborder="no" cols="25%,75%">

L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi.

L'esempio è qui

<frameset framespacing="20" border=”20” cols="25%,75%">

framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel.

Per mantenere la compatibilità con Internet Explorer 4 (che non legge l’attributo border), di solito si specificano sia il framespacing, sia il border.
L'esempio è qui

<frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%">

bordercolor permette di specificare il colore dei bordi del frameset.
L'esempio è qui

Attributi dei frame

A differenza degli attributi del tag frameset, che sono dovuti alla convenzione, i seguenti attributi del tag frame sono invece descritti nelle specifiche del W3C e permettono di modificare l’aspetto dei riquadri e il modo in cui l’utente può interagire con essi:

<frame src=”prima.html” scrolling=”no”> <frame src=”prima.html” scrolling=”auto”>	L’attributo scrolling (di default impostato a “yes”) indica se si vuol consentire all’utente di poter scorrere il frame oppure no. Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice, come si può vedere nell’esempio. L'esempioè qui scrolling può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario
<frame src=”prima.html” scrolling=”no”> <frame src=”prima.html” scrolling=”no” noresize>	noresize impedisce al singolo frame di essere ridimensionato. L'esempio è qui Se usato in unione con scrolling=”no”,di fatto “blocca” il contenuto del frame. L'esempio è qui Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti
<frame src=”prima.html” frameborder=”0”>	frameborder conesente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes"). Se frameborder è impostato a “0” i bordi non sono visibili L'esempio è qui Attenzione però a come impostate i bordi nei vari frame, dal momento che i bordi di frame adiacenti non sempre vanno d’accordo(provate) Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset>
<frame marginwidth="50" marginheight="50" src="prima.html">	marginheight e marginwidth permettono di impostare la distanza erticale (marginheigth) e orizzontale (marginwidth) ra i bordi del frame e il suo contenuto. L'esempio è qui

Approfondimenti

Ovviamente sarebbe meglio impostare i bordi e gli spazi tra i frame attraverso i CSS. Nella lezione della guida ai fogli di stile dedicata ai bordi con i CSS è spiegato come fare.

Conclusioni

In queste pagine avete a disposizione un certo numero di informazioni e di esempi che vi permetteranno di cominciare a scrivere in HTML,Buon Divertimento,Bruno Crimella.