We hebben gezien dat we met CSS en HTML pagina's en sites netjes kunnen opmaken. Maar als we iets interactiefs willen doen hebben we al snel JavaScript of Flash nodig.
JavaScipt kan vrij ingewikkeld zijn, maar gelukkig is er de Jquery library.
Dit is een verzameling voorgebakken functies (fades, database gerelateerd, grafisch) die betrekkelijk eenvoudig aan te roepen zijn.
Je hebt daarvoor de Jquery library nodig, die je hier kunt downloaden.
http://jquery.com/
Deze plaats je in de root van je site.
Vervolgens roep je in je pagina de jquery library aan:
Nu heb je binnen deze pagina de beschikking over de Jquery functies.
Het gaat te ver om echt diep in Jquery te duiken, maar als je echt het maximale er uit wilt halen raad ik je aan om deze site eens goed te bestuderen:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Of gewoon deze videocursus te volgen:http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
Hier wat voorbeeld die je met Jquery kan bereiken:
http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/
Enkele tutorials:
http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
Motiongallery.js
http://sixrevisions.com/javascript/free_javascript_image_galleries/
woensdag 8 februari 2012
woensdag 1 februari 2012
Les8
Vanavond gaan we niets nieuws doen...sorry.
Wat we wel gaan doen is even stilstaan bij de ontwerpen die er zijn gemaakt (althans ik hoop dat jullie we aan de slag zijn gegaan)
Ook gaan we verder sleutelen aan de voorbeeld site van verleden week.
We gaan namelijk kijken hoe we het ontwerp vanuit Fireworks in Dreamweaver kunnen gaan bewerken.
Verder gaan we werken aan ons ontwerp en zal ik jullie daar bij begeleiden.
Van Fireworks naar Dreamweaver:
Je hebt dus je pagina('s) geexporteerd als CSS en images en gechekt of alles er nog zo uit ziet als in Fireworks.
Als alles klopt kun je nu beginnen met het maken van de overige pagina's.
Stel je hebt een pagina index.html.......de vormgeving van deze pagina komt terug in alle pagina's van je site.
Sla die index pagina dan net zo vaak op onder andere namen.....zodat je straks voor elke knop een pagina hebt met een andere naam.
Vervolgens kun je nu met dreamweaver de inhoud van die pagina's vormgeven/opmaken.
Als de inhoud op de verschillende pagina's nou er veel afwijkt......bijvoorbeeld plaatjes die iedere keer op andere plekken staan, is het verstandiger om voor elk plaatje een andere fireworks pagina aan te maken en die te exporteren.
Mocht je het prettiger vinden om in Fireworks dingen te plaatsen, kun je ook gewoon je pagina's daar kopieren en onder andere namen exporteren.
Wat we wel gaan doen is even stilstaan bij de ontwerpen die er zijn gemaakt (althans ik hoop dat jullie we aan de slag zijn gegaan)
Ook gaan we verder sleutelen aan de voorbeeld site van verleden week.
We gaan namelijk kijken hoe we het ontwerp vanuit Fireworks in Dreamweaver kunnen gaan bewerken.
Verder gaan we werken aan ons ontwerp en zal ik jullie daar bij begeleiden.
Van Fireworks naar Dreamweaver:
Je hebt dus je pagina('s) geexporteerd als CSS en images en gechekt of alles er nog zo uit ziet als in Fireworks.
Als alles klopt kun je nu beginnen met het maken van de overige pagina's.
Stel je hebt een pagina index.html.......de vormgeving van deze pagina komt terug in alle pagina's van je site.
Sla die index pagina dan net zo vaak op onder andere namen.....zodat je straks voor elke knop een pagina hebt met een andere naam.
Vervolgens kun je nu met dreamweaver de inhoud van die pagina's vormgeven/opmaken.
Als de inhoud op de verschillende pagina's nou er veel afwijkt......bijvoorbeeld plaatjes die iedere keer op andere plekken staan, is het verstandiger om voor elk plaatje een andere fireworks pagina aan te maken en die te exporteren.
Mocht je het prettiger vinden om in Fireworks dingen te plaatsen, kun je ook gewoon je pagina's daar kopieren en onder andere namen exporteren.
Abonneren op:
Posts (Atom)