Guida Tecniche di design: layout e tabelle

[Dade.]

Vediamo adesso di mettere in pratica quanto appreso fino a questo momento in tema di Web design e di costruzione (o che dir si voglia creazione) di layout e template per una pagina Web.
Esistono decine e decine di interfacce standard per la realizzazione di un sito, di un portale o di una Web application (Rif. cap. 8 e successivi) ma adesso ci limiteremo a prendere in considerazione le mere tecniche di realizzazione.
Prendiamo in considerazione il seguente sito:

Perfavore, Entra oppure Registrati per vedere i Link!

​

Presenta le seguenti caratteristiche:

• un layout centrato rispetto all'intero schermo, ottimizzato per essere visualizzabile a dimensione 800X600 senza far comparire le barre di scorrimento orizzontali, decisamente antiestetiche e poco professionali;
• un template composto da una barra superiore (nera) in cui inserire una brevissima descrizione-spot del sito atta a fornire sia un tocco di contrasto estetico (gioco di colori) sia un'esca per i motori di ricerca;
• troviamo poi la barra orizzontale (gialla) contenente il logo sulla sinistra ed un elemento di comune utilità come un motore di ricerca interno sulla destra;
• al di sotto troviamo una barra orizzontale (blu) in cui poter piazzare un menu o uno spot testuale, o qualsiasi altro elemento di generica utilità; anche in questo caso lo scopo principale è creare un gioco di colori;
• in orizzontale troviamo un'altro elemento, stavolta pubblicitario, che possiamo anche non prendere in considerazione;
• a questo punto inizia la fase riguardante i contenuti veri e propri del sito, ovvero i menu contestuali laterali ed il corpo centrale della pagina che contiene materialmente i contenuti della pagina o della sezione corrente.

Impariamo a costruire un layout del genere utilizzando le tabelle HTML. Di seguito un codice di esempio:

Perfavore, Entra oppure Registrati per vedere i codici!

Di seguito il risultato del codice HTML appena riportato:

A questo punto entrano in gioco i forgli di stile CSS per la stilizzazione dei vari elementi del layout.

Guida tratta da MrWebmaster