Lab Multimedia en webtechnologie 1

Bachelor in de Toegepaste Informatica Afstudeerrichting Applicatie-ontwikkeling via afstandsonderwijs

2006-2007 Lector: Christophe De Waele E-mailadres: [email protected] Telefoon: 056/264 120 Bureau: lokaal 108

SITUERING Situering in het curriculum Programmajaar: 1Ba Applicatie-ontwikkeling Opleidingsonderdeel: Lab multimedia en webtechnologie 1 Omvang Studiepunten: 4 studiepunten Contacturen: geen contacturen

Studiewijzer OHO

2006-2007

KATHO departement VHTI

Inhoud Deze cursus leert de basisprincipes en technieken voor het ontwikkelen van websites aan, met de nieuwste webstandaarden: XHTML, CSS, ECMAScript en DOM We concentreren ons in deze cursus op de belangrijkste technieken die gezamenlijk de presentatie van de webpagina voor hun rekening nemen. Dit zijn achtereenvolgens : 1. Het structuren van een website d.m.v. XHTML 1.1 2. Het gebruik van Cascading Style Sheets (CSS 2.1) om een website een bepaalde vormgeving te geven 3. Het ontwikkelen van een website door gebruik te maken van de tool Dreamweaver 8 4. De interactie met de gebruiker verhogen d.m..v Javascript.

Na deze cursus moet de student in staat zijn om zelf een professionele websites op te zetten. Deze moet op verschillende platformen en browsers kunnen bekeken worden. De leerstof van deze cursus is noodzakelijk als voorkennis voor het vak ASP.NET

Eindcompetenties

1. De student heeft inzicht in de architectuur van het World Wide Web. 2. De student heeft inzicht in de basistechnologieën, nodig voor het ontwerpen van clientserver toepassingen via het World Wide Web (WWW). 3. De student kent de basisprincipes van de belangrijkste client-side technologieën (b.v. XHTML, CSS (Cascading Style Sheets), DOM (Document Object Model) en JavaScript), en kunnen deze ook toepassen. 4. De student kan een website opzetten, conform de webstandaarden vooropgesteld door het W3C 5. De student heeft inzicht in toegankelijkheidsprincipes bij het creëren van webgebaseerde toepassingen. 6. de student beschikt over een gezond-kritische attitude ten opzichte van het vakgebied: hij/zij kan de verschillende oplossingsmogelijkheden voor een probleem en diverse tools die hiervoor beschikbaar zijn, vergelijken en afwegen op hun bruikbaarheid en efficiëntie. 7. de student heeft kennis van een breed spectrum van actuele software en kan daarmee werken.

Begincompetenties 1. De student kan werken met MS Windows en internet. 2. De student heeft basisvaardigheden betreffende het gebruik van toepassingspakketten, zoals een tekstverwerker. De cursus wordt in het Nederlands gegeven.

Studiewijzer OHO

2006-2007

KATHO departement VHTI

EVALUATIE

Assessmentvorm Opdrachten

Periode/datum Zie detailkalender

Gewicht t.o.v. totaal 20 %

Website

Zie detailkalender

80 %

Aandachtspunten Overzichtelijke oplossingen tijdig indienen. Individueel oplossen. Zie afzonderlijk document : eindopdracht website (zie Blackboard)

Feedback Via Elektronisch leerplatform (Blackboard) Blackboard

Bij bepaalde opdrachten krijg je het resultaat te zien en is het de bedoeling dat je hetzelfde resultaat bekomt. Daarbij is het niet alleen de bedoeling dat het resultaat op papier zo goed mogelijk lijkt op de modeloplossing, maar ook dat de opmaak efficiënt en doordacht gebeurd is.

Er is geen schriftelijk of mondeling examen. Het vak Lab multimedia zal in hoofdzaak (80%) geëvalueerd worden a.d.h.v. een zelf ontworpen website. De website zou moeten klaar zijn op 27 april 2007. Deze wordt ingediend op CD-ROM.

Studiewijzer OHO

2006-2007

KATHO departement VHTI

ORGANISATIE & BEGELEIDING Instapbegeleiding Studietips: • Probeer geen te grote leerstofonderdelen in een keer te verwerken. • Sla geen oefeningen over. • De snelheid van uitvoering is ook belangrijk. • De bedoeling is om een efficiënte werkmethode te hanteren. Vaak zijn er meerdere wegen die tot een juiste oplossing leiden, maar de kortste en/of eenvoudigste methode is meestal de beste • Alle oefeningen moeten tijdig ingediend worden.

Leermiddelen In deze onderwijsactiviteit wordt handboek en drie cursussen gebruikt: 1. 2. 3. 4.

cursus : XHTML met bijhorende opgavebestanden; cursus : CSS 2.1 met bijhorende opgavebestanden; handbook : basiscursus Dreamweaver 8, Academic Service, Harry Heijkoop; cursus : JavaScript met bijhorende opgavebestand

De onderdelen worden best in volgorde van opsomming doorgenomen. De cursussen en de opgavebestanden, in PDF-formaat, staan online op Blackboard. De cursussen wordt ook op papier ter beschikking gesteld. Oplossingen van sommige oefeningen worden beschikbaar gesteld op Blackboard. Verder zou volgende software moeten geïnstalleerd zijn: • Office XP Professional • Acrobat Reader 7.0 • Kladblok • IE 6 met SP 2 of IE 7.0 en Mozilla Firefox 1.5 • Adobe Dreamweaver 8.0 • Eventueel Adobe Photoshop CS2 of Irfanview 3.99 (Freeware : http://www.irfanview.com/) • Topstyle Lite (freeware : www.bradsoft.com)

Er wordt ook gebruik gemaakt van het Elektronisch leerplatform Blackboard. Blackboard is een belangrijk communicatiemiddel tussen student en docent. Vragen in verband met de cursus worden gesteld op de elektronische discussiegroep (discussion board) van Blackboard. Er wordt verwacht dat de studenten niet alleen de vragen stellen, maar dat ze ook zoveel mogelijk antwoorden formuleren op vragen van andere studenten. Enkel wanneer vragen lang onbeantwoord blijven, of wanneer er rechtzettingen moeten gebeuren, zullen docenten tussenkomen. Als aanvulling op de cursussen zullen we geregeld verwijzen naar het Internet. Onderwijskundige werkvormen en begeleiding Afstandsonderwijs

Studiewijzer OHO

2006-2007

Lab Multimedia

De student neemt de cursus zelfstandig door en maakt oefeningen. Van sommige oefeningen worden de oplossingen aangeboden op Blackboard. Elektronische discussiegroep. Blackboard is het communicatiemiddel bij uitstek tussen student en docent. Concrete leerdoelen

Deel 1 : XHTML Dit onderdeel is bedoeld om zelf meer te weten van de achtergronden waarmee webpagina’s worden gemaakt. Natuurlijk kunt u in Microsoft Word een opdracht geven als Bestand, opslaan als webpagina. Maar daarmee haalt u bepaald niet het onderste uit de kan en blijft u in veel gevallen achter met een loodzware webpagina waarin veel overbodige codes voorkomen. Met andere woorden: wanneer u zelf graag maximale grip hebt op het ontwerp en de werking van uw webpagina’s, is dit onderdeel een belangrijke starter. Wanneer we oefeningen oplossen zullen we deze ook altijd laten controleren of deze voldoen aan de standaardnomen. Het is de bedoeling dat onze webpagina’s voldoen aan de W3C-standaard. Het W3C (World Wide Web Consortium) ontwikkelt open specificaties (feitelijk standaarden) om de onderlinge operationele samenwerking van web-gerelateerde producten te vergroten . De bekenste online-validatieservice is waarschijnlijk die W3C zelf. Deze tool zullen we gebruiken. Het adres is validator.w3.org. Hier kan je zowel pagina’s valideren die reeds online staan als een bestand vanaf je eigen pc uploaden en laten testen. Dit laatste is uiteraard handig als controlemiddel voordat je de site definitief publiceert. Het valideren van een pagina op je computer is eenvoudig : • • •

Open in uw browser de W3C Markup Validation Service op http://validator.w3.org Klik in het vak Local File en klik op Browse om het gewenste bestand op uw computer te selecteren. Klik daarna op Check om het bestand te uploaden en te laten valideren.

Hoofdstuk 1. Waarom XHTML ? • XHTML kunnen situeren in de tijd • De voordelen kunnen opsommen van XHTML Hoofdstuk 2. Versies van XHTML • Het verschil tussen de verschillende versies kunnen beschrijven. • Wat zijn Deprecate tags en attributes Hoofdstuk 3. De structuur van een XHTML-document • De algemene opbouw van een xhtml-document kunnen uitleggen • Het nut van een Doctype kunnen uitleggen • Het nut om een tekenset op te nemen kunnen uitleggen • Weten welke “gereserveerde” tekens er bestaan • Kunnen beschrijven wat entity-references zijn en waarom deze gebruikt worden Hoofdstuk 4. XHTML-tags • Weten welke informatie wordt opgenomen tussen de head-tag • Weten welke informatie wordt opgenomen tussen de body-tag • De bedoeling van headings-tags kunnen uitleggen • Gegevens kunnen weergeven in een ongenummerde -, genummerde- en definitielijst • De gegevens kunnen structuren. • Datagegevens kunnen weergeven in een tabel • De attributen colspan en rowspan kunnen toepassen

Studiewijzer OHO

2006-2007

Lab Multimedia

• • •

Links kunnen leggen naar ander pagina’s en websites Een emailadres kunnen opnemen in een website Een tekening kunnen opnemen in een webdocument

Hoofdstuk 5. XHTML-regels • De student moet de verschillende XHTML-regels kunnen toepassen • De student moet een HTML 4.0 pagina kunnen omzetten naar een XHTML 1.1 Hoofdstuk 6. XHTML validaren • Verschillende manieren van valideren kunnen weergeven • Een pagina kunnen valideren Hoofdstuk 7. Formulieren • De basisopbouw van een formulier kunnen beschrijven • De student moet volgende elementen kunnen opnemen in een formulier : textbox, paswoord-veld, textarea, radiobutton, checkbox en keuzelijst • Het verschil tussen radiobutton en checkbox kennen. • Het verschil tussen get en post kunnen uitleggen. Hoofdstuk 8. Oefeningen In hoofdstuk 8 werden vier opdrachten opgenomen. Los deze vier oefeningen op volgens de W3C-standaard. Let op : we gebruiken XHTML 1.0 strict of XHTML 1.1. We gebruiken kladblok om onze oefeningen op te lossen. Gebruik geen andere tool. Het is belangrijk dat je zelf de elementen (tags) schrijft. Zo leer je beter de elementen kennen. Vertrek van het bestand “default.htm” om de oefeningen op te lossen. Dit bestand kan je terugvinden op Blackboard (folder XHTML).

Enkel opdracht 2 moet ingediend worden via Blackboard (opdrachten -> XHTML). Tips : • Tekst moet altijd omsloten worden door een element. Hieronder vind je een voorbeeld dat niet zal gevalideerd worden daar de tekst niet omsloten is door een element. De data moet altijd gestructureerd worden. Voorbeeld : voldoet niet aan de standaard <meta http-equiv="Content-Type" content="txt/html; charset=iso-8859-1" /> Dit is een test Voorbeeld : voldoet aan de standaard

Studiewijzer OHO

2006-2007

Lab Multimedia

<meta http-equiv="Content-Type" content="txt/html; charset=iso-8859-1" />

Dit is een test

•

Geen
achter een heading (vb h1) of

. Deze elementen nemen automatisch een nieuwe regel. Deze elementen noemt men ook block elementen (zie theorie CSS)

Deze oefeningen worden ingediend via Blackboard. Hou timing in de gaten (zie detailkalender)

Deel 2 : CSS (Cascading Style Sheets) Dit deel behandelt het opmaken van webdocumenten m.b.v. Cascading Style Sheets. Laat XHTML voor de vorming van webpagina’s achterwege. XHTML is geen opmaaktaal en is hiervoor ook niet geëigend, ook al vindt u links en rechts in HTML schijnbaar voldoende mogelijkheden voor het lay-outen van webdocumenten. CSS bevat veel meer opties voor de opmaak en is flexibeler in het gebruik. Hoofdstuk 1 : inleiding

Niemand neemt nog genoegen met saaie webpagina’s. Afbeeldingen, kleuren, mooie typegrafie en animaties, het hoort er allemaal bij. De webtaal HTML is nooit voor dat doel ontwikkeld, maar onder druk van de gebruikers is HTML uitgebreid met opmaakmogelijkheden. Daardoor lopen vorm en inhoud vaak volledig door elkaar en dat heeft de nodige ongewenste gevolgen. Inmiddels is de tegenbeweging op gang gekomen en groeit de populariteit van de speciaal voor opmaak ontwikkelde techniek: Cascading Style Sheets. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ

De scheiding van inhoud en opmaak achtergrondinformatie over CSS. Wat zijn de voor- en nadelen? Hoe ziet de toekomst van CSS eruit? Stylesheets verbinden met XHTML Document Object Model

Hoofdstuk 2 : selectors Elke stijldefenitie bevat een kiezer, een selector, die in het document (xhtml) speurt naar het bijbehorende element waarop uw stijl moet worden toegepast. Leer de selectors kennen. Hoe efficiënter u de selectors inschakelt, hoe doelgerichter de vormgeving uitpakt. Maak een keuze uit een van de vijf selectors, combineer ze. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ

Introductie selectors Element-selector CLASS en ID Pseudo-element selectors

Studiewijzer OHO

2006-2007

Lab Multimedia

ƒ

Pseudo-klasse selector

Hoofdstuk 3 : werken met tekst Dit hoofdstuk gaat dieper in op de belangrijkste opmaakeigenschappen. U leert werken met eigenschappen voor het lettertype, tekst, kleur en achtergronden. Met deze kennis kan een webpagina al voor een groot deel worden ontdaan van HTML-opmaak. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ

Bewerken van tekst Aanpassen lettertype Aanpassen achtergrond en kleur

Hoofdstuk 4 : navigatie U hebt in de vorige hoofdstukken kennis gemaakt met een aantal basis lay-out principes. Het ligt voor de hand dat de navigatiestructuur in uw website behoort tot de belangrijkste onderdelen. Met een duidelijke, logische navigatie zorgt u ervoor dat de bezoekers van je website vinden wat ze zoeken. Bij navigatiestructuren kun je denken aan: hoofdnavigatie, subnavigatie, zoekfunctie, sitemap, veelgestelde vragen. Het zijn allemaal methodes om de bezoekers van je website te helpen bij het vinden wat ze zoeken. In dit hoofdstuk behandelen we twee van de belangrijkste van de bovenstaande structuren: hoofdnavigatie en subnavigatie. Wat mag u verwachten in dit hoofdstuk: ƒ ƒ ƒ

Het opmaken van een link in css. Het list element als structuur voor je navigatie Een horizontale navigatie in een list

Hoofdstuk 5 : Positionering van elementen Gebruik geen tabel voor het opmaken van webpagina’s. CSS heeft betere opties voor het postioneren van elementen op een pagina. Geef waarden aan de eigenschap float om elementen preciezer te plaatsen of maak gebruik van relatieve dan wel absolute positionering. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ

Natuurlijke flow van een pagina De box Zwevende elementen Positioneren van elementen CSS-generators

Hoofdstuk 6 : oefeningen In hoofdstuk 6 werden vier opdrachten opgenomen. Los deze vier oefeningen op volgens de W3C-standaard. Enkel opdracht 3 moet ingediend worden via Blackboard (opdrachten -> CSS).

Studiewijzer OHO

2006-2007

Lab Multimedia

De xhtml-code blijven we opmaken in kladblok (notepad). Om de stylesheet op te stellen kan je ook kladblok gebruiken maar een veel betere tool is Topstyle. Dit programma kan je gratis downloaden (freeware : www.bradsoft.com).

Klik vervolgens op topstyle, men komt op volgende pagina terecht.

Kies voor het tabblad Lite version

Onderaan deze website vind je een downloadlink. Wanneer men de exe-file heeft uitgevoerd, kan je het programma gebruiken om je CSS op te stellen.

Studiewijzer OHO

2006-2007

Lab Multimedia

Als men de stylesheets heeft opgesteld, bewaar deze onder een extensie css en verbindt deze via het link-element in je XHTML-code.

Deel 3 : DREAMWEAVER 8 Macromedia Dreamweaver 8 is een programma om websites te maken. Het is echter veel meer dan dat. Via Dreamweaver kunt u niet alleen uw webpagina’s vormgeven, het is tevens een complete ontwerp-en beheertoepassing voor (grotere) websites. In deze Basiscursus leest u stap voor stap hoe goede webpagina’s en sites met Dreamweaver 8 worden ontwikkeld. U leert webpagina’s opmaken met lijsten, afbeeldingen en tabellen en hoe uw site in een logische structuur wordt opgebouwd. Ook als u nog nooit een website hebt gemaakt, kunt u na het lezen van deze Basiscursus zelf aan de slag met Dreamweaver 8! Alle basisvaardigheden worden stapsgewijs op een begrijpelijke manier uitgelegd en aangevuld met oefeningen, zodat u snel leert wat u in de dagelijkse praktijk nodig hebt! De voorbeeldbestanden die in het boek worden gebruikt, kunt u terugvinden op volgende url : http://www.academicservice.nl/zip/9039524939_voorbeeldbestanden.zip. Het is een zipbestand. Download dit bestand op uw computer. Deze file bevat terug 8 zip-bestanden. Ontzip het bestand. De oefeningen maakt u op uw eigen tempo. De oefeningen moet u niet indienen. Dankzij de kennis die u reeds hebt over XHTML en CSS, zal u snel de gegenereerde code die Dreamweaver aanmaakt begrijpen. BELANGRIJKE OPMERKING : het gebruikte handboek is een zeer goed boek om Dreamweaver aan te leren in een korte tijd maar de W3C-standaard wordt veelal niet gerespecteerd, wat natuurlijk jammer is. Als u straks zelf websites maakt, probeer de standaarden wel te volgen. Voor ons eindproject zullen we proberen de XHTML 1.0 strict na te leven. De websites die beschreven staan in boek zijn enkel uitgetest voor Windows Explorer. Wanneer u gemaakte websites uit het boek zal testen in Firefox kan het resultaat helemaal anders zijn. Daarom zal geregeld verwezen worden naar deze studiewijzer om te zorgen dat de gemaakte websites ook werken voor Firefox.

Studiewijzer OHO

2006-2007

Lab Multimedia

In hoofdstuk 1 “Kennismaken met Dreamweaver 8” maakt u kort kennis met enkele (theoretische) achtergronden van internet en het world wide web en schetsen we alvast enkele kenmerken van Dreamweaver. Wanneer u hiermee reeds bekend ben, kunt u dit hoofdstuk vluchtig doornemen en gebruiken ter naslag of referentie. Er zijn twee subhoofdstukken die je best doorneemt nl: 1.7 Dreamweaver-terminologie: site, page en asset, pag. 24 - 27 en 1.8 enkele eigenschappen van Dreamweaver 8, pag. 27- 33 Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Enkele achtergronden van internet Het World Wide Web De rol van HTML, DHTML, JavaScript en CSS Browsers: een overzicht Het begrip ‘homepage’ Dreamweaver-terminologie: site, page en asset Ter oriëntatie: enkele eigenschappen van Dreamweaver 8 Afspraken in dit boek Samenvatting

In hoofdstuk 2 “Uw eerste site met Dreamweaver 8” maakt u direct een site in Dreamweaver. U maakt meteen kennis met de basisbeginselen van webdesign door pagina's op te maken met layers, aan de site toe te voegen en via hyperlinks aan elkaar te koppelen. Alle pagina's en sites die u maakt, worden in de browser getest. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Dreamweaver starten en afsluiten Een site plannen De local site root maken Eigenschappen van de homepage aanpassen De lay-out voor de hompage instellen met layers Tekst invoeren Afbeeldingen invoegen Layers bewerken Een nieuwe pagina aan de site toevoegen Koppelingen aanbrengen De site testen Eindoefening Samenvatting

Drie opmerkingen : ƒ De eerste webpagina’s die we maken in het boek, zullen het Doctype Transitional hebben.

ƒ

Verder in het boek zal u zien hoe u het doctype kan wijzigen in Strict (zie cursus XHTML). Het gebruik van het attribute align om tekst te positioneren wordt in XHTML afgeraden (http://www.w3.org/TR/html401/present/graphics.html#alignment. Toch wordt er in het boek gebruikt van gemaakt (zie pag. 51). Men kan beter gebruik maken van CSS. Hieronder vindt u een woordje uitleg om het probleem op te lossen.

Slecht voorbeeld : This example centers a heading on the canvas (geen align meer binnen in het element gebruiken).

How to Carve Wood

Oplossing :

Studiewijzer OHO

2006-2007

Lab Multimedia

Using CSS, for example, you could achieve the same effect as follows: <style type="text/css"> h1 { text-align: center}

How to Carve Wood

Note that this would center all h1 declarations. You could reduce the scope of the style by setting the class attribute on the element: <style type="text/css"> h1.wood {text-align: center}

How to Carve Wood

DEPRECATED EXAMPLE: Similarly, to right align a paragraph on the canvas with HTML's align attribute you could have:

...Lots of paragraph text... Oplossing : which, with CSS, would be: <TITLE>How to Carve Wood <STYLE type="text/css"> P.mypar {text-align: right}

...Lots of paragraph text... DEPRECATED EXAMPLE: To right align a series of paragraphs, group them with the DIV element:

Oplossing : With CSS, the text-align property is inherited from the parent element, you can therefore use: <TITLE>How to Carve Wood <STYLE type="text/css"> DIV.mypars {text-align: right} To center the entire document with CSS: <TITLE>How to Carve Wood <STYLE type="text/css"> BODY {text-align: center} ...the body is centered... The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center". The CENTER element is deprecated. ƒ

Wanneer u de gemaakte website zal testen in Firefox zult u merken dat het resultaat anders is dan in Windows Explorer. De hyperlinks zullen niet werken. Reden : in Firefox wordt een blanco regel geplaatst boven het element heading 1

, in Explorer gebruikt dit niet. Hierdoor komt een stuk van layer 1 onder layer 3 te liggen en kan men de hyperlinks niet meer aanklikken. Oplossing : plaats de padding van het element h1 op nul,

Daring - Fotografie en cursussen

ƒ

Men had dezelfde layout kunnen bekomen door te werken met het float-element i.p.v. het position-element. Float is een flexibeler systeem. De hoogtes van de div-elementen passen zich aan aan de inhoud van de tekst.


Studiewijzer OHO

2006-2007

Lab Multimedia

width:460px; } --> ƒ

Om de website in het midden te plaatsen van de browser zou u de volgende styleelementen kunnen toevoegen aan het body-element: margin-left:auto; margin-right:auto;

In hoofdstuk 3 “De werkomgeving in detail” wordt de werkomgeving van Dreamweaver in detail besproken. De interface van Dreamweaver bestaat uit vele paletten en kent diverse handige hulpmiddelen die bij het ontwerpen van sites en pagina's van pas kunnen komen. Als u hier vlot mee overweg kunt, zult u in de rest van het boek snel uw weg kunnen vinden binnen de Dreamweaver-interface. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Het documentvenster en de statusbalk Elementen invoegen via het palet insert De werkomgeving instellen en werken met de paletten Het menu Window Dreamweaver-voorkeuren instellen Eindoefening Samenvatting

Heel hoofdstuk 4 “Sites plannen en beheren” is gewijd aan het plannen en ontwerpen van websites. We werken in dit boek van algemeen naar specifiek, wat inhoudt dat u in dit hoofdstuk algemene aanwijzingen vindt voor het opzetten van een website, het ontwerpen van een storyboard, navigatiestructuren voor sites en dergelijke. Meer praktisch gericht laten we zien hoe dit in Dreamweaver in zijn werk gaat en hoe u sites op een server plaatst met FTP of bestaande sites importeert in Dreamweaver. Mocht u reeds vertrouwd zijn met het bouwen van website, mag u volgende subonderdelen overslaan: 4.1 t.e.m. 4.4

Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Informatiestructuren De doelgroep van de website De structuur van de website Werken met de Site Map Een nieuwe site maken via een Site Map Absolute en relatieve hyperlinks Een bestaande site in Dreamweaver importeren Aanbevelingen voor mappen en bestanden op de site Eindoefening Samenvatting

In hoofdstuk 5 “Paginaopmaak gebruiken” wordt dieper ingegaan op de achtergrond van paginaopmaak en -beheer. U leert teksten invoegen en opmaken en werken met de Property Inspector. Dit is een van de belangrijkste paletten bij het aanpassen van allerlei elementen op een pagina.

Studiewijzer OHO

2006-2007

Lab Multimedia

Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Tekst typen en opmaken Een ander lettertype kiezen De uitlijning aanpassen Het palet History gebruiken Lijsten en opsommingen maken Een kleurenschema kiezen voor een pagina Het resultaat beoordelen Eindoefening Samenvatting

Heel hoofdstuk 6 “Afbeeldingen gebruiken” gaat over het invoegen van afbeeldingen op webpagina's. U maakt kennis met de diverse grafische bestandstypen en de voor- en nadelen van elk type. Ook leest u hoe u afbeeldingen als koppeling kunt gebruiken in een navigation bar en een achtergrondafbeelding op webpagina's aanbrengt. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Grafische bestandsformaten Hoe komt e aan afbeeldingen? Afbeeldingen invoegen op een pagina Eigenschappen van afbeeldingen aanpassen Achtergrondafbeeldingen gebruiken Een rollover image maken Een navigation bar invoegen Eindoefening Samenvatting

In hoofdstuk 7 “Meer over hyperlinks” leert u meer over de diverse typen hyperlinks die op webpagina's gebruikt kunnen worden. Hier wordt onder meer besproken hoe u afbeeldingen als hyperlink gebruikt, hoe u zelf bestanden aanbiedt om te downloaden en hoe een Jump Menu wordt ingezet. De items 7.2 en 7.3 kunt u snel doornemen, daar de theorie reeds werd gezien in de cursus XHTML. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

De verschillende typen hyperlinks op een rijtje Werken met named anchors Zelf bestanden aanbieden om te downloaden Een nieuw browservenster openen met een hyperlink Hyperlinks op de site valideren Imagemaps en hotspots Een jump menu maken Eindoefening Samenvatting

Opmerking : probeer het attribuut target in hyperlinks te vermijden. Gebruikers moeten zelf kunnen kiezen of een pagina in een nieuw scherm geopend wordt, niet de maker van de site. Derhalve is het dus uit de nieuwere standaarden verwijderd. Wil de gebruiker toch een nieuw venster openen, kan hij de Ctrl-toets indrukken en klikken.

Studiewijzer OHO

2006-2007

Lab Multimedia

In hoofdstuk 8 “Pagina’s opmaken met tabellen en layers” ziet u hoe u webpagina's opmaakt met behulp van tabellen. Oorspronkelijk waren tabellen vooral handig om rijtjes cijfers netjes onder elkaar weer te geven, maar bij modern website-ontwerp zijn het onmisbare hulpmiddelen om afbeeldingen en tekst naar wens op een pagina te positioneren. Ook layers komen in dit hoofdstuk aan bod. Probeer de handelswijze dat in het boek wordt gevolgd om website te lay-outen via tabellen, niet blindelings te volgen. Het is beter gebruik te maken van element float om uw website in te delen in kolommen (zie hoofdstuk 2 en cursus CSS) Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

waaruit bestaat een tabel? Tabellen invoegen Tabellen bewerken Tabellen en cellen opmaken Tabellen snel opmaken met Format Table Pagina’s opmaken met Layout Table en Layour Cell Werken met layers Eindoefening Samenvatting

In hoofdstuk 9 “Sites uitbreiden met behaviors” komen meer geavanceerde Dreamweaver-onderwerpen aan bod, de behaviors. Via actions en events kunt u allerhande muisbewegingen afvangen en zo de gebruiker met interactieve pagina's verrassen.

Dit hoofdstuk is geen verplichte lectuur. Mag je eventueel doornemen. Wat mag u verwachten in dit hoofdstuk : ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ ƒ

Wat zijn behaviors Stappenplan voor het toepassen van behaviors Het palet Behaviors gebruiken Een behavior toevoegen Een boodschap in de statusbalk Layers beheren met behaviors Naslag: overige behaviors Eindoefening Samenvatting

Deel 4 : JavaScript JavaScript is een programmeertaal die dient als aanvulling op HTML en is bij uitstek geschikt voor het verlevendigen van webpagina's. Met behulp van JavaScript is het bijvoorbeeld mogelijk interactieve formulieren te ontwikkelen, pagina's dynamisch aan te passen, online berekeningen uit te voeren en direct te reageren op invoer van de gebruiker. In deze basiscursus leest u hoe de programmeertaal JavaScript werkt. Daarnaast leert u hoe u de browser bestuurt met JavaScript, zelf vensters opent, rollover-buttons maakt, werkt met datums en tijden en meer. De voorbeelden die werden opgenomen in de cursus kunnen gemakkelijk worden uitgetest via de link : http://www.w3schools.com/js/tryit.asp?filename=tryjs_text. Plak de code in

Studiewijzer OHO

2006-2007

Lab Multimedia

de linkerzijde en klik vervolgens op knop “Edit the text and click me”. Het resultaat wordt getoond in de rechterkolom.

Verplichte opdrachten in het kader van evaluatie Er zijn verplichte opdrachten.

Studiewijzer OHO

2006-2007

Lab Multimedia