Macromedia Academy

1
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
• pages download quickly
• 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-Designers 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
• 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
• gt Go gt Connect to Server
• Upload to Sites Folder

http//eportal.guhsd.net/usr123/website/index.htm
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
Todays Objectives

• Optimize a photograph(s)
• Create rollover navigation buttons
• Create Web banner(s)

16
Day Three

• Flash

17
Day Two Review

• Terminology
• compression
• optimization at 72 ppi
• File gt Export Preview

18
Day Two Review (cont.)

• Creating Buttons
• 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 gt Transform gt Free Transform
• Feathered Selections
• Masking

23
Introduction Terminology

• .swf
• .fla
• stage
• playhead
• timeline
• keyframe
• layer
• tweening

• object
• symbol
• fill
• stroke