Als u wilt een website maken van een enkel stilstaand beeld, kunt u afbeeldingen met hyperlinks over het oppervlak van de afbeelding van uw website. Een afbeelding met hyperlinks is een gebied op de pagina van de web uitgeroepen tot een "hot spot". Bezoekers klikken toegang tot de volgende pagina in uw site. Omdat een enkel stilstaand beeld dat een webpagina vult waarschijnlijk grote en langzaam is worden geladen in de browser, zult u ook willen uw afbeelding snijd in secties voor het optimaliseren van de snelheid van uw website.
Wat die u nodig hebt
- Hulpmiddel, zoals Adobe Fireworks, het bewerken van afbeeldingen dat kan snijd webafbeeldingen en exporteren voor gebruik in HTML.
- Web-pagina uitgeven hulpmiddel dat afbeeldingen met hyperlinks, zoals Adobe Dreamweaver kunt maken.
Snijd de afbeelding
Open uw afbeeldingen bewerkingssoftware. Het hier gegeven voorbeeld maakt gebruik van Adobe Fireworks, een grafische applicatie ontworpen specifiek voor het werken met webafbeeldingen.
Open de afbeelding die u wilt gebruiken voor uw website en het formaat aanpassen volgens de afmetingen die u nodig hebt. In Fireworks is de opdracht om het formaat van een afbeelding gevonden onder het commando van Canvas in het menu wijzigen.
Gebruik het tekstgereedschap in uw grafische programma de titel van een website of etiketten aan de afbeelding toevoegen, zodat bezoekers wat weten te klikken op als het is niet duidelijk uit de afbeelding.
Gebruik het gereedschap segment in uw gereedschapskist graphics software om uw afbeelding te verdelen in kleinere secties. In Fireworks wordt dit gedaan door klikken en slepen het gereedschap segment om te markeren gebieden in geometrische vormen--rechthoekig standaard.
Houden van gebieden die u worden klikbare als enkele segmenten wilt zodat de afbeelding met hyperlinks niet hoeft te gaan over meerdere segmenten maken een hot spot.
Dubbelklik op het label segment en hernoem het als uw web grafisch programma je de mogelijkheid geeft om het label van uw segmenten. In Fireworks worden de labels in de weblaag palet aan de rechterkant van het scherm. Etiketten helpen u identificeren van de verschillende segmenten als u later weergeven van de HTML-code van uw webpagina en moet tweaken iets.
Maak genoeg segmenten ter dekking van de gehele afbeelding.
Sla het bestand op, en vervolgens exporteren, via het menu bestand. Kies HTML en afbeeldingen op het Export scherm als u Adobe Fireworks gebruikt. Dit maakt een webpagina met HTML-code samen te stellen uw segmenten terug tot één afbeelding op de webpagina.
Toevoegen van de afbeeldingen met hyperlinks
Open het geëxporteerde webpagina met uw segmenten in een web bewerkgereedschap zoals Adobe Dreamweaver. U zult merken dat uw afbeelding is samengesteld terug door randloze tabellen als u Fireworks gebruikt om de segmenten exporteren.
Afbeeldingen met hyperlinks toevoegen aan de webpagina met behulp van het hulpprogramma voor het image-kaart in uw web bewerkingssoftware. Als u Adobe Dreamweaver gebruikt, komt de afbeelding kaart gereedschap op de werkbalk Algemeen elementen onder de opdracht Afbeelding invoegen, die een drop-down menu is.
Voer het adres van de webpagina, dat de bezoeker zal worden gebracht door te klikken op de hot spot, meestal een andere pagina op uw website.
Doorgaan met het toevoegen van afbeelding kaart hotspots, totdat u de gebieden van de afbeelding die u wilt worden klikbare.
Sla uw wijzigingen van de webpagina en de webpagina en de bijbehorende grafische bestanden (segmenten) uploaden naar uw webserver. Een webbrowser gebruiken om te testen uw pagina en zien hoe de hot spots werken.