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
Course Reward
In Future Classes
Will Work on
Final Project
Comfort
Interactive
Multimedia
Website that
Communicates
Building Tension
For Breakthrough
Beginning of Sense of
What is POSSIBLE
Sophistication
© 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.
2.
3.
4.
5.
Add Nav Bar Element by selecting “+”
Name = “category”
Select images for “Up”, “Over”, “Down” and “Over while down”
Set “When clicked …” = browse to file for category
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 Week
1. 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” image
and 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 Buttons
Text - select text, assign # = dummy link and attach behavior
Image - 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 tables
since 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
© Anselm Spoerri