1ste aanpassingen aan de demo site.
Doelstelling van deze Steples
- Een eerste demo(website) is aangemaakt. Een eerste personalisering van deze site dient te worden uitgevoerd.
Steplessen die best gevolgd zijn vooraleer deze Steples te starten
- Steples – Een site gemaakt in 10 minuten.
Voorkennis
- Geen speciale voorkennis is vereist.
Logische vervolg
- ...
Verandering van de achtergrond kleur.
Na installatie ziet de gegenereerde website er als volgt uit:
De eerste wijziging die kan worden aangebracht om de site te personaliseren is het veranderen van de achtergrondkleur.
Deze achtergrondkleur is gedefinieerd in de meegeleverde stylesheet. M.a.w., door de kleur te veranderen in de stylesheet en deze daarna terug te builden naar de website toe, kan de achtergrondkleur van de volledige site worden veranderd met een minimum aan handelingen.
Editeren van een stylesheet
Selecteer de 'Style sheets' tab in het
projectwerkblad en klik de standaard meegeleverde 'default.css' aan.
Het bestand kan worden geëditeerd in StepEdit door te dubbelklikken op de naam of door de kontekstmenu op te roepen door te rechts-klikken op de bestandsnaam.
Bovenaan deze contextmenu staat de
geselecteerde naam. Door 'Edit...' te kiezen zal eveneens het
bestand worden geopend in StepEdit om te worden geëditeerd.
In beide gevallen zal StepEdit worden geopend met 'default.css' als tekstbestand als actief bestand om te worden veranderd.
Default.css ingeladen in StepEdit
In de titelbalk van het StepEdit-programma zal
steeds het huidige project en de actieve bestandsnaam getoond
worden.
De actieve bestandsnaam wordt nogmaals getoond bovenaan het edit-gedeelte.
Om de achtergrondkleur van de volledige site te veranderen, dient de 'BACKGROUND-COLOR' van het BODY-html-element te worden gewijzigd.
In de meegeleverde voorbeeldsite is de standaard achtergrondkleur donkerblauw wat in html-taal wordt vertaald in de kleurcode: #000080.
Door de lijn met de achtergrondkleur te wijzigen, kan een andere kleur worden gekozen.
BACKGROUND-COLOR: #000080;
De gemakkelijkste manier is om de #000080
op te lichten, en de menuoptie: 'Invoegen- Kleurwaarde' te
selecteren.
Een standaard kleurselectie formulier zal
worden getoond.
Na het kiezen van één van de aanwezige kleuren, zal StepEdit de opgelichte kleurcodering vervangen door de kleurcodering van de geselecteerde kleur.
BACKGROUND-COLOR:#008040;
Indien de stylesheet nu worden gekopieerd naar de website, zal de achtergrondkleur van de volledige site van donkerblauw naar een donkergroen zijn veranderd.
Bewaar de stylesheet door het kiezen van de menuoptie: 'Bestand – Opslaan' of door het invoeren van de sneltoets 'Ctrl-s'. Zolang een bestand niet bewaard is, zal de statusbalk onderaan het StepEdit-programma de tekst 'modified' tonen.
Stylesheet kopiëren naar de website
De stylesheet moet worden gekopieerd naar de website vooraleer de veranderingen actief worden (en kunnen worden bekeken op het scherm).
Dit dient te gebeuren via de menukeuze: 'Project – Build stylesheets naar de site'.
Vermits het StepEdit-programma nog steeds actief is, dient dit ofwel gesloten te worden, ofwel dient het StepGen-programma terug op de voorgrond te worden geplaatst (waarna de eerder vermelde menuoptie kan worden geactiveerd).
Snel van StepEdit naar StepGen en terug
Sitestepper zal de F12-toets gebruiken om zeer snel (door het intoetsen van deze toets) het programma te activeren wat op dat moment het meest voor de hand ligt.
Zo zal de 'F12' toets in het StepEdit-programma toegewezen zijn aan de menuoptie: 'Sitestepper – Activeer StepGen' en zal dezelfde toets in het StepGen zijn toegewezen aan de menuoptie: 'View – activeer StepEdit'.
M.a.w. d.m.v. de F12-toets kan zeer snel van programma worden gewisseld zonder één van beide programma's te moeten sluiten.
Bekijken van de veranderingen (nieuwe kleur)
Druk dus op 'F12' om StepGen te activeren (kies eerst de menu-keuze 'Bestand – Opslaan' of druk Ctrl-S om de stylesheet te bewaren, moest dit nog niet gebeurd zijn).
Kies in StepGen de menukeuze 'Project – Build stylesheets naar de website' en kies vervolgens de menuoptie: 'View – view root'.
De site ziet er nu uit als volgt:
Verandering van de achtergrondkleur van hoofding
Alhoewel de achtergrondkleur van de volledige site nu veranderd is, is de kleur van de hoofding nog steeds donkerblauw.
De demosite heeft immers zowel voor de hoofding als voor de menu's links van de pagina, een expliciete achtergrondkleur ingesteld.
Om de achtergrondkleur van de hoofding te veranderen, kunnen de volgende stappen worden gevolgd.
Uitzoeken welk bestand dient te worden aangepast.
Sitestepper voert een scheiding uit van die delen van een pagina die op elke pagina van de site voorkomen, met dat gedeelte dat per pagina verandert.
Het aanklikken van één van de opties in het menu, zal duidelijk maken dat de hoofding behoort tot dat deel van de site dat op elke pagina wordt herhaald.
