Stappenplan voor een eenvoudige html-pagina met Frontpage 2000

Met FrontPage kun je snel pagina's maken die leesbaar zijn voor het World Wide Web (WWW). Het WWW-formaat van tekst is zo ontwikkeld, dat iedere computer het lezen kan en afbeelden. Dat is bereikt door de tekst als "platte tekst" te geven (dus zonder opmaak), waarbij de opmaak van de pagina en de tekst als extra code is toegevoegd aan de platte tekst. Daardoor kan iedere computer (Mac, pc, unix...) de tekst lezen en de opmaakcode interpreteren. Om deze reden ook zien WWW-pagina's er op verschillende computers anders uit.

Maken van een nieuwe pagina

1. Maak m.b.v. Explorer een werkfolder waarin alle bestanden komen te staan (in dit voorbeeld C:\TEMP\7M063).
2. Start FrontPage Express vanuit Start/Programs...
3. Maak een nieuwe pagina met File | New | Page... (of CTRL+N of met de "New Page" button).
   
4. Kies Normal Page uit het "New" dialoogvenster.
   
5. Kies bij File | Properties en geef de pagina een titel in het General tabblad.
   
6. Sluit het dialoogvenster "Page properties" af met "OK". Je kunt nu in Frontpage de tekst typen die bij de oefening hoort.

Tekst opmaken

1. Selecteer de tekst die je een bepaalde opmaak wilt geven.
2. Voor het maken van een header, klik in het "Formatting" toolbar en selecteer een van de headers (Heading 1, Heading 2, Heading 3, etc.) De tekst verandert automatisch in een groter lettertype.
   
3. Voor het maken van bold, italic, en/of underlined tekst, klik op een van de buttons in de "Formatting" toolbar.
   

Invoegen van afbeeldingen

1. Kopieer of maak de plaatjes die je wilt gebruiken in je werkdirectory (in dit voorbeeld C:\TEMP\7M063).
2. Klik op de "Insert Picture from File" button of kies Insert | Picture | From File...
   
3. Ga naar je werkdirectory. Selecteer de afbeelding die je wilt invoegen en klik op "OK". De afbeelding verschijnt in je tekst. Maak zoveel mogelijk gebruik van JPG-afbeeldingen. Andere files moeten eerst met Corel PhotoPaint worden geconverteerd naar JPEG.
4. Om de afbeelding goed uit te lijnen met de tekst, selecteer de afbeelding en klik rechts met de muis. Selecteer "Picture Properties...".
   
5. Bij het "General" tabblad kun je een Text intypen die verschijnt wanneer de cursor boven de afbeelding blijft hangen.
   
6. Bij het "Appearance" tabblad kun je spelen met de verschillende mogelijkheden om de tekst uit te laten lijnen ten opzichte van de afbeeldingen.
   

Het opslaan van de file

1. Selecteer File/Save of File/Save as of klik op de Save button.
   
2. Ga naar je werkdirectory waar ook de afbeeldingen staan, geef je file een herkenbare naam, en druk op "Save".
   

Vergeet niet na afloop de tekst en afbeeldingen (dus *.htm en *.jpg) te uploaden naar de server!!!
Bij het uploaden de JPEG-plaatjes (*.jpg) selecteren, en niet de BMP of DWG files!!!

Maken van tabellen

Tabellen zijn eigenlijk hetzelfde als tabellen die je overal elders tegenkomt: een soort raster met rijen en kolommen waarin je gegevens kunt plaatsen. De functionaliteit van FrontPage Express om met tabellen om te gaan lijkt erg veel op die van Word. Toch zijn er enkele verschillen omdat tabellen voor html eenvoudigweg anders zijn.

Hierboven staat een lege tabel van 3 kolommen en 2 rijen met een breedte van 50% van het scherm.

Hierboven staat dezelfde tabel met inhoud voor de cellen. Je kunt gewoon typen in de cellen.

Als je rechts-klikt in een cel van een tabel, krijg je een pop-up scherm waarin je "Table properties..." kunt kiezen. De Bordersize bepaalt hoe groot de buitenkant van je tabel wordt. Is Bordersize = 0, dan zie je geen lijnen:

Bordersize = 0 wordt veel gebruik wanneer je tekst, plaatjes, en animaties over verschillende kolommen in je Internetpagina wilt plaatsen. Cellpadding geeft aan hoeveel pixels ruimte je wilt hebben tussen de lijnen van de tabel en de inhoud die in de cellen komt. Cellpadding = 20 ziet er bijvoorbeeld als volgt uit:

Vervolgens is er nog Cellspacing, dat aangeeft hoeveel afstand de cellen van elkaar moeten houden in de tabel. Het volgende voorbeeld heeft Cellspacing = 20:

Tevens kun je voor een hele tabel een achtergrondkleur instellen m.b.v. Background color (ook hier rechtsklikken op de tabel, en "Table properties..." kiezen):

De kleuren van individuele cellen zijn te bepalen als je rechtsklikt in de cel die je wilt veranderen, en dan "Cell properties..." kiest:

Je kunt kleuren voor cellen gebruiken om een tabel snel inzichtelijk te maken. Kijk bijvoorbeeld eens naar deze tabel die de resultaten van "Evaluatie2.xls" laat zien als een tabel:

Invoegen van hyperlinks

Met hyperlinks kun je verbindingen leggen naar andere html-documenten of andere plaatsen in hetzelfde document.

Web Pagina controleren en Uploaden

Nadat je pagina is opgeslagen kan je 'm controleren in een web-browser door daarin File | Open te kiezen. Let goed op of alle afbeeldingen correct verschijnen. Natuurlijk kan je dit pas echt goed bekijken nadat je je werk hebt ge-upload!

Het uploaden gaat zoals gewoonlijk. De afbeeldingen die je hebt gebruikt in de pagina staan nu echter in dezelfde directory als je document, net als eventuele andere afbeeldingen die je pagina nodig heeft (background, etc.). Het is de bedoeling dat je alles wat in die directory staat gaat uploaden.

Nadat je alles hebt ge-upload moet je controleren of de pagina er uitziet zoals je wilt. Als er afbeeldingen missen kan dat komen omdat je vergeten hebt ze te uploaden. In dat geval kan je de benodigde bestanden alsnog uploaden.

Of het komt omdat je afbeeldingen hebt gekozen uit een andere directory dan die waarin het document was opgeslagen. Ook in dat geval zal de pagina er op je eigen computer goed uit zien, maar zullen de afbeeldingen op Internet missen, omdat verwezen wordt naar een directory op jouw computer. In dit laatste geval is het 't eenvoudigst de afbeelding uit je document te verwijderen en opnieuw te plaatsen, maar pas nadat je de betreffende afbeelding in de juiste directory hebt gecopieerd. Nu moet je het de pagina saven en opnieuw uploaden, samen met de eventueel nieuw toegevoegde afbeeldingen.

Tot de deadline kunnen files altijd opnieuw worden ge-upload naar de web-site.

Meerdere pagina's en hyperlinks

Wanneer je naast de pagina index.htm nog meerdere pagina's wilt uploaden, dan kan dat! Zorg er echter voor dat de andere pagina's vanuit index.htm bereikbaar zijn door middel van hyperlinks. Een hyperlink is bijvoorbeeld een stuk tekst dat onderstreept verschijnt op je pagina en waarmee je, door erop te klikken, terecht komt op een andere pagina.

Hyperlinks maak je door de tekst die de link moet vormen (dit kan ook een afbeelding zijn) te selecteren en vervolgens Insert | Hyperlink te kiezen. Type bij URL de naam van het te linken document in.
Let op: het moet wel in dezelfde directory staan als je huidige document! Zorg ervoor dat er geen andere informatie bij staat, zoals http:// of een directory-naam of zo: alleen de filenaam met uitgang.

Meer hulp

Copyright © 1998 - 2005. Design Systems. Eindhoven University of Technology. For questions, comments, or technical problems, please contact the webmaster.