FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:

Transcriptie

1 1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina van je website noem je altijd index.htm Dan kan je uw internetadres doorgeven zonder dat je er de naam van de startpagina bij moet vermelden. Bijvoorbeeld: toont hetzelfde als Index.htm is niet geopend zodra de website werd aangemaakt. Wel staat nieuwe_pagina_1.htm open. Deze pagina mag je sluiten.

2 Er zijn verschillende weergaves: Pagina Mappen Externe website Rapporten Navigatie Hyperlinks Taken Onderaan de Tab website : Onderaan de Tab pagina : Of kies ook in het menu van Beeld, Kies de Navigatieweergave: 2

3 Via de knop nieuwe pagina toevoegen kan je desgewenst in deze Navigatieweergave automatisch een pagina een bepaald niveau toekennen. 3

4 Voorbeeld: In deze oefening zullen we de links via navigatieknoppen naar de verschillende pagina's opnemen in de bovenrand. Kies Opmaak Gemeenschappelijke randen en duid volgende opties aan: Let op de randen en de links die er nu bij komen! 4

5 5 Merk op dat de randen worden afgebakend door een stippellijn. Alles wat boven de hoogste, onder de laagste en links van de linkse stippellijn staat, zal verschijnen op ELKE pagina van je web! Alles wat in niet in de randen staat, verschijnt enkel op de huidige pagina. De pagina zelf bewerk je dus als de stippellijnen te zien zijn. Wanneer je aan het werken bent in de randen, worden de stippellijnen vervangen door volle lijnen. Open alle pagina s in het tabblad Website door er bijvoorbeeld op te dubbelklikken en bekijk deze in de voorbeeldweergave. Test alle links. Dit kan je doen door bijvoorbeeld de klikken op de hyperlinks met de CTRL toets ingedrukt. Met Bestand, Voorbeeld in de browser, toont je standaardbrowser de pagina schermvullend (opslaan is noodzakelijk). Voor de pagina index kies vervolgens als eigenschap van de hyperlink bovenaan (door bijvoorbeeld te dubbelklikken erop) : Resultaat:

6 6 We kunnen al navigeren door onze site, maar de lay-out is niet echt overweldigend. Ook dat kunnen we met een paar klikken wijzigen. FrontPage voorziet een aantal thema's die de hele site transformeren tot een veelkleurig geheel met effecten, knoppen, achtergrond,... Pas een thema toe: Kies Opmaak Thema. Duid zeker aan dat je alle pagina's van een thema wil voorzien! Kies je thema, eventueel met Levendige kleuren en Toegepast met CSS (Cascading Style Sheets)

7 Opmerking: je merkt ook een aantal mappen inmiddels in de mappenlijst: _borders : Gemeenschappelijke rand _fpclass: Themaknoppen in randen _overlay: Houdt verband met thema s _themes: Thema s Andere mappen die er al stonden: _private: FrontPage Extensies vereist (houdt te verbergen bestanden bij) images: Nuttig om afbeeldingen in te stoppen. Deze map kan je ook van naam wijzigen, vb. in "fig" Klik ook eens op de keuze Hyperlinks : 7

8 8

9 Oefening: Maak de volgende website: Kies vervolgens: 9

10 Ga naar index en bekijk via beeld, hyperlinks de links naar deze pagina. Kies daarom vervolgens: 10

11 Ga naar de pagina favorieten en maak tik in: 11

12 12 Tik vervolgens de volgende tekst ook in als voorbeeld: Mijn favoriete zoekmachine, wij maken hiervan een hyperlink naar de google zoekmachine als volgt: : hyperlink invoegen Sla je website op (bestand, alles opslaan) en kies vervolgens Voorbeeld in browser en test al eens even je website uit.

13 13

14 14 Ga terug naar je index-pagina (homepage) en typ er vervolgens je naam onder. We maken hiervan een maillink als volgt: Je gebruikt uiteraard je eigen adres.

15 15 Sla je werk op en test uit in Voorbeeld in de browser. We gaan op onze homepage eens een figuur toevoegen via de menukeuze invoegen, afbeelding,uit bestand (zet desgewenst de werkbalk Afbeeldingen aan via Beeld) Klik op de figuur en kies vervolgens opmaak, eigenschappen en ik stelde de breedte in op 400 pixels:

16 Sla je document op en bij de vraag ook de figuur in de map Images: Test je resultaat uit in de browser. 16

17 Lichtkrant: Typ de tekst op het blad interesses die we zullen instellen als een lichtkrant: Selecteer de tekst en kies invoegen, webcomponent: 17

18 18 Stel vervolgens zelf de eigenschappen in, bijvoorbeeld : Waarbij verder voor de snelheid : Vertraging: standaard 90 (milliseconden vooraleer de lichtkrant begint te bewegen); zet eens op nul of 2000 Aantal: standaard 6 (pixels waarover telkens gesprongen wordt bij de beweging); zet eens op 66 of 1 Beweging Continu is standaard: aan de andere kant uit beeld en opnieuw. Eenmalig is heel rustig achteraf, natuurlijk. Kies maar wat je liefst hebt.

19 Invoegen, Bladwijzers Op dezelfde pagina gaan we wat tekst erbij zetten en er vervolgens naar verwijzen met bladwijzers, bijvoorbeeld: 19

20 20 Maak vervolgens een hyperlink die naar deze bladwijzer kan verwijzen, zoals hieronder: Sla je werk op en test eventueel uw website door een voorbeeld in de browser aan te klikken.

21 21 Als je in mijn voorbeeldsite klikt zie je dat ik ook andere 2 bladwijzers heb gedefinieerd zoals voor webdesign en zwemmen. Je merkt dat bij het aanklikken van de figuren ik ook telkens terugspring naar het begin van de pagina. Tracht dezelfde kenmerken in te stellen als oefening. Tip:

22 Lettertype Kies opmaak, lettertype Enkele voorbeelden: ga naar je pagina fotoalbum en maak de tekst zoals in het voorbeeld: Ganse tekst in Arial, 14 pt. (4), marineblauw Woordje Photoshop: klein kapitaal Woordje beeldbewerking: rood Voor wat betreft de alinea s: afstand vóór en ná: 20 (via opmaak, alinea): 22

23 23 Op de pagina Favorieten heb ik de tekst gecentreerd, marineblauw en in hoofdletters gezet. Op de pagina Interesses heb ik de tekst in marineblauw, 3 gezet, de titeltjes telkens in Nadruk, en via opmaak, randen en arcering de rode dubbele lijntjes gezet, probeer alvast eens.

24 24 Probeer tevens de achtergrondkleur in te stellen van de pagina Fotoalbum (lichtgrijs) via de keuze: opmaak, achtergrond

25 Tracht tenslotte als oefening op de pagina Interesses eens de vakjes tussen de randen te arceren met een achtergrondafbeelding. 25

26 Het maken van het fotoalbum op onze website: Als voorbeeldsite daarvan surfen we naar Download en installeer dit programma. 26

27 Kies: 27

28 28 Kies daarna: Om het album te genereren, Je kunt op het einde de HTML pagina automatisch laten genereren, in de map met de daarbij horende onderdelen en de geselecteerde foto s: Deze aangemaakte map op je Bureaublad kan je dan verplaatsen naar de map van je website:

29 Om vervolgens een hyperlink te kunnen maken (vanuit de pagina Fotoalbum op de site) naar de pagina index in deze submap! 29

30 30

31 31

32 32