Webdesign for Dummies [lezione 6]

Nella lezione precedente abbiamo visto le tabelle. Adesso passiamo ai frames.

Che cosa sono i frames?

I frames sono un metodo per suddividere la finestra del browser in sotto-finestre ognuna delle quali mostra una pagina HTML diversa. Questo metodo di suddividere una pagina ha i suoi vantaggi e svantaggi quali:

• Permettono a certi elementi della pagina di restare fissi mentre altre di scrollare, come un menù di navigazione.


• I frame possono unire pagine su server diversi


• Come in embed, i frames possono avere un contenuto alternativo nel caso il browser dell'utente non supporti i frames tramite il tag noframes (esterno al tag).

Però ha questi svantaggi:

• Codificare una pagina coi frame è più lungo e complesso, visto che bisogna lavorare con più pagine ed elementi per riempire un'unica pagina web.


• La navigazione per chi ha delle disabilità potrebbe diventare complessa, compromettendo quindi l'accessibilità della pagina stessa.


• E' più difficile salvare tra i preferiti documenti in una serie di frames.


• Il caricamento della pagina potrebbe risultare più lento per via delle richieste multiple alle risorse, un server fa prima a caricare un file più grosso che 10 più piccoli, almeno al primo caricamento della pagina.


• L'aggiornamento del sito diventa più complesso se aumenta il numero dei frames e dei documenti visualizzati nella pagina.


• I contenuti potrebbero sfuggire ai motori di ricerca! Se progettate un sito e lavorate anche sul suo posizionamento nei motori di ricerca, tenete a mente che i documenti nei frame potrebbero non essere visualizzati. Questo problema si presenta anche negli iframe, ma se si usano nei menù rappresentano un problema minore rispetto all'uso sui contenuti.

Il tag FRAMESET

A differenza degli altri tag, il tag per l'uso dei frames non è frame ma:

All'interno di frameset non si possono inserire altri tag se non il tag frame:

Il tag frameset presenta due attributi fondamentali che sono cols e rows. Cols e rows indica in quante parti e di che dimensione va diviso il documento principale. Cols e rows possono contenere tre valori: numerico in px, percentuale per un layout fluido oppure * per la dimensione automatica. Se ho 3 frames da inserire in una pagina e voglio la pagina divisa in tre colonne verticali di uguale larghezza metterò 3 * separati da virgole. Ecco un esempio di codice di quanto descritto prima, assumendo che i frame conterrano pagina1.html, pagina2.html e pagina3.html:

Attenzione, che quando create una pagina html a frame dovete usare un doctype diverso in modo che la pagina possa essere letta correttamente:

Su dreamweaver potete creare una pagina automatica andando su file--->nuovo--->pagina di esempio--->set di frame e selezionare il formato che preferite. Vi consiglio comunque di non usare il generatore e di scrivervi la vostra pagina da 0 ricopiando però il doctype così non dovrete riscriverlo.

Da notare che il tag frameset viene messo al posto del body perchè la pagina è proprio di tipo diverso. Il tag body viene inserito all'interno del noframe come contenuto alternativo. Le pagine linkate invece possiedono il loro body, il loro head e il loro css. Quando inserite il contenuto alternativo ricordatevi di inserire quanto meno un riassunto di quanto è contenuto nelle pagine e dei link che rimandano alle stesse. A regola, sarebbe meglio ricreare un contenuto alternativo che riproduca la pagina a frame, ma se la cosa diventa troppo lunga e complessa bastano poche righe che provvedano comunque a fornire i link per navigare.

Quando definite la dimensione delle colonne e delle righe in modo relativo (con *) ricordatevi che divide il frame in parti uguali però della porzione di pagina restante. Potete anche fare un misto di valori assoluti, relativi e percenutali. Potete anche usare i multipli delle dimensioni sfruttando gli asterischi:

In questo esempio la prima colonna è 300 px mentre la seconda è divisa in due parti, una 3 volte più grossa dell'altra. Assumendo che la pagina è larga 1000px, la prima colonna prende 300px, mentre la seconda prende i restanti 700px e crea altre due colonne, una di 175px e l'altra di 525px.

Frames annidati

Volendo potete anche inserire frameset interi all'interno di altri frameset per creare effetti particolari. Il problema è che la pagina potrebbe diventare confusionaria ed essere mal visualizzata. Un esempio di pagina annidata:

Come vedete però la cosa si fa complicata, troppo per dividere una pagina.

Attributi ed aspetto di una pagina a frame

Di base i vari frame di una pagina sono separati da un bordo in stile 3D e tutti i frame hanno una scrollbar per i contenuti.
Ovviamente quando si progetta una pagina si cerca di dargli l'aspetto che si preferisce in base alle proprie esigenze. Quindi questi dettagli possono essere disabilitati con gli attributi di frame:

• scrolling="yes|no|auto". Fa sì che la scroll possa essere visualizzata sempre a prescindere dalla dimensione del contenuto con "yes", che non venga mai visualizzata anche se i contenuti sono più lunghi e larghi del frame con "no", e che venga visualizzata solo se i contenuti diventano più grossi della dimensione del frame con "auto".


• noresize="noresize". Di base, un utente può ridimensionare un frame cliccando su un bordo e trascinandolo. Se vogliamo impedirgli di farlo aggiungiamo l'attributo noresize.


• marginwidth e marginheight="valore" modificano il margine del contenuto rispetto al bordo del frame. Col valore 0 questo margine viene rimosso.


• frameborder="1|0". Permette di rimuovere il bordo di default impostandolo a 0. E' possibile comunque dare questo attributo anche a frameset. Solo se si mette un frameborder a 1 ad un frame il bordo viene visualizzato sempre su tutti e 4 i lati e quindi i vicini acquisiranno un bordo anche se hanno il frameborder a 0.


• name="testo". E' possibile dare un nome al frame. Questo serve per linkare il contenuto dentro un frame particolare.

Puntare ad un frame

Facciamo finta di avere una pagina divisa in due. A sinistra un frame contiene il menù di navigazione e a destra i contenuti. La prima pagina col menù contiene solo links e la pagina dei contenuti un testo che va cambiato quando un link a sinistra viene linkato. Di default se clicchiamo su un link nel primo frame, il suo contenuto viene visualizzato all'interno del frame stesso, facendo di fatto sparire il menù di navigazione. Quindi approfittiamo delle ancore spiegate qui: Link a particolari punti della pagina. Nella pagina principale di index avremo questa situazione:

Abbiamo dunque dato un nome al frame coi contenuti che sarà il nostro obiettivo o target.
Nella pagina navigazione.html invece avremo questo:

In questo modo , cliccando su Pagina1 i suoi contenuti appariranno all'interno del frame a destra e non nel frame della navigazione.
Da notare che a differenza dei link che puntano ad una parte particolare della pagina non è presente #. Il concetto è lo stesso, ma noi non stiamo puntando alla stessa pagina (identificata appunto da #) ma ad una pagina diversa che vogliamo far apparire nell'altro frame.
Volendo esiste un tag particolare chiamato base da inserire nell'head della pagina (quella coi frame, non quelle dei contenuti) per dare un target unico per tutti i links. Nell'esempio precedente ci fa comodo per non stare a scrivere target="contenuti" ad ogni link della pagina se tanto deve aprirsi nell'unico frame predisposto:

Esistono inoltre dei particolari nomi di target riservati. Tutti loro iniziano con _ ed hanno particolari funzioni fisse:

• _blank. Il target _blank apre il link in una nuova finestra o scheda del browser.


• _self. Questo è il target di default, carica i link nello stesso frame o finestra. Essendo di default non è necessario specificarlo.


• _parent. Apre i documenti nel frame "genitore" ovvero quello subito sopra in frameset annidati. Se il frame sta in cima è il primo è come se fosse _self


• _top. Questo fa in modo che il frame che conterrà i documenti sarà il primo visualizzato e rimpiazzerà tutti gli altri frames presenti sulla pagina, praticamente creando un unica finestra.

I frames e l'accessibilità

Per chi ha delle disabilità visive e necessita di un lettore per navigare, un sito a frames potrebbe essere disorientante. Quindi per migliorare l'esperienza degli utenti ci sono alcuni accorgimenti che si possono prendere.

Dare un titolo ai frames attraverso l'attributo title. Come per tutti gli elementi della pagina, il title contiene delle informazioni importanti sul contenuto del frame.

Fornire un contenuto alternativo tramite il noframes. Non basta scrivere che per navigare un sito bisogna abilitare i frames. La gente poi non vi visita più. Piuttosto cercate di ricreare il contenuto della pagina a frames. Oppure potete limitarvi ad inserire i links che portano ai contenuti inseriti nei frames così che possano essere raggiunti lo stesso e navigati in modo autonomo.

Queste misure possono aiutare anche i motori di ricerca che altrimenti non leggeranno i contenuti interni dei vari frames.

Nella prossima lezione vedremo i forms.