Hvordan lage interaktive Roll Knapper i Dreamweaver

Alle som besøker nettstedet ditt vil forvente å se knappene endres når musen ruller over dem. Velt indikerer at en knapp er aktiv, og klikke vil ta besøkende et annet sted. Når du sjekker HTML referanse, oppdager du at du kan ikke legge til velt; du må bruke Javascript eller CSS. Eller du kan bruke Dreamweaver til å skrive koden for deg.

Bruksanvisning

1 Design din navigasjonsfeltet eller nettside grensesnitt på din favoritt bilde editor. Hold elementer som aldri endrer på ett lag. Flytt lag med elementer som aldri endrer til et lag som heter "Fixed" og elementene som vil endre med rollover til et annet lag som heter "Normal State." Rollgrensesnittelementer kan inkludere bakgrunn, tekst, knappen barer eller spesialeffekter brukes på laget.

2 Duplisere "Fixed" lag og gi den navnet "Rollover." Gjør eventuelle endringer du ønsker å gjøre for å gjenspeile den nye roll staten. Skjule "Rollover" lag.

3 Velg bildet redaktørens web skive verktøyet. Skjær hver knapp og nevne det med programvaren stykkealternativer palett (eller verktøy). Du bør også være i stand til å legge til URL-kobling i bilderedigeringsprogrammet. Hvis ikke, kan du legge den i Dreamweaver.

4 Eksportere bilde som et HTML-dokument med skiver (det er viktig at den "rollover" lag ikke være synlig på dette stadiet). Sjekk den nye HTML-filen i en nettleser for å sørge for at alle skivene er synlige. Når du vet den opprinnelige HTML-fil fungerer, vise "Rollover" lag og skjule "Normal State" lag. Velg knappen skiver bare og eksportere dem som «Markerte Slices Bare" til en undermappe i bildemappen.

5 Åpne HTML-filen i Dreamweaver. Du bør se hele bildet satt sammen i dokumentvinduet. Velg knappen skive å avsløre tabellcelle grensen.

6 Åpne Behaviors palett. Klikk på "+" ikonet og velg "Swap Image" fra rullegardinmenyen for å åpne Bytt bilde dialog. Dobbeltsjekk for å sørge for at riktig knappen er valgt, og sjekke «Last bilder" og "Gjenopprett bilder på mus ut" alternativer. Klikk på "Browse" -knappen for å finne bildet skive du lagret for roll staten.

7 Forhåndsvis websiden i nettleseren din. Hvis alt fungerer som det skal, kan du lagre nettsiden og laste den opp til serveren din.

Hint

  • Hvis bilderedaktør ikke støtter kutting, må du kutte de enkelte elementer fra dokumentet og lagre dem som separate filer, som vil være en smerte.
  • Sørg for å lagre dine roll bilder til en undermappe i bildemappen. Ellers vil du overskrive den normale knappen statlige bilder.