Lo spazio di Ugosan: February, 2008

Ugo's profileLo spazio di UgosanPhotosBlogListsMore

Tools

Help

<< First < Previous Next > Last >>

February 19

Upload, inserimento di immagini ed effetti applicabili nei Live Spaces

Dato che ultimamente ho ricevuto diverse richieste in merito, da parte di "novizi" webmaster, poco pratici con gli spaces perchè al loro primo approccio con questo genere di cose, in questo intervento vi parlerò di tutto quello che concerne l'inserimento delle immagini negli spaces, quindi, procedendo con ordine:

1- dell'upload su un sito free image hosting

2- dell'inserimento in un intervento/guestbook (o in un modulo HTML Personalizzato)

3- dell'inserimento come sfondo in un intervento

4- dei vari effetti applicabili alle immagini (bianco&nero; raggiX; immagine capovolta; negativo; effetto specchio; distorsione; trasparenza; testo su immagine), visualizzabili solo con Internet Explorer.

1- UPLOAD (caricamento) DELL'IMMAGINE

· Andate su questo sito http://www.imageshack.us/ (non è necessaria la registrazione);

· Fate click su "Sfoglia" e cercate l'immagine che volete caricare (che deve trovarsi sul vostro pc, ovviamente): assicuratevi che sia nel formati supportati (jpg jpeg png gif bmp tif tiff swf) e che non sia più grande di 1.5 Mb ;

· Premete il tasto "Host it" e attendete la fine del caricamento;

· Appariranno una serie di codici: quello che a noi interessa è il "Direct link to image", quindi segnatevelo.

2- INSERIMENTO IN UN INTERVENTO e NEL GUESTBOOK (o in un MODULO HTML Personalizzato)

· Nella schermata di creazione di un intervento (o di modifica del messaggio del guestbbok), cliccate sul tasto HTML, che si trova sulla barra in alto a destra, e verrà visualizzato il testo da voi scritto in linguaggio HTML;

· Cercate il punto del vostro intervento dove volete inserire l'immagine e incollate lì uno di questi due codici (se non volte cambiare l'altezza e la larghezza dell'imagine usate il primo):

oppure

· Inserite, al posto della scritta "Direct link to image" (MA LASCIATE LE VIRGOLETTE!!!) il codice (cioè il link) che vi siete segnati dopo l'upload dell'immagine;

· se volete cambiare l'altezza (height) e/o la larghezza (width) dell'immagine, dovete utilizzare il secondo codice: modificate il valore delle cifre, che, nell'esemio, vedete evidenziate in rosso;

· premete nuovamente sul tasto HTML in alto sulla barra e controllate i risultato: se nn vi piace, non dovete fare altro che ripremere HTML e cambiare i parametri impostati.

Per inserire l'immagine in un modulo HTML Personalizzato, il procedimento è simile: non dovete fare altro che inserire il codice nel modulo (dopo aver premuto "Modifica" sul modulo stesso) e poi premere "Pubblica".

3- INSERIMENTO DI UN'IMMAGINE COME SFONDO IN UN INTERVENTO

· Nella schermata di inserimento di un nuovo intervento premete su HTML sulla barra in alto e copiate, avendo prima cancellato tutto, questo codice:

<TABLE style="WIDTH: 100%; HEIGHT: 55%"> <TBODY> <TR align=middle> <TD align=middle width=400 background=DIRECT LINK TO IMAGE height=100> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> <P align=center><B><FONT face="Lucida Handwriting" size=5>TUO TESTO</FONT></B></P></DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV> <DIV align=center> </DIV></TD></TR></TBODY> <DIV></DIV> <DIV></DIV> <DIV></DIV> <DIV></DIV></TABLE>

Al posto della scritta in viola dovete inserire il link dell'imagine di cui avete effettuato precedentemente l'upload (punto 1)

· La parte in blu oltremare riguarda il tipo di carattere utlilizzato: tra le virgolette potete inserire il nome di un altro carattere (ad es. Arial, Tahoma, Times New Roman);

· La parte in arancione, a seconda che voi scriviate "center" o "right" o "left", allineeerà il testo al centro, a destra, o a sinistra;

· Al posto della parte in rosso, dovete inserire il vostro testo;

· eventualmente potete inserire anche altri codici immagine, per inserire immagini sopra lo sfondo: essi vano posizionati nella parte dove va inserito il testo .

4- EFFETTI APPLICABILI ALLE IMMAGINI (visualizzabili SOLO con INTERNET EXPLORER)

Ecco l'immagine di partenza, che sarà modificata esclusivamente attraverso codici HTML:

· EFFETTO BIANCO E NERO

EFFETTO RAGGI X

· EFFETTO NEGATIVO (COLORI INVERTITI)

· EFFETTO IMMAGINE CAPOVOLTA

· EFFETTO IMMAGINE SPECULARE

· EFFETTO DISTORSIONE 1 (FOTO IN MOVIMENTO)

N.B.: Cambiando il valore "direction" potete accentuare o diminuire l'effetto.

· EFFETTO DISTORSIONE 2 (ONDE)

N.B.: Cambiando i valori numerici nel codice potete modificare l'effetto.

· EFFETTO TRASPARENZA (OPACITA' E SFUMATURA)

- Opacity, cambiando questo valore cambiamo la visibilità della figura: opacity=100 sgnifica che la figura è perfettamente visibile e opacity=0 significa che l'immagine risulterà invisibile. Questo valore serve principalmente per decidere in che misura l'immagine sia nitida al centro e quanto si veda poco agli angoli.

- Il valore FinishOpacity ha invece funzione inversa: serve per decidere in che misura la figura sia visibile agli angoli: se impostate lo stesso numero ai valori Opacity e FinishOpacity avrai la stessa visuabilità della figura su tutta la superficie.

- Cambiando il vadore Style, con il valore Style=1 l'immagine verrà sfumata da sinistra a destra, con il valore Style=2 verrà sfumata centralmente e con il valore Style=3 verrà sfumata agli angoli.

· EFFETTO TESTO SU IMMAGINE

<div style="width: 150; height: 205" align=right> <IMG src="DIRECT LINK TO IMAGE" align=right> <div style="float: right; WIDTH: 406px; HEIGHT: 304px" align=center> <p align="center"><font face="Times New Roman">Inserisci qui il testo da visualizzare sull'immagine</font> </div>

N.B. : I valori numerici possono essere modificati a vostro piacimento; nella sezione "font face" potete scegliere il carattere da utilizzare (i font utilizzabili sono Verdana, Tahoma, Arial, Arial Black, Garamond, Lucida Handwriting, Courier New).

· POSIZIONAMENTO IMMAGINE

- Posizionamento immagine al centro:

- Posizionamento immagine a destra:

- Posizionamento immagine a sinistra:

Questo/a opera è pubblicato sotto una Licenza Creative Commons.