Sei sulla pagina 1di 16

!

!
!
!

Cloud Site !
!

MANUALE D’USO #2

TESTO, IMMAGINI E FILE


!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!

!
Caricare'un'file''
Come'caricare'file'.MP3'.PDF'.MP4'.MOV'o'simili.'

NOTA%BENE:%La%dimensione%massima%che%ogni%file%può%raggiungere%è%20MB.'
%

Aggiungi%un%file%

'
Clicca'sul'pannello'CARICA%(1)%e'clicca'il'pulsante%AGGIUNGI'(2)'
Potrai'caricare'questi'tipi'di'file:'

Documenti:'
'pdf',''doc',''docx',''xls',''xlsx',''txt',''ppt',''pps',''pptx',''
Multimediali:'
'mp3',''aac',''ogg',''wma',''mp4',''m4v',''m4a',''m4b',''aiff',''mov',''wmv',''flv',''swf',''ico'''
Archivi:'
'tar',''gz','zip','
Seleziona%un%file%compatibile%

'
%
Trascina%il%file%sulla%tua%pagina%

'
'

Aggiungi%una%descrizione%(Opzionale)%

'
'
%
%
%
%
Lavorare'con'le'immagini'
'

Domande'più'frequenti'
D:#Ho#importato#alcune#immagini#PNG#molto#grandi#e#adesso#il#mio#sito#e#molto#lento.#Come#mai?'
R:'Il'formato'PNG'non'è'il'più'adatto'per'immagini'di'grandi'dimensioni.'E''invece'il'formato'perfetto'se'hai'bisogno'di'
immagini'dotate'di'trasparenza.'
Cerca'di'usare'il'formato'JPEG'dove'possibile.'Per'un'immagine'di'grandezza'800'x'600'pixel'un'file'JPEG'potrebbe'
essere'il'90%'più'piccolo'dell'equivalente'PNG'senza'notevoli'perdite'di'qualità.'
'
D:#Perché#il#mio#file#PNG#non#viene#visualizzato#correttamente?#'
R:'Controlla'che'la'tua'immagine'PNG'sia'in'formato'RGB.'Noi'supportiamo'solo'PNG'a'24bit'e'32'bit.'Non'
supportiamo'le'PNG'a'8'bit.'Per'migliori'risultati'ti'consigliamo'di'usare'la'funzione'Salva#per#il#Web'di'Photoshop.'
'
D:#Di#che#dimensioni#dovrebbero#essere#le#immagini?'
R:'Per'rendere'il'tuo'sito'veloce'da'caricare,'ridimensiona'sempre'le'tue'foto'su'un'programma'come'Photoshop,'o'
un'alternativa'gratuita,'prima'di'caricarle.'Se'importi'grandi'immagini'su'Cloud'Site'e'poi'le'ridimensioni'dall'interno'
dell'editor,'l'immagine'resterà'di'grandi'dimensioni.'
'
D:#Posso#usare#il#formato#GIF?'
R:''non'supporta'le'GIF'e'ti'consigliamo'di'evitare'questo'formato.'A'meno'che'non'necessiti'di'piccole'animazioni,'usa'
il'formato'JPEG.'Se'hai'proprio'bisogno'di'usare'delle'GIF,'evita'di'ridimensionarle'dall'interno'di'Cloud'Site'(quindi'usa'
un'editor'di'immagini'come'Photoshop'per'ridimensionarle).'
'
D:#Quante#immagini#posso#caricare#simultaneamente?'
R:'Puoi'caricare'fino'a'5'immagini'alla'volta.'
'
D:#Posso#sovrapporre#più#immagini#tra#loro?'
R:'Per'fare'questo'dovrai'fare'uso'del'Widget#Sfondo.'
#

#
#
#
#
#
#
Importare'un'immagine'
#

'
'

Seleziona'il'pannello'CARICA#(1)'e'clicca'su'Aggiungi#(2)'per'aggiungere'un'immagine.'
Puoi'importare'file'JPEG'o'PNG.'Generalmente'è'sempre'meglio'usare'JPEG'per'le'foto'e'PNG'per'la'grafica.'

Nota#1:'Se'il'tasto'Aggiungi'non'è'visibile,'significa'che'devi'ancora'installare'Adobe#Flash#player.'Effettua'il'Logout'da'
Register.it,'vai'suhttp://get.adobe.com/it/flashplayer/'e'segui'le'istruzioni.'
Nota#2:'Internet'Explorer'6'non'supporta'la'trasparenza'nei'file'PNG,'quindi'se'vuoi'mantenere'la'compatibilità'con'
questo'browser,'dovrai'evitare'di'usarla.'
'

'
'
'
'
Puoi'importare'fino'a'5'immagini'alla'volta.'Questo'non'è'un'limite'della'tua'pagina,'è'solo'il'limite'di'immagini'che'
puoi'importare'ad'ogni'passata.'
'

'
La'nuova'immagine'apparirà'nel'pannello'immagini'(1).'Potrai'cliccare'sull'icona'info'(2)'per'otternere'l'URL'
dell'immagine.'
'
'

'
Trascina'l'immagine'sulla'tua'pagina'per'usarla.'
#

#
Posizionare'l'immagine'
'

'
'
Puoi'muovere'l'immagine'cliccando'al#suo#interno'(1).'Non'cliccare'sui'bordi#o#sulle#maniglie'(2).'
L'immagine'non'si'muoverà'se'il'pannello'è'aperto.'Usa'il'tasto#di#chiusura#(3)'per'chiudere'il'pannello.'
#

Ridimensionare'un’immagine'
'
'

'
'

Clicca'sui'bordi'o'le'maniglie'dell'immagine'per'ridimensionarla'

L'immagine'non'si'ridimensionerà'se'il'pannello'è'aperto.'Usa'il'tasto#di#chiusura#(1)'per'chiudere'il'pannello.'
'
Usare'le'colonne'
'

'
Usa'il'widget'Layout'Colonne'per'allineare'più'immagini'una'accanto'all'altra,'oppure'trascina'le'immagini'che'vuoi'
allineare'e'la'colonna'apparirà'automaticamente.'

Puoi#piazzare#solo#sei#elementi#per#rigo.#
#
'

Impostazioni'immagine'

'
#
1.#Seleziona#immagine'_'Usa'questo'per'sostituire'l'immagine'
2.#Impostazioni'_'Usa'questo'per'aprire'il'pannello'delle'impostazioni,'aggiungere'all'immagine'un'link,'un'tag'
alternativo,'un'tag'titolo,'specificare'un'rollover'o'un'lightbox.'
3.#Reset'_'Fa'tornare'l'immagine'alle'dimensioni'originali'
4.#Maniglia#di#trascinamento'_'Trascina'un'immagine'su'un'altra'riga'
5.#Elimina'_'Rimuove'l'immagine'dalla'pagina'senza'rimuoverla'dal'sito.'
#

Il'pannello'impostazioni'immagine'

'
#
1.'Usa'il'campo'Tag#Alternativo'per'inserire'una'descrizione'alternativa'della'tua'immagine.'Questa'descrizione'verrà'
mostrata'in'quei'browser'che'non'possono'mostrare'le'immagini'(esempio:'browser'per'non'vedenti'e'browser'per'
telefoni'cellulari).'
2.'Il'campo'Tag#Titolo'serve'a'dare'un'titolo'all'immagine.'Questo'tag'potrebbe'essere'mostrato'sui'motori'di'ricerca.'
3.'Clicca'sul'tasto'di'reset'per'reimpostare'le'dimensioni'originali'di'un'immagine.'
4.'Clicca'sul'lucchetto'per'bloccare'il'rapporto'd'aspetto'(il'rapporto'tra'altezza'e'larghezza)'dell'immagine.'
5.'Il'riquadro#rollover'serve'ad'impostare'un'immagine'che'si'sostituisce'a'quella'già'presente'nel'momento'in'cui'il'
mouse'passa'sopra.'Per'attivare'questa'funzione,'trascina'un'immagine'alternativa'sul'riquadro#rollover.'
6.'Trascina'un'immagine'sul'riquadro#lightbox.'Quando'i'visitatori'del'tuo'sito'cliccheranno'sull'immagine,'essa'si'
aprirà'su'un'riquadro'più'grande.'Nota:'questa'funzione'può'essere'testata'solo'in'modalità'Anteprima#o'sul#sito#
pubblicato.'Non'funzionerà'dall'interno'dell'editor.'
7.'Per'aggiungere'un'link'ad'un'immagine,'clicca'su'Aggiungi.'
8.'Per'rimuovere'un'link'clicca'su'Rimuovi.'
9.'Rel="nofollow"'è'un'impostazione'avanzata'che'dice'a'Google'di'non'utilizzare'il'link'dell'immagine'per'i'suoi'criteri'
di'rating.'Se'non'sai'a'cosa'serve,'non#attivarla.'
10.'Quando'il'tuo'sito'ha'molte'immagini'grandi,'puoi'selezionare'il'caricamento#asincrono'su'di'esse'per'evitare'che'
vengano'caricate'quando'non'è'necessario'(ad'esempio,'se'hai'molte'immagini'e'vuoi'che'vengano'caricate'solo'
quando'l'utente'scorre'la'pagina,'ottimizzando'il'caricamento'della'pagina'stessa).'
#

#
Aggiungere'un'link'ad'un'immagine'
'
'

'

Clicca'su'Aggiungi#(1)#
'

'
'
Se'il'link'punta'ad'una'pagina'interna'del'sito,'usa'il'menu'link#interno(1).'Per'puntare'il'link'ad'una'pagina'esterna,'
incolla'l'URL'nel'campo#Link#Esterno'(2).'Se'vuoi'che'il'link'venga'aperto'in'una'nuova'pagina/tab'usa'il'menu'Opzioni#
Link'(3).#
#
'

'
'
'
'
Lightbox'e'Rollover'
'

'
'

Per'questo'esempio'abbiamo'adoperato'3'immagini:'

Chrysantemum_icona_bn#256x192#_'Questa'è'l'immagine'che'useremo'nella'pagina.'L'abbiamo'ridotta'per'aumentare'
la'velocità'di'caricamento'della'pagina'ed'è'in'bianco'e'nero'per'farla'sembrare'inattiva.'
'
Chrysantemum_icona#256x192#_'Questa'è'la'stessa'immagine'di'prima,'però'a'colori.'La'useremo'per'fare'il'rollover'in'
modo'che'quando'il'puntatore'del'mouse'ci'passerà'sopra'essa'sembrerà'attiva.'
'
Chrysantemum_grande#1024x768#_'Questa'è'la'stessa'immagine'a'risoluzione'e'colori'originali.'La'useremo'per'il'
lightbox.'
'

'
Trascina'l'immagine'in'bianco'e'nero'sulla'template'(1)#e'clicca'sull'icona'impostazioni'(2).'
'

'
'
Trascina'l'immagine#piccola#a#colori#(1)'nel'primo#riquadro.'Sarà'l'immagine'per'il'rollover.'
Trascina'l'immagine#grande#a#colori#(2)'nel'secondo#riquadro.'Per'provare'il'lightbox'usa'la'funzione'Anteprima'o'
pubblica'il'tuo'sito'e'aprilo'su'un'browser'dove'non'hai'effettuato'l'accesso'con'Cloud#Site,'oppure'esci'dall'editor'ed'
entra'nel'sito.'
'

'
'
Modificare*i*Testi*
*

Editing*di*base:*Come*formattare*un*testo*e*aggiungere*dei*link.*

ATTENZIONE(

Se*copi*e*incolli*un*testo*da*un*altro*sito*potresti*danneggiare*il*il*tuo*sito.*Devi*prima*rimuovere*la*formattazione*al*
testo*prima*di*incollarlo*su*Cloud*Site.*
(

Le*basi*

*
(
1(La(maniglia*
Usala*per*trascinare*il*testo*su*un’altra*riga*
2(L'ingranaggio*
Cliccalo*per*aprire*il*pannello*di*modifica*testo*
3(Tasto(elimina*
Rimuove*il*blocco*testo*dalla*pagina*
4(Clicca(e(trascina*
Clicca*e*trascina*il*blocco*testo*per*allinearlo*all'interno*della*riga.*Puoi*anche*adoperare*le*frecce*della*tua*tastiera*per*
modificare*la*posizione.*
(

(
(

Formattazione*del*testo*
*

*
*
Seleziona*tutto*o*solo*parte*del*testo*e*clicca*su*un*qualsiasi*pulsante(di(formattazione((1)*per*formattare*il*testo*
selezionato.*
*

*
*
*
Clicca*sul*menu(stili((1)*e*clicca*sul*nome(dello(stile((2)*per*applicare*uno*stile.*Per*saperne*di*più*su*come*
aggiungere*un(nuovo(stile(di(testo((3).(
*

*
Aggiungi*un*link*sul*testo*selezionato*

*
Seleziona*il*testo*che*vuoi*usare*come*link*e*clicca*sul*tasto(link((1)(
*

*
*

Per*creare*un*link*verso*una*pagina*del*tuo*sito,*seleziona*Link(Interno((1).*Per*collegare*il*link*ad*una*pagina*esterna,*
incolla*l'URL*nel*campo*Link(Esterno((2).*Per*aprire*il*link*in*una*nuova*finestra*usa*il*menu*Opzioni(Link((3).*
*

Aggiungere*un*indirizzo*di*posta*
*

*
*

Questa*schermata*può*essere*usata*anche*per*creare*degli*indirizzi*di*posta*elettronica*cliccabili,*i*cosidetti*"mailto"*
link*(1).*Ecco*la*sintassi*per*inserire*un*indirizzo*email*attivo:*

mailto:(nome@provider.it*
Usando*questa*sintassi,*chiunque*cliccherà*sul*link*aprirà*automaticamente*l'applicazione*di*posta*elettronica*con*
l'indirizzo*di*posta*già*inserito*in*un*messaggio*nuovo,*pronto*per*la*modifica.*

Per*saperne*di*più*sui*link*mailto,*clicca*qui:*http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto*
*

Potrebbero piacerti anche