|
Guida HTML 4.01 - Ver. 5.7.9 - Ottobre 2009 Ver. 1.0 - Settembre 1998
I Frames Introdotti a partire dalla versione 2 di NS e 3 di IE, sono ancora oggi un'ottima 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. Il mio sito: www.web-link.it ne è un chiaro esempio dimostrativo. A destra il frame principale, il più grande, dove visualizzare le pagine degli argomenti. A sinistra centrale il frame per il menù formato da decine di voci. A sinistra in alto il piccolo frame per la musica. 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 dove avviene la dichiarazione del framest una riga <DOCTYPE adatta per i frames, come spiegato su questo link.
<FRAMESET>...</FRAMESET>
L'elemento <frameset> è l'elemento principale, possiede due attributi: rows e cols. Al suo interno può contenere annidati altri elementi quali <frameset>, <frame> o <noframe>.
Da solo serve a poco, necessita di almeno un elemento <frame>
Questo elemento non va inserito all'interno del body come avviene per tutti gli altri elementi di html, caso più unico che raro non va inserito neppure in head. Questo elemento in una pagina web 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 ... >
attributi assegnabili:
</frameset> |
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. Esiste anche l'asterisco * che significa tutto il rimanente della porzione di schermo.
|
<frameset rows="30%, 70%">
|
L'esempio sopra crea due frames (cornici) suddividendo orizzontalmente la finestra del browser, la prima in alto che occupa il 30% delle dimensioni totali lasciando il rimanente 70% alla seconda finestra in basso.
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="180, 600">
|
In questo caso si hanno sempre due frames con dimensioni fisse: 180 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)
Così facendo si otterrà un frame orizzontale di dimensione fissa di 180 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende dal 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: 180 pixel
|
Frame inferiore variabile: *
dipende dalle dimensioni della finestra del browser.
|
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. Esiste anche l'asterisco * che significa tutto il rimanente della porzione di schermo.
|
<frameset cols="25%, 75%">
|
L'esempio sopra crea due frames (cornici) suddividendo verticalmente la finestra del browser, la prima a sinistra che occupa il 25% delle dimensioni totali lasciando il rimanente 75% alla seconda finestra a destra.
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="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)
Così facendo si otterrà un frame verticale di dimensione fissa di 220 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende dal 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: 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, non necessita del relativo tag di chiusura /frame. Questi gli attributi possibili:
SRC="url"
L'attributo src="url" definisce l'indirizzo del file che verrà richiamato e quindi visualizzato nel frame di frameset. Potrebbe sembrare complicato ma altro non è che il nome del file html da visualizzare, con o senza un eventuale percorso (path) per raggiungerlo.
|
<frame src="nome_file.html">
|
NAME="nome_frame"
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 nei links spiegati in questa sezione.
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, e non lo è, a fine pagina trovate un esempio riassuntivo che chiarirà al meglio ogni cosa.
|
<frame src="..." name="xxxxx">
|
MARGINWIDTH="valore"
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="valore"
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="yes|no|auto"
L'attributo scrolling serve per visualizzare 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 visualizza questa barra, no= nessuna barra, auto= 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.
FRAMEBORDER="1|0"
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.
<NOFRAMES>...</NOFRAMES>
L'elemento noframes serve per creare un alternativa per quei browser che non supportano i frames. Ad oggi mi resta 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 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, musica, informazioni varie ecc.
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 :)
|
