html






Frames o Cornici

I Frames Introdotti a partire dalla versione 2 di NS e 3 di IE, sono oggi un'ottima soluzione per la struttura di un sito più o meno complesso. Essi permettono infatti di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo e diverso rispetto alle altre. Questo mio sito che state visitando ne è un esempio. Frame principale è il più grande, dove visualizzare le varie pagine. Frame laterale invece è il frame destinato ad ospitare il menù. Si possono inserire tutti i frames che servono e combinarli nel più svariato dei modi a seconda delle proprie necessità, ho reso bene l'idea ?

<FRAMESET>...</FRAMESET>

L'elemento <FRAMESET> è l'elemento principale, possiede due attributi quali ROWS e COLS. Al suo interno può contenere annidati altri elementi quali <FRAMESET>, <FRAME> o <NOFRAME>.

<FRAMESET>
attributi assegnabili:
ROWS
COLS
 

ROWS

L'attributo ROWS raccoglie i valori per l'altezza della riga, quando si suddivide la finestra principale in righe. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser.

<FRAMESET ROWS="30%, 70%">

L'esempio sopra crea una cornice suddividendo orizzontalmente la finestra in due parti, la prima che occupa il 30% delle dimensioni totali lasciando il rimanente 70% alla seconda finestra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio:

<FRAMESET ROWS="150, 600">

In questo caso si avrebbero due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano. Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente. (vedi esempio sotto)

<FRAMESET ROWS="150, *">

Così facendo si otterrà un frame orizzontale di dimensione fissa di 150 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende soltanto dl monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame superiore fisso 150 pixel
Frame inferiore
che varia occupando il rimanente spazio della finestra
 

COLS

L'attributo COLS raccoglie i valori per la larghezza della colonna, quando si suddivide la finestra principale in colonne. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Praticamente valgono le stesse regole spiegate sopra, ma anzichè suddividere lo schermo in righe, lo si suddivide in colonne.

<FRAMESET COLS="25%, 75%">

L'esempio sopra crea una cornice suddividendo verticalmente la finestra in due parti, la prima che occupa il 25% delle dimensioni totali lasciando il rimanente 75% alla seconda finestra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio:

<FRAMESET COLS="150, 600">

In questo caso si avrebbero due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano. Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente. (vedi esempio sotto)

<FRAMESET COLS="150, *">

Così facendo si otterrà un frame verticale di dimensione fissa 150 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende soltanto dl monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame laterale sinistro fisso 150 pixel Frame laterale destro che varia occupando il rimanente spazio della finestra


 

<FRAME>

L'elemento FRAME definisce le proprietà del frame stesso all'interno di FRAMESET, esso ha ben 8 attributi, non necessita del relativo tag di chiusura /FRAME . Questi gli attributi possibili:

<FRAME>
attributi assegnabili all'elemento FRAME:
SRC
NAME
MARGINWIDTH
MARGINHEIGHT
SCROLLING
NORESIZE
FRAMEBORDER
FRAMESPACING
 

SRC="url"

L'attributo SRC="url" definisce l'indirizzo del file html che verrà visualizzato nella sezione frame nel frameset. Potrebbe sembrare complicato ma altro non è che il file html da visualizzare.

<FRAME SRC="nome_file.html">
 

NAME="nome_frame"

L'attributo NAME è di vitale importanza ai fini di un corretto funzionamento, serve infatti per assegnare un nome al frame stesso facendolo diventare bersaglio di collegamenti da altri frames o semplici links tramite l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai links e loro gestione. Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi. Se tutto ciò può sembrare complesso, a fine pagina un esempio riassuntivo chiarirà sicuramente meglio ogni cosa.

<FRAME NAME="TITOLO">
 

MARGINWIDTH="valore"

L'attributo MARGINWIDTH accetta valori numerici che corrispondono a pixel, forza il rientro sui lati, destro e sinistro, in base a tale valore. Non può essere impostato a zero.

<FRAME MARGINWIDTH="valore">
 

MARGINHEIGHT="valore"

L'attributo MARGINHEIGHT accetta valori numerici che corrispondono a pixel, forza il rientro sui lati, superiore e inferiore, in base a tale valore. Non può essere impostato a zero.

<FRAME MARGINHEIGHT="valore">
 

SCROLLING="yes|no|auto"

L'attributo SCROLLING serve per il controllo della barra laterale di scorrimento, quando il contenuto della pagina supera le dimensioni del frame viene visualizzata una barra di scorrimento. yes= si alla visualizzazione di questa barra, no= nessuna barra, auto= solo se il contenuto del frame la richiede.

<FRAME SCROLLING="auto">
 

NORESIZE

L'attributo NORESIZE non ha alcun parametro, se impostato evita al frame di essere ridimensionato. Diversamente saràì possibile, portando il puntatore del mouse nella divisione dei due frames, ottenere una doppia freccia di posizionamento.

<FRAME NORESIZE>
 

FRAMEBORDER="yes|no"

L'attributo FRAMEBORDER, riconosciuto dai soli browser IE, serve per rendere visibili o meno i bordi dei frames, per default si trova a YES quindi impostare no soltanto nel caso in cui non si voglia ridisegnare il bordo.

<FRAME FRAMEBORDER="no">
 

FRAMESPACING="valore"

L'attributo FRAMESPACING, riconosciuto dai soli browser IE, serve per impostare spazio aggiuntivo intorno ai frames facendoli sembrare "flottanti", il valore impostabile si riferisce al numero di pixel.

<FRAME FRAMESPACING="valore">


 

<NOFRAMES>...</NOFRAMES>

L'elemento NOFRAMES serve per creare un alternativa a quei browser che non supportano i frames. Come detto all'inizio di questo documento, non tutti i browser supportano la gestione dei frames, conviene creare un'alternativa o semplicemente un messaggio di avviso fra i tags <NOFRAMES>...</NOFRAMES>

<NOFRAMES>
Spiacente ma il tuo browser non supporta i frames, clicca su questo link per continuare
</NOFRAMES>


 

ESEMPIO

Forse un esempio pratico potrebbe chiarire ogni dubbio, diciamo subito che la struttura di un sito a frames si basa su almeno 3 pagine web:
Una per dichiararne la struttura.
Le altre due rispettivamente per i due frames.
Ipotizziamo di voler creare un sito simile a questo con un frame laterale per il menu, uno centrale principale per la navigazione, ed uno fisso in alto per eventuali sponsor, musica, informazioni varie.

Inizieremo col creare le tre pagine menu.html, home.html e sponsor.html io le ho chiamate così ma qualsiasi altro nome non cambierebbe assolutamente nulla.

Fatto questo non resta che creare la pagina per i frames che chiameremo index.html Per questa pagina valgono le stesse regole di tutte le altre pagine html, quindi avrà i tags di base quali html, body, head, title, meta e tutti gli altri eventuali.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Web-Link.it Tutto per la tua pagina web </title>
</head>

       
<FRAMESET COLS="20%,80%">

         <FRAME NAME="menu" SRC="menu.html" SCROLLING="auto">

     <FRAMESET ROWS="15%,85%">

          <FRAME NAME="sponsor" SRC="sponsor.html" SCROLLING="auto">
          <FRAME NAME="homepage" SRC="home.html" SCROLLING="auto">

     </FRAMESET>
</FRAMESET>

<body>

<NOFRAMES>
Spiacente il tuo browser non supporta i frames
</NOFRAMES>

</body>
</html>

Il listato sopra produrrà un risultato simile a questo sotto, si noti la struttura nidificata del frameset che crea a sua volta due finestre dalle due precedentemente impostate.

Frame menu Frame Sponsor
Frame Home Page



Autore del testo: Andrea Bianchi
Sito Web:
www.Web-Link.it