Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 12 di 62
  • livello principiante
Indice lezioni

Inserimento, modifica e posizionamento delle immagini

Inserire manualmente le marcature che definiscono le caratteristiche generali della pagina
Inserire manualmente le marcature che definiscono le caratteristiche generali della pagina
Link copiato negli appunti

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;

    Selezione dell'immagine
  • dal pannello Common del gruppo Insert,
    premendo il pulsante Image, navigare all'interno del computer
    e selezionare l'immagine desiderata;

    Inserimento dell'immagine dal pannello Common
  • 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;

    Inserimento dell'immagine col metodo Drag and Drop dal 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.

    Inserimento dell'immagine dal pannello Assets, pulsante Insert

    Oppure col click destro del mouse - sul file dell'immagine o sulla sua anteprima
    - selezionare l'opzione Insert;

    Inserimento dell'immagine dal pannello Assets, tasto destro del mouse
  • è 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,

Finestra di alert

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.

Immagine relativa al documento o alla cartella principale del sito

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.

Messaggio per la copia del file all'interno del sito locale

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

Scelta della destinazione del file da copiare

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.

Attribuzione dinamica del nome del file

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

Pannello delle proprietà dell'immagine

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.

Ridimensionamento proporzionale

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.

Modifica dell'immagine con un programma diverso da quallo predefinito come principale

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.

Ripristino delle dimensioni originarie

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.

Attributi name ed id

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.

Visualizzazione sul browser dell'attributo alt

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 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.

Modifica dell'immagine dal PNG di Fireworks

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.

Attributo align

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

Ti consigliamo anche