Se
il sito è formato da diversi argomenti, presto si avvertirà la necessità
di usare un menù, questo sia per agevolarne la navigazione che per dare
subito l'idea di quali siano i contenuti trattati. Per fare questo si ricorre
alla tecnica dei frames.
Frames o cornici. Si tratta di suddividere
la finestra principale del browser in modo tale che nella stessa ci siano due
o più finestre. Quante e come disporle dipende soltanto da noi, dal nostro
progetto e dalla sua organizzazione. Non esistono limiti se non quelli del buon
gusto e della praticità d'uso, che tradotta significa: semplicità
di navigazione.
In molti casi sono sufficienti due sole cornici (frames),
una laterale o superiore dove inserire il menù e l'altra la vera e propria
finestra di navigazione, quella principale. Per dare meglio l'idea vediamo un
paio di possibili esempi :
varie
voci
del
Menù | Finestra
Principale |
Con menù laterale, oppure:
| varie
voci del Menù |
| Finestra
Principale |
Con
menù superiore.
Quale dei due adottare dipende solo da noi, da come si è deciso di organizzare
il sito, in tutti i casi bisognerà creare una nuova pagina html che contenga
al suo interno il codice per la struttura dei frames. Questa nuova pagina richiamarà
all'interno di se stessa tutte le altre pagine ( in questo caso due) che si disporranno
affiancate, verticalmente oppure orizzontalmente. Di solito questa pagina si chiama
index.html, la pagina iniziale del sito, ma niente e nessuno vieta di fare in
modo che una struttura a frames derivi invece da un link di una pagina qualsiasi
del nostro sito, diversa da quella principale.
Per
prima cosa si preparano le due pagine: menu.html e principale.html,
potete adoperare qualsiasi altro nome, se lo fate l'importante è poi ricordarsi
di cambiare i riferimenti laddove io ho adoperato questi miei.
A
questo punto creiamo la pagina index.html, portatevi col cursore subito sotto
il tag </head>, inserite il nuovo elemento (tag) che serve per dichiarare
una struttura a frames :
<frameset>
L'elemento <FRAMESET> è uno di quei tags che da soli non
dicono niente, necessita di almeno uno dei suoi due attributi: ROWS o COLS
che servono rispettivamente per suddividere la finestra in righe o in colonne.
Al suo interno può contenere annidati altri elementi, quali altri <FRAMESET>
nel caso di suddivisioni multiple e complesse, oppure <FRAME> e/o <NOFRAME>.
Supponendo
di dover dividere la finestra in modo verticale adopereremo:
<FRAMESET
COLS="25%, 75%">
</frameset>
Assegnando
in questo caso il 25% dello spazio al frame piccolo per il menù, ed il
restante 75% alla finestra principale. Potremo adoperare anche valori fissi, espressi
in pixel, nel caso in cui si debbano rispettare delle misure ben precise, senza
mantenere le proporzioni dovute alla risoluzione video del visitatore.
Una volta stabilite nel frameset le dimensioni della suddivisione, si dovranno
richiamare i due files preparati precedentemente e cioè : menu.html e principale.html
in questo modo:
<frame name="menu"
src="menu.html">
<frame name="principale" src="principale.html">
L'elemento
o tag "frame" ha diversi attributi, più o meno utili e necessari,
due sono indispensabili: name che identifica il nome del frame, in modo
da poter visualizzare su quel frame un link proveniente da un frame diverso, e
src (source) che invece richiama la pagina html vera e propria.
Dal momento che i frames preuppongono una divisione, dovremo decidere se la cornice
divisoria deve essere visibile oppure no, se poi il contenuto del frame menù
fosse piuttosto ricco di voci, dovremo prevedere anche un'eventuale barra di scorrimento
verticale, tutti questi parametri sono opzionali e dipendono soltanto dalle nostre
intenzioni. Per il momento quello che ci serve è una struttura di questo
tipo:
<html>
<head>
<title>Struttura per frames</title>
</head>
<frameset cols="25%, 75%">
<frame name="menu" src="menu.html" scrolling="auto">
<frame name="principale" src="principale.html"
scrolling="auto">
</frameset>
<body>
<noframes>
Spiacente, il tuo browser non supporta i
frames.
</noframes>
</body> </html>
Notate
che i tags che definiscono la struttura a frames non si trovano ne all'interno
della zona <head> </head> ne all'interno della zona <body> </body>,
sono gli unici che si comportano a questa maniera, ricordatevelo.
Salvate
la pagina contenente il codice sopra col nome index.html. Da notare che
non c'è alcun tag body e che il codice è stato scritto dopo la chiusura
di head e non al suo interno, praticamente questo dei frames è l'unico
codice che non viene inserito in nessuna delle due sezioni ( head o body) come
spiegato all'inizio di questo corso.
Se avete salvato come index.html non
resta che provare a vedere cosa succede: richiamate il file appena memorizzato
dall'interno del browser, se avete preparato precedentemente i due files: menu.html
e principale.html questi saranno visualizzati contemporaneamente, uno di
fianco all'altro e nella stessa finestra. Ricordatevi i nomi che avete assegnato
ai vostri frames, e per nomi intendo quelli specificati nell'attributo name,
saranno questi nomi che se dichiarati all'interno dell'attributo target
di un link, decideranno su quale dei due frames aprire il link stesso.
Difficile? Un esempio chiarirà sicuramente meglio.
Se avete deciso
di avere due frames è molto probabile che uno di questi due debba fare
funzioni da menù, i links di questo menù dovranno però aprire
la pagina ad essi associata, nella finestra principale. Per fare si che questo
avvenga si dovrà aggiungere al link stesso l'attributo target (bersaglio)
specificando il nome del frame (target) sul quale aprire il link richiamato, quindi:
<A
HREF="nomepagina.html" target="principale">
Questo link ha in più rispetto a quelli visti nella lezione sui
links, l'attributo target che soltanto adesso ha ragione di esistere, dal
momento che abbiamo una struttura con più di una finestra, possiamo infatti
decidere su quale di queste due finestre aprire il link, per farlo basta semplicemente
specificare il nome del frame nell'attributo target.
C'è anche
la possibilità di aggiornare contemporaneamente due frames cliccando su
un solo link, oppure aprire il link su una nuova finestra del browser. Lasciate
da parte per il momento queste possibilità, è sufficiente sapere
che esistono.
I frames
<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)
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)
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:
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.
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.
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.
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.
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 |
Torna
all'inizio della pagina | Stampa
la pagina
