Google Maps op uw site

Google Maps op uw site 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.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 30

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.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 31

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>&nbsp;</p>).

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 32

13. Plak de HTML-code van Google Maps met de rechtermuisknop in het code-venster in de plaats van &nbsp;

14. Mogelijk kan u de kaart lokaal niet zien. Wanneer u de bestanden uploadt naar een server is er echter geen enkel probleem.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 33

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.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 34

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:

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 Image maps maken in Dreamweaver

1. Maak een nieuwe HTML-pagina in Dreamweaver aan.

2. Bewaar de pagina.

3. Voeg een foto in.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 35

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.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 36

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.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 37

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.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 38