Come aggiungere immagini al tuo sito web in Dreamweaver - dummies

L'aggiunta di un'immagine alla tua pagina web può sembrare quasi magica all'inizio perché il processo è così semplice con Dreamweaver. La sfida con la grafica web non è aggiungerli alle tue pagine ma creare immagini di bell'aspetto che si caricano rapidamente nel browser del tuo visualizzatore.

È necessario un altro programma, come Photoshop, Photoshop Elements o Fireworks, per creare, convertire, modificare e ottimizzare le immagini. L'ottimizzazione delle immagini riduce le dimensioni dei file in modo che le immagini vengano scaricate più rapidamente. Dreamweaver fornisce alcuni strumenti di base per la modifica delle immagini, ma per lo più si utilizza Dreamweaver per inserire e posizionare le immagini sulla pagina.

Dreamweaver semplifica l'immissione delle immagini nelle pagine Web e offre diversi modi per farlo:

• Fare clic sull'icona Immagini nel pannello Inserimento comune e quindi selezionare un'immagine utilizzando la finestra di dialogo Inserisci immagine.

• Nel pannello File, fare clic e trascinare il nome di un'immagine nella pagina in cui si desidera visualizzare l'immagine.

• Utilizza il menu Inserisci.

Se non si dispone di un'immagine JPEG, GIF o PNG ottimizzata per il web a portata di mano, è possibile scaricare immagini gratuite che sono già ottimizzate.

Per posizionare un'immagine su una pagina Web usando il menu Inserisci, segui queste istruzioni:

1. Apri una pagina esistente o crea e salva una nuova pagina.

2. Posiziona il cursore nel punto in cui desideri inserire l'immagine sulla pagina.

   Puoi inserire immagini in alto a sinistra in un nuovo file vuoto e puoi inserire immagini in tag ed elementi in una pagina web, ma non puoi semplicemente inserire un'immagine nel mezzo di una pagina senza usare altro HTML tag o formattazione CSS per posizionarlo.

3. Scegli Inserisci → Immagine → Immagine.

   Viene visualizzata la finestra di dialogo Seleziona origine immagine.

4. Sfoglia per individuare l'immagine che si desidera inserire.

   A seconda del sistema del computer, è possibile visualizzare l'anteprima delle immagini mentre le si inseriscono in modi diversi. Ecco tre opzioni comuni:

   • Su un PC con Windows XP, scegli Miniature dall'elenco a discesa del menu Visualizza a destra del campo Cerca in per visualizzare le versioni di anteprima di tutte le immagini in qualsiasi cartella aperta. È inoltre possibile visualizzare una singola anteprima di qualsiasi immagine selezionata all'estrema destra della finestra di dialogo.

   • Su un PC con Windows Vista o Windows 7 , scegli un'opzione icona (Icone piccole, Icone medie, Icone grandi o Icone extra large) dall'elenco a discesa del menu Visualizza a destra di Cerca in campo per visualizzare le versioni di anteprima di tutte le immagini in qualsiasi cartella aperta. È inoltre possibile visualizzare una singola anteprima di qualsiasi immagine selezionata all'estrema destra della finestra di dialogo.

   • Su un Mac, scegli l'opzione Visualizza come colonne in alto a sinistra nella finestra di dialogo. È possibile visualizzare una singola anteprima di qualsiasi immagine selezionata all'estrema destra della finestra di dialogo.

     

     Credito: foto di Casey Stoll

5. Per inserire l'immagine, fare doppio clic sul nome dell'immagine o fare clic una volta e quindi fare clic su OK.

   Se si inserisce un'immagine in una pagina e l'immagine non viene salvata nella cartella del sito locale, Dreamweaver richiede una finestra di dialogo di avviso e offre di copiare l'immagine nella cartella del sito locale. Molti designer creano una sottocartella denominata immagini all'interno della cartella del sito locale in cui memorizzano tutte le immagini nel proprio sito, ma se lo preferisci puoi organizzare le immagini in più sottocartelle.

6. Seleziona l'immagine sulla tua pagina web per visualizzare e modificare le proprietà dell'immagine.

   Le opzioni di immagine vengono visualizzate automaticamente nella finestra di ispezione Proprietà nella parte inferiore della pagina quando viene selezionata un'immagine.

   

   Credito: foto di Casey Stoll

Quando si inserisce un file immagine su una pagina, non si aggiunge effettivamente una copia dell'immagine alla pagina; crei un riferimento all'immagine. Il codice sottostante assomiglia molto al codice per un collegamento da una pagina all'altra.

Sia i riferimenti alle immagini che i collegamenti includono il nome del file e il percorso dalla pagina a quel file. In sostanza, stai creando un'istruzione per un browser Web per trovare l'immagine quando viene visualizzata la pagina.

Per visualizzare un'immagine sulla tua pagina web, devi caricare sia la pagina che l'immagine quando pubblichi il tuo sito web. Se i file di immagine e le pagine che fanno riferimento a quei file non si trovano nella stessa posizione relativa sul disco rigido così come sono sul server Web, si interrompe il riferimento alle immagini e sulla pagina appare un'icona brutta Immagine interrotta.

Il modo migliore per assicurarsi che le immagini e i file rimangano dove dovrebbero essere in relazione tra loro è lasciare che Dreamweaver tenga traccia di loro per te. Ecco perché è così importante completare la procedura di configurazione del sito e assicurarti di non spostare o rinominare mai un'immagine, tranne nel pannello File.