E.M. van Nieuwaal. Frontpage Jouw vak op het leerlingenweb. Copyright

Transcriptie

1 Frontpage 2003 Jouw vak op het leerlingenweb E.M. van Nieuwaal Copyright

2 Inleiding Ontwerp een sitemap Index.htm Nieuwe pagina s maken Een pagina opmaken... 8 A. Tabellen... 8 B. Achtergrond, kleur, tekst... 9 C. Plaatjes invoegen De knoppenbalk Het inline frame Het voorbeeld bekijken Je pagina uploaden ALGEMEEN Je pagina uploaden naar het leerlingenweb met webdav... 18

3 Inleiding Deze handleiding heeft tot doel om je stap voor stap te leren werken met Frontpage, zodat je uiteindelijk je website online kunt plaatsen waar hij voor iedereen te bezoeken is. Mochten er onduidelijkheden of onvolkomenheden in staan, meldt dit dan aan Deze handleiding dient als handreiking hoe je een website zou kunnen maken. Het uiteindelijke ontwerp laat ik over aan jouw eigen creativiteit. Met vriendelijke groet, E.M. van Nieuwaal

4 1. Ontwerp een sitemap Maak een ontwerp voor je website en bedenk welke pagina s je er in wilt gaan opnemen. Denk meteen na over de naamgeving van de pagina s. Hieronder zie je een voorbeeld van een zo n sitemap 2. Index.htm Start Microsoft Office Frontpage 2003 via menu start, alle programma s Klik op het menu bestand, kies nieuw Rechts opent een snelmenu, kies hier Website met één pagina

5 Nu opent een venster met websitesjablonen, kies voor website met één pagina en houdt goed in de gaten waar je website wordt opgeslagen, pas dit eventueel aan met de knop bladeren.

6 In het scherm wat nu opent klik je met de rechtermuisknop om het snelmenu te openen. Kies hier voor nieuw, daarna Map Noem de map: knoppen In deze mappen komen straks de interactieve knoppen van de knoppenbalk te staan Dubbelklik op index.htm om het bestand te openen om te bewerken. Let op: We hebben nu een extra tabblad geopend, je kunt terug naar de mappenstructuur door op website te klikken. In deze lege pagina kun je vrij tekst typen en plaatjes plakken. Onthoud dat index.htm de pagina is waarop je bezoekers als eerste binnen komen zodra ze jouw website opvragen, dit is je voorgevel.

7 3. Nieuwe pagina s maken Voor de sitemap die we onder onderdeel 1 hebben gemaakt is het nodig om nog een aantal pagina s te maken waar we straks naartoe gaan verwijzen. Deze maken we in het tabblad website. Klik op de rechtse muisknop en kies nieuw en daarna lege pagina Noem deze pagina home.htm Herhaal dit en maak de rest van de pagina s van je sitemap. Geef de pagina s altijd herkenbare namen, zonder spaties of leestekens. De pagina s die je net hebt gemaakt hebben nog geen duidelijke titel. Ze heten allemaal nieuwe pagina 1, 2, 3 enz. Verander dit door er met de rechtse muisknop op te klikken en eigenschappen te selecteren. Verander hier de titel.

8 4. Een pagina opmaken A. Tabellen Omdat blind plaatjes plakken en typen meestal leidt tot een rommeltje op je website is het handig om een indeling te maken in tabellen, deze zijn niet zichtbaar voor je bezoeker, maar wel heel handig voor jou om de tekst en plaatjes, daar te laten staan waar jij dat wilt. Kies in het menu tabel voor invoegen, kies hier voor tabel Selecteer de benodigde rijen en kollommen, deze zijn later makkelijk samen te voegen of te verwijderen en in breedte aan te passen. Kies uitlijning centreren zodat de tabellen in het midden van het scherm verschijnen. Kies de breedte van de tabel in pixels op 800. (in verband met de resolutie van beeldschermen (800x600)

9 Belangrijk om de randen op NUL te zetten zodat die niet meer zichtbaar zijn (tenzij je zichtbare randen wilt natuurlijk). Let goed op het verschil tussen een tabel en een cel. Een tabel bestaat uit cellen Een tabel bestaat uit cellen Maak de middelste cellen groter door de randen van de tabel te verslepen. Pas de tabel zo aan zodat hij er zo uit gaat zien als hieronder. B. Achtergrond, kleur, tekst MS Frontpage werkt bijna hetzelfde als MS Word, je kunt tekst een kleur geven, vet gedrukt maken en centreren. Experimenteer hier zelf mee. Zorg ervoor dat je kleurkeuze in overeenstemming is met de boodschap van je website. Gebruik het snelmenu via de rechtermuisknop om bij de pagina, tabel of celeigenschappen te komen. Hier kan dan de achtergrondkleur worden aangepast. C. Plaatjes invoegen Ga in de cel staan waar de banner moet komen. Kies: invoegen Afbeelding uit bestand Kies hier de afbeelding die je als banner wilt gebruiken. Zorg dat het plaatje wat je hiervoor kiest, niet groter is dan bijvoorbeeld 600x100 pixels. Een banner maakt je website erg aantrekkelijk. Maak er één met bijvoorbeeld photoshop elements, maar dat is een andere cursus.

10 Dit kan dan bijvoorbeeld je resultaat zijn. Let er op dat de pagina door het invoegen van dit plaatje is gewijzigd, deze wijziging moet worden opgeslagen en het plaatje moet zijn eigen plek krijgen. Dat een pagina nog niet is opgeslagen zie je aan het sterretje op het tabblad. Klik op het tabblad met de rechtermuisknop en selecteer opslaan uit het snelmenu. Nu worden zowel de gewijzigde pagina als het plaatje opgeslagen in de map van de website. Klik op map wijzigen om het plaatje op juiste plaats op te slaan. Kies hiervoor de map images, zodat alle plaatjes daar vanaf nu worden opgeslagen. Dan kun je ze later altijd terugvinden. Klik op ok om terug te keren naar het werkblad.

11 4. De knoppenbalk De knoppenbalk gebruiken we om de bezoekers te laten navigeren door onze pagina. Door een pagina te koppelen aan een knop kan een bezoeker naar die pagina gaan door op de knop te klikken. Knoppen voeg je toe door in het menu invoegen te kiezen voor interactieve knop. Kies hier de knopvorm en kleur die jij het beste vindt passen bij je website Voor het voorbeeld kiezen we voor een randloze tab. De knop hebben we gelijk maar even 5 keer gekopieerd, zodat we straks 6 dezelfde knoppen hebben. Creëer afstand tussen de knoppen door er een spatie of tab tussen te voegen. Dubbelklik op de knop om de naam te wijzigen. Verander bij tekst de naam in Home. Deze eerste knop kan de bezoeker gebruiken om terug te keren naar onze hoofdpagina. Klik op bladeren om het bestand home.htm te koppelen aan deze knop. We maken nu een zogenaamde hyperlink!

12 Selecteer het bestand home en controleer of in de adresregel home.htm verschijnt. Let op: hier moet geen staan, maar home.htm Klik op ok om de koppeling te maken. Vervolgens op ok om terug te keren naar het werkblad Aan de andere knoppen kun je op dezelfde manier de overige pagina s koppelen. Het is weer tijd om alle wijzigingen op te slaan. De knoppen hebben we nog niet opgeslagen, we willen die graag in de map hebben die we daarvoor hebben aangemaakt. Klik daarom op map wijzigen. Selecteer de map knoppen en klik 2 x op OK 5. Het inline frame Het inline frame is een venster waar je doorheen kijkt. Herinner je je nog dat we index.htm onze voorgevel noemden? Inline frames zijn raampje waarachter je van alles kunt vertonen. Wij maken één inline frame waarin we alle nieuwe pagina s laten openen. Ga in de cel staan waarin het inline frame moet komen en klik op invoegen en daarna inline frame.

13 Het inline frame geeft ons een doorkijkje door de pagina. Dit inline frame kun je zo groot maken als je wilt door op de rand te klikken en de grootte door slepen aan te passen. De eerste pagina die we willen vertonen wanneer onze website openen is de home.htm pagina, die we in een eerder stadium al hebben gemaakt. Klik op beginpagina instellen om deze pagina te selecteren. We gaan nu het inline frame aanpassen aan onze wensen. Controleer weer of er home.htm in de adresregel staat en klik op ok. Een witte pagina vult nu het venster. Dubbelklik hiervoor op de rand van het inline frame. We willen bijvoorbeeld niet dat de rand van het inline frame zichtbaar is. We willen graag aangeven dat er indien nodig schuifbalken worden getoond Let ook even op de naam van het inline frame. Deze is nodig voor het instellen van het juiste doelframe (zie verderop). Pas eventueel de breedte en hoogte van het inline frame aan

14 De pagina die nu op ons werkblad is geopend is index.htm Het inline frame toont ons de pagina home.htm Als we nu in het inline frame iets typen, dan komt dit dus op de home.htm pagina te staan. Onder punt 5. De knoppenbalk hebben we de knoppen een naam gegeven en gekoppeld aan de bijbehorende pagina s. Nu is het tijd om aan te geven dat deze pagina s worden geopende in het inline frame. Selecteer de Home knop door erop te klikken met de muis klik op rechter muisknop en selecteer eigenschappen van hyperlink. Dubbelklikken kan natuurlijk ook. Klik hier op de knop doelframe om te bepalen in welk frame de knop opent. Selecteer I1, de naam van ons inline frame! Vink: instellen als standaard van pagina aan.

15 Controleer of bij de andere knoppen I1 ook als standaardframe is geselecteerd en sla de pagina op. 6. Het voorbeeld bekijken Om je website uit te testen klik je links onderaan in het scherm op voorbeeld. In deze voorbeeldmodus kun je je pagina niet bewerken! Keer hiervoor terug naar Ontwerpen. Voordat je naar stap 7 gaat moet je eerst alle pagina s opslaan. 7. Je pagina uploaden Om je pagina op het internet te kunnen zetten moet je beschikken over webruimte. Meestal zit er bij het abonnement van je internetverbinding wel wat webruimte. Een beter alternatief is een abonnement bij een webhost waar je voor betaalt. Hier kun je dan ook meteen een domeinnaam bestellen. De kosten hiervoor zijn niet hoog, je hebt al een webhosting pakket voor 9,99 euro per jaar. Een.nl domeinnaam vanaf 6,49 euro. Voor onze eigen website maken we gebruik van Webreus. ( Als je eenmaal je pagina hebt aangevraagd is het tijd om te gaan uploaden. LET OP: DIT IS DE BESCHRIJVING OM EEN PAGINA TE UPLOADEN ALS JE EEN EIGEN WEBSITE HEBT HEB AANGEVRAAGD. VOOR DE BESCHRIJVING VAN HET LEERLINGENWEB ZIE PUNT 8 Klik op het tabblad website om naar de mappenstructuur te gaan. Klik op de knop externe website

16 Klik vervolgens rechtsboven op Eigenschappen van Externe website Vul bij locatie van externe website in: ftp://voorbeeldwebsite.nl Bij FTP-map vul je httpdocs in. De httpdocs map is de map waarin alle internetbestanden moeten komen om ze zichtbaar op het internet te maken. Dus alle html bestanden, knoppen en plaatjes. Als je later wijzigingen aan je pagina s aanbrengt moet je deze natuurlijk wel weer opnieuw uploaden. Je krijgt nu het volgende scherm te zien:

17 Links staat de website zoals jij die op je computer hebt gemaakt. Rechts staat de website die op internet staat. Verwijder eerst rechts het index.html bestand, dit is een automatisch aangemaakt bestand. Let op dat je gaat publiceren van lokaal naar extern. Klik op website publiceren om je bestanden up te loaden. De bestanden die eerst links stonden, staan nu ook rechts. Ze staan nu op het internet. De voorbeeldwebsite staat op

18 8. Je pagina uploaden naar het leerlingenweb met webdav Webdav is net zoiets als het bij punt 7 beschreven ftp protocol. Het is een manier om bestanden te verslepen van een lokale map naar een map ergens op het internet. Het grote voordeel van Webdav is dat je hem kunt koppelen aan een Stationsletter. Klik op het tabblad website om naar de mappenstructuur te gaan. Klik op de knop externe website Vervolgens rechtsboven op Eigenschappen van Externe website Selecteer Webdav Vul het adres in: webdav Let op de s achter https!! Let op webdav!!! Klik op ok

19 Log in met je personeelscode gevolgd door corp.atvo.nl Voor mij is Gebruik het wachtwoord wat je gebruikt om op het personeelsweb in te loggen. Na korte tijd verschijnt het volgende scherm Links zie je het scherm met de lokale website zoals wij die hebben gemaakt. Rechts staan de mappen die zich op de externe website bevinden. We zijn hier in de hoofdmap en daar moeten onze bestanden NIET staan Klik op de map LLN (dit verwijst naar het leerlingenweb)

20 Klik op Marnix In deze map staat als het goed de map met uw vak er in. Klik daarop Daarin kunt u uw bestanden plaatsen. Twee manieren van uploaden 1. Controleer of de synchronisatie van van lokaal naar extern is en klik op het knopje website publiceren

21 2. selecteer in het linkse scherm alleen de bestanden die u wilt uploaden en druk op het pijltje (2)als je bijvoorbeeld maar 1 pagina hebt aangepast (scheelt tijd!) Tipje voor de gevorderde gebruiker: Het is ook mogelijk om Webdav te benaderen als webmap met behulp van het programma netdrive wat je kunt downloaden van het personeelsweb: ICT Handleidingen en Tips website onderhoud NETDRIVE Het aardige is dat dit programma de webmap dan koppelt aan een stationsletter en als schijf benaderbaar is. Dit kan op school ook. Het slepen van bestanden is dan nog eenvoudiger en sneller.