|
I Frames ovvero i riquadri, le cornici.
Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per realizzare il proprio sito, i più impazienti potranno saltare alla lezione 10 dedicata alla pubblicazione in rete del lavoro svolto fino a questo momento.
Gli altri proseguiranno con questa lezione leggermente più complessa delle altre e dedicata ai frames. 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.
I Frames o cornici altro non sono che una suddivisione della 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
in termini pratici 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 esempi possibili:
varie
voci
del
Menù |
Finestra Principale |
Con menù laterale, oppure:
| varie voci del Menù |
| Finestra Principale |
Con menù superiore.
Quale dei due schemi adottare dipende soltanto 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
solo codice per la struttura dei frames. Questa nuova pagina richiamerà 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.
Per prima cosa si preparano le due pagine che servono: menu.html e principale.html, potete adoperare qualsiasi altro nome, l'importante
è ricordarsi di cambiare poi i riferimenti laddove io ho adoperato questi
due nomi.
A questo punto se avete chiamato index.html il lavoro svolto fino
ad ora, rinominatelo in principale.html e andiamo a creare la nuova 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>
Si avete capito bene, i frames non vanno inseriti dentro alla testa
<head> ne dentro al corpo <body> della pagina ma in mezzo,
esattamente dove finisce la testa ed inizia il suo corpo.
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 possono
essere contenuti annidati altri elementi, quali eventuali 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 presuppongono 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, a questo proposito vi rimando alla mia guida html alla voce frames. 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>
Salvate la pagina contenente il codice col nome index.html. Vorrei
sottolineare che il frameset non è all'interno del tag body e
neppure all'interno del tag head ma è stato scritto dopo la chiusura di head, praticamente questo dei frames è l'unico codice che non viene inserito in nessuna delle due sezioni ( head o body) come spiegato all'inizio di questa
rubrica 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
ma 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 di menù, i links di questo menù dovranno però aprire la pagina ad essi
associata nella finestra principale
e non certo nel piccolo frame del menù stesso sul quale si trovano. Per fare si che questo avvenga si dovrà aggiungere al link
l'attributo target (bersaglio
o destinazione) specificando il nome del frame (name) sul quale aprire il link richiamato, quindi:
<A HREF="nomepagina.html" target="principale">
Questo link ha in più rispetto a quelli visti nella lezione links, l'attributo target che soltanto adesso ha ragione di esistere, dal momento che abbiamo una struttura con più di una
sola finestra, possiamo infatti decidere su quale di queste due finestre aprire il link, per farlo basta semplicemente specificare il nome del frame
assegnato precedentemente in fase di struttura, il famoso nome assegnato a name
che diventa poi anche il nome 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, una volta
acquisita una certa dimestichezza, alla voce F.A.Q di questo mio sito troverete ulteriori informazioni per una gestione ottimizzata dei frames.
Su questo link. è possibile vedere ben 18
schemi di frames diversi e selezionare il codice html già
pronto per quello che potrebbe servirvi, voglio sperare che lo facciate soltanto per apprendere e verificare il codice
adoperato e non per copiarlo spudoratamente :-)
Con questa lezione avete imparato a gestire il vostro sito adoperando più di una sola pagina web contemporaneamente.
Molte persone manifestano una certa diffidenza alla gestione del sito con i frames, non ho mai capito il motivo, forse hanno incontrato problemi
o difficoltà dovuti ad una certa pianificazione degli stessi, personalmente li trovo molto utili e per niente
complicati da gestire, in alcuni casi sono addirittura l'unica soluzione possibile.
Per esperienza consiglio di usare una dichiarazione fissa del
tipo:
<frameset cols="150,*"> al posto di quella riportata
nell'esempio ed espressa in percentuale, è decisamente
migliore e garantisce una buona visone a qualsiasi risoluzione
grafica, evitando così che a risoluzioni diverse si vedano frames
di dimensioni esagerate o sacrificati oltremisura.
Nella prossima lezione vedremo le tabelle, che a differenza di quanto potrebbe sembrare dal nome, non servono solo per
ordinare ed incolonnare dati, ma anzi, molto spesso sono adoperate per scopi
completamente diversi, come
per esempio il posizionamento degli elementi di html quali testo ed
immagini in modo tale da
poterli facilmente disporre secondo precisi schemi di pianificazione.
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e
aperto a tutti.
Potete fare domande e discutere l'argomento sul Forum
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
