Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip
 


Frames o Cornici


Elementi o Tags:
Attributi:
Andrea Bianchi © www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  

I Frames Introdotti a partire dalle prime versioni dei browser, sono ad oggi messi da parte per problemi di accessibilità e non più supportati da HTML5. Sono sempre stati una facile soluzione per strutturare siti più o meno complessi. Permettono di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo rispetto alle altre. Si possono inserire tutti i frames che servono e combinarli nel più svariato dei modi a seconda delle proprie necessità. Come sempre in questi casi meglio non esagerare per non complicarsi troppo la loro gestione, quindi creare solo i frames che realmente vi servono.

Da notare che in caso di frames si dovrà usare nella sola pagina (di solito index.html) dove avviene la dichiarazione del framest, la riga di prologo <DOCTYPE adatta per i frames, come spiegato su questo link.

 


<frameset>...</frameset>

L'elemento <frameset> è l'elemento usato per settare la struttura a frames, possiede due attributi: rows e cols per suddividere in righe e colonne. Al suo interno (prima della chiusura </frameset>) può contenere annidati altri elementi quali: <frameset>, <frame> o <noframe>. Da solo serve a poco, necessita di almeno un altro elemento al suo interno che è <frame>

Il tag <frameset> non va inserito all'interno di <body> come avviene per tutti gli altri elementi (tags) di html, caso più unico che raro non va inserito neppure in <head>. Questo tag va inserito subito dopo la chiusura di </head> ed in questo caso la struttura della pagina non necessita di alcun <body> a meno che non si faccia uso dell'attributo <noframes> spiegato più avanti.

<frameset attribut...>

attributi assegnabili all'elemento frameset: rows,cols




 

rows

L'attributo rows specifica 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 esatto di pixel mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Esiste anche l'asterisco * che significa tutta la porzione di schermo.

<frameset rows="30%, 70%">

L'esempio sopra crea due frames (cornici) suddividendo la finestra del browser in orizzontale, il frame in alto occupa il 30% delle dimensioni totali lasciando il rimanente 70% al secondo frame in basso, Aumentando o riducendo le dimensioni della finestra del browser, questi due frames si allungano o si accorciano mantenendo le proporzioni specificate: 30 e 70%.

Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si imposta un numero fisso di pixel dello schermo. Queste dimensioni restano fisse indipendentemente da quelle della finestra del browser, vediamo un esempio:

<frameset rows="180, 600">

In questo caso si hanno sempre due frames ma con dimensioni fisse: 180 e 600 px indipendentemente dalla dimensione dalla finestra del browser che le visualizza. Così facendo si andranno a penalizzare tutte le risoluzioni grafiche più grandi e più piccole di quelle da noi impostate. Per evitare questo rischio è possibile adoperare il carattere * (asterisco) che fa da jolly, praticamente imposta la massima dimensione rimanente. (vedi esempio sotto)

<frameset rows="180, *">

Così facendo si otterrà un frame orizzontale con dimensione fissa di 180 pixel lasciando per il secondo frame tutto lo spazio rimanente della finestra del browser, qualsiasi esso sia, è ovvio poi che la porzione dei dati visualizzati dipenderà dalla risoluzione grafica adoperata dal visitatore. L'esempio sotto ha come scopo soltanto quello di rendere l'idea di come avviene la suddivisione.


Frame superiore fisso: 180 pixel






Frame inferiore variabile: *
dipende dalle dimensioni della finestra del browser.







 

cols

L'attributo cols specifica 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 esatto di pixel mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Esiste anche l'asterisco * che significa tutta la porzione di schermo.

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

L'esempio sopra sopra crea due frames (cornici) suddividendo la finestra del browser in verticale, il frame a sinistra occupa il 25% delle dimensioni totali lasciando il rimanente 75% al secondo frame a destra.

Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si imposta un numero fisso di pixel dello schermo. Queste dimensioni restano fisse indipendentemente da quelle della finestra del browser, vediamo un esempio:

<frameset cols="220, 600">

In questo caso si hanno sempre due frames con dimensioni fisse: 220 e 600 px indipendentemente dalla dimensione dalla finestra del browser che le visualizza. Così facendo si vanno a penalizzare le risoluzioni grafiche più grandi di quelle da noi impostate. Per evitare questo rischio è possibile adoperare il carattere * (asterisco) che fa da jolly, praticamente imposta la massima dimensione rimanente. (vedi esempio sotto)

<frameset cols="220, *">

Così facendo si otterrà un frame verticale di dimensione fissa di 220 pixel lasciando per il secondo frame tutto lo spazio rimanente della finestra del browser, qualsiasi esso sia, è ovvio poi che la porzione dei dati visualizzati dipenderà dalla risuluzione grafica adoperata dal visitatore. L'esempio sotto ha come scopo soltanto quello di rendere l'idea di come avviene la suddivisione.

Frame laterale sinistro fisso: 220 pixel



Frame laterale destro variabile: *
dipende dalle dimensioni della finestra del browser.








 

<frame>

L'elemento <frame> definisce le proprietà del frame vero e proprio all'interno di frameset. Questo tag non necessita del relativo tag di chiusura </frame>. Questi gli attributi possibili:

<frame attribut...>

attributi assegnabili all'elemento frame:

src, name, marginwidth, marginheight, scrolling, noresize, frameborder



 

src

L'attributo src definisce il nome del file che dovrà essere richiamato e quindi visualizzato nel frame di frameset. Se questo file non si trova nella stessa cartella, è possibile farlo precedere dal nome del percorso (path) o dall'URL completo sul quale si trova.

<frame src="nome_file.html">


 

name

L'attributo name (da non confondere con nome) è di vitale importanza al fine di una corretta gestione di tutta la struttura. Serve per assegnare un nome univoco al frame stesso potendo così richiamarlo come frame di destinazione nell'apertura dei collegamenti (links) presenti su altre pagine, si veda a questo proposito l'uso di target spiegato in questa sezione riguardante i links .

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 ad un principiante, e non lo è, a fine pagina trovate un esempio riassuntivo che chiarirà al meglio ogni cosa.

<frame src="..." name="xxxxx">


 

marginwidth

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

<frame... marginwidth="valore">


 

marginheight

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

<frame... marginheight="valore">


 

scrolling

L'attributo scrolling serve per visualizzare la barra laterale di scorrimento. Quando il contenuto della pagina supera le dimensioni del frame viene visualizzata una barra di scorrimento, questi i valori ammessi: yes= si, visualizza questa barra, no= nessuna barra, auto= visualizzala solo se il contenuto del frame la richiede in base alle dimensioni dei contenuti rispetto alla finestra del browser.

<frame... scrolling="auto">


 

noresize

L'attributo noresize non ha alcun parametro, se inserito evita al frame di poter essere ridimensionato. Diversamente sarà possibile, portando il puntatore del mouse nella divisione dei due frames, ottenere un puntatore a forma di doppia freccia che consentirà di modificare le dimensioni prestabilite.

<frame noresize>


 

frameborder

L'attributo frameborder, serve per rendere visibili o meno i bordi dei frames, per default si trova a 1 quindi impostare 0 soltanto nel caso in cui non si voglia visualizzare il bordo.

<frame frameborder="0">



 

<noframes>...</noframes>

L'elemento noframes serve per creare un alternativa per quei browser che non supportano i frames. Ad oggi è difficile anche solo pensare che vi siano ancora browser così obsoleti da non riconoscere i frames. Alcuni motori di ricerca si fermano di fronte ad un frame, in questo caso potranno proseguire da quello che avrete inserito 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 chiarirà ogni dubbio, diciamo subito che la struttura di un sito a frames si basa su almeno 3 pagine web:
Una solo ed esclusivamente per dichiararne la struttura.
Le altre due rispettivamente per i due frames dichiarati.

Ipotizziamo di voler creare un sito con tre frames: uno laterale per il menù, uno centrale principale per la navigazione, ed uno fisso in alto per eventuali banner pubblicitari o informazioni varie.

Inizieremo col creare le tre pagine menu.html, home.html e sponsor.html le ho chiamate così ma qualsiasi altro nome non farebbe alcuna differenza.

Fatto questo non resta che creare la pagina dove viene dichiarata la struttura a frames, io la chiamerò index.html Per questa pagina valgono le stesse regole di tutte le altre pagine html, quindi avrà i tags di base quali: doctype, html, head, title, metatags, body e tutti gli altri eventuali. Attenzione al doctype che dovrà essere quello per frames

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Web-Link.it Tutto per la tua pagina web </title>
</head>

<frameset cols="120, *">

         <frame name="menu" src="menu.html" scrolling="auto">

     <frameset rows="150, 650">

          <frame name="sponsor" src="sponsor.html" scrolling="auto">
          <frame name="homepage" src="home.html" scrolling="auto">

     </frameset>

<noframes>
<body>
<p>spiacente il tuo browser non supporta i frames</p>
</body>
</noframes>

</frameset>

</html>

Il listato sopra produrrà un risultato simile a questo sotto. Si noti la struttura nidificata del frameset che crea due frame laterali ed all'interno del secondo frameset ne imposta un altro.

Frame menù

Frame Sponsor











Frame Home Page











E' possibile vedere su questo link 18 schemi di strutture a frames combinate nelle più comuni disposizioni. Basterà selezionare il codice html già pronto ed incollarlo nella vostra pagina web. Voglio sperare che lo facciate soltanto per apprendere e verificare il codice e non per copiarlo spudoratamente :)



Torna su

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi