Inserimento immagini ed altri elementi

Inserire un'immagine, con Dreamweaver è molto semplice ed intuitivo. Lo si può fare sia attraverso il menù 'inserisci' sia mediante il pannello 'oggetti', categoria 'comuni'. Da segnalare che, oltre alle immagini tradizionali (gif, jpg ecc...) il programma prevede l'inserimento di immagini interattive quali immagine di rollover, barra di navigazione, pulsante in flash, testo in flash, html di fireworks ecc... Inoltre permette di mappare un'immagine creando aree sensibili, in modo molto semplice.

Inserire una semplice immagine - Come già detto il modo di operare non è unico. Noi prenderemo in considerazione il più immediato ma ovviamente ognuno adotterà quello con cui si trova meglio. Per prima cosa posizioniamoci nel punto esatto della pagina in cui vogliamo che compaia l'immagine. Poi dalla categoria 'comuni' del pannello 'oggetti', facciamo click sulla prima icona, quella raffigurante un alberello verde. Noteremo l'apertura di una finestra di esplorazione che ci consente di scegliere, dal nostro hard disk, quale immagine inserire. Determinato il file clicchiamo su 'OK'.

Inserire un'immagine rollover - Per inserire un'immagine 'rollover', ossia un'immagine che cambia aspetto al passaggio del mouse, bisogna cliccare sul pulsante immediatamente a destra di quello per l'inserimento di un'immagine semplice, sempre dalla categoria 'comuni' del pannello 'oggetti'. A questo punto, dalla finestra apertasi in seguito al click, si dovranno definire le proprietà del nostro rollover:

Nome immagine (nome univoco per l'immagine);
Immagine originale (l'immagine che apparirà di default sulla pagina);
Immagine rollover (l'immagine che apparirà quando passeremo il mouse sull'immagine originale);
Pre-carica immagine di rollover (spuntare la casella per far caricare subito al browser l'immagine di rollover);
Dopo un click, accedi all'URL (il link a cui punta l'immagine);
INSERIRE UNA BARRA DI NAVIGAZIONE - Dalla categoria 'comuni' del pannello 'oggetti', selezionando la terza icona a partire dalla parte superiore destra, scendendo verso il basso (quella con i tre rettangolini celesti), è possibile inserire una barra di navigazione nel nostro documento web. Dopo aver cliccato sul pulsante (icona) si aprirà una finestra di dialogo che ci consentirà di definire le seguenti opzioni:

Elementi barra di navigazione (cliccando sui tasti + e - potremo aggiungere o eliminare elementi dalla barra);
Nome elemento (deve essere un nome univoco, non può cominciare con un numero e non deve contenere spazi);
Immagine alzata (utilizziamo il tasto 'sfoglia' e la finestra di esplorazione che si aprirà per scegliere l'immagine alzata);
Immagine di rollover (stesso procedimento di sopra per l'immagine di rollover);
Immagine abbassata (stesso procedimento di sopra per l'immagine abbassata);
Immagine di rollover abbassata (stesso procedimento di sopra per l'immagine di rollover abbassata);
Dopo un click, accedi URL (inseriamo il file a cui punta l'elemento della barra);
In (determiniamo la destinazione del collegamento);
Pre-carica immagini (spuntiamo la casella per far caricare subito al browser le immagini della barra);
Mostra "Immagine abbassata" all'inizio (spuntiamo la casella per mostrare l'immagine abbassata all'inizio);
Inserisci (definiamo se la barra deve essere inserita orizzontalmente o verticalmente);
Usa tabelle (definiamo se usare o meno le tabelle per racchiudere gli elementi della barra);
INSERIRE UN PULSANTE IN FLASH - Sempre dalla categoria 'comuni' del pannello 'oggetti' abbiamo la possibilità di inserire un pulsante in flash. Per farlo basta cliccare sul settimo pulsante della colonna di sinistra, scendendo verso il basso (quello col piccolo pulsante azzurro). Dopo il click si aprirà una finestra dalla quale potremo settare le opzioni relative al pulsante, personalizzandolo al 100%:

Esempio (l'anteprima del pulsante in tempo reale);
Stile (definiamo il tipo di pulsante scegliendolo tra quelli elencati);
Testo pulsante (digitiamo il testo che deve comparire sul pulsante);
Carattere (scegliamo il tipo di carattere del testo del pulsante);
Dimensione (stabiliamo la dimensione del carattere del testo del pulsante);
Collegamento (impostiamo un collegamento a cui punterà il pulsante);
Destinazione (definiamo la destinazione del collegamento);
Colore sfondo (scegliamo il colore dello sfondo del pulsante);
Salva con nome (salviamo il pulsante nella posizione desiderata);

Inserire un testo in Flash - Immediatamente a destra rispetto all'icona per l'inserimento del pulsante in flash si trova quella per immettere un testo, sempre in flash. Cliccando su di essa si aprirà una finestra di dialogo che ci permetterà di settare tutte le opzioni relative alle proprietà del testo:

Carattere (impostiamo il tipo di carattere del testo);
Dimensione (scegliamo la dimensione del testo);
Stili e allineamento (applichiamo stili e allineamento attraverso i pulsanti grassetto, corsivo, allinea a sinistra, allinea al centro e allinea a destra);
Colore (definiamo un colore per il testo);
Colore rollover (definiamo un colore per il testo al passaggio del mouse);
Testo (inseriamo il testo vero e proprio);
Mostra carattere (spuntiamo la casella per avere un'anteprima del tutto nel riquadro testo);
Collegamento (associamo al testo un eventuale link);
Destinazione (impostiamo la destinazione del collogamento a cui punterà il testo);
Colore sfondo (scegliamo un colore per lo sfondo del testo);
Salva con nome (salviamo il testo nella posizione desiderata);
INSERIRE HTML DI FIREWORKS - Subito sopra il tasto per l'inserimento di un pulsante in flash si trova l'icona relativa all'importazione di HTML da un altro programma della Macromedia, Fireworks. Il codice potrà essere importato da un file del programma stesso, presente sul nostro hard disk. Tramite il pulsante 'sfoglia' che compare nella finestra di dialogo dopo aver cliccato sull'icona, potremo fare una scansione del disco fisso alla ricerca del file (come già detto, di Fireworks) da cui importare il codice.

Inserire oggetti Flash e Shockwave - Dreamweaver come abbiamo visto si integra perfettamente con altri programmi molto famosi della Macromedia e questo è senza dubbio uno degli aspetti che contribuisce a renderlo un software di grande successo. Inserire un oggetto Flash o Shockwave risulta alquanto semplice. Basta semplicemente utilizzare i tasti presenti nel pannello 'oggetti', categoria 'comuni'. Questi sono contraddistinti dagli inconfondibili loghi dei programmi. Una volta cliccato sul tasto scelto (inserisci flash o inserisci shockwave), si aprirà la 'solita' finestra di dialogo che ci permetterà di ripescare dal disco fisso il file in questione. A quest'ultimo si potrà associare un link (sempre dalla finestra di dialogo).

La finestra 'proprietà' riferita a un'immagine

Nome immagine - Dal campo 'nome' possiamo definire (digitandolo) un nome univoco che identificherà l'immagine nell'insieme degli altri elementi della pagina.

Dimensioni immagine - Nei campi 'larghezza' e 'altezza' possiamo esprimere la dimensione, in pixel o in percentuale, rispettivamente della larghezza e dell'altezza dell'immagine. Modificando questi parametri in modo inopportuno l'immagine potrebbe apparire distorta e deformata.

Origine immagine - Il campo 'origine' ci consente invece di definire il file di origine dell'immagine. Tramite la piccola cartella gialla affiancata alla casella 'collegamento' possiamo esplorare il disco fisso alla ricerca di un file in particolare. In alternativa utilizzeremo il mirino, trascinandolo su un file della finestra 'mappa del sito'.

Allineamento rispetto al testo - Il campo 'allineamento rispetto al testo' ci consente di determinare appunto come l'immagine dovrà essere allineata rispetto al testo (linea di base, in alto, al centro, in basso ecc...)

Allineamento immagine - Nella parte inferiore destra della finestra 'proprietà' riferita a un'immagine' troviamo i tre pulsanti di allineamento. Basterà un click per allineare l'immagine a sinistra, al centro o a destra nella pagina.

Testo alternativo - Dal campo 'testo alternativo' possiamo inserire (digitandolo) appunto un testo alternativo alla visualizzazione dell'immagine.

Spaziatura verticale e orizzontale - Dai campi 'spaziatura orizzontale' e 'spaziatura verticale' possiamo definire il valore (in pixel) che esprimerà proprio le spaziature dell'immagine (orizzontale e verticale).

Il pannello 'proprietà' riferito alle immagini ci consente di inserire altresì dei collegamenti ipertestuali, di decidere la destinazione di tali collegamenti e di impostare ulteriori opzioni, quali bordi e mappatura dell'immagine. Questi argomenti saranno trattati nella lezione relativa ai collegamenti ipertestuali.

Il menu inserisci - Come già detto in precedenza, tutte le opzioni riguardanti la gestione delle immagini e degli altri elementi visti in questo capitolo, sono raggiungibili dall'apposito menù 'inserisci' che si trova sulla barra dei menù, appena sotto la barra del titolo del programma.

Lezione successiva ->