Google Maps op uw site

Transcriptie

1 Google Maps op uw site 1. Ga naar maps.google.com en voer het gezochte adres in. 2. Klik op de knop Zoeken in Maps. 3. U kan naar de gewenste positie zoomen en kiezen voor de satellietweergave of de gewone kaart. 4. Klik op Link rechts bovenaan de kaart. 30

2 5. U kan de HTML-code kopiëren. 6. Klik op Ingesloten kaart aanpassen en voorbeeld ervan weergeven als u nog meer instellingen wil wijzigen. 7. Kies de gewenste grootte en zoom in tot het gewenste niveau. 31

3 8. Selecteer de HTML-code onderaan de pagina. 9. Kopieer ze met de rechtermuisknop. 10. Ga naar Dreamweaver en open de pagina contact.html. 11. Ga met de muis achter de reeds aanwezige link staan en klik op Enter. 12. In het code-venster verschijnt een nieuwe alinea (<p> </p>). 32

4 13. Plak de HTML-code van Google Maps met de rechtermuisknop in het code-venster in de plaats van 14. Mogelijk kan u de kaart lokaal niet zien. Wanneer u de bestanden uploadt naar een server is er echter geen enkel probleem. 33

5 Inhouden uit een tekstverwerker U kan niet zonder meer tekst uit een tekstverwerker zoals Microsoft Word in een webpagina plakken. Tekstverwerkers gaan op een slechte manier om met inhouden: ze vermengen inhoud (tekst, afbeeldingen...), structuur (titels, alinea's...) en opmaak (kleur, lettertype...) en slaan alles samen op in één document. Wanneer we een goede website willen bouwen, moeten we die dingen strict gescheiden houden (hierover later meer). Wanneer u een tekst uit Word kopieert om hem in Dreamweaver te plakken, neemt u ook heel wat opmaakcodes van Word mee over. Afbeeldingen uit een tekstverwerkingsdocument worden zelfs helemaal niet overgenomen. In HTML mogen we enkel werken met platte tekst. De simpelste oplossing is om tekst uit een tekstverwerker te kopiëren en vervolgens te plakken in een simpele tekstditor zoals Microsoft Kladblok. Vervolgens kopieert u de tekst opnieuw en plakt hem in Dreamweaver. Dan bent u er pas zeker van dat alle opmaakcodes verwijderd zijn. U moet dan wel opnieuw starten met het ingeven van zowel structuurelementen als van opmaak. Dreamweaver beschikt echter ook over een ingebouwde module voor het importeren van Word-documenten. 34

6 4. Navigeren door een website met HTML Links en hyperlinks Hogerop in de cursus hebben we reeds uitgelegd hoe een link of hyperlink in HTML wordt opgebouwd. Ook hebben we reeds pagina's aan elkaar gelinkt in Dreamweaver. Image maps Een image map bestaat uit een eenvoudige afbeelding (jpeg, gif...). Door bepaalde delen van de afbeelding aanklikbaar te maken, kan u bezoekers naar verschillende pagina's in de website doorsturen. Let op: gebruik image maps zinvol. Het heeft geen zin de hele navigatiestructuur van uw website te maken via image maps. Zinvolle toepassingen: een afbeelding van een huis met aanklikbare kamers een landkaart met aanklikbare provincies een groepsfoto's waarbij alle personen aanklikbaar zijn Image maps maken in Dreamweaver 1. Maak een nieuwe HTML-pagina in Dreamweaver aan. 2. Bewaar de pagina. 3. Voeg een foto in. 35

7 4. Laat Dreamweaver de foto kopiëren naar de map Images. Als die map in uw sitestructuur nog niet bestaat, moet u die eerst aanmaken. 5. Selecteer empty bij Image Tag Accessibility Attributes. 6. Kies Draw Rectangle Hotspot. 36

8 7. Sleep een rechthoek over het deel van de afbeelding dat u aanklikbaar wil maken. 8. Voer onderaan de webpagina in waarnaar de aanklikbare zone verwijst. 9. Voer een zinvolle tekst in bij Alt. Bijvoorbeeld: Ga naar de kinderkamer. Dit Alt-attribuut tootn een gele tooltip wanneer een bezoeker met zijn muis over dit deel van de afbeelding beweegt. Jammer genoeg werkt Alt enkel in Internet Explorer. 37

9 10. Selecteer het Alt-attribuut in de HTML-code in het Code-venster. 11. Vervang alt door title. 12. Naast rechthoekige klikzones, kan u ook ronde zones kiezen. Met het polygone gereedschap kan u zelfs veelhoeken vormen. 13. Vergeet niet telkens het alt-attribuut te vervangen door title. 38