Les 4 Webdesign Toerisme

561 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
561
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Les 4 Webdesign Toerisme

  1. 1. Indelen van de Webpagina (vervolg) (les 4 ) <ul><li>We willen een: </li></ul><ul><ul><li>Dynamische en strakke website; </li></ul></ul><ul><ul><ul><li>juiste en dezelfde plaats van de assets </li></ul></ul></ul><ul><ul><ul><li>Efficiënt gebruik van het scherm </li></ul></ul></ul><ul><ul><ul><li>Geen onwillekeurige springers of dancers </li></ul></ul></ul><ul><ul><ul><li>Geen volgepropt scherm </li></ul></ul></ul>
  2. 2. 3 middelen om in te delen <ul><li>Een webpagina kun je met 3 middelen indelen: </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Frames </li></ul></ul><ul><ul><li>Tabellen </li></ul></ul>
  3. 3. Layers <ul><li>Kunnen we laten bewegen (dynamisch) </li></ul><ul><ul><li>(niet converteren naar een tabel) </li></ul></ul><ul><li>Gemakkelijk; </li></ul><ul><ul><li>ontwerp </li></ul></ul><ul><ul><li>onderhoud </li></ul></ul><ul><ul><li>eenvoudig </li></ul></ul><ul><li>Converteren naar een tabel </li></ul>
  4. 4. Opdracht 1 (layer invoegen) <ul><li>Start Dreamweaver MX: </li></ul><ul><ul><li>Plaats een Layer linksboven in het werkblad (=documentvenster) </li></ul></ul><ul><ul><li>Met Property Inspector geef je de layer de achtergrond kleur rood </li></ul></ul><ul><ul><li>Zet de Overflow op hidden </li></ul></ul>
  5. 5. Opdracht 2 (layer aan timeline koppelen) <ul><li>De layer laten bewegen; </li></ul><ul><ul><li>Selecteer de Layer van opdracht 1 </li></ul></ul><ul><ul><li>Ga naar Modify </li></ul></ul><ul><ul><li>Klik op Timeline (onderaan) </li></ul></ul><ul><ul><li>Kies voor ADD OBJECT TO TIMELINE </li></ul></ul><ul><ul><li>Klik op het laatste frame </li></ul></ul><ul><ul><li>Sleep de layer naar een andere positie (rechstonder in de pagina) </li></ul></ul>
  6. 6. Opdracht 3 (resultaat bekijken) <ul><ul><li>Vink in de time line eerst automatic play aan ((en loop)) </li></ul></ul><ul><ul><li>Om het effect te bekijken moet je op F12 klikken (preview in browser) </li></ul></ul><ul><ul><li>Let op soms kan het nodig zijn om het document even op te slaan alvorens je het in de browser kunt bekijken </li></ul></ul>
  7. 7. Opdracht 4 (vorm veranderen) <ul><li>Ga in de timeline op frame 1 staan </li></ul><ul><li>Maak de layer flink kleiner </li></ul><ul><li>Vervolgens verander je het aantal frames (15) per seconde in (60) </li></ul><ul><li>Bekijk het resultaat met F12 </li></ul>
  8. 8. Opdracht 5 (een kromme beweging) <ul><li>Voeg in frame 10 een keyframe in: </li></ul><ul><ul><li>(modify,timeline, add keyframe) </li></ul></ul><ul><li>Ga op 10 staan en versleep de layer naar rechtsboven. </li></ul><ul><ul><li>(maak er een mooie kromme van) </li></ul></ul><ul><ul><li>(bekijk het resultaat met F12) </li></ul></ul>
  9. 9. Opdracht 6 (Nog meer keyframes) <ul><li>De tijdlijnanimatie die gemaakt hebben kent nu 1 bocht. </li></ul><ul><li>Met meer keyframes kun je nog meer bochten maken. </li></ul><ul><li>Voeg nog 3 keyframes in de tijdline toe en maak er even zoveel bochten in en bekijk het resultaat met F12 </li></ul>
  10. 10. Opdracht 7 (een layer met een plaatje) <ul><li>Nieuwe pagina of oude layers weg </li></ul><ul><li>Voeg een nieuwe layer linksboven in </li></ul><ul><ul><li>(overflow op hidden) </li></ul></ul><ul><li>Voeg een foto in via background image </li></ul><ul><li>Koppel de layer aan de timeline </li></ul><ul><ul><li>(modify, timeline, add object to timeline) </li></ul></ul><ul><li>Ga in het laatste frame staan en sleep de layer naar rechtsonder </li></ul>
  11. 11. Opdracht 8 (nog meer beweging)( snelle methode) <ul><li>Voeg een nieuwe layer in </li></ul><ul><li>Kies: modify, timeline en klik op Record Path of layer. </li></ul><ul><ul><li>(dreamweaver voegt nu zelf de keyframes toe) </li></ul></ul><ul><li>Sleep de layer in slingerende beweging naar rechtsonder in de pagina </li></ul><ul><li>Bekijk het resultaat via F12 </li></ul>
  12. 12. Opdracht 9 (total move 1) <ul><li>Voeg 3 layers maak ze even groot (2*2 hokjes grid) en op de zelfde hoogte </li></ul><ul><li>Layer 1 linksboven </li></ul><ul><li>Layer 2 middenboven </li></ul><ul><li>Layer 3 rechtsboven </li></ul><ul><li>Content layers: </li></ul><ul><li>Layer 1: tekst: </li></ul><ul><ul><li>welkom </li></ul></ul><ul><li>Layer 2: </li></ul><ul><ul><li>Kleur; rood (bg) </li></ul></ul><ul><li>Layer 3: </li></ul><ul><ul><li>Foto (bg image) </li></ul></ul><ul><li>Let op zet de overflow op hidden </li></ul>
  13. 13. Opdracht 10 (total move 2) <ul><li>De bewegingen: </li></ul><ul><li>Layer 1; beweegt horizontaal in een rechte lijn van links naar rechts </li></ul><ul><li>Layer 2: beweegt in golvende beweging (met 2 keyframes) naar rechtsonder </li></ul><ul><li>Beweging van layer: </li></ul><ul><li>Layer 3 beweegt zich in golvende zig zag lijn van rechstboven naar linksonder. </li></ul><ul><ul><li>(Record path to layer) </li></ul></ul><ul><ul><li>[let op bekijk het resultaat via F12] </li></ul></ul>
  14. 14. Nog meer beweging (Flash) <ul><li>Dreamweaver is net als alle andere webdesign programma’s in vergelijking met FLASH een veredelde tekstverwerker. </li></ul><ul><li>Flash is speciaal ontworpen voor het maken van animaties (bewegende beelden en tekeningen). </li></ul><ul><li>Flash animaties nemen weinig geheugen in </li></ul><ul><li>En the sky the limit (alles kan wat met animatiefilm te maken heeft zelfs 3D) </li></ul>
  15. 15. Opdracht 11 (ovaal tekenen) <ul><li>Start Flash op en kiezen we de oval tool </li></ul><ul><li>Kleur met het emmertje de oval geel </li></ul><ul><li>Plaats vervolgens de ovaal op de stage (het witte werkblad) </li></ul>
  16. 16. Opdracht 12 (ovaal laten bewegen) <ul><li>Ga op frame 1 staan , kies Insert; </li></ul><ul><ul><li>En dan CREATE MOTION TWEEN </li></ul></ul><ul><li>Ga naar frame 40 staan en kies insert keyframe: </li></ul><ul><ul><li>(in de timeline van layer 1 zie je nu een lange pijl) </li></ul></ul><ul><li>Sleep nu (met de zwarte pijl) de ovaal naar de andere kant van de stage. </li></ul><ul><li>Via Control, Play; kun je het resultaat bekijken van deze animatie </li></ul>
  17. 17. Opdracht 13 (met een guide layer ) <ul><li>Klik op het plusje in het timeline window. (invoegen guide layer) </li></ul><ul><li>Klik op frame 1 van de guide layer </li></ul><ul><li>Teken met het pencil tool een kromme lijn </li></ul><ul><li>Plaats met de zwarte pijl, de ovaal aan het begin (frame 1) en aan het einde van de kromme lijn (laatste frame) </li></ul><ul><li>Via control, play/test movie kun je het resultaat zien. </li></ul>

×