Opplæring: Bruk hoppmeny og bytt bildeatferd i Dreamweaver

I denne opplæringen vil vi bruke atferd i Dreamweaver for å legge til interaktivitet til eksempler på webside-dokumenter. En atferd er kombinasjonen av en hendelse og en handling som utløses av hendelsen, og i Dreamweaver legger du til en atferd på en side ved å spesifisere en handling og deretter spesifisere hendelsen som utløser den handlingen. Dreamweaver-oppførsel plasserer JavaScript-kode fra klientsiden i HTML-dokumenter for å tillate samhandling på en webside.

Atferd kan omfatte hoppmeny, bytte av bilde, popup-vinduer, spille av lyd og mer. Denne opplæringen vil demonstrere hoppmenyen og bytte bildeatferd, ved å bruke Dreamweaver CS5, og hver blir illustrert med skjermbilder for trinnene. HTML-dokumentene for hver demonstrasjon og de tilknyttede bildene for Swap Image-oppførselen er inkludert i nedlastingen.

Lag en hoppmeny

Når du oppretter en hoppmeny, lager Dreamweaver et menyobjekt og knytter hoppmenyens (eller Jump Menu Go) oppførsel til den. Det er vanligvis ikke nødvendig å knytte Jump Menu-oppførselen til et objekt for hånd.

Når et nytt HTML-dokument er åpent i Dreamweaver, gå til menylinjen og velg følgende: Sett inn | Skjema | Hoppmeny.

Figur A

Dialogboksen Sett inn hoppmeny åpnes, og det er her vi begynner å legge til i menyelementene våre med tekst og URL. Vi har også mulighetene til å velge en Sett inn Go-knapp etter menyen og velg første element etter URL-endring.

Figur B

Ved å beholde alle standardverdiene la jeg inn tekst og tilhørende URL-adresser for de fire menyelementene som er oppført nedenfor, men du kan legge til alle menyelementer og svare URLer du ønsker. Etter at hvert menyelement har lagt til tekst og URL, klikker du på pluss-knappen (+) for å legge til neste menyelement.

  • Tech Republic Blogs - http://www.techrepublic.com/blogs
  • Datasenterblogg - http://www.techrepublic.com/blog/networking
  • Google i bedriften - http://www.techrepublic.com/blog/google-in-the-enterprise
  • DIY IT Guy - http://www.techrepublic.com/blog/doityourself-it-guy

Deretter vil jeg sørge for at menypunktene er i alfabetisk rekkefølge, så jeg vil bruke pil opp for å skyve DIY-menypunktet opp en oppføring i listen.

Figur C

Klikk OK når du er ferdig med hoppmeny-listen din, og Dreamweaver vil bygge skjemaets objektkode og tilhørende JavaScript, som også vises nedenfor:

 Tech Republic Blogger 
 Datasenterblogg 
 DIY IT-fyr 
 Google i bedriften 
 funksjon MM_jumpMenu (targ, selObj, gjenopprette) {//v3.0 
 Eval (targ + "plassering = ' "+ selObj.options selObj.selectedIndex .Value +"'"); 
 if (gjenopprette) selObj.selectedIndex = 0; 
 } 
 Merk : Som standard vil Dreamweaver legge til JavaScript i HTML-dokumentet. Jeg liker å flytte alt innebygd JavaScript til under lukkingen av karosserikoden, da dette hjelper siden med å laste raskere og lar JavaScript lastes inn etter det første innholdet i webdokumentet. 

Nedenfor er skjermbildet av den resulterende HTML-en som vist i Chrome 17.0.9:

Figur D

Bytt bilder

Byttebildeatferden er en handling som bytter ett bilde for et annet ved å endre attributtet til img-taggen. Denne oppførselen brukes til å lage knapper og andre bildeeffekter, inkludert bytte av mer enn ett bilde om gangen. Fordi bare attributtet påvirkes av byttebildeaksjonen, vil du være sikker på at alle bilder har samme dimensjoner (høyde og bredde) under hele handlingen. Ellers kan noen bilder som blir byttet inn i hendelsen, se ut som komprimert eller utvidet for å passe til originalbildets dimensjoner. I denne demonstrasjonen har jeg gitt fire bildeprøver av forskjellige trær, og de er inkludert i nedlastingen, og vises i figur E nedenfor.

Figur E

  1. I Dreamweaver åpner du et nytt html-dokument og går til menylinjen og velger Sett inn | Bilde.
  2. Bla gjennom og velg bildet du vil legge til, og klikk OK.
  3. Legg inn alternativ tekst og en lang beskrivelse (om nødvendig) for bildet, og klikk deretter OK.
Dreamweaver oppretter bildekilden tag med høyden, bredden, alternativ tekst og lang beskrivelse. Du må legge til et navn manuelt for hver av bildemerkene, name = "Tree 1", name = "Tree 2", og så videre (se figur F og G ). Byttebildeaksjonen fungerer fortsatt hvis du ikke navngir bildene dine, og den vil automatisk navngi eventuelle navngivne bilder når du knytter oppførselen til et objekt. Det er imidlertid lettere å skille bilder i dialogboksen Bytt bilde hvis alle bildene er navngitt på forhånd.

Figur F

Figur G

Gjenta trinnene ovenfor for hvert av bildene du vil legge til i HTML-dokumentet. Jeg gjentok dette for hvert av de tre gjenværende bildene.

Figur H

Klikk for å forstørre
  1. Velg det første bildet fra html-dokumentet, gå til Oppførsel-panelet og klikk på rullegardinmenyen pluss og velg Bytt bilde som vist i figur H.
  2. Nå velger du det første bildet du vil bytte; i dette tilfellet valgte jeg Bilde 1 og bla gjennom for å angi kilden til stedet for det nye Byttebildet.
  3. Jeg valgte Bilde 2 og klikket OK. Swap Image-oppførselen er nå angitt med det tilknyttede JavaScript. Sørg for å velge Forhåndsinnlaste bilder ( figur I ) slik at nettleseren buffer bildene når siden er lastet inn, og forhindrer dermed forsinkelser i nedlasting og gjengivelse av bildene. Nettklare bilder er selvfølgelig alltid en god praksis.

Gjenta trinnene ovenfor for hvert av bildene du ønsker å bytte.

Figur I

Nedenfor er HTML-koden generert av byttebildeadferden i Dreamweaver:

 Og det tilknyttede JavaScript som er generert for å støtte byttebildeadferden: 
 funksjon MM_preloadImages () {//v3.0 
 var d = dokument; if (d.images) {if (! d.MM_p) d.MM_p = new Array (); 
 var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i 
 if (a i .indexOf ("#")! = 0) {d.MM_p j = nytt bilde; . D.MM_p j ++ src = a i;}} 
 } 
 funksjon MM_swapImgRestore () {//v3.0 
 var i, x, a = document.MM_sr; for (i = 0; i en && 
 } 
 funksjon MM_findObj (n, d) {//v4.01 
 var p, i, x; hvis (! d) d = dokument; hvis ((p = n.indexOf ("?"))> 0 && parent.frames.length) { 
 d = parent.frames n.substring (p + 1) dokumentet.; n = n.substring (0, p);} 
 hvis (! (x = d n) && d.all) x = d.all n; for (i = 0;! x && i 
 for (i = 0;! x && d.layers && jeg 
 if (! x && d.getElementById) x = d.getElementById (n); retur x; 
 } 
 funksjon MM_swapImage () {//v3.0 
 var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i <(a.length-2); i + = 3) 
 if ((x = MM_findObj (a i))! = null) {document.MM_sr j ++ = x; hvis (! x.oSrc) x.oSrc = x.src; x.src = a i + 2;} 
 } 

Den resulterende siden vises i Chrome 17.0.9:

Figur J

Hold musen over det første bildet i øverste venstre hjørne, og det oppdateres til det andre bildet, som vist nedenfor i figur K.

Test den ut selv med din egen Swaping-oppførsel, eller finn filen SwappingImages.html i nedlastingen, og lek deg også rundt med den.

© Copyright 2020 | mobilegn.com