Transcript Your Web Expressions Toolbox

YOUR WEB EXPRESSIONS TOOLBOX
THREE WAYS TO USE WEB PAGES -WWW via the Internet
Local via an Intranet
Individual Computer
TOOLS MAY BE USED IN OTHER APPLICATIONS
OR STAND-ALONE
Image Editing
- Photoshop
Sound Editing
Video
Flash Movies
WEB Page
Power Point
MSWord
Stand-alone
x
x
x
x
x
link
x
x
link
x
x
link
x
x
x
x
WEB PAGE DESIGN - DREAMWEAVER
•Table layout – organization, color design
•Insert images – still and GIF animations
•Embed sound, video, flash movies
•Link sound, movies, flash movies
•Link – your pages, WWW web pages
•Background – color, texture, image
•Timeline animation
•Jump Menu
Web Page Layout -The thirty square inches at the top of a
home page comprise the most visible
area of the Web site. Most readers will
be looking at your site on a seventeen- to
nineteen-inch monitor, and the top four
or five vertical inches are all that is sure
to be visible on their screens.
Think in terms of newspapers – “Above
the fold”
VIDEO
Movie Maker
•Import Images
•Captions and Credits
•Transitions
•Effects (Zoom in-out, Scan)
•Narrate
•Music
•You-tube videos – embed on web
page rather than link
IMAGES - PHOTOSHOP
•Fix color, brightness, etc.
•Resize or crop
•Remove portions
•Remove areas of similar color
•Transparent background
•Combine images
•Frame
•Feather
•GIF animations e.g. Slideshow
SOUND
•Wav, mp3, midi formats
•Download (unzip)
•Sound Editor
•Record
•Text-to-speech conversion
•Create/Combine sounds
•Cut/Paste (reduce/expand length)
•Change format
TEXT
•Size (points)
•Color and contrast
•Font
•Style (bold, underline, italics)
•Live(typed) text vs. drawn text
ANIMATION
GIF
•Download
•Create in Photoshop
Flash
•Motion Tween (Rotate)
•Shape Tween (Morph)
•Sound
•Stop
•Buttons
SOME DREAMWEAVER NOTES
PROBLEMS WITH LINK OR PLUG-IN?
SAVE WEB PAGE IN “HOME” AS SOON AS
YOU OPEN A NEW WEB PAGE IN DW AND
BEFORE LINKING OR PLUG-IN
MAKE SURE ALL OBJECTS (WEB PAGES,
SOUND, FLASH MOVIE, ETC.) ARE IN HOME
BEFORE YOU LINK OR PLUGIN.
No “file” or disk drive designation
JUMP MENU -- INSERT -> FORM -> JUMP MENU
Select from list and click
“Go”
DON’T CLUTTER A PAGE WITH TOO MANY
IMAGES
USE THUMBNAIL IMAGES TO LINK TO LARGER
IMAGES WITH ADDITIONAL INFORMATION
ALSO, DON’T FORGET “ROLLOVER IMAGES”
IMAGE MAPS
SOME FLASH NOTES
Adding Sound to Your Flash Movie
•Obtain a mp3 or wav sound
•Import to Library
•Create a layer for the sound
•Insert a keyframe where you want the sound
to start
•Drag the sound from the Library to the Stage
•Note -- You may need to edit the sound to fit
before importing it to Flash
TO STOP THE MOVIE AFTER PLAYING
THROUGH ONCE ==>
Stop();
Must be at a
keyframe!
CONTROLLING YOUR FLASH MOVIE
THE LENGTH (TIME)
SIZE
PAGE BACKGROUND COLOR
Time(seconds) =
Number of Frames / Frame per second
•Select frame rate for smooth animation
•Select number of frames to adjust length of movie
Example:
At 12 fps, a 60 frame movie will last 5 seconds
At 10 fps a 60 frame movie will last 6 seconds
At 10 fps a 100 frame movie will last 10 seconds
NOTE: A FLASH MOVIE MAY BE SAVED AS A WEB
PAGE AND/OR LINKED
INCORPORATING TEXT FILES
SAVE FROM MSWORD AS -> PDF
LINK FROM YOUR HOME PAGE
CREATE BLOG AND LINK FROM HOMEPAGE
See Blog tutorial on my web site
Creating GIF Animations in Photoshop
Moving Banner
http://www.youtube.com/watch?v=bb0GOskGFPc
Images Fade
http://www.youtube.com/watch?v=bZiiMwhhmmY
Image Morph
http://www.truekolor.net/how-to-create-morphing-effect-animation-photoshop/
More Techniques http://www.youtube.com/watch?v=9lF6w7LwpFI
NOTE: Some tutorials are for CS5 and instruct you
to open the timeline with Windows -> Animation.
In our CS6 use Windows -> Timeline.
Everything else is the same.
PERCENTAGE REMEMBERED
COMPARED to METHOD of LEARNING
1
10% Of what we read
2
20% Of what we hear
3
30% By watching a demonstration
4
50% Combining #2 and #3
5
Combine #4 with writing out notes of what you
70%
learn
6
90% All of the above plus application or practice