Frontpage basisvaardigheden - Komp-u-ter-hulp

Persoonlijke homepage
maken voor ILOmedewerkers
My new website gets over 100 hits a day!
(Mark Armstrong, USA Weekend)
Anne-Martine Gielis
Versie 1.1
maart 2006
UNIVERSITEIT VAN AMSTERDAM
Instituut voor de lerarenopleiding
Inhoudsopgave
1
2
3
4
Inleiding ............................................................................................................................ 1
Stappenplan....................................................................................................................... 1
Beginnen met een website ................................................................................................ 2
Nieuwe pagina’s maken.................................................................................................... 3
4.1
4.2
Via icoon nieuwe pagina.............................................................................................................................. 3
Vanuit de navigatieweergave....................................................................................................................... 4
5
6
Submappen maken............................................................................................................ 4
Hyperlinks......................................................................................................................... 5
6.1
6.2
6.3
6.4
Hyperlink naar een andere webpagina ......................................................................................................... 5
Hyperlink naar een bestand (zodat het te downloaden is)............................................................................ 6
Bladwijzers .................................................................................................................................................. 6
Hyperlinks bewerken ................................................................................................................................... 7
7
8
Invoegen van een afbeelding ............................................................................................ 7
Opmaak............................................................................................................................. 8
8.1
8.2
8.3
8.4
8.5
Toepassen van een thema ............................................................................................................................ 8
Opmaakstijlen .............................................................................................................................................. 9
Opmaakaanwijzingen en tips ..................................................................................................................... 10
Tabel maken............................................................................................................................................... 11
Tabel invoegen uit Excel of Word ............................................................................................................. 11
9
10
Hoe ziet je website eruit.................................................................................................. 12
Publiceren van je website ............................................................................................... 13
10.1
Opnieuw publiceren na wijziging pagina’s................................................................................................ 14
11
Navigatie......................................................................................................................... 15
11.1
11.2
Gemeenschappelijke randen ...................................................................................................................... 16
Navigatiebalk............................................................................................................................................. 16
12
13
Lichtkrant maken ............................................................................................................ 18
Bijlagen........................................................................................................................... 19
13.1
13.2
Het programma Frontpage ......................................................................................................................... 19
Korte uitleg over HTML............................................................................................................................ 22
Handleiding
1
Website maken voor ILO-medewerkers
Inleiding
Je gaat zelf een eenvoudige webpagina maken met het programma Frontpage. Hoe dit technisch
werkt, staat verderop beschreven. Deze handleiding behandelt een aantal basisvaardigheden voor
het werken met Microsoft Frontpage 2002. Op je ILO werkplek kun je ook Frontpage installeren
(als dat niet al is gebeurd), vraag eventueel hulp bij de helpdesk systeembeheer als je er niet zelf
uitkomt. De versie die je dan krijgt is Frontpage 2003. Dat is een nieuwere versie met meer
mogelijkheden, de mogelijkheden die in deze handleiding zijn beschreven staan op misschien een
andere plaats of zien er iets anders uit. Er is nog geen specifieke handleiding voor Frontpage 2003
op het ILO beschikbaar.
De meeste webpagina's worden gemaakt in HTML (HyperTextMarkupLanguage). HTML is een
soort programmeertaal die met codes werkt. Iedere code heeft uitwerking op de tekst die erna komt
Internetbrowsers interpreteren deze code en laten de pagina keurig opgemaakt zien. Frontpage is
een programma waarmee je webpagina's kunt maken zonder zelf HTML-codes in te voeren, het
programma doet dat voor je. Daarom noemen we het een web-editor of HTML-editor.
Deze handleiding is een aanpassing van de handleiding ‘Educatieve website’ zoals die op het ILO
was gemaakt door Anne-Martine Gielis, Judith Janssen, Gotze Kalsbeek en Lizan Zonneveld
Veel plezier en succes!
Anne-Martine Gielis
2
Stappenplan
Bezint eer ge begint! Lees eerst onderstaande stappen even door om te zien wat er komt kijken bij
het maken van een website.
1. Bepaal wat je op de website wilt zetten
2. Bepaal de structuur waarin je dit op de website wilt zetten (welke informatie zet je op welke
pagina, hoeveel pagina’s maak je). Teken bijvoorbeeld eerst op een stuk papier de structuur van
de website of gebruik daarvoor de navigatieweergave van Frontpage.
3. Lees de inleiding over Frontpage en de specifieke eigenschappen van het programma.
4. Maak de structuur van je website: maak alle pagina’s aan (zie pagina 2 en verder) en zet de titel
alvast op iedere pagina zodat je de pagina makkelijk herkent
5. Kies eventueel een opmaakthema voor je website. Hiermee leg je de opmaak (lettertypes,
kleuren) vast.
6. Geef de pagina’s vulling
7. Zorg voor een duidelijke navigatie
8. Test de interne en externe hyperlinks uit in een browser
9. Publiceer je website
10. Controleer of je website naar wens is.
ICT-deskundigheidsbevordering
1
Instituut voor de Lerarenopleiding
Handleiding
3
Website maken voor ILO-medewerkers
Beginnen met een website
Als je begint met je website, maak je eerst een nieuw Frontpage web aan, zodat Frontpage alle
wijzigingen voor je kan bijhouden en je gemakkelijk je website / homepage kunt publiceren:
• Start indien nodig Frontpage op.
• Klik op Bestand Æ Nieuw ► Web
• Klik in de rechterkolom op Leeg web.
Het venster Websitesjablonen
verschijnt.
• Klik op Bladeren … om de locatie van
je website op te geven. Als je op je
eigen computer werkt, maak dan een
map aan voor je website op je eigen Hschijf, bij werken elders kan dit ook het
Bureaublad zijn, dan kun je de site
makkelijk vinden om mee te nemen.
De ‘locatie’ voor je web wordt de
hoofdmap van je website waarin alle
pagina’s, documenten en plaatjes een
plaats krijgen.
• Klik op OK.
• Er wordt een ‘Frontpage web’ voor je
aangemaakt op de door jou aangegeven
locatie. Als het klaar is wordt dit web
geopend. Je ziet rechts naast de
weergavenkolom de Mappenlijst.
• Nu kun je aan de slag om je website te
vullen. Lees verder in hoofdstuk 4 hoe
je dat kunt doen.
Je kunt ook kiezen voor een ‘persoonlijk
web’. Frontpage maakt dan alvast een
aantal pagina’s voor je aan. Je hebt dan een
structuur die je zelf kunt vullen met
teksten, plaatjes, enz.
ICT-deskundigheidsbevordering
2
Instituut voor de Lerarenopleiding
Handleiding
4
Website maken voor ILO-medewerkers
Nieuwe pagina’s maken
Er zijn verschillende manieren om in Frontpage nieuwe pagina’s aan te maken:
• door in de knoppenbalk op het icoon voor nieuwe pagina te klikken:
• door in de rechterkolom te klikken op nieuwe pagina 1
• door pagina’s aan te maken in de navigatieweergave
4.1
Via icoon nieuwe pagina
Als je een nieuwe pagina hebt gemaakt via het icoon
bijvoorbeeld in Word.
4.1.1
•
•
•
•
1
kun je direct gaan typen, net als
Pagina opslaan
Als je een nieuwe
pagina hebt gemaakt via
de knoppenbalk, moet je
bij het opslaan een naam
aan de pagina geven. Als
je de pagina voor het
eerst opslaat verschijnt
het venster Opslaan als.
Kies een logische
bestandsnaam zonder
spaties (gebruik in plaats
hiervan het laagliggende
streepje _).
De eerste pagina (je
startpagina) moet
default.htm heten
Geef ook de titel van de pagina aan, door op
Titel wijzigen … te klikken. Het venster
Paginatitel instellen verschijnt.
Vul hier de gewenste titel in. Deze titel verschijnt
in de titelbalk van de browser als de pagina wordt
bekeken.
Als de rechterkolom geen optie ‘nieuwe pagina’ staat, kies dan eerst in het menu Bestand Æ Nieuw Æ Pagina of web.
ICT-deskundigheidsbevordering
3
Instituut voor de Lerarenopleiding
Handleiding
4.2
Website maken voor ILO-medewerkers
Vanuit de navigatieweergave
Pagina’s aanmaken vanuit de navigatieweergave 2 is met name geschikt als je al een duidelijk beeld
hebt van hoe je website opgebouwd / gestructureerd moet worden.
Als je een navigatiestructuur hebt gemaakt in de navigatieweergave, kun je een automatische
navigatiebalk laten maken door Frontpage (zie pagina 16 in deze handleiding).
Het aanmaken van nieuwe pagina’s via de navigatieweergave gaat als volgt:
• Klik in de navigatieweergave met de rechter muisknop op de pagina waar je een nieuwe pagina
onder wilt hangen en kies voor Nieuw Æ Pagina. Er komt een pagina bij in de
navigatieweergave met de naam Nieuwe pagina 1 .
• Klik met de rechter muisknop op de nieuwe pagina en kies voor Naam wijzigen. De naam wordt
geselecteerd en je kunt een nieuwe naam typen. Druk op Enter om de naam te gebruiken.
Als je later gebruik gaat maken van de automatische navigatiebalk van FrontPage, zal dit de
naam zijn die in de navigatiebalk de link vormt naar de pagina, gebruik daarom niet teveel
woorden voor de naam, dat past dan niet goed in de navigatiebalk.
• Om de pagina te openen, dubbelklik je erop. Er wordt automatisch in de hoofdmap van je
website een document met de nieuwe naam gemaakt, dat je kunt bewerken.
• Zorg ervoor dat je pagina's, die je aan het bewerken bent, regelmatig opslaat. Bij het opslaan
wordt ook de naam gebruikt die je in de navigatieweergave eraan hebt gegeven.
5
Submappen maken
Om alle webpagina’s, plaatjes en documenten geordend te houden, kun je het beste submappen
aanmaken. Bij het aanmaken van een Frontpage web zullen vaak al submappen worden aangemaakt
voor b.v. de plaatjes (images).
Hoe gebruik je die mappen: zet de webpagina’s zelf in de hoofdmap, plaatjes in de map images en
maak voor downloadbare documenten een submap aan (b.v. documenten).
Een submap maak je als volgt:
• Klik met de rechter muisknop
op de hoofdmap van je
website
• Kies Nieuw Æ Map.
• Typ de naam van de nieuwe
map en druk op Enter .
2
Uitleg over de verschillende weergavemogelijkheden van Frontpage staan beschreven vanaf pagina 20.
ICT-deskundigheidsbevordering
4
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
6
Hyperlinks
6.1
Hyperlink naar een andere webpagina
1. Selecteer een of meerdere woorden, die je wilt laten verwijzen naar een andere pagina.
2. Klik op
in de werkbalk. Als je dit icoontje niet kunt vinden, kies dan Invoegen Æ Hyperlink
via het menu. Het venster Hyperlink invoegen verschijnt.
3. Zoek het bestand / de pagina op waar je naar wilt verwijzen:
• Als dit een bestand binnen het FrontPage-web is, doe je dat door de juiste map en
vervolgens het juiste bestand op te zoeken in de lijst.
• Als een internetpagina is die niet in je eigen website staat, typ dan de juiste URL in het
vakje Adres. Gebruik het volledige adres, dus inclusief http:// Æ b.v. http://www.ilo.uva.nl
4. Klik op OK om de hyperlink te maken.
6.1.1
Link in nieuw browservenster laten openen
Als je wilt, kun je de link in een nieuw browservenster laten openen:
•
•
•
•
Klik na stap 3 van 'Hyperlink invoegen' op de knop
Doelframe.
Het venster Doelframe verschijnt.
Klik op Nieuw venster en klik op OK.
Klik nogmaals op OK om de link te maken
Het voordeel van het openen in een nieuw venster is dat
je eigen website in het oorspronkelijke venster open
blijft. Nadeel kan zijn dat gebruikers de Back-knop van
de browser niet kunnen gebruiken en misschien niet
begrijpen wat er is gebeurd; Er is in dat nieuwe venster
geen 'historie' van bezochte websites
ICT-deskundigheidsbevordering
5
Instituut voor de Lerarenopleiding
Handleiding
6.2
Website maken voor ILO-medewerkers
Hyperlink naar een bestand (zodat het te downloaden is)
Als je wilt dat een bestand te downloaden is vanaf je website, doe dan het volgende:
• kopieer het betreffende bestand naar de map van je website (b.v. naar de submap documenten
die je in het begin hebt aangemaakt)
• klik op de map documenten en druk op F5 . Frontpage kijkt nu opnieuw welke bestanden er in
de hoofdmap en submappen van je website staan.
• maak een hyperlink naar het bestand.
6.2.1
Hoe werkt het downloaden als de website eenmaal is gepubliceerd
Afhankelijk van het soort document dat je op je website hebt staan en de browser die de bezoeker
gebruikt, gebeuren er verschillende dingen als een bezoeker het document opvraagt.
Microsoft Internet Explorer
Een MS Office document (b.v. Word, Excel of PowerPoint)
• Het bestand zal getoond worden binnen de browser. De bezoeker kan dan via het menu ervoor
kiezen om het bestand op te slaan. Een andere optie: met de rechter muisknop op de link klikken
en kiezen voor ‘Doel opslaan als …’.
Een ander type document
• Als bezoekers van je website gewoon op deze link klikken, zal het downloaden van het bestand
starten. Internet Explorer zal vragen waar en onder welke naam de bezoeker het bestand op
zijn/haar computer wil opslaan.
Mozilla en Firefox
• Als bezoekers van je website gewoon op deze link klikken, zal het downloaden van het bestand
starten. Mozilla zal vragen waar en onder welke naam de bezoeker het bestand op zijn/haar
computer wil opslaan.
6.3
Bladwijzers
Bij lange pagina’s is het prettig om snel naar een bepaalde plek op de pagina te kunnen springen.
Zo’n gemarkeerde plek (dat markeren kun je zelf doen), noem je een bladwijzer.
6.3.1
•
•
•
•
•
Bladwijzer maken
Selecteer een kernwoord op de pagina waarnaar je
wilt gaan verwijzen.
Kies Invoegen Æ Bladwijzer. Het venster
Bladwijzer verschijnt.
Typ een naam voor de bladwijzer, bij voorkeur één
woord. Gebruik liever geen spaties, een alternatief
hiervoor is het laagliggende streepje ('underscore').
Klik op OK om de bladwijzer te markeren.
Nu moet je een verwijzing naar de bladwijzer gaan
maken, bijvoorbeeld vanuit een inhoudsopgave aan
het begin van de pagina.
ICT-deskundigheidsbevordering
6
Instituut voor de Lerarenopleiding
Handleiding
6.3.2
•
•
•
•
Website maken voor ILO-medewerkers
Verwijzen naar een bladwijzer
Nu de bladwijzer gemarkeerd is, kun je ernaar verwijzen. Dit is gewoon een hyperlink met extra
instellingen. Om deze link te maken, volg je de stappen 1 t/m 3 van het maken van een
hyperlink (zie eventueel pagina 5), alleen geef je de specifieke locatie binnen een bestand aan:
Klik in het venster Hyperlink invoegen op de knop Bladwijzer.
Selecteer de bladwijzer waarnaar je wilt verwijzen en klik op OK.
Als adres staat nu de bladwijzer aangegeven, met een # ervoor, b.v.: #bladwijzer_1
6.4
Hyperlinks bewerken
Als er iets fout is aan een hyperlink, of je wilt toch minder woorden selecteren als linkwoord, dan
kun je de hyperlink altijd na het invoegen nog bewerken:
● Klik met de rechter muisknop op de hyperlink en kies Eigenschappen van hyperlink ....
● Verander de gewenste gegevens en klik op OK.
7
Invoegen van een afbeelding
Een afbeelding (plaatje of foto) invoegen, gaat bijna net zo als in Word. Bij webpagina's moet je
echter wel rekening houden met de plaats van plaatjes ten opzichte van de tekst. Een mooie opmaak
krijg je met tabellen (staat elders in deze handleiding uitgelegd).
● Kies Invoegen Æ Figuur Æ Uit bestand ... of klik op het icoon uit de werkbalk
● Zoek in het venster Figuur het gewenste plaatje, bijvoorbeeld een plaatje dat je op internet hebt
gevonden en op het bureaublad of in de map Mijn afbeeldingen had opgeslagen.
● Klik op OK. Het plaatje wordt op je pagina gezet.
● Sla de pagina op. Bij het
opslaan verschijnt het venster
Ingesloten bestanden opslaan.
Je ziet een lijstje van alle
plaatjes op je pagina die je van
buiten Frontpage hebt gehaald.
● Klik op Map wijzigen... .
● Dubbelklik in het venster Map
wijzigen op de map images en
klik op OK .
● Klik nog een keer op OK om
de pagina op te slaan.
● Bekijk de pagina in de voorbeeldweergave.
● Klik op Bestand Æ Voorbeeld in browser. Kies in het dialoogvenster bij voorkeur voor
Explorer. Zie je nog een verschil met de pagina in het voorbeeldscherm? Er kan verschil zijn
met de weergave Voorbeeld van Frontpage zelf.
ICT-deskundigheidsbevordering
7
Instituut voor de Lerarenopleiding
Handleiding
8
Opmaak
8.1
Toepassen van een thema
Website maken voor ILO-medewerkers
Frontpage biedt je de mogelijkheid om voor je hele website (of een gedeelte) dezelfde
opmaakstijlen toe te passen. Dit doe je met een zogenaamd thema. Een thema is een samenstelling
van tekststijlen en plaatjes die het uiterlijk van je website bepalen.
Om de thema's goed te laten zien op internet, moeten op de webserver de zogenaamde Frontpage
serverextensies geïnstalleerd zijn. Het gevolg van het ontbreken van Frontpage serverextensies is
dat sommige onderdelen van een thema niet goed worden weergegeven als je je website hebt
gepubliceerd.
Als je eens wilt experimenteren met hoe de meegeleverde thema's eruit zien, sla dan eerst alle
pagina's op die je open hebt staan. Op deze manier kun je, als de veranderingen je niet bevallen, nog
altijd terug naar je origineel. Je kunt natuurlijk ook een nieuwe website maken om in te rommelen.
● Klik op Opmaak Æ
Thema.
Het kan zijn dat de
functie nog moet worden
geïnstalleerd.
● Het venster Thema
verschijnt
● Als Frontpage nog niet
eerder op deze computer
gebruikt was, zijn er nog
geen thema’s
geïnstalleerd.
Klik op meer thema’s
installeren
● Klik op Ja in het venster
dat vraagt of je meer
thema’s wilt installeren.
● Bepaal of je het thema wilt toepassen op alle pagina's of op de geselecteerde pagina's (pagina's
die open staan/die je aan het bewerken bent)
● Als je in het linker witte vak op een thema klikt, verschijnt een voorbeeld van het thema (zie
hieronder).
ICT-deskundigheidsbevordering
8
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
● Heb je een thema gevonden dat je bevalt, klik dan op OK.
● Je krijgt een waarschuwing over het toepassen van het thema. Klik op Ja als je het thema
inderdaad op deze manier wilt toepassen.
● Het thema wordt toegepast op de pagina('s) die je wilde. Je kunt altijd achteraf weer een ander
thema kiezen.
8.2
Opmaakstijlen
In een Frontpage opmaakthema zitten opmaakstijlen. Als je een tekst typt, kun je op simpele wijze
opmaakstijlen toepassen:
• Klik in het stuk tekst waarop je een opmaakstijl wilt toepassen.
• Klik in de menubalk op Opmaakprofiel (kleine pijltje naast ‘Normaal’) en kies de gewenste stijl.
•
Het opmaakprofiel wordt toegepast op de regel waarin de cursor stond (of de selectie die je hebt
gemaakt).
ICT-deskundigheidsbevordering
9
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
Bij een opmaakthema horen diverse
zaken:
• Achtergrondplaatjes voor
navigatieknoppen (die worden
gebruikt in de automatische
navigatiebalk)
• ‘gewone’ opmaakprofielen
(koppen, standaardtekst,
opsommingen, e.d.)
8.3
•
•
Opmaakaanwijzingen en tips
Als je een URL of een e-mailadres intypt, maakt FrontPage er automatisch een hyperlink van.
Misschien vind je dat niet mooi of je hebt een fout getypt, dan lees je op pagina 7 hoe je de
hyperlink kunt veranderen.
In HTML-codering is er een verschil tussen Enter en Shift + Enter. Probeer het maar eens uit:
- Enter Æ Je krijgt een lege regel tussen de alinea's
- Shift + Enter Æ De nieuwe regel sluit direct aan op de vorige alinea.
ICT-deskundigheidsbevordering
10
Instituut voor de Lerarenopleiding
Handleiding
8.4
Website maken voor ILO-medewerkers
Tabel maken
HTML is een dynamische opmaaktaal. De positie van de objecten op het scherm wordt deels door
de browser bepaald. Wanneer je daar enige invloed op wilt uitoefenen maak je gebruik van een
tabel. Een tabel wordt op webpagina's dus een beetje anders gebruikt dan in Word. Als je tekst en
plaatjes combineert, kun je het best een tabel gebruiken als een opmaakraster waarin je de
verschillende onderdelen van de pagina een min of meer vast plekje geeft.
Uiteraard kun je een tabel ook op de gebruikelijke manier gebruiken om teksten overzichtelijk weer
te geven.
•
•
•
•
•
Kies in de menubalk voor Tabel Æ Invoeren
Æ Tabel
Neem de instellingen uit het plaatje hiernaast
over.
Let met name op de Randdikte, die wil je
waarschijnlijk op 0 hebben staan als je de
tabel wilt gebruiken voor het ordenen van
informatie op je pagina.
Klik op OK om de tabel in te voegen.
Nu kun je de tabel gaan vullen.
Als je niet tevreden bent met de afmetingen of
instellingen, kun je altijd naderhand nog rijen en
kolommen toevoegen of verwijderen. Dit doe je
dan met Tabel Æ Invoegen Æ Rijen of
kolommen.
Experimenteer ook eens met randdikte,
celopvulling en de ruimte tussen de cellen.
Deze kun je eenvoudig wijzigen:
• Klik met de rechter muisknop op de tabel
• Kies Tabeleigenschappen.
• Pas de indeling aan en bekijk het resultaat
in de browser.
8.5
Tabel invoegen uit Excel of Word
Je kunt ook een bestaande tabel uit Excel of Word in FrontPage plakken:
• Selecteer en kopieer een tabel in Excel of Word.
• Plak in FrontPage de tabel op de gewenste plek.
• Bekijk het resultaat in een browser.
Ook van zo'n ingevoegde tabel kun je de eigenschappen wijzigen. Dit gaat hetzelfde als met een
tabel die je zelf hebt gemaakt in FrontPage.
ICT-deskundigheidsbevordering
11
Instituut voor de Lerarenopleiding
Handleiding
9
Website maken voor ILO-medewerkers
Hoe ziet je website eruit
Je hebt misschien tijdens het werken al eens de Voorbeeldweergave gebruikt om te kijken hoe je
webpagina eruit ziet. De voorbeeldweergave is een vrij nauwkeurige benadering van hoe een pagina
eruit ziet als hij eenmaal is gepubliceerd, maar niet meer dan dat. Als je echt wilt zien hoe een
pagina eruit komt te zien in een browser (oftewel na publicatie), kies dan voor een Voorbeeld in
browser:
• Klik in Frontpage Bestand Æ Voorbeeld in Browser. Het venster Voorbeeld in browser
verschijnt.
•
•
Selecteer een browser en klik op Voorbeeld.
Zie je nog verschillen met de Voorbeeldweergave van FrontPage zelf?
ICT-deskundigheidsbevordering
12
Instituut voor de Lerarenopleiding
Handleiding
10
Website maken voor ILO-medewerkers
Publiceren van je website
Als je website openbaar mag worden van jezelf, oftewel je bent tevreden over het (voorlopige?)
resultaat, dan is het tijd om je website te gaan publiceren. Je hebt hiervoor nodig: een plekje op een
webserver en een naam en wachtwoord waarmee het is beveiligd, zodat niemand anders er iets kan
neerzetten. Als ILO-medewerker mag je op de ILO-webserver gebruik maken van een beetje
opslagruimte voor je persoonlijke homepage. De informatie daarop moet wel werkgerelateerd zijn.
•
•
•
•
•
•
Zorg dat je je website geopend hebt in FrontPage en je alle pagina's hebt opgeslagen, anders
worden niet de juiste gegevens gepubliceerd.
Klik op het icoontje
(Web
publiceren) in de werkbalk of
kies Bestand Æ Web publiceren
Het venster Doellocatie voor
publicatie verschijnt. Vul hier
het volgende in:
ftp://www.ilo.uva.nl
Klik op OK. Het venster Naam
en wachtwoord vereist
verschijnt.
Vul in bij
Naam: je ILO-gebruikersnaam
gevolgd door @ilo.uva.nl
Wachtwoord: het wachtwoord dat
je ook gebruikt voor inloggen op
je computer.
Klik op OK . Het venster Web
publiceren verschijnt.
Nu gaat het echte publiceren pas beginnen.
Het venster Web publiceren kun je op twee manieren bekijken;
• standaard (zoals het verschijnt): er wordt alleen getoond hoe de bestanden van je website op de
computer staan (bronbestanden)
• uitgebreid: je ziet ook je eigen map op de webserver en welke bestanden daar staan. Om deze
weergave op te vragen klik je op de knop Weergeven > > .
ICT-deskundigheidsbevordering
13
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
Status is ‘Conflict’ ?
In het venster Web publiceren zie je de status van de
bestanden aangegeven. Als de status ‘Conflict’ is, krijg
je dadelijk tijdens het publiceren nog een extra vraag
over dat bestand.
Er kan een conflict zijn, omdat er al een bestand met
dezelfde naam in je map op de webserver aanwezig is.
Bij het aanmaken van een account zetten we er namelijk
een standaardpagina in om te controleren of alles goed
werkt. Deze pagina kun je gerust vervangen door je
zelfgemaakte pagina.
•
•
•
•
Als het publiceren klaar is
verschijnt een bevestigingsvenster.
Klik op Gereed .
Bekijk je website nu via internet; start hiervoor zonodig een browser.
Typ het volgende adres in: www.ilo.uva.nl/homepages/<ILO-inlognaam> (b.v.
www.ilo.uva.nl/homepages/anne-martine.
Als je verder wilt werken aan je website of nog wijzigingen wilt doorvoeren, ga je terug naar
Frontpage.
10.1 Opnieuw publiceren na wijziging pagina’s
Als je iets wilt wijzigen in je gepubliceerde website, dan doe je dat met de bestanden op je eigen
computer (dus niet rechtstreeks op de webserver). Daarna publiceer je je website opnieuw.
Frontpage controleert voor je welke pagina’s gewijzigd zijn en dus opnieuw moeten worden
gepubliceerd.
ICT-deskundigheidsbevordering
14
Instituut voor de Lerarenopleiding
Handleiding
11
Website maken voor ILO-medewerkers
Navigatie
Navigatie op een website is van wezenlijk belang voor het gebruiksgemak. Een goede navigatie
zorgt ervoor dat bezoekers van je website ook kunnen vinden wat ze zoeken en altijd de weg (terug)
kunnen vinden.
Je kunt in FrontPage gebruik maken van een navigatiebalk die automatisch wordt gegenereerd. Alle
pagina's die in de navigatiestructuur direct onder de homepage hangen, komen in deze navigatiebalk
te staan. Deze navigatiebalk kun je plaatsen in een zogenaamde 'gemeenschappelijke rand'. Hoe dit
werkt, staat op pagina 16.
Hieronder staan twee plaatjes:
Het linker is de navigatieweergave van FrontPage, het rechter een voorbeeld van hoe het er in een
browser uitziet.
De
navigatiebalk
De naam die je in de
navigatieweergave ziet, is
dezelfde als die in de
navigatiebalk wordt
gebruikt.
Als je in de navigatieweergave een pagina toevoegt of van naam verandert, zie je dat terug in de
navigatiebalk.
In het linker plaatje hierboven is gekozen voor een vertakking van links naar rechts. Je kunt ook
kiezen voor een vertakking van boven naar beneden:
● Klik met de rechter muisknop op de achtergrond (standaardkleur is lichtblauw) van de
navigatieboom.
● Kies in het verschenen menu voor Draaien om de oriëntatierichting te wijzigen.
Als je veel vertakkingen / pagina's hebt, kun je ook nog in- of uitzoomen:
● Klik met de rechter muisknop op de achtergrond
● Kies voor In-/uitzoomen
ICT-deskundigheidsbevordering
15
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
11.1 Gemeenschappelijke randen
Als je website groeit en het aantal pagina's toeneemt, neemt het belang van goede navigatie toe. Op
veel websites zie je zogenaamde 'navigatiebalken'; een strook aan de boven- of linkerkant van de
website waarin links naar diverse pagina's of delen van de website staan.
Met Frontpage kun je makkelijk een navigatiebalk aan je website toevoegen. Voor het mooiste
effect moet je daarvoor eerst gemeenschappelijke randen instellen:
•
•
•
•
Kies Opmaak Æ Gemeenschappelijke
randen.
Kies voor toepassen op Alle pagina's en
kies waar je de gemeenschappelijke rand
wilt plaatsen (boven of links zijn de meest
gebruikelijke keuzes en de enige
mogelijkheid als je de automatische
navigatieknoppen wilt gebruiken).
Klik op OK .
Er wordt op alle pagina’s een
gemeenschappelijke rand gemaakt.
11.2 Navigatiebalk
Er zijn verschillende mogelijkheden met navigatiebalken in Frontpage. Hieronder wordt de variant
uitgelegd die gebruik maakt van de navigatiestructuur die je in de Navigatieweergave kunt instellen.
• Klik op de gemeenschappelijke rand waarin je de navigatieknoppen wilt plaatsen
• Kies Invoegen Æ Navigatie. Het venster Webcomponent invoegen verschijnt.
•
•
Selecteer in het linker menu ‘Koppelingsbalken’ en in het rechter menu ‘Balk gebaseerd op
navigatiestructuur’.
Klik op Volgende > .
ICT-deskundigheidsbevordering
16
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
•
•
Kies een balktype, b.v. het thema dat je al hebt toegepast op al je pagina’s
Klik op Volgende > .
•
•
•
Kies hoe je de navigatiebalk geordend wilt hebben.
Klik op Voltooien.
Nu kun je de overige eigenschappen van de
navigatiebalk instellen. Je hebt hier
verschillende combinatiemogelijkheden.
Probeer ze gewoon eens uit.
Klik de gewenste opties aan en klik op OK.
•
Als je keuzes je toch niet bevallen, klik dan met
de rechter muisknop op de navigatiebalk (in
Normaal-weergave) en kies voor Eigenschappen
van navigatiebalk. Je komt dan weer in het
venster hiernaast terecht.
ICT-deskundigheidsbevordering
17
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
Het kan voorkomen dat je na het instellen
van gemeenschappelijke randen en een
navigatiebalk een foutmelding krijgt als
je je website wilt publiceren. Frontpage
waarschuwt dat koppelingsbalken of
navigatiebalken een nieuwe indeling
gebruiken die niet wordt ondersteund
door de server. Deze melding kun je
gerust negeren en op Doorgaan klikken.
12
Lichtkrant maken
Niet alle functies van Frontpage werken hetzelfde in verschillende browsers. Er zijn tientallen
browsers in omloop waarvan Explorer en Firefox de bekendste zijn. Een leuke functie die jammer
genoeg voorlopig alleen in Explorer werkt is de lichtkrant:
• Klik op Invoegen Æ Webcomponent
• Klik links in het menu op Dynamische effecten.
• Kies rechts voor Baldakijn
• Klik op Voltooien. Het venster Eigenschappen van lichtkrant verschijnt.
• Typ een tekst in het tekstvak.
• Ga vervolgens naar de knop Opmaakprofiel...
en kies een aardig lettertype en de letterkleur.
• Klik op OK om het opmaakprofiel vast te
leggen.
• Klik op OK om de lichtkrant in te voegen.
• Sla de pagina op.
• Bekijk het resultaat met de
Voorbeeldweergave. Als het je niet bevalt,
schakel dan terug naar Normaal-weergave en
klik met de rechter muisknop op de lichtkrant
en kies voor ‘Eigenschappen van lichtkrant’.
Je kunt nu de eigenschappen wijzigen.
ICT-deskundigheidsbevordering
18
Instituut voor de Lerarenopleiding
Handleiding
13
Website maken voor ILO-medewerkers
Bijlagen
13.1 Het programma Frontpage
Frontpage houdt de hele administratie van je website bij. Als je de naam van een bestand (pagina)
aanpast, zorgt Frontpage ervoor dat de verwijzingen ernaartoe binnen je website worden aangepast.
Daarnaast houdt Frontpage bij welke pagina’s je hebt aangemaakt, bewerkt of verwijderd, zodat bij
publicatie de juiste pagina’s worden gepubliceerd.
Alle bestanden die onderdeel zijn van je website, de html-pagina’s, de plaatjes, de documenten
worden in één map bewaard. Het geheel van alle onderdelen van je website heet in Frontpage een
‘web’. Zo’n web bestaat uit een hoofdmap en een aantal standaard submappen die Frontpage
aanmaakt voor de technische zaken van de website. Ook kun je zelf submappen aanmaken om je
bestanden overzichtelijk op te bergen.
Een goede gewoonte is om plaatjes in een aparte submap op te slaan. Hetzelfde geldt voor
documenten die vanaf jouw website te downloaden zijn, b.v. Word-documenten.
Als je jouw website wilt kopiëren, bijvoorbeeld omdat je er op een andere computer aan wilt
werken, dan moet je de hele map, waarin je web staat, kopiëren. Zou je dat niet doen, dan kunnen
koppelingen verloren gaan of je kunt plaatjes niet vinden.
Het ‘web’ wordt iedere keer als je het opent bijgewerkt. Als je tussentijds met een ander programma
(b.v. de Windows Verkenner) documenten in één van de mappen van het web plaatst, heeft
Frontpage dat niet door. Je kunt die documenten dan ook niet vinden in Frontpage voordat je het
web hebt ververst. Dit verversen doe je met F5 of via de knoppenbalk met .
13.1.1 Weergaven
In Frontpage kun je veel verschillende soorten informatie over je website opvragen. De informatie
is makkelijk te vinden door de zogenaamde ‘Weergaven’. Als je Frontpage voor de eerste keer
opstart, zie je binnen het programma 3 kolommen.
Als je eenmaal een nieuw web hebt aangemaakt (zie voor uitleg ‘Beginnen met een website’ op
pagina 2), ziet de indeling er anders uit.
• Weergaven, met
daarin de
verschillende
manieren waarop je
naar je web kunt
kijken. De
belangrijkste zijn
Pagina, Navigatie en
Hyperlinks.
• Een nieuwe pagina die
je direct kunt
bewerken
• Kolom met een
wisselende functie, de
eerste keer o.a. nieuwe
pagina aanmaken
ICT-deskundigheidsbevordering
19
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
Paginaweergave
Als je in paginaweergave bent, zie je helemaal onderaan een drietal tabbladen: Normaal, HTML en
Voorbeeld.
Normaal
In deze weergave kun je pagina's bewerken, net zoals je dat met een Word-document doet.
FrontPage functioneert dan als een zogenaamde WYSIWYG 3 web-editor. Hier zie je ongeveer hoe
de tekst, afbeeldingen en dergelijke op je pagina eruit komen te zien. Je ziet echter ook de randen
van onzichtbare schermelementen. Links werken niet (normaal), wel door Ctrl ingedrukt te
houden en dan op de link te klikken.
HTML
Wanneer je wilt weten wat er nou eigenlijk aan code gegenereerd wordt door deze HTML-editor,
kijk je via het middelste tabblad naar de HTML code. Als je iets afweet van HTML, kun je in deze
weergave de pagina veranderen om heel precies te programmeren wat je wilt. We gaan hier in deze
handleiding niet op in.
Voorbeeld
De voorbeeldweergave is de dichtste benadering van hoe de pagina er na publicatie op een
webserver uit zal zien. Wanneer je werkelijk wilt zien hoe het wordt, dan moet je gebruik maken
van Bestand Æ Voorbeeld in browser en kies een browser.
Navigatieweergave
Op dit plaatje zie je een voorbeeld van de navigatieweergave van een website. Dit noem je ook wel
de boomstructuur (vanwege de vertakkingen). Als in de navigatieweergave van Frontpage pagina’s
met elkaar verbonden zijn, betekent dit niet automatisch dat ze ook met hyperlinks naar elkaar
verwijzen. Hyperlinks tussen pagina’s kun je controleren in Hyperlinks-weergave.
Navigatie binnen een website is erg belangrijk. Tips hiervoor lees je op pagina 15.
3
'What you see is what you get'
ICT-deskundigheidsbevordering
20
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
Hyperlinks-weergave
In de weergave hyperlinks kun je
zien welke pagina's met elkaar
samenhangen door hyperlinks. Dit
kan een behoorlijke wirwar
worden als je website is gegroeid.
De externe hyperlinks (naar
andere pagina's op internet)
worden buiten beschouwing
gelaten.
In de Rapportenweergave kun je controleren of alle hyperlinks die je hebt ingevoegd, het ook
daadwerkelijk doen.
ICT-deskundigheidsbevordering
21
Instituut voor de Lerarenopleiding
Handleiding
Website maken voor ILO-medewerkers
Mappenweergave
Overzicht van alle mappen binnen je website. Deze weergave is wat overbodig als je de mappenlijst
altijd in beeld hebt (standaard instelling van FrontPage).
Rapportenweergave
Via deze weergave kun je van allerlei rapporten (laten) maken over je website, o.a. hoeveel pagina's
heb je, zijn er langzame (grote) pagina's bij, hoeveel externe / interne hyperlinks je hebt.
Taken
Je kunt taken aanmaken voor jezelf of anderen waarmee je aan een website werkt:
Klik op Bestand Æ Nieuw ► Taak om een nieuwe taak toe te voegen.
13.2 Korte uitleg over HTML
Om met Frontpage webpagina's te maken heb je geen kennis van HTML nodig. Wellicht vind je het
echter interessant om er iets van te weten.
HTML is de 'opmaaktaal' / codering waarin webpagina's (nog steeds) worden geschreven. HTML
staat voor HyperText Markup Language en is opgebouwd uit tags.
Het is vooral zo populair geworden, omdat je hyperlinks (verwijzingen naar andere documenten)
kunt maken. De uitvinding / ontwikkeling hiervan zijn in feite de basis van het World Wide Web.
De meeste tags komen in paren voor (begintag en eindtag).
Het is mogelijk om een html-pagina volledig in een eenvoudige texteditor als Notepad te schrijven,
maar hiervoor heb je veel kennis van de tags nodig.
In Frontpage kun je kiezen voor HTML-weergave, dan zie je de volledige html-code van de pagina.
Meer over de verschillende weergavemogelijkheden van Frontpage lees je op pagina 19.
Voorbeelden van html-tags
<p>
nieuwe alinea beginnen (paragraph)
<br>
nieuwe regel (break)
<table> begin van een tabel
</table> eind van een tabel
<tr>
begin van een rij in een tabel
<td>
begin van een cel van een tabel
<b>
vette tekst
</b>
eind van de vette tekst
Het verschil tussen Enter (<p>) en Shift + Enter (<br>) is een 'erfenis' van hoe typemachines en
oude printers worden aangestuurd. Er is namelijk een verschil tussen Carriage Return (CR = de
'wagen' of printkop weer naar de linker kantlijn brengen) en Carriage Return + Line Feed (LF =
regel opschuiven naar beneden).
ICT-deskundigheidsbevordering
22
Instituut voor de Lerarenopleiding