Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Integrare con Dreamweaver

Esportare e manipolare il layout con Macromedia Dreamweaver
Esportare e manipolare il layout con Macromedia Dreamweaver
Link copiato negli appunti

Un layout costruito con Photoshop e ImageReady quasi sempre funge da contenitore per elementi da aggiungere dopo la creazione. In questa fase diventa evidente che il codice generato dall'ottimizzazione del programma Adobe deve essere adattato alle esigenze dei contenuti che andremo ad inserire. In questa lezione esaminiamo un caso di layout generato con impaginazione a tabelle e manipolazione con Macromedia Dreamweaver.

Correggere il codice

Una volta esportata la pagina da ImageReady, essa si presenta come un'unica tabella nella quale ad ogni cella è assegnata un'immagine derivata da una sezione. La pagina si presenterà così :

Figura 1. layout appena esportato da ImageReady
click sull'immagine per visualizzare la pagina

layout appena esportato da ImageReady

Notiamo subito, passando alla visualizzazione Codice in Dreamweaver, che già nella porzione di codice che segue,

<body
  bgcolor="#FFFFFF" leftmargin="0" topmargin="0"
  margin margin
>
<!-- ImageReady Slices (layout2.psd) -->
<table id="table_01"
   border="0"
  cellpadding="0" cellspacing="0"
>

il programma segnala che parte della sintassi è corretta ma non è supportata da alcuni browser né valida secondo l'ultima versione di HTML.

Per scoprire quali inadeguatezze presenta il codice è sufficiente utilizzare con Dreamweaver il comando File>Controlla Pagina>Convalida Codice. Una volta cliccato apparirà il menù di ispezione Risultati nel quale il programma segnalerà, attraverso i vari pannelli, le irregolarità da risolvere affinchè il codice sia valido e i principali browser, presi in considerazione da Dreamweaver, supportino tutti i tag e relativi attributi.

Nel tutorial della parte IV della guida verranno presentate alcune delle operazioni di correzione necessarie.

Correggere la struttura

Una volta corretti gli aspetti di codice della pagina, proviamo a sostituire due delle aree destinate ai contenuti con dei colori di sfondo per le rispettive celle, eliminando quindi la GIF creata da ImageReady, il risultato è il seguente :

Figura 2. Immagini sostituite da colore di sfondo e testo
click sull'immagine per visualizzare la pagina

Immagini sostituite da colore di sfondo e testo

nella pagina, la tabella è stata allineata al centro.

Proviamo ora nell'area più grande, in azzurro chiaro, ad inserire un testo di una certa lunghezza. Vedremo che per fare spazio al testo, la cella aumenterà l'altezza, questo comportamento si riflette anche sul resto della tabella:

Figura 3. Effetto del contenuto sul layout
click sull'immagine per visualizzare la pagina

Effetto del contenuto sul layout

La cella con sfondo azzurro chiaro è stata corretta per comodità con un allineamento verticale, attributo valign="top", del tag <td>

La struttura della pagina si perde e l'immagine sulla sinistra, ancora non impostata come sfondo viene allineata di default a metà della cella lasciando spazi vuoti.La soluzione a questo problema si ottiene organizzando la grafica del Layout su più tabelle e non in una soltanto, come da output di ImageReady.

Questa strutturazione viene sempre ragionata su "aree rettangolari" ed è un altro elemento da considerare nelle fasi di ideazione del Layout per evitare problemi legati alla quantità del contenuto ed alla sua trasformazione nel tempo.

Figura 4. Struttura della suddivisione delle tabelle
Struttura della suddivisione delle tabelle

In particolare la Tabella 2 è stata suddivisa in sei colonne per accogliere il menu orizzontale.

È inoltre consigliato usare delle tabelle interne alle celle riservate ai contenuti per meglio organizzare ed allineare questi ultimi.

Ed ecco il risultato finale, ipotizzando i contenuti dell'area in azzurro racchiusi da una sottotabella.

Figura 5. Layout adattato con sottotabelle
click sull'immagine per visualizzare la pagina

Layout adattato con sottotabelle


Ti consigliamo anche