::: Creare un layout per il web senza tabelle ::: un pratico tutorial per creare la struttura di un sito web usando DIV e CSS - tutorial layout senza tabelle

Creare un layout per il web senza tabelle

Rivista: Applicando
Data pubblicazione: Aprile 2007

Il tag DIV è alla base di una nuova tendenza, che vede sempre di più i web designer abbandonare la costruzione di layout basati su tabelle, per orientarsi verso i cosiddetti layout tableless, tramite l’impiego di DIV e CSS. Ecco quindi un piccolo tutorial per approcciare questa nuova metodologia di design.

La struttura logica prima di tutto
Prima di iniziare con il tutorial, è necessario approfondire l’argomento che verrà trattato, analizzando il contesto in cui si trova chi deve realizzare il layout di un sito web. I termini “design centric” e “content centric”, identificano due metodologie diverse che portano alla realizzazione di un layout. La prima, antepone ai contenuti e alla struttura logica l’aspetto visivo di un sito; il percorso che compie lo sviluppatore è all’incirca questo:

1) Si crea un layout grafico con un programma di design;
2) Si crea uno “scheletro” in HTML, con le tabelle;
3) Si popolano le celle con testi ed immagini;
4) Si definisco regole CSS per gli stili di testo;
5) Si pubblica il sito;

Questa metodologia è molto diffusa presso i web designer. In effetti, molti di questi provengono, per esempio, dal design grafico, e hanno quindi un approccio molto “visuale” alla creazione di un sito.

L’approccio “content centric” parte invece, come recita il nome, dal contenuto, dalla struttura logica. In questo caso, il percorso è diverso:

1) Si inizia dal contenuto, che viene inserito e trattato adeguatamente da un punto di vista semantico;
2) Si aggiungono le regole CSS per il layout di pagina, usando i DIV;
3) Si attribuiscono le regole CSS per la formattazione del contenuto;
4) Si inseriscono le immagini e la grafica nei vari DIV;
5) Si pubblica il sito;

Questa metodologia, in rapida diffusione, è più facilmente applicabile da chi normalmente ha a che fare con il codice. Questo perchè, tendenzialmente, la “forma mentis” di uno sviluppatore, è più orientata alla struttura logica, di quanto non lo sia un designer grafico.

Con questo non vogliamo dire che la progettazione di un layout si riduce in maniera assiomatica a una di queste due metodologie, fortunatamente sappiamo che il web è cresciuto grazie alla sua diversità, e quindi ognuno adotta il metodo più congeniale nello sviluppo di un layout. Si può però affermare serenamente che esiste nel web una vera divisione tra web designer “design centric” e “content centric”, ed è interessante capire quali siano le reali differenze tra questi due mondi.

Una bella pulita al codice
Anteporre la struttura logica al design non è solo un metodo per organizzare in maniera più razionale il proprio lavoro. Così facendo, grazie a DIV e CSS, si ottiene un codice molto più pulito di quanto sarebbe se venissero usate le tabelle. Ma questa differenza è davvero così visibile? e da chi?
In effetti, queste due domande hanno una valenza diversa, a seconda del soggetto. Se pensiamo all’utente tipico che naviga su un sito web, il suo giudizio si fonda principalmente su quello che vede, e quello che può fare. Da questo punto di vista, teoricamente, non c’è differenza tra un sito creato con tabelle o DIV, perchè l’aspetto visivo, e le funzionalità di base (link, form, caselle di ricerca, etc.) non vengono influenzati positivamente o negativamente da come è stata composta la pagina. Come dire: all’utente non importa poi tanto se abbiamo usato le tabelle o i DIV.

Se però cambiamo il soggetto, e al posto dell’utente mettiamo il browser, e come questo analizza la pagina, le cose cambiano. In questo caso si pensa subito a termini come usabilità, accessibilità, che poco hanno a che fare con i siti densi di tabelle e ritagli di immagini. A differenza dell’utente, il browser la nota eccome la differenza tra i due mondi. Il risultato? Una pagina web più leggera, in primo luogo, occupa molto meno banda e quindi viene caricata molto più velocemente. Un layout “liquido” può essere strutturato in maniera molto più sofisticata, dando massima libertà di ridimensionamento della finestra all’utente. C’è poi un altro effetto collaterale non da poco: i crawler dei motori di ricerca sono in grado di “leggere” molto più efficacemente i contenuti di una pagina “pulita”, incrementandone quindi anche la qualità di indicizzazione. Insomma, si potrebbe andare avanti ancora molto nell’elogiare i benefici della metodologia “content centric”, però un piccolo stop dobbiamo metterlo. C’è in effetti un unico neo, che però non è da poco: DIV e CSS fanno un pò a cazzotti con le versioni “4” di qualunque browser. E sebbene, le statistiche mostrino che Internet Explorer 4 e Netscape 4 (solo per citarne due) sono ormai ridotti ad una percentuale minima nel mondo, bisogna rendersi conto che questi utenti vedrebbero il nostro bel sito quasi del tutto “smontato”. Basta poco per rendersi conto di cosa questo voglia dire: avete mai provato ad aprire un sito fatto con iWeb su uno dei due browser appena citati? Il risultato è davvero deludente.

E quindi cosa bisogna fare? Bisogna tenere bene a mente, quando si sviluppa un sito, che ancora oggi, purtroppo, esistono molti utenti che usano browser datati. Quando si sviluppa un sito, in base anche all’audience a cui ci rivolgiamo, e quindi bene riflettere su questa considerazione. Un esempio? Se realizziamo il nostro personale sito web, possiamo anche permetterci di “tagliare fuori” i vecchi browser, è una nostra scelta. Al limite, se non è troppo grande, possiamo anche farne una versione compatibile con i browser datati. Ma se dobbiamo sviluppare un sito web che prevede l’accesso ad un’area riservata, con tanto di funzionalità per gli utenti? In questo caso vale la pena di fare qualche riflessione prima di procedere.

Il Tutorial
In questo tutorial useremo Adobe Dreamweaver 8 per realizzare un layout tableless di base. Useremo poi Fireworks 8 per inserire un elemento grafico come la testata.

La definizione della struttura logica
Prima di tutto dobbiamo definire la struttura logica del layout, dividendola nelle sezioni principali che poi verranno visualizzate sulla pagina. Il primo elemento (DIV) che viene inserito è il Contenitore principale; dentro questo verranno poi inseriti altri elementi, nel nostro caso quattro in tutto: Testata, Menu, Contenuti, Piede. Ognuno di questi verrò poi popolato coerentemente con gli elementi pertinenti, grafici e testuali.

Definire il Contenitore principale
Dopo aver creato una nuova pagina web impostiamo Dreamweaver in modo che mostri sia la vista codice, sia la vista progettazione, facendo clic sul pulsante Dividi, presente nella barra superiore delle funzioni. Iniziamo quindi dal Contenitore, impartendo il comando Inserisci > Oggetti Layout > Tag Div. Nella finestra di dialogo che appare, inseriamo il nome Contenitore nel campo ID e facciamo clic su OK. Il codice che viene inserito è:

<div id="Contenitore">Inserire qui il contenuto per id "Contenitore"</div>

Il nome dell’elemento appena creato è quello tra virgolette, subito dopo il tag DIV, mentre il testo che segue, è solo un riferimento che indica dove andranno inseriti i contenuti. Possiamo tranquillamente cancellare questa parte di testo.

Figura 1 - Inserimento del DIV Contenitore. In vista Progettazione viene rappresentato come un rettangolo tratteggiato. Il testo all’interno è solo indicativo, e si può cancellare.

Inserire le sezioni del layout
A questo punto dobbiamo inserire le sezioni all’interno del contenitore principale: in vista progettazione, si fa clic all’interno del rettangolo tratteggiato relativo al contenitore appena creato, e poi si impartisce nuovamente il comando Inserisci > Oggetti Layout > Tag Div. Nella finestra di dialogo inseriamo il nome Testata nel campo ID e facciamo clic su OK. Cancelliamo anche in questo caso il testo descrittivo dell’elemento. Se guardiamo ora il codice modificato notiamo che il nuovo elemento Testata è stato correttamente inserito all’interno dell’elemento Contenitore:

Quello che dobbiamo fare ora è continuare a ripetere la stessa azione, inserendo gli elementi Menu, Contenuti e Piede. C’è però un piccolo problema: in vista progettazione, i rettangoli tratteggiati si sovrappongono, rendendo difficile selezionare correttamente il contenitore principale. Se commettiamo degli errori è facile che la struttura logica venga stravolta, inserendo per esempio, il Menu, dentro la Testata. Per evitare questi problemi passiamo in vista codice, e facciamo clic con il cursore dopo il tag di chiusura </div> dell’elemento Testata. In questo modo, indichiamo a Dreamweaver di inserire l’elemento successivo, dopo la testata, ma sempre dentro al contenitore principale. Ripetendo questa operazione per tutti gli elementi, dovremmo ottenere questo codice:

Figura 2 - In vista codice, i DIV appaiono correttamente elencati, ma in vista progettazione i rettangoli relativi vengono sovrapposti tutti in uno. Per poter scegliere i vari DIV è quindi necessario selezionarli dalla vista codice.

Abbiamo terminato di definire la struttura logica, e, poichè questa è appunto solo una struttura logica, in vista progettazione tutti i rettangoli relativi agli elementi appena creati, appaiono sovrapposti in un unico rettangolo tratteggiato. Questo è un chiaro segno che la parte visuale non è ancora stata creata.

La definizione della struttura visuale
Ora ci dedichiamo all’aspetto visivo del layout. Nel nostro esempio, per comodità, andremo a definire un contenitore principale a dimensione fissa. In vista codice facciamo clic sulla riga relativa al DIV Contenitore. Ora apriamo il pannello Stili CSS dal menu Finestra. Nel pannello appena aperto dobbiamo fare clic sull’icona Nuova regola CSS. Questo comando serve ad associare una regola CSS, che andremo a definire, al DIV del contenitore principale.

Nella finestra di dialogo viene mostrata la nomenclatura predefinita #Contenitore. Ora dobbiamo indicare se il codice CSS (non solo per questa regola, ma anche le altre che andremo a creare) deve risiedere dentro la pagina corrente, o meglio in un file esterno. La seconda soluzione è la più indicata, poichè in futuro, sarà sufficiente modificare questo file CSS per ottenere le modifiche su tutte le pagine collegate.

Scegliamo la voce Nuovo foglio di stile dal menu a comparsa e facciamo clic su OK. A questo punto dobbiamo dare il nome al file CSS che verrà creato, salvandolo dentro la cartella principale del sito. Chiamiamo il file “Regole_Layout.css” e facciamo clic su OK. Viene ora aperta la finestra per la definizione delle regole CSS. Questa finestra permette di impostare numerose opzioni, identificate dalle categorie presenti sulla parte sinistra. Facciamo clic sulla categoria Elementi di pagina ed impostiamo i valori Largh, e Altezza come segue: 700, 500. Facciamo poi clic su OK.
A questo punto, è già possibile verificare come, in vista progettazione, le dimensioni del rettangolo relativo al elemento contenitore siano cambiate coerentemente.

Ora dobbiamo procedere nello stesso modo, per tutte le altre sezioni, cambiando solo i valori di dimensione, e alcune altre cose.
In vista codice facciamo clic sulla riga relativa al DIV Testata. Nel pannello Stili CSS facciamo clic sull’icona Nuova Regola CSS. Nella finestra di dialogo viene mostrata la nomenclatura predefinita #Contenitore#Testata. Questa indica già il grado di “parentela” tra contenitore e testata. Non è necessario reimpostare il file CSS, poichè questo è ormai ereditato dalla precedente regola, infatti nel menu a comparse figura già la voce “Regole_Layout.css”. Facciamo clic su OK.
Nella finestra per la definizione delle regole CSS facciamo nuovamente clic sulla categoria Elementi di pagina ed impostiamo i valori Largh e Altezza su 700 e 150.
Ancora una volta, in vista progettazione, vediamo il risultato dell’operazione, con il rettangolo relativo all’elemento Testata che cambia la sua dimensione coerentemente.

La definizione delle due prossime sezioni (Menu e Contenuto) chiama in causa una nuova funzione. In effetti i rettangoli relativi dovranno essere accostati tra loro: quello relativo al Menu, a sinistra, quello relativo al Contenitore a destra.
In vista codice facciamo clic sulla riga relativa al DIV Menu. Nel pannello Stili CSS facciamo clic sull’icona Nuova Regola CSS. Nella finestra di dialogo viene mostrata la nomenclatura predefinita #Contenitore#Menu. Facciamo clic su OK. Nella finestra per la definizione delle regole CSS facciamo nuovamente clic sulla categoria Elementi di pagina ed impostiamo i valori Largh e Altezza su 200 e 300.
Ora è necessario definire la regola per l’elemento Contenuti: sarà su questo che introdurremo la nuova opzione Mobile.

In vista codice facciamo clic sulla riga relativa al DIV Contenuti. Nel pannello Stili CSS facciamo clic sull’icona Nuova Regola CSS, e poi su OK. Nella finestra per la definizione delle regole CSS facciamo nuovamente clic sulla categoria Elementi di pagina ed impostiamo i valori Largh e Altezza su 550 e 300.

A questo punto introduciamo l’opzione Mobile, che determina il posizionamento del rettangolo relativo alla regola CSS. Impostando l’opzione Destra dal menu a comparsa, il rettangolo si sposta a destra, posizionandosi al margine estremo del rettangolo che si trova alla sua sinistra (Menu). Facciamo clic su OK. Tornando in vista progettazione il risultato è chiaro, e il layout inizia a prendere corpo.
L’ultima regola CSS, quella riguardante il Piede, può essere definita seguendo la stessa procedura già vista per le altre, ma impostando i valori Largh e Altezza su 700 e 50.

Figura 3 - Alla fine di tutti i passaggi la struttura visuale è correttamente divisa in rettangoli. La finestra CSS reca inoltre tutte le regole che sono state definite, localizzate nel file esterno Regole_Layout.css.

Inserire elementi grafici con Fireworks
Le opzioni presenti nelle varie categorie delle regole CSS consentono di personalizzare i DIV accuratamente: dal colore di sfondo, al motivo e spessore del bordo, ai margini interni ed esterni, e molto altro ancora. Per questi approfondimenti rimandiamo ai lettori il piacere di esplorare tutte le funzionalità.
Continuiamo invece con il tutorial, passando all’inserimento di elementi grafici con Fireworks.

Quando bisogna inserire un elemento grafico nel layout di un sito, solitamente si prospettano due situazioni.

La prima: il file (GIF o JPEG) già esiste, bisogna solo inserirlo nella pagina. È sufficiente fare clic all’interno del DIV scelto per poi impartire il comando Inserisci > Immagine.
La seconda: il file non esiste ancora, magari la grafica è da creare, però si vuole comunque inserire un riferimento nella pagina a quel file.
In questo caso si procede così: selezioniamo il DIV Testata, e diamo il comando Inserisci > Oggetti Immagine > Segnaposto Immagine. Nella finestra che si apre è necessario inserire la dimensione che daremo al file grafico, questa deve coincidere con la dimensione della testata: Larghezza 700, Altezza 150.
Diamo poi un nome al file che verrà creato, inserendolo nella casella Nome: Grafica_Testata e confermiamo con OK.

In vista progettazione è facile vedere il risultato: Dreamweaver ha inserito un box grigio dentro al DIV Testata. Questo è tecnicamente chiamato Segnaposto Immagine e sta ad indicare che al suo posto verrà inserita un’immagine grafica di pari dimensione. Per procedere è ora necessario richiamare Fireworks. Apriamo la finestra delle proprietà (Finestra > Proprietà) e dopo aver selezionato il segnaposto immagine, facciamo clic sul pulsante Crea (con il simbolo di Fireworks a lato).

Figura 4 - Quando si inserisce un segnaposto immagine, la pressione del pulsante Crea, nella finestra delle proprietà, fa sì che Fireworks venga avviato, per creare il contenuto grafico del segnaposto.

A questo punto viene lanciato (o solo attivato se era già aperto) Fireworks, che si presenta con un documento pronto per essere modificato, delle medesime dimensioni impostate in Dreamweaver. Ora possiamo creare una grafica ad-hoc direttamente da Fireworks, usando i vari strumenti di disegno, oppure importare/incollare una grafica da un altro programma, come Photoshop, Illustrator, Freehand, etc.
In entrambi i casi, per poter aggiornare il documento di Dreamweaver con la grafica di Fireworks è necessario fare clic sul pulsante Completato, presente in alto a sinistra nella finestra del documento.

Figura 5 - Una volta preparata la grafica è necessario fare clic sul pulsante Completato, per rimpiazzare il segnaposto immagine di origine con il file GIF/JPEG prodotto da Fireworks.

Questo comando avvia l’aperturta in sequenza di due nuove finestre di dialogo. La prima richiede di indicare dove vogliamo salvare il file PNG sorgente. Questo è in pratica il file che contiene intatti tutti gli elementi costitutivi della grafica (livelli, vettori, effetti speciali, etc.) e che servirà in seguito per modificare la grafica nella pagina web.
La seconda finestra di dialogo richiede invece di indicare dove desideriamo salvare il file immagine (GIF o JPEG, a seconda di come è stato impostato sulla finestra Ottimizza di Fireworks) che verrà inserito all’interno della pagina web. Questo va normalmente posizionato dentro la cartella Immagini, contenuto all’interno della cartella principale del sito.
Al termine di questa operazione, tornando in Dreamweaver, vedremo che il segnaposto immagine è stato sostituito effettivamente dal nuovo file grafico creato in Fireworks.
La procedura che abbiamo appena illustrato va ripetuta anche per il piede della pagina, con la conseguente creazione di un nuovo file PNG e GIF/JPEG.