Indelen van de Webpagina (vervolg) (les 4 )

We willen een:

Dynamische en strakke website; juiste en dezelfde plaats van de assets Efficiënt gebruik van het scherm Geen onwillekeurige springers of dancers Geen volgepropt scherm

3 middelen om in te delen Een webpagina kun je met 3 middelen

indelen:

Layers

Frames

Tabellen

Layers

Kunnen we laten bewegen (dynamisch) (niet converteren naar een tabel)

Gemakkelijk; ontwerp onderhoud eenvoudig

Converteren naar een tabel

Opdracht 1(layer invoegen)

Start Dreamweaver MX: Plaats een Layer linksboven in het

werkblad (=documentvenster) Met Property Inspector geef je de layer de

achtergrond kleur rood Zet de Overflow op hidden

Opdracht 2(layer aan timeline koppelen)

De layer laten bewegen; Selecteer de Layer van opdracht 1 Ga naar Modify Klik op Timeline (onderaan) Kies voor ADD OBJECT TO TIMELINE Klik op het laatste frame Sleep de layer naar een andere positie

(rechstonder in de pagina)

Opdracht 3(resultaat bekijken)

Vink in de time line eerst automatic play aan ((en loop))

Om het effect te bekijken moet je op F12 klikken (preview in browser)

Let op soms kan het nodig zijn om het document even op te slaan alvorens je het in de browser kunt bekijken

Opdracht 4(vorm veranderen)

Ga in de timeline op frame 1 staan Maak de layer flink kleiner Vervolgens verander je het aantal

frames (15) per seconde in (60) Bekijk het resultaat met F12

Opdracht 5 (een kromme beweging)

Voeg in frame 10 een keyframe in: (modify,timeline, add keyframe)

Ga op 10 staan en versleep de layer naar rechtsboven. (maak er een mooie kromme van) (bekijk het resultaat met F12)

Opdracht 6 (Nog meer keyframes)

De tijdlijnanimatie die gemaakt hebben kent nu 1 bocht.

Met meer keyframes kun je nog meer bochten maken.

Voeg nog 3 keyframes in de tijdline toe en maak er even zoveel bochten in en bekijk het resultaat met F12

Opdracht 7 (een layer met een plaatje)

Nieuwe pagina of oude layers weg Voeg een nieuwe layer linksboven in

(overflow op hidden) Voeg een foto in via background image Koppel de layer aan de timeline

(modify, timeline, add object to timeline) Ga in het laatste frame staan en sleep

de layer naar rechtsonder

Opdracht 8 (nog meer beweging)(snelle methode)

Voeg een nieuwe layer in Kies: modify, timeline en klik op Record

Path of layer. (dreamweaver voegt nu zelf de keyframes toe)

Sleep de layer in slingerende beweging naar rechtsonder in de pagina

Bekijk het resultaat via F12

Opdracht 9 (total move 1) Voeg 3 layers maak ze

even groot (2*2 hokjes grid) en op de zelfde hoogte

Layer 1 linksboven Layer 2 middenboven Layer 3 rechtsboven

Content layers: Layer 1: tekst:

welkom Layer 2:

Kleur; rood (bg) Layer 3:

Foto (bg image) Let op zet de overflow

op hidden

Opdracht 10 (total move 2) De bewegingen: Layer 1; beweegt

horizontaal in een rechte lijn van links naar rechts

Layer 2: beweegt in golvende beweging (met 2 keyframes) naar rechtsonder

Beweging van layer: Layer 3 beweegt

zich in golvende zig zag lijn van rechstboven naar linksonder. (Record path to

layer)[let op bekijk het

resultaat via F12]

Nog meer beweging (Flash) Dreamweaver is net als alle andere

webdesign programma’s in vergelijking met FLASH een veredelde tekstverwerker.

Flash is speciaal ontworpen voor het maken van animaties (bewegende beelden en tekeningen).

Flash animaties nemen weinig geheugen in En the sky the limit (alles kan wat met

animatiefilm te maken heeft zelfs 3D)

Opdracht 11 (ovaal tekenen)

Start Flash op en kiezen we de oval tool

Kleur met het emmertje de oval geel

Plaats vervolgens de ovaal op de stage (het witte werkblad)

Opdracht 12 (ovaal laten bewegen)

Ga op frame 1 staan, kies Insert; En dan CREATE MOTION TWEEN

Ga naar frame 40 staan en kies insert keyframe: (in de timeline van layer 1 zie je nu een lange pijl)

Sleep nu (met de zwarte pijl) de ovaal naar de andere kant van de stage.

Via Control, Play; kun je het resultaat bekijken van deze animatie

Opdracht 13 (met een guide layer) Klik op het plusje in het timeline window.

(invoegen guide layer) Klik op frame 1 van de guide layer Teken met het pencil tool een kromme lijn Plaats met de zwarte pijl, de ovaal aan het

begin (frame 1) en aan het einde van de kromme lijn (laatste frame)

Via control, play/test movie kun je het resultaat zien.