Capitolo3 LAVORARE CON LE IMMAGINI

Capitolo3
LAVORAR E CON LE IMMAGINI
E’ certo che l’impatto visivo in un sito internet è molto importante ma è bene tenere presente che
immagini e fotografie, pur arricchendo la struttura grafica di un web, ne possono rallentare molto il
caricamento.
FrontPage è in grado di gestire i formati GIF, JPEG e PNG. E’ consigliabile utilizzare il formato GIF per le
immagini con non più di 256 colori (in genere clipart o loghi). Il formato JPEG è in grado di gestire milioni
di colori ed è quindi più indicato per le fotografie; anche il formato PNG supporta milioni di colori ma è
meno usato.
Inoltre FrontPage2000 mette a disposizione tutta una serie di pulsanti per la modifica e la gestione delle
immagini.
Si apra l’Home Page del nostro sito facendo doppio clic su index.htm.
3.1 INSERIRE UN’ IMMAGINE DI SFONDO
Qualora si desiderasse utilizzare come sfondo un’immagine, dal menù File selezionare Proprietà, nella
scheda Sfondo come indicato in Figura 29 spuntare la casella Immagine di sfondo. Facendo clic sul
pulsante Sfoglia ricercare la posizione in cui si trova l’immagine da inserire.
Figura 29. Proprietà immagine di sfondo
Si apre la seguente finestra
CORSO DI FRONTPAGE
23
- Università degli Studi della Repubblica di San Marino -
Figura 30. Seleziona immagine di sfondo
Se non si possiede nessuna immagine, fare clic sul pulsante ClipArt come indicato in Figura 30.
Nella finestra che si apre, fare clic sulla categoria Affari.
Figura 31. Categoria Affari
Nella nuova finestra occorre scegliere una delle clipart proposte; fare clic sulla prima clipart e
successivamente cliccare su Inserisci oggetto Clipart come indicato in Figura 32.
CORSO DI FRONTPAGE
24
- Università degli Studi della Repubblica di San Marino -
Figura 32. Inserisci ClipArt
Fare clic su OK.per chiudere la finestra
E’ stata inserita l’immagine di sfondo.
L’immagine generalmente ha dimensioni inferiori alla dimensione della pagina e quindi l’immagine viene
ripetuta. Inoltre, poiché la pagina difficilmente è multiplo esatto delle dimensioni dell’immagine, si ha che
questa, a confine con i bordi della videata, viene tagliata. E’ quindi preferibile utilizzare, le immagini di
sfondo per le tabelle, le cui dimensioni possono essere fissate, oppure usare immagini di piccole
dimensioni.
Per vedere meglio le caratteristiche dell’immagine di sfondo, dopo il testo “Lezione3” battere Invio
diverse volte (almeno nove) e osservare che l’immagine di sfondo viene replicata per tutta la lunghezza
del testo della pagina. Facendo scorrere la barra di scorrimento verticale si osserva che l’immagine di
sfondo scorre insieme al testo.
3.2 FISSARE L’MMAGINE
Per fissare l’immagine sullo sfondo in modo che il testo le scorra sopra, dal menù File selezionare
Proprietà, aprire la scheda Sfondo, spuntare la casella Filigrana e fare clic su OK. Per verificare che lo
sfondo non scorre più col testo occorre per prima cosa salvare le modifiche.
Quando si fa clic sul pulsante Salva
, si apre la seguente finestra
CORSO DI FRONTPAGE
25
- Università degli Studi della Repubblica di San Marino -
Figura 33. Salva file incorporati
in cui è necessario es plicitare la cartella in cui si vuole che sia salvata l’immagine. Come inizialmente
abbiamo specificato, le immagini devono essere contenute nella cartella images, quindi occorre fare clic
sul pulsante Cambia cartella, fare doppio clic sulla cartella image s e poi cliccare su OK.
Prima di chiudere la finestra, è consigliabile anche rinominare l’immagine con un nome più significativo:
fare clic sul pulsante Rinomina e dare ad esempio il nome sfondoHomepage.
Si ottiene la seguente finestra, vedere Figura 34, in cui si chiede di salvare la clipart di nome
sfondoHomepage nella cartella images; a questo punto fare clic su OK.
Figura 34. Cambia nome all’immagine
CORSO DI FRONTPAGE
26
- Università degli Studi della Repubblica di San Marino -
Per verificare le due diverse modalità di sfondo, spuntando o meno l’opzione Filigrana, occorre cliccare
sulla scheda Anteprima e far scorrere la barra di scorrimento verticale per vedere le modifiche.
Figura 35. Scheda Anteprima -Normale
Cliccare sulla scheda Normale (Figura 35 ) per tornare alla visualizzazione di lavoro.
Poiché l’immagine di sfondo non è adatta a costituire lo sfondo del nostro esercizio, procedere cliccando
sul pulsante Annulla digitazione
fino ad annullare l’operazione di inserimento dell’immagine.
3.3 IMPORTARE UN’ IMMAGINE
Si vuole utilizzare come immagine di sfondo lo stemma della Repubblica di San Marino che si era
precedentemente scaricato sul Desktop. Occorre importare l’immagine nel nostro sito (questa operazione
può essere fatta per qualsiasi tipo di file); per far ciò dal menù File selezionare Importa; si apre la
seguente finestra
Figura 36. Aggiungi file
Fare clic sul pulsante Aggiungi file, si apre la finestra indicata in Figura 37.
CORSO DI FRONTPAGE
27
- Università degli Studi della Repubblica di San Marino -
Figura 37. Aggiungi stemma
Alla voce Cerca in selezionare Desktop e tra gli elementi presenti selezionare Stemma. Fare clic su Apri
e nella finestra Importa fare clic su OK.
L’immagine viene inserita nella posizione in cui si trova l’ultimo file aperto; poiché le immagini, come
precedentemente affermato, devono essere contenute nella cartella images, procedere selezionando
l’immagine stemma.gif, cliccare e tenendo premuto trascinare fin sopra la cartella images; rilasciare il
tasto del mouse.
Si vuole procedere ora ad inserire lo stemma come immagine di sfondo nella Home Page del nostro sito:
dal menù File selezionare Proprietà, aprire la scheda Sfondo e come prima spuntare la casella
Immagine di sfondo, fare clic sul pulsante Sfoglia, nella finestra che si apre alla voce Cerca in
selezionare la cartella images e successivamente fare clic sull’immagine stemma.gif
Figura 38. Seleziona immagine stemma
CORSO DI FRONTPAGE
28
- Università degli Studi della Repubblica di San Marino -
Fare clic su OK per chiudere questa finestra e la successiva.
L’immagine viene inserita come sfondo e ripetuta per tutta la sua lunghezza.
3.4 ATTENUARE I COLORI DI UN’ IMMAGINE
L’immagine di sfondo non deve interferire col testo della pagina, per questo spesso vengono usate
immagini con colori tenui. Anche nel nostro caso, l’immagine appena inserita è troppo “forte” si deve
perciò attenuare il colore. Per prima cosa è buona norma effettuare una copia dell’immagine per
conservare la versione originale. Si apre la cartella images, si clicca su stemma.gif, si fa clic sull’icona
Copia e successivamente sull’icona Incolla . Viene inserita una copia dell’immagine il cui nome è
stemma_copia(1).gif; rinominare la nuova immagine assegnando il nome stemmaoriginale.gif.
Dal menù Visualizza selezionare Barre degli strumenti e successivamente Immagini, fare clic in un
punto qualsiasi della pagina index.htm e successivamente cliccare sull’icona Colori attenuati indicata in
Figura 39
Figura 39. Barra strumenti Immagini
L’immagine di sfondo ha ora un effetto attenuato.
Chiudere la pagina e salvarla rispondendo OK a tutte le richieste.
3.5 INSERIRE UN’ IMMAGINE
In questo paragrafo si imparerà ad inserire un’immagine in una nuova pagina.Inserire una nuova pagina
facendo clic sull’icona
; salvarla all’interno della cartella Lezione1 con Nome file immagini e Titolo
pagina “Lavorare con le immagini”, come indicato in Figura 40.
Figura 40. Pagina “Lavorare con le immagini
CORSO DI FRONTPAGE
29
- Università degli Studi della Repubblica di San Marino -
(dal menù File si selezioni Salva con nome, alla voce Salva in, selezionare la cartella Lezione1, per far
ciò è sufficiente fare due clic sulla cartella Lezione1; in corrispondenza di Nome file si digiti “immagini”, in
Titolo pagina facendo clic sul pulsante Cambia, digitare “Lavorare con le immagini”).
Successivamente fare clic su OK, quindi clic su Salva per chiudere la finestra.
Dal menù Inserisci selezionare Immagine.
Figura 41. Inserisci immagine
Se si possiede un’immagine sul computer locale, selezionare Da file e nella scheda che si apre
selezionare il percorso a cui appartiene il file. Se al momento, non si possiede un’immagine
selezionare ClipArt.
Nella finestra che si apre, fare clic sul pulsante Ingrandisci
disposizione.
Nella seguente schermata vedi Figura 42,
per visionare appieno le clipart messe a
CORSO DI FRONTPAGE
30
- Università degli Studi della Repubblica di San Marino -
Figura 42. Raccolta clipart
cliccare sulla categoria Fotografie. Nel nostro caso si è scelto il tramonto indicato in Figura 43.
Inserisci oggetto Clipart
Figura 43. Tramonto
CORSO DI FRONTPAGE
31
- Università degli Studi della Repubblica di San Marino -
Per inserire l’immagine cliccare sull’icona Inserisci Oggetto Clipart come indicato in Figura 43.
Salvare l’immagine facendo clic sull’icona Salva
, nella finestra che si apre salvare l’immagine nella
cartella images e assegnarle un nome, ad esempio “Tramonto”, seguendo le procedure indicate a
pagina 26. Aprire la cartella images e controllare che la nuova immagine vi compaia.
L’immagine viene posizionata per default in alto a sinistra. Una più precisa collocazione delle immagini
all’interno della pagina può essere definita con l’utilizzo delle tabelle.
3.6 MODIFICARE L’ASPETTO DELL’IMMAGINE
Per modificare l’aspetto dell’immagine è necessario cliccare sull’immagine in modo da selezionarla;
automaticamente viene attivata la barra degli strumenti Immagini, generalmente posizionata sul fondo.
Figura 44. Barra degli strumenti immagini
Si osservi che ai lati dell’immagine compaiono dei quadratini i quali indicano che l’immagine è stata
selezionata.
Cliccare col tasto destro del mouse sull’immagine selezionata e dal menù a scelta rapida che si apre
selezionare Proprietà immagine. Si apre la seguente finestra:
Figura 45. Proprietà immagine
CORSO DI FRONTPAGE
32
- Università degli Studi della Repubblica di San Marino -
In questa scheda è possibile convertire il tipo di file, ad esempio da gif a jpeg operazione consigliata
considerato il fatto che si tratta di una fotografia.
Inoltre è possibile definire la Qualità; si ricordi che più alta è la qualità dell’immagine, e con essa la sua
risoluzione, maggiore sarà il peso in Kb e di conseguenza più lungo sarà il tempo necessario all’utente
per aprire la pagina.
Alla voce Testo è possibile inserire un titolo che comparirà nel momento in cui il visitatore posizionerà,
senza cliccare, il mouse sull’immagine. Nel nostro esercizio digitare il testo “Tramonto” come indicato in
Figura 45.
Alla voce Collegamento ipertestuale predefinito è possibile realizzare un collegamento ad altri file, in
modo che, cliccando sull’immagine si aprirà una nuova sezione del sito. Questa opzione può essere
realizzata meglio con la teoria che vedremo nel capitolo successivo.
Alla voce Rappresentazioni alternative in Bassa risoluzione è possibile indicare il percorso di
un’immagine molto più piccola da far vedere all’utente mentre attende che si apra quella più pesante. A
questa opzione è preferibile la realizzazione di miniature, cioè di immagini rimpicciolite, affiancate da un
collegamento all’immagine vera e propria: il visitatore, vedendo la foto in miniatura, può decidere se
aprire l’immagine più grande, con notevole risparmio di tempo.
Si chuda la finestra Proprietà immagine facendo clic su OK.
Si faccia clic sul pulsante Salva, si apre una finestra in cui si chiede di salvare l’immagine.jpg nella
cartella images; fare clic su OK.
Realizziamo ora una miniatura per confrontare le diverse dimensioni in Kb.
Nella pagina immagini.htm della Lezione1, fare una copia dell’immagine tramonto (si procede nel modo
tradizionale, si seleziona l’immagine, si fa clic sul pulsante Copia, si clicca all’interno della pagina nella
posizione in cui si vuole inserire la nuova copia dell’immagine e si clicca sul pulsante Incolla).
Selezionare la nuova copia dell’immagine.
Per realizzare una miniatura in maniera automatica cliccare sull’icona Miniatura
terza icona della
Barra degli strumenti Immagini. Fare clic sul pulsante Salva e salvare la nuova immagine all’interno
della cartella images col nome “Tramonto_piccolo”; fare clic su OK.
L’immagine verrà notevolmente ridotta sia di dimensioni fisiche che di peso, dando comunque l’idea di
ciò che rappresenta.
Si apra la cartella images facendo clic sul segno + a fianco della stessa; si avrà la seguente situazione:
CORSO DI FRONTPAGE
33
- Università degli Studi della Repubblica di San Marino -
Figura 46. Confronto immagini
In Elenco cartelle , cliccare col tasto destro del mouse sul file Tramonto.jpg della cartella images, nel
menù di scelta rapida selezionare Proprietà. Si apre la finestra seguente in cui è indicata la dimensione
in byte e in KB.
CORSO DI FRONTPAGE
34
- Università degli Studi della Repubblica di San Marino -
Figura 47. Peso tramonto jpg
Procedere in modo analogo per l’immagine Tramonto_piccolo.jpg. Notare che l’immagine piccola ha
effettivamente dimensione inferiore.
3.7 ALLINEAMENTO DELL’IMMAGINE RISPETTO ALLA PAGINA
All’interno della pagina immagini.htm della cartella Lezione1, cliccare col tasto destro del mouse
sull’immagine Tramonto.jpg e dal menù a scelta rapida che si apre selezionare Proprietà immagine.
Aprire la scheda Aspetto.
CORSO DI FRONTPAGE
35
- Università degli Studi della Repubblica di San Marino -
Figura 48. Proprietà immagine Aspetto
In questa scheda è possibile definire le opzioni relative all’allineamento dell’immagine. A tal proposito è
bene sottolineare che fino ad ora, per allineamento dell’immagine si è inteso rispetto alla pagina che la
contiene. Per realizzare allineamenti più precisi è necessario creare tabelle che contengano le immagini
in opportune celle. Questa sezione verrà realizzata nel Capitolo 5.
Cliccando sulla freccia nera nella casella Allineamento, è possibile scegliere tra le diverse opzioni di
allineamento. La maggior parte di queste opzioni fa variare di poco l’allineamento dell’immagine; questo
è uno dei motivi per cui è più opportuno studiare un posizionamento più preciso con le tabelle. In genere
si desidera un allineamento in alto e a sinistra, per realizzar ciò scegliere a sinistra.
In Spaziatura orizzontale e verticale è possibile specificare quanto spazio bianco in pixel si desidera
lasciare attorno all’immagine: selezionare 8 in entrambe le tipologie di spaziatura.
Fare clic su OK per chiudere la finestra. Si osservi ora che l’immagine Tramonto ha nel suo contorno uno
spazio bianco che l’immagine in miniatura non ha (lo si nota in particolar modo osservando i quadratini di
selezione: nella prima comprendono un bordo bianco, nella seconda no).
3.8 RIDIMENSIONARE LE IMMAGINI NEL LORO ASPETTO
Si è già osservato che l’immagine selezionata ha nel suo contorno dei quadratini. Tramite essi è possibile
ridimensionare l’immagine. A tale proposito è necessario precisare che con queste operazioni non si
riduce la dimensione dell’immagine intesa come peso espresso in KB o byte, operazione per la quale
sarebbe necessario ridurre la quantità di dati necessari per la visualizzazione della stessa immagine, si
tratta esclusivamente di un ridimensionamento nell’aspetto.
Cliccando sull’immagine e tenendo premuto il tasto del mouse, è possibile trascinare l’immagine in una
posizione diversa da quella iniziale; posizionando il cursore del mouse su uno dei quadratini si osserva
CORSO DI FRONTPAGE
36
- Università degli Studi della Repubblica di San Marino -
che questo assume la forma di una doppia freccia nera; cliccando e trascinando si ottiene un
ridimensionamento secondo quella direzione. Si provi a rimpicciolire un po’ l’immagine.
Dopo aver ridimensionato l’immagine, è consigliabile utilizzare un nuovo pulsante messo a disposizione
da FrontPage 2000: esso consente di ridurre la dimensione del file (questa volta in KB o byte) e di
rendere più nitida l’immagine. Nella Barra degli strumenti Immagini scegliere il pulsante Adatta
risoluzione
, l’immagine dovrebbe apparire più nitida. Per verificare l’effettiva riduzione di
dimensione è necessario fare clic sul pulsante Salva, si apre una finestra in cui verrà chiesto di
sovrascrivere l’immagine nella cartella images; fare clic su OK. Ora, in Elenco cartelle, cliccare col tasto
destro del mouse sull’immagine Tramonto.jpg della cartella images, nel menù di scelta rapida selezionare
Proprietà, si apre la finestra in cui è indicata la dimensione in KB inferiore ai precedenti 4,11KB (vedi
Figura 47).
3.9 LUMINOSITA’, CONTRASTO, TRASPARENZE
Con l’immagine selezionata, è possibile attivare le icone della barra degli strumenti Immagini.
Figura 49. Barra degli Strumenti Immagini
Provare per esercizio i seguenti comandi e osservarne gli effetti sull’immagine Tramonto:
Aumenta contrasto
Diminuisci contrasto
Aumenta luminosità
Diminuisci luminosità
Per ripristinare l’immagine come era inizialmente, cliccare sull’icona Ripristina
.
L’icona Colori attenuati
ha come effetto quello di aumentare la luminosità e ridurre il contrasto
(come abbiamo visto è ideale per immagini di sfondo).
L’icona Bianco e nero
converte l’immagine a colori in bianco e nero.
L’icona Imposta colore trasparente
ha la proprietà di rendere trasparente il colore che seleziona.
Questa opzione è utile per eliminare, ad esempio, il contorno dell’immagine che si desidera utilizzare
come sfondo. Un’immagine può avere solo un colore trasparente.
Si provi questa opzione nel seguente esercizio: si vuole inserire una immagine su uno sfondo colorato in
modo che si amalgami con esso.
Per far ciò, nella pagina immagini.htm si inserisca uno sfondo colorato (dal menù Formato selezionare
Sfondo e scegliere il colore azzurro già utilizzato per la pagina index.htm della cartella Lezione1)
successivamente, dopo aver fatto clic in una porzione libera del foglio, inserire la clipart (dal menù
Inserisci selezionare Immagine e successivamente ClipArt). Se l’mmagine ha dimensioni troppo grandi
procedere per rimpicciolirla.
CORSO DI FRONTPAGE
37
- Università degli Studi della Repubblica di San Marino -
Figura 50. Immagine trasparente
Cliccare sulla clipart appena inserita per selezionarla, nella barra degli strumenti Immagini cliccare
sull’icona Imposta colore traspare nte
, (rispondere OK al messaggio di conversione da jpg a gif)
portare il cursore sullo sfondo bianco della clip e cliccare; si ottiene il seguente risultato
Figura 51. Risultato immagine trasparente
CORSO DI FRONTPAGE
38
- Università degli Studi della Repubblica di San Marino -
3.10 PROFONDITA’ E TESTO NELLE IMMAGINI
Per aumentare la profondità alle immagini e renderle simili nell’aspetto ad un pulsante, è possibile
utilizzare l’icona Telaio
. Provare questa caratteristica sulla clipart appena inserita.
L’icona testo
, consente di aggiungere testo alle immagini senza che sia necessario un editor
apposito. Si selezioni l’immagine Tramonto, si clicchi sull’icona Testo della Barra degli srumenti
Immagini e si digiti, ad esempio, “Tramonto Riviera Adriatica”. Il testo appena inserito è racchiuso fra sei
quadratini i quali hanno la proprietà di ridimensionare le dimensioni del testo. Per spostarlo, ad esempio
in alto al centro, occorre cliccare tra due quadratini in modo da far comparire un rettangolo contenente il
testo, posizionare il puntatore del mouse sul bordo e tenendo premuto il tasto del mouse trascinare fino
alla posizione desiderata. E’ poi possibile cambiare il colore al testo, ad esempio renderlo bianco; per far
ciò dal menù Formato scegliere Carattere e alla voce Colore cliccare sulla freccia del menù a scelta
rapida e selezionare il colore bianco. Fare clic su OK.
Si è ottenuto
Figura 52. Tramonto Riviera Adriatica
Salvare le modifiche facendo clic su pulsante
; alla richiesta di salvataggio dell’immagine clipart,
digitare il nome dadi e salvarla nella cartella images. Chiudere la pagina.
CORSO DI FRONTPAGE
39
- Università degli Studi della Repubblica di San Marino -