Hvordan lage interaktive Roll Knapper i Fyrverkeri

Rollover effekter har blitt obligatorisk grensesnittelementer for moderne nettsider. De gjør mer enn å legge til kule effekter til nettstedet ditt; de indikerer for brukeren at en kobling er aktiv. Men, trenger du ikke å håndtere mange filer og skrive Javascript-kode for å legge rollovers til siden din. Med Fireworks kan du lage din knappene og la programmet skrive koden.

Bruksanvisning

1 Design din navigasjonsfeltet eller nettside grensesnitt i Fireworks. Lag bakgrunnen, knappeformer, grenser og tekst på separate lag. Flytt lag med elementer som aldri endrer til et lag mappe som heter "Static" og elementene som vil endre med rollover til en annen mappe som heter "Normal State."

2 Kopier elementene du ønsker å endre til nye lag. Flytt roll lag til en tredje mappe gruppe kalt "Roll State." Gjør endringer slik at elementene vises slik du vil ha dem til å se ut når musen beveges over en knapp.

3 Skjær dokumentet. Sørg for å opprette en egen skive for hver knapp.

4 Åpne Frame paletten. Dra Frame 1 til "Nye / Duplicate Frame" -ikonet i paletten alternativlinjen. Du vil se en ny ramme identisk med den første.

5 Vis og skjule lag i hver ramme for å vise effektene du ønsker å være synlig i at muse tilstand. Pass på Ramme 1 viser knappene i sitt normale mus tilstand, og Ramme 2 viser knappene i sin roll tilstand.

6 Skift velger du knappen skiver i stykket laget. Åpne atferd paletten og klikk på "Legg Behavior" -knappen (den ser ut som en "+"). Velg "Simple Rollover" fra pop-up-listen. Roll effekten vil bli brukt på alle de valgte knappen skiver.

7 Velg "Forhåndsvisning i leser" fra Fil-menyen. Når du er fornøyd med rollover effekten gå til Preview-modus for å optimalisere skiver. Eksportere skiver som "HTML" og bilder til å skrive HTML-koden og legg skivene i en bildemappe.

Hint

  • Du vil finne det er mye lettere å designe hele nettstedet eller navigasjonsfeltet som en Fireworks dokument enn å lage individuelle roll knapper. Fyrverkeri skal organisere og holde koden optimalisert for deg.
  • Bruk egenskapspaletten for å nevne knappe skiver. Dette vil gjøre det lettere å holde orden på knappen grafikk i sine mapper og når du redigerer HTML-kode på et senere tidspunkt.
  • Ikke bare lage en ny ramme i Frames paletten. Den nye rammen vil ikke ha noe i det, og du blir nødt til å kopiere alle lagene fra den første rammen. Sørg for å duplisere den første rammen.