Learnit

13. Testen en Uploaden

Je hebt inmiddels geleerd hoe Dreamweaver je kan helpen om een website te maken. Maar dat is nog niet voldoende. Om de website te kunnen bewonderen moet je hem in zijn geheel op internet zetten (uploaden). Gelukkig biedt Dreamweaver ons de mogelijkheden om dat op een eenvoudige wijze te doen.

Voordat je kunt beginnen met het uploaden van je website is het verstandig om de verschillende pagina’s te testen. Dat kun je eigenlijk niet vaak genoeg doen. Iedere gebruiker heeft namelijk een andere computer, waardoor je webpagina’s er steeds anders uitzien.

13.2. Provider

Om je website op internet te kunnen zien, moeten de pagina’s wel op internet staan. Je zou de pagina’s thuis op je computer (met 24-uursverbinding) kunnen laten staan, maar een internet provider biedt meestal meer. De verbinding naar de gebruikers is meestal vele malen sneller en het is meestal veiliger voor je eigen computer. Computerhackers liggen immers altijd op de loer. Alle reden dus om een provider te gebruiken om je website aan het grote publiek te laten zien.

Wat is een provider nu eigenlijk precies? Een provider biedt harde schijf ruimte aan op een computer die vaak alleen gebruikt wordt om internetpagina’s te laten zien. Die computer, ofwel server, staat 24 uur per dag aan, met een snelle verbinding met het internet.

Er zijn grofweg twee soorten providers. Gratis en betaalde providers. Gratis providers bieden vaak een beetje ruimte aan voor niets. Het internetadres (URL) dat je toegewezen krijgt is vaak zoiets als http://www.gratisprovider.com/~mijnstukjeruimte/. Bij een provider waar je moet betalen voor de service, krijg je natuurlijk een stuk meer. Je krijgt vaak meer ruimte om je site op te plaatsen, een eigen domeinnaam (zoals mijndomeinnaam.nl, waarnaar je toe kunt verwijzen met de URL http://www.mijndomeinnaam.nl/), en eigen emailadressen (mijnnaam@mijndomeinnaam.nl).

Welke provider je kiest hangt af van je wensen. Ben je bezig met een website voor privé doeleinden, dan volstaat vaak een gratis provider. Wil je meer, dan moet je overwegen om je toevlucht te zoeken in één van de vele betaalde providers. Een eigen domeinnaam bij een betaalde provider hoeft overigens niet eens veel geld te kosten. Voor een paar euro per maand heb je al een eigen domeinnaam, eigen emailadressen en voldoende webruimte voor een middelgrootte website.

Wat krijg je van je provider dat zo belangrijk is voor ons? Inloggegevens! Geen enkele webdesigner kan zonder. Inloggegevens bieden je een inlognaam, een wachtwoord, een ftp site waarop je kunt inloggen en eventueel extra informatie kunt krijgen. De verkregen gegevens gaan we invoeren in Dreamweaver, zodat we aan de slag kunnen met het uploaden van de site.

13.3. Het definiëren van de site

De bij de provider verkregen inloggegevens gaan we invullen in Dreamweaver.

Oefening 13.1. Definiëren van de site.

1. Open het Site Window (Klik op Site in de menubalk)
2. Kies Manage Sites vanuit het dropdown menu.
3. Selecteer de site Muziek en druk op Edit.
   Figuur 13.1: definiëren van een site.
   
   

   Tabel 13.1: Uitleg van de termen in het Site Definition venster.
   Site Name:	Geef hier de naam van je site op. Deze naam verschijnt in de lijst met sites.
   Local Root Folder:	Geef hier de map op waarin je de website wilt maken.
   De Checkbox : Refresh Local File List automaticly	Geeft aan of je wilt dat wijzigingen in de locale map automatisch in het site window worden doorgevoerd.
   Http address:	Het internet adres (URL) van je website. Dus: http://www.domein.ext/
   Cache:	Aangevinkt houdt Dreamweaver een lokaal bestand bij waarin verwijzingen naar Assets, Hyperlinks en SiteMap worden bijgehouden, zodat dat wat sneller gaat.

4. Klik op Remote info. Je komt nu in het volgende invoerscherm.

Oefening 13.2. Uploadgegevens.

1. Kies op het tabblad advanced onder category de optie remote info aan.
2. Selecteer uit het dropdown menu achter Access FTP.
3. Voer achter FTP Host www.learnit.info in.
4. Achter Login moet je de FTP loginnaam invoeren, dat is Learnit.
5. Het Password is hn2049fo.
6. Druk op OK.

Figuur 13.2: Venster voor invullen van Remote informatie.

Tabel 13.2: Uitleg van de termen in het Site Definition venster.
Ftp	Kies deze mogelijkheid om verbinding te maken met het ftp protocol. Dit is het meest gebruikte protocol.
Local/Network	Kies hiervoor als jij, je website niet bij een provider onderbrengt maar op een computer in je eigen netwerk.
SourceSafe Database	Kies hiervoor als je gebruik wilt maken van het SourceSafe database protocol.
WebDav	Kies hiervoor als je gebruik wilt maken van het WebDav protocol.
Ftp Host	Hier geef je de ftp host op die je van je provider hebt gekregen. Meestal is dit iets zoals ftp.mijndomein.nl
Host Directory	Hier geef je op in welke Directory je de pagina’s wilt gaan plaatsen op de webserver. Deze waarde kan leeg gelaten worden, indien je provider hiervoor geen gegevens heeft verstrekt.
Login	Vul hier de Loginnaam in.
Password	Vul hier het Wachtwoord in.
Save	Met deze optie kun je het wachtwoord op je computer opslaan. Vink dit vakje uit als je bang bent dat andere mensen veranderingen aanbrengen.
Use passive ftp	Vink dit vakje aan als je gebruik wilt maken van softwarematige ftp instelling door het besturingssysteem van je computer in plaats van door Dreamweaver. In sommige gevallen is dit noodzakelijk.
Use Firewall	Vink dit aan als je een Firewall gebruikt.
Enable File Check in/Check Out	Vink dit vakje aan als je met meerdere mensen aan een website werkt. Hiermee kun je aangeven bij de verschillende bestanden, door wie ze het laatst zijn gewijzigd. Vul in het veld Name je naam in, als je File Check in/Check out hebt aangevinkt, eventueel met je emailadres.

Met Dreamweaver is het mogelijk om design notes aantekeningen achter te laten voor andere webdesigners, die aan dezelfde site werken. In figuur 13.3 wordt het venster van de design notes getoond, de uitleg van de verschillende opties worden in tabel 13.3 gegeven.

Figuur 13.3: Venster voor toevoegen van Design Notes.

Tabel 13.3: Uitleg van de termen van het venster Design Notes.
Maintain Design Notes	Vink dit vakje aan als je design notes wilt gebruiken bij je pagina’s. Je kunt met design notes aantekeningen achterlaten voor jezelf of anderen mensen die aan de website werken.
CleanUp	Hiermee kun je de design notes verwijderen die niet langer gebruikt worden.
Upload for Sharing	Vink dit vakje aan om de design notes mee te kopiëren naar de server zodat medewerkers aan de website ze kunnen bekijken.

13.4. Verbinding testen

Nu de site gedefinieerd is, wordt het tijd om te kijken of alles naar behoren werkt. We willen niet dat er gebroken links worden weergegeven of dat er naar de verkeerde map wordt gekopieerd.

Oefening 13.3. Definiëren van de site

1. Open het Site Window en klik op de Connect to Remote host knop. Dreamweaver maakt nu automatisch verbinding met de webserver bij je provider. Als het goed is verschijnt in het linkergedeelte van het Site Window nu een map. Sommige providers hebben alvast een bestand aangemaakt dat index.html of index.htm heet.
2. Kies Manage Sites vanuit het dropdown menu.
3. Selecteer het bestand index.htm of geef het de naam die je provider heeft gegeven voor de homepage van je site in de local root folder (normaal gesproken het rechtergedeelte) van het Site Window.
4. Note: De homepage van je site is een pagina die automatisch wordt geladen als het domein (lees: map) wordt opgevraagd, zonder dat er een specifiek bestand bedoeld wordt. Als je bijvoorbeeld www.adobe.com intypt in een browser, dan verschijnt er automatisch het index.htm bestand in dat domein.
5. Klik op de Put File(s) knop boven in het Site Window.
6. Het onderstaande venster wordt getoond.
   
   Dependent files zijn bestanden die je hebt gebruikt in het document dat je op dit moment wilt gaan uploaden. Dat kunnen allerlei bestanden zijn, zoals plaatjes en flash filmpjes. Om die bestanden goed weer te geven op internet, moeten ook deze bestanden gekopieerd worden naar de server. Als de pagina’s vaak worden aangepast, maar de plaatjes en andere bestanden die erop staan niet, dan kun je zeggen dat Dreamweaver dus No klikken of “Don’t ask me again” aanvinken. Kies in dit geval voor Yes, omdat je de bestanden nog niet hebt geüpload.
   Afhankelijk van de snelheid van je internet verbinding duurt het een tijdje voordat de bestanden naar de server gekopiëerd (geüpload) zijn. De bestanden (de index.htm(l) en de plaatjes) verschijnen in het Remote Site (standaard het linker gedeelte van het Site Window) gedeelte van het venster.
7. Type in de browser het internetadres www.learnit.info in. De pagina die je gemaakt hebt verschijnt op het scherm, inclusief het beeldmateriaal dat je gebruikt hebt. Mocht dit niet het geval zijn, doorloop dan nog even de instellingen van de gedefinieerde website

13.5. Uploaden

Je hebt zojuist voor het eerst bestanden geüpload. Je kunt je misschien voorstellen dat dit niet de gemakkelijkste manier is om grote hoeveelheden bestanden of zelfs een hele website te uploaden. Daarbij is het op een gegeven moment vaak moeilijk om bij te houden welke bestanden nu precies wel en niet geüpdate moeten worden. Dreamweaver biedt ook hier de uitkomst.

Dreamweaver kan namelijk met een simpele druk op de knop de hele website synchroniseren. Dat houdt in dat Dreamweaver bijhoudt welk bestand het meest recent is. Het bestand op je harde schijf of het bestand op de server. Als je alleen werkt, dan zijn de bestanden op de harde schijf van je locale computer meestal het meest recent. Als je echter met een groep mensen aan een site werkt, dan wordt de kracht van synchronisatie echt onmisbaar.

Oefening 13.3. Uploaden

1. Open het Site Window. Kies Site » Synchronize, het Synchronisatie Venster wordt geopend.
   
2. Kies in het veld Synchronize tussen Selected Local Files Only (synchroniseert alleen de bestanden die je geselecteerd hebt) en Entire ‘jouw sitenaam’ site (synchroniseert alle files van je site).
3. Het menu “Direction” geeft je de mogelijkheid om aan te geven in welke richting synchronisatie moet plaatsvinden. Kies hier Put newer files to remote. Hiermee geef je aan dat de meest nieuwe bestanden op de server gezet worden. Nieuwere bestanden op de server worden echter niet naar jouw computer gekopieerd.
   Get newer files from remote. Hiermee kopieer (download) je de meest recente versies van je bestanden van de server naar je eigen computer. Nieuwere bestanden op je eigen computer blijven daarop staan, en wijzigen dus niet op de server.
4. Als je het vakje Delete remote files not on local drive aanvinkt, worden de bestanden die niet op je eigen computer staan verwijderd van de server.
5. Klik op Preview. Dreamweaver maakt verbinding met de server en begint de bestanden te controleren. Na een tijdje opent zich een venster waarin Dreamweaver aangeeft welke bestanden er volgens het programma moeten worden gekopieerd.
6. Haal het vinkje weg bij de bestanden waarvan je weet dat je ze niet wilt synchroniseren. Over het algemeen hoef je dit nergens te doen, maar het is verstandig om de lijst toch even te controleren. Het kan je een hoop tijd en ellende besparen.
7. Druk op OK.
8. De lijst met bestanden wordt doorlopen. De bestanden die geüpdate zijn worden voorzien van het woord Updated. Als de synchronisatie voltooid is, druk dan op Close.

13.6. Testen

Je moet je website grondig testen voordat je hem voor het publiek beschikbaar maakt. De mensen die je site bekijken gebruiken allemaal een andere computer. Je pagina’s zien er bij elke gebruiker anders uit. Afhankelijk van de gebruikte browser en besturingssysteem kunnen er grote verschillen ontstaan in de weergave van je website. Het is dus verstandig om daar rekening mee te houden.

Voordat je begint met het maken van je site, moet jij je afvragen wie jouw pagina’s gaat bekijken. Dat is niet alleen handig om te bepalen hoe de site eruit moet gaan zien maar ook om te bepalen wat er op moet komen. Als je weet welke personen je site gaan bezoeken, dan kun je ook bepalen wat zij over het algemeen gebruiken om je pagina’s te bezoeken. Gebruiken ze de meest recente versie van Internet Explorer op een Windows computer of gebruiken ze juist de meest oude tekst browser op een Unix machine? Gebruiken ze een standaard resolutie van het scherm of juist niet?

Denk eens na over de volgende punten:

• Welke browser gebruiken de bezoekers van je site over het algemeen?
• Welk besturingssysteem staat er op hun computer?
• Wat is hun beeldschermresolutie?

Note: beeldschermresolutie is weergegeven in een waarde die aangeeft hoeveel pixels er horizontaal en verticaal op een scherm weergegeven kunnen worden. Des te groter het aantal pixels, des te kleiner de tekst en plaatjes. Windows computers hebben standaard een beeldschermresolutie van 640 pixel horizontaal bij 480 pixels verticaal.

Het meest ideale zou zijn dat alle bezoekers een zelfde soort computer zouden gebruiken, met dezelfde browser en met dezelfde beeldschermresolutie. Zo zit de wereld niet in elkaar. Je moet dus compromissen sluiten. Om toch zo goed mogelijk te bepalen hoe je site er op de verschillende systemen uitziet moet je een aantal dingen doen.

• Installeer meer dan één browser op je computer! Behalve de meest bekende browser, Internet Explorer, zijn er meer programma’s waarmee je websites kunt bekijken. Installeer minimaal één van de onderstaande browsers, liefst allemaal, naast de browser die je al hebt.
  • Internet Explorer
  • Netscape
  • Netscape Communicator
  • Opera
• Je moet instellen welke browser je het meest gebruikt Dreamweaver biedt je namelijk de mogelijkheid om je pagina’s te testen in meerdere browsers. Je kunt een primaire en een secundaire browser instellen. Met respectievelijk F12 en CTRL-F12 roep je deze browsers op.
• Je kunt kijken of de inhoud van pagina’s op een scherm met een bepaalde resolutie past. Je kunt daartoe het venster waarin je pagina geopend wordt, aanpassen in grootte. Dreamweaver biedt ook hier een handige oplossing: vooraf gedefinieerde groottes, waartussen je kunt switchen.

De huidige grootte in pixels staat aangegeven onderaan het venster waarin je de pagina maakt. Als je op die waarde klikt kun je kiezen uit een aantal vooraf gedefinieerde waardes. Zoals je misschien ziet, zijn de waardes meestal kleiner, dan het scherm waarvoor ze bedoelt zijn. Dit komt doordat er ook nog andere beeldelementen op het scherm worden weergegeven, behalve de inhoud van de webpagina. Je kunt ook je eigen waardes definiëren.

Oefening 13.3. Instellen primaire en secundaire browser.

1. Kies in de menubalk de menuoptie Edit » Preferences.
2. Selecteer in het Preferences venster de Categorie Preview in browser.
3. Klik op het + teken.
4. Type in het geopende venster de naam van de browser Netscape.
5. Zoek met de browser knop de gewenste (geïnstalleerde) browser.
6. Vink aan dat Netscape de secundaire browser moet zijn.
7. Klik op OK.

Je kunt aangeven of je de bestanden lokaal wilt testen of dat je ze eerst wilt uploaden door het onderste hokje aan te vinken. Lokaal gaat sneller (zeker als je moet inbellen om te uploaden). Op de server testen is alleen het meest betrouwbaar.

Je kunt nu pagina’s testen door ze te selecteren of te openen en op F12 (primaire doelbrowser) of CTRL-F12 (secundaire doelbrowser) te drukken.

Figuur 13.4: Venster voor het instellen van een andere browser.

Oefening 13.4. Definiëren resolutie.

1. Kies in de menubalk de menuoptie edit » preferences en selecteer uit de categorie de optie statusbar.
   Figuur 13.5: Definiëren van de window size.
   
2. Vul in de Width: 500 en bij Heigth: 600. Geef als omschrijving (500 * 600 maximized) op.
3. Geef in de statusbar preferences venster de snelheid 56 kilobytes per seconde. In de statusbalk van het venster waarin je pagina’s maakt kun je dan zien hoe lang het ongeveer duurt om de betreffende pagina te downloaden. De pagina komt (als je veel plaatjes gebruikt) stukje bij beetje (bitje!) binnen. Een wachttijd langer dan 30 seconden wordt over het algemeen als doodzonde beschouwd.

13.7. Browser

De browser is heel belangrijk. Dit programma interpreteert de ruwe HTML code en zet die om naar bruikbare visuele beelden; je webpagina zoals je hem ziet in de browser. De HTML Code op zich moet standaard geïnterpreteerd worden volgens een standaard die wordt aangegeven door het World Wide Consortium (W3C). Sommige browser fabrikanten hebben zich echter niets aangetrokken van de regels, en hebben hun eigen toevoegingen gemaakt. Daardoor is er veel meer mogelijk geworden op het internet, maar daardoor zijn er ook grote verschillen ontstaan in het uiteindelijke resultaat, als je die extra mogelijkheden benut.

13.7.1. Internet Explorer

De bekendste browser. Bijna iedereen heeft ‘m op zijn computer staan. Internet Explorer (IE) gaat luchtig om met de code die hij aangeleverd krijgt. Een haakje verkeerd geplaatst, een afsluittag vergeten. IE maalt er niet om. IE probeert het voor webdesigners zo makkelijk mogelijk te maken, en waar mogelijk bij te springen. De meest belangrijke standaards worden door IE ondersteunt. Javascript, DHTML , Cascading Stylesheets. Ook biedt IE de mogelijkheid om plugins te installeren (bijvoorbeeld Flash).

Een nadeel van IE is juist de flexibiliteit. Doordat de IE zo flexibel is, en de pagina’s meestal toont zoals je ze bedoeld hebt, is het moeilijk fouten te signaleren. Tijdens het testen van je site, ben je daar eigenlijk niet naar op zoek.

13.7.2. Netscape

Het moederbedrijf van Netscape, Netscape Communications, staat aan de wieg van alle browsers. Lange tijd heeft dit bedrijf de browsermarkt gedomineerd. De Netscape browser is de meest recente browser uit hun stal. In de laatste incarnatie ondersteunt de browser vrijwel alle standaarden goed.

Hou er rekening mee dat je gebruikers niet altijd de laatste versie hebben van een browser. In het geval van Netscape houdt dat in dat je moet oppassen met Cascading Stylesheets. Versie 6.0 en lager stonden erom bekend de W3C standaard slecht te ondersteunen. De resultaten waren onvoorspelbaar. De huidige browser is echter prima.

13.7.3. Communicator

De echte problemen beginnen bij de 4.x serie van Netscape’s Communicator serie. De browser werkt vlotter dan Netscape 6.x serie, maar ondersteunt Cascading Stylesheets ronduit belabberd. De grootste problemen ontstaan echter als je probeert layers in layers (nesting) te plaatsen of als je gaat werken met Dreamweavers meest geavanceerde behaviours.

Communicator heeft geprobeerd om een aantal eigen tags tot standaard te verheffen. Vooral de <layer> en <iLayer> tags springen in het oog. Mocht je overwegen om layers te gaan gebruiken, test dan zeer frequent je pagina’s. Let erop dat je layers niet in elkaar plaatst! Het beste resultaat krijg je als je twee versies van je site maakt. Eén voor Netscape Communicator, en één voor de rest. Er is een behaviour dat als de pagina geladen wordt, controleert welke browser er gebruikt wordt, en deze stuurt de bezoeker naar een pagina die voor zijn browser geschikt is.

Je kunt dan Dreamweavers capaciteiten gebruiken om <layer> tags en <ilayer> tags te maken. Zorg er verder voor dat je behaviours selecteert die ondersteunt worden door 4.x browsers en hoger. Als je Internet Explorer 5 en hoger kiest, zijn er veel meer opties, maar die hebben een twijfelachtig resultaat in Communicator.

13.7.4. Opera

De underdog van het stel, maar zijn populariteit is groeiende omdat Opera de standaard ondersteunt en ook HTML, Javascript, Cascading Stylesheets, DHTML en plugins. Daarnaast is Opera razendsnel.

Een stelregel is: als het werkt in Opera, dan werkt het overal. Dit is niet helemaal waar, maar er geldt wel: als het in Opera werkt, dan zou het overal moeten werken. Opera is sinds kort ook gratis geworden. Zo lang jij je bezig houdt met standaard code, hoef je van Opera geen onvertogen woord te verwachten.

13.8. Veelvoorkomende schoonheidsfoutjes

Het gebeurt de meest ervaren webdesigners veelvuldig. Schoonheidsfoutjes op je website. Er ontbreekt een plaatje, de tekst in een tabel staat verkeerd of de hyperlinks willen maar niet werken als je de site eenmaal hebt geupload. En zo zijn er nog duizend veelvoorkomende problemen te bedenken. Maar wat doe je er aan?

Schoonheidsfoutjes komen meestal pas aan het licht als je bezig bent om je geleverde inspanning te bewonderen op het wereldwijde web. Terwijl je het eindresultaat rustig bekijkt en doorsurft, blijken er fouten in te zitten die je eigenlijk had kunnen voorkomen. Geen probleem: met logisch nadenken en wat hulp van Dreamweaver komen we een heel eind.

13.8.1. Verwijzingen kloppen niet meer

Het komt regelmatig voor dat je zorgvuldig aangemaakte hyperlinks opeens niet meer werken als je je site upload. Of dat plaatjes opeens niet meer ingeladen worden. Eigenlijk kan dat twee oorzaken hebben. Ten eerste kun je een relatieve link gemaakt hebben, maar je hebt het HTML bestand later verplaatst. De hyperlink klopt dan niet meer met de oorspronkelijke positie van het HTML bestand. Je kunt het vergelijken met bibliotheek. Als de bibliothecaris tegen je zegt dat je een bepaald boek kunt vinden op schap 4, dan kun je er van uitgaan dat je het boek daar aantreft. Als de bibliothecaris vervolgens schap 4 en schap 5 verwisselt, dan raak je natuurlijk de kluts kwijt.

Binnen Dreamweaver is het niet anders. Wanneer je zegt dat Dreamweaver een plaatje of iets dergelijks kan vinden in een map genaamd plaatjes, dan gaat Dreamweaver er ook vanuit dat het plaatje daar te vinden is. Als je de naam van de map verandert of je verplaatst het plaatje, dan kan Dreamweaver het plaatje niet meer vinden.

Als je een paar vervelende blunders begaat, dan kan dat in zo’n geval redelijk catastrofale gevolgen hebben. Zo is het met een paar muisklikken gebeurd met alle plaatjes binnen je site, en dat is natuurlijk heel erg vervelend. Gelukkig kan Dreamweaver zelf de links op de pagina’s van je site controleren. En met links bedoelt Dreamweaver niet alleen hyperlinks, maar alle verwijzingen die je binnen je pagina’s gebruikt.

Figuur 13.6: venster voor het controleren van links.

Oefening 13.5. Controleren van de links.

1. Open het Site Window.
2. Klik Site » Check links sitewide of druk op CTRL F8.
3. Het Check Links venster opent zich en gaat na welke gebruikte links niet verwijzen naar een bestand dat ook daadwerkelijk te vinden is op de aangegeven plaats.
4. Je kunt uit het dropdown menu kiezen of je de Broken (verbroken) links, External (naar externe websites) links of orphanaged (pagina’s zonder verwijzingen naar zich) wilt controleren.
5. Controleer of er verbroken links zijn (external en orphanaged) en laat verbroken links naar het juiste bestand verwijzen.

In de linkerkolom staat het bestand dat de gebroken link bevat. In de rechterlink staat de niet-correcte verwijzing. Door op het mapje te klikken kun je aangeven wat de verwijzing eigenlijk wel moet zijn. Als een verwijzing op meerdere pagina’s op dezelfde manier fout staat (bijvoorbeeld als je het Library bestand van een veelgebruikt menu hebt verplaatst), dan zal Dreamweaver met een pop-up venster komen om de nieuwe verwijzing (de correctie die je hebt gemaakt) door te voeren in alle foutieve pagina’s.

Op deze wijze ben je meestal snel klaar met het herstellen van alle verwijsfoutjes op je website. Mocht je twijfelen over de verwijzing, dan kun je het bestand openen door erop te dubbelklikken in het Broken links venster.

13.8.2. Je bent het overzicht kwijt

Blijf rustig. Geen paniek. Ook dit is een veelvoorkomend probleem voor alle webdesigners. Je werkt soms dagen, weken of zelfs maanden aan een website. Je bent soms tijden aan het Fine Tunen. Het is dan begrijpelijk dat je het overzicht een beetje verliest.

Het gebeurt heel vaak dat je lang bezig bent om een gewenst effect te bereiken. Als het dan eindelijk geslaagd is, dan is het meestal teleurstellend om erachter te komen dat er iets anders juist fout is gegaan.

De remedie die Dreamweaver hiervoor biedt is gering. Het is vaak je eigen schuld. Je hebt het project niet goed gepland, of je wist van te voren niet precies waar je mee bezig was. Toch kan dat heel vervelend zijn. Zeker als een klant graag een deadline wil halen.

Zorg er dus voor dat je van tevoren goed uitdenkt wat je wilt gaan doen. Spreek met jezelf af dat je niet te lang met losse onderdelen bezig gaat. Kijk regelmatig naar het grote geheel. Klopt dat beeld nog met wat je bedacht had? Test de pagina’s regelmatig in een browser, in ieder geval na een grote wijziging.

Mocht het toch voorkomen dat je er niet uitkomt probeer dan rustig te blijven. Kijk naar de balk met tags onderin je werkscherm. Ben je wel in de goede tabel aan het werk? Heb je per ongeluk de font tag verwijderd? Als niets meer helpt, dan kun je proberen om het onderdeel dat fout loopt zo secuur mogelijk uit de pagina te verwijderen.

Fouten opsporen in de HTML.

1. Klik in of op het object of gedeelte dat de fout bevat.
2. Klik in de balk met Tags (onderin het werkvenster) de volgende Tag aan (het woord tussen de < >).
3. Selecteer het gedeelte dat de fout omvat.
4. Knip het geselecteerde onderdeel uit de pagina.
5. Maak een nieuwe pagina aan waar je het onderdeel inplakt.

Op deze manier kun je je richten op het onderdeel waar je mee bezig was, zonder je zorgen te maken over de rest van de pagina. Als je klaar bent met het herstellen van de schade, dan selecteer je het onderdeel op dezelfde manier als hierboven, en plak je het terug in de originele pagina. Mocht dat nog niet werken, dan kun je het beste de pagina element voor element opnieuw opbouwen, terwijl je na elke wijziging de pagina test. Zodra de fout weer tevoorschijn komt, weet je dat het laatst ingevoegde element er iets mee te maken moet hebben.

Tot Slot

Je bent inmiddels in staat om losse pagina’s te uploaden, maar ook het synchroniseren van een hele website kent voor jou geen geheimen meer. Om te kunnen beginnen met uploaden is het instellen van je website noodzakelijk. Dat doe je in het Define Sites window. De benodigde gegevens krijg je van degene die je de ruimte verschaft voor jouw website op internet. De provider.

Als je je website niet test dan kun je er bijna zeker van zijn dat er foutjes in sluipen. Je moet rekening houden met verschillende computer en verschillende browsers. Deze verscheidenheid zorgt ervoor dat je er van uit kunt gaan dat de pagina’s die je maakt, er overal anders uit zien. Om toch een zo gelijkend mogelijke site te maken moet je zelf meerdere browsers gebruiken om je pagina’s te testen. Het maken van een gebruikersprofiel is daarom handig.

Verder zijn er een groot aantal fout(jes) te bedenken die in je website kunnen sluipen. Dreamweaver biedt hulpmiddelen om de fouten snel te achterhalen. Zo kun je de links controleren op juistheid in je hele website, en fouten snel herstellen als ze aan het licht komen. Verder kun je snel problemen centraliseren als je fouten tegenkomt. De Tag balk helpt je hierbij om de fouten in quarantaine te plaatsen.

Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.