Capitolo3. Si apre la seguente finestra. Figura 29. Proprietà immagine di sfondo. - Università degli Studi della Repubblica di San Marino -

Transcript

1 Capitolo3 LAVORARE 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 23

2 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

3 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 25

4 Figura 33. Salva file incorporati in cui è necessario esplicitare 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 images 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 26

5 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

6 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 28

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

8 (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 per visionare appieno le clipart messe a disposizione. Nella seguente schermata vedi Figura 42, 30

9 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 31

10 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 32

11 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: 33

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

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

14 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 36

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

16 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 38

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