Il tag <FRAMESET> esegue tutte le divisioni. E' tutto e solo ciò che fa... divide in windows. Può specificare alcune cose su come dividerle, ma ricorda: ogni volta che tu devi fare qualcosa che è dividere usa <FRAMESET>.
<FRAMESET COLS="20%,20%,20%,20%,20%">
Naturalmente è ovvio che possiamo dividere in frames di differente misura. Devi solo fare attenzione che il conto aritmetico sia corretto, altrimenti il browser tenterà di compensare le mancanze e gli errori con la sua aritmetica.
<FRAMESET COLS="10%,20%,30%,15%,25%">
Se specifichiamo di dividere in righe (ROWS) anzichè colonne (COLS) otteniamo qualcosa di completamente diverso.
<FRAMESET ROWS="10%,20%,30%,15%,25%">
Torniamo ai nostri 2 frames, divisi equamente in colonne.
<FRAMESET COLS="50%,50%">
Possiamo specificare 50 pixels invece del 50%. E possiamo usare * al posto dei numeri. Il significato di * è "ciò che resta".
<FRAMESET COLS="50,*">
Tutto questo è causa di problemi comuni con i frames, tanto che vorrei spenderci qualche altro momento di attenzione. Una disposizione di frames molto popolare consiste nel mettere una piccola window come indice sulla sinistra ed una grande window principale sulla destra come in quest'esempio. Ecco il problema... Se dividi le windows usando le percentuali (come per esempio <FRAMESET COLS="15%,85%">) ogni cosa probabilmente sembrerà a posto per te. Ma... a qualcuno con una differente risoluzione di schermo potrebbe apparire come questo.
Il motivo per cui ciò accade è che hai specificato che la window di sinistra debba essere del 15%. 15% di cosa? 15% della risoluzione orizzontale dello schermo qualunque essa sia. Ciò significa che la window di sinistra potrebbe apparire un po' diversa per navigatori differenti. Chiedi come risolvere il problema? Felice che tu lo abbia chiesto... Semplicemente usa una misura assoluta per la window di sinistra e rendi la window destra elastica (ad esempio con <FRAMESET COLS="120,*">). Bingo. Problema risolto.
E' una buona idea stabilire le misure assolute un po' più grandi di quanto sia realmente necessario. Date a quella window di sinistra un po' di respiro. Per esempio, se 100 pixels danno una buona vestibilità anche se troppo precisa... fate la window 120 o 125 pixels.
Un ottimo sistema per provare il vostro layout senza panico ad un paio di risoluzioni di schermo differenti è offerto da un piccolo e grazioso PowerToy della Microsoft chiamato Quickres.
Possiamo poi avere più di un frame da un lato solo e specificare la relazione fra essi.
<FRAMESET COLS="50,*,2*">
E' importante notare che tutte le cose sono fatte secondo il loro ordine. Il primo <FRAME> viene mostrato in accordo alla misura indicata nel tag <FRAMESET> (50/lisa) ed il secondo col secondo (*/terri) ed il terzo con il terzo (2*/kim). So che questo può essere ovvio, ma è veramente importante ed ho voluto spendere qualche parola in più su questo.
Che ne dici di dividere Kim a metà orizzontalmente? Ricordati che ho detto che se vuoi dividere devi usare il tag <FRAMESET>. Per prima cosa dobbiamo sostituire Kim con un'altra coppia di tags <FRAMESET>.
<FRAMESET COLS="50,*,2*">
Andiamo a dividerlo orizzontalmente.
<FRAMESET COLS="50,*,2*">
Ed io penso che ci convenga mettere di nuovo Kim in alto e Tina in basso. E questo è tutto.
<FRAMESET COLS="50,*,2*">
Questo è carino, tanto che penso sia meglio farlo di nuovo! Dividiamo Lisa orizzontalmente in 3 parti. La finestra superiore la rendiamo alta 50 pixels. Le altre due le dividiamo in maniera uguale. Metteremo Lisa in tutte e tre. Ecco tutti i cambiamenti in un colpo solo.
<FRAMESET COLS="50,*,2*">
Bene, è tempo di pensare anche a quei poveretti che usano browsers che non fanno vedere i frames. Sebbene molti, se non tutti i visitatori, saranno in grado di vedere i frames, c'è sempre una sparuta minoranza che insiste nell'usare il web con programmi obsoleti. Se vuoi aiutare queste persone puoi scrivere una versione senza frames della pagina principale ed aggiungerla direttamente...
<FRAMESET COLS="50,*,2*">
Possiamo dividere in più di 2 parti? Certo, sii solo sicuro di specificare una pagina per ogni sezione, o il browser si potrebbe confondere.
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
<FRAME SRC="shannon.html">
</FRAMESET>
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
<FRAME SRC="shannon.html">
</FRAMESET>
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
<FRAME SRC="shannon.html">
</FRAMESET>
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
</FRAMESET>
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
</FRAMESET>
Ecco un punto importante.. Supponiamo che tu faccia un frame largo 100 pixels sulla sinistra e 100 pixels sulla destra. Se usi una risoluzione di schermo di 800x600 hai costruito una terza area centrale larga 600 pixels. Ogni cosa funziona correttamente... per te. Il mio schermo è settato a 640x480. Quei frames larghi 100 pixels che tu hai messo nella tua pagina sono ora larghi 80 pixels sul mio schermo. Se usi qualche misura assoluta nei tuoi tags <FRAMESET> ricordati di mettere SEMPRE almeno un * come frame elastico. In questo modo ogni cosa apparirà bene ad ognuno e saremo di nuovo tutti d'amore e d'accordo.
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAME SRC="kim.html">
</FRAMESET>
Tradotto questo significa: Fai 3 frames. Rendi il primo frame largo 50 pixels. Il resto dividilo fra il frame 2 ed il frame 3 ma rendi il frame 3 grande il doppio del frame 2. Metti Lisa nel primo frame, Terri nel secondo e Kim nel terzo.
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
</FRAMESET>
</FRAMESET>
<FRAME SRC="lisa.html">
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
<FRAMESET ROWS="50,*,*">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
So che può apparire non molto graziosa. Attualmente se una pagina è divisa troppo può apparire un po' stramba. Una buona regola è di non avere più di 3 frames sulla pagina. Se poi si possono evitare tutte, è meglio ancora.
<FRAMESET ROWS="50,*,*">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="kim.html">
<FRAME SRC="tina.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Metti il testo della versione senza frames qui. Se qualcuno sta usando un vecchio
browser, questo salterà tutto quello scritto sopra ed arriva proprio
qui. I browsers che leggono i frames ignoreranno invece quello che c'è tra
i tags <NOFRAMES>. Qui puoi scrivere un paio di domande.
Ho scritto un'intera pagina a vuoto? Probabile.
Quanta gente non vedrà la pagina se non scrivo questa parte? Molto poca
Pensi che dovrei scusarmi con loro per questo? Proprio no.
Ti vuoi scusare tu per questo? Proprio no.
Perchè l'hai messo in questo tutorial? Perchè è una caratteristica principale
e volevo che tu almeno la conoscessi.
Sarai sempre affascinante? Naturalmente.
</BODY>
</NOFRAMES>
Nota- A parte la mia personale opinione, ci sono forti motivi per usare il tag <NOFRAMES>. I vecchi browsers che non visualizzano i frames sono usati da pochi in siti o in operazioni commerciali. Il lettore sfortunato passa veramente un brutto quarto d'ora con i frames. E quelli fuori dagli States sono spesso fuori dalle pagine con frames per varie ragioni. La ragione di fondo è: se la pagina è "frames only" taglierai fuori alcune persone. Se questo è importante per te per raggiungere chiunque, allora è meglio che ti prendi il tempo necessario ad aggiungere i tags <NOFRAMES>. -----I miei ringraziamenti a Matthew Miller, dell'HTML Writers Guild per queste specifiche.
| Introduzione | Lezione 1 | Lezione 2 | Lezione 3 | Lezione 4 | Lezione 5 | Lezione 6 | Lezione 7 |