            |
| FORUM | TUTORIALS | MAGAZINE | SERVIZI | VIDEO | NEWS | BLOG |
| ||
In Rollover Adobe Dreamweaver CS3Abraham Chaffin
Questo tutorial è stato progettato per fornire all'utente un maggiore controllo e flessibilità con il Dreamweaver CS3 interfaccia per creare l'immagine mouseovers. Anche insegnerà come assegnare il mouseover immagine obiettivo di qualche altra parte della pagina web e poi assegnare un mouseover css stile originale del mouseover pulsante.
Alcune immagini delle stesse dimensioni sono necessari per questo tutorial così ho incluso alcune che si possono scaricare Qui. Aprire il html documento di cui Dreamweaver CS3 e ora cominciamo. 1) Prima si creerà una base poche immagini del mouseover. Vai al menu Inserisci immagine di oggetti ribaltamento immagine. L'immagine è ciò che il nome di javascript che saranno creati utilizzerà per trovare l'immagine. Image1 è un bel nome. Uso 1.Jpg per l'immagine originale e più di 1 -.Gif come l'immagine di rollover. Mantenere l'immagine di rollover precarico casella selezionata. Il testo alternativo e url arn't importante come abbiamo arn't sarà messa sul web o in un'altra pagina di posizione così premere ok. 2) Fare clic su accanto al recente cambio immagine inserita e ripetere il passo 1 per inserire più / tutte le immagini di rollover. Basta sostituire la 1s a passo uno con 2s etc. Adesso avete una qualche ribaltamento immagini. Salvare e visualizzare in anteprima la vostra html file e vedrete che ben ribaltamento. Ma ciò che se voleva avere l'immagine che si sono ribaltamento appaiono come una grande immagine di cui sopra? Facciamo il cambio immagine apparirà in una posizione diversa all'interno della pagina. Prima abbiamo bisogno di un segnaposto immagine che viene caricata quando la pagina viene caricata prima di ogni rollover verificarsi. 3) Mettere segnaposto.Gif sopra le nostre rollover immagini premendo ritorno con il cursore nella parte anteriore delle immagini e poi inserire immagine, Scegliere segnaposto.Gif e premere ok.  4) Ora abbiamo bisogno di dare un nome a questa immagine in modo che lo script può trovare. Selezionare il segnaposto immagine, Nella finestra delle proprietà a sinistra della larghezza e l'altezza parametri tipo di "target" per il nome. 5) Assegnando l'obiettivo per il ribaltamento delle immagini è abbastanza semplice. Aprire la finestra di comportamenti da andare al menu della finestra comportamenti. 6) Fare clic sulla prima immagine (Image1) e si dovrebbe vedere due comportamenti ad essa assegnati. a onmouseout | Ripristinare l'immagine di swap a onmouseover | Swap immagine Vogliamo modificare il comportamento di swap immagine a punto le altre immagine in modo doppio clic su "immagine di swap". Swap in finestra immagine selezionare la fonte di impostare il testo che dovrebbe essere "più di 1 -.Gif "e tagliarla in modo che lo rimuove. Selezionare l'immagine "obiettivo" e incolla "1-over.Gif "nel set fonte di campo e premere OK. 7) Ripetere il passaggio 6 per tutte le immagini di rollover inserito in modo che l'obiettivo per tutti è fissato per l'immagine chiamato "target". L'anteprima e poi salvare il vostro lavoro per vedere che cosa avete fatto. Ora che cosa succede se non vogliamo cambiare l'immagine dopo che abbiamo su laminati e poi è venuto fuori? 8) Fai clic su "image1", Nella finestra cliccate su comportamenti swap ripristinare l'immagine e premere il tasto Canc. (è possibile ripetere questo passo ancora per tutte le vostre immagini di rollover) Ora che il cambio di immagine sta andando in un'altra posizione il ribaltamento pulsanti stanno cercando un po 'Drab. Let's assegnare alcuni css stile farli esaminare in modo più interessante. 9) Nella finestra di css e creiamo nuovi css regola. Selettore tipo sarà classe, Nome sarà "bottoni" e definire in: Questo documento solo. Let's impostare una piccola imbottitura e invisibile confine di 1 pixel. L'imbottitura è sotto la casella di categoria - è fissato a 10 per tutte le parti. Impostare il confine con la stessa per tutti i "solidi : 1 pixel : Colore # ffffff ". Premere ok. (il motivo per cui abbiamo stabilito un confine invisibile è così quando si crea una regola che successivamente creare un confine non vogliamo falsare il posizionamento dei nostri elementi.) 11) Per ogni pulsante rollover pulsanti scegliere come "classe" nella finestra delle proprietà. 
12) Creare una nuova regola CSS per essere assegnato quando il rollover pulsanti o su moused. Creare lo stesso passo, come la chiamano solo 9 "buttonsover", Padding di 10 pixel, E la frontiera di "solido : 1 pixel : Colore # 990000 ". 13) Selezionare "Image1" e di nuovo nella finestra di destra comportamenti clicca su "immagine di swap" e scegliete "aggiungi nuovo elemento". Fate click col tasto sinistro del nuovo spazio a onmouseover e digitare "Image1.Classname = 'buttonsover' ". (anche questo può essere ripetuta per tutte le altre immagini di rollover.) 14) Nella finestra di comportamenti nel campo a onmouseout assign "Image1.Classname = 'pulsanti' ". Questo renderà la classe del mouse quando si tornerà su. Effettuare questa operazione per tutte le immagini di rollover.  Questo dovrebbe darvi l'idea di base di alcune cose che puoi fare con il cambio di funzioni Dreamweaver CS3. Parte 2La prossima parte di questo tutorial è un po 'di uno Dreamweaver hack per visualizzare un Swf video / video quando si mouse su un altro elemento. Utilizzato in combinazione con alcuni altri semplici funzioni è possibile ottenere alcuni effetti piuttosto fresco per il tuo sito web. è possibile utilizzare questo effetto per mostrare i tuoi video in una galleria come istockvideo fa.Prima è necessario scaricare il file di progetto Qui. Contenuti per la classe "movinvis" va qui
L'oggetto di questo tutorial è quello di visualizzare un video quando si ribaltamento di un elemento. Stiamo per iniziare la creazione di classi CSS che assegnerà al segnaposto div tutto questo tutorial. 1) nella finestra css scegliere la "nuova regola css" icona. Selettore tipo sarà "classe", Chiamare il nome della classe "movinvis" e dovrebbe essere creato solo per il presente documento. 2) nella regola css definizione selezionare la finestra "posizionamento" e impostare il tipo di posizione assoluto, Visibilità a nascosta, E lo z-index a 999. (posizionamento assoluto rende la classe non spingere altri elementi attorno ad esso, E un più elevato indice di z-metterà in cima alla classe di altri elementi.) Premere ok. 3) creare un nuovo nuovamente css regola lo stesso nei passaggi 1 e 2 solo impostare il nome della classe "movvis" e impostare la visibilità di visibile. 4) inserire un nuovo div andando al menu Inserisci layout oggetti tag div. Non impostare la proprietà per ogni div ancora e premere ok. 5) selezionare la nuova creazione div e la finestra delle proprietà di impostare il div id a "movtarget" e la classe a "movinvis". Ora che il segnaposto div è configurato per ricevere i nostri filmati creiamo i pulsanti che verranno utilizzati per il rollover. Questa volta per la semplicità che solo l'uso di testo. 6) posizionare il cursore sopra l'invisibile div e digitare "movie 1" selezionare il testo, E ne fanno un collegamento ipertestuale. Mettere "#" come il nome del file o URL. (è possibile ripetere questo passaggio per impostare il rollover per "film 2" e "movie 3" Prossimo si inserisce il film che vogliamo assegnare al div utilizzando il ribaltamento link. Poi assegnare al div onmouseover dei nostri link. Finalmente abbiamo assegnerà le classi onmouseover e onmouseout modo che il div è visibile solo quando un filmato viene visualizzato. 7) andare al menu Inserisci Media Flash e scegliere rollover1.Swf. Premere ok. 8) selezionare la nuova inserito Flash video e andare al menu Visualizza codice. Selezionare il codice tra le noscript e / noscript tag e una copia al vostro clipboard per essere successivamente incollato. 9) torna alla visualizzazione Progettazione per visualizzare andando progettazione. Selezionare il Flash video e cancellarlo. 10) selezionare il "filmato 1" e in collegamento i comportamenti finestra premere il (+) aggiungere comportamento pulsante. Scegliere insieme il testo impostare il testo del contenitore. Selezionare il contenitore div "movtarget" e incollare il codice copiato nel nuovo html campo. 11) assicurarsi che il comportamento è stato fissato al onmouseover evento per creare questo effetto. Se non fosse è possibile modificare facendo clic sul caso onmouseover e scegliendo dal menu a discesa. 12) con il "filmato 1" legame ancora selezionato (+) aggiungere un altro problema chiamato "cambio di proprietà". Assicurarsi che il tipo di elemento "div", E id è elemento div "movtarget". Selezionare l'opzione "inserisci:"Radio per la proprietà e immettere" classname ". Entrare in "movvis" per il nuovo valore e premere OK. Assicurarsi che questo comportamento è stato assegnato al caso onmouseover, Se non si cambia. 13) ripetere il punto 12 solo assegnare il nuovo valore come "movinvis" e assegnare il ricorso al caso onmouseout. 14) Ripetere i passaggi 7-13 per "film 2" e "movie 3". Ora si esibirà in un hack javascript dw che usi per il cambio di proprietà comportamento per farla funzionare in modo che lo usano per cambiare le classi. 15) vai al menu Modifica Trova e sostituisci. Trovare nel "documento corrente", Ricerca "codice sorgente", Trovare "obj.Stile.", Sostituire "obj.", E sostituire le due istanze di questo codice in javascript. Si dovrebbe essere in grado di salvare e visualizzare in anteprima il vostro lavoro ora a vedere che cosa avete fatto. Questa tecnica può essere utilizzata in congiunzione con un posizionamento di script per ottenere il Swf posizionato esattamente dove si desidera che. O di impostazione diversa divs in cui si desidera che il film e obiettivo specifico il caso di andare lì. Ci sono altri modi per ottenere lo stesso effetto, ma questo è un po 'hacked modo per farlo con una semplice funzionalità costruito a destra in Dreamweaver CS3. | ||||||||||||
|
FORUM • TUTORIALS • MAGAZINE • SERVIZI • VIDEO • NEWS • BLOG © CreativeCOW.net Tutti i diritti sono riservati. Creative Comunità del Mondo [Superiore] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
