Layout senza tabelle con Dreamweaver 8
di: Luca Angeletti 01 Febbraio 2006
Come tutti sanno, le tabelle che tanto hanno tormentato gli incubi dei webmaster di tutto il mondo stanno per andare in pensione lasciando la responsabilità di strutturare il layout di una pagina web ai CSS.
Sappiate, tuttavia, che l'uso delle tabelle non è stato deprecato, quindi chi si trova bene con questo sistema (e non ha intenzione di sfruttare gli importanti vantaggi offerti dai CSS...) può tranquillamente continuare.
Prima di vedere come costruire un layout senza tabelle vorrei spiegarvi perché dovreste prendere in considerazione questa modalità di realizzazione dei layout:
- perché è semplice;
- perché permette un ulteriore grado di separazione tra contenuto e presentazione;
- perché produce pagina più a accessibili;
- perché genera pagine più leggere (praticamente nella pagina web rimarrà solo il contenuto, tutte le informazioni relative alla sua presentazione saranno spostate nel foglio di stile esterno);
- perché permette di aggiornare la grafica di un intero sito web in modo molto veloce. (Avete presente quello che adesso riuscite a fare con un foglio di stile esterno e tutte le pagine del sito collegate ad esso? Voi cambiate il carattere del tag <body> nel foglio di stile e automaticamente cambia il carattere di tutte le pagine web del sito. Beh con la tecnologia CSS potrete cambiare il layout della pagina direttamente dal foglio di stile e tutte le pagine adotteranno automaticamente il nuovo layout);
- infine i CSS permettono di descrivere come dovrà apparire una pagina sui vari supporti (schermo del computer, palmare, cellulare, televisione, foglio di carta di una stampante, etc...).
In realtà esistono due modi di strutturare una pagina con i CSS, in questo articolo vedremo come posizionare i riquadri (tag Div) in modo assoluto (esiste anche la possibilità di non farlo).
Bene, spero di avervi convinto a continuare a leggere questo tutorial, prepariamoci ora a realizzare una struttura di pagina senza usare le tabelle.
Aprite Dreamweaver 8 e definite un nuovo sito web locale, poi scegliete File > Nuovo... per accedere al pannello Nuovo documento.
Selezionate Pagina di base dal riquadro Categoria e HTML dal riquadro centrale, infine assicuratevi che nel menu in basso a destra sia selezionato XHTML 1.0 di transizione (consiglio vivamente di creare pagine compatibili con questo standard, se usate Dreamweaver in modalità Progettazione non vi accorgerete nemmeno della differenza, tuttavia le pagine che supportano questo standard sono "a prova di futuro"). Infine premete Crea.
A questo punto bisogna decidere la struttura della pagina, immaginate di voler realizzare un layout come quello rappresentato nella figura seguente (i colori servono solo per indicare le varie regioni!).
Associate (per ora solo mentalmente) i seguenti nomi alle varie zone:
- logo: area azzurra;
- intestazione: area arancione;
- menu_laterale: area verde;
- corpo_pagina: area grigia.
Ultimi articoli Editor
Guide Editor
Guida WebMatrixEntrare nel mondo dello sviluppo di applicazioni Web con Webmatrix,... |
Guida Adobe Dreamweaver CS5.5Scopriamo com'è facile creare siti web professionali utilizzando... |
Guida Notepad++Un editor testuale che funziona perfettamente anche come editor HTML... |
Newsletter @Daily HTML.it
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |