OGGETTO IMMAGINE
RESPONSIVE
Questo oggetto consente di inserire una sola immagine che si ridimensionerà alle varie risoluzioni nella misura del 100%.
Tuttavia con un trucco possiamo sfruttare l'oggetto per avere invece una sequenza di più immagini. Come? seguimi e ti dirò come fare.
E' più facile di quanto tu possa immaginare.
SEI PRONTO? Ok! Iniziamo.
- Prepara una pagina test
- inserisci l'oggetto IMMAGINE
con estensione massima sia nel progetto che in stile riga - Imposta i margini interni ed esterni tutti a zero
- Ora CARICA UNA TUA IMMAGINE PRINCIPALE IN TRASPARENZA (png) DIRETTAMENTE NELL' OGGETTO IMMAGINE MA FALLA DA 1920X500 O ALLA GRANDEZZA CHE RITIENI OPPORTUNO. Devi fare delle prove.
- VAI POI SULLE OPZIONI STILE RIGA E SCEGLI ► SEQUENZA IMMAGINE E INSERISCI LE TUE IMMAGINI
- Se ritieni opportuno imposta un OWERLAY AL 40% che puoi variare o anche eliminare in base alle tue esigenze
- Salva tutto
- Prova il test in anteprima progetto e poi su uno dei browser che il programma ti mette a disposizione sull'icona "anteprima".
- Simulando la risoluzioni più basse attraverso il restringimento del browser noterai che l'immagine segue la finestra adattandosi.
- Se tutto è andato per il verso giusto non dovrai fare altro se non affinare la tecnica per immagini con scritte e slogan.
Ecco la struttura del progetto:
PRO
- RESPONSIVE 100%
- NESSUN CODICE DA INSERIRE
CONTRO
- Le immagini da caricare devono avere le stesse dimensioni o quasi uguali a quelle dell'immagine in trasparenza principale caricata all'interno dell'oggetto immagine.
- non è possibile utilizzare il parallasse perché distorcerebbe le immagini
- bisogna ottimizzare al massimo le immagini in PNG sia iniziale che le altre se avete scelto questo formato. In questo esempio si sono utilizzate immagini jpg e png non ottimizzate per il web.
- Le immagini con titoli e descrizioni per simulare un content slider accettabile vanno elaborate con programmi vettoriali o con la suite di adobe photoshop.
- Si perde parecchio tempo nell'elaborazione grafica.
COMMENTA ▼
Non sono presenti ancora recensioni.