aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Progettare la pagina

 

2. Impostare gli spazi del "canovaccio"

Introduzione
1: modelli di pagina
2: impostare gli spazi del "canovaccio"
3: tecniche d'impaginazione


Definita la struttura della pagina, bisogna "prendere le misure" prima di cominciare a scrivere il codice HTML vero e proprio. In gergo ci chiama "canvas", ossia canovaccio, l'area per costruire una pagina Web che stia nello spazio disponibile all'interno della finestra del browser. Tale spazio varia in funzione del browser, del sistema operativo e della quantità di pannelli e strumenti accessori che il navigatore mantiene visualizzati.

I due parametri importanti da conoscere sono larghezza e altezza del canovaccio, misurati in pixel. La larghezza corrisponde al numero di pixel disponibili in orizzontale quando la finestra del browser è aperta completamente sullo schermo (posizione massimo ingrandimento), tolta l'eventuale barra di scorrimento orizzontale. L'altezza è invece il numero di pixel disponibili nella finestra prima della "piega".

Per capire quanto sia effettivamente grande il canovaccio, dobbiamo assegnare dimensioni in pixel ai vari elementi. Si comincia dal considerare la risoluzione del video utilizzata dal navigatore. Se immaginiamo che la media dei navigatori oggi disponga di monitor con almeno 800 x 600 pixel di risoluzione, scopriamo che l'area massima effettivamente utile per lo sviluppo è di 780 x 433 pixel, calcolati empiricamente su una finestra di Internet Explorer all'interno di Windows XP con le principali barre di comando attive.

Per una valutazione più dettagliata vi rimandiamo a un articolo sul Web: "Sizing Up the Browsers" accessibile all'indirizzo: http://www.webmonkey.com. In generale vediamo che la dimensione considerata mediamente sicura per produrre una pagina visualizzabile sia di 584 x 599 pixel per schermi da 640 x 480 pixel, 744 x 410 pixel su schermi da 800 x 600 (i più diffusi) e 968 x 578 pixel su schermi da 1024 x 768.

Spazio disponibile su un monitor con risoluzione di 800 x 600
Prediamo un tipico portale Internet e misuriamo empiricamente lo spazio effettivamente disponibile per la visualizzazione della pagina all'interno del nostro browser (in questo caso Internet Explorer con le principali barre di comando attivate) su uno schermo della risoluzione complessiva di 800 x 600 pixel. Scopriamo di avere 780 x 433 pixel. Nella pratica, il limite consigliato è di 744 x 410 pixel.


Clicca per ingrandire

L'elemento più vincolate è naturalmente la larghezza, poiché in lunghezza è sempre possibile eccedere, ricorrendo allo scorrimento verticale della pagina (scrolling), mentre lo scrolling orizzontale, benché usato da alcuni siti, va sicuramente evitato. Vediamo che i diversi siti standardizzano diverse misure di larghezza: Yahoo Italia, ad esempio, ha pagine larghe 735 pixel, Virgilio e Libero (IOL) arrivano a 760 pixel.

Finestre intrusive
I moderni browser prevedono una serie di finestre per facilitare la navigazione. La più comune si apre in verticale a fianco della finestra di contenuto vera e propria e può mostra i Preferiti, organizzati per cartelle, oppure una cronologia dei siti visitati, come nell'esempio in figura, oppure le risorse del computer locale e altro ancora. Esistono poi barre orizzontali aggiuntive, che si collocano subito sotto la Barra degli indirizzi (URL) e che visualizzano funzioni particolari (la ricerca con Google nell'esempio in figura) oppure semplicemente una selezione dei Preferiti che vogliamo tenere particolarmente in evidenza e che, in Internet Explorer, prende il nome di "Collegamenti". Quando attivate su un monitor con una risoluzione da 800 x 600 pixel queste finestre e barre aggiuntive compromettono la visualizzazione delle pagine anche meglio progettate.


Clicca per ingrandire

 

Spazio disponibile su un monitor con risoluzione di 1024 x 768
Visualizziamo la stessa pagina del portale su uno schermo con risoluzione di 1024 x 768 pixel e misuriamo lo spazio empiricamente disponibile con tutte gli "optional" del browser attivi. Troviamo che la pagina che ha una larghezza di 735 pixel sta comodamente nel canovaccio di 800 x 579 pixel. Il valore di canovaccio consigliato per compatibilità con tutti i browser nelle condizioni di default (senza barre di navigazione opzionali) è di 968 x 578 pixel.


Clicca per ingrandire

Una volta decisa la larghezza complessiva della pagina, che sarà anche la larghezza del primo pannello, cioè quello contenente il logo, dobbiamo stabilire le dimensioni delle colonne o pannelli che seguono, uno parallelo all'altro. Una volta impostate tutte queste indicazioni, siamo pronti a costruire la pagina vera e propria.

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
1. Progettare un sito statico
  1. Definire la struttura
  2. Collocare i file grafici e multimediali
  3. Domini reali e virtuali
  4. Cos'è un dominio
  5. Registrare un dominio
  6. Recuperare un dominio perso
  7. Collegamenti assoluti e relativi
2. Progettare la pagina
  1. Modelli di pagina
  2. Impostare gli spazi del "canovaccio"
  3. Tecniche d'impaginazione
3. Pagine HTML e marcatori
4. Sintassi HTML
5. Tag strutturali di pagina
6. Strutturare la pagina: tabelle, frame e form
7. Definizioni di HTML
8. Esercizi
  1. Esploriamo i tag di base
  2. Creiamo una pagina vergine con HTML-Kit
  3. Progettare un sito con Golive 6.0
  4. Riepilogo dei concetti della lezione
  Terza lezione:
 Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits