Casa Social media Come creare swap con più immagini in Dreamweaver - dummies

Come creare swap con più immagini in Dreamweaver - dummies

Sommario:

Video: Dreamweaver CC - Creare gallerie di immagini con EasyRotator 2025

Video: Dreamweaver CC - Creare gallerie di immagini con EasyRotator 2025
Anonim

Prima di iniziare a creare un design di pagina più complesso con il comportamento di Scambia immagine di Dreamweaver, guarda una pagina finita Con il comportamento Swap Image, puoi sostituire qualsiasi o tutte le immagini su una pagina.

Quando usi il comportamento Swap Image, è importante fare tutte le immagini che cambierai della stessa dimensione (altezza e larghezza) Se le immagini non hanno le stesse dimensioni, tutte le immagini tranne la prima verranno allungate o compresse per adattarsi allo spazio occupato dalla prima immagine inserita nella pagina.

Se stai utilizzando il comportamento Swap Image con una serie di immagini che non hanno la stessa altezza e larghezza, hai alcune opzioni:

Ritaglia quelle più grandi in modo che tutte le immagini abbiano le stesse dimensioni.

Crea immagini orizzontali e verticali occupando lo stesso spazio nel tuo progetto combinando due immagini verticali per ogni orizzontale. Crea semplicemente un file in un programma come Photoshop, inserire due immagini verticali nello stesso file affiancate, quindi ridimensionare l'immagine in modo che il file abbia le stesse dimensioni di un'immagine orizzontale.

Crea un file immagine della dimensione della tua immagine più grande, imposta lo sfondo su un colore neutro, come nero o bianco, e quindi inserisci tutte le altre immagini sullo sfondo in modo che tu possa salvarle tutte con la stessa dimensione del file.

Attenersi alla seguente procedura per utilizzare il comportamento Scambia immagine:

1Crea un disegno di pagina con tutte le immagini che si desidera visualizzare inizialmente.

Ciascuna delle tre foto nella pagina design per il Tower Bridge a Londra ha due copie: una miniatura e una versione più grande. Quando la pagina viene caricata per la prima volta in un browser Web, tutte e tre le miniature sono posizionate nella parte inferiore della pagina, con la prima delle corrispondenti versioni più grandi visualizzate nell'area principale appena sopra le miniature.

2Nome le immagini nella finestra di ispezione Proprietà.

Per indirizzare le tue immagini con JavaScript, ovvero come funzionano i comportamenti, prima attribuisci ad ogni immagine un ID univoco. L'ID immagine non è uguale al nome file dell'immagine o al tag di testo, sebbene sia possibile utilizzare nomi uguali o simili. Gli ID immagine non devono contenere spazi o caratteri speciali.

3Scegli Finestra → Comportamenti.

Si apre il pannello Comportamenti. Puoi trascinare il pannello Comportamenti altrove nella pagina e puoi espanderlo trascinandone la parte inferiore o laterale. Puoi anche chiudere qualsiasi altro pannello aperto per creare più spazio facendo clic sulla barra grigio scuro nella parte superiore di qualsiasi pannello.

4Seleziona un'immagine.

Seleziona l'immagine nella pagina che fungerà da trigger per l'azione.

5Scegli il comportamento dello scambio immagine.

Con l'immagine trigger selezionata nell'area di lavoro, fare clic sul segno più nel pannello Comportamenti per aprire l'elenco a discesa delle azioni e scegliere l'azione che si desidera applicare.

6Specificare le immagini da scambiare nella finestra di dialogo Scambia immagine.

Nell'elenco Immagini, selezionare l'ID per l'immagine che verrà sostituita. Fare clic sul pulsante Sfoglia per selezionare l'immagine che sostituisce l'immagine principale. Se l'immagine non è già stata salvata nella cartella del sito locale, Dreamweaver offrirà di copiarlo per te.

7Alla parte inferiore della finestra di dialogo Scambia immagine, selezionare l'opzione Preload Images per indicare al browser di caricare tutte le immagini nella cache quando la pagina viene caricata.

Se non si seleziona questa opzione, potrebbe verificarsi un ritardo quando si utilizza lo scambio di immagini.

8Se si desidera, deselezionare l'opzione Ripristina immagini OnMouseOut.

L'opzione Ripristina immagini OnMouseOut indica che quando un evento è completato (come quando il mouse viene spostato dalla miniatura di attivazione), l'immagine originale viene sostituita. Per impostazione predefinita, Dreamweaver preseleziona questa opzione per il comportamento Scambia immagine. È possibile deselezionare questa opzione se si scopre che la sostituzione dell'immagine originale ogni volta che si posiziona il cursore su un'altra miniatura è fonte di distrazione.

9Dopo aver specificato tutte le impostazioni per il comportamento, fare clic su OK.

Il nuovo comportamento appare nel pannello Comportamenti.

10Specificare un evento per il comportamento.

Dopo l'applicazione dell'azione, è possibile tornare indietro e specificare quale evento attiverà l'azione. Per impostazione predefinita, Dreamweaver applica l'evento OnMouseOver quando si utilizza l'azione Scambia immagine, ma è possibile cambiarlo con qualsiasi altro disponibile, ad esempio OnClick, che richiede che l'utente faccia clic sull'immagine per attivare l'azione Scambia immagine.

11Applica comportamenti aggiuntivi.

Per applicare il comportamento Scambia immagine ad altre immagini su una pagina, ripetere i passaggi 5-10, facendo clic per selezionare l'immagine che si desidera servire come innesco e quindi specificando l'immagine corrispondente che deve essere scambiata.

12Prova il tuo lavoro in un browser.

Non è possibile vedere gli effetti di comportamenti come questo fino a quando non si fa clic sul pulsante Vista dal vivo in alto a sinistra dell'area di lavoro in Dreamweaver o si visualizza l'anteprima della pagina in un browser Web.

Come creare swap con più immagini in Dreamweaver - dummies

Scelta dell'editore

Vantaggi di base della rete - manichini

Vantaggi di base della rete - manichini

Se la verità viene detta, le reti di computer sono un problema da impostare. Perché i vantaggi di avere una rete rendono la pena di crearne uno utile. Non è necessario essere un dottorato di ricerca per comprendere i vantaggi del networking. Le reti riguardano esclusivamente la condivisione. Nello specifico, le reti riguardano la condivisione di tre elementi: informazioni, risorse, ...

Biometria L'accettazione, la privacy e la legge - manichini

Biometria L'accettazione, la privacy e la legge - manichini

La tecnologia biometrica non è affatto universalmente accettata da tutti gli utenti. Ci sono una serie di considerazioni sociali e legali che danno ad ogni organizzazione una pausa prima di fare il salto a capofitto nell'implementazione di un sistema biometrico. Le persone sono più a loro agio con i sistemi di raccolta biometrici che sono i meno intrusivi. Scanner per retina e nasi elettronici sono ...

Biometria Nozioni di base - manichini

Biometria Nozioni di base - manichini

La biometria non è roba da fantascienza. Puoi trovare una dozzina di modi più o meno efficaci per utilizzare la biometria per identificare qualcuno, ognuno dei quali si divide in due classi: la biometria fisiologica misura una parte specifica della struttura o della forma di una porzione del corpo di un soggetto. La biometria comportamentale è più interessata a come ...

Scelta dell'editore

Come creare un nuovo dizionario personalizzato in Excel 2007 - dummies

Come creare un nuovo dizionario personalizzato in Excel 2007 - dummies

In Excel 2007, è possibile creare dizionari personalizzati da utilizzare quando si esegue il controllo ortografico dei fogli di lavoro. Utilizzare il pulsante Aggiungi al dizionario nella finestra di dialogo Controllo ortografico per aggiungere parole sconosciute a un dizionario personalizzato. Per impostazione predefinita, Excel aggiunge queste parole a un file dizionario personalizzato denominato CUSTOM. DIC, ma è possibile creare una nuova personalizzazione ...

Come creare un componente aggiuntivo da un file di cartella di lavoro Excel Excel normale in VBA - modi di dire

Come creare un componente aggiuntivo da un file di cartella di lavoro Excel Excel normale in VBA - modi di dire

Sebbene sia possibile convertire qualsiasi cartella di lavoro di Excel in un componente aggiuntivo, non tutte le cartelle di lavoro traggono vantaggio da questa conversione. Una cartella di lavoro senza macro rende un componente aggiuntivo inutile. In effetti, gli unici tipi di cartelle di lavoro che traggono vantaggio dall'essere convertiti in un componente aggiuntivo sono quelli con macro. Ad esempio, una cartella di lavoro costituita da macro generiche (Sub ...

Come creare una nuova cartella di lavoro in Excel 2010 - dummy

Come creare una nuova cartella di lavoro in Excel 2010 - dummy

Se si lavora in Microsoft Excel 2010 e vuoi iniziare a lavorare in un nuovo file di cartella di lavoro di Excel, puoi facilmente creare una nuova cartella di lavoro. Per fare ciò, puoi usare un comando nella scheda File o una scorciatoia da tastiera. Fare clic sulla scheda File. Excel visualizza la visualizzazione Backstage, in cui è possibile accedere ai comandi relativi ai file. ...

Scelta dell'editore

Usa lo strumento Gomma in Adobe Illustrator CS5 - manichini

Usa lo strumento Gomma in Adobe Illustrator CS5 - manichini

Adobe Illustrator Creative Suite 5 (Adobe CS5) Illustrator è utilizzato per rimuovere rapidamente aree di grafica con la stessa facilità con cui si cancellano i pixel in Photoshop, accarezzando con il mouse su qualsiasi forma o gruppo di forme. Facendo doppio clic sullo strumento Gomma, è possibile definire il diametro, l'angolo e la rotondità della gomma. Se stai usando un ...

Trasforma gli strumenti in Adobe Illustrator CS5 - dummies

Trasforma gli strumenti in Adobe Illustrator CS5 - dummies

I più popolari strumenti di trasformazione in Adobe Creative Suite 5 (Adobe CS5) Illustrator - Rifletti, scala, inclina, rimodella e Trasformazione libera: sono facili da usare e modificano rapidamente la tua illustrazione. Lo strumento Rifletti Niente è simmetrico, giusto? Forse no, ma gli oggetti non creati simmetricamente in Illustrator possono sembrare off-kilter. Utilizzando lo strumento Rifletti, si ...

Quando utilizzare Adobe CS5 Illustrator - dummies

Quando utilizzare Adobe CS5 Illustrator - dummies

Utilizzando Adobe Creative Suite 5 (Adobe CS5) Illustrator anziché Photoshop , ottieni diversi benefici. Potresti aver sentito che Illustrator è migliore per la grafica vettoriale, ma perché e che altro porta? Illustrator può salvare ed esportare immagini nella maggior parte dei formati di file. Scegliendo di salvare o esportare, è possibile creare un ...