Learnit Training

3. Beheren van uw website

3.1 Introductie van begrippen

  • Site: een site binnen Dreamweaver is de gehele verzameling van HTML pagina’s, afbeeldingen en andere bestanden waaruit de website bestaat. Het is wenselijk om de hele site in één map op te slaan (de hoofdmap).
  • De hoofdmap (Local Root Folder): de hoogste map waar de bestanden in bewaard worden heet de hoofdmap. Dus wanneer je besluit om je website in de map www-bedrijf-x te plaatsen dan is www-bedrijf-x de hoofdmap. Eventuele andere sub-mappen in deze map zoals afbeeldingen, of downloads noemen we geen hoofdmap meer.
  • Middelen (assets): hiermee worden alle bestanden van een site bedoeld die geen HTML pagina’s zijn. O.a. afbeeldingen, filmpjes, muziekbestanden, PDF bestanden, enz..
  • File: een file kan elk bestand zijn. Wanneer je websites aan het maken bent kom je de volgende files tegen:
    • index.html (zo heet de homepage van elke website, zorg dat deze file altijd in de hoofdmap staat)
    • logo.jpg (een jpg-file is een afbeelding, in dit geval een afbeelding van een logo)
    • layout.css (in dit bestand wordt de opmaak (kleur, lettertype, positie) van de website afgehandeld)
    • contact.html (dit is zomaar een webpagina, het ligt voor de hand dat op deze pagina contactgegevens staan)
    • algemene_voorwaarden.pdf (dit bestand kan men downloaden en kan tekst en afbeeldingen bevatten)

3.2 Definiëren van de hoofdmap

Nu we een nieuwe pagina gemaakt hebben is het een goed moment om de pagina op te slaan. Hiervoor is het handig dat we gaan bepalen waar de hoofdmap staat van de website en wat de naam wordt van deze map. Wanneer Dreamweaver op de hoogte is van de map kan hij alles monitoren en eventuele wijzigingen automatische aanpassen.

Laten we een nieuwe site definiëren en daarin onze nieuwe pagina opslaan. Om dit te doen gaat u bovenin de menubalk naar Site en kiest u vervolgens Nieuwe Site. In het dialoogscherm wat verschijnt typt u bij sitenaam Demo-pagina. Achter het veld map voor lokale site ziet u een klein knopje (een mapje), hiermee kunt u aangeven wat de hoofdmap van uw site gaat worden. Wanneer u dit knopje aan klikt verschijnt er een navigatiescherm die u waarschijnlijk kent van andere programma's. Klik u in de linker kolom op het woord Bureaublad vervolgens maakt u op het bureaublad een nieuwe map (om de nieuwe map te maken is de kans groot dat er in het navigatiescherm een knop zit met de naam Nieuwe map) met de naam www. Wanneer de nieuwe map geselecteerd is kunt u onderin het navigatiescherm klikken op Kiezen. U keert nu terug naar het dialoogscherm 'site-instellingen'.

Als laatste gaan we de standaard map voor de afbeeldingen definiëren. In het dialoogscherm van site-instellingen klikt u in de linker kolom op het kleine driehoekje voor het woord Geavanceerde instellingen. In het sub-menu wat tevoorschijn komt klikt u op Lokale informatie. Om dit te doen klikt u wederom op de knop zoeken naar een map achter het invoerveld voor de standaard map afbeeldingen. In het navigatiescherm wat tevoorschijn komt zal het waarschijnlijk zo zijn dat de hoofdmap (www) geselecteerd is. Het is de bedoeling dat u nu in deze hoofdmap een nieuwe sub-map maakt met de naam pic. Wanneer u deze map selecteert kunt u klikken onderin het navigatiescherm op Kiezen. We zijn nu klaar met het definiëren van de hoofdmap. Nu kunt u in het dialoogscherm site-instellingen rechts onder klikken op Opslaan om het venster te sluiten.

Op de schermafbeelding hieronder ziet u het eindresultaat. Het palet Bestanden nu is aangepast. Het palet laat alleen nog de inhoud zien van de map "www" op het bureaublad.

Schermafbeelding online training Dreamweaver CC van Learnit.

3.3 Homepage opslaan

Nu Dreamweaver weet wat de hoofdmap van de website is kunnen de geopende HTML pagina opgeslagen worden. Ga hiervoor in het menu bovenin naar Bestand en vervolgens Bestand opslaan als. De homepage van een website heet altijd index.html. De andere pagina's kunt u zelf een naam geven maar de naam van de homepage ligt vast. Sla daarom u bestand direct op in de hoofdmap en geef hem de naam index.html