Frames Tutor- Lezione 4

Frames Tutor- Lezione 4

Ora proviamo un paio di effetti minori. Non tutti questi effetti lavorano bene con tutti i browsers. Se il browser non capisce l'attributo semplicemente lo ignora.

Prima cosa cambiamo lo spessore del bordo.

<FRAMESET COLS="154,*" BORDER=20> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET>

VERIFICALO

Poi possiamo cambiare il colore dei bordi.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET>

VERIFICALO

Possiamo eliminare i bordi nei singoli <FRAMESET> con FRAMEBORDER.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO > <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET>

VERIFICALO

Possiamo evitare che il browser esegua il ridimensionamento (resizing) del frame. A meno che tu non abbia particolari necessità, non c'è una valida ragione per usare questo attributo.

VERIFICALO

Ok. Ora che abbiamo imparato qualcosa su come fare i frames torniamo indietro a qualcosa di semplice ed introduciamo il linking tra i frames.

<FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html"> </FRAMESET>

VERIFICALO

Quello che vogliamo fare è aggiungere un link da beth.html per shannon.html. Perciò apriamo beth.html col Blocco Note ed aggiungiamoci questo...

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth Visita la mia amica Shannon </BODY> </HTML>

Quindi aggiungiamo il link e salviamolo.

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth Visita la mia amica <A HREF="shannon.html">Shannon</A> </BODY> </HTML>

Ora proviamolo.

<FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html"> </FRAMESET>

VERIFICALO

Se fai un click sul link vedrai la pagina di Shannon che viene caricata nella window di Beth. Lo so, lo so... non ne sei soddisfatto. Tu vuoi fare click su un link nella window di Beth e caricare invece nella window di Terri. Bene, c'è un po' di lavoro in più.

Quello che devo fare è dare un NOME (NAME) al <FRAME> nella tua pagina master. Quindi andiamo e diamo un nome anche al secondo frame.

<FRAMESET COLS="33%,67%"> <FRAME SRC="beth.html"> <FRAME SRC="terri.html" NAME="WINDOW-1"> </FRAMESET>

Fatemi fare un commento. Il secondo frame non è veramente di "Terri". E' semplicemente il secondo frame e noi abbiamo specificato che terri.html è la prima cosa da caricarci. Se avessimo un tag <FRAME> vuoto la window sarebbe ... be'... vuota.

Nota- I NAME per i <FRAME> devono cominciare con un carattere alfanumerico. Ogni altro nome di window sarebbe ignorato. (Un'eccezione è far iniziare il nome del frame con il carattere sottolineato (underscore) _ Il suo uso è spiegato un po' più avanti.)

Ora dobbiamo aggiungere qualcosa a quel link nella pagina di Beth, perciò apriamo beth.html di nuovo (col Blocco Note) e aggiungiamoci quel qualcosa (TARGET).

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth Visita la mia amica <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A> </BODY> </HTML>

Questo provocherà l'apertura del link nella window che si chiama WINDOW-1.

VERIFICALO

Questo tipo di linking è importante quando vuoi collegare insieme le pagine del tuo sito. Ma che succede se tu volessi collegarti a qualcun altro al di fuori del tuo sito? Aggiungiamo un altro link alla pagina di Beth.

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth Visita la mia amica <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A> E naturalmente visita anche Joe al <A HREF="http://junior.apk.net/~jbarta/" TARGET="WINDOW-1">Professional Web Design</A> </BODY> </HTML>

VERIFICALO
Come puoi notare, questo provoca l'apertura della pagina di qualcun altro nella tua stessa window.

Come si può fare per far aprire un link esterno a tutto schermo? Semplice, cambia il TARGET con _top.

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Beth Visita la mia amica <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A> E naturalmente visita anche Joe al <A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</A> </BODY> </HTML>

VERIFICALO
Usa sempre questo metodo quando fai un link ad una pagina esterna. Credimi, i tuoi visitatori lo apprezzeranno!

_top è uno dei 4 cosidetti 'target magici'. Questi sono _self, _blank, _parent e _top. Questi sono gli unici target che possono cominciare con qualcosa di diverso dai caratteri alfanumerici. In più ogni target comincia con un underscore_ cioè nessuno dei 'target magici' sarà ignorato. Per quello che dobbiamo fare, _top è l'unico che ci interessi per il momento.

Nota- E' importante specificare TARGET="_top" piuttosto che TARGET="_TOP". Di norma l'HTML non è sensibile alle maiuscole/minuscole (case-sensitive) ma in questo caso lo è. Usare _TOP al posto di _top qualche volta può provocare l'apertura del link in una nuova finestra del browser al posto della finestra a tutto schermo. Dal momento che l'abbiamo menzionato, questo sarebbe il compito di TARGET="_blank".... ovvero: caricare il contenuto del link in una nuova finestra del browser.

<--INDIETRO AVANTI-->

Lezione 4