Editor  »  Guide  »  Guida Dreamweaver Mx 

Come si è finora visto Dreamweaver consente di effettuare la medesima azione in svariati modi, anche l'inserimento delle immagini non fa eccezione.

È infatti possibile - in modalità - Design View, inserire un immagine

posizionandosi nel punto desiderato della pagina e dal menu:

• Insert >> Image, navigare all'interno del computer e selezionare l'immagine desiderata;
  
• dal pannello Common del gruppo Insert, premendo il pulsante Image, navigare all'interno del computer e selezionare l'immagine desiderata;
  
• con la combinazione di tasti Ctrl+Alt+I e navigare all'interno del computer e selezionare l'immagine desiderata;
• dal pannello Site del gruppo File, trascinando col Drag and Drop l'immagine prescelta nella pagina, essa verrà posizionata nel punto in cui si trova il cursore. È possibile selezionare un immagine sia del sito locale, sia navigando all'interno del computer con l'Esplora risorse integrato nel pannello Site;
  
• sempre nel gruppo di pannelli File dal pannello Assets, cliccando sull'icona delle immagini presenti nel sito verranno visualizzate tutte immagini contenute nel sito locale, è dunque possibile selezionarne una e premere il tasto Insert.
  
  
  
  Oppure col click destro del mouse - sul file dell'immagine o sulla sua anteprima - selezionare l'opzione Insert;
  
  
• è anche possibile trascinare l'immagine nella pagina col Drag and Drop, con entrambi i metodi che accedono all'immagine dal pannello Assets l'immagine verrà posizionata dove si trova il cursore.

Avvertenze: il doppio click sul file dell'immagine nel pannello Site o nel pannello Assets o sulla sua anteprima nel pannello Assets lancia l'editor delle immagini predefinito. Dunque questo non è un metodo per inserire le immagini, ma per modificarle. Se si inserisce un'immagine in modalità Code View dal panello Common non verrano inseriti gli attributi dei dimensione dell'immagine.

Se un'immagine viene inserita in una pagina non ancora salvata all'interno del sito locale, Dreamweaver mostra una finestra che avverte che per scrivere un percorso relativo al documento il documento stesso deve essere salvato,

infatti la sintassi che si troverà nel codice sarà di questo tipo:

<img src="file:///G|/Sites/corsomx/samples/011/immagini/palermo.jpg" width="400" height="268">

ovvero con un percorso assoluto riferito al disco dove si trova l'immagine. Una volta salvata la pagina il codice verrà automaticamente trasformato in

<img src="immagini/palermo.jpg" width="400" height="268">

ovvero il percorso relativo al documento salvato.

Come si vede nella finestra di dialogo - che permette di selezionare l'immagine desiderata - mostrata con i primi tre metodi di inserimento di un immagine è possibile scegliere se il percorso deve essere relativo al documento oppure al Site Root.

Se si sceglie la seconda opzione Dreamweaver scriverà direttamente un percorso relativo alla cartella principale del sito, di questo tipo

<img src="/samples/011/immagini/palermo.jpg" width="400" height="268">

e non farà visualizzare la summenzionata finestra di avvertimento relativa al percorso del file d'immagine, nonostante la pagina sia ancora da salvare.

È anche possibile inserire un'immagine esterna al sito locale. In questo caso se la pagina è già stata salvata all'interno del sito e si è scelta l'opzione Relative To: Document oppure, con la pagina ancora non salvata, e l'opzione Relative To: Site Root selezionata, visualizzeremo un messaggio che ci avverte che il file dell'immagine si trova al di fuori del sito, qual è la cartella principale del sito e se vogliamo copiare il file all'interno del sito.

Cliccando Si potremo scegliere in quale cartella del sito locale copiare l'immagine.

Questo perché il percorso HTML relativo all'immagine esterna al sito potrebbe funzionare nel nostro computer, consentendoci di visualizzarla correttamente, ma una volta pubblicato il sito sul web essa non sarebbe visibile.

Nella finestra di dialogo che consente di navigare all'interno del nostro disco, di default, è selezionata l'opzione Select File Name From: File system, se invece, in un sito che utilizza una tecnologia server side, viene spuntata l'opzione Data Sources ai file verrà attribuito il nome dinamicamente da una tabella del database.

Una volta che l'immagine è inserita nella pagina e selezionata possiamo controllarne le proprietà dal pannello Property.

Dreamweaver inserisce, come attributi dell'immagine, il percorso relativo al file e le dimensioni width: larghezza e height: altezza. Queste dimensioni corrispondono alle dimensioni originali del file, ma è possibile modificare tali attributi dando all'immagine dimensioni differenti rispetto a quelle originarie.

È possibile modificare le dimensioni dell'immagine nel documento dalle maniglie di ridimensionamento sui bordi dell'immagine. Per ridimensionare un immagine, bloccandone le proporzioni, è necessario utilizzare la maniglia diagonale, posta sull'angolo dell'immagine, tenendo contemporaneamente pressato il tasto Maiuscolo.

Tuttavia le dimensioni del file ed il suo peso in Kb rimarranno invariati, inoltre, poiché gli algoritmi di ridimensionamento delle immagini dei browser non sono sofisticati il risultato potrebbe essere deludente. In ogni caso se si rimpicciolisce un'immagine dagli attributi HTML width e height si costringe i visitatori delle pagina a caricare byte superflui, in quanto un immagine più piccola pesa meno Kb, mentre se la si ingrandisce si perde in qualità rendendo più visibili i pixel. Dunque è sempre meglio ridimensionare il file piuttosto che gli attributi HTML, lasciando in questi le dimensioni originali.

Uno dei modi per modificare, l'immagine è premere il pulsante Edit sul pannello Property, gli altri sono

• il doppio click sul file nel pannello Site
• il doppio click sul file o sulla sua anteprima nel pannello Assets
• selezionare l'immagine nel documento e dalle opzioni, visualizzate col tasto destro del mouse, scegliere Edit With Fireworks (o con qualsiasi altro programma è stato definito del menu Edit >>Preferences... come editor principale) oppure Edit With e selezionare o scegliere un programma per la manipolazione delle immagini.

Il pulsante Reset size, accanto a quello Edit nel pannello Property, serve invece a ripristinare, come attributi HTML dell'immagine, le dimensioni originali del file, sia quando questi mancano, sia quando sono differenti dall'altezza e larghezza del file, in questo caso le dimensioni visualizzate nel pannello Property appariranno in grassetto.

Specificare le dimensioni della immagine permette, in genere, ai browsers di caricare più rapidamente la pagina e mostrare più velocemente il contenuto testuale. Infatti il browser, in questo modo, sarà in grado di conoscere le dimensioni dell'immagine ancora prima di aver finito di scaricarla. Quindi sarà in grado di attribuire all'immagine il giusto spazio e posizionare gli altri elementi della pagina di conseguenza.

Sempre dal pannello Property è possibile aggiungere e controllare il nome dell'immagine. Una novità di Dreamweaver MX è che aggiungendo nel relativo campo il nome verrà anche aggiunto l'id, questo per una maggiore aderenza agli standard, in particolare XHTML richiede che per gli elementi di una pagina sia specificato al posto dell'attributo name l'attributo id, magari in associazione con name per garantire la retrocompatibilità con i browser più vecchi.

Dal pannello Property è possibile inserire nel campo Alt il testo alternativo per le immagini, utile per gli standard di accessibilità, inoltre, quando il mouse punta sull'immagine, esso farà visualizzare il testo alternativo in un riquadro giallino accanto al mouse, che, tra l'altro, può essere un utile sostituto delle didascalie.

Riempiendo il campo Link si trasforma l'immagine in un collegamento ipertestuale. È possibile inserire un link:

• scrivendo il collegamento direttamente nel campo;
• cliccando sull'icona cartella, navigare all'interno del computer e selezionare il documento o il file da linkare;
• cliccando sull'icona puntatore e trascindo il mouse fino ad un documento del pannello Site.

Nella parte inferiore (a scomparsa) del pannello Property è possibile scegliere altre opzioni.

Possiamo stabilire un Target per il link dal relativo menu a discesa.

Nel campo border possiamo inserire la dimensione del bordo (in pixel) dell'immagine.

Nei campi HSpace e VSpace si può inserire la distanza orizzontale e verticale dagli altri elementi della pagina.

Cliccando i pulsanti allinea a destra allinea a sinistra o allinea al centro l'immagine verrà allineata di conseguenza ed il tag img nidificato all'interno del tag <div> o <p> o di un'altro elemento block-level.

È possibile inserire un'immagine in versione più leggera (riducendone dimensioni, risoluzione, numero di colori, sfuocandola, utilizzando una scala di grigi). Tale immagine viene richiamata, prima che venga caricato il file più grande, per mezzo dell'attributo lowsrc e poi sostituita dall'immagine di migliore qualità. L'mmagine lowsrc è inseribile come le immagini normali dall'apposito campo Low src posto nella parte inferiore del pannello Property.

Tuttavia quando in un sito locale abbiamo salvato anche le immagini sorgenti PNG di Fireworks, visualizzeremo nell'icona dell'immagine - in alto a sinistra nel pannello Property - con il logo di Fireworks e sulla sinistra del campo riservato a Low src sarà visbile un'icona di Fireworks e nel campo il percorso al file sorgente PNG. In questo caso cliccando sul pulsante Edit verrà aperto per le modifiche direttamente il file sorgente.

Un immagine può essere affiancata a del testo, le opzioni per il controllo degli attributi relativi all'affiancamento del testo all'immagine sono controllabili dal menu a discesa align sulla destra della parte inferiore (a scomparsa) del pannello Property.

Le opzioni di allineamento sono:

• Default (generalmente allinea l'immagine come l'attributo baseline);
• Baseline (base dell'immagine allineata con la base del testo);
• Top (parte superiore dell'immagine allineata all'oggetto più alto);
• Middle (il centro dell'immagine allineata con la base del testo);
• Text Top (parte superiore dell'immagine allineata alla lettera più alta);
• Absolute Middle (il centro dell'immagine allineata con centro del testo);
• Absolute Bottom (base dell'immagine allineata alle lettere più basse, ad esempio p, g, y);
• Left (immagine a sinistra e testo a destra in alto);
• Right (immagine a destra e testo al sinistra in alto).

Scarica l'esempio di allineamento orizzontale

Altri articoli

Altre guide

Altre newsletter