Frontpage 98 explorer

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

Frontpage explorer maakt het mogelijk op een overzichtelijke manier een website aan te maken en te onderhouden.
Bij het starten van explorer start automatisch de webserversoftware. Dit kan je zien aan  Web Server Idle op de taakbalk. Dit betekent dat de aangemaakte websites via het internet-intranet bereikbaar zijn, tenminste wanneer het netwerk voldoet aan de internet-intranetnormen (TCP/IP, domeinnaam,..)

Wanneer men explorer de eerste keer start krijgt men de keuze om ofwel een reeds bestaande website te openen of een nieuwe aan te maken. We kiezen het laatste. Een wizard leidt je door de elementaire creatieprocedure.

1. Hoe een nieuwe website aanmaken?

In het New Frontpage Web selecteren we de optie One Page Web. Als titel voor de huidige website tikken we even voorstellen. Bemerk de httpschrijfwijze zonder spaties!. Via deze URL is de website via het net bereikbaar.Elke website wordt beveiligd met een naam en een paswoord. Deze zijn hoofdletterafhankelijk.

Explorer geeft je verschillende views die je kan kiezen in de views bar. De navigation view start automatische met een Home Page als startdocument. In de folderview kan men zien dat de Home Page in werkelijkheid index.htm noemt.

De Home Page kan men bewerken door te dubbelklikken op het icon. Nieuwe pagina's kan men creëren met de New Page-knop uit de werkbalk en daarna een dubbelklik op het icon. Telkens start frontpage editor.

Een pagina kan men wissen door de pagina te selecteren in het navigationvenster en daarna de deletetoets aan te slaan. Een volledige website kan men wissen door vanuit het menu te kiezen voor File, Delete Frontpage Web.

Een eerste voorbeeld...

We maken een nieuwe website met als naam cursus frontpage 98

De homepage krijgt volgende inhoud:

• De titel heeft als lettertype MS Sans Serif, andere tekst gebruikt default font
• Het handje vind je in de web navigators cliparts
• De hyperlinks verwijzen naar nieuwe pagina's in dezelfde website.
  Selecteer de -knop.Kies telkens voor een normal page en plaats in elke pagina  de verwijzingtekst als titel.
• Sluit frontpage editor en bekijk de verschillende views. De layout varieert  van een lijst van files naar de grafisch structuur van de website.
• Het lokaal testen van de pagina's kan men door op één of andere view ofwel de naam van het document ofwel het icoontje dat ernaar verwijst te klikken. Zo komt men terecht in de editor. De previewknop laat toe het document met een browser te bekijken.
  Daar browsers HTMLcode op een verschillende manier interpreteren is het nodig met verschillende browsers te testen. Dit kan door de te testen browsers op uw computer te installeren en in het menu van frontpage editor te kiezen voor file, preview in browser.

 

 

Naast de browser kan men ook met een verschillende  schermresolutie testen.

 

 

 

In de editor kan men een hyperlink testen door CTRL-KLIK aan te slaan. Ook de navigatieknoppen uit de werkbalk kan men gebruiken.

• In elk subdocument zorgen we dat men door het klikken op het -symbool het hoofddocument opnieuw geactiveerd wordt. Door achtereenvolgens het symbool  en de hyperlinkknop te selecteren kan men een link koppelen aan een tekening.
  Bemerk dat men de hyperlinktekening door kopiëren op de andere subdocumenten kan plakken.
• Tot slot plaatsen we in elk van de subdocumenten een gedeeltelijke schermafbeelding van respectievelijk de editor, de explorer en de webserver.
  Met de knop PRINT SCREEN maakt men een opname van een volledig beeldscherm, die men met plakken in het document kan plaatsen.
  Selecteert men de tekening dan verschijnt onderaan het scherm de image toolbar waarmee men o.a. de tekening in alle richtingen kan roteren, donkerte en scherpte regelen, opnieuw in de oorspronkelijke vorm herstellen of met de croptool een gedeelte van de tekening kan knippen. Selecteer het kader en beëindig met een dubbelklik.

Een tweede voorbeeld... PCB-store

We maken een website voor een winkel van Posters, CD's en Boeken en gebruiken frames, multimedia en forms.

ontwerp:

• Home Page: algemene informatie van de winkel met links naar
• Posterpagina:
  • afbeeldingen van posters gemaakt in image composer met prijzen, afmetingen en bestelnummer
  • verwijzing naar Home Page en bestelformulier
• CDpagina
  • titel van CD met prijs, een geluidsfragment en bestelnummer
  • verwijzing naar Home Page en bestelformulier
• Boekenpagina
  • titel van boek met prijs, gescande voorpagina en bestelnummer
  • verwijzing naar Home Page en bestelformulier
• Bestelformulier
  • met gegevens als naam en voornaam, adres, bestelnummers en aantal
  • de gegevens worden naar een e-mailadres verstuurd

uitwerking:

De nieuwe website noemen we PCB-store en kiezen voor From wizard or Template, Empty Web. Het administratorpaswoord dient ingevoerd.

• Klik New Page in de explorer, selecteer Navigation View en verander Home Page in PCD-store. Dit kan door o.a. via het snelmenu de optie Rename te selecteren.
• Maak 4 nieuwe pagina's en sleep ze in volgende hiërarchische structuur:
  
  Op de vraag of frontpage navigation bars moet creëren om de pagina's aan elkaar te linken antwoorden we ja.
  Een dubbelklik op de pagina opent de editor.
• De Home Page wordt als volgt opgebouwd:
  Klik hier voor het resultaat.
  Tips:
  • Voor telefoon- en faxnummer gebruik je een tabel met 1 rij en 2 kolommen.
  • In de clipartgallery vind je de tekening door te zoeken met het sleutelwoord MAIL.
• Voor de Posterspagina maken we gebruik van Image Composer 1.5  te installeren vanaf de Frontpage CD-ROM. Met de -toets uit de werkbalk van explorer kan met het pakket activeren.
  Wat volgt is een samenvatting van de voornaamste opties uit het menu en knoppen uit de werkbalken.
  • File, Composition Setup maakt het mogelijk de grootte van de tekening te bepalen.
  • Insert, From File, From Photo CD.., enz.. laat toe om bestaande tekeningen te importeren. Bemerk Image Composer is  een programma om tekeningen te bewerken.
  • Tools, Selection gebruik je om een tekening te selecteren.
  • Tools, Arrange: om de geselecteerde tekening te spiegelen en/of te roteren (Flip en Rotate), groter of kleiner te maken (Scale), schuin of in perspectief te plaatsen ( Warps)
    Verschillende tekeningen  kan men met Arrange als een geheel samenvoegen. Align laat toe de tekeningen ten opzichte van elkaar uit te lijnen terwijl Order toelaat een voorgrond- of achtergrondtekening te maken.
  • Tools, Cutout : met een bepaalde Cutout Tool kan men een onderdeel slepen om het met Erase te knippen en met Cut Out te kopiëren. Met File, Save Selections As kan men een onderdeel van een tekening bewaren.
  • Tools, Text: om een tekst in te voeren.
  • Tools, Shapes: om doorschijnende of ondoorschijnende vormen (Opacity) en scherpte (Edge) te regelen.
  • Tools, Paint: om een tekening bij te kleuren met allerhande penseelvormen en technieken. Andere kleuren kan men met Tools, Color Picker selecteren.
  • Tools, Effects: maakt het mogelijk allerlei effecten in de tekening te gebruiken.
  • Tools, Texture Transfer: laat toe de manier in te stellen waarop overlappende figuren of teksten moeten afgebeeld worden.
  • Tools, Zoom: om in te zoomen. Op de werkbalk bevindt zich een keuzelijst: Zoom Percent.
  • Tools, Pan: gebruik je op de tekening te verschuiven.
  • Tools, Color Tuning: voor kleurinstellingen.

  Via File, Save as of Save Selection as kan men de volledige of gedeeltelijke compositie in een bepaald tekenformaat wegschrijven. Voor internet kiest men JPG-, GIF- of PNG-formaat

  We voorzien 3 posters, opgebouwd uit cliparts, die we bewaren in de Frontpage Webs\Content\pcbstore\images directory. Klik hier voor het resultaat.
  In een tabel plaatsen we een geminimaliseerde afbeelding met de nodige specificaties als afmetingen en prijs. Na het klikken van een poster krijgt men een groter formaat.
  

  Let op bij creatie van de posters in Image Composer voor:

  • Met View, Fit Composition Space to Selection wordt het ontwerpkader aangepast aan de tekening (poster1)
  • Verschillende tekeningen worden één geheel door de tekening te bewaren en daarna terug op te roepen. Zo kan men het volledig ontwerpkader bijkleuren (poster2)
  • Voor poster3 werd gebruik gemaakt van Web Backgrounds  en Web Banners.

  Op de Image Toolbar in Frontpage Editor vind je de bevel-knop waarmee rond de posters een kader kan getekend worden.

  Het blauwe kader rond de tekeningen die verwijzen naar de hyperlink kan men laten verdwijnen door te kiezen voor  Image Porperties, Appearance en Border Thickness op nul te plaatsen.

• Op de CDpagina plaatsen we een tekening van een solsleutel. Deze tekening is een link naar een geluidsfragment van Für Elise van Beethoven.
  Klik hier voor het resultaat
• De boekenpagina verwijst naar een elektronisch exemplaar van access   en excel.
  Met de print screen-knop wordt in het klembord de startpagina van beide pakketten geplaatst om ze daarna in Image Composer te plakken en te knippen. Het resultaat is volgende JPEG (boeken.jpg).
  
  Met hotspots wordt respectievelijk de cursus access (http://www.sip.be/cursus/access/inhoud.htm) en een cursus excel (http://www.sip.be/cursus/excel/inhoud.htm) geactiveerd.
  
  De hotspots maakt men door in de Image Toolbar de gebieden te selecteren met de rectangle, de circle of polygonal hotspottoetsen. Een overzicht van de verschillende hotspots krijgt men met de  Highlight hotspots on the image-knop.
  De downloadknoppen  zijn 2 Hover buttons, te selecteren via Insert, Active Elements. Ze verwijzen naar 2 zipfiles (access.zip en excel.zip) die de cursus in een gecomprimeerd formaat bevatten.
  Klik hier voor het resultaat.
• De bestelpagina is opgebouwd uit formulierelementen. Daarvoor kiest men uit het menu View,Forms Toolbar.
  We maken gebruik van volgende elementen:
  

  naam en voornaam	Text Box met Name: naam Breedte 33 karakters De tekst wordt automatisch omgezet in hoofdletters
  adres	Scrolling Textbox met Name: adres Breedte 33 karakters en 3 regels
  Poster of CD	Radio Button met Name: type Geen enkele optie staat automatisch als geselecteerd. De weg te schrijven waarden zijn: poster of CD. Er moet een keuze gemaakt worden.
  bestelnummers	4 verschillende Text Boxen met respectievelijke Names: bestelnummer1, ... , bestelnummer4. Elke Textbox is 10 karakters breed en meer dan 10 karakters zijn niet toegelaten. De achtergrondkleur moet Yellow  en de letters in Red. Bemerk dat de Name automatisch aangepast wordt na kopiëren.
  aantal	4 verschillende Text Boxen met respectievelijke Names: aantal1, ... , aantal4. Elke textbox is 5 karakters breed. Alleen cijfers zijn toegelaten met een waarde tussen 1 en 20. De textboxen worden omrand met een solidborder in een Limekleur.
  verstuur en wissen	2 pushbuttons De verstuurknop stuurt de formuliergegevens naar een file bestelling.htm, waarin alle velden worden opgenomen maar ook de Time en Date van bestelling. De wissenknop laat alle ingevoerde gegevens verdwijnen.

Onderaan de pagina plaatsen we een Hit Counter ( via Insert, Active Elements). Hiermee kunnen we het aantal bezoekers controleren. De waarde van de counter wordt in de file _private/bestelfo.htm.cnt bewaard.

Klik hier voor het resultaat

Een derde voorbeeld... discussiegroep voor access

De nieuwe website noemen we ACCESS en kiezen voor een Discussion Web Wizard.

De wizard vraagt o.a. naar de naam van de discussiefolder. Dit is de directory waar de verschillende artikels zullen bewaard worden. De naam moet beginnen met een underscore bijvoorbeeld _access.

Als achtergrond kan men kiezen uit verschillende themes die niet alleen de achtergrond maar ook de look van de navigatieknoppen bepalen.

De artikels worden genummerd bewaard in een subdirectory _access die als hidden gedefinieerd werd en enkel te zien zijn als men vanuit het menu Tools, Web Settings, Advanced, Show documents kiest.

Het overzicht van alle artikels vindt men in de _access/toc.htm file.