inserimento di immagini,documenti,sfondi e oggetti flash

INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E
OGGETTI FLASH
IMPOSTAZIONE DI UNA IMMAGINE ALL’INTERNO DI UNA PAGINA WEB:
In questo capitolo è spiegata la procedura di inserimento e modifica di una immagine all’interno della
vostra pagina web, è bene ricordare, prima di passare alla spiegazione pratica, che è SEMPRE
estremamente consigliato dedicare all’immagine da inserire una cella specifica ( ridimensionandola in
modo analogo all’immagine stessa).
1) Posizionate il cursore nel punto in cui volete venga inserita l’immagine ( assicurandovi di aver prima
impostato, nella cella che la conterrà, l’allineamento esatto).
2) Cliccate su:
Inserisci/Modifica immagine.
3) Nella finestra che vi appare ( quella delle proprietà immagine, che approfondiremo poi) cliccate su “
cerca sul server”.
4) Vi appare una seconda finestra con elencate le immagini presenti sul server ( se non ne avete ancora
inserite, non ne sarà presente nessuna), cliccate su “sfoglia”
5) Vi appare una finestra di dialogo con il vostro computer; a questo punto, dovete selezionare
l’immagine che desiderate inserire e cliccare su “apri”.
6) A questo punto siete tornati alla seconda finestra, Cliccate quindi su “Upload”
7) l’immagine che avete scelto sarà inserita in ordine alfabetico nella lista delle immagini.
8) scegliete l’immagine dalla lista (cliccandoci sopra), Tornate così alla finestra delle proprietà immagine,
dalla quale potete impostarne le proprietà prima di inserirla (cliccando su OK).
PROPRIETA’ IMMAGINE:
Il pannello di proprietà immagine vi compare quando inserite una immagine nuova o quando lo selezionate
direttamente ( cliccando con il tasto destro sull’immagine scelta). Il pannello è diviso in 3 parti: Informazioni
immagine, Collegamento, e Avanzate:
1) Informazioni immagine:
URL : indica il percorso da seguire per trovare l’immagine all’interno del server ( ovvero la cartella nella
quale l’immagine è contenuta).
Testo alternativo: indica il testo che dovrà essere visualizzato quando il navigatore lascia il cursore del
mouse posizionato sopra l’immagine.
Larghezza e Altezza: sono i due valori che conferiscono la dimensioni all’immagine, variando uno solo dei
due valori, l’altro si adatterà a sua volta, mantenendo le proporzioni originali, è bene ricordare alcuni concetti
importanti sul ridimensionamento.
PRIMO: rimpicciolendo dal pannello di controllo una immagine grande, il suo peso in Megabyte rimarrà
invariato, per cui non è consigliabile utilizzare immagini enormi o in alta definizione per inserire piccoli loghi (
in quanto poi il tempo di caricamento della pagina web aumenterebbe inesorabilmente); SECONDO:
rimpicciolendo una immagine dal pannello di controllo, verrebbe visualizzata con una qualità leggermente
inferiore.
Per un inserimento ottimale delle immagini è consigliato lasciarle delle loro dimensioni originali, o,
eventualmente, ridimensionarle prima sul proprio computer tramite un apposito programma ( ne esistono
tanti scaricabili gratuitamente, come serif Photoplus o Pixia).
Blocca rapporto: tramite questo pulsante, potete decidere se mantenere le proporzioni durante il
ridimensionamento dell’immagine, quando il rapporto è bloccato ( ) modificando un solo valore, l’altro
varierà automaticamente, sbloccando invece il rapporto ( ) potrete variare un solo valore lasciando invariato
l’altro, ATTENZIONE: ridimensionando in questo modo l’immagine verrà deformata e perderà le proporzioni
originali.
Reimposta dimensione: tramite questo pulsante, riporterete l’immagine alla sua grandezza originale.
Bordo: da qui potete impostare lo spessore in pixel del bordo dell’immagine, se lasciate la voce vuota, il
bordo assumerà valore zero ( tranne nel caso in cui l’immagine abbia anche un link,dove verrà visualizzato il
bordo, per non visualizzarlo, in questo caso, dovete inserire 0 nella voce corrispondente).
HSpace: Questo comando ( horizontal space) imposta la distanza in pixel che intercorrerà dai i margini
laterali dell’immagine ai margini sinistro e destro della cella che la contiene, in sostanza, impostando un
valore di 10, l’immagine si posizionerà in modo da essere sempre e comunque distante 10 pixel sia dal
margine sinistro, sia dal margine destro della cella che la contiene ( anche dilatandone le dimensioni).
VSpace: Questo comando ( Vertical Space) agisce in modo analogo al HSpace, con l’unica differenza che
riguarda la distanza dai margini superiore ed inferiore della cella contenente.
Allineamento: questo comando serve ad impostare l’allineamento che l’immagine dovrà tenere all’interno
della cella, è bene ricordare che, qualora l’allineamento della cella non coincida con questo allineamento,
l’immagine si allineerà secondo questo valore, quindi, allo scopo di evitare confusione, è consigliabile non
utilizzare questo comando, avvalendosi solamente dell’allineamento impostabile dalle proprietà della cella.
2) Collegamento:
Questo pannello è utile nel caso in cui vogliate collegare l’immagine ad un documento (excel, word, pdf,
power point ecc..), per farlo consultate l’apposito paragrafo alle pagine successive.
3) Avanzate:
Questo pannello consente il settaggio delle proprietà avanzate dell’immagine, come l’ID o l’appartenenza ai
fogli di stile.
L’utilizzo di questa sezione, per propria natura, è riservato a Webmaster ed informatici provvisti di
competenze specifiche, pertanto, la sua spiegazione, non è inclusa in questo manuale, in quanto
risulterebbe superflua a chi di mestiere, ciononostante, abbiamo comunque ritenuto giusto farne menzione,
per consentire ad utenti specializzati di usufruire anche di queste funzionalità.
Per qualsiasi chiarimento particolare, potete scrivere a [email protected] .
IMPOSTAZIONE DI UN DOCUMENTO ALL’INTERNO DI UNA
PAGINA WEB:
E’ possibile aggiungere un documento ( word, excel, pdf, eccH) nella nostra pagina web. Per farlo è
sufficiente seguire attentamente la seguente procedura.
1) selezionare un’immagine a piacimento che andrà a linkare il nostro documento, gli esempi più
classici sono:
Ovviamente non è necessario utilizzare queste immagini per segnalare il documento, sarebbe sufficiente
anche solo il testo, esse però sono consigliate in quanto sono le più utilizzate nel web e quindi quelle
che raccolgono il miglior feedback (in termini di click e visite) da parte degli utenti.
2) Dopo aver montato l’immagine sulla pagina ( vedi paragrafo precedente) accedete alle sue
proprietà, cliccandoci sopra con il tasto destro.
3) Nella schermata delle proprietà immagine, selezionate la seconda scheda ( Collegamento)
4) sulla voce destinazione, settate la finestra dove desiderate venga aperto il documento ( se sulla
stessa pagina o in un’altra finestra).
5) a questo punto, cliccate su “cerca sul server” e ripetete la stessa procedure vista per l’inserimento
dell’immagine ( vedi paragrafo precedente) selezionando però, all’interno del vostro computer, il
documento in questione.
NB. Dopo aver Linkato l’immagine essa vi apparirà contornata di blu, per eliminare il contorno, andate in
“proprietà immagine” e digitate 0 (zero) nella voce corrispondente a “bordo”.
COLLEGARE UN DOCUMENTO CON UN LINK DI TESTO :
Se desiderate collegare il testo al documento ( anziché l’immagine) vi basterà seguire questa procedura:
1) digitate il testo che volete collegare ( ad esempio: “CLICCA QUI PER APRIRE IL DOCUMENTO”)
2) andate nelle proprietà immagine ( di prima.
FIG 1)
Nella finestra di dialogo, (FIG 1) cliccare su: cerca sul server, verrà visualizzata la seguente schermata:
FIG 2)
Quando visualizzate questa schermata,(FIG 2) cliccate su “sfoglia” e selezionate ( all’interno del vostro
computer) il documento che volete inserire; a questo punto ritornerete alla schermata precedente, con
l’unica differenza che il vostro documento sarà pronto da inserire; ( vedi FIG 3 sotto)
FIG 3)
Ora, cliccate su “Upload” e il vostro documento pdf sarà inserito nella cartella del server; per semplicità,
assicuratevi di inserire il documento sulla stessa cartella dell’immagine di riferimento ( le icone viste al
punto 1) .
Una volta inserito il documento nella cartella del server vi apparirà in lista nella finestra sopra
riportata(figura 3); basterà cliccarci sopra e confermare cliccando su “ok” nella schermata che verrà
visualizzata.
COLLEGAMENTO DEL DOCUMENTO ALL’IMMAGINE:
, questa “finta
Arrivati a questo punto nella vostra pagina vedrete un’icona di questo tipo:
immagine”, in realtà, non rappresenta altro che il vostro documento che, ovviamente, non può ancora
essere visualizzato; per collegare il documento all’immagine ( o al testo) che avevate inserito, sarà
sufficiente seguire questi ultimi passaggi essenziali.
1) cliccate con il tasto destro sull’immagine
, selezionate, “proprietà immagine”
2) Nella finestra che vi apparirà (FIG 5 sottostante) selezionate il percorso del documento ( quello in
alto nella barra intitolata URL), copiate la dicitura con tasto destro copia.
FIG 4)
3) Chiudete la finestra di dialogo cliccando su “annulla”
4) Selezionate il testo che avevate preparato al collegamento ( nell’esempio: “CLICCA QUI PER
APRIRE IL DOCUMENTO”)
5) Inserite un link tramite l’apposito pulsante
nella barra degli strumenti.
6) Ora, seguite la procedura illustrata nelle seguenti figure
Fatto questo vi basterà cliccare su “OK” e il vostro testo sarà linkato al documento.
CONSIGLIO. Per agevolare la navigazione del visitatore impostate il link del documento dirigendolo
sempre in una nuova finestra, per fare questo Vi basterà cliccare sull’area “destinazione” (vedi figura
sopra) e selezionare dall’apposita tendina la voce “nuova finestra_blank).
IMPOSTAZIONE DELLO SFONDO DI UNA CELLA O DI UNA
PAGINA WEB:
Per impostare uno sfondo specifico alla pagina web, sarà sufficiente posizionare il cursore sulla cella madre
( la tabella iniziale costituita da una cella larga il 100% , menzionata nel capitolo “tabelle ed organizzazione
dei contenuti”)
E’ possibile impostare lo sfondo di una cella sia con un colore, sia con una immagine; solitamente, è anche
noto l’utilizzo di una immagine di sfondo nel caso in cui si voglia sovrascriverla con del testo o altri contenuti
( se ad esempio si vuole creare un bottone, si inserisce come sfondo di una cella il bottone “vuoto” e si
scrive sopra il testo nella posizione desiderata).
E’ necessario chiarire, prima di vedere il procedimento, che l’immagine usata come sfondo ha una sua
dimensione ben precisa, NON si adatta, quindi, alla grandezza della cella che la contiene, per cui, se si
inserisce una immagine di sfondo di 100 x 100 in una cella di 100 x 200, tale immagine si vedrà due volte (si
vedranno due immagini identiche attaccate, in quanto lo sfondo si ripete) Ora vedremo i principali passaggi
per creare uno sfondo all’interno di una cella.
IMPOSTAZIONE DEL COLORE DI SFONDO:
1) selezioniamo la cella desiderata, e cliccare con il tasto destro. Selezionare la voce “Cella” (immagine
sotto)
FIG 1
nel sotto menù selezioniamo “proprietà cella”
FIG 2
2) nella finestra di dialogo sottostante, clicchiamo su Sfoglia, accanto alla voce: colore di sfondo:
FIG 3)
Visualizzeremo la finestra seguente:
FIG 4)
A questo punto sarà sufficiente selezionare il colore e spingere per ottenere il colore voluto.
IMPOSTAZIONE DI UNA IMMAGINE DI SFONDO:
Per impostare una immagine.. partiamo dal procedimento precedente alla FIG 3, cliccare su “Cerca sul
Server” dopodiché utilizzare lo stesso procedimento visto per l’inserimento di immagine ( vedi cap:
inserimento di una immagine). Il risultato finale sarà:
FIG 5)
Ovviamente.. lo sfondo non è visualizzato completamente.. perché si adatta alla dimensione della cella,
per visualizzarlo completamente.. sarà sufficiente impostare le dimensioni della cella (vedi cap: proprietà
delle celle) uguali a quelle dell’immagine usata come sfondo; se si agirà in tal senso il risultato sarà
questo:
FIG 6)
Ora visualizziamo lo sfondo interamente.. e possiamo anche sovrascriverlo, scrivendo all’interno della
cella esattamente come fosse vuota: ecco l’esempio con la parola “eTecna web”
FIG 7)
ATTENZIONE: se si imposta la cella più grande dell’immagine di sfondo (nell’esempio sotto è a 400 x
120) il risultato sarà la visualizzazione dello sfondo stesso ripetuto nello spazio disponibile:
FIG 8)
NB: è chiaro che il posizionamento del testo all’interno della cella risulterà difficoltoso inserendolo senza
annidarlo in nessuna tabella: per risolvere il problema; basterà creare all’interno della cella (allineandola
prima in modo centrato- in alto) una tabella ad ampiezza 100% con numero di righe e colonne adeguato
a ciò che si vuole inserire, in modo da poter inserire contenuti nella posizione desiderata ( vedi FIG 9).
FIG 9)
Come possiamo notareH grazie alla tabella ( 4 righe 3 colonne ) inserita dentro la nostra cella,
possiamo posizionare il testo nel punto che ci è più congeniale, ovvio che.. nel caso dovessimo scrivere
un lungo testo in modo discorsivo, ci basterebbe digitarlo nella cella primaria allineandola in alto – a
sinistra, così facendo però, otteniamo una griglia con tante celle, che fungono da “coordinate per i nostri
contenuti”.
INSERIMENTO DI UN DOCUMENTO FLASH ALL’INTERNO DI
UNA PAGINA WEB:
Tramite l’editor di pagina è possibile inserire animazioni e contenuti multimediali in flash ( formato swf)
all’interno della pagina web, per farlo, dovete rispettare la seguente procedura:
1) posizionate il cursore nella posizione dove volete inserire l’animazione ( prestando sempre la massima
attenzione all’allineamento della cella corrispondente).
2) cliccate su:
Inserisci/modifica oggetto flash
3) Vi si apre la finestra “proprietà oggetto flash”, cliccate su “cerca sul server”
4) Vi si apre la seconda finestra ( di comunicazione al server), a questo punto, procedete in modo analogo
all’inserimento delle immagini ( vedi apposito paragrafo).
Una volta inserita l’animazione, la visualizzerete all’interno dell’editor in questo modo:
da qui potrete selezionarla e variarne le dimensioni, trascinandone i bordi con il puntatore del mouse.
(le dimensioni possono anche essere impostate utilizzando l’apposito pannello “proprietà oggetto flash”,
spiegata di seguito).
PROPRIETA’ OGGETTO FLASH:
come visualizzato nell’esempio, tramite questo pannello visualizzerete un’anteprima dell’animazione, e
potrete digitarne le dimensioni esatte.
IMPOSTAZIONI AVANZATE:
Questa sezione, analogamente a quella delle immagini, è riservata a webmaster e utenti esperti, per cui, la
sua spiegazione, non è inserita all’interno di questo manuale, per qualsiasi chiarimento particolare, potete
scrivere a [email protected] .