Initiatie Frontpage
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: http://www.websitenaam.net/ toont hetzelfde als http://www.websitenaam.net/index.htm Index.htm is niet geopend zodra de website werd aangemaakt. Wel staat nieuwe_pagina_1.htm open. Deze pagina mag je sluiten.
© De Taey John
Initiatie Frontpage
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:
© De Taey John
2
Initiatie Frontpage
Via de knop ‘nieuwe pagina toevoegen’ kan je desgewenst in deze Navigatieweergave automatisch een pagina een bepaald niveau toekennen.
© De Taey John
3
Initiatie Frontpage
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!
© De Taey John
4
Initiatie Frontpage
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:
© De Taey John
Initiatie Frontpage
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)
© De Taey John
Initiatie Frontpage
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’:
© De Taey John
7
Initiatie Frontpage
© De Taey John
8
Initiatie Frontpage
Oefening: Maak de volgende website:
Kies vervolgens:
© De Taey John
9
Initiatie Frontpage
Ga naar index en bekijk via beeld, hyperlinks de links naar deze pagina. Kies daarom vervolgens:
© De Taey John
10
Initiatie Frontpage
Ga naar de pagina ‘favorieten’ en maak tik in: www.start.be © De Taey John
11
Initiatie Frontpage
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.
© De Taey John
Initiatie Frontpage
© De Taey John
13
Initiatie Frontpage
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 emailadres. © De Taey John
Initiatie Frontpage
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:
© De Taey John
Initiatie Frontpage
Sla je document op en bij de vraag ook de figuur in de map Images:
Test je resultaat uit in de browser.
© De Taey John
16
Initiatie Frontpage
Lichtkrant: Typ de tekst op het blad ‘interesses’ die we zullen instellen als een lichtkrant: Selecteer de tekst en kies invoegen, webcomponent:
© De Taey John
17
Initiatie Frontpage
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.
© De Taey John
Initiatie Frontpage
Invoegen, Bladwijzers Op dezelfde pagina gaan we wat tekst erbij zetten en er vervolgens naar verwijzen met bladwijzers, bijvoorbeeld:
© De Taey John
19
Initiatie Frontpage
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.
© De Taey John
Initiatie Frontpage
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:
© De Taey John
Initiatie Frontpage
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):
© De Taey John
22
Initiatie Frontpage
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.
© De Taey John
Initiatie Frontpage
24
Probeer tevens de achtergrondkleur in te stellen van de pagina Fotoalbum (lichtgrijs) via de keuze: opmaak, achtergrond
© De Taey John
Initiatie Frontpage
Tracht tenslotte als oefening op de pagina Interesses eens de vakjes tussen de randen te arceren met een achtergrondafbeelding.
© De Taey John
25
Initiatie Frontpage
Het maken van het fotoalbum op onze website: Als voorbeeldsite daarvan surfen we naar www.ornj.net
Download en installeer dit programma.
© De Taey John
26
Initiatie Frontpage
Kies:
© De Taey John
27
Initiatie Frontpage
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:
© De Taey John
Initiatie Frontpage
Om vervolgens een hyperlink te kunnen maken (vanuit de pagina Fotoalbum op de site) naar de pagina index in deze submap !
© De Taey John
29
Initiatie Frontpage
© De Taey John
30
Initiatie Frontpage
© De Taey John
31
Initiatie Frontpage
© De Taey John
32
