Websites met stijl

Handig bij het werken aan je website

Tip 1: In twee vensters werken

Bij het doorwerken van deze cursus tik je teksten en codes in in een editor. Tegelijkertijd moet je de cursus lezen. Hoe combineer je dat? Enkele mogelijkheden:

Tip 2: Hoe het venster te verkleinen (of vergroten)

Soms is het handig om een venster te verkleinen, bijvoorbeeld om te bekijken hoe je website eruit ziet in een klein venster; of om twee vensters naast elkaar te zetten.
Dat gaat als volgt:

  1. Vult het venster het hele scherm en is er geen kader om het venster?
    Klik dan op de knop . Die staat rechtsboven in het venster, naast de sluitknop.
  2. Versleep een rand om het venster kleiner te maken (of het juist te vergroten) (een van de rode pijlen).
    Je kan ook de titelbalk verslepen (witte pijlen) om het venster te verplaatsen.

Tip 3: Opslaan

Vergeet niet om je html-document of je stijlblad op te slaan als je daarin veranderingen hebt aangebracht.
De meeste editors (incl. Notepad++ en Komodo Edit) laten de opgeslagen versie van je website zien in de browser.

Tip 4: Browser verversen

Vergeet niet om de webpagina in je browser te verversen door op F5 te drukken of te klikken op de ververs­knop .
Die knop zit bij de meeste browsers voor of achter het zoekvak. Ververs je de pagina niet dan heb je kans dat je de wijzigingen op de pagina niet in beeld krijgt.

De browser slaat een webpagina meestal op in de zogenaamde cache op de lokale computer. De volgende keer dat de pagina wordt opgevraagd laadt de browser de pagina niet van internet of van de plek waar je zelf de webpagina hebt opgeslagen, maar haalt hem uit de cache. Daardoor wordt de pagina sneller getoond en is er minder internetverkeer nodig. Maar daardoor wordt de ongewijzigde pagina getoond.
Door de pagina te verversen laadt de browser de pagina, zodat de wijzigingen in beeld komen.

Tip 5: Tips voor het tijdelijk verwijderen van stijlregels

Bij de behandeling van het stijlblad gebruik ik nog wel eens het regelnummer (dan zeg ik iets als: verander op regel 226 van je stijlblad....). Daarom is het van belang om in het stijlblad geen regels te verwijderen of toe te voegen.

Als er in de cursus wordt gevraagd om (tijdelijk) een stijlregel te verwijderen, kan je dat het beste op een van de volgende manieren doen:

Tip 7: Hoe je goed ziet wat een verandering in het stijlblad voor effect heeft.

Gebruik je één computer en wil je goed zien wat het effect is van een verandering in je stijlblad dan kan je het best als volgt handelen:

  1. Bekijk de betreffende webpagina vóór de verandering in je stijlblad.
  2. Sluit de pagina niet, ga in de editor naar het stijlblad en breng de veranderingen aan.
  3. Sla het gewijzigde stijlblad op.
  4. Klik nu in de taakbalk op de browser en bekijk de webpagina opnieuw.
    Die ziet er nog uit als vóór de verandering.

    Let op: bekijk de webpagina NIET door in de notepad++ of Komodo op Uitvoeren (resp ) te klikken, want dan wordt de pagina automatisch ververst en dat willen we niet.

  5. Druk nu op F5 (of klik op de verversknop) en kijk goed wat er gebeurt.
    De browser laadt de pagina opnieuw en je ziet precies wat er verandert.

Tip 8: Hoe je achter de schermbreedte komt

Deze tip werkt voor zover ik weet alleen in de browser Firefox. Firefox heeft een aantal hulpmiddelen voor webontwikkelaars. Een van die hulpmiddelen is de responsive design modus. In deze modus kan je een aantal vaste schermafmetingen instellen en je kan de randen van het venster verslepen, waarbij steeds de schermhoogte- en breedte wordt aangegeven. Ideaal!

Je start de Responsive design modus als volgt:

  1. Start Firefox (waarschijnlijk heb je die al aan staan).
  2. Klik op de knop (menu openen). Meestal staat die knop rechtsboven.
  3. Klik vervolgens op (Ontwikkelaar).
  4. Klik dan op Responsive design-modus
    Nu staan de afmetingen boven het venster.
In plaats van stap 2 t/m 4 kan je ook drukken op Ctrl+Shift+M.

Je sluit de Responsive design modus weer door op het zwarte sluitvakje linksboven te klikken of door wederom op Ctrl+Shift+M te drukken.

Vind je de Responsive design modus handig? Zet hem dan op de werkbalk.

(Rechtsklik in het menu van Firefox op knop Ontwikkelaar en kies 'Verplaatsen naar werkbalk').

Kleuren en lettertypen

In deze cursus worden verschilende kleuren en lettertypen gebruikt.
Voor de betekenis, zie Afspraken over kleur en lettertype.