Frames Tutor- Lezione 3

Torniamo indietro a qualcosa di più semplice.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

VERIFICALO


Possiamo inserire delle figure nel frame se lo vogliamo. Nella directory 'examples' c'è una figura che si chiama world.gif. Prendila e copiala nella tua cartella di lavoro.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

VERIFICALO
Ricorda che è sempra buona norma includere gli attributi HEIGHT e WIDTH per ogni tag d'immagine.


Inseriamo la figura nel frame. Prima cosa portiamo la finestra di sinistra alla larghezza di 146 pixels. Dal momento che usiamo una misura assoluta dovremmo rendere gli altri frames elastici.

<FRAMESET COLS="146,*">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

VERIFICALO


Poi dividiamo il frame di sinistra orizzontalmente in due parti. La parte superiore deve essere alta di 162 pixels e la parte inferiore quello che resta. Vi metteremo world.gif e Lisa rispettivamente.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

VERIFICALO
Come puoi vedere, abbiamo un piccolo problema.


Le barre di scorrimento (scrollbars) che puoi vedere possono essere specificate come YES, NO o AUTO. YES significa che saranno messe le scrollbars- sia che siano necessarie o meno. NO significa che non ci saranno scrollbars, anche se il contenuto del frame è grande come il New Jersey... il browser semplicemente mostrerà tutto quello che può. AUTO è il default. Se le scrollbars sono necessarie appariranno, se non sono necessarie non verrano mostrate. Impostiamo dunque le nostre scrollbars.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

VERIFICALO


Abbiamo ancora un problema. L'immagine non è correttamente nel frame. I prossimi due attributi trattano dei margini. Il browser fornisce automaticamente ad ogni frame un po' di spazio vuoto attorno al contenuto. Questo è normalmente necessario per questioni di estetica. Si può controllare la misura di questi margini usando MARGINWIDTH e MARGINHEIGHT. Questi attributi controllano i margini sinistro & destro e alto & basso rispettivamente. Noi li impostiamo entrambi a 1. (1 è il minimo)

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <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


Sfortunatamente ancora non ci siamo. Le misure del frame sono prese da centro a centro.

C'è inoltre quel minimo bordo con cui abbiamo a che fare. Dal momento che il valore di default per lo spessore del bordo è 6 pixels, dobbiamo aggiungerne 8 ad ogni dimensione dell'immagine (la metà di 6, più 1, per 2). Se il calcolo è confusionario, semplicemente aggiungi 8 ad ogni dimensione dell'immagine per ottenere la misura della window.

<FRAMESET COLS="154,*">
  <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
Questo mostrerà l'immagine perfettamente nella window, o al limite in maniera opportuna. Hai mai visto un'immagine in un frame che è stata tagliata su uno o più lati? Se usi le misure assolute, insieme con un frame elastico... E se tu aggiungi 8 alla misura dell'immagine per ottenere la misura del frame, ti risulterà tutto grazioso e visibile allo stesso modo dalle altre persone.  *

<--INDIETRO        AVANTI-->

Introduzione Lezione 1 Lezione 2 Lezione 3 Lezione 4 Lezione 5 Lezione 6 Lezione 7