Starten met Sitestepper: Een site gemaakt in 10 minuten
Doelstelling van deze Steples
- Het aanmaken van een eerste (demo)website na installatie van Sitestepper gebruik makende van de bij Sitestepper meegeleverde voorbeeldsite.
Steplessen die best gevolgd zijn vooraleer deze Steples te starten
- Geen
Voorkennis
- Geen speciale voorkennis is vereist.
Logische vervolg
- Steples – 1ste aanpassingen aan de demo site
Sitestepper starten
Een Sitestepper-icoon wordt tijdens de installatie op uw bureaublad en in de programmalijst achter de 'Start'-knop geplaatst.
Dit icoon kan worden gebruikt om Sitestepper te starten.
Opstarten van Sitestepper.
Na het klikken op de geïnstalleerde icoon, wordt Sitestepper opgestart, en krijgt u het volgende scherm te zien.
Zoals u kan zien is de geïnstalleerde versie niet geregistreerd (zie de rode tekst 'ongeregistreerde versie' die wordt getoond onderaan het scherm.
Invoeren van de registratiegegevens.
Kies de menu-optie: 'Sitestepper – Geef registratiecodes in...'.
Na registratie van de software, hebt u van E.De.L.Com bvba een afdruk gekregen met de registratiegegevens en de registratiecodes van alle modules die u hebt aangeschaft.
Na het invoeren van alle gegevens op dit blad (let er op dat u de gegevens exact invoert zoals op het blad is afgedrukt), kiest u 'Opslaan' waarna u terug in het opstartscherm belandt.
De rode tekst is nu vervangen met de naam waaronder u de software hebt geregistreerd.
Aanmaken van een eerste Sitestepper-project.
Elke website die u creëert zal worden geplaatst in een Sitestepper-project.
Kies 'Project – Nieuw project' (of gebruik de sneltoets Ctrl-N).
Het volgende scherm zal worden getoond.
Geef een beschrijvende naam in voor uw nieuwe site en kies het Sitestepper Development Center waar u het project wenst te plaatsen.
Na installatie is slechts één Development Center aanwezig, dus dient u dit te kiezen.
Kies 'Create' waarna Sitestepper een lege website zal creëren (met een meegeleverde standaardlayout).
Na de creatie van dit eerste project wordt een bevestiging getoond...
en wordt het opstartscherm ververst om dit nieuwe project te tonen.
Merk op dat Sitestepper niet alleen een nieuw Sitestepper-project heeft aangemaakt, maar tevens een eerste Sitestepper Build Target (die standaard dezelfde naam heeft gekregen als de naam van het project.
Aanmaken van een eerste site.
Dubbelklik op het zonet aangemaakte Sitestepper Build Target om StepGen (de Sitestepper Web Generator) te starten (u kan ook het Build Target aanklikken, en de menu optie 'Build-target – Start' of de sneltoets Ctrl-S gebruiken).
Het volgende scherm zal worden getoond:
Naast het hoofdscherm van StepGen, is ook de lijst met aanwezige vervangveriabelen zichtbaar. Deze is niet noodzakelijk en kan van het scherm worden verwijderd door het kiezen van menu: 'View – Toon Varlijst' (of d.m.v. de sneltoets Shift-F4).
Ter info: de demosite is tweetalig
Als u in de getoonde boomstructuur de tak 'Web' open klikt (door op het '+'-teken te klikken, en daarna de getoonde pagina 'root' aanklikt, dan zal u zien dat in de taalknoppen (rechts van de boomstructuur) zowel de knop 'EN' als de knop 'NL' worden gemarkeerd met een vol blauw pijltje.
Dit betekent dat de voorbeeldsite (aangemaakt door Sitestepper) tweetalig is en zowel pagina's in het Nederlands, als pagina's in het Engels zal bevatten.
De 4 stappen op de eerste site 'online' te brengen
Een 'normale' website bestaat uit maximum 4 delen.
- De webpagina's
- De afbeeldingen
- De stylesheets
- De javascripts
Sitestepper bevat opties om elk van deze delen te genereren naar de website toe.
Een eerste maal dienen elk van deze opties te worden gestart om de eerste site te genereren.
Het 'Project'-menu zal 3 van de 4 opties aanbieden.
1. Builden van alle pagina's van de website
Een eerste maal moeten alle pagina's van de site worden aangemaakt, en daartoe kan de menuoptie: 'Project – Build all' worden gekozen.
Merk op dat deze optie ook aanwezig is onder: 'Genereer – Build All'.
2. Kopiëren van de afbeeldingen naar de website
Alle afbeeldingen die op de site worden gebruikt, kunnen worden gekopieerd vanuit het Sitestepper-project naar de website door de menuoptie: 'Project – Copieer afbeeldingen naar de site' te kiezen.
Na het kiezen van 'Start' zal Sitestepper alle nieuwe of gewijzigde afbeeldingen uit het Sitestepperproject kopiëren naar de afbeeldingfolder van de website.
De eerste maal zullen alle afbeeldingen worden gekopieerd.
Tijdens het kopiëren zullen de gelden velden het aantal afbeeldingen laten zien die bestaan (het bovenste veld), en het aantal afbeeldingen die effectief worden gekopieerd.
3. Builden van de stylesheets
Alle stylesheets die worden gebruikt op de website, kunnen worden gekopieerd vanuit het Sitestepper-project naar de website door de menuoptie: 'Project – Build stylesheets naar de site' te kiezen.
4. Builden van de javascipt-bestanden
Een vierde actie die dient te worden uitgevoerd, is geplaatst onder de 'Genereer' menu en noemt 'Build Javascripts'.
Uittesten van de site
Na het uitvoeren van de eerder vernoemde 4 acties, kan u de site uittesten door het kiezen van de menuoptie: 'View – View root' (of door het indrukken van de sneltoets F8).
Sitestepper zal aan Windows de opdracht geven om de startpagina van de site te tonen, waarna Windows de ingestelde internetbrowser zal opstarten.
De meest populaire internetprogramma's zijn momenteel:
- Internet Explorer van Microsoft
- Opera van Opera Software ASA
- Firefox
De startpagina van de site getoond in Microsoft's Internet Explorer
De eerste Nederlandstalige pagina getoond in Mozilla Firefox
De eerste Engelstalige pagina getoond in Opera
