1. Dreamweaver Fireworks Flash
Macromedia Academy
Dreamweaver
Fireworks
Flash

2. Introduction & Terminology
URL
IP Address
HTML
structure tag
browser
refresh (F5)
server
upload / publish
FTP
editor
hyperlinking
extension
JPEG
GIF
plug-in
WebDAV*

3. A Forward Regarding Design!
Design For Your Audience
test with inexperienced Web users
Keep Location Evident
“breadcrumbs”, links correlate destination
Maintain Consistency
natural colors, footers and headers
Build Simplicity Into the Design
balance, readable, contrast, “chunk” text

4. Bad or “Dorky” Features
default gray color for background
busy backgrounds
poor color combinations
text is too small or too big
centered type over flush left body copy
paragraphs in bold, italic, all caps
underlined text that is not a link
large graphics, blinking text, under construction signs

5. Good Design Features background does not interrupt text
the hierarchy of information is clear
navigation is consistent
links are underlined so they are clear to visitor that they are links
pages download quickly
no lateral scrolling in browser
good use of graphical elements (photos, subheads, quotes) to break up large areas of text

6. Recommended Resources
Web Style Guide: Basic Design Principles for Creating Web Sites
Lynch & Horton
The Non-Designer’s Web Book
Williams & Tollett

7. Day Two
Fireworks

8. Day One Review Terminology & Design Create “website” folder
index.html, images folder, naming files
Dreamweaver Workspace
“Property Inspector”

9. Day One Review (cont.) Page Properties Finding and Inserting Images
titles, background, links
Finding and Inserting Images
CTRL + click (or right-click)
“Save Image As…” into website folder, extension!
Inserting Hyperlinks
“absolute” vs. “relative”
target: _blank

10. Day One Review (cont.) Preview Page in Browser Using Tables For Layout
fixed vs. dynamic widths
border = 0
merge or split cells
Additional Pages
“Save As…”
“Web Friendly” Documents

11. Day One Review (cont.)
Background Pictures
CSS Styles (no-repeat)

12. Day One Review (cont.)
Drawing Layers or “Containers”
insert menu

13. Day One Review (cont.) Publish to eBackpack Finder
> Go > “Connect to Server…”
Upload to Sites Folder

14. Introduction & Terminology
.PNG or .png
.PSD or .psd
.JPG or .jpg or .jpeg
.GIF or .gif
.TIF or .TIFF or .tif or .tiff
compression (lossy vs. lossless)
resolution 72 ppi (or dpi)
resolution 150 ppi (dpi)

15. Today’s Objectives Optimize a photograph(s)
Create “rollover” navigation buttons
Create Web banner(s)

16. Day Three
Flash

17. Day Two Review Terminology File > Export Preview… compression
optimization at 72 ppi
File > Export Preview…

18. Day Two Review (cont.) Creating Buttons “Bevel Boss” Filter Layers
Marquee, Pointer, Paint Bucket, Rectangle, Type, Fill Tools
“Bevel Boss” Filter
Layers

19. Day Two Review (cont.)
Navigation Bar Feature (Dreameaver)

20. Day Two Review (cont.)
Web banners
Gradient fills

21. Day Two Review (cont.)
Web banners
Gradient fills
Polygon Lasso tool

22. Day Two Review (cont.) Web banners Gradient fills Polygon Lasso tool
Resize using Modify > Transform > Free Transform
Feathered Selections
Masking

23. Introduction & Terminology
.swf
.fla
stage
playhead
timeline
keyframe
layer
tweening
object
symbol
fill
stroke