Sådan oprettes en hjemmeside fra en enkelt stillbillede

July 17

Hvis du vil oprette en hjemmeside fra et enkelt stillbillede, kan du bruge image-kort hen over overfladen af ​​din hjemmeside grafik. Et billede kort er et område på websiden, der er udpeget som et "hot spot". Besøgende på den for at få adgang til den næste side i dit websted. Fordi en enkelt stillbillede, som fylder en webside vil sandsynligvis være stor og langsom til at indlæse i browseren, vil du også ønsker at skære dit billede i sektioner for at optimere hastigheden på din hjemmeside.

Instruktioner

Skær billedet

1 Åbn din grafik redigeringssoftware. Det viste eksempel anvender Adobe Fireworks, et grafisk program designet specielt til at arbejde med web-grafik.

2 Åbn det billede, du vil bruge til din hjemmeside og ændre størrelse på det til de dimensioner, du har brug for. I Fireworks, er kommandoen til at ændre størrelsen på et billede findes under Canvas kommando i menuen Rediger.

3 Sådan oprettes en hjemmeside fra en enkelt stillbillede

Brug tekstværktøjet i dit grafikprogram at tilføje en hjemmeside titel eller etiketter til billedet så de besøgende ved, hvad til at klikke på, hvis det ikke er indlysende fra billedet.

4 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Brug Slice Tool i din grafik software værktøjskasse til at opdele dit billede i mindre sektioner. I Fireworks gøres dette ved at klikke og trække Udsnitsværktøjet til at markere områder i geometriske former - rektangulær som standard.

5 Hold områder, du ønsker at være klikbare som enkelte skiver så billedet kortet ikke behøver at gå på tværs af flere skiver til at skabe et hot spot.

6 Sådan oprettes en hjemmeside fra en enkelt stillbillede

Dobbeltklik på skive etiket og omdøbe den, hvis din web grafik program giver dig mulighed for at mærke dine skiver. I Fireworks, etiketterne er i Web Layer paletten i højre side af skærmen. Etiketter hjælp til at identificere de forskellige skiver, hvis du se HTML-koden på din webside senere, og har brug for at justere noget.

7 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Skabe nok skiver til at dække hele grafikken.

8 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Gem din fil, derefter eksportere det, ved hjælp af menuen Filer. Vælg HTML og billeder på Export skærmen, hvis du bruger Adobe Fireworks. Dette skaber en webside med HTML-kode til at sætte dine skiver sammen igen til et enkelt billede på websiden.

Tilføj Maps de billede

9 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Åbn den eksporterede webside med dine skiver i en web-redaktion værktøj som Adobe Dreamweaver. Du vil opdage, at dit billede er blevet sat sammen igen af ​​tabeller uden rammer, hvis du bruger Fireworks at eksportere skiver.

10 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Tilføj grafikobjekter til websiden ved hjælp af billedet kortet værktøj i din web redigeringssoftware. Hvis du bruger Adobe Dreamweaver, bliver billedet kortet værktøj fundet på fælles elementer værktøjslinjen under Indsæt billede kommando, som er en drop down menu.

11 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Indtast adressen på websiden, at den besøgende vil blive bragt til ved at klikke på hot spot, som regel en anden side på dit websted.

12 Sådan oprettes en hjemmeside fra en enkelt stillbillede


Fortsæt med at tilføje billedet kort hot spots, indtil du har alle de områder, der dækkes af det billede, du ønsker at være klikbare.

13 Gem din webside ændringer, derefter uploade websiden og tilhørende grafiske filer (de skiver) til webserveren. Brug en webbrowser til at teste din side og se, hvordan de hotspots arbejde.


relaterede artikler