Proefles: Webdesign

Met de cursus Webdesign leer je professionele websites bouwen!

Met deze proefles krijg je een indruk van de cursus Webdesign van het NTI. Je krijgt inzicht in de lesstof. Je kan ook alvast vragen maken en deze zelf controleren. Mocht je vragen hebben, neem dan gerust contact met ons op. Heel veel succes en plezier met de proefles.

Basisbegrippen

Inleiding

Deze cursus gaat over webdesign. Webdesign is een breed begrip en heeft een multidisciplinair karakter. Webdesign is breed omdat er heel veel mogelijkheden zijn, waarbij de fantasie van de webdesigner vaak de enige beperking is. Webdesign is multidisciplinair omdat er heel veel andere vakgebieden komen kijken bij het bouwen van een website, zoals het beheersen van webeditors (speciale programma’s om webpagina’s samen te stellen), programmeertalen (C++, Perl, .NET, Visual Basic, Java en dergelijke), artistieke en tekenprogramma’s (Paintshop, Photoshop) en diverse hulpprogramma’s zoals Java-Tools, CGI Script tools, ASP, PHP, Ajax enzovoort. Ook is het bijzonder handig dat de webdesigner een grondige kennis heeft van een of meer besturingssystemen (Windows, Linux) en dat hij met behulp van meerdere browsers tests uitvoert, om een zo gestandaardiseerd mogelijke website te bouwen. Heel veel van de genoemde speciale programma’s en programmeertalen gebruiken we niet in dit studieboek, omdat we u vooral de basis van doordacht webdesign willen bijbrengen. Met behulp van deze kennis kunt u in de toekomst, voor zover dat voor uw webdesign-activiteiten noodzakelijk is, uw kennis verder uitbreiden en uitdiepen met specialistische andere programmakennis.
In dit studieboek wordt ook verondersteld dat u een redelijke kennis hebt van het Windows 7-besturingssysteem, en dat u weet hoe u met internet moet omgaan. Daarnaast is het belangrijk dat u enige Engelse taalkennis bezit.

1.1    De kern van het studieboek

Dit studieboek kan niet op alle genoemde onderwerpen even diepgaand ingaan, zoals we in de inleiding al hebben aangegeven. We beperken ons tot de (uitgebreide) basisprincipes van webdesign. Als u diverse professionele websites op het internet bekijkt, dan zult u al snel constateren dat bij het bouwen van een commercieel georiënteerde website kennis van elementaire marketing, e-commerce-en e-businessprincipes welhaast een must zijn. 

Dit noemen we webmarketing en dat is inmiddels een geheel nieuw vakgebied geworden. Daarbij wordt het internet gebruikt als een platform voor Customer Relationship Management, anders gezegd de individuele klantbenadering. Dit stelt bijzonder hoge eisen aan de wijze waarop de website wordt samengesteld en de wijze waarop de website interactief met de virtuele klant moet communiceren. Om een website commercieel zo optimaal mogelijk te maken, moet de webdesigner het grillige klantgedrag kunnen inschatten, voldoen aan het verwachtingspatroon van de internetklant en daardoor een grondige kennis hebben van bijvoorbeeld kleurenleer, afbeeldingsinstellingen en presentatievormen. Met name bij het samenstellen van commerciële sites zal er een team van specialisten moeten worden gevormd, die ieder voor zich de maximale inbreng vanuit hun vakgebied presenteren en daarmee een zo optimaal mogelijk resultaat nastreven.

Voor webmarketing, e-commerce, e-business, internet en besturingssystemen bestaan aparte cursussen. Het toepassen van artistieke kenmerken leert u op een kunstacademie, maar ook vanuit diverse andere cursussen die worden aangeboden. En vaak is het ook een kwestie van trial-and-error, proberen, fouten maken, fouten herstellen en de volgende keer van het al geleerde profiteren. Ook is het voor de webdesigner in spe erg handig als hij met een kritisch oog kijkt naar de diverse websites op internet, die natuurlijk prima kunnen dienen als een voorbeeld van waarom iets wel past in een website, of juist moet worden nagelaten.

Dit boek pretendeert ook geen handleiding te zijn van allerlei commerciële design-pakketten zoals Macromedia Dreamweaver, Shockwave, Flash, Director, tekenprogramma’s als Paintshop Pro en bijvoorbeeld Adobe InDesign. In het cursusmateriaal zult u er met enige regelmaat op worden gewezen dat met behulp van deze programma’s een bepaald effect wordt bewerkstelligd, maar de praktische uitvoeringswijze waarop dit effect tot stand komt, zult u met behulp van de handleiding die bij deze pakketten hoort zelf moeten bepalen. En ook hiervoor geldt dat er heel veel cursussen voor deze pakketten bestaan. Ook is er voor deze pakketten online veel aanvullende informatie beschikbaar, bijvoorbeeld in fora, of diverse FAQ’s (Frequently Asked Questions).

 

 

Wat het boek wel behandelt, is een gedegen inleiding in de twee elementaire scripttalen voor webdesign, XHTML en CSS (Cascading Style Sheets). Met behulp van de combinatie tussen beide scripttalen (en wat dat precies is leert u vanzelf in dit boek) kunt u professionele websites ontwerpen.

1.2    De cd-rom  bij het studieboek

De meegeleverde cd-rom (achter in uw studieboek) bevat een schat aan extra informatie. In oefenopgaven in dit studieboek wordt waar nodig verwezen naar extra informatiebestanden, die u in uw browser moet laden en moet bestuderen. Deze informatie vormt een noodzakelijke en nuttige aanvulling op de leerstof in het boek. Veel informatiebestanden bevatten talrijke belangrijke definities van internet-en webdesigntermen, die u voor een goed begrip van de leerstof moet kennen.

Daarnaast bevat de cd-rom mappen met daarin oefen en voorbeeldbestanden. Waar nodig wordt in de leerstof verwezen naar deze bestanden omdat u die dan moet bestuderen en/ of bewerken.

Het is aan te bevelen om de inhoud van de bijgeleverde cd-rom op uw eigen computersysteem te plaatsen. U hebt de informatie dan direct bij de hand als u met de cursus bezig bent. Ook als u wijzigingen aan oefenbestanden moet aanbrengen, moet u dat vanaf de vaste schijf van uw computer doen, omdat u op de cd-rom geen bestanden kunt opslaan. De kopieersessie doet u als volgt:

  • Maak op uw vaste schijf (C:) een map NTI-Webdesign aan (of geef de map een naam die u zelf wilt).
  • Kopieer de inhoud van de cd-rom vanuit uw cd-romdrive naar de zojuist aangemaakte map op uw vaste schijf.
  • Maak eventueel een snelkoppeling op uw bureaublad naar de desbetreffende map.

Het is handig als u, voordat u met het ‘echte’ webdesign begint, eerst even de cd-rom raadpleegt, zodat u een idee krijgt van de informatie die u daarop kunt terugvinden. 

Een waarschuwing is op zijn plaats: een aantal op de cd-rom meegeleverde bestanden zijn free-en shareware, maar de bedoeling van de makers is uitdrukkelijk dat u de bestanden uitsluitend voor persoonlijk gebruik raadpleegt. Indien u toch besluit om een commerciële website op internet te presenteren met behulp van de op de cd-rom bijgeleverde attributen, dan moet u goed beseffen dat u het risico kunt lopen dat programmaschrijvers en leveranciers het u lastig maken. Commerciële websites zijn over het algemeen bedoeld om geld op te leveren en als u dat met bestanden van iemand anders doet, dan schendt u wellicht copyrights. Dat kan heel vervelend uitpakken met gerechtelijke procedures, geldboeten enzovoort. Bij het presenteren van een persoonlijke site spelen deze problemen niet. Indien nodig wordt er in de cursus verwezen naar bepaalde programma’s op de cd-rom.

Oefenopgave 1-A

  • Installeer de cd-rominhoud op uw vaste schijf, zoals hiervoor besproken.
  • Open de cd-rommap en raadpleeg de inhoud ervan, zodat u straks prima weet waar en op welke plaats u bestanden en programma’s kunt terugvinden als u met de cursus bezig bent.

1.3    De browser en het beeldscherm

Als u literatuur bestudeert over webdesign, dan komt u in de literatuur regelmatig tegen dat u websites moet creëren die in meerdere browsers bruikbaar moeten zijn. Wat wordt hier precies mee bedoeld? Er bestaan tientallen verschillende browsers voor het internet, hoewel u er zelf misschien maar één kent, namelijk de browser die bij uw besturingssysteem is geleverd. Al deze browsers zouden de www-standaard (XHTML) op dezelfde wijze moeten interpreteren. Als een aanwijzing in de XHTML-code aangeeft dat een letter met een puntgrootte van 24 moet worden weergegeven, dan zou dat in iedere browser hetzelfde moeten zijn.

Helaas is dat niet het geval. Eenzelfde aanwijzing kan tot verschillende schermweergaven leiden. Dat mag op zijn minst erg slordig worden genoemd. Wel is het zo dat de meest gebruikte browser ter wereld (Microsoft Internet Explorer, bij het ter perse gaan van dit boek is versie 9 in gebruik) ook de browser is die het minst goed omgaat met de codes vanuit de diverse programmeertalen die voor het bouwen van websites worden gebruikt. Omdat het echter de wereldwijd meest verspreide browser is, zullen wij in ons cursusmateriaal toch uitgaan van voorbeelden en webdesign in Internet Explorer versie 9. Gebruikt u een ander besturingssysteem dan Windows 7, dan kan uw eigen besturingssysteem meestal toch wel de Internet Explorer-programmatuur van Windows draaien, en kunt u Internet Explorer gratis downloaden van de Microsoft-website (www.microsoft.nl). Gebruikt u een ander type browser dan zijn de vensters wellicht iets afwijkend van wat u in dit studieboek ziet. Raadpleeg daarvoor de specifieke handleiding bij uw browser of besturingssysteem.

Oefenopgave 1-B

Ga naar de map Extra informatie, en dubbelklik op het bestand “Hoofdstuk_01_Bestand_01_Internet_Statistieken.html” om dit te openen. Lees de informatie aandachtig door. Om u bij de Engelse statistieken enigszins te helpen, zijn aan dit bestand zogeheten tooltips toegevoegd. Als u met de muis over een grafiek beweegt, krijgt u in een tooltip de Nederlandse vertaling van de statistiektitel. 
Bij het openen kunt u, afhankelijk van de instellingen van uw browser, boven in uw scherm de volgende mededeling krijgen: “Om de beveiliging van uw computer te verbeteren, heeft Internet Explorer deze webpagina beperkt in het uitvoeren van scripts of Active-X-besturingselementen, die mogelijk toegang verschaffen tot uw computer. Klik hier voor opties ...”. Klik dan op deze melding en kies uit het keuzemenu voor “Geblokkeerde inhoud toestaan ...”. Bevestig de daarna verschijnende beveiligingswaarschuwing door op JA te klikken.
De informatiebestanden op uw cd-rom zijn voorzien van JavaScript-elementen (wat dat precies zijn leert u later nog), en die moeten actief zijn om de informatiebestanden goed te kunnen gebruiken. De scripts op deze cd-rom brengen overigens geen schade toe aan uw computer, en zijn virusvrij.

De kern van deze statistische gegevens is als volgt samen te vatten:

  • Bijna 90% van de computergebruikers hanteert een van de Windows-platforms (besturingssystemen). Bron: W3 schools.
  • Het leeuwendeel van de gebruikers hanteert ook de statistieken van StatOwl, Net Applications & StatCounter.
  • 96% van alle gebruikers hanteert een schermresolutie van minimaal 1024 × 768 pixels,
  • 85,1% hanteert zelfs een hogere resolutie.
  • 97% van alle gebruikers heeft een kleurdiepte ingesteld van meer dan 32 miljoen kleuren.

De veilige conclusie die u daaruit kunt trekken is dat als u een website ontwerpt voor een Windows-georiënteerde computer, het leeuwendeel van de internetsurfers uw website zonder problemen kan bekijken. We gaan niet zover dat we zeggen dat het niet noodzakelijk is dat uw website op allerlei verschillende platformen en browsers dient te draaien, maar u moet het gezien de statistieken, niet overdrijven. Als u een website bouwt die onder Internet Explorer prima werkt, dan zal dus meer dan 90% van de internetgebruikers uw website zonder moeite kunnen bekijken. En gezien de inspanningen die de andere browsermerken zich getroosten om ook zoveel mogelijk van alle standaarden te kunnen slikken, speelt u prima op safe door uw website in ieder geval stevig in Internet Explorer te testen.

Een ander fabeltje dat we hier kunnen ontzenuwen, is dat u per se een website moet bouwen die als maximale resolutie 800 × 600 pixels moet zijn (de oorspronkelijke HTML versie 4.01-standaard uit 1999; wat HTML precies is leggen we nog uit). 

Als u naar de tabellen kijkt, dan spreekt het percentage bij een resolutie van 1024 × 768 en hoger boekdelen. Meer dan 96% van de internetgebruikers hanteert een schermresolutie die hoger is. De voorheen als de facto internetstandaard gehanteerde resolutie van 800 × 600 pixels wordt nog maar door 1% van de internetgebruikers gehanteerd.

Ga in uw ontwerp daarom rustig uit van een schermresolutie van ten minste 1024 × 768 pixels. U kunt, door de beeldscherminstellingen op uw pc te veranderen, in ieder geval zelf testen of uw ontwerpwebsite onder beide hiervoor genoemde resoluties goed functioneert. We laten dat zien aan de hand van een voorbeeld.

Oefenopgave 1-C

Ga naar een willekeurige website die u in een willekeurige beeldschermresolutie op uw beeldscherm hebt staan. Voer vervolgens de noodzakelijke stappen uit in Windows om uw beeldschermresolutie te wijzigen.

Uitwerking

Windows-gebruikers kunnen de beeldschermresolutie aanpassen door op het bureaublad met de rechtermuistoets te klikken en te kiezen voor de optie SCHERMRESOLUTIE.

figuur 1 - Het keuzevenster voor de bureaubladeigenschappen in windows 7.

 

Er wordt een nieuw venster geopend waarin de gebruiker, afhankelijk van de in het systeem geïnstalleerde beeldschermkaart, de resolutie en de kleurdiepte kan wijzigen. Dit kan handig zijn als u uw webontwerp op verschillende manieren wilt testen. Wijzig de beeldschermresolutie en bekijk de lay-out van dezelfde webpagina onder de nieuw gekozen resolutie. Voer deze test met meerdere webpagina’s uit, zodat u een goed beeld krijgt van de gebruikte resoluties.

97% van alle internetgebruikers past een kleurdiepte toe van meer dan 16 miljoen kleuren (32 bits). Wat bedoelen we hier precies mee? Kleurdiepte staat of valt met de in het com- putersysteem aanwezige videokaart. Met de tegenwoordige 32 bits kleurenpaletten, en de hoeveelheid toegepast geheugen op de videokaart, is het mogelijk om miljoenen kleuren weer te geven, wat natuurlijk bij multimediale aangelegenheden als foto’s en video een must is. Als u een webpagina opbouwt met een kleurdiepte van 32 bits, dan zal dat tot soms wat vreemde effecten kunnen leiden bij gebruikers die een lagere kleurdiepte toepassen. Als u dus een webpagina met heel veel illustraties samenstelt, is het zinvol deze pagina te testen met een aantal afwijkende kleurdiepten, zodat u zeker weet dat in alle mogelijke omstandigheden datgene zichtbaar blijft wat u graag zichtbaar wilt hebben.

Oefenopgave 1-D

Zoek een website met een veelheid aan veelkleurige plaatjes. Wijzig op uw eigen computersysteem de kleurdiepte om het effect op de webpagina te begrijpen.

 

 

 

figuur 2 - Het keuzevenster voor het wijzigen van de beeldscherminstellingen.

figuur 3 - Het vervolgvenster met een keuzeknop om de hoeveelheid kleuren aan te passen.

1.4    Windows  Verkenner configureren

Windows Verkenner is de sleutel tot bestandsbeheer, dus ook voor uw websitedesign. Daarvoor moet Windows Verkenner echter wel zo uitgebreid mogelijk worden geconfigureerd, zodat alle functies optimaal en maximaal kunnen worden gebruikt. De stappen daarvoor zijn bijzonder eenvoudig. We laten u een en ander in een oefenopgave uitvoeren.

Oefenopgave 1-E

Configureer uw Windows Verkenner voor een zo optimaal mogelijk bestandsbeheer. Bureauaccessoires, Windows Explorer. Kunt u Windows Verkenner helemaal niet vinden, kies dan vanuit de START-knop het venstertje Programma’s en Bestanden zoeken, voer daar in Explorer en druk op de [ENTER]-toets. Sommige computerfabrikanten kiezen ervoor bij een vooraf geïnstalleerde Windows-versie Windows Verkenner op het bureaublad te plaat- sen of op de werkbalk Snel starten (links onderin uw beeldscherm).
Nog een andere mogelijkheid is om tegelijk op de toetscombinatie [CTRL], [ALT] en [DEL] te drukken om het dialoogvenster Windows Taakbeheer tevoorschijn te roepen. Kies dan Taakbeheer starten, tabblad Toepassingen, Nieuwe taak ... en voer daar in Explorer, gevolgd door een klik op OK. Als Windows Verkenner actief is, dan ziet u op uw beeldscherm een overzicht van hardware- en softwarematig geïnitieerde systeemcomponenten, zoals uw C:\schijf, de aanwezige dvd-speler(s) enzovoort.

figuur 4 - windows Verkenner opengeklapt in het standaard aanzicht.

Wij veronderstellen dat u bekend bent met het gebruik van Windows Verkenner. Hebt u geen menu boven in beeld dat begint met Bestand, Bewerken, Beeld ... enzovoort, druk dan op de ALT-toets van uw toetsenbord om dit ‘verborgen’ menu te zien.

 

figuur 5 - Het keuzemenu dat met de ALT-toets wordt opgeroepen.

Wilt u het maximale aan gegevens raadplegen vanuit Windows Verkenner, dan moet u bij de menuoptie BEELD de opties STATUSBALK en DETAILS aanklikken zodat deze actief zijn. Bij het selecteren van de optie DETAILS (ook vanuit het menu BEELD), moeten ten minste de volgende opties actief zijn:

  • NAAM;
  • GROOTTE;
  • TYPE;
  • GEWIJZIGD OP.

De rest kunt u naar eigen smaak aanvullen. Daarnaast moet u een aantal weergaveinstellingen van Windows in het algemeen configureren. 

Dat doet u ook vanuit Windows Verkenner. Klik daarvoor op EXTRA, gevolgd door MAPOPTIES, gevolgd door het tabblad WEERGAVE. U ziet dan het onderstaande venster:

figuur 6 - keuzevenster vastleggen standaardaanzicht mappenstructuur windows.

Het is belangrijk dat u uw instellingen zodanig regelt dat alle bestanden zichtbaar zijn en u nergens wordt belemmerd in de weergave per map. U zult ten minste extensies van bekende bestandstypen moeten kunnen zien, verborgen bestanden en mappen moeten worden weergegeven evenals de grootte van de bestanden.

1.5    Mappenstructuur en bestandsnamen

Bestanden een juiste naam geven is wat ingewikkeld op het internet. Dat komt door de veelheid aan besturingssystemen die er op internet wordt gebruikt. Een bestandsnaam is in essentie opgebouwd uit acht tekens, eventueel gevolgd door een scheidingsteken (de punt) en dan een extensie, als volgt:

MijnTekst.docx. Hierin is:

  • MijnTekst de eigenlijke bestandsnaam;
  • de punt (.)het scheidingsteken;
  • docx de extensie van het bestand.

Met de extensie bedoelen we de laatste drie tekens in een bestandsnaam. Sommige bestanden zijn uitvoerende programmabestanden (executables en command, oftewel .EXE en .COM), sommige bestanden zijn tekstbestanden (.txt en .docx files), weer andere bestanden bevatten een scripttaal zoals .HTM (of .HTML, of XHTML) enzovoort. Besturingssystemen als Windows en Linux ondersteunen veel langere bestandsnamen dan die met maximaal acht tekens ervoor, maar u weet het: er komen allerlei besturingssystemen voor op het internet. Het is dus veilig om voor maximaal acht tekens te kiezen om bestandsnaam en de extensie logisch te houden, bijvoorbeeld .HTM (of HTML) als het om een webpagina gaat, .GIF als het een illustratie betreft, .WAV als we over een geluidsfragment praten enzovoort. Op basis van de extensie .HTM(L) start een browser bijvoorbeeld automatisch op met de weergave van een webpagina, of Microsoft Word start automatisch MS Word op als een bestand de extensie “.docx” heeft.

Voorbeelden van geldige bestandsnamen binnen een internetomgeving zijn:

  • autoexec.bat            
  • bestand.db                       
  • explorer.exe
  • leesmij.txt                    
  • lotus.123                      
  • exit
  • readme.doc               
  • mark_8                         
  • 5.com

 

 

Een paar gouden regels voor een goed gebruik van bestandsnamen:

  • Schrijf alle bestandsnamen met kleine letters. Linux-/Unix-systemen maken een onderscheid tussen hoofd-en kleine letters, wat tot verwarring in XHTML-verwijzingen kan leiden.
  • Gebruik geen spaties. Als u een soort spatie in een bestandsnaam wilt aangeven, moet u dat doen met behulp van de underscore, bijvoorbeeld: wil_lem.jpg.
  • Pas geen trema’s, symbolen en uitroeptekens en dergelijke toe in bestandsnamen. Deze vervullen in een aantal besturings-en programmeeromgevingen een speciale rol en uw zo mooi ontworpen webpagina kan daardoor geheel in het honderd lopen als deze uiteindelijk op het internet wordt gepresenteerd.
  • De regels die gelden voor bestandsnamen kunt u daarnaast het beste toepassen op mapnamen (directory namen).

Doordat besturingssystemen tegenwoordig veel geavanceerder zijn dan vroeger is het gebruikelijk om (veel) langere bestands-en mapnamen dan maximaal acht tekens te gebruiken. In dit studieboek zullen we dat ook doen. Toch zijn er nog besturingssystemen die de dwingende regel van acht tekens voor de punt en drie tekens na de punt als extensie gebruiken. Gelukkig zijn dit soort extensies bijna allemaal verleden tijd. Veel risico met langere map- en bestandsnamen loopt u dus niet.

Oefenopgave 1-F

Bekijkt u de volgende bestandsnamen eens:

a.  worldcom,prv      b.  windows.html     c.  explorer_new.exe   d.  9

Geef aan of deze bestandsnamen binnen een internetomgeving mogen worden gebruikt. Indien u van mening bent dat het een niet-toegestane bestandsnaam is, of de bestandsnaam tot problemen kan leiden, moet u aangeven waarom.

Daarnaast is het verwijzen binnen XHTML-code naar andere mappen, de zogeheten pad- structuur, ook aan strikte regels gebonden. Met name bij Windows-gebruikers wordt er door Windows vaak een chaos in stand gehouden door alle bestanden die een gebruiker maar aanmaakt, automatisch in een map \Mijn documenten (of iets dergelijks) onder te brengen. Voor orde en netheid binnen uw websiteprogrammering moet u dit dus nooit doen! Als u slechts enkele files voor uw website gebruikt, is het nog niet zo bezwaarlijk om alle bestanden in één map onder te brengen. Maar gaandeweg groeien uw gegevens en behoeften en leidt het gebruik van één map al snel tot het verliezen van het overzicht over uw websitedesign. Zorg ervoor dat u alle specifieke delen van uw website die bij elkaar horen, ook in één map samenvoegt, bijvoorbeeld als volgt:

figuur 7 - geordende en overzichtelijke mappenstructuur.

Door op deze manier te ordenen kunt u bijvoorbeeld snel en efficiënt bestanden terugvinden en hyperlinks in uw websitedesign kopiëren. Daarnaast is er nog een andere eigenaardigheid aan mapstructuren, waar Windows-gebruikers even aan zullen moeten wennen. U moet nooit uitgaan van verwijzingen met absolute padnamen, maar altijd een relatieve verwijzing naar een map gebruiken. Op het toepassen van absolute en relatieve verwijzingen naar paden komen we in het verdere verloop van het studieboek nog terug. We geven u onderstaand alvast een voorproefje.

Een absolute padnaam is bijvoorbeeld C:\project_1\afbeeldingen\mijn_plaatje.gif

U geeft dus aan dat het bestand “mijn_plaatje.gif ” op uw C:\ schijfeenheid staat, en zich bevindt in het pad \project_1\afbeeldingen\. Als u een dergelijk webontwerp op een ander besturingsplatform plaatst (bijvoorbeeld Linux of Unix), dan kunnen deze machines er niets van maken. Deze besturingssystemen kennen helemaal geen C:\ of andere schijven, en meerdere mapnamen worden gescheiden door een / (slash) en niet door een \ (backslash). Zou u dus het bovenstaande pad moeten weergeven op een Linux-machine die als uw webhost dient, dan zou u al moeten weten binnen welke map (directory) de webbestanden moeten worden geplaatst. Verder moet u in dit geval weten of binnen de configuratie van het systeem ook is aangegeven dat vanaf die speciale mappen nieuwe mappen mogen worden aangemaakt door een willekeurige gebruiker (Linux is een zeer geavanceerd multiusersysteem!).
Al zou u bijvoorbeeld het pad/pub/project_1/afbeeldingen/mijn_plaatje.gif opgeven, dan is het nog maar de vraag of u bent gerechtigd om zo’n pad aan te maken, of dat uw provider toestaat dat zulke paden op zijn servers voorkomen.
Maak daarom verwijzingen nooit absoluut, maar gebruik een relatieve padnaam. Denk vanuit het bestand waarin u de verwijzing maakt en welke weg u moet afleggen om bij de verwijzing te komen. Daarbij is / 1 map omhoog en ../ 1 map naar beneden. Als u figuur 7 bekijkt en u moet vanuit het bestand index.html, dat in de map project_1 staat, het plaatje “mijn_afbeelding.gif ” in de map Afbeeldingen aanroepen, dan doet u dat vanuit een bestand als bijvoorbeeld “index.html” als volgt:

<IMG SRC=”/afbeeldingen/mijn_plaatje.gif ”>

U ziet het: nergens een verwijzing naar een C:\schijf, of het starten van een padnaam vanuit de root van een systeem, zoals bij UNIX-systemen vaak het geval is. De map /afbeeldingen zit direct achter de map project_1 en kan dus met behulp van slechts de slash / en de mapnaam worden aangeroepen. Dit is dus een relatieve verwijzing. Als uw provider uw mapstructuur overneemt, zal de map /afbeeldingen altijd achter de map /project_1 komen te liggen, en is dus met een relatieve verwijzing altijd benaderbaar.

 

Als men in HTML-code een hoger gelegen map in de mapstructuur wil aanwijzen, dan wordt de tekenreeks ../ gebruikt. Om bijvoorbeeld vanuit de map /afbeeldingen het bestand “index.html” aan te roepen (dat in de voorafgaande map /project_1 is opgeslagen) gebruikt men de HTML-code:

<A HREF=”../index.html”>Terug naar startpagina</A>

Wilt u twee mappen terug in de mapstructuur, dan gebruikt u twee keer ../../ enzovoort.
Op de absolute en relatieve verwijzingen komen we in dit studieboek nog terug, maar probeer alvast goed te begrijpen wat er precies gebeurt. Een van de meest voorkomende fouten in webdesign is het foutief toepassen van verwijzingen. Om u in het woud van bestandsformaten een beetje op weg te helpen, vindt op de cd-rom extra informatie en verschillende tabellen, zie de volgende oefenopgave. Dit kan u van pas komen als u straks bepaalde bestanden binnen uw websitedesign wilt integreren.

Oefenopgave 1-G

Ga naar de map Extra informatie, en dubbelklik op het bestand “Hoofdstuk_01_Bestand_02_Bestandsformaten.html” om dit te openen. Lees de informatie aandachtig door. 
De tabellen in het informatiebestand zijn bij lange na niet compleet. Hoewel het voor u als webdesigner soms aantrekkelijk kan lijken om allerlei exotische bestandsformaten te hanteren (en soms is informatie niet op een andere manier beschikbaar), verdient het toch aanbeveling om dit zoveel mogelijk te vermijden. Gebruik de algemeen aanvaarde standaardbestandsformaten in uw website. Als u ingewikkelde bestandsformaten hanteert, ergert u uw websitebezoeker alleen maar: of de informatie is volledig ontoegankelijk voor hem, of hij moet zoveel extra moeite doen om de informatie toch bruikbaar te maken, dat hij afhaakt en uw website verlaat.

Samenvatting
In dit hoofdstuk is aandacht besteed aan basiskennis van eerste webdesignprincipes en de basisconfiguratie van uw computersysteem, zodat u straks met uw XHTML-editor (uw ontwerpprogramma) zonder problemen kunt werken. Belangrijk is dat u zich in uw webdesign beperkt tot algemeen gangbare bestandsformaten. Ook de manier waarop u te zijner tijd verwijzingen naar mappen maakt in uw webdesign kent enkele specifieke probleempunten waar het absolute en relatieve padnaamverwijzingen betreft. Hierop komen we overigens nog uitgebreid terug.

Begrippenlijst

CGI
CGI is de afkorting van Common Gateway Interface: een koppelprogramma met een webserver voor het maken van bijvoorbeeld interactieve pagina’s, databasekoppelingen of formulierenverwerking. CGI-scripts worden vaak in een programmeerplatform als Perl geschreven, maar het kan ook met andere programmeertalen worden gebruikt.

Flash
Flash is de standaard voor vector graphics (bepaalde vorm van illustraties) en animaties op het web en is gemaakt door Macromedia. Het komt in de vorm van een plug-in voor de browser. Flash zorgt ervoor dat bewegende beelden in een compact bestandsformaat van server naar client worden overgezet zodat het oproepen van flashanimaties niet al te veel tijd vergt. Zie ook onder Shockwave.

HTML
HTML is de afkorting van Hyper Text Markup Language. Dit is een scripttaal (u schrijft zelf een klein programma in bijvoorbeeld een tekstverwerker) die in een browser wordt geïnterpreteerd als commando’s om 

functies binnen het web uit te voeren, bijvoorbeeld het plaatsen van tekst of illustraties op een beeldscherm.

PHP
PHP is een scripttaal die wordt ingebed in HTML. Veel van de syntax (de schrijfwijze) van PHP is ontleend aan C (een programmeertaal), Java of Perl, met enkele specifieke toevoe- gingen. PHP is een multiplatform scriptingtaal en stelt webdesigners in staat om heel snel dynamische (interactieve) webpagina’s te bouwen.

Shockwave
Shockwave Flash is een browser plug-in die vloeiende animaties mogelijk maakt. Omdat de animaties worden opgeslagen als zogenaamde vector-afbeeldingen, zijn de bestanden klein (korte laadtijd) en kan men zonder kwaliteitsverschil in-en uitzoomen. De meeste browsers hebben standaard deze mogelijkheid. Shockwave wordt echter regelmatig vernieuwd, waardoor het nodig is regelmatig de laatstverschenen plug-in te downloaden.

URL (URI)
URL is de afkorting van Universal Resource Locator (Uniform Resource Identifier). Het geeft de locatie aan van bepaalde informatie op het internet.

XML
XML is de afkorting voor eXtensible Markup Language. Dit is een scripttaal die specifiek is ontworpen om gegevens gestructureerd weer te geven. XML lijkt erg op HTML (zie boven). HTML richt zich op de presentatie en de lay-out van de informatie, XML richt zich op het systematisch ordenen van de informatie.

 

 

XHTML

XHTML (afkorting voor eXtensible Hyper Text Markup Language) combineert het beste van twee werelden, HTML en XML (zie boven). Bij het ter perse gaan van dit boek heeft het W3-consortium, dat de ontwikkeling van deze scripttalen aanstuurt, XHTML versie 1.1 vrijgegeven voor webdesigners.

Opgaven

Wat bedoelen we met het begrip beeldschermresolutie? 

A. De maximaal toegestane beeldschermpunten op de monitor van de gebruiker.
B. De wijze waarop de gebruiker zijn beeldschermoptekening regelt voor zijn monitor.
C. De van de afmetingen van de monitor afhankelijke beeldscherminstelling.

Waarom is het relevant dat u uw websiteontwerpen test op meer dan één browsertype?

A. Niet iedere browser interpreteert de XHTML-codering op dezelfde wijze.
B. Linux-gebruikers hebben altijd browsers die niet verkrijgbaar zijn onder het Windowsbesturingssysteem.
C. Als de XHTML-code werkt onder uw browser, kunt u deze rechtstreeks naar een andere browser kopiëren.

Wat is het voordeel van een hogere beeldfrequentie (verversingsfrequentie) van een monitor?

A. De monitor met de hoogste verversingsfrequentie is het duurste.
B. Er kan dan in een hogere resolutie worden gewerkt.
C. De monitor vertoont een voor de ogen rustiger beeld.

 

Op welke manier is het onder Windows mogelijk om uw websiteontwerp op meerdere resoluties te testen?

A. Door de webbrowser op een andere beeldschermresolutie in te stellen.
B. Door d.m.v. de configuratieopties een andere resolutie te kiezen.
C. Door met meerdere monitoren te werken.

Wat verstaan we precies onder het begrip kleurdiepte?

A. De mate waarin de videokaart het mogelijk maakt om meer dan wel minder kleuren op uw scherm te laten zien.
B. De schaduwranden die u aantreft bij objecten (knoppen, balken enzovoort) die in uw browser zijn verwerkt.
C. De configuratieinstellingen onder het Linux-besturingssysteem om dit wat betreft beeldschermresolutie parallel aan een Windows-besturingssysteem te laten lopen.

Welk essentieel onderdeel van Windows kunt u het beste gebruiken om uw bestandsbeheer te structureren? 

A. Windows Verkenner.
B. Windows Taakbeheer.
C. Windows Configuratie-scherm.

Welke van de volgende bestandsnamen is niet juist geformuleerd, als u deze onder een Windows-systeem zou willen gebruiken?

1:  QWERTY:123    2:  RAPNET.WWW     3:  1@#$,E      4:  COMMANDOS.COM    5:  Z.678T

 

 

A. 1 = geldig, 2 = geldig, 3 = ongeldig, 4 = ongeldig, 5 = geldig
B. 1 = ongeldig, 2 = geldig, 3 = ongeldig, 4 = geldig, 5 = geldig
C. 1 = ongeldig, 2 = ongeldig, 3 = geldig, 4 = ongeldig, 5 = ongeldig

Welke van de volgende rijtjes bevat een verkeerde extensie, als u op zoek bent naar grafische bestanden en deze op basis van de extensie probeert terug te vinden op internet door middel van een zoekmachine?

A. .JPG, .JPEG, .TIFF, .BMP, .CDR
B. .GIF, .DWG, .PCX, .PNG, .TIFF
C. .BMP, .PCX, .DWG, .COD, .CDR

Welke van de volgende vier rijtjes bevat een verkeerde extensie, als u op zoek bent naar (streaming) video- en audiobestanden en u deze op basis van hun extensie door middel van een zoekmachine op internet probeert te achterhalen?

A. RealVideo, .MOV, .MIDI, .WAV, .MPG
B. .Mjuice, .AVI, .ASF, .DivX
C. .OGG, .MP3, .LQT, .WAR, .Mjuice

Wat bedoelen we met het begrip codec? Zoek de juiste omschrijving uit onderstaande drie keuzen.

A. Een algoritme voor realtime audio players.
B. Een algoritme voor coderen en decoderen van bestanden.
C. Een algoritme voor de aansturing van programmabestanden.

Ben je na het volgen van de proefles enthousiast geworden? 

Je kunt elke dag starten met de cursus Webdesign dus zet vandaag nog de eerste stap!

8 redenen om bij het NTI te studeren

  1. Erkende opleidingen, gewaardeerd in het bedrijfsleven
  2. Deskundige begeleiding door ervaren docenten
  3. Voordelig lesgeld
  4. Flexibel studeren
  5. Studeren met veel persoonlijk contact
  6. Modern studeren via onze online leeromgeving
  7. Persoonlijke studiebegeleiding van een mentor
  8. Studeren op kosten van de werkgever en/of de fiscus
1 / 24