1

Frontpage 98 editor

Wordt geïnstalleerd in de subdir c:\program files\Microsoft frontpage\bin\fpeditor.exe met als snelkoppeling c:\program files\microsoft frontpage\frontpage editor

Naast de titelbalk vind je de menubalk, de standaardwerkbalk (standard toolbar)en de opmaakbalk (format toolbar).Andere werkbalken bekom je met de optie View uit het menu.

Onder het werkvenster vind je de normal-, html- en previewfolder.Het normalvenster gebruikt men om tekst in te voeren. Het htmlvenster toont de tekst met alle htmlcodes en preview werkt als een browser. Hier kan men het resultaat bekijken.

1.De structuur van een html-document

Om een nieuw document aan te maken kiest men uit het menu file,new,normal page.
Automatisch worden volgende htmlcodes aangemaakt:
<html><head></head><body></body></html>
Zij vormen het geraamte van een htmldocument.

2.Een titel in de titelbalk

Kiest men vanuit het menu voor file, save as dan kan men volgende waarden invoeren:

page title: de titel die in het titelvak van het venster moet komen
page url: naam van de pagina

Verder krijg je de keuze tussen bewaren

as file: als een feitelijk html-document
as template: als basis voor een html-document

Om een titel achteraf te wijzigen, kiest men de page properties met het snelmenu. De titel kan in de generalfolder gewijzigd worden.

3. Een nieuwe regel in een tekst

paragraaf met de return-toets .
line break met shift-return of met de opties insert, line break vanuit het menu. De -toets maakt het mogelijk de editor in te stellen zodat het line break symbool al of niet te zien is.
horizontale streep met insert, horizontal line vanuit het menu

4. Tekstopmaak

In de opmaakbalk vindt men volgende toetsen

B voor bold (vet)
I voor italics (schuin)
U voor underscore (onderlijnd)

Het volstaat de op te maken tekst als blok te slepen en daarna de opmaaktoets(en) aan te slaan
Met volgende toetsen kan men een paragraaf links of rechts aligneren en centreren:
Een insprong van een paragraaf bekomt men met de -toets
Een linkse tab kan met
Met het snelmenu kiest men de Paragraph Properties en kan men de stijl van de paragraaf bepalen.
Een spellingscontrole kan men uitvoeren door uit het menu de opties Tools, Spelling of het -icon uit de werkbalk te kiezen.
Met Edit, Find en Replace kan men tekst opzoeken en automatisch laten vervangen.

5. Koppen, fonts en kleuren

De zes hoofdingtypes kan men vanuit het selectievak van de opmaakbalk kiezen. Het volstaat de tekst te selecteren en daarna te kiezen voor de optie heading 1 tot heading 6
Lettertypes zijn selecteerbaar vanuit de fontlijst
Andere groottes bekomt men met waarbij de eerste knop een groter lettertype selecteert en de tweede knop een kleinere letter afbeeldt.
Kleur in de letters bekomt men met . Uit het kleurenpallet kan men kiezen voor basiskleuren of kan men zelf nog aangepaste kleuren creëren.
Met het snelmenu, Font Properties kan men de geselecteerde karakters volgens een bepaalde stijl, met een bepaalde font en kleur en op een bepaalde positie (subscript of superscript) afdrukken.
Paginakleuren (achtergrondkleuren) kiest men door via het snelmenu de page properties op te roepen of via het menu format, background te selecteren.
- Men kan een specifieke kleur kiezen voor o.a. de achtergrond, de tekst,..
- background image: om een bestaande tekening als achtergrond te gebruiken. FrontPage laat toe om files van de volgende formaten te importeren BMP (Windows and OS/2), TIFF, MAC, MSP, PCD, RAS, WPG, EPS, PCX, en WMF. Ze worden automatisch omgezet naar een GIF (indien minder dan 256 kleuren) en JPEG-formaat (indien meer dan 256 kleuren).
- get background : om de kleuren van een andere (internet) pagina te halen
Kiest men bij de pageproperties voor de general folder dan zijn volgende opties mogelijk::
- title: wijzigingen in de paginatitel
- base location: de absolute plaats waar het document zich bevindt; bijvoorbeeld http://www.internet.be/ waar de lokatie of de file document.htm kan zijn.

5. Lijsten

genummerde lijst
- met uit de opmaakbalk
- vanuit het selectievak van de opmaakbalk (keuze: numbered list)
ongenummerde lijst

met uit de opmaakbalk
vanuit het selectievak van de opmaakbalk (keuze: bulleted list)

Andere lijsten
Maak een genummerde of ongenummerde lijst en zorg dat de cursor op een item staat. Kies het snelmenu en de optie List Properties. Met Plain Bullets en Numbers kan men andere mogelijkheden selecteren.
Met de optie Images Bullets kan men zelfs tekeningen als lijstaanduiding gebruiken.
List Item Properties uit het snelmenu maakt het mogelijk vanaf een bepaald item een nieuwe lijstvorm te kiezen. Het volgende is dan ook mogelijk:

aaaa

bbbb

ccccc

dddd

eeee

fffff

5. Afbeeldingen

In het document op te nemen met de opties insert, image uit het menu of door het -symbool aan te klikken.
Verder kan men kiezen uit
- other locations
  - from file: een grafische file op uw computer
  - from location: het url-adres waar de afbeelding op het internet te vinden is
- clip art: ingebouwde gif-plaatjes

De internetbrowser werken enkel met GIF of JPEG file formaat . FrontPage laat toe om files van o.a. volgende formaten te importeren BMP (Windows and OS/2), TIFF
, MAC, MSP, PCD, RAS, WPG, EPS, PCX, en WMF. Ze worden automatisch omgezet naar een GIF (indien minder dan 256 kleuren) en JPEG-formaat (indien meer dan 256 kleuren).
PNG (Poratble Network Graphics format) is een nieuw formaat dan op het internet meer en meer gebruikt wordt.
Door de tekening te selecteren en de rechtermuisknop aan te slaan kan men de properties kiezen. We onderscheiden volgende mogelijkheden:
- general
  - image source: het pad naar de grafische file
  - type: GIF of JPEG
    Een GIF-file kan men transparant maken, zodat de achtergrond van de tekening overeenkomt met achtergrond van het document
    
    Een interlace-gif is speciale grafische file die in gradaties kan ingelezen worden. Hier kan men instellen dat het resultaat maar mag getoond worden als alle data werd ingelezen.
    Van een JPEG-file kan men de quality instellen. Dit heeft zijn invloed om de compressie en uiteraard op de kwaliteit. Progressive pases is een instelling te vergelijken met interlace van een GIF-file
  - alternative representations met vooral de text-waarde die afgedrukt wordt indien men een browser gebruikt die geen grafische mogelijkheden heeft.(ALT-code)
  - default link verwijst naar de URL die opgeroepen moet worden indien men de afbeelding aanklikt.
- appearance
  - layout
    - alignment:
      opgelet niet alle alignmenttypes worden door alle browsers ondersteund!
      - bottom: de onderkant van de afbeelding wordt uitgelijnd met de onderkant van de regel; dit is de default instelling
      - middle: het midden van de afbeelding wordt uitgelijnd met de onderkant van de regel
      - top: de bovenzijde van de afbeelding wordt uitgelijnd met de bovenkant van de regel
      - left: plaatst de afbeelding links en de tekst rechts
      - right: plaatst de afbeelding rechts en de tekst links
    - border thickness bepaalt de boorddikte in pixels
    - horizontal spacing: de afstand tussen de afbeelding en tekst aan de linker- en rechterkant
    - vertical spacing: de afstand tussende afbeelding en de tekst boven en onder
  - size: om de grootte van de tekening aan te passen. Dit kan ook door de randen te slepen.
    Keep aspect Ratio zorgt dat de verhouding tussen lengte en breedte bewaard blijft.
Opmerkingen
- Beschik je over een TWAIN compatible scanner of camera dan kan je via Insert image, scan een gescande tekening toevoegen.
- Vanuit het menu kan krijgt men met de keuze Image Toolbar een werkbalk waarmee men tekeningen kan rotereren, donkerder maken, een stukje uitknippen

5. Links

Selecteer de tekst die naar de link verwijst en druk de -knop.
Men kan een link plaatsen naar:
- een momenteel geopende html-documenten: te selecteren uit de lijst
- URL: het path naar een html-document op de eigen computer of naar een URL op het internet

opmerkingen

Bij het invoeren van een path naar een html-document op de eigen computer moeten men zorgen voor een relatieve schrijfwijze. Dus nooit c:/website/document1.htm, immers op de internetserver kan het document op een andere drive voorkomen.
Indien alle documenten in eenzelfde directory dan volstaat de documentnaam bijvoorbeeld document1.htm als URL.
Wordt het document in een subdirectory bewaard dan gebruik je een relatieve verwijzing bijvoorbeeld website/document1.htm
Een ingetikte URL in een frontpagedocument wordt automatisch als een link herkent. De link verwijderen kan door met het snelmenu de hyperlink properties op te roepen en deURL te wissen.

6. Hotspots

Onderdelen van een tekening kan men aanduiden als hotspot zodat bij het aanklikken een specifieke link wordt uitgevoerd. Door de tekening te selecteren verschijnt de image toolbar onderaan het scherm.

De rectangle , circle en polygon knoppen kan men de gebieden definiëren.waarna het create Hyperlink-venster opent. Hier kan men verwijzen naar een ander document op de eigen computer of op het internet. (zie links)
De highlight hotspots-toets toont een overzicht van de geselecteerde gebieden. Terwijl de selectknop toelaat een specifieke hotspot te kiezen.

7. Tabellen.

Een tabel invoegen kan met de -knop, met de opties table, insert table of draw table uit het menu. In het laatste geval kan men met een potloodcursor de tabel met de nodige rijen en kolommen tekenen.
Met de optie table properties uit het snelmenu kan men volgende eigenschappen wijzigen:
- alignment: horizontale uitlijning van de tabel t.o.v. de pagina; kan left, center of right
- float: om tekst links of rechts van de tabel te plaatsen
- border size: dikte van de rasterlijnen
- cell padding: afstand tussen de rand van de cel en de inhoud
- cell spacing: afstand tussen de verschillende cellen
- specify width: breedte van de tabel in pixels of procentueel t.o.v. de pagina
- specify height: idem als vorige maar voor de tabelhoogte
- custom background: achtergrondkleur of tekening
- custom colors: borderkleuren
De cel-attributen kan men invoeren door in de cel het snelmenu op te roepen en de optie cell properties te selecteren. Volgende parameters zijn wijzigbaar
- horizontal aligment: left, center of right
- vertical aligment: top, middle of bottom
- header cell: voor een rij-of kolomtitel
- specify width en height: in procent t.o.v. de tabelbreedte-hoogte of in pixels
- row span: aantal cellen die onder elkaar samengenomen moeten worden
- column span: aantal cellen die naast elkaar samengenomen moeten worden
- custom background: achtergrondkleur of tekening
- custom colors: borderkleuren
een cel ,rij, kolom of tabel selecteren kan met table, select cell, row, column of table.
Een rij of kolom kan men verwijderen door ze te selecteren en de delete-toets aan te slaan.
Een rij of kolom toevoegen kan vanuit het menu met de opties table, insert rows or columns.
Een bestaande cel opsplitsen in rijen of kolommen kan met split cells, samenvoegen kan men merge cells.
Een titel boven de tabel kan met insert caption.
Distribute rows evenly laat toe om van een geselecteerde kolom de rijen evenredig te verdelen, terwijl distribute columns evenly de kolommen van een geselecteerde rij evenredig verdeeld.
De opties convert text to table en convert table to text laten toe een bestaande tekst in een tabel te plaatsen zonder hem opnieuw te moeten invoeren of een tabel te verwijderen zonder de tekst te verliezen.
Door uit het menu View, Advanced Toolbar te kiezen krijgt men een werkbalk waarmee men op een handige manier een tabel kan tekenen.

8. Formulieren

Een formulier bestaat uit verschillende formelementen. Men kan ze uit de Forms toolbar selecteren (View, Forms Toolbar)
opgelet: Een formulier verschijnt met stippellijntjes op het scherm. De verschillende elementen (objecten) van een formulier moeten dus allen binnen de stippellijnen geplaatst worden.
- tekstinvoervak van één regel
  Kies de one-line text box-knop uit de werkbalk.
  Voer volgende parameters in:
  - name: de naam van de variabele
  - initial value: de defaultwaarde
  - width: breedte van het tekstvak, default 20
  - password field: indien yes, tekst met * te zien
  - display name: de naam die gebruikt wordt wanneer een waarschuwing moet afgedrukt worden
  - data type met text, integer en number
  - text format bepaalt welke karakters toegelaten zijn
  - numeric format met o.a. decimaal teken
  - data length: aantal in te voeren karakters
  - data value: validatie van de ingevoerde waarden
  - tab order: bepaalt de volgorde in het formulier
- tekstinvoervak van verschillende regels
  Kies de scrolling text box-knop uit de werkbalk.
  Voer volgende parameters in:
  - name: de naam van de variabele
  - initial value: de defaultwaarde
  - width: breedte van het tekstvak, default 20
  - number of lines: default 2
  - validate: zie vorige
  - tab order: bepaalt de volgorde in het formulier
- aankruisvakjes
  Kies de check box-knop uit de werkbalk.
  Voer volgende parameters in:
  - name: de naam van de variabele
  - value: de defaultwaarde is ON
  - initial state: checked plaatst een vinkje in het aankruisvak en wordt de defaultwaarde in de variabele
  - tab order: bepaalt de volgorde in het formulier
- keuzerondjes
  Kies de radio box-knop uit de werkbalk.
  Voer volgende parameters in:
  - group name: de naam van de variabele; is voor verschillende keuzerondjes dezelfde naam.
  - value: de waarde die in de variabele gestockeerd wordt indien het rondje geselecteerd werd.
  - initial state: selected plaatst een zwarte stip in het keuzerondje en wordt de waarde in de variabele
  - opgelet: de verschillende keuzerondjes in eenzelfde formulier plaatsen!
  - validate met display name, is de naam die gebruikt wordt wanneer een waarschuwing moet afgedrukt worden, en data required waarmee men kan bepalen dat minstens één keuzerondje moet geselecteerd worden.
  - tab order: bepaalt de volgorde in het formulier
- uitschuifkeuzelijst
  Kies de drop-down menu-knop uit de werkbalk.
  Voer volgende parameters in:
  - name: de naam van de variable
  - add; choice: de tekst die afgedrukt wordt in de keuzelijst
  - specify value: de waarde die in de variabele gestockeerd wordt indien dit item geselecteerd werd.
  - initial state: selected zorgt dat deze tekst wordt de defaultwaarde wordt
  - height: hoogte van de keuzelijstbox
  - allow multiple selections: indien al of niet meerdere keuzes kunnen gemaakt worden. Meerde keuzes kan men maken met CTRL-klik!
  - De toets modify laat toe wijzigingen aan te brengen, met remove kan een item verwijderd worden en met move up en move down kan men de volgorde wijzigen.
  - validate: zie vorige met disallow first item wanneer de eerste regel in de uitschuifkeuzelijst een instructieregel is.
  - tab order: bepaalt de volgorde in het formulier
- submit- en reset-knoppen
  Kies de push button-knop uit de werkbalk.
  Voer volgende parameters in:
  - name: de naam van de variable
  - value: de tekst die op de knop moet afgedrukt worden.
  - button type: submit om door te sturen, reset op de veldwaarden leeg te maken
  - tab order: bepaalt de volgorde in het formulier
  - form: bepaalt wat er met het formulier moet gebeuren bijvoorbeeld Send to: E-mail adres

9.Geluiden

Een geluidfile kan men samen met het inladen van een htmlpagina activeren door vanuit het snelmenu te Page Properties en de General-folder te kiezen. Daar kiest men een Background Sound.

Om een hyperlink te laten verwijzen naar een geluidsfragment, volstaat het in de link het pad naar de wave, midi, of ander geluidsfile op te nemen.

10. Frames

Via de menubalk, Frames kan men uit een lijst van mogelijke frames kiezen.
Set Initial Page gebruikt men om een reeds bestaand document in een frame te plaatsen, New Page om een nieuwe pagina aan te maken.

Elk frameonderdeel kan men met de Frameproperties (uit snelmenu) o.a. een naam geven, de grootte van het frame bepalen en via Frames Page achtergronden, titels, marges,...

10. En nog dit

File, Preview in Browser: om de pagina te testen in een gekozen browser.

Insert, Symbol: voor invoer van speciale tekens

Insert, Timestamp: een webbot waarbij datum en eventueel tijd aanduidt wanneer het document laatst gewijzigd werd.

Insert, Active Elements, Hover Button: om een zwevende knop te maken. Dit is een java-applet (fphover.class), dat bij gebruik op de internetserver moet geplaatst worden.
De code is

<applet code="fphover.class" codebase="_fpclass" width="120" height="24">
<param name="text" value="uitvoeren">
<param name="color" value="#000080">
<param name="hovercolor" value="#0000FF">
<param name="textcolor" value="#FFFFFF">
<param name="effect" value="glow">
<param name="url" value valuetype="ref">
</applet>

waarbij codebase="_fpclass" de directory is waar het applet op de server voorkomt.

Format, Animation: bepaalt de manier waarop een tekst op het scherm moet verschijnen.

Format, Theme: een bibliotheek van achtergronden en knoppen waaruit men kan kiezen.

Format, Page Transitions: bepaalt de manier waarop een volledige pagina moet verschijnen of verdwijnen. Indien wijzigingen niet onmiddellijk zichtbaar zijn , maak dan de cache van de browser leeg!!

Tools, Spelling en Thesaurus: controle van spelling en opzoeken van synoniemen.

Tools, Options: instellen van de manier waarop een miniatuur moet voorgesteld worden. Een klik op de miniatuur opent de tekening. Van een geïmporteerde tekening maakt men een miniatuur door de tekening te selecteren en vanuit het menu Tools, AutoThumbnail te kiezen.