Pagina ORIGINALE

html esercizi form frame

Frame 1
Realizzare una pagina con i seguenti frame

  




Frame 2
Realizzare una pagina con i seguenti frame

  


Frame 3
Realizzare una pagina con i seguenti Frame e Link

  

Comporre una pagina in frame

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:

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:

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:

È 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.


Copyright ©2007