Quello che faremo sarà di costruire il primo esempio da zero. Prima di farlo, fatemi rimarcare il fatto che queste istruzioni sono rivolte a coloro i quali usano Windows95 (od ogni altro sistema operativo che può gestire i nomi di files lunghi). Se avete Windows3.x dovrete usare l'estensione dei files .htm e modificare gli script in conseguenza.
Per prima cosa c'è bisogno di alcuni documenti. Copia questo codice e salvalo come hugh_ed.html da qualche parte in una nuova cartella.
<htm>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Ed</FONT>
</HTML>
Salva questo invece come hugh_cal.html.
<HTML>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Calvin</FONT>
</HTML>
Salva ancora questo come ron_mike.html.
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Mike</FONT>
</HTML>
Ed infine questo come ron_pete.html.
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Pete</FONT>
</HTML>
A questo documento dovresti avere una cartella con quattro documenti...
Ora costruiamoci la nostra pagina master. Questa avrà un frame "directory" sulla sinistra e sarà divisa a metà orizzontalmente sulla destra. Salva questo codice come index.html.
<HTML>
<FRAMESET COLS="160,*">
</HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAME>
<FRAMESET ROWS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Ora dobbiamo specificare cosa mettere in ogni frame quando la pagina sarà caricata la prima volta. (Non abbiamo ancora costruito direct.html)
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
</FRAMESET>
</HTML>
In particolar modo per quello che dobbiamo fare qui, occorre anche dare un nome (NAME) ad ogni frame. O dovrei dire solo per quei frames che cambieranno. Nel nostro esempio il frame directory non cambia mai, perciò non c'è reale necessità di dargli un nome.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
</FRAMESET>
</HTML>
VERIFICALO (Tieni presente che non abbiamo fatto ancora la pagina directory)
E questo è tutto per la pagina master.
La prossima di cui abbiamo bisogno è la pagina directory. Comincia con questo codice e salvalo come direct.html.
<HTML>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
Tutto quello che resta da fare ora è aggiungere le informazioni sui links ed i comandi JavaScript al documento direct.html. Cominciamo con i links.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
Hugh's friends<P>
Ron's friends<P>
</BODY>
</HTML>
Ora mettiamo i links all'interno dei tags <A>ncora.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A>Hugh's friends</A><P>
<A>Ron's friends</A><P>
</BODY>
</HTML>
VERIFICALO (nessun cambiamento visibile)
Ora potrebbe cominciare un po' di confusione, perciò, se siete come me, vorrete sicuramente apprendere queste cose con calma ed in maniera chiara.
Per prima cosa scriviamo un insieme di tags JavaScript nella sezione <HEAD> del documento. Fate attenzione che sia all'interno della sezione HEAD e non all'interno della sezione BODY.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A>Hugh's friends</A><P>
<A>Ron's friends</A><P>
</BODY>
</HTML>
VERIFICALO (nessun cambiamento visibile)
Ora inseriamo lo script. Non preoccupatevi ancora del significato. Per ora copiatelo semplicemente.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A>Hugh's friends</A><P>
<A>Ron's friends</A><P>
</BODY>
</HTML>
VERIFICALO (nessun cambiamento visibile)
Ora finiamo i links. Ancora una volta vi spiegherò cosa stiamo facendo fra un minuto.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Nascosto ai vecchi browser
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
</BODY>
</HTML>
E questo è tutto. Ora vedremo esattamente cosa succede. (se non l'avete già verificato)
Nella sezione dei link...
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
...hai semplicemente inserito il nome del file html. Nella sezione head abbiamo messo una funzione. Viene chiamata funzione perchè svolge un'azione. Supponiamo di fare una funzione chiamata friggere(). Dovrebbe friggere qualunque cosa gli mandiamo. Possiamo friggere('uova') -o- friggere('bacon') -o- friggere('uova','bacon'). Il risultato finale dovrebbe dipendere da cosa abbiamo passato a friggere(). Nel nostro esercizio abbiamo chiamato la funzione multiLoad(). Ed abbiamo detto alla funzione multiLoad('hugh_ed.html', 'hugh_cal.html') o multiLoad('ron_mike.html', 'ron_pete.html') a seconda del link che viene attivato.
C'è di più...
Nella sezione della funzione...
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
...abbiamo definito la funzione. Continuiamo con l'esempio delle cose da friggere. Nella prima linea della nostra funzione è come se avessimo detto friggi(x,y), possiamo mandargli uova,bacon, o pesce, patatine, o pane,salsiccia (sta cominciando a venirmi fame).
Nella nostra funzione multiLoad(doc1,doc2), stiamo mandando hugh_ed.html,hugh_cal.html o ron_mike.html,ron_pete.html a seconda del link selezionato.
Le due linee successive definiscono cosa fare con hugh_ed.html, etc. In altre parole...
1- Metti doc1 nel Frame_A (dove doc1 è il primo argomento che è stato passato alla funzione - hugh_ed.html)
2- Metti doc2 nel Frame_B (dove doc2 è il secondo argomento che è stato passato alla funzione - hugh_cal.html)
So che probabilmente sono sceso a livello troppo elementare, ma suppongo che sia meglio così piuttosto che spiegarlo in maniera troppo tecnica.