Hur man skapar en enkel Rollover-bild i Dreamweaver - dummies

Rollovers är en så populär funktion att Dreamweaver innehåller en speciell dialogruta bara för rollovers: dialogrutan Infoga överflyttningsbild. Rulla bilder, som namnet antyder, är utformade för att reagera när någon rullar en markör över en bild. Effekten kan vara lika dramatisk som en bild av en hund som ersätts av en bild av en lejon, eller så subtil som färgen på ett ordbyte.

Du kan skapa mer komplexa rollover-bildeffekter med alternativet Byt bild från panelen Behavior. Alternativet Byt bild gör att du kan ändra flera bilder samtidigt.

Så här skapar du en enkel övergångseffekt med två bilder genom att använda Dreamweaver: s Insert Image Rollover-dialogruta, följ dessa steg:

1. Placera markören på den sida där övergången ska visas.

   Rollover-effekter kräver minst två bilder: en för initialtillståndet och en för rullande tillstånd. Du kan använda två olika bilder eller två liknande, men båda ska ha samma dimensioner. Annars ser du konstiga skalningseffekter eftersom båda bilderna måste visas i exakt samma utrymme på sidan.

2. Välj Infoga → Bild → Rollover bild.

   Alternativt kan du använda rullgardinslistan som är tillgänglig från ikonen Bilder i fönstret Common Insert och välj Rollover Image.

   Dialogrutan Insert Rollover Image visas.

   

3. Namn på din bild i rutan Bildnamn.

   Innan du kan tillämpa ett beteende på ett element, till exempel en bild, måste elementet ha ett namn så att beteendelsesskriptet kan referera till det. Du kan namnge element som du gillar så länge du inte använder mellanslag eller specialtecken.

4. I den ursprungliga bildrutan anger du den första bilden du vill synliggöra. Använd Bläddra-knappen för att hitta och välj bilden.

   Om bilderna inte redan finns i din lokala webbplatsmapp kopierar Dreamweaver dem till din webbplats när du skapar övergången.

5. I rutan Rollover Image anger du bilden du vill bli synlig när en besökare flyttar markören över den första bilden.

   Igen kan du använda Browse-knappen för att hitta och välja bilden.

6. Markera kryssrutan Preload Rollover Image för att ladda alla överlämnade bilder i webbläsarens cache när sidan först laddas.

   Om du inte väljer att göra det här steget kan dina besökare uppleva en fördröjning eftersom den andra bilden inte kommer att hämtas tills en markör rullas över originalbilden.

7. I fältet Alternativ text anger du en beskrivning av bilderna.

   Alternativ text är valfri men rekommenderas eftersom användningen av nyckelord kan förbättra sökmotoroptimering.På samma sätt är alternativ text en viktig del av webbtillgänglighet eftersom texten läses högt av speciella webbläsare som kallas skärmsläsare, som används av personer som är blinda och andra med begränsad syn eller rörlighet. Alternativ text visas endast i webbläsaren om bilderna inte är synliga.

8. I rutan När du klickar, gå till URL, ange någon webbadress eller bläddra för att hitta en annan sida på din webbplats som du vill länka.

   Om du inte anger en webbadress, lägger Dreamweaver automatiskt in # tecknet som en platshållare i koden.

   Tecknet # är en vanlig teknik för att skapa länkar som inte länkar någonstans. Eftersom överföringsbilder som inte länkar till en annan sida har många bra användningsområden, är den här tekniken användbar. Kom bara ihåg att om du vill att din övergång ska länka måste du byta # -tecken med en länk till en annan sida.

9. Klicka på OK.

   Bilderna ställs in automatiskt som en övergång.

10. För att se överflyttningen i åtgärd, spara filen och klicka sedan på ikonen Globalt högst upp i arbetsytan för att förhandsgranska din sida i en webbläsare.

Du kan se hur din överflyttning fungerar i Dreamweavers designvyn eller genom att använda alternativet Livevisning. När du klickar på Live-knappen längst upp till vänster i arbetsytan gör du i huvudsak Dreamweaver till en webbläsare som visar sidor mycket som Chrome-webbläsaren.

När du förhandsgranskar en sida på din dator som innehåller en övergångsbild, visar vissa webbläsare en varning som anger att du måste tillåta ActiveX-kontroller att visa sidan. Det här är en säkerhetsvarning som bara visas när sidan öppnas på samma dator där sidan sparas.

Om du publicerar sidan till en webbserver och sedan visar den över en Internetanslutning, kommer du och dina besökare inte att se detta fel.

Kredit: Konstverk av istockphoto. com