Sådan opretter du en GIF-animation og tilføjer den til HTML
Sidst opdateret den 22. november 2023 by Peter Wood
I den evigt udviklende verden af webdesign og skabelse af indhold er evnen til at inkorporere iøjnefaldende grafik og animationer på websider en værdifuld færdighed. GIF'er er en af de mest engagerende og udbredte former for animation på internettet. Uanset om du vil tilføje humor, skabe interaktive elementer eller blot forbedre din hjemmesides visuelle tiltrækningskraft, er det en vigtig færdighed for enhver webudvikler eller indholdsskaber at vide, hvordan man tilføjer GIF'er til HTML. I denne prøvevejledning vil du blive ledt igennem trinene til problemfrit integrere GIF'er i HTML-kode så du kan bringe dit webindhold til live.
Del 1: Sådan opretter du GIF-animation for at tilføje det i HTML
Før du tilføjer GIF-animation til HTML, skal du først have en GIF-animation. Finder du en meget passende GIF-animation på hjemmesiden, så kan du direkte gemme dens link til efterfølgende brug, men finder du ikke en passende GIF-animation, så kan du selv lave en GIF-animation for at tilføje den til hjemmesiden. WidsMob GIF er en GIF animation maker og editor, der giver dig mulighed for at oprette enhver GIF animation, du ønsker gennem video og billedfiler.
1. Importer MP4, MKV, WEBM, MPEG og mange andre typer videofiler.
2. Tilpas indholdet af GIF-animationen, og se et eksempel på det med det samme.
3. Juster HSL-indstillingerne for GIF-animationen for at opnå den bedste seeroplevelse.
4. Tilføj tekst til GIF-animationen for at få en ekstra forklaring.
Trin 1: Download og installer WidsMob GIF på din computer. Efter vellykket installation skal du starte softwaren. Klik på Video til GIF knappen på softwarens hjemmeside, vælg videofilen i pop op-dialogboksen og importer den til softwaren. Når videoen er blevet importeret, vil GIF-animationen automatisk blive genereret og afspillet.
Trin 2: Indholdet af videoen bliver mere og en smule kompliceret, så du kan overveje at genvælge indholdet af GIF-animationen. Der er en tidslinje under forhåndsvisningsboksen for GIF-animationen. Du kan bestemme indholdet af GIF-animationen gennem valgfelterne i begge ender af tidslinjen eller indtaste starttidspunktet og afspilningstiden for GIF-animationen i begge ender. Klik på Leg ikon for at få vist afspilningen af GIF-animationen.
Trin 3: Klik på knappen Videojustering knap. I redigeringsområdet til højre vises 3 muligheder for at justere GIF-animationens HSL. Juster skyderen til Kontrast og observer ændringerne i realtid af GIF-animationen til venstre. Hvis du vil have den bedste seeroplevelse, skal du samarbejde direkte med de to andre muligheder.
Trin 4: For den GIF-animation, der er tilføjet i HTML, skal du muligvis tilføje tekst for at hjælpe forklaringen. Klik på tilføje tekst knappen i øverste højre hjørne af forhåndsvisningsboksen, indtast tekst i pop op-dialogboksen, og indstil tekstfarve, skrifttype, størrelse osv. Klik på OK knappen, og teksten er officielt tilføjet til GIF-animationen.
Trin 5: Vælg teksten direkte på GIF-animationen, og træk den for at ændre placeringen af teksten på GIF-animationen. For GIF-animation i HTML kan du justere skyderen for Kvalitet in GIF-indstillinger for at få en GIF-animation af høj kvalitet. Efter redigering skal du klikke på Eksporter GIF knappen for at eksportere GIF-animationen og indsætte den i HTML.
Del 2: Sådan tilføjes animeret GIF i HTML
Nu hvor du har en GIF-animation, er den næste ting at gøre at tilføje GIF-animationen til HTML-filen for at sikre, at den kan afspilles problemfrit på nettet. Men visningsindstillingerne for forskellige webbrowsere kan være forskellige, og du skal blive ved med at prøve at sikre den bedste visningsoplevelse.
Trin 1: Sørg for, at din GIF-animationsfil er placeret i den samme mappefil som HTML-koden. For at åbne HTML-filen kan du vælge en teksteditor eller et integreret udviklingsmiljø. Find koden i din kode, der skal indsætte GIF-animation. Generelt bruger du tag for at indsætte GIF-animation.
Trin 2: Tilføj src til img for at angive lagerstien til GIF-animationsfilen. Den relative sti er filadressen gemt i samme mappe som HTML. Glem ikke at skrive navn og format på GIF-animationen. Absolutte stier giver dig mulighed for at tilføje animerede GIF'er, der er uploadet til webstedet.
Trin 3: I img-attributten kan du indstille alt-attributten, som kan give en kort beskrivelse af GIF-animationen. Når GIF-animationen ikke indlæses, vil teksten blive vist for at få hjælp.
Trin 4: Afhængigt af skærmindstillingerne på nettet skal du muligvis justere bredden og højden. HTML indeholder denne attributfunktion.
Trin 5: Gem HTML-filen med GIF-animationen tilføjet, og du kan åbne den i en webbrowser, så du kan forhåndsvise GIF-animationen, der afspilles på websiden. Animerede GIF'er bør afspilles automatisk i de fleste browsere uden yderligere kode.
Del 3. Ofte stillede spørgsmål om GIF til HTML
Konklusion
Nu har du lært, hvordan du tilføjer GIF'er til HTML, og vi håber, at denne guide hjælper dig med at forbedre dit webindhold og engagere dit publikum med engagerende animationer. Internettet er et dynamisk rum, og muligheden for at inkludere GIF'er åbner op for en verden af kreative muligheder. Uanset om du bruger GIF'er til underholdning, uddannelse eller for at forbedre brugeroplevelsen, så husk at holde dine animationer relevante, præstationsoptimerede og i overensstemmelse med det overordnede design af dit websted.