Persoonlijke homepage maken voor ILOmedewerkers

Transcriptie

1 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

2 Inhoudsopgave 1 Inleiding Stappenplan Beginnen met een website Nieuwe pagina s maken Via icoon nieuwe pagina Vanuit de navigatieweergave Submappen maken Hyperlinks Hyperlink naar een andere webpagina Hyperlink naar een bestand (zodat het te downloaden is) Bladwijzers Hyperlinks bewerken Invoegen van een afbeelding Opmaak Toepassen van een thema Opmaakstijlen Opmaakaanwijzingen en tips Tabel maken Tabel invoegen uit Excel of Word Hoe ziet je website eruit Publiceren van je website Opnieuw publiceren na wijziging pagina s Navigatie Gemeenschappelijke randen Navigatiebalk Lichtkrant maken Bijlagen Het programma Frontpage Korte uitleg over HTML... 22

3 1 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 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 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

4 3 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 H- schijf, 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

5 4 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. 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. 1 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

6 4.2 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

7 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 b.v Klik op OK om de hyperlink te maken 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

8 6.2 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 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 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

9 6.3.2 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

10 8 Opmaak 8.1 Toepassen van een thema 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

11 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

12 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 adres 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

13 8.4 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

14 9 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

15 10 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:// Klik op OK. Het venster Naam en wachtwoord vereist verschijnt. Vul in bij Naam: je ILO-gebruikersnaam gevolgd 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

16 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: (b.v. Als je verder wilt werken aan je website of nog wijzigingen wilt doorvoeren, ga je terug naar Frontpage 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

17 11 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

18 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 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

19 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

20 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

21 13 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 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

22 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 'What you see is what you get' ICT-deskundigheidsbevordering 20 Instituut voor de Lerarenopleiding

23 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

24 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 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