Deze tekst bevat instructies voor het vervaardigen en publiceren van een website met een oudere versie van Frontpage (voor versie 2003). Neem plaats achter uw computer en volg de aanwijzingen. Frontpage is onderdeel van Microsoft Office. We gaan ervan uit dat u dit pakket geïnstalleerd heeft op uw computer. Frontpage start na klikken op het icoon van het programma op het bureaublad of via de startknop van Windows, optie Programma’s en vervolgens Frontpage. Wanneer Frontpage is gestart ziet u het volgende venster verschijnen:

De belangrijkste onderdelen van het venster zijn: 1 de menubalk; 2 de knoppenbalk; 3 de weergavenbalk; 4 het weergavenvenster; 5 de statusbalk. Let op: In het Office-pakket van Microsoft is de menubalk dynamisch. Dat houdt in dat alleen die opties worden getoond, die het laatst gebruikt zijn. Zet dit uit, omdat u anders de opties waarnaar binnen de instructie verwezen wordt niet altijd meteen zult kunnen vinden. Uitzetten gaat als volgt: 1 Kies Extra in de menubalk; 2 Kies Aanpassen;

U ziet nu het volgende venster:

3 Haal indien nodig het vinkje weg voor "Laatst gebruikte opdrachten eerst weergeven in menu’s". U zult nu steeds alle opties in het menu zien. De weergavenbalk is typisch voor Frontpage. U ziet dat er zes mogelijke weergaven zijn. De belangrijkste is voorlopig de paginaweergave. Het weergavenvenster laat de gekozen weergave zien. Als u Frontpage opent, is dat de paginaweergave. Wat aan deze weergave opvalt, zijn de drie tabs onderin. Als u de paginaweergave opent, staat altijd de tab normaal voor. De tab html laat zich het best vergelijken met een “onderwaterweergave”. In deze weergave ziet u behalve de tekst ook de opmaakcodes van de webpagina. Van plaatjes zie u alleen de verwijzing naar de plek waar het plaatje opgeslagen is. De voorbeeldtab geeft de pagina te zien zoals hij op het web te zien zal zijn. Met websjablonen kunt u oefenen in het vervaardigen van uw eigen website. De Wizard begeleidt u dan bij het hele proces. Alle informatie over het bouwen van uw website vindt u bovendien onder Help. Als u later met zogenoemde frames wilt gaan werken kiest u nadat u Frontpage heeft gestart via Bestand de lege pagina Sluiten. Daarna Bestand, Nieuw en dan Pagina. Kies de tab Framespagina’s en oefen met de verschillende frames. Het raamwerk voor een webrapport is overigens met behulp van een frame vervaardigd. Wij raden het werken met frames sterk aan. U snapt dan veel beter hoe alles werkt dan bij het werken met sjablonen.

Tekst invoeren in Frontpage gaat bijna hetzelfde als in Word. In feite is Frontpage ook een WYSISYG (WhatYouSeeIsWhatYouGet)- editor. Wanneer uw tekst langer wordt dan de hoogte van het browservenster, verschijnt automatisch een scrollbar, zodat de bezoeker altijd alle tekst kan lezen. Wel zijn er binnen Frontpage twee eigenaardigheden. Returns/enter: wanneer u de Enter-toets indrukt, slaat Frontpage een regel over. Wilt u dat niet, houd dan de shift-toets ingedrukt terwijl u de Enter-toets indrukt. Inspringfunctie: deze werkt niet zoals in Word. Dit komt omdat HTML geen tabs kent, in waar tekstverwerkers dat wel doen. Wanneer u een stuk tekst wilt laten inspringen, zult u een tabel moeten aanmaken met tenminste twee kolommen, waarvan de eerste de marge met de linker kantlijn vormt en de rechter de tekst bevat. U maakt zo’n tabel, net als in MsWord door in het menu te klikken op tabel en vervolgens te kiezen voor invoegen, tabel…. Verder wijst de wizard u de weg. Waarschijnlijk zult u zo nu en dan een figuur of een plaatje willen plaatsen op de webpagina. Plaatjes invoeren gaat eigenlijk hetzelfde als in Word, met dat verschil, dat de plaatjes wel eerst in het web geïmporteerd moeten worden. Dat doet u alsvolgt (voor het gemak ga ik er vanuit dat u Frontpage geopend hebt en dat de mappenlijst zichtbaar is). 1 Klik Frontpage klein via het knopje met het minteken rechtsboven op de vensterbalk; Frontpage wordt nu als knop zichtbaar op de werkbalk onder in uw beeldscherm; 2 Open “Deze computer” en zoek op de gebruikelijke manier de directory waar de te importeren afbeelding staat; 3 Selecteer de afbeelding door er met de rechtermuisknop op te klikken en kies vervolgens kopiëren in het pop-upmenu;

4 Klik op de Frontpage-knop op de werkbalk onder in uw beeldscherm, zodat Frontpage weer op uw beeldscherm verschijnt; 5 Klik met de rechtermuisknop op de directory “images” en kies plakken in het popup-menu; De afbeelding staat nu in de map “images”. Vervolgens moet u de afbeelding op de webpagina zetten. Dat doet u als volgt: 6 Open de pagina waar de afbeelding op moet komen en zoek de plek waar de afbeelding moet komen te staan; 7 Kies in de menubalk Invoegen en vervolgens Figuur en dan Uit bestand. Het volgende venster verschijnt:

8 Dubbelklik op images; 9 Dubbelklik op de afbeelding van uw keuze. De afbeelding is nu toegevoegd. Tip: u kunt de afbeelding ook vanuit images naar de juiste plek slepen als u de mappenweergave kiest wanneer de juiste pagina geopend is en door vervolgens met de muiscursor op de het afbeeldingbestand te gaan staan, de linker muisknop ingedrukt te houden en de afbeelding naar de juiste plek te slepen. Hyperlink invoegen U kunt twee soorten links invoegen: links binnen het web en links buiten het web. Links binnen het web kunnen verwijzen naar een plek op dezelfde pagina of naar een plek op een andere pagina. Achtereenvolgens behandelen we in deze paragraaf: 1 een link maken naar een specifieke plek binnen dezelfde pagina 2 een link maken naar een andere pagina 3 een link maken naar een specifieke plek op een andere pagina. 4 een link maken naar een ander web

1 Een link naar een bepaalde plek op dezelfde pagina maken Wanneer u in de lopende tekst een link wilt aanmaken naar een andere plek op de pagina, dan moet u eerst de plek markeren waar u naartoe wilt gaan als u op de link klikt. Bijvoorbeeld vanuit een inhoudsopgave bovenaan een webbladzijde:

Dat gaat op de volgende manier: ! Ga naar de plek op de pagina waar u naartoe wilt springen vanaf de link; selecteer de tekst waar naartoe gesprangen moet worden Hier is dat het paragraafkopje: "Topje van de ijsberg"; 2 Kies Invoegen in het menu en daarna Bladwijzer …; Het volgende venster verschijnt:

3 Kies nu een goede naam voor de link, bijvoorbeeld ijsberg (goede namen zijn kort, uniek voor de pagina en bevatten géén spaties) en klik vervolgens op ok. Onder het kopje verschijnt nu een stippellijn, die aangeeft dat er een zogenaamd anker geplaatst is. Het volgende dat u moet doen is de link aanmaken in de inhoudsopgave: 4 Selecteer in de inhoudsopgave de tekst achter Paragraaf 3 en klik op de (hyperlink)knop in het menu. Het venster “Hyperlinks maken” verschijnt:

5 Klik op het pijltje naast Bladwijzer; kies daarna "ijsberg" uit de lijst die dan verschijnt; Bij URL verschijnt nu de volgende tekst: #ijsberg. 6 Klik op ok. Topje van de ijsberg is nu onderstreept en een link naar de kop lager op de pagina. U kunt de werking testen door op de link te klikken terwijl u de [cntr]-toets ingedrukt houdt. U kunt natuurlijk ook de links testen terwijl u de pagina in uw browser bekijkt. U kunt op dezelfde manier onder elke paragraaf een link maken naar de inhoudsopgave. Eerst bovenaan de inhoudsopgave een anker maken (stap 1 tot en met 3, maar dan voor "Inhoud") en vervolgens de interne link naar het anker maken (stap 4 tot en met 6). U kunt een anker zo vaak u wilt gebruiken om naartoe te springen. U kunt dus onderaan elke paragraaf een link naar inhoud maken. 2 Een link naar een andere pagina in het web maken U kunt natuurlijk ook links maken naar een andere pagina in het web. Meestal zult u die pagina's benaderbaar maken via de navigatiebalk, maar er zijn goede redenen te bedenken om in de lopende tekst links te zetten, bijvoorbeeld om naar een bepaalde, vooraf vastgestelde, plek op een andere pagina te gaan. U gaat nu eerst een link naar een andere pagina maken: 1 Selecteer de tekst die link moet worden; 2 Klik op de knop in het menu; Het "Hyperlink maken" venster verschijnt weer 3 Kies uit de lijst met pagina's de juiste pagina; indien nodig opent u eerst de juiste directory. Let op: het venster laat slechts de bestanden en directory’s zien die deel uitmaken van de directory waarin de pagina zich bevindt waar u de link op maakt. U kunt via de -knop in het menu in een directory hoger zoeken. 4 Dubbelklik op de paginanaam; het pad naar de pagina achter URL verschijnt. Let op: binnen een web wordt het pad altijd relatief aangegeven ten opzichte van de pagina waarop de link staat. Een directory hoger wordt dan door ../ aangegeven. de link ../../uitslagen/3ekwartaal.htm verwijst dus naar een bestand in een directory die twee knopen hoger in de directorystructuur van het web zit. 5 Klik op ok. De link is nu gemaakt. U kunt de link weer controleren door erop te klikken terwijl u de [ctrl]-toets ingedrukt houdt. De pagina waarnaar verwezen wordt opent in het weergavenvenster. 3 Een link maken naar een specifieke plek op een andere pagina Hoe maakt u een link naar een specifieke plek op een andere pagina? Het ligt voor de hand dat dit een combinatie is van de stappen in de vorige twee paragrafen. Vandaar dat hier naar de aldaar genoemde stappen wordt verwezen. Aan de slag: 1 Open de pagina waar het anker op moet komen in het weergavenvenster; 2 Maak een anker aan volgens stap 1 tot en met 5 uit de paragraaf "een link naar een bepaalde plek op dezelfde pagina maken" en schrijf de naam van het anker op; 3 Sluit de pagina; 4 Open de pagina waarop de link naar het zojuist gemaakte anker moet komen;

5 Maak een link aan volgens stap 1 tot en met 4 uit de paragraaf "Een link naar een andere pagina in het web"; 6 Typ achter de link die achter URL verschijnt de volgende tekst: #naamanker; 7 Klik op ok. U heeft nu een link aangemaakt naar een specifieke plek op een andere pagina. Testen gaat als altijd, klikken terwijl u de [ctrl]-toets ingedrukt houdt, of in de browser. Een link maken naar een ander web Tot slot leert u een link naar een ander web maken. Wees daar in de lopende tekst zuinig mee, want u nodigt met een link de lezer uit uw web te verlaten om elders te gaan kijken. Wilt u dat voorkomen, zet deze zogenaamde externe links dan uitsluitend op een pagina met nuttige links. Een link naar een ander web maken, gaat eigenlijk precies hetzelfde als een link binnen het web maken, met dat verschil dat u voor een link naar een ander web niet met een relatief pad toe kunt. U zult altijd het hele pad moeten opgeven achter URL in het "hyperlink maken" venster: de opbouw is overigens altijd hetzelfde: http://subdomein.naam.domein voorbeelden: http://www.narrare.com http://www.roeldik.nl http://home.wanadoo.nl http://its.tudelft.nl Tip: u kunt naar de pagina surfen waar u naartoe wilt linken en dan het adres in de adresbalk van de browser kopiëren. Dit adres plakt u vervolgens achter URL in het venster "hyperlink maken" Frontpage heeft standaard een aantal thema's aan boord. Met deze Thema's kunt u uw pagina's verfraaien op een eenvoudige manier. Denk daarbij wel aan de in dit boek genoemde do's en don'ts op opmaakgebied in het hoofdstuk over vormgeving bij webpubliceren, want niet alle thema's leveren een duidelijk leesbaar web op. Een thema kiezen kan in alle weergaven. 1 Kies Opmaak in de menubalk; 2 Kies Thema in het menu; Het volgende venster verschijnt:

--------------------------------------------------------------------------------------- Terzijde: Let op: Wanneer er links geen thema's genoemd worden, of slechts een korte lijst, dan moet/kunt u thema's toevoegen vanaf de installatie-CD van uw Office-pakket: Klik in het menu Opmaak op Thema's; Klik in de lijst op Meer thema’s installeren; Klik ter bevestiging op Ja. --------------------------------------------------------------------------------------- 3 Wanneer u een thema selecteert, ziet u rechts een voorbeeld van dat thema, zodat u kunt zien hoe uw pagina's er met zo'n thema uit komen te zien. Klik op het thema van uw keuze. 4 Klik op ok. Uw pagina's zijn nu volgens het gekozen thema opgemaakt. Wanneer u uw keuze wilt veranderen, herhaalt u de stappen hierboven. U kunt op die manier ook uw keuze voor een thema ongedaan maken, door (Geen thema) te kiezen. Bestandsnamen wijzigen Wanneer u de naam van een bestand wilt wijzigen, bijvoorbeeld die van “hoofdstuk_1.html”, dan moet u dat in frontpage doen. Dat moet, omdat frontpage dan alle hyperlinks naar die pagina die in het web aanwezig zijn ook wijzigt en dat is weer nodig om de pagina’s te kunnen blijven benaderen via die hyperlinks. U doet dat als volgt: 1 Sluit alle pagina’s die in Frontpage geopend zijn; 2 Klik met de rechter muisknop op het bestand waarvan u de naam wilt wijzigen; 3 Kies naam wijzigen in het pop-upmenu; 4 Wijzig de naam, vergeet daarbij niet de naam weer op “.html” te laten eindigen.

Het volgende venstertje verschijnt:

5 Klik op Ja. Frontpage past de links aan. Namen van hyperlinks wijzigen In de navigatie zult u de namen van de links naar de hoofdstukken willen aanpassen aan uw tekst. U kunt dat het veiligst en gemakkelijkst doen in de HTML-code zelf. Dat gaat zo: 1 Open het bestand “navigatie.html”; 2 Klik op de [html]-tab U ziet nu de HTML-code op de pagina:

3 Vervang nu de tekst “typ hier de titel van hoofdstuk 1” door uw titel 4 Ga terug naar het tabblad [normaal]. U ziet nu de nieuwe naam staan:

3.3.6 Een pagina toevoegen Een pagina toevoegen gaat eenvoudig in Frontpage. Bedenk wel dat een web misschien wel op een gewonen directory lijkt, maar dat een web dat niet is. Het is een directory waarbinnen de bestanden een onderlinge samenhang vertonen die u wel mag wijzigen maar niet mag vernietigen, omdat dan de links in uw web niet meer werken. 1 Houdt de [Ctrl]-toets ingedrukt en typ een “n” De nieuwe pagina verschijnt.

2 Sla de nieuwe pagina op en geef hem een goede naam. (Een goede naam is een naam zonder spaties die naar de inhoud verwijst). Nu wilt u natuurlijk dat de nieuwe pagina in de navigatie van het web wordt opgenomen: 3 Open het bestand “navigatie.html”; zoek de plek waar u de link naar de nieuwe pagina wilt plaatsen; Houdt de [shift]-toets ingedrukt en druk op de [enter]-toets; maak de link als eerder beschreven. U heeft nu de pagina toegevoegd en in de navigatie gezet. Testen gaat als altijd. 3.3.7 Een pagina verwijderen Het kan natuurlijk ook voorkomen dat u een pagina uit het web wilt verwijderen. Bedenk ook hier weer dat een web geen gewone directory is. Verwijderen doet u alsvolgt. 1 Klik met de rechtermuisknop op het bestand dat u wilt verwijderen; 2 Kies verwijderen in het pop-upmenu Het volgende venstertje verschijnt:

3 Klik op ja; 4 Open het bestand “navigatie.html”; verwijder de link naar de pagina die u uit uw web verwijderd hebt. Als uw web af is en u heeft het web getest op de afwezigheid van foute links, dan wordt het tijd om uw web te publiceren. U kunt uw web natuurlijk op meer manieren verspreiden. U kunt het naar een diskette of een CD-ROM kopiëren en het zo verspreiden binnen een beperkte groep. Binnen een organisatie kunt u het web wellicht via een intranet verspreiden en tenslotte is er het wereldwijdeweb. In het eerste geval kan uw web alleen binnen de organisatie bekeken worden, hetgeen van belang kan zijn bij bijvoorbeeld vertrouwelijke gegevens. In het tweede geval komt uw web wereldwijd beschikbaar. U moet dan wel ruimte hebben bij een Internet Service Provider. U vindt een lijst met weblinks naar providers op CD-ROM. In beide gevallen zult u uw web volgens de juiste procedure moeten publiceren. Bij Webs spreken we dan van uploaden. Om te kunnen uploaden zult u in bijna alle gevallen een zogenaamd FTP-programma nodig hebben. De meeste providers hebben namelijk niet de bestanden op de server staan die noodzakelijk zijn om met frontpage te kunnen publiceren. FTP-programma’s zijn vaak gratis van het WWW te halen, bijvoorbeeld bij http://www.tucows.com. In deze instructie maken we gebruik van WS_FTP95 LE, een programma dat voor niet commercieel gebruik gratis is. Een ftp-sessie zet u als volgt op: 1 Pak de inlog en ftp-gegevens, die u van uw provider heeft ontvangen; 2 Start WS_FTP95 LE; wanneer u WS_FTP95 LE opent, ziet u het volgende venster:

Links in het venster staat de indeling van uw eigen computer, rechts komt de indeling van uw serverruimte te staan wanneer u verbinding heb gemaakt. 3 Klik op Connect; Nu verschijnt het inlogvenster:

4 Vul de gegevens in die u van uw provider gekregen heeft;

Tip: op het tabblad Startup kunt u aangeven in welke directory het FTP-programma standaard moet opstarten. U kunt daar voor de lokale directory de directory invullen waar uw web staat. 5 Klik op OK; Het FTP-programma gaat nu een verbinding maken met uw directory bij uw provider. 6 Selecteer aan de lokale kant (local system) het web op dat u wilt publiceren; klik op de pijl die in de richting wijst van de "remote site". Uw web wordt nu ge-upload naar uw serverruimte bij uw provider en is daarmee gepubliceerd.