© Anselm Spoerri

Lecture 8

Meaning– Course Reward – Term Project– Exercise 4

Mechanics – Dreamweaver

– Layers = AP Elements more flexible page layouts

– Overlapping Layout Tables & Cells– Animation

© Anselm Spoerri

Comfort

Sophistication

InteractiveMultimediaWebsite thatCommunicates

Course Reward

Beginning of Sense of What is POSSIBLE

Building TensionFor Breakthrough

In Future Classes Will Work onFinal Project

© Anselm Spoerri

Term Project

“Role of Personal Interests?”– Very important– Place where you can be especially Playful & Creative

Overall Goals of Term Project– Create Website that Communicates Your Vision– Build Cool Site to Use as Your Calling Card– Demonstrate Technology, Media and Culture Savvy – Demonstrate Your Understanding of Class Content– Present your web site to the class

Evaluation Criteria– Mechanics: technical competency in web and multimedia design,

such as navigation, layout, media editing, access performance.

– Meaning: concise presentation of content and effective use of multimedia.

– Creativity

© Anselm Spoerri

Exercise 4

Create Images for Navigation Bar– Images need to have same height (horizontal bar)

or same width (vertical bar)

Create Navigation Bar– Create Dreamweaver file with Navigation Bar– Save as … to create other pages … or use Copy & Paste– Update “"Show 'Down Image' Initially" option for each page so

that it is selected for the right button

Alternative Navigation Bar– Can create Navigation Bar using Rollovers (or Flash Buttons)

– Making sure correct DOWN image used on specific page– Can have multiple “navigation bars” on same page

© Anselm Spoerri

Recap – Navigation Bar

Select “Layout Cell” into which to insert Navigation Bar

Insert > Images Objects > Navigation Bar

“Navigation Bar” dialog 1. Add Nav Bar Element by selecting “+”2. Name = “category”3. Select images for “Up”, “Over”, “Down” and “Over while down”4. Set “When clicked …” = browse to file for category5. Options

– Select “Preload Images” ALWAYS

– Select “Show Down Image initially” only if current category = current page

– “Table” checkbox: only if Navigation Bar is placed in a Layout Cell “not equal to” Layout Table

6. Repeat steps 1-5 for another category

Copy Navigation Bar and paste into other page– Make sure “Show Down Image initially” is properly configured

© Anselm Spoerri

Recap – Modifying Navigation Structures

Modify Navigation Bar– Modify > Navigation Bar

Change Hyperlink – Property Inspector: “Link” field

Change Behavior – Behavior Panel: double click on Event

© Anselm Spoerri

Layers = AP Elements Overview

More Control & Flexibility to make page Dynamic– Layout flexibility like in print design– Change visibility of layers– Animate layers and move them across screen with a timeline– Layer = container for HTML page elements

Disadvantage– Layers not viewable in 3.0 Browsers– Layers do not accept events in both 4.0 Browsers.

“Behavior” Window: click event pull down menu and change target browser to HTML 4.01 in the “Show Events For” pop-up menu.

Create Layout using Layers, then convert to Tables

– Issue of “overlapping layers”– Modify > Arrange > Prevent Layer / AP Elements Overlaps

Nesting Layers– Inherit properties from parent layer such as visibility

© Anselm Spoerri

AP Elements (Layers) Window

AP Elements (Layers) Window – Window > AP Elements

– Visibility

open eye = visible; closed eye = hidden; no eye = inherits

– Stacking Order

– The greater the ID, the higher up in the stack

– Nesting Layers

– Hold Control key and drag layer to target layer

© Anselm Spoerri

Create & Manipulate Layers

Create Layers

– Have to be in “Standard Mode”– Insert > Layout Object > AP Div (Layer)

or

Click “Draw AP Div” (Layer) button in “Layout” toolbar, then drag to draw

Manipulate Layers – Must select layer before you can move, resize, or align it

– Resize and move layer via Layer Handles

– Align Layers

– Select layers, then Modify > Align > Alignment option

– Create Nested Layer

– Place insertion point inside existing layer and choose Insert > Layout Objects > AP Div

– Drag Draw Layer button from Objects panel and drop inside existing layer

© Anselm Spoerri

AP Div (Layer) Properties

Layer ID = name

Position - L and T (left and top) – Relative to top left corner of page or parent layer (if nested)

Size - W and H specify the width and height of layer– Overridden if the content of the layer exceeds the specified size

Possible Dimensions – px, pt, in, mm, cm, %– Abbreviations must follow the value without a space

Visibility - visible, hidden, inherit– Use a scripting language, such as JavaScript, to control the visibility

Z-Index - determines stacking order of the layer– Higher-numbered layers appear above lower-numbered layers

Overflow – what to do if contents of layer exceed its set size– Visible (increases layer size) Hidden (clips content) Scroll (adds scroll

bars) Auto (scroll bars only if excess).

© Anselm Spoerri

Step 0 – Download files, Launch Dreamweaver, Define Site

Create folder “mplec8” in “My Documents” folder

Download Files (select zip file & extract into “mplec8”)

http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture8/stepbystep/

Launch Dreamweaver

Define Site– Site > New Site– Local Info : Local Root Folder = “mplec8”

This Week1. Use Layers to create “disjointed” rollover without need

to use GIF or JPEG images example

2. Use Layers to create simple animation example

© Anselm Spoerri

Step 1a – Create Layers with Images

Create Layout Table (800 x 600)

Select “Standard Mode” – Necessary if you want to create layer

Create Layers with Images– Click “Draw AP Div” (Layer) button in “Layout” toolbar, then drag to draw

– Layer1: W = 160, H = 120, Name = Paris, Overflow = hidden

– Layer2: W = 160, H = 120, Name = Furcup, Overflow = hidden

– Select Layers (using SHIFT select) and apply “Modify > Align = Left”

– “Paris” Layer: Insert image “paris” …

Press F12: notice overflow hidden

Select image and resize to 160 x 120 and name = paris

Press F12: whole image now visible

– “Furcup” Layer: Insert image “furcup” and resize to 160 x 120 and name = furcup

© Anselm Spoerri

Step 1b – Create Text Layers and Manage Visibility

Open file “layers1”

Create Layers with Text– Click “Draw AP Div” (Layer) button in “Layout” toolbar, then drag to draw

– Layer3: W = 250, H = 150, Name = IntroText, Visibility = Hidden

– Layer4: select and copy “IntroText” layer, deselect and paste(notice: “ParisText” is in exact same position as “IntroText” as we want it)

Select top layer in “Layer” Window and rename it “ParisText”:

– Layer5: copy & paste “IntroText” and rename “FurcupText”

Enter text into three layers– Select layer in “Layer” Window and enter text

AP Elements / Layer Visibility Management– “AP Elements” Window: click in “eye” column to make “IntoText” = visible

and drag “IntroText” to top of stack

– Make “ParisText” and “FurcupText” = invisible

© Anselm Spoerri

Step 1c – Use Elements (Layers) to create “disjointed” rollover

Open file “layers2”

Attach “Show-Hide Elements (Layers)” Behavior to Images– Select “paris” image

– “Behavior” Window: click “+” and select “Show-Hide Elements (Layers)”

– “Show Hide Elements (Layers)” Dialog: select “IntroText” and “hide”– “ParisText” = show and “”FurcupText” = hide

– “Behavior” Window: select event associated with “paris” imageand click on pull-down menu to select “(onMouseOver)”

– Attach behavior for “(onMouseOut)” to image “paris”where now “IntroText” = show and “ParisText” & “FurcupText” = hide

© Anselm Spoerri

Timeline Window

Open Timeline Window– Window > Timelines

Animation Channels – Display bars for animating layers and images– Animation bars show duration of each object– Different bars cannot control the same object in the same frame

Keyframes = specified properties for timeline object– Specify properties such as Position or Size of object– DW calculates intermediate values for frames in between keyframes

Behaviors Channel – Specify behaviors to be executed at specific frame in timeline

Timeline Options– Playback options: Rewind, Backward or Forward– Fps = Frames per second = 15 frames good choice for most browsers– Autoplay: Timeline plays automatically when page loads in browser– Loop: “Go To Timeline Frame” behavior inserted after last frame

© Anselm Spoerri

Step 2a – Place Object on Timeline

Open file “layers3”

Create Text Layer “Play” button

– W = 40, H = 20, Text = “Play”, Typesize = 1

Create Image Layer image to be animated

– Create layer = “SpringFeast” and Visibility = hidden

– Insert image “springfeast” and resize 160 x 120

Open Timeline Window– Window > Timelines

– Drag & drop “SpringFeast” onto first Timeline channel

(make sure you select layer and not content of layer)

– Creates object with default (15) frames

– Can change start and end frame drag end frame to frame 45

– Channel can have multiple successive objects

© Anselm Spoerri

Step 2b – Create Timeline Animation and Keyframes

Create Animation– Select circular end keyframe of “Springfeast” on Timeline

and move it to frame = 45

– Select “SpringFeast” layer and move to end location of animation

Add Keyframes– Select object on Timeline

– Select frame on Timeline

– Modify > Timeline > Add Keyframe

– Select layer and move to desired location

– DW calculates intermediate values for frames in between keyframes and fits smooth curve passing through keyframe locations

– Add Keyframes at frame = 15 and 30 to create curved path

(length of animation = 45 frames)

© Anselm Spoerri

Step 2c – Add Behaviors to Text and Timeline Frame(s)

Open file “layers3a”

Attach Behavior to Text– Select text “Play”– Assign # = dummy link to “Link” slot in “Property” Window– Attach these behaviors for “onClick” event:

– “Show-Hide Elements (Layers)”: “SpringFeast” layer = show– “Timeline > Go To Timeline Frame” = 1– “Timeline > Play Timeline”

Attach Behavior to Timeline Frame– Select last frame of animation and click in “Behavior” track– Attach Behavior:

– “Show-Hide Elements (Layers)”: layer “SpringFeast” = hide

Press F12

Final file “layers4”

© Anselm Spoerri

Example 2 – Timeline Animation

Example 2

Create Complex Paths– Add & Move Keyframes

Change Size of Layers– Can also use % to specify layer size– Make sure final size equal to content

Record Path of Layer– Select a layer and move its start position– Choose Modify > Timeline > Record Path of AP Element (Layer)– Drag the layer around the page to create a path.

Tips– Reveal Text: Use Clip feature– Attach Behavior to Image: Image needs to have a name

© Anselm Spoerri

Animation - Playback Scenarios

Playback ButtonsText - select text, assign # = dummy link and attach behaviorImage - select image and attach behavior

PLAY always from start– Attach behaviors 1) “Go to Timeline Frame” = START

and 2) “Play Timeline” to PLAY button (order matters!)OR– Attach “Go to Timeline Frame” = START to PLAY button– Attach “Play Timeline” at START Frame

PLAY from current frame– Attach “Play Timeline” to PLAY button – Attach “Stop Timeline” to STOP button– Requires REWIND

REWIND automatically– Attach “Go to Timeline Frame” = START after END Frame

( creates LOOP if first frame has “Play Timeline” attached)

REWIND on request– Attach “Stop Timeline ” at END Frame– Attach “Go to Timeline Frame” = START after END Frame– Attach “Play Timeline” to PLAY button

© Anselm Spoerri

Modify Timeline & Animations

Modify > Timeline – Add / Remove Frame, Keyframe, Object or Behavior

Modify Animation– Animation Length: drag start / end frame marker to left / right

– To prevent the other keyframes from moving, press Alt

– Start Time: select bar(s) and drag left or right

– Keyframe position: select & move keyframe marker

– Shift animation path: select entire bar and drag object on page

Copy & Paste Animations– Select and copy object(s) in Timeline

– Paste selection into current or different Timeline in same or different document– Animation bars for the same object cannot overlap

– If document contains a layer with the same name, Dreamweaver applies animation properties to the existing layer

– Timesaver: create animation once and apply it to other layers– Select and copy animation in Timelines

– Click any frame and paste animation

– Right-click pasted animation and choose Change Object from context menu

– In dialog box, choose another object from pop-up menu

© Anselm Spoerri

Animation Tips

Show & Hide Layers Instead of Changing Source File for Images

– No noticeable pauses or missing images if all images are downloaded at once in hidden layers before the animation runs

Extend Animation to Create Smoother Motion

Increase Number of Frames per Second (fps) to Improve Speed

– Most browsers cannot animate much faster than 15 fps– Test animation on different systems with different browsers

Don't Animate Large Bitmaps– Create composites and move small parts of the image.

For example, show a car moving by animating only the wheels.

Create Simple Animations – Browsers always play every frame in a timeline animation, even when

system or Internet performance decreases

© Anselm Spoerri

Behaviors - General

How to Attach Behavior to Text– Can not attach a behavior to plain text. – Easiest way is to add a null link (#) to the text,

then attach a behavior to the null link.

Behaviors Window– Window > Behaviors– Press (+) to attach action.

Press (-) to remove selected action.– Actions for a given event are executed in specified order.

Use (up) and (down) arrow buttons move the selected action. – Order of execution of actions can be changed only for a

particular event, e.g. onLoad or onClick event.– Different events appear depending on the object selected.

Make sure the correct page element or tag is selected. – To select a specific tag, use the tag selector at the bottom left of

the Document window.– “Show Events For” specifies the browsers in which the current

behavior should work.

© Anselm Spoerri

Events – Useful Subset

onClick – User clicks element and releases mouse

onDblClick – User double-clicks the specified element

onLoad – Generated when an image or page is loaded

onMouseDown – User presses the mouse button

onMouseOver – Mouse first moves over specified element

onMouseUp – Generated when a pressed mouse button is released

© Anselm Spoerri

Behaviors for Controlling Layer or Timeline

Attach behaviors to link (# = dummy link), button (image), or place in Behaviors channel:

Drag Layer – Lets the user drag a layer in (un)constrained fashion– Use this action to create puzzles, slider controls, and other moveable

user interface elements.

Show-Hide Layers – Shows, hides, or restores default visibility of one or more layers– Useful for showing information as the user interacts with the page

Play and Stop Timeline

Go To Timeline Frame – The Loop check box in the Timelines panel adds the Go To Timeline

Frame action after the last frame of the animation, causing it to go to frame 1 and start the animation again.

Set Text of Layer – Replaces the content and formatting of an existing layer on a page with

the content you specify. The content can include any valid HTML.

© Anselm Spoerri

Timeline Behavior Channel

Select Frame in Behavior Channel and Add Behavior

Change Property– Type of Object = “Layer” and specify Named Object– Property to change: Layer Height & Width or Layer Visibility

Play Sound– Browse to select a sound file, or enter the path and file name

Text of Layer – Choose the target layer, enter a message in the New HTML field

Show-Hide Layers– Shows, hides, or restores the default visibility of one or more layers

Swap Image – Use to create (disjointed) rollovers– From the Images list, select images whose sources to change

Timeline Behaviors– Go To Timeline Frame, Play Timeline, Stop Timeline

© Anselm Spoerri

Conversion: Layers & Tables

Some prefer layers & tables instead of layout cells & tables.

Create layout using layers, then convert them into tablessince 3.0 browsers don't support layers.

Modify > Convert > Layers to Table– No overlapping layers

– Cannot create table from overlapping layers, because table cells cannot overlap

– Modify > Arrange > Prevent Layer Overlaps– Dreamweaver does not automatically fix existing overlapping layers

when you turn on “Prevent Layer Overlaps”

– “Use Transparent GIFs” fills last row with transparent GIFs.Ensures same column widths in all browsers. Cannot edit the resulting table by dragging its columns.

Modify > Convert > Table to Layers– Can't perform conversion in a template document