3- I FRAMES
Dite la veritα, ormai non ci speravate pi∙ vero? E invece, a
costo di ritardare clamorosamente la data di chiusura di TGM,
ecco a voi una guida sensata (beh, oddio...) e soprattutto
ragionata (palla clamorosa!) al confezionamento dei frames, detti
anche ‘cornici’ dagli amanti della Bella Lingua. Cosa
siano essi, dovreste proprio saperlo, a meno che vi ostiniate
ancora oggi ad usare la versione 0.5 di Netscape Navigator o di
Internet Explorer: in questo caso, avete due possibilitα, o
procedete a un download della versione pi∙ recente di Explorer
(http://www.microsoft.com) oppure vi tirate gi∙ l’ultima
release di Netscape Navigator (http://www.netscape.com. Mentre
scrivo siamo ancora alla 3.01 in Italiano, ma va necessariamente
detto che esiste la beta release 2 di Communicator, che comprende
anche Navigator 4.0: con esso, potrete fare finalmente tutto
quello che facevate con Internet Explorer 3, contenti?), visto
che col vostro Browser attuale non potrete pi∙ vedere altro che
qualche directory FTP, e magari nemmeno quella. Il mondo del WEB
Φ in costante aggiornamento e gli effetti grafici migliori si
pagano con il download continuato dei browser pi∙ aggiornati.
Comunque sia, visto che ormai il filo del discorso principale si
Φ perduto irrimediabilmente per sempre, riprendiamolo da capo: i
frames, che lo sappiate o meno (e in tal caso ve lo dico io),
sono in sostanza quelle "sottofinestre" in cui alcune
pagine web suddividono la finestra principale del vostro browser.
L’uso di questa tecnica Φ ormai diffusissimo, e
d’altronde non poteva essere altrimenti, vista la sua
indubbia utilitα. Ovviamente, quando s’introduce un
concetto nuovo, non possono mancare le "leggi del
Paolone", quelle che di punto in bianco inserisco nel testo
quasi fossero Veritα Supreme e inappellabili. Ma d’altronde
non Φ cos∞ per la maggior parte delle cose che s’imparano
a scuola dalle arcigne professoresse di Latino?
1. I frame salvano la vita del webmaster solo qualora li
sappia usare in modo intelligente
2. mettere i frame solo per stupire Φ controproducente
Il rischio che si corre, infatti, Φ come sempre quello di
esagerare: pagine suddivise in cinquantun finestrelle con tanto
di bordi, barre di scorrimento, fondini, colori e via dicendo,
pi∙ che essere inutili, sono un vero e proprio strazio sia da
vedere sia da gestire, e non c’Φ niente di meglio che una
pagina strutturata con troppi frame per indurre
l’occasionale visitatore a premere il tasto
"Indietro" del browser. Il fatto Φ che, come
intuibile, pi∙ si suddivide lo schermo, minore sarα lo spazio a
disposizione di ogni singola finestrella, con tutte le
conseguenze del caso. Diciamo quindi subito che, prima di
codificare una pagina strutturata a cornici, Φ sempre meglio
munirsi di carta, penna e righello, con cui mettere gi∙ le
proprie idee su un foglio, magari a quadretti o millimetrato. Una
volta che abbiamo bene in testa ci≥ che vogliamo fare, possiamo
finalmente caricare il solito editor di testi e buttare gi∙
qualche riga in HTML.
<HTML>
<HEAD>
<TITLE> iniziamo </TITLE>
</HEAD>
<FRAMESET ROWS=
"25%,*">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Chi, in questi mesi, ha seguito i miei deliri con la
dovuta attenzione, dovrebbe essersi subito accorto di un paio di
stranezze. La prima, ovviamente, Φ l’apparizione di tutta
una serie di tag nuove ("frame, frameset, si chi sun cui
r≥b l∞?" direbbe il milanese tipo), e la seconda... no...
fermi un attimo... la seconda dovete dirmela voi! Osservate bene
e noterete che manca qualcosa... ci siete arrivati? Ok, comunque
sia, si tratta della dichiarazione di corpo: semplicemente non
c’Φ e non ci deve essere, perchΘ i tag <frameset>
sostituiscono a tutti gli effetti i tag <body>. Qualora
inseriate la dichiarazione di corpo, otterrete un documento
perfettamente leggibile con Internet Explorer, ma Netscape
Navigator si rifiuterα in tutti i modi di visualizzarlo. Quindi
eliminate i <body> senza esitazioni, in fondo non sono
quella grave perdita...
Comunque sia, il comando <frameset> dichiara apertamente
che, con questo documento HTML, intendiamo solamente suddividere
la finestra del browser nel modo che riteniamo opportuno.
Effettivamente, quasi mi scordavo di dirvi una cosa
importantissima: quando intendiamo usare i frames, dobbiamo
pensare che, al posto di gestire un solo documento HTML, ne
dovremo gestire uno diverso per ogni finestrella. Il primo file
(chiamiamolo frames.htm) serve SOLO ed ESCLUSIVAMENTE a preparare
il browser e a fargli caricare i documenti necessari. Quindi, se
intendiamo suddividere la finestra del Netscape (o di Explorer)
in due frames, dovremo scrivere TRE documenti diversi:
1░ Il file preparatorio o "dichiarazione"
2░ il documento da visualizzare nel primo frame
3░ il documento da visualizzare nel secondo
Il primo andrα ovviamente a caricare gli altri due. Ma torniamo
a bomba sul nostro esempio di prima: come noterete, il comando
<frameset> vanta addirittura un parametro, detto ROWS, che
a sua volta dispone di un paio di attributi. A cosa servono
questi ultimi tre elementi? Beh, ROWS spiega al browser che vuole
suddividere la finestra corrente in righe, mentre i due attributi
ne specificano l’altezza. In questo caso, il primo frame
andrα ad occupare il 25% dell’altezza globale della
finestra del browser, mentre il resto sarα lasciato al secondo.
Se noi avessimo inserito COLS al posto di ROWS, la suddivisione
sarebbe avvenuta verticalmente, in colonne. Un esempio di
suddivisione verticale potete osservarlo - come sempre - su
Zzap!, o, perchΘ no, presso la mia home page (devo ripetervi
ancora l’indirizzo? Uffa! VabbΘ,
http://philos.unipv.it/paolone). I dati dei parametri possono
essere specificati: 1) in pixel, 2) in percentuale, 3) in
wildcard. I primi due sistemi non necessitano certo di
spiegazioni, le wildcard invece possono essere interessanti per
la loro comoditα.
<FRAMESET COLS= "120,*">
Apre un primo frame largo 120 pixel, e lascia tutto il
resto della finestra al secondo.
<FRAMESET COLS= "3*,*">
Apre un primo frame largo ╛ dello schermo, e lascia
l’ultimo quarto al secondo: 3* singifica, appunto, *
moltiplicato per 3. Ovviamente scrivere COLS= "*,*">
significa nΘ pi∙ nΘ meno suddividere il browser a metα. In
quest’ultimo caso avremmo potuto anche scrivere
"50%,50%" che sarebbe stata la stessa cosa.
<FRAMESET ROWS= "32,25%,*">
Apre tre finestre orizzontali, la prima alta 32 pixel,
la seconda un quarto dello schermo, e lascia il resto alla terza.
Come vedete, potete esprimervi come volete con la massima
libertα. Cercate di usare meno attributi "assoluti"
(dimensioni in pixel) possibile, lasciando questa possibilitα
solo agli scopi particolari.
Altri parametri interessanti per <frameset> sono quelli che
conferiscono alle nostre cornici l’aspetto che desideriamo:
BORDER (Netscape) e FRAMESPACING (Explorer) specificano la
larghezza in pixel del bordo della cornice, esattamente come
potrebbe avvenire per le <table>: siccome noi vogliamo
ottenere gli stessi risultati con entrambi i browser, qualora
servisse conferire un determinato spessore a un bordo Φ meglio
usare entrambi gli attributi, assegnando loro il medesimo valore.
Va inserito, cioΦ, un ipotetico <frameset cols=
"120,*" border=5 framespacing=5> e non uno solo di
essi. BORDERCOLOR specifica (con la solita notazione esadecimale)
il colore del bordo e FRAMEBORDER stabilisce se Φ il caso di
metterlo o no. Frameborder accetta come valori "YES" e
"NO". Eliminare il bordo pu≥ creare effetti
interessanti e mascherare la presenza eccessiva di cornici sullo
schermo.
Veniamo cos∞ alla seconda "brutta bestia" del nostro
esempio: il tag <frame>. Questo altro non fa che aprire,
appunto, il frame che abbiamo dichiarato con <frameset>.
Una volta aperto un frame, potremo suddividerlo a sua volta in
altri frame, semplicemente adducendo un nuovo <frameset> e
annidandolo nel codice come si fa con le tabelle. Volete un
esempio? Eccovi accontentati...
<FRAMESET COLS= "*,*">
<FRAME>
<FRAMESET ROWS= "*,*">
<FRAME>
<FRAME>
</FRAMESET>
<FRAME>
</FRAMESET>
Questo non fa altro che suddividere lo schermo in tre porzioni
diverse.
Come sempre, Φ opportuno accompagnare i nostri <frame> con
qualche attributo.
NAME: Dα un nome al nostro frame in modo che il browser lo possa
riconoscere all’istante, ogni volta che un documento HTML lo
dichiarerα apertamente. Tra un po’ ne vedremo
l’utilitα.
SRC: Punta a un file HTML e lo inserisce nel frame corrente.
SCROLLING ("YES" o "NO") stabilisce se
l’utente potrα far scorrere il contenuto, oppure no; e
NORESIZE nega all’incauto visitatore la possibilitα di
modificare a mano le dimensioni della nostra cornice.
A questo punto manca solo un ultimo ospite per questo polpettone
teorico, e poi passeremo finalmente alla sanissima pratica: Φ
vero che ormai abbiamo tutti la possibilitα di vedere i frame,
ma con i soliti puzzoni che non ritengono opportuno passare
nemmeno a Netscape Navigator 2, come la mettiamo? Senza contare
la schiera di nuovi utenti che, magari, hanno a disposizione il
solo Tiber (aaaaaargh!) oppure una vecchissima versione di Mosaic
data in regalo dal provider... bene, per tutti coloro che
avessero difficoltα a visualizzare i frame, esiste il comando
<noframe> che riserva uno spazio visualizzabile, appunto,
da tutti quei browser che con le cornici non vanno molto
d’accordo.
Semplicemente, il nostro browser pi∙ figo ignora tutto ci≥ che
Φ compreso in questo tag, e che di contro Φ l’unica cosa
comprensibile dai visualizzatori pi∙ vecchi. Potete inserirlo
dove volete, anche fuori dall’area delimitata da
<frameset> e dalla sua rispettiva negazione
</frameset>
<NOFRAME>
E allora, cosa aspetti a passare a un browser pi∙ recente?
</NOFRAME>
Detto questo, compiliamo finalmente il nostro primo documento
vero e proprio. Quello che segue Φ il selettore, e ci conviene
chiamarlo FRAME.HTM.
<html>
<head>
<title>esempio di suddivisione in frames</title>
</head>
<frameset cols="*,*">
<frame name="sel"
src="scelta.htm"
marginheight="0"
marginwidth="0"
scrolling="NO"
frameborder="NO">
<frame name="main">
<noframes>
<body>
ma schifo di browser hai?
</body>
</noframes>
</frameset>
</html>
Come vedete, abbiamo messo tutto ci≥ che abbiamo imparato prima,
compreso un tag <body> per sicurezza tra i <noframe>.
Questo documento si preoccupa in sostanza di fare le seguenti
cose:
1. suddividere la finestra del browser in due colonne di eguale
dimensione
2. attivare il frame sinistro, chiamandolo "sel" e
caricandovi all’interno il file "scelta.htm" (che
segue)
3. attivare il frame destro, chiamandolo "main"
senza caricarvi dentro niente
4. avvisare chi ha un browser troppo vecchio che Φ giunta
l’ora di cambiarlo
Passiamo cos∞ al selettore, quello che vogliamo mettere nella
finestra a sinistra, o, meglio, nel frame "sel". Questo
file si chiamerα "scelta.htm"
<html>
<head>
<title>Selettore</title>
</head>
<body bgcolor="#000080" text="#FFFFFF"
link="#00FFFF"
vlink="#00FF00" alink="#F0FFF0">
<div align="center"><center>
<table border="0">
<tr>
<td>
<a href="docum.htm" target="_self">
<p align="center"><font
size="7"><strong>1</strong></font></p>
<p align="center"><font
size="1"><strong>Visualizza il
documento in questo frame</strong></font></p>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="docum.htm" target="main">
<p align="center"><font
size="7"><strong>2</strong></font></p>
<p align="center"><font
size="1"><strong>visualizza il
documento nel secondo frame</strong></font></p>
</A>
</td>
</tr>
<tr>
<td align="center">
<a href="docum.htm" target="_top">
<p align="center"><font
size="7"><strong>3</strong></font></p>
<p align="center"><font
size="1"><strong>visualizza il
documento in una nuova
finestra</strong></font></p>
</A>
</td>
</tr>
<tr>
<td align="center">
<a href="docum.htm" target="_blank">
<p align="center"><font
size="7"><strong>4</strong></font></p>
<p align="center"><font
size="1"><strong>visualizza il
documento in un secondo
browser</strong></font></p>
</A>
</td>
</tr>
</table>
</center></div>
</body>
</html>
So che Φ un po’ lungo, ma vale proprio la pena digitarlo.
Questo documento costituisce una piattaforma di lancio per un
terzo documento, chiamato "docum.htm": tramite le
diverse opportunitα di scelta, potremo aprirlo dove vorremo: nel
secondo frame, nel primo, addirittura a pieno schermo o,
esageriamo, obbligando il browser ad aprire una seconda copia di
se stesso per ospitare il nuovo arrivato. Questa magia Φ
possibile tramite il comando TARGET, che dovremo inserire nei
nostri hyperlink quando vogliamo far visualizzare questo o quello
in un frame particolare. Da qui si evince anche l’importanza
di poter chiamare ogni singolo frame con un nome proprio. Il
collegamento andrα strutturato in questa forma:
<A HREF= "nomefile.ext" TARGET= "nome del
frame"> clicca qui! </A>
Nel nostro caso, per far apparire nel frame "main" la
solita immagine "racchia.jpg", raffigurante nostra
sorella appena sveglia al mattino con due occhiaie cos∞, dovremo
inserire il seguente comando da qualche parte:
<A HREF= "racchia.jpg" TARGET= "main">
orrore! </A>
Esistono anche dei nomi riservati, che servono appunto a creare
qualche effetto speciale. Si distinguono dagli altri nomi per il
fatto che hanno un trattino come prima lettera, e che se per caso
tentaste di utilizzarli come nomi per i vostri frame,
combinereste solo un bel macello.
_blank: apre un
secondo browser sullo schermo
_top: ripulisce il
browser dai vostri frame
_parent: apre il documento nel frame immediatamente apparentato a
quello in uso
_self: apre il documento
nel frame in uso
NOTA BENE: quando inserite un collegamento a un
altro documento, viene in mancanza di altre istruzioni viene
accettato di default il parametro TARGET= "_self",
ovvero il nuovo documento verrα aperto nello stesso frame in cui
si trova il collegamento attivo. Se volessimo impostare come
frame di default uno in particolare, dovremmo usare il comando
<BASE TARGET= "nome del frame">: questo
dirotterα proprio l∞ tutti i documenti che apriremo con un link
"sguarnito".
Terminiamo cos∞ fornendo il famoso "docum.htm",
ovvero il file che vogliamo caricare usando
"scelta.htm":
<html>
<head>
<title>Questo...</title>
</head>
<body bgcolor="#FFFFFF" text="#0000FF">
<p align="center"><font
color="#FF0000" size="7">Questo
</font></p>
<p align="center"><font
size="5">Φ il</font></p>
<p align="center"><font
size="7">documento</font></p>
<p align="center"><font
size="6"><strong>che
</strong></font></p>
<p align="center"><font
size="6"><strong>volevi</strong></font></p>
<p align="center"><font
size="7">visualizzare</font></p>
</body>
</html>
A questo punto dovreste proprio essere in grado di fare tutto il
possibile coi frames. Qualora aveste ancora delle titubanze,
potete connettervi al sito Internet http://www.webreference.com/dev/frames.
L∞ troverete tutto, ma proprio tutto - con tanto d’immagini
esplicative - sull’arte d’incorniciare i vostri
documenti. Noi ci rileggiamo puntuali il mese prossimo.
ECCO DUNQUE COSA SALTA FUORI: