Dreamweaver Fireworks Flash Macromedia Academy Dreamweaver Fireworks Flash

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

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

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

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

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

Day Two Fireworks

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

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

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

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

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

Day One Review (cont.) Publish to eBackpack Finder > Go > “Connect to Server…” Upload to Sites Folder http://eportal.guhsd.net/usr123/website/index.htm

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)

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

Day Three Flash

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

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

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

Day Two Review (cont.) Web banners Gradient fills

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

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

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