Reader 43. Workshop. Mediatheek Tilburg Moller

Transcriptie

1 Reader 43 Workshop Kennismaken met websites FRONTPAGE 2003 Mediatheek Tilburg Moller

2 2

3 Inleiding Wat gaan we doen? Onderwerp Inleiding De opdracht Infobronnen Contact evaluatie Ontwerp Storyboard. 7 - Evaluatieformulier ontwerp website Vooraf Het belang van een eigen Map aanmaken De verschillen tussen een Webpagina en een Website FrontPage; een website maken Velden en functies Een eerste website maken Werken met lagen Tekst invoeren Kleurgebruik De website testen De weergave Voorbeeld Testen in de browser Lijnen invoegen Liniaal en raster instellen Pagina s en websites sluiten en weer openen Pagina sluiten en openen Pagina verwijderen Website sluiten en openen Website verwijderen Een nieuwe pagina aan de website toevoegen Bestanden In Frontpage invoegen en importeren Wordbestand invoegen als HTML Nieuw bestand importeren Navigatiestructuur en navigatiebalken instellen Een navigatiestructuur instellen Een navigatiebalk toevoegen Tekst navigatiebalk opmaken Hyperlinks (koppelingen) aanbrengen Hyperlinks aanbrengen binnen je eigen website Hyperlink verwijderen Hyperlinks aanbrengen buiten je eigen website Hyperlink aanbrengen naar jouw adres 28 4 Afbeeldingen gebruiken in Frontpage Grafische bestandsformaten Gif Jpeg Afbeeldingen zoeken, opslaan en invoegen op een webpagina Afbeeldingen zoeken, opslaan en invoegen vanaf Internet Afbeeldingen bewerken via de werkbalk Afbeeldingen Afbeeldingen bewerken via het dialoogvenster Eigenschappen van de afbeelding Afbeeldingen zoeken en invoegen met de Microsoft Mediagalerie 34 3

4 EXTRA 5 Video- en audiobestanden invoegen Invoegen van Internetfilmpjes Hyperlink invoegen in Frontpage (naar een filmpje) Een eigengemaakt videofilmpje invoegen Audiofragment invoegen Publiceren Algemene tips voor het schrijven op het web 40 8 Websites bruikbaar bij de lay out van Frontpage Evaluatieformulier eindopdracht. 44 4

5 LET OP: Aangezien deze reader in het Nederlands is opgesteld is het wel handig om, voordat je begint met de workshop, de taal van de computer op Nederlands te zetten. Dit voorkomt verwarring met het specifieke Frontpage-taalgebruik. Je kunt dit doen via : Start Configuratiescherm Datum, tijd, taal- en landinstellingen Landinstellingen Landinstellingen Nederlands Inleiding Microsoft Frontpage helpt je jouw eigen plekje (een website) op het internet te creëren. Dit kan in de vorm van een enkele eenvoudige pagina met een koppeling naar een adres of de vermelding van een telefoonnummer, of via gigantische sites van bijvoorbeeld handelsondernemingen. Ergens daartussen beweeg jij (als student die deze workshop komt volgen) je waarschijnlijk. Doel: De student maakt kennis met de belangrijkste elementen van een website. De student is in staat een webpagina met teksten, afbeeldingen en links te maken in Frontpage. De student is in staat een eenvoudige website te maken in Frontpage. Criteria voor het maken van de website Inhoud: een afgeronde les (informatie en oefenmateriaal) over een didactisch onderwerp Lay-out tenminste 4 pagina s, inclusief de start (home)pagina de pagina s hebben een duidelijke titel die verwijst naar de inhoud van de pagina s fraaie, duidelijke lay-out: bv. achtergrondkleur duidelijke structuur gericht op de doelgroep meerdere plaatjes/ eventueel video en audio links naar URL met relevante informatie buiten de eigen site verwijzing (link) naar adres 1 Wat gaan we doen? De webpagina die je gaat maken bestaat uit een aantal verplichte basisonderdelen: Onderwerp bepalen Inleiding Opdracht Infobronnen Contact / Evaluatie 1.1 Onderwerp Het maken van je website begint natuurlijk met het kiezen van een onderwerp. Ga bij jezelf (of curriculum) na welk onderwerp je voor de leerlingen zou kunnen kiezen. Je kunt natuurlijk aansluiten bij de lesstof of eventueel de website als alternatief gebruiken voor het traditionele werkstukken maken. 5

6 1.2 Inleiding (eerste webpagina) - Waar gaat het over? - De leerlingen te laten oriënteren op wat hem te wachten staat 1.3 De Opdracht (tweede webpagina) Deze moet interesse opwekken bij de leerlingen en kan bijv. bestaan uit: Het maken van een samenvatting van een tekst of gedicht het maken van een grammaticaopdracht een inhoudelijke excursieopdracht etc. Beschrijf hoe de leerling zijn taak moet aanpakken. Het is heel belangrijk om de leerling precies te vertellen hoe en wat hij moet doen 1.4 (Info)bronnen (derde webpagina) Bruikbare websites met achtergrondmateriaal, De links zorgen ervoor dat: * De leerlingen alle informatie kunnen vinden die ze nodig hebben en * De websites ook leesbaar zijn voor de doelgroep. * Er minstens twee à drie bruikbare links gemaakt worden. Bij voorkeur geen verwijzingen naar zoekpagina's en/of zogenoemde startpagina's. 1.5 Contact/Evaluatie (vierde webpagina) Bij de afsluiting kan worden opgesomd wat de leerling bereikt of geleerd heeft als hij de opdracht goed heeft uitgevoerd. Het kan gaan om opgedane feitenkennis, maar het kan ook gaan over bepaalde soorten samenwerkingsactiviteiten, of manieren van presenteren enz. Er wordt vermeld bij wie ze terecht kunnen voor verdere vragen/informatie (contact) d.m.v. een adres 1.6 Ontwerp Je gaat het nu een ontwerp maken voor jouw website aan de hand van het storyboard en aan de hand van de volgende vereisten; De website bestaat uit minimaal 4 pagina s De website bevat informatieve teksten, gericht op de onderbouw In de website zijn minimaal 2 (opgemaakte) afbeeldingen ingevoegd De website bevat een pagina met relevante url s buiten de eigen site De website bevat een hyperlink naar jouw adres In de website is een goed werkende navigatiebalk aangebracht De website is volgens een duidelijke structuur/lay-out (lagen) opgemaakt De website moet voor bezoekers via de browser goed te bekijken zijn Een door jou in te vullen matrix van het storyboard vind je op de volgende bladzijde. Bekijk ook het beoordelingsformulier voor het ontwerp op bladzijde 7 om te zien wat er allemaal in het storyboard beschreven moet worden. Laat je storyboard en het ontwerp goedkeuren door de workshopbegeleider. 6

7 Storyboard Onderwerp Inleiding Opdracht Infobronnen Contact Evaluatie 7

8 Evaluatie ontwerp Frontpage Onderwerp: Worden er minimaal 4 pagina s gebruikt in de site? Bevat de website informatieve teksten gericht op de onderbouw? Wordt er gebruik gemaakt van meerdere (opgemaakte) afbeeldingen? Bevat de website een pagina met relevante url s buiten de eigen site? Wordt er een hyperlink aangemaakt naar jouw adres? Wordt de website voorzien van een navigatiebalk? Wordt er een duidelijke structuur/ layout (lagen) gericht op leerlingen gehanteerd? Zorg ervoor dat de website goed werkt als je deze via de browser gaat bekijken Ja / Nee Ja / Nee Ja / Nee Ja / Nee Ja / Nee Ja / Nee Ja / Nee Ja / Nee Alle 8 de vereisten moeten met een JA beoordeeld zijn Opmerkingen/verbeteringen: AKKOORD: Ja / Nee 8

9 2 Vooraf LET OP: Aangezien deze reader in het Nederlands is opgesteld is het wel handig om, voordat je begint met de workshop, de taal van de computer op Nederlands te zetten. Dit voorkomt verwarring met het specifieke Frontpage-taalgebruik. Je kunt dit doen via : Start Configuratiescherm Datum, tijd, taal- en landinstellingen Landinstellingen Landinstellingen Nederlands 2.1 Het belang van een eigen Map aanmaken. Als je met een website begint is het verstandig om eerste een nieuw web aan te maken. Dat betekent dat je in FrontPage aangeeft dat je een nieuwe website gaat maken en waar (in welke map) de bestanden van de website op je computer komen te staan. Frontpage maakt dan zelf de map aan die het programma nodig heeft voor het opbouwen en het beheer van een website. 2.2 De verschillen tussen een Webpagina en een Website. Een webpagina is een enkel document binnen een website. Normaliter bestaat een website uit meerdere webpagina's die aan elkaar verbonden zijn. Door middel van navigatie hulpen zoals hyperlinks, knoppen en een menustructuur kan men van de ene naar de andere webpagina navigeren. Het geheel van verschillende webpagina's, samen met navigatie hulpen en een design, is een website. 9

10 3 FrontPage; een website maken Klik op Start > Alle programma s > Microsoft Office > Microsoft Office FrontPage Vaak kun je Frontpage ook opstarten via Start > Icoontje Microsoft Office FrontPage. Frontpage start op (kan eventjes duren) met een lege pagina en in de rechterkant van het scherm een taakvenster; 3.1 Velden en functies Kies, wanneer Frontpage niet automatisch een nieuwe (lege) pagina opent voor; Bestand > Nieuw > (en vervolgens in het taakvenster in het rechtergedeelte van je beeldscherm voor) Lege pagina. Kies vervolgens weer voor Bestand > Nieuw om ook het taakvenster in beeld te krijgen. We lopen aan de hand van onderstaand figuur even de belangrijkste velden en functies na; Titelbalk Menubalk Werkbalken Help Taakvenster Snelle labelkiezer (Pagina)tab -bladen Weergaveselectie Menubalk Wanneer je Frontpage de eerste keer start zie je alleen beknopte menu s. Om Frontpage zo in te stellen dat je altijd de volledige menu s te zien krijgt kies je in de menubalk voor Extra > Aanpassen > (tabblad) Opties > en vink zonodig de optie Altijd volledige menu s weergeven aan > Sluiten Werkbalken 10

11 De standaardwerkbalken zijn voldoende om deze workshop te kunnen volgen. Wil je meer werkbalken openen/sluiten dan klik je met de rechtermuisknop op een werkbalk zodat je desbetreffende werkbalk kunt openen of sluiten. Snelle labelkiezer Via dit label kun je informatie opvragen over de HTML code die Frontpage gebruikt om de webpagina s te maken. Wij gebruiken dat verder niet. (Pagina)tabbladen Door op de naam van een paginatabblad te klikken wordt de desbetreffende pagina geopend en kun je hem bewerken. Weergaveselectie In Frontpage kun je op verschillende manieren naar jouw web kijken. Via de weergavebalk kun je van weergave wisselen door op de overeenkomstige weergaveknop te klikken. Het gebruik van de verschillende weergave s wordt verderop in de reader nog uitgelegd. 3.2 Een eerste website maken Je gaat nu aan de hand van je eigen (door een workshopmedewerker goedgekeurd) ontwerp stapje voor stapje een eigen website maken. Het web dat je gaat maken bestaat dus uit minimaal 4 pagina s; een homepage en 3 andere pagina s; Kijk of het taakvenster in het rechtergedeelte van het beeldscherm geopend is. Is dit niet geopend dan kies in de menubalk voor Bestand > Nieuw. In het rechtergedeelte van het beeldscherm opent Frontpage dan het taakvenster. Kies in het taakvenster voor Meer websitesjablonen. Frontpage kent een aantal voorgedefinieerde webstructuren oftewel sjablonen voor een hele website. In een sjabloon worden standaard opmaakkenmerken als briefhoofd, lettertype, logo e.d. vastgelegd. Wanneer je in Frontpage voor een bepaald websitesjabloon kiest, worden de benodigde pagina s, formulieren en afbeeldingen automatisch voor je aangemaakt en hoef je deze alleen nog maar in te vullen met je eigen teksten, afbeelding e.d. Wij gaan in deze workshop werken met de meest eenvoudige sjabloon zonder verdere opmaakkenmerken (zoals een lege pagina in Word). Selecteer (klik één keer op) de optie Website met één pagina. LET OP; klik nog niet op OK, je moet eerst de juiste naam en locatie voor het web opgeven. 11

12 Tekstvak Locatie Bladeren Klik (om in het tekstvak Locatie het goede adres te kunnen zetten) op Bladeren en open (klik op) je M-schijf (schijf met jouw PCN-nummer ervoor). Je gaat nu eerst een nieuwe map aanmaken waar je al je bestanden voor deze website in op kunt slaan; Klik op het icoontje Nieuwe map maken Nieuwe map maken en noem de map Workshop Frontpage en klik op OK en vervolgens op Openen Het adres van deze map wordt nu overgenomen in het tekstvak Locatie. Klik vervolgens op OK en Frontpage gaat een nieuwe website met als naam Workshop Frontpage voor je aanmaken. Dit kan even duren. Je ziet nu dat Frontpage in de mappenlijst al de structuur van de zojuist gemaakte site laat zien. De index.htm is de (nu nog lege) homepage van de website en de mappen private en images heeft Frontpage voor je aangemaakt zodat je daar bestanden in op kunt slaan die je voor deze website wilt gaan gebruiken. Je hebt nu dus een website aangemaakt. Je gaat de pagina( s)van deze website aan de hand van jouw ontwerp vullen met gegevens; Dubbelklik op de pagina index.htm (de homepage of startpagina). De lege indexpagina wordt geopend Werken met lagen We maken in deze workshop gebruik van het vormgeven met Lagen. Dit zijn krachtige opmaakhulpmiddelen voor websites en hiermee kun je gemakkelijk jouw website op allerlei manieren vorm gaan geven; Klik in de werkbalk op de knop Laag invoeren. 12 Laag invoeren

13 Zoals je ziet heeft Frontpage op de lege indexpagina (homepagina) een standaardlaag met de naam Laag 1 in het document geplaatst. Om deze laag te kunnen selecteren en te vergroten/verkleinen, klik op een lijn van deze laag. Sleep de laag (ga op een van de vierkanten formaatgrepen staan zodat de muispijl verandert in een dubbele pijl) tot een breed kopgebied. Als je de laag wilt verplaatsen ga je met de muisaanwijzer over de lijn totdat deze verandert in een een kruispijltje en sleep de laag dan naar de gewenste plaats. Voeg zo nog zoveel nieuwe lagen toe en versleep deze zodat de lay-out van de hompage er uitziet zoals in jouw ontwerp (zie een van de vele mogelijkheden als voorbeeld hieronder) Tekst invoeren Je kunt tekst invoeren door in een laag te klikken en vervolgens gewoon het toetsenbord en de tekstwerkbalk te gebruiken. Klik in de titellaag en voeg de titel toe. Zorg dat de gewone lettergrootte minimaal 4 (14pt) is, voor een titel gebruik je een groter lettertype; minimaal 7 (36pt). Bedenk ook of je bijvoorbeeld de titel wilt centreren op de pagina of niet, welk lettertype je wilt gebruiken enz. Voer nu de tekst van de inleiding in, denk aan de tips die gegeven zijn voor het schrijven op het Web (blz.40). Wanneer je dmv Enter naar de volgende regel wilt springen, voegt Frontpage automatisch een witruimte (witregel) toe. Wil je geen extra witregel, dan ga naar de volgende regel d.m.v. Shift+Enter Bedenk ook of het zinvol is om gebruik te maken van de opsommingstekens. Wanneer je tevreden bent met de ingevoerde tekst en de lay-out ga je deze pagina opslaan; Klik in de werkbalk op het blauwe icoontje Opslaan.Je hoeft in het geval van het opslaan van de homepage geen bestandsnaam op te geven omdat deze homepage al een bestandsnaam heeft; index.htm Kleurgebruik Je kunt de pagina verder gaan opmaken door tekst- en achtergrondkleur in te voegen; Klik met de rechtermuisknop op de pagina en kies voor Eigenschappen van pagina. 13

14 In het nu geopende dialoogvenster ga je zo dadelijk de titel van de pagina invoeren. LET OP: de titel van een webpagina is iets anders dan de bestandsnaam van een webpagina. De bestandsnaam is de naam waaronder de pagina op schijf is opgeslagen. In dit geval van de homepage is dat index.htm. De titel van de pagina (die je nu gaat invoeren) is de tekst die in de blauwe titelbalk van de browser (als je op internet aan het zoeken bent) getoond wordt wanneer de pagina door een bezoeker wordt opgevraagd. Het is daarom belangrijk om voor elke nieuwe pagina als eerste een begrijpelijke titel te kiezen. In dit voorbeeld geef je de pagina een duidelijk herkenbare naam en verderop in deze workshop laten we zien hoe je dit dan op Internet te zien krijgt. NOOT; verderop in de reader (hfdst. 3.6) laten we zien hoe je de titel van een pagina kunt invoeren/wijzigen, wanneer je desbetreffende pagina gaat opslaan. Bedenk nu zelf een toepasselijke titel voor jouw homepage en voer die in het dialoogvenster bij het tekstvak Titel in. Klik nu in hetzelfde dialoogvenster op het tabblad Opmaak om bijvoorbeeld de kleuren van de achtergrond, de tekst en de hyperlinks aan te kunnen passen; Sectie Kleuren > Achtergrond Sectielijst Tekst Standaard staan alle kleuren op automatisch, maar je gaat dit nu zelf aanpassen; Open in de sectie Kleuren de selectielijst Achtergrond en kies de kleur naar jouw keuze. Bij de optie Meer kleuren kun je binnen een uitgebreid kleurenpalet een kleur kiezen. Open nu de selectielijst Tekst en kies de tekstkleur die je wilt gaan gebruiken. Stel zo ook de kleur voor de Hyperlink en de Bezochte hyperlink in. Selecteer nu in dit dialoogvenster het tabblad Geavanceerd en vink hier de optie Aanwijseffecten van hyperlinks activeren aan. Met deze optie verandert een hyperlink van kleur als een bezoeker er met de muis overheen gaat. 14

15 Aanwijseffecten. Klik nu op OK om de ingevoerde kleurveranderingen door te voeren. Je ziet nu de pagina zoals jij hem opgemaakt hebt in Frontpage. Alleen de kleurveranderingen van de hyperlinks zijn nog niet doorgevoerd omdat je zelf nog geen hyperlinks aangemaakt hebt. Dit gaan we verderop in de workshop nog doen. 3.3 De website testen Je gaat later nog meerdere pagina s aanmaken en hyperlinks, plaatjes, en evt. video s en geluiden invoegen, maar we gaan nu eerst even kijken hoe jouw homepage, nu gedeeltelijk opgemaakt, er uit ziet in de browser. Je kunt de lay-out en de werking van de pagina( s) op 2 verschillende manieren testen; Via de weergave Voorbeeld De pagina testen in de browser We leggen alle twee de mogelijkheden uit, maar geven zelf de voorkeur om via de browser steeds de pagina s te bekijken en uit te testen. Dit, omdat je op deze manier meteen kunt zien hoe de pagina er in de gebruikte browser uit zal gaan zien. Je hebt nml. meerdere browsers die op verschillende manieren werken. De ene browser zal een opmaak of afbeelding e.d. wel goed laten zien, de andere zal hem vertekend laten zien. Daarnaast kan Frontpage, wanneer je meer geavanceerde opties aan de pagina s gaat toevoegen, deze niet meer correct tonen via de weergave Voorbeeld De weergave Voorbeeld De weergave Voorbeeld is wel goed geschikt voor het beoordelen van kleine wijzigingen in de opmaak of de kleurstellingen; Selecteer onder in het beeldscherm de weergave Voorbeeld Weergave Voorbeeld Je ziet nu jouw homepage zoals jij hem opgemaakt hebt. Om weer terug te keren naar het ontwerpen van de pagina s kies je onderin het beeldscherm weer voor de weergave Ontwerpen Testen in de browser Al eerder hebben we uitgelegd waarom je bij het bekijken van de pagina s je het beste kunt kiezen voor het bekijken in de browser; Klik in de werkbalk op het icoontje Voorbeeld in Microsoft Internet Explorer

16 Icoontje Voorbeeld in Microsoft.. Frontpage komt nu hoogstwaarschijnlijk met de melding dat je jouw wijzigingen nog niet hebt opgeslagen en met de vraag of je ze nu wel op wilt slaan en de pagina wilt bekijken. Kies hier voor Ja. Frontpage vraagt niet naar een naam voor de pagina, omdat deze steeds weer als index.htm (homepagina) zal worden opgeslagen. De homepagina wordt nu in Internet geopend en je krijgt nu dus te zien hoe straks jouw website er op Internet uit zal komen te zien. Minimaliseer Internet (- teken, helemaal rechtsboven in het beeldscherm Frontpage verder te kunnen werken. ) om in Noot; je kunt bij de sectielijst van het icoontje Voorbeeld in Microsoft. kiezen voor in welke versie van Internet je de webpagina wilt openen. We gaan daar verder nu niet op in. 3.4 Lijnen invoegen Je hebt al met het aanpassen van de tekst en kleuren gewerkt, nu gaan we kijken hoe je de pagina s verder kunt opmaken. Een eenvoudige maar tevens ook duidelijke en attractieve manier om jouw pagina s beter leesbaar te maken, is door horizontale lijnen in te voegen tussen de tekstalinea s. Lijnen zorgen voor een rustpunt in de tekst en breken het paginabeeld een beetje. Stel dat je op de homepage tussen de titel en de tekst van de inleiding een lijn wilt invoegen, dan ga je als volgt te werk; Zet in de titellaag de cursor op de plaats waar de lijn moet komen; druk (eventueel) eerst op Enter om een witregel toe te voegen. Wanneer je op Enter gedrukt hebt om een witregel toe te voegen zodat je daar een lijn in kunt voegen, zal waarschijnlijk de laag waarin je de lijn wilt in gaan voegen ook groter worden en de andere lagen eventueel overlappen. Gebeurt dit, dan kun je de lagen weer aanpassen door op de lijn van desbetreffende laag te klikken en de laag te verkleinen/vergroten of te verplaatsen (zie hoofdstuk 3.2.1) Kies Invoegen > Horizontale lijn Op de pagina verschijnt nu een standaardlijn: grijs, 2 pixels (beeldpunten) hoog en hij beslaat de breedte van de laag van links naar rechts. Sla de pagina op (blauw opslaanicoontje) en kijk via Internet (dat als het goed is nog open staat links onderin het beeldscherm naast de startbalk) hoe de lijn er nu uitziet; klik in de Internetmenubalk op het Verversenicoontje opgeslagen wijzigingen door te laten voeren. om de Je ziet nu dat de lijn waarschijnlijk niet over de gehele breedte van de pagina beeldvullend is (van links naar rechts). Je gaat de lijn o.a. daarom nu verder opmaken; Minimaliseer Internet en Dubbelklik in Frontpage op de zojuist door jou ingevoegde lijn Het volgende dialoogvenster wordt geopend 16

17 Percentage van de laag Pixels Je gaat nu eerst de lengte van de lijn aanpassen. Je kunt dit op 2 manieren doen; - via het aanpassen aan de breedte van de laag (venster) waarin de lijn geplaatst is (makkelijk omdat de lijn zich automatisch aanpast wanneer je de laag verbreedt of versmalt) - via het aanpassen van de pixels (kun je de lijn breder maken dan de laag waarin hij staat) Als je voor de optie kiest waarbij je lijn aanpast aan de laag, pas je het percentage aan van hoe breed de lijn moet zijn ten opzichte van de laag (venster) waarin de lijn geplaatst is; Vink de optie Percentage van venster aan Nu kun je bij de optie Breedte het percentage aanpassen en verder de hoogte van de lijn instellen, kiezen hoe je de lijn wilt uitlijnen (links, centreren of rechts) en welke kleur de lijn moet hebben. Probeer dit even uit. Wanneer je voor de optie Pixels kiest, dan kun je de lijn zo breed maken als je zelf wilt (beeldvullend dus); Vink de optie Pixels aan en zet de Breedte op 980, de hoogte op bijvoorbeeld 5, kies een kleur voor de lijn en zet de uitlijning op Centreren. Sla de pagina op en bekijk hem nu weer via Internet. Probeer zo wat opties uit en kijk wat je het mooiste en duidelijkste vindt en sla daarna de pagina op Liniaal en raster instellen Om elementen op pagina s sneller en exact te kunnen positioneren kun je de liniaal en het raster als hulpmiddel inschakelen; Kies Beeld > Liniaal en raster > Liniaal weergeven (er verschijnt een liniaal boven en rechts van de pagina) Kies Beeld > Liniaal en raster > Raster weergeven (er verschijnt een raster over de pagina) Kijk zelf of je het handig vindt om van deze optie gebruik te maken. Om de liniaal en het raster weer uit te zetten; Kies Beeld > Liniaal en raster > en vink de opties Liniaal en Raster uit 3.5 Pagina s en websites sluiten en weer openen Frontpage werkt sitegeoriënteerd. Dat betekent dat elk geopend Frontpagevenster één website bevat die vervolgens weer uit verschillende pagina s kan bestaan Pagina sluiten en openen Wil je alleen de pagina sluiten waarop je op dat moment aan het werk bent dan klik je met de rechtermuisknop op het tabblad van de pagina (in dit geval index.htm) en kies voor sluiten. Je ziet dat je op deze manier (rechtermuisknop 17

18 op tabblad) ook de pagina kunt opslaan i.p.v. het blauwe opslaanicoontje te gebruiken. Om deze pagina weer te openen dubbelklik je in de mappenlijst (linkerkant beeldscherm) op de pagina die je wilt openen (index.htm) Pagina verwijderen Verder op in de workshop ga je pagina s verwijderen. Hier wordt alvast uitgelegd hoe je dat kunt doen, maar verwijder de zojuist door jou gemaakte pagina nu NIET Om een pagina te kunnen verwijderen klik je in de mappenlijst (linkerkant beeldscherm) met de rechtermuisknop op de pagina die je wilt verwijderen en kies voor Verwijderen > Ja Website sluiten en openen Wil je de gehele website afsluiten kies dan voor Bestand > Site sluiten. Wanneer je nog wijzigingen zou hebben aangebracht en nog niet opgeslagen hebt, vraagt Frontpage of deze opgeslagen moeten worden. Kies dan voor Ja Wil je de website weer openen; kies voor Bestand > Site openen. Ga naar de map Workshop Frontpage (op je M-schijf), klik op de map en kies voor Openen zodat de website weer in Frontpage geopend wordt Website verwijderen Wanneer je jouw website wilt verwijderen ga je als volgt te werk; LET OP; dit ga je nu niet doen!!! Dit is alleen handig wanneer je na de workshop je website zou willen verwijderen. Zorg dat de te verwijderen website in Frontpage geopend is Zorg dat de mappenlijst (links in beeldscherm) zichtbaar is Klik met de rechtermuisknop op de hoofdmap (in dit geval M:\Workshop Frontpage) en kies voor Verwijderen Frontpage opent nu een dialoogvenster waarin je aan wilt geven wat je precies wilt verwijderen; in het geval dat je de hele website wilt verwijderen vink je de optie Deze website helemaal verwijderen aan. NOOT; Frontpage kent geen Prullenbak, een verwijderde website kun je NOOIT meer terughalen. Denk dus goed na voordat je een website gaat verwijderen. 3.6 Een nieuwe pagina aan de website toevoegen Volgens jouw ontwerp bestaat jouw website uit (minimaal) 4 pagina s. De homepage heb je al gemaakt (index.htm) en nu ga je de andere pagina s toevoegen; Zorg ervoor dat je de index-pagina geopend hebt Kies in de menubalk voor Bestand > Nieuw Frontpage opent rechts in het beeldscherm het taakvenster Nieuw. Wanneer je een website gaat maken is het het mooiste en duidelijkste wanneer je een consequente opmaak, lay-out doorvoert; Kies daarom in het taakvenster Nieuw voor de optie Op basis van bestaande pagina. De basisstructuur van de pagina wordt nu overgenomen. Klik in het dialoogvenster dat nu verschijnt eenmaal op Index(.htm) en kies vervolgens voor Nieuw maken Frontpage maakt een exacte kopie van de homepage die de naam nieuwe pagina 1.htm krijgt. 18

19 Je ziet nu ook een nieuw tabblad met deze naam boven de webpagina staan; Tabblad nieuwe pagina Je hoeft nu deze nieuwe pagina niet helemaal opnieuw weer op te gaan maken. Je hoeft alleen de bestaande teksten aan te passen en hyperlinks toe te gaan voegen. NOOT; hoe je reeds bestaande teksten of worddocumenten het beste kunt invoegen in een webpagina wordt in hfdst. 3.7 uitgelegd. Verander nu eerst de titel en de zelf in te typen teksten die je wilt gebruiken voor de opdrachtpagina in jouw website. Sla deze pagina op; kies in de menubalk voor Bestand > Opslaan als en zorg ervoor dat je gaat opslaan in de door jouw aangemaakte map Workshop Frontpage. Geef als bestandsnaam Opdracht, wijzig de paginatitel (Titel wijzigen) ook in Opdracht (zodat in Internet de paginatitel ook wordt veranderd) en sla het op als Webpagina s. Opslaan in de map Workshop Frontpage Bestandsnaam; Opdracht en Opslaan als Webpagina s Titel wijzigen Je ziet nu dat de naam van het tabblad nieuwe pagina.htm veranderd is in opdracht.htm. Het is dus erg belangrijk dat je bij het invullen van de bestandsnaam (bij het opslaan van de pagina) een duidelijk herkenbare naam voor deze pagina gebruikt. Want wanneer je straks 4 of meer pagina s in Frontpage aangemaakt hebt en deze allemaal als een aparte pagina hebt opgeslagen, is het erg handig om te weten welke pagina(naam) welke informatie bevat zodat je niet steeds hoeft te zoeken naar de juiste pagina. Om deze Opdrachtpagina nu op Internet te kunnen bekijken, klik je in de menubalk weer op het icoontje Dit, omdat je nu een andere pagina dan de index-pagina wilt gaan bekijken. 19

20 Wanneer je later in deze workshop ook links tussen de webpagina s hebt aangebracht, kun je van de ene pagina naar de andere pagina springen. Tot dan zul je nog even iedere pagina apart in Internet moeten openen. 3.7 Bestanden In Frontpage invoegen en importeren Vaak heb je al Worddocumenten met teksten of informatie die geschikt zijn om in je website te plaatsen. Je kunt deze documenten rechtstreeks in Frontpage importeren zodat je niet steeds alles weer opnieuw hoeft te gaan typen (denk bijvoorbeeld aan grafieken, verslagen, roosters e.d.). Er zijn 2 mogelijkheden om dit te doen; - Een bestand invoegen aan een bestaande webpagina. De inhoud (tekst) van het geïmporteerde bestand wordt dan door Frontpage zo goed mogelijk omgezet naar HTML (zie hfdst ) - Een bestand als nieuw bestand importeren. Het bestand blijft daarbij in zijn oorspronkelijke formaat beschikbaar, het word dus niet omgezet naar HTML. Frontpage maakt meteen een hyperlink aan dat naar dit document verwijst (dit wordt verder uitgelegd in hoofdstuk 3.7.2) Wordbestand invoegen als HTML Stel dat je beschikt over een worddocument met informatie over de opdracht die je in deze website wilt gaan bespreken. Dan kun je dit document in Frontpage invoegen. Maak om dit te kunnen oefenen eerst een nieuwe pagina aan en noem deze oefen.htm (zie hoofdstuk 3.6) Verwijder de tekst die al op deze pagina staat, zodat je een nieuwe tekst in kunt gaan voegen Zet de cursor op de plaats waar de tekst van het in te voegen worddocument moet beginnen Kies in de menubalk voor Invoegen > Bestand en zorg ervoor dat onder in het dialoogvenster de keuze bij Bestandstypen op Alle bestanden staat Zoek nu het wordbestand op dat je in wilt gaan voegen, klik er op en kies voor Openen Frontpage converteert het wordbestand nu naar HTML en zet de (originele) tekst zelf in de webpagina. Om te kunnen zien hoe die HTML-code er uitziet klik je rechtsonderaan in het scherm op het weergavetabblad Codeweergave weergeven Ontwerpweergave weergeven Codeweergave weergeven Je ziet nu de HTML-code waarmee Frontpage de inhoud van de webpagina s beschrijft. Je hoeft daar verder niets mee te doen, maar het is goed om eens te zien hoe dat er uit ziet. Om terug te keren naar de weergave waarin je de webpagina kunt bewerken klik je op het weergavetabblad Ontwerpweergave weergeven Je kunt de tekst en opmaak nu verder volledig naar eigen inzicht aanpassen; lettergrootte, kleur, opsommingstekens enz. Sla de pagina daarna weer op (oefen.htm) NOOT; je kunt natuurlijk ook tekst uit een document kopiëren en vervolgens in de webpagina plakken. NOOT; het invoegen van documenten in Frontpage kan alleen met Worddocumenten/bestanden. Exceldocumenten e.d. kan Frontpage niet converteren naar HTML. Hoe je wel andere documenten/bestanden in je website kunt gebruiken leggen we nu uit. 20

21 3.7.2 Nieuw bestand importeren Wil je graag andere documenten dan Worddocumenten in je website toevoegen of als je een groot stuk tekst hebt dat je eigenlijk te groot vindt om in de website te plaatsen (maar toch ook wel goede toevoegende informatie bevat voor jouw website), dan kun je deze documenten als apart bestand opnemen in de mappenlijst en een hyperlink in de webpagina volgen die naar dit document verwijst; Verwijder de tekst van de vorige oefening (in de oefenpagina) Kies daarna in de menubalk voor Bestand > Importeren Het dialoogvenster Importeren wordt geopend Klik rechtsboven in het dialoogvenster op Bestand toevoegen Zoek nu het bestand op dat je in wilt gaan voegen, klik er op en kies voor Openen Het bestand wordt nu opgenomen in het dialoogvenster Importeren. Klik op OK om het bestand in de mappenlijst van jouw website toe te voegen Sleep het document (vanuit de mappenlijst links in het beeldscherm) in de oefenpagina Frontpage plaatst de bestandsnaam van het document nu op de pagina. Bovendien maakt Frontpage er meteen een hyperlink van naar het document dat je geïmporteerd hebt en nu in jouw mappenlijst staat. Je kunt de tekst van de hyperlink veranderen door de tekst te selecteren en opnieuw in te typen (niet verwijderen dus, want dan verwijder je de hyperlink ook meteen mee). Geïmporteerd bestand Bestandsnaam van geïmporteerd bestand is meteen als hyperlink ingevoegd Sla de oefenpagina op Wanneer je nu via Frontpage de hyperlink volgt (Ctrl + klikken), opent Frontpage het document meestal door het onderin in het beeldscherm (op de Startbalk) te plaatsen. Van daar af kun je het nu openen. Sluit het document weer af en probeer de hyperlink op Internet uit via het icoontje Voorbeeld in Microsoft en Verversen. Je zult zien dat het document nu wel meteen geopend wordt (ipv onderin de Startbalk te plaatsen). Op deze manier kun je allerlei verschillende soorten documenten/bestanden in Frontpage plaatsen. Omdat ze niet geconverteerd hoeven te worden loop je nooit tegen het probleem aan dat de bestanden vervormd in de website komen te staan. Je kunt nu de oefenpagina verwijderen (zie hfdst ), deze heb je niet meer nodig en is alleen maar een vervuiling van je website. Ga nu eerst de andere 2 pagina s (Informatiebronnen en Evaluatie) in je website bijmaken, benamen en opslaan (zie hoofdstuk 3.6), tekst invoegen en opmaken, zodat je daarna een navigatiestructuur met hyperlinks van de ene pagina naar de andere pagina aan kunt maken. Hoe je afbeeldingen kunt invoegen wordt in hfdst. 4 uitgelegd, dus dat ga je later pas doen. 21

22 3.8 Navigatiestructuur en navigatiebalken instellen Het is natuurlijk erg belangrijk dat een bezoeker van jouw website gemakkelijk de weg kan vinden binnen de website. Vooral wanneer de website groter wordt dan 3 of 4 pagina s. Frontpage biedt daarvoor de mogelijkheid van navigatiebalken. Om deze navigatiebalken te kunnen invoegen moet je eerst een hiërarchische navigatiestructuur binnen jouw website gaan aanmaken. De informatie van de navigatiestructuur die je zodadelijk zelf gaat aanbrengen wordt door Frontpage gebruikt om te bepalen welke hyperlinks er op een navigatiebalk moeten komen. Je moet dus goed nadenken over de structuur van de website Een navigatiestructuur instellen In dit onderdeel gaan we uit van de 4 pagina s (home, opdracht, informatiebronnen en evaluatie) die je zelf al aangemaakt hebt. Een navigatiestructuur zal er in dit geval (logischerwijze) als volgt uitzien; Je gaat nu deze navigatiestructuur zelf maken; Zorg dat alle webpagina s die je open hebt staan opgeslagen en afgesloten zijn (rechtermuisknop op tabblad pagina > Opslaan > Sluiten). Indien Frontpage vraagt of de wijzigingen opgeslagen moeten worden; kies voor JA Klik onderin het beeldscherm op het weergavetabblad Navigatie Frontpage opent het navigatiescherm en heeft er meteen al de indexpagina (of hoe jij zelf deze indexpagina genoemd hebt) in geplaatst om de navigatie te kunnen gaan maken. Wil je de naam van deze pagina wijzigen dan ga je als volgt te werk; Klik met de rechtermuisknop op deze pagina en kies voor Naam wijzigen Sleep vervolgens uit de mappenstructuur (linkergedeelte beeldscherm) de pagina s Opdracht, Informatiebronnen en Evaluatie naar de navigatiestructuur zodat ze onder de pagina Index komen te hangen. Frontpage maakt zelf een structuurlijn aan. Verander zo nodig de paginanamen in Opdracht, Informatiebronnen en Evaluatie. Je kunt de pagina s altijd nog verslepen nadat je ze geplaatst hebt. Het is ook mogelijk om bij deze navigatiestructuur nieuwe pagina s in te voegen die je later in de weergave Ontwerpen in gaat vullen en op gaat maken; Klik met de rechtermuisknop op een pagina in de navigatiestructuur en kies voor Nieuw > Pagina. Frontpage plaats nu een nieuwe pagina in de navigatiestructuur én zet meteen ook een nieuwe pagina in de website; klik om dit te kunnen zien onder in het beeldscherm op het mappenicoontje en klik daarna onderin het scherm weer op het icoontje Navigatie om terug te keren naar de navigatiestructuur. Je kunt de pagina in de navigatiestructuur ook weer een nieuwe naam geven, maar dit gaan we nu niet doen omdat je deze pagina (waarschijnlijk) niet nodig hebt volgens jouw ontwerp van jouw website. Heb je deze pagina wel nodig, geef hem dan wel een nieuwe naam We gaan er nu even van uit dat je deze pagina niet nodig hebt en gaan hem dus verwijderen; Klik met de rechtermuisknop op de pagina die je wilt verwijderen en kies voor Verwijderen. Frontpage komt nu met de vraag of je de pagina alleen maar uit de navigatiestructuur wilt verwijderen of dat je de pagina ook uit de website wilt verwijderen. Denk goed na voordat je beslist wat je kiest; 22

23 Wanneer je kiest voor de pagina verwijderen uit de navigatiestructuur is er niets aan de hand. Je kunt zo weer een nieuwe pagina aanmaken in de navigatiestructuur of een bestaande pagina in de navigatiestructuur slepen. Kies je voor de optie om de pagina ook uit de website te verwijderen, dan ben je de pagina (met eventuele inhoud) helemaal kwijt!!! Hij wordt dan nml. ook uit de mappenstructuur verwijderd!! Omdat het hier om een oefenpagina gaat, vink je toch de optie aan om de pagina uit de website te verwijderen; laat je de pagina staan dan heb je weer vervuiling van je website. Heb je de goede optie aangevinkt, klik dan op OK. Je zult zien dat de pagina, genoemd nieuwe pagina, ook meteen uit de mappenstructuur verdwenen is. Pagina helemaal uit de website verwijderen!!! Voorzichtig!!! NOOT; De indexpagina moet je nooit zomaar verwijderen, dan verwijder je alle pagina s en alle gegevens uit de website. De navigatiestructuur en de wijzigingen die je in de navigatiestructuur aanbrengt hoef je niet op te slaan. Frontpage houdt dit automatisch bij. Je hebt nu de navigatiestructuur aangemaakt. Nu kun je de navigatiebalken gaan toevoegen Een navigatiebalk toevoegen Een navigatiebalk is een hulpmiddel voor de bezoeker van de website om gemakkelijk door de webpagina s te kunnen bladeren. Een navigatiebalk is dus eigenlijk een set hyperlinks die gebruikt kunnen worden om binnen de website te navigeren. Je kunt het beste op iedere webpagina een navigatiebalk weergeven, zodat bezoekers snel van de ene naar de andere webpagina kunnen gaan. Omdat je de navigatiebalken in combinatie met de navigatiestructuur gebruikt, wordt de inhoud van de navigatiebalken automatisch door Frontpage onderhouden. Wanneer je in de navigatiestructuur iets wijzigt, wordt dat automatisch in de navigatiebalken bijgewerkt. Om een navigatiebalk aan de webpagina s toe te voegen ga je als volgt te werk; Open de homepage (index.htm) Klik op de plaats waar je een navigatiebalk wilt gaan toevoegen; het meest overzichtelijk is wanneer je de navigatiebalk óf net onder de titel plaats (een horizontale balk) of in de linkerkant van het beeldscherm (een verticale balk). Kies in de menubalk voor Invoegen > Navigatie Kies nu in de linkerkant van het dialoogvenster Webcomponent invoegen voor Koppelingsbalken en kies in de rechterkant van hetzelfde dialoogvenster voor Balk gebaseerd op navigatiestructuur. Klik op Volgende In het volgende dialoogvenster kun je kiezen hoe jouw navigatiebalk er uit komt te zien; klik op de keuze Paginathema gebruiken ; op deze manier past Frontpage de navigatiebalk aan jouw paginaontwerp aan (de overige keuzes zijn vooraf ingestelde balken/knoppen, probeer deze later maar eens uit) Klik op Volgende 23

24 Nu kun je gaan kiezen of je een horizontale- of een verticale navigatiebalk wilt gaan toevoegen; maak je keuze en klik op Voltooien Frontpage opent nu een dialoogvenster waarin je aan kunt geven welke pagina s uit de navigatiestructuur in de navigatiebalk opgenomen moeten worden. In het linker keuzerijtje (Hyperlinks om aan pagina toe te voegen) kun je aangeven naar welk niveau, naar welke pagina s de koppelingen/hyperlinken opgenomen moeten worden. Wanneer je een optie/niveau aanklikt, wordt in het links daarvan liggende schema figuurlijk weergegeven welke pagina s dan gelinkt zullen worden. Probeer wat opties uit om te kijken welk effect ze hebben en bedenk dus goed welke optie je wilt gebruiken. In dit geval (van een navigatiebalk in de homepage toevoegen) kies je voor Onderliggend niveau omdat er geen pagina s op hetzelfde niveau bestaan en ook geen pagina s op bovenliggend niveau. In het rechter keuzerijtje (Extra pagina s) kun je als extra optie aangeven of je vanuit de huidige pagina ook een hyperlink aan wilt maken naar de Introductiepagina (=homepage) of de Bovenliggende pagina. Met Bovenliggende pagina wordt de pagina bedoeld die rechtstreeks boven de huidige pagina gekoppeld is. Dus dan worden niet alle pagina s van het bovenliggend niveau gekoppeld, maar alleen één pagina van dat bovenliggend niveau. De optie Introductiepagina is natuurlijk erg handig als je meer dan 2 niveaus in je navigatiestructuur hebt aangebracht. Kies in dit geval voor geen van beider opties, omdat er geen bovenliggende pagina is en deze pagina zelf de Introductiepagina (homepage) is (vink de evt. door Frontpage zelf aangevinkte opties UIT) en klik op OK. Je ziet nu in de homepage dat Frontpage een navigatiebalk heeft aangemaakt met daarin meteen de hyperlinks (in onderstaande afbeelding de rode tekst) naar de onderliggende pagina s. Sla de pagina nu op (blauw icoontje) Probeer de hyperlinks maar eens uit door erop te klikken en gelijkertijd de cntrl-toets ingedrukt te houden. Ga weer terug naar de indexpagina door op het tabblad index.htm te klikken. 24

25 Nu ga je op de overige 3 pagina s op dezelfde manier de navigatiebalk toevoegen, beginnend met de webpagina Opdracht ; open de webpagina Opdracht.htm. Let wel op; bij het dialoogvenster waarin je de keuze maakt naar welke webpagina s (naar welk niveau) Frontpage moet linken, maak je bij de webpagina s Opdracht, Informatiebronnen en Evaluatie natuurlijk een andere keuze; Introductiepagina Hetzelfde niveau Kies in het geval van zojuist genoemde webpagina s in het linker keuzerijtje voor de optie Hetzelfde niveau zodat er hyperlinks naar de pagina s Informatiebronnen en Evaluatie gemaakt worden, en in het rechter keuzerijtje voor Introductiepagina zodat er een hyperlink naar de indexpagina (homepage) gemaakt wordt. Nu zijn alle 4 de webpagina s aan elkaar gekoppeld. Sla de pagina s op. Probeer uit of de hyperlinks die je via de navigatiebalken hebt ingevoerd ook in Internet goed werken. Als het goed is heb je deze optie nog openstaan (tabblad onderin het scherm), maar anders klik je weer op het icoontje Voorbeeld in Microsoft zodat de website weer in Internet geopend wordt. Wanneer je Internet met jouw website nog steeds geopend had staan zal het lijken alsof de hyperlink op de Homepage niet goed doorgevoerd is; hij is nog niet van kleur veranderd en niet onderstreept. Om de aanpassing die je in Frontpage hebt doorgevoerd ook op Internet door te kunnen voeren moet je de website verversen, wat wil zeggen dat Internet alle nieuwe opgeslagen gegevens nu ook door kan voeren; Klik in de werkbalk op het icoontje verversen Wanneer je Internet opnieuw hebt moeten openen m.b.v. het icoontje Voorbeeld in Microsoft. dan zal de hyperlink wel goed werken omdat Internet het zojuist door jouw opgeslagen bestand nu opnieuw opent met alle wijzigingen daarin. Klik op de hyperlinks in de navigatiebalken om te kijken of deze goed werken Tekst navigatiebalk opmaken Om de tekst van de navigatiebalk op te kunnen maken (om er bijvoorbeeld voor te kunnen zorgen dat alle woorden met een hoofdletter beginnen, lettergrootte, kleur enz., klik je met de rechtermuisknop op een woord uit de navigatiebalk en kies voor Lettertype. Maak in het nu geopend dialoogvenster de gewenste keuzes en kies voor Toepassen > OK Je zult deze opmaak op iedere webpagina apart moeten aanpassen. 25

26 De hyperlinks tussen jouw webpagina s zijn nu aangemaakt. We gaan nu verder met de overige hyperlinks aan te brengen. 3.9 Hyperlinks (koppelingen) aanbrengen Hyperlinks zijn verbindingen of koppelingen en duiden op een verwijzing naar een ander document, webpagina of website Hyperlinks aanbrengen binnen je eigen website Het kan natuurlijk ook zo zijn dat je in de door jouw getypte tekst in de webpagina (in plaats van in de navigatiebalk), toch ook nog zelf een hyperlink in wilt voegen naar een andere webpagina. Daarom gaan we hyperlinks toevoegen; Zorg dat de homepage geopend is (klik op het tabblad index.htm). Selecteer een woord in de tekst en klik in de werkbalk op het icoontje Hyperlink invoegen Icoontje Hyperlink invoegen In dit geval wil je de hyperlink/koppeling laten verwijzen naar een andere webpagina binnen jouw website; Zorg dat in het nu geopende dialoogvenster de keuze bij Koppelen aan op Bestaand bestand of webpagina staat (klik er anders eenmaal op om het aan te zetten) Bestaand bestand of webpagina Klik om een hyperlink naar bijvoorbeeld de Opdrachtpagina te kunnen maken nu op het bestand Opdracht.htm en klik op OK De hyperlink is nu aangemaakt en zoals je ziet kenmerkt dit zich doordat het woord waarop je de hyperlink hebt ingevoegd de kleur aangenomen heeft die jij zelf in hoofdstuk als Hyperlinkkleur hebt geselecteerd. Om uit te proberen of de hyperlink werkt houdt je de Ctrl-toets ingedrukt en klik je op de hyperlink. Je zult zien dat Frontpage nu inderdaad naar jouw Opdrachtpagina gaat. Sla de homepage (index) op (blauw icoontje) Hyperlink verwijderen Het kan natuurlijk zo zijn dat je een hyperlink weer wilt verwijderen omdat bijvoorbeeld de website waarnaar je de verwijzing hebt gemaakt niet meer actueel is; Klik op het woord of selecteer het woord waarvan je de hyperlink wilt verwijderen Klik op het icoontje Hyperlink Invoegen en kies rechtsonder in het dialoogvenster voor Koppeling verwijderen Hyperlinks aanbrengen buiten je eigen website In de meeste websites worden verwijzingen/koppelingen gemaakt naar andere websites. Immers, als bepaalde informatie al ergens anders te vinden is, waarom zou jij hem dan 26

27 nogmaals in een website uit moeten gaan schrijven? Vaak gaat het om extra informatie waarnaar je wilt verwijzen. In jouw ontwerp heb je al aangegeven op welke webpagina je een hyperlink naar een andere website wilt maken. Je kunt op 2 manieren een hyperlink naar een andere website aanmaken; De makkelijkste, maar niet altijd even mooie manier is om in jouw webpagina het hele httpadres (van de website waarnaar je de link wilt maken) in te typen. Frontpage maakt (indien het adres juist getypt is!) op dit adres dan automatisch een link aan. Probeer dit maar eens uit door bv. in te typen (en vervolgens een enter om de hyperlink te activeren) en probeer de link dan op Internet uit. Wanneer je echter een hhtp-adres hebt wat erg lang is (en dus eigenlijk niet erg mooi is om zo in jouw webpagina te typen) kun je voor de volgende manier kiezen. Open de pagina waarin je de hyperlink in aan wilt brengen en selecteer het woord waarop je de hyperlink wilt aanbrengen (bv het woord wat al iets over de weppagina zegt waarnaar je toe wilt linken) Klik op het icoontje Hyperlink invoegen In het dialoogvenster dat nu geopend wordt heb je meerdere mogelijkheden om een verwijzing naar een andere website te maken; Zorg dat de keuze bij Koppelen aan op Bestaand bestand of webpagina staat Als je de URL of het http-adres van de gewenste website weet dan kun je dat meteen in de adresregel invoegen en daarna op OK klikken. Adresregel en selectiepijltje Je kunt ook m.b.v. het selectiepijltje een keuzemenu openklappen waarin de laatst bezochte websites weergegeven staan; Klik de website naar keuze aan om hem in de adresregel te kunnen plaatsen en klik op OK. Het kan natuurlijk ook zo zijn dat je nog niet precies weet naar welke website je de verwijzing wilt gaan maken en dat je nog moet gaan browsen op het web; Klik in het nu geopend dialoogvenster op het icoontje Surfen op het web om de website op te zoeken waarnaar je de hyperlink wilt gaan maken Icoontje Surfen op het web Internet wordt nu geopend. Je kunt nu op zoek gaan naar een geschikte website. Heb je deze gevonden dan; 27

28 Kopieer je het http-adres > sluit Internet af > en plak het adres in de adresregel van het dialoogvenster (klik in de adresregel > plakken d.m.v. de Ctrl-toets en de V-toets tegelijkertijd in te drukken) Klik op OK Sla deze pagina op Als je nu de hyperlink in Frontpage uitprobeert zal blijken dat Frontpage de website waarnaar je de koppeling hebt gemaakt als extra pagina gaat openen. Dat willen we dus niet. Sluit deze nieuwe pagina (default pagina) af (rechtermuisknop op tabblad default > sluiten). Kijk nu of de hyperlink wel goed werkt wanneer je hem via Internet gebruikt; of je hebt je website nog in Internet openstaan, zo niet; klik op het icoontje Voorbeeld in Microsoft.. klik op verversen en probeer de hyperlink uit Hyperlink aanbrengen naar jouw adres Het kan erg handig zijn om in jouw website een hyperlink naar jouw adres aan te brengen. Wanneer bezoekers vragen of opmerkingen hebben over jouw site, kunnen ze jou op deze manier gemakkelijk bereiken. Ook hier kun je de hyperlink naar je adres weer op 2 manieren aanbrengen; De makkelijkste manier is om jouw adres in de webpagina in te typen: Frontpage maakt hier weer automatisch een hyperlink van. Zorg er wel voor dat je het precieze adres intypt, anders maakt Frontpage een link naar een niet bestaand adres. Wanneer je jouw adres niet in zijn geheel in de webpagina wilt typen ga je als volgt te werk; Ga naar de pagina waar je de hyperlink naar jouw adres wilt invoegen. Type (zonodig) het woord Contact, en selecteer dat woord om daar de hyperlink op aan te gaan maken Klik op het icoontje Hyperlink invoegen Kies bij Koppelen aan ditmaal voor adres Vul nu in het tekstvak adres het adres waarnaar je wilt verwijzen in; in dit geval dus je eigen adres en klik op OK Sla de pagina op Wanneer je de hyperlink in Frontpage wilt uitproberen zul je merken dat deze niet goed werkt. Je moet daarvoor weer naar de Internetpagina om het uit te proberen. 28

29 4 Afbeeldingen gebruiken in Frontpage Een webpagina zonder afbeeldingen bestaat tegenwoordig bijna niet meer. Het gezegde een plaatje zegt meer dan duizend woorden geldt zeker voor het world wide web, maar zeker ook wanneer je extra verduidelijking of toevoegende informatie aan je pagina s/lessen toe wilt voegen. Afbeeldingen kunnen voor veel doeleinden worden gebruikt; - ter ondersteuning van de tekst - standaardpictogrammen en knoppen om bijvoorbeeld het bladeren mee aan te geven - als koppeling naar een volgende pagina, andere website e.d. 4.1 Grafische bestandsformaten Voordat je allerlei afbeeldingen in jouw website gaat plaatsen, is het handig om iets meer te weten van de verschillende typen grafische bestandsformaten die beschikbaar zijn. De 2 meest in Internet gebruikte bestandsformaten zijn gif en jpeg. Het is bij het gebruik van afbeeldingen vaak geen kwestie van goed of fout. De keuze wordt veelal bepaald door de inhoud van de afbeelding die je gebruikt Gif Een gif-formaat kent een aantal trucjes waardoor veel meer mogelijk is dan alleen een plaatje tonen op een website. De belangrijkste zijn; Animated gif s; door in een afbeeldingverschillende, elkaar opvolgende plaatjes te monteren, kun je als het ware een kleine tekenfilm in de afbeelding opnemen. Transparante achtegrond; gif s kunnen gedeeltelijk doorschijnend worden gemaakt, waardoor de achtergrond van de afbeelding heen schijnt. Interlacing; van gif s die van Interlacing zijn voorzien, wordt eerste een grotere versie gedownload, waarna langzamerhand de afbeelding steeds scherper wordt. Maar het belangrijkste verschil tussen een gif- en een jpeg-bestand is dat een gif-bestand minder kleurenschakeringen kent, maar dat de bestandsgrootte daarentegen wel groter is Jpeg Zoals hierboven al vermeld staat, kan een jpeg-bestand veel meer kleuren bevatten dan een gif-bestand. Een jpeg-afbeelding kan uit meer dan 16,7 miljoen kleuren bestaan en komt daardoor overeen met fotorealistische kwaliteit. Je kunt op allerlei manieren aan een jpeg-afbeelding komen; je kunt ze zelf maken, je kunt ze vanaf het Internet opslaan en je kunt ze uit Frontpage zelf halen (clip-arts). 4.2 Afbeeldingen zoeken, opslaan en invoegen op een webpagina Wat belangrijk om te weten is dat wanneer je een afbeelding in Frontpage gaat invoegen, deze afbeelding niet echt als een afbeelding wordt ingevoegd (net zoals in Word) maar als een HTML-code welke verwijst naar de afbeelding. Wanneer je dus de website gaat publiceren of bijvoorbeeld op een cd branden, moet je er altijd voor zorgen dat je het afzonderlijke bestand (de afbeelding) ook bijgesloten hebt. Om dit op een directe en gemakkelijke manier te kunnen doen sla je de afbeeldingen op in de map M:/Workshop Frontpage/Images zodat je de afbeeldingen niet apart meer op hoeft te slaan en zodat de afbeeldingen ook meteen meegenomen worden wanneer je de website gaat publiceren Afbeeldingen zoeken, opslaan en invoegen vanaf Internet Zoek op Internet (Google > afbeeldingen, of bij gallery.yahoo.com, of plaatjes.pagina.nl) naar een geschikte afbeelding. Let er wel op dat de afbeelding niet te groot of te klein van formaat is. Wanneer de afbeelding veel te groot is, past deze niet op de pagina en moet je hem erg gaan verkleinen in Frontpage. Is de afbeelding te klein, moet je hem weer gaan vergroten in Frontpage. Vooral bij het vergroten, uittrekken van de afbeeldingen wordt de kwaliteit veel slechter, de afbeelding 29

30 ziet er korrelig uit. Wat is dan wel de juiste grootte? Dat is afhankelijk van waarvoor je de afbeelding wilt gaan gebruiken, maar de algemene richtlijn is dat wanneer je een afbeelding (foto) voor gebruik op het beeldscherm nodig hebt, je het beste een jpeg-afbeelding kunt gaan zoeken van vanaf 200x300 tot rond de 600x900 pixels. Wanneer je via Google afbeeldingen gaat zoeken wordt bij iedere afbeelding weergegeven hoeveel pixels deze is. Ga er verder maar van uit dat de grootte van de afbeelding zoals je hem op Internet ziet wanneer je naar afbeeldingen aan het zoeken bent, dat ook de grootte moet zijn zoals jij hem in jouw webpagina wilt plaatsen (what you see is what you get). Let daarbij wel op dat je op Internet op de foto moet dubbelklikken om hem op ware grootte te kunnen bekijken. Wanneer de de juiste afbeelding gevonden hebt, klik met de rechtermuisknop op de afbeelding en kies voor Afbeelding opslaan als. Sla de afbeelding (om hem ook rechtreeks in Frontpage in jou website op te kunnen slaan) op in de map M:/Workshop Frontpage/Images en sla de afbeelding op als Jpeg bestand. Geef het bestand een herkenbare naam zodat je het straks, wanneer je meerdere afbeeldingen in deze map hebt opgeslagen, gemakkelijk kunt terugvinden. Ga naar jouw webpagina waar je volgens jouw ontwerpje een afbeelding in zou voegen, klik op de plaats op deze pagina waar je de afbeelding op in wilt voegen en klik in de werkbalk op het icoontje Afbeelding uit bestand invoegen. Icoontje afbeelding uit bestand invoegen Open de map M:/Workshop Frontpage/Images en klik op het bestand dat je in wilt gaan voegen en klik op Invoegen De afbeelding die je nu ingevoegd hebt kun je nog verplaatsen (door te verslepen) en groter en kleiner maken (let op; kwaliteitverlies). Sla de pagina op (blauw opslaanicoontje) NOOT; om te controleren of de bestanden ook inderdaad in de map Images hier in Frontpage zijn opgeslagen, open in de mappenlijst (in de linkerkant van het beeldscherm) de map Images. Om een afbeelding uit jouw website te verwijderen, zoek in de mappenstructuur in de map Images het bestand op dat je wilt verwijderen en klik er met de rechtermuisknop op en kies voor Verwijderen. 4.3 Afbeeldingen bewerken via de werkbalk Afbeeldingen In dit onderdeel gaan we de afbeeldingen verder bewerken zodat deze precies goed in jouw webpagina passen. Je kunt op 2 manieren de afbeelding gaan bewerken; - Via de werkbalk Afbeeldingen. Hiermee bewerk je de fysieke eigenschappen van de afbeelding. - Via het dialoogvenster Eigenschappen van de afbeelding. Hiermee wijzig je o.a. het bestandsformaat, de afmetingen, evt. tekst enz. Om met wat afbeeldingen te kunnen gaan oefenen zonder dat je jouw eigen ingevoegde afbeeldingen misschien kwijtraakt of verkeerd opslaat, maak je eerst een nieuwe (oefen)pagina aan (zie hoofdstuk 3.3). Sla deze pagina op als test.htm. Het KAN zijn dat Frontpage bij het opslaan van deze pagina komt met de optie Ingesloten bestanden opslaan. Frontpage wil dus de afbeelding/foto (als er iets aan gewijzigd is) op gaan slaan. Zorg dat de naam van desbetreffende afbeelding/foto goed is, dat de foto in de juiste map opgeslagen wordt (M:/Workshop Frontpage/Images) en klik op OK. Zie hiervoor en voor meer informatie over het opslaan van afbeeldingen/foto s in je website, op de volgende bladzijde bij het sterretje 30

31 Voeg hierna minimaal nog 4 afbeeldingen in deze testpagina in om mee te kunnen gaan oefenen. Deze pagina kun je straks na het oefenen weer verwijderen. De werkbalk Afbeeldingen geeft de meest voorkomende bewerkingen weer. We gaan deze niet allemaal bespreken, alleen de belangrijkste tippen we even aan. De andere mogelijkheden van deze werkbalk kun je (nu of later) zelf nog uit gaan proberen. Indiende werkbalk Afbeeldingen (zie hieronder) nog niet geopend is, kies in de menubalk voor Beeld > Werkbalken > Afbeeldingen. Sleep de werkbalk boven naar het beeldscherm zodat hij bij de andere werkbalken komt te staan. Absoluut plaatsen 3 x Hotspots Tekst AutoMiniatuur Bijsnijden Herstellen Tekst bewerken ; klik op de afbeelding waarbij je tekst wilt gaan invoegen. Klik op het icoontje Tekst. Bij deze optie kun je tekst in het plaatje invoegen. Nadeel hiervan kan zijn dat Frontpage alleen tekst kan invoegen op een gifbestand, dus wanneer je tekst wilt gaan invoegen op een jpeg-bestand vraagt Frontpage eerst of je het bestand om wilt zetten naar een gif-bestand. De kwaliteit (kleiner aantal kleuren) kan hierdoor teruglopen en de bestandsgrootte kan juist oplopen. Om te oefenen ga je toch tekst invoegen en het bestand dus omzetten naar gif; klik op OK Frontpage opent een tekstvak in de afbeelding. Kies een lettertype en grootte, kijk of je de tekst wilt centreren enz. en type de tekst die je in de afbeelding wilt zetten. Je kunt het tekstvak nog vergroten/verkleinen en verplaatsen met de cursor. Klik buiten de afbeelding om het tekstvak niet meer als geselecteerd te kunnen zien. Ben je tevreden, sla dan de pagina op m.b.v. het blauwe opslaanicoontje; Je ziet nu dat Frontpage de afbeelding opnieuw wil gaan opslaan, maar nu als gif-bestand. Het voordeel van deze afbeelding nu opslaan als een (nieuw) gif-bestand is dat je op deze manier ook altijd het origineel nog hebt (de afbeelding zonder de ingevoegde tekst); Zorg dat het bestand dat je wilt gaan opslaan in dit dialoogvenster geselecteerd is (grijs is) anders kun je de tabbladen niet selecteren Bestand eerst selecteren voordat je de tabbladen kunt gebruiken Naam wijzigen; klik op het tabblad Naam wijzigen. Geef het bestand een andere naam (zodat je weet dat dit de afbeelding met tekst is), Map wijzigen; klik op het tabblad Map wijzigen en zorg ervoor dat de afbeelding opgeslagen wordt in de map M:/Workshop Frontpage/images Actie instellen; klik op het tabblad Actie instellen ; hiermee kun je aangeven of het bestand moet worden opgeslagen of moet worden overschreven (als je de afbeelding gewijzigd hebt). Meestal hoef je niets te veranderen aan deze instelling omdat Frontpage zelf voor de beste optie kiest. De optie staat nu op Dit bestand opslaan ; klik op OK 31

32 Type bestandsafbeelding; klik op het tabblad Type afbeeldingsbestand ; hierbij kun je kiezen als wat voor bestand je de afbeelding wilt opslaan. Ook hier geeft Frontpage zelf de beste optie aan; Klik op OK. Nu je alle instellingen bekeken en aangepast hebt kun je het bestand opslaan; Klik op OK. Je ziet nu dat in de mappenstructuur het bestand in de map Images bijgeschreven is. Je kunt van een (grote) afbeelding ook een Autominiatuur maken. Dit houdt in dat je Frontpage een verkleinde versie van de afbeelding laat maken. De verkleinde afbeelding wordt dan op de webpagina geplaatst. Wanneer je dan op de verkleinde afbeelding klikt, opent Frontpage de grotere (originele) afbeelding in een nieuwe pagina. Klik op de afbeelding waarop je AutoMiniatuur wilt gaan toepassen. Klik op het icoontje AutoMiniatuur. Je ziet dat de afbeelding wat kleiner wordt. Sla de pagina op (blauw opslaanicoontje). Frontpage heeft de afbeelding zelf al een nieuwe bestandsnaam gegeven, nml. met de toevoeging small (soms zie je deze toevoeging net niet meer staan; klik dan op de optie Naam wijzigen zodat je zeker weet dat de toevoeging er wel staat). Zorg dat het bestand in de goede map komt te staan (images) en klik op OK Bekijk nu op Internet het resultaat (klik in Internet eerst weer op het icoontje Verversen om de wijzigingen door te voeren). Je kunt een afbeelding ook in een laag plaatsen ( Absoluut plaatsen ) zodat deze makkelijker te verplaatsen is; Klik op de afbeelding die je in een laag wilt zetten en klik op het icoontje Absoluut plaatsen NOOT; zorg ervoor dat de afbeelding die je absoluut wilt gaan plaatsen NIET direct naast een andere afbeelding staat. Frontpage zal nml. alle afbeeldingen die direct naast elkaar staan in één laag plaatsen. Je ziet nu dat Frontpage een laag heeft aangemaakt die precies om de afbeelding heen past. Als je op de (blauwe) lijn van de laag gaat staan totdat de cursor in een kruis met pijltjes verandert, kun je de laag met de afbeelding erin verplaatsen. Ga je met de cursor op de afbeelding zelf staan, dan verplaats je de afbeelding zonder de laag te verplaatsen (haal je de afbeelding uit de laag). Wanneer je een afbeelding hebt gevonden waarvan je eigenlijk maar een gedeelte wilt laten zien, kun je gebruik maken van de optie Bijsnijden (op maat snijden); Klik op de afbeelding die je wilt gaan bewerken en klik op het icoontje Bijsnijden. In de afbeelding staat nu een kader. Versleep en verklein het kader totdat je dat gedeelte wat je van de afbeelding wilt bewaren hebt geselecteerd, en klik nogmaals op het icoontje Bijsnijden. Het deel van de afbeelding buiten het kader wordt weggesneden. De oorspronkelijke omvang van het bestand wordt dus gewijzigd. Ben je niet tevreden over het resultaat kies dan voor het icoontje Herstellen Ben je wel tevreden; sla de pagina op en merk dat Frontpage deze afbeelding nu weer als nieuwe afbeelding op wil slaan. Geef het een nieuwe herkenbare naam en zorg dat het in de goede map wordt opgeslagen. Als laatste gaan we kijken naar de optie Hotspots. Een hotspot is een kader welke je op een afbeelding weer gaat geven. Dit kader geeft dan de regio aan waarop je kunt klikken om de hyperlink te activeren. Hetzelfde als wanneer je een woord selecteert om een hyperlink in te gaan voegen, nu selecteer je een gedeelte van de afbeelding waarop je een hyperlink in 32

33 gaat voegen. In de werkbalk Afbeeldingen staan 3 icoontjes waarmee je hyperlinks op afbeeldingen kunt gaan aanbrengen; Klik op de afbeelding waarop je een hyperlink in wilt gaan voegen en klik op het icoontje waarmee je een vierkante hotspot (zie afb. vorige blz.) kunt gaan aanbrengen. Selecteer met het potloodje (dat nu i.p.v. de muiscursor verschijnt) een gedeelte van de (of de gehele) afbeelding. Wanneer je de selectie gemaakt hebt verschijnt het dialoogvenster Hyperlink invoegen. Ga vervolgens verder te werk zoals je het in hoofdstuk 3.9 en verder geleerd hebt. Sla de pagina op en probeer de hyperlink in Internet uit. NOOT; je kunt ook een hyperlink op een afbeelding maken door de afbeelding in zijn geheel te selecteren (er op te klikken) en verder te werk gaan zoals je een hyperlink op een geselecteerd woord zou gaan maken. De werkbalk Afbeeldingen heeft nog veel meer mogelijkheden, maar dat zijn er teveel om ze allemaal apart te bespreken. Toch zitten er nog wel leuke opties bij; bekijk ze even en oefen er als je wilt even mee. Maak de testpagina leeg (gooi de oefenbestanden van de afbeeldingen weg), zodat je met een lege pagina verder kunt gaan oefenen met het aanpassen van afbeeldingen met behulp van het dialoogvenster Eigenschappen van de afbeelding. 4.4 Afbeeldingen bewerken via het dialoogvenster Eigenschappen van de afbeelding Naast het gebruik maken van de werkbalk Afbeeldingen kun je ook gebruik maken van het dialoogvenster Eigenschappen van de afbeelding om afbeeldingen te bewerken; Optie Uitlijning ; type wat tekst in de testpagina en voeg daarna een afbeelding tussen de tekst. Zorg dat er boven en onder de afbeelding tekst staat. Klik met de rechtermuisknop op de afbeelding en kies voor Eigenschappen van afbeelding (of dubbelklik op de afbeelding) Het dialoogvenster Eigenschappen van afbeelding wordt geopend; Tabblad vormgeving Onder het tabblad Vormgeven kun je de uitlijning van de afbeelding instellen; Terugloopstijl en Uitlijning ; hiermee bepaal je hoe het plaatje tussen de tekst wordt geplaatst Randdikte ; hiermee bepaal je of je een rand om het plaatje wilt invoegen en hoe dik die rand dan moet zijn Horizontale en Verticale afstand ; hiermee kun je aangeven hoeveel witruimte je tussen de afbeelding en tekst wilt hebben Formaat opgeven ; bij deze optie kun je de afbeelding vergroten en verkleinen. Je kunt dit aangeven in pixels of in procenten. Dit kan erg handig zijn wanneer je bijvoorbeeld een rijtje grafische knoppen of afbeeldingen allemaal even hoog wilt 33

34 laten zijn. Let wel; de kwaliteit van de meeste afbeeldingen verslechtert wanneer je de afbeelding veel gaat vergroten!! Wil je de hoogte- en breedteverhouding van het originele plaatje behouden, zorg dan dat de optie Hoogte- breedteverhouding behouden aangevinkt is. Onder het tabblad Algemeen kun je weer een aantal instellingen maken. We bespreken alleen de optie Tekst invoeren. Met deze optie kun je een alternatieve tekst, extra informatie opgeven die getoond wordt wanneer de internetbezoeker met de muis op de afbeelding wijst; Zorg dat je in het tabblad Algemeen bent. Vink in het midden van het dialoogvenster de optie Tekst aan en typ in het tekstvak een tekst die toegevoegde waarde heeft voor de afbeelding. Klik nu op OK. Sla de pagina op; sla (zonodig) de afbeelding onder een andere naam en in de goede map op. Kijk via Internet of je de tekst te zien krijgt wanneer je met de muis op de afbeelding wijst. Vergeet niet eerst in Internet op het icoontje Verversen te klikken. 4.5 Afbeeldingen zoeken en invoegen met de Microsoft Mediagalerie In Microsoft Mediagalerie kun je ook gericht naar een afbeelding gaan zoeken en invoegen; Ga zonodig naar de testpagina om een plaatje in te voegen en klik op de plaats waar je het plaatje ongeveer wilt gaan invoegen. Kies in de werkbalk voor Invoegen > Afbeelding > Illustratie In het rechtergedeelte van het scherm wordt nu het illustratietaakvenster geopend waarin je geavanceerd naar afbeeldingen, filmpjes en geluiden kunt gaan zoeken; Type bij het tekstvakje Zoeken naar een zoekterm/trefwoord in Kies bij de optie Zoeken in voor Alle collecties Vink bij de optie Resultaten moeten zijn de opties Illustraties en Foto s aan en klik op Starten. Op deze manier zoek je gericht binnen alle collecties naar illustraties en foto s. Om de afbeelding nu in te kunnen voegen ga je op de gewenste afbeelding staan zodat er aan de rechterkant van de afbeelding een selectiekeuzepijltje verschijnt; Selectiekeuzepijltje Open de selectiekeuze en kies voor Invoegen De afbeelding wordt op de webpagina ingevoegd, waarna je de afbeelding weer kunt verklein/vergroten en verplaatsen. Hoe je deze afbeelding op moet slaan wordt in uitgelegd. 34

35 Naast het invoegen van afbeeldingen kun je natuurlijk nog veel meer componenten (verschillende soorten bestanden) invoegen. Kijk daarvoor eens naar de optie Webcomponenten invoegen via menubalk Invoegen>Webcomponent. We gaan hier nu niet verder op in, maar probeer hier later eens wat leuke opties mee uit. In hoofdstuk 5 wordt uitgelegd hoe je video- en audiobestanden in kunt voegen. Omdat het zoeken van een geschikt filmpje en daarna het invoegen daarvan, nogal wat handelingen en tijd vergt hoef je daarom dit hoofdstuk nu niet door te werken. Deze informatie kun je wel goed gebruiken voor wanneer je (later) een filmpje of een audiobestand op je website in wilt gaan voegen. In hoofdstuk 6 wordt uitgelegd hoe je de website zou kunnen publiceren. Omdat je voor het publiceren ruimte op het www nodig hebt (en we dat jullie op dit moment technisch gezien niet kunnen bieden) hoef je dit hoofdstuk nu ook niet door te werken. Ook hier hebben we de informatie wel opgenomen in deze reader omdat je er later wel gebruik van zou kunnen maken. Hoofdstuk 7 geeft tips voor het schrijven op het web en in hoofdstuk 8 worden een aantal websites genoemd die goed bruikbaar zijn bij het opmaken van jouw website. Ook deze lees je later maar eens door. Je gaat nu verder met de door jouw gemaakte website helemaal (volgens jouw ontwerp) in orde maken en laat hem daarna laten voor de eindbeoordeling controleren door de workshopbegeleiding. 35

36 5 Video- en audiobestanden en invoegen 5.1 Invoegen van Internetfilmpjes Omdat op deze computers alleen maar AVI, WMV en MPEG2 bestandjes opgeslagen en kunnen worden afgespeeld, wordt het erg moeilijk om een filmpje te vinden wat in jouw website past. Je kunt het beste bij Google gaan zoeken op filmpje + trefwoord (bijvoorbeeld; filmpje biologie), op AVI + trefwoord (bijvoorbeeld; avi economie) of op WMV + trefwoord (bijvoorbeeld; wmv tweede wereldoorlog). Vaak krijg je dan heel veel SPAM (ongewenste of niet toepasselijke informatie) en maar heel weinig tot zelden een goede treffer. Daarnaast zijn de filmpjes vaak beveiligd, is het steeds vaker Streaming Video (wat je ook niet op kunt slaan) of zijn het bestanden die Windows niet kan openen en afspelen. We laten jullie nu via de Wiki die speciaal voor Engels gemaakt is (homepagina mediatheek Moller; een filmpje zoeken dat je in kunt voegen. Ga je als volgt te werk; Open Internet, ga naar portal.fontys.nl Klik rechts in het scherm (paarse gedeelte) op Mediatheek Klik rechts in het scherm (groen gedeelte) op Mediatheek locaties en kies voor Mediatheek Tilburg Moller Klik nu op Homepagina mediatheek Moller (net boven afbeelding) Scroll vervolgens naar beneden en klik op Engels Kies in het volgende dialoogvenster voor Websites Engels en vervolgens weer voor The English Classroom Klik bovenin het scherm op de optie Oefenen en vervolgens voor Kijken en luisteren Klik nu op de optie Videos en open vervolgens de video Wallace and Grommit Windows Mediaplayer open nu automatisch het filmpje (kan even duren) en speelt het af. Laat het filmpje helemaal afspelen zodat het filmbestand automatisch in de temporary files op de C-schijf van deze computer wordt opgeslagen. Sluit het daarna pas af. Schrijf vervolgens het Internetadres van de website op, zodat je dadelijk het filmbestand makkelijker kunt terugvinden. ( Om nu het opgeslagen filmpje te gaan zoeken zodat je het in jouw website kunt invoegen, ga je als volgt te werk: Ga naar je bureaublad (desktop) en klik met de rechtermuisknop op het Interneticoontje Kies voor Eigenschappen Kies voor Instellingen Kies voor Bestanden weergeven De computer slaat automatisch alle bestanden die je opent op in deze temporary schijf. Je kunt je voorstellen dat er dus enorm veel bestanden op deze schijf staan. Alle losse bestanden waaruit een website bestaat worden per bestand los opgeslagen. Dus ook van de pagina die je zojuist geopend hebt kunnen er veel verschillende bestanden in de Temporary files staan. Hoe het videobestand nu te vinden wordt m.b.v. een afbeelding op de volgende bladzijde uitgelegd. 36

37 Klik in het dialoogvenster op de optie Internet-adres zodat de bestanden op alfabetische volgorde worden gezet; dit vergemakkelijkt het zoeken naar een bestand. Internet-adres Adres website Type bestand; Windows Mediaplayer Zoek onder het Internet-adres naar het adres van de website; Zoek dan bij het type bestand naar een videobestand (in dit geval WindowsMediaplayer, maar andere filmpjes kunnen bijvoorbeeld de extensie AVI of MPEG2 hebben) Kopieer/sleep het juiste bestand ( naar de map Mijn Documenten (links in je scherm) Ga nu terug naar Frontpage en kies in de menubalk voor Bestand > Importeren. Je moet nml. eerst het filmbestand in je mappenlijst van Frontpage zetten voordat je het in een van je webpagina s kunt invoegen Kies voor Menubalk > Importeren > Bestand toevoegen Ga naar de map Mijn documenten en zoek het bestand wallaceandgrommit op Klik op het bestand en kies voor Openen en in het volgende dialoogvenster voor OK (zorg ervoor dat het bestand wallaceandgrommit wel geselecteerd is, anders kun je de optie OK niet kiezen). Het duurt even voordat het bestand links in de mappenstructuur zichtbaar wordt, maar wacht daar wel op en kies zeker NIET voor stoppen, omdat je dan het importeerproces stop zet. Open nu de webpagina waarop je het filmpje neer wilt zetten en sleep het bestand walliceandgrommit vanuit de mappenlijst op de gekozen webpagina. Op de webpagina verschijnt nu het volgende icoontje; Klik op het icoontje en trek het icoontje uit tot een kader van ongeveer 8x6 cm. De grootte van dit kader vormt de grootte waarop je het filmpje dadelijk op Internet te zien krijgt. Dubbelklik op het filmicoontje. In het volgende dialoogvenster zou nu bij de optie Videobron het bestand wallaceandgrommit moeten staan. Is dat niet zo, dan zoek dit bestand m.b.v. Bladeren op in jouw Frontpagemap. Vink daarna de optie Bij het aanwijzen met de 37

38 muis aan (zodat het filmpje op Internet afgespeeld wordt zodra je er met de muis overheen beweegt). Zet de optie Herhalen op nul Om te kijken of het filmpje nu in Frontpage afgespeeld kan worden klik met de rechtermuisknop op het icoontje en kies voor Openen met > Windows Media Player Sluit na het afspelen van het filmpje de Windows Mediaplayer en ga terug naar Frontpage Klik op het Opslaanicoontje en ga via het icoontje Voorbeeld in Microsoft Internet. naar Internet. Misschien heb je jouw webpagina op Internet nog open staan, dan kun je deze direct openen natuurlijk Klik op Verversen om de veranderingen door te voeren en ga naar de webpagina waar je het filmpje ingevoegd hebt Beweeg met de muis over het kader van het filmpje en kijk of het filmpje nu afgespeeld wordt. Je ziet dat het kader een zwart vlak is en voor een bezoeker van jou website zodanig niet als filmpje te herkennen is, dus daar gaan we nu wat aan doen; Ga terug naar Frontpage en klik eenmaal op het icoontje van het filmbestand dat je op de webpagina hebt ingevoegd Klik dan in de menubalk op het icoontje Webcomponent Webcomponent In het volgende dialoogvenster kies je eerst links voor de optie Geavanceerde besturingselementen en daarna rechts voor Invoegtoepassing en vervolgens voor Voltooien In het volgende dialoogvenster zoek je m.b.v. Bladeren het bestand walliceandgrommit in jouw Frontpagemap op. Klik op het bestand en kies voor Openen. In het volgende dialoogvenster kies je voor OK. Sla de pagina op (blauw opslaanicoontje) en ga naar je webpagina op Internet Klik op Verversen en je zult zien dat het filmbestand nu in een kader van Windows Mediaplayer geplaatst is. De bezoeker kan mbv dit kader het filmpje afspelen en weer stopzetten. Het is wel zo, dat wanneer een bezoeker deze webpagina opent, het 38