Reader 43
Workshop Kennismaken met websites
FRONTPAGE 2003 Mediatheek Tilburg Moller
2
Inleiding………………………………………………………………………....................
5
1
Wat gaan we doen?.................................................................................
5
1.1 1.2 1.3 1.4 1.5 1.6
Onderwerp………………………………………………………………………….. Inleiding…………………………………………………………………………….. De opdracht………………………………………………………………………… Infobronnen………………………………………………………………………… Contact evaluatie………………………………………………………………….. Ontwerp…………………………………………………………………………….. - Storyboard…………………………………………………………………………. - Evaluatieformulier ontwerp website…………………………………………..
5 6 6 6 6 6 7 8
2
Vooraf …………………………………………………………………………….. Het belang van een eigen Map aanmaken……………………………………. De verschillen tussen een Webpagina en een Website……………………..
9 9 9
3.1 3.2 3.2.1 3.2.2 3.2.3 3.3 3.3.1 3.3.2 3.4 3.4.1 3.5 3.5.1 3.5.2 3.5.3 3.5.4 3.6 3.7 3.7.1 3.7.2 3.8 3.8.1 3.8.2 3.8.2.1 3.9 3.9.1 3.9.1.1 3.9.2. 3.9.2.1
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 emailadres………………………………………
10 10 11 12 13 13 15 15 16 16 17 18 18 18 18 18 18 20 20 21 22 22 23 25 26 26 26 26 28
4
Afbeeldingen gebruiken in Frontpage…………………………………. 29
4.1 4.1.1 4.1.2 4.2 4.2.1 4.3 4.4
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…………
2.1 2.2
3
4.5
29 29 29 29 29 30 33 34
3
EXTRA 5
Video- en audiobestanden invoegen…………………………………… 36
5.1 5.2 5.3 5.4
Invoegen van Internetfilmpjes………………………………………………………. Hyperlink invoegen in Frontpage (naar een filmpje)……………………………… Een eigengemaakt videofilmpje invoegen………………………………………… Audiofragment invoegen……………………………………………………………..
6 7 8
Publiceren…………………………………………………………………………. 40 Algemene tips voor het schrijven op het web……………………… 40 Websites bruikbaar bij de lay out van Frontpage......................... 43
Evaluatieformulier eindopdracht………………………………………………….
4
36 39 39 39
44
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 emailadres 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 emailadres
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
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 emailadres
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 emailadres 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
Storyboard
Onderwerp
Inleiding
Opdracht
Infobronnen
Contact Evaluatie
7
Evaluatie ontwerp Frontpage Onderwerp:
Worden er minimaal 4 pagina’s gebruikt in de site?
Ja / Nee
Bevat de website informatieve teksten gericht op de onderbouw?
Ja / Nee
Wordt er gebruik gemaakt van meerdere (opgemaakte) afbeeldingen?
Ja / Nee
Bevat de website een pagina met relevante url’s buiten de eigen site?
Ja / Nee
Wordt er een hyperlink aangemaakt naar jouw emailadres?
Ja / Nee
Wordt de website voorzien van een navigatiebalk?
Ja / Nee
Wordt er een duidelijke structuur/ layout (lagen) gericht op leerlingen gehanteerd?
Ja / Nee
Zorg ervoor dat de website goed werkt als je deze via de browser gaat bekijken
Ja / Nee
Alle 8 de vereisten moeten met een JA beoordeeld zijn Opmerkingen/verbeteringen: …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… ……………………………………………………………
AKKOORD:
8
Ja / Nee
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
3
FrontPage; een website maken
Klik op “Start > Alle programma’s > Microsoft Office > Microsoft Office FrontPage 2003”. 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
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
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.
3.2.1 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”.
Laag invoeren
12
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. •
3.2.2
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.
3.2.3 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
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
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.
3.3.1 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”.
3.3.2 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 6.0”
15
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
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.
3.4.1 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; •
3.5
Kies “Beeld > Liniaal en raster > en vink de opties Liniaal en Raster uit
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.
3.5.1
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
•
3.5.2
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
3.5.3 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.
3.5.4 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
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
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; -
-
3.7.1
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. 3.7.1) 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
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. 3.5.2), 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
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.
3.8.1 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 en klik daarna onderin het in het beeldscherm op het mappenicoontje 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; •
22
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;
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.
3.8.2
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
•
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
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
3.8.2.1 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
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.
3.9.1 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 3.2.3 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)
3.9.1.1.
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”
3.9.2 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
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. www.fontys.nl 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
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.
3.9.2.1.
Hyperlink aanbrengen naar jouw emailadres
Het kan erg handig zijn om in jouw website een hyperlink naar jouw emailadres 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 emailadres weer op 2 manieren aanbrengen; De makkelijkste manier is om jouw emailadres in de webpagina in te typen: Frontpage maakt hier weer automatisch een hyperlink van. Zorg er wel voor dat je het precieze emailadres intypt, anders maakt Frontpage een link naar een niet bestaand emailadres. Wanneer je jouw emailadres 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 emailadres 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 “E-mailadres” Vul nu in het tekstvak “E-mailadres” het emailadres waarnaar je wilt verwijzen in; in dit geval dus je eigen emailadres 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
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.
4.1.1 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.
4.1.2 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.
4.2.1 Afbeeldingen zoeken, opslaan en invoegen vanaf Internet •
Zoek op Internet (Google > afbeeldingen, of bij gallery.yahoo.com, www.iconbazaar.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
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
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
Tekst • •
• •
• •
AutoMiniatuur
3 x Hotspots
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
•
•
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
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
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; • • • •
4.5
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.
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 4.2.1.1 uitgelegd.
34
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
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; http://www.fontysmediatheek.nl/wiki/home/Rubriek:Mediatheek_Tilburg_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. (http://www.digischool.nl/en/luistervaardigheid/videos/wallaceandgromit.htm) • • •
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
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; http://www.digischool.nl/en/luistervaardigheid/videos/wallaceandgromit.htm • Zoek dan bij het type bestand naar een videobestand (in dit geval
• •
• • •
• •
•
•
, maar andere filmpjes kunnen bijvoorbeeld de extensie WindowsMediaplayer AVI of MPEG2 hebben) Kopieer/sleep het juiste bestand (http://www.digischool.nl/en/luistervaardigheid/videos/wallaceandgromit.htm) 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
• • •
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
filmpje meteen begint te spelen. Wanneer je op het filmpje dubbelklikt wordt het op het volledige scherm afgespeeld. Maar nogmaals; het zoeken van een geschikt filmpje, met het juiste bestandstype is vaak een heel werk!! Een andere optie daarom is om in jouw website een link naar de site waarop je het filmpje kunt vinden en afspelen te maken. Of gewoon een link naar een site waar extra informatie over het onderwerp van jouw website te vinden is (een soort uitstapje vanuit jouw website naar een andere website dus).
5.2
Hyperlink invoegen in Frontpage (naar een webpagina met filmpjes)
Het maken van een hyperlink naar een andere website heb je in hoofdstuk 3.9.2 al geoefend. We verwijzen je daarom ook daar naar toe om een evt. hyperlink naar de website van digischool te kunnen maken.
5.3
Een eigengemaakt videofilmpje invoegen
Je kunt met een camcorder zelf een video-opname maken en deze met het programma Pinnacle Studio 10 bewerken en vervolgens opslaan op CD-R en/of DVD. Hoe dit het beste kunt doen wordt uitgebreid uitgelegd in de workshop Videomontage. Het luistert ontzettend nauw hoe je een filmbestand opslaat, omdat het goed importeren en afspelen in Frontpage vaak niet zonder problemen gaat. We gaan daar nu niet verder op in.
5.4
Audiofragment invoegen
Het invoegen van een audiobestand werkt hetzelfde als het invoegen van een videobestand. De website waar je audiobestanden kunt vinden die je kunt gebruiken voor je website voor Engels is; http://www.bbc.co.uk/worldservice/learningenglish/multimedia/btp/oxford/oxford_audio.shtml Speel het audiobestand naar keuze af; misschien moet je een nieuwe versie van realPlayer installeren, maar dat wijst zich vanzelf. Zoek het bestand weer via Internet (temporary files) op, maar zoek nu natuurlijk naar een audiobestand (realplayer). Verder ga je precies zo te werk als dat je bij de vorige oefening hebt gedaan (hoofdstuk 5.1) Je hoeft dit nu niet te gaan oefenen.
39
6
Publiceren
Wanneer jouw website helemaal klaar is en je gecontroleerd hebt of alle informatie klopt en alle links en navigatiebalken goed werken, kun je de website gaan publiceren: •
Om de website op Internet te kunnen publiceren heb je een host nodig (een bedrijf dat voor jou, via een speciale Webserver, de website op Internet). Zo’n host wordt ook wel een ISP (Internet Service Provider) genoemd. Er zijn veel verschillende hosts die verschillende tarieven en serviceniveaus hanteren. Omdat je een FrontPage website hebt gemaakt, zijn de keuzen al meteen beperkt, omdat je voor de speciale functionaliteiten van FrontPage een ISP nodig hebt die de Frontpage-serverextensies ondersteunt. Microsoft houdt gegevens bij met geregistreerde ISP’s die zich bereid hebben verklaard volledige ondersteuning van FrontPage-serverextensies aan te bieden. Deze lijst is beschikbaar op http://www.microsoft.com/serviceproviders/hostingproviders.mspx (Engelstalig).
•
Verder kun je de website ook op een Intranet publiceren. Bij Fontys zou dat dan via de Portal moeten gaan. Momenteel bestaat die mogelijkheid voor studenten (helaas) nog niet, maar we zijn in overleg om dit wel te kunnen realiseren.
•
Je kunt natuurlijk ook jouw website via Frontpage (via het icoontje Voorbeeld in Microsoft Internet Explorer) aan derden laten zien. Zorg er dus wel goed voor, dat alle bestanden (tekst, afbeeldingen, film- en audiobestanden e.d.) opgeslagen zijn in jouw Frontpagemap. Als je met een laptop werkt die geen aansluiting heeft op het Internet, moet je je wel realiseren dat de links naar andere websites dan niet zullen werken!!
We gaan nu het publiceren verder niet uitvoeren omdat wij dit jullie technisch gezien nog niet aan kunnen bieden. Daarnaast zijn de verschillende vormen van publiceren nogal bewerkelijk. Wil je toch gaan publiceren (en heb je een host gevonden) dan verwijzen we je voor informatie hoe te publiceren naar het boek “Microsoft Office Praktijkboek FrontPage 2003” van Academic Service. Dit boek is ook in de mediatheek van het Mollergebouw te leen (plaatsingscode; 528.52 MICR)
7
Algemene tips voor het schrijven op het web
Twee voorbeelden van een goed ontwerp, goede layout en inhoud van een website zijn te vinden op; http://www.webkwestie.nl/vo_digitheek/index.htm en op http://www.webkwestie.nl/trip%20to%20London/index.htm LET OP; ook deze websites hebben hun goede maar ook minder goede punten. 1. Weet waarom je iets schrijft. Er zijn drie soorten doelstellingen: - Amusement/entertainen: zorg voor verstrooiing, maak gebruik van spanning, gebruik veel beeldende middelen. - Educatief/leren: zorg voor herhalingen, werk van algemeen naar specifiek, geef opdrachten om het niveau te testen, maak gebruik van didactische hulpmiddelen. - Commercieel/overtuigen: gebruik herhalingen, voorbeelden, probeer eventuele tegenargumenten vooraf te ontkrachten, geef argumenten. 2. Ken je lezer (doelgroep) en probeer vanuit dit standpunt je tekst te structureren en te schrijven. 3. Structureer je pagina's en teksten logisch en duidelijk. - Kies voor een logische indeling: chronologisch, geografisch, alfabetisch, thematisch, methodisch. - De rubrieken mogen elkaar niet overlappen, moeten ongeveer van hetzelfde gewicht zijn en moeten van dezelfde orde zijn: informeren is een overkoepelende term. - Gebruik minimaal drie en maximaal zeven rubrieken/koppen/links/menu-items om je tekst of je pagina te structureren.
40
4. Als je tekst in de openingspagina's van een site of een onderdeel daarvan staat, zul je meer tijd en energie moeten besteden aan de teksten. - 'Bovenin' de site staan de algemene pagina's, die bedoeld zijn om lezers zo snel mogelijk naar de juiste informatie te leiden. Op dit niveau werk je bijna als een soort reclamebureau, je probeert te ‘verleiden’ en bezoekers over de streep te halen. - Op het middelste niveau staan de teksten die het meest worden gelezen (veelgestelde vragen, samenvattingen) en de verwijspagina's naar dieper gelegen documenten. Hier werk je als een tijdschriftredactie. - Onderin de site staan de langere teksten: originele documenten, rapporten, verslagen. Deze hoeven niet altijd bewerkt en herschreven te worden. Hier werk je als een boekredactie. 5. Maak zoveel mogelijk gebruik van vaste tekstformules, met een vaste indeling. - Nieuwsberichten: kop, lead, tussenkoppen na 2-3 alinea's. 6. Bijna 80% van de bezoekers van een website ‘scant’ de tekst vooral. Echt lezen doet maar 16%. Dit geldt vooral voor het hoogste niveau van de site. - Maak je site scanbaar door te werken met bullets, signaalwoorden of links, koppen en tussenkoppen, illustraties. - Gebruik bij voorkeur niet meer dan één idee of argument per alinea. 7. Schrijf actiegericht. - Zet bij het aanbrengen van links de handeling voorop. Dus niet: 'Als u meer wilt weten over ..... klik dan hier', maar: 'Klik hier als u meer wilt weten over...'. - Plaats bij alinea’s de belangrijkste informatie vooraan, wacht niet tot het eind. - Zet links meteen bij de tekst waar het over gaat, laat lezers niet onnodig lezen (behalve als je daar een doel mee hebt, zoals het willen laten uitlezen van de hele tekst). 8. Schrijf lezergericht. - Neem een denkbeeldige lezer in gedachten, zoals een leerling, een leraar of een ouder. Schrijf vervolgens je stuk rechtstreeks voor hem of haar. - Lees je stuk hardop voor, het liefst aan iemand van de doelgroep en vraag of hij het begrijpt en zich aangesproken voelt. - Probeer te variëren in je stijl en toon. Probeer een zin of een alinea op een paar manieren te schrijven: puntig, jolig, verheven, neutraal, niet betuttelend, rechtstreeks aansprekend. Kijk wat het beste werkt. 9. Koppen zijn bedoeld om lezers meteen duidelijk te maken waar een tekst over gaat. - Koppen staan nooit alleen: de rest van de pagina (illustraties, tussenkoppen, links) werkt ook mee. Maak er een geheel van. De kop mag best een grap bevatten, als uit de rest van de informatiemiddelen (beeld, onderkop) maar duidelijk is waar het stuk over gaat. - Koppen mogen nooit alleen prikkelend zijn (zoals bij tijdschriften), maar moeten ook de lezer een indicatie geven waar een tekst over gaat. - Bij langere teksten kun je tevens gebruik maken van een onderkop of ‘chapeau’. 10. Een lead is een inleidende alinea, veelal gebruikt bij kortere nieuwsberichten. - Bij langere artikelen gebruik je een inleiding. Bij rapporten, boeken en notities gebruik je een samenvatting. - De inleiding, lead of samenvatting trekt de lezer in de tekst en geeft antwoord op de vragen: waar gaat het artikel over, voor wie is het bestemd en welke vragen worden beantwoord. - Een inleiding, lead of samenvatting fungeert als een toegangspoort of opwarmertje voor de tekst. Maak bijvoorbeeld gebruik van een quote (citaat) of een expliciete vraag. - De pagina-links (tussenkopjes) kunnen in zo'n opzet fungeren als inhoudsopgave. 11. Tussenkoppen hebben op het web een iets andere functie dan bij tijdschriften. Ze helpen mee een tekst scanbaar te maken en worden als 'paginalinks' gebruikt bij een inhoudsopgave. - Maak ze niet te kort: 2-3 woorden minimaal. Vuistregel: een tussenkopje na elke twee tot vier alinea's.
41
-
-
Alle tussenkopjes tezamen moeten een duidelijk beeld geven van wat de tekst behelst. Lezers moeten al scannend naar het juiste deel van de tekst worden geleid, via de tussenkopjes. De tekst moet ook te lezen zijn zonder de tussenkoppen.
12. Goed gekozen beeld kan in sommige gevallen grote delen van je tekst vervangen. - Bedenk bij al je teksten: kan dit niet makkelijker in een foto, illustratie of animatie worden - omgezet? - Gebruik voornamelijk illustraties die informatief zijn, nieuwswaarde hebben, of een bepaald aspect onder de aandacht kunnen brengen. - Niet elke illustratie heeft een bij- of onderschrift nodig. Tegelijkertijd kan een onder- of bijschrift de volledige tekst vormen. - Benadruk het belangrijkste aspect van de illustratie in het bijschrift, maar vertel niet nog eens wat op een foto al te zien is. Maak korte en duidelijke zinnen. Staat er iets op de illustratie dat nog verder uitgewerkt moet worden? 13. Schrijf niet in zinnen, maar in alinea's. - Een alinea gaat over én ding, én onderwerp, én thema, én centrale bewering. - Geef een alinea een logisch verband: is het een toelichting bij een uitspraak, of zijn het de argumenten bij een bewering? - Geef de functie van een alinea aan met behulp van functionele woorden als bijvoorbeeld (voorbeeld), ten eerste (eerste argument), een bewijs hiervoor (argument), etc. Gebruik vervolgens goed gekozen verbindingswoorden als ten eerste, namelijk, vervolgens, daarentegen. - Zet de belangrijkste informatie in het begin van de alinea. Hierdoor weet de lezer wat hem te wachten staat. 14. Maak je zinnen zo levendig mogelijk. - Vermijd zoveel mogelijk de lijdende vorm (met worden, hebben, kunnen). Je kunt de lijdende vorm wel (spaarzaam) gebruiken als je iets wilt benadrukken. Vermijd ook zoveel mogelijk de naamwoordstijl, door de zelfstandige naamwoorden te vervangen door werkwoorden. Bijvoorbeeld: ‘Voor volgend jaar verwachten wij een opleving van de tulpenhandel’ -> ‘We verwachten dat volgend jaar de tulpenhandel weer zal opleven’. - Varieer zoveel mogelijk in de lengte van de zinnen: kort-kort-lang-kort of kort-langlang-kort leest een stuk plezieriger dan gemiddeld-gemiddeld-gemiddeld. - Vermijd onpersoonlijk taalgebruik: gebruik u of je in plaats van men. Spreek desnoods rechtstreeks aan. 15. Gebruik weinig modieuze woorden (termen) en kijk uit met het gebruik van synoniemen. - Elke wereld heeft z'n eigen jargon, maar veel van je klanten stellen dat niet op prijs of snappen het niet. Wie weet buiten de computerbranche wat er met ‘burst rate’ wordt bedoeld? - Als je meerdere malen hetzelfde woord moet gebruiken in een alinea probeer dan een synoniem te gebruiken. Gebruik niet meer dan één synoniem, anders wordt het te verwarrend. Maak het liefst gebruik van synoniemen die het begrip vergroten. Liever een keer: de grootste betonleverancier van Europa, dan vier keer de nietszeggende term ‘de organisatie’. - Denk aan een juist gebruik van leestekens: de komma, de punt, de puntkomma, streepjes, haakjes. Pas op met haakjes en pauzestreepjes: kijk of je zinnen tussen streepjes of haakjes kunt verwerken in de tekst. Of maak er een losse zin van. 16. Probeer zo veel mogelijk een eigen stijl en toon te vinden. - Gebruik niet te veel clichés (‘dit unieke product’), probeer zo concreet mogelijk te schrijven (abstracties zijn het moeilijkst te verteren) en geef waar mogelijk voorbeelden. - Probeer zo precies mogelijk te schrijven. Probeer zo beeldend mogelijk te schrijven. Weifel niet te veel, enerzijds-anderzijds-stukken zijn vaak niet te lezen. - Probeer zo te schrijven zoals je tegen een goede vriend zou praten.
42
8
Websites bruikbaar bij de lay out van Frontpage
Zelf animaties maken www.gifworks.com Eenvoudige 3dtekstmaker http://www.3dtextmaker.com/ Zelf buttons ontwerpen www.buttongenerator.com Foto’s Website met foto’s http://www.istockphoto.com/index.php HTML Wil je je verdiepen in HTML dan vind je hier online cursussen en alle benodigde informatie www.handleidingen.html.nl Opmaakprofielen Wat je kan doen met opmaakprofielen . Voorbeelden van stijlen. http://www.csszengarden.com/ 100 do’s en dont’s voor webdesign http://www.spiderpro.com/pr/prstgm001.html
43
Evaluatieformulier eindopdracht
Evaluatie eindopdracht Frontpage Onderwerp:
Worden er minimaal 4 pagina’s gebruikt in de site?
Ja / Nee
Bevat de website informatieve teksten gericht op de onderbouw?
Ja / Nee
Zijn er minimaal 2 (opgemaakte) afbeeldingen ingevoegd?
Ja / Nee
Bevat de website een pagina met relevante url’s buiten de eigen site?
Ja / Nee
Is er een hyperlink aangemaakt naar jouw emailadres?
Ja / Nee
Is de website voorzien van een navigatiebalk en werkt deze goed?
Ja / Nee
Is er een duidelijke structuur/ layout (lagen) gericht op leerlingen?
Ja / Nee
Werkt de website goed als je deze via de browser gaat bekijken?
Ja / Nee
Alle 8 de vereisten moeten met een JA beoordeeld zijn Opmerkingen/verbeteringen: …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… …………………………………………………………………………………………………………… ……………………………………………………………………………………………………………
AKKOORD
44
Ja / Nee
