Hvordan lage usammenhengende Roll Sider med Dreamweaver

Du kan bruke Adobe Dreamweaver CS 5.5 til å redigere HTML-koden på websiden og skape en usammenhengende rollover effekt. Denne funksjonen gjør det mulig for en besøkende å sveve musen over en kobling eller et bilde og endre verdien av et annet element på siden. En usammenhengende roll kan oppnås med et HTML-element, noen CSS og andre HTML-elementet som er skjult som standard, men vises når musen beveges over den angitte HTML-elementet.

Bruksanvisning

1 Start Adobe Dreamweaver CS5.5.

2 Klikk HTML under Opprett ny kolonne i midten av vinduet.

3 Klikk på "Code" knappen øverst i venstre hjørne av vinduet.

4 Klikk mellom <body> og </ body> koder.

5 Skriv inn følgende HTML-kode for objekter som vil bli vist til de besøkende. Sørg for å erstatte dummy "Rollover" teksten med din egen.

<Div id = "djrollover">
<Div>
<a href="#"> Roll en <span> <p> Roll Tekst 1 </ p> </ span> </a>
</ Div>
<Div>
<a href="#"> Roll 2 <span> <p> Roll Tekst 2 </ p> </ span> </a>
</ Div>
<Div>
<a href="#"> Roll 3 <span> <p> Roll Tekst 3 </ p> </ span> </a>
</ Div>
</ Div>

6 Klikk i <head> delen av siden din, legg deretter til følgende CSS-koden til siden:

<Style type = "text / css">

djrollover {

width: 800px;
}

djrollover div {

width: 150px;
høyde: 50 piksler;
}

djrollover en span {

display: none;
}

djrollover et {

display: block;
padding: 0 0 10px 30px;
}

djrollover a: hover span {

display: block;
position: absolute;
top: 55 piksler;
venstre: 200px;
}

</ Style>

7 Klikk på Fil øverst i vinduet, og velg Lagre som.

8 Skriv inn et navn på siden i feltet Filnavn, og klikk deretter på "Lagre".

Hint

  • Du kan erstatte deler av siden din tekst med bilder. Imidlertid bør alle bildene har samme dimensjoner for å unngå å påvirke plasseringen av andre elementer på siden.